Author Archive

“I Draw Pictures All Day” // Why Doodling Is Important


  

“So, you do nothing all day.�

That’s how many people would respond to someone who says they spend the day with a pen or pencil in their hand. It’s often considered an empty practice, a waste of time. They’re seen as an empty mind puttering along with the busy work of scribbling.

But for us designers and artists, drawing pictures all day is integral to our process and to who we are as creative people, and despite the idea that those who doodle waste time, we still get our work done. So, then, why are those of us who draw pictures all day even tempted to think that someone who is doodling or drawing pictures in a meeting or lecture is not paying attention?

What does it mean to be a doodler, to draw pictures all day? Why do we doodle? Most of all, what does it mean to our work? It turns out that the simple act of scribbling on a page helps us think, remember and learn.

What Does It Mean To Doodle?

The dictionary defines “doodle� as a verb (“scribble absentmindedly�) and as a noun (“a rough drawing made absentmindedly�). It also offers the origins of the word “doodler� as “a noun denoting a fool, later as a verb in the sense ‘make a fool of, cheat.’�

But the author Sunni Brown offers my favorite definition of “doodle� in her TED talk, “Doodlers, unite!�:

“In the 17th century, a doodle was a simpleton or a fool, as in “Yankee Doodle.â€� In the 18th century, it became a verb, and it meant to swindle or ridicule or to make fun of someone. In the 19th century, it was a corrupt politician. And today, we have what is perhaps our most offensive definition, at least to me, which is the following: “To doodle officially means to dawdle, to dilly dally, to monkey around, to make meaningless marks, to do something of little value, substance or import and,â€� my personal favorite, “to do nothing.â€� No wonder people are averse to doodling at work. Doing nothing at work is akin to masturbating at work. It’s totally inappropriate.”

It is no wonder, then, why most people do not have great expectations of those who “draw pictures all day.� Or perhaps they are inclined to think that those who draw pictures all day are not highly intellectual and are tempted to say to them condescendingly, “Go and draw some of your pictures.� As designers, many of us have heard such comments, or at least felt them implied, simply because we think, express or do things differently.

Why Do We Doodle?

Consider that even before a child can speak, they can draw pictures. It is part of their process of understanding what’s around them. They draw not just what they see, but how they view the world. The drawing or doodle of a child is not necessarily an attempt to reflect reality, but rather an attempt to communicate their understanding of it. This is no surprise because playing, trial and error, is a child’s primary method of learning. A child is not concerned with the impressions that others get based on their drawings or mistakes.

An Example of a doodle
An example of a doodle.

Their constant drawing, picture-making and doodling is a child’s way of expressing their ideas and showing their perceptions in visual form. It comes from a need to give physical form to one’s thoughts. Similarly, an adult doodles in order to visualize the ideas in their head so that they can interact with those ideas.

Visual Learners

According to Linda Silverman, director of both the Institute for the Study of Advanced Development and the Gifted Development Center and author of Upside-Down Brilliance: The Visual-Spatial Learner, 37% of the population are visual learners. If so many people learn better visually, we can expect, then, that some of them learn better by putting a speech, lecture or meeting into visual and tangible form through pictures or doodles, rather than by being provided with pictures or doodles (which would be the product of another person’s mind).

37% of the population are visual learners

Humans have always had a desire to visually represent what’s in their minds and memory and to communicate those ideas with others. Early cave paintings were a means of interacting with others, allowing an idea or mental image to move from one person’s mind to another’s. The purpose of visual language has always been to communicate ideas to others.

Secondly, we doodle because our brain is designed to empathize with the world around us. According to Carol Jeffers, professor at California State University, our brains are wired to respond to, interact with, imitate and mirror behavior. In an article she wrote, she explains the recent research into “mirror neurons� which help us understand and empathize with the world around us.

A cave painting
Cave paintings were our first means of communicating ideas to others.

Think of it this way. When you’re at an art gallery and find a painting that intrigues you, what is your first reaction? You want to touch it, don’t you? I thought so.

