Mobile app version of vmapp.org
Login or Join
Gonzalez368

: How to represent a screenshot on multiple devices without using third-party branding The company I work for wants to release a brochure and they want to demonstrate that our app works on PC

@Gonzalez368

Posted in: #DesignPrinciples #Mockup

The company I work for wants to release a brochure and they want to demonstrate that our app works on PC (web-based app) as well as on a smart phone. They used to have a designer who used a picture of an iPhone and screenshots of the app including the browser (Firefox).

I'm not keen on showing browser UI, especially because our users use various browsers (from IE6 to Google Chrome).

We thought about showing a PC screen but this leads to other issues and it just doesn't fit within our current style.

My idea is to design a very simple browser UI + a smart phone using our current style - what do you guys think?

Can you think of a different way to present the screenshots in multiple devices?

10.04% popularity Vote Up Vote Down


Login to follow query

More posts by @Gonzalez368

4 Comments

Sorted by latest first Latest Oldest Best

 

@Si6392903

found this one and works fairly wewll, lets you skipp all extra work.. techsini.com/multi-mockup/index.php

10% popularity Vote Up Vote Down


 

@Welton168

If you want to represent your app on different devices, I have 2 ways for you:
First you can do this in adobe photoshop. Open your image with tablet / smartphone / pc, drag and drop your screenshot from your pc on photoshop. Then go to Edit -> Transform -> Distort. Now drag from the corners and place the screenshot on the right spot.
The second way is to use an online tool like placeit.net or picapp.net. Both are free for low resolution images, but you have to pay for high res. On placeit it costs or for ultra high res. PicApp.net offers all images in high res for .

10% popularity Vote Up Vote Down


 

@Vandalay110

Since you are hoping to avoid "third-party branding":

If you were to show screenshots cropped to just the browser/application content, the PC shots would be easily distinguishable based upon the aspect ratio if the image alone. It would be safe to ignore the rotational aspect of the handheld devices.

If you were to also scale the device imagery to something approximating the relative sizes of the different devices, the point will be made without resorting to featuring the actual devices.

Throw in some text in the brochure about features, and the point is made.

To make it pretty: pretend they are devices made of a single piece of glass, throw in some perspective and drop shadow as if they are all grouped into a product shot.

Rough numbers:


PC image: 16 x 9 inches, landscape;
iPad 9 x 7 portrait;
iPhone 4.8 x 2.3 portrait;
Apply a multiplier to all these numbers for sane sizes in a brochure format. (try * .25)

10% popularity Vote Up Vote Down


 

@Rambettina927

This isn't a great question for the SE format but I do think it's a question that might come up again. I'll venture an answer and let the purists close you out ;)

When you get right down to it, you can present screen mockups however you like. There's no rule other than be consistent. Here's my approach.


Desktop: I have a very simplified indication of a browser window I wrap the mockup in.
Mobile: A simple illustration of the device (the lastest Android or iPhone, depending on the project) without the browswer's header/footer ui in the way.
Tablet: Same as mobile with the addition of the browser ui, since it doesn't usually collapse like on mobile.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme