{"id":228,"date":"2024-02-29T16:30:56","date_gmt":"2024-02-29T21:30:56","guid":{"rendered":"https:\/\/sites.bu.edu\/marcom-team\/?page_id=228"},"modified":"2026-02-12T14:55:45","modified_gmt":"2026-02-12T19:55:45","slug":"designers","status":"publish","type":"page","link":"https:\/\/sites.bu.edu\/marcom-team\/departments\/interactive-design\/role-specific-info\/designers\/","title":{"rendered":"Info for ID Designers"},"content":{"rendered":"<div class=\" bu-callout aligncenter\"><\/p>\n<h3>Remember<\/h3>\n<ul>\n<li data-stringify-indent=\"0\" data-stringify-border=\"0\"><a href=\"https:\/\/www.bu.edu\/tech\/services\/infrastructure\/server-infrastructure\/\">The servers that WordPress and other University apps exist on are managed by IS&amp;T<\/a>. If you experience any 504&#8217;s, extreme lag with basic WP processes: please consult @bu-ist in the #webteam Slack channel.<\/li>\n<li data-stringify-indent=\"0\" data-stringify-border=\"0\">Due to file sizes and available technology, our sandbox dev environments are slower to load pages and update code changes when exchanging information with test plugins or frameworks developed by IS&amp;T than any staging or public site on production. Sometimes this can lead to odd refresh rates as long as 45 minutes for some instances like BU Calendar.<\/li>\n<li data-stringify-indent=\"0\" data-stringify-border=\"0\">It&#8217;s worth noting that we have <a href=\"https:\/\/github.com\/bu-ist\/id-components\/tree\/main\/src\/utils\">some fun JavaScript frameworks<\/a> and other assets [i.e., favicon] available in <a href=\"https:\/\/github.com\/bu-ist\/id-components\">our id-components GitHub repository<\/a>, for very rare needs.<\/li>\n<\/ul>\n<p><\/div>\n<h2>Online Branding Considerations<\/h2>\n<p>The use of Boston University&#8217;s logotype and brand master plate logo comes with specific contextual guidelines when used in the header and footer space of a website.<\/p>\n<p><a href=\"https:\/\/sites.bu.edu\/marcom-team\/departments\/interactive-design\/role-specific-info\/designers\/branding\/\" class=\"button-secondary\">Learn the Guidelines<\/a><\/p>\n<h2><b>Webteam &amp; Presenting<\/b><\/h2>\n<p>We present to our clients using Webteam. Learn how to set it up, along with some additional help for presenting.<\/p>\n<p><a href=\"https:\/\/sites.bu.edu\/marcom-team\/departments\/interactive-design\/designers\/webteam-for-presentations\/\" class=\"button-secondary\">Let&#8217;s Start<\/a><\/p>\n<h2 class=\"page-title\">Presentation, Wireframe, Mockup &amp; Styleboard Kits<\/h2>\n<p>We have our own Figma components for drafting wireframe and styleboard files to share with clients. Annotating also helps relay important details to team members and clients. Understand our best practices for working with these kits and principles.<\/p>\n<p><a href=\"https:\/\/sites.bu.edu\/marcom-team\/departments\/interactive-design\/role-specific-info\/designers\/wireframing-mockups\/\" class=\"button-secondary\">Wireframe\/Mockup Kits<\/a><\/p>\n<h2>Creative Review Needed<\/h2>\n<p>The Creative Review Form aligns creative work with project goals and client expectations, streamlines team communication, and reduces revisions. Use it when your work is ready.<\/p>\n<p><a href=\"https:\/\/sites.bu.edu\/marcom-team\/departments\/interactive-design\/role-specific-info\/designers\/creative-review-form\/\" class=\"button-secondary\">About the Form<\/a><\/p>\n<p><a href=\"https:\/\/app.smartsheet.com\/b\/form\/cac33c9ed9094b7b84461953e11dac24\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button-secondary\">Ready for Review?<\/a><\/p>\n<div class=\" bu-callout aligncenter\"><\/p>\n<h2><b>Webfonts, Fonts &amp; Icons<\/b><\/h2>\n<p>Find where our fonts are located, what are some acceptable webfont sources, and icon specifics \u2014 as well as how to inquire for new font licenses.<\/p>\n<p><a href=\"https:\/\/sites.bu.edu\/marcom-team\/departments\/interactive-design\/role-specific-info\/designers\/webfonts-fonts-icons\/\" class=\"button-secondary\">Learn More<\/a><\/p>\n<h2><b>Photography<\/b><\/h2>\n<p>Photo resources are available in this section.<\/p>\n<p><a href=\"https:\/\/sites.bu.edu\/marcom-team\/departments\/interactive-design\/designers\/photography-for-designers\/\" class=\"button-secondary\">Photography Help<\/a><\/p>\n<p><\/div>\n<hr \/>\n<h2>Smaller Projects<\/h2>\n<h3><b>Custom Editorial Projects<\/b><\/h3>\n<p>If <a href=\"https:\/\/www.bu.edu\/today\/\" target=\"_blank\" rel=\"noopener noreferrer\">BU Today<\/a> (or a similar publication) has the budget to do a specialized feature story or series of stories related to a topic \u2014 we help design the experience.<\/p>\n<p><a href=\"https:\/\/sites.bu.edu\/marcom-team\/departments\/interactive-design\/offerings-dev-overview\/i-d-services-projects\/custom-editorial-projects\/\" class=\"button-secondary\">Custom Editorial Process<\/a><\/p>\n<h3>Email Broadcast &amp; Template Design<\/h3>\n<p>Communications are paramount to Terriers of all backgrounds across the BU universe and beyond. Learn about the process here.<\/p>\n<p><a href=\"https:\/\/sites.bu.edu\/marcom-team\/departments\/interactive-design\/role-specific-info\/designers\/email-production\/\" class=\"button-secondary\">Presidential or Department Emails Process<\/a><\/p>\n<h3>BU Org Chart Updating<\/h3>\n<p>The organization of Boston University&#8217;s leadership is a vital beacon among key stakeholders and our external communications.<\/p>\n<p>While typically handled by Creative Director Jon Brousseau and our <span>Digital Communications Designer<\/span> Damien Garcia, there may be occasions where Designers may be resourced to make an update.<\/p>\n<p><a href=\"https:\/\/sites.bu.edu\/marcom-team\/departments\/interactive-design\/role-specific-info\/designers\/university-orgchart-updates\/\" class=\"button-secondary\">Learn the Org Chart Updating Process<\/a><\/p>\n<h3>Bulletin<\/h3>\n<p>Interactive Design&#8217;s own Marisa Pond helps manage content for <a href=\"https:\/\/www.bu.edu\/academics\/bulletin\/\">Boston University&#8217;s Bulletin<\/a> of all courses offered by the University. <span style=\"text-decoration: underline;\">Do not edit this documentation<\/span> without informing and gaining approval from Marisa Pond.<\/p>\n<p><a href=\"https:\/\/www.bu.edu\/academics\/wp-admin\/post.php?post=86136&amp;action=edit\" class=\"button-secondary\" target=\"_blank\" rel=\"noopener noreferrer\">Bulletin Documentation<\/a><\/p>\n<h3>Email GIFs, or Other Production Work<\/h3>\n<p>In time for special occasions and holidays around the University, Marketing or ID Designers may be resourced to source and\/or produce email designs and optimized web graphics for specialized email announcements.<\/p>\n<p>&nbsp;<\/p>\n<div class=\"bu_collapsible_container \" aria-live=\"polite\" data-customize-animation=\"false\"><h3 class=\"bu_collapsible\" aria-expanded=\"false\"tabindex=\"0\" role=\"button\">Additional Links for Designers<\/h3><div class=\"bu_collapsible_section\" style=\"display: none;\"><\/p>\n<p><a href=\"https:\/\/sites.bu.edu\/marcom-team\/onboarding\/quick-links\/\" class=\"button-secondary\">Creative Services Links<\/a><\/p>\n<h4>General<\/h4>\n<ul>\n<li><a href=\"https:\/\/fountn.design\/\">Fountn<\/a> Design &amp; Coding Resource Directory<\/li>\n<li><a href=\"https:\/\/lawsofux.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Laws of UX<\/a> for UI<\/li>\n<li><a href=\"https:\/\/s3.amazonaws.com\/arena-attachments\/2584673\/e36028a1643a616ec4be1e8d0e859fbb.pdf?1534885560\" target=\"_blank\" rel=\"noopener noreferrer\">The Elements of Typographic Style<\/a><\/li>\n<li><a href=\"https:\/\/coolors.co\/contrast-checker\/\" target=\"_blank\" rel=\"noopener noreferrer\">Cooolers Color Contrast Checker<\/a><\/li>\n<li>What&#8217;s a <a href=\"https:\/\/wordpress.stackexchange.com\/questions\/691\/the-difference-between-hierarchical-and-non-hierarchical-taxonomies\" target=\"_blank\" rel=\"noopener noreferrer\">Taxonomy<\/a>?<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"https:\/\/sites.bu.edu\/marcom-team\/departments\/editorial-services\/roles-responsibilities\/general-role-and-responsibilities-outlined\/proofreaders-marks\/\">Proofreaders&#8217; Marks<\/a><\/li>\n<\/ul>\n<p><strong>Figma<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=TyaGpGDFczw\">Auto-Layout<\/a><\/li>\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=c3S5MR_LEYM\">Auto-Layout Wrapping<\/a><\/li>\n<\/ul>\n<h4><strong>Optimization\/QA<\/strong><\/h4>\n<ul>\n<li aria-level=\"1\"><a href=\"https:\/\/id-demos.cms-devl.bu.edu\/core-3\/\">Our Site for QA&#8217;ing Development<\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"http:\/\/imageoptim.com\/\"><span style=\"font-weight: 400;\">Image Optim<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"http:\/\/www.whatsmybrowser.org\/\"><span style=\"font-weight: 400;\">What\u2019s My Browser<\/span><\/a><span style=\"font-weight: 400;\">: Send to clients; receive a URL containing their browser data.<\/span><\/li>\n<li><a href=\"https:\/\/www.browserstack.com\/\"><span style=\"font-weight: 400;\">BrowserStack<\/span><\/a><span style=\"font-weight: 400;\"> (For cross-browser testing.)<\/span><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/bem-101\/\" target=\"_blank\" rel=\"noopener noreferrer\">BEM Classname Framework Methodology<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\">MDN CSS Reference<\/a> (Great resource for CMD + F)<\/li>\n<li><a href=\"https:\/\/caniuse.com\/\">Can I Use\u2026?<\/a> Browser Support Reference.<\/li>\n<li><a href=\"https:\/\/docs.google.com\/spreadsheets\/d\/1yJtxKBVLtuOBFT93hmThK__f2r5-T-141Gnw4JXYR7w\/edit?usp=sharing\"><span style=\"font-weight: 400;\"><strong>WordPress Critical Sites List<\/strong><\/span><\/a><strong> \u2013 for WordPress upgrades and for testing major changes to the environment<\/strong><\/li>\n<\/ul>\n<h4><strong>Coding<\/strong><\/h4>\n<ul>\n<li><a href=\"https:\/\/id-share.timspears.io\/demos\/css-variables\" target=\"_blank\" rel=\"noopener\">Tim Spears&#8217; CSS Variables Masterclass<\/a><\/li>\n<li><a href=\"https:\/\/id-share.timspears.io\/demos\/motion-101\" target=\"_blank\" rel=\"noopener\">Tim Spears&#8217; Motion Masterclass<\/a><\/li>\n<li><a href=\"https:\/\/animate.style\/\">Animate.style<\/a> Library of standard animation presets.<\/li>\n<li aria-level=\"1\"><a href=\"https:\/\/www.joshwcomeau.com\/css\/interactive-guide-to-grid\/\" target=\"_blank\" rel=\"noopener noreferrer\">Interactive Guide to CSS Grid<\/a><\/li>\n<li><a href=\"https:\/\/screenspan.net\/fallback\" target=\"_blank\" rel=\"noopener noreferrer\">Fallback Font Generator<\/a><\/li>\n<li><a href=\"https:\/\/defensivecss.dev\/\" target=\"_blank\" rel=\"noopener noreferrer\">Defensive CSS<\/a><\/li>\n<li><a href=\"https:\/\/rtlstyling.com\/posts\/rtl-styling\" target=\"_blank\" rel=\"noopener noreferrer\">Logical Properties: <\/a><a href=\"https:\/\/rtlstyling.com\/posts\/rtl-styling\" target=\"_blank\" rel=\"noopener noreferrer\">RTL Styling 101<\/a><a href=\"https:\/\/rtlstyling.com\/posts\/rtl-styling\" target=\"_blank\" rel=\"noopener noreferrer\"><\/a><\/li>\n<li><a href=\"https:\/\/12daysofweb.dev\/2024\/calc-size-and-interpolate-size\/\">calc-size() and interpolate size from Kevin Powell<\/a><\/li>\n<li><a href=\"https:\/\/ishadeed.com\/article\/css-aspect-ratio\">Use Aspect Ratio (Instead of fixed <code>height<\/code>&#8216;s<\/a>)<\/li>\n<li><a href=\"https:\/\/www.bram.us\/2024\/02\/14\/scroll-driven-animations-you-want-overflow-clip-not-overflow-hidden\/\" target=\"_blank\" rel=\"noopener noreferrer\">Overflow: clip; for scroll based animations.<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/useful-nth-child-recipies\/\">Useful :nth-child Recipes<\/a><\/li>\n<li><a href=\"https:\/\/javascript-for-web-designers.abookapart.com\/\">JavaScript for Web Designers [A Book Apart]<\/a><\/li>\n<li><a href=\"http:\/\/lab.abhinayrathore.com\/jquery-standards\/\"><span style=\"font-weight: 400;\">jQuery Coding Standards<\/span><\/a>, then again: <a href=\"https:\/\/youmightnotneedjquery.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">you might not need jQuery<\/a><\/li>\n<li><a href=\"https:\/\/gsap.com\/cheatsheet\/\" target=\"_blank\" rel=\"noopener noreferrer\">GSAP 3 Cheat Sheet<\/a><\/li>\n<\/ul>\n<h4>Generators<\/h4>\n<ul>\n<li><a href=\"https:\/\/color.adobe.com\/create\/color-wheel\" target=\"_blank\" rel=\"noopener noreferrer\">Adobe Color Palette Generator<\/a><\/li>\n<li><a href=\"https:\/\/utopia.fyi\/\" target=\"_blank\" rel=\"noopener noreferrer\">Utopia: Fluid Responsive Design Generator<\/a> (For viewport-based font and spacing resizing w\/ CSS variables. Suggested root unit of 4px.)<\/li>\n<li><a href=\"https:\/\/www.svgviewer.dev\/svg-to-data-uri\">SVG to Data URI<\/a> for &#8220;embedding&#8221; SVG graphics as a <code>url(\"\u2026\");<\/code>&#8216;s<\/li>\n<li><a href=\"https:\/\/glass3d.dev\/\" target=\"_blank\" rel=\"noopener\">Glassmorphism Generator<\/a><\/li>\n<li><a href=\"https:\/\/www.easings.net\/\" target=\"_blank\" rel=\"noopener\">Easings.net<\/a> or <a href=\"https:\/\/easingwizard.com\/\" target=\"_blank\" rel=\"noopener\">EasingWizard<\/a><\/li>\n<li><a href=\"https:\/\/whirl.netlify.app\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS Loading Animations<\/a><\/li>\n<li><a href=\"https:\/\/patternpad.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">PatternPad<\/a> for patterns\/backgrounds.<\/li>\n<li><a href=\"https:\/\/www.buttons.cool\/\">Buttons.cool<\/a> for button styles.<\/li>\n<li><a href=\"https:\/\/uifaces.co\/\">UI Faces<\/a> for profile pictures.<\/li>\n<li><a href=\"https:\/\/app.shotsnapp.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">ShotsnApp<\/a> for mockup placement.<\/li>\n<li><a href=\"https:\/\/scroll-driven-animations.style\/\" target=\"_blank\" rel=\"noopener noreferrer\">Scroll-Driven Animations<\/a> for prime demos adaptable for scrolly-telling.<\/li>\n<li><a href=\"https:\/\/ratiobuddy.com\/\">Ratiobuddy<\/a> for determining appropriate aspect ratios.<\/li>\n<li><a href=\"https:\/\/cssgradient.io\/\">CSS Gradients<\/a><\/li>\n<li><a href=\"https:\/\/cssgenerator.org\/text-shadow-css-generator.html\" target=\"_blank\" rel=\"noopener noreferrer\">Text Shadow Generator<\/a><\/li>\n<\/ul>\n<h4><strong>GitHub<\/strong><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"https:\/\/github.com\/bu-ist\/responsive-framework\/wiki\/Getting-Started\"><span style=\"font-weight: 400;\">Getting Started with Responsive Framework<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"https:\/\/github.com\/bu-ist\/responsive-framework\/wiki\/Starting-a-New-Project\"><span style=\"font-weight: 400;\">Starting a New Project<\/span><\/a><a href=\"https:\/\/github.com\/bu-ist\/responsive-framework\/wiki\/SASS-Documentation\"><span style=\"font-weight: 400;\"><\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"https:\/\/github.com\/bu-ist\/r-research-feature-article-starter\/\"><span style=\"font-weight: 400;\">Feature Article Starter<\/span><\/a><\/li>\n<li aria-level=\"1\"><a href=\"https:\/\/github.com\/bu-ist\/responsive-child-starter\/wiki\/Git-Branch-Management-using-Git-Flow\" target=\"_blank\" rel=\"noopener noreferrer\">Branch Management in Gitflow<\/a><\/li>\n<\/ul>\n<h4><strong>More Technical &amp; Software<\/strong><\/h4>\n<ul>\n<li><a href=\"https:\/\/drive.google.com\/file\/d\/1-JdcOYjGKm5331t3MZAtuo0JOxCZKWDm\/view?usp=sharing\"><span style=\"font-weight: 400;\">mdrnTV\u2019s Visual Assets<\/span><\/a><span style=\"font-weight: 400;\"> (Must have a bu.edu user name &amp; password.)<\/span><\/li>\n<li><a href=\"https:\/\/youtube.com\/playlist?list=PL0vfts4VzfNiI1BsIK5u7LpPaIDKMJIDN&amp;si=ztXMvV5Z5B5x8CnJ\" target=\"_blank\" rel=\"noopener noreferrer\">100 Seconds of Code Playlist<\/a><\/li>\n<li><a href=\"https:\/\/lisilinhart.info\/posts\/css-variables-performance\">CSS Custom Property Performance<\/a><\/li>\n<li><a href=\"https:\/\/www.joshwcomeau.com\/animation\/css-transitions\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS Transitions &amp; Animations<\/a><\/li>\n<\/ul>\n<p><\/div>\n<\/div>\n\n<p>&nbsp;<\/p>\n<hr \/>\n<h1>Next:<br \/>\n<a href=\"https:\/\/sites.bu.edu\/marcom-team\/departments\/interactive-design\/designers-developers\/\">Designers &amp; Developers<\/a><\/h1>\n","protected":false},"excerpt":{"rendered":"<p>Online Branding Considerations The use of Boston University&#8217;s logotype and brand master plate logo comes with specific contextual guidelines when used in the header and footer space of a website. Learn the Guidelines Webteam &amp; Presenting We present to our clients using Webteam. Learn how to set it up, along with some additional help for [&hellip;]<\/p>\n","protected":false},"author":12906,"featured_media":0,"parent":784,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/pages\/228"}],"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=228"}],"version-history":[{"count":50,"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/pages\/228\/revisions"}],"predecessor-version":[{"id":4262,"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/pages\/228\/revisions\/4262"}],"up":[{"embeddable":true,"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/pages\/784"}],"wp:attachment":[{"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/media?parent=228"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}