rewdy

Prototyping Websites

Posted in: CSS, Prototyping at about 3pm

I have been professionally designing websites for clients for approximately 2 years now. I have a lot of experience yet to gain, but there are a few helpful things I’ve come to learn.

One of them is that when there are pretty colors and images, a lot of clients have a really tough time seeing the structure of their content. Something I have begun trying to do more is using simple, un-”designed” prototypes to help clients think about the content on their site before it gets dressed in prettiness.

In my efforts to do this, I have struggled a fair deal in determining what the most fitting medium for creating these prototypes is. My favorite media are pencil and paper (remember those?). For me, the more technology involved in getting out what’s in my head, usually, the more interference there is as well. It may not be this way for everyone, but for me, I need an immediate and simple process or my thoughts will get lost along the way. I haven’t used pencil and paper, despite this, because usually the final product isn’t nice looking enough to present to a client.

I have tried using Adobe Fireworks and/or Adobe Illustrator to do the prototyping. I’m very familiar with both programs, therefore, using either is pretty simple for me. Fundamentally, though, to me something about using them doesn’t seem right. By nature with either of those programs, there is total freedom. I can place any shape in any size anywhere. This is really handy when you’re illustrating or making complex imagery, but for websites–which are rendered from HTML–they’re actually sort of unfitting tools. HTML has no where near the freedom and flexibility that vector graphics do.

With this divergence in mind, I began considering how I could actually use HTML to create prototypes of pages that would end up in HTML. This is technically VERY simple to do. The only drawback is the amount of time it would take to code the correct CSS and HTML for a given prototyping style.

The obvious solution to speeding up the creation of HTML prototypes is some sort of framework or template that would allow one to quickly create basic pages without having to code everything from scratch.

A while back I played around with Blueprint CSS. I really liked it, but found that it using it limited very much the work I was able to create. I would spend as much time tweaking Blueprint as I would have spend just starting from scratch. So, Blueprint got chucked for me in most of the work I do. For prototyping, though, I think it is potentially a really good solution.

For Blueprint, given a general knowledge of CSS/HTML, there’s about a 5 minute learning curve. After that, it’s pretty dang simple. Writing out the HTML for a header/3-column/footer website would take, probably about 30 seconds.

The results maybe aren’t beautiful, but I think they’re clean and de-cluttered enough to achieve the goal. Further styling could be added if desired, of course.

As with every process like this, others may have their own preferences and ways of working, but I’m finding this works reasonably well for me.

Happy prototyping!