Skip navigation
Help

Jason Santa Maria

warning: Creating default object from empty value in /var/www/vhosts/sayforward.com/subdomains/recorder/httpdocs/modules/taxonomy/taxonomy.pages.inc on line 33.

  

“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.

0
Your rating: None

After a long hiatus (inexcusably skipping 2009 and ’10) we’re back with our annual review of the year in type.

The idea is simple: I invite a group of writers, educators, type makers and type users to look back at 2011 and pick the release that excited them most. The reviews range from the academic (like Paul van der Laan on Zizou or Jens Kutilek on FB Alix) to the theoretical (such as Jan Middendorp on Agile) to the personal (like Carolina de Bartolo who reviewed Calibre and Periódico after firsthand experience with a redesign of WIRED magazine) to the playfully unexpected (Microsoft’s Si Daniels praises Apple Color Emoji) to the exclamatory (Matthew Butterick on Neue Haas Grotesk).

This is not a juried contest. The result isn’t necessarily the “best fonts of the year”, or even those most used or ballyhooed. But these 50 selections do capture a pretty accurate snapshot of where type design is now, and where it’s headed.

If 50 seems like a lot, consider the thousands of new releases that didn’t make the list. The general public’s interest in typography continues to grow, and with that comes hundreds of new designers who are dabbling in or starting new careers in type making. Our list of honorable mentions represents only a small slice of the new fonts published in 2011.

As always, the other clear trend is new technology. By the end of 2008, we could finally declare OpenType the default font format. Three years later, in the wake of the @font-face declaration, there are new formats and new substrates as destinations for type design. Yet, in contrast to OpenType’s glacial adoption rate, webfonts are poised to take hold quickly, sparked by intelligent delivery platforms (pioneered by Typekit in 2009), early adoption by major foundries (led by FontFont), and screen-specific font design (like Font Bureau’s RE series).

The unexpected benefit of the new webfont era for an effort like this one on Typographica – it becomes easier to judge a typeface more fairly. Despite type’s long history in print, a font made today will likely be seen on screen far more often than on paper. I’ve always lamented that critics and users usually judge typefaces only on screen, not in their “proper” medium. But in an age in which we read more on screen than in print, maybe this isn’t a universal problem anymore. Of course, now font makers need to rethink the way type is made and rendered, but we’re already seeing progress there.

This year’s list wouldn’t be possible without Chris Hamamoto’s enduring design, Billy Whited’s proficient coding, Laura Serra’s image wrangling, able proofing by Matthew Coles, and, of course, all the contributors. We’re also grateful to FontFont for the newly updated FF Quadraat and Process for Anchor, typefaces that make writing and reading on the web a pleasure. Thank you!

The “Typefaces of 2011” image uses Salvo and Acta.

0
Your rating: None

By Steven Snell

The start of a new year is often a time of reflection on the past year, both personally and professionally, as well as a time to look forward to the year ahead. With that in mind, we thought it would be interesting to do a New Year’s group interview with a number of top designers and developers. We put together a big list of questions and posed two in particular to each of the participants.

We think you’ll enjoy the insight this panel provides into 2008 and 2009. There’s a wide variety of topics covered, including favorite resources, trend predictions, business lessons learned, upcoming events for 2009 and more. Let’s take a look at a large group interview with top web designers that takes a look back on 2008 and presents some predictions for the year 2009.

You may want to take a look at the other interview posts we’ve published earlier in our magazine:

  • 35 Designers × 5 Questions
    35 designers. 5 questions. 5 precise answers. Result: 175 professional suggestions, tips and ideas from some of the best web-developers all around the world.
  • 50 Designers × 6 Questions
    Even more insights from the best designers and web-developers across the globe.

Jonathan Snook

Jonathan Snook

Do you have any upcoming projects planned for 2009 that you’re particularly looking forward to?
I always look forward to conferences. It’s such a great way to hang out with talented, friendly people. SXSW is at the top of my list, even if I’m not speaking. With the folks from Sidebar Creative, we’ve got plans for more workshops, especially after the success of our first event, and we’re looking to roll out some new things next year. 2009 is shaping up to be a good year.

Do you have any thoughts or predictions about design trends that may become more popular or significant in 2009?
There’s been a maturation of design, with great usage of illustration and playing with the illusion of light. However, it’s been mostly decorative backgrounds and headers. There hasn’t been much push outside the generic two- or three-column layouts. Thankfully, we’ve seen a smattering of great art direction in 2008, and I look forward to seeing more of that in 2009. Jason Santa Maria’s, for example, is a site that I visit outside of my RSS reader every time because it’s unique. It captures my attention, and the content is well written and fantastically integrated.

