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

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).

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

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

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.

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.

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.

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

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.

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.

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.

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.

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.

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?

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.

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)

Storyboard

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

Thank you