Designing The Band: Chapter Three

Information Architecture

To be quite honest, the Beauideal Web site should be pretty simple. Rather than go through a full blown IA process, what I did was take what we know about out users and what we’ve laid out from our goals and break them down into what I like to call a “content inventory.”

This inventory is simply a list of content, areas and features for the site. I then grouped these into pages and gave those pages simple labels. These labels are based on what seemed to work for other sites of a similar nature and frankly, a little bit of common sense.

For example, I call the page with all the tour information — “Tour”.

Pretty easy right? Well, you’d be surprised how often these labels don’t make sense on sites out there. As well, at some point I plan to test these labels with users, so they’re not set in stone yet.

In any case, what we have now is a simple listing of content grouped into pages as follows:

• Home: Short Introductory Bio, News Blog, Tour Dates, Newsletter Signup, mp3 player, Album Feature (with direct link to store)
• About: History, Expanded Bios
• Tour: Expanded Tour Information, Tour Diary
• Press: Reviews, Press Releases, Media Contact Info, Secure Media Section (thanks Jaxon)
• Extras: Photos, Lyrics, Videos, Goodies
• Message Board (hosted)
• Store ( would probably go with 3rd party hosted solution)
• Contact: Management Contact Form, Fan Contact Form

I’m not going to bother with a site map or findability testing for this project. It’s just not that complicated and doesn’t warrant that level of effort.

As well, I’m going to dispense with the traditional pre-design wireframes and roll that up into the design process. You’ll see what I mean when I get to talking about mockups.

Visual Feel

Before I get into working with actual mock-ups I want to gather together some materials for the visual design. Some may think this is a bit backwards, but I really wanted to try and create a feel for the band (and for the forthcoming site) before I got into the layout and such.

The first thing I did was sit down with a piece of paper and write down some adjectives that I wanted to associate with the band and the design. The purpose of this is to give me a baseline for thinking about the visual elements and the identity. This is a great brainstorming exercise to use in a group as well.

Here are the adjectives I came up with: Different | Inner Light | Simple | Whimsical | Classic | Timeless | Hip | Active | Real? | Fantasy? | Not Forced | Light and Dark | Hot and Cold | Textured.

Then, keeping this developing “feel” in mind as well as the feel of all the other sites I looked at while doing my competitive analysis, I tried to focus on things that would help differentiate this site from the rest.

I flipped through magazines, browsed Web sites, looked through photos and noted other things around me that seemed to fit into this “feel” I was holding in my mind.

(Magazines are especially good for this as you can tear out elements you like and get your creative juices flowing. One thing I like to do is try to construct a page mock-up with only elements torn from magazines. But that is for another post!)

It’s hard to describe in words what I came up with, but I now have a visual feel for the design in my head that is both young and old, light and dark and fun and serious. It’s almost a personality.

At this point I began to gather my own materials that reflected this personality or “feel” for use later on. I got onto iStockphoto and downloaded quite a few photos, I took a few of my own and now I’ve got some material to work with.

Type

Next I wanted to come up with a type treatment for the Beauideal “logo” as well type for the Web site.

I began with the logo treatment. I started by creating a document in Illustrator and trying out various fonts and treatments. I got this idea from Doug Bowman and it seems to be a good place to start.

I also try to take notice of typography around me. I look at CD covers, magazines, books and much more trying to find something that will fit. Sometimes this works, sometimes it doesn’t. In this case it did.

I found a look that fit my needs here on a book cover. Les Miserables to be exact. I liked the treatment on the title, it was taken from the identity developed for the musical. It is classic, solid yet somewhat worn.

I’m not sure what the exact font they used was, and it’s not exactly what I was looking for, but going back to my Illustrator document I decided that Adobe Garamond, which is a somewhat similar font that I’m very fond of anyway, would do nicely.

I gave it a treatment very similar to Cameron’s Wicked Worn Look, to create something similar to the Les Mis title, yet a bit different.

Here is what I came up with:

Then I began to think a bit about the type faces I’d use for the Web site itself. I’ll nail this down a bit later when I get into the HTML prototype, but for now I’ve got a general idea.

For the body of the Web content I plan on using Verdana. I’m a big fan and simply find it the most readable font on the Web. Maybe it’s overused, but for body copy it can’t be beat.

When it comes to headings and navigation, I decided I need to do a bit more experimentation, preferably with the actual Web product before I can make a decision. It’s a bit hard to recreated the feel in photoshop and I may try and use images here anyway. But more on that later, when we get into mockups.

Color

Let’s touch on color a bit now. I tried to think of quite a few color schemes that fit into this general feel I was developing. I thought about going mono-tone with a deep blue or deep auburn, but decided that it would be best to go with a series of dark colors (whatever they may be) set off with something light, like a white or cream.

While looking through my materials I came across a photo I took a few weeks back of a cloudy evening sky. Here is a snip:

This photo, when imagined with a strip of bight cream or white moonlight splashed across it, seemed to work well and fit with what I was thinking. I then saw a similar color scheme in an ad in Rolling Stone (it was for the movie The Butterfly Effect) that used red as the contrast. I liked that as well and came up with a few swatches to play with.

Here is a sample of what I’ve got so far:

I also decided I may try to work the photo into the design as well, use those clouds to create a textured feel. But I may change my mind.

Layout and Design

Now that I had some good ideas, some materials, some colors and a general idea of the type treatments I wanted to use it was time to start thinking about the layout of my site.

I’m a really, really big fan of paper prototyping and hand sketching. I probably do much more of this than some other Web designers. It’s just how I like to work. Some like to do mock-ups in Illustrator, Photoshop and even Flash, and I know this can be a fine way to work. Me? I like to start on paper.

I began by sketching out some very rough layouts, just to get my mind working. You can see an example here:

I did about three pages of that, then moved to a few, larger, more detailed sketches, like this:

Once I settled on a few layouts I liked I moved into Photoshop for a bit. Here I like to mock up separate elements and move them around to see how they all fit. I created six very rough Photoshop mockups and sat on them for a day or two, then I whittled them down to a few I liked more than the rest.

With those I began to add some more detail and flesh them out a bit. I plan to narrow these down to one solid design to move forward with. If I was working with a real client I’d probably get pretty far with three designs and show those to the client to get a feel for what they like.

Usually when I do this I’ve got one design in mind that I like the best and I use the others to help sell my chosen favorite. But it really depends on the project and the client. In any case I like to give them choices.

For the purposes of this project, I’m not going to bother to get too far on more than one. I’ll just work until I’ve got one that I like a lot, then take that one and go forward with it.

As of right now, and I’m still working on them, I’ve got two to show y’all:

• Mock #1 (jpg 57k)
• Mock #2 (jpg 66k)

The final will most likely be some combination between, or variation of the two. As you can see by looking at them they have some common elements, but there are still many details to be worked out.

Next Steps: Final Mockup, Final Color, Type and Image Study, and HTML prototypes

We’ve made significant progress on the design, but we have quite a few details to work out. And you know what they say about the details right?

The Devil’s in there!

I also need to begin to build out the HTML prototype, even if we’ve got design details yet to nail down, so that I can get something out there for user testing. Yes, I do plan on doing some for this site, and it should prove very enlightening.

So, any comments or ideas on what we’ve got so far? If you have any questions or something to say about the visual elements, type or design I’ve worked up so far, now’d be the time to pipe up.

Also, I realize these write-ups are getting rather long. There is just so much to say! However, feel free to comment on them as well. Let me know if there is an area I’m not covering or if you’d like to know more about something and I’ll be more than happy to address that in the comments.

See y’all next week!