User Experience (UX) Factors and the Five Key Principles of Interaction Design

September 26, 2026 Aven BrisailLeave a comment

User experience (UX) is everything a person feels and thinks while using a product, from their first impression to how they remember it afterwards. The factors that influence user experience are the qualities that make that experience good or bad. The principles of interaction design are practical rules designers follow to create those qualities on screen.

In What Is Interaction Design (IxD)? we looked at the ideas behind interaction design. This post turns those ideas into two checklists you can use on any game or app: the six UX factors and the five key principles.

The UX honeycomb: factors that influence user experience

The information architect Peter Morville drew the factors as a honeycomb. At its centre is valuable: a product must deliver value to its users and to its makers. Around it are the qualities below.

Factor	Question to ask	Game example
Useful	Does it meet a real need or give real enjoyment?	A tutorial that actually helps players, not one they skip.
Usable	Can people use it easily and efficiently?	Controls that respond instantly and menus that take few clicks.
Desirable	Is it attractive and does it create positive emotions?	Appealing art, music and satisfying animations when you win.
Findable	Can people find what they need?	Settings, save files and the map are easy to locate.
Accessible	Can people with different abilities use it?	Subtitles, colour-blind modes, remappable buttons, adjustable text size.
Credible	Do people trust it?	No hidden costs, clear privacy settings, no misleading adverts.

The five key principles of interaction design

1. Consistent

Similar things should look and behave the same way everywhere. If “A” means confirm on one screen, it should not mean cancel on another. Consistency lets players transfer what they learned, and it follows conventions from other games (for example, the Escape key opens a menu on PC).

2. Perceivable

Users must be able to notice what they can do and what is happening. Important buttons should stand out, and important information (low health, a new objective) must be seen or heard. Perceivable design uses more than one sense, such as a sound plus a flashing icon, so that information is not lost.

3. Learnable

A good interface is quick to learn and hard to forget. Teach one thing at a time, use familiar icons and labels, and let players practise safely. Learnable interfaces reveal advanced options only when players need them.

4. Predictable

Users should be able to guess what will happen before they act. A button labelled “Quit to menu” should not delete progress without warning. Predictable design uses clear labels, previews and confirmation messages for actions that cannot be undone.

5. Feedback

Every action needs a response, and it should be immediate. Buttons change colour when pressed, a coin makes a sound when collected, a loading bar shows progress. Without feedback, users press again and again, or give up because they think nothing happened.

This short video from the Interaction Design Foundation summarises the five principles with everyday examples:

How the factors and principles work together

The six UX factors describe the result you want; the five principles are the tools you use to get there. For example, a game becomes more usable when its controls are consistent and give instant feedback, and more findable when menus are perceivable and predictable. When a playtester says “this feels clunky”, the checklists help you turn that vague feeling into a specific fix.

Remember that UX is about real people in real situations. A mobile game might be played on a noisy bus with one thumb and the sound off, so information that is only given by sound breaks the perceivable principle for that player. Designers therefore build personas (short descriptions of typical players) and test in realistic conditions. You will use these ideas again when you wireframe a game interface in the next lesson.

Example

A student tested a Scratch quiz game with five classmates and used the two checklists to find problems:

Problem observed	Factor or principle broken	Fix
Players did not know whether their answer was right.	Feedback	Add a “ding” sound and a green tick, or a red cross with the correct answer.
The “Next” button moved to a different corner on each screen.	Consistent	Keep navigation buttons in the same place.
One player could not tell the red and green answer buttons apart.	Accessible, Perceivable	Add icons and text labels, not just colours.
Players could not find how to restart.	Findable	Add a restart button to the results screen.
Clicking “Home” lost the score without warning.	Predictable	Ask “Are you sure? Your score will be lost.”

Exercise

Copy the UX honeycomb into your notebook and add one example from your favourite game for each factor.
Evaluate a game menu or app screen against the five principles. Give each a score from 1 to 5 and explain your lowest score.
Suggest three accessibility features a mobile puzzle game should include, and say which players each one helps.
Design the feedback for collecting a coin: describe the sound, the animation and the change in the score display.

Next: How to Wireframe a Game User Interface: Best Practices for Designing Interactions

Syllabus link: This post is relevant to the CAPE® Animation and Game Design Syllabus, Unit 2: Interactive Design and Game Development, Module 1: Introduction to Interactive Design – Specific Objective 5 (“outline the factors that influence user experience”); Specific Objective 6 (“identify the five key/main principles of Interactive Design”).

Attributions to media used in this post:

UX Honeycomb.png – Peter Morville; Andrew Lehti – CC0 (via Wikimedia Commons)

InclusiveGameLab Person-Using-Adaptive-Controller 1 CC-BY-SA.jpg – InclusiveGameLab – CC BY-SA 4.0 (via Wikimedia Commons)

What Is Interaction Design (IxD)? Goal-Driven Design, Affordances, Usability and Learnability

September 26, 2026 Aven BrisailLeave a comment

Interaction design, also called interactive design or IxD, is the practice of designing how people and digital products communicate with each other. It focuses on behaviour: what a person can do, how the product responds, and whether the person can reach their goal easily and pleasantly. In a game, interaction design covers everything from pressing “Start” to jumping over a gap and reading the reward screen.

Graphic design asks “how does it look?” Interaction design asks “what happens when I use it?” Both matter, but a beautiful game that confuses players has an interaction design problem.

Where interaction design fits

User interface (UI) design – the visible controls: buttons, menus, icons, health bars.
User experience (UX) design – the whole experience, including how the player feels before, during and after playing (covered in the next post).
Interaction design (IxD) – the conversation between the two: inputs, responses, timing and flow.

Interaction designers think in five dimensions: words (labels and instructions), visual representations (icons and images), physical objects or space (a controller, a phone, a VR room), time (animation, sound and how long things take) and behaviour (how the product reacts).

The concepts that drive interaction design

1. Goal-driven design

Goal-driven design starts by asking what the user is trying to achieve, then designs the shortest, clearest path to that goal. A player’s goals might be “start a new game quickly”, “find my saved progress” or “change the controls”. Designers often write user stories such as: “As a new player, I want to start playing within 30 seconds so that I do not get bored.” Every screen should help a real goal, not just show off features.

2. Interface as magic

The best interface is one the user hardly notices. Interface as magic means the product seems to understand what you want, so the interface “disappears” and you focus on the task or the fun. Examples: a game that pauses automatically when a controller disconnects, or a phone game that remembers where you stopped. Good designers remove steps instead of adding instructions.

