Visual Design in Games
Visual Design in Games
Visual design in games is the deliberate arrangement of color, light, shape, space, and motion to create a coherent player experience. It is not merely the application of art to a functional framework. It is a design discipline in its own right, with its own principles, its own history, and its own relationship to the player's cognitive and emotional systems. The Wikipedia article on the visual arts defines visual art as art forms such as painting, drawing, printmaking, sculpture, ceramics, photography, video, filmmaking, design, crafts, and architecture, and notes that many artistic disciplines involve aspects of the visual arts as well as arts of other types Wikipedia: Visual Arts. In games, the visual arts are combined with interaction, time, and choice, producing a medium that is unique in its capacity to make the viewer into a participant.
The player does not look at a game. The player moves through it. The visual design must therefore account for movement, for change, and for the player's capacity to direct their own attention. This makes game visual design more complex than the visual design of a static image or a linear film. It must be consistent across an indefinite number of viewing angles, lighting conditions, and player states. It must remain coherent when the player is lost, when the player is stressed, and when the player is bored. The visual design is the ground against which all other design happens. If the ground is unstable, nothing built on it will stand.
Color theory and emotional palettes
Color is the most immediate emotional signal in visual design. The human visual system is attuned to color from birth, and color associations are formed early and persist throughout life. The field of color theory, as described in the Wikipedia article, is a historical body of knowledge describing the behavior of colors in mixing, contrast, harmony, and symbolism Wikipedia: Color Theory. Traditional color theory tends to be more subjective and have artistic applications, while color science tends to be more objective and have functional applications. In game design, both perspectives are necessary.
The history of color theory dates back to Aristotle's treatise On Colors and the ancient Indian Nāṭya Shāstra, which considered four colors as primary: black, blue, yellow, and red. The modern formalization of color theory began in the 18th century with Isaac Newton's theory of color in Opticks (1704), which established that white light is composed of a spectrum of colors and that color arises from the way objects reflect or absorb different wavelengths Wikipedia: Color Theory. The RYB (red-yellow-blue) color model became the foundation of 18th-century artistic theories, and the work of Johann Wolfgang von Goethe in Theory of Colours (1810) and Michel Eugène Chevreul in The Law of Simultaneous Color Contrast (1839) established the psychological dimensions of color interaction. These historical foundations are not academic curiosities. They are the basis of every color decision in a game.
The distinction between warm and cool colors is particularly relevant to game design. Warm colors—hues from red through yellow, including browns and tans—are said to advance or appear more active, while cool colors—hues from blue-green through blue-violet—tend to recede. In interior design and fashion, warm colors are said to arouse or stimulate, while cool colors calm and relax Wikipedia: Color Theory. In games, this distinction is used to create emotional zones. A safe area may be lit with warm tungsten light, while a dangerous area may be lit with cool fluorescent light. The player learns this language unconsciously and uses it to navigate emotional space.
Complementary colors—colors opposite one another on the color wheel—produce strong contrast and visual tension. In Newton's color wheel, colors exactly opposite one another cancel out each other's hue to produce an achromatic mixture. Examples include red and green, violet and yellow, and blue and orange Wikipedia: Color Theory. Game designers use complementary colors to create focal points. An enemy in a complementary color to the environment will be seen faster. An objective marker in a complementary color will draw the eye. The use of complementary colors is not merely decorative. It is a tool for directing player attention.
Color symbolism adds another layer. Colors carry significant cultural symbolism, and many theorists have linked particular connotative meanings to specific colors. However, connotative color associations tend to be culture-bound and may vary across contexts. Red, for example, can mean excitement, sensuality, good luck, or danger, depending on the cultural context Wikipedia: Color Theory. Game designers must be aware of the cultural backgrounds of their audiences. A color that signals safety in one culture may signal danger in another. This is not a reason to avoid color symbolism. It is a reason to use it deliberately, with an understanding of its range of meanings.
The practical application of color theory in games involves the creation of emotional palettes. An emotional palette is a restricted set of colors chosen to serve the game's theme. The restriction is not a limitation. It is a design tool. A game with a palette of five colors can be more visually coherent than a game with a palette of five hundred colors. The palette is derived from the reference board created during the theme-first workflow. It is tested against the three feeling sentences. If a color does not contribute to the feeling, it is removed. The result is a visual language that is recognizable and consistent.
Case studies in color design abound. The game Journey (2012) uses a restricted palette that shifts from warm reds and golds in the desert to cool blues and whites in the mountain. The shift is not arbitrary. It maps the emotional arc of the game: from wonder and exploration to isolation and transcendence. The colors are not just beautiful. They are narrative. The game Hades uses a saturated, high-contrast palette of reds, oranges, and purples to communicate the intensity of the underworld. The colors are warm and active, matching the game's fast-paced combat. The game Hollow Knight uses a muted palette of blues, grays, and blacks to communicate the melancholy of its ruined kingdom. The colors are cool and receding, matching the game's themes of loss and decay.
Composition, framing, and visual hierarchy
Composition is the organization of visual elements within a frame. In visual arts, composition is defined as the organization of an artwork, often used interchangeably with terms such as design, form, visual ordering, or formal structure Wikipedia: Composition (Visual Arts). The composition of a picture is different from its subject. Many subjects are portrayed in art using a great range of compositions. In games, the player controls the camera, which means the designer cannot control the composition in the same way a painter or a filmmaker can. However, the designer can influence composition through environment design, lighting, and player guidance.
The elements of design that contribute to composition include line, shape, color, texture, value, form, and space Wikipedia: Composition (Visual Arts). Lines are optical phenomena that direct the eye of the viewer. In games, lines can be literal—such as roads, railings, or architectural edges—or implied, such as sequences of light sources or enemy placements. The angle of a line influences the emotional response. Horizontal lines suggest calm, tranquility, and space. Vertical lines suggest height and grandeur. Diagonal lines suggest dynamism and tension. Curved lines suggest nature and softness. The game designer can use these associations to create emotional paths through the environment.
The rule of thirds is a composition guide that states that arranging important features on or near the horizontal and vertical lines that divide the image into thirds is visually pleasing. The objective is to avoid bisecting the image, placing subjects near the intersection of the dividing lines Wikipedia: Composition (Visual Arts). In games, the rule of thirds is used in the design of static compositions—such as title screens, loading screens, and cutscenes—but it also influences the placement of landmarks in the environment. A tower placed at the intersection of the rule of thirds in a landscape will be more visually satisfying than a tower placed in the center.
Visual hierarchy is the arrangement of elements to show their order of importance. In game UI, visual hierarchy is achieved through size, color, contrast, and position. The most important information should be the most visible. Health bars are typically placed at the center of the screen or near the character because they are critical. Objective markers are typically brighter and more saturated than background elements because they must be found quickly. The principles of visual hierarchy are derived from the broader field of graphic design and user interface design, where they are used to guide the user through information Wikipedia: User Interface Design.
The concept of negative space is also relevant. Negative space is the empty space around, above, and within objects. It can be positive or negative, open or closed, shallow or deep. In drawing or painting, space is not actually there, but the illusion of it is created Wikipedia: Composition (Visual Arts). In games, negative space is literal. It is the space between platforms, the distance between enemies, the void under a bridge. The use of negative space creates tension. Too much negative space in a platforming section creates fear of falling. Too little creates claustrophobia. The designer can modulate negative space to control the player's emotional state.
Geometry and symmetry contribute to the sense of order or chaos in a composition. Triangles are an aesthetically pleasing implied shape within an image. A triangular format creates a sense of stability and strength. In contrast, asymmetrical compositions can create tension and unease. The game Monument Valley uses impossible geometry and symmetry to create a sense of wonder and disorientation. The compositions are carefully balanced, but the balance is impossible in physical space. This contradiction is the source of the game's aesthetic pleasure.
Lighting and atmosphere
Lighting is the most powerful tool for creating atmosphere in a game. It is not merely a technical requirement for visibility. It is a narrative and emotional instrument. The quality of light—its color, direction, intensity, and source—tells the player about the world. Warm, directional sunlight suggests a natural, safe environment. Cold, diffuse fluorescent light suggests an artificial, controlled environment. Flickering light suggests instability. Absence of light suggests danger.
The history of lighting in visual media is rooted in the history of painting. The chiaroscuro technique, developed during the Renaissance, uses strong contrasts between light and dark to create volume and drama. Caravaggio and Rembrandt are famous for their use of chiaroscuro. In games, the same technique is used to create dramatic moments. A character emerging from darkness into light is a visual metaphor for revelation or salvation. A character moving from light into darkness is a visual metaphor for descent or danger.
Atmospheric perspective is another technique borrowed from painting. Objects that are farther away are less distinct, less saturated, and lighter in value than objects that are close. In games, atmospheric perspective is used to create a sense of scale and depth. It also serves a gameplay function: distant enemies are harder to see, which creates strategic uncertainty. The technique is used in open-world games to make the world feel vast and to encourage exploration. The player sees a distant mountain, rendered in pale blues and grays, and feels the desire to reach it.
Dynamic lighting—lighting that changes over time or in response to player actions—adds another dimension. A torch that flickers as the player moves through a cave creates a sense of vulnerability. A light that turns on when the player solves a puzzle creates a sense of achievement. The lighting system becomes part of the game's feedback loop. It tells the player when they are safe and when they are not. It tells them when they have succeeded and when they have failed. The lighting is not neutral. It is a judgment.
The source of light also carries meaning. Sunlight is natural, universal, and indifferent. Firelight is human, fragile, and warm. Electric light is modern, efficient, and cold. Bioluminescence is alien, mysterious, and beautiful. The choice of light source is a choice of emotional register. A game that uses only electric light is a game about the modern condition. A game that uses only firelight is a game about the premodern condition. A game that uses both in contrast is a game about the tension between them.
UI/UX design: diegetic and non-diegetic interfaces
User interface design in games is the discipline of presenting information to the player in a way that is readable, accessible, and thematically consistent. The Wikipedia article on user interface design notes that the goal is to make the user's interaction as simple and efficient as possible, in terms of accomplishing user goals Wikipedia: User Interface Design. In games, the user's goals are not only functional. They are emotional. The interface must therefore be efficient and atmospheric.
A key distinction in game UI design is between diegetic and non-diegetic interfaces. Diegetic UI elements exist within the game world. A map drawn on a piece of paper that the character holds is diegetic. A health bar floating above the character's head is non-diegetic. The distinction is not merely aesthetic. It is thematic. A game that seeks immersion will prefer diegetic UI because it does not break the fourth wall. A game that seeks clarity will prefer non-diegetic UI because it is easier to read. The choice between diegetic and non-diegetic is a choice about the relationship between the player and the world.
The game Dead Space is famous for its diegetic UI. The player's health is displayed on the back of their suit. The ammo count is displayed on the weapon. The map is displayed as a holographic projection in front of the character. The result is a world that feels more coherent because the interface is part of it. The player never leaves the world to check a menu. The tension is maintained because the information is delivered diegetically. This approach is cited in multiple analyses as a benchmark for ludonarrative consistency—the alignment of gameplay and narrative Wikipedia: Ludonarrative Dissonance.
Non-diegetic UI, when used well, can be equally powerful. The HUD (heads-up display) in a flight simulator is non-diegetic, but it is thematically appropriate because it mimics the instrumentation of a real aircraft. The HUD in a first-person shooter is non-diegetic, but it is often designed to feel military and utilitarian. The design of the HUD sends a message about the world. A clean, minimalist HUD suggests a world of precision and efficiency. A cluttered, grungy HUD suggests a world of chaos and improvisation.
Readability is the primary functional requirement of UI design. The player must be able to find information quickly. This is a matter of contrast, size, and position. The most critical information should be in the center of the player's attention. Health, ammo, and objective markers are typically placed in the center or the corners of the screen because those are the areas the player scans most frequently. The principles of visual hierarchy apply here: the most important elements should be the most prominent.
Accessibility is an extension of readability. Not all players see the same way. Color blindness affects approximately 8% of male players and 0.5% of female players. UI designs that rely solely on color to communicate information are inaccessible to a significant portion of the audience. The solution is to use multiple channels: color, shape, position, and animation. An enemy that is red is not enough. An enemy that is red and triangular and pulsing is better. The redundancy ensures that the information is received by the maximum number of players.
Visual consistency and art direction
Visual consistency is the degree to which the visual elements of a game share a common language. It is not uniformity. It is coherence. A game can have many different visual styles and still be consistent if those styles are governed by a common set of principles. The principles are derived from the theme. They are expressed in the art direction.
Art direction is the process of making decisions about the visual style of a game. It is not the same as art production. Art direction is about choosing. It is about saying yes to some things and no to others. The art director's job is to hold the visual language together across the entire production. This includes environments, characters, UI, effects, and animation. Every visual element must pass the art director's filter. If it does not fit the language, it is rejected or revised.
The concept of a visual language is borrowed from semiotics, the study of signs and symbols. In visual design, a language is a set of conventions that communicate meaning. In games, the visual language includes the shapes of the architecture, the proportions of the characters, the style of the UI, and the quality of the lighting. A game with a visual language of sharp angles and high contrast is communicating danger and modernity. A game with a visual language of soft curves and low contrast is communicating safety and nostalgia. The player learns this language without being taught it. They learn it through exposure, the same way they learn a spoken language.
The reference board created during the theme-first workflow is the art director's primary tool. It is the visual specification. It shows the team what the game should look like. It is not a collection of pretty pictures. It is a collection of correct pictures. A picture is correct if it shares the emotional register of the game. A picture of a beautiful sunset may be incorrect if the game's theme is oppressive. A picture of a dirty alley may be correct if the game's theme is survival. The board is used to train the team in the visual language. It is used to evaluate work. It is used to resolve disagreements. When two artists disagree about the direction of a piece, the board is the arbiter.
Style guides are the written expression of the visual language. They document the rules: which colors are in the palette, which fonts are approved, which proportions are standard, which textures are appropriate. The style guide is not a prison. It is a shared understanding. It allows the team to work in parallel without losing coherence. It is especially important for large teams and for live-service games, where new content is produced over months or years. Without a style guide, the visual language drifts. New assets are made in new styles. The coherence is lost.
Visual consistency also applies across sequels and franchises. A player who loved the first game expects the second game to feel like the same world. If the visual language changes too much, the player feels alienated. This is not a reason to avoid evolution. It is a reason to manage evolution. The visual language can change, but the change should be deliberate and communicated. A sudden change without explanation is a betrayal of the player's trust. A gradual change that is narratively justified is an evolution of the world.
Case studies in visual design
The following case studies illustrate the principles of visual design in practice. They are not exhaustive. They are representative of the ways in which visual design serves gameplay and theme.
Journey (2012). The visual design of Journey is minimal and iconic. The player character is a robed figure with no face, no arms, and no voice. The environment is a desert that shifts from golden dunes to snow-capped peaks. The color palette is restricted: warm reds and oranges for the desert, cool blues and whites for the mountains, and a single bright blue for the player's scarf. The scarf is the only saturated color in the early game, making the player the focal point of every frame. The visual design is not decorative. It is functional. The scarf indicates the player's energy level. The wind indicates the direction of travel. The architecture indicates the path forward. Every visual element is doing work. The game is often cited in academic literature as an example of ludonarrative consistency, where the act of play itself becomes the narrative Wikipedia: Ludonarrative Dissonance.
Hollow Knight. The visual design of Hollow Knight is hand-drawn and detailed. The world of Hallownest is rendered in muted blues, grays, and blacks, with occasional touches of warm gold. The palette communicates decay. The kingdom is old, and the player is exploring its ruins. The character design is small and fragile. The Knight is a tiny figure in a vast world, which communicates vulnerability. The enemies are large and often grotesque, which communicates danger. The visual contrast between the player and the world is a constant reminder of the game's theme: survival in a place that has already fallen. The hand-drawn style gives the world a tactile quality. It feels like paper and ink, which connects it to the tradition of illustrated fairy tales.
Monument Valley. The visual design of Monument Valley is architectural and impossible. The game uses isometric perspective and Escher-like geometry to create puzzles that are also paintings. The color palette is pastel and warm. The world feels safe and inviting, even when the geometry is disorienting. The visual design is the mechanic. The player interacts by rotating and sliding the architecture. The architecture is the interface. This is a rare example of a game where the visual design and the game design are identical. The art is not a layer on top of the game. It is the game.
Hades. The visual design of Hades is painterly and intense. The underworld is rendered in saturated reds, purples, and oranges. The character designs are exaggerated and dynamic. The UI is integrated into the world through diegetic elements such as the mirror of night and the contractor's list. The visual style is influenced by classical Greek art but filtered through a modern, comic-book sensibility. The result is a world that feels ancient and contemporary at the same time. The intensity of the color matches the intensity of the combat. The player is never allowed to rest visually, which matches the game's loop of endless escape attempts.
The Last of Us. The visual design of The Last of Us is photorealistic and cinematic. The world is overgrown with nature, which is rendered in lush greens and browns. The color palette is naturalistic, with a slight desaturation that suggests the passage of time. The lighting is dramatic, with strong shadows and directional sunlight. The visual design serves the theme of survival by making the world beautiful and dangerous at the same time. The player is drawn to the beauty of the overgrown city, but the beauty is a trap. The same vegetation that looks beautiful hides enemies. The same light that looks warm reveals the player's position. The visual design is a double message: the world is worth saving, and the world will kill you.
Accessibility and inclusive design
Visual design is not only for the ideal player. It is for all players. Accessibility in visual design means ensuring that the game can be experienced by players with a wide range of visual abilities. This includes players with color blindness, low vision, photosensitivity, and motion sickness.
Color blindness is the most common visual accessibility concern. The most common forms are deuteranopia (red-green), protanopia (red-green), and tritanopia (blue-yellow). Designers can address color blindness by using patterns, shapes, and labels in addition to color. The game Among Us faced criticism for its reliance on color to identify players, which made the game difficult for color-blind players. The developers added patterns and symbols to address this. The solution is not to avoid color. It is to avoid color as the sole channel of information.
Low vision encompasses a range of conditions from partial sight to blindness. For players with low vision, the size of text and UI elements is critical. Contrast is also important. Text should be high-contrast against its background. The game should support screen readers where possible. The game should avoid requiring the player to distinguish fine details. These accommodations benefit not only players with low vision but also players who are playing on small screens or in bright environments.
Photosensitivity is a condition in which flashing or strobing lights can trigger seizures or migraines. Games that use rapid flashing effects, such as muzzle flashes or explosion effects, can be dangerous for photosensitive players. The solution is to provide options to reduce or eliminate flashing effects. The game should also avoid patterns that create the illusion of motion, such as high-contrast stripes.
Motion sickness is a condition in which the visual perception of motion conflicts with the vestibular system's sense of motion. Games with rapid camera movement, narrow field of view, or first-person perspective can trigger motion sickness. The solution is to provide options for field of view adjustment, camera smoothing, and the choice of perspective. The game Portal is famous for causing motion sickness in some players due to its rapid perspective changes. The developers added comfort options in later updates.
Inclusive design is not a checklist. It is a mindset. It is the recognition that the player is a human being with a body that has limitations, and that the game should respect those limitations. The player who needs a larger font is not a lesser player. The player who needs colorblind mode is not a lesser player. The player who needs to turn off flashing lights is not a lesser player. The visual design that accommodates these needs is not compromised. It is improved. It is improved because it is more robust, more flexible, and more humane.
The emotional impact of visual design
Visual design is not seen. It is felt. The player does not look at a color and think "that is a warm color." The player feels the color as a sense of safety or danger. The player does not look at a composition and think "that follows the rule of thirds." The player feels the composition as a sense of balance or unease. The player does not look at lighting and think "that is chiaroscuro." The player feels the lighting as a sense of drama or calm. The visual design operates below the level of conscious thought. It is pre-cognitive.
This is why visual design is so powerful. It bypasses the player's analytical mind and speaks directly to their emotional system. A player can disagree with a story. A player can dislike a mechanic. But a player cannot disagree with a feeling. The feeling is already there. The visual design creates the feeling before the player has a chance to evaluate it. The first five seconds of a game establish the emotional baseline. Everything that follows is measured against that baseline.
The emotional impact of visual design is also cumulative. A single warm color is a signal. A hundred warm colors in a hundred rooms is a world. The player learns to trust the world because the world is consistent. They learn to feel safe because the world has always been safe. They learn to feel danger because the world has always signaled danger. The visual design is a contract. It promises the player that the world will behave in a certain way. If the world keeps its promise, the player trusts it. If the world breaks its promise, the player is betrayed. The betrayal is not a mechanical failure. It is an emotional failure. It is the failure of the game to maintain its own emotional logic.
The relationship between visual design and player emotion is supported by research in environmental psychology. Studies have shown that the physical environment affects mood, stress, and cognitive performance. These effects are mediated by visual properties such as color, light, and spatial layout. The same principles apply to virtual environments. A virtual environment that is dark, narrow, and cluttered will produce the same stress response as a physical environment with those properties. A virtual environment that is bright, open, and ordered will produce the same relaxation response. The visual design is not a metaphor for an environment. It is an environment. The player's brain treats it as one.
The technical foundation of visual design
Visual design is not independent of technology. The visual designer must understand the technical constraints and possibilities of the platform. A game designed for a mobile phone has different visual constraints than a game designed for a high-end PC. The screen size, resolution, and color gamut affect the visual design. The rendering engine affects the lighting. The frame rate affects the motion. The storage capacity affects the texture resolution. The visual designer who ignores these constraints is not a designer. They are a fantasist.
The rendering pipeline is the technical process by which the game creates an image. It includes geometry processing, lighting calculations, shading, and post-processing. Each step affects the visual output. The lighting model determines how light interacts with surfaces. A physically based rendering model creates more realistic lighting but requires more computational resources. A stylized rendering model creates less realistic lighting but allows for more artistic control. The choice of rendering model is a visual design decision. It is not a technical decision made by engineers. It is a creative decision made by the art director and the technical art director together.
Post-processing effects are applied after the main rendering is complete. They include color grading, bloom, depth of field, motion blur, and chromatic aberration. These effects are powerful tools for creating atmosphere. Color grading is the process of adjusting the overall color balance of the image. It is used to create a unified palette. A film that has been shot in many different locations can be unified through color grading. A game that has been built by many different artists can be unified through color grading. The color grade is the final layer of the visual design. It is the filter through which the entire world is seen.
Performance is also a visual design concern. A game that runs at 30 frames per second has a different visual feel than a game that runs at 60 frames per second. The lower frame rate creates more motion blur and less responsiveness. The higher frame rate creates more clarity and more responsiveness. The choice of target frame rate is a visual design decision. It affects how the player perceives motion and how they feel about the game's responsiveness. A game that targets 60 frames per second is making a statement about fluidity and precision. A game that targets 30 frames per second is making a statement about cinematic weight and deliberation.
Visual design and player retention
The visual design of a game is a primary determinant of player retention. The player who is confused by the visual design will leave. The player who is bored by the visual design will leave. The player who is overwhelmed by the visual design will leave. Retention is not a metric of engagement. It is a metric of trust. The player stays because they trust the game to maintain its visual promise. The promise is the theme made visible. The first session establishes the promise. Every subsequent session tests it. The visual design that changes mid-game is a visual design that breaks the promise. The player who feels the break will not return.
The onboarding sequence is the visual design's first test. The player must learn the visual language of the game before they can play it. The language includes the color coding of enemies, the shape of interactive objects, the style of the UI, and the quality of the lighting. The onboarding must teach this language without explicit instruction. The player must learn it through play. The visual design that requires a tutorial to explain its color system is a visual design that has failed. The color system should be self-evident. The red enemy is dangerous. The green door is open. The blue light is safe. These are conventions. The conventions are not limitations. They are the vocabulary of the visual language. The player who knows the vocabulary can read the world.
The endgame is the visual design's final test. The player who has spent fifty hours in the world has internalized its visual language. They know what to expect. The endgame can reward this knowledge by using the language in new ways. A familiar color can appear in an unfamiliar context. A safe shape can become dangerous. The subversion is a form of visual narrative. It tells the player that the world has depth. The depth is not in the lore. It is in the visual design. The player who sees the subversion feels a sense of mastery. They have learned the language well enough to notice its exceptions. The exceptions are the signs of a living world.
Typography, text, and language in visual design
Typography is the visual design of written language. In games, typography is not only a matter of readability. It is a matter of atmosphere. The choice of typeface sends a signal about the world. A serif typeface suggests tradition, authority, and print. A sans-serif typeface suggests modernity, neutrality, and screen. A monospace typeface suggests code, machinery, and constraint. A handwritten typeface suggests intimacy, imperfection, and humanity. The player reads these signals unconsciously. The font is part of the world.
The history of typography is the history of the book, the poster, and the screen. The Wikipedia article on graphic design notes that typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed Wikipedia: Graphic Design. In games, the arrangement of type is also the arrangement of feeling. The main menu of a game is the player's first encounter with the visual language. A menu in a gothic serif font tells the player that the world is old and formal. A menu in a clean sans-serif font tells the player that the world is new and efficient. The menu is not a utility. It is an introduction.
Text rendering in games is a technical challenge that affects visual design. Anti-aliasing, hinting, and subpixel rendering determine the crispness of text. A game that renders text poorly is a game that looks unprofessional, regardless of the quality of its 3D graphics. The player spends more time reading text than they spend admiring the environment. The text is the interface. The interface is the world. The world must be consistent. A photorealistic game with blurry text is a game that has not finished its visual design. The text is the final polish. It is the detail that separates the professional from the amateur.
Diegetic text is text that exists within the game world. A note pinned to a wall is diegetic. A dialogue box is non-diegetic. The distinction is critical for thematic coherence. A game that uses diegetic text for its lore is a game that invites the player to discover the world. The player is not told the lore. They find it. The finding is active. The player is a detective. The non-diegetic text is a lecture. It is information delivered from outside the world. Both forms are valid. The choice between them is a choice about the player's relationship to knowledge. A game about mystery will prefer diegetic text. A game about instruction will prefer non-diegetic text.
Localization is also a visual design concern. A game that is translated into ten languages must ensure that the typography works for all of them. Chinese characters require more space than Latin characters. Arabic text is read from right to left. Japanese text can be written vertically. The visual design must accommodate these differences without breaking the visual language. The font that looks elegant in English may look cluttered in Chinese. The layout that works for German may not work for French. The visual design that is not tested in all supported languages is a visual design that is incomplete. The player who reads the game in their second language because the first language is not supported is a player who is being excluded by the visual design.
Animation, motion, and temporal design
Animation is the visual design of movement. In games, animation is not only a matter of making characters look alive. It is a matter of making the world feel alive. The movement of a character communicates their personality. A heavy, deliberate walk suggests strength and caution. A light, bouncy walk suggests agility and playfulness. A shuffling walk suggests exhaustion and age. The player reads these movements unconsciously. The animation is a form of visual storytelling. It tells the player who the character is before the character speaks.
The principles of animation in games are derived from the principles of animation in film, which were codified by Disney animators in the 1930s. The principles include squash and stretch, anticipation, staging, follow-through, and overlapping action. These principles create the illusion of weight and momentum. In games, the principles are complicated by interactivity. The player controls the character. The animation must respond to the player's input in real time. The response must feel immediate and natural. A delay between input and animation breaks the illusion of control. The player feels that they are not moving the character. They are suggesting movement to the character.
The concept of game feel is related to animation. Game feel is the tactile quality of interaction. It is the feeling of pressing a button and seeing a response. The response is visual, auditory, and haptic. The animation is the visual component of game feel. A jump that feels good is a jump that has a strong anticipation, a fast ascent, a slow descent, and a satisfying landing. The animation of the jump is not a cosmetic detail. It is the feeling of the jump. The player does not feel the physics. They feel the animation. The animation is the interface between the physics and the player.
Motion design in UI is also critical. The movement of UI elements communicates information. A menu that slides in quickly feels urgent. A menu that fades in slowly feels calm. A health bar that shakes when the player is hit feels painful. A health bar that glows when the player is healed feels restorative. The motion is not decoration. It is feedback. It is the visual language of the interface. The principles of motion design are derived from the field of motion graphics and from research in human perception. The human eye is drawn to movement. The designer can use movement to direct attention. The designer can also use the absence of movement to create stillness. The stillness is as designed as the movement.
The frame rate is the temporal resolution of the visual design. A game that runs at 60 frames per second has smoother motion than a game that runs at 30 frames per second. The smoothness is not only a technical quality. It is an emotional quality. A high frame rate creates a sense of fluidity and precision. A low frame rate creates a sense of weight and deliberation. The choice of frame rate is a visual design decision. It is not a technical decision. It is a choice about the feeling of motion. Some games deliberately target a lower frame rate for cinematic effect. The stutter of the image is the stutter of the world. The world is not smooth. The world is broken. The frame rate is the theme.
Further reading
- Block, Bruce. The Visual Story: Creating the Visual Structure of Film, TV and Digital Media. Focal Press, 2007.
- Lidwell, William, et al. Universal Principles of Design. Rockport Publishers, 2003.
- Schell, Jesse. The Art of Game Design: A Book of Lenses. CRC Press, 2008.
- Wikipedia contributors. "Color Theory." Wikipedia, The Free Encyclopedia. https://en.wikipedia.org/wiki/Color_theory
- Wikipedia contributors. "Composition (Visual Arts)." Wikipedia, The Free Encyclopedia. https://en.wikipedia.org/wiki/Composition_(visual_arts)
- Wikipedia contributors. "Visual Arts." Wikipedia, The Free Encyclopedia. https://en.wikipedia.org/wiki/Visual_arts
- Wikipedia contributors. "User Interface Design." Wikipedia, The Free Encyclopedia. https://en.wikipedia.org/wiki/User_interface_design
- Wikipedia contributors. "Art Direction." Wikipedia, The Free Encyclopedia. https://en.wikipedia.org/wiki/Art_direction
- Wikipedia contributors. "Ludonarrative Dissonance." Wikipedia, The Free Encyclopedia. https://en.wikipedia.org/wiki/Ludonarrative_dissonance
- Wikipedia contributors. "Game Design." Wikipedia, The Free Encyclopedia. https://en.wikipedia.org/wiki/Game_design
- Wikipedia contributors. "Color Blindness." Wikipedia, The Free Encyclopedia. https://en.wikipedia.org/wiki/Color_blindness
- Wikipedia contributors. "Graphic Design." Wikipedia, The Free Encyclopedia. https://en.wikipedia.org/wiki/Graphic_design
- Makedonski, Brett. "Ludonarrative Dissonance: The Roadblock to Realism." Destructoid, 2012. https://www.destructoid.com/ludonarrative-dissonance-the-roadblock-to-realism-235197.phtml
- Farca, Gerald. Playing Dystopia: Nightmarish Worlds in Video Games and the Player's Aesthetic Response. Transcript Verlag, 2018.
- Google Inc. "Material Design." https://m3.material.io/
- Norman, Donald. The Design of Everyday Things. Basic Books, 2013.
- Tufte, Edward. The Visual Display of Quantitative Information. Graphics Press, 2001.
- Naughty Dog. The Art of The Last of Us. Dark Horse Books, 2013.
- Supergiant Games. The Art of Hades. Dark Horse Books, 2021.
- Team Cherry. Hollow Knight: Wanderer's Journal. Fangamer, 2019.
- thatgamecompany. The Art of Journey. Santa Monica Studio, 2012.
- ustwo games. Monument Valley: Works of Game. ustwo games, 2015.
- Game Accessibility Guidelines. https://gameaccessibilityguidelines.com/
- AbleGamers Charity. https://ablegamers.org/
- Microsoft. "Inclusive Design." https://www.microsoft.com/design/inclusive/