Simon Collison of Erskine Design

Simon Collison

Are there any design trends or popular styles from 2008 that you like more than others?
I’m not a big believer in “trends” in Web design as such. For me, in Web design the patterns are rarely widespread enough to be what we could call “trends.” For example, it is easy to see pockets of ideas and copyists and approaches gaining momentum, but look somewhere else and the tide is flowing in another direction. Sure, crap stuff like Web 2.0-esque shiny buttons and reflections, or the great drop-shadow plague, or something good like “Wicked Worn,” they were real trends. What did 2008 give us that equals those?

There is one positive trend I like. More and more people are designing for the subject and audience, regardless of what is perceived as “trendy” — minimal, if minimal is required, or vibrant, if vibrant is required, etc. Now that is a trend I’d like to see spreading far and wide: relevance! I hated that world we lived in where, for example, regardless of audience, a Web app would always have the same visual bells and whistles. Crap. Oh, and as someone who always looks to try to take risks with a design, I’m pleased to see plenty of others still doing the same. More risk-taking in 2009, people!

Have you followed the work of any particular designers during the past year?
I pay attention to every single thing Mark Boulton puts out because he is consistently inventive, accurate and well-researched. His transparent redesign for Drupal has been a real eye-opener into his process, too.

I have followed Garrett Dimon’s blog because he has publicly documented the design and build of Sifter. Everyone can learn plenty from Garrett.

Obvious one, but Jason Santa Maria killed it in 2008, especially with the art direction approach to his blog redesign, a technique we use a lot at Erskine and hope to see more of next year. Jason is quietly brilliant, a humble genius.

And (cheeky this) our own incredibly talented superstar Greg Wood. He teaches me new ideas every day and is more talented than he realizes. I advise others to study his code, his ideas, his art direction.

Jason Santa Maria of Happy Cog Studios

Jason Santa Maria

What are some of your favorite or most frequently used fonts from 2008?
Soho and Soho Gothic from Monotype are just gorgeous and versatile families. And even though it’s becoming too much of a go-to, I use Gotham often when in a pinch for a simple sans serif.

What have been a few of your favorite sources of design inspiration, online or off, throughout the past year?
I’ve really gotten into FFFFOUND! this year. I subscribe to their update feed and love seeing all the random photos and bits of design that come down the tubes. Beyond that, getting away from my computer and taking photos always serves as a good source of inspiration for me.

Veerle Pieters

Veerle Pieters

What have been some of your favorite sources of design inspiration, online or off, during the past year?
When I look online, I mostly browse Flickr or FFFFOUND! or del.icious. One of the best offline inspirations is a book called Geometric, by Kapitza, which I recently bought. It really is a beautiful source of inspiration if you are looking for geometric patterns.

Do you have any design competitions planned for 2009 (like the “What is Graphic Design?” competition from 2008)?
Yes, I am planning on doing another one but haven’t decided on a date yet because it takes much planning up front. This one will be the only one that I will be doing because I believe in quality over quantity.

Darren Hoyt of Category 4

Darren Hoyt

Are there any design-related products, software or accessories on your wish list for 2009?
I’m looking forward to the release of ExpressionEngine 2.0. According to the previews, the way it handles themes should make production easier for us front-end designers. There’s also a pretty major control panel overhaul, which should make it an easier sell to novice clients.

I’m also excited about the official release of FontCase. Over the years, I’ve used some pretty hacky methods of organizing and labeling key fonts, but FontCase beta has solved a lot of those problems already.

What have been your favorite sources of design inspiration, online or off, during the past year?
Mainly books. The first was Michael Beirut’s 79 Short Essays on Design, which looks at design in the broadest sense, rather than getting specific about techniques or trends. I liked the big-picture perspective on how design impacts our lives in ways we don’t realize. The writing itself is really entertaining.

The second is Book One, by Chip Kidd, a huge anthology of his famous book covers. He has a way of marrying strange imagery and playing with your expectations, something commercial Web design doesn’t always allow for. Studying his work is great when you’re stumped for ideas.

David Airey

David Airey

