Month: December 2017

4. More on Letteral’s “Look & Feel & Hear”

(For the other parts of my “Lessons Learned”-Series, click here)

Previously on…

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.

Colors

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.

Animations

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.

Sound

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…

Comment

3. Sometimes, inner beauty isn’t enough

(For the other parts of my “Lessons Learned”-Series, click here)

I finished the first functional “alpha” of Letteral, with the online mode fully working, in January 2016. The UI however was… Well, there where only placeholders at this point. So I figured that it would take me another three to four months to make everything shiny. After all, how long can it take to create the UI for a couple more screens…?

As we now know, it took me about 18 more months to finally release Letteral on the App Store. While, I didn’t spend all the time working on the UI, I needed much more time than I anticipated. I can’t really explain what took me so long but I certainly can take you through the most important steps in the process and lay out my thoughts. So buckle up Letteral, today we’ll make you beautiful!

Basic Considerations

As I wrote in the introductory post, I specifically chose to develop a word game because it didn’t necessarily require any nice artworks or fancy 3D effects. Of course, word games with 3D graphics can look fantastic, but I’m as good at creating these as I am at yodeling. I’m not saying that I don’t care about UI design. On the contrary, I enjoy it tremendously and being responsible for the user interface is part of my day job. I just lack the artistic skills that the more elaborate games would require from me. Thus, I opted for a more minimalistic approach in which I could put my interface designing skills to use.

Apart from these considerations, at the beginning, I didn’t really know what I wanted the game to look like so I took some crucial leads from the gameplay itself: Visually, it revolves around three things: Triangles, hexagons and three key colors. So I tried to base my design on these elements.

Getting in shape

Hexagons are useful to frame other content. They are fairly similar to circles which currently are used everywhere to frame avatars – Twitter, Facebook, Instagram, WhatsApp, iMessage… circles are everywhere – so I decided to use them for the same purpose. Actually, for consistency, most buttons and icons in Letteral now have a hexagon shaped.

Triangles, on the other hand, are more useful as small design elements in a bigger picture. After I put the avatars in a hexagon frame, I soon decided  to make a scoreboard of triangles. They would symbolize the race to the finish between the players and fitted perfectly between their avatars. The only downside of this idea is that it requires the final score to bean uneven number. Otherwise, I would probably have gone for six points for the final score, which would have been a nice reference to the hexagons. But since I feel that five points are too few, I finally settled for  seven.


I also incorporated triangles in the avatar images themselves. At the time, these images where only meant as placeholders for players who didn’t have a profile image in Game Center. However, since Game Center by now does not support profile images anymore, these placeholders are now the only visual representation of a player. To make them more recognizable, each avatar image also has a background color which, as well as the image itself, always stays the same for a player.

Initially, I played with the idea of having all icons made of triangles. I liked the uniqueness of that but ultimately decided against it as the icons would have looked coarser and would have been harder to recognize and understand. Instead, most icons now have a polygonal shape which resembles something made of triangles and makes them look a bit like tangram figures.


Geometry Fun Fact: The hexagon shapes I use are regular hexagons, meaning that all six corners have the same angle of 120°. The triangles on the board, however, are not regular (or equilateral as the geometry-buffs would say). Initially, that was because I made a mistake while drawing them on the screen but it turned out to be another lucky accident: A regular triangle would be roughly 15% wider than it is tall. Since I wanted Letteral to be played in portrait mode, the width of the screen is the limiting factor. So for the board, I went for triangles that are as wide as they are tall. This makes them isosceles triangles in which the top angle is more acute than the other two. Why am I saying all of this?

Now, technically, the hexagons you form on the board do not have the same regular shape as the hexagons I use for all the buttons. However, I guess that, apart from a few designers who cringe in agony when they first play the game, next to nobody will notice…

So this is all there is to say about hexagons, triangles and the basic design of Letteral. Next week, I’ll not only talk about colors but also about animations and sound.

Comment