It’s nice to be back writing a new #iDevBlogADay post. I don’t have a lot of time to write a large and in-depth article as I’ve been really busy with some contracts, while burning the midnight petroleum on a new startup idea.
I’d like to quickly discuss an issue that has been nagging me over the past while.
Several times over the past year I’ve encountered graphic designers who are well-known for elegant websites or really well-designed desktop UI’s. However, they are relatively new to the new “medium” of mobile. This is fine and expected since mobile development is still somewhat new and everyone has to start out somewhere.
When you’re a small startup with little (or no) funding, you can’t afford the most experienced and talented designers to get your first prototype out the door (nor should you even consider it). You’re likely looking for students or people transitioning into the field.
I’ve compiled a quick list of some tips that all designers (AND devs) who are looking to break into the mobile space should review:
1) Get an iPhone/iPod touch, and an iPad
This is obviously a hefty investment (min. $800), but you NEED both the phone/touch and the iPad to really understand the behaviour of apps. Yes, buying games and other apps is research in this case. You must be doing this to understand the various common paradigms that apps in the store already use for UI/UX. You don’t need the latest iPad2. I highly recommend a 3rd or 4th gen touch or iPhone4. I mention 4th gen touch/iPhone4 because you also have to get used to cutting UI’s for retina displays.
I can’t stress the above point enough — it’s #1 for a reason. Don’t fool yourself and others into thinking you can design great UI’s and UX’s without knowing the device like the back of your hand. Pick up as many apps as you can afford. Analyze the good and the bad. This is part of your research into what really works and what doesn’t!
2) Get comfortable with the published iPhone/iPad Human Interface Guidelines (HIG)
3) Get used to wire-framing & quick mockups for iOS apps
Either using a notepad and pencil, or one of the many wire-framing apps for the desktop or iPad. Wire-framing allows you to quickly mock up the UI for the various use cases of the app. If you have any suggestions for YOUR fav wire framing software, leave a comment!
4) Use flash for mockups
I haven’t done this before, but lots of designers have mocked up the complete app using flash first. If you are proficient in Flash/Actionscript you can pump out some UI prototypes really quick. This allows you and your client to get a feel for the flow of the app and you can quickly realize what’s going to work and what won’t.
5) Get used to LiveView
http://www.zambetti.com/projects/liveview/ Many designers swear by it.
6) Talk to Developers
This is fairly dependent on the context, but work with the developer to figure out the most efficient way to cut up your table cell designs, backgrounds, stretchable buttons, etc.
7) Read, Read, Read
Search around some of the previous iDevBlogADay posts and find some of the many posts recommending books on the subject of design. I encourage you to leave a comment with your favourite design reference book.
All said and done, creating a sharp and effective UI is no trivial task. Be ready to iterate and ask for loads and loads of feedback on the design and app. Find some iPhone loving friends. Ask around on Twitter!
If you know of any other great tools that a designer can use for UI/UX design, please leave a reference in the comments.