"Silk Road Hero" website revision design summary and experience

Web game website design environment is very difficult, many of the mishap, you need designers have a relatively strong adaptability, and designers should not because of their own products with poor quality and feel discouraged, abandoned the design of high-quality pages of the concept, should find ways to overcome difficulties to achieve the ultimate goal, and can enhance their own http:// Www.aliyun.com/zixun/aggregation/7197.html "> Design ability, not to be happy, not to own sad."

Hello everyone, I am a gun, here with you to share the "Silk Road Hero" official website of the revision of some of the summary and experience, hoping to bring help to everyone's work.

The reason for this revision is because the old official website quality sense is poor, ductility is poor, user experience is weak, solid need to recreate the page with higher user value.

Ps:webgame = Web Game

Before you start, let us see the effect of the revision, if you want to experience the effect of the page, click sl.qq.com

After the revision:

Before the revision:

Outline

1. Web Game Status Analysis
2. Product Design Thinking
3. Design execution Details
4. Closing Submissions

Analysis of the current situation of web games

1. The gradual increase in income, within the company received a certain degree of attention
2. Set up a separate project group for web games
3. High market value and great potential
4. The need to improve the quality of the game in order to meet user requirements for web games to improve
5. People are more educated and more able to consume than traditional online games
6. Because it is | Tencent Game | Its products, the quality of the page must be the same as other game official website, in order to maintain the company's brand image

Product Design Thinking

Differentiate the official website background homogeneity

At present, there are many ancient strategy games in Webgame, "Silk Road Hero" is one of them, and the official website of similar products also exist a large number of homogeneity phenomenon, most of the official website head to fire attack the city gate as the background.

And the tragedy is that the development company to provide the CG original painting is also fire attack the gate, and the quality is not excellent.

In this environment, I chose to abandon the scene of the attack on the city to make war scenes, so as to achieve both the distinction between homogeneous products and the sense of war visual effects. In addition to the dust Mars Flash, the effect is better.
After processing to get the following figure:

The same deal with the character material to get the following figure:

In the ancient game character material processing, through the high light tool to lighten the armor high light part is one of the most commonly used methods to finish the above two departments after the more ideal scene and character material.

Make UI to improve site quality

Webgame production cycle short cost, but at the same time the mishap is the quality of the game itself can not be compared with large-scale network games, its game UI is poor texture is not conducive to match the market activities of the game official website, so I chose to make their own UI.
The following image is the "Silk Road Hero" game interface:

It can be seen that the game UI is rough, without thoughtful thinking, and low availability. So I resolutely abandoned the game itself UI instead of making the UI.
The following are the UI created

The use of the current more popular heavy texture and light combination of techniques

Silk Road Official Website adopted | Heavy | In | Light | Heavy UI layout, it should be noted that changes in the layer should not be too abrupt

Of course, designers in the selection of heavy texture positioning needs to be based on different product characteristics and page layout to choose. And some mature products can discard the use of heavy texture, instead, through light texture to highlight the official website functions, such as "Dungeons and Warriors" the latest revision of the official website.

Add some modern elements to the ancient game page to make the page ancient and not old-fashioned

In the official website to add commonly used easy to identify small English, Arabic numerals, small dialog boxes, modern realistic characters, as well as the appropriate modern small parts, etc., can make itself for the official website of the ancient theme of the not rigid

Tencent game design of a variety of web game choice

Because of the company's future similar products need to be online, and important level than Silk Road hero High, gu in the beginning I put the more favorable performance of the Battle of Red to the back of the product turned to use cold color to make the page. The following image is a cold color airplane draft:

In the project team with the PK, the team mentioned to the official website UI and the game UI is too much, gu corrected the color of the direction of the use of warm colors Department:

Although this cold color of the official website finally became the airplane manuscript, but said this is wants to show that when has many own product homogeneity, the designer has the necessary long-term consideration and makes certain choice.
The way to differentiate internal products is to distinguish between color and texture, and the distinction between different metal textures for ancient games will be a good starting point.

The above design considerations are the final finished product results are indispensable, so the description of the more detailed,
There are other requirements that need to be noticed when designing.
1. Important "Start Game" button
The first is the Webgame official website is the most important element is: \ Start the game instead of traditional games download games, the need to use caution flash to avoid the operation of the accident

2. More than the traditional online games need to look good official website
Webgame more than traditional MMORPG need a beautiful official website to assist the project team and brand group "pull new", because the Webgame game in the picture quality of the film is poor

3. Save the following advertising production work
Webgame official online After our will no longer support the webgame activities of the picture production, solid to be in the official website design to do a more inclusive activity picture frame or early development of advertising norms, and should be easy to implement the norms

4. Avoid weaknesses
Project team colleagues General film that "game screenshot" is necessary to exist in the column, but the Webgaem game screen is unsightly, so need to be in the design of the game screenshot to weaken, so as to avoid their own weak points, at the same time can be an opportunity to promote the game game website content compression

5. Make more suitable Web pages based on user group
Webgame has many small monitors and notebook users, should pay attention to a screen content control, especially the server List page
6. Server List page File size control
The server List page should be negotiated with the refactoring colleague to reduce the file size of the server List page, because the Server List page will be a large number of users visiting the page, reduce the file size to avoid operating accidents and reduce operating costs, PS: The same user base in the case of Webgame users access to the official website ratio is far higher than the traditional online games

Design Execution Details

Official website Background processing

Reduce the saturation to 0 and add a small amount of red with the color balance. Then improve the contrast, get an old background picture, the vision with a high light tool, get the feeling of the dawn after the war, and can pull out the space feeling of the scene. Some of the lower precision of the place with a deepening tool to hide the flaws of the image, and then use the Seal tool to the right of the tower to the left after the middle view, the same is for the sense of space. Finally, use the seal tool to paint something that is not good for the page structure, such as chains and useless planks. After the above treatment will be able to get a higher quality background picture.

PS: Reducing saturation is a common technique for dealing with poor quality materials

Thinking of making the website texture UI

Texture thinking: In view of "Silk Road Hero" is the product of the Three Kingdoms era, Gu UI is mostly used in the Three Kingdoms period popular black iron color.

Modelling thought: Because is the strategy game, GU uses the right symbol the lion head to take the modelling, also because the Dragon kind of UI has been other similar product massive use GU also has done the evasion.

Evaluation of the amount of work: because it is hard and time-consuming to draw the UI on its own, the UI is drawn only in the head navigation drawing UI and very important start game, and in the functional part it uses a lighter texture that is more beneficial to use.

Closing arguments

Web game website design environment is very difficult, many of the mishap, you need designers have a relatively strong adaptability, and designers should not because of their own products with poor quality and feel discouraged, gave up the design of high-quality pages of the concept, we should find ways to overcome the difficulties to achieve the ultimate goal, and can improve their design capabilities, not to object Hi, Not to be sad.

Source: http://www.tgideas.com/?p=920