Skip to main content

Our New Responsive Design Deliverable: The Style Prototype

08-06-12 Jeremy Loyd

Style Prototypes can potentially save a lot of hours — and sometimes headache — in the design process. Jeremy walks through the new tool developing in the Sparkbox office.

With web design changing as fast as ever, the Sparkbox team can’t stop looking for new ways to refine our process to meet the growing challenges. One of the greatest challenges we all face in this era of responsive web design is achieving a balance between efficient workflow and effective client deliverables. It was with this in mind that the Style Prototype was born.

In a nutshell, the goal of a Style Prototype is to allow a client to get a visual summary of a site’s proposed design direction without the time investment of creating multiple pages of Photoshop comps or fully developing HTML pages. A style prototype is a single HTML page which outlines site colors, typography, photographic style, button styles, rollovers, and other necessary elements to establish design direction. In a sense, it is a safety measure intended to avoid rehashing (or completely scrapping) site designs in which hours of time and budget have been invested. 

A basic example:

Sparkbox Style Prototype

Style Prototype Repo on Github

Samantha Warren introduced us to the great idea of presenting designed web elements to clients before creating full site comps. She refers to her Photoshop-based creations as Style Tiles, and they contain most of the same elements that a Style Prototype typically would. However, a Style Prototype takes things one step further into the medium of the web. Rather than present the client a JPG of your Photoshop document, show them a responsive HTML/CSS Style Prototype instead.

Why Use a Style Prototype?

A Style Prototype is handy because it presents a client with proposed site design elements and mood in a browser. It will look and behave very similarly to the eventual production site. This is helpful for several reasons:

First, there are always design differences between an original Photoshop comp and its later translation to code. Since the client won’t be looking at a Photoshop file, but instead viewing the designed elements in their own browser, Style Prototypes give clients proper expectations and eliminate some of the late unwanted “surprises” that can come with comp-to-code transition late in a project.

Second, web typography can be shown accurately. This is one of my personal favorite benefits of a Style Prototype. We use Typekit often, and since ahem Adobe hasn’t yet integrated Typekit fonts into Photoshop, I’ve found myself frequently explaining to clients the transition that will occur between fonts I’ve used in Photoshop and the final fonts which they’ll see in the browser. A Style Prototype can eliminate this confusion.

Third, some parts of web design just can’t be communicated in static comps. That’s no surprise to geeks like us, but don’t underestimate the impact this has on clients. For example, behaviors such as hover states and transitions are far more clear when seen in the browser.

Fourth, a more efficient design process. In general, the earlier a client is able to see real design direction and give iterative approval, the further along you are in gaining final design approval. Given that a Style Prototype is fairly quick and easy to build (and only a relatively few number of elements need be included), we can save valuable time getting a deliverable such as this out the door early.

In responsive design, a Style Prototype can also show how objects will respond at different browser widths. This can be especially helpful for sites that contain complex elements which need special attention as screen real estate changes. At the very least, it can help a client begin to visualize how their future site will respond.

Elements To Include

There’s really no perfect set of design elements to include in a style prototype. However, here are some basic elements to get you started:

  • branded header (with logo)

  • headline(s)

  • subhead(s)

  • paragraph style

  • button style (with hovers, transitions, etc)

  • text link treatment

I also like to include iconography, illustration, photo style, and any graphic patterns or textures. Navigation and UI elements for e-commerce or social networking may also be appropriate.

A Challenge

One of the biggest challenges with Style Prototypes? Sometimes you may not feel entirely confident about a design element until you see it in the overall context of the design. Personally, my design technique is heavily based on exploration. Therefore, when delivering a Style Prototype, I’d advise framing it with the client as a preliminary snapshot meant only to communicate general design direction, and make sure they understand some changes will occur. 

Also, a tip — Style Prototypes work best for projects with already-thought-out brands. They aren’t necessarily intended to be used as mood boards in a branding process.

When To Use Style Prototypes

In my most recent article on our blog, where I discussed multiple versus single design deliverables for clients, I outlined our overall design process (including Style Prototypes). Feel free to check out that article for more detailed info; however, in general, we would typically try to create a Style Prototype when site planning is still in the works.

With minimal time investment, Style Prototypes can potentially save a lot of hours—and sometimes headache—in the design process. They can speed up site production, and they give a client an exciting early look at design elements. Give them a try, and we’d love to hear your feedback on their usefulness!

Related Content

User-Centered Thinking: 7 Things to Consider and a Free Guide

Want the benefits of UX but not sure where to start? Grab our guide to evaluate your needs, earn buy-in, and get hiring tips.

More Details

See Everything In

Want to talk about how we can work together?

Katie can help

A portrait of Vice President of Business Development, Katie Jennings.

Katie Jennings

Vice President of Business Development