[VIP] UI/UX Design Patterns: User interface design + UX Design + Figma - by a University UX/UI instructor
Design patterns are a set of User Interface guidelines and rules that pertain to how users use products and user interface elements. Understanding these design patterns is a must for any UX or UI designer. Things like form fields, dropdown, navigation bars, tab bars, date pickers etc.
![[VIP] UI/UX Design Patterns: User interface design + UX Design + Figma - by a University UX/UI instructor](https://design.rip/uploads/cover/blog/UIUX-Design-Patterns-User-interface-design-UX-Design-Figma-by-a-University-UXUI-instructor.webp)
About This Class
This class is a breakdown of user interface design patterns and components.
Design patterns are a set of User Interface guidelines and rules that pertain to how users use products and user interface elements. Understanding these design patterns is a must for any UX or UI designer. Things like form fields, dropdown, navigation bars, tab bars, date pickers etc.
Part 1:
We will deep dive into each user interface component and will cover best practices for the following:
- Form fields
- Buttons
- Dropdowns
- Date pickers
- Radio buttons, Checkboxes & Toggles
- Address Forms & Search Forms
- Tab Bars & Title Bars
- Accordions & Tabs
- Tool Tips & Shadows
- Thumbnails & Carousel
- Modals & Lightboxes
- Menus & Drawers
- Wizards, Breadcrumbs & Pagination
- Icons & Photos
PART 2 - FIGMA DESIGN:
I have provided a Figma file that we will use as a project that you can download. We will then go step-by-step and build out the design components within live prototypes together using the design tool figma
Project Description
PROJECT SECTION (PART 2)
I have provided a Figma file that we will use as a project that you can download. We will then go step-by-step and build out the design components within live prototypes together using the design tool figma
Attached are:
- The course material in pdf format
- The course material in a Figma file format
- The project section Figma file
Regarding the Figma file
There are instructions in the video called "course material" and I have attached instructions as well
What's Your Reaction?






