Golden Country

Good web page design does not differ much from print. Consistent branding, clear and readable type and optimum white space still apply.

On screen reading gravity
Heat maps generated from user eye-tracking studies suggest a dominant reading pattern is shaped like a letter ‘F’. Users first read in a horizontal movement, usually across the upper part of the content area where the brand sits, forming the F’s top bar.

Next, users track down the page and then read across in a second horizontal movement that typically covers a shorter area than the previous movement. This forms the F’s lower bar.

In other studies, the dominant reading pattern is typified by a letter ‘Z’. This is more applicable to pages which do not scroll and have a maximum depth of 500 pixels. These may include a homepage, or an html email.

Like the ‘F’, the reader begins with a strong horizontal sweep. Where the ‘Z’ pattern differs is where the eye moves next. It falls to the bottom left, and then tracks right where it comes to rest.

The top right and bottom left are the power spaces. These should be reserved for important images, headlines and branding.

Page alignment
What both patterns suggest is a web page should be branded at the top of the page. Text should range left, ragged right, creating a hard left edge to guide the eye to fall downward.

Centred or right aligned pages should be treated with care. They work against natural readability.

Choosing fonts for web pages
Font sizes pose a major problem for web page design. In print, body copy is still readable at 9pt. On the web, it can be no smaller than 11pt. Content taken from a printed page and placed on a web page will run deeper, because the type has to be larger.

HTML code has some limitations for type. Font types are limited to default PC fonts. In addition, fine typographic controls available in print are not well catered for by HTML. For a long time, designers favoured Flash, as it provided greater typographic control.

However, new versions of Cascading Style Sheets (CSS) have provided some answers like space before headlines and leading control.

Unlike print, sans serif fonts are easier to read than serif. Research proves the sans serif is read 11.5% faster than serif. As a rule of thumb, use no more than three fonts on one page. Avoid reversing body copy (white text on a coloured background). Reversed content is easy to read in print, but hard work on screen.

Allocate white space
The tendency is to coat the entire web page with content. The idea being ‘more is better’. When it comes to readability, less is better. A page with no white space is congested and confusing. A well-spaced web page ‘breathes’ and allows the reader to gauge the hierarchy of elements.

White space is no accident. The more white space surrounding elements like logos and headlines, the more attention they are given. For example white space between paragraphs and in the left and right margins increases comprehension by almost 20%. (Lin, 2004)

Layout using grids
The use of the layout grid system allows for flexibility and creativity while maintaining a sense of order uniting all the page elements. Grids are not literally drawn on the page – they are merely a guide. Nor do elements need strictly fit one column.

In the example note how the elements can break out and range across multiple columns to create contract.

A simple page may only require a three or four column grid. A complex page might need nine columns.

The more columns you add, the greater flexibility is in your layout.

Grouping page elements
Web pages need to communicate a sense of order. By grouping major elements together in designated areas your reader can quickly scan the page and be drawn in to read further. Elements in proximity imply a relationship.

Consistency
When engaging with a page long enough, the reader’s eye becomes ‘trained’. A trained eye which has grown accustomed to the page, can read more. To effectively train the eye, make sure type, grid, and grouping of elements are consistent.

How to analyze a website is the first, and most important step, in the website design process. It requires answering several questions about this website you’re going to create. Now’s the time to start a journal. Write down the following questions and give some serious thought to your answers.

Why are you creating this website?

Your answer is important. It will determine the content, design and development of your pages. Do you have some interesting information you’d like to share? Do you have a product or service to sell? Do you want to display your artistic/creative talent? Do you have some terrific website links you want to let the world know about? Really think about this and then write down your thoughts.

Another way to think about this question is what is the goal of this website? Is it to entertain, instruct, inform, persuade, share, sell or display? The answer will provide you with direction and focus as you design your site and help you to develop your theme.

Who is my target audience?

What type of visitors do I want my site to attract? What are the demographics of your audience. What will be their age, sex and education? Will they search out my site because we share a special interest, do the same kind of things or are they looking for specific information? Is my target audience the business community, stay-at-home moms, artists, or sports enthusiasts? Or is it a combination of several groups?

Be as specific as you can about this. Try to pinpoint a certain type of individual then learn as much about them as you can so you can tailor your website to suit them. The key to website success lies in your ability to express your message in such a way as to create interest for your visitors. You can’t do this unless you know who they are.

