Skip to main content
Skip to main content
Microsoft 365

Delivering a more beautiful OneDrive

It’s been an exciting – and busy – few months here on the OneDrive Team. We’ve been rolling out lots of important design updates to folks using our Android, Windows Phone, and iOS apps. The first major design update came earlier this year on the Windows Phone app. And if you’re an Android OneDrive user, you’ll have noticed our completely redesigned app for Android that we released a few months back. Next, came our wearable work on Apple Watch and Android Wear. Then, just a few days ago, we released a major update to the way we represent files and folders in our iOS app.

We really hope you’ve enjoyed all the updates but, today is equally as special. Today, we are pleased to release our completely re-designed, responsive web experience.
More than just a new coat of paint

When we began design work on the new web experience we could have just updated some colors, adjusted a few font sizes, and called it a day, but we knew that wouldn’t be enough. In order to achieve a truly cohesive web experience across the breadth of devices people use to access OneDrive, we had to start from scratch. And, nothing is more fundamental to any design than the visual grid, color palette, and typography.
Aww snap!

After several rounds of iteration, we landed on a 4px grid, which allowed for enough flexibility in layout, while maintaining the visual density and stability we wanted the experience to achieve. We also wanted to bring a measure of efficiency to our studio processes by creating a single grid that could work across both web and native layouts. The 4px solution accomplished both goals.

Every component was reworked to snap to the new visual and responsive grids: Panels, dialogs, file list, left navigation, commanding, and even buttons. It was a lot of work, but we’re quite pleased with the outcome, and we hope you are too.

In parallel, we did an extensive audit of the class of device and its relationship to usage. This helped us better target the ideal number of responsive breakpoints for our experience. We landed on six, and from that developed our responsive grid. It brings a sense of order and structure to our experiences while also being flexible enough to enable a more useful web experience on the go.


A splash of color

After the grid, the color palette came next. Our brand color is a well-established #234fa2, so we started there and worked up a full set of complimentary tonal grays with a few accents. We did a deep accessibility pass, made a few adjustments, and arrived at the color palette you see in the product today. It’s a well-balanced set of colors, that brings a refreshing, creative energy to the OneDrive UI.


Type is about clarity. Keeping it simple improves the way a design communicates. And one of the biggest goals we had when it came to our decisions around type was to create a more legible, readable, and clear experience that celebrates your content, not our UI. For web, we use Segoe, a custom type family that is the core visual identity element throughout Microsoft’s product ecosystem. It is used for all digital products and is designed to maintain legibility across sizes and pixel densities.

weight ramp

We limited the number of treatments used and created a type ramp that created a clear hierarchy of size and weight. We wanted it to feel balanced while providing clarity into the relationship of elements to each other.
Not done yet

This redesign was a major part of our effort to make OneDrive the best place for everything in your life. And we’re excited to finally be able to share it with you. The new experience is rolling out to all OneDrive users over the next couple of days and we’ll bring this to our business users before the end of this year. It was a lot of work, and we hope you like it. But, the most exciting thing is we aren’t finished yet, so stay tuned for even more improvements to come!

And as always, let us know what you think over on our UserVoice forum.

Tyler Rasmussen
Principal Design Manager, OneDrive

Editor’s note 6/16/15 – This post was edited after publication to include a screenshot of the new web UI and to correct missing links.

You may also like these articles

Image for: Image of a small business male with a Surface in modern workplace.

Introducing new OneDrive features to share and collaborate across work and life

The OneDrive team is excited to announce new features that bring a more connected and flexible files experience to business users and more control to admins across Microsoft 365 along with a more personal touch to everyone at home.

Image for: A woman reflects inside a conference room.

The top 9 ways Microsoft IT is enabling remote work for its employees

As COVID-19 cases continue to spread around the world, millions of people have moved to remote work. We're right there with them.

Image for: Image of a worker checking his phone while looking out a window over a cityscape.

Microsoft again recognized as a Leader in the 2019 Gartner Content Services Platforms Magic Quadrant Report

Today, we are honored that for the third year in a row Gartner has recognized Microsoft as a Leader in the Content Services Platforms Magic Quadrant for 2019. Once again, Microsoft placed highest in Ability to Execute.