Project Discussion Part III: Effective Web Layouts

Hello, and welcome to Part III of this project discussion. Here we are talking best practices to designing layouts. Warning: VERY long post ahead.

Imagine you’re browsing the net and come across a website that sounds interesting. But the layout is a horrible mess; so bad it hurts your eyes. Colours clash, buttons are oversized, links lead to nowhere…

There are clearly better ways to design a layout than others. No good website will have anything that makes it difficult or unusable to the user. That’s in part why wireframes are used.

Joshua Johnson provides some tips to creating well-designed layouts. One: keep it simple. ‘Designers…have a tendency to approach a project while thinking that it needs to be completely unique in every respect to be worth our time and the client’s money. Great looking websites often use layouts that are fairly simple and not the least bit unique…but your average client just wants something usable, clean and professional’ (Johnson, 2011).

There’s that old saying: if it’s not broke, don’t fix it. A large number of websites employ the usual rules to design, such as search bars at the top. This isn’t as unique as it sounds, yet makes perfect design sense. Keep it simple.

Q: What are the ‘do’s’ of web design?

Keep it structured! This includes ordering elements so that they fit appropriate to each other, both in terms of size and content. This is very common in websites, as an unstructured layout is confusing and irritating. That does not mean you can situate elements anywhere; have a think about where they’d best fit.

Keep you eye on the ball! Never lose sight of what your original intentions of the website are for. Give them exposure and space in order to get the message across. For example, if the website is geared so selling a particular product or service, have that as the frontrunner.

Get the colour balance! We’ve said before that colours can clash, which makes it harder reading. Depending on your intentions, selecting the right scheme goes some way of improving interactions. Doctor/medical websites tend to have a lighter scheme to reflect the mood. Get yours right.

Make it easy navigation. No-one wants to spend ages looking for something on the web because you’ve placed it badly. Keep it tidy, clean and simple, Trust me, 5 minutes would be a generous time to get out of someone looking for something.

Keep it bleeding simple. People hate doing things that take up a lot of time. One notable example are sign-up forms. Forms that want a lot of information are more likely to never be completed. Always try to put yourself in the user’s shoes and how you’d want the site presented.

The killer touch! Keep the words you need to make it short and sweet. Also make sure they are appropriate to a particular element.  Choosing the right words for sign up buttons, page headings, navigation items and calls to action can be the difference between 50% sign up rate and a 90% sign up rate.

Keep loading times short. Visitors are important, and we all know people hate waiting. If your website takes ages to load, that’s a bad sign. Check your coding and see if you can optimise if better.

Fonts and sizes. Making your section titles the right size and making sure the fonts you’re using will greatly effect the experience your visitors have when viewing your websites. Generally speaking, you should use one main font for the content and then you may switch the titles of the pages to a different font. Never choose fonts that are too hard to read, and keep a standard font for the text.

Make it pretty. We’ve talked about trying to keep it simple, but at the same time you don’t want something bland. First impressions are vital to maintaining traffic. Utilize textures/gradients that give your website depth and draw attention to your design The world may tell you that people don’t judge a book by its cover, but that’s a lie.

Q: What are the ‘don’t’s’ of web design?

Don’t place elements just because you can! Nothing like a bit of clutter to really annoy the user. Keep elements consistent and appropriate to the site, making sure they are sized and positioned correctly.

Adverts. Generally, they are an annoyance, but to the web creators, a vital way to source income. If you’re going to have ads, make sure they aren’t excessive. Strike a balance between ads and important content. If ads are more than your content, chances are your users will never come back.

Colour schemes. Again, to reiterate the points, choose your colours wisely. You don’t need to use every colour! Try to maximise how many colours you use, and see what blends well together.

Endless stream of words. Imagine reading a really long essay without any paragraphs. It’d be an attack on your eyes. And them picture that essay talking about anything but the subject. Remember to break your posts at regular intervals if you need to write a long post; that makes it easier to read.

Irrelevance. Everyone (including me) is guilty of rambling on and on. If you need to write long, keep it relevant, interesting and important. If you need to write about your life, write about important topics and not what dinner you had last night!

Overused keywords.  If your page has the main keyword for your site stuffed into each paragraph 30-40 times, it will not only read very poorly, but you’ll be penalized. Writing should flow naturally and should only mention your keywords where they fit. Your readers aren’t stupid!

Over-complicate searches. If you want users to stay, make sure your layout is contained and easy to use. If you make it hard for people to find certain elements, don’t expect them to stay for longer than a minute. Perhaps consider a search box, or get the important things out in the open.

Image exposure. Don’t over indulge on fancy images. Rather, they should be used to compliment/support your text. Too many images becomes too much. This also can lead to websites loading more slowly, especially with bigger/more images.

Different fonts. Another reiterated point. Don’t choose different fonts because they look fancy; always keep one standard font for your text. We can give a little leeway to titles. but never have more than 2/3 different fonts to style different things. And try to keep comic sans to a minimum!

Never hope for the best. I’m guilty of this. Alyways plan what you want in the site. For this reason, use wireframes! Animated gif’s are your first no-no. After that comes the marquee scrolling text and the jumbled mess of text and graphics that resemble a 13 year old’s myspace page. It isn’t cute and in case you’re not aware of it, it’s no longer 1980. Things have changed and people don’t expect to see something that looks like a 7 year old made it.

Examples

So there’s some tips about designing effective, simple layouts. Now it’s time to look at some good and bad designs. Sharp readers will notice I break some of the rules here, but this is to highlight the issues. Let’s all picture ourselves as the viewer; we can judge if these examples are well-designed or not.

bad-web-design Good or bad?

good-website-design Good or bad?

68 This one’s obvious.

Button-Size Good or bad?

So I’m overloading on images. But the point should be clear that there’s certain ways to design your website that shouldn’t become a problem. I think the most important point is to keep things simple and relevant. Then you can begin to add the other layers on top. Below are links to two websites I used as source material. They are well worth a look.

Joshua Jackson’s article: http://designshack.net/articles/layouts/10-rock-solid-website-layout-examples/

For 20 do’s and don’t’s: http://webdesignledger.com/tips/20-dos-and-donts-of-effective-web-design

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s