How can I communicate effectively?

Once you know who the audience for your website will be, what is the best way to communicate with them? Are they looking for a fancy site with lots of interactivity? Do they want all the information on the first page? Would they prefer the content be categorized so that they can access only the section they want? Do I need to include an order form? Would a message board be a good way to communicate?

The way your visitors perceive your message will determine how they react to it. If you are seeking to sell something to your visitors make that clear from the start. People don’t like to be fooled into taking action. Be clear and forthright in your method of communication and your website will stand with the best of them.

What information do I need?

If you are designing a site for a client, you will need to know the answers to the preceding questions as well as what their vision is for their site. Do they have a logo they want you to use, do they have specific colors in mind, do they want to include phone and fax numbers on their pages? If this is your own business site, these are questions you should answer also.

When creating a personal website, such as one providing links to other sites, it is considered good netiquette to contact the site owners and let them know you are linking to their pages. An advantage to this is that often they will provide a reciprocal link to your site!

If you are using someone else’s graphics and/or pictures, you should request their permission and plan on providing a credit link somewhere on the page where they are displayed. Are you going to have a message forum on your site? Are you going to have an e-mail list for informing visitors of updates or new content? These are all things you need to consider…and make note of in your journal.

What content (data, graphics, photos, etc.) will be included?

This is the big job…gathering all the content that you want to include on your website. Are you going to use photos? What kind of graphics do you want? And what information or data are you putting online! Are you going to provide tutorials? Right now, just make a list of the items you think you will want to have on your website…you don’t need to gather it all together yet.

Make notes about what you need to do such as scan photos or documents, locate or create graphics, write tutorials, sort and organize data. This is a good time to create folders or binders for your website project so that you can keep the content organized. You might need one folder for Graphics, one for Photos, one for Data, one for Tutorials and one for Miscellaneous information. Your content will determine the folder titles you need. Don’t let all this overwhelm you…it will all fall into place.

Planning your website

Time spent on this most important phase of website design will pay dividends in the long run. The planning that you do now will make things much easier once your website is online. There are a multitude of details that go into the design of a professional site and solid planning in the early stages of design will help eliminate problems down the road. Remember to spend as much time as necessary planning your website.

Planning and organizing are the most crucial steps in designing a website. Once you have a clear picture of what you are trying to say it will be easier to devise a plan to present this information to your visitors. Planning your website is the key to creating a website that is robust, effective and easy to maintain.

There is a debate among web design experts as to who is responsible for procuring content for the website. Many professionals want the content to be the responsibility of the site owner. The reasoning is simple – the site owner should have a better understanding of the site products or services than the web designer.

The other side to the argument is that the web designer needs to assist the site owner in obtaining original knowledge-based articles to compliment the site. In this scenario the web designer also works with freelance writers to develop all site content. This includes everything from “How To” articles to the “About Us” and “Home Page” sections.

Many web designers are interested in developing the ‘look’ of the website without being responsible for what the content says. However, more and more web design experts are beginning to offer full content services as part of their monthly or annual contracts. Obviously the customer bears all costs related to the content, but many entrepreneurs enjoy less work in site management.

One element to this that you should consider is that the web designer will charge you a content fee. The content request is assigned and purchased from a third party freelance writer at a lesser amount. You could pay 100% more than you might if you had worked with a freelance writer on your own.

From this standpoint it makes sense for web design professionals to provide the service because it provides an added revenue stream for them.

If, as an ecommerce business, you can write or have someone write original content you may actually have greater options you can consider when it comes to web design.

One of the most readily available forms of content is free-to-use article directories. These articles can be used provided you make sure to place all content on your site. This will likely include a brief author biography along with a link to the author’s website. In most cases this is a reasonable exchange for the use of the article.

A secondary source could be adaptable content from a supplier. This information is generally provided at no cost due to your partnership with the supplier.

A third source is to go directly to a freelance writing source to gain your own original articles.

If one or more of these options is workable you may find a template rich web design/host is an alternative that is cost effective and empowering.

You’ll notice I said empowering. This comment was made because of the satisfaction of being able to immediately addressing and altering multiple aspects of the site on your own and without the need for knowledge in html or other coding language can help you take ownership of your own site.

Perhaps it all comes down to your budget and to your willingness and ability to manage the content requirements of your website.