The traditional method of designing a website has its roots in print. When you design for anything from a logo to a soda can label, you start out with the basic (sketches), work toward the finessed final design, and show your client developing designs at each stage. Web design has worked in a similar manner for a very long time; the designer starts with colors and typography, then moves into mocking up the full design as a flat image.

This is where responsive steps in. Once upon a time all of the elements of a website sat statically on the page with only one spot where they belonged like jigsaw puzzle pieces. Now, they flow around each other, moving, resizing, repositioning to all fit together like a Tetris game. There are many ways the different sections and pieces of a website can fit on the page, and the best use of space varies depending on what size screen the site is viewed on.

If you want to show all of these different sizes and are planning multiple revision rounds on your design, it means that you’ll need a pretty big budget to fit all those mockups in. One mockup for each breakpoint (where the layout adjusts the most dramatically, like between mobile, tablet, desktop, tv), multiplied by the number of revision rounds, multiplied by the number of pages you’re making custom designs for. So if you have three different breakpoints for mobile, tablet, and desktop, and are making 5 custom landing page for various sections of the website including your homepage, and are going to have 3 rounds of revisions, that’s 3x5x3 = 45 mockups! You can see how this can easily become a lengthy, repetitive, and expensive process.

So how do we overcome this issue?

Website prototyping is a pretty new idea which makes wireframes a lot more understandable and interactive. Traditionally, wireframes and mockups are made linearly, with the mockups waiting until the wireframes are complete. In real life, this often doesn’t mean the end of changes to the UX, because seeing a design implemented on top of the wireframe will often result in comments on not only the design, but the layout as well. By prototyping, the clients will actually get to click around the site and see how things work, and focus on the kinks.

The designer then uses a component style guide to avoid discussion about layout, and instead the focus in on the style of the site overall and individual component designs. A component style guide is, essentially, a cheat sheet for how each thing on the site will look. You have a menu, blocks for teasers and slideshows, special sections for things like services, and styles for images. It’s all laid out in an avant-garde list, so you can see each piece.

The lightweight iteration version of this is to do small chunks of the site at a time so that it’s easier to change and show your client a lot of variations. Instead of creating a full set of mocks, you do one page or section at a time and get that perfect before moving on. The same is true for the design - you create more small design deliverables at the beginning to nail down the right tone for the website before moving into more complex design decisions. This can sometimes be frustrating for clients who just want to see a full mockup, but it can get better results in the end because you decided on important overall trends before working on the nitty gritty details (which you would otherwise have to re-work with each mock, multiplying your work exponentially).

Here is an example of a component style guide we created for our new website design. Do you use these with your clients?

New 4SiteStudios.com Component Style Guide from 4sitestudios