• Blog
  • Categories
    • All posts
    • Concepts
    • Illustrations
    • Thoughts
    • Reviews
    • Freebies
    • Sketches
  • Projects
    • UX Recipe App
    • UX Recipe Show
    • Paper Smartwatch Kit
    • How Romanians Plan Their Electric Car Trips
  • HCI2025
  • About
Pixels, dots and points of view

pixels, dots and points of view

  • Blog
  • Categories
    • All posts
    • Concepts
    • Illustrations
    • Thoughts
    • Reviews
    • Freebies
    • Sketches
  • Projects
    • UX Recipe App
    • UX Recipe Show
    • Paper Smartwatch Kit
    • How Romanians Plan Their Electric Car Trips
  • HCI2025
  • About

Week 7: Design Patterns - Web / Mobile / Smartwatch

  • Web UI example patterns

  • Navigation

    • list menu, hamburger menu, mega-menu, drawers, sidebars, cards, tiles

  • Layout

    • grids (centered, full-screen), split, card, masonry

  • Actions and commands

    • left click, right click, hover actions, inline actions, contextual actions, toolbars, drag-n-drop, pop-over, pop-ups

  • Tables and Lists

    • rows, columns, sticky tables, expandable tables/lists, sort, filters pagination

  • Form patterns

    • label, input, placeholder, errors, warnings, success

    • hover, active, visited, empty, ideal, exaggerated

    • inputs: text, radio, checkbox, date/time, slider, toggle, single select, multi-select, textarea, spinners, stepper, number, password, file, color picker, rating, token/PIN, location, WYSIWYG, phone, email, URL, search, masked, signature, image, audio, video, CAPTCHA

    • progress bar, form wizard

  • Desktop UI example patterns

    • Navigation

      • menu bar, tabs, folder/file view

    • Layout

      • center stage, toolbars, sidebars, panels, widgets, modal windows

    • Actions and commands

      • trackpad actions: pinch, swipe, tap

  • Mobile UI Patterns

    • Navigation

      • top bar, bottom bar, floating button, dashboard

    • Layout

      • cards, tiles, grids

    • Actions and commands

      • tap, double tap, long press, swipe, pinch, spread, pan, drag, flick, rotate, shake, swipe up-down-left-right, 3D touch,

      Tables and Lists

      • horizontal tables, tables as lists, cards alternative

    • Form patterns

      • same as web, but take into account:

        • dedicated on-screen keyboards

        • dedicated screens

  • Smartwatch patterns

  • Android Wear

    • Cards

    • App Icons

    • Pages

    • Dismissing Cards

    • Action Buttons

    • Action countdown and confirmation

    • Continuing activities on phone

    • Actions on cards (media controls)

    • Card Stacks

    • 2D Picker

    • Voice commands

    • Selection List

  • Apple Watch

    • Digital Crown + Touch

    • Glances

    • Notifications

    • Lists

    • Charts

    • Calendars&Time

    • Complications

    • Pickers

    • Activity rings

    • Menus

    • Sliders, switches

    • Buttons, Images, Labels

Useful resources

UXPin Timeless UX Design Trends

UXPin Tactical UI Design Patterns

UXPin Designing Better UX with UI Patterns

UXPin UX Design Trends Bundle

Mobile UI Design Patterns (UXPIN free book)

Mobile Design Pattern Gallery

Mobbin.design

Touch Design For Mobile Interfaces

Android Wear OS Guidelines

Apple Watch Human Interface Guidelines

Saturday 04.05.25
Posted by Alecsandru Grigoriu
Newer / Older

Pixels, dots and points of view - a blog by Alecsandru Grigoriu
View RSS feed