If you’ve ever designed a content table, you know it can be a little difficult. Moreover, it becomes much difficult when there is a lot of data to return. But, there are ways you can design better content tables.
Today, Dan Romero and Mike are giving some useful tips on how you can improve and design better content tables. Let’s have a look at the tips.
Designing Better Content Tables
Introduction
We all know that designing tables can be a headache, especially those with a lot of data to return. You need to take care of every detail while keeping consistency and clear legibility.
But hey, here we have some tips to improve yours in the best way!
Tip 1: Hierarchy First!
The first thing you have to format is the hierarchy of the elements. Category row names need to be clear to scan data fast. And if there are some clickable elements and complementary text, they need their different format too. Play with sizing weighs, and colors to make a clean flow.
Tip 2: Soft Borders, please
Borders are one of the visual elements that will separate your content rows in your table. Don’t fill your borders with too heavy colors (like 100% black) to create a table that feels naturally, easy-to-scan, and good looking. The content needs more visual weight by color instead of the borders.
Tip 3: Spacing & Alignment
Proper use of spacing, as well as alignment of elements within tables, is essential. You can always design within tables, it is essential. You can always design a compact version if needed, but if the product allows it: give the tables some room to breathe. The user will appreciate it!
Tip 4: Consistent String Formats
String formats? What? These are the formats of how to return data to your UI. For example, for dates, you can return data in multiple ways: “1/4/20”, “01/04/20” or “01/04/2020”. To keep it clear and consistent, use the same formats in your rows.
Tip 5: Give them Colors!
Oh dear colors, are not they beautiful when well used? It’s not an exception when it comes to the content table design. To bring not only better legibility but also a touch of delight, a smart idea is to put some color in tags, categories, avatars, or action buttons when hover.
Oh, Responsiveness!
Your table probably won’t fit on your mobile device and won’t have good readability here. Because of the limitation of the screen width, you have to re-design the table and re-arrange data content for smaller screen resolution. Pro tip: start with the smallest screen resolution and scale with up.
Conclusion
Content table, like any other element in the UI, is super delicate component with a lot of details to take into consideration when designing.
We can definitely transform a boring and flat content table in a modern and effective good-looking one!
Remember, the magic of good design resides in the small details.
Gracias!
Were the tips useful and did it help you design better content tables? If so, make sure to check out Dan Romero and Mike and share some love by sharing these tips with a friend who might find these tips helpful.