Creating a great user experience on mobile is both an art and a science. And adding in a beautiful user interface -- that takes real skill. Here are a few tips on designing for mobile from the design pros at HQ. Check us out at http://BuiltbyHQ.com.

1. Designing for
MOBILE

2. brought to you by

3. Click this button to tweet the
information on each slide

4. iOS vs. Android

5. iOS vs. Android
Who are you designing for?

6. iOS vs. Android
Who are you designing for?
Apple? or Android?

7. iOS vs. Android
Who are you designing for?
Keep in mind the benefits of each... as well as the specs

8. iOS vs. Android
Who are you designing for?
Keep in mind the benefits of each... as well as the specs

9. iOS vs. Android
Who are you designing for?
Keep in mind the benefits of each... as well as the specs

10. iOS vs. Android
Who are you designing for?
Keep in mind the benefits of each... as well as the specs

11. Mobile Usability

12. Mobile Usability
“The interface is your product. What
people see is what you're selling. If
you just slap an interface on at the
end, the gaps will show.”
- Getting Real, 37Signals

13. Mobile Usability
“The interface is your product. What
people see is what you're selling. If
you just slap an interface on at the
end, the gaps will show.”
- Getting Real, 37Signals
So...make it count!

14. Mobile Usability
A few tips:
Design with real content
Try to get all of your content up-front, then start
designing. Designing around placeholder images
and Lorem Ipsum text can lead to problems later.

15. Mobile Usability
A few tips:
Make it universally usable
Instead of designing for each device/browser,
design for every device/browser. This ensures
great usability regardless of device.

16. Mobile Usability
A few tips:
44 px rule
Apple recommends a touch space of
at least 44x44px, while Microsoft
suggests at least 34x34px. Make
buttons and other links easy to click.

17. Testing

18. Testing
Test, test, test

19. Testing
Test, test, test
Always test extensively
before going live (or even to
beta.) This will help you
avoid issues later, especially
on mobile apps.

20. Navigation

21. Navigation
Because design is limited, creating
the right navigation is key to a good
mobile interface.

22. Navigation
Examples:

23. Navigation
Examples:

24. Navigation
Examples:

25. Gestures

26. Gestures
Mobile design is much more focused on
interaction than web design. It’s important
to determine how each movement relates
to an action the user is taking.

27. Gestures
Examples:

28. Gestures
Examples:

29. Gestures
Examples:

30. Gestures
Examples:

31. Resources

32. Resources
Here are some of our favorite
resources for mobile design:

33. Resources
Here are some of our favorite
resources for mobile design:

34. Resources
Here are some of our favorite
resources for mobile design:

35. Resources
Here are some of our favorite
resources for mobile design:

36. Resources
Here are some of our favorite
resources for mobile design:

37. Resources
Here are some of our favorite
resources for mobile design:

38. Examples

39. Examples
And a few examples of
awesome mobile design
Pinterest

40. Examples
And a few examples of
awesome mobile design
Moves

41. Examples
And a few examples of
awesome mobile design
National
Geographic
Parks

42. Examples
And a few examples of
awesome mobile design
Automatic

43. brought to you by
Learn more about how we
can help your mobile design