How to… write a UI art bible
Make your Art Director love you with this one simple trick.
In game development, Art Direction bibles and Game Design Documents are notoriously hard to find online, especially with UI design- maybe because companies are paranoid about leaks, or letting in the public in on the magic sauce of the proverbial game development recipe.
My segue into product design and tech gave me great appreciation for the wonderful world of design systems. Companies share them publicly (and indeed are very proud of them when they’re done well!)
See Shopify’s Polaris Design System, or Apple’s Human Interface Guidelines. Mmm, sexy. And organised.
Meanwhile, most game teams have great ideas about what their UI art direction should be, but don’t formalise this into any guidelines- leading to projects with loads of great graphic design motifs, but not a lot of rules around when they should be use, and what they mean in the world of the game they’re in.
This leads to UI in production with cool chunks, but lacking polish, consistency, and narrative weight in the world they’re in. And a proverbial and literal headache to align everything when the publisher comes knocking for screenshots.
I spent the last two years building the UI direction for Drest’s new project (as of yet unannounced 😢), and put together a UI art direction bible for Glowmade this month (and god the project is looking amazing, but no spoilers!)- suffice to say it’s something I’m pretty confident at, by now!
As both those projects are under wraps, I’ll instead use some examples from my work as UI lead on Pet Rescue Puzzle Saga at King (a lifetime [four years!?!] ago), and walk you through how I structure them, what they contain, and how they’re used. Let’s go!
Before you begin
Who’s going to use this? Where should it live?
I always recommend sticking to the documentation system used by the rest of your team. If everyone is writing things in Google Docs- don’t try to migrate everyone to Notion just for your UI art bible. As much as I love Notion. No-one will use it, and it’ll immediately be out of date. Trust me.
I lean towards Confluence, because I’m a corporate sellout, and it’ll make your Product Managers love you. As much as I love a beautiful Keynote- that shit is just for other art directors.
The smaller the better
I didn't have time to write you a short letter, so I wrote you a long one.
- Mark Twain
The more concise your UI bible is, the more likely you’ll use it.
This is very hard to do, especially from the off. Be comfortable making something mediocre, mildly contradictory and long to begin with. Your goal should be to cut it down over time, as you refine your style, direction and voice.
Making people use it
My key tips for making people actually use it
Tell everyone about it!
Your art director and game design lead should not only be aware of this document, but 100% onboard your biggest fans. This should be the missing jigsaw piece that brings together their disciplines and gets them on the same page about how game information is displayed to the player aesthetically and thematically with the world.
The more you talk about your amazing new doc, and link it everywhere, it becomes a tangible thing for people to reference and care about.
Finally… The structure of a UI bible!
NB - this is what I’ve found to work for me, across multiple mid-size dev teams (30-120ish), primarily on live service games. If you have a different perspective- I’d love to hear it! 😘
Design ethos and background
This is your perspective on what UI is for in your project, an the role it plays in your game’s goals
Feel free to be a bit of a pretentious wanker here. We hardly ever get a chance!
(My fave starter) Interface is primarily a tool for conveying information to the player. However, it can be a pivotal part of building your game’s world and narrative.
Great user interfaces feel seamless (you might not even notice them!)- bad ones stick out obviously, and can have a massive negative impact on metrics and game feel.
Our UI aims to…
[UI pillars go here] Figure out the three things that explain your UI. One of them will usually be accessibility. You can probably nick the other two from your GDD or art direction bible.
Inspiration and references
Describe your game aesthetic in one sentence
Cultural touch points that influence the player’s perception of your game
Specific inspirations from games and pieces of design
Add some mood boards here. People go wild for visuals.
Theme or Lore
How does your UI exist in the game world?
Does the character see it?
Consider diegesis / non-diegetic interfaces
Specific motifs and patterns that reflect the game’s lore.
Design specifics - the devil’s in the details.
Colour palette and usage
Always start with colours. They’re usually the easiest to pin down.
Detail colours that have meanings (does a particular shade of green always mean play, or purchase?)
Naming scheme of shades and tints - I like this one
Typography
List of fonts you’re using, with examples of their usage
Any naming schema or scaling used
Rules for capitalisation, placement of currencies etc.
Shape and form
Common shapes in the UI, and any meanings associated with these shapes
Are things rounded, sharp, or blocky?
Use of imagery or art assets
Iconography
Icon categories, sizes and usage
Guidelines for building icons
This will be a big section, and might need to be its own document.
States
Standardised colours, patterns and shapes that imply item states
This may be combined into your colours section, depending on your project complexity.
Animation and motion
Examples of common motion patterns, like screen transitions, panel pop ins
Details of timings and easings
This is a fun place to collaborate with any animators you have on staff, or even your marketing artist!
Padding, spacing and alignment
Details about your grid, if used.
Common sizes and spacings. How much do you conform to platform guidelines?
Misc
Every project has its goblins. Relegate them here.
Art director hates the colour purple? Put it here.
Font doesn’t render correctly at certain sizes? Add it (but also maybe you should fix that)
Beautiful Corners ✨
A selection of assets, panels, screens and prototypes that show off the UI art direction to its fullest extent.
It can be fun to put a senior artist on these, in collaboration with a designer, and see what weirdness they come up with!
Notes on terminology
What’s out, what’s in? There are many things I’ve listed here that you may consider unnecessary, or more appropriate for a GDD, art direction bible or design system.
What your UI bible needs depends on the project. Remember the cardinal rule- the shorter the better. Unlike this post! Sike.
And for shameless self promotion- this is a service I offer as part of Dilettante Design! Either meeting with Art Directors to help get their UI guides in shape, or rolling up my sleeves and writing them myself. Get in touch if you’d like some more specialised advice!
Notes from the Editor
Hello again! Nice to see you! I hope summer is treating you well. Outside of occasional blogging, I’m thoroughly enjoying freelancing again (2 months officially!) I’ve been trying out Bluesky and Threads (@cait_journal)- which one are we migrating to eventually? Time will tell…