UIUX Design Course Outline

Course Description

Students will learn and apply the fundamentals of various software applications (such as Adobe XD and Figma), web design. Students will experience what it’s like to work on business Website, Portfolio Website, E-commerce website & Mobile Application design projects while coordinating technical tasks with such important skills as:

  • Organization
  • Management
  • Communication
  • Ethics
  • Teamwork

Students will be given challenging real-world projects and assignments typical for the Web & Mobile App (UIUX) design industry. Students are expected to create quality works and students will be given opportunities to redo their work so that it meets the standards discussed during the course. Classroom activities will also include reading, research, projects, and problem-solving. Students will often work in teams, but they are expected to complete individual assignments in relation to the team’s work.

  • Demonstrate a thorough understanding of the UIUX design elements.
  • Read, understand and communicate in UIUX design language
  • Use professional software programs such as Adobe XD and Figma
  • Demonstrate positive work behavior and learn to solve problems with critical thinking.
Toggle Content

Color Theory

  • Understanding RGB vs CMYK Color
  • Basic Color Terminology
  • Color Meaning (Positive or Negative)
  • Color Sychology
  • Scince of Color
  • Design for Diversity of Culture: Perception of Colors
  • Color Perception & Human Responses
  • Active & Passice Color

Typography

  • Understanding Typography & Type Face
  • Types of Fonts
  • Font Size & Measurement
  • Typography Hierarchy
  • Font Pairing with Image
  • Egibility vs. Readability

Design Principle

– Balance              – Repetition

– Hierarchy           – Alignment

– Proximity           – Contrast 

– White Space

  • Figma

Figma is a versatile design tool enabling collaborative creation of user interfaces, prototypes, and more. With its intuitive interface and cloud-based platform, Figma facilitates seamless teamwork, version control, and real-time editing, enhancing design workflows.

  • Creating a new file
  • Setting up frames (other apps call these artboards)
  • Adding text
  • Creating colored backgrounds for text columns
  • Importing & cropping photos
  • Rounding corners
  • Creating, editing, & organizing text styles
  • Download, Install & Use the Font
  • Importing & modifying vector Shape
  • Aligning & distributing layers
  • Layer opacity vs. fill opacity
  • Reusing colors (color styles)
  • Adding a drop shadow
  • Linking between frames (artboards)
  • Previewing the prototype
  • Creating an overlay
  • Fixing the position of elements so they don’t scroll
  • Optimizing JPEGs
  • JPEG Smoothing Selective Quality
  • Web PNG
  • Optimizing PNGs
  • Nesting Auto Layouts
    Auto Layout Gap Spacing & Padding
  • Auto Layout Sizing & Constraints
  • Negative Spacing & Stacking Order
  • Absolute
  • Positioning Elements
  • Making Links that Scroll Up/Down a Page
  • Making the Navbar Fixed to the Screen
  • Adjusting the Position & Speed of the Scroll
  • Creating a Scrollable Area Within a Page
  • Adding Hyperlinks
  • he Basics of Smart Animate
  • Different Kinds of Easing
  • Setting Up the Parallax Assets
  • Building the Parallax Animation
  • Adding a Hover State to a Button (Using Variants)
  • Opening a Pop-Up (Using an Overlay)
  • Adobe XD

Figma is a versatile design tool enabling collaborative creation of user interfaces, prototypes, and more. With its intuitive interface and cloud-based platform, Figma facilitates seamless teamwork, version control, and real-time editing, enhancing design workflows.

  • Creating a new file
  • Setting up frames (other apps call these artboards)
  • Adding text
  • Creating colored backgrounds for text columns
  • Importing & cropping photos
  • Rounding corners
  • Creating, editing, & organizing text styles
  • Download, Install & Use the Font
  • Importing & modifying vector Shape
  • Aligning & distributing layers
  • Layer opacity vs. fill opacity
  • Reusing colors (color styles)
  • Adding a drop shadow
  • Linking between artboards
  • Previewing the prototype
  • Creating an overlay
  • Background blur
  • Fixing the position of elements so they don’t scroll
  • Making a recording of a prototype
  • Optimizing JPEGs
  • JPEG Smoothing Selective Quality
  • Web PNG
  • Optimizing PNGs
  • Nesting Auto Layouts
    Auto Layout Gap Spacing & Padding
  • Auto Layout Sizing & Constraints
  • Negative Spacing & Stacking Order
  • Absolute
  • Positioning Elements
  • Making Links that Scroll Up/Down a Page
  • Making the Navbar Fixed to the Screen
  • Adjusting the Position & Speed of the Scroll
  • Creating a Scrollable Area Within a Page
  • Adding Hyperlinks
  • he Basics of Smart Animate
  • Different Kinds of Easing
  • Setting Up the Parallax Assets
  • Building the Parallax Animation
  • Adding a Hover State to a Button (Using Variants)
  • Opening a Pop-Up (Using an Overlay)