In this video, Diane Cronenwett describes designing for multiple devices using native paradigms.
- Depending on what you're designing, you may have multiple screens and devices that you have to support. As designers, we have to be aware of the various screen sizes, but we won't be designing for every single device. Instead, you might pick the most common devices in the market and create a scalable design that can accommodate various form factors and screens. To help us understand the various devices out there, Google has compiled a list of screen sizes and resolutions for Android, its native platform, as well as Apple's native platforms of iOS, OSX, and some devices for the Windows platform.
The items listed here refer to desktops, laptops, phones, tablets, and watches. TV and other devices aren't listed here, which is okay because these types of devices are often approached differently. This table helps us understand a few things about designing for multiple screens. First, this table tells us that we will need images and assets that can be scaled up and down, and multiple sizes of assets, because they'll need to be imported into various sizes.
We can see this in the Density column which contains HDPI and XHDPI information, referring to the dots-per-inch. The material design table gives us a lot of information for various device types. Android runs on a lot of different types of devices, whereas Apple products have a limited amount of devices and uses a slightly different approach for image scaling. In the documentation for Apple iOS, the images are in 1x, 2x, and 3x. And if I change this to watchOS, you'll see that the table here also shows the resolution ranging from 1x to 2x.
Changing this again to tvOS, you'll also notice that 1x and 2x are also the sizes needed for AppleTV. Fortunately, you don't need every variation of images, because if you're using a software like Sketch, when exporting assets, there's a setting that will allow you to create assets for both iOS and Android, and for different resolution types. In addition to image resolution, we'll also have to take portrait and landscape modes into consideration for tablet and mobile devices and make sure the content is still represented in a usable way on these devices.
Designs viewable on mobile, tablet, and desktop, regardless of whether your app is responsive, native, or hybrid, will need to employ a mobile first design and make some choices about the core set of tasks the user will be performing in the experience. Approaching the design mobile first helps to prioritize key tasks and start creating an information architecture that can scale up to a bigger sized device. Information architecture, also known as IA, refers to how the content is organized, which will inform the layout of the screen and the navigation model.
This is an example of an IA diagram I created for a mobile project and this was mapped to a tab bar that also mirrored the website. Creating the IA and the navigation model are important for experiences to scale across devices so that users understand how to navigate through your apps. Image scaling, content prioritization, and navigation are the high-level key considerations when approaching a multi-device design approach.
- Principles for multidevice design
- Responsive design in action
- Designing for multiple devices using native paradigms
- Designing mobile or tablet interfaces
- Designing for a watch, a TV, or for voice
- Creating an information architecture diagram
- Using Sketch to design your mobile experience
- Prototyping with InVision
- Exploring Bootstrap and Foundation