Web UI Design: Core - fieldenms/tg GitHub Wiki
Web UI Design
This page is dedicated to Web UI decisions, which include general guidelines used in TG UI and should be followed during the design of new UI elements. Specific technical recipes such as CSS and JS snippets are also provided.
Contents
General Principles and Patterns
Application Layout
General application layout structures are well defined as part of Material Desing.
Three Ways to Represent Entities
- Lists
- Grids
- Cards
- Tables
Lists and Grids
Lists and grids are used to represent homogenous information such as entities of the same type. The main difference between the two is that lists are liner with vertical layout and scrolling, whereas grids layout their items in a regular lattice of n-by-m cells of the equal size. Grids can transform into grids with fewer columns and even into lists if the screen is too narrow to accommodate more that one column.
Grids should not be mixed up with tables, which generally allow for less uniform layout structure (e.g. horizontally or vertically spanned cells).
More details can be found here for lists and here for grids.
Cards
Cards are used for representing heterogenous information such as entities of different types that for some reason should be present simultaneously on the same page. A good example of this is a dashboard with key performance indicators for different domain entities, or an application main menu.
More details on cards can be found here.
Tables
Tables as we know them from T32 or TG Swing UI are not suitable from the perspective of responsive UI. Thus, an alternative approach would need to be developed. It is important to preserve the key benefits of tables, while ensuring usability on devices with different form factors -- desktop, tablet and mobile.
More details on the proposed design solution is coming into this session later.