Simple Visual Techniques To Take Web Design By The Horns

Simple Visual Techniques To Take Web Design By The Horns

The success of your site depends on a lot of things, one of which (and a very important one) is where you place your content. Information needs to be accessible to your users. Keep in mind that there are a lot of options out there and people don’t often stop and look intently at each of the components in a site until they find what they’re looking for. If they don’t get what they want after the first few minutes (sometimes even seconds), they move on. With the use of a great title, you have convinced the visitor to click onto your site, but how can you persuade him/her to stay and look at what’s important in your site?

Maybe you’re wireframing or designing a mock up version of your site and you’re starting to think about content but you don’t know where to place important information or how to highlight it. Or what if you want your visitors to take an expected action (sign-up, download, etc.)? How to get them committed to your site?

Don’t worry! There are some ways that you can lead your visitors’ eyes to the information you want them to take in. You don’t need to use subliminal messages to attract your audience’s glance; here we’ll show you some basic concepts that you can implement in your site to lead the eye in the direction you want it to go. Some of these are commonly used in print design but here we’ll present them to you with some tweaks and tricks so you can apply them to web design.

Techniques not Tricks!

Rule of Thirds

One of the most important tips to consider is the rule of thirds, which refers to an exercise in which you use some guidelines to compose an image (or in this case, design a website). You can mentally divide the screen in 9 identical sections by drawing two vertical lines and two horizontal lines across it.

This rule states that those elements that are placed in the intersections or along the lines are the ones that are more visually attractive. Given that our visual direction moves from left to right (because that’s how we read) and from top to bottom, the first intersection (in the upper left corner) is the most visible one of the bunch and from then on.

Here you’ll see that the logo of designer-oriented website builder, Breezi, is placed in the top left corner so, when you click in, it’s the first thing you see.

 

In print, companies mostly place their logo on the bottom right corner because that’s where your eyes go last and it’s what will stay in the readers mind. Nonetheless, in websites, people can scroll and move around a page so there’s no guarantee that they will even look at the bottom right corner, so be careful with what you put there.

The rule of thirds also advises not to place important elements right at the center of the screen, because it’s predictable and uninteresting.

 

Lights, Camera, Action: Visual Direction

Another way to lead the eye in the “correct” visual direction is to use some suggestions. There are some really obvious and in-your-face approaches like including an explicit arrow that points directly at the information you want your visitor to see. Other more subtle ways, include photographs or design to help direct the eye.

For example, if you see a picture of a group of people looking at something very intensely, what’s the first thing that comes to your mind? You probably think: “What are they looking at?” and you glance in that direction. Same if the body language of a person is pointing at something; your eye naturally moves that way. Or you can take advantage of linear perspective, where different lines come together at some point in the distance, which you can use to suggestively guide the visitor to some specific area in your site.

In this next image you’ll see an example of visual direction. You’ll notice how the flow of reading directs you to the image on the right. This method makes the eye flow naturally until it stays in the area the elements are pointing to.

 

 

Rhythm and Accents

People need some kind of order: not all of your site’s components can stand out and you can’t use a thousand images to point at each of them. Like they say, you need darkness to appreciate light and this technique reflects just that. You need a solid foundation (rhythm) to bring out the highlights (accents). So first and foremost, you need to be clear on what it is that you want them to look at: maybe it’s a link, a button or some important key words. This way, you can use the other content in your site as a way to frame the really meaningful pieces. You can also take advantage of blank spaces and contrast to achieve this.

And Voilá!

That’s it! With these simple concepts you can persuade the eye and obtain a higher conversion rate. By merging the three, you can have a well-designed and focused website. Just remember to keep it all coherent and to make your design and content flow naturally.

 

FrontPage Image provided by Shutterstock

FrontPage Image: Web design project planning via Shutterstock

Posted in Web Design

Written by Dacia

Dacia is part of the “content marketing” team at Breezi; a website builder for designers and creatives alike. She has a degree in Communication Sciences and enjoys reading, writing and watching movies. Her guilty pleasure is watching really bad reality shows.

  3Comments

  1. website design   •  

    Good informative blog about the simple visual Techniques To Take Web Design. I like this i used this technique.

  2. Imran Khan   •  

    You’ve really superbly described tips and techniques to have a wonderful web design. Brilliant share.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>