Basic Web Design

Guidelines & Principles

SAIT 205
 Lesson Objectives
• Upon completion of this lesson students should be able to answer the
following:
• What are the design principles used when creating web pages?
• What are the criteria for evaluating the quality of websites?

• Sequence of focus lessons

● Basic Site Evaluation
● Color Theory
● Web Standards
● Planning a Website
• The Web Development Process
Criteria for evaluating Quality of a website
• Factors to Look for When Evaluating a Website
1. Appearance of the website.
2. Clarity of the information provided. Start with the
5-second test. Clarity separates well designed websites
from the poor ones. ...
3. Ease of navigating the website
4. Content.
5. Search Optimization
 The Homepage
▪Create a positive first impression
▪ Answer what, where, when, who, why + how
▪ Communicate the site’s value and purpose
▪ E.g., Site identity, mission, feature hierarchy, search

▪ Space compromise – use no more space than necessary

▪ Limit to one screen
▪ Don’t oversell the site
▪ Homepage layout may be different than other pages
 Criteria for Evaluating Websites…
a. NAVIGATION: assess whether a site includes main tools (i.e.
navigation menu, internal search facility) and links which
facilitates user’s navigation through a site. There shouldn’t be any
broken links and orphan pages.

b. ORGANISATION/ ARCHITECTURE: Relates to the structure of a

site’s information in which it is divided into clear logical groups,
and each group includes related information.
 Criteria for Evaluating Websites…(2)
c. EASE OF USE AND COMMUNICATION: Relates to the cognitive
effort required to use a website (user friendliness, security, site
maps etc), and to the existence of basic information which
facilitates communications with the owners of that website using
different ways e.g. contact us information, foreign language
support, quick downloading of web pages etc

d. DESIGN: Relates to the visual attractiveness of a sites’ design,

the appropriate design of a sites’ pages, appropriate use of
images, appropriate choice of fonts, colors in the design of a
website. There should be consistency in the design.
 Criteria for Evaluating Websites…(3)
e. CONTENT: Assess whether a site’s includes all the information
users require. The information should always be up to date,
relevant, there shouldn’t be “under construction pages”, the
information should be as accurate as possible.
Website Design Guidelines
1. KNOW WHO YOUR AUDIENCE WILL BE
• Have a goal in mind. What do you want to accomplish with your website?
• Few websites are meant for everyone.
• Style your pages appropriately.
• Are you appealing to Musicians, Homeowners, Vacationers, Corporate
Business or someone else?
• Someone looking for car parts just wants to find them in a timely manner

2. CONSIDER LOADING TIME

• Lots of graphics may look nice, but people don’t like to wait too long.
• They may leave your site before it ever gets done loading the home page.
Website Design Guidelines (2)
3. DESIGN A CONSISTENT LOOK
• Don’t use more than 2/3 Font Styles throughout your website.
• Be certain that your page look similar from one to the next.
• Don’t give people the impression that they’ve left your site somehow.

4. BUILD AN INTUITIVE STRUCTURE

• Create a well-organized website.
• Visitors to your site should ALWAYS know where they are in relation to
other pages.
Good Website vs. Bad Website Design
Good Website vs. Bad Website Design (2)
Good Website vs. Bad Website Design (3)
Good Website vs. Bad Website Design (4)
 Good Website vs. Bad Website Design

(1) POOR TYPOGRAPHY MAKES IT UNREADABLE / (2) RANDOM USE OF COLORS.

(3) UNBELIEVABLE NAVIGATIONAL STRUCTURE.
Good Website vs. Bad Website Design
Website Design Guidelines (3)
5. GOOD CONTRAST MAKES PAGES READABLE.
• Get advice from others about how easy your pages are on the eyes.
• Dark letters on light background or vice versa is a good rule of thumb.
• Text on background images is often difficult to read.
• Too many colors make the eyes moving around and therefore can distract
from your message.
Website Design Guidelines (4)
6. PROVIDE GOOD NAVIGATION CONTROL.
• Be sure visitors have clear options about where they can link to.
• Be certain that all navigation is CONSISTENT on all pages.
• DON’T MIX links to pages within your site with links to other sites.
• Remember, the more links you have to other sites, the more likely visitors
are to leave your site.
• Buttons can provide a more structured navigation technique than text. They
can add a greater sense of organization to your site.
• Visitors should not have to use the Browser’s BACK button to go back a page
from anywhere in your site.
Website Design Guidelines (5)
7. WATCH THE CLUTTER.
• It’s easy to put too much on one page.
• Break up your content into discreet units of information and link them
together.
• Watch the long scrolling pages.
• Be careful about becoming too text heavy needlessly.
• Find a good BALANCE between text, blank space and graphics
• Having to scroll left and right should be avoided.
• To accomplish this you should not design for very high resolution.
Website Design Guidelines (6)
8. BE CERTAIN THAT EVERYTHING HAS A PURPOSE.
• Don’t use animation, scrolling and other technology just because you know
how to use them.
• Blinking text is for amateurs. Viewers find it very distracting and annoying.