3. Usability

Usability is how easily and efficiently people can use something. It is often measured by five qualities: it is learnable, efficient (fast once learned), memorable (easy to return to), low in errors (and easy to recover from them) and satisfying. You test usability by watching real people use your design, not by asking whether they like it.

4. Affordances

An affordance is a property of an object that suggests how it can be used. A button looks pressable, a handle looks pullable, a ledge with a different colour in a game looks climbable. The designer Don Norman also uses the word signifier for the visible clue (an arrow, a glow or a label) that tells people where the action is. When affordances are missing or misleading, people push doors that should be pulled – and players jump at walls that cannot be climbed.

Rectangular grey game controller with a black cross-shaped direction pad and two red round buttons — Figure 1 – The Nintendo Entertainment System controller. The cross-shaped D-pad affords pressing in four directions, and the two round buttons afford pressing with a thumb – almost no instructions were needed. Image: Evan-Amos, Public domain, via Wikimedia Commons.

5. Learnability

Learnability is how quickly a new user can become good at using a product. Games are experts at this: the first level usually teaches one action at a time in a safe space, then combines them. Designers improve learnability by following familiar conventions (for example, a gear icon for settings), revealing features gradually and giving practice before a test.

Figure 2 – The main menu of the free game SuperTuxKart. Clear, colourful icon buttons afford clicking, and the most common goal (starting a race) comes first in the row. Image: TrainAndBus64, CC BY-SA 4.0, via Wikimedia Commons.

Watch this Extra Credits video to see how games use affordances to teach players without words:

Example

Here is how the five concepts apply to the pause menu of a simple platform game:

Concept	Design decision
Goal-driven design	Players usually pause to resume, restart or quit, so those three options come first.
Interface as magic	The game pauses automatically if the phone receives a call or the app is minimised.
Usability	Buttons are large enough to tap with a thumb; the choice highlighted by default is “Resume”.
Affordances	Buttons have a raised look and change colour when selected, so they clearly look pressable.
Learnability	Icons use familiar symbols (a triangle for play, a circular arrow for restart) with text labels.

Exercise

In your own words, define interaction design and explain how it differs from graphic design.
Find one object at home or school with a good affordance and one with a confusing affordance. Sketch both and explain the difference.
Choose a game or app you use often. Write three user stories for it in the form “As a …, I want … so that …”.
Play the first five minutes of a game. Note every new action it teaches and how it teaches it (text, level design, animation or sound). Rate its learnability out of 5.

Next: User Experience (UX) Factors and the Five Key Principles of Interaction Design

Syllabus link: This post is relevant to the CAPE® Animation and Game Design Syllabus, Unit 2: Interactive Design and Game Development, Module 1: Introduction to Interactive Design – Specific Objective 3 (“define Interactive Design”); Specific Objective 4 (“discuss the concepts that drive Interactive Design”).

Attributions to media used in this post:

Nintendo-Entertainment-System-NES-Controller-FL.jpg – Evan-Amos – Public domain (via Wikimedia Commons)

Menu SuperTuxKart in English.png – TrainAndBus64 – CC BY-SA 4.0 (via Wikimedia Commons)

How Animation and Video Games Evolved – and a Guide to the Main Game Genres

September 26, 2026 Aven BrisailLeave a comment

Interactive media are products that respond to what a person does: you press, tap, speak or move, and the screen answers. Video games are the best-known kind of interactive media, and animation is the art of making images appear to move. The evolution of animation and game design is really the story of how pictures learned to respond to people. A game genre is a category of games that share a similar kind of play, such as racing, puzzle-solving or strategy.

We already met the big dates in History of Animation and Video Games – From Flip Books to Virtual Reality and the basic genres in Types of Video Games: Game Genres, Game Goals and Game Platforms. This post goes one level deeper: it follows how interaction changed over time, looks at where animation and games are used today, and shows how each genre shapes the design of a game’s controls and interface.

How interaction changed: a short timeline

Era	What changed	Why it matters to designers
1950s–1960s	Tennis for Two (1958) ran on an oscilloscope; Spacewar! (1962) ran on university computers.	The first games proved that a screen could react instantly to a player’s hand.
1970s	The Magnavox Odyssey (1972), the first home console, and the arcade hit Pong (1972).	Simple rules and one-knob controls made games easy to learn in seconds.
1980s	The arcade golden age and home consoles such as the Nintendo Entertainment System; the D-pad controller became standard.	Designers learned to teach players through level design instead of long instructions.
1990s	3D graphics, CD-ROMs and analogue sticks; Toy Story (1995) became the first fully computer-animated feature film.	Cameras, 3D movement and cut-scenes became part of game design; animation went digital.
2000s	Online play, motion controls (Nintendo Wii, 2006) and smartphones (app stores from 2008).	Touch, tilt and body movement joined buttons as input; games reached people who had never owned a console.
2010s–today	VR headsets, AR games such as Pokémon GO (2016), free game engines, cloud gaming and AI-assisted tools.	Small teams and students can now make and publish games; accessibility and good UX are expected.

The white and brown Magnavox Odyssey console with a controller attached by a cable — Figure 1 – The Magnavox Odyssey (1972), the first home video game console. Players placed plastic overlays on the TV screen and used dial controllers. Image: Evan-Amos, Public domain, via Wikimedia Commons.

Animation’s own evolution

Animation moved from hand-drawn cels (drawings on clear plastic sheets) to digital ink-and-paint in the late 1980s, then to full computer-generated imagery (CGI) in the 1990s. Today animation is increasingly real-time: the same game engines used for games (such as Unity and Unreal Engine) render animated films, TV shows and virtual film sets as the camera moves. In games, animation is not a fixed film; it is a library of short clips (walk, jump, idle) that the game blends together depending on what the player does.

Present uses of animation and game design

Entertainment – films, series, console, PC and mobile games, and e-sports.
Education – serious games and animated explainers used in schools (for example Scratch projects, maths games and science simulations).
Health and fitness – exergames and apps that reward movement, and games used in therapy.
Training and simulation – flight, driving and medical simulators.
Business and marketing – animated adverts, product demos and gamification (points and badges in apps).
Interfaces – small animations in apps and websites that show a button was pressed or that something is loading.
Architecture and heritage – 3D walk-throughs of buildings and virtual museum tours.

