10201166UI Design
Course Information
Description
This course introduces the theories, skills, and applications needed for designing digital user interfaces. Students explore UI design principles for screens, including layout, typography, color, imagery, iconography, interactivity, usability, accessibility, design patterns, and prototyping. Emphasis is placed on creating cohesive interfaces and preparing design files for development handoff.
Total Credits
3

Course Competencies
  1. Apply visual design principles to screen-based interfaces
    Assessment Strategies
    Projects, Skill Demonstrations
    Criteria
    Apply hierarchy, alignment, spacing, contrast, and balance in UI layouts
    Design interfaces appropriate for digital screens rather than print
    Use grids and spacing systems to organize interface content
    Demonstrate consistency across multiple screens within a project
    Design interfaces that clearly communicate purpose and function

  2. Use typography and color effectively in UI design
    Assessment Strategies
    Projects, Skill Demonstrations
    Criteria
    Select effective typefaces for screen-based interfaces
    Apply type consistently using defined text styles
    Use color to support hierarchy, emphasis, and usability
    Contrast and legibility considerations are evident
    Apply color and type intentionally rather than decoratively

  3. Create and apply UI components and patterns
    Assessment Strategies
    Projects, Skill Demonstrations, Peer Critiques (Written and/or Verbal)
    Criteria
    Design reusable UI components such as buttons, cards, and navigation elements
    Apply consistent component styling across screens
    Design and apply basic component states (e.g., default, hover, active)
    Components are organized in a logical and manageable structure

  4. Develop interactive prototypes to communicate design intent
    Assessment Strategies
    Projects, Skill Demonstrations, Presentations
    Criteria
    Create low- and mid-fidelity UI screens as part of the design process
    Build clickable prototypes that demonstrate user flows
    Apply basic interactions and transitions to support understanding
    Maintain organized layers, naming conventions, and structure
    Use prototyping to communicate design decisions

  5. Demonstrate professional design workflow and file organization
    Assessment Strategies
    Projects, Skill Demonstrations
    Criteria
    Create project plans using sketches, references, or moodboards
    Maintain consistent file and folder organization
    Use styles, components, and shared assets to support efficiency
    Iterate on designs based on feedback
    Prepare clear, well-organized files suitable for collaboration

  6. Participate in critiques and communicate design decisions
    Assessment Strategies
    Peer Critiques (Written and/or Oral), Written Feedback, Presentations
    Criteria
    Use UI and design terminology effectively
    Your feedback is constructive, inclusive, and respectful
    Defend your design decisions using visual design principles
    Your responses to critiques meet guidelines specified by the instructor
    Revisions are implemented, adapted, or other
    Spoken feedback is clear, so others understand
    Written feedback follows guidelines specified by the instructor

  7. Design a cohesive multi-screen UI concept
    Assessment Strategies
    Projects, Presentations, Peer Critiques (Written and/or Oral)
    Criteria
    Design a minimum set of cohesive screens for a single digital product
    Multi-screen UI concept maintains visual consistency across all screens
    Multi-screen UI concept includes clear hierarchy and interaction intent
    Multi-screen UI concept applies UI patterns effectively for the product context
    Final project reflects intentional, polished UI design decisions
    Final project meets guidelines specified by the instructor