Style Guide To Prototype — Design Iteration In The Browser

Posted: 30 Aug 2012 05:30 AM PDT

When it’s time to create the initial visuals for a design, how do you proceed? Do you sketch? Do you wireframe? Jump right into Photoshop to begin a complete design comp? For the redesign of this site I tried something a little different.

If you’ve been following along with this talk about redesigning this site you know that up to this point I’ve done a lot of prep work. I worked out site and business goals, set some constraints for the design and chose an aesthetic concept. Lastly I worked through the content that would find its way on the site.

Normally around this point in a design I begin sketching out ideas. This time I tried another approach. I made some of the roughest sketches I’ve ever made for a design, so rough that there’s isn’t anything I can show you. Then I took some notes I had made and started pushing them to the web.

Style guide cover for VFS Digital Design

From Style Guide to Prototypes

Unlike other projects I had some strong visual ideas about how I wanted the layout to look prior to any sketching. I had previously worked on a redesign and in seeing the problems with that design had already though through some things about this one.

I also had plenty on documentation for the site. I had files with notes for typographic decisions, grid thoughts and math, and ideas for potential color schemes. I had essentially been building a style guide and decided to turn the .rtf files into .html files.

I grabbed content from part of an older post; one that had blockquotes and lists and other html elements beyond the paragraph. I started building a very basic html/css web page that was little more than a heading and column of text down the middle of the page.

At first this was so I could explore type. It’s one thing to see the name of a typeface and a number for how much leading to use and something entirely different to see how that typeface looks in a browser with a specific font-size and line-height. It was simple enough to change a couple of values in the css and observe. I explored different type decisions on different paragraphs and it helped a lot in making the final decisions.

While I was exploring type I thought why not do the same for the color schemes I’d been considering and the next thing you know I was pushing more things to my now online style guide. I added:

a table of commonly installed serif and sans-serif fonts
a table of numbers from Tim Brown’s modular scale calculator
blocks of colors from color schemes I pulled from Kuler

The page became something of a cross between a style guide and a style tile and I had fun experimenting and exploring.

It’s one thing to see a typeface name and something entirely different to see how that typeface looks in a browser with a specific font-size and line-height.

At the same time I began developing different grid based layouts. I had several web pages with nothing other than boxes built to see how best to develop one grid or another.

Eventually all these live web documents became the initial prototype for how a single blog post should look and behave. I’ll talk more about the specifics of these .rtf and .html documents in the coming weeks.

What’s of note for this post is that there was little in the way of sketches and wireframes. I thought through some things in ordinary .rtf files and when it came time to see how things looked I created .html pages based on my notes. I continued to iterate and improve the initial prototypes until they became the design you see now

The Design in Progress

Since I don’t have much in the way of sketches or wireframes to shares I’ll instead show you what some of the prototypes looked like. I built them as I was zeroing in on how I wanted to develop the typographic grid. At that point it seemed logical to combine the grids with the type and colors from the style guides.

As you can see I’d already put in considerable work by the time I created the pages below. I’ll discuss some of that earlier work in the coming weeks.

Vanseo Design Prototype for a single blog post — Prototype for a single blog post

In the prototype above the logo is larger and aligned to the left. The global navigation includes a link for search. The post title is pulled out of alignment to help draw your eye to it. The meta information on the left includes rss signup and comment info.

The design is recognizable, but clearly differs in some of the details.

Vanseo Design Prototype version 2 for a single blog post — Version 2 prototype for a single blog post

This next iteration already has the smaller logo. The search link has been removed from the global navigation and the links themselves are aligned right. The rss and comment information are no longer present in the sidebar, replaced by what might be sub navigation for a series of posts.

The logo is still left aligned and the post title is still pulled out of alignment with the text. This iteration is a little closer to the final design, but not quite there yet.

Version 3 prototype for a single blog post

This third iteration is almost the live design. The logo is now right aligned with the meta information and the post title is now aligned with the content. Both help create the strong channel of space down the page. Breadcrumbs make their first appearance at the top, which I later decided stole emphasis from the post title.

You might also notice I was experimenting with indents to show new paragraphs before going back to an extra line break. While you can’t see it in the screenshot above, further down in this prototype I experimented with:

Pull quotes — flush right or left in the content and sometimes pulled out of it
Images — floated to the left, the right, and again out of the content
Series sub-navigation — at various points down the left side
Comments — This is where I first started designing how comments would look
Footer — the footer also makes an appearance with 4 equal and distinct sections

I continued to revise and refine these prototype pages for a single blog post until I was ready to begin building one for real. At that point I began developing a WordPress theme. I only had the single post ready, but every page after is really a variation on this design.

Even with just these 3 images I think you can see how the iteration process worked. A tweak here. An addition there. Try this element in a different place and little by little make improvements to the design.

Atari 2600 prototype — Prototype for the Atari 2600

Summary

I shook up my process a bit in redesigning this site. Instead of the usual static sketches, wireframes, and comps, I designed more in the browser. I turned early notes into online style guides and grid layouts, which I could explore and refine. Eventually I combined both to form the early prototype pages for the site.

Iterating over the prototypes, I moved elements around and refined the design, until it eventually became what you see here. It was a different, albeit an interesting, process and one I look forward to trying again.

While I haven’t discussed it here, it also made it possible to see how the design worked responsively and it’s convinced me that with further refinement it could be a very workable process for future projects.

Next week I’ll offer more of the specifics that led to the style guide. I’ll walk you through some of the typographic thoughts and choices I made, which informed the rest of the design.

The post Style Guide To Prototype — Design Iteration In The Browser appeared first on Vanseo Design.