Layout is the placement of elements within a specific area. The layout used by the screen should adequately represent the structure of the abstract space of the service as well as the static screen balance. They are also displayed on a variety of screens, so they should be designed to be used in a similar context in any environment.
Gestalt Theory
Gestalt theory is one of the most important concepts when it comes to placing elements such as colors, text, images, and layers. It means ‘shape’ and ‘form’ in German, and advocates that ‘the whole is not the sum of individual elements’ and is a theory on the visual effect when various elements are combined.
Proximity
Relevant elements are placed closer than other elements. Proximity principle is the phenomenon of recognizing elements that are close to each other as being related to each other. It’s more powerful than grouping by shape or color.
Similarity
Elements that perform the same function are represented and placed in the same shape. Similarity is the grouping of visually similar elements, usually distinguished by size, shape, and color. Because we predict that elements with similar shapes will behave similarly, we design identical features with identical shapes. Proximity is one of the powerful ways to differentiate elements.
Continuation
When placing scrolling or repeating elements, they align identical shapes to specific lines. Continuity is the phenomenon of recognizing elements in the direction as a group when recognizing the direction in the arrangement of elements. Elements arranged in a straight line or curved line are recognized as a group according to the flow of the gaze.
occlusive closure
Design the overall shape with margins and spacing whenever possible. Even if each element is not connected by a line, follow the flow of the eye to grasp the shape of the whole. Rather than grouping with lines or square elements, you can reduce the cognitive load by creating an overall shape with margins and spacing.
Common Fate
Elements with the same concept are designed to behave the same. When elements move in the same direction, they are recognized as elements of the same level.
foreground and background
Design so that the foreground and background are clearly distinguished. When the human eye perceives that elements are overlapping, it recognizes the foreground and background separately according to focus. To reduce clutter, I use darkness and shadows to separate foreground and background.
Common Region
Elements that need to be separated are separated by a background or line. Elements clustered in the same area are understood as elements belonging to the same context, so they are clearly distinguished from other elements.
screen
I mainly design screens for digital devices. Various digital devices such as PCs, smartphones, and smart watches have appeared, and the types of supported devices vary according to the nature of the service. Generally, we design based on the smartphone with the most users.
space
There are two main areas to design the most: the screen size of a smartphone, which is a vertical rectangle, and the desktop, which is a horizontal rectangle. Layers, text, icons, and images are used to compose various screens on this square space.
Unit Unit
Set the minimum units for efficient design. To use design elements in multiple multiples, such as 1.5x 2x, use even numbers that are integers when multiplied or divided. Among them, the 8-point grid system, which can divide the entire pixel of the main display by an integer, is widely used. It doesn’t apply strictly to all units, as some don’t divide by 8, like the 375 and 750 screens on iOS.
Grid Grid
A grid is a tool for efficient design by defining a large frame to place elements. It uses a column where elements are placed and a gutter that defines the margins. It is easy to build with a consistent size and provides a consistent visual rhythm, allowing users to naturally browse through visual elements.
pattern
There are three main patterns that affect the layout. Basically, the layout is fixed and changes according to the screen size, and a fixed pattern that does not disappear even when scrolling and is fixed in a specific area and a carousel that can scroll left and right are often used.
Screen size
Design based on the universal smartphone screen size among devices supported by the service. In the case of iOS, the device to be produced is fixed, so it is mainly produced based on the flagship smartphone. Since Android is released with countless devices, it is not possible to optimize all screens, so it tends to follow the specifications presented by Google.
Fixed & Variable Area Fixed&Variable
Defines how each visual element behaves when the physical size of the screen changes. If you define the element size as variable, it simply enlarges by a certain percentage when the screen grows, and if you fix the size of the element, the element stays the same and only the screen expands to see more content. If you set the element to be variable, it may look overly enlarged, so I tend to fix the element as much as possible.
Density
In order to display the same size when the screen is expanded, you need to understand the screen density. PPI, a commonly used unit, stands for Pixel per inch, and refers to the number of pixels physically displayed in an area of 1 inch x 1 inch. Design in units of DP and PT to display the same size physically on any screen, graphic design tools are usually set to 1px = 1pt, so there is no need to change the settings separately.
structure
For web services that support both mobile and desktop, various patterns are used to express the same content. I mainly use the responsive web method, and customize it for the service based on the general structure below.
- Navigation: Top-level navigation menu area, such as categories, menus, etc.
- Tools: Tools area such as Search, Bookmarks, etc.
- Content: Content display area such as text, image, list, etc.
navigation
Different platforms have different recommended navigation structures for mobile screens. It is recommended to display at the top on Android and at the bottom on iOS. In the case of mobile web, it is usually located at the top, but recently, navigation or toolbars are also placed at the bottom. While there are platform-specific recommendations, it is common to apply the entire platform in a unified layout for ease of design.
