WEB2.0 Graphic Design style guide

Source: Internet
Author: User
Keywords Okay this WEB2.0.

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

web2.0: I've always heard that this fashionable word, whether it likes or dislikes web2.0, is a major part of this particular web2.0 design style. The goal of this guide is to give some design novices some reference, or as a checklist, for graphic designers who are struggling to adapt to the style of social networking/social media sites.

First we know that web2.0 has a lot of technical definitions, such as new media or sharing information or media, etc. I'm not going to talk about those complicated things, because we just need to focus on web2.0 graphic design.

Common Properties

Simple design

What hinders your design? Perhaps too many useless elements? In a design, I often find myself after using an element, immediately ask myself a question of the purpose of this design element, after asked me to find that I do not need that element.

Large area white Lots

Pay attention to white space (where you can breathe your work, if you like) is important in web2.0 design style. Proper white space will make the page elements more colorful, but also give the eye a resting place. I usually use the depenting in the 960 grid design to foil the design. This model gives me a good frame and makes the text look really good.

Larger text larger text

One of the main steps before designing is to think about not using the pixel words that were used long ago, and then say that I think the number 28th is good. Another use H1 this big font to do title or head word advantage is, will give your site SEO bring very good optimization effect. One of the main factors is that visitors can quickly know what your site is about. A large font allows visitors to quickly grasp the main points.

So summed up: Big font for the title is very good, try to give SEO some more concise and effective keywords, but also not the whole is 28th words, otherwise visitors will be very unhappy oh.

Gradient gradients

It looks great when the gradient is handled properly. They can increase the depth of a tedious design. As far as the gradients themselves are concerned, they can make layout, text, and even logos richer.

Centralized layout centered layout

The centralized layout is becoming more and more popular in the page design as a whole, not only in web2.0. The centralized layout is thought to be more straightforward, and it is a good way to flaunt the avantgarde, humorous web2.0.

Fewer columns pager columns

Do you want to use a 14 column width after using a large font and a nice white?

Simple design equates to fewer layouts. In order to layout the content of the typesetting design, in many designs can be seen to make the content of the style layout is not trivial trend.

Split head seprarate top section

Dividing the head separates some call actions from the core. If I were a new visitor, I would not care about your stock options, I just want to know what your company is and what is worth my concern. The detached head provides me with some basic information I want, until I'm satisfied with the basic information and I want to focus on more detailed questions.

Simple navigation Navigation

The 1th content tells us a problem, a new visitor is likely to leave your site because the navigation sucks. Navigation should always adhere to the principle of easy identification in the website, and should be organized properly oh.

Bold and concise logo bold simple logos

Who are you. The question logo can be answered. web2.0 style uses a large number of eye-catching and concise logo. Here are some of the best examples of simple and generous logos.

A witty title introduction Witty title Intros

Accurate positioning and understanding of each XX is the main way to make your site or company personalized. With the Internet, you don't have to interact with people face-to-face. But note that using a humorous greeting will make your visitors feel easier to visit your site.

Bright Color fervent colors

Many web2.0 sites often use a large number of neutral colors, occasionally with one or two eye-catching colors. Now this blog is an example.

Rich surface Performance

When the designers frantically looking for the best texture like wood grain, bricks, cloth and so on, texture material site came into being.

In Photoshop, the background and text overlay elements, if they are properly used, it can also bring some interesting design. If you're not sure if you've overused the Web2.0 feature (or other features), try putting the design in the design forum for feedback.

Reflective Reflection

The famous Apple Crystal button makes a design style popular.

Reflective in many web2.0 design style gradually began to have a foothold. The key to this design style is to pay attention to lowering the opacity, which makes the entire design look good.

Shining icon Bling Icons

I like the good icons, the lovely icons can indeed bring a level and bright spot for a flat design.

Everaldo created a set of his own crystal icons and inspired many talented icon designers.

web2.0 badge \ price tag

Web2.0 's badge and the latest popular price tag can be used to attract visitors ' attention.

Most badges are reflective (shiny), while price tags are generally gloomy.

Gray character Gray-text

What is the gray word?

Using gray fonts may cause the screen to look a bit cluttered. Although Gray words can make it look more beautiful,

But some designs make a mistake, always make the color of the word very shallow, too shallow so that we have to select text to highlight it to read.

This unfriendly design and frustration will keep visitors away from your site, as well as problems with printing (unless you use a separate CSS to control printing).

Note: If your display's brightness is lowered by 10%, the word on your site disappears, you may have made the mistake.

Just write it here and thank you for reading.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.