{"id":15700,"date":"2018-07-26T10:44:47","date_gmt":"2018-07-26T09:44:47","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=15700"},"modified":"2020-11-12T12:25:30","modified_gmt":"2020-11-12T12:25:30","slug":"build-wireframe-presentation-decks-for-clients","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/build-wireframe-presentation-decks-for-clients\/","title":{"rendered":"How To Build Wireframe Presentation Decks for Clients"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><script type=\"application\/ld+json\"> {\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"WebPage\",\n  \"headline\": \"\n            How to Build a Wireframe Presentation Deck to Deliver Your UX Designs - Marvel Blog        \",\n  \"about\": [\n    {\"@type\": \"Thing\",\"name\": \"Deliver\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Delivery_(commerce)\"}, \n    {\"@type\": \"Thing\",\"name\": \"UX\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/User_experience\"}, \n    {\"@type\": \"Thing\",\"name\": \"Designs\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Design\"}, \n    {\"@type\": \"Thing\",\"name\": \"deck\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Concrete_slab\"}, \n    {\"@type\": \"Thing\",\"name\": \"Blog\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Blog\"}, \n    {\"@type\": \"Thing\",\"name\": \"UI\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/User_interface\"}, \n    {\"@type\": \"Thing\",\"name\": \"presentation\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Presentation\"}\n  ],\n  \"mentions\": [\n    {\"@type\": \"Thing\",\"name\": \"Lo-Fi\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Lo-fi_music\"}, \n    {\"@type\": \"Organization\",\"name\": \"Hi-Fi\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/High_fidelity\"}, \n    {\"@type\": \"Organization\",\"name\": \"Marvel\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Marvel_Comics\"}, \n    {\"@type\": \"Thing\",\"name\": \"presenting\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Presenting\"}, \n    {\"@type\": \"Thing\",\"name\": \"clients\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Consumer\"}, \n    {\"@type\": \"Thing\",\"name\": \"building\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Construction\"}, \n    {\"@type\": \"Thing\",\"name\": \"website\",\"sameAs\": \"https:\/\/en.wikipedia.org\/wiki\/Website\"}\n  ]\n}\n<\/script><br \/>\nSo 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.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">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.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">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.<\/p>\n<div id='gallery-1' class='gallery galleryid-15700 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/07\/Blogpost03.png'><img loading=\"lazy\" decoding=\"async\" width=\"1150\" height=\"751\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/07\/Blogpost03.png\" class=\"attachment-full size-full\" alt=\"Wireframes with annotations\" aria-describedby=\"gallery-1-15706\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/07\/Blogpost03.png 1150w, https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/07\/Blogpost03-600x392.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/07\/Blogpost03-768x502.png 768w\" sizes=\"auto, (max-width: 1150px) 100vw, 1150px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-1-15706'>\n\t\t\t\tWireframes with annotations to help explain the design and the user flow\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Choose the simplest tool<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">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 <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Sketch<\/strong>.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.sketchapp.com\/\">Sketch<\/a> has a cool feature that lets you export separate pages into a single PDF file, and since it\u2019s all vector-based, the document is always small and looks crisp in any resolution.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">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.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">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.<\/p>\n<div id='gallery-2' class='gallery galleryid-15700 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/07\/Blogpost07.png'><img loading=\"lazy\" decoding=\"async\" width=\"1150\" height=\"751\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/07\/Blogpost07.png\" class=\"attachment-full size-full\" alt=\"Sketch with export artboards as PDF button\" aria-describedby=\"gallery-2-15703\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/07\/Blogpost07.png 1150w, https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/07\/Blogpost07-600x392.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/07\/Blogpost07-768x502.png 768w\" sizes=\"auto, (max-width: 1150px) 100vw, 1150px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-2-15703'>\n\t\t\t\tExporting to PDF from Sketch\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Create a consistent look and feel<\/h2>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\u201cIn a good presentation deck, each page feels like part of the same story.\u201d<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">It\u2019s important to define rules around how to use typography, colors and imagery across the whole presentation.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">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.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Make it easy to read<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Once completed, we'd then transfer the wireframes into the presentation document where we'd annotate the key points and functionality.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">We used a <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/integrations\/sketch\">great plugin for Sketch<\/a> 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. <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marcosvid.al\/sketch-notebook\/index.html\">Check out the plugin<\/a>.<\/p>\n<div id='gallery-3' class='gallery galleryid-15700 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/07\/Blogpost02.png'><img loading=\"lazy\" decoding=\"async\" width=\"1150\" height=\"751\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/07\/Blogpost02.png\" class=\"attachment-full size-full\" alt=\"Sketch Notebook plugin\" aria-describedby=\"gallery-3-15705\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/07\/Blogpost02.png 1150w, https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/07\/Blogpost02-600x392.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/07\/Blogpost02-768x502.png 768w\" sizes=\"auto, (max-width: 1150px) 100vw, 1150px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-3-15705'>\n\t\t\t\tSketch Plugin\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Create a sitemap to show the user journey<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">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.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">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.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">There are tons of new <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/integrations\/userflows\">user flow tools<\/a> 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.<\/p>\n<div id='gallery-4' class='gallery galleryid-15700 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/07\/Blogpost05.png'><img loading=\"lazy\" decoding=\"async\" width=\"1150\" height=\"751\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/07\/Blogpost05.png\" class=\"attachment-full size-full\" alt=\"Wireframe sitemap with user flows\" aria-describedby=\"gallery-4-15702\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/07\/Blogpost05.png 1150w, https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/07\/Blogpost05-600x392.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/07\/Blogpost05-768x502.png 768w\" sizes=\"auto, (max-width: 1150px) 100vw, 1150px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-4-15702'>\n\t\t\t\tA Sitemap showing the user flows between screens\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Voil\u00e0!<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">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\u2019m not english, so this is definitely the most complicated part for me!<\/p>\n<div id='gallery-5' class='gallery galleryid-15700 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/07\/Blogpost04.png'><img loading=\"lazy\" decoding=\"async\" width=\"1150\" height=\"751\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/07\/Blogpost04.png\" class=\"attachment-full size-full\" alt=\"Wireframes with clear and concise annotations\" aria-describedby=\"gallery-5-15701\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/07\/Blogpost04.png 1150w, https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/07\/Blogpost04-600x392.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/07\/Blogpost04-768x502.png 768w\" sizes=\"auto, (max-width: 1150px) 100vw, 1150px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-5-15701'>\n\t\t\t\tThe end wireframe presentation\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Hope you enjoyed this post, now go showcase your clients' wireframes by making the best delivery deck you can!<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Further reading:<\/h3>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/marvelapp.com\/blog\/get-ux-job-stellar-portfolio-presentation\/\" target=\"_blank\" rel=\"noopener noreferrer\">Get Any UX Job With A Stellar Portfolio Presentation<span class=\"A11yNotice-u1v0gg-0 dWDZbM\">(Opens in a new browser tab)<\/span><\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/marvelapp.com\/blog\/ux-deliverables\/\" target=\"_blank\" rel=\"noopener noreferrer\">UX Design Deliverables<span class=\"A11yNotice-u1v0gg-0 dWDZbM\">(Opens in a new browser tab)<\/span><\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/marvelapp.com\/blog\/prototyping-101-ultimate-guide\/\" target=\"_blank\" rel=\"noopener noreferrer\">The Ultimate Guide to Prototyping<span class=\"A11yNotice-u1v0gg-0 dWDZbM\">(Opens in a new browser tab)<\/span><\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/marvelapp.com\/blog\/mixed-reality-user-flows-new-kind-template\/\" target=\"_blank\" rel=\"noopener noreferrer\">Mixed Reality User Flows: A New Kind of Template<span class=\"A11yNotice-u1v0gg-0 dWDZbM\">(Opens in a new browser tab)<\/span><\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>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&#8217;s not just about creating a good set of&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/build-wireframe-presentation-decks-for-clients\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":174,"featured_media":15704,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[500],"tags":[],"class_list":["post-15700","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-process"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"description\" content=\"A short guide explaining how I built a delivery deck for presenting Lo-Fi and Hi-Fi wireframes to clients at my design agency\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marvelapp.com\/blog\/build-wireframe-presentation-decks-for-clients\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Build a Wireframe Presentation Deck to Deliver Your UX Designs\" \/>\n<meta property=\"og:description\" content=\"A short guide explaining how I built a delivery deck for presenting Lo-Fi and Hi-Fi wireframes to clients at my design agency\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/build-wireframe-presentation-decks-for-clients\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2018-07-26T09:44:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-12T12:25:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/07\/Header-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1725\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"3 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/marvelapp.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/build-wireframe-presentation-decks-for-clients\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/07\/Header-1.png\",\"width\":\"1725\",\"height\":\"720\",\"caption\":\"wireframes\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/build-wireframe-presentation-decks-for-clients\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/build-wireframe-presentation-decks-for-clients\/\",\"name\":\"How to Build a Wireframe Presentation Deck to Deliver Your UX Designs\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/build-wireframe-presentation-decks-for-clients\/#primaryimage\"},\"datePublished\":\"2018-07-26T09:44:47+00:00\",\"dateModified\":\"2020-11-12T12:25:30+00:00\",\"description\":\"A short guide explaining how I built a delivery deck for presenting Lo-Fi and Hi-Fi wireframes to clients at my design agency\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/build-wireframe-presentation-decks-for-clients\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/build-wireframe-presentation-decks-for-clients\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/build-wireframe-presentation-decks-for-clients\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/f8089aa3ad8967979463bf485fc0e60f\"},\"headline\":\"How To Build Wireframe Presentation Decks for Clients\",\"datePublished\":\"2018-07-26T09:44:47+00:00\",\"dateModified\":\"2020-11-12T12:25:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/build-wireframe-presentation-decks-for-clients\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/build-wireframe-presentation-decks-for-clients\/#primaryimage\"},\"articleSection\":\"Design Process\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/build-wireframe-presentation-decks-for-clients\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/f8089aa3ad8967979463bf485fc0e60f\",\"name\":\"Filippo Chiumiento\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e5fe0a10db4ec9d40ca9b5d17746819d04a18d2134a01865b7bb63fd8f86c00e?s=96&d=mm&r=g\",\"caption\":\"Filippo Chiumiento\"},\"description\":\"Product &amp; Brand, Senior Visual Designer @ Marvel | Twitter | Dribbble\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/15700","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/users\/174"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=15700"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/15700\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/15704"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=15700"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=15700"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=15700"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}