Students will identify course requirements

Students will identify image formats that can be used in web pages

Students will identify and list common web page sizes and resolutions

Students will list and describe key concepts in page design and layout

Review Course Syllabus and fill out review form

Syllabus

Review Form

What is Good Design?

Download the Good vs. Bad Design form

Look at some of the sites listed below. What makes the good sites good? What makes the bad sites bad? Try to come up with 10 items for each column

• Awwwards
• The Best Designs
• Web Pages that Suck
• 20 Examples of Bad Web Design

Principles of Layout and Design

Download Layout Review Form

Scan and read The Principles of Beautiful Web Design

Answer the questions on the form. Put each answer in your own words. Don't copy and paste.

Layout and Design for the Web

Browser Sizes and Design Limitations

W3 Browser Display Stats

• Pick 3 of your favorite websites. Use Command - Shift - 4 to take a screenshot of each and open them in Photoshop. What is the width and height of the websites? If you change the size of the browser window, does the size of the website change?

Web Image Formats

Lecture 1

Web Image Formats

Photoshop Web Formatting

Browser Design Limitations

Students will list and define the visual cues used in the design of web navigation

Students will list and define good practices in web navigation

Students will create different navigation design styles with Photoshop

Assignments and Review

Turn in Photoshop Assignment

Review Design and Layout Terms

Navigation Design

Download the Navigation Review Form

How to Design the Best Navigation Bar for Your Website

Pattern Tap - Navigation

Pattern Tap - Links

Photoshop Navigation Tools

Text Tools

Shape Tools

Color Tools

Layer Effects

Lab

Begin Photoshop Navigation Assignment

Students will list serif and sans-serif fonts that are considered web-safe.

Students will use Photoshop character and paragraph tools to create a visual hierarchy of type

Students will use wireframing tools to create wireframe of financial website homepage

Assignments and Review

Turn in Photoshop Navigation Exercise

Web Typography Review

Download the Typography Review Form.

Save the document with your name.

Read through the following links and answer the questions:

• Read The Basics of Typography.
• Web-Safe Fonts

Photoshop Typography Exercise

Get the "typography.psd" file from your instructor's outbox. Place it on your scratch drive.

Re-arrange and edit the formatting of the text to create a visual hierarchy

Use Photoshop's character and paragraph tools to adjust leading, tracking and kerning and alignment

You can change font types, sizes, and style but you can't change the text color.

Wireframing

Read UX 101: The Wireframe

• Paper Browser
• iPlotz

Lab

Work on Bank Homepage Wireframe

Students will list and describe similarities and differences between The Golden Ratio and The Rule of Thirds

Students will create a web page design using The Golden Ratio or The Rule of Thirds

Turn in Homework

Bank Homepage Wireframe

Review Text Hierarchy Exercises

Webquest: The Golden Ratio & The Rule of Thirds

Read the following two articles:

• Applying Divine Proportion To Your Web Designs
• The rule of thirds and the golden ratio are not the same…

Now answer these questions:

• What is the Golden Ratio? How do you use it?
• What is The Rule of Thirds? How do you use it?
• How are the Golden Ratio and the Rule of Thirds similar? How are they different?

Enter your answers in an MSWord document. Print it out when you have finished.

Activity:Using the Golden Ratio or Rule of Thirds

Review Tools

• Browser Safe Areas Guide
• Photoshop Web Presets
• Golden Ratio Calculator
• Photoshop Actions and Guides
• Photoshop shape tool

Download the source files for the Rainbow Ranch. Now create a Photoshop design of the Rainbow Ranch homepage using the resources provided.

• Decide the standard browser size you will use
• Decide which browser safe area you will use
• Include all text
• Include at least two of the provided photographs
• Crop and resize photos as necessary

Use the "Save for Web.." command to save the exercise as a .jpg file when you have finished.

Lab

Begin work on Bank Homepage Mockup

Students will list the basic color types and describe the properties and emotions associated with them.

Students will list and explain at least 3 strategies for developing a project color palette.

Students will define Hue, Chroma, Saturation, Value, Tones, Shades, and Tints and how they are created

Students will create color palettes for redesign of small business website

Students will create wireframe re-design for small business website

Homework and Review

Turn in Bank Page Mockup

Color Review

Download the Color Review Form. Add your name to the form and use the links below to help you answer your questions.

• Color Theory for Designers, Part 1: The Meaning of Color
• Color Theory For Designers, Part 2: Understanding Concepts And Terminology

Save the file when you've finished.

Color Palettes and Strategies