The main game genres and what they demand from the design

A genre is defined by what the player mostly does. That core activity decides which controls, camera and on-screen information the game needs.

Genre	Core activity	Design and interface needs	Example
Arcade	Fast, repeated challenges for a high score	Instant start, very simple controls, big score display	Pac-Man
Action	Quick reactions: running, jumping, dodging	Responsive controls, clear health and danger signals	Super Mario Bros.
Adventure	Exploring and solving story-based problems	Inventory, maps, dialogue boxes	The Legend of Zelda
Puzzle	Logic, patterns and problem-solving	Clean screen, clear rules, undo or hint buttons	Tetris
Role-playing game (RPG)	Growing a character through a story	Menus for stats, skills, items and quests	Pokémon
Strategy	Planning, managing resources, out-thinking opponents	Mini-map, resource counters, many selectable units	0 A.D., Civilization
Simulator	Imitating a real activity or system	Realistic controls and detailed feedback	Microsoft Flight Simulator, The Sims
Board	Digital versions of table games	Turn indicators, clear pieces, rules help	Chess, Ludo, Monopoly apps
Sports	Playing or managing a real sport	Team and score overlays, replays	EA Sports FC, Rocket League

Many modern games are hybrids: an action-adventure, a puzzle-platformer or a sports game with RPG levelling. The video below argues that we should define genres by the experience they create (the “aesthetics of play”) rather than only by the camera or the controls.

Example

Imagine the same idea, “help a sea turtle reach the ocean”, designed for three genres:

Arcade: tap left and right to dodge crabs and seabirds; the score counts how far you get. Controls are learned in five seconds.
Puzzle: move rocks and driftwood on a grid to open a safe path before the tide turns. The interface needs an undo button and a move counter.
Simulator: manage a turtle nesting beach for a season, balancing tourists, lights and clean-ups. The interface needs charts, a calendar and a map.

The story is the same, but the genre changes the controls, the camera, the pace and the information on screen. That is why genre is one of the first decisions an interaction designer makes.

Exercise

Pick one decade from the timeline. Research one game or animated film from that decade and explain how people interacted with it (or how it was made).
Choose three games you know. For each one, name its genre, its core activity and two things on its screen that exist because of that genre.
List three places outside entertainment where you have seen animation or game design used this week (for example an app, an advert or a school website).
Take the sea turtle idea (or your own idea) and describe it as a strategy game and as a sports game.

Next: What Is Interaction Design (IxD)? Goal-Driven Design, Affordances, Usability and Learnability

Syllabus link: This post is relevant to the CAPE® Animation and Game Design Syllabus, Unit 2: Interactive Design and Game Development, Module 1: Introduction to Interactive Design – Specific Objective 1 (“outline the history and present use of animation and game design and development”); Specific Objective 2 (“identify the different genres of game design”).

Attributions to media used in this post:

Magnavox-Odyssey-Console-Set.jpg – Evan-Amos – Public domain (via Wikimedia Commons)

0 A.D. game screenshot Discovery.jpg – Wildfire Games – CC BY-SA 3.0 (via Wikimedia Commons)

Minetest screenshot.png – Perttu “celeron55” Ahola, Vanessa Ezekowitz et al. (Minetest/Luanti) – CC BY-SA 3.0 (via Wikimedia Commons)

Story Arcs Explained: Five-Point, Eight-Point and Three-Act Structures for Games and Animation

September 26, 2026 Aven BrisailLeave a comment

A story arc is the path a story follows from its beginning, through rising tension, to its end. A narrative is the story as it is told to the audience, and storytelling principles are the techniques that keep people interested, such as conflict, cause and effect, and change. Writers use a few well-known story structures as blueprints for their arcs.

In Story Development and Scriptwriting we met the basic “plot mountain”. This post compares three structures in practice, the five-point arc, the eight-point arc and the three-act structure, and shows how to use them to write a narrative for both an animation and a game.

The five-point story arc

The five-point arc is based on the pyramid the German writer Gustav Freytag used in 1863 to describe dramatic plays. Using the folk tale Jack and the Beanstalk:

Exposition – Jack and his mother are poor and must sell their cow.
Rising action – Jack trades the cow for magic beans, a giant beanstalk grows, and he climbs into the giant’s castle.
Climax – the giant chases Jack down the beanstalk.
Falling action – Jack chops down the beanstalk and the giant can no longer follow him.
Resolution – Jack and his mother live comfortably with the treasure he brought back.

The eight-point story arc

The eight-point arc, described by the author Nigel Watts, breaks the story into smaller steps. It is especially useful for planning scenes, episodes and levels.

Point	What happens	Jack and the Beanstalk
1. Stasis	Everyday life before the story starts.	Jack and his mother are poor.
2. Trigger	Something beyond the hero’s control starts the story.	They must sell the cow; Jack swaps it for beans.
3. Quest	The hero sets out to achieve a goal.	Jack climbs the beanstalk to find a fortune.
4. Surprise	Unexpected events and obstacles.	A giant lives there and can smell him.
5. Critical choice	The hero makes a difficult decision that shows who they are.	Jack chooses to go back up for more treasure.
6. Climax	The highest point of tension.	The giant chases Jack down the beanstalk.
7. Reversal	The result of the choice; the hero’s situation changes.	Jack chops down the beanstalk; the danger is over.
8. Resolution	A new everyday life.	Jack and his mother are safe and no longer poor.

The three-act structure

Most films, and many games, use three acts:

Act 1: Setup (about the first quarter) – introduce the hero, the world and the inciting incident. It ends at plot point 1, when the hero commits to the goal.
Act 2: Confrontation (about half) – obstacles get harder. A midpoint twist raises the stakes. It ends at plot point 2, often the lowest moment.
Act 3: Resolution (the last quarter) – the climax, where the conflict is decided, and a short ending.

How the three structures fit together

Three-act	Five-point	Eight-point
Act 1: Setup	Exposition	Stasis, Trigger
Act 2: Confrontation	Rising action	Quest, Surprise, Critical choice
Act 3: Resolution	Climax, Falling action, Resolution	Climax, Reversal, Resolution

Storytelling principles that make arcs work

Cause and effect – link events with “but” and “therefore”, not “and then”. Each event should cause the next.
Stakes – make it clear what the hero will lose if they fail.
Change – the hero, or their world, should be different at the end.
Set-up and pay-off – if something important happens in Act 3, plant a hint of it in Act 1.
Pacing – alternate tense moments with quieter ones so the audience can breathe.

