Building the Perfect Website Layout
The layout of a web page is usually what comes to mind when people think of web design. If you have a poor layout on your website, visitors won’t like the site and converting visitors to customers might prove difficult. One of the most overlooked aspects in Web design is the layout. Many people think about how to do a layout using web technologies such as HTML and CSS, but the basics of web layout are more often than not completely ignored.
Here are some guidelines to follow while preparing the layout for your website design:
Put your thoughts on paper first
This might seem very obvious, but a lot of designers jump straight into Photoshop before giving any thought to the website they are trying to build. Building a good website involves a good layout and clear hierarchy that can’t be resolved through gradients or shadows. Before heading into Photoshop, it’s important you put pen to paper and think about the content, layout and the functionality.
Sketch a top level framework
A top level framework is the User Interface that surrounds the content and helps to perform actions and navigate through it. The framework usually includes navigation details and components such as sidebars, bottom bars, buttons, etc.
If you approach your web design from this perspective, you will have a thorough understanding of what your layout needs.
Space and Whitespace
Use relatively sized layout sections on your web pages, so that they expand and contract to fit the browser window of the device being used by the visitor. It’s important you keep screen resolution in mind. Having customers leave because all they can see is a huge logo on their browsers, is not a good first impression for visitors to your website.
Text Width
It’s also important you think about the text width, which is often called the “scan length”. This refers to the number of words displayed on one line. Most people can comfortably read about 7 to 11 words on a line. Anything longer than that, makes the text hard to read, shorter than that and it becomes disjointed and distracting. While designing your layouts, make sure that the major text area displays the text in a readable width.
It is paramount you make good use of good layout techniques while building your website, since part of the user interface design is affected by the quality of the page layout.
