Logo of UI Challenges
Sign in
Wireframe example for Filter & Sort
An example interpretation of the prompt
Icon of target

Filter & Sort

Icon of book open

Design a list screen with filtering and sorting controls for a real set of items, such as products, files, jobs, or posts. The main view should show the results list, the current sort, and any applied filters without forcing the user to reopen the controls.

Place the primary filter entry point where it is easy to reach from the list. Use a panel, drawer, or sheet for the filter controls, with grouped options that match the data: checkboxes for multi-select categories, toggles for binary filters, and a clear sort choice. Keep the labels plain and specific.

Show what happens after a selection is made. The list should update, applied filters should be visible as chips or pills, and the user should be able to remove one filter or reset all of them in one step. Include a no-results state that tells the user what to change to get results back.

Icon of book open

Add a 'clear filters' option to quickly reset user choices, enhancing the usability of your design.

Better at UI design with every challenge

Select complexity and generate challenge.

You can always choose to receive scheduled challenges. A unique design prompt will be sent to your email daily for the duration you select.