How to quickly create a Web site with a sense of design

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

[Core hint] still use WordPress to build a station? Behind the Kiss! Try Twitter Bootstrap.

Note: Have their own website is a lot of people's dream, but most people can only rely on such as WordPress, such as the CMS implementation, and even a lot of corporate websites. But most of these sites seem to lack a sense of design, popular speaking is a bit of "soil." So how can you make your site look edgy, stylish, and design-like for programmers and other white designers? Geek Park compiled 24WAYS article how to make Your Site looks half-decent in Half a Hour Provides you with a workaround.

Programmers like me are often intimidated by the word "design" because I'm a programmer, not a designer, I have a computer degree, and I don't mind comic Sans fonts. (Note: Comic Sans font is a cartoon font that comes with Win95, the design industry is extremely repulsive, designers or those who have aesthetic complex do not bother to associate with it. More see this article why not use Comic Sans font)

Although it's just a programmer, I still want to make my site look more attractive, on the one hand, because it makes me more "professional", and on the other hand, because the research agency survey found that users will be more trusting of sites that "look" good. But because for a long time has been engaged in programming work, is not familiar with the design, or even fear, because in my layman's view is that the design is a lot can only feel can not teach the rules of precept and the so-called design sentiment composition, the knowledge barrier is relatively high.

But not so long ago I decided to try my best to make my website look more professional, even if it is not as effective as the real designer, but it is very helpful to people like me who have no design ability.

1. Use of Bootstrap

If you're not using Bootstrap then start it, this open-source project from Twitter makes web design truly a popular time.

Essentially, Bootstrap is an open source front-end framework developed by two Twitter employees Mark Otto and Jacob Thornton [Note: For more information please see what is Twitter Bootstrap?], which integrates many CSS styles A collection that helps developers who don't understand or are not good at CSS to quickly build a Web site that looks good.

Another benefit of using Bootstrap is that the site itself is adaptive (responsive), which eliminates all sorts of adaptation tasks for mobile devices. In addition, Bootstrap is customizable and can be configured to suit your needs. (Note: English is not good to see the Chinese version of the Bootstrap document or Bootstrap Chinese network)

2. Bootstrap Custom Guide

The decision to use Bootstrap is an important step, compared to the other can save a lot of energy in front-end development, but both pros and cons, if you decide to use Bootstrap, it means that it is likely to "bump into the frame" with other people, like the default WordPress skin, If we all use the style of Bootstrap, it will make many people bored.

So, if you can't afford the time, you can go to wrap bootstrap to buy a theme skin, these themes are designed by professional designers, although it will not be the only custom, but it has looked pretty good, and this method is the fastest. The next step is to narrow marketing this template (below) as an example to teach you how to customize a Bootstrap that is entirely yours.

I. Font

Modifying a Web page font is to make the site look more distinctive, there is a modern shortcut, we can go to Google's font services (free version) at random pick their favorite fonts, but pay attention to the collocation between fonts, where we choose by Designshack recommended Google font collocation of one: Cardo ( for headings) and nobile (for body text).

Add this code to the header of the page:

Add the following code to the CSS stylesheet Custom.css: H1, H2, H3, H4, H5, h6 {font-family: ' Corben ', Georgia, Times, serif} p, div {font-family: ' Nobile ', Helvetica, Arial, serif

After adding a refresh to see the effect, now our site style has become the following, looks better than the default.

In addition, in addition to Google's font services can also use like Fontdeck or Typekit font services, their fonts more, more font matching scheme can refer to type Connection.

Two. Texture

Know how to make a website look more elegant and graceful? Yes, textures. Like a 24WAY background texture.

But where do these textures look? Designer Atle Mo's subtle Patterns site is a good place to go, and we'll use the Cream dust texture on this site next. Click on the download to save the texture picture locally, then put it in the/img/directory folder under the root directory, and then add the code body {background:url (/img/cream_dust.png) repeat 0 0 to the CSS style sheet. (If you need more style textures or other uses of textures, see the Smashing article)

Add texture before and after contrast (larger image)

Three. Icon

The icon here is not the transparent PNG picture icon, but the icon font, which is loaded in the same way as the font, by the CSS style control, compared to the picture icon, this icon font loading speed, the consumption of resources is also lower. There was an article in 24WAY last year about how to use icon fonts in a Web site.

For the BOOTSTRAP framework, the Consolidated icon font is the fonts Awesome (Shifticons is also a good choice), and Google's font services are free and open source. To use it, simply download it, and then create the/fonts/folder in the root directory and put it in. Then put the font-awesome.css file in the/css/directory folder.

Then write the reference to the head of the Web page, the code is, at this time we can at any place on the site free to use these icon fonts, if you want to add a truck icon to the registration button, just declare it, Sign up to today. Also, to prevent the button from being extruded after the icon font is added, a little extra work is required to increase the width of the button (. Jumbotron. btn I {margin-right:8px;}). The final effect is as follows:

Four. CSS3

The above is done after the next thing to do is add a little CSS3 effect, if not enough time, simple adding box shadow Box-shadow and Font shadow Text-shadow can make a lot of Web site, CSS code as follows.

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

If you have enough time to add a radial gradient fill effect, you can make the caption appear more severe, as shown in the following comparison. (If you want more CSS effects, you can learn about Codeschool's online tutorials)

Five. JQuery

In fact, the site seems to have been very good, but in order to make it more personalized, but also need to add a background picture. This is a difficult step for many programmers, so how do you choose a picture that a designer might use? The answer is to go for a istockphoto or a similar pay gallery.

Here we will use Winter Sun this photo, in order to keep the site adaptive layout, also need to use backstretch this jQuery plugin to make the background image can be automatically resized.

First you need to pay to download the background image, and then put it in the/img/file directory.

Set this picture to the background image (Background-image): $.backstretch ("/img/winter.jpg");

Add background image After the theme of the page will be blocked, so you can make it transparent, so that the site will look more modern, a sense of design. Here you can use this technique to make the site transparent, with the code on the right,. Container-narrow {background:url (/img/cream_dust_transparent.png) repeat 0 0;}

Effect

Six. Hue

The adjustment is almost complete, but if you are careful you will find the button and the navigation menu color or the Bootstrap default blue line. In the presence of a designer site, designers will be responsible for the adjustment of the site tone, in order to ensure consistency of the site, all buttons and navigation are generally three to four colors (more can see the article between the Geek Park small button).

Here, although it is not possible to take the color rigorous as the big company website, but there are some quick ways to make the website look very match.

Use GIMP's color picker to read the theme color of the background picture to confirm its GBR hexadecimal value;

Use color Scheme Designer to recognize and vary large but complementary colors;

Finally, according to the color to make a button, you can use [Bootstrap buttons][] online directly generated.

So the first page on the Big registration button is done, the next is to modify the color of the navigation menu, this is relatively simple, write code. Nav-pills > Active > A,. nav-pills >. active > A:hover {backgr Ound-color: #FF9473; Can。 See how it is.

Conclusion

If you have experienced the above mentioned process, I believe you can be in a relatively short period of time to make a still can get a shot of the site.

Unless the special statement, the Geek observation is the Geek Park original report, reproduced please indicate the original link.

Original address: http://www.geekpark.net/read/view/176891