{"id":721,"date":"2024-05-16T14:21:24","date_gmt":"2024-05-16T18:21:24","guid":{"rendered":"https:\/\/sites.bu.edu\/marcom-team\/?page_id=721"},"modified":"2026-02-12T15:13:20","modified_gmt":"2026-02-12T20:13:20","slug":"wireframing-mockups","status":"publish","type":"page","link":"https:\/\/sites.bu.edu\/marcom-team\/departments\/interactive-design\/role-specific-info\/designers\/wireframing-mockups\/","title":{"rendered":"Presentation, Wireframe, Mockup &amp; Styleboard Kits"},"content":{"rendered":"<h2><a href=\"https:\/\/docs.google.com\/presentation\/d\/1DRy9A-N-Uwr5XeUu9P3r-oPM9Q03hyF_PeE9NgfS3gM\/edit?slide=id.g30c2c3736c6_0_744#slide=id.g30c2c3736c6_0_744\"><img loading=\"lazy\" src=\"\/marcom-team\/files\/2025\/06\/Screenshot-2025-06-05-at-5.30.17\u202fPM.png\" alt=\"\" width=\"1333\" height=\"841\" class=\"alignnone size-full wp-image-3559\" srcset=\"https:\/\/sites.bu.edu\/marcom-team\/files\/2025\/06\/Screenshot-2025-06-05-at-5.30.17\u202fPM.png 1333w, https:\/\/sites.bu.edu\/marcom-team\/files\/2025\/06\/Screenshot-2025-06-05-at-5.30.17\u202fPM-636x401.png 636w, https:\/\/sites.bu.edu\/marcom-team\/files\/2025\/06\/Screenshot-2025-06-05-at-5.30.17\u202fPM-1024x646.png 1024w, https:\/\/sites.bu.edu\/marcom-team\/files\/2025\/06\/Screenshot-2025-06-05-at-5.30.17\u202fPM-768x485.png 768w\" sizes=\"(max-width: 1333px) 100vw, 1333px\" \/><\/a><\/h2>\n<h2>Presentations<\/h2>\n<p>As part of our effort to keep presentations clear and consistent with teams and clients, we&#8217;ve developed the ID Presentation Slide Kit\u2014a library of templates and content components to help you build polished, on-brand decks with ease.<\/p>\n<p><a href=\"https:\/\/docs.google.com\/presentation\/d\/1DRy9A-N-Uwr5XeUu9P3r-oPM9Q03hyF_PeE9NgfS3gM\/edit#slide=id.g2d67348fbeb_0_0\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button button-secondary\">ID Presentation Deck<\/a><\/p>\n<div class=\" bu-callout aligncenter\"><\/p>\n<h4>What to Annotate (for Clients)<\/h4>\n<p>Annotations should define, with brevity:<\/p>\n<ul>\n<li><span style=\"text-decoration: underline;\">what<\/span> a section or component is,<\/li>\n<li>the <span style=\"text-decoration: underline;\">purpose<\/span> it serves to the end user, and\u2026<\/li>\n<li>its <span style=\"text-decoration: underline;\">value<\/span> to the client and the strategy.<\/li>\n<\/ul>\n<p>Makes for a great bookmark reference while presenting.<\/p>\n<p><\/div>\n<div class=\"bu_collapsible_container \" aria-live=\"polite\" data-customize-animation=\"false\"><h4 class=\"bu_collapsible\" aria-expanded=\"false\"tabindex=\"0\" role=\"button\">What to Annotate (for Devs)<\/h4><div class=\"bu_collapsible_section\" style=\"display: none;\"><\/p>\n<p>Including as much of these details in a GitHub issue for your project&#8217;s customized component [as time allows] helps to streamline development:<\/p>\n<ol>\n<li><span style=\"text-decoration: underline;\">Where<\/span> will the component exist on <span style=\"text-decoration: underline;\">what<\/span> page template(s)?<\/li>\n<li><span style=\"font-weight: 400;\">What&#8217;s the <span style=\"text-decoration: underline;\">name<\/span> of a component&#8217;s section?<\/span><img loading=\"lazy\" src=\"\/marcom-team\/files\/2024\/08\/feildName3-636x442.png\" alt=\"\" width=\"636\" height=\"442\" class=\"alignnone size-medium wp-image-2491\" srcset=\"https:\/\/sites.bu.edu\/marcom-team\/files\/2024\/08\/feildName3-636x442.png 636w, https:\/\/sites.bu.edu\/marcom-team\/files\/2024\/08\/feildName3-150x104.png 150w, https:\/\/sites.bu.edu\/marcom-team\/files\/2024\/08\/feildName3-768x534.png 768w, https:\/\/sites.bu.edu\/marcom-team\/files\/2024\/08\/feildName3-1024x712.png 1024w, https:\/\/sites.bu.edu\/marcom-team\/files\/2024\/08\/feildName3.png 1372w, https:\/\/sites.bu.edu\/marcom-team\/files\/2024\/08\/feildName3-387x270.png 387w, https:\/\/sites.bu.edu\/marcom-team\/files\/2024\/08\/feildName3-718x500.png 718w, https:\/\/sites.bu.edu\/marcom-team\/files\/2024\/08\/feildName3-499x348.png 499w, https:\/\/sites.bu.edu\/marcom-team\/files\/2024\/08\/feildName3-593x413.png 593w, https:\/\/sites.bu.edu\/marcom-team\/files\/2024\/08\/feildName3-896x624.png 896w, https:\/\/sites.bu.edu\/marcom-team\/files\/2024\/08\/feildName3-969x675.png 969w, https:\/\/sites.bu.edu\/marcom-team\/files\/2024\/08\/feildName3-801x558.png 801w, https:\/\/sites.bu.edu\/marcom-team\/files\/2024\/08\/feildName3-1212x844.png 1212w, https:\/\/sites.bu.edu\/marcom-team\/files\/2024\/08\/feildName3-600x417.png 600w, https:\/\/sites.bu.edu\/marcom-team\/files\/2024\/08\/feildName3-496x345.png 496w, https:\/\/sites.bu.edu\/marcom-team\/files\/2024\/08\/feildName3-750x522.png 750w, https:\/\/sites.bu.edu\/marcom-team\/files\/2024\/08\/feildName3-999x696.png 999w, https:\/\/sites.bu.edu\/marcom-team\/files\/2024\/08\/feildName3-1186x826.png 1186w, https:\/\/sites.bu.edu\/marcom-team\/files\/2024\/08\/feildName3-992x690.png 992w, https:\/\/sites.bu.edu\/marcom-team\/files\/2024\/08\/feildName3-1200x835.png 1200w, https:\/\/sites.bu.edu\/marcom-team\/files\/2024\/08\/feildName3-550x382.png 550w, https:\/\/sites.bu.edu\/marcom-team\/files\/2024\/08\/feildName3-710x494.png 710w, https:\/\/sites.bu.edu\/marcom-team\/files\/2024\/08\/feildName3-400x278.png 400w, https:\/\/sites.bu.edu\/marcom-team\/files\/2024\/08\/feildName3-300x208.png 300w\" sizes=\"(max-width: 636px) 100vw, 636px\" \/><\/li>\n<li><span style=\"font-weight: 400;\">What are the &#8216;<span style=\"text-decoration: underline;\">states<\/span>&#8216; of the component or its sections? <\/span><span style=\"font-weight: 400;\">Are there names to these &#8216;states&#8217;?<\/span>\n<ul>\n<li><span style=\"font-weight: 400;\">What interface feedback must happen or conditions must be met to <span style=\"text-decoration: underline;\">cause<\/span> these component states [i.e., <strong>if<\/strong> all the data is <em>not<\/em> filled out, <strong>else<\/strong>\u2026]?<\/span><\/li>\n<li>Is there an order the component section&#8217;s &#8216;state&#8217; should display in?<\/li>\n<\/ul>\n<\/li>\n<li>What <a href=\"https:\/\/github.com\/CMB2\/CMB2\/wiki\/Field-Types\">input field<\/a> types are required in the WordPress Admin for certain elements?\n<ul>\n<li><span style=\"font-weight: 400;\">What should applicable <a href=\"https:\/\/github.com\/CMB2\/CMB2\/wiki\/Field-Types\">input fields<\/a> be named?<\/span><\/li>\n<li>If there&#8217;s a drop-down, what are the options?<\/li>\n<li>Are the fields repeatable, or in a repeatable group\u2014and to what range [min to max]?<\/li>\n<li>If a field requires a drop-down selector, what are the options?<br \/>\n<img loading=\"lazy\" src=\"\/marcom-team\/files\/2024\/08\/labelValue2-636x332.png\" alt=\"\" width=\"636\" height=\"332\" class=\"alignnone size-medium wp-image-2492\" srcset=\"https:\/\/sites.bu.edu\/marcom-team\/files\/2024\/08\/labelValue2-636x332.png 636w, https:\/\/sites.bu.edu\/marcom-team\/files\/2024\/08\/labelValue2-150x78.png 150w, https:\/\/sites.bu.edu\/marcom-team\/files\/2024\/08\/labelValue2-768x401.png 768w, https:\/\/sites.bu.edu\/marcom-team\/files\/2024\/08\/labelValue2.png 816w, https:\/\/sites.bu.edu\/marcom-team\/files\/2024\/08\/labelValue2-515x270.png 515w, https:\/\/sites.bu.edu\/marcom-team\/files\/2024\/08\/labelValue2-500x261.png 500w, https:\/\/sites.bu.edu\/marcom-team\/files\/2024\/08\/labelValue2-789x413.png 789w, https:\/\/sites.bu.edu\/marcom-team\/files\/2024\/08\/labelValue2-600x313.png 600w, https:\/\/sites.bu.edu\/marcom-team\/files\/2024\/08\/labelValue2-495x259.png 495w, https:\/\/sites.bu.edu\/marcom-team\/files\/2024\/08\/labelValue2-750x392.png 750w, https:\/\/sites.bu.edu\/marcom-team\/files\/2024\/08\/labelValue2-550x287.png 550w, https:\/\/sites.bu.edu\/marcom-team\/files\/2024\/08\/labelValue2-710x371.png 710w, https:\/\/sites.bu.edu\/marcom-team\/files\/2024\/08\/labelValue2-400x209.png 400w, https:\/\/sites.bu.edu\/marcom-team\/files\/2024\/08\/labelValue2-300x156.png 300w\" sizes=\"(max-width: 636px) 100vw, 636px\" \/><\/li>\n<\/ul>\n<\/li>\n<li>Are there CSS class names or HTML attributes of the field&#8217;s [front-end output] desired?<\/li>\n<\/ol>\n<p>Until we have fully transitioned to block development, our developers are currently developing with CMB2.<\/p>\n<p>Writing any of the above is the <em>baseline<\/em>, a marked up screengrab is <em>awesome<\/em>, a duplicate of the mockup or flow with comments is <em>prime<\/em>. Any of these articulated in a Dev Sprint Zoom or in-person meeting is <em>golden<\/em>.<\/p>\n<p><div class=\" bu-callout aligncenter\"><\/p>\n<h2>We&#8217;re moving to Figma!<\/h2>\n<p>We&#8217;re transitioning from Adobe XD to Figma to take advantage of Figma&#8217;s advanced collaboration features and industry-leading design capabilities.<\/p>\n<p><a href=\"https:\/\/docs.google.com\/presentation\/d\/11RxB2zRUhOy9GEHnLgg4w_qzyqlRz08YU440tbrAfkI\/edit#slide=id.g2c215b749ed_3_62\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button-secondary\">ID Figma Presentation<\/a><a href=\"https:\/\/www.figma.com\/proto\/ssSQsUzyFyCs89xskNEq81\/Styleboard-Starter?page-id=175:847&amp;node-id=175-870&amp;p=f&amp;viewport=-480,1287,0.5&amp;t=rulCtfXKXwwPs0XY-1&amp;scaling=contain&amp;content-scaling=fixed\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button-secondary\"><\/a><\/p>\n<p>We&#8217;re planning to have our license set to &#8220;Do Not Train&#8221; for AI.<\/p>\n<p><a href=\"https:\/\/www.figma.com\/ai\/our-approach\/#data-privacy-and-security\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button-secondary\">Figma Policy on AI<\/a><\/p>\n<h4>Notable Plugins<\/h4>\n<ul>\n<li><a href=\"https:\/\/www.figma.com\/community\/plugin\/1224384489638070064\/uxpilot-ai-color-gradient-ai\" target=\"_blank\" rel=\"noopener noreferrer\">UXPilot.ai<\/a> for color palette generation.<\/li>\n<li><a href=\"https:\/\/www.figma.com\/community\/plugin\/951884648789524000\/utopia-fluid-type-space-calculator\" target=\"_blank\" rel=\"noopener noreferrer\">Utopia<\/a> for font-resizing CSS Variables.<\/li>\n<\/ul>\n<h4>Learn Figma<\/h4>\n<p>Check out these resources provided by Rima Antulyte!<\/p>\n<ul>\n<li><a href=\"https:\/\/www.youtube.com\/@DesignWithArash\" target=\"_blank\" rel=\"noopener noreferrer\">Design With Arash<\/a> for relevant updates.<\/li>\n<li><a href=\"https:\/\/youtu.be\/OtOXEKKScg4?si=TFpbRjH9Ab8G-F0L\">1-Hour Crash Course<\/a> if familiar with XD &amp; Sketch.<\/li>\n<li><a href=\"https:\/\/www.youtube.com\/@FluxAcademy\/videos\">Flux Academy<\/a> for tips &amp; tricks.<\/li>\n<li><a href=\"https:\/\/www.youtube.com\/@TimGabe\/search?query=Figma\">Figma Tutorials<\/a> from Tim Gabe.<\/li>\n<li><a href=\"https:\/\/www.youtube.com\/playlist?list=PLXDU_eVOJTx6zk5MDarIs0asNoZqlRG23\">Explore Design Features in Figma<\/a><\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.youtube.com\/@Figma\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button-secondary\">Figma YouTube Tutorials<\/a><\/p>\n<p><\/div><\/p>\n<p><\/div>\n<\/div>\n\n<hr \/>\n<h2>Wireframing<\/h2>\n<p><strong>Wireframing is where we translate strategy with our capabilities to demo a <span style=\"text-decoration: underline;\">structural<\/span> <span style=\"text-decoration: underline;\">blueprint<\/span> of a vital page and how it functionally connects to others within the sitemap or user experience [flow].<\/strong><\/p>\n<p>Before presenting, always emphasize that all written copy is only placeholder text intended to demo layout and not final content. <em>&#8220;Think of it like a blueprint. No aesthetics yet. What aspects will go where \u2014 not how they&#8217;ll look.&#8221;<\/em> What pages from a sitemap are wired for a user flow should be determined by a project&#8217;s Associate or Assistant Creative Director and Lead Designer. These wireframes can serve as a jumping off point to duplicate and begin mocking up a site.<\/p>\n<p><a href=\"https:\/\/www.figma.com\/files\/team\/1392855525475346880\/project\/282032847\/ID-Wireframe-Kit?fuid=1084667592807865180\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button button-secondary\">Kit Figma Files<\/a><\/p>\n<p><a href=\"https:\/\/bostonu.zoom.us\/rec\/share\/xP527TKWhmXa7K-o-JXu_x_tuLoKkwuKngG3J-LXhAPiJCzgdK9GRKg_ABjzSqSh.OsNAhoUmnrQMXeoJ?from=hub\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button button-secondary\">Kit Presentation<\/a><\/p>\n<p><strong>Passcode:<\/strong> qV%gvy75<\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2>Styleboards<\/h2>\n<p data-start=\"95\" data-end=\"327\" class=\"\">Our Figma styleboard kits are designed to bring baseline consistency to our styleboard presentations\u2014while still allowing space for individual visual flair and\/or client needs.<\/p>\n<h4 data-start=\"329\" data-end=\"348\"><strong data-start=\"329\" data-end=\"346\">Key Features:<\/strong><\/h4>\n<ul data-start=\"349\" data-end=\"617\">\n<li data-start=\"349\" data-end=\"383\" class=\"\">\n<p data-start=\"351\" data-end=\"383\" class=\"\"><strong data-start=\"351\" data-end=\"366\">Title Slide<\/strong> \u2013 Strong intro<\/p>\n<\/li>\n<li data-start=\"384\" data-end=\"427\" class=\"\">\n<p data-start=\"386\" data-end=\"427\" class=\"\"><strong data-start=\"386\" data-end=\"407\">Table of Contents<\/strong> \u2013 Easy navigation<\/p>\n<\/li>\n<li data-start=\"428\" data-end=\"478\" class=\"\">\n<p data-start=\"430\" data-end=\"478\" class=\"\"><strong data-start=\"430\" data-end=\"451\">Persistent Footer<\/strong> \u2013 Quick link back to TOC<\/p>\n<\/li>\n<li data-start=\"479\" data-end=\"523\" class=\"\">\n<p data-start=\"481\" data-end=\"523\" class=\"\"><strong data-start=\"481\" data-end=\"495\">Tone Slide<\/strong> \u2013 Sets mood and direction<\/p>\n<\/li>\n<li data-start=\"524\" data-end=\"617\" class=\"\">\n<p data-start=\"526\" data-end=\"617\" class=\"\"><strong data-start=\"526\" data-end=\"557\">Color Swatch Recommendation<\/strong> \u2013 Placed <em data-start=\"567\" data-end=\"574\">after<\/em> the full board to show colors in context<\/p>\n<\/li>\n<\/ul>\n<p data-start=\"619\" data-end=\"685\" class=\"\">This structure helps clients focus on design first, colors second, etc.<\/p>\n<p data-start=\"619\" data-end=\"685\"><a href=\"https:\/\/www.figma.com\/files\/project\/267296172\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button button-secondary\">Styleboard Kit<\/a><\/p>\n<p data-start=\"619\" data-end=\"685\"><a href=\"https:\/\/bostonu.zoom.us\/rec\/share\/nBguZMDmiFrR_0y-7shmyJLwrXRWNTqzqkyTaz4YXUul4rPpbfWwswIT5FHXx_tr.CAzoGszhzmnm7A99?from=hub\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button button-secondary\">Styleboard Kit Presentation<\/a><\/p>\n<p data-start=\"619\" data-end=\"685\"><strong>Passcode:<\/strong> jPrHb23+<em>\u00a0 (\u2026Be mindful that the presentation recording started a bit late into the actual showcase and only lasts until about 5 minutes in to the recording.)<\/em><\/p>\n<p data-start=\"687\" data-end=\"724\" class=\"\">Questions? Reach out to our <code>#figma<\/code> slack channel.<\/p>\n<h2>Mockups<\/h2>\n<p><strong>Mockups are the combination of the project&#8217;s approved styleboard aesthetics meeting the wireframe&#8217;s structural blueprint, illustrating how these elements integrate into the overall user experience. <\/strong><\/p>\n<p>Before presenting, always emphasize that all written copy is only placeholder text intended to demo layout and not final content. <em>&#8220;Bringing in the paint, furnishings, and decor.&#8221; <\/em>What pages from a sitemap are wired for a user flow should be determined by a project&#8217;s Associate or Assistant Creative Director and Lead Designer.<\/p>\n<p><span style=\"text-decoration: underline;\">Most mockup files begin life after an approved Wireframe file has been duplicated and renamed entirely in a project space (on ID&#8217;s Figma team workspace). Alternatively, within a wireframe Figma file as duplicated pages, although this may not be a good fit.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Presentations As part of our effort to keep presentations clear and consistent with teams and clients, we&#8217;ve developed the ID Presentation Slide Kit\u2014a library of templates and content components to help you build polished, on-brand decks with ease. ID Presentation Deck Wireframing Wireframing is where we translate strategy with our capabilities to demo a structural [&hellip;]<\/p>\n","protected":false},"author":12906,"featured_media":0,"parent":228,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/pages\/721"}],"collection":[{"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/users\/12906"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/comments?post=721"}],"version-history":[{"count":47,"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/pages\/721\/revisions"}],"predecessor-version":[{"id":4265,"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/pages\/721\/revisions\/4265"}],"up":[{"embeddable":true,"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/pages\/228"}],"wp:attachment":[{"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/media?parent=721"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}