build a better website: strung up on a wire(frame)

Intro: The “Build a Better Website” series  is a glimpse into my (almost) real-time attempt to build a better website in just 30 days. I anticipate it’s gonna get messy and it’s not gonna be perfect, but that’s OK. Because you’re not perfect either but I don’t hold that against you. In all fairness, this project is more like 35 or 40 days, but I like catchy and clichéd, and  I like 30 days. And really, it’s my blog. So deal with it.

week 1.2: I know week two was supposed to be about the discovery process– and I promise, we’ll get there. But as I’ve said before, the build a better web project  is happening in real-time and the its ending has not yet been determined. Therefore, the order can get kind of messy and unpredictable and snags are prone to happen along the way. This is one of those moments, and I need your help.

you speak, i see

As a designer, it’s my job to listen to your needs, see the immediate problem and  the fifteen others you never anticipated and come up with an on-screen solution that avoid all these disasters. Perhaps this definition blurs the line with  you usability experts or scholarly information architects, but websites aren’t all about graphics and grids.  Form should  follow function less the emperor has no clothes. Before diving into pixels and color palettes, it’s important to nail down what the page actually does before deciding how it should look. In a good web workflow, the discovery phase precedes the wireframe, and as I promised before, we will rewind and pay it the respect it’s due.  But this project is rapidly falling into the red zone we slip farther and farther behind, and we (or more, me) now find ourselves hung up on the wireframes.

what is a wireframe?

Wireframes can best be thought of as an English paper outline or an artist’s major’s random sketches–they are a tool for exploration and concept development and sweeping changes are expected and encouraged.  I love wireframes because they are wonderfully straightforward, amazingly sensible and devoid of nerdy web-speak. After hours of discovery and painstaking documentation, this is your visual articulation of just how a client’s vision functions on-screen.

calling your baby ugly

But what if you present a wireframe and it’s scrapped all for a gut instinct or personal preference? Were you not listening close enough? Are you holding too tightly? Today I had a  second wireframe review meeting. T he content display was wrong. The header needed to go away. Grouping by topic was a secondary, not primary IA feature. I listened as model client spoke. I was objective. I asked probing questions. I (unemotionally) kicked my baby to the curb.

But for the first time ever, I could not immediately visualize a solution to the objections being raised. I love a challenge, but for one who paints her whole world in pictures. pulling only a blank canvas is not something that often happens. Am  I losing my edge?

Below are the original wireframes. View these are fluid sketches–the navigation can change, the boxes can be rearranged, text can be rewritten. Altogether, there are 8 pages. These were done in a 24 hour moment of inspired creativity–a visceral from-the-gut layout that spawned from hours of late-night research and  meticulously rushed user testing (there’s an oxymoron for you oxymoronic people). Is it perfect? Absolutely not. But was it reflective of the parameters given? I thought so.



Now, I realize there’s redundancy on the homepage. And the horizontal scroller is nothing more than a cool “feature” (form over function,  form over function…). But the suggestion to kill the entire top half and make a homepage with without a rotator and only three columns (blogs, podcast, and articles) of equal content weight leaves me somewhat baffled. Where is the eye supposed to land if there is no predominent visual? And gee whiz, that’s a whole lot of text. Who reads the web anymore? But in fairness I have to mock it up. And not intentionally make it look ugly.

We did white board sketches in the middle of the meeting just to make sure model client was really saying what I thought she was saying. Unfortunately, we were on the same page. For once, everyone in the room was silent– no one offered a rebuttal.  Was I wrong?

I (politely) argued my point of at least having an image focal point, of having a header image, and as much as it might pain model client, the need to prioritize content mediums (while all could still easily remain above the (blasted) fold). But my opinion was viewed as biased–my expertise tainted by the blood, sweat, and tears I poured into version number 1. Perhaps I am being elitist. Perhaps my baby really is ugly. But with a deadline looming and time slipping away, tonight I sit uninspired. And for the first time ever, I have no vision.

How do I make a website with no visual header or auto-rotator and three equal columns displaying the 3 newest blogs, podcasts, and articles? What’s left to go below except for maybe a horizontal twitter feed and a bunch of ignored promo ads? Any help would be much appreciated.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: