Size Matters
Designing For Multiple Screen Sizes
Recently, I took existing designs and adapted them to a wide variety of devices. Some of the things I learned that you’ll want to keep in mind when designing for multiple devices are to do your research, prioritize devices, keep content at the forefront, stay flexible and empathize with the user.
Do Your Research
See who the user base of the app really is and make sure that the most important users get the best experience that you can provide. Don’t waste valuable time working on designs for devices that don’t even meet the technical requirements to run the app.
Just because a device exists, doesn’t always mean that it can be supported. Talk to your client about the limitations and user base to make sure everyone is happy (or as close to happy as possible).
Prioritize Devices
There are so many different devices on the market, and the variety of options can be a pain point for designers and clients alike. Designers want to design for the latest and greatest devices and make something that works perfectly with all their design flourishes intact. Clients want to reach the greatest number of users possible. As a designer, you will never get the dream scenario where you can just design for the shiny new device and ignore the older ones.
But you can’t design for all devices. So how do you determine which ones you do design for?
Elevate Content
This is a rule to keep in mind no matter the project. When content and UI needs to be adapted, make sure the user doesn’t lose what they are opening the app to see. If you shrink the copy/content in the app just to retain some cool visuals and the user struggles to get the content they want, everyone loses. Always preview your designs on an actual device and ask others to look at the designs to make sure you aren’t causing legibility issues with the adaptation for smaller devices.
Stay Flexible
If you know ahead of time that a project will need to accommodate a wide variety of devices, try to use UI elements and structures that adapt with little-to-no altering. Long scrolling screens are your best friend here. Avoid cards or other elements that don’t allow for overflow scrolling of content. Cards do not handle large size changes well.
It is in your best interest to keep layers organized, no matter the type of project you are working on. This is especially valuable when working with adapting your designs to varying screen sizes. Having a good handle on your layering and naming structure provides you a framework that can be easily scaled. If things aren’t organized, you risk elements falling through the cracks and not being scaled properly, or worse, stretched and skewed.
Simplify
Often adapting your designs for small screens means stripping away the flourishes and other exciting elements. It can be hard, but it is a good exercise to hone your skills and get better at judging what is essential to the user’s experience. Simplifying your designs can even inform the design on larger devices.
Empathize
As app designers, we want to be the path of least resistance between a user and their end goal/content. Don’t overthink it too much; just put yourself in the user’s shoes. Create an experience that works for them before putting too much time and effort into “beautification.” Form follows function, my friends.
What would you want the app to do for you? Do you NEED that one flashy UI element to accomplish what you opened the app to do? Keep it simple. The users will thank you for it. Even the ones on the most obscure and tiny devices.
In the end, your goal should be to provide the best possible user experience. Make sure you know who those users are and what kind of devices they are using. Elevate content to the forefront and stay flexible for all the devices necessary. Keep things simple for the users and look at things from their perspective. If you follow these simple rules, your apps (and any product for that matter) should land in the hands of some very happy users.
Check this article out on Intrepid’s blog!
Have any stories or tips you’d like to share about designing for multiple screen sizes? Let me know @SMSeddy or in the comments below!
