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 iWatch 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 paintWhen 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 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 colorAfter 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.
We 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.
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 yetThis 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 site.
—
Tyler Rasmussen
Principal Design Manager, OneDrive
