LearnArt and the Web: Drawing: Part I

writes on September 13, 2011

We are excited to announce Carsonified’s first book called ‘Art and the Web: Line, Shape & Form’ written by Nick Pettit. This book is part of a larger series that Nick is writing about the elements and principles of art, as they relate to the web. We are releasing each chapter as a blog post on Think Vitamin and at the end, you will be able to download the entire book for free. — Ryan Carson.

Drawing: Part I

I think it’s important for every web professional to have some basic drawing capabilities. The ability to draw allows us to quickly mockup a page layout or visual idea. Keeping things rough makes the web feel much more visceral and malleable than it might seem when we’re in the depths of coding. The ability to draw from direct observation, sometimes called "life drawing," allows you to observe the elements and principles as they appear in everyday life.

Sir Peter Paul Rubens, Study of a River God (1615)

Noticing these little details on a daily basis should ultimately make you a better designer. Unfortunately, most individuals start drawing at a very young age and then promptly stop, and this is one of the main reasons why people feel intimidated by the very prospect of drawing. One of my former art teachers imparted a great piece of wisdom unto me, and it’s something I think about every time I encounter someone that feels incapable of drawing.

If you stopped writing when you were five years old, you would be terrible at writing by now. The same is true for drawing.

Drawing is a learned skill, and not something that people are born with or something that they pick up accidentally. Even individuals that are self-taught and appear to be "naturally good" still had to practice relentlessly in order to obtain their skills. People also feel daunted by drawing because of the level of freedom and abstraction involved. For example, if one were given a set of children’s building blocks and told to create a small house, the task would probably seem trivial. However, replace the building blocks with a sheet of paper and pencil, and suddenly the level of intimidation rises dramatically. In the second case, the level of abstraction is vastly more specific and granular. This can cause individuals to feel more afraid of showcasing their ignorance and poor skills. Once you start making a few drawings though, this feeling goes away pretty quickly.

Over the course of the book series, we’ll explore artistic exercises relating to the elements and principles of art, starting with the elements we’ve discussed so far; line, shape, and form. This short guide won’t teach you everything you need to know about drawing, but it should at least set you on the right path. So if art "really isn’t your thing" or if you’ve never drawn a picture before, then it’s time to learn a new skill. Let’s do this.


Drawing isn’t something that’s learned by explanation. Like so many things in life, practicing is the best way to improve. By following these exercises, concentrating, and pushing yourself, you should be able to see some gradual improvement. If you start feeling a wave of mental exhaustion after a session of intense direct observation, don’t worry; that’s just your right cerebral hemisphere hard at work.

Upside-Down Copy

The brain’s visual system has evolved to observe objects and reduce them down to simple concepts. For example, we don’t regularly see contours, curves, texture, color, and so on. Rather, we see people, places, faces, and things. Copying an existing image can be a valuable lesson, but turning that same image upside-down and then trying to copy it will help even more. When attempting to copy a flipped image, the brain has trouble characterizing objects, so it’s forced to think hard about what’s actually there. Instead of seeing a person’s ear, you’ll find yourself noticing many intricate curved lines.

Tempting as it may be, do not flip the page around during this exercise. Additionally, you shouldn’t trace the image. Just try to be as accurate as possible. When you’re done, flip your drawing around and see how you did. If you end up with an incomprehensible mess, don’t get discouraged. Even a skilled artist will generate strange results with this technique.

Rembrandt, Sitting Syndic Jacob van Loon (1661)

Contour Drawing

Once you’ve made a few upside-down copies of existing imagery, it’s time to try drawing from direct observation. With a sheet of paper and a pencil at the ready, find a subject. This can be a laundry basket, the branches of a tree, or a friend that’s willing to sit. It really doesn’t matter, as long as the subject will be still for about 10 minutes or so.

In a contour line drawing, only the outline of the subject is recorded. Any lighting and shadowing should be completely ignored in favor of a crisp line drawing. When creating a contour drawing, take your time and go very slowly. The important thing to focus on is the proportion between shapes. Sometimes when carefully capturing the subject’s outline, you may suddenly realize that your sheet of paper is too small. This is a common issue with contour drawings in particular, so rather than constricting yourself, it’s best to draw contours on large sheets of paper. The larger the sheet of paper, the better. To see a stellar example of a contour line drawing, turn back to Egon Schiele’s Mother with Child in the chapter about line.

For an additional challenge, try a blind contour line drawing. This doesn’t mean you should close your eyes or grab a blindfold. Rather, set your pencil down onto the paper, look up at your subject, and then don’t look down again until you’re finished with your drawing. Again, this may generate very strange results, and that’s fine. Over time, you’ll get better and begin to appreciate such beautiful randomness.

Gesture Drawing

Above is a gesture drawing by Rembrant Harmenszoon van Rijn, a 17th century Dutch painter. A gesture drawing is a counterpart to a contour line drawing, and is the style of drawing that the term "sketch" is typically referring to. Instead of slowly and carefully recording the outline and proportions of a subject, the goal is to very quickly capture the rough impression. This can and should include interior lines, and possibly a small amount of shading. As the name of the drawing style implies, the lines should be gestural, filled with energetic movement and implied lines. The drawing from Rembrant, Sitting Syndic Jacob van Loon, is a nice example of gesture drawing.

Shape Drawing

Even the most organic imagery can be broken down into geometric shapes. For example, when creating a shape drawing, a tree might turn into overlapping quadrilaterals and circles. The goal of a shape drawing isn’t realism, so try to ignore the subject and its lines. Instead, focus on building structure using simple two-dimensional shapes. If you’re having trouble with gesture drawing, this can be an especially useful exercise.

9 Responses to “Art and the Web: Drawing: Part I”

  1. Andrewfrancisjames on October 12, 2011 at 10:03 pm said:

    Thank you, Nick for including some paintings and drawings from in your articles. Whether pixels or paint, the principles are the same, and we need to know art history.

  2. Andrewfrancisjames on October 12, 2011 at 10:03 pm said:

    Thank you, Nick for including some paintings and drawings from in your articles. Whether pixels or paint, the principles are the same, and we need to know art history.

  3. Anonymous on September 17, 2011 at 2:53 pm said:

    Being a web design now and a traditina drawing major in college i can say that this article feeds the basic needs of all artists and designers. It is a frame work of skill used to stand on for all other graphic ideas. Could you think of a graphic designer who didn’t understand perspective or forshortinging? it doesn’t sound good let me tell you.

  4. Marlon Amancio on September 13, 2011 at 3:32 pm said:

    Really really useful! Thanks for sharing and success with your book!

  5. What a great post. I’ve long been wanting to make the move to more classical art & illustration – pixels are getting tiring. This series could be just what I needed. thanks for the tips!

  6. What a great post. I’ve long been wanting to make the move to more classical art & illustration – pixels are getting tiring. This series could be just what I needed. thanks for the tips!

Leave a Reply

You must be logged in to post a comment.

Learning to code can be fun!

Get started today with a free trial and discover why thousands of students are choosing Treehouse to learn about web development, design, and business.

Learn more