mobile app design - crop meetup
DESCRIPTION
As mobile devices take over the world it is hard to ignore useful and important they can be. But without useful apps, these devices are just overpriced coke mirrors cheese plates. For those of us in the design community who choose to design and build mobile apps, there are many rules and standards we can follow to streamline the process and let us focus on making apps that do cool things and less time reinventing wheels.TRANSCRIPT
![Page 1: Mobile App Design - Crop Meetup](https://reader033.vdocuments.mx/reader033/viewer/2022060108/5550fcebb4c90501448b4cba/html5/thumbnails/1.jpg)
Welcome!
Social Love#CropMeetup
Twitter: Crop_meetuphttp://www.meetup.com/designcrop/
Tuesday, September 25, 12
![Page 2: Mobile App Design - Crop Meetup](https://reader033.vdocuments.mx/reader033/viewer/2022060108/5550fcebb4c90501448b4cba/html5/thumbnails/2.jpg)
Mobile devices NOW outnumber mobile homes in america!
By a lot!
So let’s stop making mud flaps and start making mobile apps.
Tuesday, September 25, 12
![Page 3: Mobile App Design - Crop Meetup](https://reader033.vdocuments.mx/reader033/viewer/2022060108/5550fcebb4c90501448b4cba/html5/thumbnails/3.jpg)
Planning and UI
Design
Development
Tuesday, September 25, 12
![Page 4: Mobile App Design - Crop Meetup](https://reader033.vdocuments.mx/reader033/viewer/2022060108/5550fcebb4c90501448b4cba/html5/thumbnails/4.jpg)
Flow MappingPlanning and UI
Start with low fidelity, simple shapes suggesting basic functions on each screen, and connect the dots, figure out how the app flows from one screen to the next.
Tuesday, September 25, 12
![Page 5: Mobile App Design - Crop Meetup](https://reader033.vdocuments.mx/reader033/viewer/2022060108/5550fcebb4c90501448b4cba/html5/thumbnails/5.jpg)
Flow MappingPlanning and UI
Flow mapping is something you refer back to constantly as you
move along the design process.
Tuesday, September 25, 12
![Page 6: Mobile App Design - Crop Meetup](https://reader033.vdocuments.mx/reader033/viewer/2022060108/5550fcebb4c90501448b4cba/html5/thumbnails/6.jpg)
Flow MappingPlanning and UI
End with high fidelity flow mapping — see if your more defined UI still makes sense and finish your main tasks.
Tuesday, September 25, 12
![Page 7: Mobile App Design - Crop Meetup](https://reader033.vdocuments.mx/reader033/viewer/2022060108/5550fcebb4c90501448b4cba/html5/thumbnails/7.jpg)
WireframingPlanning and UI
Pick up a pencil or a wireframing program — how detailed is up to you. For client approval I’d suggest mid-high range
Tuesday, September 25, 12
![Page 8: Mobile App Design - Crop Meetup](https://reader033.vdocuments.mx/reader033/viewer/2022060108/5550fcebb4c90501448b4cba/html5/thumbnails/8.jpg)
Wireframing TipsPlanning and UI
Be a user first. Befriend the device you are
wireframing for.
Work with Curtis.
Tuesday, September 25, 12
![Page 9: Mobile App Design - Crop Meetup](https://reader033.vdocuments.mx/reader033/viewer/2022060108/5550fcebb4c90501448b4cba/html5/thumbnails/9.jpg)
UIPlanning and UI
Know what you DON’T have to design.
Follow guidelines.Don’t reinvent the wheel.
Tuesday, September 25, 12
![Page 10: Mobile App Design - Crop Meetup](https://reader033.vdocuments.mx/reader033/viewer/2022060108/5550fcebb4c90501448b4cba/html5/thumbnails/10.jpg)
iOS basic elementsPlanning and UI
Activity bar
Navigation bar
Tab bar
Don’t do this.
Tuesday, September 25, 12
![Page 11: Mobile App Design - Crop Meetup](https://reader033.vdocuments.mx/reader033/viewer/2022060108/5550fcebb4c90501448b4cba/html5/thumbnails/11.jpg)
iOSPlanning and UI
Clickable elements: 44x44 or 88x88 (retina)
App icons: start at 1024x1024 (retina)
Tuesday, September 25, 12
![Page 12: Mobile App Design - Crop Meetup](https://reader033.vdocuments.mx/reader033/viewer/2022060108/5550fcebb4c90501448b4cba/html5/thumbnails/12.jpg)
iOS - don’t go below 13ptPlanning and UI
20pt for titles and buttons labels
15pt for normal body text
17pt for list labels
13pt for activity bar
12pt for app icons
Tuesday, September 25, 12
![Page 13: Mobile App Design - Crop Meetup](https://reader033.vdocuments.mx/reader033/viewer/2022060108/5550fcebb4c90501448b4cba/html5/thumbnails/13.jpg)
AndroidPlanning and UI
Tuesday, September 25, 12
![Page 14: Mobile App Design - Crop Meetup](https://reader033.vdocuments.mx/reader033/viewer/2022060108/5550fcebb4c90501448b4cba/html5/thumbnails/14.jpg)
Android ThemesPlanning and UI
Tuesday, September 25, 12
![Page 15: Mobile App Design - Crop Meetup](https://reader033.vdocuments.mx/reader033/viewer/2022060108/5550fcebb4c90501448b4cba/html5/thumbnails/15.jpg)
Android ThemesPlanning and UI
Launcher icons: 48x48
Tuesday, September 25, 12
![Page 16: Mobile App Design - Crop Meetup](https://reader033.vdocuments.mx/reader033/viewer/2022060108/5550fcebb4c90501448b4cba/html5/thumbnails/16.jpg)
Work from your wireframesDesign
Should =
Tuesday, September 25, 12
![Page 17: Mobile App Design - Crop Meetup](https://reader033.vdocuments.mx/reader033/viewer/2022060108/5550fcebb4c90501448b4cba/html5/thumbnails/17.jpg)
Do All This Design
Tuesday, September 25, 12
![Page 18: Mobile App Design - Crop Meetup](https://reader033.vdocuments.mx/reader033/viewer/2022060108/5550fcebb4c90501448b4cba/html5/thumbnails/18.jpg)
Do None Of This Design
Tuesday, September 25, 12
![Page 19: Mobile App Design - Crop Meetup](https://reader033.vdocuments.mx/reader033/viewer/2022060108/5550fcebb4c90501448b4cba/html5/thumbnails/19.jpg)
Design TrendsDesign
Tuesday, September 25, 12
![Page 20: Mobile App Design - Crop Meetup](https://reader033.vdocuments.mx/reader033/viewer/2022060108/5550fcebb4c90501448b4cba/html5/thumbnails/20.jpg)
Mo Clutter, Mo ProblemsDesign
Tuesday, September 25, 12
![Page 21: Mobile App Design - Crop Meetup](https://reader033.vdocuments.mx/reader033/viewer/2022060108/5550fcebb4c90501448b4cba/html5/thumbnails/21.jpg)
Have Fun With Games!Design
Tuesday, September 25, 12
![Page 22: Mobile App Design - Crop Meetup](https://reader033.vdocuments.mx/reader033/viewer/2022060108/5550fcebb4c90501448b4cba/html5/thumbnails/22.jpg)
Form Can Have FunctionDesign
Tuesday, September 25, 12
![Page 23: Mobile App Design - Crop Meetup](https://reader033.vdocuments.mx/reader033/viewer/2022060108/5550fcebb4c90501448b4cba/html5/thumbnails/23.jpg)
Don’t Piss On DevelopersDevelopment
Squeezing too many items onto a tiny screen (phone-size.com)
Too much transparency = Bad
Smaller, stretchable images are better
Never include text in images unless you’re producing those images for every resolution
Designer
Developer
A
=
Tuesday, September 25, 12
![Page 24: Mobile App Design - Crop Meetup](https://reader033.vdocuments.mx/reader033/viewer/2022060108/5550fcebb4c90501448b4cba/html5/thumbnails/24.jpg)
Compatibility Is Key!Development
2 resolutions for iOS, at least 4 different pixel densities and at least 5 resolutions for Android
If you want an app to look exactly alike on all Android devices, you cannot rely on any stock UI elements (look and feel varies between different hardware vendors)
Tuesday, September 25, 12
![Page 25: Mobile App Design - Crop Meetup](https://reader033.vdocuments.mx/reader033/viewer/2022060108/5550fcebb4c90501448b4cba/html5/thumbnails/25.jpg)
The End!
Tuesday, September 25, 12
![Page 26: Mobile App Design - Crop Meetup](https://reader033.vdocuments.mx/reader033/viewer/2022060108/5550fcebb4c90501448b4cba/html5/thumbnails/26.jpg)
Thanks for Coming!
And special thanks to our sponsors:
Tuesday, September 25, 12
![Page 27: Mobile App Design - Crop Meetup](https://reader033.vdocuments.mx/reader033/viewer/2022060108/5550fcebb4c90501448b4cba/html5/thumbnails/27.jpg)
Social LoveCrop
http://www.meetup.com/designcrop/Twitter: Crop_meetup | #CropMeetup
HostAtlantic BT / twitter: @atlanticbt / http://www.atlanticbt.com
Co-OrganizerEileen Allen / twitter: @eileenallen / dribbble: eileenallen
Co-OrganizerCorey Brinkmann / twitter: @cbrinkmann / dribbble: cbrinkmann
PresentersNancy Jin / Corey Brinkmann / Curtis Martin / Helen Shaffer
Tuesday, September 25, 12