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 Lists

Release date: November 7, 2018
New Recipe every Wednesday at 10 am PST

User Task

Present users with a list of items, as a result of executing a browse or search operation.

Design Requirements

Full list

Show a full list of the items browsed or searched for, sorted by relevance, in a way that enables users to find what they are looking for quickly. For instance, if users are searching for news articles, display most recent first. If they are searching for shoes, display the highest rated ones first. And if they are browsing electronics, sort by most relevant to their previous shopping behavior.

At-a-glance information

For each item on the list, include enough detail so that users can make quick high level decisions without having to investigate lots of individual items’ pages.
Design for a behavior that allow for divergence through high level exploration on the list page, then convergence by exploring fewer individual items’ pages.
At glance details can include a snippet about the item, a thumbnail, ratings, and pricing.

Quick actions

Enable users to perform quick/frequent actions (add, follow, like,…) on the top level list, without having to view each item’s individual page.
You can also enable batch actions (for instance, batch delete of personal photos) by allowing users to select multiple items and choosing a single action to perform on all of them.

Details on demand

When an item is selected (tapped), present users with a detail page, where they can find the most relevant detail to inform them and potentially help them with their next decision.

Featuring UI Patterns from:

And Design Trends like:

Ingredients in this week's recipe include:

  • Simple list
  • List with quick actions
  • Grid
  • Full width thumbnail grids

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,000 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

Your information is never shared with anyone!

* required

Having trouble signing up? Try this form instead