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:
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!
