Site icon TheWindowsUpdate.com

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
Guidelines based on design patterns
Postures that the device can adapt to
Layouts for the Surface Duo
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.

Exit mobile version