How do programmers make an "unsightly" Design

It is often seen that programmers present their own things, some of which are entrepreneurial projects and some are weekend projects. Most of them are ugly. Ten years ago, as long as you made a fully functional item, even if it was very ugly, many people would have applauded it. Now, there are many websites and other Internet products, and no one is willing to endure ugly things.

I think "not ugly" is the minimum requirement for a product. Ugly products are often difficult to use. When writing code, programmers tend to focus only on the implementation of functions and performance improvement, ignoring the appearance and ease of use. In fact, many times they only need to pay attention to some basic rules, this greatly improves the product's perception. As a layman, I have learned my own design for a long time. Here I want to share some practical skills that I think will help people who are exploring the same way.

It should be stated that the goal here is to make a "not ugly" design. Note that it is only "not ugly". I am also studying how to do well. In addition, my level is also very low, but I can feel the pain of a layman. If there is anything wrong, please criticize and correct me.

Next I will start from four aspects:Alignment, font layout, color and decoration elements.

1. Alignment

The reason for listing alignment separately and putting it at the beginning is that it is a simple but easy to ignore rule. If you really align all the things to be aligned, you will find that simply following this rule will have such a big effect.

People's eyes like order, and alignment will make people feel pleasant. But there is one exception: Do not use center alignment unless you have good reasons. Centering and alignment can make people feel very amateur. You can try the effect of centering several texts on your own.

Of course, there are also designs that rely on irregular colors, but they are advanced gameplay, so we are better at alignment. There is a good website for observing alignment, that is, IA. The last version of alignment is more likely to see the alignment effect. You can view the alignment effect here. The navigation on the top and bottom seems unrelated, if you compare them, you will find that they are both very good.

2. Font layout (typography)

Font layout: The English name is typography. It contains many things, not just font selection, but also setting of elements such as line spacing, line width, and font spacing, these things affect our reading experience. We read a lot of things every day and get in touch with "text" every day. This shows the importance of font layout. I will not talk much about the specific knowledge of font layout. There are a lot of books and materials in this regard. Here we only talk about some elements that are easy to ignore.

The first step is to set the row width, that is, the number of texts displayed on each line. In general, our reading order is from left to right, and then line feed. If there are too many texts displayed in each line, we will have a long line of sight movement distance when we wrap the line, and we will be prone to fatigue. Therefore, do not make it into only one column and then adjust the width of the screen, the reading experience is very poor. If you have to do the flow layout, we recommend setting the max-width attribute.

The second is the line spacing, that is, the distance between two lines of text. I often see that some people forgot to adjust the font size, but the line spacing was almost crowded up and down, and it looked very tired. If you want to adjust the font size, remember to set the line spacing, that is, the line-height attribute in CSS.

The third is the word spacing. Sometimes, because of the need, we will set some text to be very large and some text to be very small. In this case, the spacing between each word may become too large or too small, at this time, we need to adjust it. font designers will also consider this factor when designing a font. In CSS, there is an attribute named letter-spacing, which can be used to adjust the font spacing.

