How to Display Your Art on the Web: Part 4

[This is part of a series of articles for which the introduction and list of articles is here. If you haven’t read the introduction yet, it would be helpful to read it first.]

Hey! What’s with this “planning” stuff? I want to just start making my beautiful site design and get going!

Well, design is what I’m talking about, and planning is part of that, perhaps the most important part. If you were laying out a magazine ad, or a painting, you would rough out some preliminaries, do some sketches, or engage in some kind of brainstroming or planning in order to have some idea of what you were doing. Same, and even more so, with web site.

Perhaps you’re the type to start a cross-country trip with half a tank of gas and $1.45 in your pocket. If so, go right ahead and start your design; just don’t be surprised if you wind up in Tierra del Fuego instead of San Diego.

“Design”, for the benefit of the uninitiated, doesn’t just mean making something look good, though that’s certainly part of it. Good design, in print or on the web, is about making a something work, making it communicate something. It doesn’t matter how “pretty” or “cutting edge” a design is (or how many awards it’s won); if it doesn’t work, it’s bad design.

This factor is even more critical on the web than it is in print. A web site isn’t something you just look at or read, it’s something you use; which is why a web site is often referred to as an interface (not in yer face, though that happens too), meaning a layer of control that allows a human to interact with a machine or program. The palettes, windows and tools in Photoshop, for example, are an interface designed to allow users of the application to create and edit images (or paint superhero costumes on pictures of fashion models).

The purpose of a web site interface can vary, based on the overall purpose of the site, which is the first key decision you must make as a designer.

What is the purpose of your site?
Sounds like a rhetorical question, but think about it. Are you exposing your work to potential painting buyers? Gallery owners? Art directors? Publishers? Web comic readers? Are you selling originals or prints directly over the web? Are you chronicling your artistic progress in a blog as part of your learning process? Are you selling books? Impressing someone who sits next to you in your art history class? What exactly do you want your shiny new web site to do?

The answer may be less than simple, and composed of several of the above elements or others, but it’s important that you understand it, and if the intention is multi-fold, determine the order of importance.

The site map (outline version)
Once you understand what you are trying to accomplish with your site, you need to decide what content you’re going to include. Your bio? Links to all your friends’ sites? How-to demonstrations? Listings of gallery shows? Older work? Preliminary or alternate versions? Art outside your specialty?

The way to answer this question is to focus on the one above. What is the purpose of your site and what will contribute to that purpose? Also, consider what will detract from it. If you want to include extra stuff, that’s not specifically on target, but you feel may enhance the site and make it more interesting, that’s fine as long as it doesn’t detract from or hinder the site’s actual purpose. In deciding what to include, and how to name, prioritize and arrange the pages that will contain that material, you should make a simple site map.

On the web, a “site map” can be a page on a web site with links to every other page in the site, often arranged as a hierarchical outline, and is usually only needed for large, potentially confusing sites. However, it also refers to a preliminary plan of a site, used for building it, something necessary even for the smallest sites.

Even if you choose to make a fancy flow chart style diagram with something like OmniGraffle or Concept Draw, you still start with a simple text outline. Write a list of the pages in your site. It may be a simple, flat list, but if you break a section like the portfolio down into sub-sections, arrange them under the heading for Portfolio as sub-categories. They will become links referred to as sub-navigation (and no, I’m not talking about piloting Jules Verne’s Nautilus). You’re planning both your pages, and the navigation part of your interface.

A simple site map might look like this:

Home
About the Artist
Portfolio
      Recent work
      Selected Pieces
      Older Work
Contact
Links

The first rank is the main navigation, visible on every page; the subsections, or sub-navigation, for the Portfolio section might only be visible when you are in that section.

Obviously, the naming of sub-sections in the Portfolio (or “Gallery”) section would vary depending on the type of art you’re presenting. Illustrations or gallery paintings might be arranged by genre, webcomics pages by date or story line, concept art by project, etc.; but the overall naming of web site sections should follow one important rule:

Don’t make me guess.
Or, to quote the title of a book on web site usability by Steve Krug that I will recommend heartily, Don’t make me think.

If you want me to look at your work, regardless of whether I’m an art director, gallery owner, potential buyer, webcomics reader, art blog writer or your aunt’s second cousin, don’t discourage me! Don’t do anything to make me pause, slow down, hesitate, get confused, discouraged or annoyed or put any kind of potential barrier between me and your work. If you do, I will go away.

It only takes one click, the work of milliseconds, for me to leave your site for one of the ten billion other sites out there.

If it takes me one click to go away and five to drill down to your portfolio, I will go away. If you make me wait through your 30 second, animated Flash intro before I can get to your navigation, I will go away. If you make me look for a little “Enter Site” button hidden somewhere on a splash page before I can get to the navigation, I will go away. If you befuddle me with an enigmatic design, or confuse me with clever conceptual names for your links, I will curse you and your unborn children for making me feel like a fool, and then I will go away.

When it comes to navigation design, there are three important principles: clarity, consistency and ease of use. Did I mention clarity?

