When I began writing the chapter on design, I didn’t really know where to start and what to tell. When I finished it, I realized that it was far to long for one post so I split it in two. Last week, I talked about my approach on the design and how I drew my inspiration from the gameplay. This week, we’ll hit three topics: Colors, Animations and Sound.
Letteral’s gameplay calls for three different colors: One for each player and a third one to mark the neutral tiles. Technically, for the background and the letters on the tiles, there are even more colors but the key ones are the three colors in which the tiles are tinted.
When I created the very first prototype, for Letteral, I had to choose colors for the players and without much thinking, I went for orange and blue, as well as for gray for the neutral color. I intended them to be only temporary stand ins and I adjusted them very slightly later. But as I generally liked them, I never really thought about exchanging them for other colors. And when I needed a color scheme for the game, I didn’t have to look far: Two strong key colors as well as a neutral third color, perfect!
In online matches, the local player is always orange, the opponent is always blue. As this might cause players to feel more familiar with orange, I try to use the color slightly more in the app, especially in conjunction with “positive” or “default” elements. Gray on the other side, is used next to nowhere in the final designs. There was just no need for a third, more neutral color and when I tried to use it, the designs only looked dirtier or less friendly.
Another thing that I always had in mind when it comes to colors where people who can’t seem them properly. Letteral’s gameplay completely relies on the ability to distinguish three colors, so I planned to include a colorblind-mode from the start. It didn’t have to be pretty but I wanted as many people as possible to be able to play the game.
Through this mode, I also came up with the idea of offering different themes.
They work perfectly with the minimalistic UI and players can adjust the colors to their liking. For example, some people prefer a dark theme over a light one. Also, having a color blind mode in place gave me the opportunity to add more color schemes later, be it as a reward, as something to celebrate a special occasion or just as a way to say “Thank You” to the players.
Of course, when I talk about themes, I also have to talk about how players get them. Players mainly unlock new themes by purchasing them. I like games which are free-to-play but give players the opportunity to support the game through completely optional purchases. I myself usually buy In-App-Purchase, not because the game forces me to, but because I want to give back to the developers. So I liked the idea of implementing a similar system in Letteral. Together with some achievements, which reward you with free themes, everybody will be able to unlock his favorite themes without ever spending a dime.
One thing that is very near and dear to my heart are animations. Using them is like putting icing on a cake: With no or little icing, the cake will taste bland but if you overuse it, it will taste like pure sugar. It is the same with animations: You don’t want your app to look boring but neither should it like like a bad Powerpoint presentation from the 90s.
While some people might say that, especially in utility apps, animations are nothing but window dressing, they actually have many important purposes. First of all, if properly used, they help the user to understand the UI. Animations can provide feedback for the user’s actions.For example, if he enters a word that is not accepted by the dictionary, when he uses up a life when entering a game, or when he gains a life through an achievement. Animations also can highlight elements in the app that are of special importance, like the achievements buttons which jumps, if a reward can be claimed.
Most important of all, animations can guide the user through the UI-flow. The standard transitions between screens in iOS already do a great job here: when the new screen comes in from the right, the user knows that he is navigating through screens which are on the same level. When it comes in from the bottom – as a modal view – the user knows that he went deeper into the app’s UI hierarchy. While Letteral also uses animations to navigate the user through the different screens, it usually doesn’t use the default animations. I made this choice to make use of another thing that animations can do: they can give an app a unique character.
The character of an app can be defined by many things: by its colors, its art, its sound… and also by its animations. As Letteral has little art and little sound, the animations where my vessel of choice to convey some feeling of uniqueness.
Especially for screen transitions, animations are tricky to handle. They have to be quick and concise and they must never ever get in the user’s way when he navigates through the app. Actually, many users probably don’t even consciously notice that screen transition animations are there. They still make the app feel fresh and more dynamic.
As you can see above, most transitions in Letteral are fairly minute and only small variations on the iOS default animations. They mostly consist of a combination of a fade- and a grow-effect. This looks especially great for the many screens that are not displayed in full-screen but as modal overlays over the current screens. As Letteral is a game, at some points I dared to implement some more prominent transitions, for example when opening the lives-view or the themes-view.
I‘m not a sound designer. So for Letteral‘s „Hear and Feel“ I spent a lot of time listening to stock music and effects on Audiojungle. First of all, I tried to decide on a background music. As a puzzle game, Letteral doesn’t need a huge score to transport the storie’s emotions. After all, there is no story and there are no emotions. Apart from endless joy, I hope . I thought that some kind of ambient music, probably electric, would be a good fit. After listening to hundreds of tracks, and trying some of them in the game, I couldn’t find anything that worked. All of them felt too intrusive and drew the attention away from the gameplay. In any case, I usually have the music turned off when playing games like Letteral and listen to podcasts or my own music instead. At the end, after looking at some similar games, I decided to not include any music at all. I don’t think that the games loses a lot by that and it is better than having music in there that just doesn’t fit. However, the code to play music is still there so if anybody knows a track that would fit, I would love to hear it.
The sound effects were easier. Again, I wanted them to be quick and minimalistic. However, the buttons needed to sound neural, positive, negative, „going forward“ and „going backward“. Scoring points, unlocking achievements and winning should feel rewarding. And so on… So again, I went through countless sound effects and often purchased a collection of multiple effects, just to use one or two of them. In the end, I’m glad how it all came together and of course, it would be helpful if I could play you some samples here. However, for legal reasons, I can’t. Sorry :-/
Next week on…
I lied. I didn’t split the chapter on design in two parts. When I was done with it, I realized that I still failed to answer two important questions: How did Letteral get his name and his icon? Next week, on this blog…