Web Design

Principles
Principle #1 Your website needs to accommodate the
needs of the user.

State your
purpose/objective –
why build a website ?
There are many different purposes that
websites may have but there are core
purposes common to all websites;
1.Describing Expertise
2.Building Your Reputation
3.Generating Leads
4.Sales and After Care
Principle #2

Know your audience and

have a clear goal for your
Web site.
1.Novice Users
2.Intermediate Users
3.Expert Users
Principle #3 Type
Typography has an important role to play
on your website. It commands attention
and works as the visual interpretation of

SIMPLICITY the brands voice. Typefaces should be

legible and only use a maximum of 3
different fonts on the website.

Colour
Colour has the power to communicate messages and evoke
emotional responses. Pleasing colour combinations increase
customer engagement and make the user feel good.

Imagery
Imagery is every visual aspect used within communications. This includes
still photography, illustration, video and all forms of graphics. All imagery
should be expressive and capture the spirit of the company and act as the
embodiment of their brand personality.
Principle #4

Define the content – what

kind of information will be
provided on your site?
An effective web design has both great
design and great content. Using compelling
language great content can attract and
influence visitors by converting them into
customers.
Principle #5

NAVIGATION
Navigation is the way finding system used
on websites where visitors interact and find
what they are looking for. Website
navigation is key to retaining visitors. If the
websites navigation is confusing visitors
will give up and find what they need
elsewhere. Keeping navigation simple,
intuitive and consistent on every page is
key.
 Principle #6
F-SHAPED PATTERN
READING
The F- based pattern is the most common
way visitors scan text on a website. Eye
tracking studies have found that most of
what people see is in the top and left area
of the screen. The F’ shaped layout mimics
our natural pattern of reading in the West
(left to right and top to bottom). An effective
designed website will work with a readers
natural pattern of scanning the page.
 Principle #7
VISUAL HIERARCHY

Visual hierarchy is the arrangement of

elements is order of importance. This is
done either by size, colour, imagery,
contrast, typographically, whitespace,
texture and style. One of the most
important functions of visual hierarchy is to
establish a focal point; this shows visitors
where the most important information is.
 Principle #8
GRID BASED LAYOUT

Grids help to structure your design and

keep your content organized. The grid
helps to align elements on the page and
keep it clean. The grid based layout
arranges content into a clean rigid grid
structure with columns, sections that line
up and feel balanced and impose order
and results in an aesthetically pleasing
website.
 Principle #9
LOAD TIME

Waiting for a website to load will lose

visitors. Nearly half of web visitors expect a
site to load in 2 seconds or less and they
will potentially leave a site that isn’t loaded
within 3 seconds. Optimising image sizes
will help load your site faster.
 Principle #10
MOBILE FRIENDLY

More people are using their phones or

other devices to browse the web. It is
important to consider building your website
with a responsive layout where your
website can adjust to different screens.
Principle #11

Identify the essential

resources – do you have
the budget, personnel,
materials, time and other
resources?
Steps to a well designed
Web site
 Have a goal
 Target your audience
 Create a plan
 Select a Web service provider
 Try it out
 Maintain it
Have a goal for your web site
 What were you put on earth to accomplish?
 review your mission statement
 Do you want your web site to accomplish all or
some of those things?
 themore goals, the more difficult the task
becomes
 What information do you need or want to
provide?
Identify your target audience
 Who is the information for?
 Doyou have more than one audience?
 Can you serve them all with one Web site?

 What are the information needs of your audience?

 What are their habits, characteristics, culture,
technical capabilities, etc.
 Are they likely to start with the Web or another
information source?
Plan it out
 Identify information you already provide your
audience.
 Identify information that you haven’t, but
would like to provide your audience.
 Identify the sources of information you want to
provide through your Web site.
 Prepare that information for the web by collecting
it and converting it.
Plan it out
 Develop a vision for your Web site and
storyboard it before construction begins.
 Share your vision and storyboard with your
colleagues and your bosses.
 Estimate initial times and costs for
construction.
 Decide on the software/hardware tools necessary
to construct your site.
Select a Web service provider
 Coordinate the method for publishing and
updating your Web pages.
 email files
 FTP files
 Know your root address (domain name).
 Will you have a need for scripting and
