Tag Archive: Design 101


Crash Course in Color Theory

Filed under: Uncategorized by Sandy — 1 Comment
February 5, 2009

I mentioned before in my list of 7 easy things to be aware of when laying out an interface that color was something not to be afraid of.  Our goal today is to get through a crash course in color theory, give you as the developer a few different approaches depending on your confidence with using color, and of course I’ll be including a few links I use for tricks and inspiration at the end.

First things first – the color wheel:

At first glance I know it LOOKS like an endless array of choices and clashing colors, arbitrary decisions and potential pitfalls, but think of this to start as just a single possibility.  What color do you feel like using today?  Just pick one.  From there we can “figure out” some other colors that will match without any guessing – honestly!  Typically I would expect you to take “the corporate color” and go from there, but since I don’t have one here… I’m feeling like a nice burnt orange (not a scientific name, but I trust Crayola)

Now from here we go back to our color wheel and use a number of tricks to derive what we call “harmonies” to get some non-clashing color schemes based from the color we already chose.  I’ve ordered them from “safest bet” to “advanced” in how difficult it will be to apply them effectively to your solution.  Note that our burnt orange color is present in each of the bars below – these are all created from the same “starter” color.

Monochromatic
This one the most self explanatory, all of these colors are derived by (in painting terms) adding white or black to the original color to achieve tints and shades.  This is a very safe way to find a range of colors that just aren’t going to clash, but it can tend toward boring.
Analogous
This set of colors comes from adjacent colors on the color wheel.  They will typically match well & usually make people feel more comfortable than some of our other color sets.  You want make sure you have enough contrast not to not be boring though, as that’s a bit of a hazard here.  Also, keep one color as dominate and use the other 2 for accents – The dominant one might be your original color but also may not, if “the company color” is a majority of the company logo you don’t necessarily want your UI to compete with it for attention.
Triadic
These colors are picked as evenly spaced from one another around the wheel.  As a set they’re pretty vibrant, but not as much as straight complementary.  As with the other sets, you should choose a dominate color for most of your work, and use the other 2 as accents on things you want to stand out.
Complementary
This new color is the one directly across from our chosen orange on the color wheel, and as a set we refer to this pair as “complementary colors.” These are often used for a high contrast – high energy look.  You do have to be a little careful not to overwhelm a person, but in small quantities of one or the other color you can make an object really stand out.  For example, if you’ve used MS Office 2008 you’ll notice the app as a whole is a bluish color but any “active” button is the complementary orange.
Split-Complementary
Created similarly to a simple Complementary set, but instead of taking a single color from opposite our original choice, we take 2 colors from either side of the true complement.  That’s hard to explain, but the image should help.  This gives you the contrast and energy of the Complementary set, but should not be as potentially jarring.  This harmony I would consider easier to implement than a Triadic or straight Complementary, but for explanation sake I had to put it last.

Now that we’ve been through some definitions, suggestions, and risk levels, check out this link and give your new knowledge a spin in a tool that does the work of finding the other colors on the circle for you:

(aka, cheating!)   http://kuler.adobe.com/#create/fromacolor

I typically use that site as well as http://www.colourlovers.com/ to play with colors until I find combinations I like and get the creative juices flowing a bit.  Color is to a great degree subjective, so get out there and play.  Get your hands dirty like with finger-paint… only… there’s no actual getting dirty involved.

There are (as always) other things to consider with color, like its affects on psychology, remembering your users and their probably preferences vs. your own, and using color effectively.  First things first though – go figure out how to make color combinations YOU like until finding good colors isn’t something you dread.  We’ll address the rest in my next 2 posts. J

If you’re interested in a deeper dive into color theory check out http://www.worqx.com/color/index.htm, it’s a great academic look at color and the theories that drive what makes it work. Also, thanks to them for sharing the color wheel images!

Tags: ,
Comment

Simple Design Tricks for Developers

Filed under: Uncategorized by Sandy — Leave a comment
January 5, 2009

This is hopefully the first in a series of posts helping developers be proud of how their app looks as well as how wonderfully it functions. The real beauty may be on the inside, but the skin still gives the first impression to your audience and deserves any attention you can give it.

My goal here is not to turn everyone into a turtleneck-wearing, latte-sipping designers, but rather to offer a little guidance. By being mindful of a few things you can make even the simplest little web app look clean and polished for your audience. I’ll also try to cut back on the lame puns.

So here we go, the following are my top 7 things to just be aware of when laying out your user interface:

  1. Alignment
    Everything on the screen should align with something else, especially things that are related to one another. An Example I like to use here is a simple form – yes, the text lines up with its related text box as a line item, but it looks a lot cleaner when the left edges of the text boxes are aligned with each other.
  2. Size
    In some cases it really DOES matter. Viewers will judge in an instant how important something is by several criteria and one of the best is size. For an easy example, titles are always bigger than body text but this applies to everything on a screen, not just text.
  3. Text & Capitalization
    Avoid making your text too small for your intended audience.  For example, AARP is going to want larger text than MySpace. Also avoid all caps as you appear to be SHOUTING – Even when you feel like yelling. :)
  4. Font Control
    Don’t use more than about three fonts in an entire project unless you have a really good reason. You can, however, still use bold, italic, and normal. And please don’t use Comic Sans unless you’re making cartoons or a site for preschoolers ;)
  5. Color
    Similarly, limit your color use but don’t be afraid of it. I’m planning an entire post on easy color theory for developers later, but suffice it to say if you pick one or two colors (that aren’t grey) and mix them in consistently you can bring a lot of life to an application. Go crazy with lots of colors that haven’t been carefully picked to harmonize and you’ll end up with what I affectionately call “skittles.”
  6. Consistency
    Page layout, key terms, and design elements should be consistent throughout the entire application. If you call the users “clients” don’t switch to “visitors” half way through the application. Similarly if links are blue then always use blue on all links.
  7. White Space
    White space is quite literally nothing. An extra carriage return between paragraphs, padding around images and the space between items on a form are all fantastic examples of white space. Almost any beginning layout can benefit from the addition of white space – it’s possible to add too much, but you’ll know if that happens. A little white space never hurt anyone and helps the user not to feel crowded.

And as a final note – these are all “more like guidelines… than actual rules.” :)

Tags:
Comment