UI Design

After this skill you can…

• Create a consistent 8pt spacing grid
• Choose a type scale and colour palette
• Critique a UI using Gestalt principles

Watch (10 videos)

LIVE DESIGN BATTLES! Interactive Stream - Win a DesignCourse Membership

DesignCourse · beginner hands-on

→ Create UI/UX designs with Figma→ Participate in live design battles

Creative RESPONSIVE Rive Layouts for the Web - Crash Course

DesignCourse · beginner hands-on

→ Create responsive layouts for the web using Rive→ Design interactive UI/UX elements

Portfolio Review: Matteo Fabbiani

Flux Academy · intermediate hands-on

→ Design a visually appealing portfolio website→ Create effective interactions and transitions→ Develop a clear and concise services page

[LIVE] Design Follow-Along - Let's Design a Dark UI Dashboard

DesignCourse · intermediate hands-on

→ Design a UI dashboard→ Apply dark theme principles

Create an Interactive Dark Mode / Light Mode UI in Figma

DesignCourse · beginner hands-on

→ Design a mobile UI in Figma→ Create an interactive toggle for dark mode

Tailwind CSS v4 Full Course 2025 | Master Tailwind in One Hour

JavaScript Mastery · beginner hands-on

→ Build a responsive UI with Tailwind CSS→ Master utility classes in Tailwind CSS→ Deploy a project using Tailwind CSS

Responsive Web Design Tutorial in Adobe XD

DesignCourse · beginner hands-on

→ Design responsive web pages→ Create mobile friendly variations

Learn UI/UX Design & Figma - 2022 Interactive Crash Course

DesignCourse · beginner hands-on

→ Design a website UI with Figma→ Create interactive designs

A Beginner's Web Design Tutorial for 2018 - Part 1 of 2

DesignCourse · beginner hands-on

→ Design a user interface with XD or Sketch→ Build a web page with HTML and CSS

Understanding Visual Hierarchy in UI Design - Live Project Follow-Along

DesignCourse · intermediate hands-on

→ Apply visual hierarchy principles to a UI design→ Create a visually appealing UI

Read (10 articles)