The principles of design (デザインの原則) are basic guidelines for arranging elements such as text and graphics so they are easy to read and the intended message reaches the reader.
Principles of design
Proximity: group by distance
Alignment: line up on a reference line
Repetition: reuse the same rules
Contrast: make differences clear
The four best-known principles are proximity, alignment, repetition and contrast. None of them depends on an eye for beauty; they are layout rules that anyone can apply. They hold for any medium, from documents and web pages to posters.
AnalogyIt is like setting a table: serve each dish on its own plate, turn the plates the same way, use one matching set of tableware and give only the main course a large portion, and the whole table looks orderly.
How to rememberIn English the four are sometimes called CRAP, from the initials of Contrast, Repetition, Alignment and Proximity.
Exam points
Mix-upThe principles of design (デザインの原則) govern how elements look and where they sit, while LATCH decides the order in which information is arranged, so the two deal with different things.
Proximity (近接) is the principle of placing closely related elements near each other and leaving space between unrelated ones, so that the grouping of information is visible.
Readers see things that sit close together as one group. Tighten the gap between a heading and its text and leave wider space before the next item, and the break comes across even without a border. If everything is spaced evenly, it becomes unclear where one set ends and the next begins.
AnalogyPeople chatting in a circle stand close together and a little apart from the next circle, so even from a distance you can tell who is with whom.
How to rememberThe word comes from Latin proximus, "nearest": distance itself is what marks a group.
Exam points
Mix-upProximity (近接) also means keeping unrelated elements apart; it is not about closing up the white space so that every element is packed together.
Alignment (整列) is the principle of placing the left edges, centers or right edges of elements on an invisible reference line to bring order to a page or screen.
When positions line up, even elements far apart look connected, and the eye moves along without getting lost. Within one document, keep a single basis for alignment, such as left-aligned throughout. Mixing centered and left-aligned text on a whim makes the page look untidy.
AnalogyWhen people in a queue stand along a line on the floor, the shape of the queue stays clear however long it gets.
How to rememberThink of wheel alignment on a car: everything points along one line, and nothing is allowed to drift off it.
Exam points
Mix-upProximity (近接) shows grouping through the distance between elements, whereas alignment (整列) shows how elements connect by lining up their edges or centers on an invisible reference line.
Repetition (反復) is the principle of reusing visual rules such as colors, typefaces, symbols and layouts throughout a document to create a sense of unity.
If heading colors and bullet symbols stay the same from page to page, readers can tell at once that they are looking at the same kind of information. When the rules change on every page, content of the same kind starts to look unrelated. Consistency across the whole makes a document easier to read through.
AnalogyWhen a team wears matching uniforms, you can tell who plays for it even when the players are spread across the field.
Exam points
Mix-upWhat repetition (反復) repeats is visual rules, not the same text or content printed several times.
Contrast (対比) is the principle of making clear differences in size, weight or color so that important elements stand out and the priority of information is shown.
Set headings larger and bolder than body text, and readers see at a glance where to start. If the difference is too small, nobody can tell intended emphasis from a simple mismatch, and the effect fades.
AnalogyAn unusually bright star in the night sky catches your eye at once, but when every star shines equally, you do not know where to look.
How to rememberThink of contrast in a photo: the bigger the gap between light and dark, the more it grabs attention.
Exam points
Mix-upRepetition (反復) makes things look alike to create unity, while contrast (対比) makes clear differences to show reading order and importance.
LATCH is a framework that sums up the axes for ordering or classifying information as five: location, alphabetical order (kana order in Japanese), time, category and hierarchy.
Initial
Axis
Example ordering
L (Location)
Location
By place on a map or floor guide
A (Alphabet)
Alphabetical or kana order
By how names are read
T (Time)
Time
By date or time of day
C (Category)
Category
Grouped by type
H (Hierarchy)
Hierarchy
By degree, such as size or importance
The name comes from the initials of Location, Alphabet, Time, Category and Hierarchy. The same information becomes easier or harder to find, and comes across differently, depending on the axis used, so pick the axis that matches how users search. A recipe collection, for instance, works differently depending on whether it is split by type of ingredient or listed by dish name in alphabetical order.
AnalogyIt is like deciding whether to shelve books by author, by publication date or by genre, depending on who will be looking for them.
How to rememberA latch is the catch that holds a door shut; picture five latches holding information in place.
Exam points
Mix-upH (Hierarchy) orders things by degree, such as size or importance, and is a separate axis from C (Category), which divides things by type.
Key points
The principles of design are guidelines for laying out elements clearly without relying on an eye for beauty, and they work in any medium.
Proximity expresses grouping through the spacing itself, so separation comes across even without borders.
With alignment, keep the same basis for lining things up throughout a document.
Contrast works when the difference is made clearly, not halfway.
From the five axes of LATCH, pick the ordering that matches how users search.