More specifically, sharing works-in-progress and open sourcing design files.
This struck a chord with me. I know I’d love to see the
.sketch file for a
well-designed, real-world app. I’d love to hear a UI designer explaining
decisions they made. I’d love to see the early mockups which got scrubbed and
the thinking that went along with it. Sadly, these kinds of resources are
For an interesting discussion on the topic, I encourage you to listen to the podcast. In the meantime, here is my humble contribution to the field. I hope you find some value in it.
What we’ve got
You’ve never heard of my app. And that’s fine. You may not even think it’s particularly interesting or good-looking. And that’s fine too. I’m glad you’re here anyway. This is just my part in the discussion. I hope it doesn’t end with me.
I’m no big designer. I dabble. I design the UIs and icons for my apps and websites and I enjoy it quite a bit.
When designing ¿Cuánto es?, I kept all the intermediate steps. For the app UI itself and for the icon. Whenever I felt stuck, I just duplicated the artboard and tried a different direction. And even when I wasn’t stuck, I told myself to just duplicate and try something else anyway. Eventually I arrived at what I liked and moved to Android Studio.
For your enjoyment, here’s what it looked like.
A brief note about the app
¿Cuánto es? is a very very simple “flashcard” app for Android. It shows a random number (in decimals) and asks you to say it in Spanish. When ready, you can reveal the answer or hear it spoken by Android’s TTS engine.
There is no scoring and there are no rewards. I may one day expand beyond numerals, but right now this is it. It’s just a pet project. Don’t expect too much :)
This was a fun exercise because with numbers there’s no need for a word list. A number can be generated at random and its translation can be constructed in code.
As a flashcard/language learning app, I first looked for some inspiration at existing apps in the field. The obvious candidate was Duolingo. I also liked the design style of Lumosity. I pulled a few screenshots into Sketch and marked the elements I liked:
With some initial ideas in mind, I downloaded a simple Android UI kit from Sketchappsources and started drafting:
At some point I may revisit the “price tag” metaphor. I had some ideas on how to implement it and I still think it may be a fun exercise.
When designing the icon, I knew I was going with the “paper card” rather than the “blackboard” idea. For inspiration, I looked at the stylish Hangman icon.
- Download the app in Google Play
- Download the Sketch file here
- See the complete source code on GitHub
- The grungy font I’m using is Cabin Sketch by Pablo Impallari
Care to share your process? Or maybe you know of any resources like these? I’d love to hear from you! Let me know in the comments below or on Twitter.
If you find this content interesting and the discussion worthwhile, please share this post. Thanks!