Collecting for Design

In: Articles

By Matthew Smith

Published on November 26, 2007

Very early in my design career, I noticed that my work was not on a par with that of designers like Jesse Bennett Chamberlain or Daniel Scrivner. Their work has subtlety and nuance at the pixel level that many people might gloss over, but which contributes to an end product that is more than the sum of its parts.

I knew I needed to bring that subtlety into my own designs. I wasn’t about to head to design school for a host of reasons, so I began to educate myself on what made a good design.

Three Disciplines of Self-Education

There are three disciplines that have been useful in my self-education: Reading, practicing, and collecting. Reading is self explanatory. There are many long lists of suggested reading for designers, and there are a host of great blogs covering different aspects of design.

Practicing requires that you use first and then sketch. If you design for the web, just be immersed in it with your critical glasses on. Sketching has been written about in greater detail than I’ll do here, so let’s talk about the finer points of collecting.

Integration, Separation, Creation

Collecting for the purpose of design doesn’t fit into the hobbyist’s definition. This form of collecting is science.

Integration (Collecting the Specimens)

Collecting the styles, patterns, and techniques used by other designers on different types of site offers an historically present understanding of what is being designed for the web. This is the science of the process—you’re collecting your specimens.

The ultimate goal for a web designer is to create a functional, interactive tool for the web user. We can add value to the site with creativity and visual stimulation, but I assert that good-looking design is useless unless we’re willing to conform to standard design patterns and accepted principles of user experience.

Collecting for Separation

Separation is the practice of observation and decision. Clearly not all of the design patterns that we see today are going to be around in another five years. Dropdown menus are a good example. Observations and decisions about dropdown menus can be found in a slew of web design articles. The problem is finding a navigation system that can accommodate a large number of sub-navigation items in a limited space. The question, however, is whether the dropdown ‘pattern’ is the right answer, considering the manual dexterity needed to effectively use the dropdown.

As a design community, it’s our job is to be critical of current design practices. We’re putting these up against our own experience and formal user testing. This type of discipline prepares us to offer better solutions to the design challenges that arise every day in our own work.

Collecting for Creation

Now its time to take the collection, observations, and decisions, and let our analysis inform our designs. This level of design takes your work from creations of mere intuition or emulation into a strategic response to your interface challenge. It offers a system for design to combat the over-zealous application of one’s personal taste, and the ever-present threat of design block. Your designs will stand and work on the web that exists now, rather than some imaginary web that you’ve created in your head. And with a spoonful of innovation, you’ll have a solution to a challenge where applying a traditional pattern is insufficient.

Thankfully we’re not all devotees of Jakob Nielsen. If we were, we might only integrate, separate, and create, but never change. Innovation, like good design, probably has less to do with talent and more to do with rigorous trial and error toward a known goal. Once you are aware of the present design patterns, and you’ve properly separated the useful from those that are confusing, then it’s time to create… and carefully innovate.

The Collector’s Box

There are a lot of ways to collect design. iPhoto or iView both allow for grouping photos into catalogues and sorting by tags and other properties. For the web, Flickr, or Photobucket are two great web tools that enable you to share your collection online. For my purposes, Flickr has been an outstanding choice to organize my screenshot collections.

Working out the Process

Getting the right workflow together for a collection determines whether it is going to be sustainable and manageable. Initially, my own screenshots would clutter my desktop until I moved them into a separate folder, and eventually uploaded them to Flickr. But this process was inefficient, and rarely happened with any regularity—it took too long and I became irritated and stopped collecting, until I annoyed an Apple developer friend to build me an application just for this purpose. (If you’re interested, you can download it from FlickScreen.) Now I just open up Safari, hit a keyboard shortcut (Apple+Shift+6) and the image is uploaded, with the URL automatically pasted into the description field. I mark the image with a few appropriate tags and I’m done. Without a simple workflow, this collection simply wouldn’t exist.

Taxonomy

Choosing the right title, description, and set of tags for each screenshot can be difficult. The more I collect, the more versed I become in determining the correct tags. The image of a sub-navigation list captured below should be titled something generic but helpful, like SubNavigation List. I only add a description beyond the URL of the originating site if I found the image deserves some kind of critique or annotation. The tags I’ve chosen are Interface, Navigation, Sub-Navigation, List, Icons, and Zebra. By tagging the image more exhaustively in this way, I am creating a more effective database to search within, both for myself and others.