Writing a narrative for an animation and for a game

An animation narrative is linear: the audience watches the same events, in the same order and at the same speed, every time. A game narrative must share control with the player, so writers choose how much freedom to give:

Linear – one main path through levels, with the story told between them.
Branching – player choices lead to different scenes or endings. The eight-point “critical choice” becomes a real choice.
Open or emergent – the player explores freely and discovers the story through places, objects and characters (environmental storytelling).

A simple way to map a game onto three acts is: Act 1 = the tutorial levels, Act 2 = the main levels with a midpoint twist or boss, Act 3 = the final level and ending. See What Is a Level in Game Design? for planning those levels.

Example

Idea: Nia, a young steelpan player, discovers that the tenor pan she needs for the Panorama competition has gone missing from the panyard.

Animation narrative (three acts): Act 1 – Nia practises every evening; two days before the competition her pan vanishes (inciting incident) and she promises the band she will find it (plot point 1). Act 2 – she follows clues around the neighbourhood, but each lead fails; at the midpoint she learns her rival borrowed it to secretly repair a dent; her anger peaks when the rival will not return it in time (plot point 2). Act 3 – on competition night Nia chooses to share the stage and a borrowed pan with her rival, and together they help the band play its best performance ever.

Game narrative: Level 1 (tutorial) teaches rhythm-tapping in the panyard. Levels 2–3 are search levels in the neighbourhood, where finding clues unlocks new songs. After the midpoint reveal, the player makes a critical choice: confront the rival or team up. Each choice leads to a different final level and one of two endings.

Watch the video below for a clear walkthrough of the eight-point story arc:

Exercise

Choose a well-known story (a fairy tale, folk tale or film) and map it onto the five-point arc and the eight-point arc.
In a group, take a culturally relevant scenario, such as a lost Carnival costume, a village festival or a hurricane, and plan its story arc on a large sheet of paper.
Write a three-act narrative of about 300 words for a short animation based on your scenario. Label the inciting incident, midpoint and climax.
Rewrite the same story as a game narrative: plan three to five levels, one critical choice and two possible endings.
Start a story journal. Each week, note a story you watched, read or played and identify its arc.

Next: Storyboarding with Camera Shots and Angles (Plus a Camera Angle Montage Exercise)

Syllabus link: This post is relevant to the CAPE® Animation and Game Design Syllabus, Unit 1: Fundamentals of Animation and Game Design, Module 3: Story and Character Development – Specific Objective 2 (“write a narrative for a game and an animation based on story arcs and storytelling principles”).

Attributions to media used in this post:

Freytag Pyramid.png – Kubrapika – CC BY-SA 4.0 (via Wikimedia Commons)

Three-act structure.svg – Puikstekend – CC BY-SA 4.0 (via Wikimedia Commons)

Tension of three act structure.png – UfofVincent – CC BY-SA 4.0 (via Wikimedia Commons)

The Production Bible for Game Design and Animation (With a Reusable Template)

September 26, 2026 Aven BrisailLeave a comment

A production bible is the master reference document for an animation or game. It gathers everything about the project, including the story, characters, world, art style and rules, in one place so the whole team makes consistent decisions. In television animation it is often called a series bible or show bible; a shorter version used to sell an idea is a pitch bible. In games, the same job is done by the game design document (GDD), sometimes called a game bible.

Why a production bible matters

Consistency – every writer, artist and programmer works from the same facts, designs and rules.
Faster onboarding – new team members can catch up quickly.
A record of decisions – it explains why things are the way they are.
Pitching – it shows funders and publishers that the project is well planned.
A living document – it is updated as the project changes, so give each version a number and a date.

What goes in a production bible

Most bibles, for animation or games, include:

Title page and logline, plus a one-page overview.
Synopsis and, for series, episode ideas.
Tone and style – what it should feel like, with reference images.
Characters – profiles, designs, turnarounds, expressions and relationships.
World and environments – locations, maps, environment concepts and rules of the world.
Story – the story arc, outlines, sample script pages and storyboards.
Art style guide – colour palettes, shape language, line style and do’s and don’ts.
Sound and music – voice, music style and sound effects.
Production details – software, file formats, resolution and frame rate, team roles and schedule.

Extra sections for a game (GDD)

Game overview – genre, platform and target audience (see Game Genres, Goals and Platforms).
Gameplay and core loop – what the player does over and over, plus goals, rules and win and lose conditions (see Elements of Gameplay and Game Theory).
Controls – which keys, buttons or touches do what.
Mechanics and abilities – how movement, abilities, items and scoring work.
Levels – outlines of at least the first three levels (see Level Design: Your First Three Levels).
User interface – menus, the HUD (heads-up display) and feedback such as sounds and animations.
Technical plan and milestones – the engine or tool (for example Scratch, Godot or Unity) and a schedule of prototypes and playtests (see The Game Design Process: RAD vs Waterfall).

Painted top-down view of a small wooden room with a bed and furniture — Figure 3 – An environment concept for *Sintel*, seen from above. Location designs like this belong in the world section.

A reusable production bible template

Use this outline for your own project or school-based assessment. Each section links to the lesson in this module that helps you complete it.

Section	What to include	Helpful lesson
1. Cover and contents	Title, team names, version number and date, contents list.	–
2. Overview	Logline, format, genre, platform, audience, one key image.	Lesson 1
3. Synopsis and pitch	Full synopsis; your elevator pitch.	Lesson 1
4. Story	Story arc, narrative or episode outlines, sample script, branching map for games.	Lesson 2
5. Storyboards	Key scenes with shot sizes, angles and camera notes.	Lesson 3
6. Characters	Profiles, designs, colour palettes, props and abilities.	Lesson 4
7. Turnarounds and model sheets	Five-view turnarounds, expressions and notes.	Lesson 5
8. World and environments	Environment briefs, layered backgrounds, maps.	Lesson 6
9. Concept art and style guide	Mood boards, keyframes, colour script, style do’s and don’ts.	Lesson 7
10. Gameplay (games only)	Core loop, rules, controls, mechanics, first three levels, UI.	Module 2 level design
11. Sound	Music style, sound effects and voice list.	Module 1 sound editing
12. Production plan	Software, file formats, roles, schedule and milestones.	Module 1 game design process
13. Credits and licences	Every source, font, sound and image you did not make, with its licence.	Module 1 ethics and copyright

