I have to think about color extensively as I am working on a print.

Yesterday’s post about color choice is continued in this post today. In yesterday’s post I mentioned how color can be used to resolve other colors together, and make them work well and look good together.

Examples of Prints in Progress

This print can easily be resolved with a darker green

I have a few prints that are in various stages of completion, one of them has an obvious resolution, one is still making me think. In this section I am going to discuss how I think about color in these prints, and what I think is needed to resolve the colors I have printed so far.

The print on the left is waiting for 1 last color to be printed, and I think that it is pretty clear what that color should be. I plan to print a slightly dulled down (ie. less saturated), transparent forest green color. That color should make this image pop together.

The trick to this image is going to to find a color that is rich enough, but not so rich that it overpowers the other colors already on the page. The 3 colors on the paper so far are not strong in value and saturation, so a very saturated color might visually dominate these colors, and make them appear weaker, and lose definition. A strong color would draw all the attention, and the other colors would appear very gray in comparison.

A color without enough saturation, on the other hand, will make the entire image appear bland, and the definition will be lost because nothing will stand out. If the 4th color is as dull and grayed out as the first 3 colors, then the entire image will appear to be a dull gray mess, and nothing will catch the eye. Everything will blend together, nothing will be interesting.

A quick aside

I wasn’t going to discuss this in this post, but it came up as I was thinking about the above print, because I noticed another completed print that seems to contradict what I said above.

The vibrant dark green works because it is used sparingly

Interestingly, the issue of matching the value of the other colors is more and more of a problem when the area that ink will cover becomes larger and larger. In the previous example, the 4th block will cover a large portion of the paper with ink. This makes the color choice much more important.

If the block applied a smaller area of ink to the paper, then a color with a much stronger value could be used. The color will not overpower the others because there is less of that color on the paper.

The print on the left demonstrates how a stronger color can be used when used sparingly. The first four colors that were printed are all very close to gray, their value is all very low. A strong color could easily overpower all of these subtle colors.

I printed the final block, the little bits of definition of the leaves, with a very saturated green color, straight out of the ink can. I didn’t thin the ink or mix in other colors to tone down the vibrancy of the color.

This choice worked well for this image, and the small, vibrant bits of color make the image come to life in a way that it didn’t before this vibrant color was printed. If the final color covered more of the paper, however, this strong green color would start to overpower the rest of the colors because it would become too dominant.

The fact that there are just very small bits of this color allow me to use a color so vibrant.

Back to the Regular Program

The last block I have to discuss today is another print that is in progress, and that I have created a bit of a problem with.

These two colors will be difficult to resolve

The block on the right has only the first 2 blocks printed, but I used 2 very different colors on this print so far. The light blue, and the dirty orange color do not look very good together as they are. A third color is needed to tie everything together, and visually connect these two colors.

Even though these two colors are not that saturated, they look more saturated than they are when placed together. The blue and the orange are compliments (opposite on the color wheel), so they make each other look brighter. Because of this, I will have to mix a color that is a little more saturated than I might guess, because I have to match the apparent saturation of these colors, rather than the actual saturation.

I’m not sure exactly which color I will print on this block next, but it will probably be in the brown family. The trick is going to be to pick the right shade of brown to make these two colors come together. It would be just as easy to mix the wrong color brown as it would be to mix a color that makes the blue and the orange look good.

Last Thoughts

It turns out that I think about color a LOT. Color choice is usually the most difficult part of the printmaking process for me.

If you missed yesterday’s post, click here to check it out. Leave a comment below and let me know if this was interesting, confusing, or anything alse.

I create a lot of problems for myself that I later have to fix.

A lot of those problems have to do with color.

The 101 Woodblock Series project is largely a design project. I formulated the idea for this project when I was still thinking a lot about design, rather than art. That influence has found its way into this project. Most of the thinking and artistic consideration that goes in to each print has to do with balancing color and shape in a way to make a pleasing image.

Most of the prints have 4 or 5 colors printed on them, which requires mixing a lot of colors, especially considering that each of the 101 prints is different.

