Marvel Blog - Ideas and words on user experience, design, collaboration and more

<!DOCTYPE html> <html class="new-styleguide fontFamily-graphik" lang="en-GB"> <head> <title> Marvel Blog - Ideas and words on user experience, design, collaboration and more </title> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bitter" type="text/css"> <link rel="stylesheet" href="https://marvelapp.com/wp-content/themes/marvel/style.css?remove-cache=12989188" type="text/css"> <link rel="pingback" href="https://marvelapp.com/xmlrpc.php" /> <link rel="alternate" type="application/rss+xml" href="https://marvelapp.com/blog/feed/" title="Marvel App Blog" /> <link rel="icon" type="image/png" href="https://marvelapp.com/static/site/images/favicon.png"> <meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=0"> <meta charset="UTF-8">  <script> (function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-KTSTWG'); </script>  <script type="text/javascript"> var siteBase = 'https://marvelapp.com'; var headerEffect = 1; var headerEffectMax = 8; </script>  <script> (function(i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function() { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); ga('create', 'UA-72842863-1', 'auto'); ga('send', 'pageview'); </script>  <script> ! function(f, b, e, v, n, t, s) { if (f.fbq) return; n = f.fbq = function() { n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments) }; if (!f._fbq) f._fbq = n; n.push = n; n.loaded = !0; n.version = '2.0'; n.queue = []; t = b.createElement(e); t.async = !0; t.src = v; s = b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t, s) }(window, document, 'script', '//connect.facebook.net/en_US/fbevents.js'); fbq('init', '865922950182463'); fbq('track', "PageView"); </script> <noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=865922950182463&ev=PageView&noscript=1" /></noscript>  <meta name='robots' content='max-image-preview:large' /> <style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style>  <meta name="description" content="Ideas and words on user experience, design, collaboration and more" /> <meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" /> <link rel="canonical" href="https://marvelapp.com/blog/" /> <link rel="next" href="https://marvelapp.com/blog/page/2/" /> <meta property="og:locale" content="en_GB" /> <meta property="og:type" content="website" /> <meta property="og:title" content="Marvel Blog | Ideas and words on user experience, design, collaboration and more" /> <meta property="og:description" content="Ideas and words on user experience, design, collaboration and more" /> <meta property="og:url" content="https://marvelapp.com/blog/" /> <meta property="og:site_name" content="Marvel Blog" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@marvelapp" /> <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":"CollectionPage","@id":"https://marvelapp.com/blog/#webpage","url":"https://marvelapp.com/blog/","name":"Marvel Blog | Ideas and words on user experience, design, collaboration and more","isPartOf":{"@id":"https://marvelapp.com/blog/#website"},"about":{"@id":"https://marvelapp.com/blog/#organization"},"description":"Ideas and words on user experience, design, collaboration and more","inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https://marvelapp.com/blog/"]}]}]}</script> <meta name="google-site-verification" content="0DSS5x3ybp_bx5kjE6DTcQ54wb8Dq9iHH76u45zhuDE" />  <link rel='stylesheet' id='wp-block-library-css' href='https://marvelapp.com/wp-includes/css/dist/block-library/style.min.css?ver=628fe712b2be4f2994a6193e347d8954' type='text/css' media='all' /> <style id='classic-theme-styles-inline-css' type='text/css'> /*! This file is auto-generated */ .wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none} </style> <style id='global-styles-inline-css' type='text/css'> :root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} :where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;} :where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;} :root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;} </style> <script type="text/javascript" src="https://marvelapp.com/wp-includes/js/jquery/jquery.min.js?ver=3.7.1" id="jquery-core-js"></script> <script type="text/javascript" src="https://marvelapp.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.1" id="jquery-migrate-js"></script> <link rel="https://api.w.org/" href="https://marvelapp.com/blog/wp-json/" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://marvelapp.com/xmlrpc.php?rsd" /> <link rel="apple-touch-icon" sizes="180x180" href="/wp-content/uploads/fbrfg/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/wp-content/uploads/fbrfg/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/wp-content/uploads/fbrfg/favicon-16x16.png"> <link rel="manifest" href="/wp-content/uploads/fbrfg/site.webmanifest"> <link rel="shortcut icon" href="/wp-content/uploads/fbrfg/favicon.ico"> <meta name="msapplication-TileColor" content="#da532c"> <meta name="msapplication-config" content="/wp-content/uploads/fbrfg/browserconfig.xml"> <meta name="theme-color" content="#ffffff"> <style> #hs-eu-cookie-confirmation { width: 370px !important; bottom: 20px !important; right: 0px !important; left: 20px !important; top: auto !important; position: fixed !important; border: none !important; border-radius: 10px; overflow: "hidden"; height: auto !important; font-family: "Graphik", sans-serif !important; box-shadow: rgba(34, 45, 57, 0.12) 0px 0px 0px 1px, rgba(34, 45, 57, 0.12) 0px 1px 2px 0px !important; } #hs-eu-cookie-confirmation-inner { background: transparent !important; padding: 15px 20px !important; display: flex !important; justify-content: center !important; align-items: center !important; } div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner div#hs-en-cookie-confirmation-buttons-area a#hs-eu-confirmation-button, div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner div#hs-en-cookie-confirmation-buttons-area a#hs-eu-decline-button { padding: 0px 16px!important; border: none !important; height: 36px !important; padding: 0px 16px!important; font-weight: 500 !important; line-height: 36px !important; margin-right: 0px !important; border-radius: 18px !important; } div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner a#hs-eu-confirmation-button { background-color: #1fb6ff !important; margin-top: -15px !important; } div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner a#hs-eu-confirmation-button:hover { } div#hs-eu-cookie-confirmation-inner #hs-eu-policy-wording { margin-bottom: 0px !important; } div#hs-eu-cookie-confirmation-inner p { font-size: 13px !important; line-height: 22px !important; font-family: "Graphik", sans-serif !important; padding-right: 10px !important; letter-spacing: 0px !important; color: #222d39 !important; margin-bottom: 0px !important; } </style> </head> <body class="home blog">  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KTSTWG" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>  <a class="textDecoration-none" href="https://marvelapp.com/user-testing"> <div class="bg-purple paddingTopBottom-xs textAlign-center c-white"> <div class="pageWrap pageWrap-l"> <div class="alignItems-center justifyContent-center display-block breakPointM-display-flex"> <div class="breakPointM-fontSize-m c-white fontSize-s breakPointM-paddingRight-xs"> 📹 New! Remote User Testing - Get video + voice feedback on designs and prototypes </div> <div class="paddingTopBottom-xxs breakPointM-paddingTopBottom-0"> <div class="appearance-none borderWidth-0 boxSizing-borderBox cursor-pointer display-inlineBlock fontWeight-5 outlineStyle-none position-relative textAlign-center textDecoration-none tp-none--active userSelect-none verticalAlign-middle whiteSpace-nowrap c-slate--hover bg-white--hover borderRadius-s fontSize-xs bg-blue transitionDuration-s transitionProperty-all transitionTimingFunction-linear fill-smoke--xd boxShadow-none--hover boxShadow-white--transparent c-white bg-none boxShadow-deboss--active boxShadow-emboss--hover boxShadow-smoke c-slate" style="height:30px;line-height:30px;min-width:30px;border-radius:15px;padding-left:15px;padding-right:15px;"> <div> <div>Read more</div> </div> </div> </div> </div> </div> </div> </a> <div class="header-bar-wrapper" id="header" style="z-index: 999"> <div class="height-100 pageWrap pageWrap--l"> <nav class="navHeight"> <div class="js-logo-touch float-left height-100" style="-webkit-tap-highlight-color: rgba(0,0,0,0);"> <div class="display-table height-100"> <div class="display-tableCell verticalAlign-middle"> <a href="https://marvelapp.com/blog"> <svg class="display-block link fill-blue fill-effect--hover" id="marvel-logo" width="70" height="30" viewBox="0 0 70 30"> <pattern id="effect" width="1" height="1" viewBox="0 0 80 30" preserveAspectRatio="none"> <image id="effect-image" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://marvelapp.com/static/assets/images/logo/3.gif" width="80" height="30" preserveAspectRatio="none"></image> </pattern> <path d="M59.439 19.41c-25.462-1.95-46.514 4.12-51.222 6.37-2.625 1.2-2.809 2.7-2.432 3.529.341.635 1.592 1.006 2.966.335 10.106-5.399 30.554-9.705 50.697-8.47.483-.002.873-.399.871-.887-.002-.487-.396-.88-.879-.878zm6.309-7.57c-1.067 1.2-2.625 2.1-3.115 1.65-.49-.45 0-1.87 0-1.87 2.502-1.615 7.367-5.735 7.367-8.884 0-2.92-2.625-3.82-5.399-1.12-2.244 2.413-3.863 5.346-4.716 8.54-1.444 1.42-3.727 3.22-5.775 3.22-1.067 0-1.365-.75-1.216-1.765 1.75-.026 6.606-1.376 6.606-5.435-.007-.678-.294-1.322-.793-1.778-.498-.455-1.162-.681-1.832-.622-2.205 0-5.014 2.25-6.387 5.399-.375-.07-.74-.189-1.085-.353.359-.773.652-1.576.875-2.4.306-1.65-.376-2.7-1.75-2.55-.875.071-1.899.821-2.126 2.55-.092.876.066 1.761.455 2.55-.604 1.87-3.036 4.2-3.876 4.12-.84-.079.114-3.388.954-5.858.46-.474.823-1.035 1.067-1.65.235-.481.072-1.063-.376-1.35-1.251-.457-2.64.13-3.194 1.35-.334.602-.627 1.227-.875 1.87-.682.821-1.75 1.87-2.056 1.765-.455-.3 1.067-2.32.875-3.45-.136-.93-.971-1.59-1.899-1.5-1.374.194-3.194 2.788-3.194 2.788.214-.473.341-.981.376-1.5-.079-.97-1.899-1.42-2.809.371-.623 1.716-1.081 3.489-1.365 5.294-.376.821-1.899 3.22-3.115 3.3-.989.071.227-4.27.376-4.5.534-.821 1.216-2.55 1.067-3.3.013-.364-.15-.712-.436-.935-.286-.222-.662-.292-1.008-.186-.612.161-1.133.565-1.444 1.12-.437-.546-1.137-.803-1.82-.671-4.042.432-6.606 7.402-6.317 10.711.227 1.765 1.067 2.85 2.625 2.647 1.75-.221 3.194-2.77 3.194-2.77s.376 2.1 2.284 1.87c1.413-.436 2.659-1.298 3.57-2.47-.044.119-.071.244-.079.371-.306 1.765 2.625 1.57 2.887.221.875-6.67 3.115-9.44 3.797-9.44.534 0-1.444 3.15-.306 4.35.875 1.05 2.432.221 3.727-.882-.226.832-.352 1.688-.376 2.55-.079 1.87.604 3.37 2.432 3.3 2.432-.071 5.014-3.07 6.685-5.92.44.289.929.493 1.444.6-.174.667-.239 1.359-.192 2.047.149 2.17 1.671 3 3.421 2.92 2.056-.071 4.48-1.65 6.125-3.07.008.082-.021.163-.079.221-.149 1.05.079 3 1.592 3.07 1.75.15 4.786-1.65 6.309-3.529 1.094-.812-.192-2.012-1.102-1.041v.035zm1.627-9.026c.185.019.321.183.306.371 0 1.87-4.716 5.849-4.716 5.849s3.08-6.22 4.41-6.22zm-11.375 3.891c.157-.014.311.047.416.165.105.118.149.279.118.435 0 1.05-1.444 1.87-3.036 1.87.849-1.235 1.837-2.47 2.502-2.47zm-31.499 2.929c-.149 1.12-2.126 6.176-3.194 6.176-1.365.071.682-7.12 2.887-7.058.429-.018.429.282.306.882zm-17.123 1.35c1.295 0-1.067 6.67-.761 9.59.306 2.92 3.57 2.1 3.342.371-.376-2.85 1.592-11.919 3.57-11.919 1.444 0-1.592 6.22-.989 10.12.376 2.55 3.876 1.765 3.5.15-1.067-5.091 2.511-10.04 2.047-13.631-.227-1.5-1.067-2.32-2.056-2.32-3.272 0-5.932 6.591-5.932 6.591s.315-3.758-2.345-3.9c-3.876-.229-7.831 9.37-7.752 18.06.079 2.77 3.57 2.32 3.342.071-.227-3.873 2.056-13.181 4.034-13.181z" /> </svg> </a> </div> <div class="contribute-button-cell display-none verticalAlign-middle paddingLeft-s"> <div class="js-contribute-button inline fill-marvel fill-marvel--d--hover"> <div class="verticalAlign-middle"> <svg class="link display-inlineBlock verticalAlign-middle" width="4" height="10" viewBox="0 0 4 10"> <path d="M4 10l-3.435-3.868c-.75-.625-.756-1.635 0-2.264l3.435-3.868v10z"></path> </svg> </div> <div class="verticalAlign-middle"> <span class="contribute-button link display-inlineBlock verticalAlign-middle paddingLeftRight-xxs borderRadius-s position-relative bg-marvel bg-marvel--d--hover c-white"> <span class="fontWeight-5 fontSize-xs lineHeight-s"> Contribute to the blog </span> </span> </div> </div> </div> </div> </div> <div class="height-100 float-right display-none breakPointM-display-block"> <div class="display-table height-100"> <div class="display-tableCell verticalAlign-middle"> <div class="inline textAlign-right"> <div class="verticalAlign-middle marginRight-m breakPointL-paddingRight-s"> <a class="navigation-link link link--dark fontSize-m fontWeight-5" href="https://marvelapp.com/">← Back to site</a> </div> <div class="categories-nav-menu--trigger verticalAlign-middle marginRight-m breakPointL-paddingRight-s"> <a class="navigation-link link link--dark fill-slate fontSize-m fontWeight-5 display-flex alignItems-center" href="#"> Categories <svg class="marginLeft-xxs" width="8" height="5" viewBox="0 0 8 5"> <path d="M1.707.293c-.391-.391-1.024-.391-1.414 0-.391.391-.391 1.024 0 1.414l3 3c.391.391 1.024.391 1.414 0l3-3c.391-.391.391-1.024 0-1.414-.391-.391-1.024-.391-1.414 0l-2.293 2.293-2.293-2.293z" data-reactid="140"></path> </svg> </a> <div class="categories-nav-menu"> <div class="width-100 bg-white paddingTopBottom-xl textAlign-left"> <div class="pageWrap pageWrap--l"> <div class="footer-categories"> <div> <div class="marginBottom-s"><a class="link link--dark fontSize-m lineHeight-s" href="https://marvelapp.com/blog/design-thoughts/accessiblity/">Accessibility</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--dark fontSize-m lineHeight-s" href="https://marvelapp.com/blog/blog/">Blog</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--dark fontSize-m lineHeight-s" href="https://marvelapp.com/blog/in-the-spotlight/case-study/">Case Study</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--dark fontSize-m lineHeight-s" href="https://marvelapp.com/blog/design-thoughts/prototyping-design-thoughts/">Design & Prototyping</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--dark fontSize-m lineHeight-s" href="https://marvelapp.com/blog/design-thoughts/design-club/">Design Club</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--dark fontSize-m lineHeight-s" href="https://marvelapp.com/blog/design-thoughts/process/">Design Process</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--dark fontSize-m lineHeight-s" href="https://marvelapp.com/blog/design-thoughts/design-systems/">Design Systems</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--dark fontSize-m lineHeight-s" href="https://marvelapp.com/blog/design-thoughts/design-thinking/">Design Thinking</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--dark fontSize-m lineHeight-s" href="https://marvelapp.com/blog/design-thoughts/">Design Thoughts</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--dark fontSize-m lineHeight-s" href="https://marvelapp.com/blog/product-updates/handoff/">Handoff</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--dark fontSize-m lineHeight-s" href="https://marvelapp.com/blog/in-the-spotlight/">In the Spotlight</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--dark fontSize-m lineHeight-s" href="https://marvelapp.com/blog/in-the-spotlight/inside-marvel/">Inside Marvel</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--dark fontSize-m lineHeight-s" href="https://marvelapp.com/blog/product-updates/integrations-api/">Integrations & API</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--dark fontSize-m lineHeight-s" href="https://marvelapp.com/blog/learn-with-marvel/">Learn with Marvel</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--dark fontSize-m lineHeight-s" href="https://marvelapp.com/blog/design-thoughts/product-design/">Product Design</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--dark fontSize-m lineHeight-s" href="https://marvelapp.com/blog/learn-with-marvel/product-tips-and-tricks/">Product Tips & Tricks</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--dark fontSize-m lineHeight-s" href="https://marvelapp.com/blog/product-updates/">Product Updates</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--dark fontSize-m lineHeight-s" href="https://marvelapp.com/blog/product-updates/prototyping/">Prototyping</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--dark fontSize-m lineHeight-s" href="https://marvelapp.com/blog/design-thoughts/remote-working/">Remote Working</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--dark fontSize-m lineHeight-s" href="https://marvelapp.com/blog/design-thoughts/research/">Research</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--dark fontSize-m lineHeight-s" href="https://marvelapp.com/blog/design-thoughts/resources/">Resources</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--dark fontSize-m lineHeight-s" href="https://marvelapp.com/blog/product-updates/engineering/">Small Ships</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--dark fontSize-m lineHeight-s" href="https://marvelapp.com/blog/in-the-spotlight/spilling-tea/">Spilling Tea</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--dark fontSize-m lineHeight-s" href="https://marvelapp.com/blog/design-thoughts/ux/">User Experience</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--dark fontSize-m lineHeight-s" href="https://marvelapp.com/blog/product-updates/user-testing/">User Testing</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--dark fontSize-m lineHeight-s" href="https://marvelapp.com/blog/design-thoughts/user-testing-design-thoughts/">User Testing</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--dark fontSize-m lineHeight-s" href="https://marvelapp.com/blog/viewpoint/">Viewpoint</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--dark fontSize-m lineHeight-s" href="https://marvelapp.com/blog/design-thoughts/ui/">Visual Design</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--dark fontSize-m lineHeight-s" href="https://marvelapp.com/blog/design-thoughts/web-design/">Web Design</a></div> </div> </div> </div> </div> </div> </div> <div class="verticalAlign-middle marginRight-s"> <a class="button button--m button--ghost bg-positive--hover" href="https://marvelapp.com/signin/?utm_source=blog-navigation&utm_medium=header-button&utm_campaign=marvel-blog-advertising&utm_content=signin" style="border-radius: 99px">Sign In</a> </div> <div class="verticalAlign-middle"> <a class="button button--m button--flat bg-blue" href="https://marvelapp.com/signup/?utm_source=blog-navigation&utm_medium=header-button&utm_campaign=marvel-blog-advertising&utm_content=signup" style="border-radius: 99px">Sign Up</a> </div> </div> </div> </div> </div> <div class="js-navigation-toggle navigation-toggle padding-m"> <div class="navigation-toggle-icon"></div> <div class="padding-xs"></div> </div> </nav> </div> </div> <div class="width-100 position-absolute display-block pointerEvents-none zi-100 overflow-hidden"> <canvas id="particles"></canvas> </div> <div class="position-relative width-100 breakPointM-height-10 overflow-hidden" id="header-placeholder"> <div class="navHeight"></div> </div> <section class="width-100 bg-snow--d overflow-hidden" id="subheader"> <div class="bg-white"> <div class="pageWrap pageWrap--l paddingTopBottom-xl"> <div class="breakPointM-paddingBottom-xl"> <div class="textAlign-center breakPointM-textAlign-left breakPointM-paddingBottom-xl breakPointM-marginBottom-xl"> <div class="marginBottom-xs"> <h1 class="c-black fontSize-xxl lineHeight-xxl breakPointM-fontSize-xxxl breakPointM-lineHeight-xxxl breakPointL-fontSize-xxxxl breakPointL-lineHeight-xxxxl fontWeight-6" style="max-width: 420px"> The best design articles every day. </h1> </div> <div class="inline display-inlineBlock transitionDuration-l c-slate marginBottom-m"> <div class="fontWeight-3 fontSize-l lineHeight-l userSelect-none"> Subscribe and get our weekly newsletter in your inbox. </div> </div> <form name="subscribe" class="js-newsletter-form position-relative subscribe-form" style="max-width: 420px"> <div class="newsletter-form-container"> <input class="js-newsletter-input input input--m input--default width-100" type="email" name="email" placeholder="Enter your email address to subscribe"> </div> <div class="js-newsletter-error position-absolute fontSize-m linHeight-m c-negative width-100 textAlign-center breakPointM-textAlign-left" style="bottom: -35px; left: 0"></div> <button class="js-newsletter-link button button--flat button--m button--stateful bg-marvel marginTop-s" type="submit" style="border-radius: 99px"> <span>Subscribe Now</span> </button> </form> </div> </div> </div> </div> </section> <section> <div class="pageWrap pageWrap--l paddingTop-m breakPointM-paddingTop-0"> <div class="post-card hero-post-card position-relative bg-white borderRadius-l transitionTimingFunction-ease-in-out transitionDuration-l transitionProperty-all boxShadow-snow--d zi-200"> <div class="breakPointM-display-table"> <div class="breakPointM-display-tableCell position-relative verticalAlign-top width-100 breakPointM-width-50 breakPointL-width-60"> <a class="aspectRatio aspectRatio--60 breakPointM-aspectRatio--100 breakPointL-aspectRatio--60 width-100 display-block" href="https://marvelapp.com/blog/meet-ballpark-the-new-product-research-platform-by-marvel/"> <div class="aspectRatio-content borderRadiusTop-l breakPointM-borderRadiusLeft-l backgroundPosition-centerCenter backgroundSize-cover" style="background-image: url(https://marvelapp.com/wp-content/uploads/2022/06/Frame-1-7-1500x833.png)"></div> </a> <div class="position-absolute pinFill borderRadiusTop-l breakPointM-borderRadiusLeft-l bg-blue opacity-0 transitionTimingFunction-ease-in-out transitionDuration-l transitionProperty-all pointerEvents-none"></div> <div class="position-absolute pinFill pinFill pointerEvents-none"> <div class="pinFill display-table"> <div class="display-tableCell verticalAlign-middle textAlign-center"> <svg class="svgIcon fill-white" width="62" height="42" viewBox="0 0 62 42"> <path d="M46.5,42C38,42,31,32.58,31,21S38,0,46.5,0,62,9.42,62,21,55,42,46.5,42Zm0-39C39.61,3,34,11.07,34,21s5.61,18,12.5,18c6.06,0,11.13-6.25,12.26-14.5A8.5,8.5,0,1,1,59,22c0-.32,0-0.63,0-1C59,11.07,53.39,3,46.5,3Zm4,14A5.5,5.5,0,1,0,56,22.5,5.51,5.51,0,0,0,50.5,17Zm-35,25C7,42,0,32.58,0,21S7,0,15.5,0,31,9.42,31,21,24,42,15.5,42Zm0-39C8.61,3,3,11.07,3,21S8.61,39,15.5,39c6.06,0,11.13-6.25,12.26-14.5A8.5,8.5,0,1,1,28,22c0-.32,0-0.63,0-1C28,11.07,22.39,3,15.5,3Zm4,14A5.5,5.5,0,1,0,25,22.5,5.51,5.51,0,0,0,19.5,17Z"/> </svg> </div> </div> </div> </div> <div class="breakPointM-display-tableCell position-relative verticalAlign-top width-100 breakPointM-width-50 breakPointL-width-40"> <div class="breakPointM-position-absolute paddingTop-m" style="top: 0; right: 0; bottom: 0; left: 0"> <div class="breakPointS-paddingTop-xs breakPointM-paddingTop-xxs breakPointL-paddingTop-xs"> <div class="paddingLeftRight-xs breakPointS-paddingLeftRight-m breakPointM-paddingLeftRight-xs breakPointL-paddingLeftRight-m marginBottom-xs breakPointS-marginBottom-m breakPointM-marginBottom-xs breakPointL-marginBottom-m"> <a class="link display-inlineBlock marginLeftRight-xs paddingLeftRight-xxs lineHeight-m fontSize-xs lineHeight-s fontWeight-5 c-white borderRadius-s bg-blue" href="https://marvelapp.com/blog/blog/"> Blog </a> </div> <div class="paddingLeftRight-m"> <div class="breakPointS-paddingLeftRight-xs breakPointM-paddingLeftRight-0 breakPointL-paddingLeftRight-xs"> <div class="paddingTop-xxs breakPointS-paddingTop-0 breakPointM-paddingTop-xxs breakPointL-paddingTop-0 marginBottom-s"> <a href="https://marvelapp.com/blog/meet-ballpark-the-new-product-research-platform-by-marvel/" class="link c-black fontWeight-6 fontSize-xl lineHeight-l breakPointS-fontSize-xxl breakPointS-lineHeight-xl breakPointM-fontSize-xl breakPointM-lineHeight-l breakPointL-fontSize-xxl breakPointL-lineHeight-xl truncateText-three"> Meet Ballpark – The new product research platform by Marvel </a> </div> <div class="marginBottom-s inline truncateText"> <div class="verticalAlign-middle marginRight-xs"> <div style="margin-left: 10px"> <a class="avatar avatar--xxs display-inlineBlock transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular " href="https://marvelapp.com/blog/author/murat/" style="margin-left: -10px"> <img alt='' src='https://secure.gravatar.com/avatar/a1e908deeac1ac1412168b63638be7e5?s=22&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/a1e908deeac1ac1412168b63638be7e5?s=44&d=mm&r=g 2x' class='avatar-img avatar-22 photo' height='22' width='22' decoding='async'/> <span class="avatar-border"></span> </a> </div> </div> <div class="verticalAlign-middle"> <span class="fontSize-m lineHeight-m c-slate fontWeight-3"> <a class="link link--dark" href="https://marvelapp.com/blog/author/murat/">Murat Mutlu</a> </span> </div> </div> <div class="textAlign-left c-slate fontSize-m lineHeight-m fontWeight-3 truncateText-four" style="max-height: 100px"> <p>Hello world! I’m excited to introduce Ballpark, a brand new product from the team at Marvel that makes research faster, easier and more inclusive for every team. Over the last few years we’ve seen the explosion of companies becoming product and customer-led, with many maturing in ideation, design, prototype and shipping. Yet research and the process of understanding users still… <a class="link link--blue fontWeight-4" href="https://marvelapp.com/blog/meet-ballpark-the-new-product-research-platform-by-marvel/">Read More ￫</a></p> </div> </div> </div> </div> </div> <div class="breakPointM-position-absolute width-100 padding-m" style="bottom: 0"> <div class="breakPointS-paddingLeftRight-xs breakPointS-paddingBottom-xs breakPointM-paddingLeftRight-0 breakPointM-paddingBottom-0 breakPointL-paddingLeftRight-xs breakPointL-paddingBottom-xs"> <a class="button button--m button--ghost bg-green--hover" href="https://marvelapp.com/blog/meet-ballpark-the-new-product-research-platform-by-marvel/" style="border-radius: 99px"> Read more </a> </div> </div> </div> </div> </div> </div> </section> <div class="position-relative paddingTop-m breakPointL-paddingTop-l paddingBottom-l breakPointM-paddingBottom-xl"> <div class="pageWrap pageWrap--l"> <div class="grid grid--1 breakPointM-grid--2 breakPointL-grid--3 grid--m breakPointL-grid--l"> <div class="js-post"> <div class="post-card post-card--fixed-height overflow-hidden position-relative bg-white borderRadius-l transitionTimingFunction-ease-in-out transitionDuration-l transitionProperty-all "> <div class="marginBottom-m breakPointS-marginBottom-l breakPointM-marginBottom-m breakPointL-marginBottom-l position-relative"> <a class="aspectRatio aspectRatio--60 width-100 display-block" href="https://marvelapp.com/blog/meet-ballpark-the-new-product-research-platform-by-marvel/"> <div class="aspectRatio-content borderRadiusTop-l backgroundPosition-centerCenter backgroundSize-cover" style="background-image: url(https://marvelapp.com/wp-content/uploads/2022/06/Frame-1-7-1500x833.png)"></div> </a> <div class="position-absolute pinFill borderRadiusTop-l bg-blue opacity-0 transitionTimingFunction-ease-in-out transitionDuration-l transitionProperty-all pointerEvents-none"></div> <div class="position-absolute pinFill pinFill pointerEvents-none"> <div class="pinFill display-table"> <div class="display-tableCell verticalAlign-middle textAlign-center"> <svg class="svgIcon fill-white" width="62" height="42" viewBox="0 0 62 42"> <path d="M46.5,42C38,42,31,32.58,31,21S38,0,46.5,0,62,9.42,62,21,55,42,46.5,42Zm0-39C39.61,3,34,11.07,34,21s5.61,18,12.5,18c6.06,0,11.13-6.25,12.26-14.5A8.5,8.5,0,1,1,59,22c0-.32,0-0.63,0-1C59,11.07,53.39,3,46.5,3Zm4,14A5.5,5.5,0,1,0,56,22.5,5.51,5.51,0,0,0,50.5,17Zm-35,25C7,42,0,32.58,0,21S7,0,15.5,0,31,9.42,31,21,24,42,15.5,42Zm0-39C8.61,3,3,11.07,3,21S8.61,39,15.5,39c6.06,0,11.13-6.25,12.26-14.5A8.5,8.5,0,1,1,28,22c0-.32,0-0.63,0-1C28,11.07,22.39,3,15.5,3Zm4,14A5.5,5.5,0,1,0,25,22.5,5.51,5.51,0,0,0,19.5,17Z"/> </svg> </div> </div> </div> <div class="position-absolute paddingLeftRight-m" style="bottom: -11px"> <a class="link display-inlineBlock marginLeftRight-xs paddingLeftRight-xxs lineHeight-m fontSize-xs lineHeight-s fontWeight-5 c-white borderRadius-s bg-blue" href="https://marvelapp.com/blog/blog/"> Blog </a> </div> </div> <div class="paddingLeftRight-m"> <div class="breakPointS-paddingLeftRight-xs breakPointM-paddingLeftRight-0 breakPointL-paddingLeftRight-xs"> <div class="paddingTop-xxs breakPointS-paddingTop-0 breakPointM-paddingTop-xxs breakPointL-paddingTop-0 marginBottom-s"> <a href="https://marvelapp.com/blog/meet-ballpark-the-new-product-research-platform-by-marvel/" class="link c-black fontWeight-6 fontSize-xl lineHeight-l breakPointS-fontSize-xxl breakPointS-lineHeight-xl breakPointM-fontSize-xl breakPointM-lineHeight-l breakPointL-fontSize-xxl breakPointL-lineHeight-xl truncateText-three"> Meet Ballpark – The new product research platform by Marvel </a> </div> <div class="marginBottom-s inline truncateText"> <div class="verticalAlign-middle marginRight-xs"> <div style="margin-left: 10px"> <a class="avatar avatar--xxs display-inlineBlock transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular " href="https://marvelapp.com/blog/author/murat/" style="margin-left: -10px"> <img alt='' src='https://secure.gravatar.com/avatar/a1e908deeac1ac1412168b63638be7e5?s=22&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/a1e908deeac1ac1412168b63638be7e5?s=44&d=mm&r=g 2x' class='avatar-img avatar-22 photo' height='22' width='22' decoding='async'/> <span class="avatar-border"></span> </a> </div> </div> <div class="verticalAlign-middle"> <span class="fontSize-m lineHeight-m c-slate fontWeight-3"> <a class="link link--dark" href="https://marvelapp.com/blog/author/murat/">Murat Mutlu</a> </span> </div> </div> <div class="textAlign-left c-slate fontSize-m lineHeight-m fontWeight-3 truncateText-four" style="max-height: 100px"> <p>Hello world! I’m excited to introduce Ballpark, a brand new product from the team at Marvel that makes research faster, easier and more inclusive for every team. Over the last few years we’ve seen the explosion of companies becoming product and customer-led, with many maturing in ideation, design, prototype and shipping. Yet research and the process of understanding users still… <a class="link link--blue fontWeight-4" href="https://marvelapp.com/blog/meet-ballpark-the-new-product-research-platform-by-marvel/">Read More ￫</a></p> </div> </div> </div> <div class="breakPointM-position-absolute width-100 padding-m" style="bottom: 0"> <div class="breakPointS-paddingLeftRight-xs breakPointS-paddingBottom-xs breakPointM-paddingLeftRight-0 breakPointM-paddingBottom-0 breakPointL-paddingLeftRight-xs breakPointL-paddingBottom-xs"> <a class="button button--m button--ghost bg-green--hover" href="https://marvelapp.com/blog/meet-ballpark-the-new-product-research-platform-by-marvel/" style="border-radius: 99px"> Read more </a> </div> </div> </div> </div> <div class="js-post"> <div class="post-card post-card--fixed-height overflow-hidden position-relative bg-white borderRadius-l transitionTimingFunction-ease-in-out transitionDuration-l transitionProperty-all "> <div class="marginBottom-m breakPointS-marginBottom-l breakPointM-marginBottom-m breakPointL-marginBottom-l position-relative"> <a class="aspectRatio aspectRatio--60 width-100 display-block" href="https://marvelapp.com/blog/gender-inclusivity-in-design/"> <div class="aspectRatio-content borderRadiusTop-l backgroundPosition-centerCenter backgroundSize-cover" style="background-image: url(https://marvelapp.com/wp-content/uploads/2021/12/what-is-gender-inclusive-1500x1017.jpg)"></div> </a> <div class="position-absolute pinFill borderRadiusTop-l bg-blue opacity-0 transitionTimingFunction-ease-in-out transitionDuration-l transitionProperty-all pointerEvents-none"></div> <div class="position-absolute pinFill pinFill pointerEvents-none"> <div class="pinFill display-table"> <div class="display-tableCell verticalAlign-middle textAlign-center"> <svg class="svgIcon fill-white" width="62" height="42" viewBox="0 0 62 42"> <path d="M46.5,42C38,42,31,32.58,31,21S38,0,46.5,0,62,9.42,62,21,55,42,46.5,42Zm0-39C39.61,3,34,11.07,34,21s5.61,18,12.5,18c6.06,0,11.13-6.25,12.26-14.5A8.5,8.5,0,1,1,59,22c0-.32,0-0.63,0-1C59,11.07,53.39,3,46.5,3Zm4,14A5.5,5.5,0,1,0,56,22.5,5.51,5.51,0,0,0,50.5,17Zm-35,25C7,42,0,32.58,0,21S7,0,15.5,0,31,9.42,31,21,24,42,15.5,42Zm0-39C8.61,3,3,11.07,3,21S8.61,39,15.5,39c6.06,0,11.13-6.25,12.26-14.5A8.5,8.5,0,1,1,28,22c0-.32,0-0.63,0-1C28,11.07,22.39,3,15.5,3Zm4,14A5.5,5.5,0,1,0,25,22.5,5.51,5.51,0,0,0,19.5,17Z"/> </svg> </div> </div> </div> <div class="position-absolute paddingLeftRight-m" style="bottom: -11px"> <a class="link display-inlineBlock marginLeftRight-xs paddingLeftRight-xxs lineHeight-m fontSize-xs lineHeight-s fontWeight-5 c-white borderRadius-s bg-blue" href="https://marvelapp.com/blog/blog/"> Blog </a> </div> </div> <div class="paddingLeftRight-m"> <div class="breakPointS-paddingLeftRight-xs breakPointM-paddingLeftRight-0 breakPointL-paddingLeftRight-xs"> <div class="paddingTop-xxs breakPointS-paddingTop-0 breakPointM-paddingTop-xxs breakPointL-paddingTop-0 marginBottom-s"> <a href="https://marvelapp.com/blog/gender-inclusivity-in-design/" class="link c-black fontWeight-6 fontSize-xl lineHeight-l breakPointS-fontSize-xxl breakPointS-lineHeight-xl breakPointM-fontSize-xl breakPointM-lineHeight-l breakPointL-fontSize-xxl breakPointL-lineHeight-xl truncateText-three"> Gender Inclusivity in Design </a> </div> <div class="marginBottom-s inline truncateText"> <div class="verticalAlign-middle marginRight-xs"> <div style="margin-left: 10px"> <a class="avatar avatar--xxs display-inlineBlock transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular " href="https://marvelapp.com/blog/author/lain/" style="margin-left: -10px"> <img alt='' src='https://secure.gravatar.com/avatar/58ee19c5ec8a05c49b7d21634f60ad36?s=22&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/58ee19c5ec8a05c49b7d21634f60ad36?s=44&d=mm&r=g 2x' class='avatar-img avatar-22 photo' height='22' width='22' decoding='async'/> <span class="avatar-border"></span> </a> </div> </div> <div class="verticalAlign-middle"> <span class="fontSize-m lineHeight-m c-slate fontWeight-3"> <a class="link link--dark" href="https://marvelapp.com/blog/author/lain/">Lain Bader</a> </span> </div> </div> <div class="textAlign-left c-slate fontSize-m lineHeight-m fontWeight-3 truncateText-four" style="max-height: 100px"> <p>Every designer is playing a part in the image and feeling that their users get from their products and companies. Interactions are influenced in a powerful and meaningful way, beyond just completing a task. Inclusive design isn’t new, but it’s becoming noticed more and more as companies begin to realise that it’s not only good for people and culture, but… <a class="link link--blue fontWeight-4" href="https://marvelapp.com/blog/gender-inclusivity-in-design/">Read More ￫</a></p> </div> </div> </div> <div class="breakPointM-position-absolute width-100 padding-m" style="bottom: 0"> <div class="breakPointS-paddingLeftRight-xs breakPointS-paddingBottom-xs breakPointM-paddingLeftRight-0 breakPointM-paddingBottom-0 breakPointL-paddingLeftRight-xs breakPointL-paddingBottom-xs"> <a class="button button--m button--ghost bg-green--hover" href="https://marvelapp.com/blog/gender-inclusivity-in-design/" style="border-radius: 99px"> Read more </a> </div> </div> </div> </div> <div class="js-post"> <div class="post-card post-card--fixed-height overflow-hidden position-relative bg-white borderRadius-l transitionTimingFunction-ease-in-out transitionDuration-l transitionProperty-all "> <div class="marginBottom-m breakPointS-marginBottom-l breakPointM-marginBottom-m breakPointL-marginBottom-l position-relative"> <a class="aspectRatio aspectRatio--60 width-100 display-block" href="https://marvelapp.com/blog/how-to-run-a-hackathon/"> <div class="aspectRatio-content borderRadiusTop-l backgroundPosition-centerCenter backgroundSize-cover" style="background-image: url(https://marvelapp.com/wp-content/uploads/2021/12/pexels-fauxels-3184296-1500x1000.jpg)"></div> </a> <div class="position-absolute pinFill borderRadiusTop-l bg-blue opacity-0 transitionTimingFunction-ease-in-out transitionDuration-l transitionProperty-all pointerEvents-none"></div> <div class="position-absolute pinFill pinFill pointerEvents-none"> <div class="pinFill display-table"> <div class="display-tableCell verticalAlign-middle textAlign-center"> <svg class="svgIcon fill-white" width="62" height="42" viewBox="0 0 62 42"> <path d="M46.5,42C38,42,31,32.58,31,21S38,0,46.5,0,62,9.42,62,21,55,42,46.5,42Zm0-39C39.61,3,34,11.07,34,21s5.61,18,12.5,18c6.06,0,11.13-6.25,12.26-14.5A8.5,8.5,0,1,1,59,22c0-.32,0-0.63,0-1C59,11.07,53.39,3,46.5,3Zm4,14A5.5,5.5,0,1,0,56,22.5,5.51,5.51,0,0,0,50.5,17Zm-35,25C7,42,0,32.58,0,21S7,0,15.5,0,31,9.42,31,21,24,42,15.5,42Zm0-39C8.61,3,3,11.07,3,21S8.61,39,15.5,39c6.06,0,11.13-6.25,12.26-14.5A8.5,8.5,0,1,1,28,22c0-.32,0-0.63,0-1C28,11.07,22.39,3,15.5,3Zm4,14A5.5,5.5,0,1,0,25,22.5,5.51,5.51,0,0,0,19.5,17Z"/> </svg> </div> </div> </div> <div class="position-absolute paddingLeftRight-m" style="bottom: -11px"> <a class="link display-inlineBlock marginLeftRight-xs paddingLeftRight-xxs lineHeight-m fontSize-xs lineHeight-s fontWeight-5 c-white borderRadius-s bg-blue" href="https://marvelapp.com/blog/blog/"> Blog </a> </div> </div> <div class="paddingLeftRight-m"> <div class="breakPointS-paddingLeftRight-xs breakPointM-paddingLeftRight-0 breakPointL-paddingLeftRight-xs"> <div class="paddingTop-xxs breakPointS-paddingTop-0 breakPointM-paddingTop-xxs breakPointL-paddingTop-0 marginBottom-s"> <a href="https://marvelapp.com/blog/how-to-run-a-hackathon/" class="link c-black fontWeight-6 fontSize-xl lineHeight-l breakPointS-fontSize-xxl breakPointS-lineHeight-xl breakPointM-fontSize-xl breakPointM-lineHeight-l breakPointL-fontSize-xxl breakPointL-lineHeight-xl truncateText-three"> How to run a Hackathon </a> </div> <div class="marginBottom-s inline truncateText"> <div class="verticalAlign-middle marginRight-xs"> <div style="margin-left: 10px"> <a class="avatar avatar--xxs display-inlineBlock transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular " href="https://marvelapp.com/blog/author/jane/" style="margin-left: -10px"> <img alt='' src='https://secure.gravatar.com/avatar/02c137da1030d082ee47d242a20c51ff?s=22&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/02c137da1030d082ee47d242a20c51ff?s=44&d=mm&r=g 2x' class='avatar-img avatar-22 photo' height='22' width='22' decoding='async'/> <span class="avatar-border"></span> </a> </div> </div> <div class="verticalAlign-middle"> <span class="fontSize-m lineHeight-m c-slate fontWeight-3"> <a class="link link--dark" href="https://marvelapp.com/blog/author/jane/">Jane Adojutelegan</a> </span> </div> </div> <div class="textAlign-left c-slate fontSize-m lineHeight-m fontWeight-3 truncateText-four" style="max-height: 100px"> <p>Hackathons are an opportunity for groups of people to combine their skills and ideas to solve problems together. Participants need to be open-minded, collaborative, and passionate about the issue at hand to use the tools at their disposal and find a great solution to a big issue. As an organiser, you’ll need to make sure that the event runs smoothly… <a class="link link--blue fontWeight-4" href="https://marvelapp.com/blog/how-to-run-a-hackathon/">Read More ￫</a></p> </div> </div> </div> <div class="breakPointM-position-absolute width-100 padding-m" style="bottom: 0"> <div class="breakPointS-paddingLeftRight-xs breakPointS-paddingBottom-xs breakPointM-paddingLeftRight-0 breakPointM-paddingBottom-0 breakPointL-paddingLeftRight-xs breakPointL-paddingBottom-xs"> <a class="button button--m button--ghost bg-green--hover" href="https://marvelapp.com/blog/how-to-run-a-hackathon/" style="border-radius: 99px"> Read more </a> </div> </div> </div> </div> <div class="js-post"> <div class="post-card post-card--fixed-height overflow-hidden position-relative bg-white borderRadius-l transitionTimingFunction-ease-in-out transitionDuration-l transitionProperty-all "> <div class="marginBottom-m breakPointS-marginBottom-l breakPointM-marginBottom-m breakPointL-marginBottom-l position-relative"> <a class="aspectRatio aspectRatio--60 width-100 display-block" href="https://marvelapp.com/blog/coding-for-beginners/"> <div class="aspectRatio-content borderRadiusTop-l backgroundPosition-centerCenter backgroundSize-cover" style="background-image: url(https://marvelapp.com/wp-content/uploads/2021/12/jonas-leupe-bD97HdJXaLI-unsplash-1500x1000.jpg)"></div> </a> <div class="position-absolute pinFill borderRadiusTop-l bg-blue opacity-0 transitionTimingFunction-ease-in-out transitionDuration-l transitionProperty-all pointerEvents-none"></div> <div class="position-absolute pinFill pinFill pointerEvents-none"> <div class="pinFill display-table"> <div class="display-tableCell verticalAlign-middle textAlign-center"> <svg class="svgIcon fill-white" width="62" height="42" viewBox="0 0 62 42"> <path d="M46.5,42C38,42,31,32.58,31,21S38,0,46.5,0,62,9.42,62,21,55,42,46.5,42Zm0-39C39.61,3,34,11.07,34,21s5.61,18,12.5,18c6.06,0,11.13-6.25,12.26-14.5A8.5,8.5,0,1,1,59,22c0-.32,0-0.63,0-1C59,11.07,53.39,3,46.5,3Zm4,14A5.5,5.5,0,1,0,56,22.5,5.51,5.51,0,0,0,50.5,17Zm-35,25C7,42,0,32.58,0,21S7,0,15.5,0,31,9.42,31,21,24,42,15.5,42Zm0-39C8.61,3,3,11.07,3,21S8.61,39,15.5,39c6.06,0,11.13-6.25,12.26-14.5A8.5,8.5,0,1,1,28,22c0-.32,0-0.63,0-1C28,11.07,22.39,3,15.5,3Zm4,14A5.5,5.5,0,1,0,25,22.5,5.51,5.51,0,0,0,19.5,17Z"/> </svg> </div> </div> </div> <div class="position-absolute paddingLeftRight-m" style="bottom: -11px"> <a class="link display-inlineBlock marginLeftRight-xs paddingLeftRight-xxs lineHeight-m fontSize-xs lineHeight-s fontWeight-5 c-white borderRadius-s bg-blue" href="https://marvelapp.com/blog/in-the-spotlight/inside-marvel/"> Inside Marvel </a> </div> </div> <div class="paddingLeftRight-m"> <div class="breakPointS-paddingLeftRight-xs breakPointM-paddingLeftRight-0 breakPointL-paddingLeftRight-xs"> <div class="paddingTop-xxs breakPointS-paddingTop-0 breakPointM-paddingTop-xxs breakPointL-paddingTop-0 marginBottom-s"> <a href="https://marvelapp.com/blog/coding-for-beginners/" class="link c-black fontWeight-6 fontSize-xl lineHeight-l breakPointS-fontSize-xxl breakPointS-lineHeight-xl breakPointM-fontSize-xl breakPointM-lineHeight-l breakPointL-fontSize-xxl breakPointL-lineHeight-xl truncateText-three"> How I Learnt to Code as a Beginner (and how you can too) </a> </div> <div class="marginBottom-s inline truncateText"> <div class="verticalAlign-middle marginRight-xs"> <div style="margin-left: 10px"> <a class="avatar avatar--xxs display-inlineBlock transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular " href="https://marvelapp.com/blog/author/lain/" style="margin-left: -10px"> <img alt='' src='https://secure.gravatar.com/avatar/58ee19c5ec8a05c49b7d21634f60ad36?s=22&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/58ee19c5ec8a05c49b7d21634f60ad36?s=44&d=mm&r=g 2x' class='avatar-img avatar-22 photo' height='22' width='22' loading='lazy' decoding='async'/> <span class="avatar-border"></span> </a> </div> </div> <div class="verticalAlign-middle"> <span class="fontSize-m lineHeight-m c-slate fontWeight-3"> <a class="link link--dark" href="https://marvelapp.com/blog/author/lain/">Lain Bader</a> </span> </div> </div> <div class="textAlign-left c-slate fontSize-m lineHeight-m fontWeight-3 truncateText-four" style="max-height: 100px"> <p>Starting at Marvel When I started as a support agent at Marvel, I had no plans of becoming a developer. I had recently finished design school and was looking for an interesting day job where I could do some freelancing on the side. Not only did I find an interesting job, but I found one where I was surrounded by… <a class="link link--blue fontWeight-4" href="https://marvelapp.com/blog/coding-for-beginners/">Read More ￫</a></p> </div> </div> </div> <div class="breakPointM-position-absolute width-100 padding-m" style="bottom: 0"> <div class="breakPointS-paddingLeftRight-xs breakPointS-paddingBottom-xs breakPointM-paddingLeftRight-0 breakPointM-paddingBottom-0 breakPointL-paddingLeftRight-xs breakPointL-paddingBottom-xs"> <a class="button button--m button--ghost bg-green--hover" href="https://marvelapp.com/blog/coding-for-beginners/" style="border-radius: 99px"> Read more </a> </div> </div> </div> </div> <div class="js-post"> <div class="post-card post-card--fixed-height overflow-hidden position-relative bg-white borderRadius-l transitionTimingFunction-ease-in-out transitionDuration-l transitionProperty-all "> <div class="marginBottom-m breakPointS-marginBottom-l breakPointM-marginBottom-m breakPointL-marginBottom-l position-relative"> <a class="aspectRatio aspectRatio--60 width-100 display-block" href="https://marvelapp.com/blog/introducing-marvel-design-cloud-whiteboard-design-present-sync/"> <div class="aspectRatio-content borderRadiusTop-l backgroundPosition-centerCenter backgroundSize-cover" style="background-image: url(https://marvelapp.com/wp-content/uploads/2021/12/Artboddard-Copy-3.png)"></div> </a> <div class="position-absolute pinFill borderRadiusTop-l bg-blue opacity-0 transitionTimingFunction-ease-in-out transitionDuration-l transitionProperty-all pointerEvents-none"></div> <div class="position-absolute pinFill pinFill pointerEvents-none"> <div class="pinFill display-table"> <div class="display-tableCell verticalAlign-middle textAlign-center"> <svg class="svgIcon fill-white" width="62" height="42" viewBox="0 0 62 42"> <path d="M46.5,42C38,42,31,32.58,31,21S38,0,46.5,0,62,9.42,62,21,55,42,46.5,42Zm0-39C39.61,3,34,11.07,34,21s5.61,18,12.5,18c6.06,0,11.13-6.25,12.26-14.5A8.5,8.5,0,1,1,59,22c0-.32,0-0.63,0-1C59,11.07,53.39,3,46.5,3Zm4,14A5.5,5.5,0,1,0,56,22.5,5.51,5.51,0,0,0,50.5,17Zm-35,25C7,42,0,32.58,0,21S7,0,15.5,0,31,9.42,31,21,24,42,15.5,42Zm0-39C8.61,3,3,11.07,3,21S8.61,39,15.5,39c6.06,0,11.13-6.25,12.26-14.5A8.5,8.5,0,1,1,28,22c0-.32,0-0.63,0-1C28,11.07,22.39,3,15.5,3Zm4,14A5.5,5.5,0,1,0,25,22.5,5.51,5.51,0,0,0,19.5,17Z"/> </svg> </div> </div> </div> <div class="position-absolute paddingLeftRight-m" style="bottom: -11px"> <a class="link display-inlineBlock marginLeftRight-xs paddingLeftRight-xxs lineHeight-m fontSize-xs lineHeight-s fontWeight-5 c-white borderRadius-s bg-blue" href="https://marvelapp.com/blog/product-updates/"> Product Updates </a> </div> </div> <div class="paddingLeftRight-m"> <div class="breakPointS-paddingLeftRight-xs breakPointM-paddingLeftRight-0 breakPointL-paddingLeftRight-xs"> <div class="paddingTop-xxs breakPointS-paddingTop-0 breakPointM-paddingTop-xxs breakPointL-paddingTop-0 marginBottom-s"> <a href="https://marvelapp.com/blog/introducing-marvel-design-cloud-whiteboard-design-present-sync/" class="link c-black fontWeight-6 fontSize-xl lineHeight-l breakPointS-fontSize-xxl breakPointS-lineHeight-xl breakPointM-fontSize-xl breakPointM-lineHeight-l breakPointL-fontSize-xxl breakPointL-lineHeight-xl truncateText-three"> Introducing Marvel Design Cloud: Whiteboard. Design. Present. Sync. </a> </div> <div class="marginBottom-s inline truncateText"> <div class="verticalAlign-middle marginRight-xs"> <div style="margin-left: 10px"> <a class="avatar avatar--xxs display-inlineBlock transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular " href="https://marvelapp.com/blog/author/murat/" style="margin-left: -10px"> <img alt='' src='https://secure.gravatar.com/avatar/a1e908deeac1ac1412168b63638be7e5?s=22&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/a1e908deeac1ac1412168b63638be7e5?s=44&d=mm&r=g 2x' class='avatar-img avatar-22 photo' height='22' width='22' loading='lazy' decoding='async'/> <span class="avatar-border"></span> </a> </div> </div> <div class="verticalAlign-middle"> <span class="fontSize-m lineHeight-m c-slate fontWeight-3"> <a class="link link--dark" href="https://marvelapp.com/blog/author/murat/">Murat Mutlu</a> </span> </div> </div> <div class="textAlign-left c-slate fontSize-m lineHeight-m fontWeight-3 truncateText-four" style="max-height: 100px"> <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… <a class="link link--blue fontWeight-4" href="https://marvelapp.com/blog/introducing-marvel-design-cloud-whiteboard-design-present-sync/">Read More ￫</a></p> </div> </div> </div> <div class="breakPointM-position-absolute width-100 padding-m" style="bottom: 0"> <div class="breakPointS-paddingLeftRight-xs breakPointS-paddingBottom-xs breakPointM-paddingLeftRight-0 breakPointM-paddingBottom-0 breakPointL-paddingLeftRight-xs breakPointL-paddingBottom-xs"> <a class="button button--m button--ghost bg-green--hover" href="https://marvelapp.com/blog/introducing-marvel-design-cloud-whiteboard-design-present-sync/" style="border-radius: 99px"> Read more </a> </div> </div> </div> </div> <div class="js-post"> <div class="post-card post-card--fixed-height overflow-hidden position-relative bg-white borderRadius-l transitionTimingFunction-ease-in-out transitionDuration-l transitionProperty-all "> <div class="marginBottom-m breakPointS-marginBottom-l breakPointM-marginBottom-m breakPointL-marginBottom-l position-relative"> <a class="aspectRatio aspectRatio--60 width-100 display-block" href="https://marvelapp.com/blog/the-2021-design-trends-you-need-to-keep-up-with/"> <div class="aspectRatio-content borderRadiusTop-l backgroundPosition-centerCenter backgroundSize-cover" style="background-image: url(https://marvelapp.com/wp-content/uploads/2021/05/geometric-design.jpg)"></div> </a> <div class="position-absolute pinFill borderRadiusTop-l bg-blue opacity-0 transitionTimingFunction-ease-in-out transitionDuration-l transitionProperty-all pointerEvents-none"></div> <div class="position-absolute pinFill pinFill pointerEvents-none"> <div class="pinFill display-table"> <div class="display-tableCell verticalAlign-middle textAlign-center"> <svg class="svgIcon fill-white" width="62" height="42" viewBox="0 0 62 42"> <path d="M46.5,42C38,42,31,32.58,31,21S38,0,46.5,0,62,9.42,62,21,55,42,46.5,42Zm0-39C39.61,3,34,11.07,34,21s5.61,18,12.5,18c6.06,0,11.13-6.25,12.26-14.5A8.5,8.5,0,1,1,59,22c0-.32,0-0.63,0-1C59,11.07,53.39,3,46.5,3Zm4,14A5.5,5.5,0,1,0,56,22.5,5.51,5.51,0,0,0,50.5,17Zm-35,25C7,42,0,32.58,0,21S7,0,15.5,0,31,9.42,31,21,24,42,15.5,42Zm0-39C8.61,3,3,11.07,3,21S8.61,39,15.5,39c6.06,0,11.13-6.25,12.26-14.5A8.5,8.5,0,1,1,28,22c0-.32,0-0.63,0-1C28,11.07,22.39,3,15.5,3Zm4,14A5.5,5.5,0,1,0,25,22.5,5.51,5.51,0,0,0,19.5,17Z"/> </svg> </div> </div> </div> <div class="position-absolute paddingLeftRight-m" style="bottom: -11px"> <a class="link display-inlineBlock marginLeftRight-xs paddingLeftRight-xxs lineHeight-m fontSize-xs lineHeight-s fontWeight-5 c-white borderRadius-s bg-blue" href="https://marvelapp.com/blog/design-thoughts/"> Design Thoughts </a> <a class="link display-inlineBlock marginLeftRight-xs paddingLeftRight-xxs lineHeight-m fontSize-xs lineHeight-s fontWeight-5 c-white borderRadius-s bg-blue" href="https://marvelapp.com/blog/design-thoughts/ui/"> Visual Design </a> </div> </div> <div class="paddingLeftRight-m"> <div class="breakPointS-paddingLeftRight-xs breakPointM-paddingLeftRight-0 breakPointL-paddingLeftRight-xs"> <div class="paddingTop-xxs breakPointS-paddingTop-0 breakPointM-paddingTop-xxs breakPointL-paddingTop-0 marginBottom-s"> <a href="https://marvelapp.com/blog/the-2021-design-trends-you-need-to-keep-up-with/" class="link c-black fontWeight-6 fontSize-xl lineHeight-l breakPointS-fontSize-xxl breakPointS-lineHeight-xl breakPointM-fontSize-xl breakPointM-lineHeight-l breakPointL-fontSize-xxl breakPointL-lineHeight-xl truncateText-three"> The 2021 Design Trends You Need to Keep Up With </a> </div> <div class="marginBottom-s inline truncateText"> <div class="verticalAlign-middle marginRight-xs"> <div style="margin-left: 10px"> <a class="avatar avatar--xxs display-inlineBlock transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular " href="https://marvelapp.com/blog/author/sunni/" style="margin-left: -10px"> <img alt='' src='https://secure.gravatar.com/avatar/abdffa801c2c81b41e632b29f8ceb219?s=22&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/abdffa801c2c81b41e632b29f8ceb219?s=44&d=mm&r=g 2x' class='avatar-img avatar-22 photo' height='22' width='22' loading='lazy' decoding='async'/> <span class="avatar-border"></span> </a> </div> </div> <div class="verticalAlign-middle"> <span class="fontSize-m lineHeight-m c-slate fontWeight-3"> <a class="link link--dark" href="https://marvelapp.com/blog/author/sunni/">Sunni Dhami</a> </span> </div> </div> <div class="textAlign-left c-slate fontSize-m lineHeight-m fontWeight-3 truncateText-four" style="max-height: 100px"> <p>When designing your marketing materials and website, it can be easy to rest on your laurels. However, if you don’t keep up with market trends, your materials will quickly become dry and outdated. As we charge through 2021, it’s essential to consider what design trends are on the horizon and which are here to stay. For the rest of 2021,… <a class="link link--blue fontWeight-4" href="https://marvelapp.com/blog/the-2021-design-trends-you-need-to-keep-up-with/">Read More ￫</a></p> </div> </div> </div> <div class="breakPointM-position-absolute width-100 padding-m" style="bottom: 0"> <div class="breakPointS-paddingLeftRight-xs breakPointS-paddingBottom-xs breakPointM-paddingLeftRight-0 breakPointM-paddingBottom-0 breakPointL-paddingLeftRight-xs breakPointL-paddingBottom-xs"> <a class="button button--m button--ghost bg-green--hover" href="https://marvelapp.com/blog/the-2021-design-trends-you-need-to-keep-up-with/" style="border-radius: 99px"> Read more </a> </div> </div> </div> </div> <div class="js-post"> <div class="post-card post-card--fixed-height overflow-hidden position-relative bg-white borderRadius-l transitionTimingFunction-ease-in-out transitionDuration-l transitionProperty-all "> <div class="marginBottom-m breakPointS-marginBottom-l breakPointM-marginBottom-m breakPointL-marginBottom-l position-relative"> <a class="aspectRatio aspectRatio--60 width-100 display-block" href="https://marvelapp.com/blog/qa-with-design-manager-at-moneybox/"> <div class="aspectRatio-content borderRadiusTop-l backgroundPosition-centerCenter backgroundSize-cover" style="background-image: url(https://marvelapp.com/wp-content/uploads/2021/10/Mish.jpeg)"></div> </a> <div class="position-absolute pinFill borderRadiusTop-l bg-blue opacity-0 transitionTimingFunction-ease-in-out transitionDuration-l transitionProperty-all pointerEvents-none"></div> <div class="position-absolute pinFill pinFill pointerEvents-none"> <div class="pinFill display-table"> <div class="display-tableCell verticalAlign-middle textAlign-center"> <svg class="svgIcon fill-white" width="62" height="42" viewBox="0 0 62 42"> <path d="M46.5,42C38,42,31,32.58,31,21S38,0,46.5,0,62,9.42,62,21,55,42,46.5,42Zm0-39C39.61,3,34,11.07,34,21s5.61,18,12.5,18c6.06,0,11.13-6.25,12.26-14.5A8.5,8.5,0,1,1,59,22c0-.32,0-0.63,0-1C59,11.07,53.39,3,46.5,3Zm4,14A5.5,5.5,0,1,0,56,22.5,5.51,5.51,0,0,0,50.5,17Zm-35,25C7,42,0,32.58,0,21S7,0,15.5,0,31,9.42,31,21,24,42,15.5,42Zm0-39C8.61,3,3,11.07,3,21S8.61,39,15.5,39c6.06,0,11.13-6.25,12.26-14.5A8.5,8.5,0,1,1,28,22c0-.32,0-0.63,0-1C28,11.07,22.39,3,15.5,3Zm4,14A5.5,5.5,0,1,0,25,22.5,5.51,5.51,0,0,0,19.5,17Z"/> </svg> </div> </div> </div> <div class="position-absolute paddingLeftRight-m" style="bottom: -11px"> <a class="link display-inlineBlock marginLeftRight-xs paddingLeftRight-xxs lineHeight-m fontSize-xs lineHeight-s fontWeight-5 c-white borderRadius-s bg-blue" href="https://marvelapp.com/blog/in-the-spotlight/"> In the Spotlight </a> </div> </div> <div class="paddingLeftRight-m"> <div class="breakPointS-paddingLeftRight-xs breakPointM-paddingLeftRight-0 breakPointL-paddingLeftRight-xs"> <div class="paddingTop-xxs breakPointS-paddingTop-0 breakPointM-paddingTop-xxs breakPointL-paddingTop-0 marginBottom-s"> <a href="https://marvelapp.com/blog/qa-with-design-manager-at-moneybox/" class="link c-black fontWeight-6 fontSize-xl lineHeight-l breakPointS-fontSize-xxl breakPointS-lineHeight-xl breakPointM-fontSize-xl breakPointM-lineHeight-l breakPointL-fontSize-xxl breakPointL-lineHeight-xl truncateText-three"> Q&A with Design Manager at Moneybox </a> </div> <div class="marginBottom-s inline truncateText"> <div class="verticalAlign-middle marginRight-xs"> <div style="margin-left: 10px"> <a class="avatar avatar--xxs display-inlineBlock transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular " href="https://marvelapp.com/blog/author/rorymccormick/" style="margin-left: -10px"> <img alt='' src='https://secure.gravatar.com/avatar/993911baf8a2da29a9893e95a5fb6459?s=22&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/993911baf8a2da29a9893e95a5fb6459?s=44&d=mm&r=g 2x' class='avatar-img avatar-22 photo' height='22' width='22' loading='lazy' decoding='async'/> <span class="avatar-border"></span> </a> </div> </div> <div class="verticalAlign-middle"> <span class="fontSize-m lineHeight-m c-slate fontWeight-3"> <a class="link link--dark" href="https://marvelapp.com/blog/author/rorymccormick/">Rory McCormick</a> </span> </div> </div> <div class="textAlign-left c-slate fontSize-m lineHeight-m fontWeight-3 truncateText-four" style="max-height: 100px"> <p>Could you tell us a bit about yourself? Who are you? And what are you working on? I’m Michelle, Design Manager at Moneybox. I joined about a year and a half ago when we were only two designers, and we’ve been scaling the team ever since. We’re now a team of ten designers, and as we’ve scaled, it’s been really… <a class="link link--blue fontWeight-4" href="https://marvelapp.com/blog/qa-with-design-manager-at-moneybox/">Read More ￫</a></p> </div> </div> </div> <div class="breakPointM-position-absolute width-100 padding-m" style="bottom: 0"> <div class="breakPointS-paddingLeftRight-xs breakPointS-paddingBottom-xs breakPointM-paddingLeftRight-0 breakPointM-paddingBottom-0 breakPointL-paddingLeftRight-xs breakPointL-paddingBottom-xs"> <a class="button button--m button--ghost bg-green--hover" href="https://marvelapp.com/blog/qa-with-design-manager-at-moneybox/" style="border-radius: 99px"> Read more </a> </div> </div> </div> </div> <div class="js-post"> <div class="post-card post-card--fixed-height overflow-hidden position-relative bg-white borderRadius-l transitionTimingFunction-ease-in-out transitionDuration-l transitionProperty-all "> <div class="marginBottom-m breakPointS-marginBottom-l breakPointM-marginBottom-m breakPointL-marginBottom-l position-relative"> <a class="aspectRatio aspectRatio--60 width-100 display-block" href="https://marvelapp.com/blog/how-a-strong-relationship-between-product-management-and-ux-delivers-richer-value-for-envato-users/"> <div class="aspectRatio-content borderRadiusTop-l backgroundPosition-centerCenter backgroundSize-cover" style="background-image: url(https://marvelapp.com/wp-content/uploads/2021/10/airfocus-f2C59x5uvn8-unsplash-1500x1000.jpg)"></div> </a> <div class="position-absolute pinFill borderRadiusTop-l bg-blue opacity-0 transitionTimingFunction-ease-in-out transitionDuration-l transitionProperty-all pointerEvents-none"></div> <div class="position-absolute pinFill pinFill pointerEvents-none"> <div class="pinFill display-table"> <div class="display-tableCell verticalAlign-middle textAlign-center"> <svg class="svgIcon fill-white" width="62" height="42" viewBox="0 0 62 42"> <path d="M46.5,42C38,42,31,32.58,31,21S38,0,46.5,0,62,9.42,62,21,55,42,46.5,42Zm0-39C39.61,3,34,11.07,34,21s5.61,18,12.5,18c6.06,0,11.13-6.25,12.26-14.5A8.5,8.5,0,1,1,59,22c0-.32,0-0.63,0-1C59,11.07,53.39,3,46.5,3Zm4,14A5.5,5.5,0,1,0,56,22.5,5.51,5.51,0,0,0,50.5,17Zm-35,25C7,42,0,32.58,0,21S7,0,15.5,0,31,9.42,31,21,24,42,15.5,42Zm0-39C8.61,3,3,11.07,3,21S8.61,39,15.5,39c6.06,0,11.13-6.25,12.26-14.5A8.5,8.5,0,1,1,28,22c0-.32,0-0.63,0-1C28,11.07,22.39,3,15.5,3Zm4,14A5.5,5.5,0,1,0,25,22.5,5.51,5.51,0,0,0,19.5,17Z"/> </svg> </div> </div> </div> <div class="position-absolute paddingLeftRight-m" style="bottom: -11px"> <a class="link display-inlineBlock marginLeftRight-xs paddingLeftRight-xxs lineHeight-m fontSize-xs lineHeight-s fontWeight-5 c-white borderRadius-s bg-blue" href="https://marvelapp.com/blog/design-thoughts/"> Design Thoughts </a> </div> </div> <div class="paddingLeftRight-m"> <div class="breakPointS-paddingLeftRight-xs breakPointM-paddingLeftRight-0 breakPointL-paddingLeftRight-xs"> <div class="paddingTop-xxs breakPointS-paddingTop-0 breakPointM-paddingTop-xxs breakPointL-paddingTop-0 marginBottom-s"> <a href="https://marvelapp.com/blog/how-a-strong-relationship-between-product-management-and-ux-delivers-richer-value-for-envato-users/" class="link c-black fontWeight-6 fontSize-xl lineHeight-l breakPointS-fontSize-xxl breakPointS-lineHeight-xl breakPointM-fontSize-xl breakPointM-lineHeight-l breakPointL-fontSize-xxl breakPointL-lineHeight-xl truncateText-three"> How a strong relationship between Product Management and UX delivers richer value for Envato users </a> </div> <div class="marginBottom-s inline truncateText"> <div class="verticalAlign-middle marginRight-xs"> <div style="margin-left: 10px"> <a class="avatar avatar--xxs display-inlineBlock transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular " href="https://marvelapp.com/blog/author/jimmyjoslin/" style="margin-left: -10px"> <img alt='' src='https://secure.gravatar.com/avatar/5211e76b967a5b1b09ff6a50d4f03b20?s=22&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/5211e76b967a5b1b09ff6a50d4f03b20?s=44&d=mm&r=g 2x' class='avatar-img avatar-22 photo' height='22' width='22' loading='lazy' decoding='async'/> <span class="avatar-border"></span> </a> </div> </div> <div class="verticalAlign-middle"> <span class="fontSize-m lineHeight-m c-slate fontWeight-3"> <a class="link link--dark" href="https://marvelapp.com/blog/author/jimmyjoslin/">Jimmy Joslin</a> </span> </div> </div> <div class="textAlign-left c-slate fontSize-m lineHeight-m fontWeight-3 truncateText-four" style="max-height: 100px"> <p>We all have our blind spots and biases regarding the application of thought towards a problem or solution. Depending on the strategic outcome you’re looking to reach, resources available or time constraints, it can be easy to lose sight of the overall user experience. In doing so, we often rally behind ideas that get us towards the shift of a… <a class="link link--blue fontWeight-4" href="https://marvelapp.com/blog/how-a-strong-relationship-between-product-management-and-ux-delivers-richer-value-for-envato-users/">Read More ￫</a></p> </div> </div> </div> <div class="breakPointM-position-absolute width-100 padding-m" style="bottom: 0"> <div class="breakPointS-paddingLeftRight-xs breakPointS-paddingBottom-xs breakPointM-paddingLeftRight-0 breakPointM-paddingBottom-0 breakPointL-paddingLeftRight-xs breakPointL-paddingBottom-xs"> <a class="button button--m button--ghost bg-green--hover" href="https://marvelapp.com/blog/how-a-strong-relationship-between-product-management-and-ux-delivers-richer-value-for-envato-users/" style="border-radius: 99px"> Read more </a> </div> </div> </div> </div> <div class="js-post"> <div class="post-card post-card--fixed-height overflow-hidden position-relative bg-white borderRadius-l transitionTimingFunction-ease-in-out transitionDuration-l transitionProperty-all "> <div class="marginBottom-m breakPointS-marginBottom-l breakPointM-marginBottom-m breakPointL-marginBottom-l position-relative"> <a class="aspectRatio aspectRatio--60 width-100 display-block" href="https://marvelapp.com/blog/interview-with-jason-lung-senior-designer-at-tesco-bank/"> <div class="aspectRatio-content borderRadiusTop-l backgroundPosition-centerCenter backgroundSize-cover" style="background-image: url(https://marvelapp.com/wp-content/uploads/2021/08/TB-apps-2-1-1500x840.png)"></div> </a> <div class="position-absolute pinFill borderRadiusTop-l bg-blue opacity-0 transitionTimingFunction-ease-in-out transitionDuration-l transitionProperty-all pointerEvents-none"></div> <div class="position-absolute pinFill pinFill pointerEvents-none"> <div class="pinFill display-table"> <div class="display-tableCell verticalAlign-middle textAlign-center"> <svg class="svgIcon fill-white" width="62" height="42" viewBox="0 0 62 42"> <path d="M46.5,42C38,42,31,32.58,31,21S38,0,46.5,0,62,9.42,62,21,55,42,46.5,42Zm0-39C39.61,3,34,11.07,34,21s5.61,18,12.5,18c6.06,0,11.13-6.25,12.26-14.5A8.5,8.5,0,1,1,59,22c0-.32,0-0.63,0-1C59,11.07,53.39,3,46.5,3Zm4,14A5.5,5.5,0,1,0,56,22.5,5.51,5.51,0,0,0,50.5,17Zm-35,25C7,42,0,32.58,0,21S7,0,15.5,0,31,9.42,31,21,24,42,15.5,42Zm0-39C8.61,3,3,11.07,3,21S8.61,39,15.5,39c6.06,0,11.13-6.25,12.26-14.5A8.5,8.5,0,1,1,28,22c0-.32,0-0.63,0-1C28,11.07,22.39,3,15.5,3Zm4,14A5.5,5.5,0,1,0,25,22.5,5.51,5.51,0,0,0,19.5,17Z"/> </svg> </div> </div> </div> <div class="position-absolute paddingLeftRight-m" style="bottom: -11px"> <a class="link display-inlineBlock marginLeftRight-xs paddingLeftRight-xxs lineHeight-m fontSize-xs lineHeight-s fontWeight-5 c-white borderRadius-s bg-blue" href="https://marvelapp.com/blog/in-the-spotlight/"> In the Spotlight </a> </div> </div> <div class="paddingLeftRight-m"> <div class="breakPointS-paddingLeftRight-xs breakPointM-paddingLeftRight-0 breakPointL-paddingLeftRight-xs"> <div class="paddingTop-xxs breakPointS-paddingTop-0 breakPointM-paddingTop-xxs breakPointL-paddingTop-0 marginBottom-s"> <a href="https://marvelapp.com/blog/interview-with-jason-lung-senior-designer-at-tesco-bank/" class="link c-black fontWeight-6 fontSize-xl lineHeight-l breakPointS-fontSize-xxl breakPointS-lineHeight-xl breakPointM-fontSize-xl breakPointM-lineHeight-l breakPointL-fontSize-xxl breakPointL-lineHeight-xl truncateText-three"> Interview with Jason Lung, Senior Designer at Tesco Bank </a> </div> <div class="marginBottom-s inline truncateText"> <div class="verticalAlign-middle marginRight-xs"> <div style="margin-left: 10px"> <a class="avatar avatar--xxs display-inlineBlock transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular " href="https://marvelapp.com/blog/author/rorymccormick/" style="margin-left: -10px"> <img alt='' src='https://secure.gravatar.com/avatar/993911baf8a2da29a9893e95a5fb6459?s=22&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/993911baf8a2da29a9893e95a5fb6459?s=44&d=mm&r=g 2x' class='avatar-img avatar-22 photo' height='22' width='22' loading='lazy' decoding='async'/> <span class="avatar-border"></span> </a> </div> </div> <div class="verticalAlign-middle"> <span class="fontSize-m lineHeight-m c-slate fontWeight-3"> <a class="link link--dark" href="https://marvelapp.com/blog/author/rorymccormick/">Rory McCormick</a> </span> </div> </div> <div class="textAlign-left c-slate fontSize-m lineHeight-m fontWeight-3 truncateText-four" style="max-height: 100px"> <p>Jason Lung is a Senior UX Designer at Tesco Bank, the personal finance arm of one of the UK’s main supermarket brands. Starting his career as a web designer, he’s witnessed the shift toward UX and has learned how to be user-centered in the process. Tell me how you got started in UX? My career started back in the early… <a class="link link--blue fontWeight-4" href="https://marvelapp.com/blog/interview-with-jason-lung-senior-designer-at-tesco-bank/">Read More ￫</a></p> </div> </div> </div> <div class="breakPointM-position-absolute width-100 padding-m" style="bottom: 0"> <div class="breakPointS-paddingLeftRight-xs breakPointS-paddingBottom-xs breakPointM-paddingLeftRight-0 breakPointM-paddingBottom-0 breakPointL-paddingLeftRight-xs breakPointL-paddingBottom-xs"> <a class="button button--m button--ghost bg-green--hover" href="https://marvelapp.com/blog/interview-with-jason-lung-senior-designer-at-tesco-bank/" style="border-radius: 99px"> Read more </a> </div> </div> </div> </div> <div class="js-post"> <div class="post-card post-card--fixed-height overflow-hidden position-relative bg-white borderRadius-l transitionTimingFunction-ease-in-out transitionDuration-l transitionProperty-all "> <div class="marginBottom-m breakPointS-marginBottom-l breakPointM-marginBottom-m breakPointL-marginBottom-l position-relative"> <a class="aspectRatio aspectRatio--60 width-100 display-block" href="https://marvelapp.com/blog/improve-your-ux-with-heatmaps/"> <div class="aspectRatio-content borderRadiusTop-l backgroundPosition-centerCenter backgroundSize-cover" style="background-image: url(https://marvelapp.com/wp-content/uploads/2021/03/Heatmaps@2x.jpg)"></div> </a> <div class="position-absolute pinFill borderRadiusTop-l bg-blue opacity-0 transitionTimingFunction-ease-in-out transitionDuration-l transitionProperty-all pointerEvents-none"></div> <div class="position-absolute pinFill pinFill pointerEvents-none"> <div class="pinFill display-table"> <div class="display-tableCell verticalAlign-middle textAlign-center"> <svg class="svgIcon fill-white" width="62" height="42" viewBox="0 0 62 42"> <path d="M46.5,42C38,42,31,32.58,31,21S38,0,46.5,0,62,9.42,62,21,55,42,46.5,42Zm0-39C39.61,3,34,11.07,34,21s5.61,18,12.5,18c6.06,0,11.13-6.25,12.26-14.5A8.5,8.5,0,1,1,59,22c0-.32,0-0.63,0-1C59,11.07,53.39,3,46.5,3Zm4,14A5.5,5.5,0,1,0,56,22.5,5.51,5.51,0,0,0,50.5,17Zm-35,25C7,42,0,32.58,0,21S7,0,15.5,0,31,9.42,31,21,24,42,15.5,42Zm0-39C8.61,3,3,11.07,3,21S8.61,39,15.5,39c6.06,0,11.13-6.25,12.26-14.5A8.5,8.5,0,1,1,28,22c0-.32,0-0.63,0-1C28,11.07,22.39,3,15.5,3Zm4,14A5.5,5.5,0,1,0,25,22.5,5.51,5.51,0,0,0,19.5,17Z"/> </svg> </div> </div> </div> <div class="position-absolute paddingLeftRight-m" style="bottom: -11px"> <a class="link display-inlineBlock marginLeftRight-xs paddingLeftRight-xxs lineHeight-m fontSize-xs lineHeight-s fontWeight-5 c-white borderRadius-s bg-blue" href="https://marvelapp.com/blog/design-thoughts/ux/"> User Experience </a> </div> </div> <div class="paddingLeftRight-m"> <div class="breakPointS-paddingLeftRight-xs breakPointM-paddingLeftRight-0 breakPointL-paddingLeftRight-xs"> <div class="paddingTop-xxs breakPointS-paddingTop-0 breakPointM-paddingTop-xxs breakPointL-paddingTop-0 marginBottom-s"> <a href="https://marvelapp.com/blog/improve-your-ux-with-heatmaps/" class="link c-black fontWeight-6 fontSize-xl lineHeight-l breakPointS-fontSize-xxl breakPointS-lineHeight-xl breakPointM-fontSize-xl breakPointM-lineHeight-l breakPointL-fontSize-xxl breakPointL-lineHeight-xl truncateText-three"> Improve your UX with heatmaps </a> </div> <div class="marginBottom-s inline truncateText"> <div class="verticalAlign-middle marginRight-xs"> <div style="margin-left: 10px"> <a class="avatar avatar--xxs display-inlineBlock transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular " href="https://marvelapp.com/blog/author/kelsey-traher/" style="margin-left: -10px"> <img alt='' src='https://secure.gravatar.com/avatar/9a4c9716a6ac5ccf7877ea85f191d28e?s=22&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/9a4c9716a6ac5ccf7877ea85f191d28e?s=44&d=mm&r=g 2x' class='avatar-img avatar-22 photo' height='22' width='22' loading='lazy' decoding='async'/> <span class="avatar-border"></span> </a> </div> </div> <div class="verticalAlign-middle"> <span class="fontSize-m lineHeight-m c-slate fontWeight-3"> <a class="link link--dark" href="https://marvelapp.com/blog/author/kelsey-traher/">Kelsey Traher</a> </span> </div> </div> <div class="textAlign-left c-slate fontSize-m lineHeight-m fontWeight-3 truncateText-four" style="max-height: 100px"> <p>It’s often said that actions speak louder than words, and while goal-based and qualitative user tests are a key part of the design journey, sometimes the most informative test of all, is to watch a user interact organically with your design. Instead of taking notes or trying to manually spot the insights, heatmaps record what the user does in a… <a class="link link--blue fontWeight-4" href="https://marvelapp.com/blog/improve-your-ux-with-heatmaps/">Read More ￫</a></p> </div> </div> </div> <div class="breakPointM-position-absolute width-100 padding-m" style="bottom: 0"> <div class="breakPointS-paddingLeftRight-xs breakPointS-paddingBottom-xs breakPointM-paddingLeftRight-0 breakPointM-paddingBottom-0 breakPointL-paddingLeftRight-xs breakPointL-paddingBottom-xs"> <a class="button button--m button--ghost bg-green--hover" href="https://marvelapp.com/blog/improve-your-ux-with-heatmaps/" style="border-radius: 99px"> Read more </a> </div> </div> </div> </div> <div class="js-post"> <div class="post-card post-card--fixed-height overflow-hidden position-relative bg-white borderRadius-l transitionTimingFunction-ease-in-out transitionDuration-l transitionProperty-all "> <div class="marginBottom-m breakPointS-marginBottom-l breakPointM-marginBottom-m breakPointL-marginBottom-l position-relative"> <a class="aspectRatio aspectRatio--60 width-100 display-block" href="https://marvelapp.com/blog/improve-collaboration-with-clients-using-prototypes/"> <div class="aspectRatio-content borderRadiusTop-l backgroundPosition-centerCenter backgroundSize-cover" style="background-image: url(https://marvelapp.com/wp-content/uploads/2021/04/Prototyping-with-clients-header-1500x979.jpg)"></div> </a> <div class="position-absolute pinFill borderRadiusTop-l bg-blue opacity-0 transitionTimingFunction-ease-in-out transitionDuration-l transitionProperty-all pointerEvents-none"></div> <div class="position-absolute pinFill pinFill pointerEvents-none"> <div class="pinFill display-table"> <div class="display-tableCell verticalAlign-middle textAlign-center"> <svg class="svgIcon fill-white" width="62" height="42" viewBox="0 0 62 42"> <path d="M46.5,42C38,42,31,32.58,31,21S38,0,46.5,0,62,9.42,62,21,55,42,46.5,42Zm0-39C39.61,3,34,11.07,34,21s5.61,18,12.5,18c6.06,0,11.13-6.25,12.26-14.5A8.5,8.5,0,1,1,59,22c0-.32,0-0.63,0-1C59,11.07,53.39,3,46.5,3Zm4,14A5.5,5.5,0,1,0,56,22.5,5.51,5.51,0,0,0,50.5,17Zm-35,25C7,42,0,32.58,0,21S7,0,15.5,0,31,9.42,31,21,24,42,15.5,42Zm0-39C8.61,3,3,11.07,3,21S8.61,39,15.5,39c6.06,0,11.13-6.25,12.26-14.5A8.5,8.5,0,1,1,28,22c0-.32,0-0.63,0-1C28,11.07,22.39,3,15.5,3Zm4,14A5.5,5.5,0,1,0,25,22.5,5.51,5.51,0,0,0,19.5,17Z"/> </svg> </div> </div> </div> <div class="position-absolute paddingLeftRight-m" style="bottom: -11px"> <a class="link display-inlineBlock marginLeftRight-xs paddingLeftRight-xxs lineHeight-m fontSize-xs lineHeight-s fontWeight-5 c-white borderRadius-s bg-blue" href="https://marvelapp.com/blog/design-thoughts/prototyping-design-thoughts/"> Design & Prototyping </a> </div> </div> <div class="paddingLeftRight-m"> <div class="breakPointS-paddingLeftRight-xs breakPointM-paddingLeftRight-0 breakPointL-paddingLeftRight-xs"> <div class="paddingTop-xxs breakPointS-paddingTop-0 breakPointM-paddingTop-xxs breakPointL-paddingTop-0 marginBottom-s"> <a href="https://marvelapp.com/blog/improve-collaboration-with-clients-using-prototypes/" class="link c-black fontWeight-6 fontSize-xl lineHeight-l breakPointS-fontSize-xxl breakPointS-lineHeight-xl breakPointM-fontSize-xl breakPointM-lineHeight-l breakPointL-fontSize-xxl breakPointL-lineHeight-xl truncateText-three"> Improve collaboration with clients using Prototypes </a> </div> <div class="marginBottom-s inline truncateText"> <div class="verticalAlign-middle marginRight-xs"> <div style="margin-left: 10px"> <a class="avatar avatar--xxs display-inlineBlock transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular " href="https://marvelapp.com/blog/author/jane/" style="margin-left: -10px"> <img alt='' src='https://secure.gravatar.com/avatar/02c137da1030d082ee47d242a20c51ff?s=22&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/02c137da1030d082ee47d242a20c51ff?s=44&d=mm&r=g 2x' class='avatar-img avatar-22 photo' height='22' width='22' loading='lazy' decoding='async'/> <span class="avatar-border"></span> </a> </div> </div> <div class="verticalAlign-middle"> <span class="fontSize-m lineHeight-m c-slate fontWeight-3"> <a class="link link--dark" href="https://marvelapp.com/blog/author/jane/">Jane Adojutelegan</a> </span> </div> </div> <div class="textAlign-left c-slate fontSize-m lineHeight-m fontWeight-3 truncateText-four" style="max-height: 100px"> <p>When it comes time to share your work with clients or stakeholders, securely sharing your Marvel prototype is easy. Prototypes can be shared in two ways: either by giving a client view-only access to your workspace, or alternatively by sharing a public URL. If your stakeholders have feedback, they can make any notes directly in Marvel using comments and annotations…. <a class="link link--blue fontWeight-4" href="https://marvelapp.com/blog/improve-collaboration-with-clients-using-prototypes/">Read More ￫</a></p> </div> </div> </div> <div class="breakPointM-position-absolute width-100 padding-m" style="bottom: 0"> <div class="breakPointS-paddingLeftRight-xs breakPointS-paddingBottom-xs breakPointM-paddingLeftRight-0 breakPointM-paddingBottom-0 breakPointL-paddingLeftRight-xs breakPointL-paddingBottom-xs"> <a class="button button--m button--ghost bg-green--hover" href="https://marvelapp.com/blog/improve-collaboration-with-clients-using-prototypes/" style="border-radius: 99px"> Read more </a> </div> </div> </div> </div> <div class="js-post"> <div class="post-card post-card--fixed-height overflow-hidden position-relative bg-white borderRadius-l transitionTimingFunction-ease-in-out transitionDuration-l transitionProperty-all "> <div class="marginBottom-m breakPointS-marginBottom-l breakPointM-marginBottom-m breakPointL-marginBottom-l position-relative"> <a class="aspectRatio aspectRatio--60 width-100 display-block" href="https://marvelapp.com/blog/why-you-should-add-wireframing-to-your-design-process/"> <div class="aspectRatio-content borderRadiusTop-l backgroundPosition-centerCenter backgroundSize-cover" style="background-image: url(https://marvelapp.com/wp-content/uploads/2021/04/wireframe-header-1500x979.jpg)"></div> </a> <div class="position-absolute pinFill borderRadiusTop-l bg-blue opacity-0 transitionTimingFunction-ease-in-out transitionDuration-l transitionProperty-all pointerEvents-none"></div> <div class="position-absolute pinFill pinFill pointerEvents-none"> <div class="pinFill display-table"> <div class="display-tableCell verticalAlign-middle textAlign-center"> <svg class="svgIcon fill-white" width="62" height="42" viewBox="0 0 62 42"> <path d="M46.5,42C38,42,31,32.58,31,21S38,0,46.5,0,62,9.42,62,21,55,42,46.5,42Zm0-39C39.61,3,34,11.07,34,21s5.61,18,12.5,18c6.06,0,11.13-6.25,12.26-14.5A8.5,8.5,0,1,1,59,22c0-.32,0-0.63,0-1C59,11.07,53.39,3,46.5,3Zm4,14A5.5,5.5,0,1,0,56,22.5,5.51,5.51,0,0,0,50.5,17Zm-35,25C7,42,0,32.58,0,21S7,0,15.5,0,31,9.42,31,21,24,42,15.5,42Zm0-39C8.61,3,3,11.07,3,21S8.61,39,15.5,39c6.06,0,11.13-6.25,12.26-14.5A8.5,8.5,0,1,1,28,22c0-.32,0-0.63,0-1C28,11.07,22.39,3,15.5,3Zm4,14A5.5,5.5,0,1,0,25,22.5,5.51,5.51,0,0,0,19.5,17Z"/> </svg> </div> </div> </div> <div class="position-absolute paddingLeftRight-m" style="bottom: -11px"> <a class="link display-inlineBlock marginLeftRight-xs paddingLeftRight-xxs lineHeight-m fontSize-xs lineHeight-s fontWeight-5 c-white borderRadius-s bg-blue" href="https://marvelapp.com/blog/design-thoughts/process/"> Design Process </a> </div> </div> <div class="paddingLeftRight-m"> <div class="breakPointS-paddingLeftRight-xs breakPointM-paddingLeftRight-0 breakPointL-paddingLeftRight-xs"> <div class="paddingTop-xxs breakPointS-paddingTop-0 breakPointM-paddingTop-xxs breakPointL-paddingTop-0 marginBottom-s"> <a href="https://marvelapp.com/blog/why-you-should-add-wireframing-to-your-design-process/" class="link c-black fontWeight-6 fontSize-xl lineHeight-l breakPointS-fontSize-xxl breakPointS-lineHeight-xl breakPointM-fontSize-xl breakPointM-lineHeight-l breakPointL-fontSize-xxl breakPointL-lineHeight-xl truncateText-three"> Why you should add Wireframing to your design process </a> </div> <div class="marginBottom-s inline truncateText"> <div class="verticalAlign-middle marginRight-xs"> <div style="margin-left: 10px"> <a class="avatar avatar--xxs display-inlineBlock transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular " href="https://marvelapp.com/blog/author/jane/" style="margin-left: -10px"> <img alt='' src='https://secure.gravatar.com/avatar/02c137da1030d082ee47d242a20c51ff?s=22&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/02c137da1030d082ee47d242a20c51ff?s=44&d=mm&r=g 2x' class='avatar-img avatar-22 photo' height='22' width='22' loading='lazy' decoding='async'/> <span class="avatar-border"></span> </a> </div> </div> <div class="verticalAlign-middle"> <span class="fontSize-m lineHeight-m c-slate fontWeight-3"> <a class="link link--dark" href="https://marvelapp.com/blog/author/jane/">Jane Adojutelegan</a> </span> </div> </div> <div class="textAlign-left c-slate fontSize-m lineHeight-m fontWeight-3 truncateText-four" style="max-height: 100px"> <p>Spending the time and energy to properly define how an end-product should look and behave is an absolute must. By dedicating time on this step you can help save time, money, and other resources further down the line; and using wireframes is a great way to do this! Wireframes are seen as the skeleton of a prototype. With a wireframe,… <a class="link link--blue fontWeight-4" href="https://marvelapp.com/blog/why-you-should-add-wireframing-to-your-design-process/">Read More ￫</a></p> </div> </div> </div> <div class="breakPointM-position-absolute width-100 padding-m" style="bottom: 0"> <div class="breakPointS-paddingLeftRight-xs breakPointS-paddingBottom-xs breakPointM-paddingLeftRight-0 breakPointM-paddingBottom-0 breakPointL-paddingLeftRight-xs breakPointL-paddingBottom-xs"> <a class="button button--m button--ghost bg-green--hover" href="https://marvelapp.com/blog/why-you-should-add-wireframing-to-your-design-process/" style="border-radius: 99px"> Read more </a> </div> </div> </div> </div> </div> </div> </div> <div class="bg-black"> <div class="grid grid--1"> <div class="position-relative textAlign-center breakPointS-textAlign-left"> <a class="link display-block padding-l bg-marvel bg-marvel--d--hover textAlign-center" href="https://marvelapp.com/blog/page/2/"> <span class="display-inlineBlock c-white userSelect-none fontSize-xl breakPointS-fontSize-xxl breakPointS-padding-xs fontWeight-6"> Next </span> <div class="position-absolute pinTR height-100 display-none breakPointS-display-block"> <div class="display-table height-100"> <div class="display-tableCell verticalAlign-middle paddingLeftRight-l"> <svg class="fill-white opacity-50" width="34" height="24" viewBox="0 0 34 24"> <path class="a" d="M33.78,11.18a2,2,0,0,0-.44-0.74L23.63,0.61a2.09,2.09,0,1,0-3,3L27.05,10H2a2,2,0,1,0,0,4H27l-6.37,6.4a2.09,2.09,0,0,0,3,3l9.78-9.82A2.07,2.07,0,0,0,33.78,11.18Z"> </svg> </div> </div> </div> </a> </div> </div> </div> <div class="width-100 bg-licorice paddingBottom-l breakPointM-paddingBottom-xl"> <div class="pageWrap pageWrap--m"> <div class="position-relative textAlign-center paddingTopBottom-l breakPointM-paddingTopBottom-xl"> <h2 class="c-white fontSize-xl lineHeight-xl breakPointM-fontSize-xxl breakPointM-lineHeight-xxl fontWeight-6"> Categories </h2> </div> <div class="footer-categories" style="margin-top: -10px"> <div> <div class="marginBottom-s"><a class="link link--lightReversed lineHeight-s" href="https://marvelapp.com/blog/design-thoughts/accessiblity/">Accessibility</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--lightReversed lineHeight-s" href="https://marvelapp.com/blog/blog/">Blog</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--lightReversed lineHeight-s" href="https://marvelapp.com/blog/in-the-spotlight/case-study/">Case Study</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--lightReversed lineHeight-s" href="https://marvelapp.com/blog/design-thoughts/prototyping-design-thoughts/">Design & Prototyping</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--lightReversed lineHeight-s" href="https://marvelapp.com/blog/design-thoughts/design-club/">Design Club</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--lightReversed lineHeight-s" href="https://marvelapp.com/blog/design-thoughts/process/">Design Process</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--lightReversed lineHeight-s" href="https://marvelapp.com/blog/design-thoughts/design-systems/">Design Systems</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--lightReversed lineHeight-s" href="https://marvelapp.com/blog/design-thoughts/design-thinking/">Design Thinking</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--lightReversed lineHeight-s" href="https://marvelapp.com/blog/design-thoughts/">Design Thoughts</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--lightReversed lineHeight-s" href="https://marvelapp.com/blog/product-updates/handoff/">Handoff</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--lightReversed lineHeight-s" href="https://marvelapp.com/blog/in-the-spotlight/">In the Spotlight</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--lightReversed lineHeight-s" href="https://marvelapp.com/blog/in-the-spotlight/inside-marvel/">Inside Marvel</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--lightReversed lineHeight-s" href="https://marvelapp.com/blog/product-updates/integrations-api/">Integrations & API</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--lightReversed lineHeight-s" href="https://marvelapp.com/blog/learn-with-marvel/">Learn with Marvel</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--lightReversed lineHeight-s" href="https://marvelapp.com/blog/design-thoughts/product-design/">Product Design</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--lightReversed lineHeight-s" href="https://marvelapp.com/blog/learn-with-marvel/product-tips-and-tricks/">Product Tips & Tricks</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--lightReversed lineHeight-s" href="https://marvelapp.com/blog/product-updates/">Product Updates</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--lightReversed lineHeight-s" href="https://marvelapp.com/blog/product-updates/prototyping/">Prototyping</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--lightReversed lineHeight-s" href="https://marvelapp.com/blog/design-thoughts/remote-working/">Remote Working</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--lightReversed lineHeight-s" href="https://marvelapp.com/blog/design-thoughts/research/">Research</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--lightReversed lineHeight-s" href="https://marvelapp.com/blog/design-thoughts/resources/">Resources</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--lightReversed lineHeight-s" href="https://marvelapp.com/blog/product-updates/engineering/">Small Ships</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--lightReversed lineHeight-s" href="https://marvelapp.com/blog/in-the-spotlight/spilling-tea/">Spilling Tea</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--lightReversed lineHeight-s" href="https://marvelapp.com/blog/design-thoughts/ux/">User Experience</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--lightReversed lineHeight-s" href="https://marvelapp.com/blog/product-updates/user-testing/">User Testing</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--lightReversed lineHeight-s" href="https://marvelapp.com/blog/design-thoughts/user-testing-design-thoughts/">User Testing</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--lightReversed lineHeight-s" href="https://marvelapp.com/blog/viewpoint/">Viewpoint</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--lightReversed lineHeight-s" href="https://marvelapp.com/blog/design-thoughts/ui/">Visual Design</a></div> </div> <div> <div class="marginBottom-s"><a class="link link--lightReversed lineHeight-s" href="https://marvelapp.com/blog/design-thoughts/web-design/">Web Design</a></div> </div> </div> </div> </div> <div class="bg-licorice"> <div class="pageWrap pageWrap--m"> <div class="bg-silver width-100 opacity-40" style="height: 1px"></div> </div> </div><footer class="width-100"> <div class="js-navigation-links navigation-links position-fixed pinAll textAlign-center zi-max opacity-0 visibility-hidden"> <div class="display-table height-100"> <div class="links-menu display-tableCell verticalAlign-middle"> <div class="marginBottom-s"> <a class="js-navigation-link link c-white fontSize-m lineHeight-m fontWeight-5" href="https://marvelapp.com/features/">Features</a> </div> <div class="marginBottom-s"> <a class="js-navigation-link link c-white fontSize-m lineHeight-m fontWeight-5" href="https://marvelapp.com/stories/">Stories</a> </div> <div class="marginBottom-s"> <a class="js-navigation-link link c-white fontSize-m lineHeight-m fontWeight-5" href="https://marvelapp.com/pricing/">Pricing</a> </div> <div class="marginBottom-s"> <a class="js-navigation-link link c-white fontSize-m lineHeight-m fontWeight-5" href="https://marvelapp.com/enterprise/">Enterprise</a> </div> <div class="marginBottom-s"> <a class="js-navigation-link link c-white fontSize-m lineHeight-m fontWeight-5" href="http://blog.marvelapp.com/">Blog</a> </div> <div class="marginBottom-s"> <span class="js-contribute-button link c-white fontSize-m lineHeight-m fontWeight-5">Contribute</span> </div> <div class="marginBottom-s"> <a class="js-navigation-link link c-white fontSize-m lineHeight-m fontWeight-5" href="https://marvelapp.com/signin">Sign In</a> </div> <div class="verticalAlign-middle"> <a class="js-navigation-link link c-white fontSize-m lineHeight-m fontWeight-5" href="https://marvelapp.com/signup">Sign Up</a> </div> </div> </div> <div class="js-navigation-toggle navigation-toggle toggle-close opacity-0 padding-m"> <div class="navigation-toggle-icon"></div> <div class="padding-xs"></div> </div> </div> <div class="footer width-100 bg-licorice breakPointM-paddingTopBottom-xl"> <div class="pageWrap pageWrap--m breakPointM-display-table"> <div class="width-100 breakPointM-width-20 breakPointM-display-tableCell breakPointM-verticalAlign-top"> <div class="paddingTopBottom-l breakPointM-paddingTopBottom-0 breakPointM-paddingLeft-l breakPointL-paddingLeft-0"> <a href="https://marvelapp.com/" class="js-navigation-link"> <svg class="display-block cursor-pointer pointerEvents-auto fill-white scaleUp--hover transitionDuration-m transitionProperty-all transitionTimingFunction-cb--scaleUp" width="70" height="30" viewBox="0 0 70 30"> <path d="M59.439 19.41c-25.462-1.95-46.514 4.12-51.222 6.37-2.625 1.2-2.809 2.7-2.432 3.529.341.635 1.592 1.006 2.966.335 10.106-5.399 30.554-9.705 50.697-8.47.483-.002.873-.399.871-.887-.002-.487-.396-.88-.879-.878zm6.309-7.57c-1.067 1.2-2.625 2.1-3.115 1.65-.49-.45 0-1.87 0-1.87 2.502-1.615 7.367-5.735 7.367-8.884 0-2.92-2.625-3.82-5.399-1.12-2.244 2.413-3.863 5.346-4.716 8.54-1.444 1.42-3.727 3.22-5.775 3.22-1.067 0-1.365-.75-1.216-1.765 1.75-.026 6.606-1.376 6.606-5.435-.007-.678-.294-1.322-.793-1.778-.498-.455-1.162-.681-1.832-.622-2.205 0-5.014 2.25-6.387 5.399-.375-.07-.74-.189-1.085-.353.359-.773.652-1.576.875-2.4.306-1.65-.376-2.7-1.75-2.55-.875.071-1.899.821-2.126 2.55-.092.876.066 1.761.455 2.55-.604 1.87-3.036 4.2-3.876 4.12-.84-.079.114-3.388.954-5.858.46-.474.823-1.035 1.067-1.65.235-.481.072-1.063-.376-1.35-1.251-.457-2.64.13-3.194 1.35-.334.602-.627 1.227-.875 1.87-.682.821-1.75 1.87-2.056 1.765-.455-.3 1.067-2.32.875-3.45-.136-.93-.971-1.59-1.899-1.5-1.374.194-3.194 2.788-3.194 2.788.214-.473.341-.981.376-1.5-.079-.97-1.899-1.42-2.809.371-.623 1.716-1.081 3.489-1.365 5.294-.376.821-1.899 3.22-3.115 3.3-.989.071.227-4.27.376-4.5.534-.821 1.216-2.55 1.067-3.3.013-.364-.15-.712-.436-.935-.286-.222-.662-.292-1.008-.186-.612.161-1.133.565-1.444 1.12-.437-.546-1.137-.803-1.82-.671-4.042.432-6.606 7.402-6.317 10.711.227 1.765 1.067 2.85 2.625 2.647 1.75-.221 3.194-2.77 3.194-2.77s.376 2.1 2.284 1.87c1.413-.436 2.659-1.298 3.57-2.47-.044.119-.071.244-.079.371-.306 1.765 2.625 1.57 2.887.221.875-6.67 3.115-9.44 3.797-9.44.534 0-1.444 3.15-.306 4.35.875 1.05 2.432.221 3.727-.882-.226.832-.352 1.688-.376 2.55-.079 1.87.604 3.37 2.432 3.3 2.432-.071 5.014-3.07 6.685-5.92.44.289.929.493 1.444.6-.174.667-.239 1.359-.192 2.047.149 2.17 1.671 3 3.421 2.92 2.056-.071 4.48-1.65 6.125-3.07.008.082-.021.163-.079.221-.149 1.05.079 3 1.592 3.07 1.75.15 4.786-1.65 6.309-3.529 1.094-.812-.192-2.012-1.102-1.041v.035zm1.627-9.026c.185.019.321.183.306.371 0 1.87-4.716 5.849-4.716 5.849s3.08-6.22 4.41-6.22zm-11.375 3.891c.157-.014.311.047.416.165.105.118.149.279.118.435 0 1.05-1.444 1.87-3.036 1.87.849-1.235 1.837-2.47 2.502-2.47zm-31.499 2.929c-.149 1.12-2.126 6.176-3.194 6.176-1.365.071.682-7.12 2.887-7.058.429-.018.429.282.306.882zm-17.123 1.35c1.295 0-1.067 6.67-.761 9.59.306 2.92 3.57 2.1 3.342.371-.376-2.85 1.592-11.919 3.57-11.919 1.444 0-1.592 6.22-.989 10.12.376 2.55 3.876 1.765 3.5.15-1.067-5.091 2.511-10.04 2.047-13.631-.227-1.5-1.067-2.32-2.056-2.32-3.272 0-5.932 6.591-5.932 6.591s.315-3.758-2.345-3.9c-3.876-.229-7.831 9.37-7.752 18.06.079 2.77 3.57 2.32 3.342.071-.227-3.873 2.056-13.181 4.034-13.181z" /> </svg> </a> </div> </div> <div class="display-table marginBottom-l breakPointM-width-50 breakPointM-float-left breakPointM-marginBottom-0"> <div class="width-50 display-tableCell breakPointM-width-15 breakPointM-verticalAlign-top"> <div class="float-right marginRight-m width-70 breakPointM-width-100 breakPointM-float-none breakPointM-margin-0"> <div class="textAlign-left"> <div class="marginBottom-m"> <span class="c-white textTransform-uppercase fontWeight-7"> Product </span> </div> <div class="marginBottom-s"> <a href="https://marvelapp.com/features/" class="js-navigation-link link link--lightReversed lineHeight-s"> Features </a> </div> <div class="marginBottom-s"> <a href="https://marvelapp.com/pricing/" class="js-navigation-link link link--lightReversed lineHeight-s"> Pricing </a> </div> <div class="marginBottom-s"> <a href="https://marvelapp.com/apps/" class="js-navigation-link link link--lightReversed lineHeight-s"> Apps </a> </div> <div class="marginBottom-s"> <a href="https://marvelapp.com/ios/" class="js-navigation-link link link--lightReversed lineHeight-s"> Marvel for iOS </a> </div> </div> </div> </div> <div class="width-50 display-tableCell breakPointM-width-15 verticalAlign-top"> <div class="float-left marginLeft-m width-70 breakPointM-width-100 breakPointM-float-none breakPointM-margin-0"> <div class="marginBottom-m"> <span class="c-white textTransform-uppercase fontWeight-7"> Company </span> </div> <div class="marginBottom-s"> <a href="https://marvelapp.com/stories/" class="js-navigation-link link link--lightReversed lineHeight-s"> Stories </a> </div> <div class="marginBottom-s"> <a href="https://marvelapp.com/about/" class="js-navigation-link link link--lightReversed lineHeight-s"> About Us </a> </div> <div class="marginBottom-s"> <a href="https://blog.marvelapp.com/" class="link link--lightReversed lineHeight-s is-active"> Blog </a> </div> <div class="marginBottom-s"> <a href="http://marvel.workable.com/" class="link link--lightReversed lineHeight-s" target="_blank"> Careers </a> </div> <a href="https://twitter.com/marvelapp" class="link link--lightReversed lineHeight-s" target="_blank"> Twitter </a> </div> </div> </div> <div class="display-table breakPointM-width-50 breakPointM-float-left"> <div class="width-50 breakPointM-width-15 display-tableCell verticalAlign-top"> <div class="float-right marginRight-m width-70 breakPointM-width-100 breakPointM-float-none breakPointM-margin-0"> <div class="textAlign-left"> <div class="marginBottom-m"> <span class="c-white textTransform-uppercase fontWeight-7"> Bits </span> </div> <div class="marginBottom-s"> <a href="https://help.marvelapp.com/" target="_blank" class="link link--lightReversed lineHeight-s"> Help Center </a> </div> <div class="marginBottom-s"> <a href="https://marvelapp.com/enterprise/" class="js-navigation-link link link--lightReversed lineHeight-s"> Enterprise </a> </div> <div class="marginBottom-s"> <a href="https://marvelapp.com/terms/" class="js-navigation-link link link--lightReversed lineHeight-s"> Terms of Service </a> </div> <div class="marginBottom-s"> <a href="https://marvelapp.com/privacy/" class="js-navigation-link link link--lightReversed lineHeight-s"> Privacy </a> </div> <a href="https://marvelapp.com/styleguide/" target="_blank" class="link link--lightReversed lineHeight-s"> Styleguide </a> </div> </div> </div> <div class="width-50 breakPointM-width-15 display-tableCell verticalAlign-top"> <div class="float-left marginLeft-m width-70 breakPointM-width-100 breakPointM-float-none breakPointM-margin-0"> <div class="marginBottom-m"> <span class="c-white textTransform-uppercase fontWeight-7"> More </span> </div> <div class="marginBottom-s"> <a href="https://marvelapp.com/android-app-builder/" class="js-navigation-link link link--lightReversed lineHeight-s"> Android App Builder </a> </div> <div class="marginBottom-s"> <a href="https://marvelapp.com/apple-watch-prototyping/" class="js-navigation-link link link--lightReversed lineHeight-s"> Apple Watch </a> </div> <div class="marginBottom-s"> <a href="https://marvelapp.com/embed-prototypes/" class="js-navigation-link link link--lightReversed lineHeight-s"> Embed Prototypes </a> </div> <div class="marginBottom-s"> <a href="https://marvelapp.com/prototype-with-sketch/" class="js-navigation-link link link--lightReversed lineHeight-s"> Sketch Prototyping </a> </div> <a href="https://marvelapp.com/user-testing/" class="js-navigation-link link link--lightReversed lineHeight-s"> User Testing </a> </div> </div> </div> <div class="width-100 breakPointM-width-20 breakPointM-display-tableCell breakPointM-verticalAlign-top"> <div class="width-100 paddingTopBottom-l breakPointM-paddingTopBottom-0"> <div class="width-100 breakPointM-width-100 breakPointM-float-none breakPointM-margin-0"> <div class="inline textAlign-center breakPointM-float-right"> <div class="marginRight-m breakPointL-marginRight-l"> <a href="https://www.facebook.com/marvelapp" target="_blank"> <svg width="12" height="28" class="fill-white fill-facebook--hover transitionTimingFunction-cb--scaleUp transitionDuration-m transitionProperty-all scaleUp--hover pointerEvents-auto" viewBox="0 0 12 28"> <path d="M12 4.8h-2.7c-1 0-1.3.6-1.3 1.4v2.8h4l-.5 5h-3.5v14h-5v-14h-3v-5h3v-2.8c0-3.4.9-6 5.3-6.2h3.7v4.8z"></path> </svg> </a> </div> <div class="marginRight-m breakPointL-marginRight-l"> <a href="https://twitter.com/marvelapp" target="_blank"> <svg width="32" height="28" class="fill-white fill-twitter--hover transitionTimingFunction-cb--scaleUp transitionDuration-m transitionProperty-all scaleUp--hover pointerEvents-auto" viewBox="0 0 32 28"> <path d="M32 4.8c-1.2.5-2.4.8-3.8 1 1.4-.7 2.4-1.9 2.9-3.4-1.3.7-2.7 1.2-4.2 1.5-1.2-1.2-2.9-1.9-4.7-1.9-3.6 0-6.6 2.7-6.6 6.1 0 .5.1.9.2 1.4-5.5-.3-10.3-2.7-13.6-6.4-.5.9-.9 1.9-.9 3.1 0 2.1 1.2 4 2.9 5-1.1 0-2.1-.3-3-.8v.1c0 2.9 2.3 5.4 5.3 5.9-.6.1-1.1.2-1.7.2-.4 0-.8 0-1.2-.1.8 2.4 3.3 4.2 6.1 4.2-2.2 1.6-5.1 2.6-8.2 2.6-.5 0-1.1 0-1.6-.1 3 1.8 6.5 2.8 10.2 2.8 12.1 0 18.7-9.2 18.7-17.2v-.8c1.2-.9 2.3-1.9 3.2-3.2z"></path> </svg> </a> </div> <div> <a href="https://dribbble.com/marvelapp" target="_blank"> <svg width="28" height="28" class="fill-white fill-dribbble--hover transitionTimingFunction-cb--scaleUp transitionDuration-m transitionProperty-all scaleUp--hover pointerEvents-auto" viewBox="0 0 28 28"> <path d="M14 0c-7.7 0-14 6.3-14 14s6.3 14 14 14 14-6.3 14-14-6.3-14-14-14zm11.5 13.3c-3-.5-5.8-.5-8.3-.1l-.9-2c2.7-1.2 4.9-2.8 6.5-4.8 1.6 2 2.6 4.4 2.7 6.9zm-4.5-8.4c-1.4 1.8-3.3 3.2-5.8 4.3-1.2-2.2-2.5-4.3-4-6.4.9-.2 1.8-.4 2.8-.4 2.7 0 5.1.9 7 2.5zm-12.2-1.2c1.6 2 2.9 4.1 4.1 6.3-2.8.8-6.2 1.3-10.1 1.3.8-3.3 3-6.1 6-7.6zm-6.4 10.3v-.3c4.5 0 8.4-.5 11.6-1.5l.8 1.7c-3.9 1.2-7.2 3.8-9.7 7.6-1.7-2.1-2.7-4.7-2.7-7.5zm4.5 9.1c2.3-3.6 5.2-5.9 8.9-7 1.1 2.8 1.9 5.7 2.4 8.7-1.3.5-2.7.8-4.1.8-2.8 0-5.2-1-7.2-2.5zm13.5.5c-.5-2.7-1.3-5.4-2.2-8 2.2-.3 4.6-.2 7.2.2-.5 3.2-2.4 6.1-5 7.8z"></path> </svg> </a> </div> </div> </div> </div> </div> </div> </div> </footer> <div class="modal-overlay zi-max" id="contribute-to-blog"> <div class="modal-container"> <div class="display-table width-100 height-100"> <div class="modal-icon-wrapper"> <div class="js-close-modal modal-icon modal-icon--light modal-iconClose modal-iconClose--outside"></div> </div> <div class="display-tableCell verticalAlign-middle padding-m"> <div class="modal modal--s modal--borderless"> <div class="marginTop-s marginBottom-xs breakPointS-marginTop-0"> <h3 class="c-black lineHeight-l fontSize-xl fontWeight-5 textAlign-center"> Contribute to the blog </h3> </div> <div class="marginBottom-l"> <p class="c-slate textAlign-center fontWeight-3 fontSize-m lineHeight-m breakPointM-fontSize-l breakPointM-lineHeight-l"> Got a great post you've written that would benefit our awesome community of 500,000 readers? Or maybe you've just got an idea in the works? Let us know! </p> </div> <form name="contribute"> <div class="marginBottom-m name"> <div class="width-100 uiIcon uiIcon--l"> <input type="text" class="js-name width-100 input input--default input--l" spellcheck="false" name="name" placeholder="Your full name"> <svg class="svgIcon fill-smoke--d" width="30" height="30" viewBox="0 -6 30 30" enable-background="new 0 -6 30 30"> <path d="M22.9 16.2c.1-.1.1-.3.1-.4-.2-.8-.5-1.4-.9-1.9s-1-1-1.7-1.4c-.2-.1-.6-.3-1.3-.6-.6-.2-1.1-.4-1.4-.6-.3-.2-.6-.4-.7-.7-.1-.4.1-1 .5-1.7 1.5-2.3 1.8-4.3.8-5.9-.3-.6-.7-1.1-1.3-1.5-.6-.3-1.3-.5-2-.5s-1.4.2-2 .5c-.6.4-1.1.8-1.5 1.5-1 1.6-.7 3.6.8 5.9.5.7.7 1.3.5 1.7-.1.2-.2.4-.5.6-.2.2-.5.3-.7.4-.2.1-.5.2-.9.4-.6.3-1.1.4-1.3.6-.7.4-1.3.9-1.7 1.4-.2.4-.5 1-.7 1.8 0 .1 0 .3.1.4l.3.3c1.6.3 4.1.5 7.6.5 2.3 0 4.2-.1 5.8-.3.2 0 .4 0 .6-.1.2 0 .4-.1.5-.1l.3-.1h.30000000000000004c.2 0 .3-.1.4-.2z"/> </svg> </div> <div class="error textAlign-center"></div> </div> <div class="marginBottom-m email"> <div class="width-100 uiIcon uiIcon--l"> <input class="js-email width-100 input input--default input--l" type="email" spellcheck="false" name="email" placeholder="Email address"> <svg class="svgIcon fill-smoke--d" width="30" height="30" viewBox="0 -6 30 30" enable-background="new 0 -6 30 30"> <path d="M15 11.9c-.9 0-1.7-.2-2.3-.7l-5.7-4.4v8.1c0 .1 0 .3.1.4.1.1.2.2.3.2 2.5.4 5 .5 7.5.5s5-.2 7.5-.5c.1 0 .3-.1.4-.2.2-.1.2-.3.2-.4v-8.1l-5.7 4.4c-.6.5-1.4.7-2.3.7zm-1.3-2.3c.3.3.8.4 1.3.4s1-.1 1.3-.4l6.1-4.7c.3-.3.5-.6.6-1v-.8c0-.1 0-.3-.1-.4-.1-.1-.2-.2-.4-.2-2.5-.3-5-.5-7.5-.5s-5 .2-7.5.5c-.1 0-.2.1-.3.2-.2.1-.2.3-.2.4v.9c.1.3.3.6.6 1l6.1 4.6z"/> </svg> </div> <div class="error textAlign-center"></div> </div> <div class="marginBottom-m phone-number"> <div class="input-tel--l"> <input type="text" class="js-phone-number width-100 input input--default input--l input--tel" type="tel" spellcheck="false" name="phone-number" placeholder="Phone number"> </div> <div class="error textAlign-center"></div> </div> <div class="marginBottom-m"> <div> <textarea class="js-idea textarea textarea--default textarea--m" type="textarea" name="article-idea" placeholder="Your article idea in 100 words or less"></textarea> </div> <div class="error textAlign-center"></div> </div> <button id="contribute-button" type="submit" class="width-100 button button--l button--flat bg-blue display-block"> Submit your idea </button> </form> <div id="contribute-success" class="position-absolute pinTL borderRadius-l bg-white zi-overlay concealed"> <div class="display-table width-100 height-100"> <div class="display-tableCell verticalAlign-middle"> <div class="marginBottom-m"> <div class="position-relative bg-green borderRadius-circle centered" style="width:100px; height:100px"> <svg class="display-block position-absolute pinCenter fill-white" width="50" height="38" viewBox="0 0 50 38"> <path d="M13.9 36.7l-12.2-11.7c-2.3-2.2-2.3-5.7 0-7.9l.1-.1c2.3-2.2 6-2.2 8.3 0l7 6.8 22.8-22.2c2.3-2.2 6-2.2 8.3 0l.1.1c2.3 2.2 2.3 5.7 0 7.9l-27.9 27c-1.8 1.8-4.7 1.8-6.5.1"></path> </svg> </div> </div> <div class="marginBottom-xs"> <h3 class="c-black fontSize-xl lineHeight-xl fontWeight-5 textAlign-center"> Thank you! </h3> </div> <div class="paddingLeftRight-xl"> <p class="fontSize-l fontWeight-3 lineHeight-l textAlign-center c-slate"> Someone from our team will be in touch shortly. </p> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal-overlay zi-max" id="newsletter-modal"> <div class="modal-container"> <div class="display-table width-100 height-100"> <div class="modal-icon-wrapper"> <div class="js-close-modal modal-icon modal-icon--light modal-iconClose modal-iconClose--outside"></div> </div> <div class="display-tableCell verticalAlign-middle padding-m"> <div class="modal modal--s modal--borderless"> <div class="marginTop-s marginBottom-xs breakPointS-marginTop-0"> <h3 class="c-black lineHeight-l fontSize-xl fontWeight-5 textAlign-center"> Looking for the best stories in the design world? </h3> </div> <div class="marginBottom-l"> <p class="c-slate textAlign-center fontWeight-3 fontSize-m lineHeight-m breakPointM-fontSize-l breakPointM-lineHeight-l"> We’ve got your back! Subscribe below and get them delivered right to your inbox every week. </p> </div> <form name="subscribe" class="js-newsletter-form"> <div class="marginBottom-m"> <div class="width-100 uiIcon uiIcon--l"> <input class="js-newsletter-input input input--l input--default width-100" type="email" name="email" placeholder="Enter your email address to subscribe"> <svg class="svgIcon fill-smoke--d" width="30" height="30" viewBox="0 -6 30 30"> <path d="M15 11.9c-.9 0-1.7-.2-2.3-.7l-5.7-4.4v8.1c0 .1 0 .3.1.4.1.1.2.2.3.2 2.5.4 5 .5 7.5.5s5-.2 7.5-.5c.1 0 .3-.1.4-.2.2-.1.2-.3.2-.4v-8.1l-5.7 4.4c-.6.5-1.4.7-2.3.7zm-1.3-2.3c.3.3.8.4 1.3.4s1-.1 1.3-.4l6.1-4.7c.3-.3.5-.6.6-1v-.8c0-.1 0-.3-.1-.4-.1-.1-.2-.2-.4-.2-2.5-.3-5-.5-7.5-.5s-5 .2-7.5.5c-.1 0-.2.1-.3.2-.2.1-.2.3-.2.4v.9c.1.3.3.6.6 1l6.1 4.6z"></path> </svg> </div> </div> <div class="js-newsletter-error position-absolute fontSize-m linHeight-m c-negative" style="bottom: -35px; left: 0"></div> <button class="js-newsletter-link width-100 button button--flat button--l button--stateful bg-marvel" type="submit"> <span>Subscribe Now</span> </button> </form> </div> </div> </div> </div> </div> </body>  <script type="text/javascript"> (function(d,w) { w._hsq = w._hsq || []; w._hsq.push(["setContentType", "standard-page"]); })(document, window); </script>   <script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/3308085.js"></script>  <script type="text/javascript" src="https://marvelapp.com/wp-content/themes/marvel/assets/main.min.js?ver=0.1" id="main-js"></script>  <script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/3308085.js"></script>  <script type="text/javascript" async defer > window.heap=window.heap||[],heap.load=function(e,t){window.heap.appid=e,window.heap.config=t=t||{};var r=t.forceSSL||"https:"===document.location.protocol,a=document.createElement("script");a.type="text/javascript",a.async=!0,a.src=(r?"https:":"http:")+"//cdn.heapanalytics.com/js/heap-"+e+".js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(a,n);for(var o=function(e){return function(){heap.push([e].concat(Array.prototype.slice.call(arguments,0)))}},p=["addEventProperties","addUserProperties","clearEventProperties","identify","resetIdentity","removeEventProperty","setEventProperties","track","unsetEventProperty"],c=0;c<p.length;c++)heap[p[c]]=o(p[c])}; heap.load("3884544131"); </script></html>

CINXE.COM

Marvel Blog - Ideas and words on user experience, design, collaboration and more