Tips for a great bible

Make it visual – short text, lots of labelled images.
Put the most important information first; busy readers may only read the first page.
Keep one master copy in a shared folder with clear file names, such as MangroveRescue_Bible_v03.pdf.
Follow your teacher’s and CXC’s current SBA guidelines for required content and format.

Example

The contents page of the Mangrove Rescue bible (version 0.3): 1 Overview (logline and key image of the boat at sunset); 2 Synopsis; 3 Story arc and three-level outline; 4 Storyboard of the opening cutscene; 5 Characters (the young paddler, a scarlet ibis guide and a grumpy crab); 6 Turnarounds; 7 Environments (swamp channels, ibis roost, fishing village); 8 Style guide (round shapes, warm sunset palette); 9 Gameplay (paddle, rescue, avoid litter; touch controls); 10 Sound; 11 Schedule; 12 Credits and licences.

Watch this Extra Credits video for practical advice on writing design documents that a team will actually use:

Exercise

List at least eight sections of a production bible and say what each one is for.
Compare an animation series bible with a game design document. Which sections are the same, and which are only needed for games?
Start a production bible for your own project using the template above. Add your synopsis, story arc, storyboard, character designs, turnarounds, environments and concept art from Lessons 1–7.
Swap bibles with another group. Using the template as a checklist, note anything missing or unclear.
Save it as version 1.0 and keep a change log each time you update it.

This is the last post in Unit 1, Module 3: Story and Character Development. Back to all lessons: Animation and Game Design Notes

Attributions to media used in this post:

Character Sintel-clothes-1b.png – David Revoy / Blender Foundation – CC BY 3.0 (via Wikimedia Commons)

Spring-concept art-storyboard.png – Blender Foundation (Spring open movie; uploaded by David Revoy) – CC BY 4.0 (via Wikimedia Commons)

Environments-09-sintel-bedroom.png – David Revoy / Blender Foundation – CC BY 3.0 (via Wikimedia Commons)

What Is Concept Art? How to Create Concept Art for Your Animation or Game Project

September 26, 2026 Aven BrisailLeave a comment

Concept art is artwork made early in a project to explore and explain ideas for characters, environments, props, creatures and mood before final production begins. Its job is to solve design problems and communicate a vision to the rest of the team, not to be a finished picture. In animation studios this stage is often called visual development.

What concept art is, and what it is not

It is a tool for decisions. Artists produce many options quickly so the director or team can choose a direction.
It guides other artists. 3D modellers, animators, level designers and background painters build from it.
It helps sell the idea. A few strong images can make a pitch much more convincing (see How to Write a Synopsis and an Elevator Pitch).
It is not the same as illustration. An illustration is a finished image for an audience; concept art may be rough, full of notes and never seen by the public.

Types of concept art

Character and creature concepts – body shapes, costumes and variations.
Environment concepts – locations, architecture, mood and lighting.
Prop and vehicle concepts – objects characters use or ride.
Keyframes (key moment paintings) – important scenes shown with final lighting and mood.
Colour scripts – small paintings of every scene in order, showing how colour and mood change through the story.

The concept art process

Brief – what is needed, for which genre and audience, and any limits (for example, “must be easy to animate”).
Research and references – collect photos and notes into a mood board. Study real animals, buildings, clothing and cultures.
Thumbnails – many small, fast sketches or silhouettes, often in minutes each.
Choose and refine – pick the strongest ideas with feedback and develop them in more detail.
Variations – try different colours, materials and textures on the chosen design.
Final concept with callouts – a clear version with notes and close-up details.
Hand-off – follow up with turnarounds and model sheets (see How to Draw a Character Turnaround).

Sketches of an antelope-like creature with different skin patterns and reference photos of rhino skin — Figure 2 – Creature concepts for the game *Ryzom*. One body design is tried with jungle, lake and desert skin textures, and a photo of rhinoceros skin is used as a texture reference.

Five panels showing a creature head going from rough sketches to a 3D model — Figure 3 – A concept design workflow: quick sketches of several ideas, shading and refining, choosing one, then building and refining a 3D model.

Colour and texture in concept art

Start with values – block in light and dark in greyscale first; if it reads in grey, it will read in colour.
Use a limited palette that matches the mood (see Colour Theory, Texture, Composition and Layout).
Suggest texture with textured brushes, scanned paper or your own photos of surfaces such as bark, rust or fabric.
Try simple 3D modelling – a quick block-out in free software such as Blender can help you test shapes, lighting and camera angles.
Respect copyright – only use images you made yourself, or openly licensed images with credit (see Ethics, Copyright and Intellectual Property). Free tools are covered in Environment Design and Digital Artwork.

Concept art for your own project

For a school project or portfolio, aim for at least: your main character, one key environment, one important prop and one keyframe. Keep your process pages (thumbnails and variations), because they show your thinking as well as your skill. Label each page and store it in your e-portfolio.

Example

Brief: a keyframe for Mangrove Rescue showing the player’s boat arriving at the scarlet ibis roost at sunset. The artist gathers photos of mangroves and scarlet ibis, draws twelve thumbnails of different compositions, and picks one with a low horizon and the flock against the sky. Three colour variations are tried (golden hour, pink dusk and stormy grey), and the team picks golden hour because it feels hopeful. The final painting has callouts for the boat design, the water colour and the ibis silhouettes.

Hear a professional game concept artist describe how concept art moves from 2D design to a finished 3D game asset:

Exercise

In two or three sentences, explain what concept art is and how it differs from a finished illustration.
Make a mood board of eight to ten reference images for your project, and record where each image came from.
Draw twelve thumbnails for one character, environment or prop.
Refine your best thumbnail into a colour concept, then make three colour or texture variations of it.
Add callouts (notes and close-ups) to your final concept and add the whole process to your portfolio.

Next: The Production Bible for Game Design and Animation (With a Reusable Template)

Attributions to media used in this post:

2023-03-30 Concept-art-for-a-fictive-video-game-Save-Point by-David-Revoy.jpg – David Revoy – CC BY 4.0 (via Wikimedia Commons)

Creature Ryzom with texture variations.jpg – Ryzom – CC BY-SA 2.0 (via Wikimedia Commons)

Concept-design-2.jpg – ProkopHapala – Public domain (via Wikimedia Commons)

Conceptualising Environments: Layers, Depth of Field and Design Theory for Different Genres

