Here’s a collection of list UI design inspiration and tips to think about when designing list UI components.
Note! Some of these designs are not mine but found on Dribbble. Credits to each designer/owner are given below every image.
Related: Form UI Design Inspiration & Tips
Tips on List UI Design
The list UI component is probably not the first one you think about when you think about a complex component. But the truth is that UI lists can be very complex depending on how much information and interaction needs to be incorporated into the interface.
The hard part is not to display information in neat lines, but rather factors such as:
- How to show visual hierarchy and importance between different categories of information
- How to show action in the list/table
- Ordering and filtering of the information
- Format of the information
- How to show additional information without forcing the user to redirect to a new screen (by changing states instead)
- How to bring the user’s attention to new information (for example when a number has just been updated)
Exactly what factors you need to consider in your own UX/UI design is highly context-dependent. But I will show you a bunch of inspiration in this post, with takeaway points of each, that you may want to think about in your own project.
Things to get clear on first
However, some concrete guidelines that I can give are to have a clear answer to these questions before designing the visuals:
- What is the most imporant information? And how can this information be highlighted
- Should the user be able to take an action? Which ones and how?
- Are there any states that will be shown? E.g. active and inactive. How will these states be represented? Perhaps you need to design those states as well.
- Do you really need to incorporate all the information and functionalities that you’ve planned?
- Should the user be able to filter or order the information? How?
General guidelines
There are also some general guidelines that usually can get applied to most list UI designs.
- Left align text (for better readability)
- Highlight the most important information through a larger font size or more prominent font-color
- Use white space (padding and margin) or dividers to separatae groups of information
- You can made the dividers in a lighter/lower-contrast color to the background so that the design looks cleaner. Just be mindful of still having enough color contrast.
- Keep the design layout and content as consistent as possible (meaning that each row for example looks the same visually, except for the informataion)
- Icons can be used to help users find specific information faster
- Keep the color palette minimalistic to let the content/information get the user’s attention
List UI Design Inspiration
Here comes a couple of visual examples and inspiration!
This first design is one of mine. Some points to take inspiration from or observe:
- User’s can change the list order by clicking the buttons at the top (Status, Product/Service, and Price)
- The status icons are designed in color and built as components
- Text is left-aligned
- Each list item can be expanded by clicking the right down-arrow to the right
- At the bottom, the total amount of list items are shown, and if needed, this component would be scrollable
Here’s another one of mine, to illustrate how a much simpler list could look. Here, each list item in the table is much less complex.
Some things to observe:
- The most important information has a bigger font-size and lighter color
- Text is left-aligned
- There’s a consistency to each list item
And the last example of mine that I’ll show. I created this design for my own app idea and it needed to include multiple types of information:
- A date (E.g. Jan 4)
- List items that were expandable
- List item title
- List item tags/labels
And in addition, I wanted the items to look continuous (hence the blue dots with dotted lines between them).
And here’s a bunch of designs by other designers for more inspiration!
The following one by tonik can be a good inspiration for how to design searchable lists with filtering (left section).
Dwinawan‘s design is an interesting example of how you can incorporate progress bars in list elements. In this design, there are both pillar progress bars, as well as circular progress bars included. Really nice work!
Let’s not forget dark mode UI list designs! Here’s from Zura Chavchanidze. It is very minimalistic, but one nice detail to borrow from this would be the colorful list icons to the left of every item. You could exchange it for illustrations, or geometrical shapes, or other icons.
I hope this was helpful to you!
