How to Best Utilize Modern Web Design Elements

by | Feb 20, 2017 | Web Design | 0 comments

While we design for the web, we have a lot to learn by studying Nature itself. How to best utilize modern design elements and 4 quick tests you can run to validate their effectiveness.
Flower photo by Al Poullis

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.

Image sample Boat
  • Sample 1 30% 30%
  • Sample 2 60% 60%
  • Sample 3 20% 20%
  • Sample 4 85% 85%

Sample Blurb

Small Business Web Design – we turn your good ideas into solid, lead-generating web funnels.

Needless to say, you must first drive traffic to your web page with a proper local SEO Campaign. Don’t forget also that you can boost your SEO with better site speed.

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.




Submit a Comment

Your email address will not be published. Required fields are marked *

Related Posts

Burlington All-Inclusive Web Design solutions!

We cater to Burlington, Oakville, Mississauga, Toronto and around the world!

Burlington Web Design

Is YOUR website up-to-date? A new era of web design is here! Beautiful designs, modern standards. Refresh – Rethink – Get up-to-date!


SEO Services

White Hat, professional SEO methodology that focuses on human audiences to increase brand awareness and lead generation.

Office 365

Experience the legendary performance of Hosted Microsoft Exchange and other Office 365 Apps including Microsoft Teams.

Managed WordPress Hosting

The perfect complement to our web design service. Give your WordPress website enough power to shine.

Website Content Management

The content of a website should be changed quickly and frequently. We can manage the task for you!

Ready to get started?
Get in touch today!

How to Best Utilize Modern Web Design Elements