September 26, 2026 Aven BrisailLeave a comment

To conceptualise an environment means to develop the idea of a place before building it: who is there, what happens there and how it should feel. Once the idea is clear, artists build the environment in layers (foreground, midground and background), use depth of field to guide the eye, and apply design theory so the place suits its genre.

This lesson builds on three earlier posts, so it stays short: Layers of an Environment and Perspective Drawing, Colour Theory, Texture, Composition and Layout and Environment Design for Game Genres and Creating Digital Artwork.

Step 1: Write an environment brief

Answer these questions in a few lines before you draw:

Purpose – what happens here in the story or gameplay?
Inhabitants – who lives here or passes through?
Time and weather – dawn or midnight, dry season or storm?
Mood – safe, tense, magical, lonely?
Focus – what should the viewer notice first?
Genre and audience – who is it for?
References – photos, sketches and research from real places and cultures.

Then draw several small, quick thumbnails and choose the strongest before starting a final piece.

Step 2: Create the layers

Draw the foreground, midground and background on separate layers or in separate files so they can be moved independently for parallax scrolling, camera moves or compositing. Two useful rules:

Atmospheric perspective – distant objects look lighter, bluer and less detailed because of the air between us and them.
Value separation – give each layer its own range of light and dark so the layers do not blend together. Keep the strongest contrast where the action is, usually in the midground.

Layers of mountain ridges fading into a hazy sunset sky — Figure 2 – Atmospheric perspective in real life: each ridge of the Great Smoky Mountains looks paler and bluer the further away it is.

Step 3: Use depth of field

Depth of field is the range of distances in an image that appear sharp. A shallow depth of field keeps only one distance in focus and blurs the rest; a deep depth of field keeps almost everything sharp. In 3D animation, a virtual camera can blur objects that are out of focus. In 2D, artists blur the foreground or background layers by hand. Many games add depth-of-field blur in cutscenes and menus. In every case the goal is the same: guide the viewer’s eye to what matters.

Step 4: Apply design theory for the genre

Design element	Friendly (pre-school, cosy)	Tense (horror, thriller)	Epic (fantasy, sci-fi)
Shapes	Round, soft, chunky	Sharp, broken, leaning	Tall verticals, huge scale, strong geometry
Colour	Warm, bright, saturated	Dark, desaturated, one sickly accent	Rich contrasts, glowing accents
Light	Soft, even daylight	Low light, deep shadows, flicker	Dramatic light shafts and silhouettes
Composition	Open, clear paths	Narrow, blocked views	Wide vistas with a distant landmark

Example

Game concept: Mangrove Rescue, a friendly adventure set in a mangrove swamp inspired by Trinidad’s Caroni Swamp, home of the scarlet ibis. Brief: the player paddles a small boat to free trapped animals before sunset. Foreground: dark, slightly blurred mangrove roots and leaves frame the view. Midground: the water channel and the player’s boat, sharp and with the most contrast. Background: pale hills and a flock of scarlet ibis in a warm orange sky, softened by haze. Round leaf shapes and warm colours keep it welcoming for young players.

In this Pixar in a Box video, members of Pixar’s camera team show how the choice of lens changes what is in focus, and how their virtual cameras copy real ones:

Exercise

Watch an animation or play a game. Identify the foreground, midground and background in one scene, and say whether depth of field is used.
In a group, choose a theme and write an environment brief for a game concept.
Draw three thumbnails, choose one, and create the final environment with the foreground, midground and background on separate layers.
Show depth of field by blurring or simplifying the layers that are not the focus.
Redesign the same place for a different genre by changing the shapes, colours and lighting.

Next: What Is Concept Art? How to Create Concept Art for Your Animation or Game Project

Syllabus link: This post is relevant to the CAPE® Animation and Game Design Syllabus, Unit 1: Fundamentals of Animation and Game Design, Module 3: Story and Character Development – Specific Objective 7 (“conceptualise an environment”); Specific Objective 8 (“create environmental layers for backgrounds, midgrounds and foregrounds”); Specific Objective 9 (“apply design theory to create environments for particular genres”).

Attributions to media used in this post:

Sprite Fright-concept art-group.png – Vivien Lulkowski / Blender Foundation – CC BY 4.0 (via Wikimedia Commons)

Clifftops4-7-07.jpg – Aviator31 – Public domain (via Wikimedia Commons)

Dof blocks f1 4.jpg – Alex1ruff – CC BY-SA 4.0 (via Wikimedia Commons)

Dof blocks f22.jpg – Alex1ruff – CC BY-SA 4.0 (via Wikimedia Commons)

How to Draw a Character Turnaround: Model Sheets, Views and Consistent Proportions

September 26, 2026 Aven BrisailLeave a comment

A character turnaround is a set of drawings that shows the same character from several angles, in the same pose and at the same size, lined up side by side. It is usually part of a model sheet: the official reference that everyone on a team uses so the character always looks the same, no matter who draws, models or animates it.

Turnarounds are used by animators, by 3D modellers (who place the views in their software as a guide) and by game artists who need a character from every direction. If you designed a character in Character Design for Different Genres, this is the next step.

The standard views

Front – facing the viewer.
Three-quarter front – turned about 45 degrees; often the most appealing view.
Side (profile) – turned 90 degrees.
Three-quarter back – turned about 135 degrees.
Back – facing away.

A simple turnaround may show only front, side and back. Games with top-down or isometric views often need four or eight directions for each sprite.

What goes on a model sheet

The turnaround itself.
Construction and proportions – the basic shapes and how many “heads” tall the character is.
Expressions – happy, sad, angry, surprised and so on.
Poses and actions – typical movements that show personality.
Details and notes – props, colour codes, and reminders such as “ears are always pointed”.

How to draw a turnaround, step by step

Finish the front view first, using simple shapes that are easy to repeat.
Draw horizontal guide lines across the whole page at the top of the head, eyes, chin, shoulders, chest, waist, hips, knees and feet.
Pick a neutral pose: standing straight with arms slightly away from the body. 3D modellers often ask for an A-pose or a T-pose (arms out to the sides).
Draw the side view next to the front, making every feature touch the same guide lines.
Add the three-quarter views, still using the guide lines.
Draw the back view. For a symmetrical character you can flip the front outline as a starting point, but remember to move any one-sided details to the correct side.
Check and clean up: compare heights, line up details, then add flat colour and notes.

