UX and UI - Designing for Mobile

Download UX and UI - Designing for Mobile

Post on 21-Apr-2017

158.507 views

Category:

Design

1 download

TRANSCRIPT

<ul><li><p>Designing for</p><p>MOBILE</p><p>http://www.builtbyhq.com?referral=slideshare_title</p></li><li><p>brought to you by</p><p>http://www.builtbyhq.com?referral=slideshare_start</p></li><li><p>Click this button to tweet the information on each slide</p><p>https://twitter.com/intent/tweet?source=webclient&amp;text=Awesome%20tips%20from%20builtbyhq.com%20on%20%23ui%20and%20%23ux%20design%20for%20mobile.%20Check%20out%20the%20deck%20on%20@slideshare:%20http://www.slideshare.net/BuiltByHQ/designing-for-mobile-39695678</p></li><li><p>iOS vs. Android</p><p>http://www.builtbyhq.com?referral=slideshare</p></li><li><p>iOS vs. Android</p><p>Who are you designing for?</p><p>http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&amp;text=Awesome%20tips%20from%20builtbyhq.com%20on%20%23ui%20and%20%23ux%20design%20for%20mobile.%20Check%20out%20the%20deck%20on%20@slideshare:%20http://www.slideshare.net/BuiltByHQ/designing-for-mobile-39695678</p></li><li><p>Apple? or Android?</p><p>iOS vs. Android</p><p>Who are you designing for?</p><p>http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&amp;text=Awesome%20tips%20from%20builtbyhq.com%20on%20%23ui%20and%20%23ux%20design%20for%20mobile.%20Check%20out%20the%20deck%20on%20@slideshare:%20http://www.slideshare.net/BuiltByHQ/designing-for-mobile-39695678</p></li><li><p>Keep in mind the benefits of each... as well as the specs</p><p>iOS vs. Android</p><p>Who are you designing for?</p><p>http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&amp;text=Awesome%20tips%20from%20builtbyhq.com%20on%20%23ui%20and%20%23ux%20design%20for%20mobile.%20Check%20out%20the%20deck%20on%20@slideshare:%20http://www.slideshare.net/BuiltByHQ/designing-for-mobile-39695678</p></li><li><p>iOS vs. Android</p><p>Who are you designing for?</p><p>Keep in mind the benefits of each... as well as the specs</p><p>http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&amp;text=Awesome%20tips%20from%20builtbyhq.com%20on%20%23ui%20and%20%23ux%20design%20for%20mobile.%20Check%20out%20the%20deck%20on%20@slideshare:%20http://www.slideshare.net/BuiltByHQ/designing-for-mobile-39695678</p></li><li><p>Keep in mind the benefits of each... as well as the specs</p><p>iOS vs. Android</p><p>Who are you designing for?</p><p>http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&amp;text=Awesome%20tips%20from%20builtbyhq.com%20on%20%23ui%20and%20%23ux%20design%20for%20mobile.%20Check%20out%20the%20deck%20on%20@slideshare:%20http://www.slideshare.net/BuiltByHQ/designing-for-mobile-39695678</p></li><li><p>iOS vs. Android</p><p>Who are you designing for?</p><p>Keep in mind the benefits of each... as well as the specs</p><p>http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&amp;text=Awesome%20tips%20from%20builtbyhq.com%20on%20%23ui%20and%20%23ux%20design%20for%20mobile.%20Check%20out%20the%20deck%20on%20@slideshare:%20http://www.slideshare.net/BuiltByHQ/designing-for-mobile-39695678</p></li><li><p>Mobile Usability</p><p>http://www.builtbyhq.com?referral=slideshare</p></li><li><p>Mobile Usability</p><p>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. </p><p>- Getting Real, 37Signals</p><p>http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&amp;text=Awesome%20tips%20from%20builtbyhq.com%20on%20%23ui%20and%20%23ux%20design%20for%20mobile.%20Check%20out%20the%20deck%20on%20@slideshare:%20http://www.slideshare.net/BuiltByHQ/designing-for-mobile-39695678</p></li><li><p>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. </p><p>- Getting Real, 37Signals</p><p>Mobile Usability</p><p>So...make it count!</p><p>http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&amp;text=Awesome%20tips%20from%20builtbyhq.com%20on%20%23ui%20and%20%23ux%20design%20for%20mobile.%20Check%20out%20the%20deck%20on%20@slideshare:%20http://www.slideshare.net/BuiltByHQ/designing-for-mobile-39695678</p></li><li><p>Mobile Usability</p><p>A few tips:</p><p>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.</p><p>http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&amp;text=Awesome%20tips%20from%20builtbyhq.com%20on%20%23ui%20and%20%23ux%20design%20for%20mobile.%20Check%20out%20the%20deck%20on%20@slideshare:%20http://www.slideshare.net/BuiltByHQ/designing-for-mobile-39695678</p></li><li><p>Mobile Usability</p><p>A few tips:</p><p>Make it universally usable Instead of designing for each device/browser, design for every device/browser. This ensures </p><p>great usability regardless of device. </p><p>http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&amp;text=Awesome%20tips%20from%20builtbyhq.com%20on%20%23ui%20and%20%23ux%20design%20for%20mobile.%20Check%20out%20the%20deck%20on%20@slideshare:%20http://www.slideshare.net/BuiltByHQ/designing-for-mobile-39695678</p></li><li><p>Mobile Usability</p><p>A few tips:</p><p>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. </p><p>http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&amp;text=Awesome%20tips%20from%20builtbyhq.com%20on%20%23ui%20and%20%23ux%20design%20for%20mobile.%20Check%20out%20the%20deck%20on%20@slideshare:%20http://www.slideshare.net/BuiltByHQ/designing-for-mobile-39695678</p></li><li><p>Testing</p><p>http://www.builtbyhq.com?referral=slideshare</p></li><li><p>Testing</p><p>Test, test, test</p><p>http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&amp;text=Awesome%20tips%20from%20builtbyhq.com%20on%20%23ui%20and%20%23ux%20design%20for%20mobile.%20Check%20out%20the%20deck%20on%20@slideshare:%20http://www.slideshare.net/BuiltByHQ/designing-for-mobile-39695678</p></li><li><p>Testing</p><p>Test, test, test</p><p>Always test extensively before going live (or even to beta.) This will help you avoid issues later, especially on mobile apps.</p><p>http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&amp;text=Awesome%20tips%20from%20builtbyhq.com%20on%20%23ui%20and%20%23ux%20design%20for%20mobile.%20Check%20out%20the%20deck%20on%20@slideshare:%20http://www.slideshare.net/BuiltByHQ/designing-for-mobile-39695678</p></li><li><p>Navigation</p><p>http://www.builtbyhq.com?referral=slideshare</p></li><li><p>Navigation</p><p>Because design is limited, creating the right navigation is key to a good </p><p>mobile interface.</p><p>http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&amp;text=Awesome%20tips%20from%20builtbyhq.com%20on%20%23ui%20and%20%23ux%20design%20for%20mobile.%20Check%20out%20the%20deck%20on%20@slideshare:%20http://www.slideshare.net/BuiltByHQ/designing-for-mobile-39695678</p></li><li><p>Navigation</p><p>Examples:</p><p>http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&amp;text=Awesome%20tips%20from%20builtbyhq.com%20on%20%23ui%20and%20%23ux%20design%20for%20mobile.%20Check%20out%20the%20deck%20on%20@slideshare:%20http://www.slideshare.net/BuiltByHQ/designing-for-mobile-39695678</p></li><li><p>Navigation</p><p>Examples:</p><p>http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&amp;text=Awesome%20tips%20from%20builtbyhq.com%20on%20%23ui%20and%20%23ux%20design%20for%20mobile.%20Check%20out%20the%20deck%20on%20@slideshare:%20http://www.slideshare.net/BuiltByHQ/designing-for-mobile-39695678</p></li><li><p>Navigation</p><p>Examples:</p><p>http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&amp;text=Awesome%20tips%20from%20builtbyhq.com%20on%20%23ui%20and%20%23ux%20design%20for%20mobile.%20Check%20out%20the%20deck%20on%20@slideshare:%20http://www.slideshare.net/BuiltByHQ/designing-for-mobile-39695678</p></li><li><p>Gestures</p><p>http://www.builtbyhq.com?referral=slideshare</p></li><li><p>Gestures</p><p>Mobile design is much more focused on interaction than web design. Its important to determine how each movement relates </p><p>to an action the user is taking.</p><p>http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&amp;text=Awesome%20tips%20from%20builtbyhq.com%20on%20%23ui%20and%20%23ux%20design%20for%20mobile.%20Check%20out%20the%20deck%20on%20@slideshare:%20http://www.slideshare.net/BuiltByHQ/designing-for-mobile-39695678</p></li><li><p>Gestures</p><p>Examples:</p><p>http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&amp;text=Awesome%20tips%20from%20builtbyhq.com%20on%20%23ui%20and%20%23ux%20design%20for%20mobile.%20Check%20out%20the%20deck%20on%20@slideshare:%20http://www.slideshare.net/BuiltByHQ/designing-for-mobile-39695678</p></li><li><p>Gestures</p><p>Examples:</p><p>http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&amp;text=Awesome%20tips%20from%20builtbyhq.com%20on%20%23ui%20and%20%23ux%20design%20for%20mobile.%20Check%20out%20the%20deck%20on%20@slideshare:%20http://www.slideshare.net/BuiltByHQ/designing-for-mobile-39695678</p></li><li><p>Gestures</p><p>Examples:</p><p>http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&amp;text=Awesome%20tips%20from%20builtbyhq.com%20on%20%23ui%20and%20%23ux%20design%20for%20mobile.%20Check%20out%20the%20deck%20on%20@slideshare:%20http://www.slideshare.net/BuiltByHQ/designing-for-mobile-39695678</p></li><li><p>Gestures</p><p>Examples:</p><p>http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&amp;text=Awesome%20tips%20from%20builtbyhq.com%20on%20%23ui%20and%20%23ux%20design%20for%20mobile.%20Check%20out%20the%20deck%20on%20@slideshare:%20http://www.slideshare.net/BuiltByHQ/designing-for-mobile-39695678</p></li><li><p>Resources</p><p>http://www.builtbyhq.com?referral=slideshare</p></li><li><p>Resources</p><p>Here are some of our favoriteresources for mobile design:</p><p>http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&amp;text=Awesome%20tips%20from%20builtbyhq.com%20on%20%23ui%20and%20%23ux%20design%20for%20mobile.%20Check%20out%20the%20deck%20on%20@slideshare:%20http://www.slideshare.net/BuiltByHQ/designing-for-mobile-39695678</p></li><li><p>Resources</p><p>Here are some of our favoriteresources for mobile design:</p><p>http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&amp;text=Awesome%20tips%20from%20builtbyhq.com%20on%20%23ui%20and%20%23ux%20design%20for%20mobile.%20Check%20out%20the%20deck%20on%20@slideshare:%20http://www.slideshare.net/BuiltByHQ/designing-for-mobile-39695678</p></li><li><p>Resources</p><p>Here are some of our favoriteresources for mobile design:</p><p>http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&amp;text=Awesome%20tips%20from%20builtbyhq.com%20on%20%23ui%20and%20%23ux%20design%20for%20mobile.%20Check%20out%20the%20deck%20on%20@slideshare:%20http://www.slideshare.net/BuiltByHQ/designing-for-mobile-39695678</p></li><li><p>Resources</p><p>Here are some of our favoriteresources for mobile design:</p><p>http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&amp;text=Awesome%20tips%20from%20builtbyhq.com%20on%20%23ui%20and%20%23ux%20design%20for%20mobile.%20Check%20out%20the%20deck%20on%20@slideshare:%20http://www.slideshare.net/BuiltByHQ/designing-for-mobile-39695678</p></li><li><p>Resources</p><p>Here are some of our favoriteresources for mobile design:</p><p>http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&amp;text=Awesome%20tips%20from%20builtbyhq.com%20on%20%23ui%20and%20%23ux%20design%20for%20mobile.%20Check%20out%20the%20deck%20on%20@slideshare:%20http://www.slideshare.net/BuiltByHQ/designing-for-mobile-39695678</p></li><li><p>Resources</p><p>Here are some of our favoriteresources for mobile design:</p><p>http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&amp;text=Awesome%20tips%20from%20builtbyhq.com%20on%20%23ui%20and%20%23ux%20design%20for%20mobile.%20Check%20out%20the%20deck%20on%20@slideshare:%20http://www.slideshare.net/BuiltByHQ/designing-for-mobile-39695678</p></li><li><p>Examples</p><p>http://www.builtbyhq.com?referral=slideshare</p></li><li><p>Examples</p><p>And a few examples ofawesome mobile design</p><p>Pinterest</p><p>http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&amp;text=Awesome%20tips%20from%20builtbyhq.com%20on%20%23ui%20and%20%23ux%20design%20for%20mobile.%20Check%20out%20the%20deck%20on%20@slideshare:%20http://www.slideshare.net/BuiltByHQ/designing-for-mobile-39695678</p></li><li><p>Examples</p><p>And a few examples ofawesome mobile design</p><p>Moves</p><p>http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&amp;text=Awesome%20tips%20from%20builtbyhq.com%20on%20%23ui%20and%20%23ux%20design%20for%20mobile.%20Check%20out%20the%20deck%20on%20@slideshare:%20http://www.slideshare.net/BuiltByHQ/designing-for-mobile-39695678</p></li><li><p>Examples</p><p>And a few examples ofawesome mobile design</p><p>NationalGeographic</p><p>Parks</p><p>http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&amp;text=Awesome%20tips%20from%20builtbyhq.com%20on%20%23ui%20and%20%23ux%20design%20for%20mobile.%20Check%20out%20the%20deck%20on%20@slideshare:%20http://www.slideshare.net/BuiltByHQ/designing-for-mobile-39695678</p></li><li><p>Examples</p><p>And a few examples ofawesome mobile design</p><p>Automatic</p><p>http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&amp;text=Awesome%20tips%20from%20builtbyhq.com%20on%20%23ui%20and%20%23ux%20design%20for%20mobile.%20Check%20out%20the%20deck%20on%20@slideshare:%20http://www.slideshare.net/BuiltByHQ/designing-for-mobile-39695678</p></li><li><p>brought to you by</p><p>Learn more about how we</p><p>can help your mobile design</p><p>http://www.builtbyhq.com?referral=slideshare_endhttp://www.builtbyhq.com?referral=slideshare_button</p></li></ul>