Imagery is one of the most powerful tools in visual design. When choosing or creating images for web page designs, it's important to use graphics deliberately to support your message and communication goals.
Don't reinvent the wheel for functional imagery.
Concentrate creative effort on imagery that adds value in branding or message (content).
Use imagery to add meaning: either to the brand, or to the content.
Try to be as economical as possible, and get more meaning from fewer graphics.
Imagery that has meaning (Primary imagery) should be the focus of a page design.
Concentrate primary imagery in the following areas:
Where other graphics are used, they should support the primary imagery, by helping the eye move over lower-priority elements.
This does not mean that non-primary areas can not be rich and subtle, but they shouldn’t be attractive, in the literal sense.
Flat colours, subtle contrast, gentle gradients, smooth curves, and fresh white space can help the user focus, and look great.
Remember the site’s goals and the users’ goals, and apply graphics in a suitable proportion.
Yaxay.com is a popular (and highly recommended) community site for designers.
Its pages are graphically intense, which is typical of the design target sector.
Most sites aimed at a web-designer audience employ very rich graphics, in order to demonstrate a level of graphic design skill to pass a supposed level of respectability.
The downside is that the content of this site definitely comes second to the background/interface.
It doesn’t prioritise the user’s goals, and I think the user experience is compromised.
I go on Yaxay nearly every day, but find it quite a tiring experience, compared to an energisingly fresh design (like Firewheel.com).
Specific issues:
It is quite possible that the designers of Yaxay were clear on their goals, and had decided that graphical richness was the right approach in order to hit a goal of gaining respect from their target audience.
If so, they succeeded – it would be hard to criticise their graphic design ability.
The initial experience of the brand is “skilled, rich, modern”..
However, I think they failed to prioritise the user’s goals highly enough.
Sites that fail to serve the user’s goals will tend to fail.
Clarity is more important than attractiveness for navigation (and other functional controls).
Controls should be easy to identify, and their purpose should be obvious.
The easiest way to achieve both of these qualities is to use established conventions.
You’re more likely to reduce usability by spending on designing functional and iterface controls.
It’s very difficult to create effective icons, and time-consuming for little impact.
Icons are incredibly powerful, when they work!
A good icon is a compact visual shorthand that represents a complex idea in the minimum space.
A good icon doesn’t need decoding – its meaning is so unambiguous or familiar, e.g. Printer means “Click here to print”, or an exclamation mark in a yellow triangle means “Warning” or “Alert”.
However, it is extremely difficult to design an effective icon, and harder still to design a consistent set.
Think hard about your reasons for using an icon.
If it’s justified to use them, go for established ‘iconic’ images.
Don’t try to reinvent the wheel.
An image doesn’t just become an icon, in any sphere of design.
It has to be used over a period of time, adopted by more people, and become established in the community consciousness.
(See ‘The pursuit of the original’).
New conventions are being established all the time, e.g. the two round-faced people, originally from MSN Messenger, are becoming global shorthand for ‘buddies’ or ‘contacts’.
Do you love our approach to crafting simple & effective web sites that just work for people?
We'd love to hear about your web strategy.
Contact one of our team today!
Sign up for my regular newsletter to keep updated on everything I'm doing and thinking about in web design.
©Firewheel design, see www.firewheeldesign.com
Firewheel’s site is an excellent example of energy well spent, creating a pure, focused experience.
This screenshot is 2/3 real size, and it’s still clear what’s what.
Navigation is simple text – there’s nothing clearer or more intuitive.
Background/Interface imagery is concise.
The designers clearly knew what brand image they wanted to project, and did it simply with confidence.
What draws your eye?
Initially, the Firewheel logo is attractive but simple.
Secondly, the page title “Professional-grade..” stands out because of its boldness, colour and clarity.
You are then drawn to the other imagery on the page, all of which carries value, reinforcing the company’s credentials, giving the user good quality information on Firewheel’s products and services, as well as looking good!
The page is also relatively quick to download.