1. Elements of Design

2. Understand the four Basic principle of Web Design
Lesson Objectives:
Understand the four Basic principle of Web Design
Describe some of the key colour theories.

3. Design Principle for Web Design

4. Information Accessibility
Think Activity P-41
Think of five things that are important when designing a web site:
User Friendly
Design
Information Accessibility
Interaction
Purpose
Navigation
Target Users
Content

5. Design principles for Web Design :
The basic principles you need to follow when creating your website can be grouped into four main categories:
Purpose
Colours
Layout
Navigation

6. Purpose

7. Purpose: What is the purpose of a website?
What kind of experience you are hoping to provide?
What exactly are you trying to achieve here?
Why is this important?
These should be the questions you ask when you start. Many designers try to show how creative they are in making a website and move away from the purpose of making it.

8. Activity P-42
Identify the purpose of the websites in the images below and make a note of who the audience for each website might be. Give reasons for your answers.
Figure 1
Figure 2

9. Colours

10. Colours:
All web designers need to learn the importance of colour in web design.
They need to know how to choose a colour scheme.
Colour theory contains a number of key levels. The most basic level is the interaction of colours in a design through complementation, contrast, and vibrancy.
Internet and HTML Code

11. Complementation :
This is how we see colours in relation to other colours. ( Matching Colours)
When colours are at opposite ends of the colour spectrum, people often see this as visually appealing to the eye.
It is important to remember that complementation can
improve the design, especially when you begin to
master the details of colour combinations.
Internet and HTML Code

12. Contrast :
This is when the designer divides different parts of the page to draw the user’s attention.
Paying an attention to contrast will be useful for the following:
Attracting user’s attention
Reduces eyestrain.
Internet and HTML Code

13. This is when you express the emotion of your design.
Vibrancy :
This is when you express the emotion of your design.
Brighter colours lead the reader to feel more energetic as a result of your design, which is particularly effective when you are trying to advertise a product or invoke an emotional response. Darker shades relax the user, allowing their mind to focus on other things.
Internet and HTML Code

14. Activity
How do you evaluate the below website , what are the color schemes which have been used.

15. Search in the internet for 3 websites that sets a good example for :
Activity P-46
Search in the internet for 3 websites that sets a good example for :
Complementation in colors
Contrasting
Vibrancy

16. How to select an effective colour scheme ?

17. Compound Colour Scheme Analogus Colour Scheme
How to select an effective colour scheme?
Triadic Colour Scheme
Compound Colour Scheme
Analogus Colour Scheme

18. Triadic Colour Scheme Composed of 3 colors on separate ends.
By using equilateral triangle , you can ensure the equality in colors vibrancy and complementary.

19. Compound Colour Scheme
Providing a range of complementary colours. Two colors chosen from opposite ends.

20. Analogue Colour Scheme
Careful Selection of Colors that are next to each other on the colour spectrum.

21. Tools that will make your life easier:
Kuler
A tool developed by Adobe, each colour can be changed

22. Tools that will make your life easier:
2. Colour Scheme Designer
A popular tool for beginner designers.
Easy to adjust the palette’s saturation and contrast.

23. Layout

24. Flow - using flow can guide the user through a page.
To achieve good website layout , the following aspects should be followed:
White Space – the more you use the design will be simple and easier to notice
Flow - using flow can guide the user through a page.
Alignment – helps create a good flow
Length – short websites are more preferable while navigating

26. Navigation

27. Poor use of navigation can cause confusion
Navigation by design needs to give users an awareness of site’s structure.

28. Evaluation and Usability

29. Evaluation and Usability
Usability measures the quality of user’s experience when interacting with the system. The high usability means high quality website.
There are many reasons to have a good usability for a website:
Easy to learn ( easy content)
Efficiency of use (easy to navigate)
Memorability (easy to remember)
Error frequency and speed