Principles

Before diving into FOLIO design guidelines, it is important to first get familiar with its design principles :

1. Intelligent defaults

Oftentimes, users need the same thing from any given feature. Designers need to optimize the default values of settings, preferences and layouts to work well for the majority out-of-the-box.

2. Feedback

Designers shall always let users know when an action has failed, has been performed successfully or has been performed with exceptions. Also, the system shall provide feedback that it is currently on a task (loading) at all times when applicable. 

3. Intuitive and Easy to use

Designers shall offer an intuitive point-and-click and touch-based way to things in the interface so that people can discover all functionalities even if they are new to the system. To help users perform repetitive tasks, designers can offer shortcuts and hotkeys, automated workflows or/and efficient GUIs.

4. Use of all space available

Designers need to avoid long pages and scrolling as much as possible. Instead, they shall make use of all the space on large monitors; e.g showing extra panels with content that would appear in fly-out panels or modals on medium-sized or small screens.

5. Hardware-agnostic

FOLIO shall be compatible across most systems.  Therefore, apps shall support an array of screen sizes as well as both touch and mouse/keyboard interactions.

6. Consistent naming

Designers shall use consistent naming to avoid confusion. If they are referring to data or concepts from the FOLIO core system, system’s naming conventions are used. If they are introducing a new type of data, they need to be consistent in the way they refer to the data.

7. Design for perceived speed

Spinners shall be avoided as much as possible. To do so, designers can use skeleton loading and content placeholders while the real content loads.