The last thing I want to talk about is punctuation. Many punctuation marks we usually use are incorrect. For example, the ellipsis in English is not three points :... But... (The shortcut key of MacOS X is option +;), and the English quotation marks are not "but" (the shortcut key of MacOS X is option + [). Note that this is different from full quotation marks. It doesn't matter if you write articles and chat at ordinary times, but if you do the design, it is better to use punctuation. In addition, it is best to make terms more rigorous. App Store is not an appstore, xcode is not xcode, iPad is not an iPad...

In addition to punctuation, the above are all about "blank. Many programmers may pay attention to the font selection and know the differences between Helvetica and Arial, but do not care much about the "blank" between fonts. In fact, the font layout is more about the design of "blank", and the "blank" part can be properly eye-shaped To Breathe smoothly.

3. Color

The color scheme has always been a headache for me. It seems difficult to grasp and, in fact, very difficult to grasp. For a while, I even suspected that I had physical defects in color. Otherwise, it would be a bit effective if I worked so hard. Later, some color recognition capability tests were conducted to gradually eliminate the idea of breaking the jar.

I have read a lot of books and materials on the basics of color. I have learned a lot about the three primary colors, complementary colors, color rings and spectra, but these things have little help to me. It is not that these knowledge is useless, but that they all need to help with a large number of exercises. They may also need a good teacher to guide them, now I have no time or energy to learn painting from the basics. However, a lot of reading and useless attempts have helped me find something practical and traceable. Here are some tips.

Programmers generally use hexadecimal or RGB to represent colors, such as # ff0000 or RGB (100,210,241, 0.5. This method of recognizing colors is very bad. They are just a bunch of random numbers for you, but they happen to be that color. And even if you know that # ff0000 is red, it is hard for you to adjust these numbers to find the color you want. Now we should not use hexadecimal or RGB color. We should use HSB mode: H (hues) to represent the color phase, S (saturation) to represent the saturation, and B (brightness) to represent the brightness.

The biggest benefit of using HSB to consider colors is that it is relatively intuitive. When you adjust one of the colors (H), saturation (s), or brightness (B, we can probably know what will happen to the color, so that we can select a more controllable and "unsightly" color combination. For example, we may choose a color as the link color, so we can keep the color (H), the saturation (s) value unchanged, only adjust the brightness (B) in this way, a relatively deep color can be used for: hover color,

 

In this way, when the user moves the mouse over the link, the feedback is more natural. Here is a simple demo:

If we compare colors to barbells, the programmer's "color muscles" may only be able to lift 5 lbs of weight, so we should not be too reluctant at the beginning, do not try to control the color with a large span. After selecting a color, you can only adjust one of H, S, and B at any time. With control of variables, things won't get too bad.

Because of our limited power, we need to use as few colors as possible, that is to say, we should try to reuse colors. For example, there is a color that we use as a link: hover color, and some highlighted text background colors can also be used, which not only reduces the color type, it will also give people a visual consistency, there is a good example is http://www.subtraction.com/, the master of this website was previously the design director of The New York Times, in addition to black and white, the website only has orange.

I believe many programmers have heard that Twitter Bootstrap. Twitter Bootstrap is a cool thing, which greatly reduces design work and is very suitable for people who do not understand design to quickly build websites. But now there are more and more people using Twitter Bootstrap, and many websites seem to be the same and boring. In fact, you can customize your own Twitter Bootstrap according to the mentioned rules. Here I will use the navigation bar on the top as an example to make a demo. First, we can see that the background style of the navigation bar is as follows:

 
 

  
  
background: #2C2C2C;  
  
  
background-image: -webkit-linear-gradient(top, #333, #222);  
 
 

Now we input #333 into Photoshop, and we can see that its HSB value is 0, 0, 20. now we keep the brightness (B) unchanged, by adjusting h and S to find a comfortable color, such as, 20. However, the color brightness is too low, so we increase the brightness by 30, and the color becomes, 90, 50. The hexadecimal format is: #. 0d8059.

Then we make the same conversion for the colors. # The HSB of 222 is 0, 0, 13, and its h and S values are set to the same as that of #333, which is changed to, 13, and then increased by 30, it becomes, 90, and 43. The hexadecimal format is: # 0b6e4d.

Similarly, # 2c2c2c is converted to, 90, and 47. The hexadecimal format is: #0c7854.

Then replace the three colors in the original style. After the background is changed, you will find that the selected background color has not been changed. The original color is #222, and you need to change it to # 0b6e4d. In addition, the connected text looks a bit dark, the original color is #999, now changed to # DDD. The following is the completed demo (only Chrome is tested
Browser ):

4. decorative elements

Decorative elements are icing on the cake. If the decoration elements mentioned above are not good, It will be useless to look nice. The most common decorative elements are textures and shadows. Sometimes we want to give the entire webpage a background. If it is solid color, it will appear relatively dull, and it will be better to tile it with texture. Searching texture on the Internet will find a lot of corresponding images, I prefer solid color and then add some noise background, there is a generator here to help you do: http://www.noisetexturegenerator.com/

For shadow, there are text-shadow and box-Shadow. When I browsed some websites, I always thought that the text above was special. I only found that text-shadow was added when I checked it. Text-shadow can produce good text effects without affecting the reading experience. If you want some stereoscopic effects, you can consider box-shadow, but when using consistent and hypothetical "light source", it is best not to make the opposite shadow for adjacent elements.

Generally, professional websites handle the details very well and can be seen from the decorative elements. Because of the Twitter design I like very much, I have implemented the homepage myself for a while (you can view it here. Please use the Chrome browser because it is lazy and does not take browser differences into consideration ). In the process of plagiarism, I found that even in some details that ordinary people do not notice, it strives to be perfect. For example, the placeholder in the input box is actually floating on the top with span, because the native placeholder does not have that rich effect. There is also the triangle in the pop-up window. At first glance, there is nothing, but if you look at the code structure, there will be two layers:

This made me curious: a div can be implemented. When the caret-inner is hidden, it is found that caret-outer is a translucent layer, and the width and height are 1 px higher than caret-inner, but it is used to simulate the shadow effect:

You can see the semi-transparent triangle.

I was shocked when I copied it here. Then I was very sure that the code was written by the designer. Otherwise, the design intent could not be so perfect. This is real web designer! Well-known designer zeldman once said on Twitter: "Real Web Designers write code. Always have, always will." Twitter designers must write HTML and CSS code by themselves.

From the Twitter example, we can see that good decorative elements can improve the quality. However, you should also note that the decorative elements are only used for decoration, so do not make too eye-catching and arrogant.

In the above-mentioned points, alignment and font layout are the easiest to modify and the fastest to take effect. designing these two points will take a step directly. If the color is not good, you can use the gray color first, for example, the background color # Eee, the font color 333, the split line color # CCC, although simple, but not ugly ".

Some resources are recommended below, including books and online tutorials. I have read most of them and think they are good.

The Design book for reading is simple and easy to understand. It introduces the rules that can be followed. It is suitable for reading by amateurs and is highly recommended.

Type is beautiful is a good font blog. The basic articles in it are worth reading.

Thinking with type: a good book on font design can be read online.

The book recently published "Principles of Color Design" is easy to understand.

Principles of layout design and principles of Color Design
Is the same series and can learn a lot about layout.

The design for the web contains font layout, color, layout design, and other aspects. Can be read online.

Twitter & Twitter Bootstrap. If you can write the entire Twitter website by yourself, it will certainly benefit a lot.

Although it is sometimes painful to learn to write a program, it is still quite happy in general, because you can quickly see the results of solving the problem. For example, sometimes an error is reported because a semicolon is missing in the program. When you correct the error through debugging, the program runs normally immediately and gets the expected result. However, learning design is completely different, and it is difficult for you to encounter the situation that "XX will have a XX effect if you do it. There are too many variables. It requires a wealth of experience and good sensibility to fully control these variables. So please be patient and do not expect great progress in the short term. This patience is also worth it: Once you make progress in this area, it will have an all-round impact on you. You can not only make good things, but also have a taste in other aspects.

In addition, technology and design are designed to make things easier to use. They all serve products, rather than highlighting their functions and status. If you have mastered some design knowledge and skills through hard work, just to let others know that you also understand the design, you will intentionally add unnecessary "show off" to your own things ", that is a shame.