Common mistakes

Height drift – the character gets taller or shorter from view to view.
Perspective – a turnaround is drawn flat (orthographic), with no perspective. All feet stand on the same ground line.
Swapped details – a badge on the left shoulder in the front view must still be on the character’s left in the back view.
Changing props – props must stay the same size and shape in every view.

Click the green flag in this Scratch project to watch a simple mannequin turn around through its views. Notice how the head, shoulders, hips and feet stay at the same heights:

View it at scratch.mit.edu

Example

A turnaround for Zuzu the Hummingbird, the pre-school game hero from the previous lesson, would show five views on one page. Guide lines mark the top of her head, her eyes, the tip of her beak, the tops of her wings, her belly and her feet. Notes explain that her orange scarf always ties on her left side, her petal backpack is visible in the side and back views, and her wings are shown folded (a separate sheet shows them open for flying).

Watch this short video to see a turnaround drawn from start to finish:

Exercise

List the five standard views of a turnaround and explain why guide lines are important.
Practise on an object: draw a water bottle or mug from the front, side and back using guide lines.
Create a five-view turnaround of the character you designed in the last lesson. Include its prop and label its special abilities.
Swap with a partner. Check each other’s turnarounds for height drift, swapped details and changing props.
Optional: import your views into Scratch as costumes and make your character turn around, like the project above.

Next: Conceptualising Environments: Layers, Depth of Field and Design Theory for Different Genres

Attributions to media used in this post:

Spring-concept art-Spring.png – Blender Foundation (Spring open movie; uploaded by Julien Kaspar) – CC BY 4.0 (via Wikimedia Commons)

Go gopher model sheet.jpg – Renee French – CC BY 3.0 (via Wikimedia Commons)

Color Classics – Hold It! (1938) – Hound Dawg – Character Model Sheet.jpg – Dave Tendlar, Fleischer Studios – Public domain (via Wikimedia Commons)

Spring-concept art-Autumn 01.jpg – Blender Foundation (Spring open movie; uploaded by David Revoy) – CC BY 4.0 (via Wikimedia Commons)

Character Design for Different Genres: Shape Language, Silhouette, Colour, Props and Abilities

September 26, 2026 Aven BrisailLeave a comment

Character design is the process of creating how a character looks, moves and behaves so the audience understands who they are at a glance. Character theory is the set of ideas that explain why some designs communicate better than others, such as archetypes, shape language and silhouette. A good design also suits its genre: a hero for a pre-school game looks very different from a hero for a science-fiction adventure.

For anatomy and figure drawing, see Motion and Figure Drawing for Animation and Games. For characters inspired by folklore, see Folklore, Culture and Heritage in Animation and Game Design. This post is about design principles and genre.

Start with the role, not the drawing

Before sketching, decide what the character does in the story or game:

Archetype – a familiar role such as the hero, mentor, sidekick, trickster, guardian or villain. Archetypes help audiences understand a character quickly; your job is to add something fresh.
Personality – three key traits, a goal and a flaw.
Function in a game – player character, non-player character (NPC), enemy or boss. A game character’s abilities (jump, fly, climb, heal) must match the gameplay, and its design should hint at them.

Character design principles

Shape language

Shape language means using basic shapes to suggest personality:

Circles – soft, friendly, playful and safe. Common for young, cute or kind characters.
Squares and rectangles – solid, strong, stable and dependable, like a loyal protector.
Triangles – sharp, energetic, dynamic or dangerous. Pointing upwards they can suggest confidence; pointing downwards they can suggest menace.

Most designs mix shapes, with one shape in charge.

Silhouette

A strong character is recognisable even when filled in solid black. Test your design by filling the outline: can you still tell who it is and what they are doing? A clear silhouette is essential in games, where characters are often small on screen and must be recognised instantly.

Proportion and exaggeration

Changing proportions changes how we read a character. Big heads, big eyes and short limbs look young and cute; long legs and a small head look elegant or powerful; a huge upper body looks strong. Decide how stylised your world is and keep every character in that style.

Colour

Choose a small palette of three to five main colours. Bright, saturated, warm colours feel cheerful and energetic; muted or cool colours feel calm, serious or mysterious. Make sure the character stands out against the backgrounds it will appear on (see Colour Theory, Texture, Composition and Layout). Remember that colour meanings vary between cultures.

Costume, props and abilities

Props (objects a character carries) and costumes tell us about a character’s job, culture and history. In games, a prop often shows an ability: a staff for magic, boots for speed, a lantern for exploring dark caves.

Designing for genre

Genre and audience	Typical design choices
Pre-school and young children	Round shapes, big heads and eyes, bright friendly colours, simple silhouettes, no scary details.
Platformer and action-adventure	Clear silhouette, dynamic poses, one or two bold colours, visible abilities.
Fantasy and role-playing	Costumes, armour and props that show class and culture; detailed but readable designs.
Science fiction	Technology built into costumes, clean geometric shapes, glowing accents.
Comedy	Strong exaggeration, stretchy proportions and very expressive faces.
Horror (for older audiences)	Unsettling proportions, sharp shapes, dark or desaturated colours.

Example

Brief: a hero for an adventure game for pre-schoolers (ages 3–5). Trinidad and Tobago is often called the “land of the hummingbird”, so the hero is Zuzu the Hummingbird.

Shapes – a round body and head (friendly), with a small triangular beak and tail so she still looks quick.
Proportion – a very large head and eyes for a cute, young look.
Colour – bright emerald green with a warm orange scarf that stands out against green forests.
Prop – a flower-petal backpack that carries seeds.
Special abilities – Hover (to reach high flowers), Zoom (a quick dash) and Seed Sprout (plants a seed that grows into a bridge or ladder).
Genre fit – Zuzu solves problems by helping and growing things, never by fighting, which suits young children.

Watch this video from Winged Canvas to see how studios use shape language:

Exercise

Explain, with three examples from animations or games you know, how a character’s design matches its genre.
Draw a simple character, then redesign it for two different genres. Label what changed (shapes, proportions, colour, props).
Group activity: design a hero for a pre-schoolers’ adventure game. Write a short profile, draw six thumbnail silhouettes and choose the clearest one.
Develop your chosen design with a colour palette, a prop and at least two special abilities. Label how each ability is used in the game.
Keep your design. You will create a turnaround for it in the next lesson.

Next: How to Draw a Character Turnaround: Model Sheets, Views and Consistent Proportions

