Designing The Band: Chapter Four

HTML Prototyping

Instead of producing a final mockup and visual studies alongside a rough HTML template I decided to combine these with the hope of saving myself some time this last week and at the same time making it easier for me down the road.

This is actually pretty typical. I’m a big fan of HTML prototyping anyway and I usually do pretty well starting with a basic base in HTML and adding detail as I go. That’s what I ended up doing with Asterisk, and I think it came out pretty well.

Anyway, since the last post I’ve made some pretty significant progress. Still, there is a long way to go.

Beginning With Markup

I started with a pretty basic template that I thought would fit my needs. I keep many of my projects and I like to use them as a basis to start from when possible. Some projects are better started from scratch, but in this case I went with an old template for my XHTML base.

The doctype is XHTML 1.0 Strict and before I made any tweaks it validated just fine — it has since broken, I’m sure, but rest assured I’ll fix it.

So, I took this template and edited it to fit my needs. I added the header, most of the content I’d prepared for the homepage (an about blurb, some news) and placed in the navigation.

Navigation Details

At this point it was un-styled with the exception of the header. I decided to try Didier’s Navigation Matrix as it seemed to suit my needs for the navigation. I was still undecided about how I wanted it to look, so I edited the code and busted out a quick, bland, graphic matrix (kind of a glorified placeholder) and took to getting it working.

It was actually pretty straightforward. I had a few hang-ups and had to edit it pretty extensively, but after an hour or so I got it working. I wanted to use this project to test out a few new techniques if possible and this was one of them.

If you’re wondering — I like it.

Content With Style

I then set to styling the content. I had a pretty good idea of what I wanted to do here, having thought about it a bit. It was important to have the content in place before I got to the CSS for it, even in that content was rough.

I’m a strong believer that designing to your content whenever possible is the best way to go. All to often designers are stuck having to design without a clue what the content will end up being.

I realize this is usually out of the designer’s hand. It’s one of the biggest challenges Web designers (and all sorts of other Web professionals) face.

A Few Details

Once I’d gotten the basic style of the content in there and the navigation matrix all working I began to “refresh” my visual elements in Photoshop.

I updated the header a bit, adding some more aged effects and cleaning it up. I then went about designing a visual look and feel for the navigation. This was the hardest part of the last week.

I tried quite a few treatments before I found one I felt worked. Many of you liked the cut out corners of my first mockup, but to tell the truth I didn’t really, and to add to my dislike they ended up causing some unique challenges.

Nothing I tried seemed to fit. The navigation just looked lost. I almost tried something completely different, but then I finally did get something to work. Even so — it’s not perfect. More on that in a bit.

I added a few details to the content areas using both graphics and more CSS, I added a container background and a marque graphic.

There are still quite a few details to work out, but my goal was to have a working prototype to show some folks (and y’all) as well as to show some progress toward the final design.

You can view my progress so far right here. I’ve not looked at this in IE or on a Windows machine. There could very well be display issues and if so I’ll address those shortly.

Designer’s Preference

As I mentioned I struggled with the look generated by the mast with the cut out corners. I never really liked them and frankly I liked the second mock up better. The main issue was getting the rest of the page, navigation and content, to fall “in line” with that mast and not look…well, “off.”

Maybe it’s just me, but it looks a bit funny when set into the context of the whole page. But you know, it might just be a personal preference. You can’t please everyone all the time and as a designer sometimes you need to go against you’re preference.

Anyway, having said all that, I decided to indulge myself and make an alternate version. This one is a bit more “straight edge” and I prefer it quite a bit.

What I intend to do is show these around and see what others think. If the majority like the first, I’ll continue with that, but if not, I’ll go with the one I like. In a “real world” project I would go with whatever the client liked best as the differences don’t effect end functionality at all.

Next Steps: Real Live User Testing, Design Details and QA

I plan on showing these designs around to folks this week. I even have an informal “cafe user test” planned. I’m going to hit a local bar and see if I can’t get some feedback on the design from some music fans. This, I’m sure, will be interesting.

I’m going to take all that feedback — and yours as well, so be sure to comment, — and refine the design. I hope my work this week will have put me far enough ahead that I’m in a good spot.

I’m also going to clean up my code, run it past the validator and make sure it’s all clean. There are still quite a few functional details to be worked out in the code as well — although this will never be a fully functional site — and I’ll be putting those in this next week as well.

See you next time!