Answer the question
In order to leave comments, you need to log in
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
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.
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.
Perhaps the responsive features in Adobe InDesign will help? Yes, indesign has functionality for prototyping interfaces)
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.
As I see it...
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question