Most efficient way to adapt current mockups to different devices and resolutions

Question

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?

Answer 1

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

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.

Answer 2

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.

Answer 3

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

Answer 4

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!

Answer 5

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)