Device Mock-ups In Website Headers: Design Tips & Examples

Posted on - Last Modified on

A mock-up is a scale or a model of a design, primarily used for teaching or demonstration.  The mock-up comes before a model, never after. Mock-ups are the perfect tool for demos in new apps, as they allow the designer to edit the design screen. They also allow the designer to add UIs that will merge well with the mock-up photo.

The creation of mock-ups is digital and there are several software tools available. A mock-up acts as a blueprint, wherein you find out the mock-up's functionality, and how the end design will look.

Many mobile websites utilize mock-ups to design headers. A responsive web design makes sure the website displays properly on any device. If you need to present your portfolio of web designs, you have to find a method to showcase all the layouts at once. There are several tips that will aid you in using device mock-ups.

Front/Straight device view

This is arguably the simplest technique. It can use any device mock-up, and the design faces the viewer straight on. Instead of a realistic mock-up, most designers use vector shapes to duplicate the design of the phone. This normally is in a transparent graphic, so can be merged into any layout with ease. These features are relatively simple to put up, and the editing via Photoshop is minimal.

The devices are flat on the landing page, and you can present anything that pertains to the app. The majority of landing pages use the flat or perspective style, but the two are never used at the same time. However, depending on the design you want, and to get a mix of the two, you can always use a slideshow. A quick example is the Spandee landing page. The first slide is a display of the app in either Android or iOS, and it stays on top of the landing page as a kind of intro to the app. On scrolling down, you will discover dot navigation style,and the various parts of the page use perspective mock-ups.

Perspective View

The skewed perspective mock-up is another common style. Photorealistic designs are used to create accurate devices, and have editable screens. Many are in PSD format and have screen smart objects. When editing the smart object, all you do is copy and paste your app to the window, and save. When the smart object is closed, the screen alignment gives off a perspective illusion.

These mock-ups also come with transparent backgrounds to allow you to blend them into a layout of your choice. Filters are a good example of a mock-up that covers multiple parts on the page. The Nuansa homepage has a slideshow effect that spans through various screenshots. It makes use of various pictures of the same mock-up, but with varying screens of the same interface. This way you get to sample the application’s capabilities without having to download the actual app, or watch the video. Perspective mock-ups are popular, and you are likely to find perspectives that are aligned both horizontally and vertically.

Stripe

You should give this mock-up style a try if you are looking for realistic presentation. The mock-ups are transparent PSDs, and you have control over editing and publishing so they align with your layout. In place of a static image, you can go for an mp4 video by following the Stripe Lander. This makes it even more realistic than you having to record someone actually using the app. In the event that you feel you need some help, you can always seek the help of professionals from Freelancer.com.

Full Page Hero Image

The full page hero image is the in thing with web design headers. The page hero usually dominates the whole header, and makes use of a full sized photo that tells a story about the page its contents. It is possible to use full-screen backgrounds in single page designs. These landing pages usually have very little information, so the more beautiful the better, as they need to attract views. Designers can also add vector backgrounds, or even interesting videos to attract attention. However, a photo is always a better attraction.

It is possible to edit the screen to add the app’s UI. This will create a realistic photo, and seems as if someone is actually using the app. This is great in that it allows you to create promos without submission of the app to the app market.

On the Weathertron homepage, there is a hero image that is behind the navigating links and the main menu. It’s possible this is a real photo taken of the open application on an iPhone. But if you look a bit more closely, you will see that the UI seems clearer, which is an indication it is a real photo, with a smart object having replaced the iPhone screen. The same is noticeable at the bottom of an iPad screen page. The larger mock-ups make the app seem more real as the visitors get to view it on an actual iPhone - which makes it seem like they are interacting with a real iPhone interface.

Design with Mock-ups

The internet is full of resources you can use, and there are many mock-up styles to choose from. It really does not matter what type of mock-up you are looking for, be it photorealistic or flat mock-up designs. There are plenty to choose from:

iPhone Clay PSD

The iPhone Clay PSD allows you to change the colors of the devices. These clay mock-ups are suitable for any landing page. This is because they lend you more control over the color themes. Every device is created in Photoshop in vector shapes that can be easily resized. The screen uses smart objects to let you to drop the app UI, and help you move a graphic for your homepage.

Sketch Mock-ups

A designer may opt to use Sketch instead of Photoshop. Sketch design mock-ups are available, but the downside is they all come from various designers, and none is like the other. The upside, is that there are lots of Sketch design mock-ups available for free on the website, Sketch App Sources.

Dribble Design Mock-ups

Dribble is an invitation-only community that has free designs to excite you no end. The best designs are perspective packs from Ramotion. You will also find flat iPhone/android devices, and photos of actual people using the devices. When you use Google, you might find yourself spending a significant amount of time looking for a fitting mock-up for your site. Dribble offers a wealth of resources with thumbnails for previewing.       

The device shots also work well with responsive websites, and anything else you might want to try out. The possibilities are endless; you can experiment and see what you can come up with. The mock-up phase serves as a test for usability. At this stage, you will get feedback on how suitable your design is.

If you have comments or queries, please post them in the comments section below.

Posted 12 September, 2017

TomCoulter

Designer // Writer // Creative

Tom is a Design Correspondent for Freelancer.com. He is currently based in Melbourne and spends most of his non-work moments trying to find the best coffee.

Next Article

12 Tips And Tricks For Increasing Your Conversion Rates Through Web Design