Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Web Design Reference Guide

Hosted by

Breaking Out of the Box: Using Abstract Thought to Inspire Progressive Web Design

Last updated Oct 17, 2003.

The Web standards movement of the past seven years has done a great deal to promote best practices in how we approach our site designs. However, the emphasis on code has been extreme: We've had to learn complex aspects of markup and CSS and while this knowledge has been critical, it's outside the interest area and even comfort zone of many designers, who want to focus on what they do best: convey information visually.

There's another problem, too. Many people who are markup and CSS-centric don't get the opportunity to think like designers, which can be very limiting of an individual's creativity. After all, most people aren't just one thing – we are multifaceted and that reality should be embraced rather than restricted.

Unfortunately, the boot-strap method we've all learned as we've worked on Web sites has left us with gaps in our education and our exposure to innovative ideas. In this article, I'll examine the perhaps radical concept that using abstract thinking to arouse our imagination and physically getting away from the computer can be downright necessary for all web developers and designers to move toward more inspired and innovative work.

Code is Just Code

It's important for us to realize that at the end of the day, code is just code. Do we need to understand the nuances of XHTML and CSS? Well, it's certainly best if we do – we're much better equipped to become better at what we do. In fact, the most lauded Web designers do just this – stand between the world of code and the world of graphic arts and do so with great skill.

But just knowing XHTML and CSS cannot a masterpiece make. Whether you are a designer frustrated with code or a developer who loves code, understanding that our various client-side languages are tools within our toolbox rather than our framework for thought is imperative.

It's been said many times that CSS-based, accessible design can tend to appear boxy and unimaginative. While that's been proven untrue, it's taken unusual proof-of-concept sites such as the CSS Zen Garden, which embrace experimentation, to show the true power of contemporary web design techniques.

It's a mistake to think that knowing markup and CSS is going to solve design problems. What's more, if you are always working in the context of markup rather than allowing yourself to think imaginatively and later worry about code, you're going to end up with boxy designs because you're thinking in structure rather than style.

The Artistic Paradigm

An interesting metaphor for current web design practices comes directly from the fine arts. Consider the structure of a document. It can easily be said to relate to figurative art, which seeks to represent things more or less as they are. Figure 1 depicts a female's back. We know immediately that we're looking at a human figure, even though the color of the figure is blue. We understand the human shape and form, and can identify it right away.

Figure 1

Figure 1 Blueback, Anders Pearson, Oil.

Web designers have been working figuratively. We are taking our structure and expressing it on our canvas. And, while we might have nuances to our work that make it unique, we've been stuck in some pretty conventional methods when it comes to interface design. We place our logos typically on the left, our content in the center, our navigation to the top and/or sides. These conventions can be said to be figurative, with nuances coming about where and when we've either had to make concessions to the user or client needs, or we have had an opportunity to deviate a bit.

Still, as you can see in Figure 1, despite the figurative nature of the work, there are exactly such nuances. Why is the woman blue? If we focused in on one small part of the canvas, would we then know what we were looking at? Despite the fact that we clearly know that we're looking at a human being, figuring out anything beyond what we actually see is left to the imagination.

Toward the Abstract

But nuances aren't enough to break out of conventional thinking. Continuing with the artistic metaphor, an abstract painting is meant to express a message without defining the structure.

Figure 2 depicts an image that is also blue, but that has no definable figurative appearance. In this case, we can think of this as the process many of us are going through as we break out of table-based, heavily structured work and move toward a more free-thinking, expressive form of approaching our design.

Figure 2

Figure 2 Phase 3, Anders Pearson, Oil.

By approaching web design in a progressively more abstract fashion, we can begin to break out of the proverbial boxes and grids that have emerged because of the code-centric environment in which we've been working.

Thinking in Abstractions

There's no doubt that trying to take literal, figurative, structured thought and approach it from a completely abstract point of view is a difficult thing. This is one reason why designers coming from the table-based layouts of the past are finding it very difficult to break free of constraints, whereas newcomers to web design who never have to create a table-based layout are thinking in abstractions right off the bat.

Figure 3 takes the concepts discussed here and demonstrates how abstract thinking allows structure and form to emerge rather than control.

Figure 3

Figure 3 Memories of Diana, monotype triptych, by Joe Forkan.

Okay, you say, all very well and good, but just how can we move from the code-centric, figurative thinking of our past to a more abstract form of creative planning?

Step Away From the Box

The first thing you can do to begin thinking more abstractly is step away from your computer. The very tools and technologies we use can limit us severely if we don't go out into the world and find objects in nature and life to inspire us.

After you're done reading this article, I encourage you to walk away from your computer and consider doing some of the following activities:

  • Art. Go to an exhibit. Walk around, looking closely at the textures and materials used to create the work. Challenge yourself: How does a given piece of artwork make you feel? Focus on sensations rather than logical or structural notions.
  • Architecture. While fundamentally based in structure, architecture also breaks out of convention, even when you're looking at very traditional or conventional buildings, you're bound to find something that is unusual. Study books, walk around your city or town, look at photos. Again, study texture, color and sensation rather than structure.
  • Nature. Nowhere can more examples of inspiration be found than in nature. Sure, if you look at a tree, you're going to see a tree, and think about how it is structured: roots, trunk, branches, leaves. Forget that and instead look very closely at the bark of the tree. What does it remind you of? What does it physically feel like?

Think about sensory perception in all cases. What do you see, hear, taste, smell and touch? Focus on the emotional abstraction rather than the figurative realities.

Now, Please Stand on the Table

Another very helpful means of breaking out of conventional thinking is to gain a different perspective. The other day, while taking a photo, I decided to lie down on the sidewalk in order to get a unique angle of an image. While people certainly looked at me funny, the results were worth it.

Here are some ideas as to how to get different visual perspectives:

  • Get up on the table and look down. Look up. What's different?
  • Cut a shape out of construction paper. Now walk around the office, house or your neighborhood and look through it using the shape as a viewport.
  • Take a digital close-up photo of the tree bark from earlier. What else does it look like? How might you use the abstraction within the bark as part of a design?

Breaking out of conventions ourselves is a necessary part of aiding in more imaginative thought.

Pencils, Please

If you're feeling a bit more imaginative, now's the time to go and grab some sketch paper and a pencil. Begin by sketching out your ideas – don't think about anything but what you experienced.

As you work from abstraction, now allow the literal aspects of the work to emerge. When you feel you have some concrete direction for your design, you can open up Photoshop or your favorite imaging program and begin to incorporate your ideas, never forgetting that the image of the bark you took could be useful as a texture, or that the muted colors of a favorite painting might be very effective within the particular design.

Switching the Approach

By encouraging designers and developers to work from the abstract to the figurative rather than the other way around, the freedom to innovate becomes the focal point of the process rather than the need to impose structure and order, which can limit us severely.

Certainly there will always be the need for convention in practical design work, but that doesn't mean that switching the approach can't be an extremely effective and inspirational means of shifting away from the rigid, predictable thinking we've been used to for so long.