ux and ui - designing for mobile
Post on 21-Nov-2014
84.109 views
Embed Size (px)
DESCRIPTION
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.TRANSCRIPT
- 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. Its 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
