UX and UI - Designing for Mobile
Post on 21-Nov-2014
84.108 views
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
<ul><li> 1. Designing for MOBILE </li> <li> 2. brought to you by </li> <li> 3. Click this button to tweet the information on each slide </li> <li> 4. iOS vs. Android </li> <li> 5. iOS vs. Android Who are you designing for? </li> <li> 6. iOS vs. Android Who are you designing for? Apple? or Android? </li> <li> 7. iOS vs. Android Who are you designing for? Keep in mind the benefits of each... as well as the specs </li> <li> 8. iOS vs. Android Who are you designing for? Keep in mind the benefits of each... as well as the specs </li> <li> 9. iOS vs. Android Who are you designing for? Keep in mind the benefits of each... as well as the specs </li> <li> 10. iOS vs. Android Who are you designing for? Keep in mind the benefits of each... as well as the specs </li> <li> 11. Mobile Usability </li> <li> 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 </li> <li> 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! </li> <li> 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. </li> <li> 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. </li> <li> 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. </li> <li> 17. Testing </li> <li> 18. Testing Test, test, test </li> <li> 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. </li> <li> 20. Navigation </li> <li> 21. Navigation Because design is limited, creating the right navigation is key to a good mobile interface. </li> <li> 22. Navigation Examples: </li> <li> 23. Navigation Examples: </li> <li> 24. Navigation Examples: </li> <li> 25. Gestures </li> <li> 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. </li> <li> 27. Gestures Examples: </li> <li> 28. Gestures Examples: </li> <li> 29. Gestures Examples: </li> <li> 30. Gestures Examples: </li> <li> 31. Resources </li> <li> 32. Resources Here are some of our favorite resources for mobile design: </li> <li> 33. Resources Here are some of our favorite resources for mobile design: </li> <li> 34. Resources Here are some of our favorite resources for mobile design: </li> <li> 35. Resources Here are some of our favorite resources for mobile design: </li> <li> 36. Resources Here are some of our favorite resources for mobile design: </li> <li> 37. Resources Here are some of our favorite resources for mobile design: </li> <li> 38. Examples </li> <li> 39. Examples And a few examples of awesome mobile design Pinterest </li> <li> 40. Examples And a few examples of awesome mobile design Moves </li> <li> 41. Examples And a few examples of awesome mobile design National Geographic Parks </li> <li> 42. Examples And a few examples of awesome mobile design Automatic </li> <li> 43. brought to you by Learn more about how we can help your mobile design </li> </ul>