Can you tell us something that you’d like to improve on as a designer in 2009?
I want to be more humble and to concentrate on my own faults rather than judging others. When you’re overly concerned about your view of colleagues and acquaintances, you lose focus and productivity. I’m far from perfect, so it’s important to look closer to home.

Are there any designers in particular who you’ve enjoyed following in 2008?
Eric Karjaluoto, through his blog, ideasonideas. Eric doesn’t publish blog articles very often, but when he does, they’re a sincere, insightful, personal look at the bigger picture, and I believe he’s a great asset to the design community.

Jacob Gube of Six Revisions

Jacob Gube

What frameworks were your favorite to use in your development during 2008?
My favorite JavaScript framework is MooTools with jQuery being a close second. The choice depends on who I’m working for, who I’m working with and what the requirements are.

Server-side, I’m a PHP guy and Zend is my favorite, but I want to mention that you can’t go wrong picking other top PHP frameworks out there, such as CakePHP and CodeIgniter.

For CSS frameworks, I believe in rolling your own framework if you really need to, because I find that the overhead in size and the usual cost of lower semantics in using CSS frameworks don’t justify the benefit, seeing as CSS (with the CSS2 specs at least) is a very simple markup language that really isn’t as verbose or complicated as client- or server-side scripting.

Do you have a favorite design- or development-related book from 2008?
This year, I read a lot of development books mostly to get familiar with emerging technologies like Flex 3 and AIR, as well as to upgrade my outdated ActionScript 2 knowledge to ActionScript 3. Learning Flex 3 is a superb primer.

For design, there is a lot of great content from independent bloggers (such as on the Usability Post blog) who produce great design- and UX-related articles, and unfortunately I didn’t find any ground-breaking books to read like Designing Web Usability (from 1999) and Don’t Make Me Think (from 2005). One book that I’d rank close to the caliber of the two previous books I mentioned is Web Form Design, by Luke Wroblewski, from Rosenfeld Media. Rosenfeld Media has some nice UX books in store for us next year, and I’m excited to get my hands on those. Additionally, I still think that for beginning developers who are getting into more intermediate-level, standards-based Web design, I would suggest CSS Mastery by Andy Budd and Designing with Web Standards by Jeffrey Zeldman.

Nick La of N. Design Studio, Web Designer Wall and Best Web Gallery

Nick La

Do you have any favorite designers whose work you enjoyed following in 2008?
I particularly like the tnvacation.com series of websites (fall, spring, summer, and winter) designed by designsensory.com.

What has been your favorite design trend or style from 2008?
My favorite design style is the collage and scrapbooking effect (see 2008 Design Trends at Web Designer Wall).

Chris Coyier of CSS-Tricks

Chris Coyier

What is your favorite CSS technique that you learned in 2008?
My favorite CSS technique from this past year isn’t a CSS technique alone, but rather learning how to control CSS through JavaScript, specifically jQuery. I already know CSS quite well, and since jQuery uses the same selectors as CSS, learning it wasn’t very difficult. Now I am able to integrate behaviors in websites in ways that were out of my grasp before. I can think “When I click this element, I want this other element’s CSS to change so that it is twice as big,” and I can make that happen quickly and easily. The power of that is incredible to me still.

Who are some of your favorite designers to follow on Twitter?
I love being able to follow all these incredible designers whose work I greatly admire: @jasonsantamaria, @mezzoblue, @collis, @vpieters, @snookca, @chrisspooner, @jessebc, @elliotjaystocks.

But even more, I like following my actual friends and people I enjoy conversing with. I am an equal opportunity follower. If you Tweet interesting things, I want to follow you!

Chris Spooner

Chris Spooner

Can you tell us a business lesson you learned from starting full-time freelancing in 2008?
One of the things that has surprised me the most is the obscure range of situations that project leads are generated from. When I look back at how my clients found me, I’m presented with a huge range of sources, which include the usual search engine phrases of “graphic designer + location,” but also some more generic and unusual terms that often bring up a related tutorial or article from my blog. Other sources of inquiry have been through seeing an example of my work on Web design galleries, discovering me through an online interview on another design blog and sometimes the subscribers of my blog themselves.

The lesson here is to consider every possibility of exposure and make the most of it. You never know what might come as a result of it.

Is there a particular product, software or accessory that is on your wish list for 2009?
I’d quite like to join the Apple fan club and swap all my computing kit for Mac products. An iMac, Macbook Pro and iPhone would look pretty nice sitting on my office desk! Unfortunately, I went and bought my Windows-specific Adobe software not so long ago, based on the idea that I already had a powerful computer setup. While Windows does the job without too many problems, I remember the overall niceness of OS X when I used to use an iMac at a previous job.