Read the final section of the Smashing Magazine article and answer the questions on the last page of your review form.

• Color Theory for Designers, Part 3: Creating Your Own Color Palettes
• Intro to Kuler

Lab

Bank Page Mockup Review

Begin work on Wireframe and Color Palette for Small Business Website Redesign

Students will explain the use of grids in web design and the basic grid elements

Students will be able to create a web page grid template using Photoshop

Students will design a website homepage using grid structure

Homework and Review

Wireframe and Color Palette

Bank Homepage Design Review

Grids Review

Download the Grids Review Form

Use the links below to answer the questions in the form.

• Grid-Based Layout
• Grid Calculator and Grid Designer
• Quiet Structure

Grid Tools

How To Setup A Layout Grid In Photoshop

Modular Grid Web Tool

Establishing Your Grid in Photoshop

Grid Exercise

Download Week 6 Grid Exercise

Create a design using the text and images provided

Use a grid for layout. You may choose the size.

Images may be resized to fit grid.

Lab

Begin work on Small Business Redesign Mockup

Students will list and describe ways images can be incorporated into web page design

Students will list and describe four design principles for using photographs in web pages

Students will categorize the visual incoporation of photographs in web design

Students will work on Circus Homepage Wireframe

Homework

Small Business Redesign Mockup

Images in Web Design, Part 1

Download the review form. Read the article listed below and answer the first three questions.

• The Shocking Truth About How Web Graphics Affect Conversions

Images in Web Design, Part 2

Look through the examples provided 40 Excellent Examples Of Use Of Photography In Web Design and Excellent Examples of Using Photos in Web Design. Based on what you see, how would you categorize the ways in which photographs are incorporated into home page designs? Do you notice any similarities in placement and arrangement of the photos? Do some specific patterns emerge? How do the photos relate to the content and navigation of the page?

Write your responses under question 4 on the review form.

Small Business Redesign Review

Visual Tone

Color Palette

Grid Structure

Balance

Typography

Lab

Review Fern Street Circus Wireframe Assignment

Students will list and explain the differences in Creative Commons licenses for photos

Students will list and explain the differences between "royalty-free" and "Rights-Managed" photographs

Students will begin design of Circus Homepage mockup

Homework

Turn in Fern Street Circus Wireframe

Free Image Resources - Rules and Use

Download the Image Use Review Form.

Use the links below to help you answer the questions on the form.

• Creative Commons Licensing
• Flickr: Creative Commons License
• Google Usage Rights
• Morgue File

Fee-based Image Resources

• Stock Photography
• iStockPhoto
• ThinkStock

Lab

Begin Fern Street Circus Mockup Assignment

Students will list and define basic requirements of iPhone interface design

Students will write one paragraph iPhone App proposal for instructor approval

Students will work on iPhone Wireframes Assignment

Assignments

Turn in Fern Street Circus Mockup Assignment

iPhone Design

Download the iPhone Design Review Form

Answer the questions after reading through the articles below

• User Interface Design for iPhone Apps
• Getting Started in iOS User Interface Design
• iOS Developer Library Custom Icon and Image Creation Guidelines

iPhone Demo

Lab

Review iPhone Wireframe and Mockup assignments

App Definition Statement approval

Begin work on iPhone Wireframes Assignment

Review

Review Fern Street Circus Mockups

Students will review iPhone wireframe assignment

Students will work on iPhone mockup assignment

Students will work on make-up assignments

Assignments

Turn in iPhone Wireframes Assignment

Lab

Work on iPhone Mockups

Make-up Assignments

Links: Designing an iPhone App

Design an iPhone Bank App in Photoshop: Part 1

Design an iPhone Bank App in Photoshop: Part 2

Making an iPhone Icon

Students will complete iPhone Mockups

Students will present iPhone Mockups

Lab

Complete iPhone Mockups assignment

Presentation

Present and review iPhone mockups

Review

Download and complete Course Review Form

Read Chapter 1

Reading Summary 1

Complete Photoshop Exercise 1

Read Chapter 3 in textbook

Reading Summary 2

Complete Photoshop Navigation Exercise

Read Chapter 4 in textbook

Reading Summary 3

Bank Homepage Wireframe

Bank Homepage Mockup

Read pages 43 - 80 in textbook

Complete Reading Summary 4

Wireframe and Color Palette

Small Business Redesign Mockup

Read pages 153 - 173

Complete Reading Summary 5

Fern Street Circus Wireframe

Fern Street Circus Mockup Assignment

iPhone Wireframes Assignment

iPhone Mockup