- Joined
- Jun 27, 2006
- Messages
- 23,048
- Thread Author
-
- #1
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.
Link Removed
By contrast, when you don’t snap to the grid, your design elements will have blurry and soft edges on some devices, like this:
Link Removed
Alignment
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:
Link Removed
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:
Link Removed
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:
Link Removed
The following example shows an effective use of bold color, as well as good contrast between the primary hue and the background.
Link Removed
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.
Link Removed
Contrast
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.
Link Removed
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).
Link Removed
Color themes
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:
Link Removed
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:
Link Removed
Here’s another example:
Link Removed
If you’re looking for inspiration, there are many free color palettes to choose from online, such as https://color.adobe.com and COLOURlovers.com, a community where people create and share their own palettes. Other excellent sites for swatches and schemes are Coolors and Palleton.
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:
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.
Wrapping up
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.
Link Removed
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.
Link Removed
By contrast, when you don’t snap to the grid, your design elements will have blurry and soft edges on some devices, like this:
Link Removed
Alignment
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:
Link Removed
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:
Link Removed
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:
Link Removed
The following example shows an effective use of bold color, as well as good contrast between the primary hue and the background.
Link Removed
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.
Link Removed
Contrast
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.
Link Removed
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).
Link Removed
Color themes
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:
Link Removed
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:
Link Removed
Here’s another example:
Link Removed
If you’re looking for inspiration, there are many free color palettes to choose from online, such as https://color.adobe.com and COLOURlovers.com, a community where people create and share their own palettes. Other excellent sites for swatches and schemes are Coolors and Palleton.
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:
Link Removed - 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:
Link Removed - 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:
Link Removed
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.
Wrapping up
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.
Link Removed