UI UX Design Patterns - by University UX Instructor

Deep dive into a UI component and its design patterns, covering origins, pros and cons, use cases, states, real-life examples, and do's and don'ts, including tabs for mobile and web.

Access course material in PDF and a Figma file with live components like form fields, date pickers, and icons. Drag the Figma file into the draft section to open it.

Explore how user interface and UX design patterns organize content and navigation, and learn to apply do's and don'ts for form fields, dropdowns, tabs, and other components in Figma.

Learn practical form field design: ghost text, hover and focus states, inline validation, error handling, and patterns for phone, date, email, money, credit card, and free form inputs.

Explore button design patterns, including types (square, pill, ghost, text, icon), states (hover, focus, loading, disabled), and how to pair primary and secondary actions with spacing, color, and accessibility.

Explore dropdowns as single-selection form elements that save space for multiple items, and how they compare to radio buttons and checkboxes. Learn their states, mobile behavior, filtering, and menu uses.

Explore date pickers, including single-date and date-range selections via a calendar overlay, with mobile full-screen layouts, input options, and visual states from hover to active.

Master radio buttons, check boxes, and toggles: one selection for radio buttons, multi-select for check boxes, and on-off states for toggles.

Explore address forms with autocomplete, ghost text, smart population of street, city (free-form), state (dropdown), zip, and country, and examine search forms with robust autocomplete and accessible submission.

Explore tab bars and title bars as bottom navigation and fixed top bars for mobile and tablet apps, with clear active and default states and 2–5 destinations.

Understand accordions and tabs as patterns that reveal or hide details with expandable headers. Use clear and active states, avoid nested accordions, limit options, and reserve horizontal swiping for mobile.

Learn how tooltips provide informative hints via hover or tap, use icons and inline tooltips, and craft soft shadows with blur and inner shadows for web and mobile.

Master thumbnails and carousels to present image collections efficiently and support quick browsing. Use 100x100 thumbnails with a master image, ensuring equal space and user-controlled navigation.

Master modals and lightboxes to surface extra content without losing context, avoid modal-on-modal stacking, and maintain mindful overlay opacity with a parent–child window.

Explore how menus and drawers deliver responsive navigation across desktop, tablet, and mobile, using hamburger, kabob, and bento patterns with multi-level menus and drawer content.

Use form wizards to split complex tasks into bite-sized steps, clarifying expectations, time, and location, while modeling information hierarchy with examples like an ice cream order.

Explore breadcrumbs as simple wayfinding that shows the site's hierarchical structure from the home page, highlights the current page, provides clear link conveyance, and favors parent-level pages for large sites.

Pagination is a page navigation UI that divides content into pages and uses search and filtering. Infinite scrolling often replaces pagination, while onboarding commonly uses pagination with per-page options.

Explore how icons enhance ui navigation with simple, universal symbols that are action oriented or illustration oriented, and apply best practices for 40x40 tap targets, labels, and consistent stroke styles.

Learn how photos convey brand voice and fast-communicate goals by selecting emotionally resonant imagery, applying color theory, and optimizing for performance with overlays and branding.