database interaction?
Try it out:
Optimize it for your audience
 Test functionality
 Test it on a sample audience.
 Test it on as many different computers and
monitors and browsers as possible.
 Test it using various Internet connections.
 Modems
 Direct connects
 Designing a Website
When setting out to design a new website, we have plenty of decisions
to make. Standard web design principles offer us some guidance on
key aspects, such as:

 Choice of a site color scheme.

 Choice of text font and size.
 Placeholder text.
 Use of white space.
 Location of navigation menus.
 Planning for different browsers and screen resolutions.
 Testing
 Choosing a Color Scheme
The background colors and graphics we use have a tremendous effect on
the mood evoked for our visitors. We can use a color wheel to assist us
with making selections:

Lime Yellow
We should limit the number of main
colors on our site to four (excluding
black and white).

Aqua Red

Color selection should always be made

with our target audience in mind. A
color scheme for a site aimed at teens
would be very different than one
targeted at business customers.
Blue Fuchsia
 Complementary Color Scheme
Complementary colors are directly across from each other on the color
wheel:

Lime Yellow

Aqua Red

This strong contrast lends a

vibrant, energetic feeling to a site.

Blue Fuchsia
 Triad Color Scheme
Triads are three different colors equidistant from one another on the
color wheel:

Lime Yellow

Aqua Red

Color triads offer a vibrant feel

with a lot of color diversity.

Blue Fuchsia
 Analogous Color Scheme
Analogous colors are those that are next to each other on the color
wheel:

Lime Yellow

Aqua Red

Analogous colors are pleasing to

the eye and make for a peaceful,
serene design.
Blue Fuchsia
 Choosing Fonts and Sizes
When choosing fonts, font sizes, and text colors for our site, we should
keep the following tips in mind:
 Many designers use two different fonts for their sites: one for headings and
one for regular body text.
 Font size must be large enough to read easily. Consider 12px to be the
minimum acceptable size.
 Black text on a white background is the most common. However, any light
color text with a dark background or dark color text with a light background
can be acceptable, provided there is strong contrast.
 Avoid using bright colors for text.
 Avoid underlining text or making text blue for emphasis, as this can easily be
mistaken for link text. Use bold or italics for emphasis instead.
 Placeholder Text
Often when designing a web page, we don't have our text content written
yet, but we want to see a mock-up of how text will look on the page. In
these cases, we can use the "Lorem Ipsum" text temporarily:

"Lorem Ipsum" is text in Latin that

we copy and paste into our
pages for testing. A copy is
available free at lipsum.com and
many other sites.
 White Space
White space is the space between the elements of your web page. It
does not literally have to be white; it can be the color of your background:

Too many elements crammed onto a page can be overwhelming to the visitor.

Plenty of white space makes for an uncluttered and easy-to-read page.

 Navigation Menus
Most websites have their navigation links across the top or down the left
side of the screen:
The logo or name of the
site in the header is
traditionally a link back
to the home page.

Navigation menus
should be consistent on
all pages of a site.
 Planning for Screen Resolution
Over 99% of desktop computers now have a screen resolution of 1024
x 768 pixels or larger. If we set a site to be 960px wide, we know that
nearly all visitors will see the page without having to scroll right and left.
A site that has the width set to a specific number of pixels is said to have a fixed-
width layout. It's much easier to plan a site with specific dimensions, but
visitors with very wide screen resolutions will see excessive white space on their
screens.

By using percentages rather than pixels, a site can be made to automatically

adjust its width to fit the available space of the screen. This is known as a fluid
layout. Though often a better user experience, it's more challenging to the web
designer to build and test this type of site.

Some larger websites have an entirely separate version of their site designed for mobile
devices. These sites automatically detect the mobile browser and deliver trimmed-down
content to accommodate smaller screen sizes. These sites usually have an address like
"m.yahoo.com" instead of "www.yahoo.com".
 Testing
There are several web browsers with major market share, and we must
plan for each of them:
 Edge
 Firefox
 Chrome
 Safari
 Opera

Different web browsers can display the same page very differently. Sometimes,
a page will look great in one browser but broken in another.

Good web designers test their pages in multiple browsers and screen resolutions
prior to posting content live.

