Preface 🖼 ️

It is important for developers not only to be able to write code, but also to have a good idea of user experience. After all, content is meant to be used by users, not added wherever they feel they want.

So, in this next article, you’ll learn about UI design for developers. Find out

🎨 i. Background

Before I get into this article, here’s a question: Why should the front end learn basic UI design principles and practices?

1. Want to make a good piece of work

  • Many of you are attracted by the “what you see is what you get” development experience. In addition, is able to develop a useful, love to use the application, and share with others to use.
  • Now, there are enough courses out there that the front end starts with”The whole stackIndependently develop a working product. But when page modules get complicated, just rely on someUIComponent libraries are no longer able to maintain products at”Be useful“.
  • The ultimate definition of “full stack” might include the role of “design”.

2. No professional UI

  • You probably have one on your teamUIRole, but not necessarily professional;
  • UIMost of the time, a given design draft is static, reflecting only one aspect of the interaction;
  • A lot ofDetails of interactive Experience, only one on the front endButtonThe location and multi-scene state can only be captured;
  • In big factories, manyBEnd product is not full-timeUIOf the role of; The front end may be responsible for the final shape of the product.

🧵 2. Function oriented

1. The most important thing in design

Function orientation can be said to be the most important thing in design, so to speak, function well, is probably the most important design principle.

2. Examples

Let’s look at an example:

The following is a look at the changes of Google’s home page in the past 20 years, from left to right, in 1998, 2005 and 2015 respectively, as shown in the figure below:

Now, let’s look at 2021, as shown below:

As you can see, from a stack of content at the beginning, to a single search box at the end, the most desired content is displayed. Perhaps this is a classic example of a function-oriented approach.

2. Simple design

With this functional base in place, we can start prototyping, so here I’d like to introduce some 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 more professional prototyping tools like Figma and Axure. However, as a developer, it is recommended to use the most basic strokes and components first, and refrain from using color to design simple, complete features and focus on features first.

3. Design simple and complete functions

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:

  • 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 whetherMVPDo 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.

Take a look at a message function, as shown below:

As you can see, in just a few words, a concise summary of the most complete features, the MVP content to reflect out.

🧶 3. Design principles

1. The level

(1) What is hierarchy

  • Hierarchy is the only principle you might care about.
  • 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.

(2) Illustrate with examples

For example, check out these two websites. Which picture do you think shows a better reading experience?

I believe that many friends in the heart of the answer is the second picture. In the first picture, the content is not layered, but the whole picture is black and white, and I don’t know where the focus is. In the picture in the second chapter, obviously the content in the blue box above caught the user’s eye at the first sight, so that the user could clearly understand the meaning of this picture.

So which one is the better reading experience?

2. The consistency

(1) Definition

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.

What does that mean?

(2) Illustrate with examples

Take the flying book document as an example, let’s carry out a description:

When the main interactive and visual elements of a page are represented by the same theme color (blue), users can quickly know:

  • What elements in the page are interactive
  • Where are the tips I need

Or take this picture:

In this figure, orderly and fixed spacing between label and input fields, and between input items in the form, helps the user quickly identify what the current form item is and move steadily to the next form item.

(3) Summary

Through the above example, I believe you have a certain understanding of the consistency of design.

Therefore, whether restraint, and repeated, accurate use of the design system, will affect the quality of a site in all aspects, but also reflects the professional considerations.

Take a look at the chart below:

3. “Design Book for Everyone”

Here is a book for you to supplement — “design book for you to see”, this book 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.

These four principles, and we summed up the two principles in front of the echo. Let’s look at the specific associations:

  • 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.

🧷 4. Design system

1. The layout

(1) Center

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 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.

Something like this:

(2) multi-column layout

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.

As shown below:

Distance between 2.

(1) Definition of spacing

Making sure there is a basic amount of space between elements is a basic design technique.

As shown below:

(2) some specifications of spacing

Now let’s look at some specifications for spacing.

1) Spacing — options

Dozens of spacing options are designed based on multiples of 4px. As shown below:

Now, let’s explain some of the details of these ten design options:

  • The design system, in addition to satisfying the principle of “consistency”, also helps designers plan their options ahead of time.
  • With these options, we can try them out one by one in a specific scenario to try out the optimal solution.
  • Instead of making every decision in your head, tuning in your options can dramatically speed up the pace of design.

Here’s an example of button:

As you can see, we’ve grown the icon in multiples of 4px, gradually becoming more and more saturated and better looking. With the 4px option, did we speed up our design even more?

Looking at the dozens of spacing options, we can see a graph that looks like exponential growth 📈. This is because the two adjacent spacing, on a large scale, is more open than the small lira, in order to reflect the gap in the line of sight.

Let’s use a graph to compare the differences on the size scale:

If you look at the left-hand side, on a small scale, a 4px difference is a 20% increase; On the right, on the 500px scale, a 20px increase is only a 4% improvement.

2) Spacing — more white space

This is a spacing design trick: it is recommended to arrange elements with large Spaces, i.e., “loose to tight” to adjust the spacing. As shown below:

Let’s make a comparison of the above set of pictures.

From tight to loose type 👇

Let’s start with a picture:

The picture is tight to loose, so your mind is “trying to pull apart irrelevant elements” and “whole to part”, which is not easy to manipulate.

Here’s an example:

You want to space each paragraph 10px apart, then add 4px space between the heading and the content of the paragraph, but don’t pull it wide enough. Go back and drag the space between your paragraphs down to 20px so you have 10px space inside your paragraphs…

Loose to tight type 👇

Let’s start with a picture:

