Web UI Design: Core

Web UI Design

This page is dedicated to Web UI decisions, which include general guidelines used in TG UI and should be followed during design of new UI elements. Also, it should provide specific technical recipes such as CSS and JS snippets.

Contents

1. General Principles and Patterns
2. UI Elements

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.

Search

UI Elements