How to adapt text and/or elements size while designing to smaller screens?

usability
ux
ui
getstarted
design

#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.

(If my question is not on the right stackexchange site, please let me know).

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.


#2

I’ve found it helpful to understand my breakpoints and type tags before getting too deep in the weeds of design. Even once I jump into design, I prefer to start with a mobile first approach and even if I can’t I always keep in the back of my mind “how will this scale for mobile”?

Some of these tools/suggestions below I could do better at understanding myself and using more frequently but here we go…

Take a look at this article here -

Material Design on Type Scale -

Then there’s these tools -

https://type-scale.com/

When I’m designing for smaller screens, I have an “always active device” on hand to monitor/mirror in real time how the fonts will actually render out. Sketch Mirror and Adobe XD’s “live preview” work well for this.


#3

I agree here. It’s nice to start with the mobile design, although the company I work at always expects desktop design first. My experience is that you shouldn’t go any smaller then 16px for mobile devices. Otherwise, it isn’t good readable for everybody. That also the font size required for good indexation by Google.

It’s really smart to read the guidelines of Material Design (made by Google) as mentioned above.

With Adobe xD you can also download an app for on your mobile device, connect it and now you have the real sense of you lay-out on mobile. I’m not using that function as much as the preview mode on desktop tough.