Nature is the greatest Designer.
While we design for the web, we have a lot to learn by studying Nature itself. At the end of the day, it’s all about balance and harmony, contrast of shapes and colour.
As if by magic, things in Nature stand-alone proud and beautiful, on solid ground, shouting-out their “message”, serving their own purpose – either one of attraction or an attempt into camouflage.
On the web, of course, we strive for “attention” and “trust” that leads to “Call-to-action”.
On the modern web we now design web pages using all kinds of new and exciting design elements such as flying images, large copy text, bold use of colour, infographics, blurbs, sliders, parallax effects, multiple columns, etc. When put together, properly, during the Web Development process, they too can help deliver the page’s purpose, which is none other than engaging web page visitors and convincing them to “convert” by following-through the page’s Call-To-Action.
- Sample 1 30% 30%
- Sample 2 60% 60%
- Sample 3 20% 20%
- Sample 4 85% 85%
On another post I’ve talked extensively about how to quickly tell if your website can turn visitors into customers. Here, I am talking specifically on how to best utilize modern design elements.
In particular, here are 4 tests you can run on your design elements, to validate their effectiveness:
1. Attention. If an element doesn’t get the page visitor’s attention at some stage, then there’s no point having it on the page at all. But the time at which this happens must be right. It is pointless for a Call-to-Action to get his attention before the page has first established a high desirability factor. And it’s pointless for the page to “create the need” before the visitor knows where he is and whether he wants to read the page. Use design elements to grasp the visitor’s attention in sequence.
2. Direction. A visitor reads left to right, top to bottom. Web design elements must fall logically into that path: Arouse the interest and orientation before “create-the-need”, before information and Call-To-Action.
3. Contrast. The path a visitor’s eyes will follow on the screen can be strategically altered with the use of contrast. Contrast is achieved in four basis ways:
- Color. Bright colors, particularly red and orange, catch Joe’s attention.
- Dimension. Larger elements, unusual shapes, or parallax effects with their “virtual” third dimension, will stand out more.
- Movement. Animation gets a lot of attention; “flying images”, animated pull-down menus, auto slideshow sliders, interesting hover effects, as well as implied movement (eg. arrows) also work well.
- Separation. Anything that stands alone will catch the eye. Rows in different background colours work well.
4. Balance. Just like in Nature, on web pages too Balance is of paramount importance. Try to keep the relative size of your design elements the same, and if not use “quantity” to bring balance. For example, if you use columns of unequal widths, use multiple “heavier” elements (eg. images) on the narrow column to balance-out the weight of the wider column.
Perceived value and gains are measured primarily in emotion, not in time or money. By unlocking the “magic formulas” Nature itself is using, we will be one step closer in creating beautiful pages that serve their purpose well.
By putting our visitors into an emotional state and a thought-process of trust through our balanced design, we bring them closer to our ultimate objective of convincing them to click on our Call-to-Action.
You don’t optimize pages.
You optimize Thought Sequences.