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

Home(index.html)

Still(still.html)

Digital(digital.html)

Taking(takedigital.html)

Transfering(transfering.html)

Printing(printingdigital.html)

Taking(takestill.html)

Developing(developing.html)

Printing(printingstill.html)

Level 3

Level 2

Level 1

Bluetooth(bluetooth.html)

USB(usb.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).

Juices

Yum Juices

Fruit

Berry

Vegetable

Slim

Health

Our Juices – Freshness Guaranteed

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.

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

25%

900px

75%

10px

200px

H1 header

100px

100

px

Images float right

Home Juices Juicers Recipes Promotions

| Common links | Common links | Common links |

100px

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

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 over-deployed. 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.

Printed Media Version

Creating the Site Content

Use simple languageDon't use long words where short ones will do. The purpose of your

websiteis to provide people with information - make it easy for them. Avoid

difficult grammar and words, specialist vocabulary and abbreviations. Be consistentFollow 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

CAPITALSMost 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.

Web Version

Hands-on exercises

• Now do – Hands-on 12, Planning and Designing a

Website