How to lead a set of game website design

1, before the commencement of the discussion

In the previous version of the concept version of the official website, the main is to explain the story of the game background, camp relations, a preliminary introduction to ethnic occupations. At that time in the game development phase, a lot of things are actually to the point. It's like saying read a book and read a preface.

In the official version of the website, and the market, product managers have done a more detailed communication, the version of the official website in addition to meet the normal operation of the game some of the functions required, but also want to continue the concept version of the basis of the earlier mentioned some things spread out, speak more detailed.

These points mainly include: story background, ethnic occupation, steam culture. Mainly in the form of thematic presentation.

2, design ideas finishing

The first edition official website plan:

Concept: Camp strong confrontation, emphasis on hostile forces, strengthen the sense of PK generation. (The following plan for the concept of simulation manuscript, borrowed from the image of other products, please understand.) )

The second Edition official website plan:

Concept: Timeline. In the era of the emergence of black gold as a timeline, tell the story of the period of the emergence of the race, the emergence of new things, and so on. (The following demo demo)

The third edition official website plan:

Concept: Steam and magic. The official website divides into two entrances, the content makes the distinction, the screen performance provides two sets of skins, the player chooses his favorite camp to enter the view related information. (The following plan for the concept of simulation manuscript, borrowed from the image of other products, please understand.) )

The fourth edition official website plan:

Concept: Steampunk. Has entered the game before the test stage, so in the previous and several concept types of official website are not applicable, to complete the game officially official official website to do. After the third version of the Steam and magic of the comparison, the choice of more people pay attention to the "steampunk" wind.

3. Thinking in Design

1. Steam Punk Edition website

As we all know, the general composition of the web design of several elements: the main visual, background, SLOGAN, UI.

Main vision: There is a greater choice in this area. The IP Center offers several more molded roles.

UI: Early data collection is very important, look at my package.

A prototype was selected and a general setting was made;

Submit to the Art center to help refine, including later flash effects.

SLOGAN: Combined with the overall page effect, in the design of SLOGAN, did not do too much, complex effect.

Animation: finally joined a number of steam pressure hands gear rotation and other effects, played an icing on the cake effect.

2. Special Topics

All the topics at the beginning of the design of a concept, the official website of the choice of steampunk element to design, is the hope that people in their minds to deepen the impression of the black gold vapor culture, since we implanted a symbol, why not in more topics continue to deepen this impression? Maybe it's a steam element, or maybe it's just a "symbol". So in the design of the project, I took a more representational, formal sense of the layout, and continue to form a style.

Story topics:

Symbols: Books. Add steam elements, in the form of books to carry out packaging, originally wanted to make electronic magazine, and then a variety of reasons for cancellation.

Ethnical Occupations:

Symbol: Banner. The banner to distinguish between the different camps, like the ancient two armies against each other, must carry their own banner.

One thing to mention here is the preliminary preparation of the material.

Some people say that the picture of the race inside is very good, the overall structure is also better. What I want to tell you about this is this: when you ask for material, you have a clearer picture of it in your mind. More importantly, you should have a better understanding of the introduction of the game.

Double Sided Black Gold:

Symbol: Round. To the circle as the visual center, the right and left sides of the form of confrontation, showing different "double-sided" concept: double-sided Magic, double-sided CEO, double-sided style, two-sided camp, double-sided play.

4. Project Summary

Several points worth thinking and sharing in the Black gold project:

1, the Guide page header figure is too high, uses after a few seconds to navigate to the following main interface, such interactive experience good?

2, the page head may not have to have the image of the main character.

3, in doing banner, the official website, forum, register to keep the proportion of uniform as far as possible.

4, do not ignore some screenshots of material, in fact, sometimes screenshots can make the user intuitive feelings of the actual degree of the game.

5, forum, news and other blocks, because there are a lot of text information, try not to use the effect of white, long time to read will make the eye fatigue. Of course, do not use very pure, saturation very high color, will be stabbed blind.

5, a little suggestion

Sum up a few points:

1, understand the game information: including story background, occupation, characteristic play, values 、...... Do not ignore text materials.

2, the collection of Market Information: competition website, analysis of their strengths and weaknesses. Analyze our user base, their preferences and habits. Understand the test time, promotion plan and other marketing plans.

3, the prototype discussion: Don't put yourself as a graphic artist, we are not just a painting, art, actively to participate in the prototype discussion, you can learn from the product manager's ideas, but also can give your ideas feedback to them, sometimes your ideas may give others some inspiration.

4, Qiao Women's rice: To find the project's main beauty more resources, what flower grass, animal monsters, NPC uncle, skills, not too much, always useful to the time. It would be better if I could convince him to give you a share of their internal authority.

5, brainstorming: What can be done, if you have not found the feeling, then pull the pair together brainstorming. There's always some help.

6, on-line tracking: Some people say that we are pixel eyes, in fact, we have a pursuit of the perfect heart, before the line to see the final rendering effect and you expect there is no difference bar.

Note : For more wonderful tutorials, please pay attention to the Triple Web Design Tutorial section,