Web Pages Prepared by Lim Thian Li

1. Web PagesPrepared by Lim Thian Li

2. Learning Outcomes • Demonstrate the web design principles

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

4. 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. Web Design Principles

6. 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. Web Design Principles

7. 3. Colours Colours can influence our mood and emotions. Bright colours: excitement, liveliness, passion. Cool colours: cool and shade, soothing. GOOD EXAMPLES BAD EXAMPLES Web Design Principles

8. 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. Web Design Principles

9. 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. Web Design Principles

11. 6. Flow A layout with good flow will visually lead the user from one element to another on the screen. Web Design Principles 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.

12. 7. Balance People feel comfortable with a balanced design. Balance gives the screen harmony. Web Design Principles

14. 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 Design Principles

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 • A web site mission statementis 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. Task: Students are required to find 3 websites and apply the web design principles in each of the website design. Learning Activities

22. Thank you