Visual Design

Course details

Skills & Tools

Apply Photoshop's powerful functions to digital product design.

Production Standard

Start with an idea and a moodboard: finish with a production‐ready mockup of a responsive webpage.

The Big Picture

Grasp how effective visual communication — from font pairings to style tiles — helps translate compelling ideas across any team, in any field.

Curriculum

Week 1: Photoshop for Web Design

Orientation & Photoshop for the Web Part 1

• Describe how Photoshop fits into a modern web design workflow.
• Use Photoshop web-specific tools to create parts of a simple landing page mockup.

Photoshop for the Web Part 2

• Use Photoshop web-specific tools to create a simple landing page mockup.

Week 2: The Design Discovery Process

Research

• Explain how an objective and strategy defines the purpose for a web project.
• Summarize a creative brief into keywords to be explored through design ideation.
• Demonstrate how research leads to clear understanding and communication.

Ideation

• Explain how design constraints can be used to prompt design ideation.
• Create a mood board that expresses a clear potential design direction.

Week 3: Composition Principles for the Web

Contrast & Similarity

• Critique and present mood boards from ideation lesson
• Demonstrate how contrast and similarity can occur simultaneously to enhance each other's effects.
• Use contrast and similarity to show relationships between a page's elements.

Gestalt Principles in Web Design

• Identify six gestalt principles of perception when encountered in a web composition.
• Apply levels of contrast and gestalt principles of perception to create effective hierarchy in a composition.

Week 4: Color Theory for Web Design

Color Theory

• Describe the fundamentals of color theory and color schemes.
• Choose color schemes to evoke emotions, create hierarchy, and convey meaning.

Color for the Web

• Apply color theory and color schemes to the web.
• Choose color schemes to evoke emotions, create hierarchy, and convey meaning in your final project.

Week 5: Web Typography

Fonts & Typefaces

• Identify qualities and characteristics of fonts and typefaces.
• Select typefaces for particular audiences or usages.
• Demonstrate an ability to control and manipulate the appearance of type.

Composition with Type

• Explain how and why to set up a baseline grid when setting type.
• Apply knowledge of contrast and hierarchy to typography.
• Demonstrate an ability in basic typesetting on a baseline grid.

Week 6: Designing Interfaces & Interactions

UX Fundamentals

• Consider a web design in terms of its capabilities to the user.
• Identify affordances and evaluate their effectiveness in a web interface.
• Demonstrate a user-centered approach to designing the main interactive areas of a landing page.

Designing for Interaction

• Define common UI and Navigation patterns.
• Apply best-practice UI patterns and navigation to design a multi-state system of interactions.

Week 7: Responsive Design

Responsive Design

• Illustrate how a responsive grid folds to accommodate content at different breakpoints.
• Design mobile and tablet compositions on a responsive grid.

Flexible Session

• This session is designed to allow your instructor to tailor the topic based on the needs of your class. Suggested topics include, designing for mobile, motion design, style guides, etc.

Week 8: Final Presentations

Final Presentations

• Present the decision-making process of your design work.
• Give and receive feedback and suggestions for improvement.