ux and ui - designing for mobile

Download UX and UI - Designing for Mobile

Post on 21-Nov-2014

84.109 views

Category:

Design

1 download

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