Basic layout

Better reachability

One UI screen are designed to consider user movements and allow intuitive, easy use.

The top part of the screen is the viewing area where titles appear. The rest of the screen is the interaction area, where user actions occur.

undefined

Viewing area

The viewing area has wide margins to give the user the impression of open space. It also provides a natural connection between a user's eyes and the flow of action through the margin contrast with the interaction area.

Contents

The viewing area mainly contains content that users simply look at without any interaction. Components that require touch interaction are avoided here.

undefined

Typography for spatial design

One UI allows users to check information in the viewing area and then naturally move to the details in the interaction area. To achieve this, the viewing area contains content that is recognized at a glance, and the margins are effectively used to focus attention on this content.

With center-aligned text in the viewing area, the top of the screen has greater visual stability. This helps distinguish it from the interaction area which appears below.

undefined

Simple cut out

When an image is placed in the viewing area, use straight lines to separate it from the interaction area. Simple cuts reduce the complexity of the screen and minimize content loss.


Do
Don't

Interaction area

Actionable components are grouped and placed in a logical order. The margins of the interaction area should be used appropriately to allow better focus on grouped content.

Grid types

The layout of the interaction area may vary depending on the content shown in it. The grid can be adjusted by considering how well the content will be displayed and what size will be used for the margins on each screen.

undefined
List grid
undefined
Card grid
undefined
2 Column grid
undefined
3 Column grid

Focus block

Focus blocks deliver information by grouping content by category so it's easier to view at a glance. There are three types of focus block: card (multiple items provided as cards), list (multiple items provided in a list), and image (one item provided as an image).


1

Multiple card : Multiple contents in a card

2

Grouped list : List view

3

Singular content : Individual content

Multiple card type (Contents all inside)


1

Image + Text (divided) : In case of the background image has too many details to display text on top.

2

Image & Text : In case of using the whole image as a full bleed background underneath the text.

3

Image + Text : In case of locating title text or image captions below the image.

4

Text only : In case of having more than 3 lines of bodycopy within the card.

5

Clustered images + Text : The radius value of multiple card and singular contents are different.

6

Text + Controller : It is recommended to locate text at the top left corner and on/off controller at the bottom right corner.

Singular content type

undefined
Thumbnails only
undefined
Inside of multiple cards

Grouped list type


1

Text only

2

Thumbnail image list

3

Container icon list

4

2D icon list

Margin and padding

Margins at the edges of the screen allow users to focus on the content in the focus block. Margins are optimized for each of the 3 different types of focus blocks.

undefined