1. Page Design

2. Lesson Objectives To understand the key principles of good web design
To create apocopate colour/text and design combinations
All students will complete exercises on colour, text and design
Most students will begin the colour extension exercise
Some students will create a logo on Photoshop of their extension designs.

3. Why is it important?
Websites want to attract visitors, therefore they must make them a comfortable environment to visit
This doesn’t happen by accident. Companies pay a lot of money to web developments not to just MAKE the website but DESIGN it.

4. Design Principles
All web designers follow a set of guidelines which mean they produce good looking website.
This lesson you are going to investigate these design principles and understand why they are adhered to.
We will look at
Colour
Design
Text

5. Colour When thinking about the colour scheme we need to think about.
The overall colour scheme
How colours look together
How suitable it is for the
Audience
Purpose
Accessibility
Use of colour to highlight information

6. Colour Wheel
If in doubt over which colours look good together, remember the colour wheel
The primary colours (Red, Yellow and Blue) are separated
Colours that are opposite each other on the colour wheel look good together, and compliment each other
THERE IS ONE EXCPTION . GREEN AND RED ARE NOT A GOOD COMBINATION ON WEB PAGES BECAUSE THEY ARE DIFFICULT TO VIEWFOR COLOUR BLIND PEOPLE
The secondary colours go in the middle. Notice that the colours are made by mixing the two either side
Like yellow and purple

7. This website can be used to see which colours are complimentary

8. Using colours together
The one on the left is on a background which is the same colour only a brighter shade The one of the right is on a background which is its complimentary colour. Which one looks clearer?

9. Which middle square is a darker shade
Which middle square is a darker shade? Both squares are the same shade of blue. The eye perceives them as being different because of the background they are on

10. Which middle square is larger. They are the same size
Which middle square is larger? They are the same size. The one on the left appears to be bigger because it is on a lighter background

11. Looking at websites
Use the first table on your sheet to explore the following website.
Focus on
Overall colour scheme
Background colour
Suitability for all users

12. Web design principles Colour
The background colour must be suitable for all users. (Think about the colour blind)
The text colour must stand out against the background
The colour scheme must be suitable for the target audience and the purpose of the website
White space is used in an appropriate way
There are no high contrast colours (red/green)

13. Design
Websites are designed in lots of different ways depending on the audience and purpose however MOST websites follow the same design.

14. Consistency All the pages in the website must be consistent in
Colour scheme
General layout
Why do you think this is?

15. Navigation
Websites use navigation bars to provide links to other pages.
They are usually on the left, or the top of the page (or sometimes both)

16. Navigation at the top

17. Navigation on the left

18. Navigation Why do you think that they are always in the same position?
Remember:
Navigation should not be the focus on the page. It should not take up a lot of room.

19. Distracting features
Although you might think it’s “Cool” to include lots of flashing text, animation etc it will detract the users attention and become annoying.
Like this website

20. Web design principles Design
Navigation bars should be at the top or left of the page
Pages should be consistent in terms of colour and layout
The user should not have to scroll around the page.
There are no distracting features
Is the deign accessible to all?
Are images appropriate?
Are images of a suitable size?

21. Looking at websites
Use the first table on your sheet to explore the following website.
Do they stick to the design principles?

22. Text You need to focus on Font types
Formatting to highlight information
Colour of text
How large piece of text are broken up

23. Fonts You must think about the fonts you are using.
Different fonts will be appropriate for different users.
Time New Roman is often the default font, but this will not be suitable for every purpose
Look at the following….

27. Make text clearer
You should also think about how you can use formatting to make text clearer
Bold headlines
Italic key works
Underline
Subheadings
etc

28. A well designed website will use very few fonts.
One main font will be used throughout the whole website
Large chunks of information should be broken up using headings and subheadings.
Bold, Italics or a change of font colour is used to make information stand out

29. Web design principles Text Text should be clear and easy to read
The same font should be used throughout the page
Formatting should be used to break up large chunks of information
Font colour should match the theme
Font colour and type should be suitable for all users

30. Looking at websites
Use the first table on your sheet to explore the following website.
Do they stick to the design principles?

31. Extension
Now you have looked at Text, Design and Colour revisit the powerpoint you made in groups.
Ensure you have thought about and documented these aspects in your powerpoints.