The Pages of the Design System

Lay out your application in order to match the environment.

 

Overview

The overview is a layout displaying visual items, such as graphs and figures for more accurate information.

The overview layout is mainly used in analysis pages where the user wants to see a graphical analysis of various figures they have entered into the system. Graphs are a good way for the user to visually understand the data, as well as playing with them.

Overview.png

 

Dashboard

The dashboard is one of the most seen layouts. Users usually spend the first part of their workflow on a dashboard in order to review items important to them.

The dashboard is composed of a number of items. On the top of the page, the top bar and the header indicate what page the user is viewing. The core of the page is composed of various widgets that the user has selected. You can find them in Building Blocks. Five layouts are available to distribute widget cards, with 1, 2 or 3 columns.

Dashboard.png

 

List

In finance, the list layout is probably the most used. It displays items, such as numbers, in an understandable way, for the user to work with them. Items can sometimes be clickable, revealing more information. It enables users to organize and to see numerous items without having to go through a second page.

List.png

 

Menu

The menu displays a list of links leading to the various parts of the application. Each link is composed of 3 items: 

  • A logo on the right
  • A name
  • A description

Each link uses the same positioning, with the logo on the right and the name above the description.

Menu.png

 

Details

A details page shows information related to one specific item. It is presented as a list of cards that contain detailed information, such as lists, graphics, etc. On the right side of the page, you can see a menu that helps you to navigate easily throughout the details page.

Details.png

 

File Import Result 

This layout displays when a user has imported a file into the system.

The layout indicates if the importation is successful and if errors occur. The users then know if they have to change something to make their importation work the next time. 

FileImportResult.png

 

Step by Step

This layout is used when users have to, step by step, create or edit something.

This layout helps the user understand where they are in the process of doing something, e.g. editing or creating something. Achieving each step at a time eases the process and avoids getting lost in it. The line on the top indicates how far in the process the user is, and how long they have to go till finish.

StepByStep.png

 

Calendar

This layout enables users to navigate through different views of the calendar, with weekly, monthly or yearly view. On the side panel, it displays a more detailed view of each event within the calendar itself.

Calendar.png

 

See Finance Active's Design System for more details.

Was this article helpful?
0 out of 0 found this helpful