Data grid in dark and light theme

The task was to create a data grid (data table) UI component. The design challenge was in the way the user interacts with the grid - with touch, mouse and pen, as the component was intended to be used in Windows 10 apps. Further, the challenge has been raised even more with adding tailored functionality for mobile form factor and making the component adaptive.

Desktop/tablet data grid process

- Research

- Create the interaction design through sketches and wireframes

- Discuss and iterate with the team

- Create the default UI of the component in dark and light theme

- Design demos, based on the identified real-life scenarios in the research phase, which showcase the UI component in the best way

Adaptive data grid process

- Research

- Explore the different adaptive layout approaches

- Create the interaction design through sketches and wireframes with mobile first in mind. Existing data grid features and how they will change also covered

- Discuss and iterate with the team

Desktop/tablet data grid process

- Research

- Create the interaction design through sketches and wireframes

- Discuss and iterate with the team

- Create the default UI of the component in dark and light theme

- Design demos, based on the identified real-life scenarios in the research phase, which showcase the UI component in the best way

Adaptive data grid process

- Research

- Explore the different adaptive layout approaches

- Create the interaction design through sketches and wireframes with mobile first in mind. Existing data grid features and how they will change also covered

- Discuss and iterate with the team