The Gamification Aesthetics Color Wheel

A Gamification Design toolkit by  &


(Download it for free. Now and always.)


Color wheel theory and chart guide


A brief story on The Gamification Aesthetics Toolkit

2 years ago Isidro Rodrigo and I released The 35 Gamification Mechanics Toolkit to help Gamifiers design better experiences. It was one of our more ambitious projects because it involved creating a whole new framework that would really be useful for the people doing gamification at that time. 

The 35 Gamification Mechanics toolkit has helped thousands of gamifiers from all over the world up until now, but along these months, we've kept on thinking that it is not possible to design a full gamified experience just by using the toolkit itself.

Gamification is not only built out of mechanics. We need design, art and technology to create an everlasting gamified experience, and we strongly believe that gamification aesthetics have not received the importance they truly deserve yet. 

So this has been our main reason to create this new toolkit, and after almost a year working on it, refining its content and testing that everything kind of made sense, here it is, all yours designers! 

We really hope that it keeps on helping you all the same way our first one did, and please take into account that it is still in beta version, we're looking forward to hearing your thoughts and insights to keep on improving it!


How to use this toolkit?

As you might have realised, this toolkit is designed as "a color wheel", meaning that all of its elements are related to each other and that there is some kind of logic behind them. 

There are 12 key elements to take into account when defining any experience's aesthetics, and we usually have to follow certain steps to get the best out of it. 

Here's how we use it: 

Step 1 - The Theme

Start by choosing the dominant and unifying idea or topic that lies in your experience’s aesthetics. Examples might include themes such as: Pirates, Medieval, Cartoon, Real Life, Creatures, etc. 

Step 2 - The Dimension

Once you've chosen your theme, see about the length, width and height that you want your experience to have, or in other words, choose if you'd rather go for a 2D or a 3D experience. 

Step 3 - The Perspective

You've got a theme and the perspective, now see about the position from which players will interact within the experience. You'll usually end up with a First Person Perspective or a Third Person one.

Step 4 - The Scenario 

It's now time to see where gameplay will take place. Whether it is a real world experience or a digital one, you'll have to define those areas to later on apply an interface layer on them, 

Step 5 - The Camera 

Once you know your main "game screens", you'll have to choose a camera type, or in other words, where and how is the experience's point of view.

Step 6 - The Dashboard

You've defined the first part of your aesthetics, something that we could call the macro environment. It's time to design the overall flow of your dashboard, how your interface will work. 

Step 7 - The Positioning

Once the interface navigation flow (what I call the dashboard) is defined, you'll need to see where those interface elements are going to be located. 

Step 8 - The Shape

Elements are usually perceived by their shapes, so think carefully how the elements of your dashboard will be.

Step 9 - The Iconography

One of the most important things when defining your aesthetics is the iconography. Make sure your players understand what those icons mean and try to make things as easy and clear as possible. 

Step 10 - The FXs

No experience is complete without interaction FXs! Let your players know that the system recognises their actions or those may have no impact at all.

Step 11 - The Color Scheme

This is a critical step. Your whole experience will change depending on its color scheme, so make sure you choose the right one. 

Step 12 - The Font Styles

Last but not least, fonts are omnipresent, and your task is to make them "invisible" to the player. If any user realises that there is something wrong with your fonts, it might be the end of the magic circle!


Some final words on The Gamification Aesthetics Color Wheel

Now that you know how this toolkit works, I'd like to say some final words on it: 

- This toolkit is intended to be used by Gamification professionals. It is meant to be a set of guidelines or "best practices" to follow when designing the aesthetics of gamified experiences, transformational games, ARGs, Advergames, and so forth. It might be of good help for game designers, but it lacks of many things that pure games need. 

- We follow the formerly explained steps to use this toolkit, but it does not mean that you cannot use it in any other way that is useful for you!

- All images  used are not of our own, and they're not used with any commercial purposes. This is a free toolkit and it will keep on being so. 

- This toolkit is the final result of quite some months working on it, testing how it works in real life and refining its structure. This means that even though we might think it will be of help for you all, it's still in beta version. Keep in mind that we may change it along the upcoming months to really become the definitive aesthetics toolkit for gamification designers. 

- This is not something that I could have done all by myself. There are many people who have collaborated and helped me along the way, so thanks all for that!


HAVE FUN!


Sidney Lopez & Isidro Rodrigo
 / 
2015

Ps. We're already working on the toolkit's pro version, something more color wheel like! Stay tuned!