Download The Website Design Process - stephenspencer

The Website Design
Process
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 Server: A computer on the Internet
which stores one or more Web sites
• Web Page: A single file in a Web site
which, for the sake of analogy, can be
compared to a page in a book
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. Maybe you want to post a
shopping site for skateboarding gear, a
photo album for your family, a portfolio of
your work experience or a Web site of
your favourite music and movies. The Web
site could be for personal or commercial
ends.
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
• Many Web development and design firms
spend more time on researching and
planning than on any other stage of
production.
• If you jump in and start writing your HTML
code right away, there is a good chance your
site is going to be poorly structured, look
unprofessional and 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.
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
• 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. Place each content
item onto a separate index card. Once this
is done, 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
• In Web 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.
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.
The Navigation System
• As you have seen from surfing the Web,
navigation systems vary from site to site.
However, there are a few fundamental principles
that apply to all sites, regardless of the type of
site it is.
• The key characteristics of a good navigation
system are clarity, consistency and efficiency.
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.bluebell.com/
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.
Prototyping
• The prototype allows you to view pages in
a browser and tweak the HTML
documents, graphics and scripting until
everything fits smoothly in place and
works as intended. This process can occur
over a lengthy period of time.
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:
• On a browser different from the one used in the
development stage
• On a different kind of computer
• With the graphics turned off
• With a text-only browser
• With browser window set to different widths and
lengths making sure to test the extremes
• 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.
Site Maintenance
• Although site maintenance is an ongoing process that
happens after the site is created, decisions regarding
how it will be maintained should be made early in the
development process. It is important to establish early
on:
• Who is responsible for updating the site
• What parts of the site will be updated
• How frequently the updates will occur
• How long the site will be available
Lets make a Site
Application
• Now that you know a little about
Dreamweaver and the website design
process its time to apply it by making your
own webpage.
Your Planning Process
•
•
•
•
Idea
Content (Make lists)
Storyboard (with page titles)
Layout (Basic Sketch of layout)