Y8 Web Design Introduction

What is good web design?

Year 8: Website Design Project

In pairs, discuss what you think is important when designing a website.

4 minutes - click here for timer

PlanningBefore you do the fun part i.e. design and layout, you need to make sure you understanding the purpose of your web site.

AudienceWho are you making the site for? Think about your audience: are they young people, shoppers, teachers, etc..? What would they want. Ask them.

InformationWhat information do you need? Facts? Opinions? Quotes? Images? Start collecting them before designing. Label them and keep them in a folder.

Design & LayoutOnce you have all the content (i.e. words and images) for your website, you can put them together using a design layout.

Make it LiveIn order to allow others to see your website, you need a host company to make your website live I.e. put it on the internet. At the moment, it can only be seen by you on your computer. Hosting can be cheap, around £10 a year, but you will need to do your research.

PublicityYou’ve completed your amazing website, but who knows about it. Now is the time to start publicising your website. Put up links on your myspace/bebo, copy the web address (URL) and put on your VLE profile. Tell friends and get feedback!

In general, websites are split up into four sections:

• Header• Navigation Bar• Body Text• Footer

Design Tips

Clear Bold HeadingsSimple main text font

ScaleConsider scale between words

Colour combinations

Colour combinations

Colour combinations

Complimentary colours

create high contrast

Colour combinations

Colour combinations

Colour combinations

Similar background colours

create soothing contrast

QuickTime™ and aTIFF (Uncompressed) decompressor

are needed to see this picture.

Adding images and illustrations to replace words

QuickTime™ and aTIFF (Uncompressed) decompressor

are needed to see this picture.

Simple Alignment

Simple alignment helps to direct the eye towards one area and avoids distractions. In this case, all the text and image objects have been aligned to the left hand side.

QuickTime™ and aTIFF (Uncompressed) decompressor

are needed to see this picture.

Simple Alignment

Simple alignment helps to direct the eye towards one area and avoids distractions. In this case, all the text and image objects have been aligned to the right hand side.

If in doubt:

KISS

KeepItSimpleStupid

Look at the following website design and see if you can identify why it is poor design and how it could be improved?

QuickTime™ and aTIFF (Uncompressed) decompressor

are needed to see this picture.

Biography page

Simple alignment helps to direct the eye towards one area and avoids distractions. In this case, all the text and image objects have been aligned to the

left hand side. Simple alignment helps to direct the eye towards one area and avoids

distractions. In this case, all the text and image objects have been aligned to the left

hand side.

Simple alignment helps to direct the eye towards one area and avoids distractions. In this case, all the text and image objects have been aligned to

the left hand side.

POOR DESIGN AND LAYOUT EXAMPLE

Navigation Bar

1. Homepage2. Gallery page3. Links page4. Biography page5. Analysis page6. "My work" page

Look at the following website design and see if you can identify why it is a good design?

QuickTime™ and aTIFF (Uncompressed) decompressor

are needed to see this picture.

Biography Page

Bob Ross in Action Remember him? Grand Flash Master of the Art world Bob Ross, was a TV presenter who taught the nation how to paint. He refined many painting techniques in order to paint traditional rural landscapes. For many, he was an icon of the 70s, but some argue that it was “art-in-a-can”, devoid of individuality and lacking in soul. Should all art be distinct and avoid mass-production?

GOOD SIMPLE DESIGN & LAYOUT

Navigation Bar

1. Homepage

2. Gallery page

3. Links page

4. Biography page

5. Analysis page

6. "My work" page Above: Bob Ross, 1974

Above: Mona Lisa by Leonardo Da Vinci, 1503-6

Task: In pairs and using PowerPoint, make 2 slides about an artist of your choice. Each slide must include:

• Header• Navigation Bar• 2 images• Body Text

The first slide must have good design and the other slide poor design… Use the design tips and have fun!