The trick is to get all of the colors to work together.

Sometimes, everything works out, and the image just comes together. The colors work together well, and the resulting image is rather… pleasing.

Much more frequently, I create a bit of a “challenge” with the first 2 or 3 blocks, and have to figure out how to fix this “challenge”.

In the challenging prints, the colors don’t quite go together, and the image does not look complete. Often a final color is required to make the disparate colors come together and look good. I think of this as “resolution” of the colors, with “resolution” used in the sense of “resolving” things.

Resolution explained with Music

In Music Theory, Resolution refers to the part of the music that brings everything together, and makes the piece of music feel like it is complete. It is the final note that makes the piece of music complete.

Technically, Resolution is a change within the music from dissonance (sounds that don’t sound good together) to consonance (sounds that do sound good together).

The parallels to printmaking are that I often have to find a color that makes all the previous colors – which don’t quite look good together – fall in to place and look good.

Before going on, I want to show you, with music, what resolution sounds like. I picked part of The Four Seasons, by Vivaldi, to demonstrate Resolution.

This audio file has the very last chord edited out, so that it is unresolved. Take a listen.

Vivaldi Unresolved:

Without the final note in the piece, it feels like everything is left hanging, it is unfinished.

Compare the above to the following audio clip, which is the same music, but with the ending chord left in.

Vivaldi Resolved:

The last chord completes the music, and makes it sound finished. Everything that came before it works together as an overall piece of music, when the last note is added at the end to resolve the music.

Resolution applied to color

I often find myself in situations where I have to pick the right color to visually resolve the colors I previously printed. The colors on the paper up to that point don’t quite work, don’t feel complete. I have to think about what color will tie all the others together, just like the last note in The Four Seasons ties that piece of music together.

I’d like to take you through a brief color imagination experiment:

Imagine something purple. Not bad.

Now add some orange next to it. Not good.

Orange and purple have a natural dissonance them. They don’t look good together. It is difficult to find a 3rd color you can add to these 2 and make the combination look good. It can be done, but it is a challenge (hint: the color that can do this begins with “green” – click to read why*).

Now imagine green and blue together. These colors usually look pretty good together, because they are close in hue. Another color is needed though to make these two colors really pop, other wise they may look fairly drab together. Because they are so similar, the combination of the two can be boring. A small bit of red, or a red-orange color may make those colors really look good together. A neutral color, like brown or gray, can also bring these colors together. Since blue and green naturally work well together, they are easier colors to resolve with a 3rd color.

Examples from Complete Prints

I recently finished a batch of prints, some of them resolved well, some of them did not. In this section I will explain which I think resolved well, which did not, and why.

The challenge is to find a color to counter the warm oranges and reds

The print on the left surprised me. I started by printing the horizontal stripes, and then the 2 blocks for the leaves. The result was a very vibrant image full of warm colors, yellow, orange, and red. I like the vibrancy of these colors, but I knew that I needed something else to counter the warmth.

Without something to cool down the image a little bit and pull back the warm colors, this image could be too vibrant, to the point that it is difficult to look at. In fact, you can see the print as it looked with just the 3 vibrant warm colors in this post: Weekend Printing Results.

The warm colors in this print are similar in value and hue, and the image gets lost in a sea of orange. This image required a 4th color to resolve the previous 3.

My first thought was to put a cool color, like a blue or a green in there, but after thinking about this, I thought that a cool fourth color would stick out too much, and the image would be a visual game of “one of these things is not like the other”. I took a gamble with the gray color I printed the gears with, and I think it worked out well.

The gray color I printed has a touch of yellow and green to it, and has almost a “cool golden” color to it. The touch of cool that the image needed was added, but with a toned down, grayish hue, so that the value of the cool color did not contrast too much with the overall warmth of the image. The warm vibrancy of this image is something I like about it, and I did not want to counteract that, I just wanted to cool it down a little so that it wasn’t overpoweringly vibrant.

The same color used before did not resolve the colors in this image

