UIUX (Product Design)

UI/UX Design is the process of creating digital products (websites, mobile apps, software) that are: Easy to use Visually appealing Functional User-centered It combines problem-solving (UX) and visual design (UI) to deliver meaningful experiences.

• Understanding UX vs UI

  ✅ Clearly explain the difference between UX and UI ✅ Identification of UX problems in an app ✅ Identification of UI design mistakes

• Brief history of UI/UX Design

  Student will be able to understand the originating history of UIUX design.

• Elements and Principles of Design

  Elements of Design with Examples Principles of Design with Examples

• Tools overview: Figma, FigJam, others

  Student will understand all the needed tools used in UI design

• Design Thinking

  • Design Thinking process • Conducting interviews & surveys

• Breaking Down Design Analysis

  • Creating user personas • Crafting competitor Analysis • Crafting user flows Assignment: User personas & user flow

Wireframing is the process of creating a simple visual guide that represents the structure and layout of a website or app before design and development begin.

• Intro to wireframing (paper & digital)

  Understanding wireframe and the importance of wireframe both paper and digital.

• Mobile-first vs desktop-first approach

  Student will be able to understand why mobile design is first approach over desktop.

• UI Patterns and Figma Basics

  • UI patterns and navigation • Figma basics: frames, layout, auto layout

• Practical Assessment of Wireframing

  • Sketching App and Web screens Assignment: 5–7 paper wireframes for both App and Website

A Design System is a complete system that includes: Style Guide (foundation), Reusable components, Interaction rules, Documentation, Design + development alignment

• Intro to UI: color, typography, spacing, layout

  Understanding the core foundation of design such as color, typography, spacing. layout etc

• Creating a reusable design system in Figma

  A reusable design system in Figma is a structured collection of components, styles, and guidelines that help you design consistently and faster across multiple projects. Think of it as your UI toolkit that you can reuse for websites, apps, dashboards, or client projects.

• Design System Assessment

  Practical application of system to UI components Assignment: 5–7 polished high-fidelity mobile screens

• Understanding Dashboard UI design • Hands on Dashboard Design • Designing key mobile flows • Components reuse and consistency Assignment: 3–5 high-fidelity App screens

• Set Up Figma for Mobile App Design

  Create a Figma file with a mobile screen frame and a clearly named design page.

• Explore the Parts of a Mobile Dashboard

  Identify the main sections of a mobile dashboard and arrange them in a simple screen sketch.

• Build a Dashboard Layout in Figma

  Arrange dashboard content in a clear mobile layout using frames, spacing, and alignment.

• Apply Color and Type to a Dashboard

  Style the dashboard with a limited color palette and readable text sizes.

• Project: Create a High-Fidelity Dashboard Screen

  Create one polished mobile dashboard screen using consistent colors, typography, and spacing.

• Capstone: Design a Consistent Mobile App Flow

  Design three to five connected high-fidelity app screens using reusable components and consistent styling.