My girlfriend and I are looking to move home in the near future, so I think that would be the perfect opportunity to kit out a brand new office area with a shiny new kit, along with Adobe’s new CS4. I better get saving.

Alen Grakalic of CSS Globe and Templatica

Alen grakalic

What were a few of your favorite website designs from 2008?
There were many beautifully sites this year. Not actually sure if all were designed this year, but that’s when I first saw them. To name a few:

13 Creative

13 Creative

Ali Felski

Ali Felski

Viget Labs

Viget Labs

Clearspace

Clearspace

Carrot Creative

Carrot Creative

Alexandru Cohaniuc

Alex Cohaniuc

I loved this site Tomas Pojeta.

Tomas Pojeta

Another one of the sites I was absolutely amazed by was actually a Flash site: Level 2 Design.

Level 2 Design

Can you tell us something you learned during the past year that has helped you in running your business?
The one thing 2008 taught me was actually something I already knew but somehow keep forgetting: if you are a freelancer, never rely on a single source of income. No matter how cool the deal sounds, don’t work exclusively for anyone.

Randa Clay

Randa Clay

What were some of your favorite design trends or styles from the past year?
I love the vintage and retro look. The illustration style and color schemes are really appealing to me.

Do you have any new year’s resolutions for your business in 2009?
I’m not a big one on new year’s resolutions, but my continuing overriding goals are always to exceed client expectations, and to be one of the top developers of custom WordPress themes.

Jon Phillips of Spyre Studios, and founder of Freelance Folder

Jon Phillips

What are a few of your favorite tools or resources for freelancers that you used in 2008?
I used different tools in 2008 (and in previous years), but If I had to choose, I’d pick three: WordPress, because of its simplicity, ease of use, flexibility and great support from the community; Freshbooks Invoicing because they make it so damn easy to keep track of everything, and I also find the iPod Touch app to be very useful; and last but not least, I’d pick Adobe FireWorks, simply because most of what I do doesn’t always require that I open Photoshop. Of course, I used many more tools, but those are the ones I used almost every single day in 2008.

What has been your favorite music to listen to while designing during the past year?
Being a musician myself, I could say I’ve been listening to my band (and I have), but usually when I work on clients’ projects and designs I’ll listen to artists like Fiona Apple, John Mayer, Radiohead, Muse, Guthrie Govan, Tori Amos, and when I need something a bit “stronger,” I’ll listen to Slipknot, Tool, 36 Crazy Fists, Avenged Sevenfold, Meshuggah, Soilwork, etc. It really depends on my mood and what I’m currently working on. Let’s just say I like the sound of an acoustic guitar as much as distortion. :)

Jacob Cass of Just Creative Design

Jacob Cass

What was your favorite design course that you took in 2008?
I took eight design-related courses in 2008 while studying Visual Communication at Newcastle University, Australia. These were: Visual Communication Technology II, Animation and Multimedia, Advertising for Design, Graphic Design, Media Production, Visual Communication Imaging, Typography and New Media. My favorite and most hated course would have to be Typography. It was the most challenging and eye-opening course I have done on design, and since taking it I have realized that so much of design and communication is purely based on typography. I actually wish to do another course in advanced typography, however my uni does not offer it (yet).

What aspects of your work would you like to improve on in 2009?
Glad you asked me this. It may lead to some new year’s resolutions. I would like to learn more about complex illustration in Illustrator, and I also want to learn some new techniques in Photoshop. I am also trying to improve my typography and further my skills in logo design. But in saying all this, this does not mean I will not try to improve on any other aspect of design. As a designer, you have to continually improve and learn new things to keep up to date in the industry.

Brian Gardner of Revolution Two

Brian Gardner

Can you tell us something that you learned that helped you improve your business in 2008?
The one thing I learned this year is how powerful a community can be. In October, I decided to take Revolution and open-source it, and I was amazed at how many supportive users there were. More importantly, users have generously given their time on the support forum to help others. Building a product that people believe in can go a long way.

Are there any products, software apps or accessories on your wish list for 2009?
Truthfully, the only thing I want is a 3G iPhone, as my current one runs just fine, so need to go out and buy another one!

Elliot Jay Stocks

Elliott Jay Stocks

Can you share with us a business lesson you learned from going out on your own in 2008?
Great question! There are two main things: the first is that I massively underestimated the time it would take to do admin stuff when I first started out. I don’t have too much paperwork to do, but things like reshuffling the calendar to fit in projects, liaising with clients, keeping track of expenses, etc., all that stuff takes a lot of time, and I was totally unprepared for it to begin with.

The second thing is that you should only take on projects you care deeply about and that are going to keep you interested. I did a couple of projects in 2008 that I really didn’t enjoy by the time they came to a close, because I’d lost interest in them. And that only happened because, deep down, I was never really interested in them in the first place. Turning away work like that because of a personal point of view can be a financial risk, but it’s something I’ve started to do, because the only way I’m ever going to produce decent work is to have a passion for the projects I’m involved with.

Do you have any upcoming projects for 2009 that you’re especially looking forward to?
I have quite a few, actually! :) In January I’m going to take a break from client work and pick up recording of my new album (which I meant to do in December, before deadlines got shifted). So that’ll be great fun to do, and I’m really excited about releasing it. It’ll also be nice to have a complete break from designing and writing for a while so that I can come back refreshed.

The second thing is the next version of my personal website. I’ve been working on the redesign on and off for a few months now, but it hasn’t really gone anywhere. I’m hoping that I can dedicate a couple of weeks of solid work in early 2009 to get that nailed.

I’m also really looking forward to a huge number of speaking events and the traveling that goes with them. I’ve got lots lined up for next year, including a few I’ve yet to announce. In January, I’m going to announce a very big one that I’m doing later in the year! :)

Jay Hilgert of Bittbox

Jay Hilgert

What are a few of your favorite or most frequently used fonts of 2008?
Stainless, Dispatch, Myndraine, Kontrapunkt, Dirty Ames, Turbo Ripped, Immoral, Myriad Pro.

Are there any new graphic design techniques that you learned or developed in 2008 that stand out to you as being especially useful?
I’ve by no means mastered it yet, but I enjoyed learning about the gradient mesh tool technique in Illustrator. It immediately struck me as being useful in many ways, like for creating photo-realistic icons in 100% vector format, for example.

Fabio Sasso of Abduzeedo

Fabio Sasso

What have been some of your favorite products, software and accessories you have used in your work in the past year?
My new MacBook Pro and my iPhone 3G are definitely my favorite products. But in terms of software, I think the new Pixelmator was a great surprise.

What are your favorite design trends or styles from 2008?
For me, one of the coolest design trends in 2008 was mixing modern lighting effects with an ’80s style.

Noura Yehia of Noupe and DevSnippets

Noura Yehia

What were some of your favorite design-related online resources that you came across in 2008?
I read and skim a lot of design and graphics blogs, but there’s only one blog I read on an almost daily basis and that’s Smashing Magazine, which I do because I think every single post is a piece of work. Besides that, I also often check in to Web Designer Wall, NETTUTS, Six Revisions and DesignM.ag.

What has been your favorite online design community during 2008?
There are so many great design communities out there to keep any designer in a creative mood to work. I would definitely start with DeviantArt, having such a huge collection of well-crafted artwork all in one place. I also quite like checking Behance Network, Computerlove, Design Float and the Popular Bookmarks on Delicious, which send me to more places

Steve Smith of Ordered List

Steve Smith

What have been some of your favorite sources of design inspiration, online or off, throughout the past year?
Online, I find a lot of my design inspiration these days from screenshots posted to Flickr by my friends. Patrick Haney posted a set on Design Inspiration that’s a great look-through if you need a couple ideas for layout or colors.

Offline, I’m drawing a lot of inspiration from architecture. Architects have to think in multiple dimensions, something we Web designers don’t have to worry about. But I think the metaphor is valid, in that we need to think not just of the design aesthetics, but of the dimensions of usability, and accessibility as well. The website needs to look good from every angle.

Are there any current design trends that you would like to go away in 2009?
I’d have to say that one of the things I think is becoming a little cliché is the hand-written note, or the post-it note, or the paper-clipped scrap-paper effect. Don’t get me wrong, I’m sure this effect has its place. I think it just happens a lot more than it needs to these days. That said, a website should meet the needs of the project, not be designed to current fads in a vacuum.

Related articles

