Research: First Steps for Designers

Inspiration Resources

So far we’ve been looking to other events’ web sites for inspiration, but we don’t have to stick to that niche. It’s become quite popular to collect examples of first-rate design and archive them as sets on Flickr, an image-sharing service. To start off, check out Patrick Haney’s massive collection, and the Web Design Inspiration Flickr pool which he administers. For even more Flickr sources, check out Vandelay Design’s list of 99 Flickr groups for design inspiration. And numerous web sites exist, such as Smashing Magazine and UI Pattern Factory, that are excellent sources of interesting design examples.

Atmosphere Inspiration

Let’s get an idea of the kind of atmosphere we’d like our site to have—the feeling we evoke through color, subject matter, and texture. You may be familiar with the concept of a mood board, which describes a general collection of images, textures—almost anything that conveys the same mood you want to achieve. Let’s take the term wooden: a traditional mood board might entail, for example, cutting out images of wooden furniture from catalogs or photographs of trees from magazines, and then laying them down on a canvas to make a montage.

Oh, and by the way, it’s unnecessary to use an actual board—any surface (physical or virtual) will do! There is even a variety of software tools available to help you create your own mood boards if you want to do so digitally. The figure below shows a mood board created in Photoshop from public domain and Creative Commons-licensed images found on the Web.

Collating a photo set on Flickr is akin to the action of creating a mood board, particularly when researching atmosphere. I’ve collected some, which you’ll see below.

Composition Inspiration

We aim to create a unique and interesting web site, setting it apart from the kind of site you see every day. A noteworthy way to stand apart from the other sites is to think of an unusual composition or layout. We'll need to take a few risks in the interests of originality, so I’ve been collecting design examples which follow the same mantra. Of course, we’ll still be mindful of the site’s usability—it’s important to stick with what users will understand—but you’ll see that even a little thinking outside the box can go a long way. Here’s my composition set on Flickr:

Functionality Inspiration

Our site will contain a number of functional elements, like navigation mechanisms, a ticket purchase form, a schedule, and plenty more. It’s useful to look at all the different ways other designers have chosen to implement each of these elements.
Chris Messina has been collecting examples of user interface (UI) design on Flickr for years now, and his collections go beyond pure inspiration into the realm of an indispensable resource. You’ll also find a wealth of UI examples collected at Pattern Tap, where users have collected, tagged and commented on widgets from all over the Web.

Look Outside the Web

I’m a keen believer in the idea that if you only use web sites for inspiration, you’ll only ever build a web site that looks like other web sites. Of course there’s nothing wrong with that—it’s essential that a web site looks and behaves like one—but you risk your design growing stale if you search for stimuli in only one place.

There’s a whole world out there full of outstanding design—architecture, fashion, product, packaging ... why confine yourself to one medium and limit your creative potential? Take your trusty camera and go for a walk—collect photos of signs, textures, anything that grabs your fancy. Doodle in a notebook whenever you have an interesting idea. Before you know it, you’ll have a huge collection of inspiring material from the real world.

If you look at the world of print design in particular, you’ll see most of the same principles of web design at work. After all, the new discipline of web design is derived from years of print design tradition, but with a few of the limitations and freedoms reversed. So there’s still plenty of inspiration we can take from the print design world to better inform what we can achieve on the Web. I’ve collected some offline examples in—you guessed it—another Flickr set, shown below.

Collection Tools

I’ve been saving interesting and inspiring snippets in my Flickr profile, but it’s not the only way.

RealMac Software—the team behind web development application RapidWeaver—have recently released LittleSnapper, a Mac application that allows you to collect sources of inspiration from the Web and share them with your peers. It’s a nifty new tool for Mac-based designers, and one I’d heartily recommend.

For Windows users, TechSmith’s Snagit application captures screenshots and screen images, with a library you can use to organize your screenshots by tags, URLs, and date.

Then there’s Evernote, suitable for both Mac and Windows, an all-encompassing note-keeping application that you can access from just about everywhere, thanks to versions for your desktop, phone, and web browser. You can create, upload, and save images, text and audio, and if there’s text contained within the image, Evernote’s optical character recognition (OCR) engine will identify it and make it searchable. That's very handy for when your notes archive becomes rather large!

Research: an Ongoing Process

Research is one of the most valuable ways to spend your time as a designer. Keep your eyes and mind open, and let yourself be influenced as much as possible. Ultimately, the more research you do, the more likely your design will be a success.

If you've enjoyed this excerpt from Sexy Web Design by Elliot Jay Stocks, then you'll love the complete sample chapter. Even better, buy the book and begin creating stunning web interfaces today.