If you think an artsy, “clever”, or “cutting edge” concept for your web space is going to make potential visitors so intrigued they’ll spend time guessing about where your portfolio is, or what “Super Whizzyness” means as a link name, you’re sadly mistaken. Your friends and fans will tell you how awesome it is; art directors and gallery owners won’t, because they will be long gone.

I’m not saying you can’t be creative or clever with your design, far from it; but if you’re really creative and clever, you’ll design a site that is clear and easy to use, as well as attractive and interesting.

The home page
Hoo-boy! Home pages are the most problematic in any web site. Since everyone perceives them as the most important page in the site, and rightly so, they are most often the worst page in the site, as “important” item after “important” item is crammed onto their fragile little camel’s back, until they look like a K-Mart aisle as seen through kaleidoscopic glasses.

Here’s the rule: The more things you put on your home page, the less important each of them becomes; and the less effective the home page is as a whole.

If you walk into a big social gathering and 20 people in your immediate vicinity are talking, the chances that you will be able to focus on what any one person is saying are slim. If, on the other hand, only three people are talking, you can pretty easily pick which one to focus on, and if only one person is talking, there is no doubt.

A home page should speak clearly, and should immediately and unequivocally answer three questions for a visitor who has, by any of several avenues, come to it:

What kind of web site is this?
Is there anything here of interest to me?
If so, how do I get to it?

You want your target audience to say “Yes” to the second question, and not have to slow down and guess about either of the other two.

Focus your home page on introducing yourself to new visitors. Returning visitors are more likely to go to the trouble of clicking in to other content. It’s amazing how many artists’ sites have these priorities reversed.

If you feel the need to put news on the home page, stick in a column to one side. If you urgently need to list your current gallery opening or new images, put them to the side or “below the fold”, after the first screen depth worth of content. If a visitor doesn’t get those three questions answered, they won’t stick around to figure out who you are and why they should care where your next gallery opening is.

Put at least one of your best images on the home page; make it integral to the design. The images are what’s it’s about, put them to good use in the service of answering those three questions. Your images should be part of answer to both of the first two questions. If you’re tempted to put lots of them on the home page, remember the social gathering image. One or two (or maybe a short, subtle, rotating slide show, if you can do one well) should be enough.

Where to guide them
Good web site designs don’t just offer navigation to where the user wants to go, they offer a gentle but firm nudge in the direction you, as the site owner, want them to go. Just where that is comes back to that first question about the purpose of your site. Presumably you want them to see your work (and I’ll talk specifically about Portfolio or Gallery page design in a future post), but once they have seen your work do you want them to contact you? By email or other means? Are you selling something directly? Do you want them to join a mailing list? Do you want them to come back often? Are you directing them elsewhere (eBay, PayPal, Amazon or the site of a brick and mortar gallery)? All of the above?

When you understand your focus, make this process as simple and easy as possible.

All about you
For most of the purposes I can think of for an artist’s site, information about the artist, history, accomplishments, accolades, reviews, materials and process, is not only relevant but essential. Do I want buy a painting from someone I know nothing about? Do I want to give an illustration assignment to someone whose background, and potential reliability, is a mystery? Do I want to spend my time reading a webcomic that is going to go nowhere? Am I interested enough to contact this artist about their work?

Give me, the art director, editor, gallery owner, potential buyer, webcomics reader, or other visitor, enough background to feel comfortable with my potential interaction with you and your work. Think Goldilocks — not too much, not too little, just enough.

Contact
Even if direct contact is not the point of the site, you should offer some means of contact. It may be indirect, through a publisher, rep or other intermediary, or something that doesn’t involve an email address, like Contact Form. The latter can be handled well or poorly, but it’s better than no avenue of contact at all. (Even if it’s just a way for someone to tell you part of your site is displaying wonky, which you may not be aware of.)

If you post your email address, do it in a way that protects you from spammers’ email harvesting robots. i.e. a JavaScript encoding of the email link, or using a phrase like “cparker (at) zark.com”, or an image of the address, rather than a live link that the harvester bots will recognize.

If you really want to encourage contact, put your (protected) email address on the footer of every page, in addition to having a dedicated Contact page.

Links
While not necessary, a page of links to other sites can add a bit of interest and serves the additional purpose of encouraging others to link to your site, in the hope of a link back. (Make them relevant and well-chosen, I’m not suggesting you engage in random “link exchanges”.) Incoming links from other sites, particularly relevant and highly ranked ones, are a factor in search engine optimization (which I will also address in a future post).

Putting it together
Armed with your site map, knowledge of navigation issues, and clear sense of the purpose of your site, you can more confidently design the site’s look and feel. Form follows function.

Resources:

Diagraming and visualization software list from Vitaly Friedman

Don’t Make Me Think: A Common Sense Approach to Web Usability by Steve Krug

Web Site Design from w3schools
Basics of Website Design from Penn State University
Site Planning Basics from eFuse
Web Design Basics from SteveDawson.com
How to Make a Website of Your Own from Mardiros Internet Marketing
Web Design Basics from About.com

Next: Designing your site – ooooooh, pretty!