Hi,
are there UI dimensions guidelines in terms of plugin’s height somewhere?
I see that here there’s info about padding and min/max width only.
I remember that I saw (long time ago and possibly in the PS prerelease) something about the design of third party interfaces and the fact that with more users on laptop displays we should prefer landscape-ish UIs rather than slim & tall ones.
In my new, shiny and damn expensive 16" MacBook Pro I can’t possibly go higher than a thousand of pixels or so, as the native resolution “looks like 1728 x 1117”:
I was wondering whether there is a recommended safe standard that is tested to do well in most of the cases.
Thanks!
Davide
I do all my panel plugins responsive. Just because of submission checklist UI part
- For panel plugins, the plugin’s UI content must adapt appropriately when the panel width is increased.
- For panel plugins, the plugin’s UI content must adapt appropriately when the panel width is decreased.
<…>
- UI content must wrap or adapt as necessary to accommodate the available width of the UI.
Also don’t need to worry about fixed sizes on different displays in this case
This is a client’s panel for which I’ve received a fixed size UI mockup—a quite tall one, I suppose it’s been designed with external displays in mind. It’s not going to be distributed via CC Marketplace as far as I understand.
So I suppose you could do a fixed width, and height ranging from eg. 500px to the fixed mockup height. If panel won’t fit the height of screen, vertical scrollbar would appear 
Every time somebody mentions scrollbars a fluffy bunny dies in pain somewhere 
I’ve asked for instruction. Fixed design w/ scrollbars == bad times, but it may be a compromise in case the intended audience doesn’t care about laptop displays 
I can always attach an external display for the development.
1 Like
I’d typically restrict myself to 1440x900 – and then give some leeway for any app chrome. So i would typically relying on anything beyond 800px (I’d allow scrolling at that point, if things couldn’t be redesigned).
I design horizontally for dialogs and vertically for panels. Panels often need to co-exist with other panels, and Ps gets really funny when a docked panel is so wide it obscures most of the canvas (you end up with a lot of collapsing… which is maybe not what the user wants). For panels, I’d also rely on scrolling behavior, operating on the assumption that it’s likely the panel will be stacked vertically in a group as well… meaning that there’s no truly safe height you could aim for.
You might consider if there are ways to collapse portions of the UI using accordions. This would let users control what they wanted to see on a shorter display. Alternatively, you might be able to leverage flex layout & wrapping – if the panel were wide, the sections could be grouped horizontally – if the panel were narrow, the sections could wrap and be grouped vertically. (Bonus if each section is then collapsible).
I might have found what’s puzzling here: the design I’ve received in Adobe XD, exported (say) as a PNG and viewed in Photoshop (through my Retina display) is exactly half the height/width of what I get when zooming 100% in XD.
In other words, the panel is meant to be ~650px tall (i.e. a 1300px tall document viewed on a 2x resolution display). Problem is that if I set the panel to be 1300px tall, it renders as an actual 1300px in my MBP 1728x1117 “equivalent” dimensions.
My display should be made of a matrix of 3456x2232 pixels, hence it’s 1728x1117 (oddly odd height…) at 2x.
I guess I’ll have to shrink to 50% the XD mockup in order to copy/paste the various icons and stuff as SVG with proper sizes—is this correct @kerrishotts ?
Thanks!
I don’t think in your case there’s much you can do to avoid it 