Example of visual design: the revision of the Asian Games website

Asian Games official website revision background
At the end of the 2008 Olympic Games, the 2010 Asian Games official website immediately came online. NetEase as the Guangzhou Asian Games internet site and the content of the exclusive sponsor, of course, within the company for the 2010 Asian Games specifically set up the Asian Games content channel and the Asian Games Design Group.
So far the official online line has more than a year of time, with the Asian Games VI more perfect, need to show the content of the audience more and more, the original site's function has been unable to meet the needs of current users. So the Asian Games Organizing committee and NetEase Asian Games channel decided to the Asian Games countdown to the first anniversary of the Asian Games official website for a new revision. The revision is committed to the design style, Asian Games VI system, interactive features and user experience to make optimization.

1, Pre-research
　　As a network products, inseparable from the topic is always netizens, users, so doomed the "user experience" the popularity of the word. The Asian Games official website at the beginning of the revision design on the user to the Asian Games official website localization and the style preference carried on a research. With the Asian Games Organizing committee, Asian Games Channel and research and analysis, we have formulated the general direction of this revision:

• Concise, atmospheric, structure clear
• Fashion, dynamism, internationalization
• Highlight key functions, such as countdown, resource retrieval
• Highlight the characteristics of China and Guangdong

From the above mentioned style positioning to the final version of the determination, not only to get the Asian Games channel affirmation, but also through the Guangzhou Asian Games Organizing committee layers of audit. This process of cooperation determines that designers must have three heads, both sides, from multiple perspectives and identity to consider and solve problems.
A long and difficult revision of the design is the prelude to this.

2, Design Process Overview

2.1 the definition of the revised layout
　　To determine the general direction of the revision, first of all need to refer to these requirements to build the skeleton of the page, that is, the system to make the layout of the network structure map.
In order to take into account the user's browsing, reading habits, the new version of the structural layout of the basic continuation of the old version of the layout, but in the interaction and experience on a number of adjustments.
Place the countdown and search at the top of the ribbon, highlighting and emphasizing the area, the headlines are divided into different categories according to the content, with the mouse through the form of a switch tab. (To review the old page, please click "History page Query" at the bottom of http://www.gz2010.cn page)

　　2.2 the definition of page style
　　The layout of the framework is determined after it is a drastic revision of the design center from several designers at the same time to carry out the homepage of this website design, to show attention. The difficult design process lasted for one months, during which repeated revisions, large and small, had been made, overtime, overnight production and more recently a commonplace. Looking back on all this, let's write this article now I'm glad that has become the past.
The following shows all the styles offered during the revision process.

After the Asian Games Organizing committee and the Asian Games Channel research and discussion, decided to adopt the style of plan 7, on the basis of some details to optimize the improvement.

　　2.3 determination of the final effect
　　After the definition of the style, the Sub-Committee on various details are constantly put forward a large and small improvement ideas, we need to do is to put these a lot of advice to deal with a piece of good, until the other party satisfied with the passage.
In particular, it is important to consider how to deal with the needs of all the leaders of the Sub-Commission. The Asian Games Organizing Committee is a relatively large organization, has a large and small different branches of the department, and each department wants to put their own products to push the most important position, which requires the designer to think, play the imagination, the limited space to make full use of, create the best results, so that everyone satisfied.
The final on-line effect chart.

3, A brief introduction to the design idea of the final version

The final version of the simple style adopted, mainly around the 2010 Asian Games set VI, such as banner background and the main map, the page of the ink background, column is the use of the Asian Games VI elements of the combination design.

　　3.1 Banner Design

The above is the top of the banner design thinking map, as a site most prominently also reflects the entire site image of an area, we have adopted a Chinese-style splash-ink form, and the Asian Games VI pattern, movement characters logo, the mountains and other elements of the group together. The right movement character logo also has a special place, we designed a number of different sets of motion patterns, each access page will randomly open one of them, and strive to let users each visit have some different feelings, to increase the level of the official website and interesting. Movement characters under the abstract mountain range, is the use of the Asian Games core graphics repeated arrangement to highlight the characteristics of Guangzhou-Baiyun Mountain.

3.2 characteristics of the design

The head chart uses the irregular graph, breaks down has been more common square the rigid form, lets the entire page lively, has the individuality.
Navigation has become translucent, revealing the bottom of the ink pattern, highlighting the sense of fashion at the same time, not abrupt and integrated into the background.

　　3.3 Functional Area-Countdown, search bar

Countdown area: Mentioned earlier, the countdown area of the design than the old version needs to do more prominent. So we abandon the general countdown function unique to the pure numbers, dull and boring characteristics, combined with the real dragon boat pictures and Asian Games sports icon in the Dragon Boat, designed this countdown form, and use Flash to make the Dragon boat Movement animation effect, more can become the focus of the user's attention.

Search Ribbon: The search button uses eye-catching red. In order to enhance the user experience, join the search type of switching function, so that users can more easily find the content they want. In order to increase the touch of the switch, we use not only the activation and inactive switch when the simple text changes, but designed with the search box into one button effect.

3.4 background design: The use of ink patterns

A core of the new design is the characteristics of the page, not only the characteristics of China, but also the characteristics of Asian Games. And Chinese ink in the Olympic Games in the successful use, but also make this element has a more international characteristics. At the beginning of the design, the bottom of the background is the use of sports characteristics of the large area of ink effect, then modified into a wash after the Asian Games logo, so you can more fit the theme of the Asian Games, the background is also associated with the Asian Games VI.

Postscript:

The Asian Games Official website revision, retained the old version of some classic design, more is to join the Asian Games VI in some of the visual elements, in style, features and user experience above a promotion; Just a revision of the success or failure, the key is the user's use of feedback, and these are still to be discussed later data.