browsershots.org is a free website that will test a page on numerous browsers and screen
resolutions and then display the results.
 More Design Tips
Here are a few more design tips to bear in mind when setting out to build
a website:

 Aim for consistency in the look and feel of the site. Logos, headers, footers,
and navigations bars should reside in the same spot from page to page, and
site colors and text should remain consistent site-wide.
 Align groups of elements horizontally or vertically on the page. Alignment
makes a site both easier to use and more visually appealing.
 Always proofread your site content. There's no excuse to have misspelled
words or grammatical errors. Such errors reflect poorly on you as a
designer.
Search Engine Optimization
(SEO)
Search Engine Optimization (SEO), which basically means designing a site to be ranked well by search
engines, is one of the primary challenges faced by Web designers. Here are some useful tips to optimize a
website for good search engine placement:

 Have a relevant title on all your pages: site name on home page, different titles on
other pages.
 Use relevant alt text on all your pictures.
 Do not use hidden text: text the same color as background, div with visibility: hidden
property or display: none, or have text placed outside of normal browser window.
 Straight-forward HTML links are preferable, not Javascript or Flash links.
 Avoid duplicate content: Google and other search engines take into account the
number of links pointing to your page to determine how important your web page is. If
you have identical content appearing on two different pages on your website, some
sites will link to one page while others will link to the alternate page. The result is that
neither of those pages will be regarded as very important in the search engine's index
since you have effectively halved the links pointing to your article.
 Search Engine Optimization
(SEO)
 Validate your HTML and CSS.
 Take the time to create valuable Meta tags. Your description meta tag is your chance
to describe what your website is about. Keep it short, and every page should have a
separate description.
 If you use Meta tag descriptions, try not to make them sound too generic:
http://www.thesitewizard.com/sitepromotion/meta-description-tag-problems.shtml
 Use real URL links as opposed to Dynamic URL links:
http://www.searchtools.com/robots/goodurls.html
 Avoid frames.
 Use real headings with h1 through h6. It's also best to try to have only one h1 tag per
page and have it at the top of the page. Use heading tags on the pages of your site -
and use site keywords in the headings. Search-engine robots LOVE these.
 Search Engine Optimization
(SEO)
 Get linked to. Links from other sites to yours can really boost your rankings, so it's worth getting
involved in forums and discussion boards and linking back to your site.
 try to have only one h1 tag per page and have it at the top of the page. Use heading tags on
the pages of your site - and use site keywords in the headings. Search-engine robots LOVE
these.
 Get linked to. Links from other sites to yours can really boost your rankings, so it's worth getting
involved in forums and discussion boards and linking back to your site.
 Write good, clear content without typos. Content is key! Make sure that the content on your site
has your site keywords in it throughout.
 Submit your site to Search Engines. Here are the links to the "big 3":
 Google: http://www.google.com/addurl/
 Yahoo: http://search.yahoo.com/info/submit.html
 Bing: http://www.bing.com/webmaster/SubmitSitePage.aspx
 Search Engine Optimization

(SEO)
Create a sitemap for your site and submit it to search engines. Several sites, such as www.xml-sitemaps.com, will generate one for you.
 Photos can help search engines if you use resourceful names for the files. If you have a site on Gucci handbags and have a picture of a
handbag, a file name of "gucci_handbag.jpg" will help where as "handbag123.jpg" will do nothing.

 To learn more about Search Engine Optimization (SEO), you can read this article Search Engine Optimization (SEO) Tips and check out the
following links:
 Site Wizard: How to Create a Search Engine Friendly Website
 456 Berea Street: SEO
 To target Google directly for optimization, consider the information at the following link:
 Site Wizard: Google Optimization
 Web Design Best Practices
 Throughout the term, we have been learning about many ways to design web pages. We have
touched on a few design principles in each of the Tutorials. It’s easy to forget these principles as
you become entrenched in the web design process. Review the list of best practices in web
design on the following site.
 http://terrymorris.net/bestpractices/
 You may print out this list if you’d like. Using this list, examine your Personal Website. How does it
do? Does it meet most of the items on the Best Practices list? If not, what needs to be changed?
Task1
Compare the principles of website design
used in two websites, including their
suitability for the intended audience and
intended purpose.
(Good design & bad design and reason
with respect to principles of Webdesign)