Web Design of Any Complexity

You are here : Inertia Unlimited » Layout » Web Design: Layout

Introduction

Layout & Composition mark the beginning of a website’s creation; before color, texture, backgrounds, typography, navigation or any other element of web design are considered. This makes it the hardest step in web design – getting started. The best way to learn about layout is by looking at other websites you particularly like, then decompose and analyze its composition by drawing a diagram. You can save these web designs in something called a design morgue; a collection of graphics, fliers, ideas, layouts, patterns, inspiring images, and whatever else may help inform your design. However, you are not limited to things you put in a box. You can keep a morgue file on your desktop of documents folder with links and screenshots of your favorite websites, inspirational blogs, great online designs, artwork, and so on. Since layout is such an intensive subject and so intrinsic to a good website, you may want to keep a separate morgue just for layout.

What To Do Before You Begin a Layout

Before you begin to design your website layout, you need to ask yourself, and eventually your client, some essential questions.

What does this company do?
What function/purpose is this website serving? Will it be an online store or just informational? Does the client perceive that it will be an e-store in the future?
Do have a detailed site-architecture map (basically a site-map) and list of pages that will be included on the site?
What is your target audience?

Never start a design without having the answer to these questions. Even though it may not seem directly related to ‘layout,’ you will find through experience that the answers change a design radically.

Web Page Anatomy

The standard website layout can look like this:

There are many variations to a standard layout. However, in order to have an effective and working site you must have these elements:

Containing Block

Every web page has a container or “wrapper” that contains the all the content of the page. The container may be a <body> tag or a <div> tag usually with the ID of “wrapper” or “container” that contains all the content. It can also be a table though it is NOT encouraged, except for pages with tabular data. The width of the container can be fixed, meaning a set amount of pixels that never changes. For example, you can set the width to 950 pixels. When choosing a width size, remember you are limited by the average size of computer screens and should not exceed 950px. The width of a container can also be liquid, meaning a percent or relative unit that change with the size of the window. For example, a width of 100% will stretch the container to the width of the window. Note that it’s harder to control the design of a website in a liquid design. The type, images, and composition of the site will change with different window sizes. If you neglect to include a container completely, your website will be a mess. Think of it as defining the size of an actual ‘page’ or ‘art board’ in print. The only difference is the page can stretch (if you give it a liquid width), and grows downward.

Logo & Identity Block

The logo is one of the first items a visitor sees on your website. A logo is the visual identity of a company. Fonts, colors and imagery used on a company’s logo and print marketing should repeat throughout the website. This creates and promotes a defining identity and brand. The identity block on a website should contain the company’s logo and name, and sit at the top of the webpage. This enhances brand recognition and assures visitors they are still on the same website. If your client does not have a logo, strongly suggest they have one designed. It helps define the theme and design of a website, and doubles up as an icon and favicon (a tiny icon that identifies a website, located by the web address bar at the top of the browser). A website that does not properly display their logo and identity may detract visitors since they cannot identify the company or purpose.

Navigation

The most important thing to remember when designing for web is that functionality and usability are critical to good design, not just something that looks pretty. That means navigation that is easy to use and understand is key when designing a website. In order to develop navigation in the best possible manner, you must understand the site architecture before you begin.

Site architecture is the hierarchal structure of the pages in a website. Basically a visual sitemap like the example below:

Well-organized site architecture is very important to the success of a website. If there are too many links on a page, the visitor is bombarded and will miss key links and information. If the pages are not properly labeled, then there could be a communication failure causing visitors to leave your website. Most importantly, links should always be above the fold. The fold is where the viewing window cuts a page off at the bottom, and a web user must scroll to see it. That means, don’t put important links/categories like “services” or “contact us” in the footer. Put technical links like ‘sitemap’ and the copyright in the footer. Many people choose to reiterate their contact information. That is fine, but make sure contact information or a ‘contact us’ link is somewhere above the fold as well. Organize the pages under basic categories. The more pages, the more important site architecture and navigation are for good web design. Web interface is about simplifying something complex. The simpler and more organized you can make a complex site, the better the communication, which translates to better sales and visitor retention.

Widgets & Blog Navigation

This layout element is generally for websites with a blog. A web widget is a small application that can be installed and executed within a web page by an end user. On blog sites they include categories and recent post links. Other popular web widgets include dynamic calendars, galleries, recently posted documents and press releases. As a general rule, don’t put in too many widgets on one page. Widgets that are not necessary for navigation or have lesser importance (aka galleries, press releases, etc..), should be put in the footer or somewhere below the fold. It can be exciting to add in dynamic content on a website. However, too much on a single page (especially above the fold) can clutter your website and distract visitors from important elements and information.

