Hardcore dry goods: understanding game visual design, from theory to practice

This article is first published in NetEase Game Academy, and GameRes is authorized to release.

(1) What is game visual design?

1. Understand the working objects of game visual design

①Login interface: The login interface is the first threshold before the player enters the game itself. It can be said that it is the primary impression of the entire game concept. The login interface usually contains: game LOGO, login and server selection information, login entry, and some auxiliary buttons, such as announcements, user center, etc.

②Lobby interface: Some games will have a lobby interface with permanent information, which usually integrates most of the functions and gameplay entrances of the game.

(“Terminator 2” lobby interface)

③Server interface: There will be multiple servers in the game to divert players, and the server interface is to carry this function. You can usually see multiple server lists on the server interface, including the status of each server.

(“Inhuman Academy” server interface)

④Core gameplay interface (HUD): The interface that players mainly operate, and the type and number of functions on the interface are slightly different according to different game types.

(“After Tomorrow” HUD interface)

⑤System function interface: For the function interfaces corresponding to different systems of the gameplay, the common ones are role interface, equipment interface, backpack interface, pet interface, task view interface, illustration interface, role creation interface, card drawing interface, etc. Because different games have different worldviews and themes, as well as different types of gameplay, the names of systems with the same function will have corresponding different packages.

(“Hunter Awakens” backpack interface)

(Matching interface of “Decisive Battle in Peace”)

⑥ Settlement interface: It is usually the end of a duel or a round of gameplay, and generally contains judgment prompts for similar results such as “victory” or “failure”, “SABCD”, and result information. (The key is to create an atmosphere of positive feedback and weaken negative feedback)

(“Yi Meng Jiang Hu” settlement interface)

(“Yi Meng Jiang Hu” settlement interface)

⑦Activity interface: Generally, the requirements for atmosphere creation are more in line with the theme of the event and consistent with the style of other interfaces of the game. It belongs to the special interface in the game interface, and it is also the interface with the greatest space for visual designers.

(“Terminator 2” event interface)

2. Understand the visual design style of the game

Definition: The birth of a game style requires not only the creativity of the visual designer, but also the visual designer to invest a lot of energy in the early stage to understand the background of the project, so as to design a set of interfaces that conform to the world view and style of the game and increase the player’s substitution Sense and immersion.

① Game type: Different game types require different interface content and different forms of expression. The following are common game types:

RPG (Role-Playing Game)-role-playing game
ARPG (Action RPG)-Action Role Playing Game
SRPG (Simulation RPG)-Simulation RPG
MMORPG (Massive Muti-player Online RPG)-multiplayer online role-playing game
AVG (Adventure Game)-Adventure Game
AAVG (Action AVG)-Action Adventure Game
ACT (Action)-Action Game
STG (Shooting Game)-shooting game
FPS (First Person Shooting)-First Person Shooting Game
FTG (Fighting Game)-Fighting Game
SLG (Strategy Game)-Strategy Game
RTS (Real-Time Strategy Game)-real-time strategy game
RAC (Racing Game)-Racing racing game

②Worldview: Every game has its own unique worldview. The worldview is what the world looks like in the game, what period and background, survival rules, etc. What happens in this world is a story that players will understand and experience

The world view includes: world structure, maps, factions, heroes and even game props. Understanding the world view means understanding the world background, character settings, numerical power balance system, and main story. The structure of the world view will give players an immersive perception in the game, which is an appetizer to guide players in-depth experience.

(“Fifth Personality” explores the truth)

(“Shendu Night Travel Record” Chinese monsters)

③Art style: As the most important part of the visual design performance, it directly affects the overall player’s immersion in the game and the unified and complete experience of the game.[Click for details of “Art Style”]

3. Understand the role of game vision in games


Looking at the new works of the world’s top game manufacturers every year, we can find that the spiritual power carried by the game is far more than simply providing entertainment. In terms of understanding the world, tracing history, and reflecting on human nature, many excellent game works have given surprises that are not weaker than literature, music, and film and television. For example: “P5” truly restores the city, “Assassin’s Creed” restores historical events, “Detroit” AI development in human thinking, etc. This has given the world a new understanding of games, and at the same time strengthened the confidence of game practitioners to pursue higher pursuits.

Different from people’s habit of accepting most art forms-seeing and hearing, games have added-operating experience on this basis. This adds a new dimension to users’ acceptance of works. Interaction is the most direct manifestation of this dimension.

②Incarnation of sensibility and reason

In the process of game production, GUI is the art packaging for game interactive operations, and it is the beautification and sublimation of interactive drafts. It is necessary to consider the fusion of the continuation of the game art style and the reasonable expression of interactive operation methods. It can be said that GUI is the dual incarnation of art (sensibility) and human behavior (rational), and it has the above two indispensable requirements for relevant practitioners. With a good GUI, the player’s immersion and experience in the game can be twice the result with half the effort.