When I was a ballroom dancer, I used to sit and watch those who I considered to be great dancers, tracing their forms in space with my index finger as a way to commit them to memory. I used to go to galleries and museums and, at a distance, trace the lines and forms that I saw in the paintings and designs. I did this out of curiosity and a desire to physically record what I saw to memory.

Nearly 100 years ago, Maria Montessori discovered the link between physical touch and movement and learning in children. Montessori education teaches children to trace the letters of the alphabet with their index finger as a way to commit their shapes to memory. My son used to trace forms that he found interesting in space. It’s safe to say, then, that we doodle to visually commit to memory a concept that we want to both empathize and interact with.

An experiment conducted by Jackie Andrade, professor of psychology at the University of Plymouth in England, demonstrated the positive effect that doodling has on memory retention. In the experiment, 40 people were given a simple set of instructions to take RSVP information over the phone from people going to a party. The group of 40 was divided in two. One group of 20 was told to doodle (limited to shading in order not to emphasize the quality of the doodles), and the other 20 would not doodle.

The doodlers recalled 29% more information.

Doodling a lightbulb
Doodling helps us retain information.

The study showed that doodling helps the brain to focus. It keeps the mind from wandering away from whatever is happening, whether it’s a lecture, reading or conference talk.

Still, we have become bored with learning.

Professor Emeritus at Cornell University, Joseph D. Novak argues that this is because we have been taught to memorize but not to evaluate the information being given to us. In many traditional settings, the pattern is simple and dull: sit, receive and memorize. Many traditional educational systems do not encourage active engagement with the material. Doodling, drawing and even making diagrams helps us not only engage with the material, but also identify the underlying structure of the argument, while also connecting concepts in a tactile and visual way. Jesse Berg, president of The Visual Leap, pointed out to me in a conversation that doodling is a multisensory activity. While our hand is creating what might seem to be random pictures, our brain is processing the stimuli that’s running through it.

Many of us are the product of traditional schooling, in which we were made to numbingly memorize dates and facts, and many of us continue this pattern later in life. While some of us were avid doodlers (I used to fill the backs of my notebooks with pictures and draw on desks with a pencil during class), some of us stopped at high school, others in college and others once we settled into a job. At some point during the education process, doodling was discouraged. Teachers most likely viewed it as a sign of inattentiveness and disrespect. After hard preparation, educators want nothing more than unwavering attention to their lectures. The irony is that, according to Andrade’s study, doodlers pay more attention to the words of educators than we think.

In her TED talk, Sunny Brown goes on to explain the benefits of doodling and even offers an alternative to the definition found in the Oxford Dictionary:

“Doodling is really to make spontaneous marks to help yourself think. That is why millions of people doodle. Here’s another interesting truth about the doodle: People who doodle when they’re exposed to verbal information retain more of that information than their non-doodling counterparts. We think doodling is something you do when you lose focus, but in reality, it is a preemptive measure to stop you from losing focus. Additionally, it has a profound effect on creative problem-solving and deep information processing.”

How Can Designers Use This To Their Benefit?

As designers, we have a unique advantage when it comes to doodling. We don’t just doodle to keep our minds focused — we also deliberately sketch ideas in order to problem solve and to get immediate feedback from clients and peers. Designers such as Craighton Berman and Eva-Lotta Lamm are two of the biggest proponents of the “sketchnotatingâ€� movement. Berman states that sketchnotating “forces you to listen to the lecture, synthesize what’s being expressed, and visualize a composition that captures the idea — all in real time.â€�

In 2009, I came across a book titled The Back of the Napkin by Dan Roam. Roam is a business strategist and founder of Digital Roam, a management-consulting firm that uses visual thinking to solve complex problems. He uses a simple approach to solving problems visually. Every idea is run through five basic questions to encourage engaged thinking and to ensure a meaningful meeting. The process takes the acronym SQVI^. S is for simple or elaborate, Q is for qualitative or quantitative, V is for vision or execution, I is for individual or comparison, and ^ is for change or status quo. These simple choices are worked through with simple doodles in order to better understand the problem and find a solution. In his book, Roam says:

