Elements of Design

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.

Design Principle for Web Design

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

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

Purpose

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.

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

Colours

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

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

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

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

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

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

How to select an effective colour scheme ?

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

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

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

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

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

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.

Layout

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

Navigation

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

Evaluation and Usability

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