Mobile Design Swipe File

eBook

Have you ever heard the phrase, “Good artists borrow, great artists steal”? Well, the same applies to mobile design! We’ve gathered some of the best of the best in mobile design to spark your mobile mindset, and serve as some major inspiration when you head into your next mobile project. And, on top of the design inspiration, we’re serving up a crash course in mobile design elements to help you talk the talk just as much as you walk the walk. 

Key Mobile Engagement Tools

When kicking off a new mobile project, first thing’s first: what are you building? News flash for those C-suite executives who keep telling us we need a mobile app: there are more options! And sometimes, the other options are better! Here are three top mobile players:

Native Mobile Apps

  • Device-specific mobile experiences that users can download to their device via an app store
  • Separate development for iOS and Android
  • Can be installed to home screen
  • Accessible via App Store download

Mobile Websites

  • Websites that are either built for mobile or responsive on mobile
  • Works across all devices and browsers
  • Cannot be installed to home screen
  • Accessible via URL

Progressive Web Apps (PWAs)

  • Web experiences built with the highest standards of user experience in mind, and capable of native functionalities like offline caching, integration to geolocation and gyroscope, and push notifications
  • Works across all devices and browsers
  • Can be installed to home screen
  • Accessible via URL

Key Mobile Design Concepts

There are a few UI/UX principles to keep in mind when it comes to designing a mobile experience that will compel and delight your users. Good news: We’ve put together a cheat sheet to get you started!

reachability
buttons

Text Size/Readability

Less screen means you need to pack more punch-per-pixel, and also means you can’t overcrowd the page! Stick with these guidelines to ensure that you’re getting your message across loud (not crowded) and clear.

Font

Pick a font (two, tops!) and stick to them

Leading

Don’t cram too much text into your design, line spacing can help copy readability

Capitalization

Use all-caps sparingly, it affects readability!

Size

Give your copy some visual hierarchy

  • H1: 32px
  • H2: 26px
  • Body: 16px
  • Caption: 14px

Contrast

Smaller screens = more eye strain.  Don’t compound the issue with a low contrast ratio

gestures

Mobile Trends

Now that we know a few mobile UI/UX tablestakes, it’s time to dive into the good stuff: looking at some mobile rockstars. We’re going to be exploring brands who are killing it on mobile, and what mobile trends they’re not only leaning into, but totally rocking. 

Mobile Design Trend: Navigation

The name of the game when it comes to mobile navigation? Simplicity. Users are busier than ever, and when they want information they want it fast, which means the last thing they want is an overcrowded app home page. Here are a few navigation trends that are helping brands keep it simple.

chipotle
Lyft
pinterest pwa

Mobile Design Trend: Interaction

OK, so now that users are on your app and know how to navigate around, how are they finding what they need? Here are a few examples of utilizing mobile-first technology to make interacting with these mobile experiences a breeze.

trello
domino's
ikea

Mobile Design Trend: Personalization

Personalization is tablestakes at this point, and today’s consumers are way past being impressed with a “Hey, Your Name!” greeting at the top of their app. Here are a few mobile experiences that are putting true personalization front and center.

wayfair
starbucks pwa
huntington

Mobile Design Trend: Visual Elements

Users are spending more time looking at screens than ever before, which means they’re looking for experiences that not only don’t damage their eyes (hello, dark mode), but also experiences that are fun to look at. Here are a few visual trends to keep an eye on.

twitter
hulu
duolingo

Ok...So Good Mobile Designers Borrow, Great Mobile Designers Steal

But you know what? The cool thing is that no matter what you steal from this Mobile Design Swipe File, you’re going to make it your own! And then if it’s good enough, someone else is going to steal it! And round and round we go…

Just remember these mobile design basics:

1.Think of the User First
Just because something looks cool doesn’t mean it’s easy to use

2.Consider (and Test On) All Devices
Remember that just because you have an iPhone X doesn’t mean your user has an iPhone X

3.Most of the Time…Less is More
Don’t cram every trend into one mobile experience. Prioritize based on your app’s goals!