Practical Mobile UI / UX for Developers

Slide 1

Slide 1 text

PRACTICAL Presented by Roger Peters Atlanta Mobile Developers Group October 8th, 2013 MOBILE UI / UX FOR DEVELOPERS

Slide 2

Slide 2 text

ALL MOBILE Roger Peters (@SmartyP) Independent Mobile Developer AllMobileEverything.com SmartyPantsCoding.com SmartyP.net EVERYTHING

Slide 3

Slide 3 text

OVERVIEW Creative Process Sketching Wireframing Mobile Design Basics Creating Assets

Slide 4

Slide 4 text

CREATIVE PROCESS

Slide 5

Slide 5 text

CREATIVE PROCESS explore explore refine refine

Slide 6

Slide 6 text

CREATIVE PROCESS h"p://www.lostgarden.com/2010/08/visualizing-‐crea=ve-‐process.html

Slide 7

Slide 7 text

SKETCHING

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

FANCY SKETCHING TEMPLATES Free swag at all major conferences

Slide 11

Slide 11 text

PRACTICAL SKETCHING TEMPLATES These work just as well

Slide 12

Slide 12 text

EXAMPLES

Slide 13

Slide 13 text

EXAMPLES

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

WIREFRAMING

Slide 16

Slide 16 text

WIREFRAMING TOOLS Balsamiq Indigo Studio

Slide 17

Slide 17 text

fluid.com proto.io WIREFRAMING TOOLS

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

MOBILE DESIGN BASICS

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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.

Slide 22

Slide 22 text

DESIGN PATTERNS & INSPIRATION pttrns.com

Slide 23

Slide 23 text

DESIGN PATTERNS & INSPIRATION mobile-patterns.com

Slide 24

Slide 24 text

DESIGN PATTERNS & INSPIRATION dribbble.com

Slide 25

Slide 25 text

DESIGN PATTERNS & INSPIRATION Many more • patterntap.com • lovelyui.com • inspired-ui.com • tappgala.com • mobilemozaic.com • etc. Source: http://www.webresourcesdepot.com/12-mobile-app-design-galleries-for-inspiration/

Slide 26

Slide 26 text

EVERYTHING IS FUZZY Everything you design today should be designed with flexibility of screen size in mind. There are no fixed sizes.

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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.

Slide 29

Slide 29 text

STACKED VIEWS / TABLE VIEWS (Examples) Facebook Settings

Slide 30

Slide 30 text

Scoutmob STACKED VIEWS / TABLE VIEWS (Examples)

Slide 31

Slide 31 text

RELATIVE LAYOUTS Based on relationships between elements and the containing frame. Largely consists of docks and fills.

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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.

Slide 35

Slide 35 text

LiveView (iOS) LiveView for iPhone & iPad: http://www.zambetti.com/projects/liveview/

Slide 36

Slide 36 text

Android Design Preview Android Design Preview - http://code.google.com/p/android-ui-utils/

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

TIP: TRANSPARENCY PAPER FTW Use transparency paper to trace successive passes at what you have in mind. Gradually evolve into a refined structure.

Slide 39

Slide 39 text

KEEP IT SIMPLE Keep as close to the native stylings and interactions as possible with limited but intentional branding.

Slide 40

Slide 40 text

CREATING ASSETS

Slide 41

Slide 41 text

PHOTOSHOP TEMPLATES iOS7 GUI PSD - www.teehanlax.com/tools/ios7

Slide 42

Slide 42 text

ILLUSTRATOR TEMPLATES iOS7 Wireframing Kit for Illustrator - blakeperdue.com/ios7-wireframe-kit

Slide 43

Slide 43 text

http://graphicriver.net/item/retina-app-icons-creator/2478159 ICON STARTER TEMPLATES

Slide 44

Slide 44 text

ICON ASSETS Glyphish - www.glyphish.com

Slide 45

Slide 45 text

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%)

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

www.pixelresort.com/blog/app-icon-template ICON TEMPLATES

Slide 48

Slide 48 text

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.

Slide 49

Slide 49 text

IMAGE ASSETS (Continued) Android Resources: Android Asset Studio http://android-ui-utils.googlecode.com/hg/asset- studio/dist/index.html Supporting Multiple Screens http://developer.android.com/guide/practices/ screens_support.html

Slide 50

Slide 50 text

PROMO IMAGES placeit.net

Slide 51

Slide 51 text

MARKETPLACE ASSETS iTunes App Store allows images other than screenshots. Make sure to spend time creating any ‘featured app’ assets as well.

Slide 52

Slide 52 text

THANK YOU!

Slide 53

Slide 53 text

Q&A

Slide 54

Slide 54 text

ALL MOBILE Roger Peters (@SmartyP) Independent Mobile Developer AllMobileEverything.com SmartyPantsCoding.com SmartyP.net EVERYTHING