2

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?

Improve this question
4
  • This is a rather localized/opinion based question. I'm not sure there is one 'right' answer to this.
    – DA01
    Commented Jul 2, 2013 at 21:58
  • I just edited your title for a better fit, but please feel free to re-edit if you think it should be different. It doesn't look too localized for me, it's a not-so-uncommon case.
    – Yisela
    Commented Jul 2, 2013 at 23:55
  • 1
    Check out the link in this answer: graphicdesign.stackexchange.com/a/19061/12189. The question was similar, but there is a service that will help present your designs on different platforms.
    – ckpepper02
    Commented Jul 3, 2013 at 0:08
  • DA01 I agree with you but I desperately needed some ideas and from other designers. I'll use both, plainclothes and horatio ideas, and I'll let the stake holders decide which one they like the most. The winner will get "accepted answer" :) Yisela thanks, I does make more sense now! ckpepper02 nice, I like this! I don't think I'll be able to use it in the current brochure but it could potentially be used in other design materials, thanks!
    – Adaz
    Commented Jul 3, 2013 at 8:51

4 Answers 4

Reset to default
3

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.
Improve this answer
1
  • This is pretty much what I was thinking of and I think this is more likely to please the stake holders. Thanks!
    – Adaz
    Commented Jul 2, 2013 at 19:10
3

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)
Improve this answer
3
  • I do like your ideas and I'll try this for sure. The only problem is that the stake holders are really keen on the browser window so it may be tricky to convince them. Thanks for the answer!
    – Adaz
    Commented Jul 2, 2013 at 19:13
  • 1
    Bear in mind that at a screen-capture of a fullscreen Firefox window at 1920x1080 size (1080p resolution) the branded element is 96px wide (the Firefox button upper left). This is about .05x the total width. If the screen cap is printed 3 inches wide, the branding would be about 1/8 of an inch wide. This is pretty small and easily altered. Turn off all toolbars and 'shop out the buttons and search bar to the right of the url field.
    – horatio
    Commented Jul 2, 2013 at 19:59
  • Sorry, I meant the designed browser window rather than Firefox - I can't cope with pixelated (and not particularly good, IMO) UI of Firefox or any other browser. I'd rather have simple vector graphic that will represent a browser window but thanks for the tips!
    – Adaz
    Commented Jul 2, 2013 at 20:33
-1

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 $8 or $28 for ultra high res. PicApp.net offers all images in high res for $5.

Improve this answer
1
  • I think you are missing the point of this question. It is not how to make images fit devices.
    – Scott
    Commented Sep 19, 2015 at 19:44
-1

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

Improve this answer
1
  • Hi user66929, could you please explain a bit more what we'll find behind the link you provide and why it answers the question? That way, your answer is still of value in case the link breaks at a later time. Link rot is the main reason we really dislike link-only answers here. Thanks for your effort and keep contributing!
    – Vincent
    Commented May 18, 2016 at 10:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.