We love it when a client is enthusiastic about being an active part of their website project. Client participation is critical for every website we create.
Infantree’s most successful web projects rely on frequent communication and collaboration with the client as it’s important for both parties to have a shared understanding of goals, responsibilities, and outcomes throughout the project.
Since sharing design deliverables is a frequent and critical part of how we communicate with clients, we’ve spent time improving the design tools we incorporate into our process.
We’ve used a few different tools to create and present website designs. Here’s a summary of how each work and how they fit into our current design process.
The Website Mockup
A mockup, or comp, is probably the most straightforward way to design a website. It’s been used since web design came into existence and is what most clients expect to receive.
Mockups are documents showing a fully-designed page of a website, often using images and content that are close to final. They are created using design software such as PhotoShop, Sketch, Figma, or any of the growing number of interface design programs.
Using a mockup to present a design quickly gives the client a thorough, complete idea of what their new site will look like. It might not be interactive, but it sure looks like it could be. The design can be displayed inside a computer, tablet, or mobile device to show how the site will look when viewed on a few different devices.
The complete nature of a mockup is also one of its biggest downfalls. Mockups are rarely able to accurately represent what the site will look like when it is complete.
@StephenHay captures the feeling well:
Photoshop is the most effective way to show your clients what their website will never look like.
Clients expect their websites to look exactly like the mockups—and why wouldn’t they? It’s what we showed them, so it should look that way on the web.
The reality is there are too many variables at play to confidently promise what a website will look like, and mockups can set the wrong expectations. Due to the nature of responsive design, browser compatibility, and many other factors, it’s impossible for someone to develop a “pixel-perfect” match of a mockup on every screen. It can be a disservice to show mockups even if they client will respond positively.
Maybe your mockups aren’t the same size as the client’s devices, and the sizing or spacing of items look different.
Or, the client opened a PDF of the mockup, approved it without realizing the zoom level was set at 75%, and when the website was complete, demanded it be reduced to the smaller size they saw and approved. (This happened!)
Long story short, clients will take mockups literally—very literally—and that can cause big problems for an agency.
Our take on mockups
We found that many benefits of mockups were often out weighed by how time consuming it is to create them and by the amount of misunderstandings and confusion they can cause. We prefer not to use mockups as the primary method for creating and presenting website designs.
Introducing the Element Collage
Our experience using mockups left us curious about approaches other designers were using to design websites. We came across new techniques that felt like a long-awaited rebuttal to the rigidity of mockups.
Dan Mall shared a new piece of his process—inspired by Samantha Warren’s Style Tiles—he uses to capture bursts of design ideas. It allowed him to “present clients with interface choices without making the investment in multiple Photoshop mockups.” Dan calls it an element collage.
A full comp often requires ideas to be fully realized. An element collage allows me to document a thought at any state of realization and move on to the next.Dan Mall
In web development, a small piece of content that is used to build a page is referred to as an element. A design document that shows what several pieces of content could look like is an element collage. This is similar to how pieces of code are built, making for an easier transition into development.
The process for creating an element collage might start with designing only a few pieces of the site. This is usually enough to share with a client, have a conversation, and get feedback. Next, revisions are made and additional pieces are added to the element collage. This continues for a few rounds until there is a solid direction for the site’s design and the client feels comfortable moving to the next step: development.
The biggest change we noticed when we started using element collages was that we spent our time differently. Less time was spent designing and more time was spent discussing. Element collages aren’t intended to cover the design of every page and all pieces of content. They cover just enough to have a discussion about how design affects the entire site.
There was a lot of feedback and several rounds of revisions, but we spent less time in design software before nailing down the design direction. And less time spent designing means moving to development faster.
Developing a site from an element collage presents its own challenges. Translating the element collage to a developed website means designing parts of the site in the browser. Element collages are not all-encompassing design documents, so it is critical that the designer and developer frequently communicate.
The element collage is successful because it’s focused more on the feel of the site design and less on specific headlines or photographs. They also look less like a complete website than a mockup does. This keeps expectations in check. Presenting a mockup is kind of like asking, “Do you approve this?” while presenting an element collage asks, “Does this feel right? Can we keep going?”
We recognize that the shift to an element collage can make it harder for the client to understand what they’re looking at. Most clients haven’t seen an element collage before, but after guiding them through how we work they are more prepared to give good feedback that keeps the project moving.
Our take on element collages
We found them to be very helpful in establishing a solid foundation for a site’s design, but when we took sites into development the element collage often didn’t cover enough ground. Parts of the site that weren’t included in the element collage followed the general feel, but sometimes didn’t get that extra level of detail that could have made the page or section stand out.
Best of both worlds
Mockups and element collages are vastly different ways to design a website—each with their own ups and downs. Our web team uses a workflow that is beneficial to ourselves and our clients.
There is no one right way to design a site, but there are a few guidelines that consistently work well for Infantree’s web team.
Design starts with conversations
We often start with an exercise that allows them to share how they want their brand to look and feel. We use snapshots of existing designs to ask questions about what they like, what they dislike, and why. This helps set some boundaries for the web team to work within.
When we share site designs it is always paired with an in-person meeting or a phone call with screen-sharing. It seems to be the best way for us to communicate our reasons for the designs, listen to the client’s feedback, and discuss next steps.
Sharing a design in a way that cuts out a conversation leaves room for confusion.
Use development to uncover design challenges
We try to start development after design direction is established but well before all design is complete. This helps identify gaps the element collage didn’t cover.
We can use wireframes and an element collage to develop a good portion of a site’s pages without the need for additional mockups, but we often run into pages, sections, or other pieces of a site that need more layout and design exploration.
In this process, design doesn’t end when development starts. They overlap quite a bit and help each other progress.
Use the best tool for the task at hand
There are a variety of design tools we can use to help us figure out what something will look like, and the tool we use depends on the task at hand.
While mockups or element collages alone would not be our choice, each now play an important role in our workflow.
Element collages are great for figuring out design direction, exploring variations of an idea, and designing smaller parts of a site design.
Mockups are useful for thinking about how the design of an entire page will fit together. We often use them to design a few critical pages or templates to make sure the design direction works at a larger scale. They are also useful for designing unique and one-off pages that break from the rest of the site.
For times when interaction or animation is a key part of the problem, we make live code examples. In general, we will make what needs to be made in order to get the client on board with the design.
Why this is good for us (and our clients)
A rigid design process has never worked well for our team, our clients, or the outcome of a project.
Every project is different—with its own set of stakeholders, goals, challenges, priorities, and customers. Having a flexible path towards a well-designed site allows our web team to choose the tool that is best for the situation at hand.
Clients benefit from this approach because they become involved in a process they haven’t been part of before, gain a better understanding of what it takes to design and build a website, and become invested in the outcome of their site.
Our best website designs aren’t the result of flexing design skills in the hopes of impressing a client. They come from asking questions, having conversations, and solving design challenges together.