Expand your prototyping knowledge

5 Tips to Make your DataLists and Grids Look Awesome!

5 Tips to Make your DataLists and Grids Look Awesome!

Most of us know how to create data masters or import csv into Justinmind. However, the trick for a simple and efficient DataList table or DataGrid is in its design. Check out these 5 tips to make simple, interactive and beautiful DataLists and DataGrids!

1. Data-driven prototype layout –List or Grid?

The DataList layout structures data by rows and is great to display numeric or written information.

The DataGrid layout structures data in a grid of rows and columns. This approach is most commonly used to organize visual information. But the datagrid is a trend that seems to be on the rise for any layout and for organizing just about anything.

To handle information efficiently we should have clear goals, a target audience in mind and a thorough understanding of their needs. We must base our layout on the content we are presenting and what we want it to achieve. Putting content first is key when choosing a data layout feature: our layout needs to adapt to the content, and not the other way round.

As we mentioned before, more and more designers now use the grid layout, no matter the type of information. Why? Well, grids look neat. But we think it’s still interesting to know when a list is a better option.

A good rule of thumb is to go with the DataList layout for more detailed information. The information in a DataList is meant to be read and should make it easy to find specific information.

DataList scheme

Go with the DataGrid layout for visual information or to show a particular link or relationship between elements. Information in a DataGrid is processed more like an image and it reveals information about the data.

DataGrid scheme

If you want to go further, you have the option to transfer data information to a different screen to clearly visualize your data results. Here’s an example of what we’re talking about:

Data Grid - Transfer

 2.Use the white space in your canvas

This works particularly well for Datagrids. Using the white space from the background is a simple and easy way to make grids more appealing and clean cut for the end user.

You can increase or decrease whitespace between the cells in your DataGrid and use it to define its structure and style.

DataGrid whitespace

White space helps you to define where you want the user to focus their attention.

Separating blocks of information helps better define a connection between data when there is one, and recognize when there isn’t. You can separate blocks of information either by setting the space between the cells as we mentioned before, or by grouping your data in different data masters and displaying it using multiple datagrids.

When displaying data using the DataGrid in Justinmind, you can manage the orientation of your layout and set the number of rows when it’s vertical and columns when it’s horizontal. Keeping the all of your columns visible at first glance makes it easy to scan and communicate information.

Whitespace is a lifesaver when it comes to minimizing complexity and removing clutter from our UI.

 3. Add filtering and sorting to your lists and grids

Filtering and sorting allow you to focus on results. Identifying your audience and the purpose of your list or grid is fundamental to creating the right design to present it. Each feature and function you add to your datalist or datagrid should help you increase usability and readability. Both sorting and filtering are extremely common features when presenting data, because they are intuitive and engaging.

Making your columns sortable

Making your columns sortable helps to organize the information in your UI or what is behind it.

Sortable columns let you structure information, be it to compare information, group information, or to find a specific result (when multiple sorting is available). It will also make your data master organization optimal to accomplish its goals.

sortable columns


 Adding filters to refine searches

Filtering allows you to narrow down the information to a specific interest or result, and can be a powerful feature, depending on the amount of data in your data master.

It’s easy to include filtering with Justinmind. Filters allow you to refine search, and Justinmind gives you the option to set up filters through event actions that would act as content structures.


Check out any of the following Justinmind tutorials to learn how to add filters and sorting options to your DataGrid or DataList.

How to Simulate Searches in Justinmind
How to Add Filters to a DataList Header
How to Make your Columns Sortable

4. Use Pagination to go through your List

To avoid overloading and make content easy on the eye, it’s good and common practice to split larger amounts of data in different pages.

Pagination should be labeled based on the type of prototype and the information in your data master. For example, you can simply add icons such as “<<,>>,<,>” or you can number pages, set names, etc. There is no right or wrong way to do this as it depends completely on the app you are designing.

List Pagination

5. Make your Grid Responsive

Responsive is the new standard. If you’re already into the “mobile first” design trend, you know that prototyping a design layout that adapts to the size and orientation of the device is becoming the norm. It is indeed an excellent way to ensure an optimal user experience in all devices.

When prototyping DataGrids, take a little time and make them responsive. It is important that the person behind the screen can view all columns at once so that they can scan for information just by scrolling down – we all know no one likes horizontal scrolling!

In an analysis of the distribution of attention along the dimensions of webpages, Jakob Nielsen concluded that “people spent more than twice as much time looking at the left side of the page as they did the right”. So to try place the most important columns first, starting on the left!

You can prototype responsive datagrid designs in two different ways.

I.Resizing the cells in the datagrid. The resize option adapts cells to either larger or smaller sized device screens. All cells are resized dynamically as the screen size changes, without losing their original proportions or properties.

Grid Resize scheme

II.Rearranging cells to adapt the number of visible columns in the screen. The grid cells are dynamically rearranged as the screen size varies. Instances would stack horizontally and/or vertically as the screen gets bigger or smaller.

Grid rearrange scheme

With Justinmind you only need to create one prototype to be able to show it on multiple devices.

Great content presentation is key to any superior design, but it is especially important when the content has data –because we don’t want to bore anyone to death with a large data table in our annual report! When done right, the Grid and List structures are the perfect way to convey sets of data effectively, and make them visually appealing.

Lists and grids give you all the flexibility you need to prototype data-driven applications. You’ll see that when your prototype looks good, you look good and so does your app.


Sergi Arevalo

About the Author

Sergi specializes in lean user interface and user experience design. He has experience optimizing websites and all types of multimedia applications using the latest techniques in responsive design. Metalhead, game addict, and he’s not a hipster.

Comments are closed.