③Comfort and self-esteem

Good design can guide players to clarify their goals and improve their sense of control over actions and the environment. Players can get positive feedback when they engage in any behavior in the game. Of course, the spontaneous behavior that the player thinks is actually a carefully designed GUI to guide the player. It is these guidance that increase the player’s self-confidence, help the player overcome difficulties, and make the player not feel the change of time. The most engaging state of selflessness requires rich sensory experience and strong cognitive participation. The importance of GUI is the same as gameplay, plot, artistic appearance, and music, which together constitute the complete core of the game.

Four, game visual design (GUI) principles

①Malos demand hierarchy theory

-Functional requirements: can be used

-Reliability requirements: stable and consistent operating experience

-Practical needs: good or not, high tolerance

-Proficiency requirements: its performance helps players do better in the game

-Creative needs: After meeting the above needs, the design itself creates new connections and beneficial explorations with players

②The basic framework is built and the process is reasonable-to meet the functional needs of players

At the very beginning, the overall GUI must be customized: the basic framework is built. This involves the understanding of interactive drafts, the trade-off between functionality and practicality. After clarifying the game type, target users, and project future expectations, it is necessary to determine the basic art style and express the interactive purpose in the most concise packaging.

③World view setting-to meet the players’ demand for reliability and practicality

The GUI design of many excellent games (“Hearthstone”, “Age of Ice and Steam”) has been well implemented in the game world view. The use of elements is integrated with the game background story and theme, and the dynamic rhythm can drive the main tone of the game. At this time, the GUI has been integrated into the game, becoming an inseparable whole body. (This is also the most basic requirement for an excellent host or independent game) Players can obtain a unified game operation experience during the game, the interface is reasonably connected, and the feedback is just right, so that the player always maintains a high degree of immersion.

④Operational innovation + value output-to meet players’ proficiency needs and creative needs

In the history of game design development, due to technological progress, equipment changes, and players’ pursuit of new game types, some innovative designs in operation will be produced in stages, such as the earliest home console external operating keyboard (Nintendo), to PC windows The UI design of the mouse hot zone brought by the mode, and then to a series of novel technologies brought by the touch screen mobile phone, and the holographic operation mode of the emerging VR.

Cooperate with the game story to enhance. In terms of theme expression, GUI can play a very good value output role by influencing the player’s consciousness and guiding the direction of the game through plot guidance, operation somatosensory coordination, and the addition of time dimension.

For example: The global QTE design of “Detroit-Become Human” only adds a waiting time limit to the normal QTE operation. This unimportant design directly affects the player’s prediction of the choice and even affects the game story line Towards. Players will regret and regret the consequences of their hasty decisions. This fits the game theme: the limitations of human beings, the sad and joyful results of AI and the unknown future of human development, and the discussion of human nature. It can be said that GUI operation design is an important output channel for the core values ​​of the entire game.

(2) The production process of game visual design

1. Style draft design

①Mood board production

Knocking on the blackboard: The mood board is produced in the early stage of the design style draft, which can communicate with the product more efficiently, polish the design content, and convey your design inspiration to the team more quickly and intuitively.

1) Ask for keywords from the product-objective time and place, subjective emotional words (the color tendency is best);

2) A large number of images are searched, and the splicing content includes texture, material, illustration, font, and hue;

3) Simply make a mood quadrant map, use color axis and time as the division of the above material to divide the area to form a color group;

4) Show it to the team and make a selection, gradually precise the scope, until the direction is determined;

At the same time, at this step, we can find the theme elements that run through the game, which will determine the direction of subsequent design.

②Packaging and interface type selection

The interface type needs to be finalized together in the first draft stage, which involves the selection of screen packaging.

Interface type:

1) Window

2) Heavy

3) Flat

4) Full screen

According to the interface type, to determine the packaging strength and form, almost all the methods we use are to simulate the existing objective world. It’s just that different games account for different proportions.

③First draft design

The output is simple and incomplete design concept. The purpose of this step is not to fill in the art according to the interactive draft, but to understand the requirements of the GUI. This time is the best time to communicate the key design points, think about the scalability of the design, add conceptual ideas and improve the way of expression.

Two, interface design

The interface of the game is huge, which is the main workload of GUI designers.

①Universal functional interface

In the design of the first draft, we will give priority to making a universal functional interface, because this is the part of all interfaces that can express the packaging concept most completely, and designers can fully express their ideas.

1) Window interface (there are more rules to follow. At present, the layout of the window interface is not very innovative, and the design requirements are small, to meet the world view, just select the appropriate elements.)

