Download The Website Design Process - stephenspencer

The Website Design
Process
Web Design Evaluation
Assignment
• What are some of the things that make a
website good?
• What are some of the things that make a
website bad?
Poor Websites
• http://www.manolith.com/2009/08/25/worst
-website-designs/
Important Web Terms
• Web Site: A collection of one or more Web
pages, linked together in a meaningful way
to create an overall consistent effect
• Web Page: A single file in a Web site
which,
Important Web Terms
• Home Page: The "entry" page or the first page
your site visitors will see
• The home page is the top-most page in your
Web site which can link to additional pages in
the same Web site.
• Usually displays an overview of the content of
the site that is available from that starting point
• Often, a table of contents or a set of icons link to
the rest of the pages in the site.
Important Web Terms
Visually Explained
The Design Process
A website
• Regardless of the size of your Web site,
the process for developing the site
involves the same basic steps:
– Plan
– Design
– Develop
– Evaluate
The Planning Stage
A Thought
• Every Web site begins with an idea or
concept.
•
•
•
•
post a shopping site for skateboarding gear,
photo album for your family,
a portfolio of your work experience or a
Web site of your favourite music and movies.
The Planning Stage
• The conceptualizing and researching steps are very
exciting. You begin with your core idea, then
brainstorm on how you will present it as a Web
page. During this stage, you will create many lists,
sketches and notepads full of rough notes with ideas
on what will make your site or pages exciting, what
your goals are and who your target audience is. It is
a time to plan your basic strategy, what resources
you will need and how much it will cost.
The Importance of Planning
• Web development and design firms spend more
time on researching and planning than on any other
stage of production.
Jumping in to write HTML code right away
=
poorly structured and unprofessional site
That does not reach it's full potential.
How Do I Do My Research?
• Researching your Web site idea is a very
important step in creating the site. The
best way to research how your Web site
should look and be structured is to spend
some time looking around the Internet at
other Web sites.
Pay particular attention to the following:
1. Web sites that would be your competitors or that offer
the same type of service that you will offer. You will get
lots of ideas that you can use and improve upon.
2. Identify things about the other sites that you do not like
or find difficult to use so you can avoid making the
same mistake in your own Web site.
3. Do not assume that the flashiest, coolest looking Web
site is the best. Often these sites will only work in the
latest browsers, take a long time to download and are
difficult to navigate.
Points to consider (cont.)
4. Sites with lots of animation are not always the
best. They take time to download and
remember, the average attention span of most
Internet users is eight seconds!
5. Keep in mind that not everyone has a fast
Internet connection. Most people use a 56kbps
modem or less.
Site Content
• Before you can determine what information you
will put on your Web site you will need to
determine:
– Who is your target audience
– The user's skill level with the Internet
Web Site Architecture
• Once you have decided on the content,
you will need to decide on the framework
of your site and how the content is going
to fit together. This is known as the site
architecture.
• This is an important part of the planning as
it will form the basis for your site's
navigation.
Aesthetic Design
• The Web is a visual medium so you must
pay attention to the visual presentation
which is everything you see on the page
including:
•
•
•
•
Graphics
Colour
Layout
Typography
Information Design
• Information Design is an often overlooked
area of Web design that includes the
organization of the content and how you
get to it.
• It’s how the site's
information is
organized
Interface Design
• This area of Web design focuses on how
the page "works" rather than how it looks,
focusing on methods for doing things
including:
• Buttons
• Links
• Navigation devices
How the users get to that information
How these three interact
Organization & Navigation
Information and Interface Design
• This is all part of the planning stage, before you
type your first HTML tag or create your first
graphic. Even a personal Web site will benefit
from logical organization and good navigation.
Organizing
Information Design
1. Refine your list of content that you began
thinking about in the planning stage.
 One really simple way to organize your content to