From loose to tight, it’s easier: focus on “which elements are relevant,” pull them together, and then tune “from part to whole.”

Generally speaking, it’s better to be loose than tight. Leave some space in the beginning.

3) Spacing — to express correlation relations

  • In addition to being easy to read, spacing is also the most appropriate tool for expressing relationships.
  • As shown in the figure below, the spacing differences in the figure indicate the starting point of each chapter and the relevance of the headings to the paragraphs.

  • At the same time, as shown in the figure below, too close together line heights and list item spacing can make it difficult for the user to determine where the reading stops and whether the current list item has ended.
  • Spacing is a far better tool for expressing relationships than color blocks, borders, boundaries, etc. It’s worth practicing.

3. The word

(1) Definition of 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 need to frame the size, weight, and so on of the site within dozens of options.

A few dozen is a magic number, and in most cases it should work. As long as the scene is special enough, special fonts can be added.

(2) Some norms of the text

1) Text — option design

In contrast to spacing, we have a clear readable size range, such as 12 to 20px. Then we will set the font options more in this range.

Take a look at the 10 broad ranges of option design, as shown below:

However, setting up a hierarchy by font size alone can quickly become overwhelming. So we’re going to combine word weight and color (gray scale), and you’ll be much more comfortable with it.

Word weight comes with CSS, so use 3 or 4 commonly used scales.

Here’s an example:

As you can see in the image on the right, we have used word weights and colors appropriately to make the content of the page more prominent and saturated.

2) Text — align

How do you align fonts of different size? We should be based on baseline alignment, which 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.

Here’s an example:

3) Text — line height

Basically, as with all text design, the intention is 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.

Color of 4.

Now, the color part. Who doesn’t love color? Again, in the same induction step as above, let’s do an induction for the color.

(1) Color option — gray

In your color library, you should have about 10 grays to work with, and these colors can be used for everything from text to backgrounds. As shown below:

(2) 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. As shown below:

(3) Color option — function color

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.

As shown below:

(4) Use color plate

We have prepared so many deep and light colors, so how to use them?

We can use them as foreground and background colors. Use the brightest white for main headings; Choose a lighter version of the secondary title with a background color.

As shown below:

Let’s look at another use, which is a light background and a dark foreground. Light color blocks have less contrast than white backgrounds and are suitable for scenes that don’t grab too much attention. As shown below:

(5) Precautions for the use of color

Color is good, but using it incorrectly can easily upset the balance of the page hierarchy. Here’s an example:

Another possibility is that color-blind users cannot consume colors, which may mean different things in different cultures. The diagram below:

As you can see, in the image above, the upper left corner is what ordinary users see, while the lower left corner is what color-blind users see.

The depth of 5.

(1) Example illustration

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.

Here’s an example:

As you can see in the picture above, its light is a top-down light.

(2) Shadow options

Let’s look at some common shading options. As shown below:

After looking at some of the common options above, let’s now tease out the effects of shadows of various sizes. Details 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.

As follows:

🐾 5. Practical skills

1. Hierarchy on the picture

It is difficult to find the right foreground scenery if we encounter the color patches on the picture. What should we do at this time?

Like this one:

Here are some ways to solve this problem.

(1) Add the mask layer

We can show the hierarchy of the image by adding a mask. As shown below:

(2) Add shadows to the text

In addition, you can choose to shadow the text. CSS can be easily done to increase the contrast of only parts of the text without affecting the overall image reading experience.

As shown below:

2. User profile picture

No matter what kind of app we are in, we basically have a link to upload pictures. So, how to make in any case, can clearly show the content of the user’s avatar will be a problem.

Let’s start with this picture:

As you can see in the image above, some of the avatars have been left blank, which indirectly makes it unclear what the actual size of the entire avatar is.

The first thing you might think of is adding a border. But add a border, and a little unsatisfactory, may not be able to match.

A good way to do this is to add inner shadows. It is equivalent to making a border around the outer layer of the user’s avatar, which is very delicate.

3. Emphasis on line

Sometimes, it’s tempting to add borders and boundaries to your table design, but this seems a little cheesy. As shown in the left picture below:

As you can see, the border is added, just like the traditional table, which is a little bit ugly.

So, as in the image above, we can use shadows or different background blocks instead of borders. In this way, the spacing is actually clear, so we don’t need any dividing lines.

🖌️

1. Translation recommendation

In the above article, most of the content is from the following translation. Those of you who want to know more can take a closer look.

UI design for developers. Language sparrow

2. Book recommendations

We also mentioned this book a little before, here is recommended to you 👉 for everyone to see the design book (4th edition) (Douban)

3. tailwindcss

Tailwind’s Utility class design deeply practices the design system described in this article.

There are many design resources on its website 👉 taildinwCSS design framework, you can further learn to check.

In the meantime, take a look at Tailwind’s book, Refactoring UI, which is the base of this article.

⛱️ 7. Conclusion

In the above article, we talked about the relationship between UI design and the front end, at the same time, also talked about the design of some functional orientation, as well as design principles, design system. Finally, we covered some practical tips for manipulating images and tables.

This concludes the TUTORIAL on UI design for developers! Hope to help you ~

One More Thing

Previous recommendation

👉 HTML basics worth watching

👉 CSS is still just about writing layouts? Discover the wonders of CSS in 10 minutes!

) Introduction

  • Pay attention to the public number Monday laboratory, the first time to pay attention to quality articles, more selected columns for you to unlock ~
  • If this article is useful to you, be sure to leave a footprint
  • That’s all for this article! See you next time! 👋 👋 👋