How To Build Wireframe Presentation Decks for Clients

Posted 2 months 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

Why all the products on the market look the same? Have you ever been searching for a product that could solve your needs but could not choose one because all somehow look the same? Or it becomes harder for you to choose between 2 services because they offer the same features? The only thing that differentiates them is their design, but… Read More →

This week’s post is a compilation of what our motion designer at Marvel, Jonathan, found inspiring this month in design. New BBC 2 Idents Following the rise in subscription TV services, from the likes of Netflix and Amazon Prime, there’s been an ongoing battle between broadcasters and media companies to convey a more memorable expression of a brands identity. One… Read More →

If you look at companies like Dropbox, Google, and Twitter you’ll notice that they each have their own unique aesthetic. Across all their products, both mobile and web, there is a sense of consistency and uniformity in their design.The way that companies and products achieve consistency is through styleguides. A styleguide is a set of standards that aligns designs with… Read More →