How To Build Wireframe Presentation Decks for Clients

Posted 2 weeks ago by Filippo Chiumiento

So much goes into building a website. There are several phases 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 deck for presenting Lo-Fi and Hi-Fi wireframes to clients back when I was working in a design agency.

Choose the simplest tool

There are many tools for wireframing on the market now, like Marvel, however, previously 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 placed into prototyping tools, 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, 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 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 we completed the wireframes, we’d transfer them over to 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 process, and is probably the key element that made our internal deck so successful. Check out the plugin.

Create a sitemap

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.

New tools are coming into the space which are automating this process, instantly transforming prototypes into user journeys. Like this one.

Voilà!

Make sure your 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 and make the best delivery deck you can!

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

If you’ve been following us a little these last few months, you probably noticed we’ve launched a series of small applications built on top of our Platform API. Including: BotBot: Automate Marvel tasks in Slack by using slash commands, such as creating and adding people to projects or pulling up a searchable list. Marvel for Keynote: A Mac app which… Read More →

I’m Matt, the founder of Lucid, the tool that makes it super easy for you to manage and share design systems. As a UX designer I love digital products and have always wanted to create something of my own, but because I’m not a developer I’ve never had the skills to actually build software and make it happen. It’s been… Read More →

Christmas 2017, I made a bold decision to part ways with my nonsense about not having enough time to pursue my interest in programming. I had previously dabbled in different development languages, without really committing to any kind of progression or journey. That joyous sense of personal fulfilment upon learning a new skill was subsequently absent from most of my… Read More →