• Menu
  • Pular para navegação primária
  • Skip to main content
  • HOME
  • FOUNDATIONS
  • UX PROCESS
  • WIREFRAMES
  • RESEARCH
  • FIGMA
  • ADOBE XD
  • SOCIAL GOD
  • search
  • HOME
  • FOUNDATIONS
  • UX PROCESS
  • WIREFRAMES
  • RESEARCH
  • FIGMA
  • ADOBE XD
  • SOCIAL GOD
  • search

Designing cross-platform experiences & the Four Cs

When designing a new product or feature, it’s important to think about the different types of platforms that the design will be experienced on. As a refresher, a platform is the medium that users experience your product on. Some common platforms are:

  • Desktop computers
  • Laptop computers
  • Mobile phones
  • Tablets
  • Wearables, like smart watches
  • TVs
  • Smart displays
Graphic of various portable devices such as laptops, tablets, smart phones, smart watches

A product might be experienced on countless different platforms, but desktop computers, laptop computers, and mobile phones are the most commonly used platforms for interacting with apps and websites. These are the platforms that you’ll spend the most time focusing on during this certificate program. In this reading, you’ll learn about key considerations when designing for different platforms to help you get started.

Screen size 

The first consideration when designing for various platforms is adjusting design elements and features to fit different screen sizes. For example, you have a lot of screen space when you design for desktop and laptop computers. But when you design for smaller screens, like mobile phones, you have to carefully decide which parts of the design you’ll prioritize including in the limited space. This means making every word, icon, and image count!

In the first five courses of this certificate program, you will design an app for a mobile phone. In the sixth course of the program, you will design a responsive website, which allows the design of a website to change automatically depending on the device’s screen size. This means you’ll learn a lot more about designing for different screen sizes later in the certificate program, so stay tuned.

Interaction

In addition to the size of the screen, you also need to consider the way users interact with each platform and how those interactions might affect your design decisions. 

It’s also critical to consider accessibility when developing your designs at each point. Different groups of people will interact with your product in different ways, like using a screen reader, closed captioning, or a switch device. To get started, it’s helpful to try using some of these technologies yourself, in order to understand how people with disabilities might interact with your product on different platforms. 

Content layout

In the world of UX design, layouts refer to the way that information is organized on the screen. For example, when designing for desktop or laptop computers, you have the advantage of working with a familiar, standardized size: landscape (horizontal) mode. The screen is wide, content can be laid out in columns, and there’s much more flexibility to design. 

In contrast, mobile phone content is usually laid out in portrait (vertical) mode, which is ideal for scrolling. In addition, mobile phones often allow users the option to use landscape (horizontal) mode by rotating their device. Implementing this in your designs requires more work from you as a designer, but provides users with a wider range of options.

Consider the layout of content on a couple more platforms: tablets combine both the desktop and mobile phone user experience, which means you can incorporate aspects of desktop and mobile phone content layouts in your designs. Smartwatches tend to have compact square or rectangular screens, offering very little digital real estate to lay out content. 

Functionality

There are a lot of reasons why users might choose one platform over another, but functionality and the kind of tasks they want to complete is a huge driver. Your designs for each platform will likely vary based on how and when you expect users to need the product.

The four Cs of designing for multiple platforms

Successfully designing across platforms means providing users with a good experience, no matter what platform they use! As a UX designer, your job is to make sure that your designs account for and take full advantage of the unique features of each platform. When preparing to design across platforms, it’s helpful to keep in mind the four Cs: consistency, continuity, context, and complementary.  

Graphic from the point of view of someone looking at their hands on a laptop. They are holding a phone and wearing a watch.

Consistency: Most companies have specific design guidelines that need to be followed in order to stay consistent with their brand identity, which refers to the visual appearance and voice of a company. When designing a product, it’s essential to stay true to the company’s brand guidelines in order to maintain consistency across platforms and drive brand awareness. Maintaining a consistent design helps improve the user experience and build trust, because users can expect the design to feel familiar across platforms and products.

A graphic of a laptop and a phone next to each other. On the laptop, there's an email draft. Same draft is on the phone.

Continuity: To provide users with a seamless experience as they move between platforms, UX designers also have to prioritize continuity. Continuity in design means that users can maintain their progress as they move from one platform to the next. The user experience for each platform might be slightly different, but the product’s functionality should still be connected. Without continuity, users can become frustrated if the progress of their experience does not carry across platforms.

A graphic of a laptop screen next to a smart watch screen. Email appears on laptop, notification appears on the watch.

Context: It’s also important to consider the context of each platform you’re designing for. This means thinking about when and how users prefer to interact with certain features on different platforms. Considering that a user might check their email on a smartwatch as they sit in their car after they get home from work, then designing with that situation in mind, is an example of context.

A graphic of a laptop next to a phone screen. On the laptop, hands are typing an email. On the phone, they are adding images

Complementary: One way to create a great cross-platform user experience is to make sure that the design of each platform adds something new for the user. Taking into account how each platform could uniquely enrich the overall user experience is the best way to create complementary UX designs.

Examples of cross-platform experiences

Now that you have the hang of designing across platforms, check out some real-world examples of products with stellar cross-platform user experiences.  

YouTube 

For a lot of people, YouTube is a go-to source for watching endless hours of video content. The YouTube mobile viewing experience complements and smoothly transitions from a desktop browser. 

WebMD

WebMD is a healthcare website where users can learn about the symptoms, diagnosis, and treatments related to a wide variety of medical conditions. The WebMD “Symptom Checker” allows users to click on certain areas of a body map and get a list of possible symptoms associated with those body parts. 

Airbnb

Airbnb is an online rental platform where users can list their own space to rent or book a stay in someone else’s space. The Airbnb user experience on a desktop computer is straightforward and similar to other rental sites, where you can filter your search based on your needs. The mobile app seamlessly integrates these same features and allows for continuity throughout the booking process.

“ExtraLibris®.