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.
1. Welcome!
Social Love
#CropMeetup
Twitter: Crop_meetup
http://www.meetup.com/designcrop/
Tuesday, September 25, 12
2. 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
4. Planning and UI
Flow Mapping
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
5. Planning and UI
Flow Mapping
Flow mapping is something you
refer back to constantly as you
move along the design process.
Tuesday, September 25, 12
6. Planning and UI
Flow Mapping
End with high fidelity
flow mapping — see if
your more defined UI still
makes sense and finish
your main tasks.
Tuesday, September 25, 12
7. Planning and UI
Wireframing
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
8. Planning and UI
Wireframing Tips
Be a user first.
Befriend the device you are
wireframing for.
Work with Curtis.
Tuesday, September 25, 12
9. Planning and UI
UI
Know what you DON’T have
to design.
Follow guidelines.
Don’t reinvent the wheel.
Tuesday, September 25, 12
10. Planning and UI
iOS basic elements
Activity bar
Navigation bar
Don’t do this.
Tab bar
Tuesday, September 25, 12
11. Planning and UI
iOS
Clickable elements: 44x44 or 88x88 (retina)
App icons: start at 1024x1024 (retina)
Tuesday, September 25, 12
12. Planning and UI
iOS - don’t go below 13pt
20pt for titles and buttons labels 17pt for list labels
13pt for activity bar
12pt for app icons
15pt for normal body text
Tuesday, September 25, 12
18. Design
Do None Of This
Tuesday, September 25, 12
19. Design
Design Trends
Tuesday, September 25, 12
20. Design
Mo Clutter, Mo Problems
Tuesday, September 25, 12
21. Design
Have Fun With Games!
Tuesday, September 25, 12
22. Design
Form Can Have Function
Tuesday, September 25, 12
23. Development
Don’t Piss On Developers
Squeezing too many items onto a tiny
screen (phone-size.com)
Designer
=
Too much transparency = Bad
Smaller, stretchable images are better
Developer
Never include text in images unless
A you’re producing those images for
every resolution
Tuesday, September 25, 12
24. Development
Compatibility Is Key!
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