Windows 10: Delivering a more beautiful OneDrive

Brink · Jun 15, 2015

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 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 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.

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 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 site.
—
Tyler Rasmussen
Principal Design Manager, OneDrive
Click to expand...

Source: Delivering a more beautiful OneDrive | OneDrive Blog

:)

Andre Da Costa · Jun 15, 2015

Automatically backup OneDrive Files?

Ok, so, when you begin writing this beautiful story in Microsoft Word today. Next week, you write 5 additional chapters, save it to OneDrive. You make a backup of the OneDrive folder to an external drive. A catastrophe happens, but you continue working
on your document in Word Online from OneDrive adding more chapters, you restore your computer from a system image with the earlier 5 chapters of the document, which syncs with the copy on OneDrive.

Wow, I can really see how thats gonna work out for you.

Erdeslawe · Jun 15, 2015

I need access in File Explorer to both my personal OneDrive that comes with Win10 and the OneDrive (Office 365 Business version) account I use at my work

It's not (yet) a feature of Windows 10. The following independent report link suggests it's 'coming later' as part of a universal app but I can't find anything more recent.

Microsoft to Deliver Unified OneDrive Desktop Sync Client on Windows PCs and Macs - Thurrott.com

paulsalter · Jun 21, 2015

just noticed I have the updated version, looks nice, what would be better is if they had thumbnails for folders that contain sub folders

Windows 10: Delivering a more beautiful OneDrive

Delivering a more beautiful OneDrive

Delivering a more beautiful OneDrive

Delivering a more beautiful OneDrive

Delivering a more beautiful OneDrive - Similar Threads - Delivering more beautiful

More space on OneDrive

More space on OneDrive

Aero is beautiful

Microsoft Bing now delivers more visually immersive experiences

Samsung Galaxy Note10 delivers OneDrive Gallery experience

Sway Preview expands and delivers more feature improvement

Delivering a faster and more responsive Outlook.com

OneDrive and Office deliver unique capabilities to do more with others

OneDrive delivers unlimited cloud storage to Office 365