UX and UI - Designing for Mobile

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?



Apple? or Android?

iOS vs. Android




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

iOS vs. Android




iOS vs. Android






iOS vs. Android




iOS vs. Android





Mobile Usability


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



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



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.



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.



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.



Testing


Testing

Test, test, test



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.



Navigation


Navigation

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

mobile interface.



Navigation

Examples:



Navigation

Examples:



Navigation

Examples:



Gestures


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.



Gestures

Examples:



Gestures

Examples:



Gestures

Examples:



Gestures

Examples:



Resources


Resources

Here are some of our favoriteresources for mobile design:



Resources




Resources




Resources




Resources




Resources




Examples


Examples

And a few examples ofawesome mobile design

Pinterest



Examples


Moves



Examples


NationalGeographic

Parks



Examples


Automatic



brought to you by

Learn more about how we

can help your mobile design

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

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