use index cards.
2. Place each content item onto a separate
index card.
3. organize the index cards into stacks of
similar items.
Site Structure
Information Design
• Site diagrams use boxes to
represent pages with lines
and/or arrows to represent the
links between pages.
• The site diagram represents a
model for the overall shape of
the site and can suggest a
system for navigation.
Site Structure
http://www.hamptonhigh.ca
Hierarchies
• The most common site structure is the
hierarchical or menu structure. This structure
begins with a top page called the home page
which offers several choices which branch out
below into a "tree" shape.
• This structure offers the user
clear, step-by-step access to
the material on the site.
Site Structure
http://www.survey.walmart.com/
Linear
• In a linear structure, the user is guided
from page to page in a particular order.
• Information that must be viewed in
sequence is well suited to this type of
structure.
Storyboarding
Information Design
• Storyboarding is the process of creating a
rough outline and sketch of what your Web
site will look like before you actually write any
pages. Storyboarding helps you to visualize
the entire Web site and how it will look when
it is complete, including:
• Which topics go on which pages
• The primary links
• Types of graphics and where they will go
Story Boards
Not just for movies anymore
• Another tool used to plan Web sites.
• Taken from the film industry.
• A diagram of the pages and layouts with
lines that show the linkage between the
pages.
• Helps you visualize the site.
A Website Storybaord
Story Boards
Consider the following
• What topics go on which pages?
– Usually each topic is one page but sometimes you will
want to put a few small topics on one page.
– Try not to make pages too big.
• Navigation?
– How do the users navigate the site?
Navigation
Interface Design
• How the user navigates around your Web site can make or break
your site. If the site is too difficult to navigate, the user is not going to
enjoy the time spent on your site and may not return to it another
time.
• The key characteristics of a good navigation system are clarity,
consistency and efficiency.
Keep your navigation controls:
• Obvious
• Simple
• Consistent-Keep the colour and location consistent so the
user always knows where to find them.
• Navigation controls can be text or images.
Clarity
• Users must learn the navigation system so it is
in your best interest to make the navigation tools
you use intuitive and easy to understand at a
glance. To make your system user-friendly,
follow these guidelines:
– Navigation should look like navigation and
stand out on the page.
– Label everything clearly.
– Use icons with caution.
http://www.rossocarmilla.com/
Consistency
• Navigation should remain consistent throughout the
site--Consistent in appearance and in availability.
• Make sure you present the navigation options the
same way each time. For example:
• If the home page button appears in blue at the top,
right-hand corner of one page, do not put it at the
bottom, in red, on another page.
• If you offer a toolbar, keep the toolbar selections in
the same order on every page.
Efficiency
• Pay attention to the number of clicks it takes
to get to a piece of information or to complete
a task. Your goal should be to get the user to
the information as quickly and efficiently as
possible. Provide options such as:
• Shortcuts to information
• Site maps
• Search functions
Developing a Look and Feel
• The "look and feel" phase of
the design stage includes
choosing colours, fonts and
the graphical style for the
content and navigational
elements. The visual design or
look and feel, is an important
factor in contributing to your
site's usability.
Layout
http://designshack.net/articles/layouts/10rock-solid-website-layout-examples
Interface Design / Aesthetic Design
• Just placing text on your Web page does not always
make for good page design. It may look good in your
browser at the time but if you change the size of your
browser window, it may completely destroy the layout of
your page.
• Using invisible “tables” to control the layout of your Web
page can be very useful. Using tables gives you more
control over:
– The placement of text
<div> </div>
– The placement of images
– The alignment of navigation buttons
Developing the site
Prototyping
• At some point, all the pieces
are brought together into a
working site or working
prototype. Rather than
occurring as a distinct step in
the development process, the
development of the working
prototype is an ongoing
process as the HTML files and
graphics are produced.
Evaluating the Site
• Just because a page is working
well on your machine does not
mean it will look that way to
everyone.
• During this stage, you must check to make
sure:
• The site is in working order.
• All the links work.
• The site performs appropriately on a wide range of
browsers and platforms.
Evaluating the site
• You should try to view your Web site in the
following situations:
1. On a browser different from the one used in the
development stage
2. On a different kind of computer
3. With browser window set to different widths and
lengths making sure to test the extremes
4. With the monitor changed to lower resolutions
Site Maintenance
• A final aspect of Web site production is
how the site will be maintained. A Web site
is never truly "done". The ability to make
updates and keep your content current is
one of the advantages of the Web
medium.
Lets make a Site
Application – The Planning Stages
•
•
•
•
Idea
Content (Make lists)
Storyboard (with page titles)
Layout (Basic Sketch of layout)