Principles of Website Design

Principles of
Website
Design

Lesson

2

Lesson Objective

Define and apply best practices and
principles of website design and layout

Website Usability

How can a website be designed with

the user in mind?

Open Ended

How can a website be designed with the user in mind?

Multiple Choice

Scavenger Hunt: Usability is...

• Used when Discussing Website Design

• Refers to how easy it is for your client to use your web pages

• Includes both form and function

• All of these

Usability: Form and Function

• Importance of easy navigation
• Balance of form and function
• Critical for user experience
• Impact on site traffic
• Foundation of web design

Word Cloud

One to Two words to describe Usability...

Open Ended

Scavenger Hunt: Good design always...

A Purpose on Every Page

• Clear purpose for each page
• Quick purpose recognition

• Information or interaction
• Entertainment or transactions

• Visuals highlight purpose
• Ensure understandable content

Multiple Choice

When visitors click onto the page, it shouldn't take long to figure out what the page is all about: its...

• sharing information

• Providing a place for interaction

• offering entertainment or enabling the transaction of some type of business

• All of these

Readable Communication

Consider the audience

Use headers and sub-headers

Concise language is key

Avoid complex sentences

Enhance readability

Organize text visually

Multiple Choice

To make text portions more readable...

• use headers and sub-headers of different font sizes

• Use different color font on important text

• use complex sentences with long paragraphs

• Produce lengthy and convoluted sentences

Effective Web Page Elements

Balance text and images

Simplify navigation

Optimize loading times

Ensure mobile compatibility

Engage users quickly

Maintain consistency

Match

Match the following...

• Text to Image Ratio

• Easy to Use Navigation

• Short Loading Times

• Don't Forget Mobile

more images and white space then text

the way users get around page to page

everything is optimized for loading time

Make your site mobile friendly

• more images and white space then text

• the way users get around page to page

• everything is optimized for loading time

• Make your site mobile friendly

Open Ended

Scavenger Hunt: Visual Hierarchy is...

Web Pages and Visual Design

• Utilize visual hierarchy
• Recognize scanning patterns
• Importance of white space and repetition
• Apply the golden ratio
• Use typography wisely
• Keep designs simple

Dropdown

The average readers pay about ​

Select answer

of attention to a web page before deciding whether to stay and read or interact or move on.

Stop and Jot!

What are your key takeaways about the

principles of website design?

Audio Response

What are your key takeaways about the principles of web design?

Open Audio Recorder

Sign in - Google Accounts

You can open this webpage in a new tab.

Copy link

Open in new tab