“What if there was a way to more quickly look at problems, more intuitively understand them, more confidently address them, and more rapidly convey to others what we’ve discovered? What if there was a way to make business problem solving more efficient, more effective, and — as much as I hate to say it — perhaps even more fun? There is. It’s called visual thinking, and it’s what this book is all about: solving problems with pictures.”

After discovering Roam’s book, I decided to doodle again. Once a prolific doodler and drawer, I had become inactive in lectures and similar settings, often forgetting what was said. Taking notes felt too cumbersome, and I often missed words and ideas. I decided to give doodling another shot. Instead of focusing on specifics, I would focus on concepts, key words and ideas.

Since 2011, I have been actively promoting doodling in my design classes, making a deal with my students, saying to them, “Doodle to your heart’s content, but in return I want you to doodle the content of my lectures.â€� They are skeptical at first, but they soon realize that doodling is better than having a quiz. I reap the benefits of doodling, and by allowing them to doodle — with the requirement that it be based on the class’ content — they become more informed of the topic and they engage in more meaningful conversations about design.

A sketchbook
A designer’s best friend: a sketchpad.

The typographic novices in my classes naturally start to apply the principles of visual hierarchy and organization, grouping ideas either by importance or by category. They will group ideas with lines, boxes, marks and more. Headings and lecture titles might be made larger, more ornate or bolder, and key concepts might be visually punctuated. It is fascinating how natural and almost second-nature the idea of visual hierarchy is to all of us. The learning curve of typography is steep for some of us, but doodling and sketchnotating really makes it easier to grasp. Below are some doodles by students in my classes.

Introduction to Typography lecture doodle by Alisa Roberts
Doodle by Alisa Roberts from my “Introduction to Typography� course.

By picking out concepts, ideas and topics, the students start to establish a hierarchy by making visual groupings and start to use visual punctuation. By the time I assign work on typographic hierarchy, the sketches tend to show more astuteness. Transferring these sketches to the computer is a challenge for those new to typography, but once they naturally understand the relationships in what they are doing, they start to make smarter design decisions.

Identity and Branding class lecture doodle by Aubrie Lamb
Doodle by Aubrie Lamb from my “Identity and Branding� course.

Identity and Branding class lecture doodle by Aubrie Lamb
Another by Aubrie Lamb from the same course.

As we have seen, doodling has many benefits, beyond what designers as visual communicators and problem solvers use it for. Doodling also helps our brain function and process data. Those of us who doodle should do so without feeling guilty or ashamed. We are in good company. Historically, doodlers have included presidents, business moguls and accomplished writers. Designer, educator and speaker Jason Santa Maria says this:

“Sketchbooks are not about being a good artist. They’re about being a good thinker.”

Doodling, drawing pictures and sketchnotating are about using visual skills to solve problems, to understand our world and to respond effectively. So, what are you waiting for? Doodle!

Further Reading

Unless otherwise stated, images are from Stock.XCHNG.

(al) (il)


© Alma Hoffmann for Smashing Magazine, 2012.


Finding Alternative Sources Of Typographic Layout In Our Surroundings

Smashing-magazine-advertisement in Finding Alternative Sources Of Typographic Layout In Our SurroundingsSpacer in Finding Alternative Sources Of Typographic Layout In Our Surroundings
 in Finding Alternative Sources Of Typographic Layout In Our Surroundings  in Finding Alternative Sources Of Typographic Layout In Our Surroundings  in Finding Alternative Sources Of Typographic Layout In Our Surroundings

Studying art and design usually starts with a deep exploration of elements and principles. Among these elements, the most basic ones — line, point and plane — usually figure in a work of art or design. Thus, we can abstract art and design compositions to lines, points and planes when analyzing them. Not only is this abstraction useful for understanding the structure of a composition, but it also offers new sources of layout inspiration and experimentation.

The Framework Of Sources For Typographic Layout

