S
S
Sergei Tilion2016-01-21 13:47:30
User interface
Sergei Tilion, 2016-01-21 13:47:30

How can a UI designer with PSD mockups test interfaces on different screen sizes?

There is a Photoshop file with a site page layout and artboards of several resolutions (desktop, tablet, phablet, smartphone). This is understandable, here the main permissions are breakpoints. But I would like to see the site on more screens in view of the fact that, you need to deviate a little from the approach of "5 breakpoints, and then how it rolls." The same story with mobile applications (as it seems to me, although there is not enough experience here). After testing an already implemented site, I often see that at intermediate resolutions it would be nice to slightly change some elements, move them.
I suspect that some WYSIWYG editor will do, but Adobe Muse does not seem to have such adaptability.
As I see it: I drew a layout, exported elements and backgrounds with the Quick Export to PNG command, put them and texts in the editor / web application, change the page width, adjust the size and location, show it to the layout designer. Is that possible? Maybe there is another way without having to learn responsive layout and some Bootstrap?

Answer the question

In order to leave comments, you need to log in

5 answer(s)
P
Pavel Radkov, 2016-01-23
@paulradzkov

Is that possible.
If you have all the main states already drawn, export the design to Adobe Edge Reflow
https://www.adobe.com/en/products/edge-reflow.html
Here you can "twist" adaptability on intermediate breakpoints without studying the code.

L
lavezzi1, 2016-01-21
@lavezzi1

Hello.
Between breakpoints, the blocks should be rubber. Which breakpoints and their number depends on the project\layout.( https://uxpin.s3.amazonaws.com/responsive_web_desi...
You are thinking wrong. 5 breakpoints is normal and should be enough for the eyes (mobile, tablet, laptop, PC, wide monitors). If you want to add some more dot, say at 545px, then the problem is with your layout, because from the point of view of layout, this is a headache and dots need to be created exactly for the screen sizes of devices, for example (320, 480, 768, 1024, etc).
In general, everything should be calmly drawn on static layouts. If there is something complicated on a non-standard grid, you need to typeset it. At least just blocks without animations, etc.
See complex responsive websites as they stack up. They are formed precisely at key points, and stretch between them. Read about modular grid.
And yes, of course, the UI designer needs to know the layout (html5 & css). Necessarily. Pros:
You will save a lot of time on explanations in the future.
To understand how and what works, I draw some kind of component.
You will become more valuable as an employee
, etc.

N
Neron, 2016-01-22
Lordov @Nekto_Habr

Perhaps the responsive features in Adobe InDesign will help? Yes, indesign has functionality for prototyping interfaces)

P
Pavel Anpleenko, 2016-01-23
@Allakin

In the latest photoshope, such a function for displaying a layout on a gadget appeared, though only on apple gadgets. There is a Device preview
application in the appstore. You put it on your smartphone and connect it to your computer via a cord; in Photoshop you turn on the extension with the same name, and after connecting, you can view layouts on the gadget.

G
GreatRash, 2016-01-21
@GreatRash

As I see it...

Not right. This is no different from changing the width of the layout in the same way and throwing pictures in order to then transfer all this to the layout designer. It makes no sense to start another program for this.
I suspect that initially all your problems arose due to the fact that the layout was not drawn for "rubber". Again, the grid is most likely a curve (or none at all). Have you heard about the principle of mobile first? There is also a suspicion that it is not.
Correct if wrong.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question