4

I've completed about 90 screens of mockups in Photoshop for an app. The mockups are done for iPhone 5 / iOS7 (640px by 1136px). Everything is calculated to pixel-perfection.

Now management wants to see the mockups on iPhone 3GS / iOS6, iPhone 4 and iPhone 6, as well as how it will look like for Android devices.

The normal way is to go back to Photoshop and create a new set of 90 screens and re-adjust/position everything for iPhone 3GS, iPhone 4, iPhone 6, and then for Android-based systems, that means I need to do mockups for Samsung Galaxy Note II, Nokia Lumia, Windows Phone, HTC and 750 other types of phones out there.

Now, doing and documenting 90 screens alone took like 3 - 4 full weeks... there is no way (nor is there time) to do it for all phones.

So, with my current iPhone 5 mockups, is there any quick way to re-adjust it to fit most of the devices ASAP? Or is it actually easier for the dev team side to fix this?

  • 2
    Couldn't you just pick one 'representative' sample and adapt that? At least, it'll give them an idea of what it will look like... – PieBie Mar 25 '15 at 8:28
  • Not sure about that. Is that usually how the workflow is like in the industry? – Xeon Mar 25 '15 at 9:20
  • 4
    Depends. But if you tell them adapting 90 screens will take about 4 weeks, at premium price, they'll probably settle for a representative sample :) – PieBie Mar 25 '15 at 9:54
  • 1
    Ninety PSDs!? I'm afraid you've enabled management to expect this type of workflow. Alas, this is a really bad way to go about it. A PSD is simply not an app. And you're just digging a deeper hole. As soon as you can, get out of Photoshop and into actual prototyping. – DA01 May 27 '15 at 17:36
  • 1
    But to answer your question, no, there is no quick way to do this--which is exactly why doing prototyping inside of Photoshop isn't ideal. :) – DA01 May 27 '15 at 17:37
3

Think in terms of templates

Chances are, you don't have 90 totally unique pages (if you do, you probably have another problem on your hands) For most apps (or sites) you have a handful of templates that are capable of setting up the central elements of the interface.

Start with the views

You've put a ton of work into creating these 90 views, so you probably know the templates quite well. Go back and identify the 6–12 key views that answer the critical concerns about UI structure (that seems to be the sweet spot in my experience). You're looking for the ones that can act as UI standards for everything else.

Then evaluate the devices

There's a lot of devices out there, but they aren't all that different. Since you went out of the gate with iOS7 and an iPhone 5, I assume that's the bulk of your target audience. That should layout out your iOS strategy pretty clearly. Are you really going to see a lot of users on iPhone 3s? Unlikely. You could indicate what the reduced screen real estate does on a couple of key views and leave it at that.

Now you have to ask yourself if you'll do a fully native Android UI skin? Does your current design look very iOS? If so, you might want to sprinkle in a little Material Design, account for the handy persistent back button, and layout those key screens again. Not 90, just the handful you identified in that last step.

Finally, you have to consider tablets and the dreaded phablet (stupid Galaxy Note!). Are you going to accommodate them too? At the very least, it's a good idea to do a couple of views for tablet. If it's a big use case, do all of your main template pages for each OS.

Management reality check

The Management

Now, you go back to The Management and show them all this awesome work.

"Check it out, guys. I've thought of everything."

You point out that you've solved everything for the primary target device. In addition, you've gone back and addressed every other major device context. From this foundation, the engineers can develop the MVP and test it on everything under the sun. You'll be nimble from here on out and address specific challenges as they arise. It's all good, I've thought of everything.

Future reference

Use Sketch. You'll be happier.

0

As you've noted, it's too difficult to consider creating designs for all devices and resolutions particularly in Photoshop. What you may wish to do is evaluate the most common devices that will be used with the apps you're designing.

Or, allow for the flexibility in your designs. Android devices use dpi so depending on your target users, you may be designing for low (ldpi), medium (mdpi), high (hdpi), xhdpi, xxhdpi ... etc. iOS uses a point based system in a similar way to give you 1x, 2x and 3x. So, if you're careful, you could possibly get away with designing for just 4/5 screen pixel densities. With that in mind, as for software, perhaps using Illustrator or Sketch in the future would help.

Finally, as for your current problem, it may be as well to create a prototype that would scale reasonably well. Pixate, Invision, Marvel, Framer all do a great job in fulfilling different prototyping requirements.

  • Tks KJP. For these tools like Pixate, Marvel, Framer etc, is it something like I just create one set of 90 mockups in those tools, and they have some feature that allows me to choose a device size and then magically auto re-position the elements or something similar? – Xeon Mar 25 '15 at 9:19
  • @Xeon - sort of ... Usually, you'd choose a default device to be used with your designs so Pixate, Marvel etc would scale from there. It'll stretch to fit depending on the resolution - you'll get the idea. – KJP Mar 25 '15 at 9:58
0

This depends a little on what these visuals are for but if they are for client review then this method should work fine and speed things up.

  1. Import (place) each Photoshop PSD into Indesign and retain the layers.
  2. Create "Alternative Layouts" for each new spec/ device.

This will take some tweaking (if liquid layout works well then that is a bonus) but the workflow should be much faster than a Photoshop rework.

There are a few downsides but any good dev should be able to work from this, especially with the set of solid masters you have already created.

T

  • Tks, will try that, although I don't think InDesign allows me to import the PSD file with layers. I can import the PSD file via File > Place... but once it's loaded in InDesign, it's just a flat image, not editable layers. – Xeon Mar 26 '15 at 2:32
0

You're using Photoshop, so I guess you probably are subscribed to Adobe Creative Cloud, and therefore have access to Edge Reflow CC. Edge Reflow was made for adaptive/responsive website designers, and is basically a tool to re-size web mock ups from photoshop. Each design will need some work in Edge Reflow, but once in there, you should be able to hit every singe device size, using only one psd!

-2

I recommend used aspect-ratio (serach wiki), adjust mockups a initial ratio , and generate all mockups from a list aspects-ratios like apple IOS aspect-ratio, and for android aspect-radio use actual sizes "like" as : 2:* "small" , 4:* "normal", 7:* "large" ,10:* "xlarge" ( 3:4:6:8:12:16 scaling ratio recomendation)

  • 2
    Simply scaling a website does not make it responsive. "Responsive design is an approach to web page creation that makes use of flexible layouts, flexible images and cascading style sheet media queries. The goal of responsive design is to build web pages that detect the visitor's screen size and orientation and change the layout accordingly." source – Zach Saucier May 29 '15 at 19:04
  • ok, but any content html tag box shall respect this, like a media query rules css, because responsive is only to generate one layout for reach all devices – Adrian R May 29 '15 at 19:13
  • I not used the word "scaling" for web , only scaling ratio , not web – Adrian R May 29 '15 at 19:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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