Direction in Layout: Grids, Arrows, and CRO

Posted by on May 20th, 2014

 

direction-in-layout

The best designs help the viewer navigate visually through the provided content. By using lines and color to lead the eye and provide emphasis, a designer can effectively decide what order something is viewed in, and which points the reader will stop on. (No, we don’t let this super power get to our heads…. usually.)

But how does this all work? We’ll let you on our secret: it’s all based on the principals we learned way back when in design school.

Designing with a Grid-Based Approach

Long ago, in the far-off land of design school, we were taught how to design on a grid. Web designers will immediately think of grid-based responsive layouts; but the grids we’re talking about have existed long before the web. They’ve been used as artistic tools for paintings and drawings across the ages. Today, we use them to make visually appealing websites and print ads.

Grids can provide solid structure and layout for a design, making it easier for a viewer to follow the piece. Essentially, the grid dictates where important elements of your designs should go. Art students and photographers will immediately recognize the rule of thirds, which states that important visual elements should be placed at the intersections of a 3X3 grid.

rule-3

But a 3X3 grid isn’t your only option. Many different grids exist, each providing emphasis to different points of the page. You’ve likely seen two column layouts, which lay important elements on two separate halves of the design. You can also split your design horizontally, cut it into quarters, or choose any other combination you like; what’s important is that you stick to it during the design process.

If you don’t want to split your page into even chunks, you can also try aligning it based on the Golden Spiral or the Fibonacci Spiral, based on the golden ratio and the Fibonacci sequence respectively. These spirals determine their curve using a predefined sequence of numbers to create a pattern that’s pleasing to the human eye, making them excellent compositional tools.

Once you’ve selected a layout that makes mathematical sense, use it as the template for your design. As long as you stick to it, the end result will be visually balanced and structurally sound; the rest is up to you.

golden-spiral

Oh, Holy Arrow: The Directional Side of Conversion Optimization

arrow

As with the principles of design, the principles of conversion optimization have been around since long before the web. Initially, the field of conversion optimization began as a way to test the effectiveness of headlines and designs in print marketing. Advertisers would tweak their ads, showing different headlines to different sections of the nation. As advertising evolved for the web, conversion optimization became more important and easier to practice; headline tests could be accomplished with a tweak in code, and results could be tracked more efficiently than ever.

One thing modern conversion optimization experts love is the arrow. It doesn’t get more direct than a literal arrow, pointing the way to the section you’re supposed to be looking at. As a designers, this drives us nuts; it’s just a little annoying to be told to put an arrow on everything. On the other hand, it’s fun and challenging to find new, creative ways to incorporate arrows as part of a complete design.

And that’s where grid-based layouts come in.

Directional Guides in Practice

We recently designed a print ad for Conversion IQ, a Denver-based conversion optimization company that we frequently work with. (Yes, they’re the ones adding arrows to everything. And we love them for it.) Their ad had to be completely optimized for conversion – and that meant that we needed to direct the reader’s attention across the page.


The Grid

To help with processing information, the visual elements and the content follow a grid structure.

Here’s our ad with a 3X3 grid, showing the URL falling on the intersections of the grid.

Notice the top portion of the ad has been intentionally left “outside” the grid, adding  further emphasis to a green arrow , and helping the ad stand out from other same-size ads in the publication (yes, web guys run print ads too).

rull-of-3


visual-guidance

The Magic Arrow

Let’s follow the arrow (and a few color clues) straight to the important information – where to go for the free review.

Starting top left, we invite the reader to enter the ad and  “Uncover Customers”; the magnifying glass handle leads them down to the offer, and the blue arrow picks them back up to highlight the free review details.

We wrap it all up with a value statement and company logo.


The Golden Spiral

We utilized the golden spiral to help organize our layout, but to also guide the viewer through the content on a second pass (let’s be honest – no one ever reads the full ad  in a single pass).

Our spiral starts at the URL (providing an additional subconscious focus on the words free-review), and spirals outward through the rest of the ad.

We then spiral on up to the top and reinforce the the headline

golden-ratio


ciq-conversion-ad

The Full Layout

And there you have it: A quick peek into the world of layout, including a grid to help organize content; the mighty arrow, with color clues to help guide the viewer to each step; and a handy spiral to prioritize and re-emphasize.

Oh, and if you happen to be in Chicago this June 10th through 13th, you might be interested in IRCE booth #645!

About 

Kandra is influenced in her design by everything from Hubble Space Telescope imagery to the strawberry plants in her garden. Her concepts are known for their characteristic combination of warmth, simplicity and functionality, and for their strong resonance with her clients’ brand and corporate identities.

Questions or Comments? Leave a reply, we would love to hear from you.


Phone: 303.995.1472 Site Map
Top