9. HAVE A THEME FOR YOUR SITE.

• A step up in design is to use a motif or pattern.
• Having a theme like a book or an automobile makes visitors feel like they’re
in a well organized place.
• It also lets them know when they’ve left your site
 Website Design Guidelines (7)
10. MARKET YOUR WEBSITE
• Use Meta tags prudently.
• Be descriptive.
• Think of what words people would use to try to find your site.
• Use as many descriptors as you can think of.
• Use descriptive phrases in your ALT attribute.
• Have an opening paragraph that is well thought out and descriptive
• Register your site with search engines.
Things to Remember
1. Test your web pages with several browsers- Firefox, Chrome,
Netscape and Internet Explorer
2. Test your website with different settings on your computer.
3. Change your color settings (256 colors, 65,000 colors, True Color)
4. Change your resolution (e.g. 640 x 480, 800 x 600, 1024 x 768) 5. Not
everyone has the same browser, computer or settings you do!
5. Get advice from others about your site.
6. Refresh your pages often. Don’t let your content become stale.
7. Use only the 216 safe colors
8. Market your site!
Reasons for having a website
1. ACCESSIBILITY
• Customers can easily find your business online at any time, from anywhere
(as long as they have an internet connection). For example smart phone
users can instantly view your products and services while in the car, plane,
restaurant or even while walking around town.

2. PROVIDE UNLIMITED INFORMATION

• A website allows you to display your products and services using text,
photos, video and audio (podcasts). You can add as many pages as you
like plus edit the information at any time.
Reasons for having a website (2)
3. INEXPENSIVE
• A website will lower your advertising costs. For example a yellow page ad costs
1000s of dollars and you can't edit the information once the ad is published. The
initial cost of your site may be $1000.00 or more depending on it's size and
complexity but your maintenance costs will be very small ( only yearly domain
name registration and web hosting).

4. INTERACTIVITY
• These days customers want to interact with your business before making a
purchase. Ways to add interactivity to your website may include adding a Forum,
Blog, RSS Feed, Contact form, Newsletter, Twitter, Facebook, Videos, Podcasts
or a Chat box. For example a Blog enables visitors to leave comments to your
posts. You can answer their questions by replying to their comments.
Reasons for having a website (3)
5. NOT LIMITED BY GEOGRAPHICAL AREAS
• Your website can be found locally, nationally and even worldwide if it is
marketed to those areas. If you want it to appeal to different countries you
can even translate it into different languages.

6. ATTRACT A WIDE AUDIENCE

• A website can attract thousands or even millions of visitors if marketed
nationally or worldwide. This is in sharp contrast to a yellow page ad
which only serves your local area. Attracting a wider audience generates
more sales thus making your business more profitable
Reasons for having a website (4)
7. MARKET TO A TARGETED AUDIENCE
• If you use Google AdWords you can create online ads that target customers
according to a specific geographical area, time and day. For example if you
know your product only sells on Saturday nights in a specific town your ad
can be targeted only to the people in that town.
Characteristics of a good website design
1. Consistency in Design
• Except for the homepage which may have a slightly different appeal, all the
other pages should have a consistent design. When navigating to other
pages on the website, the users should not feel that have landed on a
different website. The homepage and all the other pages of the website
should clearly display the logo and its tagline.

2. User-friendly
• The website should be designed in such a way that even a layman will be able
to navigate around on a certain page or throughout the website and find
things he wants to view. It should not take him more than two clicks to find
anything that interests him on your website. If the navigation is too
complicated for the visitor, he will not wish to visit your site again.
Characteristics of a good website design (2)
3. Perfect Content
• Content is one of the most important elements of a website that can keep your
visitors engaged on to your site for a longer period. Not only you should publish
informative and fresh content free from grammatical errors but also you should
pay attention to background color and highlighting certain part of the content in
bold or different colors. Proper formatting of content is also necessary; however,
you should not overdo it as it can negatively impact your visitors.

