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.

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.

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.

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.

List grid

Card grid

List grid

Card grid

2 Column grid

3 Column grid

2 Column grid

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).

①Multiple card : Multiple contents in a card

②Grouped list : List view

③Singular content : Individual content

Multiple card type (Contents all inside)

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

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

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

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

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

⑥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

Thumbnails only

Inside of multiple cards

Thumbnails only

Inside of multiple cards

Grouped list type

①Text only

②Thumbnail image list

③Container icon list

④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.
  • Visual depth
  • Grid system