In making demos for new apps, it is essential to have mobile device mockups. They allow designers to edit and add UIs which seamlessly blend into the photo of the mock-up. A recent trend has seen web designers adopt device mockups to style their website’s page headers.
Strong Perspective View
This style is quite popular, involving the use of skewed perspective mockup. It employs the use of realistic photo design to come up with editable device screens. The popular format is PSD, and smart objects are used for the screen. When editing smart objects, all you need do is copy and paste the user interface of your app into the window after which you can locally save it. Closing the smart object presents you with a properly aligned screen on your device which creates a perspective illusion.
The mockups also have transparent background options, allowing them to be easily blended into the layout of your choice.
On a closer look, you’re presented with a photo-realistic layer FX, most likely created using Photoshop. It easily blends with the homepage even though it is not a real design photo.
The screenshot for the app stays consistent with the perspective. To achieve the desired angle, the app UI is manipulated automatically in Photoshop.
Straight Device View
Front device view is an effortless technique to use. It makes use of any device mockup in which the viewer faces the design head on. Designers go about replicating the phone’s design with the use of vector shapes instead of using realistic design mockups. It blends easily into any layout as it comes in a transparent graphics format.
We’ll use the Mimo app header as an example. To sell its products, it employs the use of a slightly dark iPhone vector graphics which features a Mimo screenshot.
A great benefit is an ease with which many features can be set up without the need to edit them in Photoshop. Another advantage is that it is easy to see everything the app offers as the device has a flat appearance on the page.
Many landing pages choose between perspectives and flat styles, with a combination of both being quite rare. This is dependent on what design type you’re aiming at.
Slideshows offer you the opportunity to get a mix of both. A perfect example to depict this is seen on Spendee homepage.
The first slide presents you with iOS and Android renderings of the app. It is conspicuously placed at the top portion of the page, making for a quick and easy introduction to the app.
Scrolling further down, you get to discover the navigation style used is the dot type with perspective mockups for different page sections.
In the end, if the flat mockups tickle your fancy, it is advisable to stay with them. Google offers loads of freebies. It only takes some searching to discover.
Device Hero Images
This is what’s trending when it comes to rendering designs for websites. The full-page hero image conveys the desired image regarding the site plus its content. It occupies the entire header section.
Many hero image mockups are available online with device PSD being a component of quite a number of them. These offer real life pics of devices either in user’s hands or on devices. The device screen can be edited to add the UI of your app, creating a realistic impression of the app being used on the phone. This affords you the opportunity to come up with your promo material, without the need for an app store permission.
The weathertron homepage beautifully depicts this. On the homepage is big hero image placed right behind navigation links and the main logo. It easily passes for a real photo of an iPhone app. A closer look, however, reveals a UI with a bit more polishing than the other sections of the photo. It shows a smart object was used to replace the iPhone’s screen.
Designing with device mockups
A lot of resources are available including many styles you can pick from to help you. These resources have you covered, whether you’re going for perspective mockups or flat design.
Sketch Device Mockups
For designers seeking alternatives to Photoshop, sketch device mockups are a brilliant alternative. The only glitch is that there is no central device mockup source. The Sketch App Sources website collects and stores resources on the Web.
iPhone Clay PSD Mockup
This allows for full customization of each device’s color. The Ramation team has an impressive device library which caters to both iOS and Android devices.
Clay Mockups are just perfect for your landing pages. They offer higher freedom and control regarding color and style. The devices are built in Photoshop, with the use of vector images, making them easy to resize.
Although the emphasis was on landing pages for mobile apps, these device mockups can also come in handy in designing portfolio Slideshows and blog posts.