4. Fast Loading
• Instead of decking up your site with heavy elements like Flash content, animated
graphics, large images and videos, you need to go with simple design and still
offer the best of creativity to your visitors. You need to make sure that your
website takes only a few seconds to load. If your site takes lot of time to load, your
prospective visitors may not have the patience to wait too long.
Characteristics of a good website design (3)
5. Search Engine Friendly
• Your website will be failure if it is not able to attract the attention of users
through search engine. In other words, the elements of your website should
be designed and tweaked in such a way that it helps in maintaining a good
ranking on different search engines like Google, Bing and Yahoo.

6. Compatible on Different Browser

• After designing your website, you should test it website on different
versions of various internet web browsers such as Firefox, Google Chrome,
Safari, and Internet Explorer. You should also test the loading time and ease
of navigation across different pages of your website. Also, you should
check whether your site works flawlessly on stock internet browsers
available on platforms such as Windows Phone, Android and Symbian.
Characteristics of a good website design (4)
7. Functionality
• ALL THE ELEMENTS of your site should work seamlessly. You need to fix
all the page errors and poorly constructed website elements. When visitors
face such a problem, they can get frustrated and leave your site. Hence, you
need to check proper functioning of internal and external pages, access to
contact page, site search, site map, customer support page, help and FAQs
page, subscription page and so on
The Web Development Process
• The Web development process consists of several broad steps, beginning
with planning and ending with execution and maintenance. These include
the following:
1. Defining your goals
2. Defining your audience
3. Developing competitive and market analysis
4. Creating a requirements analysis
5. Designing your site’s structure
6. Specifying content
7. Choosing a design theme
8. Constructing the site
9. Testing and evaluating the site
10. Marketing the site
The Web Development Process (2)
1 DEFINING YOUR GOALS
• The most obvious question to ask when developing a Web site is: What is it
for? What are the objectives you want the site to achieve? For example, do
you want to use your site to sell products, or to drive the PR process? You
may want to disseminate news, or build customer service applications.

2 DEFINING YOUR AUDIENCE

• Defining your audience will affect everything from the design of the site (a
children’s site may have lots of pastel colors or may even be a bit silly
looking, whereas a science-related site will require a different design
approach) to content and even navigation questions. A sophisticated
audience, for example, may not need as much navigational guidance as a
more general audience
The Web Development Process (3)
3 COMPETITIVE AND MARKET ANALYSIS
• Discovering what your competition is doing not only helps you
enhance your own market position, but can also give you solid
ideas on what and what not to do on your own Web site.
• For example, if your competition’s site consists of difficult-to
-read type, you can make sure your site gets high usability ratings
by making your site extremely easy to read.
The Web Development Process (4)
4. REQUIREMENTS ANALYSIS
• Most large sites start off with something called a Project Requirements
Document or Functional Requirements Document, which is a comprehensive
document that contains specifications about how the Web site or a specific
feature of a Web site is supposed to behave.
• These documents usually contain screenshots of mockups created by a
team’s graphic designer or graphic design department.
• A requirements document helps everyone on the team understand a Web
site’s expected behavior. If a part of the Web site doesn’t behave according
to the requirements document during testing, then a bug is filed. The bug
remains open until the problem is fixed.
The Web Development Process (5)
• A list of some of the things included in requirements documents
follows:
✦ Design specifications, including specific font sizes and colors
✦ Navigation specifications
✦ User experience and interaction scenarios
✦ Link behavior
✦ Page flow and page flow diagrams
✦ Usability guidelines
✦ Maintenance requirements
✦ Security policies
 The Web Development Process (6)
5. DESIGNING THE SITE STRUCTURE

• The site structure is usually defined

