Step 3 – Designing a Website
Knowing as much as possible about your target audience is extremely important to good design. The more information you have about your user, the better you can tailor a design to suit their needs.
Therefore, the first questions to ask when designing a website are:
1. Who are your users?
2. Why do they visit your web site?
For example, the main users of my first website, Home-Gym-Bodybuilding, are male weight lifters. So the colors I chose were blacks and grays with just a touch of red (representing blood?). Design ideas come from the type of market and the types of users. Of course all my content is bodybuilding related.
However, you don’t need an award winning design for your website to be successful. Remember, content is what web surfers are looking for.
The Homepage
The homepage is the most important page on most websites, and should clearly communicate the site’s purpose, and show all major options available on the site. Website visitors don’t always enter a website from the homepage. They can follow links from search engines and other websites that reach two or three tiers deep inside your site. But, one of the first things these users do after arriving at a new site is go to the homepage.
Generally, the majority of the homepage should be visible “above the fold,” an old newspaper term. In website design this refers to the portions of a webpage that can be visible without scrolling. The most important design elements should be above the fold, such as navigation, logo, search engine and the most important content.
Research indicates that many users will naturally scan through content in a left-to-right pattern similar to a “Z” shape. A designer can choose to place elements within a screen layout to capitalize on this natural eye movement.
Start the homepage with a headline that summarizes what the site or company does. Nothing says amateur web designer more than: “welcome to our website”.
Use Descriptive Headings
Users don’t read on the Web: They scan the text. Most readers scan the homepage for link titles and major headings. Requiring users to read large amounts of prose text can slow them considerably, or they may avoid reading it altogether and leave your website.
Use well-designed headings that help to facilitate both scanning and reading your material. Use as many headings as necessary to enable users to find what they are looking for—it is usually better to use more rather than fewer headings.
Type
Type can make or break your message, by enhancing the writer’s intention or changing it entirely. Typography can be the one design element that sets your work apart from other designers in the arena of substance over style. The shape and form of your type can convey a visual message without even reading a word.
Most of the time when I come across a webpage that is just one big block of text, I hit the back button. Writing for the web is a little different; you need white space between paragraphs that are two or three sentences, max. This method will support scannability.
I cannot believe that some website designers use a distracting background with the text on top and expect to get their message across to their user. Keep your backgrounds simple. White or light colors usually work best. Your background should not compete with the content of the page for the users’ attention.
Black text on a white background (like books) works best and even white text on a black background works.
In order to read comfortably online the user needs larger type and more white space around the text, which allows the eye to rest.
Many experts recommend that for easy comfortable reading on screen, fonts should be:
San Serif
Veranda or Arial
An ideal 12 point
A contrasting value or saturation with the background color
Graphics
Images are worth a thousand words. Images must support and enhance the message. Many times, they ARE the message. If your selected photograph, illustration, graphic symbol or icon, is not precisely on target and representative of the message, then those thousand words might as well be no words.
Make sure the images you use are optimized for quick loading. My web host sets the maximum jpeg size at 100kb. Always use the image ALT tag and specify an images height and width for faster downloading.
Make sure your logo is on every page and clicking on it leads back to the homepage.
Please do not use cheap clip art, divider bars, any kind of animated gifs or flashing graphics. Leave this to the amateur designers.
Navigation
A Web site’s navigation scheme and features should allow users to find and access information effectively and efficiently. Designers should include site maps, and provide effective feedback on the user’s location within the site. In well-designed sites, users do not get trapped in dead-end pages.
A site’s navigation should tell you where you are, where you’re going to go, and how to get back to the home page.
Provide feedback to let users know where they are in the Web site. Feedback provides users with the information they need to understand where they are within the Web site, and for proceeding to the next activity.
Examples of feedback include providing path and hierarchy information (i.e., ’breadcrumbs’); matching link text to the destination page’s heading, and creating URLs that relate to the user’s location on the site.
Other forms of feedback include changing the color of a link that has been clicked (suggesting that destination has been visited), and using other visual cues to indicate the active portion of the screen.
One study found that navigation times were faster when the primary navigational menu was located in the left column. Pointing-and-clicking, rather than mousing over, is preferred when selecting menu items from a cascading menu structure. One study found that when compared with the mouseover method, the ’point-and-click’ method takes eighteen percent less time, elicits fewer errors, and is preferred by users.
Links
Generally, it is best to use the default text link colors (blue as an unvisited location/link and purple as a visited location/link). Link colors help users understand which parts of a Web site they have visited.
Designers should use meaningful link labels (making sure that link names are consistent with their targets), provide consistent clickability cues (avoiding misleading cues), and designate when links have been clicked.
Whenever possible, designers should use text for links rather than graphics. Text links usually provide much better information about the target than do graphics. To avoid user confusion, use link labels that clearly differentiate one link from another. Users should be able to look at each link and learn something about the link’s destination. Using terms like “Click Here” can be counterproductive.
Clear labeling is especially important as users navigate down through the available links. The more decisions that users are required to make concerning links, the more opportunities they have to make a wrong decision.
Indicate to users when a link will move them to a different location on the same page or to a new page on a different Web site.
On long pages, provide a ’list of contents’ with links that take users to the corresponding content farther down the page.
Titles
Put a descriptive, unique, concise, and meaningfully different title on each Web page. Title refers to the text that is in the browser title bar (this is the bar found at the very top of the browser screen). Titles are used by search engines to identify pages.
If two or more pages have the same title, they cannot be differentiated by users or the Favorites capability of the browser. If users bookmark a page, they should not have to edit the title to meet the characteristics mentioned above.
Remember that some search engines only list the titles in their search results page. Using concise and meaningful titles on all pages can help orient users as they browse a page or scan hot lists and history lists for particular URLs. They can also help others as they compile links to your pages.
Conclusion
Make it easy for users to find info on your website. Add a search box and make sure it works.
Make sure your site loads quickly. Even in the 21st century not everyone has broadband or a cable internet connection.
Your site should be easily navigated.
And the #1 design feature….provide relative content that your users are looking for.
Don’t add any design element that gets in the way of your most wanted response, (a sale, click an affiliate link, etc). Anything you can do to make your web site user friendly, and highly interactive, that will keep visitors at the website longer, will contribute a great deal to putting dollars in your pocket.
Design your website so it will work well with the most popular operating systems. You should attempt to accommodate ninety-five percent of all users. Ensure that all testing of a Web site is done using the most common operating systems (latest versions of: Windows Explorer; Mozilla Firefox; Google Chrome; and Apple’s Safari).
Want to learn more about good website designs? Study bad designs:
