Designing & Planning

What Makes a Quality Site?

Before we jump into making our own sites, we need to determine what makes a quality site. In class we'll watch the overview video for Unit 1. We'll use Module 1, Lesson 1 to help explore what makes a good or bad site.

Evaluation Table & Rubric - Make your own copy of this document to explore and evaluate

RESOURCES

The Webby Awards

The Best Designs

Best Web Gallery

Bad Website Design - Bad Sites

- Search "best websites" or "good websites"

- Search "worst websites" or "bad websites"

The Assignment

Create your own rubric that you will use to evaluate good vs bad sites. Use the template provided above. We will continue to add to this document.

Color Theory & Design

In class we'll cover general design principles together using the links below.

Use Bounceapp to annotate (take notes, mark up) the articles below.

Wikipedia: Web Colors

WebAIM: Color Blindness

Color Blindness Simulator - Take a minute and check out this simulator

After you've read over and annotated the links, answer the following questions with your partner. Share a Google Doc to work together.

- How many different colors are there in the "web-safe" palette?

- Are the majority of people we refer to as color blind unable to see any color at all? Explain.

- According to the WebAIM page on color blindness, what is the key to designing sites that are accessible to people who are color blind?

Colour Lovers - Use Google Slides and Colour Lovers to design a color scheme for a presentation. You need to decide on a color for the following:

- Background color

- Heading Color

- Text Color

- Highlight or alternate text color

Here is an example

Now that you've learned about web colors and accessibility add that information to your Web Site Eval Rubric.

Web Standards

Web standards make it possible to have the same (or similar) experience on a site, regardless of the device you use to access it. We'll use this link to talk about the standards that are important in web design and the organizing body.

Why Standards are important video

History of HTML - Use these two links to create a three part Venn Diagram that compares HTML 1, 4, and 5

Accessibility

color pencils

We want to make sure our sites are designed so that any user, regardless of their abilities, is able to use and get the full experience from our site.

Try It

1. Turn off images in the browser

2. Use Windows Narrator without the monitor

- Or try this Chrome extension

3. Navigate a page without the mouse

4. Watch a video without the volume

accessibility

Accessibility demo page

Chrome accessibility extensions

Organizing

The first step in organizing a website is a concept called "chunking,", dividing the site's content into manageable chunks of information, with all chunks related conceptually to one another. Content within each chunk can then be arranged hierarchically, so that the most important topics within a chunk will appear first in a navigational system.

Read the Web Style Guide chapter on Information Architecture (Organizing your info & Site Structure).

Reading Check. Type your responses to the following questions.

1. List the five basic steps to organizing information for a website.

2. Briefly describe the three essential structures for organizing websites.

Practice

You have been hired by a client whose website has gotten unwieldy after years of willy-nilly development. The client is wanting the site to be better organized, starting from the ground up.

Organize cards into meaningful chunks and propose to the client a new navigational system, where each chunk represents a link on the navigational menu of the home page. The navigational system should successfully balance the following needs:

- There should be no more than ten chunks

- Every page on the website should be no more than three clicks away from the home page.

- Use Google Drawing to "diagram" your site navigation (cards)

- Reorganize this site