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

Embed Size (px)

TRANSCRIPT

  • Designing for

    MOBILE

    http://www.builtbyhq.com?referral=slideshare_title

  • brought to you by

    http://www.builtbyhq.com?referral=slideshare_start

  • Click this button to tweet the information on each slide

    https://twitter.com/intent/tweet?source=webclient&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

  • iOS vs. Android

    http://www.builtbyhq.com?referral=slideshare

  • iOS vs. Android

    Who are you designing for?

    http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&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

  • Apple? or Android?

    iOS vs. Android

    Who are you designing for?

    http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&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

  • Keep in mind the benefits of each... as well as the specs

    iOS vs. Android

    Who are you designing for?

    http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&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

  • iOS vs. Android

    Who are you designing for?

    Keep in mind the benefits of each... as well as the specs

    http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&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

  • Keep in mind the benefits of each... as well as the specs

    iOS vs. Android

    Who are you designing for?

    http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&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

  • iOS vs. Android

    Who are you designing for?

    Keep in mind the benefits of each... as well as the specs

    http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&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

  • Mobile Usability

    http://www.builtbyhq.com?referral=slideshare

  • 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

    http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&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

  • 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!

    http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&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

  • 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.

    http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&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

  • 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.

    http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&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

  • 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.

    http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&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

  • Testing

    http://www.builtbyhq.com?referral=slideshare

  • Testing

    Test, test, test

    http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&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

  • 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.

    http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&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

  • Navigation

    http://www.builtbyhq.com?referral=slideshare

  • Navigation

    Because design is limited, creating the right navigation is key to a good

    mobile interface.

    http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&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

  • Navigation

    Examples:

    http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&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

  • Navigation

    Examples:

    http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&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

  • Navigation

    Examples:

    http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&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

  • Gestures

    http://www.builtbyhq.com?referral=slideshare

  • 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.

    http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&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

  • Gestures

    Examples:

    http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&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

  • Gestures

    Examples:

    http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&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

  • Gestures

    Examples:

    http://www.builtbyhq.com?referral=slidesharehttps://twitter.com/intent/tweet?source=webclient&text=Awesome%20tips%20from%20builtbyhq.com%20on%20%23ui%20and%20%23ux%20design%20for%20mobile.%20Check%20out%20the%20deck%20on%20@slideshare:%20ht