It will take about 12 minutes to finish reading this article.
After the last article was shared, it was liked by a lot of people. On the same day, it was on the top of the hot list of rare earth nuggets this week, and then it was reprinted by Youshi and became a hot article.
“The picture shows the front page of digging gold (part)”
“The picture shows the home page of excellence (part)”
It’s nice to be recognized, to prove that the content is really helpful, interesting or meaningful to everyone’s study and work, and as long as you do any of those things, it’s worth continuing to do.
But recently, daxiong has been focusing on the study and use of the front-end vue. js framework, and inadvertently neglected the update of the article. So this time take advantage of the holiday to make up a good article, seriously tell you about the design of the “last mile”. The content of the article is actually very easy to understand. After reading it, some people may think: “Such a simple truth, why bother to explain it repeatedly?” . Big Bear felt that the article was “shallow”, so it was easier to digest and understand. The same information, everyone’s interpretation is not the same, the design itself is not so mysterious, these five experiences as a piece of advice, in the future as far as possible to write a series of short and concise articles, more specific and deeper, is the preface.
The last mile? The last mile!
The Last Kilometer “Last Kilometer” was originally used to describe problems at the end of public transportation. Later, various industries began to use it, and it gradually evolved to be the last and crucial step in completing one thing. (It’s often tricky, but if done right it can create a perfect loop.) In the design world, The problem of the “last mile” lies in the presentation of the final project.
Have you ever thought of such a problem: I have read a lot of design books, “design master” articles, work for several years to handle the project not to say how difficult, at least the number is also very enough, according to the “design experience” is very rich. Why is it that when I visit Dribbble, Behance and FWA, I can always feel that others’ works are similar in style. Others’ works look very tactile and detailed, while my own works are bland and unsatisfying? What’s the problem?
This is not just a problem for beginners, but for experienced designers as well, at different depths.
So, how to settle, how to give the final “makeup” of the design work, let the final design stand out?
Here are five tips to help you figure this out.
A, level
Hierarchy is divided into plane and depth. Any designer should be fully aware of the subtle chemistry that rhythmic hierarchy creates in the user.
Let’s take an example 🌰.
This is a simple base image + text (with Qatar Airways in the background), nothing special. However, there are a lot of problems, if you don’t remedy it, you can’t make a move at all. The first is the plane layout level, all the content piled together, lost visual focus; Secondly, there is no depth in the picture, which makes it boring to stay.
“Before”
To clarify our thinking, we can start from the following points:
- Level 1 title, level 2 title, strong and weak level of the text;
- Split the square box along the left wing to form depth;
Take a look at the results:
“After”
See the difference. If I change it a little bit in the same way that I just did, it will look new.
The principle is simple:
By highlighting or weakening the elements in the picture in the later stage, the visual difference is artificially created and the three-dimensional sense of the picture is greatly enhanced.
“The order in which the elements of the picture appear in people’s eyes”
Applying this technique to your design to create rhythmic layering can make a big difference.
Is for “design the last mile” level.
Second, the color
Big Xiong was a civil engineer before turning to design. The CAD of dense hemp goes a line in project bright red big green, blind without an eye already is fluke. Even a dirtbag like Big Bear can barely get the colors right in his design through constant practice, let alone you. So, color must spend effort to adjust, otherwise the original good design manuscript may be used because of the color is not enough “positive”, poor into the cold palace.
Let’s look at this picture:
Surely the latter is more comfortable? But everything to ask why, let’s extract the color of the picture to see:
Here’s another chestnut:
Similarly, big Bear extracts the colors and corresponds to the color wheel:
See what the problem is?
What kind of product, use what kind of color combination.
In terms of color selection, Daxiong has summed up four methods, which are very efficient (and have been shared in the company) :
- Analogous colors
- Complementary color
- The same as color
- Look naturally (in the picture)
For approximations, off-the-shelf tools like Adobe Color and Color Schemer Studio 2, also used by Apple designers, are usually good combinations of approximations by taking plus or minus 30 degrees on the Color wheel.
“Adobe Color”
Color Schemer Studio
We will match the Color of the Color Schemer in the above picture on the spot, is there any sense of inconsistency?
“The monterian constructionist style, reassembled in approximate colors.”
And complementary colors, the two corresponding colors on the color wheel are the most visually striking color combinations.
But don’t ask for it. Decide on a primary and secondary color first:
To determine theThe proportion of color blocks:
“More common Practice”
Moving on to homologues, this one is easier. By deepening or lightening the base colors, you can define a set of colors that can be used:
Big Bear basically selects a color and superimposes 20% opacity white and 20% opacity black to get the desired combination of colors.
Finally, take a picture of Jennifer Lawrence and put it in Adobe Color to automatically identify the main colors in the image:
“Adobe Color recognizes colors”
Based on these colors and the ratio of primary and secondary colors, we can complete a usable layout design in just a few minutes:
“There’s a slight increase in brightness and saturation.”
If you find that the work is not to your liking during the design process, maybe the problem lies in the color.
These four tips can be used in any situation, so here’s how to do it.
Third, shadow
Almost as soon as GUI interface design was born, the use of shadows was everywhere.
At the end of the 20th century, app interfaces looked like this:
Windows 2000 Pro Preview
As you can see, the interface design has highlights, shadows and gradients. At that time, GUI design was a new industry, and no one could refer to the object. Traditional graphic design was difficult to use for reference, and at the same time, it was limited by the characteristics of graphics software, which resulted in the results as shown in the figure above.
As the design tools continued to iterate, there were more and more techniques, especially with the release of iPhone OS (yes, it wasn’t called iOS at that time), and Skeuomorph became popular throughout the design world, reaching its peak with iOS 6. Almost all designers are desperately drawing ICONS, spending a lot of time on projection, reflection, texture, and highlights in the interface. The one who can make people want to lick the design more will win:
“Graphic interface copied by countless Designers, by Designer Mike”
When iOS 7 went flat, the design world exploded. “So many years of hard practice design skills, just throw away?” So they thought of shadows. The most popular design style of 2014 is “Gradient” + “Long shadow” :
“Typical Long Projection Design”
If you remember, most of the apps in the Appstore that made it to the top of the featured list were like this.
Art comes from life, and long projections can be seen everywhere in life:
“Rhode Island School of Art and Design— Long projection of the facade of the Art Museum”
Then designers grew tired of long projections and turned to paper-like designs, with a wide range of thin shadows to enhance texture. The style is still flat, but people in the process of exploration to add a lot of new elements, different ways to make a different feel.
“Thai designerbuatoomDesigned advertising banner”
To better understand the evolution of the design style over the past two decades, Big Bear drew the following picture to get a glimpse of it:
“The Evolution of shadow in Design”
Big bear wants to say is, do not resist to the tide, the rise of new design style must have its time background. (Flat design, for example, frees designers from the endless stack of pixels to approach design from a more practical perspective, allowing them to return to the most basic interaction and use experience.) However, always keep thinking, style is skin, fit is good.
Does all this talk about shadows have anything to do with the theme of the article, “The last mile of design”?
Don’t worry, there is.
Take 🌰 for example. This is a visual concept set made by Daxiong for a company that customized high-end outdoor travel in 2014. After a careful look, there are many problems. The first is to use a card-like design, preferably separate the content from the background, otherwise the “clickable” suggestion is not strong enough; The second is the use of a Ghost Button “Ghost Button”, to add some necessary details to make the content more complete.
“Before”
So we can improve it like this:
- The card navigation is clearly separated from the background by Border “Border” and Shadow “Shadow”; Improve the readability of text;
- Add detail to the ghost button, even if the mouse doesn’t Hover over it, giving it an obvious hint of clickability.
“After”
See the difference: The title of the card on the bottom right is more readable, and the card and background are more clearly separated.
A little shade can make a big difference.
Four, atmosphere
Excellent design works all pay attention to the rendering of atmosphere, just like going to a restaurant, the same dish on the fly restaurant table, and Michelin restaurant, people’s price expectations are different. We spend 95% of our time on the rationality of the design, the consistency of the interaction. Why not spend that extra 5% of your time polishing a design that will eventually be seen by others in a better shape?
Here’s an example: 🌰. This is a lighthouse that Big Bear drew long ago during practice:
“Before”
There’s nothing special about the card design. In other words, it’s boring.
I think we can start from the following aspects to enhance the final effect of the design:
- Echo the theme of the background, you can use gaussian blur or gradient;
- Some subtle decorative elements;
- Text and shadows;
Try it together:
That’s why we want to emphasize the importance of atmosphere, the same design, just a little more thought, to improve the overall design of the work.
The saying, “The more you try, the better” applies here.
Five, the font
Big Bear has only scratched the surface of his knowledge of typefaces, but he does remember one thing: the right font is the right design.
You don’t want to use song style in a cartoonish design, and you don’t want to use doll body on the cover of serious literature either.
Using the wrong font is like hiking in high heels and running with slippers. It’s exhausting and not good looking.
It is a shame that the most common English fonts used by Daxiong are as follows:
“Basically all fonts come with the system, please use the search engine”
It should also be noted that the current LOGO of Big Bear’s company is also a variation on the Lucida Grande font (which is so classic) :
“Haobtc LOGO”
So, what this means to you…
As you approach the end of your design, keep in mind that you are going over these five points (just to throw some light on them) : levels, colors, shadows, ambience, typography, and you will see that if everything is just a little bit better than before, it will make a big difference.
The “last kilometer” in the design is ultimately the accumulation of details, the intention to explore, the design will be better and better.
The points mentioned in this article are just common sense, and it takes a lot of practice to really improve your design skills. Design circles like a cloud of experts, big bear is still hovering outside the door. Only through continuous learning, maybe one day I can make a design that moves others and share with everyone.
Incidentally, Daxiong participated in the start-up of good Bitcoin. Some time ago, the transaction volume broke through 1 billion RMB and earned more than 5.5 million interest for everyone. It should be the best bitcoin start-up company with the best reputation in China.
If you are interested, please check the sign.
