{"id":21216,"date":"2021-12-07T14:50:03","date_gmt":"2021-12-07T14:50:03","guid":{"rendered":"https:\/\/shopjessicabuckley.com\/blog\/?p=21216"},"modified":"2021-12-13T13:06:49","modified_gmt":"2021-12-13T13:06:49","slug":"introducing-marvel-design-cloud-whiteboard-design-present-sync","status":"publish","type":"post","link":"https:\/\/shopjessicabuckley.com\/blog\/introducing-marvel-design-cloud-whiteboard-design-present-sync\/","title":{"rendered":"Introducing Marvel Design Cloud: Whiteboard. Design. Present. Sync."},"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\">Design has changed beyond recognition since we first launched in 2014.<\/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\">Back then, Photoshop was the dominant interface design tool. Design files were littered across hard drives, servers and cloud-storage. The large majority of prototyping was still done using HTML and CSS, putting it out of reach for many designers.<\/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\">The value of prototyping was yet to be realised. Design work was often presented in Powerpoint presentations, email attachments and PDFs.<\/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 saw an opportunity to change how things were done and launched Marvel - a simple way to turn static images and sketches into realistic, interactive prototypes for any device, no coding required.<\/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\">The ability to prototype without requiring a developer transformed the digital design process. Overnight, design teams were empowered to validate ideas and test their work across devices.<\/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\">Without the overhead of coding, teams moved quicker to test and ship. Hundreds, thousands and eventually millions of links to Marvel prototypes have now been shared between colleagues, clients and developers.<\/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\">Prototyping became a way to unify entire organisations around the product and keep teams on the same page.<\/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 started to see not just designers signing up to Marvel but every discipline within organisations. In fact, 60% of Marvel users identify as non-designers.<\/p>\n<div id='gallery-1' class='gallery galleryid-21216 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"800\" src=\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2021\/12\/Marvel-community.jpg\" class=\"attachment-full size-full\" alt=\"Marvel community\" srcset=\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2021\/12\/Marvel-community.jpg 1440w, https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2021\/12\/Marvel-community-600x333.jpg 600w, https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2021\/12\/Marvel-community-768x427.jpg 768w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/>\n\t\t\t<\/dt><\/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\">From sales to support, we learned that every team had a role to play in building and shipping an amazing digital experience.<\/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\">With that insight, we expanded the platform beyond prototyping with features such as commenting, developer handoff and user testing to help wider teams get value from designs and prototypes.<\/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\">All this helped us grow to over 3 million users and thousands of customers across every industry.<\/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\">Today Marvel is used within Fortune 500 companies, startups and schools, but we still believe our mission to democratise design isn't done. We want to help bring ideas to life, not just in the form of a prototype but at every stage of the process.<\/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\">Now, we're launching the first step of Marvel's future and our mission to make design more accessible.<\/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\"><\/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;\"><b class=\"fontWeight-5\">Tackling the future of visual productivity<\/b><\/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\">In the last few years, the tools we used to express ourselves have transformed in every way imaginable.<\/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\">Real-time collaboration, unlimited artboards, millions of pre-made templates, community-created content, reusable components, APIs, branching, states and animation. These are all standard now but it wasn't long ago when none of these things existed.<\/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\">Yet we are still designing on blank canvases across several different tools to design, whiteboard and present, often recreating the same content.<\/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 has led to broken workflows, inconsistent visuals and work that can't be edited or updated across tools. Whilst they have the same core features - a canvas, elements (shapes etc), text, images and real-time collaboration, they are all completely disconnected from each other when it comes to reusing content.<\/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\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2021\/12\/Blog-pink-Copy-10.png\" alt=\"Marvel Design Cloud - Real-time\" width=\"1440\" height=\"800\" class=\"aligncenter size-full wp-image-21235\" srcset=\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2021\/12\/Blog-pink-Copy-10.png 1440w, https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2021\/12\/Blog-pink-Copy-10-600x333.png 600w, https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2021\/12\/Blog-pink-Copy-10-768x427.png 768w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><\/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 an everyday example - a design\/brand system created in a design tool can't update slide templates in your sales team's presentation or the style guide in your marketing graphics tool.<\/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\">Fast-moving teams are no longer willing to manage several products to visualise ideas and get work done. The pandemic has only increased the need for consolidation and better collaboration at every stage of the creative process.<\/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\"><span style=\"font-weight: 400;\">With all this in mind, we set out not to just build another web app, but an entire end-to-end platform for creativity.<\/span><\/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;\"><b class=\"fontWeight-5\">Introducing Marvel Design Cloud<\/b><\/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\">Marvel Design Cloud is a creative suite for the modern era of work. A growing collection of connected, browser-based visual productivity tools, accessible to everyone.<\/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\">It's a single platform to power the most popular types of visual work including interface design, presentations, whiteboarding and template-driven graphics.<\/p>\n<div id='gallery-2' class='gallery galleryid-21216 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"800\" src=\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2021\/12\/Artboddard-Copy-3.png\" class=\"attachment-full size-full\" alt=\"Marvel Design Cloud\" srcset=\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2021\/12\/Artboddard-Copy-3.png 1440w, https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2021\/12\/Artboddard-Copy-3-600x333.png 600w, https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2021\/12\/Artboddard-Copy-3-768x427.png 768w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/>\n\t\t\t<\/dt><\/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\">It's not a step forward toward our vision to democratise design, but a giant leap.<\/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\">Here\u2019s what\u2019s in the suite:<\/p>\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 style=\"font-weight: 400;\" aria-level=\"1\"><b class=\"fontWeight-5\">Interface design tool <\/b><span style=\"font-weight: 400;\">- A lightning-fast interface-design tool with real-time collaboration<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b class=\"fontWeight-5\">Whiteboard tool<\/b><span style=\"font-weight: 400;\"> - Power ideation in every team, with instant access to any company-wide asset<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b class=\"fontWeight-5\">Presentation tool<\/b><span style=\"font-weight: 400;\"> - Create on-brand presentations with the ability to automatically update fonts, colours and styles<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b class=\"fontWeight-5\">Graphics tool <\/b><span style=\"font-weight: 400;\">- Scale content creation with template-drive graphics, powered by your centralised company assets<\/span><\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Not only are each of these tools easily accessible in one place, but so is the content they create.<\/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\">That means no one has to search for the latest font to make a sales deck, or the latest brand colours for social assets. Increasing the speed and quality of output in organisations.<\/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\">Need to update your brand colour across your designs, presentations and marketing graphics? It's now just a few clicks.<\/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\">Making design more accessible means meeting people where they are in their skills and needs. That\u2019s why each tool is geared towards different types of work.<\/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\">Let's look at each one in a bit more detail:<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\"><b class=\"fontWeight-5\">Whiteboard<\/b><\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><center><script src=\"https:\/\/fast.wistia.com\/embed\/medias\/mrgmheeox0.jsonp\" async><\/script><script src=\"https:\/\/fast.wistia.com\/assets\/external\/E-v1.js\" async><\/script><\/p>\n<div class=\"wistia_embed wistia_async_mrgmheeox0\" style=\"height:399px;position:relative;width:710px\"><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/center><br \/>\n<\/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\">Our whiteboard tool is the perfect way to explore ideas, moodboard and brainstorm - either on your own or as a team.<\/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\">Grab a sticky note or pen and create something new, or instantly access your team library and components. We've also added handy plugins for stock photos (Pexels) and icons (Iconfinder) to help kick things off.<\/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\"><\/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\"><\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\"><b class=\"fontWeight-5\">Interface design tool<\/b><\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><center><script src=\"https:\/\/fast.wistia.com\/embed\/medias\/jfk62afxjs.jsonp\" async><\/script><script src=\"https:\/\/fast.wistia.com\/assets\/external\/E-v1.js\" async><\/script><\/p>\n<div class=\"wistia_embed wistia_async_jfk62afxjs\" style=\"height:399px;position:relative;width:710px\"><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/center><br \/>\n<\/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\">At the core of the new Marvel Design Cloud is our professional interface design tool.<\/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\">Design everything from apps, websites, prototypes, design systems to brand assets and templates. <\/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 huge advantage is the content you create is reusable by the rest of the platform. No need to recreate the same things over and over again.<\/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\">Everything stays up to date too. If you update a brand colour, just click publish to update the presentations used by the sales team or the templates used by the marketing team.<\/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\"><\/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\"><\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\"><b class=\"fontWeight-5\">Presentation<\/b><\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><center><script src=\"https:\/\/fast.wistia.com\/embed\/medias\/kpj79rfq8k.jsonp\" async><\/script><script src=\"https:\/\/fast.wistia.com\/assets\/external\/E-v1.js\" async><\/script><\/p>\n<div class=\"wistia_embed wistia_async_kpj79rfq8k\" style=\"height:399px;position:relative;width:710px\"><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/center><br \/>\n<\/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\">One of the biggest pain-points of using presentation software is how often slides get out of date or look off-brand.<\/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've felt this pain at Marvel countless times. Our brand gets updated and instantly every presentation across the business becomes inconsistent.<\/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\">The presentation mode solves all that and more by hooking into the same design system and asset libraries used by the interface design tool.<\/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\">Not only does that keep all of your templates, assets, logos and fonts up to date, but also means non-designers have easy access to content that makes their presentations look beautiful and on-brand.<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\"><b class=\"fontWeight-5\">Graphics<\/b><\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The graphics tool is a simple way for non-designers to quickly create marketing content such as social media graphics, ads and more.<\/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\">Create company-wide templates that can be edited and exported or pick one of the thousands of auto-generated graphics from your brand.<\/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\"><\/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\"><\/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;\"><b class=\"fontWeight-5\">Technology<\/b><\/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\">The technology behind our new platform is one of our proudest achievements to date.<\/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\u2019s a lot going on behind the scenes including real-time collaboration, rendering and much more, but I wanted to pick a few things that will have an immediate impact on your workflow plus provide extensibility for the future.<\/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\"><\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\"><b class=\"fontWeight-5\">Easel - Universal Design File Format<\/b><\/h3>\n<div id='gallery-3' class='gallery galleryid-21216 gallery-columns-1 gallery-size-large'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"800\" src=\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2021\/12\/Easel-design-file-format.png\" class=\"attachment-large size-large\" alt=\"Easel design file format\" srcset=\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2021\/12\/Easel-design-file-format.png 1440w, https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2021\/12\/Easel-design-file-format-600x333.png 600w, https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2021\/12\/Easel-design-file-format-768x427.png 768w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/>\n\t\t\t<\/dt><\/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\"><span style=\"font-weight: 400;\">Easel is our cloud-based design document, essentially our version of a .psd or .sketch file. It allows us to store, retrieve and describe any design to our system, making it editable and transferable to other parts of the platform.\u00a0<\/span><\/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\"><span style=\"font-weight: 400;\">Easel can also translate and map 3rd party design files to our own format and make them editable across our tools. It already works with Sketch and we've started work on adding support for Figma.<\/span><\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Native support for design tokens<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><center><script src=\"https:\/\/fast.wistia.com\/embed\/medias\/kqzrelydgm.jsonp\" async><\/script><script src=\"https:\/\/fast.wistia.com\/assets\/external\/E-v1.js\" async><\/script><\/p>\n<div class=\"wistia_embed wistia_async_kqzrelydgm\" style=\"height:399px;position:relative;width:710px\"><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/center><br \/>\n<\/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\"><\/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\">Design tokens are on of the best ways to bridge the gap between design and development. They solve some of the fundamental issues of where the source of truth lives (in the design file or codebase) without being overly prescriptive.<\/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've been heavily inspired by the work of the <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/github.com\/design-tokens\/community-group\">W3C group<\/a> standardising design tokens. Using many of these principles, we've built token support directly into Marvel.<\/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\">Check out the example above to see how tokens can be used to update a live website.<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\"><b class=\"fontWeight-5\">Design SDK, API and plugins<\/b><\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span style=\"font-weight: 400;\">Providing new ways for developers to create plugins, apps and services doesn't just give our community additional functionality, but also gives a glimpse into the future and what is possible.<\/span><\/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\"><span style=\"font-weight: 400;\">For that reason, we've built Marvel Design Cloud with developers in mind. <\/span><\/p>\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><span style=\"font-weight: 400;\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">SDK<\/strong> - Utilise the core parts of the design cloud technology, including rendering, real-time collaboration, and interface layer. That means you can roll your own UI and customise each tool or create something new such as a collaborative diagramming or chart tool.<\/span><\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">API<\/strong> - Access the core parts main platform such as comments, projects, collaborators and more<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Plugins<\/strong> - Build tools for each of the tools that appear directly in the interface<\/li>\n<\/ul>\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;\"><b class=\"fontWeight-5\">Release plan and beta<\/b><\/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\">This is by far the biggest and most ambitious release we\u2019ve ever done, so naturally, we want to make sure it rolls out carefully over the coming months.<\/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\">Each part of Marvel Design Cloud will be released in different stages to ensure we stress-test our new tech and incorporate as much feedback as possible from the community.<\/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've already released the whiteboard to a small portion of customers and aim to steadily increase capacity until it\u2019s public-beta release in Q1 2022.<\/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\">Then we'll be migrating 3 million+ users over to our new design tool in preparation for beta release in late 2022. The graphic and presentation modes will launch shortly after.<\/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\">Don't worry, you'll still be able to access the existing Marvel product and switching will be optional until the end of 2023 - early 2024.<\/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'll be revealing more over the coming months and doing deep dives into each tool. We're super excited to get the new Marvel into your hands and transforming how your team works! <\/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\">Want to find out more? Follow us on <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.twitter.com\/marvelapp\">Twitter<\/a> for updates!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Design has changed beyond recognition since we first launched in 2014. Back then, Photoshop was the dominant interface design tool. Design files were littered across hard drives, servers and cloud-storage. The large majority of prototyping was still done using HTML and CSS, putting it out of reach for many designers. The value of prototyping was yet to be realised. Design&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/shopjessicabuckley.com\/blog\/introducing-marvel-design-cloud-whiteboard-design-present-sync\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":1,"featured_media":21237,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[481],"tags":[],"class_list":["post-21216","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-product-updates"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/shopjessicabuckley.com\/blog\/introducing-marvel-design-cloud-whiteboard-design-present-sync\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introducing Marvel Design Cloud: Whiteboard. Design. Present. Sync. | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"Design has changed beyond recognition since we first launched in 2014. Back then, Photoshop was the dominant interface design tool. Design files were littered across hard drives, servers and cloud-storage. The large majority of prototyping was still done using HTML and CSS, putting it out of reach for many designers. The value of prototyping was yet to be realised. Design... Read More &#65515;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/shopjessicabuckley.com\/blog\/introducing-marvel-design-cloud-whiteboard-design-present-sync\/\" \/>\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=\"2021-12-07T14:50:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-13T13:06:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2021\/12\/Artboard-Copy-5.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2048\" \/>\n\t<meta property=\"og:image:height\" content=\"1137\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2021\/12\/Artboard-Copy-5.png\" \/>\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=\"7 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/shopjessicabuckley.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:\/\/shopjessicabuckley.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#website\",\"url\":\"https:\/\/shopjessicabuckley.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/shopjessicabuckley.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/introducing-marvel-design-cloud-whiteboard-design-present-sync\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2021\/12\/Artboddard-Copy-3.png\",\"width\":1440,\"height\":800,\"caption\":\"Marvel Design Cloud\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/introducing-marvel-design-cloud-whiteboard-design-present-sync\/#webpage\",\"url\":\"https:\/\/shopjessicabuckley.com\/blog\/introducing-marvel-design-cloud-whiteboard-design-present-sync\/\",\"name\":\"Introducing Marvel Design Cloud: Whiteboard. Design. Present. Sync. | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/introducing-marvel-design-cloud-whiteboard-design-present-sync\/#primaryimage\"},\"datePublished\":\"2021-12-07T14:50:03+00:00\",\"dateModified\":\"2021-12-13T13:06:49+00:00\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/shopjessicabuckley.com\/blog\/introducing-marvel-design-cloud-whiteboard-design-present-sync\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/introducing-marvel-design-cloud-whiteboard-design-present-sync\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/introducing-marvel-design-cloud-whiteboard-design-present-sync\/#webpage\"},\"author\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#\/schema\/person\/ecec7188bfa16fd52700fd6952ed9949\"},\"headline\":\"Introducing Marvel Design Cloud: Whiteboard. Design. Present. Sync.\",\"datePublished\":\"2021-12-07T14:50:03+00:00\",\"dateModified\":\"2021-12-13T13:06:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/introducing-marvel-design-cloud-whiteboard-design-present-sync\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/introducing-marvel-design-cloud-whiteboard-design-present-sync\/#primaryimage\"},\"articleSection\":\"Product Updates\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/shopjessicabuckley.com\/blog\/introducing-marvel-design-cloud-whiteboard-design-present-sync\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#\/schema\/person\/ecec7188bfa16fd52700fd6952ed9949\",\"name\":\"Murat\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/60b7fb1722edde45406cb169ec3eb1e56dc54bf074f00186ba92dae286837d96?s=96&d=mm&r=g\",\"caption\":\"Murat\"},\"description\":\"Hi! I'm one of the co-founders at Marvel and a Product Designer by trade. You can often find me asking why Arsenal haven't signed anyone this season. Follow me on Twitter.\",\"sameAs\":[\"http:\/\/shopjessicabuckley.com\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts\/21216","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/comments?post=21216"}],"version-history":[{"count":0,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts\/21216\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/media\/21237"}],"wp:attachment":[{"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/media?parent=21216"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/categories?post=21216"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/tags?post=21216"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}