Wireframe Case Study (quick sketches to HTML)

This summer I designed and built a simple site for an established illustrator. She had lost all of the files to her previous site, and needed something up-and-running in a day or two.

Short on time? Wireframing helps!

Throw out bad ideas.

ruth1

I was able to quickly sketch out some ideas and send them to her. This first sketch idea (done in about 30 seconds) helped me realize I was on the wrong track (see my notes in the margins).

Explain your reasons, ask important questions.

ruth2

This second sketch idea was fleshed out quickly (5 minutes or so). My notes give the client a basic idea of layout, my thoughts behind the layout/approach, and ask a couple of questions.

Start building.

ruth3

Once the client gave me the go ahead, I sketched out some dimensions to use while building the site… I added numbers and measurements as I built it. (And somewhere along the way, I spilled something on it too…)

The final site was up and running in a couple of hours.

ruth_homepage

Even a quick job takes time. Wireframes help avoid confusion.

Of course there was more to this project. I researched web fonts for her h1, then sent her a handful of fonts too approve… I wanted to make sure she didn’t hate any of them before I tried them. After she gave her approval (she nixed one of them), I tried the fonts in context, tested my final choice cross browser, color corrected some images, and ended up slightly modifying the layout from my initial sketches.

But most importantly, I was able to get a basic idea to the client very quickly. When I spent the time building the site, I knew we were on the same page… and if there were any changes after the site was done, they’d be minor.