Contrast the use of the “golden gray” color above with the use of the same color in the image at right. In this one, the golden gray color does not resolve the colors in the image, and in fact, makes the dissonance between them worse.

The use of the color for the gears in this image, was, I believe, a mistake.

This image was difficult to finish because I created a visual problem when I printed the first few colors. I like the red in the leaves and the pot, and I like the light, slate blue of the horizontal stripes, but together, they look bad. They have very little in common, and adding the last color of the gears made it worse.

I am still not sure what color would have made this image work, but I think it is in the purple family. A purple might bridge the gap between the red and the blue and tie them together somehow.

In some ways, I backed myself into a corner with the red and blue, and created a color combination that does not have an easy resolution.

I find myself doing this quite a bit, because I am experimenting color combinations when I make these prints. I have tried a lot of combinations that are not obvious to me, and aren’t from the usual palette of colors that I would choose. I am trying new things, and sometimes it doesn’t work.

Final Notes

Color can be a tricky thing. Finding the right color to complement and make other colors look good together can be difficult, especially if you use colors that don’t play well together in the first place.

Tomorrow I will have a post with this same sort of look at color choice and resolution, except with examples from the prints that are in progress, but not quite done. I will be share with you what I am planning to do and why, instead of just telling you what I have already done, as I did today.

Also, these prints are currently available for sale to Newsletter Subscribers for my cost for supplies and shipping. They are my nice little bribe to get you to try out my newsletter. This special, “subscriber only” price only lasts until I finish all 101 of these prints, sometime in the next few weeks.

If you would like to see the rest of them and get your chance to purchase them for next-to-nothing prices, sign up for the Newsletter now.

Quick Thanks to Vivaldi

The Vivaldi clips I used above are from my CD of Vivaldi, “The Four Seasons”, performed by Anne-Sophie Mutter and the Trondheim Soloists. The disc also has “Devil’s Trill” by Tartini on it. It’s a good performance of the pieces, you can Click here to check it out on Amazon.

The disc also features a cover with Anne-Sophie in a strikingly striking pose. If you still need a recording of The Four Seasons for your music collection, this is a good choice.

If you click on the link and buy something, Amazon will give me a small piece of their huge pie (you pay the same price though). This allows me to buy food, make more art, and makes me happier.

As a result, I make more beautiful art, and share it with the world, making it a better place full of more happiness and good will towards men and women.

It’s probably actually your moral and patriotic duty to go buy, buy, buy!

Footnotes

*[note from above]Orange and purple are a split complement of green. The complement of green is red (they are opposite on the color wheel). A split complement is when you take one of the complementary colors, in this case red, and “split” it into two colors on either side of it on the color wheel. In this case, red is “split” into purple and orange, which are an equal distance away from red on either side of the color wheel. Usually, split complements look better when the split is much smaller, meaning that red would be split into a red-purple and a red-orange. The bigger the split, the harder it is to resolve the colors. Now click HERE to go back.

This post is a quick break from all of the posts talking about Web Art, I’ll return you to that regularly scheduled programming tomorrow.

I submitted one of my websites, OnlyTheValiant.com, into a Wordpress design contest over on FresheVenture.com. Please take a few seconds to vote for my site.

I love to design websites using Wordpress, because it is a very flexible and adaptable framework to build sites off of. It isn’t perfect for everything, but it is fantastic for a lot of things. I’ve spent quite a while really understanding how Wordpress works, and put a lot of that knowledge to use with OnlyTheValiant.com.

I’m very proud of that site, I think it has a clean layout and effectively promotes the most important content on the site. I spent a lot of time working to make sure the sight had all of the information it needed, and also wasn’t cluttered.

CLICK HERE to vote for the website

After you click, scroll down the page till you see OnlyTheValiant, check the button right next to it, and click on VOTE.

It takes less than a minute, and is a great way to support my design work. Thank you!

If you are interested in more of my thoughts on the design of OTV, I wrote up some of my thoughts on my personal blog. The design of my personal blog is incomplete (ie. non-existant), but the content is there: OTV Design Considerations.

My friend Dr. Wordpress over at Website in a Weekend wrote a fantastic article about the virtues of laying out your site using graph paper. This prompted me to write this post, about how I use graph paper.

Why use graph paper?

Before I write about how I use graph paper, however, I want to tell you why I use graph paper to design and layout websites. To put it simply, I use graph paper because it is faster, easier, and better web design.

Faster web design

It is faster because I can sketch out an idea far faster than I can in Photoshop. As a result, I can see a number of different design ideas very quickly. Sometimes I will have an idea in my head, and sketching it out gives me a good idea of what that idea looks like when it is actually presented. For my personal site, I am currently working from the third design I have considered.

Once a design is committed to code, it is far harder to change. To change the size or location of an element, you may have to change a good number of the elements of your website. Not fun. Changing the size or location of an element on paper is as simple as whipping out your eraser and making a few pencil marks. Getting things well sized and located is many times faster than editing a CSS stylesheet.

Easier web design

Once you have a layout on graph paper, it is very easy to translate this into code. Need to know how wide to make a certain div? Just count the squares. When everything is layed out on graph paper before a single line is typed into your stylesheet, the actual time spent translating that design to code goes much faster.

I do like to save time.

Another side benefit of this is that “happy accidents” are more easily translated to the code. Random marks, lines, borders, or whatever are easier to write into your code when there is a nice grid that shows what the radius of that rounded corner is, how many pixels over a certain element overlaps the sidebar, or whatever else you need to figure out.

Better web design

When it is easy to whip out a design in pencil and paper, it is very easy to revise. Sometimes when working on graph paper, I will have another idea for the design that I think may be even better than the one I am working on. The result of scrapping a previous design idea and starting fresh is almost always a better design. Good things about the previous design can usually be preserved, and the not-so-good elements are usually replaced with a better design. Doing a few quick permutations of a design idea is probably going to result in a better design than sticking with the first idea.

Also, I feel like design comes out as a more cohessive product when it is done on paper first. It is easy to get carried away thinking about a website as a collection of parts: your header, content area, sidebars, divs, widgets, etc. When working on paper, it is easier to see the relationship of all the parts, and to get a good sense of how the whole looks.

My method

My method comes from my tools. What are they?

There are 4 very important tools I use:

• Graph paper
• Pencil
• Engineering scale
• Calculator

In addition, I may use any number of colored pencils and pens.

I start my work by simply putting pencil down on paper. For my first pass, I work fast and loose, and get all of the design elements I want down and work on their arrangement. I include major image ideas, locations of sidebars, headers, how I want to break up content, and so forth. When I first start out, I just want to get a layout sketched out. I will do another sketch later to really define everything, so I don’t worry too much about accuracy.

I have two pads of graph paper, one that is 8-1/2″x11″, another that is 11″x17″. If I am doing a very loose concept sketch, I usually use the smaller paper, and save the bigger stuff until my second pass.

Which takes me to my second pass. Once I have a concept idea I like, I get more exact with it. I figure out the dimensions I want to work with, I break stuff up into a grid, and get more exact with defining things. I will usually put a bit of notes on this second pass, and include information about classes and ids that I plan to use throughout the design. In other words, I half think in design, I half think in code.

Sometimes the result is nice and tidy, sometimes the result is sloppy. Here’s an example of a sloppy one I did for Only The Valiant (click for a bigger image):

Next up comes the technical stuff of how this works.

The technical stuff

To put it simply, each square on the graph paper corresponds to a certain number of pixels or ems. I tend to work in ems a lot, and I generally use a scale of one square = 1.5 ems. This gives me a paper design that is fairly close to what will appear on screen.

The most helpful tool I use is my Engineering Scale. Note that if you are buying a scale, there are two common types of scales, an engineering scale and an architect scale. The engineering has nice round numbers on each end, like 10, 20, 30 , 40, 50, and 60. The architects scale has fractions, like 1/4, 1/2, 3/4, 3/8, etc. The Engineering scale is the one that is useful for what we are doing.

