Why I Send My Clients Scamps Before Sending the Final Piece

Scamps — not to be confused with scampi — are incredibly useful design tools that help with prototyping, communication and collaboration. Never heard of a scamp? Well, you should have, but that’s okay, we forgive you.

A scamp is a creative concept or sketch that presents the idea of a project or product as simply and efficiently as possible. Unlike prototypes, there are no typefaces, no permanent specifications or dimensions, photography or stock-quality images or premium copy. Instead, a scamp often just has placeholders or visual representations, meant to further the general idea.

Usually, a scamp is used internally to convey ideas and organize collaboration between larger design teams. However, it can be used to share early concepts with the client to request feedback or support at an early stage. It works particularly well with finicky clients who shower you and your team with oversight.

I highly recommend implementing scamps in your processes, but before I get into why, I’ll offer this cautionary advice. They are only meant for outlining, planning and visualization. A scamp should never act as a working prototype of a design. In fact, there’s no point in wasting resources to generate interactive or working elements. Use it only as a visual design tool, sort of like flashcards adapted for web and graphic designers.

What’s Their Purpose?

I always send my clients a mockup or scamp before getting down to the real work. Why? Because it gives them the opportunity to provide commentary on the layout and visual frames I’ve compiled. For example, they can specify the placement of a featured image slider in relation to other on-page elements. With all of that in mind, here are three prime examples of how to use scamps to facilitate improved communication with clients and move projects along more efficiently.

1. This eCommerce “Wireframe” from Jacobo Spina

Sometimes, a wireframe is much more functional than what a scamp is, so keep that in mind. Still, you can’t ignore the visual setup of a wireframe or mockup like the one we’re going to talk about next.

Jacopo Spina created and showcased his mobile-friendly eCommerce website prototype on Behance. It uses blue as a solid background and employs white to highlight the various elements and icons. You’ll notice that the symbols themselves represent the real thing. This provides a realistic portrayal of how the end design will look without requiring too much visual preparation.

Just enough time and thought were put into this wireframe to create something unique but not so much that changing various elements or scrapping the design will waste extensive amounts of time and resources.

2. A Fashion Magazine-Style Prototype

Modern design trends call for grid layouts and grid-based themes. This is not always conducive to scamps or sketching because a quick mockup doesn’t always offer the best example of clean lines and minimal design aesthetics. To clarify, scamps use a lot of empty or negative space as-is because the idea is to create a simple layout, not a working prototype.

Tat’s where the use of flat or colored scamps can come into play. Take a look at this fashion and magazine style grid prototype from UI designer Mahmoud Khaled Deiab. Deiab presents it via a tutorial, which is perfect for aspiring designers and artists. Pay attention to the initial mockup which is a greyscale wireframe. Even though the colors are bland, you can understand the spacing of the elements and the negative space in the design.

Sketching something like this through a quick, five-minute scamp would be a great way to present minimal design components and layouts. Some of the additional details are not necessary but serve as a nice touch. You can see this wireframe was meant for the client to see.

This Coastal Capital sketch from Mike Rohde is a more accurate representation of what the scamp version of said wireframe would resemble.

3. Mark Pollard’s Account Planning Group Website Mockup

Finally, we have this incredibly detailed and informative design scamp from Mark Pollard of Digital Strategy. It isn’t beautiful or polished, but it’s not supposed to be. Notice how the squares are warped and uneven. The text is crooked and scribbled with speed favoring beauty. You can also see the remnants of edited or erased content that he revised as he worked out the design.

Ultimately, though, you get a clear sense and visual representation of what the final product is going to look like and how it will flow regarding user experience. This highlights that it’s more about coming up with an “idea” or concept as opposed to a finished, perfected and interactive prototype. You don’t even need to be adept at sketching or even traditional art to come up with a good scamp.

Remember — It’s a Visual Tool, Not a Working Model

Before putting together your sketch, wireframe, scamp, mockup or whatever you want to call it, just remember that it’s nothing more than a visual representation. You do not need to perfect or optimize the layout, elements, components and content. In fact, you should spend as little time working on these items as possible. Instead, focus all your energy on setting it up the way you have imagined it.

Even if you’re not going to show team members or clients the scamp, it’ll help you communicate — even if it’s just to yourself — what you’re planning.