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!
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.