UI Design Bootcamp Online

UI Fundamentals

How & when to use common UI patterns

• Menus
• Tabs
• Bottom tab bar
• Buttons (including “Call to action” or CTA)
• Accordion
• Carousel
• Breadcrumbs
• Modals
• Forms
• etc.

Wireframing for UI Designers

Wireframing

• Why and Gow to Create Wireframes
• Issues to Solve
• Steps in Creating a Wireframe
• Designing on a Grid System (like Bootstrap)
• Get Critiques
• Incorporate Feedback & Improve Your Designs

Wireframe to Refined Design

• Iterate & Refine
• Understanding the Mobile Experience

UI or Visual Design Concepts

Learning from Existing Websites & Apps

• 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 & App Design

• Analysis of Example Websites & Apps

Design Patterns

• Example Design Patterns

Multiple Screen Sizes

• Responsive Web Design
• Mobile Considerations & Limitations
• Discoverability Challenges
• Mobile Navigation
• Phone vs Tablet App Design