Transcript Planning, Designing and Implementing a Website

Planning and Designing a Website
Session 8
Designing a Website
• Like all technical artefacts a website needs to be
carefully planned and designed to be successful.
• In professional web design, most of the work is done in
the planning and design phase, not the coding phase.
• Planning and design should incorporate the following
activities:
– Analysis of the business/organisational context of the proposed
site
– Analysis of the target audience for the site
– Selection of appropriate technologies (e.g. XHTML, JavaScript,
Flash)
– Design of the information architecture of the site
– Design of the business processes
– Design of the user-interfaces
– Design of the site content
The Business/Organisational Context
• The first stage in designing a website is
understanding the business/organisational
context you are designing for.
– What is the mission of the business/organisation?
How will the site help realise that mission?
– What are the key activities of the
business/organisation?
Which activities will be included in the site (e.g.
marketing, customer services, recruitment, sales)?
– How does the business/organisation brand/identify
itself?
To what extent will the site fit in with, enhance, or
extend, the current brand?
The Target Audience
• Understanding the target audience is key to designing
a site that people want to use.
– Who will the users of the site be?
The general public? Academics? English speakers?
Children?
– What kind of connections will they have?
Broadband? Dial-up?
– What level of expertise with the
technologies/processes you intend to include will your
users have?
Low? High? A broad range?
– What special needs might they have?
Visual impairment? colour-blindness? Poor literacy?
Selecting Appropriate Technologies
• The choice of technology should always be determined
by the extent to which it promotes accessibility.
– XHTML rather than HTML
– CSS menus rather than JavaScript menus
– gif or jpg rather than Flash
• If something can be done with simple text use text. If it
cannot be done with text, consider an image. If text will
not suffice, nor a simple image, then, and only then,
should you consider using less accessible technologies
like video or Flash movies.
Designing the
Information Architecture
• Getting the information architecture (site structure)
right is crucial to the navigation of the site. A poorly
thought-through architecture will lead to poor navigation
and confused users.
• The first stage in the design of the site structure is to
identify each individual page in a site.
• When all the pages have been identified, they can then
be sorted vertically into levels.
• Finally, pages need to be sorted horizontally. Horizontal
sorting uses weighting (order of importance) to find the
correct order for the pages.
• Digital tools (e.g. Visio) or paper sort cards can be used
to create and refine site structure diagrams.
Designing the
Information Architecture
• Site structure diagram
Level 1
Home
(index.html)
Digital
(digital.html)
Still
(still.html)
Level 2
Level 3
Taking
(takedigital.html)
Taking
(takestill.html)
Bluetooth
(bluetooth.html)
Transfering
(transfering.html)
Developing
(developing.html)
USB
(usb.html)
Printing
(printingdigital.html)
Printing
(printingstill.html)
Designing the User Interfaces
• Web interfaces are designed with storyboards.
• Storyboards should communicate the finished look and feel of a web
page to a customer.
• They should show:
–
–
–
–
–
page layout
colours to be used
formatting information (e.g. Fonts, font-sizes)
images to be used
indicative content
• They can also show technical information, such as the width and
height of elements.
• Storyboards are best drawn with a professional drawing package
like Visio or Illustrator
• Using a grid helps position elements effectively on the page.
Designing the User Interfaces
• Storyboard (Note: This is not a screenshot of
the finished site! It is a design document).
900px
| Common links | Common links | Common links |
100px
Yum Juices
H1 header
200px
Home
Fruit
Juices
Juicers
Recipes
Promotions
Our Juices – Freshness Guaranteed
Berry
Images float right
Vegetable
100px
Slim
Health
100px
25%
Choose from an incredible range of types and flavours: we have fruit, berry, vegetable, we
have juices that will wake you up, knock you over, keep you health and keep you looking as
slim and fit as you have ever looked.
Juices
The taste goes on. take a look through our juice categories and you will find flavours that
you have never even dreamed of. Flavours that are so wild and exciting that they will have
you drooling and coming back for more.
Specials include: Citrus Zinger, Apple Sunday, Beetroot Blaster, Fruit Salad, Moring Glory,
Fresh and Lively, Slim and Juicy, Juicy Lucy Very Berry, The Tangster, Sea Breeze and
many, many more. Special offers on orders of five or more cartons. Free delivery applies for
the month of
10px
75%
Creating the Site Content
• Writing for the web is different than writing for other
purposes.
• Because reading from a screen is 25% slower than
reading from the printed page, web users tend to skim
and scan more than read in depth.
• Thus, textual content should:
– Be significantly (50%) shorter than printed media.
– Use simple grammar and vocabulary where possible.
– Should be clearly structured using different levels of heading and
lists. Complex data should be presented in tables.
– Should be ‘chunked’ and structured as hypertext.
Creating the Site Content
Printed Media Version
There are several matters that need to be taken into consideration
when writing for the Web. The first of these is brevity. Refrain from using
overlong terms where much shorter ones will suffice. Bear in mind that the
purpose of your website is to provide people with information. Thus, you
should aspire to simplicity and brevity. You should always, at all costs, avoid
the use of difficult grammatical structures, specialist vocabulary and acronyms.
A further consideration when writing for the Web is consistency. A writing style
guide needs to be consulted and used to ensure ones writing follows
convention. The results of this will inevitably be superior navigation and a site
that appears more professional. One final consideration is the use of bold,
italics and capitals. At no point should any of these conventions be overdeployed. It is worth remembering that almost all browsers have a default
setting that underlines links on the page, so underlining text that is not a link
will inevitably cause confusion. Finally, remember too, that copious quantities
of text in either bold or italics are difficult to make out on screen.
Creating the Site Content
Web Version
Use simple language
Don't use long words where short ones will do. The purpose of your website
is to provide people with information - make it easy for them. Avoid difficult
grammar and words, specialist vocabulary and abbreviations.
Be consistent
Follow a writing style guide. A consistent approach to writing will help people
navigate your site, and make the site look more professional.
Don’t overuse bold and italics. Never underline or type in CAPITALS
Most default browser settings underline links on the page, so underlining text
that is not a link causes confusion. Remember too, that large amounts of text
in bold or italics are difficult to read on screen. Typing in CAPITALS makes it
seem that you are shouting.
Hands-on exercises
• Now do
– Hands-on 12, Planning and Designing a
Website