The Best Phone Mockup Design Patterns

The best phone mockup design patterns give you an easy way to present menus, features, and information to users. Ideally, a new user should intuitively know how to use your smartphone application just by looking at the design.

For example, they might include:

  • “Play buttons” that people know will play a song or video.
  • Hamburger menus that users know will open to show more navigation options.
  • Icons that communicate to users what they will find by pressing each button.

Whether you want to use lo-fi mockups without text or hi-fi mockups that draw from a design system, the following represent some of the best options.

Simple phone mockup design for an app’s first page


The first page of a smartphone app should present information in a simple, straightforward way. This simple phone mockup design from Adobe gives you a place to place your introductory image, a short message, and a button.

The design lets you choose between four colors. No matter which one you prefer, you get an eye-catching mockup that makes your logo stand out on the page.

If you don’t have a logo for your business or app, you can follow advice from Chiara Aliotta, the creative force behind the Italian design firm Until Sunday. In an interview UXPin, she says that some of the latest branding and logo design trends include:

  • Using custom typography instead of relying exclusively on drawings and pictures.
  • Creating logos that express something about the brand’s personality.
  • Developing animated, interactive logos.

A simple phone mockup design can make your job easier, but you still need a memorable logo. A mockup can’t get the job done on its own.

Productivity app transition phone mockup


Aliotta believes that designers will rely more often on animated logos. You can also apply that approach to your entire phone application mockup design.

In this design, you find a productivity app that tells users when they complete their goals. The app doesn’t open immediately to a static page, though. Instead, the phone’s screen dissolves away to reveal the app’s workstation.

The design works well because it engages users – exactly what you want from a productivity app! It also has a place to personalize the screen with the user’s name. You could replace it with your client’s name to make it a little more appealing. With UXPin, you can also make unique designs for each accomplishment in the phone mockup. Why not replace the existing icons and messages with real data that applies to the buyer’s real life?

Smartphone mockup design pattern for a messenger app


You don’t necessarily need to create a new design when you build a messaging app. Why reinvent the wheel when you really want to show how your technology works? A smartphone mockup like the one above provides all of the basic design elements that you need to present your app concept.

When you move from a mockup to a prototype, you may want to add some distinguishing features. When you first propose a messenger project, though, you don’t need to worry about design specifics. You just want an attractive layout that displays texts and images from more than one person.

Phone mockup design for calendar and daily schedule


Google Play and the App Store have hundreds of calendar apps that users can download for free (with advertisements) or at low prices. Whether you want to break into this area of the app market or you need to create an in-house scheduling app for a company, you can start with a phone mockup that lets you concentrate on how the app works instead of what it looks like.

The above calendar app design works well because it lets users tap a date to see what they have scheduled for that day. It also lets multiple users share their accounts, which makes it useful for teams and families that need to communicate with each other quickly and easily.

The only problem with this phone mockup design pattern is that it uses lorem ipsum instead of real text. You might not mind using nonsense text during the first stage of your design process. Eventually, though, you will want a prototype that shows potential users what they can really expect from your app.

UXPin replaces lorem ipsum with real data instead of forcing you to waste time generating your own content for prototypes.

UXPin makes it easier to create your own phone mockup design patterns

Phone mockup design patterns from other creators can make your projects easier to begin. You can also speed up the process by using UI kits to create mockups. No matter what approach you take, you will eventually need to develop elements that make your product unique.

UXPin gives you an easy way to create responsive prototypes that use real data. Start a free trial today to see how UXPin can turn your ideas into impressive prototypes. You might find the tool so easy to use that you stop relying on phone mockup design patterns from other people.

Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you