Mobile Design Swipe File


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!


It’s all about designing with the thumb’s reach in mind. As phones and screens get larger, mobile design must take into account the range those one-handed users have. Keep in mind where your buttons and links are on your page–they should ideally be in the “safe zone”!



Mobile considerations for buttons are a bit different than for desktop–and they should be! Think about it: a tap of a finger is a lot less precise than a mouse click. Consider these elements when it comes to designing your buttons for mobile:


Use color to create contrast and draw attention


Don’t get too creative–make sure your user knows it’s a button


Use at least 44px to accommodate adult-sized fingers


Consider using a shadow to add depth or show the button as raised


Create some breathing room by allowing 12-24px around your CTA


What happens when the user taps?

Clear Call-To-Action

Make sure the user knows what a tap will do


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.


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


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


Use all-caps sparingly, it affects readability!


Give your copy some visual hierarchy

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


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


When users are on mobile, they’re used to a few common gestures. Lean into user habits and utilize gestures that are already second-nature, and don’t forget these device-specific gestures that you should be aware of:

Standard Actions
Tap to “click”
Swipe Right to go back a page
Pinch to zoom in and out
Drag to change a page element (like a slider)

3D Touch for more info, actions, or a preview
AVOID swiping up (that’s how iPhone X/11 users exit an app)

AVOID swiping up (that’s how Android users get to their app drawer)


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.

Tuck it Away

Mobile Website

We love when a mobile website doesn’t immediately scream at us to download the mobile app. Having that small, subtle bar at the top with a drop-down app CTA is a great use of collapsible navigation.


Keep it Close to Home

Native Mobile App

Lyft does a great job of utilizing layered actions by putting its destination window over the live map. This always keeps the user on the home screen so they can keep an eye on Lyft drivers nearby in real time, and double check that their pick-up location is correct.


More Pins, Less Nav

Progressive Web App

Pinterest’s use of a tab layout for its bottom navigation bar is perfect for a simplified user experience. Bonus points for hiding the bar while the user scrolls. It makes for a super non-invasive navigation experience!

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.

Swipe, Swipe, Baby

Native Mobile App

Trello is a rockstar when it comes to integrating familiar gestures into their app. Users can easily drag and drop tasks onto boards, and swipe to access other boards.


Say it Loud and Clear

Native Mobile App

We’re asking Alexa for everything, so why shouldn’t we be able to ask our phones to order us pizza? Domino’s integrates voice capabilities into their app for easy pizza ordering.


Picture Perfect

Native Mobile App

IKEA uses the phone’s native camera as the base for their IKEA Place app, and then uses augmented reality to let users layer virtual elements into the real world. Talk about a futuristic way to interact!


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.

Since You Bought...

Native Mobile App

There’s nothing better than feeling known, especially by brands you love. Wayfair puts personalized recommendations based on the user’s past purchases right at the top of the app, making for a totally personalized experience.


This One's On Me

Progressive Web App

Starbucks is the king of mobile rewards programs, and their Progressive Web App puts it front and center with an eye-catching rewards slider to show users how many stars they have, and how many they’ll need to get that free latte.

starbucks pwa

I Like to Move It, Move It

Native Mobile App

Huntington is letting users take their app’s home page layout into their own hands with custom dashboarding capabilities. Think: toggling on and off certain features, moving around modules, etc.


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.

We’re Going Dark

Progressive Web App

With many users opting in for the more eyesight-friendly dark mode option, Twitter provided that and more! Users can also choose dim mode, which turns the background elements of the app grey.


Think Bolder

Native Mobile App

Phone displays are becoming capable of higher pixel densities (hello, Retina display), which means higher resolution and depth of color. Hulu is leaning into the advanced display tech with use of gradients and bolder colors.


It's the Little Things

Progressive Web App

There’s no doubt that content and navigation are the most important elements of a mobile experience, but the little extras in-between sometimes make all the difference. We love Duolingo’s fun use of animations throughout their app.


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!


Digital Experiences for Every Moment

Create digital experiences for every touchpoint in the customer journey from product packaging to product registration to onboarding to customer support and so much more. What do you want to create first?