Edit Introduction: People often say that the craftsmanship behind excellent design is invisible, but this does not happen randomly. Whether people notice it or not, the design is carried out according to a large number of and strict principles. This article will explore the lowest design principles and analyze why they make the design more effective. Interested friends come and have a look!
Hi, I am Caiyun. Design trends are changing year by year, and design skills are constantly being updated, but when we return to the original source, the underlying theoretical knowledge will not change. Almost every year, I read some basic design books, such as "HTM6, Design Book written for for everyone", and I will find that these principles will bring new gains every time I read them. As the years of work increase, the value of underlying knowledge is becoming more and more profound. I wonder if you will feel this way?
On Medium, I saw an article about design principles written by a foreign design leader who has worked for more than 17 years. What does design become effective? Very well summarized. The article is very long. In order to improve your reading experience, I plan to update it in two issues. If you can read it patiently, I believe you will definitely gain something!
User flow only occurs when there is no cognitive tension. When a design is effective, you can experience cognitive ease. If not, your "flow state" will be interrupted (more will be discussed later), causing us to fall into cognitive tension and "design failed."
When basic design principles are ignored, this situation can easily occur, resulting in the inability to "integrate". These basic principles include: balance, consistency and visual hierarchy, negative space, proximity, contrast, unity, consistency, color scheme and layout hierarchy. (Caiyun Note: Many people think they understand this when they see it, but these problems are the ones that make the most mistakes in actual design)
From the perspective of neuroscience , when a design works, we will "feel it". Its impact is immediate. It happens in the subconscious mind, and is completed in an instant, and is an instinctive reaction of human beings. We don't need to put it under a microscope to analyze it.
excellent design is eye-catching with simplicity and elegance. Jonathan Ive (Jonathan Ive) and Dieter Rams (Dieter Rams) can both be regarded as fans of this design idea.
People often say that the craftsmanship behind excellent design is invisible. However, this does not happen randomly. Whether people notice it or not, behind the design is carried out according to a large number of and strict principles. Great designers don't randomly combine various elements on the artboard, there's a way to do it.
On the contrary, when a design is considered "something is wrong", people subconsciously feel that the design is problematic. Such results will have a bad impact on the brand or product. This impact is especially harmful when a high-end or luxury brand is highly concerned. This is why you will never encounter an imperfectly designed Chanel (Chanel) store.
"Your first impression of one thing will build your subsequent idea. If a company seems unprofessional to you, you may think that everything else they do is not professional. - Daniel Kahneman, professor of psychology at Princeton University
This is not a well-crafted design that can lead to cognitive tension. Will you book your itinerary on this website?
We all agree that the above is bad design, like a house built on sand, a design that ignores the basic design principles will collapse. Subconsciously, it will be immediately considered broken, both visually, spiritually and emotionally.
The human brain is lazy, biased and likes to take shortcuts. Daniel Kahneman calls it "low-dimensional thinking." When people see a design, there is a connection between its "aesthetic integrity", visual perception and neuroscience.
When a design is reasonable, in other words, it is pleasant and effective, we will quickly and intuitively judge it to be reasonable. Our heart rate is lower, and the dopamine levels increase, and we will feel a sense of happiness and peace. It's like when we hear soothing music, we'll be immersed in a "flow state" every moment. “In this state, people focus on an activity, and everything else doesn’t seem to matter” – from a psychological concept, written by Mihaly Csikszentmihalyi in his bestselling book Flow: Psychology of the Best Experience.
Which room do you prefer to live in?
1. The role of design principles in aesthetic integrity
Apple’s Human Interface GUIdelines has been talking about "aesthetic integrity" for decades. It can also be called "design integrity" or "aesthetic cohesion."
Apple’s definition of aesthetic integrity is “when the appearance and behavior of a design perfectly matches its function” (Caiyun Note: My understanding is what you see is what you get, which meets the user’s psychological expectations) . In other words, the composition of the design is an integral part of the product. We will look at the design principles that determine the success or failure of a design portfolio—more about UI than about UX.
Aesthetic integrity is not just about how good the design looks. It refers to a design with obvious coherence: effective structure and layout, what makes it effective. In other words, its elements have excellent uses in visual hierarchy, alignment, spacing, balance, symmetry, repetition, proportion, emphasis, proximity, contrast, unity, consistency, color matching, layout, negative space, etc. Here are just a few examples.
This has nothing to do with the "golden ratio", and the golden ratio cannot solve the problem. Fibonacci sequence spiral is not that mysterious and cannot bring amazing designs to designers.
The designers exclaimed as they drew a golden spiral on the face of Angelina Jolie or Mona Lisa, "It's indeed the golden ratio." Of course, there is indeed sacred geometry in nature (the golden ratio, also known as the Fibonacci spiral, based on this), but it is a fallacy to reliance on "golden spiral" as the design principle, and it has been exposed many times to its naked absurdity.
This is my washing machine with Fibonacci spirals superimposed on it.
"Aesthetic integrity" is not unreasonable. This concept is based on basic design principles and is a summary of experiences of accomplished designers in practicing their art works.
Let's take a look at some design principles and why they make your design more effective. Often, truly excellent designs combine these design principles.
We will discuss the following lowest-level design principles:
- Visual hierarchy
- spacing, alignment and grid
- balance
- comparison
- symmetric
- repeat
- probability principle and three-point principle
- guide line
- ratio
- emphasizes
- integrity
- intimacy
- consistency
- color
- typesetting
- negative space
2. Visual hierarchy
The basic rules of visual perception are crucial to any visual design because they guide how to convey information as quickly as possible. visual hierarchy is the structure and priority of information in design. It determines the order in which people accept and process information because it guides them in a visual way.
visual hierarchy focuses on creating visual priority. uses visual elements that determine the hierarchy to convey the meaning, concept and emotions of composition by cleverly using color, shape, size, spacing, proportion and direction. What is the core focus of
, and what are the most important elements in the design you want users to notice or start reading first? We want it to be the focus, and then the design of the other parts unfolds from here.
A website with a good visual hierarchy will guide users to pay attention to important parts
Visual hierarchy is crucial for every visual design, whether it is the homepage that needs to guide the visitors' eyes or the navigation portal of the mobile UI.The user's understanding of each element depends on the other elements in the combination and their context. Some techniques for establishing visual hierarchy are: position, size and proportion, color and contrast, spacing and intimacy, negative space, texture, guide lines and height. Using rich negative space around an element can make it look more meaningful. Using guide wires can create movement, just like a person's eyes move in design. The hierarchy of typesetting also plays an important role. Through different sizes and weights, we can make more important text elements stand out and establish order.
bonus tips
- uses an invisible triangle to connect three key areas in the design (composition).
- Pay attention to visual scanning of Gutenberg Diagram, F-Pattern, Z-Pattern and Layer Cake Pattern, and follow the trend rather than against the trend.
Websites without visual hierarchy have no obvious points of interest.
III. White, alignment and grid
Alignment and spacing in design convey a sense of order and organization through spatial connections. Both principles play an important value behind the design. One of the basics that designers learned early on was to orchestrate the design on the grid and then align and separate the elements.
is right, centered, and right, but you must align, otherwise when the elements are not aligned, the design will give people a crash. It gives people a feeling of uneasiness. If
is not aligned, it will be uncomfortable to look at the eyes.
grid has many different types: column grid, baseline grid, module grid, hierarchical grid, pixel grid, etc. Different designs use different grids, but the most basic thing is the alignment and spacing of design elements.
(Illustration courtesy UX Engineer)
grid can be broken. A rigid composition can be visually boring unless an element stands out from the grid. Misplacement or “breaking the grid” is an opportunity to give elements more visual weight. It can be used to emphasize something when setting up a visual hierarchy in your design.
Sometimes breaking the grid can create emphasis and move
5. Balance
has two types of balances in design: symmetry and asymmetry. All the constituent elements of : typesetting, colors, images, shapes, patterns, white space, etc., all have a certain visual weight. Some elements in are very heavy and attract attention, while some are very light and feel less important.
The way these elements are placed can create an equal sense of order in a symmetrical design, or a slightly off balance can create an asymmetrical design. Whether symmetric or asymmetric, our brains are attracted to some sense of balance because it creates harmonious, orderly, and aesthetically pleasing results.
Multiple principles: balance, alignment and symmetry play a role on the website
6. Comparison
"Contrast" refers to making different elements in the design easier to distinguish. 's strong contrast can emphasize an area in the design, while a weak contrast can weaken it and create a visual level. Contrast also plays an important role in design. Inadequate contrast can make the text particularly difficult to read, especially for people with vision impairment.
In the design on the left, some of the text and backgrounds are not enough.
Web Content Accessibility Guidelines (WCAG) calls for "the visual presentation of text should have at least 4.5:1 contrast" and, in addition to large-scale text, it should have at least 3:1 contrast. Therefore, designers need to make sure the content remains comfortable and easy to read.
Proper contrast between other UI elements such as cards, buttons, text and icons on various displays and devices is also necessary. If there is no obvious distinction between UI elements , the design is prone to confusion.
7. Symmetric
In the principle of Gestalt , the law of symmetry and order is also called prägnanz, German meaning "good figure". This principle says that the brain perceives blurry shapes in the simplest way possible, all to save brain energy.
We tend to look for the symmetry of everything. Several studies have found that facial symmetry can improve people's evaluation of face attractiveness (although a completely symmetrical face is not necessarily that attractive). This theory holds that this preference is related to the evolutionary advantage of choosing the best partner for DNA.
symmetry is also everywhere in nature. Look at a butterfly, a flower, or a starfish.
The same principle applies to the digital field, and the balanced symmetrical design is more pleasing.
symmetry plays a role in the application. Uber Eats, Booking.com and Behance
8. Repeat
Repeat is a close relative of consistency and a sign of excellent usability.
is a good thing to use repetition in design because our brains are always looking for patterns, similarities, and consistency. Why? Because repeating elements of the same properties requires less cognitive effort.
It is easier for us to recognize duplicate patterns than to recalibrate the brain every time we see a new pattern. As mentioned earlier, the brain is lazy as a survival mechanism, and pattern recognition and cognitive shortcuts mean less energy is required to process visual information consciously.
For example, repeating the shape and size, fill, white space, type and color of the element can also help to have a more symmetrical and better balanced design.
The Athletic software is a good example of designing with repetitive elements.
is OK. In order to take care of everyone's reading experience, I guess many people will start to lose patience. So let’s continue to talk about the remaining design principles next time, please stay tuned.
Original author: Miklos Philips
Original address: https://uxdesign.cc/design-principles-why-a-design-works-a572c5d2d92d
Translator: Caiyun Sky, Tencent Senior Visual Designer; Official Account: Caiyun Translation Design
This article was translated and published by @Caiyun Sky. Everyone is a product manager. Reproduction is prohibited without permission. The question picture of
is from Unsplash and is based on the CC0 protocol.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-