How to quickly build a website with a sense of Design

Many programmers are often scared by the word "design" because Ta is a programmer rather than a designer and has a computer degree certificate. In addition, I don't mind the Comic Sans font. (Note: The Comic Sans font is a cartoon font attached to Win95. The design industry is exclusive. Designers or those who have an aesthetic complex do not bother with it. For more information, see this article.
Comic Sans font)

Although I am only a programmer, I still want to make my website look more attractive. On the one hand, it is out of vanity, because it can appear more "professional", and on the other hand, it is out of reality, researchers have found that users trust websites that "look" good. But because I have been engaged in programming for a long time, I am not familiar with the design, or even afraid, in my opinion, the design is composed of many rules that can only feel what you cannot say and what you call the design sentiment. The knowledge barrier is relatively high.

But not long ago I decided to do my best to make my website look more professional, even if it wasn't as effective as it was actually done by a designer,

If you are just a programmer who does not understand the design but wants to make your website look more attractive, you will be lucky when you see this blog. Although the so-called designers may not be able to feel the rules and design sentiments, the website developed through the following methods will become very professional, satisfying your own design vanity and increasing website traffic, after all, users prefer and trust those websites that "look good.

1. Use Bootstrap

If you haven't used Bootstrap, hurry up. This open-source project from Twitter makes website design truly popular.

Essentially, bootstrap is an open-source front-end framework developed by two Twitter employees mark Otto and Jacob Thornton. [Note: For more information, see the customizable front-end framework, you can configure it as needed. (Note: If the English version is not good, you can view the Chinese version.
Bootstrap document or Bootstrap Chinese Network)

2. Bootstrap customization Guide

Deciding to use Bootstrap is an important step forward. It can save a lot of effort in front-end development compared with others, but it has advantages and disadvantages, if you decide to use Bootstrap, it means it is likely to "hit the Framework" with others, just like the default WordPress skin. If everyone uses the bootstrap style completely, it will make a lot of people bored.

Therefore, if you don't have time, you can buy a topic skin from wrap Bootstrap. These theme skins are designed by professional designers, although they won't become the only custom ones, but it looks pretty good, and this method is the fastest. The next step is to use narrow
The marketing template () is used as an example to teach you how to customize a self-built Bootstrap.

I. Font

Modifying the webpage font is a shortcut to make the website look more distinctive and Modern. We can select your favorite fonts from Google's Font Service (Free Edition, but pay attention to the font matching. Here we choose
One of the recommended Google fonts is cardo and Nobile ).

1. Add this code to the webpage header:
2. Add the following code to the CSS style sheet custom.css: H1, H2, H3, H4, H5, H6 {font-family: 'corben', Georgia, times, Serif;} p, div {font-family: 'nobile ', Helvetica, Arial, sans-serif ;}

After adding it, refresh the page to view the effect. Now our website style has changed to the following, which looks much better than the default one.

In addition to Google's font service, you can also use fontdeck or typekit font services. They have more fonts. For more font matching solutions, refer to type.
Connection.

Ii. Texture

Do you know how to make a website look more elegant and elegant? Yes, texture. Just like the background texture of 24way.

But where should we find these texture effects? The subtle patterns website of the designer Atle Mo is a good place to go. Next we will use the cream on this website.
Dust texture. Click Download, save the texture image to your local device, put it in the/img/directory folder under the root directory, and add the code body {background to the CSS style sheet: URL (/img/cream_dust.png) Repeat 0 0. (If you want to use more traditional textures or textures, you can refer to the smashing article)

3. icons

The icons here do not refer to the transparent PNG Image icons, but to the icon font. They are loaded in the same way as the font, and are controlled by the CSS style. Compared with the image icons, the icon font loading speed is higher, resource consumption is also lower. Last year, 24way published an article on how to use the icon font on the website.

For the bootstrap framework, the integrated icon font is font awesome (shifticons is also a good choice). It is also free and open-source like Google's Font Service. To use it, download it and create it in the root directory.
/Fonts/folder. Then place the font-awesome.css file in the/CSS/directory folder.

Then we write the reference into the webpage header. The code is, at this time, we can freely use these icon fonts anywhere on the website, to add a truck icon to the Registration button, just declare it and sign up today. In addition, to prevent button deformation caused by adding the icon font, you need to increase the button width by a little bit (. Jumbotron
. Btn I {margin-Right: 8px ;}). The final effect is as follows:

Iv. css3

After completing the above steps, the next step is to add more
Css3 special effect. If time is not enough, simply add box shadow and text-shadow to the box to add a lot of color to the website. CSS
The Code is as follows.

H1 {text-Shadow: 1px 1px # CCC;}. div-that-you want-to-stand-out {box-Shadow: 0 0 1em 1em # CCC ;}

If you have enough time, you can add a gradient fill effect to make the title display more effective, as shown in the following figure. (If you want more CSS effects, go to the codeschool online tutorial)

V. jquery

In fact, the website looks pretty good now, but in order to make it more personalized, you need to add another background image. This step is quite difficult for many programmers. How should we choose an image that a designer may use? The answer is to go to istockphoto or a similar paid Image Library.

Here we will use the winter sun photo. To maintain the Adaptive Layout of the website, we also need to use the backstretch
The jquery plugin allows the background image to be automatically resized at any time.

1. First, you need to download the background image for a fee and put it in the/img/file directory.
2. Set this image as a background image (background-image): $. backstretch ("/img/winter.jpg ");
3. After a background image is added, the webpage subject is blocked, so it can be transparent, so that the website effect looks more modern and has a sense of design. Here you can use this technique to make the website transparent. For the code, see ". Container-narrow" on the right.
   {Background: URL (/img/cream_dust_transparent.png) Repeat 0 ;}

Effect

6. tones

This is almost done, but if you are careful enough, you will find that the color of the buttons and navigation menu is the default Blue System of Bootstrap. When a designer has a website, the designer is responsible for adjusting the website tone. To ensure the consistency of the website, all buttons and navigation are generally in three to four colors (for more information, see the article about the small button between geek Park ).

Although it is not as rigorous as a large company website, there are still some fast ways to make the website look like a perfect match.

1. Use the gimp color reader to read the subject color of the background image and confirm its GBR hexadecimal value;
2. Use color scheme designer to identify colors that differ greatly but complement each other at the same time;
3. Finally, you can use [Bootstrap Buttons] [beautiful button] to generate a button Based on the specified color.

In this way, the big Registration button on the home page is done, and the next step is to modify the color of the navigation menu, which is relatively simple and writes code. nav-pills>. active> ,. nav-pills>. active> A: hover {background-color: # ff9473. Let's take a look.

For more exciting designs, refer to the bootstrap Chinese network.

Conclusion

If you have gone through the above process, I believe you can create a website that can be used in a short period of time.