Designing an app isnít about patterns or controlsóitís about creating a great experience for your users, every time. While youíre designing with the optimal user experience (UX) in mind, you also have to think about using color effectively, implementing usable controls, and understanding what should and shouldnít be in the app. On top of that, of course, you need to make the app work on multiple devices with multiple sizes, whether itís a phone, tablet, or desktop device.
Snap to the grid
The grid is where it all starts. Itís the foundation of app design, and itís meant to guide each step of your design. The base 4-pixel grid serves a very important purpose: it helps you keep your design elements lined up, orienting the user to whatís visually important. You can find out more about the importance of grid in this MSDN article
The grid also allows you to scale your design elements consistently across multiple display sizes. To avoid decimal numbers when your UI scales up or down, you should ensure that any guides in your grid layout are based on a number thatís divisible by four. To make your designs as crisp as possible, snap them to the grid. In the example below, you see what happens when your design elements map to a 4◊4-pixel grid: the element or image will always have sharp and crisp edges.
By contrast, when you donít snap to the grid, your design elements will have blurry and soft edges on some devices, like this:
Images and text to the grid
If your app uses horizontal alignment of icons with text, the best approach depends on the icon size and amount of text.
Where multiple or single lines of text fit within the height of the icon, we recommend the text be vertically centered. Once the height of the text extends beyond the height of the icon, the text within the height of the icon should then align vertically and additional text should flow naturally below. Here is an example of how that looks:
Aligning circles and typography
If youíre using circles with typography, you need to make sure the two align properly. The samples below show the best ways for both horizontal and vertical alignment:
Be bold with color
One of the easiest and most impactful ways you can differentiate your app is by choosing the right colors. The palette you decide on can be a huge factor in making your app attractive and user friendly.
Look at the striking use of bright yellow contrasted with black in the example below. The yellow very simply, yet effectively, highlights a selected area:
The following example shows an effective use of bold color, as well as good contrast between the primary hue and the background.
Color selection basics
Typically, youíll start with a primary color in your app, and an accent color that you can use for things like Start, Taskbar, and hyperlinks in the common controls. Once youíve selected an accent color, light and dark shades of the accent color are created based on HCL values of color luminosity. You can use shade variations (see below, assuming weíve selected red) to create visual hierarchy and to provide an indication of interaction across your app.
In terms of color and contrast, typography should always be distinct from the background color. However, too much contrast can be hard to read on digital screens. As you can see in the below example, white and light background colors make the foreground color much easier on the eyesóand easier to distinguish.
Color contrast is especially important when designing for multiple devices and accessibility. A contrast ratio of at least 4.5∶1 is best, and a ratio of 7∶1 provides optimal legibility for content. The following tools and sites can help you check your color contrast:
Colour Contrast Analyzer
is a helpful tool for checking contrast. Using this tool, you can sample the foreground and background color and use the results to define your color contrast ratio.
When color and contrast arenít used properly, the results can be extremely hard to read. The examples below show some good uses of contrast, along with problematic ones (marked with diagonal lines).
In general, a light theme works very well for productivity-centric apps. By using a light theme, you make it easier to read long blocks of text over a prolonged period of time.
A dark theme, meanwhile, provides a visible contrast for apps that are more media-centric, or in scenarios where users are presented with a lot of video or image-based content.
Taking our red accent color, these would be the light and dark themes options for our app:
And as you build out your UX, keep in mind that black, white, and grey generally go with everything. Even well-placed bold colors can work wonders against black, white, and grey, as you can see here on the Microsoft home page:
Hereís another example:
If youíre looking for inspiration, there are many free color palettes to choose from online, such as https://color.adobe.com
, a community where people create and share their own palettes. Other excellent sites for swatches and schemes are Coolors
Simplify your user flow
Navigation elements help users get to the content they want, but they can also take up space that your app could otherwise use for content. Thatís why itís critical that you spend some time considering your appís flow and use the navigation elements appropriate for your appís structure. Below are three ways you can use navigation elements to improve your appís overall user flow:
- Tabs and pivot You can use tabs and pivot when you want to display a persistent list of links to pages at the same level, such as in an app that app has between 2Ė5 pages, or where you expect a user to frequently switch between pages. One tab wouldnít sense and more than 5 would make things crowded. A good example of tabs and pivots in action is a restaurant-finding app:
- Nav pane A nav pane displays a list of links to top-level pages. This is a good choice when you donít expect users to frequently switch between pages, when you want to conserve space (at the expense of slowing down navigation since a user has to expand out the control), or when most of your appís pages exist at the top level. This smart-home app uses a simple, attractive nav pane:
- Master/details Lastly, letís quickly touch on an app UX primarily driven on a list, or master view, of item summaries. In this type of data-driven app scenario, a user selects an item and displays its corresponding data elements on an items page in the details section in the app. On a smaller screen, this items page would replace the master view, while a larger screen would display them side-by-side. Itís a good idea to use this element when you expect users to frequently switch between child items, or when you want to enable the user to perform high-level operations like deleting or sorting on individual items. This stock-tracking app shows how a master/details pattern creates a good, attractive user flow:
To learn more about effective use of these navigation elements (and many more!), visit the Windows UI navigation basics pages
for an in-depth discussion of topic.
Making your design responsive
Since your app will likely need to flow across different devices and multiple sizes, you should always be thinking about adaptive/responsive design. We covered this in depth in a recent 10◊10 blog
, which is worth checking out.
To help make responsive design seamless, Windows 10 adds the VisualStateManager
and a number of new controls
. By taking advantage of these controls, and the Universal Windows Platformís built-in features, building blocks, and responsive design techniques, youíll be able to create a UI that looks great on any device.
For additional information, explore the Design basics section of the Windows Dev Center
Remember, many users will base their judgment of the overall usability and quality of your app primarily on the design Ė often formed in the first minute or two of use. No matter what stage of development youíre in, itís always worth finding some time to polish your design, whether itís through focusing more on snapping to the grid or sprucing up your color and animation. You can find some additional design guidelines, as well as Illustrator templates, at https://dev.windows.com
. You might also check out Smashing Magazine
, a great source for good visual design info.
With week 8 of our Windows 10 by 10 development series
wrapped up, we hope you try the DVLUP Quiz challenge for design
and earn XP and points. Next week, weíll continue the theme of app tuning by looking at how to better secure your app. For now, head on over to DVLUP or reach us on Twitter via @WindowsDev
and #Win10x10 in the meantime, telling us your top design tricks for making your app great.