A quick aside, these are traditionally used for civil and architectural plans respectively. The numbers on each side show which scale that sequence of numbers measures. For the Engineering scale, the numbers represent the number of feet per inch. For instance, a civil engineering plan in 50 scale would represent 50-feet in each inch of paper. The architects scale works the other way around, and the number of the scale represents the number of inches that represent one foot. For example, the 1/4 scale means that 1/4″ represents 1-foot on the architectural plans.

I have found that the 60 scale works best for me, and this measures out 6 ems per inch, as you see below:

I use my calculator to translate back and forth between ems and pixels. Though I often define almost everything in ems, sometimes I need to know what that represents in pixels. I don’t resize my ems, so I am multiplying and dividing by 16 a lot to go back and forth between the two units.

Using the 40 or 50 scale works when measuring in ems, and the 10 scale will kinda work to measure in pixels (and will be quite accurate for a 96 dpi display).

I do everything in pencil first, then sometimes add color to see how that will look. I adjust and adjust as I go, tweaking things as I see fit. I have found that revision leads to a better design.

If you design on paper first, or even use graph paper, let me know how you do this in the comment section. I’m sure that there are other variations on this method that I don’t use, mostly because I am not used to using them (creature of habit), but I am curious!

…at least it is on this site.

The scope of this site extends far beyond just web design. Design, after all, transcends just the internet.

I’ve got an art project coming up, it may be major, it may be minor, but the wheels are in motion to make it happen. It will be documented here. I plan to get this project in motion by this weekend. I just have to get a printing brayer and ink..

This project may be related to the upcoming Deacon Design 101 as well.

At lunch me and my coworkers often entertain ourselves by reading through various magazines. This week, Real Simple Magazine is sitting in the lunch room.

At the end of the magazine they had a perforated, detachable cheat sheet that summarized some of the content of the magazine. The sheet itself was perforated so you could separate it into even small, wallet sized sections. One section had a recipe, one had information about a bottle of wine spotlighted in the magazine, one had information about makeup, etc.

I was astounded at this.

This simple, detacheable card was the most useful part of the magazine. This card allows anyone to take the information with them, and easily try out or implement the information in the magazine.

Brilliant design.

This got me to think about how, with design, you make something more useable and useful. I have a few things I want to implement along these lines, such as popout articles, instructions, references and the like. There is a lot more, but I think the overall key to this is to think about how the end user of your product, site, or thingy will actually use what you are providing them.

The best web sites accomplish just the right amount of stuff.

Bad web sites often try to do too much, or too little, and become hard to use.

What does your website attempt to do?

I thought about this while reading this article on design at User Interface Engineering. The summary of the article is that good design is invisible. We don’t notice when something works well, we only notice when something works poorly.

The example the article uses is Netflix as an example. The design is so good that you don’t even notice the design, things just work well, and it is easy to use.

Netflix is able to have such a good design because it does something simple, and specific. It allows the user to rent movies.

Netflix users know that Netflix actually does a whole lot more than just let you rent movies. You can watch movies on your computer, review movies, network with friends, get movie recommendations, etc. All of these features are hidden to the new user, and slowly get revealed. The design does not overwhelm the user with all of these features at once. If they did, the site probably would not be as successful.

The best, easiest to use websites are clear about their purpose, and are designed to promote that purpose. Extra features are revealed slowly.

Websites that display everything available on the site become hard to use and inaccessible. I have been to many websites that I know contain plenty of information I am interested in, but the design is so poor, that it is hard to navigate, and hard to find. I am not sure what feature of the site contains the information I want.

I give up on these types of sites pretty quickly now, because I don’t have time to figure out how the convoluted organization works.

When I design a website, I determine what the primary purpose of the site is, and design the site to promote that function. Other functions may be available, and I incorporate them into the design in a way so that they are slowly revealed to the user.

Knowing the primary purpose of your site, designing the site to promote that purpose, and making the site easy to use will result in better websites.