1. Web Pages Prepared by Lim Thian Li
we will learn various web design principles to be considered to create a technically as well as visually good website

2. Learning Outcomes Demonstrate the web design principles
There are many factors that affect the usability of a website, and it is not just about form (how good it looks), but also function (how easy is it to use).

3. Web Design Principles
White space
Consistency and simplicity
Colours
Typography
Visual hierarchy
Flow
Balance
The 2/3:1/3 rule

4. 1. White space – what it is and how to use it
Web Design Principles
1. White space – what it is and how to use it
The space between the text and other media elements on a screen. Doesn’t have to be in “white” in colour.
Also known as negative space.
Breaks up the screen and provides eye relief.
Whitespace is space between elements on a page. It is often referred to as negative space and good use of whitespace can be the difference between making a good design great. Enough white space makes a website look ‘clean’. While clean design is crucial to communicating a clear message,
It makes it possible to perceive the information presented on the screen. Complex structures are harder to read, scan, analyze and work with.
When a new visitor approaches a design layout, the first thing he/she tries to do is to scan the page and divide the content area into digestible pieces of information.
white space/ negative space is very effective at giving your website a modern and uncluttered look.
Hierarchical structures reduce complexity

6. 2. Consistency and simplicity – user friendly designs
Web Design Principles
2. Consistency and simplicity – user friendly designs
Keep controls consistent to clarify navigation scheme.
Adds functionality to the interface.
No need to overwhelm the screen.
And you can employ simplicity in a variety of different ways. Here are some examples:
Colors. Typefaces. Graphics.
In addition to keeping your site's navigation consistent, the overall look (Backgrounds, color schemes, typefaces) and feel of your site should be consistent across all of your site's pages.

7. Colours can influence our mood and emotions.
Web Design Principles
3. Colours
Colours can influence our mood and emotions.
Bright colours: excitement, liveliness, passion.
Cool colours: cool and shade, soothing.
GOOD EXAMPLES
BAD EXAMPLES
Different colour combinations can evoke different emotions and reactions.
One of the main ways to convey the meaning of your brand is through the use of colour. For example, a toy company may use bright and vibrant colours whereas a jewellers will likely use more elegant colours such as something similar to gold.

8. Effective use of typography helps content become more readable.
Web Design Principles
 4. Typography
Effective use of typography helps content become more readable.
Make sure you select a font type and font size which is readable to all and is not too fancy for some to access or understand.
For example, fonts like Verdana, Times New Roman, Arial, etc. are simple fonts that almost everyone can easily read online. Similarly, the font size that works the best is 16 px but you can be a little flexible with it.

9. The illusion of physical weight of an object on the screen.
Web Design Principles
5. Visual Hierarchy
Use to achieve balance.
Visual hierarchy entails arranging and organizing website elements so that visitors naturally gravitate toward the most important elements first.
The illusion of physical weight of an object on the screen.
Eg. BOLD letters have more visual weight and are looked at first compared to unbolded letters.
The next principle that contributes to creating a successful and effective website is a visual hierarchy. Visual hierarchy is the order or sequence in which our eye moves and perceives the things it sees. When it comes to a web page, the visual hierarchy can be referred to the sequence in which our eye moves from one topic/content/block to another

11. A layout with good flow will visually
Web Design Principles
6. Flow
A layout with good flow will visually
lead the user from one element to
another on the screen.
As you can see in the figure on the right, there is a natural reading down the page. This is great as users are more likely to see all the content and less likely to miss important information.
Flow in web design is the act of guiding the user through page. A good web design is one which automatically makes our eyes move from one corner or content of the website to another, according to relevance or hierarchy.
Notice the use of images to draw the attention of the visitor towards the next section which can be seen in points 2, 3, 4, 5 and 6.
The use of typography helps take the user to the next sections as seen in 3, 7, 8 and 10.

12. People feel comfortable with a balanced design.
Web Design Principles
7. Balance
People feel comfortable with a balanced design.
Balance gives the screen harmony.
An unbalanced composition can lead to tension. An unbalanced composition can feel uncomfortable for the viewer. When a composition is visually balanced, every part of it holds some interest. The visual interest is balanced, which keeps viewers engaged with the design.
Without visual balance, viewers might not see all areas of the design. Any information in those areas could easily go unnoticed.

14. Web Design Principles
8. The 2/3:1/3 rule – most important layout rule
Rule designers use to divide the screen.
Provides a primary area of focus and secondary area of focus.
Navigation panels are places in the secondary area of focus.

15. Web Site Planning
Whether you are involved in creating your personal web site or you are part of a development team, effective web site design starts with the planning process.
Web site planning involves identifying:
1. Purpose
It is important to carefully consider the site’s overall purpose, also called its mission.
For example, a commercial web site’s mission might be to enable vendors to interact with a company’s supply processes; to provide an additional sales channel for products and services: or to promote a particular company, technology.

16. Web Site Planning 2. Target Audience
A web site mission statement is a written statement that clearly explains a site’s purpose and the reason it exists.
Alternately, a web site can use a short, simple phrase or slogan that identifies an organization’s or web site’s purpose.
2. Target Audience
The site’s target audience is/are the group(s) of viewers to which the site’s content is directed.
E.g. a university web site may have several groups in its target audience, including prospective students, enrolled students, faculty and administration.

17. Web Site Planning 3. Objectives and Strategies
After identifying the target audience, you need to identify the objectives
Website objectives define a site’s aims and goals
Website strategies are those actions taken at the web site to accomplish those goals.
A small personal website may have only just one or two goals: to share information about a family or to share useful genealogy links.
1 way to develop objectives and strategies for a commercial website is to determine the answers to a series of questions such as:
is the website going to be used to market the company image?

18. Web Site Planning
Will customers be able to order products and services at the web site?
Will the site provide customer support?
Is the web site going to be used to gather information on customers and potential customers?
Will the web site provide additional information about a specific industry or technology?
By answering the questions, the objectives and strategies can be identified more easily and precisely.

19. Web Site Planning 4. Organizational Structure
A good way to plan a website’s structure is to create a model for the structure using a method called storyboarding
Storyboard is a design model that originally was developed to plan scenes for a movie and animation
You can use card to represent each page, then position the cards on the board and draw the appropriate connections
It helps in identifying potential navigation problems
It provides an overall image in determining how many clicks are required to reach a specific page
It helps you identify dead-end pages (without links to other pages)

20. Storyboard

21. Learning Activities
Task:
Students are required to find 3 websites and apply the web design principles in each of the website design.

22. Thank you