Designing for multiple devices in 2020
It’s common knowledge that you simply can’t afford to target a single device when designing a product. We live in a world where responsive websites are everywhere. It’s a world where people no longer just have a smartphone. You can never know what device your customer may use your product on. Let’s not take any chances, here’s how you design products for multiple devices.
I’m Hasnain, a UX Designer from Canada. I work for a social startup called Pachira. My job involves me designing solutions for a vast amount of users. These users come from various backgrounds and cultures. And with that, the devices they use also differ. As a product designer, you have the responsibility of getting your product in front of as many people as possible.
Know your user
As UX designers, we all know the significance of performing user research. This is the backbone of creating user-centered products. When you’re trying to design your app or website for different devices, you need to know how and where your users use your products.
Does the majority of them use a mobile phone? a web browser? Or do they use an iPad Pro? Qualitative research on this will help a lot to prioritize devices or screen sizes when you design.
You might even be surprised by the results you find. Maybe there’s a significant amount of users who would love to have a smart TV app or an Apple Watch app. Always design for a reason.
Start from the smallest screen first
When you think of designing a product, you might be tempted to start from the desktop or large screen first. This is normal, and a lot of us do it. But in UX, we have learned that we should make the design as simple as possible. Only the most important features should be included. We have even learned about things like feature creep in project management. So experts now recommend a little different approach, design smaller screens first.
In order to make sure we don’t get too distracted by adding as many features as possible, it’s recommended to start from the smallest screen first. That way, we’re forced to include only the most important parts of the product because we don’t have a lot of real estate to work with. But not to get confused, this mobile-first approach is very different from adaptive or responsive design — as Dasha Nekoz explains it in her article.
The 4 C’s of responsive design
Patrick Haney, a UX Designer at Hanerino, who was inspired by the 3 C’s framework, explains how we can use a framework to build great products for multiple device sizes. “Okay, I thought you said 4 C’s of design”. Yes, Patrick has added a C of his own to make the framework even better.
For those who are not familiar with the 3 C’s framework, it deals with consistency, complimentary, and continuity. Patrick thinks this should also include ‘contextual’.
The products should be consistent, that is it should follow a defined set of design patterns and be built using a design system that is shared throughout all device sizes. Continuity suggests we need to create an experience that is seamless. The user should embark on a journey. Complementary suggest that we should design products that work complementary with each other. Contextual suggests that designers need to know what screen will be used by users at what time.
Following this advice will help you go from a good designer to a great designer.
Design systems are love, design systems are life ❤️
Getting back to the point of consistency, it’s crucial that we create an experience for the user that is familiar across all of the devices. There’s actually no limit to what you can do here.
When you think about design systems, your mind immediately goes to the ones that you create on Sketch or Figma, or whatever tool you use. With the beautiful color palette, typography, and elements. You’re not wrong, that’s the most important bit, but I need to point out that this doesn’t stop there.
You need to make sure your product is consistent with your brand as well. You can achieve this by designing a voice and tone guideline for your brand. With a kick-ass design system and a strong voice and tone guideline, you can create products that make a lasting impact on your users.
Follow the principles
Design principles change from device to device. You can’t use the same rules you follow while designing an iPhone app when you’re designing one for the web or a tablet. The button sizes, negative space, and typography are a few examples.
CTAs or buttons need to have a bigger clickable area as the device sizes get bigger. So does the typography. The scale of your typography needs to adapt to the change of device size.
If we take a tablet, for example, we have a lot more real estate to work with. We can use a column layout for the content so that the user no longer have to scroll down to see extra content, you can see a lot more of it since it’s side-by-side.
We can learn a thing or two from accessibility guidelines as well. Accessibility guidelines explain how we can design products to visually challenged individuals. It tells us how the elements on the screen need to change when the demographic of the user changes. You can’t design a product for senior citizens with the same elements you use to create one for a Gen Z audience.
The tech industry is ever unpredictable. New devices keep coming out and people’s habits of using devices change every day. It’s our responsibility as designers to keep up with the change. It’s important to know not only what to create, but also, where to provide it.
