background
Why should the front end learn basic UI design principles and practices?
Completes the work
In the front end, many students are attracted by the wySIWYG development experience. In addition, they are able to develop a useful and favorite version of the opposite, and share it with others.
There are enough courses out there that the front end can develop a working product on its own in a full-stack manner. But as page modules become more complex, relying on a library of UI components is no longer enough to keep the product in good working order. The ultimate full-stack definition should probably include design roles.
There is no professional UI to help you
You may have UI personas on your team, but they may not necessarily be professional. Many times UI designs are static and only visible in one aspect of the interaction.
Many of the details of the interactive experience can only be captured when playing with a Button position and multiple scene states at the front end.
In large factories, many B-side products don’t have a full-time UI role; The front end may be responsible for the final shape of the product.
Functional orientation
The most important thing in design
Let’s not introduce any design principles. Or maybe that’s all that mattersDesign principlesAnd that is: Get the function right.
Contracted design
Once you have a functional base, you can prototype. Before we dive into design principles, there are a few simple tricks to get you started quickly
Tools like paper, pen, or excalidraw.com/ are best.
Rough strokes keep you from being too perfectionist, or too design-obsessed. The frame was quickly put together and the design details could be filled in later. To put it bluntly, function comes first throughout the design & development process.
You can use more professional prototyping tools like Figma. However, for development purposes, it is recommended to use the most basic strokes and components first and refrain from using colors
Design simple, complete features
In plain English, the MVP version features as the design goal.
- MVP: Minimum Viable Product, the simplest Viable Product
-
Should a contact list account for more than 2000 people? How can interactions be optimized?
-
When the data does not exist, how should the error message presentation be prepared, and user guidance, depending on the error condition?
-
An image upload module, which copy and paste, drag and drop,
-
Click select File upload, do these paths need to be done for the MVP version, do they need to be done for layout and boot design first?
During the opening period, always remind yourself that the design of the mainstream scenarios on the user critical path is completed first, and the ability to iterate quickly.
Let the game begin.
Design principles
The hierarchy
Hierarchy is probably the only principle you need to care about
Hierarchy is the most important principle and skill you need to master if you want to go from being the only one.
-
If you want a product to work, you have to make it easy for the user to focus on the product.
-
In key points, users can freely enter into the state of immersive reading and use;
-
When users want to explore other content, ta can easily identify the secondary parts of the site, focus can quickly shift, and quickly immerse;
-
Secondary prompt information, accurate and will not disturb the presentation of the main modules.
Hierarchy — The only principle you might care about
Which picture shows the better reading experience?
consistency
Consistency refers to the use of colors, spacing, shadows, placement, fonts, and word weights that users observe in every corner of the site, all within a limited framework that quickly establishes intimacy.
When the main interactive and visual elements of a page are represented by the same theme color (blue), the user can quickly know:
-
What elements in the page are interactive
-
Where are the tips I need
In this example, orderly and fixed spacing between label and input fields, as well as between input items, helps users quickly identify the current form item and move steadily to the next form item.
- Configure spacing freely vs. use spacing systems with restraint
Design Book for Everyone
Here to mention a book, “design book for everyone”, should be many people’s design enlightenment book. Here’s a brief introduction to the Design Book for you.
Four principles:
-
Contrast: If two elements have different connotations, make them completely different
-
Repetition: Visual elements of the design should be repeated throughout the work
-
Intimacy: related elements should be placed close together
-
Alignment: No element should be placed at random and should always be visually related to at least one other element
-
Hierarchy is the goal of intimacy + contrast. Let the user grasp the focus, cut the line of sight, fast and steady.
-
Consistency refers to alignment + repetition, which restrains the scale felt by the user’s line of sight and quickly establishes familiarity with the website design language.
The design system
layout
Put in the middle
First, a basic layout technique, that is: content center.
If you follow a “feature-oriented” development process where you develop base capabilities while designing iterations, your features should be relatively simple up front. A single-column, centered layout should suit your needs.
Multi-column layouts
-
The core of the multi-column layout is also to keep the content at a reasonable width to maintain readability.
-
The general rule is: main content column elastic shrinkage (can have a minimum width); Secondary column fixed width
spacing
Making sure there is a basic amount of space between elements is a basic design technique.
options
We designed over a dozen spacing options based on multiples of 4px
-
Design systems, in addition to meeting the principle of consistency, also help designers to design options in advance.
-
With these options, we can try them out one by one in a specific scenario to try out the optimal solution.
-
Tuning options can speed up the pace of design much faster than making every decision in your head.
Looking at the dozens of spacing options, we can see that this is a graph that looks like exponential growth. This is because two adjacent spacing, in large scale, than small lira is more open, in order to reflect the distance gap in the line of sight.
On a small scale, a 4px difference is a 20% increase; On the 500px scale on the right, a 20px increase is only 4%
More white space
This is a spacing design technique
- When arranging elements, it is recommended to leave them wide open, that is, to adjust the spacing from loose to tight.
From tight to loose
It’s going from tight to loose. Your mind isTry to pull apart unrelated elements, and it isFrom the whole to the partsDirection, not easy to operate
If you want to space your paragraphs 10px apart and then add 4px space between headings and content in your paragraphs, go back and create 20px space between paragraphs so that you have 10px space within your paragraphs.
From loose to tight
This is simpler: focus on which elements are relevant, pull them together, and then tune from local to global.
Generally speaking, it’s better to be loose than tight. Leave some space in the beginning.
Express relevance relation
In addition to being easy to read, spacing is also the most appropriate tool for expressing relationships. The spacing differences in the figure indicate the starting point of each chapter and the relevance of the headings to the paragraphs.
Spacing is a far better tool for expressing relationships than color blocks, borders, boundaries, etc. It’s worth practicing.
The text
Text is the main content carrier of the site; Font design is also a priority.
Now that we’re talking about designing systems, aiming for consistency. Similarly, we’ll frame the size, weight, and so on of the site within a dozen options.
Ten or more is a magic number, which should be sufficient in most cases. As long as the scene is special enough, special fonts can be added.
Design options
In contrast to the spacing design, we have an obvious size range for reading, such as12 ~ 20px. Then we will set the font options more in this range.
Font weight (bold fonts) comes with CSS, so use the 3 or 4 commonly used dimensions
alignment
How do you align fonts of different size? Baseline alignment is the bottom edge of the text.
Baseline is the center of gravity of a character; With the center of gravity aligned, the user can have a smooth reading experience while moving their eyes.
Line height
Almost all text is designed to maintain a good reading experience, and line height is no exception.
Specifically, the design philosophy is:
- The line height is roughly inversely proportional to the type size, and the goal is for the user to have a stable down experience when the line is changed.
color
Color option — gray
The color library you choose should have about 10 grays to choose from. From text to background.
Color options – Theme color
Most sites have one or two theme colors that run across the globe; It appears on buttons, logos, backgrounds, embellishments, and is the brand’s memory element.
Color options – Function colors
There are some common colors that are widely used to express certain fixed semantic information.
-
Red indicates an error message or a dangerous operation.
-
Yellow: warning.
-
Green, indicating some positive change, is a message of success or growth.
Use the color wheel
Ready for so many colors from dark to light variations, how to use? One, just mentioned, is used as foreground and background colors.
-
Use the brightest white for main headings;
-
Choose a lighter version of the secondary title with a background color.
- Color is good, but it can easily break the page hierarchy balance.
-
Color blind users can’t consume color;
-
Colors can mean different things in different cultures.
The depth of the
-
The skill of creating depth is probably related to shadow design.
-
Depth complements spacing and represents hierarchy from another dimension.
Why is that?
This depth of sense comes from everyday life.
How do we normally perceive depth on a plane?
The answer is: top-down lighting. A shadow cast on a plane. By simulating this phenomenon, we can implement web elementsThe depth of theExperience.
Shadow options
-
Small shadows make elements stand out a little, but not steal the eye.
-
Medium shadow applies to small pop-up modules, as shown in the drop-down box below.
-
The deepest shadows are used for scenarios that completely separate modules from pages.
Practical skills
The hierarchy on the picture
The color patches on the picture are so patchy that it is difficult to find the right foreground scenery. How to do?
- Add a mask. Contrast is coming up
- You can shadow the text. CSS allows you to easily increase the contrast of only the text without affecting the entire image.
Clear user avatars
It also includes any scenario where a user uploads an image. How to present content clearly in any situation can be a problem.
Inner shadow
Add a border, not satisfactory, may not be able to match well.
A good way to do this is to add a little bitInner shadow. It is equivalent to the outer border of the user’s profile picture. It’s pretty neat.
Kill line
Border, border, these with a table smell, a little soil.
With clear spacing, there is no need for dividing lines.
resources
The PPT covers most of the design techniques in this translation. Those of you who want to know more can take a closer look
UI design for developers. Language finches
Books recommended
Design Book for everyone (4th edition)(Douban)
Tailwind’s Utility Class design deeply implements the design system described in this article
Taildinwcss design framework, there are many design resources in the official website.
Refactoring Ul, from tailwind’s book, is the basis of this article.
conclusion
- If there is any mistake above, please point out in the comment section, thank you!
After reading it, give it a thumbs-up and then walk away