The Michael Jackson documentary, "This is It", included a behind-the-scenes look at Michael Jackson’s preparation for his final tour, that tragically would never happen. In one scene, he has an exchange with the keyboard player that goes roughly as follows:
Michael Jackson (to keyboard player) : That isn’t right
Keyboard player : How do you want it? I can do it anyway you want it.
Michael Jackson : Just make it sound like on my CD.
I recall laughing at that time, thinking yeah "just like the CD". What the keyboard player had been doing sounded like the CD to me, but apparently to Michael, it was off.
Obviously my untrained ear didn’t know what to look for. Had I been playing keyboard, the instruction of "make it sound like the CD" wouldn’t have helped me at all. I would need him to break it down for me into something more tangible. E.g Faster, slower, louder, softer, etc…
User interface design is very similar to music in this sense. When we use a well-designed UI, it just "feels" nice, but we may not know why. Those who are skilled in design may be able to break a successful design down into components - but the rest of us can only sit and marvel at the magic.
I have blogged, in the past, about UI design in Codename One. In this tutorial, I walk, step by step, through the process of converting a PSD file into a mobile app. Unfortunately, upon re-reading that tutorial, I realize that I completely skipped one of the most important steps. I essentially began with "let’s make our app look just like the design", but I didn’t describe what it meant to look "just like the design". In this blog post, I’d like to unpack what "just like the design" means to me, in the context of mobile app development.
So, what does "Just like the design" mean? A broad overview is that fonts, colors, padding, margin, and alignment must match the design. In addition, the sections of the UI must be retained correctly. The last part (sections), is most relevant when adapting the UI to different screen sizes. Below, I go into detail on each of these aspects of design.
| || I come from the "programming" side of the fence. I don’t have any formal design training, other than having read a few books on the subject, and tips that I have picked in in past projects by actual designers. |