Learn UI Design in 15 Minutes a Week

Each week, we analyze the top UI patterns and the latest design trends from the 🔥 hottest mobile and web apps, and we turn them into actionable 🍲 UI Recipes for designing specific user tasks.

We do the research
You do the design

Proper design research requires downloading and using lots of apps, looking at hundreds of UI patterns, and staying up to speed with the latest design trends.

And we know how much time this takes, because we do it on a regular basis for our own design work.

For each user task (sign-up, search, filtering, onboarding, etc.), we collect hundreds of screenshots from the most popular apps, reverse engineer design them to find common patterns, analyze them from a usabilty standpoint, and create a set of guidelines to help us design similar user tasks.

We believe that sharing our findings and guidelines in the form of UI recipes will help non-designers learn UX best practices from the top apps out there, and will save designers and product managers the time required to do the same research and analysis that we did, so they can just focus on designing the best apps.

We are also building a searchable online database of top app patterns, latest design trends and downloadable UI recipes, and a Sketch plugin to access and insert them directly from within the app.

This Week's UI Recipe
Mobile Search Filters

Release date: October 17, 2018
New Recipe released every Wednesday

User Task

Refine search results using visual filters to help narrow the search criteria to specific categories, ratings, prices, locations, and other attributes.

Design Requirements

Enable filtering:

Quick filter switches — Tap on switch buttons to toggle a filter on/off while viewing results.
Show filters menu — Tap on a button to show a slide-up screen or full screen of filters.

Provide visual feedback:

Show active filters— Provide details about active filters while viewing search results.

Refinements and modifications:

Modify a filter — Use custom icons, switches, checkboxes, lists, or other input controls.
Navigate nested filters — Activate top-level filter categories to access a list of sub-filters.
Reset filters — Reset all filters to default settings.
Cancel filter editing — A button to cancel the action of editing a filter and dismiss the filter menu.
Apply filters - A button to apply filters and re-run the search, and dismiss the filters menu.
Quick filter delete — Quick buttons to delete a filter while viewing search results.

Featuring UI Patterns from:

And Design Trends like:

Ingredients in this week's recipe include:

  • Filter options and toggles
  • Apply, Reset and Clear buttons
  • Single-toggle filter buttons
  • Location filters and maps
  • Top level filter detail toggles
  • Categorized results

Meet The 👨‍🍳 UI Chefs

Amir Khella

I am an product designer, entrepreneur, and startup advisor. Over the past decade, I've created and launched several profitable products with more than 100,0000 customers. I've also helped dozens of companies design and launch their own products, five of which have already been acquired.

Sam Wan

I am a product manager and UX designer. For the past two decades, I worked in research, design, and engineering of software products in all shapes and sizes. I am also the primary inventor on several patents awarded for work at Microsoft and Adobe on design tools and user interface frameworks.

Get A New UI Recipe Every Wednesday

* required

Your email is never shared with anyone!