Visual Design Bootcamp

UI Design Classes in New York City

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, and 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 the feedback you need to help improve your designs.

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

This Visual Design Bootcamp is held at our web development school in SoHo, located at 594 Broadway, New York, NY.

  • icon for small classesSmall classes
  • icon for small classesComputer provided
  • icon for small classesBook included
  • icon for small classesFree retake

Register for a Class 

$975 18 Hours Mac and PC provided 594 Broadway, NYC In-person classroom training

This course is offered at our design school, Noble Desktop, in SoHo. View upcoming dates and register for this course directly on Noble Desktop’s website.

Register at nobledesktop.com 

What You'll Learn

  • Learn to design websites for mobile, and desktop
  • Apply design principles such as color, layout, and typography to webpages
  • Learn about visual conventions, standards, and trends

Full Course Syllabus

Download PDF Outline

What You’ll Learn

Design Overview

  • User Experience (UX) Design
  • Visual Design
  • UX Is Not UI

Learning from Existing Websites

  • What Works & What Does Not?

Color

  • Color Harmonies
  • Creating Contrast with Color
  • Guidelines for Proper Color Usage

Typography & Fonts

  • 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

  • Proximity
  • Similarity
  • Continuity

Trends in Web Design

  • Analysis of Example Websites

Design Patterns

  • Example Design Patterns

Multiple Screen Sizes

  • Responsive Web Design
  • Mobile Considerations & Limitations
  • Discoverability Challenges
  • Mobile Navigation

Workflow: Idea to Design

  • Example Web Design Workflows

Getting to Know a Project: Creative Briefs

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

Wireframing

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

Wireframe to Refined Design

  • Iterate & Refine
  • Understanding the Mobile Experience

Time for You to Design

Project Work

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