2) Full-screen interface-imitation window (similar to window design layout, but because it can be displayed in full screen, there is more room for atmosphere creation. It is important to note that the color level and style are unified)

3) Full-screen interface-scenario (High design quality requirements, the advantage is a strong sense of substitution, the disadvantage is the large amount of resources, and the difficulty of related extension production.)

②Lobby interface, battle interface

This is basically the most exposed interface of a game.

1) The core experience HUD of MMO imitating terminal game (such as: “One Dream Jianghu”);

2) Repackaged full-screen hall interface with tree structure (such as “Onmyoji”);

3) The stepped structure focuses on the fast-paced and centralized lobby interface (such as: “Wild Action”);

4) Character creation interface, settlement, activities and other special function interfaces (relatively stylized interface type, among which the role creation interface is the earliest interface for MMO game players, which is especially suitable for cultivating players’ goodwill);

3. Icon design and application

Icons are another major part of GUI design, which use graphics to refer to most of the functions and information that need to be emphasized in the game.

①Design principles

1) The beautified content is easier to enhance memory-pictures are easier to remember than words. Quickly enhance memory points, which is exactly what the game hopes to convey to players.

2) The application of image features such as similarities, examples, symbols, and compulsions in life has become a common cognitive imprint written into the culture by modern people over the years, and it can be used in design with less effort.

3) The icon design in the game is the channel to convey the game style. In different games, we have a large number of excellent designs with different performance types.

4) Corresponding cultural evasion: such as religion, ethnic taboos, and edition evasion, etc., avoid appearing in icon design.

5) In the icon design, pay attention to the full shape, the uniform brightness and saturation, the concise and recognizable silhouette, the same type of icon size, the same tilt angle, and the same environmental light source.

6) When the shape of the icon is irregular, we need to adopt some alignment techniques.

②Divided by function

1) System function icon;

2) Character skill icon;

3) Consuming item icons;

4) Icons sold in the mall;

5) Head portrait, portrait frame;

Four, dynamic design

Motion effect is an important element of GUI language in a game. In the past, GUI design often ignored this point, and most animation effects were added as additional effects to limited special prompt controls.

①Interface switching effect design

The transition of the interface is mainly for the connection of different screens and the appearance of the UI. Higher requirements for rhythm control. When designing transitions, you can refer to plot development and make targeted designs. Similar to film and television performance. (For example, “The Fifth Personality” enters the push shot process, “LOL” transition process.)

②Control operation feedback design

Our feedback design for player operations needs to be satisfied: the feedback is timely and good, the rhythm is natural, and the effects of behavior and corresponding results need to be consistent, which can effectively improve the player’s sensory experience. (For example, all touch feedback and interface transitions in “The Age of Ice and Steam” all use the diffusion effect of cinder and soot)

5. Logo, icon and game derivative design

①Logo design

Originating from the commercial exposure effect, as the most repetitive trademark elements of the game, the logo and icon should meet relatively interesting design features, used to amplify the player’s positive acceptance of the product, and at the same time be easy to identify in a short time. The characteristic of this is convenient for short-term, multiple, and multi-occasion publicity applications.

The “Assassin’s Creed” series of logos are inspired by the bottom perspective of the eagle skull

“Tianyu” logo uses text + metal + totem elements

②icon design

As a special entrance icon for smartphone games, the icon production features are close to the logo requirements. The use of representative graphics or text expressions needs to be compared with the smartphone desktop contract icon to make the recognition clearer. (Ios and Android production specifications are slightly different. The company has a special icon plus corner label template. The unified canvas is 1024px 72ppi square without round corners.)

③Official website, brand-related publicity, surrounding stores, surrounding design, etc.

Each game should output a unified visual specification, and the key visual elements can be picked up and reused after the relevant content of the interface is determined.

(“A Chinese Journey to the West” Tmall peripheral homepage)

Six, multilingual production notes

Knocking on the blackboard: It is an inevitable situation for successful projects to enter the overseas market, and the localization of resources must be considered in the initial stage of the project.

1) System fonts-First of all, in the selection of system fonts, try to choose fonts that are versatile, can support multiple languages, and do not have strong regional styles.

2) Artistic characters-Try to control the production of artistic characters material when not necessary, which will become a localized workload in the future.

3) Resource standardization and sorting-Develop the habit of storing source files centrally after making artistic font resources, and classify them according to the same fonts to facilitate future production statistics.

4) Copyright-Before selecting localized fonts, you need to confirm with the business whether the font has copyright in the target country, and use a company that has purchased copyright or free commercial fonts.

5) Output specification-size naming is consistent with the original version.

Seven, self-verification

The designer needs to establish a verification model to check whether the design is easy to use and reasonable, so as to arrive at an ideal design.


Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *