Graphic Design for the Code-Centric Individual
Many developers say they have no design skills. Some say it apologetically, some proudly. You may have no artistic ability (nor do I), but the good news is that you can use the computer to draw the graphics for you.
Whether you are a WPF application developer, an ASP.NET web site developer, or work with any other technology that displays something for a user to interact with, there are some simple rules and guidelines, principles if you will, that you can apply to your presentation layer.
Microsoft is making it easier to separate appearance from behavior. ASP.NET 3.5 in Visual Studio 2008 offers much better handling of Cascading Style Sheet (CSS) files. And WPF controls can be styled to look almost any way you want. Still, the ideal situation of having a dedicated graphic designer on your team may or may not be a reality.
Besides, you may be able to give that designer some ideas that he or she can apply their magic to. After all, you have an understanding of what the user wants to accomplish with your user interface, so offering one or more possible design ideas to the designer on your team can only improve communication.
But I'll bet that there are many small teams that don't have a separate designer job title. If you're in that boat, and your boss is hankering for some of the nifty animation and gradients and rounded rectangles and something-instead-of-boring standard buttons, you might enjoy this series of articles.
Topics to be covered:
- Gradients — When a developer wants to show someone what can be done with a gradient, the developer might define a rectangle with a gradient fill that goes from blue to orange. To show off the power available with gradients, he or she might define a color stop of purple at the halfway point. The only problem is that I can't picture when that combination of colors would ever be useful.
- Animation — I've seen more than one presenter demonstrating how to do animation expressing a hope that this will not be used for evil purposes (the next generation of blink tags). If you apply rule #1, given at the end of this article, you will be ready to use animation and gradients in an effective and professional way.
- Fonts — We have lots of fonts at our disposal. You may want to try something new and different, but how do you go about doing something different that is still harmonious and effective? I'll give you a crash course in typography so that once you know the rules, you'll know how to break them.
- Color — There was a time that most web sites had a bright background color. But just because something is possible doesn't mean it should be done. There are books and courses on color theory and harmonious color schemes. A few simple principles and examples will help you avoid using colors that don't support your purpose.
- Layout — Arranging the elements on a web page, a printed page, or application window should help the user (or viewer or reader) organize the information without effort. Your users should understand what you're presenting at a glance--they shouldn't have to struggle to see how information is interrelated. Information should come off the page or screen like hotcakes off a hot griddle--it should slide off without a struggle.
Rule #1: No graphic design element or effect should call attention to itself. Design should be invisible.The next post in the series will be about gradients. I'll give you some tips on how to create them and where to use them.