Syllabus link: This post is relevant to the CAPE® Animation and Game Design Syllabus, Unit 1: Fundamentals of Animation and Game Design, Module 3: Story and Character Development – Specific Objective 4 (“explain character design as it relates to genre”); Specific Objective 5 (“design genre-appropriate characters”).

Attributions to media used in this post:

Sprite Fright-concept art-sprite 01.jpg – Ricky Nierva / Blender Foundation – CC BY 4.0 (via Wikimedia Commons)

Fig. Character Design Model Sheet A (cc) 2017 01.jpg – Guilherme Silveira Dias – CC BY-SA 4.0 (via Wikimedia Commons)

Spring-concept art-Spring and Autumn 01.jpg – Blender Foundation (Spring open movie; uploaded by David Revoy) – CC BY 4.0 (via Wikimedia Commons)

Storyboarding with Camera Shots and Angles (Plus a Camera Angle Montage Exercise)

September 26, 2026 Aven BrisailLeave a comment

A storyboard is a series of drawings that plans every shot of an animation, or every key moment of a game, before it is made. A shot is one continuous view from the camera. Every shot has a shot size (how much we see), a camera angle (where the camera looks from) and sometimes a camera movement. Choosing these well is how you tell the story visually.

The basics of storyboarding were covered in Story Development and Scriptwriting and in Storyboards – Professional Video Creation (Part 1). This post focuses on the camera.

Anatomy of a professional storyboard panel

Scene and shot number – for example “Sc 2 / Sh 4”, so the team can find every shot.
The frame – drawn in the final screen shape (usually 16:9 widescreen).
Action – what the characters do.
Dialogue and sound – lines, sound effects (SFX) and music cues.
Camera notes – shot size, angle and arrows for any movement.
Timing and transitions – how long the shot lasts and how it joins the next one (cut, dissolve, fade).

Shot sizes

Shot size	What it shows	Use it to…
Extreme long shot (ELS) / establishing shot	A whole landscape, town or building; characters are tiny or absent.	Show where and when the scene takes place.
Long shot (LS) / wide shot	The full body of the character and plenty of surroundings.	Show action, movement and how a character fits into the space.
Full shot / medium long shot (MLS)	The whole body, or from the knees up, with some background.	Show body language and groups of characters.
Medium shot (MS)	From about the waist up.	Conversations and everyday action.
Close-up (CU)	The face or one important object.	Show emotion and reactions.
Extreme close-up (ECU)	A tiny detail, such as an eye or a key.	Build tension or point out a clue.

Camera angles

Eye level – neutral and natural; the audience feels equal to the character.
High angle – looking down on the subject, which can make it seem small, weak or lost.
Low angle – looking up at the subject, which can make it seem powerful, heroic or threatening.
Bird’s-eye view – directly overhead, good for maps, mazes and showing patterns.
Worm’s-eye view – from the ground looking up, making things look huge.
Dutch angle (canted angle) – the camera is tilted, so the world feels uneasy or strange.
Over-the-shoulder (OTS) – from behind one character looking at another; common in dialogue.
Point of view (POV) – we see exactly what a character sees.

Camera movement

Pan – the camera turns left or right from a fixed spot.
Tilt – the camera turns up or down from a fixed spot.
Dolly or tracking shot – the whole camera moves towards, away from or alongside the subject.
Zoom – the lens changes to make the subject bigger or smaller without the camera moving.
Crane or pedestal – the camera rises or lowers.

Animated diagram of a dolly zoom, showing the background changing size while the subject stays the same — Figure 4 – The dolly zoom: the camera moves backwards while zooming in (or the reverse), so the subject stays the same size but the background seems to stretch. Top: what the camera sees; bottom: a plan view of the camera’s movement.

Keeping shots clear

The 180-degree rule says the camera should stay on one side of an imaginary line between two characters, so they keep facing the same way on screen. Shot-reverse-shot cuts between two characters in a conversation, often using over-the-shoulder shots.

Cameras in games

Game cameras are often controlled by the player or by code, so designers choose a camera style that suits the gameplay: first-person (seen through the character’s eyes), third-person (following behind the character), side-scrolling, top-down or isometric (a raised, angled view). Cutscenes, short non-interactive scenes, use the same shots and angles as film. For a game, storyboard the cutscenes and a few key gameplay moments, showing what the player sees and what they can do.

Example

The first scene of an animation, Nia’s Big Night, planned with six shots:

Shot	Shot size and angle	Action and sound
1	Extreme long shot, high angle (establishing)	A hillside town at sunset; the sound of distant steelpans.
2	Medium shot, eye level	Nia rushes into the panyard, out of breath.
3	Close-up, eye level	Her face drops: her pan stand is empty.
4	Point of view, slow pan	We see what Nia sees: the empty rows of pans.
5	Low angle	The band leader appears, arms folded, looking down at her.
6	Over-the-shoulder	From behind Nia as she promises, “I’ll find it.”

Watch this Pixar in a Box video to see how Pixar artists use the camera to tell a story:

Exercise

Name the shot size of each still A–G in Figure 2.
Watch the opening two minutes of an animation or a game cutscene. List each shot and name its size and angle.
Camera angle montage (group activity): plan the first scene of an animation story as a storyboard of six to nine panels using at least three different camera angles. Label each panel with its shot size, angle and any movement. Then act out or draw each shot, photograph them, and arrange them into a labelled montage (a grid poster, slideshow or short video).
Choose a game you know and describe its camera style. Explain how it helps the player.
Try an online storyboard tool, such as Storyboard That, or draw on paper and scan it.

Answers to question 1 (from the image’s description on Wikimedia Commons): A medium shot, B extreme close-up, C close-up, D extreme long shot, E long shot, F full shot, G medium long shot.

Next: Character Design for Different Genres: Shape Language, Silhouette, Colour, Props and Abilities

Attributions to media used in this post:

Storyboarding template 02.jpg – Tomas Mitkus – Public domain (via Wikimedia Commons)

VocaDi-Entertainment,CameraRange.jpeg – Stills: Blender Foundation (Sprite Fright); compilation by chris 論 – CC BY 4.0 (via Wikimedia Commons)

Camera Movement – Pan.png – Nathan W. Fullerton – CC BY-SA 4.0 (via Wikimedia Commons)

Contra-zoom aka dolly zoom animation.gif – Mike1024 – Public domain (via Wikimedia Commons)