Designing inspiring looking and easy-to-use applications is difficult. There are many elements to consider when creating application UIs, especially using tools and technologies such as Microsoft Expression Blend and XAML. One of the features of many new applications is a compelling and cool UI design. Requirements as simple as color choices, animations, controls to use, graphic elements, and many other elements make us rethink our design concepts and move from a traditional developer-focused gray UI to a more modern and pleasing UI with color, animation, 3D and more types of features.
Many people think that only right-brained folks who went to art school and dress only in black (or have other nonstandard dress attributes) can create new and cool UIs. Well, let's dispel that stereotype. The old saying is that you can't teach an old dog new tricks—interesting, but not true! For instance, every 12 to 18 months in our industry we get kicked into learning something new, so we're continually learning.
Now, let's step out of our developer mold for a minute. Most developers use their left brain to work with code as they build applications. Our left brains handle the logic of our code and process numerous business rules just fine. But if we want to select colors and start creating some cool design stuff, our brains need to flip into the right-brain mode. This is where the really interesting issues start for us non-artists.
Learning to Draw
My good friend Billy Hollis helped point me in the right direction by suggesting I read a great book by Dr. Betty Edwards, Drawing on the Right Side of the Brain. To learn more about drawing and the entire drawing process, see Dr. Edwards' website.
Drawing on the Right Side of the Brain is a phenomenal book, and Dr. Edwards is an incredible writer and instructor. Six months ago I couldn't draw at all, but now I can at least sketch things out. One of the first things Dr. Edwards has you do is draw a picture of your nondominant hand. (Figure 1 shows my drawing.) This exercise teaches you to let yourself go and flip into your nonverbal right brain. When I drew my left hand, I was still early in the book (page 16) and didn't know what to expect. But sure enough, during the drawing my brain shifted from left to right! From then on, I was able to learn more and more about drawing.
I was at page 147 in the book when I started this article, because my research had taken me elsewhere for a short period of time (learning colors, for instance). But now I find myself drawing a lot when I'm just sitting around. For instance, Figure 2 shows a picture I drew one night while watching TV. That lamp and mirror are in my den at home. I realize that my drawing isn't art gallery quality, but it's amazing to me because just a few months ago I would have drawn something that didn't look anything like a lamp. Now I regularly doodle pictures of everyday things when I'm idly waiting somewhere (e.g., at a restaurant). I also look at the world differently now—which is pretty wild after reading only two thirds of a book!
Something that's interesting about learning to draw is how to do perspectives, such as a box or a room in 3D. I always figured artists were born with this ability. Nope! Dr. Edwards explains how to use a pencil and a custom little view port device (i.e., a sheet of plastic you can look through and draw on) to measure sizes and even angles so that you can make them look real. Many great artists had to learn this way.
But what does any of this have to do with software development? I'll explain in a bit, after I discuss color selection.
Color Selection
It's really easy to just say, "I want to build a Silverlight app," and pick a template. Then you get a white form and put some controls on it—mostly gray ones.
But how do we twist our brains around colors? Well, since I never once took an art class in school, I struggled with this one too. Back to Dr. Betty Edwards again and another book: Color by Betty Edwards: A Course in Mastering the Art of Mixing Colors. This book taught me some magic.