1

I have a layout I made some time ago on Adobe XD (that was just a personal project) and now I wanna put it on Behance. To do so, I need to duplicate/adapt that layout (designed for desktop) to smaller screens, iPad and mobile.

Since I'm not used to design for smaller screens, after I started I've got a doubt: how do I know for example how much I need to decrease both text and UI elements' sizes? To explain better: I have a text with 40px. How should I calculate to properly decrease that size? Is there like a default percentage to reduce from those values? Maybe some visual "default" rules that every design follows?

I always design for Bootstrap, however I'm not sure if I'm thinking the right way.

(I've also posted this on stack overflow, I'm not sure which one is the best suitable to my question).

Thanks for all your thoughts and advices you could tell me. I worked most of time only for desktops, a traditional web designer, and now I'm trying to migrate to UI/UX.

  • Are you designing for the web? – Michael Hogan Jan 4 at 1:57
  • Yes! I made a landing page layout some time ago as part of a test to a UI job position, and now I decided to "replicate" that layout to both a tablet and a mobile sizes/screens. – joaogdesigner Jan 5 at 3:19
0

Since you’re using Adobe xD, check out the new responsive resize feature.

If you have a version of your design in HTML5 format (for example if you’ve built it with Bootstrap), then you can use responsive design mode in Firefox to test the layout at various window sizes. It will be helpful to have a large monitor since some mobile devices have extremely high resolution. Also, consider using em or % for font-size instead of px. Em and % are relative, so will scale with screen size.

On iOS, Interface Builder uses a constraint-based layout system to adapt to different screen sizes. Apple advises that iOS apps be designed with a square layout and a set of constraints that lets iOS know how to adapt the layout for different screen sizes and device orientations. Even if you’re not designing for iOS, it is worth reading about the overall concept in the Adaptivity and Layout, Understanding Auto Layout, and Interface Builder workflow articles.

  • Hi! Adobe support recommended me to see that responsive resize feature, but maybe I didn't make my question properly clear. I designed a landing page on XD and it's just a design, it didn't make to a development step. I created 2 other artboards on XD, one for tablet with 768x1024 (default ipad) and 375x667 (iphone 6/7/8). My doubt is how to replicate my desktop-based design to those 2 other artboards regarding the elements and text sizes. – joaogdesigner Jan 5 at 3:23
0

I believe learning to work in physical display size will solve this for you. It's the way everybody should work. Everybody should at least learn it.

The problem is the size of pixels changes across devices. Adding to this issue is OSs and browsers resizing things to try to solve the issue.

A low-density display (top) has physically larger pixels so a smaller button is physically larger: enter image description here

The high-density display has smaller pixels so a larger button is physically smaller: enter image description here

The solution is to measure the physical size of things. Instead of measuring things in pixels which are input, measure the physical dimensions of the output. Measure things using inches or millimeters. Use their physical size on the display to define them.

So you define what the output should be in physical size in the design and it's the developer's job to match the physical size. Think about how much this clears things up.

Google's solution for this is to convert everything to pixels with specific physical dimension. Instead of millimeters they use "density-independent pixels" or DPs so that things are still in pixels and make sense without knowing DPs.

They have a great explanation of pixel density and all of this in Material Design: Density and Resolution

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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