Sunday, August 19, 2007

Planning your web site

Planning your web site

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!

10 thoughts on “Planning your web site

  1. Leah

    This is so true. I’ve had to redo this part more than once, and I’m finally pretty happy with how my site is organized – except when I think of things I wish I had known I’d want to add. ;)

  2. peacay

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

    I wish there were a way to add that as an automatic guestbook contribution as you slam the door on the way out!

    Thanks Charley, this is an excellent series.

  3. Christine Hopkins

    I wish I had seen your articles before I set up my ‘contacts’ page on my own site. I existed very happily with a live link to Outlook express so visitors could send messages to me, but last weekend I had 5000 emails overnight – my email address had been spoofed by someone trying to push shares in a cancer cure, and the 5000 were just the undelivered ones! I have now removed all the text versions of my email address, replacing them with images of the text and removed the hotspot box too. It took me several days to calm dowm after this malicious invasion, and now I have to compromise visitor access to prevent this happening again. Any tips?

  4. Charley Parker Post author

    Only those I’ve mentioned. I use a small application for Mac called SpamStopper that encodes my email address and link in HTML entities and/or JavaScript, allowing it to remain clickable, but be at least partially hidden from the harvester bots.

    The bots are getting smarter, though, so I don’t know how safe that is, or will be in the future. The image method is the only “safe” one. The next safest is the text version of “name [at] domain.com”, name@ [REMOVE] domain.com” or similar, but neither of those can be clickable (bots read the link).

    Once your email is “out” it will be passed around on dozens of spammers lists and CD’s, never to be recalled.

    One tip: never respond to a spam that says “Click here to be removed from out mailing list”. It can initiate a malware download or at the least mark your email address as “live” and saleable.

    Something else we can all get pissed off about: it’s estimated that 90% of spam (which now accounts for over 60% of all email) comes from 10 or 12 individuals, who send it out in enormous quantities from servers in Eastern Europe or Southeast Asia. Much of it also goes through “zombies”, individual computers compromised by malware without the owner’s knowledge (of which yours may well be one, and I say that to everyone). All Windows computers should be checking their machine regluarly with spyware removal tools, but beware of fake spyware removal tools that are themselves malware.

    Windows users should run at least two (ideally three) trusted malware detection/removal tools as no single one finds everything. I use “AdAware” and “Spybot Search and Destroy” on my Windows machine and I’m about to start looking for a good tool for my Macs. Long thought immune, partly because of small market share and lack of interest on the part of malware writers, the Mac will become more of a target for malware as market share increases.

  5. Lise

    Thanks for this excellent series.
    In the “Where to guide then” section of this post, you mention that you will “talk
    specifically about Portfolio or Gallery page design in a future post”.

    Is there such a post already? Do you refer
    to the latest article in this series (“How to
    prepare pictures” )? Thanks

  6. Alice Hunt

    Such a lot of good advise. I think my website measures up to most of them. Already I am thinking of improvements I can make. Good thing iweb is easy to tweak.
    Charley if you have time to go to my site I would love to have your feedback. Alice

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>