I just designed my first UI for a mobile app, and I love it. Designing for apps seems way more engaging for me than designing for web — maybe because desktop screens are out of the equation; so there are less proportional fluctuations to account for.
The Idea: Solving a Problem
My sister and her husband couldn’t find a scorekeeper app with the functionality they wanted for their tabletop game nights with friends. My brother-in-law Bradley Gore is a software developer and had never built an app before, so he was game to try. He and Carolina came up with an Android app called The Game Keeper, and they asked me to make it pretty.
The App Functionality: Making It Work
Bradley had all the key functionality and the screen flow in place when I entered the project. Carolina and I reviewed the app through its early releases, and gave Brad the feedback he requested. Originally he had asked me for only a logo for the icon and a splash screen design. As I reviewed the app, I realized how differently developers and designers look at a project. I made other UI suggestions based on solid design reasoning and user interactions, and Brad was open to them. He didn’t always agree right away, but he was interested in improving the app’s appeal. Any functionality or screen changes were usually activated within 24 hours, and he would email again asking for feedback. It was a dream situation for a designer.
This quality of reception and continued openness for feedback is not something I’d expect from every developer I work with. Often a limited budget or schedule dictates transition points, and frankly in personal work it can be easy to marry your project and not want much revision. But Bradley trusted me and I gave him effective reasons for the changes I suggested. Plus, we were working on our own time and for free anyway — so, go big or go home, right? The three of us agree our joint efforts made for a great first-time product.
The App UI Design: Making It Pretty
When we decided to art-ify the whole UI, these were Bradley’s requests:
• Select “fun” colors for the game app
Green = main color
Red = Munchkin battle screen
Blue = store screen (This was later rescinded.)
• Incorporate Material Design style by Google
I made the logo first. I knew I wanted something classy and simple but highly relevant to the game app. It needed to be highly usable in media outlets, too. After multiple re-dos, this is what I designed: a circle containing a G for the most important word in the title. White tally marks indicate the app’s core function; they’re white to reflect the classic “game” markings of white on a green field — in this case, color field.
I choose a non-standard green color (instead of bright green or hunter green) to avoid a visual link to spring, money, plant growth, etc. I avoided chartreuse green because this app will be open for a while, and chartreuse can be so bright it “glows”.
The Other Color Choices and Fonts
Among the other green icons in Google Play store, The Game Keeper needed a little oomph, so I put it on a gold background. Net result: eye-catching but not garish.
The other colors in this color palette are red, blue and gold (plus white). Their hues were chosen to avoid clashes with the green and still say “fun” as requested. I wanted to avoid standard primary colors and still keep blue and red for use in the app as requested. I sent Bradley and Carolina a sampler of colors and textures with the logo for approval.
The flagship font choice was easy: a modern slab serif for a refined edge that still jives well with the Open Sans serif Bradley had already used throughout the app. I started with Cyntho Slab Pro but accidentally told Bradley to use Andada, so I swapped to Andada because that was easier done on my end than his.
The splash screen was locked down to portrait, so that made things simpler for me. Because the app loads quickly, we left the splash screen with simply the logo, name and background blue texture.
The Game Screens
The Game Keeper app launched with four different score-keeping options: Yatzy, Munchkin, 10 Phases and a simple running total. Based on Bradley’s original scorecard layout, I made UI mockups for him to follow for each of the four different games. He already had the fields in place, so my changes were primarily fonts and colors, which he easily implemented with CSS.
On the developer’s original screen, the individual game’s name (primary header) was in a white box at the top of the screen — and just below, the game type (secondary info) was in a colored box.
Visually the type of game stood out more. I swapped the position of the two so the game name had more impact; because most users will likely have multiple games of the same type.
When I came on board for the project, I had visions of detailed illustrations throughout the app — especially on the splash and home screens. But as we worked through reviews for the functionality, I saw that the core of the app (the game screens) had little space available for illustrations. On a later version, we may revise the game screens to include more background graphics, but for now we decided to keep it simple and tone down my big ideas for the app entry. In the end, the only illustrations in the app were two simple ones: a helmet and a monster for the Munchkin battle screen.
I had never played Munchkin but researched online and decided to go with a dragon for my monster. My first monster was far too friendly, but I made minor revisions and came up with one deemed acceptable.
My first helmet, the graphic for the hero, needed changes, too. The tab graphics didn’t have a lot of room — only about 45 pixels of height. So shrinking the horns gave alot more room for a the graphic to show.
I’ll continue this story in another post. Meanwhile, find more about the code and the developer’s perspective on Bradley’s blog.