Web design 101: Page Layout
On this web design 101 article i explain the importance of web page layout and some features you need to consider when designing a web site.
Web page layout has to deal with technical issues as well as aesthetic ones.
The technical issues include: how large the files size can be, what layout style will better fit your goals, what screen resolutions your layout will be supporting.
The aesthetics choices are: how we arrange the text, areas of focus, call-to-actions, white space, what kind graphics or images transmit the spirit and goals of the website.
The main step for a good web page layout is to understand the medium in which is involved.
File Size Concerns
As it is logic the larger the file size of a web page document the longer will take to load.
The total file size equals to: HTML, css, javascript, images, flash. video and audio.
The latest four are the biggest “overweight” of any web document due to their potential file size. This can create potential download problems by decreasing the site loading time.
In the other hand HTML, css and javascript are text based files which usually have a fast loading rate.
Taking this in consideration we need to create a balance between elements that are critical and the ones that we might not need at the beginning of a project.
Screen Resolutions
Nowadays the screen resolutions varies depending on the visitors personal preferences, however the lowest resolution available is 800px X 600px but this is no longer used in most of the cases, therefor the reccomended resolution widely adopted is 1024px X 768px. This resolution is a safe choice to void horizontal scrolling, which in most cases is a usability issue.
Layout Options
The two main options which i consider when designing websites are: Solid Layout and Liquid Layout .
Solid Layout
With Solid Layout, you basically set a fixed width to your layout, and whatever the visitors screen resolution your website will allays offer an uniform experience throughout the entire site.
Liquid Layout
These layouts are layouts based on percentages rather pixels, allowing your design to adapt to any screen resolutions. This kind of layouts provide a very useful way to display a lot of information but still remaining consistent in smaller screen resolutions.
Personally i prefer solid layouts simply because they offer the same experience to any user independently of their screen resolution and also in terms of development time as this is much easier to accomplish, therefor the cost passed to a client would be less.
Visual Consistency
When designing a website layout we need to keep a consistency across the entire website and how do we achieve this?
1 - Limit the number of elements on each page, this means that you should only display the essential elements for your site purpose.
2- Repeated elements will bring a feeling of order, harmony to your site.
3- Repeat a master page layout throughout the entire site, this not only will improve the website usability but also will improve your conversion rates as the users will become used to your interface allowing them to reach their aims quickly. This means that you keep the same layout changing the colors or graphics depending on your needs.
Page balance
Their are three main descriptions on page balance: Symmetrical pages, Asymmetrical pages and Unbalanced.
Below i display three different images, that express the web page balance theory.
Symmetrical
As you can see on this image all the elements are divided in clear blocks of content all with equal spacing.
Click here to view this design
Asymmetrical
On asymmetrical designs the flow is different as you can see on the following the main part of the web site is floated to the left leaving an asymmetric feeling to it.
Click here to view this design
Unbalanced
Unbalanced layout is simply something like “get creative and blend it together”.
Click here to view this design
Website Wireframe
At this stage we have decide what kind of layout we want plus what elements are required for the web site which lead us to wireframing a basic page layout, which lead us to the next article.
Conclusion
On this web design 101 article i introduce the basic concepts of page layout for the web.
When designing a website the page layout element is an important fact and will be better accomplished once you have an idea of what information you want to pass to your website visitors.