Eye Catching Menu Blocks
Images, as menu items, instead of just words can make a far bigger impact on visitors. Go one step further and make the images standout with cool effects. We are all prone to loss of interest which is why images draw us in much more so having that extra little something else to definitely draw the eye. Did you see the way the items at the top of this inspiration page grow and get brighter when you hovered the mouse over them? That is just one of many possible effects.
In the examples below, we are back with Lottie and her gallery site. This time we are using image blocks to attract visitors to the 3 different galleries of pictures, Nature, Weddings and Architecture. But they are not just images, what we see are 3 different set of effects in play.
The first shows 3 greyscale images which may seem dull but hover the mouse over the images and see them bloom into colour. It is this transition effect that catches the eye. Have a go and see
Nature
Weddings
Architecture
Nature
Weddings
Architecture
This time the images start as colour but hover over them and see the images flip. Again another transition to add character to your menus.
Nature
Weddings
Architecture
Nature
Weddings
Architecture
In the next set we can see just colours, they are big and bold and will definitely be noticed but no images? Again hover over the blocks to see the images appear, further emphasising the object of the block
Nature
Weddings
Architecture
Nature
Weddings
Architecture
For our last set of examples let’s aim high. How about a stunning Landing Page with a fun image of Lottie along with her Site title.
At the end of this we have our full block stretched across the page. The effect this time is to scroll down the image, we start with the top of the image and end at the bottom as we hover. Try it out and this time click on the links to see Lottie’s photos
Lottie's Gallery
Lottie's Gallery
Captions can be added to any image (whereas examples above have had text over the image). But there are times when more information is required along with the image and any great effect. Image Boxes are the way forward adding Titles and Descriptions to images.
Below we have content from a nail bar showing some special offers on different styles. As well as the added text you can see that the hover will grow the image and add vibrancy via additional luminosity.
Stunning Reds
Vamp your night out with a range of red varnishes
Multi-coloured
Dress up your fingers individually
Vibrant Blue
Standout from the crowd
Funny Faces
A bit of sense of humour goes a long way
Below we have further examples but with round images. Our friendly photographer, Lottie, is using Image Boxes to highlight the different services she offers and so the images are not acting as links. So to add effects the images float and darken upon hover. And to further her message, Lottie has added lightboxes to each image so that a larger example of her work in that area.
Studio
Visit my studio for portraits and Family shots.
Personal Touch
Take me with you on a family day out, wedding or party and relax knowing the day is captured.
Staging
Create great product images for websites and brochures
Prints
All my personal shots are available as framed prints
Enhance
Let me enhance your own photos, remove red eye, adjust focus and colour to bring put the best of your subject
Lottie also takes it a step further by adding the Image Boxes over the top of a full page image to highlight her wedding photography services. This time no hover animation but instead of a menu link to another page (such as a gallery page in her menu’s earlier) this time Lottie displays Price Tables when the image is clicked. Go ahead and click on the “Capture the whole day” image to see an example.
Lottie's Gallery
Wedding Photography
Capture the whole day
Let me capture the whole day from arrival, post service, reception and evening.
The Service
Single session during and after the service.
The Evening
Add to your day and your social media/ website with a collection of party pics
Hen Night
Start the wedding off with an evening of great images.
So far the examples have been based around adding links to images to enhance the styling of a website. In other words not using buttons. But there is a way to improve the look and feel of buttons when the visitor has a choice of where to go next. Colour and Icons can be added to direct the eye to those choices. These are known as Dual Buttons. In a simple example below we can see a consultancy company is giving its visitors a choice of booking a session or asking a further question.
Like what you see, so what next?
If more than one set of options are to be presented then the buttons can be presented vertically
Like what you see, so what next?
But returning bacck to the topic of this inspiration page; lets add images to the buttons. As example from fasionshack, what do you want to shop for, woman or men?
My Latest Nature
Showcase
My Latest Wedding
Showcase
My Latest Architecture
Showcase
