What Makes A Beautifully Designed Website?

It is tough to get a nicely designed site that has visual appeal, but at the same time is usable and isn’t overly busy.  The mistake of many web designers is that too much emphasis is put on graphics, and not enough on the content.

A few points that overall make a website aesthetically pleasing are:

1. Layout and Composition
2. Color
3. Typography
4. Imagery

Layout And Composition

Layout and Composition is the starting point at which a design is created.  For most designers it is tough trying to come up with new ideas for each website, and decide how it is going to lay out.  One of the most important things needed at this stage is a good overall background of the company.  What do they do? Who is your target audience? What are their goals? Any design been done previously such as Business cards, posters, etc…?

Once you have a good idea about the above elements, you can beginning creating some initial sketches.  These are usually done using some scrap paper, dinner napkin, or anything you can get your hands on.  You sketch out the typically web components, not worrying about fancy graphics yet.  Are you going to have a horizontal or vertical menu? Liquid or Fixed width? Pages going to have a sidebar?  Is local navigation needed?

Once this wire frame is done, you can finally open up Photoshop and design your layout using graphics and text that you see matching the companies branding.  One thing to remember is that good design pleases users, but the actually reason they come to your site is for content.  “Content is King” is a phrase I have heard many times over.  The graphics just support, and give you a professional look.

Color

Color is a vital part of any web design.  Color is something that brings life to your website and sets the mood.  You may not realize that different colors have a mood surrounding them.  For example:

• Red – exciting, dramatic, anger
• Orange – happiness, sunshine, hunger
• Green – nature, fresh
• Blue – Intelligence, faith, professional, calming

When designing a site, you want to select several colors that you want to include and stick to them.  Choose 2-3 different colors, and then use shades of each to draw different attention to each.

Here I will mention an acronym that will change the way you view any website, or advertisment.  The acronym is CARP.  CARP stands for Contrast, Alignment, Repetition, and Proximity.  These are all factors that you want to include in any design descision you make.  When choosing colors, the one that applys is Contrast.  Select colors that can contrast well.  White text on a black background will draw attention just because of the fact that the colors are complete opposites.  Down the road I may expand more on the CARP theory.

Typography

We all hate reading that tiny text that is all squished together with very little whitespace.  If I come across a website like this, I usually don’t care how great your content is, I will hit that backbutton.  Choosing the appropriate fonts can go along way to keeping your visitors interested.  The web has a bad rap when it comes to fonts as you need to stick to the defaults such as Times New Roman, Arial, Georgia, Verdana, etc…  Many print designers when they design for the web are completely lost using only these fonts.  They usually will creates sites entirely in graphics with no text as then they have the most control.

Most fonts can be defined into two categories.

• Serif
• Sans-Serif

Serif fonts are ones that have a little tail on each letter that guides the eye along the text.  Times New Roman would be the most famous font that falls in this category.  Newspapers, and printed material make extensive use of serif fonts.

Sans-Serif fonts do not have the serif (tail) on the letters.  It is thought to be easier to read than serif on monitors.  This is due to the fact that monitors do not have the level of detail that printed type can.  A monitor has a DPI somewhere in the 72 range, and print is usually at 300 DPI.  These fonts are also great for headlines.  An example of a sans-serif font is Arial.

Imagery

Imagery really complements all of the above points well.  It has been said that “a picture is worth a thousand words”.  Well on the web it is no different.  People are known to scan the web and not read large blocks of text before deciding if they want to stay.  What can grab the visitors eye than an image that complements the content well.

Images come from a variety of sources.  You can take your camera off the shelf, go and visit the client and take pictures.  You can use images the company already has taken in the past, use free images from the web, or even hire a professional photographer to take some images.  All of the above do the trick in different ways.  Icons can be taken from different sites to help give the visitor a little visual clue as to what a page does.  A shopping cart icon draws a users attention sooner than text that says “Shopping Cart”.

There are just a few of the points to be made about creating that pleasing layout over and over again for each one of your clients.  It is not always an easy task, but keeping the above in mind will go a long way to keeping your design usable and eye catching.

I suggest purchasing the following book, if you wish to learn more on this topic.

The Principles of Beautiful Web Design

Related posts:

1. Tired of SIFR? Get a Facelift!
2. PNGs, PNGs, and more about PNGs
3. Designing the Website – Part 2
4. What is the price tag of a website?
5. Spicing up a Feedburner Feed with Pure CSS

Tags: design

Written by Brenley Dueck