You may want to take a look at the other interview posts we’ve published earlier in our magazine:

  • 35 Designers × 5 Questions
    35 designers. 5 questions. 5 precise answers. Result: 175 professional suggestions, tips and ideas from some of the best web-developers all around the world.
  • 50 Designers × 6 Questions
    Even more insights from the best designers and web-developers across the globe.

About the author

Steven Snell is a Web designer and freelance blogger who can be found on his own blogs: Vandelay Website Design and DesignM.ag.

(al)

0
Your rating: None

Over the last months we have seen a strong trend towards more individual web designs. These designs use realistic motifs from everyday life, such as hand-drawn elements, script fonts, pins, paper clips, organic textures and scrapbooks. That’s not a big surprise as they serve the function that faceless, shiny, glassy 3D-buttons completely fail to deliver: individuality and personality. “Personal” designs appear more familiar and more friendly. Used properly, such elements can give a human touch to design and communicate the content in a truly distinctive manner.

However, apart from visual design elements, one can also get creative with the layout of the site – its structure and the way the information is presented and communicated. To give you some ideas of how exactly it can be done, we have been collecting examples of creative design layouts. Design was more important to us than a concrete implementation of some creative idea. We also weren’t interested in whether the code validates or not. Below are some examples we have found so far.

In the showcase below we present 40 creative out-of-the-box layouts that break the boring 2- and 3-columned, boxed layouts. We have collected pure CSS -designs, CSS+JavaScript -layouts as well as Flash -designs. Most designs presented below risk their site structure and content presentation with unusual approaches. That’s what makes them different. Hopefully you will find some creative ideas that you can develop further in your future projects.

We strongly encourage designers to break out of the usual boxed layout conventions, experiment with new approaches and risk crazy ideas. Show what you are capable of!

20 × Getting Creative With CSS

Pavel Buben
Pavel Buben uses a magazine cover-style layout for his one-page-site. Unfortunately, there are no internal pages — it would be interesting to seek how they would be designed. An interesting and unusual approach.

Showcase of Unusual Layouts - Pavel Buben

AIGA Los Angeles
AIGA Los Angeles uses boxes in a creative way. All design elements are placed according to the underlying grid, however they clearly break out of the boxes. This approach creates tension within the design and looks truly distinctive.

Showcase of Unusual Layouts - AIGA Los Angeles

SpaceCollective
For its gallery section SpaceCollective uses a five-column grid. Text and images are perfectly placed on the grid giving the layout a complete form and a sense of order. Notice various font sizes and text styling in the design — they introduce a profound visual hierarchy into the layout that works perfectly within the complex, unpredictable layout.

Showcase of Unusual Layouts - SpaceCollective

Jason Santa Maria
Jason Santa Maria has taken a truly different route with his site layout. Each article is laid out differently, with strong focus on typography and visual clarity. Below three of the layouts are presented. You may have a hard time finding similar layouts on the Web.

Showcase of Unusual Layouts - Oh, Snap @ Jason Santa Maria

Showcase of Unusual Layouts - Explain Yourself | Jason Santa Maria

Showcase of Unusual Layouts - Jason Santa Maria

Checkout: Point of Sale for Mac (POS)
At the first glance, Checkout looks like an ordinary Apple grid-layout. What makes the layout interesting is not only the position of its visual elements, but the fact that each section of the page has its individual (although consistent) design. Still, the layout is very scannable and intuitive.

 Point of Sale for Mac (POS)

NOFRKS.design
NOFRKS uses JavaScript to slide between various parts of the site. What we found more interesting was the way the content is presented. Most elements are placed within a context, giving the content a secondary meaning.

Showcase of Unusual Layouts - NOFRKS.design

SMS Parking
At the first glance SMSParking has no layout at all. The design appears to be one single illustration — all elements fit perfectly with each other, creating visual harmony and a sense of balance and closure.

 Welcome

Tri-Win
Sometimes a background image is enough to make the layout stand out. Although one can recognize a conventional layout structure here, the design looks distinctive and memorable. The background image of the site perfectly fits the company, which offers mailing services.

 Serving as the leader in Direct Mail and Mailing Services in the Dallas Texas metroplex area.

Matriz Communicacao
This Brazilian company delivers a perfect example of how design and content can seamlessly be integrated within a complete yet simple layout.

Showcase of Unusual Layouts - MATRIZ COMUNICAÇÃO

Mihmorandum
Mihmorandum uses a common 3-column-layout in an unusual way. Although the structure is quite usual, the design itself looks distinctive and resembles a pile of paper put inside a folder.

 The Small Business Web Design + Local SEO Blog

