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 '19 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 '19 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 '19 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

  • Thanks for commenting and explaining that. As you may notice, I hadn't any idea about density, even working with web design for the last 10 years. What I didn't get is: since Adobe XD, Photoshop or other softwares use pixels as the unit to design, how to apply in practice that "density-independent pixels"? Is there some math I'm missing? – joaogdesigner Feb 1 at 21:26
0

According to you, what you made was a landing page.

So generally designing based on breakpoints is your best bet. Breakpoints are the point at which the content of your site will respond to provide the user with the best possible layout to consume the information. So say your initial desktop width was 1440px, and your mobile is now 360px. Those are the breakpoints.

In adapting texts to mobile, there are 2 methods you can use:

1. Set up a modular type scale. A modular type scale is a series of type sizes that relate to each other because they increase by the same ratio. You start with a base font size and multiply it by the selected ratio. This can be done using https://type-scale.com/, https://www.modularscale.com/ or even manually in your design tool of choice.

Here is a typescale from Stackwell's post on https://medium.com/sketch-app-sources/exploring-responsive-type-scales-cf1da541be54

2. Trust your eye: You can basically just copy over all the content from the desktop artboard to the mobile artboard and resize visually to your discretion. You can then use this new scale on the other mobile artboards.

Personally, I use the two methods. I start with a modular scale (but they usually come in decimal points), I then round up or round down as my eye pleases. Here is a screen shot from a past project I employed this technique:

For this particular project, my h1 was set to 48px on desktop and 40px on mobile.

enter image description here

Note: The ideas presented are not hard and fast rules. I encourage you to experiment and explore.

  • Thanks for answering! How to use that type scale, I mean, how to apply it correctly using XD for example? I'm in doubt about the measurements in pixels, since px is the unit softwares use. – joaogdesigner Feb 1 at 21:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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