Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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?

share|improve this question
    
This is a rather localized/opinion based question. I'm not sure there is one 'right' answer to this. –  DA01 Jul 2 '13 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 Jul 2 '13 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 Jul 3 '13 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 Jul 3 '13 at 8:51

2 Answers 2

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.
share|improve this answer
    
This is pretty much what I was thinking of and I think this is more likely to please the stake holders. Thanks! –  Adaz Jul 2 '13 at 19:10

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)
share|improve this answer
    
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 Jul 2 '13 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 Jul 2 '13 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 Jul 2 '13 at 20:33

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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