3rdM
3rdM uses icons to indicate various navigation options. This is not a type of layout you will find in many other web designs. And that’s what makes the layout creative.

Showcase of Unusual Layouts - 3rdM

Nile Inside
Many portfolios use vertical layout to showcase their works. Nile.ru displays its works in a chronological order as if it was a horizontal blog.

Showcase of Unusual Layouts - Nile Inside / years-2008

Rockatee
Rockatee uses asymmetry to position content blocks in an unusual yet appealing style. Notice that the left block perfectly aligns with the navigation option “Home” at the top of the page. The screenshot in the middle of the page spans exactly two navigation options and has the same width as the description block on the right side of the page.

The distortion in the layout is caused by the underlying organic texture. Although the design is perfectly aligned according to the grid, it seems to be chaotic at first glance. The tension between order and chaos creates tension in the layout and looks very appealing.

Showcase of Unusual Layouts - Rockatee Home

Get London Reading
An effective background image can help a layout stand out. The effect achieved here fits with the objective of the project — to encourage people to read more.

Showcase of Unusual Layouts - Get London Reading

BL:ND ( blind )
At the first glance, the layout looks underwhelming. What distinguishes it, though, are the choice of images sizes and a good use of white space. Notice how well negative space is used in the sidebar, where individual elements are clearly separated and properly aligned. The width of the images equals the width of the content blocks. Yes, the layout is boxy, but the wise use of whitespace makes it far from boring.

ND ( blind )

The portfolio of Hannibal
Usually, navigation menus are placed in the sidebar or at the top of the site. William F. Leffert does it differently. His non-linear layout literally breaks out of the boxy structure and offers something quite different. Sometimes it’s enough to simply experiment with the position of design elements to achieve striking design solutions.

 WFL

URLshrinker
Creative design solutions can be as simple as this one. An elegant and attractive layout by URLshrinker.

Showcase of Unusual Layouts - URLshrinker

15 × Getting Creative With CSS+JavaScript

ShopComposition
ShopComposition offers a sliding navigation at the top of the site. Users can choose the content they would like to read and select the width of the content blocks. This store has an integrated blog and some further projects (such as picture-a-day) to attract customer’s attention. JavaScript in use.

Showcase of Unusual Layouts - ShopComposition | Composition | Outfitting Designers Since 2003

forgetfoo
Forgetfoo uses an almost minimalistic, simple layout with a sidebar and a content area. Designers removed all necessary and unnecessary details focusing only on last blog entries. The design doesn’t contain any category navigation options. That’s unusual, but may be a little bit too much of the minimalism. Navigation through blog posts is realized with Javascript.

Showcase of Unusual Layouts - foo // it\\

Include
On Include one content block and the corresponding navigation block seem to “hang in the air”. Essentially the page has two columns; however. the layout seems to be quite original — maybe because of the cows placed on the background for some reason. The navigation on the right-hand side is realized with Javascript.

Showcase of Unusual Layouts - Include

Kobe
The navigation options at the top of the site are slightly animated yet creating an appropriate atmosphere. Once one of the sections is clicked, the main content area slides vertically — first the background image, then the content. If the content area also has some navigation options, they are slided vertically as well. In this situation it might be a slightly better design decision to use horizontal navigation instead to make it easier for visitors to distinguish between the primary and secondary navigation.

Kobe

tap tap tap
tap tap tap uses a bold and eye-catching layout to deliver the message to its visitors. The layout, although basically consisting of the sidebar and content area, is not boring at all and looks attractive. The left-hand side navigation and further effects are created using JavaScript.

Showcase of Unusual Layouts - tap tap tap ~ Groceries

youlove.us
The layout on youlove.us is definitely very vibrant. It uses a large vivid background-image and a the scroll-effect to enable users to quickly jump from one section of the site to another. Notice that the navigation area is repeated four times, in each of the categories. Sliding effects are also used for each of the categories. Instead of using 20 separate page, the layout combines them all on one single page. The result is compact and user-friendly.

Showcase of Unusual Layouts - youlove.us

Method: A Brand Experience Agency
This design agency uses a flexible JavaScript-based layout which updates its size depending on the browser window size. The content is “packed” in boxes is usual for such a grid-based design; however, the alignment of the boxes makes the design literally stand out.

 A Brand Experience Agency

