I was battling with some icons this weeks so I figured I’d pass on some of my general experience in this area. I’ll hold off on the sample of the command pattern for next week.
Let’s make sure we get the terminology correct, what Microsoft once labeled “Metro UI” is now called “Modern UI”, which is the Windows 8 Surface UI for Windows Runtime (aka Windows RT) apps. It was a lot easier when they just called everything Metro UI.
First off, I’m not a graphics designer or UX expert. I’m a software engineer. My degree is in computer science, not graphics design. As a whole we, and yes, I’m sure I probably mean you too, software engineers design user interfaces poorly. Sometimes downright horribly. But not all software companies have graphics designers or UX experts on staff (which I consider a shame). Not all clients want to pay for UX work (which is doing themselves a disservice). So I’ve had to fill in for the role of both graphics designer and UX expert many times.
I try and keep up with the latest releases in the Microsoft ethos as it relates to .NET but I also try to round off my rough edges with some UX reading. I know this doesn’t make me a UX expert by any stretch of the imagination. But it does make me just slightly more competent this area. Also, since I do a lot of UI work, having a general understanding of UX I feel is necessary for me to competently do my job. Little things like “error messages should be apologetic” and “where there is both an icon and text, the icon should come first” end up making a big difference to a good UI.
Getting Started in UX
If you are interested in UX I would recommend starting with the Microsoft UX guidelines for Windows Runtime apps. After you’ve digested that thriller, try doing some reading on ux.stackexchange.com. After that you can start in on some industry sites like UX Magazine.
On To Icons
The Microsoft UX guidelines above recommend using the Segoe UI font for Windows 8 development, but there is a brother font, Segoe UI Symbol, that provides a huge number of potiential icons. To look at all the images I would recommend using the Word Insert Symbol tool in Word if possible as there seems to be quite a few more symbols available than what’s in Character Map.
Choosing the magnifying glass you can use the following code for a search button:
<Button Margin="0 0 5 0" Width="16" Height="16" FontFamily="Segoe UI Symbol" Opacity=".75" Command="{Binding SearchCommand}" ToolTip="Search" Style="{DynamicResource SearchStyle}" Content="🔎" />
Note that if you are in FF or IE the magnifying glass should show up correctly but in Chrome it shows up as a box. These icons are really just Unicode but with Segoe UI Symbol they look like they are a part of Modern UI.
My final search control ended up looking like:
which looks great since by using the font directly you get to take advantage of the TrueType nature of the font, which means it’s vector based and always scales in size.
Okay, hundreds of icons at your finger tips, but what if that’s not enough? What do you do if you can’t find what your looking for? Head over to Modern UI Icons. As of right now, 1229 icons, nearly all of which are Creative Commons, that you can use however you want. Make sure you read the license as not all of them are CC, but by far the vast majority of them are. And they look like icons you would use in Modern UI, just like they should.
All the icons are available as images in both light and dark themes, as well as xaml and svg so you can use them as vectors.
| appbar.input.keyboard | |
 |
<?xml version="1.0" encoding="utf-8"?> <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="appbar_input_keyboard" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0"> <Path Width="50.6667" Height="28.5" Canvas.Left="12.6667" Canvas.Top="23.75" Stretch="Fill" Fill="#FF000000" Data="F1 M 15.8333,23.75L 60.1667,23.75C 61.9156,23.75 63.3333,25.1678 63.3333,26.9167L 63.3333,49.0833C 63.3333,50.8322 61.9156,52.25 60.1667,52.25L 15.8333,52.25C 14.0844,52.25 12.6667,50.8322 12.6667,49.0833L 12.6667,26.9167C 12.6667,25.1678 14.0844,23.75 15.8333,23.75 Z M 17.4167,28.5L 17.4167,47.5L 58.5833,47.5L 58.5833,28.5L 17.4167,28.5 Z M 20.5833,30.0834L 28.5,30.0833L 28.5,38L 20.5833,38L 20.5833,30.0834 Z M 30.0833,30.0833L 36.4166,30.0834L 36.4166,38L 30.0833,38L 30.0833,30.0833 Z M 20.5833,39.5834L 28.5,39.5833L 28.5,45.9167L 20.5833,45.9167L 20.5833,39.5834 Z M 30.0833,39.5833L 45.9167,39.5834L 45.9167,45.9167L 30.0833,45.9167L 30.0833,39.5833 Z M 38,30.0834L 45.9167,30.0833L 45.9167,38L 38,38L 38,30.0834 Z M 47.5,30.0833L 55.4167,30.0833L 55.4167,38L 47.5,38L 47.5,30.0833 Z M 47.5,39.5834L 55.4167,39.5833L 55.4167,45.9167L 47.5,45.9167L 47.5,39.5834 Z "/> </Canvas> |
That’s it for now. Thousands of icons you may not have known you had easy (and free) access to.
Thanks,
Brian
Image Source:
appbar.input.keyboard, Modern UI Icons