in a requirements document. This
usually involves a schematic drawing
of how the Web site should flow,
and which pages are parents and
which are children. Figure 1 shows
an example of a schematic for a very
simple Web site containing only a
few pages.
The Web Development Process (7)
• Using UML to define structure
• More complex sites require more formal structure definitions. You can use flow
charts, or a standardized way to create structure definitions called Unified
Modeling Language (UML).
• UML is a standardized modeling notation for representing software applications.
• You can use UML to model the way your Web application is used by each user, or
the way each component behaves when interacting with other components.
• UML consists of two broad categories of diagrams:
1. USE CASES are diagrams that walk the reader through a typical user session at the
Web site.
2. SEQUENTIAL and COLLABORATION diagrams provide an abstract view into the
relationship between the various objects in the Web site, particularly as they relate
to each other.
The Web Development Process (8)
• 6 USING FLOW CHARTS TO DEFINE STRUCTURE
• You can also use your own process for creating a flow chart to define your Web site’s structure.
You can also use software designed for creating flow charts, such as SmartDraw
(www.smartdraw.com) and Visio (from Microsoft). These programs accelerate the
flow-charting process by providing a drag-and drop visual interface you use to create

• 7 SPECIFYING CONTENT
• Another consideration when deciding what type of Web server software environment to
choose is what kind of content you have.
• If you have static HTML, it doesn’t matter what kind of environment you have. You can just
use the one that is most comfortable to you.
• If you have database-driven content, you’ll need to include the kind of database you expect
to use in your considerations regarding a Web server environment. Several kinds of databases,
including several open source varieties, are available, including the following major databases:
MYSQL, PostgreSQL, MS SQL Server, Oracle, DB2, etc.
The Web Development Process (9)
8 CHOOSING A DESIGN THEME
• You should base your design theme on the target market analysis you perform at the opening
stages of your Web site development. Sometimes your design theme will be easy. If you operate a
fish store, your theme is pretty obvious. It may not be as obvious if you run a general interest site.
In that case, carefully examine your market analysis and design accordingly. If you’re running a
small or personal site, you can also check out predesigned templates at sites such as
http://freesitetemplates.com and www .templatemonster.com.

9 CONSTRUCTING THE SITE

• The first step in constructing a site is deciding what kind of application server environment you’ll
be using. An application server is somewhat like an engine that runs your Web site’s logic.
• If you’re using simple, static HTML, it doesn’t matter what application server you use or whether
you even have one. However, if you’re interacting with a database or producing dynamic content,
you’ll need to work with an application server environment. Examples include PHP, ASP.NET,
ColdFusion, JSP, etc.
The Web Development Process (10)
10 TESTING AND EVALUATING THE SITE
• When your Web site is finished, you want to test it before serving it
to the public. How you do that will depend on the resources of your
Web development team. If your team has a lot of resources, you can
set up your Web site on a testing server. This is a separate machine
with Web hosting capabilities that can’t be seen by the general public
but provides exactly the same capabilities as your production
machine, which is the machine that will actually host your publicly
available site.
The Web Development Process (11)
11 MARKETING THE SITE
• Once your site is live, you’ll want to find a way to get it noticed by your
target audience. This can be done by:
• Take an ad out in a trade publication geared towards your profession.
• Issue a press release announcing your site.
• Participate in e-mail discussion lists in ways that contribute to the knowledge of
people on the list, and include a signature in your posts that points to your Web
site.
• Purchase ad banners on other Web sites to announce your site. Run on-site
events.
• Generate an e-newsletter and include a link on your Web site encouraging people
to sign up for it (but don’t send out the newsletter unsolicited, because that will
actually do more damage than good with your prospects, who will interpret those
efforts as spam).
• Embark on a direct e-marketing campaign.
• Integrating traditional marketing and sales programs into your overall plan.
 The Web Development Process (12)
12. TRACKING SITE USAGE AND PERFORMANCE
• Once your marketing is underway, determine its effectiveness. The first step in this
process is to determine where your traffic originates. Then measure what individuals do
once they get to your site. This helps you find out if one marketing approach is more
effective than others. Every Web server creates log files, which are raw data files
containing information about visitors to your site. This data consists of the user’s IP
address, what browser the user employs, and the time of day the user came to your site.
13. MAINTAINING THE SITE
• Maintaining your Web site means more than just making sure it continues to work. It also
means keeping your content fresh. This may mean being careful from the outset about
where you place time sensitive content. If you have time-sensitive content distributed all
over the place, you’ll probably lose track of some of it and it will become out of date. This
is particularly true of links, which is why it’s best to include a special area for hot links.
You may also want a section that includes news on your industry. You can develop your
own articles, or even provide an RSS-based news feed.