Website Design Resources – Good Web Design Principles
Good website design – What makes a good website? It probably depends on who you ask. A big online retailer with an ecommerce site at the heart of its business probably has different needs in a web site than, let’s say, an informational site on good web site design techniques. Although there are some basic principles to building a good website, every web design project is a unique expression of the individual needs of the site owner.
Good website design begins with proper planning – and lots of it.
Establish Your Client’s Needs
High quality website design always begins with a detailed assessment of the client’s needs. It is essential that you clearly establish the purpose of the website by determining what information, products or services the web site will aim to provide. Is your client’s goal to build brand awareness by establishing an online presence? Or is the goal to reduce the advertising budget by designing a search engine friendly site that will rank high in organic search results?
A key point to remember is that a quality web site should be modeled around what it intends to accomplish. An ecommerce web site for example, should load quickly and be easy to navigate – Flash animations and other graphic design elements should be kept to a minimum.
Your Target Audience
Your target audience is a select group of people you are trying to reach through your online marketing efforts. Researching your target audience is a must. A quality web site design plan will take into consideration the demographics of the intended audience before the project even begins.
Target audiences can be defined by things like age group, nationality, income level and geographical location. Who are the people you will attract to the site? What internet browser are they likely to be using? Will they be visiting your site over a broadband connection? Compile as much information as possible as it will assist you in planning the design of your web site.
Planning Your Site Design
“Wireframing” is a commonly used technique that can be very helpful in planning the design of a website. A wireframe, or a “web wire frame” is a visual guide to your website that is used to represent the structure of your web site and the relationship between its web pages.
Cross browser compatibility considerations are an important part of high quality website design. Many web designers design web sites with only one browser in mind – the one they use. A good site design will accomodate for web site visitors using a variety of different browsers, and a good well planned design will include copious browser compatibility testing.
A good way to check browser compatibility is to download and install several different browsers and make sure your web site displays correctly in all of them. See our web design resources pages for more suggestions on how to check browser compatibility and how to optimize your design for your target audience.
The most common monitor screen resolutions used are 640 x 480 pixels, 800 x 600 pixels and 1024 x 768 pixels. A web site optimized for a screen display of 1600 x 1200 pixels, for example, would display very poorly on a monitor only capable of displaying 800 x 600 pixels. The viewer would constantly be scrolling left, right, up and down in order to view all the content. A quality web site desgn will be optimized for the majority of the estimated screen sizes of the target audience demographic.
Graphic Elements and Download Speed
Back to the question, “What makes a good web site?” A well designed web site will find a balance between graphic elements and content, based on a number of variables determined by researching your target audience. A few things to consider are: the attention span of your viewers, the internet connection and download speed they will be using and the necessity of a graphic laden site to relay your message.
A web site showcasing graphic designers and their work would be expected to contain a sizeable amount of graphic elements – and the targeted audience would expect that – and more than likely be a little more tolerant of longer donload speeds. A traffic heavy ecommerce website, however, should be built with the objective of loading as quickly as possible so as not to fall victim to the consumers short attention span.
Although you may have the latest and greatest Flash, Java, Shockwave and other plugins installed on your computer, many people do not. In fact, most larger businesses require that the majority of these browser add-ons be disabled, whether it’s for network security or productivity issues. More importantly, many of these technologies can make your web site difficult to navigate for users with accessibility issues and virtually invisible to search engines.
Good website design reflects the specific needs of your target audience.
Visual and Graphic Elements
A common theme of colors, fonts and simple graphics will be incorporated into the layout of each good web page. Understated graphics combined with quality content can be much more effective in putting your web site viewers at ease than a disorienting, light on content, graphic based web site.
Proper use of white space is a critical component of good site design. A good web page will use white space to structure every graphic element and to seperate and organize content throughout the page.
Consistency in the various sections of your site from one web page to another helps create smooth transitions and keeps the user from being overwhelmed or getting lost within the site.
- Navigation elements should be kept in the same place throughout the site, with the possible exception of the home page
- The same fonts should be used for their respective sections (headings, navigation, etc.)
- Foreground and background colors (and textures) should be kept the same throughout the web site
- Website logo should be displayed in the same spot on each page of the website and should not be dispersed throughout the site
Designing the visual elements of a web site with these principles in mind will help create and maintain the “brand identity” of the site.
User Interaction and Navigation
The most important part of designing a good website is understanding the needs of your target audience and reflecting them in the design of your web site. Consider how the users of your website will navigate through the content to reach the information they are looking for. A straightforward navigation system is critical for quickly delivering your information, products or services to your target audience. When designing a navigation system, remember these basic principles:
- Keep the site navigation scheme simple and consistent throughout the web site
- When possible, use text links rather than graphics for accessibility and SEO purposes
- If images or Flash are used for the main navigation, place clearly labeled text navigation links at the bottom of the page for accessibility
- Navigation aids such as a site map can be helpful to your web site users in quickly finding the information they need
- Stay on top of your links: broken links – whether internal or external – are very unprofessional
A well thought out navigation system and site structure is the backbone to a quality web site and is a critical component of good site design.
Content is King
A good site design principle to remember is that “content is king.” Well written, informative content properly structured and punctuated with action verbs is sure to direct a long steady stream of quality traffic to your web site. For more information on content copywriting, see our article on how to write web content.
Good website design integrates search engine friendly architecture.
For most web site owners building a web site is only half the battle. The challenge is getting ranked high enough in the search engine results pages (SERPs) to increase visibility, and consequently traffic to the site. A good site design plan will integrate several key features to ensure a search engine friendly web site. These principles are covered in much more detail in the SEO Resources section of our web site.
Content and Keywords
Content created with search engine optimization in mind is designed to achieve organic rankings by appealing to the reader and to the search engine. A good web site will have keyword rich, naturally flowing, original content. Web sites that simply stuff keywords into long strings of poorly written text are ignored – and sometimes penalized – by the search engines. The goal of any quality design plan should be to generate authentic and effectual content that gets your visitors to take action and increases your web site rank in the search engine result pages.
Title and Meta Tags
The optimization of several technical components of your web site is crucial in ensuring that the search engine spiders can see that your content is relevant for a particular keyword or key phrase.
Title Tags: Title tags are very influential in determining the rank of a web page. The content of your title tags also have a substantial effect on determining for what terms your page will rank. Additionally, when a visitor opens a page on your web site, the contents of your title tags are displayed at the top of the browser, informaing the user about the content of the page.
Meta Description Tags: The contents of your description tags give you the opportunity to summarize what your web page is about to the user. Many search engines will display the contents of your description tags underneath the title of the page when your web page appears in the search engine results.
Meta Keyword Tags: Keyword tags give you the opportunity to provide a few words that are relevant to a web page. Although many search engines pay little attention to (or even ignore) these tags, they should still be implemented for those that do not.
The title and meta tags of a good web page will provide its viewers with brief yet informative summaries of what the content of the page is about. These tags should never be ignored as many search engines will display the contents of both the title and description tags on the results page of a query.
Header Tags and Text Modifiers
One of the qualities of a good web page is the use of header tags and text modifiers to organize content into categories and subcategories, as well as emphasizing words or phrases to express significance. In addition to giving your content a visual topical hierarchy for its visitors, header tags and text modifiers help search engines lend priority to different keywords and phrases of your choosing.
Graphic elements and images, from the perspective of search engine friendliness, will be kept to a minimum in a well designed web site. Realistically, the design of most web sites will include a few images, for example, to display a logo or a particular product. Although search engines can not see these images, Alt image descriptions can be used to provide text descriptions of the images. Not only does this provide more keyword content for search engine algorithms, but also aids in compatibility with nongraphical browsers.
More Web Site Design Resources:
- About Us Page»
- Multiple Browser Compatibility»
- Using CSS Design»
- Good Website Design»
- HTML Text Content»
- Website Navigation»
- Meta Tag Use»
- Robots txt File Use»
- XML Sitemap Use»