Content

Studies show that a visitor on your site takes 1/20 of a second to construct his/her first impression. That is barely enough time to see the most obvious elements on a website. Make sure you create visual emphasis on the key elements, since that is primarily what is communicating to your (human) visitors. Most visitors look at/read headlines, logo & id block, imagery, and bold or large type. Not everyone scrolls, so make sure that most important content is featured above the fold, not below where it can get lost. Content has a slightly different purpose to non-human visitors (aka Google, Yahoo, and other search engines). Even though a visitor might not read the smaller print or text on a website, a search engine might. So don’t neglect content, and use text to include as many keywords as possible on your website. However, place text blocks with keywords below the fold so it doesn’t occupy what designers consider ‘prime real estate’ on the your website.

Footer

The footer is a visual conclusion. Your footer should reiterate important links, contact info, and can include the entire sitemap, widgets that show recent blog posts, press releases and galleries. You can also hide non-important technical links like privacy policy, copyright, a link to the web designer, partner sites, etc. However, every site must go through the ‘footer test,’ which requires that a site be fully functional (meaning the end user can access all the important pages, posts and galleries, and contact info) without utilizing the footer.

Whitespace

Whitespace is another term for “negative space” or space between imagery and text. Negative space is as important as the text and imagery it surrounds. If there was no empty space on a website, everything would be cluttered and run together. In order to provide emphasis on key elements of you website, whitespace must be carefully considered and maximized. A ‘clean’ site usually means the layout utilizes a lot of whitespace, allowing each element to ‘breath’ and be seen clearly. The goal of a website is to create a webpage with sufficient information, yet allow for enough space so the page doesn’t look cluttered and confusing. This can be a tedious line and it takes practice and experience to really master the use of whitespace. The first step to consider, however, is an element of its own.

Phone Number

A phone number is not always a mandatory element on a website; however it is usually extremely important. For most websites, whether it is a business, service or skilled professional, the ultimate goal is to be contacted. When creating a website you must consider your whole audience. That means considering those who are not computer savvy and those who prefer to CALL rather then click around on your website. For those people you must have a phone number on the homepage, above the fold, and usually contained by the identity block or header.

Conclusion

Now you have all the tools you need to start a website layout. When starting a new website, make a list of the categories mentioned above. Check off each element as you include it in your design. If you are updating or revising an old site, go through the list and make sure the site has all the essentials and is well organized and laid out. Here is a brief recap of the layout elements described in this post:

Containing Block: A container for all the elements in your website, usually in the form of a <div> or <body> tag.

Logo & Identity Block: This is usually the first element seen by a website user. It usually includes a logo, company or website name, and a short slogan or tagline.

Navigation: This is the element that allows your website users to find and navigate the pages on your site. Make sure that a HOME link is always visible throughout your website and that the logo returns visitors home as well (a standard practice).

Widgets & Blog Navigation: Generally applicable to blog sites and websites containing blogs. Don’t overdue widgets and dynamic content on a single page. It can clutter the website and confuse visitors. If you do want to include a variety of widgets, put the non-critical ones below the fold.

Content: This element serves two purposes in web design: 1) It tells the visitor what you or your company is about, and includes important facts, imagery, and web functions. 2) It can be optimized for search engines (SEO) by including keywords, well-labeled header tags and images.

Footer: The footer has evolved over the years in web design. Before it was simply a place to put privacy policies, copyrights, disclaimers, and repeat navigation for users at the bottom of the page. Today you can use it to include widgets, calendars, and other dynamic content. Many designers choose to put the site map in the footer too.

Whitespace: Even though this element literally means ‘empty space,’ it is critical for web design layout. Not enough whitespace means your website is too ‘packed’ or cluttered. It is important to let every element ‘breath.’ Carefully composing whitespace can also help to emphasize certain elements over others in an inviting and subtler way.

Phone Number: Though the phone number can be considered part of the Identity Block, it has its own sections since it is so important. Not everyone likes clicking around on a website, and each person has different degrees of web savvy. The phone number must be clearly placed in the header (unless you do not want phone calls) for those who prefer it “the old fashioned way.” This also makes it easier for an interested prospect to contact you directly without searching around your website.

Having the basic elements is only the start to learning good website layout. There are many more factors that dictate a good layout versus a bad one. However, if your site includes these elements then you are assured, at the very least, of a fully functional web design.

Additional Reading –

Decomposing a Website’s Layout: A Case Study On Maxwell Scott
Emphasis on a Website Does Not Have To Be Loud
Web Design: How to Properly Implement Forms on Your Homepage
Website Layout: A Case Study on Auto Bid Master