Designing dual-screen apps with Microsoft Surface Duo Design Kit

This post has been republished via RSS; it originally appeared at: Microsoft Mobile Engineering - Medium.

A look into designing for foldable/dual-screen Android apps

Microsoft Design on Instagram

Since the inception of smartphones and the app ecosystem, we’ve been designing apps with an abundance of resources available over the web. Back in the time when Material Design was first launched in 2014, and it was mostly thought of as a new design language for Android with tons of resources available for designers and developers to build beautiful and usable products faster.

We live in an interesting time right now where our smartphone screens are evolving and adapting to our growing needs — where we now have devices that bend, fold, and transform to our environment.

But as a designer, I had challenges looking for resources and inspirations that could help me design apps for foldable/dual-screens. The only resource available on the web was Google’s developer documentation on building apps for foldable. We felt there was an ultimate need for having something for designers who want to design for foldable/dual-screens. So at Microsoft, we created a Design Kit for the Surface Duo to accelerate your design process and start creating meaningful experiences for the two screens.

We thought to ourselves: what if we could design a kit to make the process faster and use it in every project to save time at work? We were thinking of something that will support us in every stage of the digital design process and help other app designer get their work done faster. We started to work on the Design Kit.

Why is the Design Kit available on Figma?

Quick remote collaboration 🤝

We work remotely and Figma makes my life easier. It’s a perfect tool for collaboration with my colleagues. Giving and receiving feedback in seconds is awesome! You just send a link to the Figma file and that’s it. No need to download, install or update anything. Everyone can see and comment on your designs. Having an up-to-date browser is enough. Think of all the time you save! You can use it on whatever you want. Check out Figma- It’s Free!!

Speedy workflow 💨

Everything happens in the browser and it happens really fast. I have never experienced crashes or lags while working with Figma. Even more, the browser-based workflow is really great. For example, I can go to a website, right-click and copy a high-resolution image and then I just paste it in on Figma, and boom!! I will have this image ready to edit in my design.

Autosave feature 💾

Figma is cloud-based and all you need to do is autosave to the server so no need to worry in case you forget to save your work or something bad happens to your computer.

Design-prototype-develop 🤹

You can design, prototype, and do developer handoff with one tool.

Who can use it?

Literally anyone! Isn’t that cool?

Designers

Whether you are starting out new or have been creating experiences for their apps and want to adapt their designs for dual-screen/foldable devices. This official resource from Microsoft will help you get there.

Developers

As mention before Figma serves as a developer handoff tool as well where devs can inspect every designed element for the Web & Android. While working on the Kit we also made sure to allow devs as a means to explore the screen dimensions and learn in detail about the design patterns across two screens. To learn more about the development for dual-screens/foldable visit the page at Microsoft Docs.

Managers

This toolkit comes in handy if one wants to quickly communicate ideas with mocks across multiple stakeholders or among the members of the team.

Understanding the device first

It’s important to have a picture and experience the possibilities of a dual-screen before diving right into it.

Design Kit Overview

The kit details dual-screen capabilities and shows common use cases to help inspire your mobile app design allowing you to easily grab design elements and modify them as needed.

When we were creating the design resource we emphasized more on the minute details of the device since the device offers a variety of orientations and postures to keep in mind.

Safe Areas in the Surface Duo
  • Design patterns and guidelines: Shows you the possibilities of dual-screen displays for different app scenarios.
Guidelines based on design patterns
  • Postures: All dual-screen devices can fold, flip, and rotate. Both screens can be used as displays, or one screen may act as a keyboard. The different form factors support a wide variety of activities and allow the user to fit the device to their situation. Apps can reside on one side or can be spanned across both displays. An app or a website that responds to spanned state integrates with the semantics and intent of logically splitting the presented content.
Postures that the device can adapt to
  • Controls and layouts: Highlighting details such as screen dimensions, pixel density, and orientations for you to be aware of when designing for your apps.
Layouts for the Surface Duo
  • Components: More than 250+ components and 180+ styles to get you to design faster without any friction.
Assets and component library
Component view

Get the Surface Duo Design Kit

You can download the Design Kit from Microsoft Design. We are on a journey to make this the one-stop place for designers to design dual-screen/foldable experiences and with that, we are committing to expanding the Design Kit with more design content and guidance in the future.

We would love to hear from you about your experiences designing dual-screen experiences for the Surface Duo. Please reach out using our feedback forum or find us on Twitter @surfaceduodev.


Designing dual-screen apps with Microsoft Surface Duo Design Kit was originally published in Microsoft Mobile Engineering on Medium, where people are continuing the conversation by highlighting and responding to this story.

REMEMBER: these articles are REPUBLISHED. Your best bet to get a reply is to follow the link at the top of the post to the ORIGINAL post! BUT you're more than welcome to start discussions here:

This site uses Akismet to reduce spam. Learn how your comment data is processed.