Do you understand the current web design trend?

1. Web Desktop

Www.yahoo.com

Mail.yahoo.com

Www.live.com

Fang: It looks great and worthy of special appreciation

The opposite: the cost is too large.

As close as possible to the beautiful graphics on the desktop, this is the most elegant style. As a result, this style looks great, but requires a lot of work and network resources. In short, the desktop style is unique in terms of its surrounding angle, expressive graphics, shadows, and imitation of desktop applications.

Examples of features of desktop elements:

Block level (Block): A area on the screen is usually accompanied by an edge frame, header, or bottom (border, header, or footer) to connect logical similar elements, such: link, text, scorecard (Note: I think of the score bar Digg), and Article preview. The block level is usually accompanied by a seemingly casual shadow (optional shadow ).

Mini block: Usually they are a combination of small pictures and fine text.

Button: This design element is accompanied by a certain angle, stylized border, and seemingly casual shadow. The button may be in the glass style, and there are some shadows generated by the light projected from the bottom. When you move the mouse up, there will be visual feedback.

Labels: they also use angle, stylized borders, and seemingly casual shadows. There are also mouse floating feedback.

　　2. Mercury orange Style

Www.mozilla.com/firefox

Www.digg.com

Www.silverorange.com

Positive: good availability, lightweight, and simple

The opposite: fashion, followers, a little expensive

It looks a little simple, and seeks a balance between style and light weight. Compared with the visual rich interface, mercury orange reflects the availability. Unlike the desktop style, it does not try to impress viewers, but provides an excellent usable experience. Silverorange.com was designed for the mercury orange style.

Examples of characteristics of the mercury orange style:

Top menu: it is usually dark and the color of the text is light. On the background, the color of the highlighted angle is rich in changes and forms a strong contrast.

Guide line: More stereoscopic, guide line and top menu background color to form a comparison, text color is gray.

Text Segmentation line: more three-dimensional, the separation line looks moderate.

　　3. Apple style

Www.apple.com

Fang: elegance, quality, and luxury

Reverse: Too special, too expensive

This design with glass labels and buttons as the main feature is not suitable for small fonts, but fortunately, if you do not usually use small fonts, this style is acceptable. A lot of work, because you need to do a lot of design. There are features that you need to maintain uniqueness through design, so using Apple to design web is almost impossible.

Examples of Apple style features:

Apple menu: the Apple menu reflects the Apple style, and each place has the same style: glass buttons, stereoscopy, rounded corners ......

　　4. Microsoft Style

Www.microsoft.com

Www.msn.com

Www.rsdn.ru

Fang: strong functionality, simplicity, and low development costs

Countermeasure: You are an ally of Ms.

The most important thing is that the floating menu navigation on the Left bar of a Microsoft-style website is clear, but it is too earthy. Simple, clear, but common. It's like an engineer created for an engineer.

Examples of Microsoft style features:

Microsoft menu: the Microsoft-style main menu is gray, functional, and simple. What occupies the left sidebar is the border, the hover effect of the mouse, the floating sub menu ......

The difference between Microsoft style and style lies in the stereoscopy of the header. When you scan the header from left to right, this feature will be found in the search box in the upper right corner.

All block levels are separated by clear gray lines. I think this is because of the availability of the viewpoint. People have a wide selection on Microsoft, but one thing is clear: Microsoft's design style is simple, functional, and available.

Compared with the Apple style, it is not very expensive. But it runs well.

　　5. magazine Style

Www.style.com

Www.drive.ru

Square: attractive, simple, and concentrated

Inverse: many photos and texts are required, and the quality of the content is critical.

The design style of Web magazines is ...... Well, it's like a magazine. It looks like a magazine with excellent visual effects on your computer screen, so you can view the web page with the view of the magazine.

You will realize that there are many links to articles in high-quality photos and images.

The target group of the magazine style is the reader of the magazine. It is neither an engineer nor a web designer nor even a web worm. This is indeed designed by a group of professional designers who love their work very much. If you target such a designer, you need to work for yourself and love it deeply ......

6. Simplified style of rounded corners

Www.youtube.com

Square: simple, fresh, and outstanding content

Opposite: It's a bit boring, not novel, and hard to impress

This design is not bad at all. Its purpose is to make the viewer focus on the content and reduce the traffic. The top navigation of a typical site (www.youtube.com) has only the rounded corners and the simplest elements intentionally.

　　7. Design Style for Web 2.0

Blogger.com

Netflix.com

Target.com

Ruby-lang.org

Yelp.com

Blubolt.com

Fang: Modern, easy to be accepted by the masses, novel

Inverse: availability problem, fixed width

To identify the design style of Web2.0, you can use:

-Fixed width

-Rounded corner shape and shadow

-Large font

-Highlighted Headers

-Substantial amount of gray text

-Wide Fonts

-Rounded corner shape and button

-Shadow, glass effect, and stereoscopic effect

　　8. Adobe/Macromedia Style

Adobe.com

Macromedia.com

Square: clean, simple, balanced, and noble

Counterparties: high spending, outstanding personality, and availability issues

This style is similar to the Apple style: once you read it, you will immediately identify other counterfeits. This kind of design costs a lot, pursuing the graphic effect, and pursuing the overall balance. It is the original style of Macromedia several years ago, but is still one of the best web designs.

The Macromedia design style is distinctive: complicated three-dimensional buttons, rounded corners, and shadows are unique, fixed width, and central.

Another article compares the Design of Multiple excellent sites in the world and summarizes their common features as follows:

1. Simple Layout

2. Center Positioning

3.3d Effects

4. Soft, with a natural background color

5. Bright colors (but use them with caution)

6. Cute icons

7. There are many white spaces

8. Large font