Viget Labs
Viget Labs also uses a sliding navigation and a horizontal scroll-effect to make the user interaction more dynamic and hence more appealing. However, more importantly, the layout itself stands out: the layout is invisible and resembles interactive Flash-interfaces. CSS+JavaScript in use. Smashing says: five out of five stars.

Showcase of Unusual Layouts - Viget Labs

Lucuma
Lucuma also uses horizontal layout as well as a horizontal slider-navigation. The simple yet effective integration of background images, navigation, videos and content makes the layout unusual and distinctive.

Showcase of Unusual Layouts - Lucuma

Axel Peemoeller Design
On this page all design elements are draggable and some of them are clickable. Images seems to be thrown on you in the first moment, but in the end they all make sense. This is an unusual portfolio which is memorable and interesting to explore.

Showcase of Unusual Layouts - Axel Peemoeller Design

IDEO
IDEO presents everything on its main page. The navigation options are placed in the black boxes and somehow arranged among other content boxes. Once one of the black boxes is hovered, related content blocks are highlighted. That’s not something most users would expect from a layout.

Showcase of Unusual Layouts - IDEO

Bohdan Levishchenko
Bohdan Levishchenko uses the same approach as IDEO, but presents all navigation option at the top of the page. Single works are presented as images under the navigation and spread throughout the layout.

Showcase of Unusual Layouts - Bohdan Levishchenko

MelissaHie.com
Melissa Hie places all deign elements on a single large page. Visitors are basically driven from one site are to another using a scroll-effect.

Showcase of Unusual Layouts - www.MelissaHie.com

Hotel Oxford - Timisoara
A single-page-site with a very calm and comforting layout. All navigation options are available at the first glance. Once some of the options is clicked, the content block on the left is dynamically replaced. The logo of the Hotel Oxford always remains on its place.

Showcase of Unusual Layouts - Hotel Oxford - Timisoara

thruSITES / Portfolio
In this portfolio the illustrations of a designer’s works seem to somehow be loosely placed on an invisible rope. When one of the illustration is clicked, all other elements arrange themselves in such a way that the content which this illustration represents becomes dominant.

Showcase of Unusual Layouts - thruSITES / Portfolio

Erwin Bauer KEG
The portfolio site of Erwin Bauer takes a different approach to using a pannable user interface, but implementing in JavaScript rather than in Flash. The site allows users to click and drag to pan the canvas, or to use links positioned around the content to move around. The design is clean, and mimics a design document with regisration and crop marks, and visual cues about the directions the canvas will pan to when you navigate. [via]

Showcase of Unusual Layouts - Erwin Bauer KEG – Designbüro für Konzept & Gestaltung

5 × Getting Creative With Flash

The Secret Location
The Secret Location, a media agency based in Toronto, Canada exemplifies their work, by providing an immersive flash experience around a conjured up story leading a character to follow a mysterious path that leads to the secret location. Very interactive approach, a very unusual site layout. [via]

Showcase of Unusual Layouts - The Secret Location - 416 849 5298 - Interactive Media Production, Ideas, Experience Design, Tangible Media, Animation and Motion Graphics

Kamil Gottwald
In his layout Kamil Gottwald enables users to define the width of site columns manually. To navigate vertically users need to scroll horizontally. Hence no vertical scrollbar is necessary. Multiple site views are possible.

Showcase of Unusual Layouts - Kamil Gottwald - interactive developer

Grooveshark Lite
Grooveshark seems to imitate an iPod-interface and does it indeed very well. Although it may be not very creative, such layouts are hard to find on the Web.

Showcase of Unusual Layouts - Grooveshark Lite

Jeremy Levine Design
Flash offers many creative possibilities for an interactive navigation design. Jeremy Levine uses dynamic paper strips which seem to hang in the air.

Showcase of Unusual Layouts - Jeremy Levine Design

SeymourPowell
SeymourPowell has come up with an interesting idea to provide its visitors with some intuition of how good its work is. Click on the pile to find out.

Showcase of Unusual Layouts - Product Designers

Muku Studios
“Let Muku Do You”: this friendly buddy just wants to remain visible and hence he tries to find some place on the screen to keep an eye on site’s visitors. The layout of the site is simple yet memorable — well, Muku makes sure he’ll be remembered after the browser window is closed.

Showcase of Unusual Layouts - Muku Studios | Let Muku Do You

Related Resources

You may also be interested in the following articles we published earlier:

0
Your rating: None