Page Layout

 

Grid

Baseline Grid

Column Grid

Modular Grid 

Manuscript Grid

Pixel Grid

Hierarchical Grid

 

Use consistent column grids in UI design.

Design the grid (12 columns web/3~4 mobile)

+hang lines/row or no

Gutter size

Unit: how the grid is defined

pixels(px) or percent(%)

Field: a single area in the grid you are using

gutter: space between fields

margin: space outside the grid

padding: space inside 

region: any area of the grid occupied by a block/element

Component/module: block of content

Breakpoints: different width for the same site

Baseline grid: repeating horizontal guideline

 

Create the grid within an element to establish order

Unusual grid: radial

golden ratio

Rule of thirds 

 

Responsive and multi-device design

 

Component based approach

 

mobile first

 

common mistakes in responsive design:

not considering responsiveness at all

making text too small on mobile

sticking to desktop UI/Interaction patterns on mobile

Making touch targets too small

removing content and functionality at smaller sizes

 

Designing Reusable Elements

Design System

Atomic Design: build from the smallest to largest units

Atoms -> molecules -> organisms -> templates -> pages

 

Between guidelines and components

 IBM’s Carbon Design system

Guidelines

• Accessibility

• Content

• Color

• Grid

• Iconography

• Layer

• Motion

• Spacing

• Themes

• Typography

Components

• Accordion

• Breadcrumb

• Button

• Checkbox

• Code snippet

• Content Switcher

• Data Table

• Date Picker

• Dropdown

• File Uploader

• Form

• Inline Loading

• Link

• List

• Loading

• Modal

• Notification

• Number Input

• Overflow Menu

• Pagination

• Progress Indicator

• Radio Button

• Search

• Select

• Slider

• Structured List

• Tabs

• Tag

• Text Input

• Tile

• Toggle

• Tooltip

Experimental: new versions of components for testing; 

Patterns: extra guidance on when and how to use different states for various components; 

Data visualization: special guidelines for graphs and charts

 

Accordion: vertical 

cards

modals

content switcher

banner / top bar

media object

 

responsive disclosure:

additional options are revealed

responsive enabling:

additional options are enabled

 

Form Components

Labels/inputs

Text entry field

Radio button

Check boxes 

Dropdown menus （used less now, avoided in mobile UI）

Buttons: always be an action verb

Toggles (single-option check boxes)

Date and time picker

Progress bar

Tooltip

 

UI state

Some have more than one state

Hover state 

Concepts:

Hiding

Loading

Empty state

input Validation states

In progress

Finished