you don’t have any sketches yet, then it’s little more than an idea. • Draw what the primary screens of the app might look like (repeat, repeat, repeat) • Nail down functionality of the app, how a user might use it, and navigational flows • Initially focus on quantity, not quality • Work towards final screens
and go from there. • Focus on functional elements (buttons, text fields, labels, menus, etc.) • Iterate, iterate, iterate - evolve from a loose idea to one (or several) series of screens that illustrate how the app might function
do over time than quickly • Use a bound notebook over loose-paper • If you’re using grid paper, a 2-to-3 ratio (ex: 16x24) matches the older size of iPhones (320x480) • Print templates online (konigi.com/tools/graph-paper) More information • Attend local UX meetups (IxDA Atlanta, Chi*Atlanta), attend regional UX conferences (SXSW, Big Design, etc.) or find presentation recordings on sketching • Attend local sketching workshops • Plenty of books on the subject
(IxDA Atlanta, Chi*Atlanta), attend regional UX conferences (SXSW, Big Design, etc.) or find presentation recordings on wireframing • Attend local wireframing workshops • Plenty of books on the subject
Spend time looking at all the apps you use from a design perspective. • Seek out and frequently use apps which are getting buzz. Look at how they are differentiating themselves. • Stay on top of industry trends • Collect screenshots of apps you find interesting, consider storing them in something like Evernote.
in mobile apps use stacked views inside of vertically scrolling areas. This allows for a (mostly) fixed height per row, and limits scaling to vertical (which tends to have smaller variance). Note: Row heights can change per row, not illustrated above
in numerous resolutions. • iOS is a bit easier in that you know the width of the screen to render at, and just have to provide retina (@2x) and non-retina images • Android has a lot of screen variance, so it supports defining various layouts for based on screen width or classification • Android supports numerous image sizes to support low memory devices to tablets. You typically will have 2-4 versions of each image at various resolutions (ex: 75%, 100% (baseline), 150%, 200%)
Use image scaling automation whenever possible. • There are scripts for Photoshop and Fireworks for generating ldpi (0.75x), mdpi (1.0x), hdpi (1.5x), and xhdpi (2.0x) sizes for Android. • Icons • There are numerous templates for generating icon sizes from one master 1024x1024 or 2048x2048 image • You will likely need to touchup any smaller icon images that are generated