According to Wucius Wong in his book Principles of Form and Design (page 42), point, line and plane can be considered conceptual design elements because, although they are not always explicit or visible, they seem to be present by implication. He explains how an angle, for example, implies the existence of a point and how lines, by marking the contour of an object, imply the presence of a plane.

In most art and design classes, students are asked to analyze the structure of a painting or design in order to better understand principles of organization. These linear studies usually have no relevance to the student outside of the class. But these exercises hold an important lesson, which is about learning to abstract images — and even our surroundings — into linear structures in order to learn about layout organization.

[Offtopic: by the way, did you already get your copy of the Smashing Book?]

Learning To Abstract What We See

Most of us live in a relatively static environment, whether urban or rural. Recognizing that this environment is framed by points, lines and planes will help us abstract the environment. Let’s consider a photo of an urban environment. Below is a photo of a city escape in Chicago:

Buildings1bw1 in Finding Alternative Sources Of Typographic Layout In Our Surroundings
(Photo courtesy of the Urban Studies Department, Wheaton College, Wheaton, Illinois.)

Here we have a worm’s-eye view of buildings. We can already discern interesting spatial relationships. The white space in and of it self has interesting shapes. These shapes alone give us creative ways to apply copy. Let’s see an example of how this space could be abstracted:

Abstraction in Finding Alternative Sources Of Typographic Layout In Our Surroundings
Linear abstraction.

Here, the city escape photo has been abstracted to simple lines. The lines converge at a conceptual point. The lines enclose spaces to create a conceptual plane. Although I did not mark the plane as such, lines that converge at any four points or angles become a plane. Abstracting spaces can, of course, be done in infinite variation. There is no right or wrong. Feel free to experiment!

In looking at the linear abstraction above, we see several lines converge at a certain point, which is towards the right and a bit off center. We can call this a point of hierarchy. Let’s clean up the abstraction and take another look.

Linearabstraction2 in Finding Alternative Sources Of Typographic Layout In Our Surroundings
Linear abstraction #2.

Now we have a cleaner and clearer version of the first abstraction, perhaps making it a bit easier to start thinking about a possible typographic layout. So, let’s experiment with type placement.

Linearabstractiontext in Finding Alternative Sources Of Typographic Layout In Our Surroundings
Typographic layout using the linear abstraction as a grid.

As you can imagine, we could do hundreds of variations of this. We can also play with the intersection of some of the lines and points in the layout:

Linearabstraction3 in Finding Alternative Sources Of Typographic Layout In Our Surroundings
Typographic layout using the linear abstraction as a grid and as visual punctuation.

These simple exercises in layout composition help us see how a photo of an urban landscape holds unexpected inspiration. Now, how do we use this for other applications? What if an article that we need to design does not have interesting or arresting photographs? One way to solve this is to think about the subject matter and find your own sources for inspiration.

Finding Inspiration In Your Surroundings

This is simpler than it sounds. It requires only that you be curious and get your dusty old camera out of the closet. You can find interesting shapes and arrangements in your kitchen drawer. Look out a window and study how its frame interacts with the space, or walk outside to look at the trees and branches. If you’re in the country, invite inspiration from the expansive landscape. Take photos of or sketch the most obvious linear connections you can find. If you’re in the city or suburbs, find the most obvious linear connections there. I find that buildings are an incredible source of inspiration with their strong vertical and horizontal lines.

Other sources of inspiration are people moving, dancing and exercising. Here is an example of how a photo of a dance performance inspired my design of a calendar for the Iowa State Dance Department. I used the dancers’ strong movement to the left as the basis for the calendar’s grid:

Calendarpage1 in Finding Alternative Sources Of Typographic Layout In Our Surroundings
Dance calendar for Iowa State University Dance Program, Ames, IA, 2004
(Copyright: Alma Hoffmann)

What About Web Design?

Browser capabilities for manipulating website layouts are still a bit limited, but not for long. On some websites — The Art of the Web, for example — you can find information and sources for experimenting by rotating elements. The Art of the Web recommends downloading the Webkit nightly build for your browser. It explains that, “Webkit is the rendering engine used by Safari. The Webkit nightly build browser, then, is a preview of what’s to come in Safari and other browsers and devices that use the same engine.â€�

