I’ve been seeing a bunch of XAML based control skins for WPF and Silverlight lately and I can’t say I’m in love with any of them. I was glad to see that the latest version of the SL toolkit has some additional skins available, but again, I couldn’t see myself ever using the “Bubble Creme” or “Shiny Red” theme for a real client project. Inspired by the “Simple Styles” post by Robby Ingebretsen, I wanted to create a small set of styles that aren’t overly complicated but communicate a simple elegant look and feel. Here at Clarity we put a ton of thought into creating clean and effective user interfaces so I thought I would share some of our techniques for accomplishing just that.
What does Clean & Simple Mean?
Clean User Interface design is typically characterized by a few consistent color choices, clear layout, and as few lines as possible. And a set of nice control styles can go a long way in achieving a design that is complete and beautiful, not cluttered or overbearing. Well designed control styles and skins are typically minimal in nature. In other words, Minimalist design can be described as basic and stripped of superfluous elements, colors, shapes and textures. For example, I think the controls below on the left (from the Silverlight toolkit) are relatively “over designed” with excessive gradients and shiny textures. On the other hand, the controls on the right (from Adobe Lightroom) have clean lines,color,and little texture and communicate the purpose of the control effectively.
How Do I Simplify My Design?
Designing a clean and minimal skin isn’t hard, but takes some trial and error before you get it “just right”. Like I said earlier, well designed controls typically have little texture, color, shape and lines. However, if you go too minimal the design becomes boring and incomplete. To ensure that you are on the right path, keep in mind three fundamentals: Be Mindful of Whitespace, Alignment, and Contrast. After applying these principles, take it a step further and try to take out everything that is unnecessary. Aside from the aforementioned basics, experimenting with different color combinations, atypical layout and interesting typography can help enhance the design while keeping it unique.
Whether I’m designing a UI for an interactive display, digital display board, website, or desktop application I usually get started by:
Look for inspiration – There are tons of resources out there for creative inspiration. Some I use are:
Pick a color scheme – I usually try to stick with a base of three colors (Primary, Secondary, Accent)
Choose a font – I usually keep a watchful eye for elegant, readable fonts. Then I use WhatTheFont to help me track it down.
Building the UI
Below is a zoomed out view of a couple styled controls. The important thing to notice is that the clickable regions look beveled and the right combination of lines create an “inset” look where appropriate.
If we zoom in to 1200% we can see the anatomy of the button consists of three borders and a subtle gradient fill. There aren’t any crazy multi-stop gradients or rasterized images used to create the beveled or inset effects…just rectangles and careful choice of color.
This technique of strategically placing lines to create subtle UI effects isn’t new. In fact there are tons of examples done in Flash found all over the web and even in the windows and mac operating systems. The iPhone, Palm-pre, Adobe CS4, Garage Band, are just some examples of precise well-executed control styles.
For this post I choose Silevrlight 3 for demonstration purposes, but the design principles are technology agnostic and can be applied to any digital medium. If you are interested in getting started with control styling specifically in Silverlight 3, it would probably be a good idea to read up on using Resources, Control Templates, and the Visual State Manager in Blend. I hope my post will be helpful in at least getting people started with creating their own elegant UI themes.
You can download the source for the above example HERE1 comment , permalink