Web Graphic Design Style Guide

Source: Internet
Author: User

[Csdn December 12 international] Web2.0 is a popular buzzword, but it is a major part of this particular Web2.0 design style, whether it is like or hate Web2.0. The purpose of this Guide is to give some reference to design beginners, or as a list, it provides a reference for the new Web 2.0 style that is still struggling to adapt to many social networks/social media websites.

First, we know that Web2.0 has vague technical definitions, such as new media, information sharing, and media. I am not going to talk about the complicated things, because we only need to focus on the Image Design of Web2.0.

Common attributes

Simple Design

What hinders your design? Maybe too many useless elements? When performing a design, I will find that these elements do not need to be discarded after I have asked myself whether or not they are needed or what they are needed.

Large Area white lots of white space

Pay attention to the white space (blank space can make your work feel spacious, If you want) is an important design style in the design style of web. The proper white space will make the page elements more colorful and give the eyes a place to rest. I usually use 20-35px white to set off the design in the 960 grid design. This mode gives me a good framework and makes the text inside look really good.

Larger text larger text

One major step before the design was to think of not using those pixel words that have been used for a long time ago, and then say I think the 28 characters are good. Another advantage of titles or headers using a big font such as H1 is that it brings better Seo evaluation to your site. One of the main factors is that visitors want to quickly know what your site is doing. Large fonts allow visitors to quickly grasp the key points.

So to sum up, it is good to use a large font as the title, and try to give Seo some more concise and effective keywords, but not all of them are on the 28th, otherwise, the visitor of the website will be unhappy.

Gradient gradients

It looks good when gradient processing is appropriate. They can add depth to a boring design. If used properly, the gradient can enrich layout elements, text, and even logo.

Centralized layout centered layout

This is not only true for Web, but the centralized layout has become increasingly popular in the whole page design field. Centralized layout is considered more straightforward, and this method is also very suitable for the adjustment of the avant-garde and humorous Web2.0.

Less Columns

After using the large font and beautiful white space, do you still want to use the column width of 14?

A simple design is equivalent to a few la S. The layout design of the content can be seen in many designs, so that the style layout of the content is not trivial.

Split the top unit seprarate top section

Split the top unit to separate some details from the important departments of the website. If I am a new visitor, I will not care about your stock options. I just want to know what your company is doing and what deserves my attention. The separated top unit will provide me with some basic information I want, and I will not want to pay attention to more detailed questions until I am satisfied with the basic information.

Simple navigation

The first point in this article tells us a problem. A new visitor may leave your site because of poor navigation. Navigation should always adhere to the principle of easy identification on websites and be properly organized.

Bold simple Logos

Who are you? The logo can answer this question. The Web2.0 style uses a large number of eye-catching and concise logos. Here are some best cases of concise and generous logo.

Witty title intros

Accurate market positioning and understanding of every netizen is the main way to personalize your site or company ,. When using the Internet, you do not need to interact with people face to face. However, using humorous greetings makes it easier for your visitors to access your website.

Distinctive colors strong colors

Many Web websites often use a large number of neutral colors, and occasionally use one or two eye-catching colors.

Rich Surface

When designers frantically look for the best textures, such as wood grain, bricks, fabric, and so on, the texture material website came into being.

In Photoshop, elements can be superimposed on the background and text. If they are used properly, they can also bring some fun to the design. If you are not sure whether you have used the Web Feature excessively (or other features), try posting the design to the design forum for feedback.

Image reflection

The famous apple crystal button became popular in a design style. Images gradually become available in many Web2.0 Design Styles. The key to this design style is to reduce opacity, which will make the entire design look good.

Shining icons bling icons

I like good icons. Cute Icons can indeed bring layers and highlights to a dull design. Everaldo has created its own crystal icon set and inspired many talented icon designers.

Web 2.0 badge/price tag the Web badge/price tag

You can use even a large number of Web badges and recently popular price tags to attract tourists' attention. Most of the badges are reflective (sparkling), but the price tags are generally gloomy.

Gray-Text

What is gray text? Using a gray font may make the screen look messy, although the gray text can make it look more beautiful,

However, some designs make a mistake. They always make the color of the words very light, so that we have to select words to highlight them for reading.

This unfriendly design and confusion will keep visitors away from your website and cause some printing problems (unless you use independent CSS to control printing ).

Note: If the brightness of your monitor is reduced by 10% and the words on your site disappear, you may have made this mistake.

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.