Basics of Web Layouts

Web Layouts Should be Simple and Clear

Most designers tent to overlook the design layout when creating web designs.  They will work on how to do a layout (CSS, tables, frames, etc.), but often ignore the basics of Web layout completely. 

Space and Whitespace

Use the entire space, but don’t be specific in your use i.e. use relatively sized layout sections, so they can expand and contract to fit browser windows. Keep screen resolution must be kept in mind.  A majority of computer users have moved away from 640 x 480 resolution, which must be born in mind when designing.  Customers leaving because all they can see is a logo on their monitor, does not amount to good customer service. Make use of colour to define spaces.  If, you need a page of a specific width, centre it on the browser screen and give a different colour to the background page.  This helps the page resize for different browsers.  Large browsers show more background colour, while smaller browsers show less or no colour. 

Images and Graphics

Make sure all your images are perfectly aligned. Don’t make the common mistake of slapping images willy-nilly on to a web page, without thinking out its layout.  Using an image tag and then writing text to follow it, results in a image with one line of text to the right of it.  Use the align attribute to help make your images part of the layout. Balance graphics and text on a page.  Don’t get carried away and use lots of images and animations, as they will only serve to make the page hard to read.  While, planning out your layout, remember images are a major part of the design, not just afterthoughts. 

Text Width

Give adequate thought to text width, which often referred to as scan length, refers to how many words are displayed on one line.  Seven to eleven words on a line can be read comfortably by most people.  Longer than that, and the text gets hard to read, shorter than that and it looks disjointed and distracts.  When designing web layouts, ensure the major text area displays the text in a readable width. The first layout technique a new designer learns is the centre tag, which means they centre everything on their pages.  But, centring text is inadvisable, as it is difficult to do and often hard to read.

Advertisement

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 )

Connecting to %s


Follow

Get every new post delivered to your Inbox.