In this talk we covered the basics of sketching, wireframing, creative process, and practical advice on creating graphical assets for your mobile apps and games.
SKETCHING THE APP Every app starts with a sketch. If 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
GETTING STARTED SKETCHING It’s simple - just draw a rectangle 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
MORE ON SKETCHING Sketching tips • Start early, better to 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
MORE ON WIREFRAMING More information • Attend local UX meetups (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
GETTING STARTED WITH MOBILE Review each platform’s design docs: • iOS Human Interface Guidelines https://developer.apple.com/library/ios/documentation/ userexperience/conceptual/mobilehig/ • Android Design http://developer.android.com/design/index.html • Windows Phone http://developer.windowsphone.com/en-us/design
GETTING STARTED WITH MOBILE Get familiar with mobile design • 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.
STACKED VIEWS / TABLE VIEWS A large majority of views 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
iPHONE PSEUDO-FIXED-SIZE LAYOUTS Since all iPhones have the same width, iPhone designs can always assume a specific width. Combined with vertically scrollable areas, fixed-sized layouts can be achieved.
NAVIGATION Off-screen navigation Tabs One of the biggest mistakes in poorly designed apps is a confusion of various navigation schemes. Be sure you understand the difference between these items: Action bar
Make sure you understand your navigational flows. Consider how users drill into, and back out of your screens and how tabs or other navigational elements factor in. NAVIGATION
DESIGN ON THE RIGHT CANVAS The single biggest mistake you can make when designing for mobile is to never see it on a mobile device until you’re finished.
DESIGN TIPS • Be weary of contrast, brightness, and color variance across devices and screen types • Screen protectors (often used with Otter- boxes) make the screen seem sparkly and small text harder to read
IMAGE ASSETS You will need every image in your app 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%)
IMAGE ASSETS (Continued) Tips for dealing with image sizes: • 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
IMAGE ASSETS (Continued) Image source: http://unitid.nl/2012/07/10-free-tips-to-create-perfect-visual-assets-for-ios-and-android-tablet-and-mobile/ 9-patches are useful on Android to ensure higher- fidelity image scaling. This is useful for background images on scalable areas for example.
smartyp
keiko713
you
peisuke
yokawasa
cimadai
chiroito
chumajin
masa5555
wakamatsu_takumu
comucal
mraible
palark
gr2m
lara
jlugia
eileencodes
trallard
denniskardys
moore
mongodb
pauljervisheath
iamctodd
paulrobertlloyd