As part of Steal Like an Artist challenge where I try to replicate digital interfaces to unpack the intricacies of UI design, I ran into the question of what resolution should I replicate screens in?

The purpose of this challenge is improve my technical eye for UI. One aspect certainly being responsive design, I put aside designing and started researching about the mysterious world of responsive design. Having decided to replicate designs for each major breakpoints (desktop, tablet, mobile), as if I am the designer delivering the assets to be developed, I looked into answering the question what exact resolutions should those breakpoints be?
‍
I went down a rabbit hole, intensely researching about screen resolution, responsive design, and pixel density. These moments of learning are exactly why I wanted to do this challenge. Here are somethings I found.
‍

Understanding density-independent pixels

I learned to start designing digital interfaces with density-independent pixel (dp) size in mind. The purpose of dp is to make sure all elements like a button on an interface has the same size across all screens.

‍

For example, a button with 36w * 88h dp is multiplied with the display density. On a 1.5x pixel density (check display density here) will render the button to 54w *132h.

Most common dp for your demographic

As a rule of thumb, start by asking what devices do majority of your users use? If you know it's an andriod app, starting with 360 x 640 is reasonable as majority of andriod phones have this dp.

Resources

• A one stop link to figure out what resolution to start your designs in.
  https://medium.com/google-design/how-to-find-device-metrics-for-any-screen-62b9ad84d097 ‍
• Device metrics(no longer updated)
  ‍https://material.io/resources/devices/‍
• Video (33m) clearly explains responsive design and the basics!
  https://www.youtube.com/watch?v=CPb9BmrO8KY‍

Conclusion

This research session was immensely insightful. I usually find myself scrambling for information mid projects in a just in time manner which meant I glanced over irrelevant information, leaving me with incomplete knowledge of responsive design. Today, I am more comfortable conversing about this topic and will stay humble to learn more about it!

After this research session, I began my first Steal Like an Artist journey by replicating google.com. Yes, the plain page. It was harder than I thought 😅. Read it here!