From Scientist to Designer

Collecting isn’t enough in itself. Paying close attention to what makes great design and applying those observations to my work is what makes this exercise pay off. I put this into practice with a client whose site needed nine basic products in the main navigation. All nine navigation elements had to be displayed in a way that wouldn’t befuddle the user with too many choices. It also needed to remain consistent with the style that the client required.

I jumped online and went straight to my Flickr interface collection, browsed to the ‘navigation’ tag, and opened up several shots that had bar-style navigation sets. Here, I’m not looking for a style to rip (for the definitive viewpoint on that subject, check out Cameron Moll’s article Good Designers Copy, Great Designers Steal), but enough information to begin developing my own ideas, which will build on several things:

1. Pre-existing patterns (I don’t want to break the mold. This needs to be a site that maintains existing patterns of design)
2. Subtlety in color, shape, line, light. (How are other designers making pixel by pixel decisions that take a simple bar and make it hum?)

The following seven navigation blocks in particular stood out from the rest.

(Used by permission of Buffalo Web Design)

The builtbybuffalo.com style grabbed my eye first because it’s fun, but remains consistent with accepted navigation patterns and so maintains a high degree of usability. The effect of the hand-written type contrasted on a silky surfaced navigation speech-bubble is intriguing. The subtlety of the background flourishes helps give the element a setting to live in. This is a perfect fit for the emotion that Buffalo is going for and a good hint of inspiration for my own design.

(Used by permission of Trinity United Methodist Church)

(Used by permission of Denver Seminary)

(Used by permission of Get Template)

The Trinity Birmingham, Denver Seminary, and Get Template styles all had the width and subtle separation between navigation elements I needed to implement for my own design. The Denver Seminary navigation bar particularly drew my attention with its simplicity and the shape of the active element. My own design needed a similar balance. Some screenshots I glean ideas from, and others help me focus on what would be inappropriate for the particular challenge I’m facing—for example, the Get Template style of tabs would communicate a feeling of sections that wasn’t a good fit for my product oriented design.

These navigation styles need to be filtered through my client’s visual requirements and the need for consistency with his overall brand. Next, they are passed through my own personal taste filter; after all, my client came to me because he likes what I’ve designed in the past.

These images, then, can “inform” my own design. I differentiate informed design from inspired design. Being inspired happens. Honestly though, only a few designs that I see in my daily gathering actually inspire. More often than not it’s the effect of the designs and patterns informing the way I collect, separate, create, and innovate.

Design

And so finally I’m ready to take what I’ve observed and apply it to my design problem. The first edition, like many, misses the mark. After some time away, it was obvious that I’d relied too heavily on a convention of separating navigation elements—a two pixel double line to create a subtle shadow and highlight between elements. The problem here was that the branding for this client relied more on blocks of color than fine lines; I needed to reassess and come back to the brand.

Re-create and Innovate

The second round included more attention to shape and shade. I introduced a pattern often found in alternating (or “zebra”) tables, generally used for the sake of readability where there are a lot of rows or columns. Reviewing the design examples in my collection gave me a solid base for starting the design, but it needed something more to make it work in my situation. I’ve never seen the alternating color pattern used in a navigation design before, but with a subtle color difference I felt that this was the right solution to this challenge.

Summary

I might have come to the same solution without informing myself with a creative collection of interface and design elements. It’s my suspicion, however, that the habit of collecting, analyzing, designing, and innovating in this fashion is making me a more systematic and disciplined web designer. Through analyzing the best design patterns and techniques used by today’s web design community, I’m able to more critically assess my own designs, and create new solutions to common interface challenges.

Further Information

I’m not the only nut to collect interface elements or design solutions—there are some great collections out there that should be checked out. Have a look at these and then start your own!

• Gustavo Pimenta’s Design Solutions on Flickr
• Clearleft’s Design Inspiration Pool
• Patrick Haney’s Web Design Inspiration
• Factory Joe’s Collection

Related Topics: Web Design, Interaction Design, Graphic Design, Basics