preface
Front-end development, why need to learn UI design and practice routines?
Completes the work
Now, there are enough courses out there to allow the front end to develop a working product as a “full stack.” But as page modules become more complex, relying on a library of UI components alone is no longer enough to keep the product in a “good to use” state. The ultimate definition of “full stack” might include the role of “design”.
There is no professional UI to help you
You may have UI characters on your team, but not necessarily professional ones. Most of the time, the resulting UI design is static, representing only 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. Whether large or small, many B-end products do not have the role of full-time UI, and the front end may be responsible for the final form of interactive experience presented by the product.
First, function oriented
Function orientation can be said to be the most important thing in design, it can be said that the function well, perhaps is the most important design principle.
Google homepage change case
GoogleThe changes of the home page in the past 20 years, from left to right, are 1998, 2005, 2015,As shown below: 
Contracted design
Once we have the functional foundation, we can prototype, simple design.
Use simple authoring tools
We can choose tools like paper, pen or Excalidraw that can be used immediately. Rough design strokes will keep you from pursuing perfection, or “pursuing design.”
We should get the framework together quickly, and the design details can be filled in later. To put it bluntly, “function first” runs through the design & development process.
Of course, you can also use such asfigma 、 AxureMore professional prototyping tools. But as a development, it is recommended to use it firstBasic strokes and componentsRefrain from using color to design simple, complete features and focus on features first.
Design simple, complete features
When we design the features, we should start with MVP version features as the design goal. MVP is a Minimum Viable Product, which means the simplest Viable Product. Let’s look at an example of a comment:
- 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?
- A picture upload module, its copy and paste, drag and drop, click select file upload, these paths are whether
MVPDo all versions need to be done? Do you need to do layout and guide design first? - During the opening phase, we need to remind ourselves to prioritize the mainstream scenarios on the user critical path and quickly iterate on their basic capabilities.
- It’s like developing a game, and we’re always thinking about all the fancy gameplay. But the first thing we should think about before development is how to get the game started, which is the simplest feature. Once we get the game started, we can iterate and upgrade the rest of the game.
Ii. Design principles
1, the level of
Hierarchy is the only principle you might care about. Hierarchy is the most important principle and skill you need to master if you want to change from “dimension two” to “dimension one”.
- If you want a product to work, you have to make it easy for users to get to the point of 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.
Above two designs, still have quite big difference. The first type, Overview font is more prominent, know this is the key, but the following text is white background black, think is a whole, can not see the level. In the second type, the hierarchy is clear. The kanban data on the top is highlighted with background, while the table data on the bottom is gray in color and belongs to secondary content.
2. Consistency
Consistency refers to the application of colors, spacing, shadows, placement, fonts, and word weights that users see in every corner of the site, all within a limited framework, one that can quickly establish intimacy.
Fly book case
When the main interaction and visual elements on a page are represented in the same theme color (blue), users can quickly know:
- What elements in the page are interactive
- Where are the tips I need
The form of case
In the formlabelAnd input fields, and input itemsOrdered and fixedTo help users quickly identify the current form item and move steadily to the next form item. Here’s a counter example of poor spacing:
If you reduce the space between the label and the input field, each form item becomes a single item, so that users can quickly visually identify how many form items there are, as shown below:
3. The Design Book for Everyone
Here to add a book – “design book for everyone”, should be many people’s design enlightenment book.
Here, I briefly introduce the four principles of “Design book for everyone” :
- Contrast: If two elements have different connotations, make them identical;
- Repetition: Visual elements of the design should be repeated throughout the work;
- Intimacy: elements that are related should be close and placed together;
- Alignment: No element should be placed arbitrarily, 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.
There are more explanations of the four principles and other typographic design tips in the book, which are also recommended for extended reading.
Iii. Design system
1, the layout
Put in the middle
Let’s start with a basic layout technique: center your content.
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.
For example, in the Google case above, the focus search function is centered:
In many situations, it makes sense to center them. Unless large screen browsing is your core scene, your content should generally be between 600 and 800px wide, similar to the width of a book.
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: primary columns shrink elastically (they can have minimum widths) and secondary columns have fixed widths.
2, spacing
Making sure there is a basic amount of space between elements is a basic design technique.
Spacing — options
Description of design options: Design system, in addition to meet”consistency“Principle, but also to help designers design options in advance. So 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.
Spacing, we usually based on multiples of 4px, design more than ten spacing options as follows:
On a small scale, a 4px difference is a 20% increase; On a 500px scale, a 20px increase only improves by 4%, as shown in the figure below:
Spacing – more white space
Design spacing can go in two directions: from tight to loose, or from large to small.
Choosing to go from tight to loose can sometimes make one too focused on the part and not know how much more space it needs.
From loose to tight, it’s much easier to handle.
Don’t be too pushy. Tables and lists of information may require different considerations.
Spacing – Expresses relational relationships
In addition to being easy to read, spacing is also the most appropriate tool for expressing relationships.
The spacing differences in the figure below indicate the starting point of each chapter and the relationship between headings and paragraphs.
Ambiguous line heights and list item spacing can make it difficult to determine where to stop reading and whether the current list item has ended. Take a look at the image below to feel the difference between blurry line height and proper spacing:
Spacing is a far better tool for expressing relationships than color blocks, borders, boundaries, etc. It’s worth practicing.
3, word
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.
Text – Option design
Compared to the spacing design, we have a clear readability range for font size, such as 12 to 20px. Then we will set the font options more in this range.
Text align
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.
Text – line height
Almost all text is designed to maintain a good reading experience, and line height is no exception. Specifically, the design philosophy is that the line height is roughly inversely proportional to the size of the font, and the goal is that the user has a stable down experience when the line changes. Here’s a counter example. If you don’t use good line height, everything gets stuck together, which is bad for the reading experience, as shown here:
4, color,
It’s time for the color section. When we use CSS on our front end, we usually use hex & RGB color formats. But there’s a pain point: a set of hex colors that are close together doesn’t reflect their associated properties.
Hue is the basic property of color: 0 versus red; 120 pairs of green; 240 pairs of blue.
Saturation indicates the brilliance of a color. So black, white and gray are neutral.
Brightness reflects how far the color is from black and white.
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 indicates warning.
- Green indicates some positive change, indicating a message of success or growth.
Use the color wheel
Before we use colors, we should design the palette completely, so that it is easy to choose theme colors and feature colors, like the palette below:
5, depth,
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 achieve a “deep” experience of web elements.
Shadow options
The common shadow options are as follows:
- 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.
Four, practical skills
1. Hierarchy on the image
It is difficult to find the right foreground scenery if we encounter the color patches on the picture. What should we do at this point?
Increase the montmorillonite layer
We can show the hierarchy of the image by adding a mask.As shown below:
Shadow the text
In addition, you can choose to shadow the text.cssYou can easily do that,Increase the contrast of the text onlyAnd theDoes not affect the whole pictureReading experience.
2. Clear user profile pictures
Many sites use avatars, and it can be a problem to clearly present content in any situation.
- Add a
border. But add aborderWell, it’s a little less than satisfactory. It doesn’t necessarily match well. - Add inner shadow. It is equivalent to making a border around the outer layer of the user’s avatar, which is very delicate.
3. Eliminate boundaries
Border and boundary, which have a table smell and are a little dusty, as shown in the picture below:
Shadows are a solution. Suitable for a differentiated boundary in background color.
Two consecutive alternate background colors can easily erase the border between different functional modules.
With clear spacing, there is no need for dividing lines.
5. Project practice and application
Learning the above design theory knowledge, we must really be able to apply to the project to create value. In the actual practice project, in order to unify the overall style and design concept of the website, the team will first formulate the specification of common style and then carry out specific business coding, such as font ICONS, text size options, button size/color options, rounded border, etc. The following is the design specification made when I participated in the youth training camp and worked on projects with my friends:
6. Learning resources
UI Design for Developers “Design Book for Everyone (4th Edition)”