Win a Free Class!

Join our email list for a chance to win

Visual Design for Web & Mobile

Learn Current User Interface (UI) Design Techniques

Learn to design websites for mobile phones, tablets, and desktops using the visual design principles of color, layout, and typography. You’ll learn about visual conventions, standards, and industry trends.

You’ll gain experience with the process and principles for designing responsive websites through lecture and hands-on practice.

You will design and produce one or more projects in this class to come out with portfolio material. Your work will be critiqued and you’ll get feedback to help you improve your designs.

This is a design class, not a coding class. Knowledge of a design app such as Photoshop or Sketch is required.

  • Website design by Eon Kim

  • Mobile design by Eon Kim

  • Mobile design by Mathew Patalano

  • Website design & illustration by Jemal McClary

  • Website design by Duygu Kalaycioglu

  • Website design by Eon Kim

Upcoming Classes

Price: $975 Click for Discounts

  • 18 hours of Hands-On Training
  • Mac or PC

What You’ll Learn

Design Overview

Topics

  • User Experience (UX) Design
  • Visual Design
  • UX Is Not UI
Learning from Existing Websites

Topics

  • What Works & What Does Not?
Color

Topics

  • Color Harmonies
  • Creating Contrast with Color
  • Guidelines for Proper Color Usage
Typography & Fonts

Topics

  • Display Text (Such as Headings) versus Body Text
  • Legibility
  • Type Trends
  • Typeface Selection & Pairing
  • Where to Get Web Fonts
  • Ideal Line Height
  • Column Width (Line Length)
  • Hyphenation & Justification
Design Elements

Topics

  • Proximity
  • Similarity
  • Continuity
Trends in Web Design

Topics

  • Analysis of Example Websites
Design Patterns

Topics

  • Example Design Patterns
Multiple Screen Sizes

Topics

  • Responsive Web Design
  • Mobile Considerations & Limitations
  • Discoverability Challenges
  • Mobile Navigation
Workflow: Idea to Design

Topics

  • Example Web Design Workflows
Getting to Know a Project: Creative Briefs

Topics

  • What is a Creative Brief?
  • What to Include in a Creative Brief
Wireframing

Topics

  • Issues to Solve
  • Steps in Creating a Wireframe
  • Designing on a Grid System (like Bootstrap)
Wireframe to Refined Design

Topics

  • Iterate & Refine
  • Understanding the Mobile Experience

Time for You to Design
Project Work

Topics

  • Create Wireframes
  • Turn Your Wireframes into Refined Designs
  • Get Critiques
  • Incorporate Feedback & Improve Your Designs