We create cutting-edge software.

Designing for Windows 10 UWP from a Windows 8 app

Last June, during our app improvement journey, we added a red menu bar. That was the first step of the UWP redesign. Indeed, when Jérôme asked me to improve the design and add the store button (only for French users) I was naturally led to the future of Windows: UWP. I worked since then to adapt Cover for UWP.

On all platforms, we always want to follow the design language guidelines and add a little bit of us...

" Rules were meant to be broken

I tried it here too!

Windows 10 UWP Cover interface

With Windows 10 and UWP, Microsoft kept their flat modern UI design and introduced a lot of novelty. We read design guidelines and studied all latest apps from Microsoft and best developers' apps to identify what matters, which are the good solutions and what's less interesting. We want to be part of the 10 best apps on Windows 10.

On Windows side it's difficult because Microsoft is not always consistent. One example is the hamburger menu... It's difficult to find two apps from Microsoft using the same menu bar and menu button:

Windows 10 UWP hamburger menu inconsistencies

Depending on the team who implements the hamburger menu it's always different, even if it's two teams from Microsoft. It's always flat and modern UI but often with different sizes, positions and behaviors.

So, we tried to choose the best and leave the rest.

Windows 10 UWP inspiration

For example, Weather app for the hamburger menu (same team as News, or sports apps), Poki app for pop-up and especially in-app pop-up, Windows for the Cortana search bar and Groove for the reading state...

I would like to describe three big changes of Windows and our interpretation:

From horizontal to vertical scroll

In Windows 10, Microsoft made another big change, they went from horizontal scrolling to vertical scrolling. Horizontal scrolling was not a bad thing for us, especially for the Currently Reading part. Because all comics covers are portraits it's easier to make a highlighted slice in the UI in horizontal scroll than in vertical scroll.

Vertical scrolling in Windows 10 UWP Cover

Horizontal scrolling in Windows 10 UWP Cover

So, for the currently reading we were blocked if we wanted to keep the visual weight of currently reading with a beautiful grid.

We decided to extract currently reading from the library screen and make a special section for it (as now we got a big menu ;-))

Currently reading in Cover for Windows 10 UWP

Scaling party!

In Windows 8.1 the set of supported scale factors was different for different kinds of content. Classic desktop applications scaled to 100%, 125%, 150%, 200% and 250%; Store apps scaled to 100%, 140% and 180%. As a result, when running different apps side by side in productivity scenarios, content could have inconsistent sizes in different apps. In addition, on very dense displays, the scaling systems "capped out" at different points, making some apps too small on them.

This chart shows the complexity and limits of the 8.1 scaling systems:

Windows 8.1 UWP scaling

For Windows 10, they unified all scaling to a single set of scale factors for both UWP and classic applications on both the Desktop and Mobile:

Windows 10 UWP scaling

In Windows 8.1 all scaling topped out at 180% or 250%. For Windows 10 they knew that devices like 13.3" 4K laptops and 5.2" and 5.7" QHD phones would require even higher scale factors. And thanks to the new unified scaling model of Windows 10 which goes up to 450%, we will also have to support future displays like 4K 6" phones and 23" 8K desktop monitors.

Ok, cool! But as a designer involved in making the best quality app for Windows, is it really mandatory to produce all images in 11 different size now? As I'm not suicidal, I had to find a better solution.

We knew the solution will be on the vector side, but from the beginning of XAML, Jérôme and I retry every 6 months to find a good way to include vectors images directly in the code and that was never perfect.

Big news! It's a little bit far-fetched and not perfect like specifics png for every scaling, but it works!

I design on photoshop (inspired by this article) at scale 100 (1366 pts x 768 pts for desktop and 360 pts x 480 pts for mobile), then I export pixels perfect svg, finally I open all of them in illustrator with a little script which export to xaml (thanks to this plugin).

In terms of design it's nearly perfect. Perfect at scales 100, 200, 300, 400 (because they are all multiples of 100); OK at scales 450, 350, 250, 225 (because high dpi screens are nicer for non pixel perfect icons) and not bad at 175, 150 or 125 (125 is really the worst because we can see that it's not pixel perfect, but screens with these densities tend to disappear).

Windows 10 UWP scaling comparison

In terms of size it's a big victory! We had 5,8MB of png and now all xaml icons take just 55KB of disk space.

Hamburger menu

It seems pretty clear for us that Microsoft push this type of navigation, they use it in all their apps, we weren't fan of this (http://deep.design/the-hamburger-menu/) but we decided to implement it because on desktop we can keep all icons of the menu visible, because it is used all over in Windows (so users should know it), because it's recommended in Microsoft guidelines and because we want an evolutive menu (I had to add a button for settings, store, etc.).

With this navigation, we choose to animate the panel over the content and over the title bar, it's a mix between Groove and Weather apps.

We also choose 320 pts width size and full screen on phone.

There is a lot more to say, next time I could write about continuum design exploration, the full screen in all different modes, or fonts guidelines...

You can download the app on the Windows Store if it's not already done.

Follow us on Twitter and Facebook for more tips and tricks about Cover.

Good reading!