Few websites use text rotation because of spotty browser support. If you know of any, please share them below in the comments. So then, how can we push layouts a bit more on the Web? What kind of sources can we use for inspiration? Two come to mind: architecture and landscapes.

Architecture gives us horizontal and vertical structures and spatial divisions from which we can take cues. We can play around with it in our horizontal and vertical grids on the Web. Services such as 960 Grid System let us download grids and experiment with spacing for Web designs.

Translating landscapes to the Web by using horizontal scrolling accomplishes two things: it puts the user in control of the navigation, and it evokes an expansive panorama. Peter Pearson’s website (screenshot below) takes full advantage of horizontal scrolling. It gives us a sense of landscape through photography and in the navigation itself. A humorous touch can be found in the invitation to the user to “Let’s go that way,â€� followed by “Gaspâ€� in parentheses below:

Peterwebpabe in Finding Alternative Sources Of Typographic Layout In Our Surroundings
Screenshot of Peter Pearson’s website.

Peterwebpabedetail in Finding Alternative Sources Of Typographic Layout In Our Surroundings
A detail of Peter Pearson’s website.

Other websites push the use of landscape by letting users choose the direction to take. Some allow us to zoom out to see where we want to go, much as we do in a natural landscape. See this example of Schematic:

Schematicwebpage in Finding Alternative Sources Of Typographic Layout In Our Surroundings

We stand before this website’s navigation much as we stand at a crossroad, choosing our direction. Allowing users to control their path engages them.

Other websites take advantage of the x-index to create a sense of depth and combine it with horizontal scrolling. In this way, the metaphor of landscape is even stronger and perhaps makes more sense, because the natural environment does have depth. The website for Fauborg (below) does both, while also providing a drop-down menu and hand icon for the horizontal scrolling:

Fauborg in Finding Alternative Sources Of Typographic Layout In Our Surroundings

Crowley, a small ad agency in New York, does not use horizontal scrolling, but rather selectively magnifies the menu and text to create perspective and depth. The arrangement has a sense of playfulness, and the user is engaged by seeking the little treasures stowed away in the links:

Crowley2 in Finding Alternative Sources Of Typographic Layout In Our Surroundings

Crowlye in Finding Alternative Sources Of Typographic Layout In Our Surroundings

Exploring Web Design With Webkit

The ability to rotate text opens yet more possibilities for layout design on the Web. Browser support is still inconsistent but catching up to newer coding capabilities, such as HTML5, which allows for three-dimensional effects, and Webkit. With Webkit, I attempted to reproduce the layout discussed at the beginning of this article. Here is the original:

Linearabstractiontext in Finding Alternative Sources Of Typographic Layout In Our Surroundings

Below are screenshots of my experimentation with code and Webkit to reproduce the text rotation. Close, but not quite the same. The angles require just the right coding combination, because one block will inherit the values of the one above it.

Textrotation21 in Finding Alternative Sources Of Typographic Layout In Our Surroundings
Text rotation using Webkit. (Alma Hoffmann © 2010.)

Here is another example in which the title is rotated in the opposite direction of the title in the original layout:

Textrotation in Finding Alternative Sources Of Typographic Layout In Our Surroundings
Text rotation #2 using Webkit. (Alma Hoffmann © 2010.)

Conclusion

Abstracting the structures, spaces and people around us into simple line structures gives us infinite layout possibilities that can be applied to print and Web design. As technology keeps advancing and browser support continues to grow, Web design layout will continue to be more experimental and less restricted to horizontal and vertical alignments. As in the print industry, Web technology will continue to grow to accommodate more and more experimental layouts. These possibilities will offer designers more freedom and versatility. However, design essentials — such as learning to analyze composition and to abstract spaces — remain vital to our ability to translate the three-dimensional world in two dimensions, and vice versa.

References

(al)


© Alma Hoffmann for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:


  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress