This compilation since the Medium , the author is a UX ( User Experience, User Experience) designer, through his own learningUI design process, summarize seven pieces of practical rules for UI design novices provided valuable experience.
First, be clear, this article is not ready for everyone, but there is a specific target audience:
- In the development of the product you want to design a good-looking UI developers.
- Want to make your own portfolio of more color UX designer, or want to make a more beautiful UI and UX designers.
If you are an art student or have a UI designer, you might find this article very boring, but views are wrong. It does not matter, your criticism is true, this website off, busy with other things to it.
Well, from this article, in the end what can learn? I do not understand the UI is a UX designer. I am very passionate about UX design, but later I found out how to make a beautiful interface is necessary:
- My previous portfolio looks a mess, it is my work and thought process is very bad.
- I do UX consulting clients prefer to have the ability to exhibit the works of people, not just a bunch of boxes and arrows painted people.
- I can provide some of the early start-up companies to work? Or children alone while now.
I certainly have an excuse:
I did art foundation, I majored in engineering, so I made something ugly is understandable.
Eventually, I learned app design, constantly analyzing the case, cheek to copy successful works. Suppose I spend on a UI project 10 hours of the time, only one hour to be effective, the other nine hours are constantly learning in failure, death-defying find worth learning on Google, Pinterest or Dribble’s stuff.
Below these “rules” are my summary from failure out. So, I need to remind newcomers: I’m good at UI, mainly due to my regular analysis, not a sudden enlightenment, understanding of what is beautiful, what is the balance.
This article speak theory, but only the application. I will not talk about the golden, color theory, and only real stand summed up the experience and lessons learned. Like, judo martial spirit and philosophy from Japan for centuries. Judo class, fighting not only learn, but also learn a lot of energy, atmosphere and harmony on the class. Israeli fighting technique (Krav Maga) is completely different.
This martial art is the oppression of the Jews under Nazi invention. Where there is no “art” in the Israeli martial art class, you learn is how to use a pen or a book attacks the eyes of others.
This article is the product design field Israeli fighting technique.
Here is what I talk about the law:
- Light from the sky
- Black and White priority
- Increased white space
- Society presents the text in the picture
- Do emphasize and desalination
- Only with the right font
- Steal like artists
Let’s take a look at these rules.
- Rule 1: the light from the sky
Shadows of the human brain can tell us in the end to see what kind of UI elements.
This may be learning UI design, most easily overlooked but very important point: the light from the sky. Always light from the sky (above) come from the following according to light up looks very strange.
When the light shine down from heaven, when the upper end of the article will be too bright, and the shadow will appear below. The upper half of the color lighter, while the lower half deeper.
Playing a beam of light from below to the person’s face is not penetrate look? UI design is the same reason. Our screens are flat, but we can make it through some artistic looks 3D, and add some shadow beneath each element.
Take this button, for example, which is a relatively “flat” (flat) button, but still can see some light changes in details:
- Do not press down the button on the bottom edge of the darker, because there is no light shine.
- Do not press down the button on the upper part is slightly brighter than the lower half. This is in imitation of a slightly curved surface (see side view).
- There are some subtle shadows beneath the button is not pressed, and seen more clearly in the enlarged view.
- Press down the button on the overall color is darker, but the color is still deeper than the bottom half of the top. This is because the buttons on the flat screen, the light is not easy to shine. It was also said that, in reality, press down the button color deeper, because the hand blocking the light.
Such a simple button, there are four different types of light changes. In fact, we can use this principle to everywhere.
iOS 6 is a bit outdated, but still a good case study of light. This map is iOS 6 “Do not disturb mode” and “notification” setting to see how many different kinds of light changes above.
- On the edge of the control panel there is a small shadow.
- “ON” upper trough slide also has a shadow.
- “Open” of the lower half of the slide groove, the reflection of some light.
- Button is prominent on the edge of the lighter, because it is perpendicular to the light source, receives a large number of light refracted into your eyes.
- Because the problem of light angle, a shadow appears at the dividing line.
Usually embedded elements:
- Text input box
- Pressed button
- Sliding groove
- Single box (not selected)
Generally convex elements
- The button is not pressed
- Slide the button
- Drop-down control
- Select the radio button after
- Pop-up message
And so on, this is not the pursuit of flat design?
iOS 7 led to the scientific community for the “flat design” (flat design) pursuit. That icon is flat, not convex or concave mimic the physical and only a single color of lines and shapes.
I like this clean, simple style, but I think this trend will not last long. Through subtle changes simulated 3D effect is very natural, will not be completely replaced.
In the near future, we are likely to see a semi-flat UI (which is why I recommend that you use the design), I called it “flatty design”, is still very clean and simple, but there are some shadows with light point, slide, press the prompt action.
Now, Google is also implemented on each product to their Material Design, provides a unified visual design language. Material Design The design guide to show us how to use it shadows the performance of different levels.
Which I also agree with the type. With elements of the real world to transmit information, the key is: subtle. You can not say that it did not imitate the real world, but by no means is 2006 pages style, no texture, no gradient, but not shiny.
I think “flatty” is the way forward. Flat? Sooner or later will be obsolete.
- Rule 2: Black and White priority
Before color with gray pattern design can simplify a lot of work, so you pay more attention to space and layout elements.
UX designers are now like “mobile first” concept, which means that you have to consider how to display the page on the phone Fortunately, before considering the ultra-clear Retina screen display.
This limitation is very good, can help you sort out ideas. To solve some difficult problems (displayed on the small screen). Then solve simple problems (on the big screen availability).
I hope you first use of black and white design, the first to solve complex problems. In the case without the aid of color to help ease the app has done beautiful. Finally, there is the destination color.
This method can keep app “clean”, “simple.” Too much color can easily ruin simplicity. “Black and White priority” will lead you interested in space, the size and layout of these more important issues. First look at some of the classic design with grayscale pages.
“Black and White priority” rule does not apply to all situations, such as sports, has a distinctive design features, such as cartoon requires a good use of a variety of colors.However, most of the app is no such distinctive features, just keep clean and tidy enough, brilliant color is recognized as difficult to design, therefore, I would first come in black and white.
Step Two: How to color
The easiest way is to paint only add a color.
Based on the increase in gray only one color can be quick and easy to attract eyeballs and attention.
You can also further added in two colors on the basis of gray, or shades of various colors to add unified.
Practice color rule – What is hue?
The main page is using RGB hexadecimal form. RGB color but not a good design framework, HSB mode is easier to use, where H (hues), said Hue, S (saturation) represents saturation, B (brightness) indicates the brightness.
HSB mode is more suitable than the RGB model the way we perceive color. If you do not know this area, here are some simple introductory knowledge HSB mode.
By adjusting a single hue saturation and brightness, you can generate a variety of different colors – dark, light, background color, emphasize local, regional and other eye-catching, but it is not very loud.
Use one or two basic colors and a variety of colors to emphasize certain elements fade, but not the most reliable way to design and made a mess.
Other suggestions on color
Color is the most complex visual design. I picked out some good advice from a complex and long-term practice theory give you:
- Do not use pure black: in the real world almost no absolute black. Different saturation adjustment can increase the richness of the design, but also closer to the real world.
- Adobe Color CC: look for and adjust to create the perfect color combination tool.
- In Dribble by Color Search: Finding a good way how to match a certain color, and very practical, if you have decided to use that color, you can search by color to see how the world’s top designers of color.
- Rule 3: Increase the empty space
To make UI look more design sense, leaving some blank space.
In the first two rules, I have a black and white when it comes to the principle of priority, so that designers think about before considering the color space and layout, so now we can say for how to organize the space and layout.
The default layout of HTML like this:
Piled everything on the screen, font size, line spacing is very small, there is some space between paragraphs, but not great. So it is hard to read layout. If you want to design attractive UI, it would need to leave more blank space.
Blank space, HTML and CSS
If you and I, as before, the habit of using CSS to adjust the layout, then you’d better get rid of this bad habit, because CSS default is not set aside space. Try to empty as the default state, the blank page to add various elements. Never a modified HTML start, first do, and then do the typesetting.
The figure is Piotr Kwiatkowski designed a music player.
Note that the menu bar on the left. Font size is 12px, line spacing, text twice as high.Look at the list of names, there are gaps between 15px “PLAYLISTS” and underscores play well 25px spacing between the list of names.
In the top navigation bar also has a lot of space, the search icon and “Search all music” accounted for 20% of the height of the navigation bar.
Blank space received good results, the combination of different organic elements together to make this page as one of the best music player UI.
A lot of blank confusion can be made simple and beautiful interface, such as this forum:
Many people think that this new page in Wikipedia, many features not found, but you can not deny that this is a good case study page design.
Leave space between the rows.
Between the various elements to make room.
Among the group of elements to make room.
Analyze what is feasible.
- Rule 4: Learn to render the text in the picture
Elegantly presented in the text on the picture is not easy, here are six kinds of methods.
If you want to become a good UI designer, you have to learn on the picture presented beautiful text. Excellent designers are good at doing this, and lower levels of designers often in this area is relatively poor, or even completely not. After studying this part, I believe you will be greatly improved.
Methods 0: Put text directly on the picture
I hesitated to talk about this approach, because it is very difficult to apply. But put directly on the picture text is technically feasible, the following page of this site is very good, so to talk about it anyway.
When put text directly on the picture, there are very few things to note:
- Pictures should be relatively dark, and the color can not have too much contrast.
- Text must be white, I know that you can find with the other colors of the case. But I think, you better use white.
- In different screens, different sizes of windows debug page, to ensure in each case the text is clear and easy identification.
Above these three aspects adjust OK, do not do other processing.
I myself have never directly to the text placed on any professional project on the picture, this approach is feasible, but also to make cool effects, but still be careful.
Method 1: Dark of the whole picture
May be put in the picture is the easiest way to darken the whole picture of text, if original color is not deep enough, you can use a semi-transparent black top covered, such as the following case will add a layer opacity to 35% black.
If you just put the original, the background is too bright, and text is not obvious contrast, see the text.
Similar methods are equally applicable to small map.
Add a layer of black is the easiest and most universal. Of course, you can also use other suitable color, like this:
Method 2: to add a text box
This is a simple and effective method. In the bottom of the white text with a slightly transparent black box, it can be placed on a variety of images, and the display is very clear.
Of course, you can also put other colors, just need to be careful.
Method 3: blur pictures
Blur the picture is a good way to increase the legibility of the text, the text below the picture blur, and while the imaginary part of the brightness down.
iOS 7 with frosted glass effect blur the background, and Windows Vista also use this blur effect.
Picture blur method has limitations, you need to ensure that the different screen images after resizing, text is still in the blur of the region.
Consider the following example, you can see the subtitle it? I really do not know how such a design is approved on-line.
Method 4: Bottom fade
Fading is the so-called lower edge of the bottom of the picture darken some then put white text. This is a very ingenious way, I do not know Medium Has anyone used before, but I was the first in the Medium see.
At first glance, you might think this is the text placed on the pictures. In fact, there are pictures of some very minor changes, in the middle there is no black cover, while the bottom 20 percent opacity about black cover on top.
Such a change is difficult to see, but it does exist, but does improve the legibility of text.
In addition, the text Medium anthology picture back plus a little shadow, to further improve the legibility of text. The net effect is that Medium can put any text on any picture, the reading experience is very good.
One might ask, why is the bottom of the picture darken it? Why can not other areas of the picture? To answer this question, see Rule 1: light from the sky. Light shine down from above, brighter picture above, while the bottom is dark, it looks more natural.
In addition, you can also blur and fade bottom combine to make the bottom of the blur effect, such as the effect of this picture below:
Method 5: the light portion of the image area becomes softer
Elastica’s blog title figure is not too dark, and the contrast is strong. Why text has such a high degree of recognition of it, such as the following figure shows the two:
Here the picture is actually the local area of the light becomes softer, highlighted text.If we reduce the Elastica blog on the browser, it will be seen that in the end what happened.
In the lower left corner there is a shaded area, the text is placed on it, it is easy to identify the.
This may be presented in the text of the most elegant and subtle picture of a method. I have not seen elsewhere, preserved, maybe in the future when it uses.
- Rule 5: Get stressed and weakened
The text was also beautiful and decent design usually zoom in or out is through writing, to make the contrast effect.
I think, UI design is that the most difficult part of text decoration, because of factors need to be considered when designing the text too much:
- Font size
- Font weight
- Letter Spacing
- Margins (accurate to say that is not part of the text, but easily affect attention when reading, so it counted in this list of)
There are other methods to adjust the text to attract the reader’s attention, but not used, do not recommend that you use.
- Underlined. Underline now basically equivalent to a hyperlink, I think you still do not challenge people’s common sense is better.
- Text background color. This is also sometimes used as a hyperlink, but not so common.
- Strikethrough. Go alone while you this weirdo.
In my personal experience, when I feel a text designed well, it is usually not because the use of capital letters, or color too, but because of the various elements of the mix out of the question.
Stressed and weakened
You can put all the text styles fall into two categories:
- Enhance the readability of styles: large size, bold, capital, etc;
- Reduced readability style: small size, contrast with the background is not obvious, less so on the blank.
The figure “Material Design” This title is very impressive: large size, contrasting obvious, font thicker
Figure footer word is weakening, the font size is small, the contrast is not obvious, the font smaller
I think the design is the core of the text:
The title is the only element required to emphasize all of the other parts of it should be emphasized that in conjunction with the weakening.
If an element on the page needs to be emphasized, the stressed and weakened together to avoid the whole page looks too oppressive, while allowing the effect of showing the various elements just right.
Below is a Blu Homes home called the model in this regard: the top of the larger text, highlight, but with a lower-case letters. Does not give strong pressure.
Digital larger font size on the page, is important information on the page. Note, however, very small digital fonts, and background color contrast is not obvious; and though written digit beneath a small, but all in bold, capital letters.
This is the design of the balance.
The above image is a Contents Magazine’s website is a good case study emphasizes and weakening.
- Title of the article is not the only part of italics, but also made a bold treatment, more likely to attract the reader’s attention.
- The author’s name written in the article under the heading, bold font, with no bold “by” to distinguish.
- “ALREADY OUT” independent, small size, and background distinguish obvious, but with a capital letter, word spacing is large, blank text perimeter more, when you’re looking to see it at a glance.
Style mouseover or when selected
Styling mouseover or when selected is the same reason, but harder.
Under normal circumstances, change the font size, capitalization, will change the text size when the thickness of the space occupied, so that people understand now hovering your mouse here.
In addition, the following factors can also affect people’s feelings:
- Text color
- Background color
- Small animation – up, down, etc.
Then recommend a more universal approach here: the elements of color to white; or when the background darker, put the contents into a white color.
Decorative text is very difficult, but whenever I feel. “These words can not be changed when the good-looking,” my judgment is wrong. I need to do is to continue to optimize, keep trying.
So I would like to open the point of it, if you designed the text does not look good, do not worry, you will need to continue to enhance their ability to make yourself better.
- Rule 6: only suitable font
Some fonts are good, they use them now.
Note: This part is not much knowledge to learn, I’m just giving you recommend some nice free fonts for you.
Some websites great personality, will be used quite special fonts. However, UI design most products just keep clean, simple on it. So, to those who are too fancy font it aside.
I recommend some free fonts here. Because this article is designed for the beginner who wrote UI, these free fonts completely sufficient.
I hope you put these fonts downloaded, before you start the project design, look at them.
Here is what I recommend font:
Ubuntu (above) – font coarse, too assertive for some app, but for most of the app is still good. Can be found on the Google Fonts.
Open Sans– debate is very easy to read, is a very popular font, very suitable for use in the body, can also be found on the Google Fonts.
Bebas Neue– suitable for the title, all in capital letters, on Fontfabric can be found, as well as some application examples Bebas Neue on this site.
Montserrat– only two thickness, but also enough. Gotham and Proximate Nova is the best free alternatives, but not as good as those two better. Can be found on the Google Fonts.
Raleway– fit for the title, but not suitable for the body. There is a very fine version (the figure does not show), can be found at Google Fonts.
Cabin– can be found in Google Fonts.
Lato– can be found in Google Fonts.
PT Sans– can be found in Google Fonts.
Entypo Social– a social network icon set, can be found on the Entypo.com.
Here are some other resources:
- Beautiful Google web fonts– have to use Google Fonts instance, I often find inspiration here.
- FontSquiirrel– collect a lot of good commercial fonts for free.
- Typekit– If you use Adobe Creative Cloud (that is, using Photoshop or Illustrator, etc.), you can get include Proximate Nova, including a large number of fonts from Typekit.
- Rule 7: Steal like artists
When I first sat down to try to design buttons, icons, pop-ups and other app elements, I feel I am what is “good” is poorly understood. But I am also very lucky, I do not need to completely design a new UI, because there are a lot of good works can learn from.
Listed below are some resources will certainly be useful to your design (from highest to lowest according to importance)
This made specifically for designers and site collection of the best online UI design work on Dribbble you can find almost all types of cases.
You can look at my portfolio Dribbble. Here are some other people to recommend to your attention:
Victor Erixon– has a very distinct personal style, very powerful. His work is very beautiful, simple, flat design. He made UI designers have three years, is one of the best talent in this area.
Focus Lab– Dribbble of these people are celebrities, their work is very diverse, is absolutely first class.
Cosmin Capitanu– He is a generalist, made out of something very crazy, futuristic, but not too fancy. His use of color is great, but do not just focus on UX design.
2. Flat UI Pinboard
And there are some special bar design phone UI, you can find a lot of beautiful UI design examples.
There are a lot of app screenshots, it’s a big advantage in that it is in accordance with the UX pattern classification, therefore, is very convenient when you are in the search you’re doing this type of hand work.
I firmly believe that every artist in the early days like parrots, imitation and learning constantly, until the top of the work can vividly imitate, and then began to find their own style, leading the new trend.
So, like artists steal the division it!
- To sum up
The reason I wrote this article because I am sorry to learn UI in his original design, no such tutorials. I hope this article can help you. If you’re a UX designer, after drawing the frame and wireframes, make a beautiful mock it. If you’re a developer, you do next project some more beautiful now.
UI design of learning can not be achieved, but the need to continue to observe, imitate, and communicate with others. The above is what I’ve learned so far, I will keep a beginner’s mind and move on.