UX and UI - Designing for Mobile
description
Transcript of UX and UI - Designing for Mobile
![Page 3: UX and UI - Designing for Mobile](https://reader031.fdocuments.net/reader031/viewer/2022020101/546e296fb4af9fb4268b4577/html5/thumbnails/3.jpg)
Click this button to tweet the information on each slide
![Page 5: UX and UI - Designing for Mobile](https://reader031.fdocuments.net/reader031/viewer/2022020101/546e296fb4af9fb4268b4577/html5/thumbnails/5.jpg)
iOS vs. Android
Who are you designing for?
![Page 6: UX and UI - Designing for Mobile](https://reader031.fdocuments.net/reader031/viewer/2022020101/546e296fb4af9fb4268b4577/html5/thumbnails/6.jpg)
Apple? or Android?
iOS vs. Android
Who are you designing for?
![Page 7: UX and UI - Designing for Mobile](https://reader031.fdocuments.net/reader031/viewer/2022020101/546e296fb4af9fb4268b4577/html5/thumbnails/7.jpg)
Keep in mind the benefits of each... as well as the specs
iOS vs. Android
Who are you designing for?
![Page 8: UX and UI - Designing for Mobile](https://reader031.fdocuments.net/reader031/viewer/2022020101/546e296fb4af9fb4268b4577/html5/thumbnails/8.jpg)
iOS vs. Android
Who are you designing for?
Keep in mind the benefits of each... as well as the specs
![Page 9: UX and UI - Designing for Mobile](https://reader031.fdocuments.net/reader031/viewer/2022020101/546e296fb4af9fb4268b4577/html5/thumbnails/9.jpg)
Keep in mind the benefits of each... as well as the specs
iOS vs. Android
Who are you designing for?
![Page 10: UX and UI - Designing for Mobile](https://reader031.fdocuments.net/reader031/viewer/2022020101/546e296fb4af9fb4268b4577/html5/thumbnails/10.jpg)
iOS vs. Android
Who are you designing for?
Keep in mind the benefits of each... as well as the specs
![Page 12: UX and UI - Designing for Mobile](https://reader031.fdocuments.net/reader031/viewer/2022020101/546e296fb4af9fb4268b4577/html5/thumbnails/12.jpg)
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
![Page 13: UX and UI - Designing for Mobile](https://reader031.fdocuments.net/reader031/viewer/2022020101/546e296fb4af9fb4268b4577/html5/thumbnails/13.jpg)
“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
Mobile Usability
So...make it count!
![Page 14: UX and UI - Designing for Mobile](https://reader031.fdocuments.net/reader031/viewer/2022020101/546e296fb4af9fb4268b4577/html5/thumbnails/14.jpg)
Mobile Usability
A few tips:
Design with real contentTry to get all of your content up-front, then start designing. Designing around placeholder images and Lorem Ipsum text can lead to problems later.
![Page 15: UX and UI - Designing for Mobile](https://reader031.fdocuments.net/reader031/viewer/2022020101/546e296fb4af9fb4268b4577/html5/thumbnails/15.jpg)
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.
![Page 16: UX and UI - Designing for Mobile](https://reader031.fdocuments.net/reader031/viewer/2022020101/546e296fb4af9fb4268b4577/html5/thumbnails/16.jpg)
Mobile Usability
A few tips:
44 px ruleApple recommends a touch space of at least 44x44px, while Microsoft suggests at least 34x34px. Make buttons and other links easy to click.
![Page 18: UX and UI - Designing for Mobile](https://reader031.fdocuments.net/reader031/viewer/2022020101/546e296fb4af9fb4268b4577/html5/thumbnails/18.jpg)
Testing
Test, test, test
![Page 19: UX and UI - Designing for Mobile](https://reader031.fdocuments.net/reader031/viewer/2022020101/546e296fb4af9fb4268b4577/html5/thumbnails/19.jpg)
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.
![Page 21: UX and UI - Designing for Mobile](https://reader031.fdocuments.net/reader031/viewer/2022020101/546e296fb4af9fb4268b4577/html5/thumbnails/21.jpg)
Navigation
Because design is limited, creating the right navigation is key to a good
mobile interface.
![Page 22: UX and UI - Designing for Mobile](https://reader031.fdocuments.net/reader031/viewer/2022020101/546e296fb4af9fb4268b4577/html5/thumbnails/22.jpg)
Navigation
Examples:
![Page 23: UX and UI - Designing for Mobile](https://reader031.fdocuments.net/reader031/viewer/2022020101/546e296fb4af9fb4268b4577/html5/thumbnails/23.jpg)
Navigation
Examples:
![Page 24: UX and UI - Designing for Mobile](https://reader031.fdocuments.net/reader031/viewer/2022020101/546e296fb4af9fb4268b4577/html5/thumbnails/24.jpg)
Navigation
Examples:
![Page 26: UX and UI - Designing for Mobile](https://reader031.fdocuments.net/reader031/viewer/2022020101/546e296fb4af9fb4268b4577/html5/thumbnails/26.jpg)
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.
![Page 27: UX and UI - Designing for Mobile](https://reader031.fdocuments.net/reader031/viewer/2022020101/546e296fb4af9fb4268b4577/html5/thumbnails/27.jpg)
Gestures
Examples:
![Page 28: UX and UI - Designing for Mobile](https://reader031.fdocuments.net/reader031/viewer/2022020101/546e296fb4af9fb4268b4577/html5/thumbnails/28.jpg)
Gestures
Examples:
![Page 29: UX and UI - Designing for Mobile](https://reader031.fdocuments.net/reader031/viewer/2022020101/546e296fb4af9fb4268b4577/html5/thumbnails/29.jpg)
Gestures
Examples:
![Page 30: UX and UI - Designing for Mobile](https://reader031.fdocuments.net/reader031/viewer/2022020101/546e296fb4af9fb4268b4577/html5/thumbnails/30.jpg)
Gestures
Examples:
![Page 32: UX and UI - Designing for Mobile](https://reader031.fdocuments.net/reader031/viewer/2022020101/546e296fb4af9fb4268b4577/html5/thumbnails/32.jpg)
Resources
Here are some of our favoriteresources for mobile design:
![Page 33: UX and UI - Designing for Mobile](https://reader031.fdocuments.net/reader031/viewer/2022020101/546e296fb4af9fb4268b4577/html5/thumbnails/33.jpg)
Resources
Here are some of our favoriteresources for mobile design:
![Page 34: UX and UI - Designing for Mobile](https://reader031.fdocuments.net/reader031/viewer/2022020101/546e296fb4af9fb4268b4577/html5/thumbnails/34.jpg)
Resources
Here are some of our favoriteresources for mobile design:
![Page 35: UX and UI - Designing for Mobile](https://reader031.fdocuments.net/reader031/viewer/2022020101/546e296fb4af9fb4268b4577/html5/thumbnails/35.jpg)
Resources
Here are some of our favoriteresources for mobile design:
![Page 36: UX and UI - Designing for Mobile](https://reader031.fdocuments.net/reader031/viewer/2022020101/546e296fb4af9fb4268b4577/html5/thumbnails/36.jpg)
Resources
Here are some of our favoriteresources for mobile design:
![Page 37: UX and UI - Designing for Mobile](https://reader031.fdocuments.net/reader031/viewer/2022020101/546e296fb4af9fb4268b4577/html5/thumbnails/37.jpg)
Resources
Here are some of our favoriteresources for mobile design:
![Page 39: UX and UI - Designing for Mobile](https://reader031.fdocuments.net/reader031/viewer/2022020101/546e296fb4af9fb4268b4577/html5/thumbnails/39.jpg)
Examples
And a few examples ofawesome mobile design
![Page 40: UX and UI - Designing for Mobile](https://reader031.fdocuments.net/reader031/viewer/2022020101/546e296fb4af9fb4268b4577/html5/thumbnails/40.jpg)
Examples
And a few examples ofawesome mobile design
Moves
![Page 41: UX and UI - Designing for Mobile](https://reader031.fdocuments.net/reader031/viewer/2022020101/546e296fb4af9fb4268b4577/html5/thumbnails/41.jpg)
Examples
And a few examples ofawesome mobile design
NationalGeographic
Parks
![Page 42: UX and UI - Designing for Mobile](https://reader031.fdocuments.net/reader031/viewer/2022020101/546e296fb4af9fb4268b4577/html5/thumbnails/42.jpg)
Examples
And a few examples ofawesome mobile design
Automatic
![Page 43: UX and UI - Designing for Mobile](https://reader031.fdocuments.net/reader031/viewer/2022020101/546e296fb4af9fb4268b4577/html5/thumbnails/43.jpg)
brought to you by
Learn more about how we
can help your mobile design