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
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.
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
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
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.
Vamp your night out with a range of red varnishes
Dress up your fingers individually
Standout from the crowd
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.
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.
Single session during and after the service.
Add to your day and your social media/ website with a collection of party pics
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?
2400mm x 2400mm (8′ x 8′)
3000mm x 2400mm (10′ x 8′)
3530mm x 2400mm (12′ x 8′)
Ridge Height: 2667mm (approx 8′ 9′)
Door: Ledged and Braced
Window: 3 Pane Joinery Opening
Loft: Internally Braced
19mm Loglap cladding
Tanalised wood treatment
22mm Heavy duty flooring
Heavy duty galvanised door hinges
Security padbolt protector
Heavy duty roof felt
Window boxes (large or small)
Georgian style windows