Inspect Element

Web Design & Development Blog

Good web design doesn’t just appear out of nowhere, there are many aspects of design that come together to achieve this. The first one that we’ll be looking in this 4-part-series is layout.

Layout is an interesting beast. There are no definitive right or wrong ways of approaching it. What you need to do is make sure that the layout works for the site that you are designing.

Layout primarily consists of the following aspects:

Whitespace

Whitespace is space between elements on a page. It is often referred to as negative space and good use of whitespace can be the difference between making a good design great. Simplicity will make a design easier to use and by creating more whitespace rather than cramming content up against each other, you allow the content more room to ‘breathe’ and therefore easier to notice.

Five Simple Steps

Effective use of whitespace as seen on Five Simple Steps

As you can see above, Mark Boulton has done a great job of using whitespace to promote his book, allowing elements such as buttons and text paragraphs to ‘breathe’ giving them the attention they deserve.

Flow

Flow in web design is the act of guiding the user through page. All sites some form of flow but some are more effective than others. Effective flow takes in all aspects of web design including properties that are not directly related to layout such as colour, size of element, typography and images.

Fever

The website for Fever is a superb example of flow in web designÂ

As you can see in the annotated screenshot above, there is a natural reading down the page. This is great as users are more likely to see all the content and less likely to miss important information.

• Notice the use of images to draw the attention of the visitor towards the next section which can be seen in points 2, 3, 4, 5 and 6.
• The use of typography helps take the user to the next sections as seen in 3, 7, 8 and 10.
• The horizontal red lines help to define sections creating a natural reading order  from left to right.

Alignment

Alignment helps create a good flow. As you can see in the example above for Fever, alignment plays a key part in the overall flow. Alignment also contributes to a natural order that makes content easier to scan and read.

A great way of getting to grips with this is to use a grid system with the most common grid system in use today being the 960 Grid System. You can download templates for all the major web design creation tools, Photoshop, Fireworks and Illustrator which overlays your documents with vertical lines split into 12 or 16 columns. This makes it easy to create multiple columns and keep elements lined up in place. It also keeps you working to a standard width of 960 pixels which works on the now minimum resolution of 1024 x 768. Modern monitors support this resolution or higher and even the latest netbooks have resolutions that are 1024 pixels wide.

The 960 Grid System is the most common grid system used today

Cameron Moll asks the question, is it time to move beyond 960? It can be once 1280 x 1024 becomes the standard resolution but for no it is much safer to design for 1024 x 768 until that day arrives.