📹 New! Remote User Testing - Get video + voice feedback on designs and prototypes
Read more
Design Process

How To Build Wireframe Presentation Decks for Clients

Posted 5 years ago by Filippo Chiumiento
How To Build Wireframe Presentation Decks for Clients


So much goes into building a website. There is a fairly standard design process which every designer should work through to achieve great results and minimise the risk of failure when starting a new project, including journey maps, site maps, user flows, personas, content, Lo-Fi and Hi-Fi Wireframes, UI audits.

However, it's not just about creating a good set of deliverables. The difficult part is being able to present them in a digestible way for the people on the receiving end. A great delivery not only makes all the difference to your client but also to the overall concept progression, giving a deeper understanding of your vision and how the project works collectively.

This is a short guide explaining how I built a delivery presentation deck to showcase Lo-Fi and Hi-Fi wireframes to clients back when I was working in a design agency.

Choose the simplest tool

There are many different tools for wireframing on the market now, including Marvel's offering, however, in our design process, we decided to create delivery templates using Sketch.

Sketch has a cool feature that lets you export separate pages into a single PDF file, and since it’s all vector-based, the document is always small and looks crisp in any resolution.

Wireframes can easily be imported into prototyping tools using several different file formats, however PDFs are super easy for offline viewing, especially when traveling as they are easy to archive and to keep track of.

In my agency days, we would normally embed the prototype link at the end of the presentation deck, giving our partners the opportunity to develop a deeper understanding of its flow and interactions.

Create a consistent look and feel

“In a good presentation deck, each page feels like part of the same story.”

It’s important to define rules around how to use typography, colors and imagery across the whole presentation.

To make our wireframes for clients look visually consistent, I created an Internal UX Kit, based on a pre-built master kit. This not only allows you to make sure that the output produced by different designers in the team is aligned with your company's identity, but also gives you the possibility to quickly re-use components from a previous project when creating a new deck proposal.

Make it easy to read

Once completed, we'd then transfer the wireframes into the presentation document where we'd annotate the key points and functionality.

We used a great plugin for Sketch called Sketch-Notebook, an extension that lets you pull out key areas of interest, and document your thoughts into a clean side column. You can add and remove comments, easily swap the order around, and even customise the appearance to fit your own brand style. This really helped us speed up our wireframe presentation process, and is probably the key element that made our internal deck so successful. Check out the plugin.

Create a sitemap to show the user journey

User journeys are critical when designing a new website. It gives both clients and the project team a quick feel of how the website will work, what content and functionality are required to meet the user's needs, and what aspects of the website must be put in place to support the journey. It helps estimate the amount of work needed from the dev team and it's great to flag out potential mistakes that occurred during the planning phase.

I suggest you annotate only the key most important interactions for each page, to keep the presentation clean and understandable, it could put off non-design stakeholders reviewing your work. Leave the dirty work to a prototype.

There are tons of new user flow tools coming into the space which automate this process, instantly transforming prototypes into user journeys; giving a birds eye view of all screens and the user flow between them.

VoilĂ !

Make sure your wireframe presentation files are as clean and well-organized as possible. Run a spell check, proofread and confirm that all pages are labeled clearly, in the correct order and have a logical flow before you distribute them to the partners! I’m not english, so this is definitely the most complicated part for me!

Hope you enjoyed this post, now go showcase your clients' wireframes by making the best delivery deck you can!

Further reading:

Prototype with Sketch!

Prototype with Sketch!

Send artboards straight from Sketch into your Marvel projects.

Download Plugin

Product & Brand, Senior Visual Designer @ Marvel | Twitter | Dribbble

Related Posts

Spending the time and energy to properly define how an end-product should look and behave is an absolute must. By dedicating time on this step you can help save time, money, and other resources further down the line; and using wireframes is a great way to do this! Wireframes are seen as the skeleton of a prototype. With a wireframe,… Read More →

Starting a project can be a daunting feat for even the most skilled designer, it’s a time consuming and often difficult task. Having had the ‘light bulb’ moment but knowing what to do with it can be tricky. While creating products is a continuous process, the design process can help you test and validate the effectiveness of an initial idea…. Read More →

Over the last decade, organisations and big business brands feel closer than ever before. You can now get a personal response in minutes from some of the biggest companies in the world by messaging their team on socials. And listening to user feedback isn’t where the company-user interactions end. Today more than 50% of Fortune 500 Companies have made co-creation… Read More →

Categories