CINXE.COM

<!DOCTYPE html><html xmlns:cc="http://creativecommons.org/ns#"><head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# medium-com: http://ogp.me/ns/fb/medium-com#"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=contain"><title>Archive of stories published by UX Collective</title><link rel="canonical" href="https://uxdesign.cc/archive"><meta name="robots" content="index,follow"><meta name="title" content="Archive of stories published by UX Collective"><meta name="referrer" content="unsafe-url"><meta name="description" content="Read top stories published by UX Collective. We believe designers are thinkers as much as they are makers. Curated stories on UX, Visual & Product Design. https://linktr.ee/uxc."><meta name="theme-color" content="#000000"><meta property="og:title" content="Archive of stories published by UX Collective"><meta property="twitter:title" content="Archive of stories published by UX Collective"><meta property="og:url" content="https://uxdesign.cc/archive"><meta property="fb:app_id" content="542599432471018"><meta property="og:description" content="Read top stories published by UX Collective. We believe designers are thinkers as much as they are makers. Curated stories on UX, Visual & Product Design. https://linktr.ee/uxc."><meta name="twitter:description" content="Read top stories published by UX Collective. We believe designers are thinkers as much as they are makers. Curated stories on UX, Visual & Product Design. https://linktr.ee/uxc."><meta name="twitter:image:src" content=""><meta property="og:type" content="medium-com:collection"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:site" content="@uxdesigncc"><meta property="og:site_name" content="UX Collective"><meta name="twitter:app:name:iphone" content="Medium"><meta name="twitter:app:id:iphone" content="828256236"><meta property="al:ios:app_name" content="Medium"><meta property="al:ios:app_store_id" content="828256236"><meta property="al:android:package" content="com.medium.reader"><meta property="al:android:app_name" content="Medium"><meta property="al:web:url" content="https://uxdesign.cc/archive"><link rel="search" type="application/opensearchdescription+xml" title="Medium" href="/osd.xml" /><link rel="alternate" href="android-app://com.medium.reader/https/medium.com" /><link rel="stylesheet" href="https://cdn-static-1.medium.com/_/fp/css/main-branding-base.tWIMt8r3Nl52PPi9OfgcVw.12.css"><script>!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script><script>document.domain = document.domain;</script><script>if (window.top !== window.self) window.location = 'about:blank';var OB_startTime = new Date().getTime(); var OB_loadErrors = []; function _onerror(e) { OB_loadErrors.push(e) }; if (document.addEventListener) document.addEventListener("error", _onerror, true); else if (document.attachEvent) document.attachEvent("onerror", _onerror); function _asyncScript(u) {var d = document, f = d.getElementsByTagName("script")[0], s = d.createElement("script"); s.type = "text/javascript"; s.async = true; s.src = u; f.parentNode.insertBefore(s, f);}function _asyncStyles(u) {var d = document, f = d.getElementsByTagName("script")[0], s = d.createElement("link"); s.rel = "stylesheet"; s.href = u; f.parentNode.insertBefore(s, f); return s}(new Image()).src = "/_/stat?event=pixel.load&origin=" + encodeURIComponent(location.origin);</script><script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date; ga("create", "G-7JY7T788PK", "auto", {"allowLinker": true, "legacyCookieDomain": window.location.hostname});ga("send", "pageview");ga("create", "UA-41116679-1", "auto", 'tracker0'); ga("tracker0.send", "pageview");</script><script async src="https://www.google-analytics.com/analytics.js"></script><script>(function () {var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; document.write("<style>section.section-image--fullBleed.is-backgrounded {padding-top: " + Math.round(1.1 * height) + "px;}section.section-image--fullScreen.is-backgrounded, section.section-image--coverFade.is-backgrounded {min-height: " + height + "px; padding-top: " + Math.round(0.5 * height) + "px;}.u-height100vh {height: " + height + "px !important;}.u-height110vh {height: " + Math.round(1.1 * height) + "px !important;}.u-minHeight100vh {min-height: " + height + "px !important;}.u-maxHeight100vh {max-height: " + height + "px !important;}section.section-image--coverFade {height: " + height + "px;}.section-aspectRatioViewportPlaceholder, .section-aspectRatioViewportCropPlaceholder {max-height: " + height + "px;}.section-aspectRatioViewportBottomSpacer, .section-aspectRatioViewportBottomPlaceholder {max-height: " + Math.round(0.5 * height) + "px;}.zoomable:before {top: " + (-1 * height) + "px; left: " + (-1 * width) + "px; padding: " + height + "px " + width + "px;}</style>");})()</script><link rel="icon" href="https://cdn-images-1.medium.com/fit/c/256/256/1*dn6MbbIIlwobt0jnUcrt_Q.png" class="js-favicon"><link rel="apple-touch-icon" sizes="152x152" href="https://cdn-images-1.medium.com/fit/c/304/304/1*mDhF9X4VO0rCrJvWFatyxg.png"><link rel="apple-touch-icon" sizes="120x120" href="https://cdn-images-1.medium.com/fit/c/240/240/1*mDhF9X4VO0rCrJvWFatyxg.png"><link rel="apple-touch-icon" sizes="76x76" href="https://cdn-images-1.medium.com/fit/c/152/152/1*mDhF9X4VO0rCrJvWFatyxg.png"><link rel="apple-touch-icon" sizes="60x60" href="https://cdn-images-1.medium.com/fit/c/120/120/1*mDhF9X4VO0rCrJvWFatyxg.png"><link rel="mask-icon" href="https://cdn-static-1.medium.com/_/fp/icons/monogram-mask.KPLCSFEZviQN0jQ7veN2RQ.12.svg" color="#171717"></head><body itemscope class=" browser-ie os-windows v-unbound v-glyph v-glyph--m2-unbound-source-serif-pro is-noJs"><script>document.body.className = document.body.className.replace(/(^|\s)is-noJs(\s|$)/, "$1is-js$2")</script><div class="site-main" id="container"><div class="butterBar butterBar--error"></div><div class="surface"><div id="prerendered" class="screenContent"><div class="metabar u-clearfix u-boxShadow4px12pxBlackLighter u-textColorTransparentWhiteDarker u-tintBgColor u-tintSpectrum js-metabar"><div class="branch-journeys-top"></div><div class="js-metabarMiddle metabar-inner u-marginAuto u-maxWidth1032 u-flexCenter u-justifyContentSpaceBetween u-height65 u-xs-height56 u-paddingHorizontal20"><div class="metabar-block u-flex1 u-flexCenter"><div class="js-metabarLogoLeft"><a href="https://medium.com/" data-log-event="home" class="siteNav-logo u-fillWhite u-flex0 u-flexCenter u-paddingTop0"><span class="svgIcon svgIcon--wordmarkMedium svgIcon--120x26px u-flex"><svg class="svgIcon-use" width="120" height="26" ><path d="M29.57 1.404l.036-.008V1.12h-7.27l-6.75 15.979-6.75-15.98H1.003v.278l.035.008c1.327.302 2 .752 2 2.374v18.993c0 1.623-.676 2.073-2.003 2.374L1 25.153v.279h5.315v-.278l-.035-.008c-1.327-.302-2-.751-2-2.374V4.88l8.67 20.552h.492l8.924-21.125V23.24c-.114 1.282-.782 1.677-1.983 1.95l-.036.009v.275h9.259V25.2l-.036-.008c-1.203-.274-1.886-.67-2-1.95l-.006-19.464h.006c0-1.622.674-2.072 2-2.374zm4.23 12.582c.15-3.412 1.367-5.875 3.41-5.918.629.01 1.157.219 1.568.62.872.852 1.282 2.634 1.219 5.298h-6.198zm-.092.962h10.85v-.046c-.03-2.61-.78-4.64-2.228-6.033-1.25-1.204-3.103-1.867-5.048-1.867h-.043c-1.01 0-2.248.246-3.13.693a7.316 7.316 0 00-2.623 2.086c-1.185 1.479-1.903 3.477-2.078 5.724a13.717 13.717 0 00-.04.755c-.004.195-.005.39-.001.587.117 5.087 2.846 9.153 7.692 9.153 4.254 0 6.73-3.132 7.348-7.336l-.312-.11c-1.085 2.259-3.034 3.628-5.252 3.461-3.028-.228-5.347-3.32-5.137-7.066m23.122 6.893c-.356.85-1.099 1.319-2.094 1.319-.995 0-1.905-.689-2.552-1.939-.694-1.342-1.06-3.24-1.06-5.487 0-4.678 1.445-7.704 3.68-7.704.937 0 1.674.468 2.026 1.284v12.527zm7.198 3.335c-1.327-.316-2-.787-2-2.492V0l-8.062 2.392v.293l.05-.004c1.111-.09 1.866.064 2.304.472.343.32.51.809.51 1.498v3.11C56.033 7.25 55.088 7 53.94 7c-2.326 0-4.453.987-5.986 2.779-1.599 1.867-2.444 4.42-2.444 7.38 0 5.287 2.584 8.84 6.43 8.84 2.25 0 4.06-1.242 4.888-3.336v2.811h7.233v-.29l-.035-.008zM70.94 3.085c0-1.65-1.236-2.896-2.875-2.896-1.632 0-2.908 1.272-2.908 2.896 0 1.624 1.278 2.896 2.908 2.896 1.64 0 2.875-1.245 2.875-2.896zm1.903 22.092c-1.327-.316-2-.787-2-2.492h-.006V7.055l-7.234 2.092v.284l.043.004c1.566.14 1.994.683 1.994 2.525v13.515h7.24v-.29l-.037-.008zm18.536 0c-1.327-.316-2-.787-2-2.492V7.055L82.49 9.078v.285l.04.004c1.28.136 1.65.71 1.65 2.56v9.88c-.426.85-1.227 1.356-2.196 1.39-1.573 0-2.439-1.07-2.439-3.012V7.055l-7.234 2.092v.284l.044.004c1.565.14 1.994.683 1.994 2.525v8.362a9.443 9.443 0 00.15 1.741l.13.57C75.243 24.845 76.848 26 79.362 26c2.129 0 3.996-1.328 4.818-3.405v2.885h7.233v-.291l-.034-.012zm28.102.298v-.291l-.035-.009c-1.44-.334-2.001-.964-2.001-2.248V12.295C117.445 8.98 115.597 7 112.5 7c-2.257 0-4.16 1.314-4.893 3.36-.582-2.168-2.257-3.36-4.734-3.36-2.175 0-3.88 1.156-4.612 3.11V7.056l-7.233 2.006v.286l.043.004c1.547.138 1.994.697 1.994 2.492v13.631h6.75v-.29l-.037-.01c-1.148-.271-1.519-.767-1.519-2.04V10.95c.304-.715.917-1.562 2.127-1.562 1.504 0 2.266 1.05 2.266 3.116v12.972h6.751v-.29l-.035-.01c-1.149-.271-1.52-.767-1.52-2.04V12.294a7.107 7.107 0 00-.095-1.21c.322-.777.97-1.696 2.23-1.696 1.524 0 2.265 1.02 2.265 3.116v12.972h7.233z"/></svg></span><span class="u-textScreenReader">Homepage</span></a></div><div class="u-paddingLeft10 u-sm-show r-paddingRight10"><a href="https://rsci.app.link/?%24canonical_url=https%3A%2F%2Fmedium.com/user-experience-design-1%3F~feature=LoMobileNavBar&~channel=ShowCollectionHome&~stage=m2">Open in app</a></div><div class="u-flexCenter u-height65 u-xs-height56"><span class="u-inlineBlock u-height28 u-xs-height24 u-verticalAlignTop u-marginRight20 u-marginLeft15 u-borderRightTransparentWhiteLighter"></span></div><div class="u-flexCenter u-height65 u-xs-height56 u-marginRight18"><div class="u-xs-show"><a class="link u-baseColor--link avatar avatar--roundedRectangle" href="https://uxdesign.cc?source=avatar-lo_3274541549b1-138adf9c44c" title="Go to UX Collective" aria-label="Go to UX Collective" data-action-source="avatar-lo_3274541549b1-138adf9c44c" data-collection-slug="user-experience-design-1"><img src="https://cdn-images-1.medium.com/fit/c/64/64/1*mDhF9X4VO0rCrJvWFatyxg.png" class="avatar-image avatar-image--icon" alt="UX Collective"></a></div><div class="u-xs-hide"><a href="https://uxdesign.cc?source=logo-lo_3274541549b1---138adf9c44c" class="u-flexCenter js-collectionLogoOrName"><img height="36" width="216" src="https://cdn-images-1.medium.com/letterbox/432/72/50/50/1*9V9oqYyYnfP5yy7cb7YTMQ.png?source=logoAvatar-lo_3274541549b1---138adf9c44c" alt="UX Collective" /></a></div></div></div><div class="metabar-block u-flex0 u-flexCenter"><div class="u-flexCenter u-height65 u-xs-height56"><div class="buttonSet buttonSet--wide u-lineHeightInherit"><a class="button button--primary button--light button--chromeless u-accentColor--buttonNormal is-inSiteNavBar u-xs-hide js-signInButton" href="https://medium.com/m/signin?redirect=https%3A%2F%2Fuxdesign.cc%2Farchive&source=--------------------------nav_reg&operation=login" data-action="sign-in-prompt" data-redirect="https://uxdesign.cc/archive" data-action-source="--------------------------nav_reg">Sign in</a><a class="button button--primary button--light button--withChrome u-accentColor--buttonNormal is-inSiteNavBar js-signUpButton" href="https://medium.com/m/signin?redirect=https%3A%2F%2Fuxdesign.cc%2Farchive&source=--------------------------nav_reg&operation=register" data-action="sign-up-prompt" data-redirect="https://uxdesign.cc/archive" data-action-source="--------------------------nav_reg">Get started</a></div></div></div></div></div><div class="metabar metabar--spacer js-metabarSpacer u-tintBgColor u-height65 u-xs-height56"></div><div class="container u-maxWidth1040 u-marginTop30"><div class="col u-xs-size12of12 u-size8of12 u-padding0"><header class="heading heading--borderedBottom" ><div class="u-clearfix"><div class="heading-content u-floatLeft"><span class="heading-title">Archive of stories published by UX Collective</span></div></div></header><div class="u-marginTop20 container u-fontSize14 u-textColorDark"><div class="row"><div class="col u-inlineBlock u-paddingLeft0 u-verticalAlignTop u-paddingRight0"><a class="button button--withChrome u-baseColor--buttonNormal button--withIcon button--withSvgIcon button--withIconRight button--withIconAndLabel button--withSvgIcon button--chromeless" href="https://uxdesign.cc/archive"><span class="button-label"><strong>All</strong></span><span class="button-defaultState"><span class="svgIcon svgIcon--arrowRight svgIcon--21px is-flushRight"><svg class="svgIcon-use" width="21" height="21" ><path d="M8.3 4.2l6.4 6.3-6.4 6.3-.8-.8 5.5-5.5L7.5 5" fill-rule="evenodd"/></svg></span></span></a></div><div class="col u-inlineBlock u-maxWidth300 u-verticalAlignTop u-lineHeight35"><div class="timebucket u-inlineBlock u-width50"><a href="https://uxdesign.cc/archive/2013">2013</a></div><div class="timebucket u-inlineBlock u-width50"><a href="https://uxdesign.cc/archive/2014">2014</a></div><div class="timebucket u-inlineBlock u-width50"><a href="https://uxdesign.cc/archive/2015">2015</a></div><div class="timebucket u-inlineBlock u-width50"><a href="https://uxdesign.cc/archive/2016">2016</a></div><div class="timebucket u-inlineBlock u-width50"><a href="https://uxdesign.cc/archive/2017">2017</a></div><div class="timebucket u-inlineBlock u-width50"><a href="https://uxdesign.cc/archive/2018">2018</a></div><div class="timebucket u-inlineBlock u-width50"><a href="https://uxdesign.cc/archive/2019">2019</a></div><div class="timebucket u-inlineBlock u-width50"><a href="https://uxdesign.cc/archive/2020">2020</a></div><div class="timebucket u-inlineBlock u-width50"><a href="https://uxdesign.cc/archive/2021">2021</a></div><div class="timebucket u-inlineBlock u-width50"><a href="https://uxdesign.cc/archive/2022">2022</a></div><div class="timebucket u-inlineBlock u-width50"><a href="https://uxdesign.cc/archive/2023">2023</a></div><div class="timebucket u-inlineBlock u-width50"><a href="https://uxdesign.cc/archive/2024">2024</a></div></div><div class="col u-inlineBlock u-maxWidth300 u-verticalAlignTop u-lineHeight35"></div><div class="col u-inlineBlock u-floatRight u-verticalAlignTop u-paddingRight0 u-paddingLeft0 js-sortToggle"><button class="button button--withChrome u-baseColor--buttonNormal button--withIcon button--withSvgIcon button--withIconRight button--withIconAndLabel button--chromeless" data-action="open-sort-popover" data-action-value="toggle"><span class="button-label js-buttonLabel">Sort by most read</span><span class="svgIcon svgIcon--arrowDown svgIcon--21px is-flushRight"><svg class="svgIcon-use" width="21" height="21" ><path d="M4 7.331l6.032 6.67.495.547.495-.547 5.973-6.603-.989-.895-5.974 6.603h.99l-6.033-6.67z" fill-rule="evenodd"/></svg></span></button></div></div></div><div class="u-marginTop25 js-postStream"><div class="streamItem streamItem--postPreview js-streamItem"><div class="cardChromeless u-marginTop20 u-paddingTop10 u-paddingBottom15 u-paddingLeft20 u-paddingRight20"><div class="postArticle postArticle--short js-postArticle js-trackPostPresentation js-trackPostScrolls" data-post-id="60713dc86950" data-source="collection_archive---------0-----------------------"><div class="u-clearfix u-marginBottom15 u-paddingTop5"><div class="postMetaInline u-floatLeft u-sm-maxWidthFullWidth"><div class="u-flexCenter"><div class="postMetaInline-avatar u-flex0"><a class="link u-baseColor--link avatar" href="https://uxdesign.cc/@fabriciot" data-action="show-user-card" data-action-value="50e39baefa55" data-action-type="hover" data-user-id="50e39baefa55" data-collection-slug="user-experience-design-1" dir="auto"><img src="https://cdn-images-1.medium.com/fit/c/72/72/1*86azy9AQulxnSdnJdvctFQ.jpeg" class="avatar-image u-size36x36 u-xs-size32x32" alt="Go to the profile of Fabricio Teixeira"></a></div><div class="postMetaInline postMetaInline-authorLockup ui-captionStrong u-flex1 u-noWrapWithEllipsis"><a class="ds-link ds-link--styleSubtle link link--darken link--accent u-accentColor--textNormal u-accentColor--textDarken" href="https://uxdesign.cc/@fabriciot?source=collection_archive---------0-----------------------" data-action="show-user-card" data-action-source="collection_archive---------0-----------------------" data-action-value="50e39baefa55" data-action-type="hover" data-user-id="50e39baefa55" data-collection-slug="user-experience-design-1" dir="auto">Fabricio Teixeira</a> in <a class="ds-link ds-link--styleSubtle link--darken link--accent u-accentColor--textNormal" href="https://uxdesign.cc?source=collection_archive---------0-----------------------" data-action="show-collection-card" data-action-source="collection_archive---------0-----------------------" data-action-value="user-experience-design-1" data-action-type="hover" data-collection-slug="user-experience-design-1">UX Collective</a><div class="ui-caption u-fontSize12 u-baseColor--textNormal u-textColorNormal js-postMetaInlineSupplemental"><a class="link link--darken" href="https://uxdesign.cc/the-worst-volume-control-ui-in-the-world-60713dc86950?source=collection_archive---------0-----------------------" data-action="open-post" data-action-value="https://uxdesign.cc/the-worst-volume-control-ui-in-the-world-60713dc86950?source=collection_archive---------0-----------------------" data-action-source="preview-listing" ><time datetime="2017-06-15T00:49:01.837Z">Jun 14, 2017</time></a><span class="middotDivider u-fontSize12"></span><span class="readingTime" title="4 min read"></span></div></div></div></div></div><div><a class="" href="https://uxdesign.cc/the-worst-volume-control-ui-in-the-world-60713dc86950?source=collection_archive---------0-----------------------" data-action-source="collection_archive---------0-----------------------"><div class="postArticle-content js-postField"><section class="section section--body section--first section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><figure name="previewImage" id="previewImage" class="graf graf--figure graf--layoutCroppedHeightPreview graf--leading"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 30%;"></div><img class="graf-image" data-image-id="1*Hd6mWoraRdfF2e4d2XkDRA.gif" data-width="500" data-height="250" data-is-featured="true" src="https://cdn-images-1.medium.com/fit/t/1600/480/1*Hd6mWoraRdfF2e4d2XkDRA.gif"></div></figure><h3 name="39e2" id="39e2" class="graf graf--h3 graf-after--figure graf--title">The worst volume control UI in the world</h3><p name="8b89" id="8b89" class="graf graf--p graf-after--h3 graf--trailing">A group of bored developers and designers has decided to start a <span class="markup--anchor markup--p-anchor" data-action="open-inner-link" data-action-value="https://www.reddit.com/r/ProgrammerHumor/search?q=volume&restrict_sr=on">thread on reddit</a> to…</p></div></div></section></div></a></div><div class="postArticle-readMore"><a class="button button--smaller button--chromeless u-baseColor--buttonNormal" href="https://uxdesign.cc/the-worst-volume-control-ui-in-the-world-60713dc86950?source=collection_archive---------0-----------------------" data-action="open-post" data-action-source="collection_archive---------0-----------------------" data-action-value="https://uxdesign.cc/the-worst-volume-control-ui-in-the-world-60713dc86950?source=collection_archive---------0-----------------------" data-post-id="60713dc86950">Read more…</a></div><div class="u-clearfix u-paddingTop10"><div class="u-floatLeft"><div class="multirecommend js-actionMultirecommend u-flexCenter" data-post-id="60713dc86950" data-is-flush-left="true" data-source="listing-----60713dc86950---------------------clap_preview"><div class="u-relative u-foreground"><button class="button button--primary button--chromeless u-accentColor--buttonNormal button--withIcon button--withSvgIcon clapButton js-actionMultirecommendButton clapButton--darker" data-action="sign-up-prompt" data-sign-in-action="multivote" data-requires-token="true" data-redirect="https://medium.com/_/vote/p/60713dc86950" data-action-source="listing-----60713dc86950---------------------clap_preview" aria-label="Clap"><span class="button-defaultState"><span class="svgIcon svgIcon--clap svgIcon--25px is-flushLeft"><svg class="svgIcon-use" width="25" height="25" ><g fill-rule="evenodd"><path d="M11.739 0l.761 2.966L13.261 0z"/><path d="M14.815 3.776l1.84-2.551-1.43-.471z"/><path d="M8.378 1.224l1.84 2.551L9.81.753z"/><path d="M20.382 21.622c-1.04 1.04-2.115 1.507-3.166 1.608.168-.14.332-.29.492-.45 2.885-2.886 3.456-5.982 1.69-9.211l-1.101-1.937-.955-2.02c-.315-.676-.235-1.185.245-1.556a.836.836 0 01.66-.16c.342.056.66.28.879.605l2.856 5.023c1.179 1.962 1.379 5.119-1.6 8.098m-13.29-.528l-5.02-5.02a1 1 0 01.707-1.701c.255 0 .512.098.707.292l2.607 2.607a.442.442 0 00.624-.624L4.11 14.04l-1.75-1.75a.998.998 0 111.41-1.413l4.154 4.156a.44.44 0 00.624 0 .44.44 0 000-.624l-4.152-4.153-1.172-1.171a.998.998 0 010-1.41 1.018 1.018 0 011.41 0l1.172 1.17 4.153 4.152a.437.437 0 00.624 0 .442.442 0 000-.624L6.43 8.222a.988.988 0 01-.291-.705.99.99 0 01.29-.706 1 1 0 011.412 0l6.992 6.993a.443.443 0 00.71-.501l-1.35-2.856c-.315-.676-.235-1.185.246-1.557a.85.85 0 01.66-.16c.342.056.659.28.879.606L18.628 14c1.573 2.876 1.067 5.545-1.544 8.156-1.396 1.397-3.144 1.966-5.063 1.652-1.713-.286-3.463-1.248-4.928-2.714zM10.99 5.976l2.562 2.562c-.497.607-.563 1.414-.155 2.284l.265.562-4.257-4.257a.98.98 0 01-.117-.445c0-.267.104-.517.292-.706a1.023 1.023 0 011.41 0zm8.887 2.06c-.375-.557-.902-.916-1.486-1.011a1.738 1.738 0 00-1.342.332c-.376.29-.61.656-.712 1.065a2.1 2.1 0 00-1.095-.562 1.776 1.776 0 00-.992.128l-2.636-2.636a1.883 1.883 0 00-2.658 0 1.862 1.862 0 00-.478.847 1.886 1.886 0 00-2.671-.012 1.867 1.867 0 00-.503.909c-.754-.754-1.992-.754-2.703-.044a1.881 1.881 0 000 2.658c-.288.12-.605.288-.864.547a1.884 1.884 0 000 2.659l.624.622a1.879 1.879 0 00-.91 3.16l5.019 5.02c1.595 1.594 3.515 2.645 5.408 2.959a7.16 7.16 0 001.173.098c1.026 0 1.997-.24 2.892-.7.279.04.555.065.828.065 1.53 0 2.969-.628 4.236-1.894 3.338-3.338 3.083-6.928 1.738-9.166l-2.868-5.043z"/></g></svg></span></span><span class="button-activeState"><span class="svgIcon svgIcon--clapFilled svgIcon--25px is-flushLeft"><svg class="svgIcon-use" width="25" height="25" ><g fill-rule="evenodd"><path d="M11.738 0l.762 2.966L13.262 0z"/><path d="M16.634 1.224l-1.432-.47-.408 3.022z"/><path d="M9.79.754l-1.431.47 1.84 2.552z"/><path d="M22.472 13.307l-3.023-5.32c-.287-.426-.689-.705-1.123-.776a1.16 1.16 0 00-.911.221c-.297.231-.474.515-.535.84.017.022.036.04.053.063l2.843 5.001c1.95 3.564 1.328 6.973-1.843 10.144a8.46 8.46 0 01-.549.501c1.205-.156 2.328-.737 3.351-1.76 3.268-3.268 3.041-6.749 1.737-8.914"/><path d="M12.58 9.887c-.156-.83.096-1.569.692-2.142L10.78 5.252c-.5-.504-1.378-.504-1.879 0-.178.18-.273.4-.329.63l4.008 4.005z"/><path d="M15.812 9.04c-.218-.323-.539-.55-.88-.606a.814.814 0 00-.644.153c-.176.137-.713.553-.24 1.566l1.43 3.025a.539.539 0 11-.868.612L7.2 6.378a.986.986 0 10-1.395 1.395l4.401 4.403a.538.538 0 11-.762.762L5.046 8.54 3.802 7.295a.99.99 0 00-1.396 0 .981.981 0 000 1.394L3.647 9.93l4.402 4.403a.537.537 0 010 .761.535.535 0 01-.762 0L2.89 10.696a.992.992 0 00-1.399-.003.983.983 0 000 1.395l1.855 1.854 2.763 2.765a.538.538 0 01-.76.761l-2.765-2.764a.982.982 0 00-1.395 0 .989.989 0 000 1.395l5.32 5.32c3.371 3.372 6.64 4.977 10.49 1.126C19.74 19.8 20.271 17 18.62 13.982L15.812 9.04z"/></g></svg></span></span></button></div><span class="u-relative u-background js-actionMultirecommendCount u-marginLeft5"><button class="button button--chromeless u-baseColor--buttonNormal js-multirecommendCountButton u-disablePointerEvents" data-action="show-recommends" data-action-value="60713dc86950">26K</button></span></div></div><div class="buttonSet u-floatRight"><a class="button button--chromeless u-baseColor--buttonNormal" href="https://uxdesign.cc/the-worst-volume-control-ui-in-the-world-60713dc86950?source=collection_archive---------0-----------------------#--responses" data-action-source="collection_archive---------0-----------------------">67 responses</a><button class="button button--dark button--chromeless is-touchIconFadeInPulse u-baseColor--buttonDark button--withIcon button--withSvgIcon button--bookmark js-bookmarkButton" data-action="add-to-bookmarks" data-action-value="60713dc86950"><span class="js-remove-from-bookmarks u-hide"><span class="svgIcon svgIcon--bookmarkFilled svgIcon--25px is-flushRight"><svg class="svgIcon-use" width="25" height="25" ><path d="M19 6c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v14.66h.012c.01.103.045.204.12.285a.5.5 0 00.706.03L12.5 16.85l5.662 4.126c.205.183.52.17.708-.03a.5.5 0 00.118-.285H19V6z"/></svg></span></span><span class="js-add-to-bookmarks"><span class="svgIcon svgIcon--bookmarkAdd svgIcon--25px is-flushRight"><svg class="svgIcon-use" width="25" height="25" fill="none" ><path d="M18 2.5a.5.5 0 011 0V5h2.5a.5.5 0 010 1H19v2.5a.5.5 0 11-1 0V6h-2.5a.5.5 0 010-1H18V2.5z" fill="#292929"/><path d="M7 7a1 1 0 011-1h3.5a.5.5 0 000-1H8a2 2 0 00-2 2v14a.5.5 0 00.805.396L12.5 17l5.695 4.396A.5.5 0 0019 21v-8.5a.5.5 0 00-1 0v7.485l-5.195-4.012a.5.5 0 00-.61 0L7 19.985V7z" fill="#292929"/></svg></span></span></button></div></div></div></div></div><div class="streamItem streamItem--postPreview js-streamItem"><div class="cardChromeless u-marginTop20 u-paddingTop10 u-paddingBottom15 u-paddingLeft20 u-paddingRight20"><div class="postArticle postArticle--short js-postArticle js-trackPostPresentation js-trackPostScrolls" data-post-id="10bd98614fa9" data-source="collection_archive---------1-----------------------"><div class="u-clearfix u-marginBottom15 u-paddingTop5"><div class="postMetaInline u-floatLeft u-sm-maxWidthFullWidth"><div class="u-flexCenter"><div class="postMetaInline-avatar u-flex0"><a class="link u-baseColor--link avatar" href="https://uxdesign.cc/@skytskyi" data-action="show-user-card" data-action-value="8a4831a624c6" data-action-type="hover" data-user-id="8a4831a624c6" data-collection-slug="user-experience-design-1" dir="auto"><img src="https://cdn-images-1.medium.com/fit/c/72/72/1*q7PId3fNuHJPI_O5pH8Ltw.png" class="avatar-image u-size36x36 u-xs-size32x32" alt="Go to the profile of Taras Skytskyi"></a></div><div class="postMetaInline postMetaInline-authorLockup ui-captionStrong u-flex1 u-noWrapWithEllipsis"><a class="ds-link ds-link--styleSubtle link link--darken link--accent u-accentColor--textNormal u-accentColor--textDarken" href="https://uxdesign.cc/@skytskyi?source=collection_archive---------1-----------------------" data-action="show-user-card" data-action-source="collection_archive---------1-----------------------" data-action-value="8a4831a624c6" data-action-type="hover" data-user-id="8a4831a624c6" data-collection-slug="user-experience-design-1" dir="auto">Taras Skytskyi</a> in <a class="ds-link ds-link--styleSubtle link--darken link--accent u-accentColor--textNormal" href="https://uxdesign.cc?source=collection_archive---------1-----------------------" data-action="show-collection-card" data-action-source="collection_archive---------1-----------------------" data-action-value="user-experience-design-1" data-action-type="hover" data-collection-slug="user-experience-design-1">UX Collective</a><div class="ui-caption u-fontSize12 u-baseColor--textNormal u-textColorNormal js-postMetaInlineSupplemental"><a class="link link--darken" href="https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9?source=collection_archive---------1-----------------------" data-action="open-post" data-action-value="https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9?source=collection_archive---------1-----------------------" data-action-source="preview-listing" ><time datetime="2018-09-05T00:21:32.516Z">Sep 4, 2018</time></a><span class="middotDivider u-fontSize12"></span><span class="readingTime" title="11 min read"></span></div></div></div></div></div><div><a class="" href="https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9?source=collection_archive---------1-----------------------" data-action-source="collection_archive---------1-----------------------"><div class="postArticle-content js-postField"><section class="section section--body section--first section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><figure name="previewImage" id="previewImage" class="graf graf--figure graf--layoutCroppedHeightPreview graf--leading"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 30%;"></div><img class="graf-image" data-image-id="1*Haa2NTc2-cKxUZ4BeFNlEQ.png" data-width="2500" data-height="960" data-is-featured="true" src="https://cdn-images-1.medium.com/fit/t/1600/480/1*Haa2NTc2-cKxUZ4BeFNlEQ.png"></div></figure><h3 name="6477" id="6477" class="graf graf--h3 graf-after--figure graf--trailing graf--title">The ultimate guide<strong class="markup--strong markup--h3-strong"> to proper use of animation in UX</strong></h3></div></div></section></div></a></div><div class="postArticle-readMore"><a class="button button--smaller button--chromeless u-baseColor--buttonNormal" href="https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9?source=collection_archive---------1-----------------------" data-action="open-post" data-action-source="collection_archive---------1-----------------------" data-action-value="https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9?source=collection_archive---------1-----------------------" data-post-id="10bd98614fa9">Read more…</a></div><div class="u-clearfix u-paddingTop10"><div class="u-floatLeft"><div class="multirecommend js-actionMultirecommend u-flexCenter" data-post-id="10bd98614fa9" data-is-flush-left="true" data-source="listing-----10bd98614fa9---------------------clap_preview"><div class="u-relative u-foreground"><button class="button button--primary button--chromeless u-accentColor--buttonNormal button--withIcon button--withSvgIcon clapButton js-actionMultirecommendButton clapButton--darker" data-action="sign-up-prompt" data-sign-in-action="multivote" data-requires-token="true" data-redirect="https://medium.com/_/vote/p/10bd98614fa9" data-action-source="listing-----10bd98614fa9---------------------clap_preview" aria-label="Clap"><span class="button-defaultState"><span class="svgIcon svgIcon--clap svgIcon--25px is-flushLeft"><svg class="svgIcon-use" width="25" height="25" ><g fill-rule="evenodd"><path d="M11.739 0l.761 2.966L13.261 0z"/><path d="M14.815 3.776l1.84-2.551-1.43-.471z"/><path d="M8.378 1.224l1.84 2.551L9.81.753z"/><path d="M20.382 21.622c-1.04 1.04-2.115 1.507-3.166 1.608.168-.14.332-.29.492-.45 2.885-2.886 3.456-5.982 1.69-9.211l-1.101-1.937-.955-2.02c-.315-.676-.235-1.185.245-1.556a.836.836 0 01.66-.16c.342.056.66.28.879.605l2.856 5.023c1.179 1.962 1.379 5.119-1.6 8.098m-13.29-.528l-5.02-5.02a1 1 0 01.707-1.701c.255 0 .512.098.707.292l2.607 2.607a.442.442 0 00.624-.624L4.11 14.04l-1.75-1.75a.998.998 0 111.41-1.413l4.154 4.156a.44.44 0 00.624 0 .44.44 0 000-.624l-4.152-4.153-1.172-1.171a.998.998 0 010-1.41 1.018 1.018 0 011.41 0l1.172 1.17 4.153 4.152a.437.437 0 00.624 0 .442.442 0 000-.624L6.43 8.222a.988.988 0 01-.291-.705.99.99 0 01.29-.706 1 1 0 011.412 0l6.992 6.993a.443.443 0 00.71-.501l-1.35-2.856c-.315-.676-.235-1.185.246-1.557a.85.85 0 01.66-.16c.342.056.659.28.879.606L18.628 14c1.573 2.876 1.067 5.545-1.544 8.156-1.396 1.397-3.144 1.966-5.063 1.652-1.713-.286-3.463-1.248-4.928-2.714zM10.99 5.976l2.562 2.562c-.497.607-.563 1.414-.155 2.284l.265.562-4.257-4.257a.98.98 0 01-.117-.445c0-.267.104-.517.292-.706a1.023 1.023 0 011.41 0zm8.887 2.06c-.375-.557-.902-.916-1.486-1.011a1.738 1.738 0 00-1.342.332c-.376.29-.61.656-.712 1.065a2.1 2.1 0 00-1.095-.562 1.776 1.776 0 00-.992.128l-2.636-2.636a1.883 1.883 0 00-2.658 0 1.862 1.862 0 00-.478.847 1.886 1.886 0 00-2.671-.012 1.867 1.867 0 00-.503.909c-.754-.754-1.992-.754-2.703-.044a1.881 1.881 0 000 2.658c-.288.12-.605.288-.864.547a1.884 1.884 0 000 2.659l.624.622a1.879 1.879 0 00-.91 3.16l5.019 5.02c1.595 1.594 3.515 2.645 5.408 2.959a7.16 7.16 0 001.173.098c1.026 0 1.997-.24 2.892-.7.279.04.555.065.828.065 1.53 0 2.969-.628 4.236-1.894 3.338-3.338 3.083-6.928 1.738-9.166l-2.868-5.043z"/></g></svg></span></span><span class="button-activeState"><span class="svgIcon svgIcon--clapFilled svgIcon--25px is-flushLeft"><svg class="svgIcon-use" width="25" height="25" ><g fill-rule="evenodd"><path d="M11.738 0l.762 2.966L13.262 0z"/><path d="M16.634 1.224l-1.432-.47-.408 3.022z"/><path d="M9.79.754l-1.431.47 1.84 2.552z"/><path d="M22.472 13.307l-3.023-5.32c-.287-.426-.689-.705-1.123-.776a1.16 1.16 0 00-.911.221c-.297.231-.474.515-.535.84.017.022.036.04.053.063l2.843 5.001c1.95 3.564 1.328 6.973-1.843 10.144a8.46 8.46 0 01-.549.501c1.205-.156 2.328-.737 3.351-1.76 3.268-3.268 3.041-6.749 1.737-8.914"/><path d="M12.58 9.887c-.156-.83.096-1.569.692-2.142L10.78 5.252c-.5-.504-1.378-.504-1.879 0-.178.18-.273.4-.329.63l4.008 4.005z"/><path d="M15.812 9.04c-.218-.323-.539-.55-.88-.606a.814.814 0 00-.644.153c-.176.137-.713.553-.24 1.566l1.43 3.025a.539.539 0 11-.868.612L7.2 6.378a.986.986 0 10-1.395 1.395l4.401 4.403a.538.538 0 11-.762.762L5.046 8.54 3.802 7.295a.99.99 0 00-1.396 0 .981.981 0 000 1.394L3.647 9.93l4.402 4.403a.537.537 0 010 .761.535.535 0 01-.762 0L2.89 10.696a.992.992 0 00-1.399-.003.983.983 0 000 1.395l1.855 1.854 2.763 2.765a.538.538 0 01-.76.761l-2.765-2.764a.982.982 0 00-1.395 0 .989.989 0 000 1.395l5.32 5.32c3.371 3.372 6.64 4.977 10.49 1.126C19.74 19.8 20.271 17 18.62 13.982L15.812 9.04z"/></g></svg></span></span></button></div><span class="u-relative u-background js-actionMultirecommendCount u-marginLeft5"><button class="button button--chromeless u-baseColor--buttonNormal js-multirecommendCountButton u-disablePointerEvents" data-action="show-recommends" data-action-value="10bd98614fa9">79K</button></span></div></div><div class="buttonSet u-floatRight"><a class="button button--chromeless u-baseColor--buttonNormal" href="https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9?source=collection_archive---------1-----------------------#--responses" data-action-source="collection_archive---------1-----------------------">134 responses</a><button class="button button--dark button--chromeless is-touchIconFadeInPulse u-baseColor--buttonDark button--withIcon button--withSvgIcon button--bookmark js-bookmarkButton" data-action="add-to-bookmarks" data-action-value="10bd98614fa9"><span class="js-remove-from-bookmarks u-hide"><span class="svgIcon svgIcon--bookmarkFilled svgIcon--25px is-flushRight"><svg class="svgIcon-use" width="25" height="25" ><path d="M19 6c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v14.66h.012c.01.103.045.204.12.285a.5.5 0 00.706.03L12.5 16.85l5.662 4.126c.205.183.52.17.708-.03a.5.5 0 00.118-.285H19V6z"/></svg></span></span><span class="js-add-to-bookmarks"><span class="svgIcon svgIcon--bookmarkAdd svgIcon--25px is-flushRight"><svg class="svgIcon-use" width="25" height="25" fill="none" ><path d="M18 2.5a.5.5 0 011 0V5h2.5a.5.5 0 010 1H19v2.5a.5.5 0 11-1 0V6h-2.5a.5.5 0 010-1H18V2.5z" fill="#292929"/><path d="M7 7a1 1 0 011-1h3.5a.5.5 0 000-1H8a2 2 0 00-2 2v14a.5.5 0 00.805.396L12.5 17l5.695 4.396A.5.5 0 0019 21v-8.5a.5.5 0 00-1 0v7.485l-5.195-4.012a.5.5 0 00-.61 0L7 19.985V7z" fill="#292929"/></svg></span></span></button></div></div></div></div></div><div class="streamItem streamItem--postPreview js-streamItem"><div class="cardChromeless u-marginTop20 u-paddingTop10 u-paddingBottom15 u-paddingLeft20 u-paddingRight20"><div class="postArticle postArticle--short js-postArticle js-trackPostPresentation js-trackPostScrolls" data-post-id="b47cef3bf3a6" data-source="collection_archive---------2-----------------------"><div class="u-clearfix u-marginBottom15 u-paddingTop5"><div class="postMetaInline u-floatLeft u-sm-maxWidthFullWidth"><div class="u-flexCenter"><div class="postMetaInline-avatar u-flex0"><a class="link u-baseColor--link avatar" href="https://uxdesign.cc/@michalmalewicz" data-action="show-user-card" data-action-value="fde1eb3eb589" data-action-type="hover" data-user-id="fde1eb3eb589" data-collection-slug="user-experience-design-1" dir="auto"><img src="https://cdn-images-1.medium.com/fit/c/72/72/1*149zXrb2FXvS_mctL4NKSg.png" class="avatar-image u-size36x36 u-xs-size32x32" alt="Go to the profile of Michal Malewicz"></a></div><div class="postMetaInline postMetaInline-authorLockup ui-captionStrong u-flex1 u-noWrapWithEllipsis"><a class="ds-link ds-link--styleSubtle link link--darken link--accent u-accentColor--textNormal u-accentColor--textDarken" href="https://uxdesign.cc/@michalmalewicz?source=collection_archive---------2-----------------------" data-action="show-user-card" data-action-source="collection_archive---------2-----------------------" data-action-value="fde1eb3eb589" data-action-type="hover" data-user-id="fde1eb3eb589" data-collection-slug="user-experience-design-1" dir="auto">Michal Malewicz</a> in <a class="ds-link ds-link--styleSubtle link--darken link--accent u-accentColor--textNormal" href="https://uxdesign.cc?source=collection_archive---------2-----------------------" data-action="show-collection-card" data-action-source="collection_archive---------2-----------------------" data-action-value="user-experience-design-1" data-action-type="hover" data-collection-slug="user-experience-design-1">UX Collective</a><div class="ui-caption u-fontSize12 u-baseColor--textNormal u-textColorNormal js-postMetaInlineSupplemental"><a class="link link--darken" href="https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6?source=collection_archive---------2-----------------------" data-action="open-post" data-action-value="https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6?source=collection_archive---------2-----------------------" data-action-source="preview-listing" ><time datetime="2019-12-17T01:18:47.002Z">Dec 16, 2019</time></a><span class="middotDivider u-fontSize12"></span><span class="readingTime" title="7 min read"></span><span class="u-paddingLeft4"><span class="svgIcon svgIcon--star svgIcon--15px"><svg class="svgIcon-use" width="15" height="15" ><path d="M7.438 2.324c.034-.099.09-.099.123 0l1.2 3.53a.29.29 0 00.26.19h3.884c.11 0 .127.049.038.111L9.8 8.327a.271.271 0 00-.099.291l1.2 3.53c.034.1-.011.131-.098.069l-3.142-2.18a.303.303 0 00-.32 0l-3.145 2.182c-.087.06-.132.03-.099-.068l1.2-3.53a.271.271 0 00-.098-.292L2.056 6.146c-.087-.06-.071-.112.038-.112h3.884a.29.29 0 00.26-.19l1.2-3.52z"/></svg></span></span></div></div></div></div></div><div><a class="" href="https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6?source=collection_archive---------2-----------------------" data-action-source="collection_archive---------2-----------------------"><div class="postArticle-content js-postField"><section class="section section--body section--first section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><figure name="previewImage" id="previewImage" class="graf graf--figure graf--layoutCroppedHeightPreview graf--leading"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 30%;"></div><img class="graf-image" data-image-id="1*d7_iZtG8vNH0OJrAc1SwIQ.png" data-width="2680" data-height="2218" data-is-featured="true" src="https://cdn-images-1.medium.com/fit/t/1600/480/1*d7_iZtG8vNH0OJrAc1SwIQ.png"></div></figure><h3 name="eef6" id="eef6" class="graf graf--h3 graf-after--figure graf--title">Neumorphism in user interfaces</h3><h4 name="91a4" id="91a4" class="graf graf--h4 graf-after--h3 graf--trailing graf--subtitle">How UI trends reach for inspiration into the real world and what…</h4></div></div></section></div></a></div><div class="postArticle-readMore"><a class="button button--smaller button--chromeless u-baseColor--buttonNormal" href="https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6?source=collection_archive---------2-----------------------" data-action="open-post" data-action-source="collection_archive---------2-----------------------" data-action-value="https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6?source=collection_archive---------2-----------------------" data-post-id="b47cef3bf3a6">Read more…</a></div><div class="u-clearfix u-paddingTop10"><div class="u-floatLeft"><div class="multirecommend js-actionMultirecommend u-flexCenter" data-post-id="b47cef3bf3a6" data-is-flush-left="true" data-source="listing-----b47cef3bf3a6---------------------clap_preview"><div class="u-relative u-foreground"><button class="button button--primary button--chromeless u-accentColor--buttonNormal button--withIcon button--withSvgIcon clapButton js-actionMultirecommendButton clapButton--darker" data-action="sign-up-prompt" data-sign-in-action="multivote" data-requires-token="true" data-redirect="https://medium.com/_/vote/p/b47cef3bf3a6" data-action-source="listing-----b47cef3bf3a6---------------------clap_preview" aria-label="Clap"><span class="button-defaultState"><span class="svgIcon svgIcon--clap svgIcon--25px is-flushLeft"><svg class="svgIcon-use" width="25" height="25" ><g fill-rule="evenodd"><path d="M11.739 0l.761 2.966L13.261 0z"/><path d="M14.815 3.776l1.84-2.551-1.43-.471z"/><path d="M8.378 1.224l1.84 2.551L9.81.753z"/><path d="M20.382 21.622c-1.04 1.04-2.115 1.507-3.166 1.608.168-.14.332-.29.492-.45 2.885-2.886 3.456-5.982 1.69-9.211l-1.101-1.937-.955-2.02c-.315-.676-.235-1.185.245-1.556a.836.836 0 01.66-.16c.342.056.66.28.879.605l2.856 5.023c1.179 1.962 1.379 5.119-1.6 8.098m-13.29-.528l-5.02-5.02a1 1 0 01.707-1.701c.255 0 .512.098.707.292l2.607 2.607a.442.442 0 00.624-.624L4.11 14.04l-1.75-1.75a.998.998 0 111.41-1.413l4.154 4.156a.44.44 0 00.624 0 .44.44 0 000-.624l-4.152-4.153-1.172-1.171a.998.998 0 010-1.41 1.018 1.018 0 011.41 0l1.172 1.17 4.153 4.152a.437.437 0 00.624 0 .442.442 0 000-.624L6.43 8.222a.988.988 0 01-.291-.705.99.99 0 01.29-.706 1 1 0 011.412 0l6.992 6.993a.443.443 0 00.71-.501l-1.35-2.856c-.315-.676-.235-1.185.246-1.557a.85.85 0 01.66-.16c.342.056.659.28.879.606L18.628 14c1.573 2.876 1.067 5.545-1.544 8.156-1.396 1.397-3.144 1.966-5.063 1.652-1.713-.286-3.463-1.248-4.928-2.714zM10.99 5.976l2.562 2.562c-.497.607-.563 1.414-.155 2.284l.265.562-4.257-4.257a.98.98 0 01-.117-.445c0-.267.104-.517.292-.706a1.023 1.023 0 011.41 0zm8.887 2.06c-.375-.557-.902-.916-1.486-1.011a1.738 1.738 0 00-1.342.332c-.376.29-.61.656-.712 1.065a2.1 2.1 0 00-1.095-.562 1.776 1.776 0 00-.992.128l-2.636-2.636a1.883 1.883 0 00-2.658 0 1.862 1.862 0 00-.478.847 1.886 1.886 0 00-2.671-.012 1.867 1.867 0 00-.503.909c-.754-.754-1.992-.754-2.703-.044a1.881 1.881 0 000 2.658c-.288.12-.605.288-.864.547a1.884 1.884 0 000 2.659l.624.622a1.879 1.879 0 00-.91 3.16l5.019 5.02c1.595 1.594 3.515 2.645 5.408 2.959a7.16 7.16 0 001.173.098c1.026 0 1.997-.24 2.892-.7.279.04.555.065.828.065 1.53 0 2.969-.628 4.236-1.894 3.338-3.338 3.083-6.928 1.738-9.166l-2.868-5.043z"/></g></svg></span></span><span class="button-activeState"><span class="svgIcon svgIcon--clapFilled svgIcon--25px is-flushLeft"><svg class="svgIcon-use" width="25" height="25" ><g fill-rule="evenodd"><path d="M11.738 0l.762 2.966L13.262 0z"/><path d="M16.634 1.224l-1.432-.47-.408 3.022z"/><path d="M9.79.754l-1.431.47 1.84 2.552z"/><path d="M22.472 13.307l-3.023-5.32c-.287-.426-.689-.705-1.123-.776a1.16 1.16 0 00-.911.221c-.297.231-.474.515-.535.84.017.022.036.04.053.063l2.843 5.001c1.95 3.564 1.328 6.973-1.843 10.144a8.46 8.46 0 01-.549.501c1.205-.156 2.328-.737 3.351-1.76 3.268-3.268 3.041-6.749 1.737-8.914"/><path d="M12.58 9.887c-.156-.83.096-1.569.692-2.142L10.78 5.252c-.5-.504-1.378-.504-1.879 0-.178.18-.273.4-.329.63l4.008 4.005z"/><path d="M15.812 9.04c-.218-.323-.539-.55-.88-.606a.814.814 0 00-.644.153c-.176.137-.713.553-.24 1.566l1.43 3.025a.539.539 0 11-.868.612L7.2 6.378a.986.986 0 10-1.395 1.395l4.401 4.403a.538.538 0 11-.762.762L5.046 8.54 3.802 7.295a.99.99 0 00-1.396 0 .981.981 0 000 1.394L3.647 9.93l4.402 4.403a.537.537 0 010 .761.535.535 0 01-.762 0L2.89 10.696a.992.992 0 00-1.399-.003.983.983 0 000 1.395l1.855 1.854 2.763 2.765a.538.538 0 01-.76.761l-2.765-2.764a.982.982 0 00-1.395 0 .989.989 0 000 1.395l5.32 5.32c3.371 3.372 6.64 4.977 10.49 1.126C19.74 19.8 20.271 17 18.62 13.982L15.812 9.04z"/></g></svg></span></span></button></div><span class="u-relative u-background js-actionMultirecommendCount u-marginLeft5"><button class="button button--chromeless u-baseColor--buttonNormal js-multirecommendCountButton u-disablePointerEvents" data-action="show-recommends" data-action-value="b47cef3bf3a6">13.4K</button></span></div></div><div class="buttonSet u-floatRight"><a class="button button--chromeless u-baseColor--buttonNormal" href="https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6?source=collection_archive---------2-----------------------#--responses" data-action-source="collection_archive---------2-----------------------">49 responses</a><button class="button button--dark button--chromeless is-touchIconFadeInPulse u-baseColor--buttonDark button--withIcon button--withSvgIcon button--bookmark js-bookmarkButton" data-action="add-to-bookmarks" data-action-value="b47cef3bf3a6"><span class="js-remove-from-bookmarks u-hide"><span class="svgIcon svgIcon--bookmarkFilled svgIcon--25px is-flushRight"><svg class="svgIcon-use" width="25" height="25" ><path d="M19 6c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v14.66h.012c.01.103.045.204.12.285a.5.5 0 00.706.03L12.5 16.85l5.662 4.126c.205.183.52.17.708-.03a.5.5 0 00.118-.285H19V6z"/></svg></span></span><span class="js-add-to-bookmarks"><span class="svgIcon svgIcon--bookmarkAdd svgIcon--25px is-flushRight"><svg class="svgIcon-use" width="25" height="25" fill="none" ><path d="M18 2.5a.5.5 0 011 0V5h2.5a.5.5 0 010 1H19v2.5a.5.5 0 11-1 0V6h-2.5a.5.5 0 010-1H18V2.5z" fill="#292929"/><path d="M7 7a1 1 0 011-1h3.5a.5.5 0 000-1H8a2 2 0 00-2 2v14a.5.5 0 00.805.396L12.5 17l5.695 4.396A.5.5 0 0019 21v-8.5a.5.5 0 00-1 0v7.485l-5.195-4.012a.5.5 0 00-.61 0L7 19.985V7z" fill="#292929"/></svg></span></span></button></div></div></div></div></div><div class="streamItem streamItem--postPreview js-streamItem"><div class="cardChromeless u-marginTop20 u-paddingTop10 u-paddingBottom15 u-paddingLeft20 u-paddingRight20"><div class="postArticle postArticle--short js-postArticle js-trackPostPresentation js-trackPostScrolls" data-post-id="970de4c16e01" data-source="collection_archive---------3-----------------------"><div class="u-clearfix u-marginBottom15 u-paddingTop5"><div class="postMetaInline u-floatLeft u-sm-maxWidthFullWidth"><div class="u-flexCenter"><div class="postMetaInline-avatar u-flex0"><a class="link u-baseColor--link avatar" href="https://uxdesign.cc/@christiet" data-action="show-user-card" data-action-value="f979767824dd" data-action-type="hover" data-user-id="f979767824dd" data-collection-slug="user-experience-design-1" dir="auto"><img src="https://cdn-images-1.medium.com/fit/c/72/72/1*Z1e43YiQS-fo9vvvndLUJw.jpeg" class="avatar-image u-size36x36 u-xs-size32x32" alt="Go to the profile of Christie Tang"></a></div><div class="postMetaInline postMetaInline-authorLockup ui-captionStrong u-flex1 u-noWrapWithEllipsis"><a class="ds-link ds-link--styleSubtle link link--darken link--accent u-accentColor--textNormal u-accentColor--textDarken" href="https://uxdesign.cc/@christiet?source=collection_archive---------3-----------------------" data-action="show-user-card" data-action-source="collection_archive---------3-----------------------" data-action-value="f979767824dd" data-action-type="hover" data-user-id="f979767824dd" data-collection-slug="user-experience-design-1" dir="auto">Christie Tang</a> in <a class="ds-link ds-link--styleSubtle link--darken link--accent u-accentColor--textNormal" href="https://uxdesign.cc?source=collection_archive---------3-----------------------" data-action="show-collection-card" data-action-source="collection_archive---------3-----------------------" data-action-value="user-experience-design-1" data-action-type="hover" data-collection-slug="user-experience-design-1">UX Collective</a><div class="ui-caption u-fontSize12 u-baseColor--textNormal u-textColorNormal js-postMetaInlineSupplemental"><a class="link link--darken" href="https://uxdesign.cc/responsive-grids-and-how-to-actually-use-them-970de4c16e01?source=collection_archive---------3-----------------------" data-action="open-post" data-action-value="https://uxdesign.cc/responsive-grids-and-how-to-actually-use-them-970de4c16e01?source=collection_archive---------3-----------------------" data-action-source="preview-listing" ><time datetime="2019-04-18T23:32:51.009Z">Apr 18, 2019</time></a><span class="middotDivider u-fontSize12"></span><span class="readingTime" title="11 min read"></span><span class="u-paddingLeft4"><span class="svgIcon svgIcon--star svgIcon--15px"><svg class="svgIcon-use" width="15" height="15" ><path d="M7.438 2.324c.034-.099.09-.099.123 0l1.2 3.53a.29.29 0 00.26.19h3.884c.11 0 .127.049.038.111L9.8 8.327a.271.271 0 00-.099.291l1.2 3.53c.034.1-.011.131-.098.069l-3.142-2.18a.303.303 0 00-.32 0l-3.145 2.182c-.087.06-.132.03-.099-.068l1.2-3.53a.271.271 0 00-.098-.292L2.056 6.146c-.087-.06-.071-.112.038-.112h3.884a.29.29 0 00.26-.19l1.2-3.52z"/></svg></span></span></div></div></div></div></div><div><a class="" href="https://uxdesign.cc/responsive-grids-and-how-to-actually-use-them-970de4c16e01?source=collection_archive---------3-----------------------" data-action-source="collection_archive---------3-----------------------"><div class="postArticle-content js-postField"><section class="section section--body section--first section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><figure name="previewImage" id="previewImage" class="graf graf--figure graf--layoutCroppedHeightPreview graf--leading"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 30%;"></div><img class="graf-image" data-image-id="1*Pk2VauRO-tQJnpHXiOFpbA.png" data-width="1280" data-height="887" data-is-featured="true" src="https://cdn-images-1.medium.com/fit/t/1600/480/1*Pk2VauRO-tQJnpHXiOFpbA.png"></div></figure><h3 name="previewTitle" id="previewTitle" class="graf graf--h3 graf-after--figure graf--title">Responsive grids and how to actually use them</h3><h4 name="previewSubtitle" id="previewSubtitle" class="graf graf--h4 graf-after--h3 graf--trailing graf--subtitle">A detailed explanation for designers on how to use grids…</h4></div></div></section></div></a></div><div class="postArticle-readMore"><a class="button button--smaller button--chromeless u-baseColor--buttonNormal" href="https://uxdesign.cc/responsive-grids-and-how-to-actually-use-them-970de4c16e01?source=collection_archive---------3-----------------------" data-action="open-post" data-action-source="collection_archive---------3-----------------------" data-action-value="https://uxdesign.cc/responsive-grids-and-how-to-actually-use-them-970de4c16e01?source=collection_archive---------3-----------------------" data-post-id="970de4c16e01">Read more…</a></div><div class="u-clearfix u-paddingTop10"><div class="u-floatLeft"><div class="multirecommend js-actionMultirecommend u-flexCenter" data-post-id="970de4c16e01" data-is-flush-left="true" data-source="listing-----970de4c16e01---------------------clap_preview"><div class="u-relative u-foreground"><button class="button button--primary button--chromeless u-accentColor--buttonNormal button--withIcon button--withSvgIcon clapButton js-actionMultirecommendButton clapButton--darker" data-action="sign-up-prompt" data-sign-in-action="multivote" data-requires-token="true" data-redirect="https://medium.com/_/vote/p/970de4c16e01" data-action-source="listing-----970de4c16e01---------------------clap_preview" aria-label="Clap"><span class="button-defaultState"><span class="svgIcon svgIcon--clap svgIcon--25px is-flushLeft"><svg class="svgIcon-use" width="25" height="25" ><g fill-rule="evenodd"><path d="M11.739 0l.761 2.966L13.261 0z"/><path d="M14.815 3.776l1.84-2.551-1.43-.471z"/><path d="M8.378 1.224l1.84 2.551L9.81.753z"/><path d="M20.382 21.622c-1.04 1.04-2.115 1.507-3.166 1.608.168-.14.332-.29.492-.45 2.885-2.886 3.456-5.982 1.69-9.211l-1.101-1.937-.955-2.02c-.315-.676-.235-1.185.245-1.556a.836.836 0 01.66-.16c.342.056.66.28.879.605l2.856 5.023c1.179 1.962 1.379 5.119-1.6 8.098m-13.29-.528l-5.02-5.02a1 1 0 01.707-1.701c.255 0 .512.098.707.292l2.607 2.607a.442.442 0 00.624-.624L4.11 14.04l-1.75-1.75a.998.998 0 111.41-1.413l4.154 4.156a.44.44 0 00.624 0 .44.44 0 000-.624l-4.152-4.153-1.172-1.171a.998.998 0 010-1.41 1.018 1.018 0 011.41 0l1.172 1.17 4.153 4.152a.437.437 0 00.624 0 .442.442 0 000-.624L6.43 8.222a.988.988 0 01-.291-.705.99.99 0 01.29-.706 1 1 0 011.412 0l6.992 6.993a.443.443 0 00.71-.501l-1.35-2.856c-.315-.676-.235-1.185.246-1.557a.85.85 0 01.66-.16c.342.056.659.28.879.606L18.628 14c1.573 2.876 1.067 5.545-1.544 8.156-1.396 1.397-3.144 1.966-5.063 1.652-1.713-.286-3.463-1.248-4.928-2.714zM10.99 5.976l2.562 2.562c-.497.607-.563 1.414-.155 2.284l.265.562-4.257-4.257a.98.98 0 01-.117-.445c0-.267.104-.517.292-.706a1.023 1.023 0 011.41 0zm8.887 2.06c-.375-.557-.902-.916-1.486-1.011a1.738 1.738 0 00-1.342.332c-.376.29-.61.656-.712 1.065a2.1 2.1 0 00-1.095-.562 1.776 1.776 0 00-.992.128l-2.636-2.636a1.883 1.883 0 00-2.658 0 1.862 1.862 0 00-.478.847 1.886 1.886 0 00-2.671-.012 1.867 1.867 0 00-.503.909c-.754-.754-1.992-.754-2.703-.044a1.881 1.881 0 000 2.658c-.288.12-.605.288-.864.547a1.884 1.884 0 000 2.659l.624.622a1.879 1.879 0 00-.91 3.16l5.019 5.02c1.595 1.594 3.515 2.645 5.408 2.959a7.16 7.16 0 001.173.098c1.026 0 1.997-.24 2.892-.7.279.04.555.065.828.065 1.53 0 2.969-.628 4.236-1.894 3.338-3.338 3.083-6.928 1.738-9.166l-2.868-5.043z"/></g></svg></span></span><span class="button-activeState"><span class="svgIcon svgIcon--clapFilled svgIcon--25px is-flushLeft"><svg class="svgIcon-use" width="25" height="25" ><g fill-rule="evenodd"><path d="M11.738 0l.762 2.966L13.262 0z"/><path d="M16.634 1.224l-1.432-.47-.408 3.022z"/><path d="M9.79.754l-1.431.47 1.84 2.552z"/><path d="M22.472 13.307l-3.023-5.32c-.287-.426-.689-.705-1.123-.776a1.16 1.16 0 00-.911.221c-.297.231-.474.515-.535.84.017.022.036.04.053.063l2.843 5.001c1.95 3.564 1.328 6.973-1.843 10.144a8.46 8.46 0 01-.549.501c1.205-.156 2.328-.737 3.351-1.76 3.268-3.268 3.041-6.749 1.737-8.914"/><path d="M12.58 9.887c-.156-.83.096-1.569.692-2.142L10.78 5.252c-.5-.504-1.378-.504-1.879 0-.178.18-.273.4-.329.63l4.008 4.005z"/><path d="M15.812 9.04c-.218-.323-.539-.55-.88-.606a.814.814 0 00-.644.153c-.176.137-.713.553-.24 1.566l1.43 3.025a.539.539 0 11-.868.612L7.2 6.378a.986.986 0 10-1.395 1.395l4.401 4.403a.538.538 0 11-.762.762L5.046 8.54 3.802 7.295a.99.99 0 00-1.396 0 .981.981 0 000 1.394L3.647 9.93l4.402 4.403a.537.537 0 010 .761.535.535 0 01-.762 0L2.89 10.696a.992.992 0 00-1.399-.003.983.983 0 000 1.395l1.855 1.854 2.763 2.765a.538.538 0 01-.76.761l-2.765-2.764a.982.982 0 00-1.395 0 .989.989 0 000 1.395l5.32 5.32c3.371 3.372 6.64 4.977 10.49 1.126C19.74 19.8 20.271 17 18.62 13.982L15.812 9.04z"/></g></svg></span></span></button></div><span class="u-relative u-background js-actionMultirecommendCount u-marginLeft5"><button class="button button--chromeless u-baseColor--buttonNormal js-multirecommendCountButton u-disablePointerEvents" data-action="show-recommends" data-action-value="970de4c16e01">16.5K</button></span></div></div><div class="buttonSet u-floatRight"><a class="button button--chromeless u-baseColor--buttonNormal" href="https://uxdesign.cc/responsive-grids-and-how-to-actually-use-them-970de4c16e01?source=collection_archive---------3-----------------------#--responses" data-action-source="collection_archive---------3-----------------------">75 responses</a><button class="button button--dark button--chromeless is-touchIconFadeInPulse u-baseColor--buttonDark button--withIcon button--withSvgIcon button--bookmark js-bookmarkButton" data-action="add-to-bookmarks" data-action-value="970de4c16e01"><span class="js-remove-from-bookmarks u-hide"><span class="svgIcon svgIcon--bookmarkFilled svgIcon--25px is-flushRight"><svg class="svgIcon-use" width="25" height="25" ><path d="M19 6c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v14.66h.012c.01.103.045.204.12.285a.5.5 0 00.706.03L12.5 16.85l5.662 4.126c.205.183.52.17.708-.03a.5.5 0 00.118-.285H19V6z"/></svg></span></span><span class="js-add-to-bookmarks"><span class="svgIcon svgIcon--bookmarkAdd svgIcon--25px is-flushRight"><svg class="svgIcon-use" width="25" height="25" fill="none" ><path d="M18 2.5a.5.5 0 011 0V5h2.5a.5.5 0 010 1H19v2.5a.5.5 0 11-1 0V6h-2.5a.5.5 0 010-1H18V2.5z" fill="#292929"/><path d="M7 7a1 1 0 011-1h3.5a.5.5 0 000-1H8a2 2 0 00-2 2v14a.5.5 0 00.805.396L12.5 17l5.695 4.396A.5.5 0 0019 21v-8.5a.5.5 0 00-1 0v7.485l-5.195-4.012a.5.5 0 00-.61 0L7 19.985V7z" fill="#292929"/></svg></span></span></button></div></div></div></div></div><div class="streamItem streamItem--postPreview js-streamItem"><div class="cardChromeless u-marginTop20 u-paddingTop10 u-paddingBottom15 u-paddingLeft20 u-paddingRight20"><div class="postArticle postArticle--short js-postArticle js-trackPostPresentation js-trackPostScrolls" data-post-id="54b109851969" data-source="collection_archive---------4-----------------------"><div class="u-clearfix u-marginBottom15 u-paddingTop5"><div class="postMetaInline u-floatLeft u-sm-maxWidthFullWidth"><div class="u-flexCenter"><div class="postMetaInline-avatar u-flex0"><a class="link u-baseColor--link avatar" href="https://uxdesign.cc/@audreyhacq" data-action="show-user-card" data-action-value="a174f7ac9f65" data-action-type="hover" data-user-id="a174f7ac9f65" data-collection-slug="user-experience-design-1" dir="auto"><img src="https://cdn-images-1.medium.com/fit/c/72/72/0*geIfMVXr31AXmuFT.jpg" class="avatar-image u-size36x36 u-xs-size32x32" alt="Go to the profile of Audrey Hacq"></a></div><div class="postMetaInline postMetaInline-authorLockup ui-captionStrong u-flex1 u-noWrapWithEllipsis"><a class="ds-link ds-link--styleSubtle link link--darken link--accent u-accentColor--textNormal u-accentColor--textDarken" href="https://uxdesign.cc/@audreyhacq?source=collection_archive---------4-----------------------" data-action="show-user-card" data-action-source="collection_archive---------4-----------------------" data-action-value="a174f7ac9f65" data-action-type="hover" data-user-id="a174f7ac9f65" data-collection-slug="user-experience-design-1" dir="auto">Audrey Hacq</a> in <a class="ds-link ds-link--styleSubtle link--darken link--accent u-accentColor--textNormal" href="https://uxdesign.cc?source=collection_archive---------4-----------------------" data-action="show-collection-card" data-action-source="collection_archive---------4-----------------------" data-action-value="user-experience-design-1" data-action-type="hover" data-collection-slug="user-experience-design-1">UX Collective</a><div class="ui-caption u-fontSize12 u-baseColor--textNormal u-textColorNormal js-postMetaInlineSupplemental"><a class="link link--darken" href="https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969?source=collection_archive---------4-----------------------" data-action="open-post" data-action-value="https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969?source=collection_archive---------4-----------------------" data-action-source="preview-listing" ><time datetime="2018-05-22T19:16:35.011Z">May 22, 2018</time></a><span class="middotDivider u-fontSize12"></span><span class="readingTime" title="10 min read"></span></div></div></div></div></div><div><a class="" href="https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969?source=collection_archive---------4-----------------------" data-action-source="collection_archive---------4-----------------------"><div class="postArticle-content js-postField"><section class="section section--body section--first section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><h3 name="5505" id="5505" class="graf graf--h3 graf--leading graf--title">Everything you need to know about Design Systems</h3><figure name="e808" id="e808" class="graf graf--figure graf--layoutConstrainedHeightPreview graf-after--h3 graf--trailing"><div class="aspectRatioPlaceholder is-locked" style="max-width: 450.20854021847066px; max-height: 240px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 53.300000000000004%;"></div><img class="graf-image" data-image-id="1*-Fcng9a7mZ01KEZNd0E51w.jpeg" data-width="3778" data-height="2014" src="https://cdn-images-1.medium.com/max/901/1*-Fcng9a7mZ01KEZNd0E51w.jpeg"></div></figure></div></div></section></div></a></div><div class="postArticle-readMore"><a class="button button--smaller button--chromeless u-baseColor--buttonNormal" href="https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969?source=collection_archive---------4-----------------------" data-action="open-post" data-action-source="collection_archive---------4-----------------------" data-action-value="https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969?source=collection_archive---------4-----------------------" data-post-id="54b109851969">Read more…</a></div><div class="u-clearfix u-paddingTop10"><div class="u-floatLeft"><div class="multirecommend js-actionMultirecommend u-flexCenter" data-post-id="54b109851969" data-is-flush-left="true" data-source="listing-----54b109851969---------------------clap_preview"><div class="u-relative u-foreground"><button class="button button--primary button--chromeless u-accentColor--buttonNormal button--withIcon button--withSvgIcon clapButton js-actionMultirecommendButton clapButton--darker" data-action="sign-up-prompt" data-sign-in-action="multivote" data-requires-token="true" data-redirect="https://medium.com/_/vote/p/54b109851969" data-action-source="listing-----54b109851969---------------------clap_preview" aria-label="Clap"><span class="button-defaultState"><span class="svgIcon svgIcon--clap svgIcon--25px is-flushLeft"><svg class="svgIcon-use" width="25" height="25" ><g fill-rule="evenodd"><path d="M11.739 0l.761 2.966L13.261 0z"/><path d="M14.815 3.776l1.84-2.551-1.43-.471z"/><path d="M8.378 1.224l1.84 2.551L9.81.753z"/><path d="M20.382 21.622c-1.04 1.04-2.115 1.507-3.166 1.608.168-.14.332-.29.492-.45 2.885-2.886 3.456-5.982 1.69-9.211l-1.101-1.937-.955-2.02c-.315-.676-.235-1.185.245-1.556a.836.836 0 01.66-.16c.342.056.66.28.879.605l2.856 5.023c1.179 1.962 1.379 5.119-1.6 8.098m-13.29-.528l-5.02-5.02a1 1 0 01.707-1.701c.255 0 .512.098.707.292l2.607 2.607a.442.442 0 00.624-.624L4.11 14.04l-1.75-1.75a.998.998 0 111.41-1.413l4.154 4.156a.44.44 0 00.624 0 .44.44 0 000-.624l-4.152-4.153-1.172-1.171a.998.998 0 010-1.41 1.018 1.018 0 011.41 0l1.172 1.17 4.153 4.152a.437.437 0 00.624 0 .442.442 0 000-.624L6.43 8.222a.988.988 0 01-.291-.705.99.99 0 01.29-.706 1 1 0 011.412 0l6.992 6.993a.443.443 0 00.71-.501l-1.35-2.856c-.315-.676-.235-1.185.246-1.557a.85.85 0 01.66-.16c.342.056.659.28.879.606L18.628 14c1.573 2.876 1.067 5.545-1.544 8.156-1.396 1.397-3.144 1.966-5.063 1.652-1.713-.286-3.463-1.248-4.928-2.714zM10.99 5.976l2.562 2.562c-.497.607-.563 1.414-.155 2.284l.265.562-4.257-4.257a.98.98 0 01-.117-.445c0-.267.104-.517.292-.706a1.023 1.023 0 011.41 0zm8.887 2.06c-.375-.557-.902-.916-1.486-1.011a1.738 1.738 0 00-1.342.332c-.376.29-.61.656-.712 1.065a2.1 2.1 0 00-1.095-.562 1.776 1.776 0 00-.992.128l-2.636-2.636a1.883 1.883 0 00-2.658 0 1.862 1.862 0 00-.478.847 1.886 1.886 0 00-2.671-.012 1.867 1.867 0 00-.503.909c-.754-.754-1.992-.754-2.703-.044a1.881 1.881 0 000 2.658c-.288.12-.605.288-.864.547a1.884 1.884 0 000 2.659l.624.622a1.879 1.879 0 00-.91 3.16l5.019 5.02c1.595 1.594 3.515 2.645 5.408 2.959a7.16 7.16 0 001.173.098c1.026 0 1.997-.24 2.892-.7.279.04.555.065.828.065 1.53 0 2.969-.628 4.236-1.894 3.338-3.338 3.083-6.928 1.738-9.166l-2.868-5.043z"/></g></svg></span></span><span class="button-activeState"><span class="svgIcon svgIcon--clapFilled svgIcon--25px is-flushLeft"><svg class="svgIcon-use" width="25" height="25" ><g fill-rule="evenodd"><path d="M11.738 0l.762 2.966L13.262 0z"/><path d="M16.634 1.224l-1.432-.47-.408 3.022z"/><path d="M9.79.754l-1.431.47 1.84 2.552z"/><path d="M22.472 13.307l-3.023-5.32c-.287-.426-.689-.705-1.123-.776a1.16 1.16 0 00-.911.221c-.297.231-.474.515-.535.84.017.022.036.04.053.063l2.843 5.001c1.95 3.564 1.328 6.973-1.843 10.144a8.46 8.46 0 01-.549.501c1.205-.156 2.328-.737 3.351-1.76 3.268-3.268 3.041-6.749 1.737-8.914"/><path d="M12.58 9.887c-.156-.83.096-1.569.692-2.142L10.78 5.252c-.5-.504-1.378-.504-1.879 0-.178.18-.273.4-.329.63l4.008 4.005z"/><path d="M15.812 9.04c-.218-.323-.539-.55-.88-.606a.814.814 0 00-.644.153c-.176.137-.713.553-.24 1.566l1.43 3.025a.539.539 0 11-.868.612L7.2 6.378a.986.986 0 10-1.395 1.395l4.401 4.403a.538.538 0 11-.762.762L5.046 8.54 3.802 7.295a.99.99 0 00-1.396 0 .981.981 0 000 1.394L3.647 9.93l4.402 4.403a.537.537 0 010 .761.535.535 0 01-.762 0L2.89 10.696a.992.992 0 00-1.399-.003.983.983 0 000 1.395l1.855 1.854 2.763 2.765a.538.538 0 01-.76.761l-2.765-2.764a.982.982 0 00-1.395 0 .989.989 0 000 1.395l5.32 5.32c3.371 3.372 6.64 4.977 10.49 1.126C19.74 19.8 20.271 17 18.62 13.982L15.812 9.04z"/></g></svg></span></span></button></div><span class="u-relative u-background js-actionMultirecommendCount u-marginLeft5"><button class="button button--chromeless u-baseColor--buttonNormal js-multirecommendCountButton u-disablePointerEvents" data-action="show-recommends" data-action-value="54b109851969">10.4K</button></span></div></div><div class="buttonSet u-floatRight"><a class="button button--chromeless u-baseColor--buttonNormal" href="https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969?source=collection_archive---------4-----------------------#--responses" data-action-source="collection_archive---------4-----------------------">30 responses</a><button class="button button--dark button--chromeless is-touchIconFadeInPulse u-baseColor--buttonDark button--withIcon button--withSvgIcon button--bookmark js-bookmarkButton" data-action="add-to-bookmarks" data-action-value="54b109851969"><span class="js-remove-from-bookmarks u-hide"><span class="svgIcon svgIcon--bookmarkFilled svgIcon--25px is-flushRight"><svg class="svgIcon-use" width="25" height="25" ><path d="M19 6c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v14.66h.012c.01.103.045.204.12.285a.5.5 0 00.706.03L12.5 16.85l5.662 4.126c.205.183.52.17.708-.03a.5.5 0 00.118-.285H19V6z"/></svg></span></span><span class="js-add-to-bookmarks"><span class="svgIcon svgIcon--bookmarkAdd svgIcon--25px is-flushRight"><svg class="svgIcon-use" width="25" height="25" fill="none" ><path d="M18 2.5a.5.5 0 011 0V5h2.5a.5.5 0 010 1H19v2.5a.5.5 0 11-1 0V6h-2.5a.5.5 0 010-1H18V2.5z" fill="#292929"/><path d="M7 7a1 1 0 011-1h3.5a.5.5 0 000-1H8a2 2 0 00-2 2v14a.5.5 0 00.805.396L12.5 17l5.695 4.396A.5.5 0 0019 21v-8.5a.5.5 0 00-1 0v7.485l-5.195-4.012a.5.5 0 00-.61 0L7 19.985V7z" fill="#292929"/></svg></span></span></button></div></div></div></div></div><div class="streamItem streamItem--postPreview js-streamItem"><div class="cardChromeless u-marginTop20 u-paddingTop10 u-paddingBottom15 u-paddingLeft20 u-paddingRight20"><div class="postArticle postArticle--short js-postArticle js-trackPostPresentation js-trackPostScrolls" data-post-id="490a3760533" data-source="collection_archive---------5-----------------------"><div class="u-clearfix u-marginBottom15 u-paddingTop5"><div class="postMetaInline u-floatLeft u-sm-maxWidthFullWidth"><div class="u-flexCenter"><div class="postMetaInline-avatar u-flex0"><a class="link u-baseColor--link avatar" href="https://uxdesign.cc/@havana-nguyen" data-action="show-user-card" data-action-value="f95f1c3c17a4" data-action-type="hover" data-user-id="f95f1c3c17a4" data-collection-slug="user-experience-design-1" dir="auto"><img src="https://cdn-images-1.medium.com/fit/c/72/72/1*2hWx-HCU5z2vq1i3M00Knw.jpeg" class="avatar-image u-size36x36 u-xs-size32x32" alt="Go to the profile of Havana Nguyen"></a></div><div class="postMetaInline postMetaInline-authorLockup ui-captionStrong u-flex1 u-noWrapWithEllipsis"><a class="ds-link ds-link--styleSubtle link link--darken link--accent u-accentColor--textNormal u-accentColor--textDarken" href="https://uxdesign.cc/@havana-nguyen?source=collection_archive---------5-----------------------" data-action="show-user-card" data-action-source="collection_archive---------5-----------------------" data-action-value="f95f1c3c17a4" data-action-type="hover" data-user-id="f95f1c3c17a4" data-collection-slug="user-experience-design-1" dir="auto">Havana Nguyen</a> in <a class="ds-link ds-link--styleSubtle link--darken link--accent u-accentColor--textNormal" href="https://uxdesign.cc?source=collection_archive---------5-----------------------" data-action="show-collection-card" data-action-source="collection_archive---------5-----------------------" data-action-value="user-experience-design-1" data-action-type="hover" data-collection-slug="user-experience-design-1">UX Collective</a><div class="ui-caption u-fontSize12 u-baseColor--textNormal u-textColorNormal js-postMetaInlineSupplemental"><a class="link link--darken" href="https://uxdesign.cc/designing-tables-for-reusability-490a3760533?source=collection_archive---------5-----------------------" data-action="open-post" data-action-value="https://uxdesign.cc/designing-tables-for-reusability-490a3760533?source=collection_archive---------5-----------------------" data-action-source="preview-listing" ><time datetime="2017-12-19T03:24:34.115Z">Dec 18, 2017</time></a><span class="middotDivider u-fontSize12"></span><span class="readingTime" title="16 min read"></span></div></div></div></div></div><div><a class="" href="https://uxdesign.cc/designing-tables-for-reusability-490a3760533?source=collection_archive---------5-----------------------" data-action-source="collection_archive---------5-----------------------"><div class="postArticle-content js-postField"><section class="section section--body section--first section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><h3 name="04cd" id="04cd" class="graf graf--h3 graf--leading graf--title">Designing Tables for Reusability</h3><h4 name="c6de" id="c6de" class="graf graf--h4 graf-after--h3 graf--subtitle"><strong class="markup--strong markup--h4-strong">Written by </strong><span class="markup--anchor markup--h4-anchor" data-action="open-inner-link" data-action-value="https://www.linkedin.com/in/ada-rafalowicz/"><strong class="markup--strong markup--h4-strong">Ada Rafalowicz</strong></a><strong class="markup--strong markup--h4-strong"> and </strong><span class="markup--anchor markup--h4-anchor" data-action="open-inner-link" data-action-value="http://www.havananguyen.com"><strong class="markup--strong markup--h4-strong">Havana Nguyen</strong></a></h4><figure name="2e98" id="2e98" class="graf graf--figure graf--layoutCroppedHeightPreview graf-after--h4 graf--trailing"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 30%;"></div><img class="graf-image" data-image-id="1*Y4uOirTNPvJbJj5_bSVFWw.png" data-width="3000" data-height="2000" src="https://cdn-images-1.medium.com/fit/t/1600/480/1*Y4uOirTNPvJbJj5_bSVFWw.png"></div></figure></div></div></section></div></a></div><div class="postArticle-readMore"><a class="button button--smaller button--chromeless u-baseColor--buttonNormal" href="https://uxdesign.cc/designing-tables-for-reusability-490a3760533?source=collection_archive---------5-----------------------" data-action="open-post" data-action-source="collection_archive---------5-----------------------" data-action-value="https://uxdesign.cc/designing-tables-for-reusability-490a3760533?source=collection_archive---------5-----------------------" data-post-id="490a3760533">Read more…</a></div><div class="u-clearfix u-paddingTop10"><div class="u-floatLeft"><div class="multirecommend js-actionMultirecommend u-flexCenter" data-post-id="490a3760533" data-is-flush-left="true" data-source="listing-----490a3760533---------------------clap_preview"><div class="u-relative u-foreground"><button class="button button--primary button--chromeless u-accentColor--buttonNormal button--withIcon button--withSvgIcon clapButton js-actionMultirecommendButton clapButton--darker" data-action="sign-up-prompt" data-sign-in-action="multivote" data-requires-token="true" data-redirect="https://medium.com/_/vote/p/490a3760533" data-action-source="listing-----490a3760533---------------------clap_preview" aria-label="Clap"><span class="button-defaultState"><span class="svgIcon svgIcon--clap svgIcon--25px is-flushLeft"><svg class="svgIcon-use" width="25" height="25" ><g fill-rule="evenodd"><path d="M11.739 0l.761 2.966L13.261 0z"/><path d="M14.815 3.776l1.84-2.551-1.43-.471z"/><path d="M8.378 1.224l1.84 2.551L9.81.753z"/><path d="M20.382 21.622c-1.04 1.04-2.115 1.507-3.166 1.608.168-.14.332-.29.492-.45 2.885-2.886 3.456-5.982 1.69-9.211l-1.101-1.937-.955-2.02c-.315-.676-.235-1.185.245-1.556a.836.836 0 01.66-.16c.342.056.66.28.879.605l2.856 5.023c1.179 1.962 1.379 5.119-1.6 8.098m-13.29-.528l-5.02-5.02a1 1 0 01.707-1.701c.255 0 .512.098.707.292l2.607 2.607a.442.442 0 00.624-.624L4.11 14.04l-1.75-1.75a.998.998 0 111.41-1.413l4.154 4.156a.44.44 0 00.624 0 .44.44 0 000-.624l-4.152-4.153-1.172-1.171a.998.998 0 010-1.41 1.018 1.018 0 011.41 0l1.172 1.17 4.153 4.152a.437.437 0 00.624 0 .442.442 0 000-.624L6.43 8.222a.988.988 0 01-.291-.705.99.99 0 01.29-.706 1 1 0 011.412 0l6.992 6.993a.443.443 0 00.71-.501l-1.35-2.856c-.315-.676-.235-1.185.246-1.557a.85.85 0 01.66-.16c.342.056.659.28.879.606L18.628 14c1.573 2.876 1.067 5.545-1.544 8.156-1.396 1.397-3.144 1.966-5.063 1.652-1.713-.286-3.463-1.248-4.928-2.714zM10.99 5.976l2.562 2.562c-.497.607-.563 1.414-.155 2.284l.265.562-4.257-4.257a.98.98 0 01-.117-.445c0-.267.104-.517.292-.706a1.023 1.023 0 011.41 0zm8.887 2.06c-.375-.557-.902-.916-1.486-1.011a1.738 1.738 0 00-1.342.332c-.376.29-.61.656-.712 1.065a2.1 2.1 0 00-1.095-.562 1.776 1.776 0 00-.992.128l-2.636-2.636a1.883 1.883 0 00-2.658 0 1.862 1.862 0 00-.478.847 1.886 1.886 0 00-2.671-.012 1.867 1.867 0 00-.503.909c-.754-.754-1.992-.754-2.703-.044a1.881 1.881 0 000 2.658c-.288.12-.605.288-.864.547a1.884 1.884 0 000 2.659l.624.622a1.879 1.879 0 00-.91 3.16l5.019 5.02c1.595 1.594 3.515 2.645 5.408 2.959a7.16 7.16 0 001.173.098c1.026 0 1.997-.24 2.892-.7.279.04.555.065.828.065 1.53 0 2.969-.628 4.236-1.894 3.338-3.338 3.083-6.928 1.738-9.166l-2.868-5.043z"/></g></svg></span></span><span class="button-activeState"><span class="svgIcon svgIcon--clapFilled svgIcon--25px is-flushLeft"><svg class="svgIcon-use" width="25" height="25" ><g fill-rule="evenodd"><path d="M11.738 0l.762 2.966L13.262 0z"/><path d="M16.634 1.224l-1.432-.47-.408 3.022z"/><path d="M9.79.754l-1.431.47 1.84 2.552z"/><path d="M22.472 13.307l-3.023-5.32c-.287-.426-.689-.705-1.123-.776a1.16 1.16 0 00-.911.221c-.297.231-.474.515-.535.84.017.022.036.04.053.063l2.843 5.001c1.95 3.564 1.328 6.973-1.843 10.144a8.46 8.46 0 01-.549.501c1.205-.156 2.328-.737 3.351-1.76 3.268-3.268 3.041-6.749 1.737-8.914"/><path d="M12.58 9.887c-.156-.83.096-1.569.692-2.142L10.78 5.252c-.5-.504-1.378-.504-1.879 0-.178.18-.273.4-.329.63l4.008 4.005z"/><path d="M15.812 9.04c-.218-.323-.539-.55-.88-.606a.814.814 0 00-.644.153c-.176.137-.713.553-.24 1.566l1.43 3.025a.539.539 0 11-.868.612L7.2 6.378a.986.986 0 10-1.395 1.395l4.401 4.403a.538.538 0 11-.762.762L5.046 8.54 3.802 7.295a.99.99 0 00-1.396 0 .981.981 0 000 1.394L3.647 9.93l4.402 4.403a.537.537 0 010 .761.535.535 0 01-.762 0L2.89 10.696a.992.992 0 00-1.399-.003.983.983 0 000 1.395l1.855 1.854 2.763 2.765a.538.538 0 01-.76.761l-2.765-2.764a.982.982 0 00-1.395 0 .989.989 0 000 1.395l5.32 5.32c3.371 3.372 6.64 4.977 10.49 1.126C19.74 19.8 20.271 17 18.62 13.982L15.812 9.04z"/></g></svg></span></span></button></div><span class="u-relative u-background js-actionMultirecommendCount u-marginLeft5"><button class="button button--chromeless u-baseColor--buttonNormal js-multirecommendCountButton u-disablePointerEvents" data-action="show-recommends" data-action-value="490a3760533">20K</button></span></div></div><div class="buttonSet u-floatRight"><a class="button button--chromeless u-baseColor--buttonNormal" href="https://uxdesign.cc/designing-tables-for-reusability-490a3760533?source=collection_archive---------5-----------------------#--responses" data-action-source="collection_archive---------5-----------------------">82 responses</a><button class="button button--dark button--chromeless is-touchIconFadeInPulse u-baseColor--buttonDark button--withIcon button--withSvgIcon button--bookmark js-bookmarkButton" data-action="add-to-bookmarks" data-action-value="490a3760533"><span class="js-remove-from-bookmarks u-hide"><span class="svgIcon svgIcon--bookmarkFilled svgIcon--25px is-flushRight"><svg class="svgIcon-use" width="25" height="25" ><path d="M19 6c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v14.66h.012c.01.103.045.204.12.285a.5.5 0 00.706.03L12.5 16.85l5.662 4.126c.205.183.52.17.708-.03a.5.5 0 00.118-.285H19V6z"/></svg></span></span><span class="js-add-to-bookmarks"><span class="svgIcon svgIcon--bookmarkAdd svgIcon--25px is-flushRight"><svg class="svgIcon-use" width="25" height="25" fill="none" ><path d="M18 2.5a.5.5 0 011 0V5h2.5a.5.5 0 010 1H19v2.5a.5.5 0 11-1 0V6h-2.5a.5.5 0 010-1H18V2.5z" fill="#292929"/><path d="M7 7a1 1 0 011-1h3.5a.5.5 0 000-1H8a2 2 0 00-2 2v14a.5.5 0 00.805.396L12.5 17l5.695 4.396A.5.5 0 0019 21v-8.5a.5.5 0 00-1 0v7.485l-5.195-4.012a.5.5 0 00-.61 0L7 19.985V7z" fill="#292929"/></svg></span></span></button></div></div></div></div></div><div class="streamItem streamItem--postPreview js-streamItem"><div class="cardChromeless u-marginTop20 u-paddingTop10 u-paddingBottom15 u-paddingLeft20 u-paddingRight20"><div class="postArticle postArticle--short js-postArticle js-trackPostPresentation js-trackPostScrolls" data-post-id="7329ed9d6112" data-source="collection_archive---------6-----------------------"><div class="u-clearfix u-marginBottom15 u-paddingTop5"><div class="postMetaInline u-floatLeft u-sm-maxWidthFullWidth"><div class="u-flexCenter"><div class="postMetaInline-avatar u-flex0"><a class="link u-baseColor--link avatar" href="https://uxdesign.cc/@tessgadd" data-action="show-user-card" data-action-value="9e48700a9ecd" data-action-type="hover" data-user-id="9e48700a9ecd" data-collection-slug="user-experience-design-1" dir="auto"><img src="https://cdn-images-1.medium.com/fit/c/72/72/0*-eaghEYioJltyRo6.jpg" class="avatar-image u-size36x36 u-xs-size32x32" alt="Go to the profile of Tess Gadd"></a></div><div class="postMetaInline postMetaInline-authorLockup ui-captionStrong u-flex1 u-noWrapWithEllipsis"><a class="ds-link ds-link--styleSubtle link link--darken link--accent u-accentColor--textNormal u-accentColor--textDarken" href="https://uxdesign.cc/@tessgadd?source=collection_archive---------6-----------------------" data-action="show-user-card" data-action-source="collection_archive---------6-----------------------" data-action-value="9e48700a9ecd" data-action-type="hover" data-user-id="9e48700a9ecd" data-collection-slug="user-experience-design-1" dir="auto">Tess Gadd</a> in <a class="ds-link ds-link--styleSubtle link--darken link--accent u-accentColor--textNormal" href="https://uxdesign.cc?source=collection_archive---------6-----------------------" data-action="show-collection-card" data-action-source="collection_archive---------6-----------------------" data-action-value="user-experience-design-1" data-action-type="hover" data-collection-slug="user-experience-design-1">UX Collective</a><div class="ui-caption u-fontSize12 u-baseColor--textNormal u-textColorNormal js-postMetaInlineSupplemental"><a class="link link--darken" href="https://uxdesign.cc/ui-cheat-sheets-buttons-7329ed9d6112?source=collection_archive---------6-----------------------" data-action="open-post" data-action-value="https://uxdesign.cc/ui-cheat-sheets-buttons-7329ed9d6112?source=collection_archive---------6-----------------------" data-action-source="preview-listing" ><time datetime="2019-05-12T07:36:16.545Z">May 11, 2019</time></a><span class="middotDivider u-fontSize12"></span><span class="readingTime" title="13 min read"></span><span class="u-paddingLeft4"><span class="svgIcon svgIcon--star svgIcon--15px"><svg class="svgIcon-use" width="15" height="15" ><path d="M7.438 2.324c.034-.099.09-.099.123 0l1.2 3.53a.29.29 0 00.26.19h3.884c.11 0 .127.049.038.111L9.8 8.327a.271.271 0 00-.099.291l1.2 3.53c.034.1-.011.131-.098.069l-3.142-2.18a.303.303 0 00-.32 0l-3.145 2.182c-.087.06-.132.03-.099-.068l1.2-3.53a.271.271 0 00-.098-.292L2.056 6.146c-.087-.06-.071-.112.038-.112h3.884a.29.29 0 00.26-.19l1.2-3.52z"/></svg></span></span></div></div></div></div></div><div><a class="" href="https://uxdesign.cc/ui-cheat-sheets-buttons-7329ed9d6112?source=collection_archive---------6-----------------------" data-action-source="collection_archive---------6-----------------------"><div class="postArticle-content js-postField"><section class="section section--body section--first section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><figure name="previewImage" id="previewImage" class="graf graf--figure graf--layoutCroppedHeightPreview graf--leading"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 30%;"></div><img class="graf-image" data-image-id="1*YLUbUqRCoU3cXUCmDImu7g.png" data-width="1400" data-height="700" data-is-featured="true" src="https://cdn-images-1.medium.com/fit/t/1600/480/1*YLUbUqRCoU3cXUCmDImu7g.png"></div></figure><h3 name="e068" id="e068" class="graf graf--h3 graf-after--figure graf--title">UI cheat sheet: buttons</h3><p name="c3c7" id="c3c7" class="graf graf--p graf-after--h3 graf--trailing">My favourite design element is the buttons. In fact, I [insert swear word of your choice] love buttons. In this cheat…</p></div></div></section></div></a></div><div class="postArticle-readMore"><a class="button button--smaller button--chromeless u-baseColor--buttonNormal" href="https://uxdesign.cc/ui-cheat-sheets-buttons-7329ed9d6112?source=collection_archive---------6-----------------------" data-action="open-post" data-action-source="collection_archive---------6-----------------------" data-action-value="https://uxdesign.cc/ui-cheat-sheets-buttons-7329ed9d6112?source=collection_archive---------6-----------------------" data-post-id="7329ed9d6112">Read more…</a></div><div class="u-clearfix u-paddingTop10"><div class="u-floatLeft"><div class="multirecommend js-actionMultirecommend u-flexCenter" data-post-id="7329ed9d6112" data-is-flush-left="true" data-source="listing-----7329ed9d6112---------------------clap_preview"><div class="u-relative u-foreground"><button class="button button--primary button--chromeless u-accentColor--buttonNormal button--withIcon button--withSvgIcon clapButton js-actionMultirecommendButton clapButton--darker" data-action="sign-up-prompt" data-sign-in-action="multivote" data-requires-token="true" data-redirect="https://medium.com/_/vote/p/7329ed9d6112" data-action-source="listing-----7329ed9d6112---------------------clap_preview" aria-label="Clap"><span class="button-defaultState"><span class="svgIcon svgIcon--clap svgIcon--25px is-flushLeft"><svg class="svgIcon-use" width="25" height="25" ><g fill-rule="evenodd"><path d="M11.739 0l.761 2.966L13.261 0z"/><path d="M14.815 3.776l1.84-2.551-1.43-.471z"/><path d="M8.378 1.224l1.84 2.551L9.81.753z"/><path d="M20.382 21.622c-1.04 1.04-2.115 1.507-3.166 1.608.168-.14.332-.29.492-.45 2.885-2.886 3.456-5.982 1.69-9.211l-1.101-1.937-.955-2.02c-.315-.676-.235-1.185.245-1.556a.836.836 0 01.66-.16c.342.056.66.28.879.605l2.856 5.023c1.179 1.962 1.379 5.119-1.6 8.098m-13.29-.528l-5.02-5.02a1 1 0 01.707-1.701c.255 0 .512.098.707.292l2.607 2.607a.442.442 0 00.624-.624L4.11 14.04l-1.75-1.75a.998.998 0 111.41-1.413l4.154 4.156a.44.44 0 00.624 0 .44.44 0 000-.624l-4.152-4.153-1.172-1.171a.998.998 0 010-1.41 1.018 1.018 0 011.41 0l1.172 1.17 4.153 4.152a.437.437 0 00.624 0 .442.442 0 000-.624L6.43 8.222a.988.988 0 01-.291-.705.99.99 0 01.29-.706 1 1 0 011.412 0l6.992 6.993a.443.443 0 00.71-.501l-1.35-2.856c-.315-.676-.235-1.185.246-1.557a.85.85 0 01.66-.16c.342.056.659.28.879.606L18.628 14c1.573 2.876 1.067 5.545-1.544 8.156-1.396 1.397-3.144 1.966-5.063 1.652-1.713-.286-3.463-1.248-4.928-2.714zM10.99 5.976l2.562 2.562c-.497.607-.563 1.414-.155 2.284l.265.562-4.257-4.257a.98.98 0 01-.117-.445c0-.267.104-.517.292-.706a1.023 1.023 0 011.41 0zm8.887 2.06c-.375-.557-.902-.916-1.486-1.011a1.738 1.738 0 00-1.342.332c-.376.29-.61.656-.712 1.065a2.1 2.1 0 00-1.095-.562 1.776 1.776 0 00-.992.128l-2.636-2.636a1.883 1.883 0 00-2.658 0 1.862 1.862 0 00-.478.847 1.886 1.886 0 00-2.671-.012 1.867 1.867 0 00-.503.909c-.754-.754-1.992-.754-2.703-.044a1.881 1.881 0 000 2.658c-.288.12-.605.288-.864.547a1.884 1.884 0 000 2.659l.624.622a1.879 1.879 0 00-.91 3.16l5.019 5.02c1.595 1.594 3.515 2.645 5.408 2.959a7.16 7.16 0 001.173.098c1.026 0 1.997-.24 2.892-.7.279.04.555.065.828.065 1.53 0 2.969-.628 4.236-1.894 3.338-3.338 3.083-6.928 1.738-9.166l-2.868-5.043z"/></g></svg></span></span><span class="button-activeState"><span class="svgIcon svgIcon--clapFilled svgIcon--25px is-flushLeft"><svg class="svgIcon-use" width="25" height="25" ><g fill-rule="evenodd"><path d="M11.738 0l.762 2.966L13.262 0z"/><path d="M16.634 1.224l-1.432-.47-.408 3.022z"/><path d="M9.79.754l-1.431.47 1.84 2.552z"/><path d="M22.472 13.307l-3.023-5.32c-.287-.426-.689-.705-1.123-.776a1.16 1.16 0 00-.911.221c-.297.231-.474.515-.535.84.017.022.036.04.053.063l2.843 5.001c1.95 3.564 1.328 6.973-1.843 10.144a8.46 8.46 0 01-.549.501c1.205-.156 2.328-.737 3.351-1.76 3.268-3.268 3.041-6.749 1.737-8.914"/><path d="M12.58 9.887c-.156-.83.096-1.569.692-2.142L10.78 5.252c-.5-.504-1.378-.504-1.879 0-.178.18-.273.4-.329.63l4.008 4.005z"/><path d="M15.812 9.04c-.218-.323-.539-.55-.88-.606a.814.814 0 00-.644.153c-.176.137-.713.553-.24 1.566l1.43 3.025a.539.539 0 11-.868.612L7.2 6.378a.986.986 0 10-1.395 1.395l4.401 4.403a.538.538 0 11-.762.762L5.046 8.54 3.802 7.295a.99.99 0 00-1.396 0 .981.981 0 000 1.394L3.647 9.93l4.402 4.403a.537.537 0 010 .761.535.535 0 01-.762 0L2.89 10.696a.992.992 0 00-1.399-.003.983.983 0 000 1.395l1.855 1.854 2.763 2.765a.538.538 0 01-.76.761l-2.765-2.764a.982.982 0 00-1.395 0 .989.989 0 000 1.395l5.32 5.32c3.371 3.372 6.64 4.977 10.49 1.126C19.74 19.8 20.271 17 18.62 13.982L15.812 9.04z"/></g></svg></span></span></button></div><span class="u-relative u-background js-actionMultirecommendCount u-marginLeft5"><button class="button button--chromeless u-baseColor--buttonNormal js-multirecommendCountButton u-disablePointerEvents" data-action="show-recommends" data-action-value="7329ed9d6112">11.3K</button></span></div></div><div class="buttonSet u-floatRight"><a class="button button--chromeless u-baseColor--buttonNormal" href="https://uxdesign.cc/ui-cheat-sheets-buttons-7329ed9d6112?source=collection_archive---------6-----------------------#--responses" data-action-source="collection_archive---------6-----------------------">36 responses</a><button class="button button--dark button--chromeless is-touchIconFadeInPulse u-baseColor--buttonDark button--withIcon button--withSvgIcon button--bookmark js-bookmarkButton" data-action="add-to-bookmarks" data-action-value="7329ed9d6112"><span class="js-remove-from-bookmarks u-hide"><span class="svgIcon svgIcon--bookmarkFilled svgIcon--25px is-flushRight"><svg class="svgIcon-use" width="25" height="25" ><path d="M19 6c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v14.66h.012c.01.103.045.204.12.285a.5.5 0 00.706.03L12.5 16.85l5.662 4.126c.205.183.52.17.708-.03a.5.5 0 00.118-.285H19V6z"/></svg></span></span><span class="js-add-to-bookmarks"><span class="svgIcon svgIcon--bookmarkAdd svgIcon--25px is-flushRight"><svg class="svgIcon-use" width="25" height="25" fill="none" ><path d="M18 2.5a.5.5 0 011 0V5h2.5a.5.5 0 010 1H19v2.5a.5.5 0 11-1 0V6h-2.5a.5.5 0 010-1H18V2.5z" fill="#292929"/><path d="M7 7a1 1 0 011-1h3.5a.5.5 0 000-1H8a2 2 0 00-2 2v14a.5.5 0 00.805.396L12.5 17l5.695 4.396A.5.5 0 0019 21v-8.5a.5.5 0 00-1 0v7.485l-5.195-4.012a.5.5 0 00-.61 0L7 19.985V7z" fill="#292929"/></svg></span></span></button></div></div></div></div></div><div class="streamItem streamItem--postPreview js-streamItem"><div class="cardChromeless u-marginTop20 u-paddingTop10 u-paddingBottom15 u-paddingLeft20 u-paddingRight20"><div class="postArticle postArticle--short js-postArticle js-trackPostPresentation js-trackPostScrolls" data-post-id="6ecbe9ec38b7" data-source="collection_archive---------7-----------------------"><div class="u-clearfix u-marginBottom15 u-paddingTop5"><div class="postMetaInline u-floatLeft u-sm-maxWidthFullWidth"><div class="u-flexCenter"><div class="postMetaInline-avatar u-flex0"><a class="link u-baseColor--link avatar" href="https://uxdesign.cc/@zhenshuofang" data-action="show-user-card" data-action-value="7c88c0813696" data-action-type="hover" data-user-id="7c88c0813696" data-collection-slug="user-experience-design-1" dir="auto"><img src="https://cdn-images-1.medium.com/fit/c/72/72/1*dxTa4AAHXvh2bpiDdIyPVQ.png" class="avatar-image u-size36x36 u-xs-size32x32" alt="Go to the profile of Zhenshuo Fang"></a></div><div class="postMetaInline postMetaInline-authorLockup ui-captionStrong u-flex1 u-noWrapWithEllipsis"><a class="ds-link ds-link--styleSubtle link link--darken link--accent u-accentColor--textNormal u-accentColor--textDarken" href="https://uxdesign.cc/@zhenshuofang?source=collection_archive---------7-----------------------" data-action="show-user-card" data-action-source="collection_archive---------7-----------------------" data-action-value="7c88c0813696" data-action-type="hover" data-user-id="7c88c0813696" data-collection-slug="user-experience-design-1" dir="auto">Zhenshuo Fang</a> in <a class="ds-link ds-link--styleSubtle link--darken link--accent u-accentColor--textNormal" href="https://uxdesign.cc?source=collection_archive---------7-----------------------" data-action="show-collection-card" data-action-source="collection_archive---------7-----------------------" data-action-value="user-experience-design-1" data-action-type="hover" data-collection-slug="user-experience-design-1">UX Collective</a><div class="ui-caption u-fontSize12 u-baseColor--textNormal u-textColorNormal js-postMetaInlineSupplemental"><a class="link link--darken" href="https://uxdesign.cc/5-steps-to-master-a-whiteboard-design-challenge-6ecbe9ec38b7?source=collection_archive---------7-----------------------" data-action="open-post" data-action-value="https://uxdesign.cc/5-steps-to-master-a-whiteboard-design-challenge-6ecbe9ec38b7?source=collection_archive---------7-----------------------" data-action-source="preview-listing" ><time datetime="2016-03-09T18:27:13.548Z">Mar 9, 2016</time></a><span class="middotDivider u-fontSize12"></span><span class="readingTime" title="8 min read"></span></div></div></div></div></div><div><a class="" href="https://uxdesign.cc/5-steps-to-master-a-whiteboard-design-challenge-6ecbe9ec38b7?source=collection_archive---------7-----------------------" data-action-source="collection_archive---------7-----------------------"><div class="postArticle-content js-postField"><section class="section section--body section--first section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><figure name="previewImage" id="previewImage" class="graf graf--figure graf--layoutCroppedHeightPreview graf--leading"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 30%;"></div><img class="graf-image" data-image-id="1*OCqRyD1IlQ45QW1lUlcWjA.png" data-width="1200" data-height="367" src="https://cdn-images-1.medium.com/fit/t/1600/480/1*OCqRyD1IlQ45QW1lUlcWjA.png"></div></figure><h3 name="previewTitle" id="previewTitle" class="graf graf--h3 graf-after--figure graf--title">5 steps to master a whiteboard design challenge</h3><h4 name="previewSubtitle" id="previewSubtitle" class="graf graf--h4 graf-after--h3 graf--trailing graf--subtitle">A step by step guide on how to approach a whiteboard…</h4></div></div></section></div></a></div><div class="postArticle-readMore"><a class="button button--smaller button--chromeless u-baseColor--buttonNormal" href="https://uxdesign.cc/5-steps-to-master-a-whiteboard-design-challenge-6ecbe9ec38b7?source=collection_archive---------7-----------------------" data-action="open-post" data-action-source="collection_archive---------7-----------------------" data-action-value="https://uxdesign.cc/5-steps-to-master-a-whiteboard-design-challenge-6ecbe9ec38b7?source=collection_archive---------7-----------------------" data-post-id="6ecbe9ec38b7">Read more…</a></div><div class="u-clearfix u-paddingTop10"><div class="u-floatLeft"><div class="multirecommend js-actionMultirecommend u-flexCenter" data-post-id="6ecbe9ec38b7" data-is-flush-left="true" data-source="listing-----6ecbe9ec38b7---------------------clap_preview"><div class="u-relative u-foreground"><button class="button button--primary button--chromeless u-accentColor--buttonNormal button--withIcon button--withSvgIcon clapButton js-actionMultirecommendButton clapButton--darker" data-action="sign-up-prompt" data-sign-in-action="multivote" data-requires-token="true" data-redirect="https://medium.com/_/vote/p/6ecbe9ec38b7" data-action-source="listing-----6ecbe9ec38b7---------------------clap_preview" aria-label="Clap"><span class="button-defaultState"><span class="svgIcon svgIcon--clap svgIcon--25px is-flushLeft"><svg class="svgIcon-use" width="25" height="25" ><g fill-rule="evenodd"><path d="M11.739 0l.761 2.966L13.261 0z"/><path d="M14.815 3.776l1.84-2.551-1.43-.471z"/><path d="M8.378 1.224l1.84 2.551L9.81.753z"/><path d="M20.382 21.622c-1.04 1.04-2.115 1.507-3.166 1.608.168-.14.332-.29.492-.45 2.885-2.886 3.456-5.982 1.69-9.211l-1.101-1.937-.955-2.02c-.315-.676-.235-1.185.245-1.556a.836.836 0 01.66-.16c.342.056.66.28.879.605l2.856 5.023c1.179 1.962 1.379 5.119-1.6 8.098m-13.29-.528l-5.02-5.02a1 1 0 01.707-1.701c.255 0 .512.098.707.292l2.607 2.607a.442.442 0 00.624-.624L4.11 14.04l-1.75-1.75a.998.998 0 111.41-1.413l4.154 4.156a.44.44 0 00.624 0 .44.44 0 000-.624l-4.152-4.153-1.172-1.171a.998.998 0 010-1.41 1.018 1.018 0 011.41 0l1.172 1.17 4.153 4.152a.437.437 0 00.624 0 .442.442 0 000-.624L6.43 8.222a.988.988 0 01-.291-.705.99.99 0 01.29-.706 1 1 0 011.412 0l6.992 6.993a.443.443 0 00.71-.501l-1.35-2.856c-.315-.676-.235-1.185.246-1.557a.85.85 0 01.66-.16c.342.056.659.28.879.606L18.628 14c1.573 2.876 1.067 5.545-1.544 8.156-1.396 1.397-3.144 1.966-5.063 1.652-1.713-.286-3.463-1.248-4.928-2.714zM10.99 5.976l2.562 2.562c-.497.607-.563 1.414-.155 2.284l.265.562-4.257-4.257a.98.98 0 01-.117-.445c0-.267.104-.517.292-.706a1.023 1.023 0 011.41 0zm8.887 2.06c-.375-.557-.902-.916-1.486-1.011a1.738 1.738 0 00-1.342.332c-.376.29-.61.656-.712 1.065a2.1 2.1 0 00-1.095-.562 1.776 1.776 0 00-.992.128l-2.636-2.636a1.883 1.883 0 00-2.658 0 1.862 1.862 0 00-.478.847 1.886 1.886 0 00-2.671-.012 1.867 1.867 0 00-.503.909c-.754-.754-1.992-.754-2.703-.044a1.881 1.881 0 000 2.658c-.288.12-.605.288-.864.547a1.884 1.884 0 000 2.659l.624.622a1.879 1.879 0 00-.91 3.16l5.019 5.02c1.595 1.594 3.515 2.645 5.408 2.959a7.16 7.16 0 001.173.098c1.026 0 1.997-.24 2.892-.7.279.04.555.065.828.065 1.53 0 2.969-.628 4.236-1.894 3.338-3.338 3.083-6.928 1.738-9.166l-2.868-5.043z"/></g></svg></span></span><span class="button-activeState"><span class="svgIcon svgIcon--clapFilled svgIcon--25px is-flushLeft"><svg class="svgIcon-use" width="25" height="25" ><g fill-rule="evenodd"><path d="M11.738 0l.762 2.966L13.262 0z"/><path d="M16.634 1.224l-1.432-.47-.408 3.022z"/><path d="M9.79.754l-1.431.47 1.84 2.552z"/><path d="M22.472 13.307l-3.023-5.32c-.287-.426-.689-.705-1.123-.776a1.16 1.16 0 00-.911.221c-.297.231-.474.515-.535.84.017.022.036.04.053.063l2.843 5.001c1.95 3.564 1.328 6.973-1.843 10.144a8.46 8.46 0 01-.549.501c1.205-.156 2.328-.737 3.351-1.76 3.268-3.268 3.041-6.749 1.737-8.914"/><path d="M12.58 9.887c-.156-.83.096-1.569.692-2.142L10.78 5.252c-.5-.504-1.378-.504-1.879 0-.178.18-.273.4-.329.63l4.008 4.005z"/><path d="M15.812 9.04c-.218-.323-.539-.55-.88-.606a.814.814 0 00-.644.153c-.176.137-.713.553-.24 1.566l1.43 3.025a.539.539 0 11-.868.612L7.2 6.378a.986.986 0 10-1.395 1.395l4.401 4.403a.538.538 0 11-.762.762L5.046 8.54 3.802 7.295a.99.99 0 00-1.396 0 .981.981 0 000 1.394L3.647 9.93l4.402 4.403a.537.537 0 010 .761.535.535 0 01-.762 0L2.89 10.696a.992.992 0 00-1.399-.003.983.983 0 000 1.395l1.855 1.854 2.763 2.765a.538.538 0 01-.76.761l-2.765-2.764a.982.982 0 00-1.395 0 .989.989 0 000 1.395l5.32 5.32c3.371 3.372 6.64 4.977 10.49 1.126C19.74 19.8 20.271 17 18.62 13.982L15.812 9.04z"/></g></svg></span></span></button></div><span class="u-relative u-background js-actionMultirecommendCount u-marginLeft5"><button class="button button--chromeless u-baseColor--buttonNormal js-multirecommendCountButton u-disablePointerEvents" data-action="show-recommends" data-action-value="6ecbe9ec38b7">10.7K</button></span></div></div><div class="buttonSet u-floatRight"><a class="button button--chromeless u-baseColor--buttonNormal" href="https://uxdesign.cc/5-steps-to-master-a-whiteboard-design-challenge-6ecbe9ec38b7?source=collection_archive---------7-----------------------#--responses" data-action-source="collection_archive---------7-----------------------">38 responses</a><button class="button button--dark button--chromeless is-touchIconFadeInPulse u-baseColor--buttonDark button--withIcon button--withSvgIcon button--bookmark js-bookmarkButton" data-action="add-to-bookmarks" data-action-value="6ecbe9ec38b7"><span class="js-remove-from-bookmarks u-hide"><span class="svgIcon svgIcon--bookmarkFilled svgIcon--25px is-flushRight"><svg class="svgIcon-use" width="25" height="25" ><path d="M19 6c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v14.66h.012c.01.103.045.204.12.285a.5.5 0 00.706.03L12.5 16.85l5.662 4.126c.205.183.52.17.708-.03a.5.5 0 00.118-.285H19V6z"/></svg></span></span><span class="js-add-to-bookmarks"><span class="svgIcon svgIcon--bookmarkAdd svgIcon--25px is-flushRight"><svg class="svgIcon-use" width="25" height="25" fill="none" ><path d="M18 2.5a.5.5 0 011 0V5h2.5a.5.5 0 010 1H19v2.5a.5.5 0 11-1 0V6h-2.5a.5.5 0 010-1H18V2.5z" fill="#292929"/><path d="M7 7a1 1 0 011-1h3.5a.5.5 0 000-1H8a2 2 0 00-2 2v14a.5.5 0 00.805.396L12.5 17l5.695 4.396A.5.5 0 0019 21v-8.5a.5.5 0 00-1 0v7.485l-5.195-4.012a.5.5 0 00-.61 0L7 19.985V7z" fill="#292929"/></svg></span></span></button></div></div></div></div></div><div class="streamItem streamItem--postPreview js-streamItem"><div class="cardChromeless u-marginTop20 u-paddingTop10 u-paddingBottom15 u-paddingLeft20 u-paddingRight20"><div class="postArticle postArticle--short js-postArticle js-trackPostPresentation js-trackPostScrolls" data-post-id="1193c2bd79c4" data-source="collection_archive---------8-----------------------"><div class="u-clearfix u-marginBottom15 u-paddingTop5"><div class="postMetaInline u-floatLeft u-sm-maxWidthFullWidth"><div class="u-flexCenter"><div class="postMetaInline-avatar u-flex0"><a class="link u-baseColor--link avatar" href="https://uxdesign.cc/@Taruna2309" data-action="show-user-card" data-action-value="fe2c62b10f97" data-action-type="hover" data-user-id="fe2c62b10f97" data-collection-slug="user-experience-design-1" dir="auto"><img src="https://cdn-images-1.medium.com/fit/c/72/72/1*k7FO7rBI3fWOwNZi4u50qg.jpeg" class="avatar-image u-size36x36 u-xs-size32x32" alt="Go to the profile of Taruna Manchanda"></a></div><div class="postMetaInline postMetaInline-authorLockup ui-captionStrong u-flex1 u-noWrapWithEllipsis"><a class="ds-link ds-link--styleSubtle link link--darken link--accent u-accentColor--textNormal u-accentColor--textDarken" href="https://uxdesign.cc/@Taruna2309?source=collection_archive---------8-----------------------" data-action="show-user-card" data-action-source="collection_archive---------8-----------------------" data-action-value="fe2c62b10f97" data-action-type="hover" data-user-id="fe2c62b10f97" data-collection-slug="user-experience-design-1" dir="auto">Taruna Manchanda</a> in <a class="ds-link ds-link--styleSubtle link--darken link--accent u-accentColor--textNormal" href="https://uxdesign.cc?source=collection_archive---------8-----------------------" data-action="show-collection-card" data-action-source="collection_archive---------8-----------------------" data-action-value="user-experience-design-1" data-action-type="hover" data-collection-slug="user-experience-design-1">UX Collective</a><div class="ui-caption u-fontSize12 u-baseColor--textNormal u-textColorNormal js-postMetaInlineSupplemental"><a class="link link--darken" href="https://uxdesign.cc/how-hinge-plays-with-your-emotions-to-get-you-a-match-1193c2bd79c4?source=collection_archive---------8-----------------------" data-action="open-post" data-action-value="https://uxdesign.cc/how-hinge-plays-with-your-emotions-to-get-you-a-match-1193c2bd79c4?source=collection_archive---------8-----------------------" data-action-source="preview-listing" ><time datetime="2019-08-15T23:29:09.814Z">Aug 15, 2019</time></a><span class="middotDivider u-fontSize12"></span><span class="readingTime" title="11 min read"></span></div></div></div></div></div><div><a class="" href="https://uxdesign.cc/how-hinge-plays-with-your-emotions-to-get-you-a-match-1193c2bd79c4?source=collection_archive---------8-----------------------" data-action-source="collection_archive---------8-----------------------"><div class="postArticle-content js-postField"><section class="section section--body section--first section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><figure name="previewImage" id="previewImage" class="graf graf--figure graf--layoutCroppedHeightPreview graf--leading"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 30%;"></div><img class="graf-image" data-image-id="1*nnz7_GKD14inkiRIeKlo5Q.jpeg" data-width="2768" data-height="1848" data-is-featured="true" src="https://cdn-images-1.medium.com/fit/t/1600/480/1*nnz7_GKD14inkiRIeKlo5Q.jpeg"></div></figure><h3 name="previewTitle" id="previewTitle" class="graf graf--h3 graf-after--figure graf--title">How Hinge plays with your emotions to get you a match</h3><h4 name="previewSubtitle" id="previewSubtitle" class="graf graf--h4 graf-after--h3 graf--trailing graf--subtitle">Few months ago, I was on this dating app called…</h4></div></div></section></div></a></div><div class="postArticle-readMore"><a class="button button--smaller button--chromeless u-baseColor--buttonNormal" href="https://uxdesign.cc/how-hinge-plays-with-your-emotions-to-get-you-a-match-1193c2bd79c4?source=collection_archive---------8-----------------------" data-action="open-post" data-action-source="collection_archive---------8-----------------------" data-action-value="https://uxdesign.cc/how-hinge-plays-with-your-emotions-to-get-you-a-match-1193c2bd79c4?source=collection_archive---------8-----------------------" data-post-id="1193c2bd79c4">Read more…</a></div><div class="u-clearfix u-paddingTop10"><div class="u-floatLeft"><div class="multirecommend js-actionMultirecommend u-flexCenter" data-post-id="1193c2bd79c4" data-is-flush-left="true" data-source="listing-----1193c2bd79c4---------------------clap_preview"><div class="u-relative u-foreground"><button class="button button--primary button--chromeless u-accentColor--buttonNormal button--withIcon button--withSvgIcon clapButton js-actionMultirecommendButton clapButton--darker" data-action="sign-up-prompt" data-sign-in-action="multivote" data-requires-token="true" data-redirect="https://medium.com/_/vote/p/1193c2bd79c4" data-action-source="listing-----1193c2bd79c4---------------------clap_preview" aria-label="Clap"><span class="button-defaultState"><span class="svgIcon svgIcon--clap svgIcon--25px is-flushLeft"><svg class="svgIcon-use" width="25" height="25" ><g fill-rule="evenodd"><path d="M11.739 0l.761 2.966L13.261 0z"/><path d="M14.815 3.776l1.84-2.551-1.43-.471z"/><path d="M8.378 1.224l1.84 2.551L9.81.753z"/><path d="M20.382 21.622c-1.04 1.04-2.115 1.507-3.166 1.608.168-.14.332-.29.492-.45 2.885-2.886 3.456-5.982 1.69-9.211l-1.101-1.937-.955-2.02c-.315-.676-.235-1.185.245-1.556a.836.836 0 01.66-.16c.342.056.66.28.879.605l2.856 5.023c1.179 1.962 1.379 5.119-1.6 8.098m-13.29-.528l-5.02-5.02a1 1 0 01.707-1.701c.255 0 .512.098.707.292l2.607 2.607a.442.442 0 00.624-.624L4.11 14.04l-1.75-1.75a.998.998 0 111.41-1.413l4.154 4.156a.44.44 0 00.624 0 .44.44 0 000-.624l-4.152-4.153-1.172-1.171a.998.998 0 010-1.41 1.018 1.018 0 011.41 0l1.172 1.17 4.153 4.152a.437.437 0 00.624 0 .442.442 0 000-.624L6.43 8.222a.988.988 0 01-.291-.705.99.99 0 01.29-.706 1 1 0 011.412 0l6.992 6.993a.443.443 0 00.71-.501l-1.35-2.856c-.315-.676-.235-1.185.246-1.557a.85.85 0 01.66-.16c.342.056.659.28.879.606L18.628 14c1.573 2.876 1.067 5.545-1.544 8.156-1.396 1.397-3.144 1.966-5.063 1.652-1.713-.286-3.463-1.248-4.928-2.714zM10.99 5.976l2.562 2.562c-.497.607-.563 1.414-.155 2.284l.265.562-4.257-4.257a.98.98 0 01-.117-.445c0-.267.104-.517.292-.706a1.023 1.023 0 011.41 0zm8.887 2.06c-.375-.557-.902-.916-1.486-1.011a1.738 1.738 0 00-1.342.332c-.376.29-.61.656-.712 1.065a2.1 2.1 0 00-1.095-.562 1.776 1.776 0 00-.992.128l-2.636-2.636a1.883 1.883 0 00-2.658 0 1.862 1.862 0 00-.478.847 1.886 1.886 0 00-2.671-.012 1.867 1.867 0 00-.503.909c-.754-.754-1.992-.754-2.703-.044a1.881 1.881 0 000 2.658c-.288.12-.605.288-.864.547a1.884 1.884 0 000 2.659l.624.622a1.879 1.879 0 00-.91 3.16l5.019 5.02c1.595 1.594 3.515 2.645 5.408 2.959a7.16 7.16 0 001.173.098c1.026 0 1.997-.24 2.892-.7.279.04.555.065.828.065 1.53 0 2.969-.628 4.236-1.894 3.338-3.338 3.083-6.928 1.738-9.166l-2.868-5.043z"/></g></svg></span></span><span class="button-activeState"><span class="svgIcon svgIcon--clapFilled svgIcon--25px is-flushLeft"><svg class="svgIcon-use" width="25" height="25" ><g fill-rule="evenodd"><path d="M11.738 0l.762 2.966L13.262 0z"/><path d="M16.634 1.224l-1.432-.47-.408 3.022z"/><path d="M9.79.754l-1.431.47 1.84 2.552z"/><path d="M22.472 13.307l-3.023-5.32c-.287-.426-.689-.705-1.123-.776a1.16 1.16 0 00-.911.221c-.297.231-.474.515-.535.84.017.022.036.04.053.063l2.843 5.001c1.95 3.564 1.328 6.973-1.843 10.144a8.46 8.46 0 01-.549.501c1.205-.156 2.328-.737 3.351-1.76 3.268-3.268 3.041-6.749 1.737-8.914"/><path d="M12.58 9.887c-.156-.83.096-1.569.692-2.142L10.78 5.252c-.5-.504-1.378-.504-1.879 0-.178.18-.273.4-.329.63l4.008 4.005z"/><path d="M15.812 9.04c-.218-.323-.539-.55-.88-.606a.814.814 0 00-.644.153c-.176.137-.713.553-.24 1.566l1.43 3.025a.539.539 0 11-.868.612L7.2 6.378a.986.986 0 10-1.395 1.395l4.401 4.403a.538.538 0 11-.762.762L5.046 8.54 3.802 7.295a.99.99 0 00-1.396 0 .981.981 0 000 1.394L3.647 9.93l4.402 4.403a.537.537 0 010 .761.535.535 0 01-.762 0L2.89 10.696a.992.992 0 00-1.399-.003.983.983 0 000 1.395l1.855 1.854 2.763 2.765a.538.538 0 01-.76.761l-2.765-2.764a.982.982 0 00-1.395 0 .989.989 0 000 1.395l5.32 5.32c3.371 3.372 6.64 4.977 10.49 1.126C19.74 19.8 20.271 17 18.62 13.982L15.812 9.04z"/></g></svg></span></span></button></div><span class="u-relative u-background js-actionMultirecommendCount u-marginLeft5"><button class="button button--chromeless u-baseColor--buttonNormal js-multirecommendCountButton u-disablePointerEvents" data-action="show-recommends" data-action-value="1193c2bd79c4">1.3K</button></span></div></div><div class="buttonSet u-floatRight"><a class="button button--chromeless u-baseColor--buttonNormal" href="https://uxdesign.cc/how-hinge-plays-with-your-emotions-to-get-you-a-match-1193c2bd79c4?source=collection_archive---------8-----------------------#--responses" data-action-source="collection_archive---------8-----------------------">10 responses</a><button class="button button--dark button--chromeless is-touchIconFadeInPulse u-baseColor--buttonDark button--withIcon button--withSvgIcon button--bookmark js-bookmarkButton" data-action="add-to-bookmarks" data-action-value="1193c2bd79c4"><span class="js-remove-from-bookmarks u-hide"><span class="svgIcon svgIcon--bookmarkFilled svgIcon--25px is-flushRight"><svg class="svgIcon-use" width="25" height="25" ><path d="M19 6c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v14.66h.012c.01.103.045.204.12.285a.5.5 0 00.706.03L12.5 16.85l5.662 4.126c.205.183.52.17.708-.03a.5.5 0 00.118-.285H19V6z"/></svg></span></span><span class="js-add-to-bookmarks"><span class="svgIcon svgIcon--bookmarkAdd svgIcon--25px is-flushRight"><svg class="svgIcon-use" width="25" height="25" fill="none" ><path d="M18 2.5a.5.5 0 011 0V5h2.5a.5.5 0 010 1H19v2.5a.5.5 0 11-1 0V6h-2.5a.5.5 0 010-1H18V2.5z" fill="#292929"/><path d="M7 7a1 1 0 011-1h3.5a.5.5 0 000-1H8a2 2 0 00-2 2v14a.5.5 0 00.805.396L12.5 17l5.695 4.396A.5.5 0 0019 21v-8.5a.5.5 0 00-1 0v7.485l-5.195-4.012a.5.5 0 00-.61 0L7 19.985V7z" fill="#292929"/></svg></span></span></button></div></div></div></div></div><div class="streamItem streamItem--postPreview js-streamItem"><div class="cardChromeless u-marginTop20 u-paddingTop10 u-paddingBottom15 u-paddingLeft20 u-paddingRight20"><div class="postArticle postArticle--short js-postArticle js-trackPostPresentation js-trackPostScrolls" data-post-id="f4de45a04289" data-source="collection_archive---------9-----------------------"><div class="u-clearfix u-marginBottom15 u-paddingTop5"><div class="postMetaInline u-floatLeft u-sm-maxWidthFullWidth"><div class="u-flexCenter"><div class="postMetaInline-avatar u-flex0"><a class="link u-baseColor--link avatar" href="https://uxdesign.cc/@jasonyuan" data-action="show-user-card" data-action-value="df202ed26a1c" data-action-type="hover" data-user-id="df202ed26a1c" data-collection-slug="user-experience-design-1" dir="auto"><img src="https://cdn-images-1.medium.com/fit/c/72/72/1*BxbZXMbsJ7igbHBH8xtyaw.jpeg" class="avatar-image u-size36x36 u-xs-size32x32" alt="Go to the profile of Jason Yuan"></a></div><div class="postMetaInline postMetaInline-authorLockup ui-captionStrong u-flex1 u-noWrapWithEllipsis"><a class="ds-link ds-link--styleSubtle link link--darken link--accent u-accentColor--textNormal u-accentColor--textDarken" href="https://uxdesign.cc/@jasonyuan?source=collection_archive---------9-----------------------" data-action="show-user-card" data-action-source="collection_archive---------9-----------------------" data-action-value="df202ed26a1c" data-action-type="hover" data-user-id="df202ed26a1c" data-collection-slug="user-experience-design-1" dir="auto">Jason Yuan</a> in <a class="ds-link ds-link--styleSubtle link--darken link--accent u-accentColor--textNormal" href="https://uxdesign.cc?source=collection_archive---------9-----------------------" data-action="show-collection-card" data-action-source="collection_archive---------9-----------------------" data-action-value="user-experience-design-1" data-action-type="hover" data-collection-slug="user-experience-design-1">UX Collective</a><div class="ui-caption u-fontSize12 u-baseColor--textNormal u-textColorNormal js-postMetaInlineSupplemental"><a class="link link--darken" href="https://uxdesign.cc/introducing-mercury-os-f4de45a04289?source=collection_archive---------9-----------------------" data-action="open-post" data-action-value="https://uxdesign.cc/introducing-mercury-os-f4de45a04289?source=collection_archive---------9-----------------------" data-action-source="preview-listing" ><time datetime="2019-05-28T17:40:38.868Z">May 28, 2019</time></a><span class="middotDivider u-fontSize12"></span><span class="readingTime" title="12 min read"></span></div></div></div></div></div><div><a class="" href="https://uxdesign.cc/introducing-mercury-os-f4de45a04289?source=collection_archive---------9-----------------------" data-action-source="collection_archive---------9-----------------------"><div class="postArticle-content js-postField"><section class="section section--body section--first section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><figure name="previewImage" id="previewImage" class="graf graf--figure graf--layoutCroppedHeightPreview graf--leading"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 30%;"></div><img class="graf-image" data-image-id="1*sxksghXlAI6HLtn1ZqREIg.png" data-width="2880" data-height="1920" data-is-featured="true" src="https://cdn-images-1.medium.com/fit/t/1600/480/1*sxksghXlAI6HLtn1ZqREIg.png"></div></figure><h3 name="495b" id="495b" class="graf graf--h3 graf-after--figure graf--title">Introducing Mercury OS</h3><h4 name="8c49" id="8c49" class="graf graf--h4 graf-after--h3 graf--trailing graf--subtitle">A speculative vision of the operating system, driven by humane design…</h4></div></div></section></div></a></div><div class="postArticle-readMore"><a class="button button--smaller button--chromeless u-baseColor--buttonNormal" href="https://uxdesign.cc/introducing-mercury-os-f4de45a04289?source=collection_archive---------9-----------------------" data-action="open-post" data-action-source="collection_archive---------9-----------------------" data-action-value="https://uxdesign.cc/introducing-mercury-os-f4de45a04289?source=collection_archive---------9-----------------------" data-post-id="f4de45a04289">Read more…</a></div><div class="u-clearfix u-paddingTop10"><div class="u-floatLeft"><div class="multirecommend js-actionMultirecommend u-flexCenter" data-post-id="f4de45a04289" data-is-flush-left="true" data-source="listing-----f4de45a04289---------------------clap_preview"><div class="u-relative u-foreground"><button class="button button--primary button--chromeless u-accentColor--buttonNormal button--withIcon button--withSvgIcon clapButton js-actionMultirecommendButton clapButton--darker" data-action="sign-up-prompt" data-sign-in-action="multivote" data-requires-token="true" data-redirect="https://medium.com/_/vote/p/f4de45a04289" data-action-source="listing-----f4de45a04289---------------------clap_preview" aria-label="Clap"><span class="button-defaultState"><span class="svgIcon svgIcon--clap svgIcon--25px is-flushLeft"><svg class="svgIcon-use" width="25" height="25" ><g fill-rule="evenodd"><path d="M11.739 0l.761 2.966L13.261 0z"/><path d="M14.815 3.776l1.84-2.551-1.43-.471z"/><path d="M8.378 1.224l1.84 2.551L9.81.753z"/><path d="M20.382 21.622c-1.04 1.04-2.115 1.507-3.166 1.608.168-.14.332-.29.492-.45 2.885-2.886 3.456-5.982 1.69-9.211l-1.101-1.937-.955-2.02c-.315-.676-.235-1.185.245-1.556a.836.836 0 01.66-.16c.342.056.66.28.879.605l2.856 5.023c1.179 1.962 1.379 5.119-1.6 8.098m-13.29-.528l-5.02-5.02a1 1 0 01.707-1.701c.255 0 .512.098.707.292l2.607 2.607a.442.442 0 00.624-.624L4.11 14.04l-1.75-1.75a.998.998 0 111.41-1.413l4.154 4.156a.44.44 0 00.624 0 .44.44 0 000-.624l-4.152-4.153-1.172-1.171a.998.998 0 010-1.41 1.018 1.018 0 011.41 0l1.172 1.17 4.153 4.152a.437.437 0 00.624 0 .442.442 0 000-.624L6.43 8.222a.988.988 0 01-.291-.705.99.99 0 01.29-.706 1 1 0 011.412 0l6.992 6.993a.443.443 0 00.71-.501l-1.35-2.856c-.315-.676-.235-1.185.246-1.557a.85.85 0 01.66-.16c.342.056.659.28.879.606L18.628 14c1.573 2.876 1.067 5.545-1.544 8.156-1.396 1.397-3.144 1.966-5.063 1.652-1.713-.286-3.463-1.248-4.928-2.714zM10.99 5.976l2.562 2.562c-.497.607-.563 1.414-.155 2.284l.265.562-4.257-4.257a.98.98 0 01-.117-.445c0-.267.104-.517.292-.706a1.023 1.023 0 011.41 0zm8.887 2.06c-.375-.557-.902-.916-1.486-1.011a1.738 1.738 0 00-1.342.332c-.376.29-.61.656-.712 1.065a2.1 2.1 0 00-1.095-.562 1.776 1.776 0 00-.992.128l-2.636-2.636a1.883 1.883 0 00-2.658 0 1.862 1.862 0 00-.478.847 1.886 1.886 0 00-2.671-.012 1.867 1.867 0 00-.503.909c-.754-.754-1.992-.754-2.703-.044a1.881 1.881 0 000 2.658c-.288.12-.605.288-.864.547a1.884 1.884 0 000 2.659l.624.622a1.879 1.879 0 00-.91 3.16l5.019 5.02c1.595 1.594 3.515 2.645 5.408 2.959a7.16 7.16 0 001.173.098c1.026 0 1.997-.24 2.892-.7.279.04.555.065.828.065 1.53 0 2.969-.628 4.236-1.894 3.338-3.338 3.083-6.928 1.738-9.166l-2.868-5.043z"/></g></svg></span></span><span class="button-activeState"><span class="svgIcon svgIcon--clapFilled svgIcon--25px is-flushLeft"><svg class="svgIcon-use" width="25" height="25" ><g fill-rule="evenodd"><path d="M11.738 0l.762 2.966L13.262 0z"/><path d="M16.634 1.224l-1.432-.47-.408 3.022z"/><path d="M9.79.754l-1.431.47 1.84 2.552z"/><path d="M22.472 13.307l-3.023-5.32c-.287-.426-.689-.705-1.123-.776a1.16 1.16 0 00-.911.221c-.297.231-.474.515-.535.84.017.022.036.04.053.063l2.843 5.001c1.95 3.564 1.328 6.973-1.843 10.144a8.46 8.46 0 01-.549.501c1.205-.156 2.328-.737 3.351-1.76 3.268-3.268 3.041-6.749 1.737-8.914"/><path d="M12.58 9.887c-.156-.83.096-1.569.692-2.142L10.78 5.252c-.5-.504-1.378-.504-1.879 0-.178.18-.273.4-.329.63l4.008 4.005z"/><path d="M15.812 9.04c-.218-.323-.539-.55-.88-.606a.814.814 0 00-.644.153c-.176.137-.713.553-.24 1.566l1.43 3.025a.539.539 0 11-.868.612L7.2 6.378a.986.986 0 10-1.395 1.395l4.401 4.403a.538.538 0 11-.762.762L5.046 8.54 3.802 7.295a.99.99 0 00-1.396 0 .981.981 0 000 1.394L3.647 9.93l4.402 4.403a.537.537 0 010 .761.535.535 0 01-.762 0L2.89 10.696a.992.992 0 00-1.399-.003.983.983 0 000 1.395l1.855 1.854 2.763 2.765a.538.538 0 01-.76.761l-2.765-2.764a.982.982 0 00-1.395 0 .989.989 0 000 1.395l5.32 5.32c3.371 3.372 6.64 4.977 10.49 1.126C19.74 19.8 20.271 17 18.62 13.982L15.812 9.04z"/></g></svg></span></span></button></div><span class="u-relative u-background js-actionMultirecommendCount u-marginLeft5"><button class="button button--chromeless u-baseColor--buttonNormal js-multirecommendCountButton u-disablePointerEvents" data-action="show-recommends" data-action-value="f4de45a04289">69K</button></span></div></div><div class="buttonSet u-floatRight"><a class="button button--chromeless u-baseColor--buttonNormal" href="https://uxdesign.cc/introducing-mercury-os-f4de45a04289?source=collection_archive---------9-----------------------#--responses" data-action-source="collection_archive---------9-----------------------">235 responses</a><button class="button button--dark button--chromeless is-touchIconFadeInPulse u-baseColor--buttonDark button--withIcon button--withSvgIcon button--bookmark js-bookmarkButton" data-action="add-to-bookmarks" data-action-value="f4de45a04289"><span class="js-remove-from-bookmarks u-hide"><span class="svgIcon svgIcon--bookmarkFilled svgIcon--25px is-flushRight"><svg class="svgIcon-use" width="25" height="25" ><path d="M19 6c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v14.66h.012c.01.103.045.204.12.285a.5.5 0 00.706.03L12.5 16.85l5.662 4.126c.205.183.52.17.708-.03a.5.5 0 00.118-.285H19V6z"/></svg></span></span><span class="js-add-to-bookmarks"><span class="svgIcon svgIcon--bookmarkAdd svgIcon--25px is-flushRight"><svg class="svgIcon-use" width="25" height="25" fill="none" ><path d="M18 2.5a.5.5 0 011 0V5h2.5a.5.5 0 010 1H19v2.5a.5.5 0 11-1 0V6h-2.5a.5.5 0 010-1H18V2.5z" fill="#292929"/><path d="M7 7a1 1 0 011-1h3.5a.5.5 0 000-1H8a2 2 0 00-2 2v14a.5.5 0 00.805.396L12.5 17l5.695 4.396A.5.5 0 0019 21v-8.5a.5.5 0 00-1 0v7.485l-5.195-4.012a.5.5 0 00-.61 0L7 19.985V7z" fill="#292929"/></svg></span></span></button></div></div></div></div></div></div><div class="u-marginTop30 u-marginBottom40 u-clearfix"></div><p class="u-marginBottom40 u-clearfix u-fontSize14 u-textColorDark">These were the top 10 stories published by UX Collective; you can also dive into yearly archives: <a href="https://uxdesign.cc/archive/2013">2013</a>, <a href="https://uxdesign.cc/archive/2014">2014</a>, <a href="https://uxdesign.cc/archive/2015">2015</a>, <a href="https://uxdesign.cc/archive/2016">2016</a>, <a href="https://uxdesign.cc/archive/2017">2017</a>, <a href="https://uxdesign.cc/archive/2018">2018</a>, <a href="https://uxdesign.cc/archive/2019">2019</a>, <a href="https://uxdesign.cc/archive/2020">2020</a>, <a href="https://uxdesign.cc/archive/2021">2021</a>, <a href="https://uxdesign.cc/archive/2022">2022</a>, <a href="https://uxdesign.cc/archive/2023">2023</a>, and <a href="https://uxdesign.cc/archive/2024">2024</a>.</p></div><div class="col u-xs-size12of12 u-size3of12 u-paddingRight0 u-paddingLeft50"><header class="heading heading--borderedBottom" ><div class="u-clearfix"><div class="heading-content u-floatLeft"><span class="heading-title">About</span></div></div></header><div class="u-paddingTop18 u-paddingBottom35"><div class="u-fontSize18 u-lineHeightTight">UX Collective</div><div class="u-fontSize14 u-lineHeightBaseSans u-paddingTop15"><div class="u-textColorDark u-marginBottom15">We believe designers are thinkers as much as they are makers. Curated stories on UX, Visual & Product Design. <a rel="nofollow" href="https://linktr.ee/uxc">https://linktr.ee/uxc</a></div><a class=" link--darken u-accentColor--textDarken link--accent u-accentColor--textNormal" href="https://uxdesign.cc/about">More information</a></div></div><header class="heading heading--borderedBottom" ><div class="u-clearfix"><div class="heading-content u-floatLeft"><span class="heading-title">Tags</span></div></div></header><div class="u-sizeFull u-paddingTop10 u-paddingBottom10 u-borderBox"><a class="link u-baseColor--link u-fontSize14 u-verticalAlignTop js-tag" href="https://uxdesign.cc/tagged/artificial-intelligence">Artificial Intelligence</a></div><div class="u-sizeFull u-paddingTop10 u-paddingBottom10 u-borderBox"><a class="link u-baseColor--link u-fontSize14 u-verticalAlignTop js-tag" href="https://uxdesign.cc/tagged/design-thinking">Design Thinking</a></div><div class="u-sizeFull u-paddingTop10 u-paddingBottom10 u-borderBox"><a class="link u-baseColor--link u-fontSize14 u-verticalAlignTop js-tag" href="https://uxdesign.cc/tagged/product-design">Product Design</a></div><div class="u-sizeFull u-paddingTop10 u-paddingBottom10 u-borderBox"><a class="link u-baseColor--link u-fontSize14 u-verticalAlignTop js-tag" href="https://uxdesign.cc/tagged/ux">UX</a></div><div class="u-sizeFull u-paddingTop10 u-paddingBottom10 u-borderBox"><a class="link u-baseColor--link u-fontSize14 u-verticalAlignTop js-tag" href="https://uxdesign.cc/tagged/design">Design</a></div><div class="u-sizeFull u-paddingTop10 u-paddingBottom10 u-borderBox"><a class="link u-baseColor--link u-fontSize14 u-verticalAlignTop js-tag" href="https://uxdesign.cc/tagged/user-experience">User Experience</a></div><div class="u-sizeFull u-paddingTop10 u-paddingBottom10 u-borderBox"><a class="link u-baseColor--link u-fontSize14 u-verticalAlignTop js-tag" href="https://uxdesign.cc/tagged/design-thinking">Design Thinking</a></div><div class="u-sizeFull u-paddingTop10 u-paddingBottom10 u-borderBox"><a class="link u-baseColor--link u-fontSize14 u-verticalAlignTop js-tag" href="https://uxdesign.cc/tagged/design">Design</a></div><div class="u-sizeFull u-paddingTop10 u-paddingBottom10 u-borderBox"><a class="link u-baseColor--link u-fontSize14 u-verticalAlignTop js-tag" href="https://uxdesign.cc/tagged/ui">UI</a></div><div class="u-sizeFull u-paddingTop10 u-paddingBottom10 u-borderBox"><a class="link u-baseColor--link u-fontSize14 u-verticalAlignTop js-tag" href="https://uxdesign.cc/tagged/ux">UX</a></div><div class="u-marginTop30"><header class="heading heading--borderedBottom" ><div class="u-clearfix"><div class="heading-content u-floatLeft"><span class="heading-title">Editors</span></div></div></header></div><div class="js-staff"><div class="u-flexCenter u-paddingBottom10 u-paddingTop10"><div class="u-marginRight10"><a class="link u-baseColor--link avatar" href="https://uxdesign.cc/@fabriciot?source=collection-archive" data-action="show-user-card" data-action-source="collection-archive" data-action-value="50e39baefa55" data-action-type="hover" data-user-id="50e39baefa55" data-collection-slug="user-experience-design-1" dir="auto"><img src="https://cdn-images-1.medium.com/fit/c/80/80/1*86azy9AQulxnSdnJdvctFQ.jpeg" class="avatar-image avatar-image--smaller" alt="Go to the profile of Fabricio Teixeira"></a></div><a class="link link--darker link--darken u-accentColor--textDarken u-baseColor--link u-fontSize14 u-flex1" href="https://uxdesign.cc/@fabriciot" data-action="show-user-card" data-action-value="50e39baefa55" data-action-type="hover" data-user-id="50e39baefa55" data-collection-slug="user-experience-design-1" dir="auto">Fabricio Teixeira</a></div></div><div class="js-staff"><div class="u-flexCenter u-paddingBottom10 u-paddingTop10"><div class="u-marginRight10"><a class="link u-baseColor--link avatar" href="https://uxdesign.cc/@caioab?source=collection-archive" data-action="show-user-card" data-action-source="collection-archive" data-action-value="27353c0f540b" data-action-type="hover" data-user-id="27353c0f540b" data-collection-slug="user-experience-design-1" dir="auto"><img src="https://cdn-images-1.medium.com/fit/c/80/80/1*atXAWA8gjAL4bq_au5O-Vw.jpeg" class="avatar-image avatar-image--smaller" alt="Go to the profile of Caio Braga"></a></div><a class="link link--darker link--darken u-accentColor--textDarken u-baseColor--link u-fontSize14 u-flex1" href="https://uxdesign.cc/@caioab" data-action="show-user-card" data-action-value="27353c0f540b" data-action-type="hover" data-user-id="27353c0f540b" data-collection-slug="user-experience-design-1" dir="auto">Caio Braga</a></div></div><div class="u-marginTop30"><header class="heading heading--borderedBottom" ><div class="u-clearfix"><div class="heading-content u-floatLeft"><span class="heading-title">Writers</span></div></div></header><div class="js-staff"><div class="u-flexCenter u-paddingBottom10 u-paddingTop10"><div class="u-marginRight10"><a class="link u-baseColor--link avatar" href="https://uxdesign.cc/@kolboid?source=collection-archive" data-action="show-user-card" data-action-source="collection-archive" data-action-value="296f38d72186" data-action-type="hover" data-user-id="296f38d72186" data-collection-slug="user-experience-design-1" dir="auto"><img src="https://cdn-images-1.medium.com/fit/c/80/80/0*B9-ana_k5yivbkq7.png" class="avatar-image avatar-image--smaller" alt="Go to the profile of Kolozsi István (kolboid)"></a></div><a class="link link--darker link--darken u-accentColor--textDarken u-baseColor--link u-fontSize14 u-flex1" href="https://uxdesign.cc/@kolboid" data-action="show-user-card" data-action-value="296f38d72186" data-action-type="hover" data-user-id="296f38d72186" data-collection-slug="user-experience-design-1" dir="auto">Kolozsi István (kolboid)</a></div></div><div class="js-staff"><div class="u-flexCenter u-paddingBottom10 u-paddingTop10"><div class="u-marginRight10"><a class="link u-baseColor--link avatar" href="https://uxdesign.cc/@msciocia?source=collection-archive" data-action="show-user-card" data-action-source="collection-archive" data-action-value="29638f4e79d0" data-action-type="hover" data-user-id="29638f4e79d0" data-collection-slug="user-experience-design-1" dir="auto"><img src="https://cdn-images-1.medium.com/fit/c/80/80/2*1Rg36Lrvh4ZIuMSb1bOLIA.png" class="avatar-image avatar-image--smaller" alt="Go to the profile of Laura Ciocia"></a></div><a class="link link--darker link--darken u-accentColor--textDarken u-baseColor--link u-fontSize14 u-flex1" href="https://uxdesign.cc/@msciocia" data-action="show-user-card" data-action-value="29638f4e79d0" data-action-type="hover" data-user-id="29638f4e79d0" data-collection-slug="user-experience-design-1" dir="auto">Laura Ciocia</a></div></div><div class="js-staff"><div class="u-flexCenter u-paddingBottom10 u-paddingTop10"><div class="u-marginRight10"><a class="link u-baseColor--link avatar" href="https://uxdesign.cc/@yamilah?source=collection-archive" data-action="show-user-card" data-action-source="collection-archive" data-action-value="1713555e580d" data-action-type="hover" data-user-id="1713555e580d" data-collection-slug="user-experience-design-1" dir="auto"><img src="https://cdn-images-1.medium.com/fit/c/80/80/1*0SoAF-MpGnY1Xh8nJesZDQ.jpeg" class="avatar-image avatar-image--smaller" alt="Go to the profile of Y. A."></a></div><a class="link link--darker link--darken u-accentColor--textDarken u-baseColor--link u-fontSize14 u-flex1" href="https://uxdesign.cc/@yamilah" data-action="show-user-card" data-action-value="1713555e580d" data-action-type="hover" data-user-id="1713555e580d" data-collection-slug="user-experience-design-1" dir="auto">Y. A.</a></div></div></div></div></div><style class="js-collectionStyle"> .u-accentColor--borderLight {border-color: #868484 !important;} .u-accentColor--borderNormal {border-color: #868484 !important;} .u-accentColor--borderDark {border-color: #737171 !important;} .u-accentColor--iconLight .svgIcon,.u-accentColor--iconLight.svgIcon {fill: #868484 !important;} .u-accentColor--iconNormal .svgIcon,.u-accentColor--iconNormal.svgIcon {fill: #868484 !important;} .u-accentColor--iconDark .svgIcon,.u-accentColor--iconDark.svgIcon {fill: #737171 !important;} .u-accentColor--textNormal {color: #737171 !important;} .u-accentColor--hoverTextNormal:hover {color: #737171 !important;} .u-accentColor--textNormal.u-accentColor--textDarken:hover {color: #696867 !important;} .u-accentColor--textDark {color: #696867 !important;} .u-accentColor--backgroundLight {background-color: #868484 !important;} .u-accentColor--backgroundNormal {background-color: #868484 !important;} .u-accentColor--backgroundDark {background-color: #737171 !important;} .u-accentColor--buttonDark {border-color: #737171 !important; color: #696867 !important;} .u-accentColor--buttonDark:hover {border-color: #696867 !important;} .u-accentColor--buttonDark .icon:before,.u-accentColor--buttonDark .svgIcon{color: #737171 !important; fill: #737171 !important;} .u-accentColor--buttonNormal:not(.clapButton--largePill) {border-color: #868484 !important; color: #737171 !important;} .u-accentColor--buttonNormal:hover {border-color: #737171 !important;} .u-accentColor--buttonNormal .icon:before,.u-accentColor--buttonNormal .svgIcon{color: #868484 !important; fill: #868484 !important;} .u-accentColor--buttonNormal.button--filled .icon:before,.u-accentColor--buttonNormal.button--filled .svgIcon{color: rgba(255, 255, 255, 1) !important; fill: rgba(255, 255, 255, 1) !important;} .u-accentColor--buttonDark.button--filled,.u-accentColor--buttonDark.button--withChrome.is-active,.u-accentColor--fillWhenActive.is-active {background-color: #737171 !important; border-color: #737171 !important; color: rgba(255, 255, 255, 1) !important; fill: rgba(255, 255, 255, 1) !important;} .u-accentColor--buttonNormal.button--filled:not(.clapButton--largePill),.u-accentColor--buttonNormal.button--withChrome.is-active:not(.clapButton--largePill) {background-color: #868484 !important; border-color: #868484 !important; color: rgba(255, 255, 255, 1) !important; fill: rgba(255, 255, 255, 1) !important;} .postArticle.is-withAccentColors .markup--user,.postArticle.is-withAccentColors .markup--query {color: #737171 !important;}.u-tintBgColor {background-color: rgba(0, 0, 0, 1) !important;}.u-tintBgColor .u-fadeLeft:before {background-image: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%) !important;}.u-tintBgColor .u-fadeRight:after {background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%) !important;} .u-tintSpectrum .u-baseColor--borderLight {border-color: #868484 !important;} .u-tintSpectrum .u-baseColor--borderNormal {border-color: #B1AEAE !important;} .u-tintSpectrum .u-baseColor--borderDark {border-color: #D9D6D6 !important;} .u-tintSpectrum .u-baseColor--iconLight .svgIcon,.u-tintSpectrum .u-baseColor--iconLight.svgIcon {fill: #868484 !important;} .u-tintSpectrum .u-baseColor--iconNormal .svgIcon,.u-tintSpectrum .u-baseColor--iconNormal.svgIcon {fill: #B1AEAE !important;} .u-tintSpectrum .u-baseColor--iconDark .svgIcon,.u-tintSpectrum .u-baseColor--iconDark.svgIcon {fill: #D9D6D6 !important;} .u-tintSpectrum .u-baseColor--textNormal {color: #B1AEAE !important;} .u-tintSpectrum .u-baseColor--textNormal.u-baseColor--textDarken:hover {color: #ECE9E9 !important;} .u-tintSpectrum .u-baseColor--textDark {color: #ECE9E9 !important;} .u-tintSpectrum .u-baseColor--textDarker {color: #ECE9E9 !important;} .u-tintSpectrum .u-baseColor--backgroundLight {background-color: #868484 !important;} .u-tintSpectrum .u-baseColor--backgroundNormal {background-color: #B1AEAE !important;} .u-tintSpectrum .u-baseColor--backgroundDark {background-color: #D9D6D6 !important;} .u-tintSpectrum .u-baseColor--buttonLight {border-color: #868484 !important; color: #868484 !important;} .u-tintSpectrum .u-baseColor--buttonLight:hover {border-color: #868484 !important;} .u-tintSpectrum .u-baseColor--buttonLight .icon:before,.u-tintSpectrum .u-baseColor--buttonLight .svgIcon {color: #868484 !important; fill: #868484 !important;} .u-tintSpectrum .u-baseColor--buttonDark {border-color: #D9D6D6 !important; color: #ECE9E9 !important;} .u-tintSpectrum .u-baseColor--buttonDark:hover {border-color: #ECE9E9 !important;} .u-tintSpectrum .u-baseColor--buttonDark .icon:before,.u-tintSpectrum .u-baseColor--buttonDark .svgIcon {color: #D9D6D6 !important; fill: #D9D6D6 !important;} .u-tintSpectrum .u-baseColor--buttonNormal {border-color: #B1AEAE !important; color: #B1AEAE !important;} .u-tintSpectrum .u-baseColor--buttonNormal:hover {border-color: #D9D6D6 !important;} .u-tintSpectrum .u-baseColor--buttonNormal .icon:before,.u-tintSpectrum .u-baseColor--buttonNormal .svgIcon {color: #B1AEAE !important; fill: #B1AEAE !important;} .u-tintSpectrum .u-baseColor--buttonDark.button--filled,.u-tintSpectrum .u-baseColor--buttonDark.button--withChrome.is-active {background-color: #D9D6D6 !important; border-color: #D9D6D6 !important; color: rgba(0, 0, 0, 1) !important; fill: rgba(0, 0, 0, 1) !important;} .u-tintSpectrum .u-baseColor--buttonNormal.button--filled,.u-tintSpectrum .u-baseColor--buttonNormal.button--withChrome.is-active {background-color: #B1AEAE !important; border-color: #B1AEAE !important; color: rgba(0, 0, 0, 1) !important; fill: rgba(0, 0, 0, 1) !important;} .u-tintSpectrum .u-baseColor--link {color: #B1AEAE !important;} .u-tintSpectrum .u-baseColor--link.link--darkenOnHover:hover {color: #ECE9E9 !important;} .u-tintSpectrum .u-baseColor--link.link--darken:hover,.u-tintSpectrum .u-baseColor--link.link--darken:focus,.u-tintSpectrum .u-baseColor--link.link--darken:active {color: #ECE9E9 !important;} .u-tintSpectrum .u-baseColor--link.link--dark {color: #ECE9E9 !important;} .u-tintSpectrum .u-baseColor--link.link--dark.link--darken:hover,.u-tintSpectrum .u-baseColor--link.link--dark.link--darken:focus,.u-tintSpectrum .u-baseColor--link.link--dark.link--darken:active {color: #ECE9E9 !important;} .u-tintSpectrum .u-baseColor--link.link--darker {color: #ECE9E9 !important;} .u-tintSpectrum .u-baseColor--placeholderNormal ::-webkit-input-placeholder {color: #868484;} .u-tintSpectrum .u-baseColor--placeholderNormal ::-moz-placeholder {color: #868484;} .u-tintSpectrum .u-baseColor--placeholderNormal :-ms-input-placeholder {color: #868484;} .u-tintSpectrum .ui-h1,.u-tintSpectrum .ui-h2,.u-tintSpectrum .ui-h3,.u-tintSpectrum .ui-h4,.u-tintSpectrum .ui-brand1,.u-tintSpectrum .ui-brand2,.u-tintSpectrum .ui-captionStrong {color: #ECE9E9 !important; fill: #ECE9E9 !important;} .u-tintSpectrum .ui-body,.u-tintSpectrum .ui-caps {color: #ECE9E9 !important; fill: #ECE9E9 !important;} .u-tintSpectrum .ui-summary,.u-tintSpectrum .ui-caption {color: #868484 !important; fill: #868484 !important;} .u-tintSpectrum .u-accentColor--borderLight {border-color: #868484 !important;} .u-tintSpectrum .u-accentColor--borderNormal {border-color: #B1AEAE !important;} .u-tintSpectrum .u-accentColor--borderDark {border-color: #D9D6D6 !important;} .u-tintSpectrum .u-accentColor--iconLight .svgIcon,.u-tintSpectrum .u-accentColor--iconLight.svgIcon {fill: #868484 !important;} .u-tintSpectrum .u-accentColor--iconNormal .svgIcon,.u-tintSpectrum .u-accentColor--iconNormal.svgIcon {fill: #B1AEAE !important;} .u-tintSpectrum .u-accentColor--iconDark .svgIcon,.u-tintSpectrum .u-accentColor--iconDark.svgIcon {fill: #D9D6D6 !important;} .u-tintSpectrum .u-accentColor--textNormal {color: #B1AEAE !important;} .u-tintSpectrum .u-accentColor--hoverTextNormal:hover {color: #B1AEAE !important;} .u-tintSpectrum .u-accentColor--textNormal.u-accentColor--textDarken:hover {color: #ECE9E9 !important;} .u-tintSpectrum .u-accentColor--textDark {color: #ECE9E9 !important;} .u-tintSpectrum .u-accentColor--backgroundLight {background-color: #868484 !important;} .u-tintSpectrum .u-accentColor--backgroundNormal {background-color: #B1AEAE !important;} .u-tintSpectrum .u-accentColor--backgroundDark {background-color: #D9D6D6 !important;} .u-tintSpectrum .u-accentColor--buttonDark {border-color: #D9D6D6 !important; color: #ECE9E9 !important;} .u-tintSpectrum .u-accentColor--buttonDark:hover {border-color: #ECE9E9 !important;} .u-tintSpectrum .u-accentColor--buttonDark .icon:before,.u-tintSpectrum .u-accentColor--buttonDark .svgIcon{color: #D9D6D6 !important; fill: #D9D6D6 !important;} .u-tintSpectrum .u-accentColor--buttonNormal:not(.clapButton--largePill) {border-color: #B1AEAE !important; color: #B1AEAE !important;} .u-tintSpectrum .u-accentColor--buttonNormal:hover {border-color: #D9D6D6 !important;} .u-tintSpectrum .u-accentColor--buttonNormal .icon:before,.u-tintSpectrum .u-accentColor--buttonNormal .svgIcon{color: #B1AEAE !important; fill: #B1AEAE !important;} .u-tintSpectrum .u-accentColor--buttonNormal.button--filled .icon:before,.u-tintSpectrum .u-accentColor--buttonNormal.button--filled .svgIcon{color: rgba(0, 0, 0, 1) !important; fill: rgba(0, 0, 0, 1) !important;} .u-tintSpectrum .u-accentColor--buttonDark.button--filled,.u-tintSpectrum .u-accentColor--buttonDark.button--withChrome.is-active,.u-tintSpectrum .u-accentColor--fillWhenActive.is-active {background-color: #D9D6D6 !important; border-color: #D9D6D6 !important; color: rgba(0, 0, 0, 1) !important; fill: rgba(0, 0, 0, 1) !important;} .u-tintSpectrum .u-accentColor--buttonNormal.button--filled:not(.clapButton--largePill),.u-tintSpectrum .u-accentColor--buttonNormal.button--withChrome.is-active:not(.clapButton--largePill) {background-color: #B1AEAE !important; border-color: #B1AEAE !important; color: rgba(0, 0, 0, 1) !important; fill: rgba(0, 0, 0, 1) !important;} .u-tintSpectrum .postArticle.is-withAccentColors .markup--user,.u-tintSpectrum .postArticle.is-withAccentColors .markup--query {color: #B1AEAE !important;} .u-accentColor--highlightFaint {background-color: rgba(243, 240, 239, 1) !important;} .u-accentColor--highlightStrong.is-active .svgIcon {fill: rgba(226, 223, 222, 1) !important;} .postArticle.is-withAccentColors .markup--quote.is-other {background-color: rgba(243, 240, 239, 1) !important;} body.is-withMagicUnderlines .postArticle.is-withAccentColors .markup--quote.is-other {background-color: transparent !important; background-image: linear-gradient(to bottom, rgba(243, 240, 239, 1), rgba(243, 240, 239, 1));} .postArticle.is-withAccentColors .markup--quote.is-me {background-color: rgba(233, 230, 230, 1) !important;} body.is-withMagicUnderlines .postArticle.is-withAccentColors .markup--quote.is-me {background-color: transparent !important; background-image: linear-gradient(to bottom, rgba(233, 230, 230, 1), rgba(233, 230, 230, 1));} .postArticle.is-withAccentColors .markup--quote.is-targeted {background-color: rgba(226, 223, 222, 1) !important;} body.is-withMagicUnderlines .postArticle.is-withAccentColors .markup--quote.is-targeted {background-color: transparent !important; background-image: linear-gradient(to bottom, rgba(226, 223, 222, 1), rgba(226, 223, 222, 1));} .postArticle.is-withAccentColors .markup--quote.is-selected {background-color: rgba(226, 223, 222, 1) !important;} body.is-withMagicUnderlines .postArticle.is-withAccentColors .markup--quote.is-selected {background-color: transparent !important; background-image: linear-gradient(to bottom, rgba(226, 223, 222, 1), rgba(226, 223, 222, 1));} .postArticle.is-withAccentColors .markup--highlight {background-color: rgba(226, 223, 222, 1) !important;} body.is-withMagicUnderlines .postArticle.is-withAccentColors .markup--highlight {background-color: transparent !important; background-image: linear-gradient(to bottom, rgba(226, 223, 222, 1), rgba(226, 223, 222, 1));}</style><style class="js-collectionStyleConstant">.u-imageBgColor {background-color: rgba(0, 0, 0, 0.24705882352941178);} .u-imageSpectrum .u-baseColor--borderLight {border-color: rgba(255, 255, 255, 0.6980392156862745) !important;} .u-imageSpectrum .u-baseColor--borderNormal {border-color: rgba(255, 255, 255, 0.8980392156862745) !important;} .u-imageSpectrum .u-baseColor--borderDark {border-color: rgba(255, 255, 255, 0.9490196078431372) !important;} .u-imageSpectrum .u-baseColor--iconLight .svgIcon,.u-imageSpectrum .u-baseColor--iconLight.svgIcon {fill: rgba(255, 255, 255, 0.8) !important;} .u-imageSpectrum .u-baseColor--iconNormal .svgIcon,.u-imageSpectrum .u-baseColor--iconNormal.svgIcon {fill: rgba(255, 255, 255, 0.9490196078431372) !important;} .u-imageSpectrum .u-baseColor--iconDark .svgIcon,.u-imageSpectrum .u-baseColor--iconDark.svgIcon {fill: rgba(255, 255, 255, 1) !important;} .u-imageSpectrum .u-baseColor--textNormal {color: rgba(255, 255, 255, 0.9490196078431372) !important;} .u-imageSpectrum .u-baseColor--textNormal.u-baseColor--textDarken:hover {color: rgba(255, 255, 255, 1) !important;} .u-imageSpectrum .u-baseColor--textDark {color: rgba(255, 255, 255, 1) !important;} .u-imageSpectrum .u-baseColor--textDarker {color: rgba(255, 255, 255, 1) !important;} .u-imageSpectrum .u-baseColor--backgroundLight {background-color: rgba(255, 255, 255, 0.8980392156862745) !important;} .u-imageSpectrum .u-baseColor--backgroundNormal {background-color: rgba(255, 255, 255, 0.9490196078431372) !important;} .u-imageSpectrum .u-baseColor--backgroundDark {background-color: rgba(255, 255, 255, 1) !important;} .u-imageSpectrum .u-baseColor--buttonLight {border-color: rgba(255, 255, 255, 0.6980392156862745) !important; color: rgba(255, 255, 255, 0.8) !important;} .u-imageSpectrum .u-baseColor--buttonLight:hover {border-color: rgba(255, 255, 255, 0.6980392156862745) !important;} .u-imageSpectrum .u-baseColor--buttonLight .icon:before,.u-imageSpectrum .u-baseColor--buttonLight .svgIcon {color: rgba(255, 255, 255, 0.8) !important; fill: rgba(255, 255, 255, 0.8) !important;} .u-imageSpectrum .u-baseColor--buttonDark {border-color: rgba(255, 255, 255, 0.9490196078431372) !important; color: rgba(255, 255, 255, 1) !important;} .u-imageSpectrum .u-baseColor--buttonDark:hover {border-color: rgba(255, 255, 255, 1) !important;} .u-imageSpectrum .u-baseColor--buttonDark .icon:before,.u-imageSpectrum .u-baseColor--buttonDark .svgIcon {color: rgba(255, 255, 255, 1) !important; fill: rgba(255, 255, 255, 1) !important;} .u-imageSpectrum .u-baseColor--buttonNormal {border-color: rgba(255, 255, 255, 0.8980392156862745) !important; color: rgba(255, 255, 255, 0.9490196078431372) !important;} .u-imageSpectrum .u-baseColor--buttonNormal:hover {border-color: rgba(255, 255, 255, 0.9490196078431372) !important;} .u-imageSpectrum .u-baseColor--buttonNormal .icon:before,.u-imageSpectrum .u-baseColor--buttonNormal .svgIcon {color: rgba(255, 255, 255, 0.9490196078431372) !important; fill: rgba(255, 255, 255, 0.9490196078431372) !important;} .u-imageSpectrum .u-baseColor--buttonDark.button--filled,.u-imageSpectrum .u-baseColor--buttonDark.button--withChrome.is-active {background-color: rgba(255, 255, 255, 1) !important; border-color: rgba(255, 255, 255, 1) !important; color: rgba(0, 0, 0, 0.24705882352941178) !important; fill: rgba(0, 0, 0, 0.24705882352941178) !important;} .u-imageSpectrum .u-baseColor--buttonNormal.button--filled,.u-imageSpectrum .u-baseColor--buttonNormal.button--withChrome.is-active {background-color: rgba(255, 255, 255, 0.9490196078431372) !important; border-color: rgba(255, 255, 255, 0.9490196078431372) !important; color: rgba(0, 0, 0, 0.24705882352941178) !important; fill: rgba(0, 0, 0, 0.24705882352941178) !important;} .u-imageSpectrum .u-baseColor--link {color: rgba(255, 255, 255, 0.9490196078431372) !important;} .u-imageSpectrum .u-baseColor--link.link--darkenOnHover:hover {color: rgba(255, 255, 255, 1) !important;} .u-imageSpectrum .u-baseColor--link.link--darken:hover,.u-imageSpectrum .u-baseColor--link.link--darken:focus,.u-imageSpectrum .u-baseColor--link.link--darken:active {color: rgba(255, 255, 255, 1) !important;} .u-imageSpectrum .u-baseColor--link.link--dark {color: rgba(255, 255, 255, 1) !important;} .u-imageSpectrum .u-baseColor--link.link--dark.link--darken:hover,.u-imageSpectrum .u-baseColor--link.link--dark.link--darken:focus,.u-imageSpectrum .u-baseColor--link.link--dark.link--darken:active {color: rgba(255, 255, 255, 1) !important;} .u-imageSpectrum .u-baseColor--link.link--darker {color: rgba(255, 255, 255, 1) !important;} .u-imageSpectrum .u-baseColor--placeholderNormal ::-webkit-input-placeholder {color: rgba(255, 255, 255, 0.8);} .u-imageSpectrum .u-baseColor--placeholderNormal ::-moz-placeholder {color: rgba(255, 255, 255, 0.8);} .u-imageSpectrum .u-baseColor--placeholderNormal :-ms-input-placeholder {color: rgba(255, 255, 255, 0.8);} .u-imageSpectrum .ui-h1,.u-imageSpectrum .ui-h2,.u-imageSpectrum .ui-h3,.u-imageSpectrum .ui-h4,.u-imageSpectrum .ui-brand1,.u-imageSpectrum .ui-brand2,.u-imageSpectrum .ui-captionStrong {color: rgba(255, 255, 255, 1) !important; fill: rgba(255, 255, 255, 1) !important;} .u-imageSpectrum .ui-body,.u-imageSpectrum .ui-caps {color: rgba(255, 255, 255, 1) !important; fill: rgba(255, 255, 255, 1) !important;} .u-imageSpectrum .ui-summary,.u-imageSpectrum .ui-caption {color: rgba(255, 255, 255, 0.8) !important; fill: rgba(255, 255, 255, 0.8) !important;} .u-imageSpectrum .u-accentColor--borderLight {border-color: rgba(255, 255, 255, 0.6980392156862745) !important;} .u-imageSpectrum .u-accentColor--borderNormal {border-color: rgba(255, 255, 255, 0.8980392156862745) !important;} .u-imageSpectrum .u-accentColor--borderDark {border-color: rgba(255, 255, 255, 0.9490196078431372) !important;} .u-imageSpectrum .u-accentColor--iconLight .svgIcon,.u-imageSpectrum .u-accentColor--iconLight.svgIcon {fill: rgba(255, 255, 255, 0.8) !important;} .u-imageSpectrum .u-accentColor--iconNormal .svgIcon,.u-imageSpectrum .u-accentColor--iconNormal.svgIcon {fill: rgba(255, 255, 255, 0.9490196078431372) !important;} .u-imageSpectrum .u-accentColor--iconDark .svgIcon,.u-imageSpectrum .u-accentColor--iconDark.svgIcon {fill: rgba(255, 255, 255, 1) !important;} .u-imageSpectrum .u-accentColor--textNormal {color: rgba(255, 255, 255, 0.9490196078431372) !important;} .u-imageSpectrum .u-accentColor--hoverTextNormal:hover {color: rgba(255, 255, 255, 0.9490196078431372) !important;} .u-imageSpectrum .u-accentColor--textNormal.u-accentColor--textDarken:hover {color: rgba(255, 255, 255, 1) !important;} .u-imageSpectrum .u-accentColor--textDark {color: rgba(255, 255, 255, 1) !important;} .u-imageSpectrum .u-accentColor--backgroundLight {background-color: rgba(255, 255, 255, 0.8980392156862745) !important;} .u-imageSpectrum .u-accentColor--backgroundNormal {background-color: rgba(255, 255, 255, 0.9490196078431372) !important;} .u-imageSpectrum .u-accentColor--backgroundDark {background-color: rgba(255, 255, 255, 1) !important;} .u-imageSpectrum .u-accentColor--buttonDark {border-color: rgba(255, 255, 255, 0.9490196078431372) !important; color: rgba(255, 255, 255, 1) !important;} .u-imageSpectrum .u-accentColor--buttonDark:hover {border-color: rgba(255, 255, 255, 1) !important;} .u-imageSpectrum .u-accentColor--buttonDark .icon:before,.u-imageSpectrum .u-accentColor--buttonDark .svgIcon{color: rgba(255, 255, 255, 1) !important; fill: rgba(255, 255, 255, 1) !important;} .u-imageSpectrum .u-accentColor--buttonNormal:not(.clapButton--largePill) {border-color: rgba(255, 255, 255, 0.8980392156862745) !important; color: rgba(255, 255, 255, 0.9490196078431372) !important;} .u-imageSpectrum .u-accentColor--buttonNormal:hover {border-color: rgba(255, 255, 255, 0.9490196078431372) !important;} .u-imageSpectrum .u-accentColor--buttonNormal .icon:before,.u-imageSpectrum .u-accentColor--buttonNormal .svgIcon{color: rgba(255, 255, 255, 0.9490196078431372) !important; fill: rgba(255, 255, 255, 0.9490196078431372) !important;} .u-imageSpectrum .u-accentColor--buttonNormal.button--filled .icon:before,.u-imageSpectrum .u-accentColor--buttonNormal.button--filled .svgIcon{color: rgba(0, 0, 0, 0.24705882352941178) !important; fill: rgba(0, 0, 0, 0.24705882352941178) !important;} .u-imageSpectrum .u-accentColor--buttonDark.button--filled,.u-imageSpectrum .u-accentColor--buttonDark.button--withChrome.is-active,.u-imageSpectrum .u-accentColor--fillWhenActive.is-active {background-color: rgba(255, 255, 255, 1) !important; border-color: rgba(255, 255, 255, 1) !important; color: rgba(0, 0, 0, 0.24705882352941178) !important; fill: rgba(0, 0, 0, 0.24705882352941178) !important;} .u-imageSpectrum .u-accentColor--buttonNormal.button--filled:not(.clapButton--largePill),.u-imageSpectrum .u-accentColor--buttonNormal.button--withChrome.is-active:not(.clapButton--largePill) {background-color: rgba(255, 255, 255, 0.9490196078431372) !important; border-color: rgba(255, 255, 255, 0.9490196078431372) !important; color: rgba(0, 0, 0, 0.24705882352941178) !important; fill: rgba(0, 0, 0, 0.24705882352941178) !important;} .u-imageSpectrum .postArticle.is-withAccentColors .markup--user,.u-imageSpectrum .postArticle.is-withAccentColors .markup--query {color: rgba(255, 255, 255, 0.9490196078431372) !important;} .u-imageSpectrum .u-accentColor--highlightFaint {background-color: rgba(255, 255, 255, 0.2) !important;} .u-imageSpectrum .u-accentColor--highlightStrong.is-active .svgIcon {fill: rgba(255, 255, 255, 0.6) !important;} .postArticle.is-withAccentColors .u-imageSpectrum .markup--quote.is-other {background-color: rgba(255, 255, 255, 0.2) !important;} body.is-withMagicUnderlines .postArticle.is-withAccentColors .u-imageSpectrum .markup--quote.is-other {background-color: transparent !important; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));} .postArticle.is-withAccentColors .u-imageSpectrum .markup--quote.is-me {background-color: rgba(255, 255, 255, 0.4) !important;} body.is-withMagicUnderlines .postArticle.is-withAccentColors .u-imageSpectrum .markup--quote.is-me {background-color: transparent !important; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4));} .postArticle.is-withAccentColors .u-imageSpectrum .markup--quote.is-targeted {background-color: rgba(255, 255, 255, 0.6) !important;} body.is-withMagicUnderlines .postArticle.is-withAccentColors .u-imageSpectrum .markup--quote.is-targeted {background-color: transparent !important; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));} .postArticle.is-withAccentColors .u-imageSpectrum .markup--quote.is-selected {background-color: rgba(255, 255, 255, 0.6) !important;} body.is-withMagicUnderlines .postArticle.is-withAccentColors .u-imageSpectrum .markup--quote.is-selected {background-color: transparent !important; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));} .postArticle.is-withAccentColors .u-imageSpectrum .markup--highlight {background-color: rgba(255, 255, 255, 0.6) !important;} body.is-withMagicUnderlines .postArticle.is-withAccentColors .u-imageSpectrum .markup--highlight {background-color: transparent !important; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));}.u-resetSpectrum .u-tintBgColor {background-color: rgba(255, 255, 255, 1) !important;}.u-resetSpectrum .u-tintBgColor .u-fadeLeft:before {background-image: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%) !important;}.u-resetSpectrum .u-tintBgColor .u-fadeRight:after {background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%) !important;} .u-resetSpectrum .u-baseColor--borderLight {border-color: rgba(0, 0, 0, 0.2980392156862745) !important;} .u-resetSpectrum .u-baseColor--borderNormal {border-color: rgba(0, 0, 0, 0.4980392156862745) !important;} .u-resetSpectrum .u-baseColor--borderDark {border-color: rgba(0, 0, 0, 0.6) !important;} .u-resetSpectrum .u-baseColor--iconLight .svgIcon,.u-resetSpectrum .u-baseColor--iconLight.svgIcon {fill: rgba(0, 0, 0, 0.2980392156862745) !important;} .u-resetSpectrum .u-baseColor--iconNormal .svgIcon,.u-resetSpectrum .u-baseColor--iconNormal.svgIcon {fill: rgba(0, 0, 0, 0.4980392156862745) !important;} .u-resetSpectrum .u-baseColor--iconDark .svgIcon,.u-resetSpectrum .u-baseColor--iconDark.svgIcon {fill: rgba(0, 0, 0, 0.6) !important;} .u-resetSpectrum .u-baseColor--textNormal {color: rgba(0, 0, 0, 0.4980392156862745) !important;} .u-resetSpectrum .u-baseColor--textNormal.u-baseColor--textDarken:hover {color: rgba(0, 0, 0, 0.6) !important;} .u-resetSpectrum .u-baseColor--textDark {color: rgba(0, 0, 0, 0.6) !important;} .u-resetSpectrum .u-baseColor--textDarker {color: rgba(0, 0, 0, 0.8) !important;} .u-resetSpectrum .u-baseColor--backgroundLight {background-color: rgba(0, 0, 0, 0.09803921568627451) !important;} .u-resetSpectrum .u-baseColor--backgroundNormal {background-color: rgba(0, 0, 0, 0.2) !important;} .u-resetSpectrum .u-baseColor--backgroundDark {background-color: rgba(0, 0, 0, 0.2980392156862745) !important;} .u-resetSpectrum .u-baseColor--buttonLight {border-color: rgba(0, 0, 0, 0.2980392156862745) !important; color: rgba(0, 0, 0, 0.2980392156862745) !important;} .u-resetSpectrum .u-baseColor--buttonLight:hover {border-color: rgba(0, 0, 0, 0.2980392156862745) !important;} .u-resetSpectrum .u-baseColor--buttonLight .icon:before,.u-resetSpectrum .u-baseColor--buttonLight .svgIcon {color: rgba(0, 0, 0, 0.2980392156862745) !important; fill: rgba(0, 0, 0, 0.2980392156862745) !important;} .u-resetSpectrum .u-baseColor--buttonDark {border-color: rgba(0, 0, 0, 0.6) !important; color: rgba(0, 0, 0, 0.6) !important;} .u-resetSpectrum .u-baseColor--buttonDark:hover {border-color: rgba(0, 0, 0, 0.8) !important;} .u-resetSpectrum .u-baseColor--buttonDark .icon:before,.u-resetSpectrum .u-baseColor--buttonDark .svgIcon {color: rgba(0, 0, 0, 0.6) !important; fill: rgba(0, 0, 0, 0.6) !important;} .u-resetSpectrum .u-baseColor--buttonNormal {border-color: rgba(0, 0, 0, 0.4980392156862745) !important; color: rgba(0, 0, 0, 0.4980392156862745) !important;} .u-resetSpectrum .u-baseColor--buttonNormal:hover {border-color: rgba(0, 0, 0, 0.6) !important;} .u-resetSpectrum .u-baseColor--buttonNormal .icon:before,.u-resetSpectrum .u-baseColor--buttonNormal .svgIcon {color: rgba(0, 0, 0, 0.4980392156862745) !important; fill: rgba(0, 0, 0, 0.4980392156862745) !important;} .u-resetSpectrum .u-baseColor--buttonDark.button--filled,.u-resetSpectrum .u-baseColor--buttonDark.button--withChrome.is-active {background-color: rgba(0, 0, 0, 0.2980392156862745) !important; border-color: rgba(0, 0, 0, 0.2980392156862745) !important; color: rgba(255, 255, 255, 1) !important; fill: rgba(255, 255, 255, 1) !important;} .u-resetSpectrum .u-baseColor--buttonNormal.button--filled,.u-resetSpectrum .u-baseColor--buttonNormal.button--withChrome.is-active {background-color: rgba(0, 0, 0, 0.2) !important; border-color: rgba(0, 0, 0, 0.2) !important; color: rgba(255, 255, 255, 1) !important; fill: rgba(255, 255, 255, 1) !important;} .u-resetSpectrum .u-baseColor--link {color: rgba(0, 0, 0, 0.4980392156862745) !important;} .u-resetSpectrum .u-baseColor--link.link--darkenOnHover:hover {color: rgba(0, 0, 0, 0.6) !important;} .u-resetSpectrum .u-baseColor--link.link--darken:hover,.u-resetSpectrum .u-baseColor--link.link--darken:focus,.u-resetSpectrum .u-baseColor--link.link--darken:active {color: rgba(0, 0, 0, 0.6) !important;} .u-resetSpectrum .u-baseColor--link.link--dark {color: rgba(0, 0, 0, 0.6) !important;} .u-resetSpectrum .u-baseColor--link.link--dark.link--darken:hover,.u-resetSpectrum .u-baseColor--link.link--dark.link--darken:focus,.u-resetSpectrum .u-baseColor--link.link--dark.link--darken:active {color: rgba(0, 0, 0, 0.8) !important;} .u-resetSpectrum .u-baseColor--link.link--darker {color: rgba(0, 0, 0, 0.8) !important;} .u-resetSpectrum .u-baseColor--placeholderNormal ::-webkit-input-placeholder {color: rgba(0, 0, 0, 0.2980392156862745);} .u-resetSpectrum .u-baseColor--placeholderNormal ::-moz-placeholder {color: rgba(0, 0, 0, 0.2980392156862745);} .u-resetSpectrum .u-baseColor--placeholderNormal :-ms-input-placeholder {color: rgba(0, 0, 0, 0.2980392156862745);} .u-resetSpectrum .ui-h1,.u-resetSpectrum .ui-h2,.u-resetSpectrum .ui-h3,.u-resetSpectrum .ui-h4,.u-resetSpectrum .ui-brand1,.u-resetSpectrum .ui-brand2,.u-resetSpectrum .ui-captionStrong {color: rgba(0, 0, 0, 0.8) !important; fill: rgba(0, 0, 0, 0.8) !important;} .u-resetSpectrum .ui-body,.u-resetSpectrum .ui-caps {color: rgba(0, 0, 0, 0.6) !important; fill: rgba(0, 0, 0, 0.6) !important;} .u-resetSpectrum .ui-summary,.u-resetSpectrum .ui-caption {color: rgba(0, 0, 0, 0.2980392156862745) !important; fill: rgba(0, 0, 0, 0.2980392156862745) !important;} .u-resetSpectrum .u-accentColor--borderLight {border-color: rgba(26, 137, 23, 1) !important;} .u-resetSpectrum .u-accentColor--borderNormal {border-color: rgba(26, 137, 23, 1) !important;} .u-resetSpectrum .u-accentColor--borderDark {border-color: rgba(17, 128, 14, 1) !important;} .u-resetSpectrum .u-accentColor--iconLight .svgIcon,.u-resetSpectrum .u-accentColor--iconLight.svgIcon {fill: rgba(26, 137, 23, 1) !important;} .u-resetSpectrum .u-accentColor--iconNormal .svgIcon,.u-resetSpectrum .u-accentColor--iconNormal.svgIcon {fill: rgba(17, 128, 14, 1) !important;} .u-resetSpectrum .u-accentColor--iconDark .svgIcon,.u-resetSpectrum .u-accentColor--iconDark.svgIcon {fill: rgba(15, 115, 12, 1) !important;} .u-resetSpectrum .u-accentColor--textNormal {color: rgba(17, 128, 14, 1) !important;} .u-resetSpectrum .u-accentColor--hoverTextNormal:hover {color: rgba(17, 128, 14, 1) !important;} .u-resetSpectrum .u-accentColor--textNormal.u-accentColor--textDarken:hover {color: rgba(15, 115, 12, 1) !important;} .u-resetSpectrum .u-accentColor--textDark {color: rgba(15, 115, 12, 1) !important;} .u-resetSpectrum .u-accentColor--backgroundLight {background-color: rgba(26, 137, 23, 1) !important;} .u-resetSpectrum .u-accentColor--backgroundNormal {background-color: rgba(17, 128, 14, 1) !important;} .u-resetSpectrum .u-accentColor--backgroundDark {background-color: rgba(15, 115, 12, 1) !important;} .u-resetSpectrum .u-accentColor--buttonDark {border-color: rgba(17, 128, 14, 1) !important; color: rgba(15, 115, 12, 1) !important;} .u-resetSpectrum .u-accentColor--buttonDark:hover {border-color: rgba(15, 115, 12, 1) !important;} .u-resetSpectrum .u-accentColor--buttonDark .icon:before,.u-resetSpectrum .u-accentColor--buttonDark .svgIcon{color: rgba(15, 115, 12, 1) !important; fill: rgba(15, 115, 12, 1) !important;} .u-resetSpectrum .u-accentColor--buttonNormal:not(.clapButton--largePill) {border-color: rgba(26, 137, 23, 1) !important; color: rgba(17, 128, 14, 1) !important;} .u-resetSpectrum .u-accentColor--buttonNormal:hover {border-color: rgba(17, 128, 14, 1) !important;} .u-resetSpectrum .u-accentColor--buttonNormal .icon:before,.u-resetSpectrum .u-accentColor--buttonNormal .svgIcon{color: rgba(17, 128, 14, 1) !important; fill: rgba(17, 128, 14, 1) !important;} .u-resetSpectrum .u-accentColor--buttonNormal.button--filled .icon:before,.u-resetSpectrum .u-accentColor--buttonNormal.button--filled .svgIcon{color: rgba(255, 255, 255, 1) !important; fill: rgba(255, 255, 255, 1) !important;} .u-resetSpectrum .u-accentColor--buttonDark.button--filled,.u-resetSpectrum .u-accentColor--buttonDark.button--withChrome.is-active,.u-resetSpectrum .u-accentColor--fillWhenActive.is-active {background-color: rgba(15, 115, 12, 1) !important; border-color: rgba(15, 115, 12, 1) !important; color: rgba(255, 255, 255, 1) !important; fill: rgba(255, 255, 255, 1) !important;} .u-resetSpectrum .u-accentColor--buttonNormal.button--filled:not(.clapButton--largePill),.u-resetSpectrum .u-accentColor--buttonNormal.button--withChrome.is-active:not(.clapButton--largePill) {background-color: rgba(17, 128, 14, 1) !important; border-color: rgba(17, 128, 14, 1) !important; color: rgba(255, 255, 255, 1) !important; fill: rgba(255, 255, 255, 1) !important;} .u-resetSpectrum .postArticle.is-withAccentColors .markup--user,.u-resetSpectrum .postArticle.is-withAccentColors .markup--query {color: rgba(17, 128, 14, 1) !important;}</style></div></div></div><div class="loadingBar"></div><script>// <![CDATA[ window["obvInit"] = function (opt_embedded) {window["obvInit"]["embedded"] = opt_embedded; window["obvInit"]["ready"] = true;} // ]]></script><script>// <![CDATA[ var GLOBALS = {"audioUrl":"https://d1fcbxp97j4nb2.cloudfront.net","baseUrl":"https://uxdesign.cc","buildLabel":"20241219-0029-root","currentUser":{"userId":"lo_3274541549b1","isVerified":false,"subscriberEmail":"","hasPastMemberships":false,"isEnrolledInHightower":false,"isEligibleForHightower":true,"hightowerLastLockedAt":0,"isWriterProgramEnrolled":true,"isWriterProgramInvited":false,"isWriterProgramOptedOut":false,"writerProgramVersion":0,"writerProgramEnrolledAt":0,"friendLinkOnboarding":0,"hasAdditionalUnlocks":false,"hasApiAccess":false,"writerProgramDistributionSettingOptedIn":false,"isSuspended":false,"collectionOnboardingSeen":0,"atsQualifiedAt":0},"currentUserHasUnverifiedEmail":false,"isAuthenticated":false,"isCurrentUserVerified":false,"miroUrl":"https://cdn-images-1.medium.com","moduleUrls":{"base":"https://cdn-static-1.medium.com/_/fp/gen-js/main-base.bundle.eBhzWGgpeTCq2eignYP2yQ.12.js","common-async":"https://cdn-static-1.medium.com/_/fp/gen-js/main-common-async.bundle.L_dvbFgPZ1QKQCbFVFNERw.12.js","hightower":"https://cdn-static-1.medium.com/_/fp/gen-js/main-hightower.bundle.jBpQ-AmW2gI0MYa6vwJodg.12.js","home-screens":"https://cdn-static-1.medium.com/_/fp/gen-js/main-home-screens.bundle.VXINXi3BrSW4Ni1oF5OUCw.12.js","misc-screens":"https://cdn-static-1.medium.com/_/fp/gen-js/main-misc-screens.bundle.FYmryJSLVzKplGrLyVk8Vw.12.js","notes":"https://cdn-static-1.medium.com/_/fp/gen-js/main-notes.bundle.1fT0s51LhOxIFhpF7VpcMg.12.js","payments":"https://cdn-static-1.medium.com/_/fp/gen-js/main-payments.bundle.DnlxCkHj_azc_YKsYoXK_w.12.js","posters":"https://cdn-static-1.medium.com/_/fp/gen-js/main-posters.bundle.6xwYcZsPD5BekGx_rvvtBg.12.js","power-readers":"https://cdn-static-1.medium.com/_/fp/gen-js/main-power-readers.bundle.l4jO8KDvWKsNQBZh97r9vA.12.js","pubs":"https://cdn-static-1.medium.com/_/fp/gen-js/main-pubs.bundle.bwrlrKIyNPpj9E1vXfUHtg.12.js","stats":"https://cdn-static-1.medium.com/_/fp/gen-js/main-stats.bundle.V8KT40i1KU-zDSpeaw-3fA.12.js"},"previewConfig":{"weightThreshold":1,"weightImageParagraph":0.51,"weightIframeParagraph":0.8,"weightTextParagraph":0.08,"weightEmptyParagraph":0,"weightP":0.003,"weightH":0.005,"weightBq":0.003,"minPTextLength":60,"truncateBoundaryChars":20,"detectTitle":true,"detectTitleLevThreshold":0.15},"productName":"Medium","supportsEdit":false,"termsUrl":"//policy.medium.com/medium-terms-of-service-9db0094a1e0f","textshotHost":"textshot.textshot-production.svc.cluster.local","transactionId":"1734578762704:adb96c2fbdf7","useragent":{"browser":"ie","family":"ie","os":"windows","version":7,"supportsDesktopEdit":false,"supportsInteract":false,"supportsView":true,"isMobile":false,"isTablet":false,"isNative":false,"supportsFileAPI":false,"isTier1":false,"clientVersion":"","clientChannel":"","supportsRealScrollEvents":false,"supportsVhUnits":false,"ruinsViewportSections":false,"supportsHtml5Video":false,"supportsMagicUnderlines":false,"isWebView":false,"isFacebookWebView":false,"supportsProgressiveMedia":false,"supportsPromotedPosts":true,"isBot":false,"isNativeIphone":false,"supportsCssVariables":false,"supportsVideoSections":true,"emojiSupportLevel":1,"isSearchBot":false,"isSyndicationBot":false,"isNativeAndroid":false,"isNativeIos":false,"isSeoAuditBot":false,"isInternalApp":false,"supportsApplePay":false,"supportsScrollableMetabar":false},"variants":{"allow_access":true,"allow_signup":true,"allow_test_auth":"disallow","android_enable_editor_new_publishing_flow":true,"android_enable_friend_links_creation":true,"android_enable_friend_links_postpage_banners":true,"android_enable_image_sharer":true,"android_enable_lists_v2":true,"android_enable_syntax_highlight":true,"android_enable_topic_portals":true,"android_rating_prompt_stories_read_threshold":2,"android_two_hour_refresh":true,"available_annual_plan":"2c754bcc2995","available_annual_premium_plan":"4a442ace1476","available_monthly_plan":"60e220181034","available_monthly_premium_plan":"12a660186432","browsable_stream_config_bucket":"curated-topics","can_receive_tips_v0":true,"can_send_tips_v0":true,"coronavirus_topic_recirc":true,"disable_partner_program_enrollment":true,"enable_abandoned_cart_promotion_email":true,"enable_abandoned_paywall_promotion_email":true,"enable_android_dynamic_aspirational_paywall":true,"enable_android_dynamic_programming_paywall":true,"enable_android_miro_v2":true,"enable_android_offline_reading":true,"enable_android_verified_author":true,"enable_app_flirty_thirty":true,"enable_apple_sign_in":true,"enable_apple_webhook":true,"enable_aurora_pub_follower_page":true,"enable_author_cards":true,"enable_author_cards_byline":true,"enable_auto_follow_on_subscribe":true,"enable_automod":true,"enable_bg_post_post":true,"enable_boost_nia_v01":true,"enable_braintree_apple_pay":true,"enable_braintree_client":true,"enable_braintree_google_pay":true,"enable_braintree_integration":true,"enable_braintree_paypal":true,"enable_braintree_trial_membership":true,"enable_braintree_webhook":true,"enable_branch_io":true,"enable_cache_less_following_feed":true,"enable_cancellation_discount_v1_gate":true,"enable_configure_pronouns":true,"enable_conversion_model_v2":"group_2","enable_conversion_ranker_v2":"control","enable_creator_welcome_email":true,"enable_deprecate_legacy_providers_v3":true,"enable_diversification_rex":true,"enable_entities_to_follow_v2":true,"enable_eventstats_event_processing":true,"enable_explicit_signals":true,"enable_explicit_signals_updated_post_previews":true,"enable_footer_app_buttons":true,"enable_gift_banner":true,"enable_google_one_tap":true,"enable_google_webhook":true,"enable_group_gifting":true,"enable_iceland_forced_android":true,"enable_import":true,"enable_intrinsic_automatic_actions":true,"enable_ios_autorefresh":true,"enable_ios_dynamic_paywall_aspiriational":true,"enable_ios_dynamic_paywall_programming":true,"enable_ios_easy_resubscribe":true,"enable_ios_offline_reading":true,"enable_legacy_feed_in_iceland":true,"enable_lite_archive_page":true,"enable_lite_continue_this_thread":true,"enable_lite_homepage":true,"enable_lite_response_markup":true,"enable_lite_server_upstream_deadlines":true,"enable_lo_homepage":"control","enable_maim_the_meter":true,"enable_marketing_emails":true,"enable_mastodon_avatar_upload":true,"enable_mastodon_for_members":true,"enable_mastodon_for_members_username_selection":true,"enable_medium2_kbfd":true,"enable_members_only_audio":true,"enable_ml_rank_rex_anno":true,"enable_moc_load_processor_all_recs_surfaces":true,"enable_moc_load_processor_c":true,"enable_moc_load_processor_first_story":true,"enable_new_manage_membership_flow":true,"enable_new_stripe_customers":true,"enable_newsletter_lo_flow_custom_domains":true,"enable_pill_based_home_feed":true,"enable_post_bottom_responses":true,"enable_post_bottom_responses_input":true,"enable_post_bottom_responses_native":true,"enable_post_publish_permission_check":true,"enable_pp_country_expansion":true,"enable_pp_v4":true,"enable_pre_pp_v4":true,"enable_premium_tier":true,"enable_premium_tier_badge":true,"enable_pub_featuring":true,"enable_publication_hierarchy_web":true,"enable_ranker_v10":"control","enable_recaptcha_enterprise":true,"enable_recirc_model":true,"enable_recommended_publishers_query":true,"enable_rex_aggregator_v2":true,"enable_rex_new_push_notification_endpoint":true,"enable_rex_reading_history":true,"enable_rito_upstream_deadlines":true,"enable_seamless_social_sharing":true,"enable_see_pronouns":true,"enable_sharer_create_post_share_key":true,"enable_sharer_validate_post_share_key":true,"enable_simplified_digest_v2_b":true,"enable_sms_verification_for_publish":true,"enable_speechify_ios":true,"enable_speechify_widget":true,"enable_sprig":true,"enable_starspace":true,"enable_susi_redesign_android":true,"enable_susi_redesign_ios":true,"enable_switch_plan_premium_tier":true,"enable_tag_recs":true,"enable_tick_landing_page":true,"enable_tipping_v0_android":true,"enable_tipping_v0_ios":true,"enable_tribute_landing_page":true,"enable_trust_service_recaptcha":true,"enable_update_explore_wtf":true,"enable_update_topic_portals_wtf":true,"enable_updated_pub_recs_ui":true,"enable_verifications_service":true,"enable_winback_promotion_email":true,"glyph_font_set":"m2-unbound-source-serif-pro","goliath_externalsearch_enable_comment_deindexation":true,"ios_display_paywall_after_onboarding":true,"ios_enable_friend_links_creation":true,"ios_enable_friend_links_postpage_banners":true,"ios_enable_home_post_menu":true,"ios_enable_lock_responses":true,"ios_enable_verified_book_author":true,"ios_iceland_nux":true,"ios_in_app_free_trial":true,"ios_remove_twitter_onboarding_step":true,"ios_social_share_sheet":true,"limit_post_referrers":true,"limit_user_follows":true,"mobile_custom_app_icon":true,"num_post_bottom_responses_to_show":3,"onboarding_tags_from_top_views":true,"reader_fair_distribution_non_qp":true,"redefined_top_posts":true,"reengagement_notification_duration":3,"rex_generator_max_candidates":1000,"signin_services":"twitter,facebook,google,email,google-fastidv,google-one-tap,apple","signup_services":"twitter,facebook,google,email,google-fastidv,google-one-tap,apple","skip_fs_cache_user_vals":true},"xsrfToken":"","iosAppId":"828256236","supportEmail":"yourfriends@medium.com","fp":{"/icons/monogram-mask.svg":"https://cdn-static-1.medium.com/_/fp/icons/monogram-mask.KPLCSFEZviQN0jQ7veN2RQ.12.svg","/icons/favicon-medium-editor.ico":"https://cdn-static-1.medium.com/_/fp/icons/favicon-medium-editor.PiakrZWB7Yb80quUVQWM6g.12.ico"},"authBaseUrl":"https://medium.com","imageUploadSizeMb":25,"isAuthDomainRequest":false,"domainCollectionSlug":"user-experience-design-1","algoliaApiEndpoint":"https://MQ57UUUQZ2-dsn.algolia.net","algoliaAppId":"MQ57UUUQZ2","algoliaSearchOnlyApiKey":"394474ced050e3911ae2249ecc774921","iosAppStoreUrl":"https://itunes.apple.com/app/medium-everyones-stories/id828256236?pt=698524&mt=8","iosAppLinkBaseUrl":"medium:","algoliaIndexPrefix":"medium_","androidPlayStoreUrl":"https://play.google.com/store/apps/details?id=com.medium.reader","googleClientId":"216296035834-k1k6qe060s2tp2a2jam4ljdcms00sttg.apps.googleusercontent.com","androidPackage":"com.medium.reader","androidPlayStoreMarketScheme":"market://details?id=com.medium.reader","googleAuthUri":"https://accounts.google.com/o/oauth2/auth","androidScheme":"medium","layoutData":{"useDynamicScripts":false,"googleAnalyticsTrackingCode":"G-7JY7T788PK","jsShivUrl":"https://cdn-static-1.medium.com/_/fp/js/shiv.RI2ePTZ5gFmMgLzG5bEVAA.12.js","useDynamicCss":false,"faviconUrl":"https://miro.medium.com/v2/5d8de952517e8160e40ef9841c781cdc14a5db313057fa3c3de41c6f5b494b19","faviconImageId":"5d8de952517e8160e40ef9841c781cdc14a5db313057fa3c3de41c6f5b494b19","fontSets":[{"id":8,"url":"https://glyph.medium.com/css/e/sr/latin/e/ssr/latin/e/ssb/latin/m2-unbound-source-serif-pro.css"},{"id":11,"url":"https://glyph.medium.com/css/m2-unbound-source-serif-pro.css"},{"id":9,"url":"https://glyph.medium.com/css/mkt.css"}],"glyphUrl":"https://glyph.medium.com"},"authBaseUrlRev":"moc.muidem//:sptth","stripePublishableKey":"pk_live_7FReX44VnNIInZwrIIx6ghjl","archiveUploadSizeMb":100,"previewConfig2":{"weightThreshold":1,"weightImageParagraph":0.05,"raiseImage":true,"enforceHeaderHierarchy":true,"isImageInsetRight":true},"isAmp":false,"iosScheme":"medium","facebook":{"key":"542599432471018","namespace":"medium-com","scope":{"default":["public_profile","email"],"connect":["public_profile","email"],"login":["public_profile","email"],"share":["public_profile","email"]}},"memberContentTopicId":"13d7efd82fb2","audioContentTopicId":"3792abbd134","isDoNotAuth":false,"buggle":{"videoUrl":"https://cdn-videos-1.medium.com","audioUrl":"https://cdn-audio-1.medium.com"},"referrerType":5,"partnerProgramEmail":"partnerprogram@medium.com","recaptchaKey":"6Lfc37IUAAAAAKGGtC6rLS13R1Hrw_BqADfS1LRk","countryCode":"SG","bypassMeter":false,"branchKey":"key_live_ofxXr2qTrrU9NqURK8ZwEhknBxiI6KBm","paypal":{"clientMode":"production","oneYearGift":{"name":"Medium Membership (1 Year, Digital Gift Code)","description":"Unlimited access to the best and brightest stories on Medium. Gift codes can be redeemed at medium.com/redeem.","price":"50.00","currency":"USD","sku":"membership-gift-1-yr"}},"collectionConfig":{"mediumOwnedAndOperatedCollectionIds":["8a9336e5bb4","b7e45b22fec3","193b68bd4fba","8d6b8a439e32","54c98c43354d","3f6ecf56618","d944778ce714","92d2092dc598","ae2a65f35510","1285ba81cada","544c7006046e","fc8964313712","40187e704f1c","88d9857e584e","7b6769f2748b","bcc38c8f6edf","cef6983b292","cb8577c9149e","444d13b52878","713d7dbc99b0","ef8e90590e66","191186aaafa0","55760f21cdc5","9dc80918cc93","bdc4052bbdba","8ccfed20cbb2"]},"bypassMeterWithShareKey":false,"recaptcha3Key":"6Lf8R9wUAAAAABMI_85Wb8melS7Zj6ziuf99Yot5","braintreeClientKey":"production_zjkj96jm_m56f8fqpf7ngnrd4","cdcMessaging":[{"text":"For more information on the novel coronavirus and Covid-19, visit ","href":"","type":"text","start":0,"end":0},{"text":"cdc.gov","href":"https://www.cdc.gov/coronavirus/2019-nCoV","type":"link","start":66,"end":73},{"text":".","href":"","type":"text","start":0,"end":0}],"braintree":{"merchantId":"m56f8fqpf7ngnrd4"},"diagnostics":{},"domain":"medium.com"} // ]]></script><script charset="UTF-8" src="https://cdn-static-1.medium.com/_/fp/gen-js/main-base.bundle.eBhzWGgpeTCq2eignYP2yQ.12.js" async></script><script>// <![CDATA[ window["obvInit"]({"references":{"User":{"50e39baefa55":{"userId":"50e39baefa55","name":"Fabricio Teixeira","username":"fabriciot","createdAt":1345121220390,"imageId":"1*86azy9AQulxnSdnJdvctFQ.jpeg","backgroundImageId":"1*0z5K48o1Q1u0IUDXI2gUcQ.png","bio":"Designer at Work & Co, Founder of UX Collective — http://linkedin.com/in/fabricioteixeira","twitterScreenName":"fabriciot","allowNotes":1,"mediumMemberAt":1490220265000,"isWriterProgramEnrolled":true,"isSuspended":false,"isMembershipTrialEligible":true,"facebookDisplayName":"Fabricio Teixeira","optInToIceland":true,"subdomainCreatedAt":1602726823946,"hasCompletedProfile":false,"isCreatorPartnerProgramEnrolled":true,"userDismissableFlags":[32,29,21,19,18,16,14,46,12,44,11,9,8,5,36,3,2,1,33],"hasSeenIcelandOnboarding":true,"postSubscribeMembershipUpsellShownAt":0,"languageCode":"en-us","type":"User"},"27353c0f540b":{"userId":"27353c0f540b","name":"Caio Braga","username":"caioab","createdAt":1369511699581,"imageId":"1*atXAWA8gjAL4bq_au5O-Vw.jpeg","backgroundImageId":"","bio":"designer @ SurveyMonkey, editor @ UX Collective","twitterScreenName":"caioab","allowNotes":1,"mediumMemberAt":1721231107446,"isWriterProgramEnrolled":true,"isSuspended":false,"isMembershipTrialEligible":true,"facebookDisplayName":"Caio Braga","optInToIceland":true,"userFlags":[3],"hasCompletedProfile":false,"isCreatorPartnerProgramEnrolled":true,"userDismissableFlags":[32,29,21,16,12,8,6,50,5,3,2,1,33],"hasSeenIcelandOnboarding":true,"postSubscribeMembershipUpsellShownAt":0,"languageCode":"en-us","type":"User"},"296f38d72186":{"userId":"296f38d72186","name":"Kolozsi István (kolboid)","username":"kolboid","createdAt":1377169839936,"imageId":"0*B9-ana_k5yivbkq7.png","backgroundImageId":"1*_-alc22U_jkko4j3hRxbwg.png","bio":"Just a man from Earth, a designer, digital consultant. My page: https://kolboid.eu/ & Buy Me a Coffee now: https://www.buymeacoffee.com/kolboid ;)","twitterScreenName":"kolboid","allowNotes":1,"mediumMemberAt":0,"isWriterProgramEnrolled":true,"isSuspended":false,"isMembershipTrialEligible":true,"facebookDisplayName":"Kolozsi István","optInToIceland":true,"hasCompletedProfile":false,"userDismissableFlags":[8,3,1,33],"hasSeenIcelandOnboarding":false,"postSubscribeMembershipUpsellShownAt":0,"languageCode":"en-us","type":"User"},"29638f4e79d0":{"userId":"29638f4e79d0","name":"Laura Ciocia","username":"msciocia","createdAt":1372479826683,"imageId":"2*1Rg36Lrvh4ZIuMSb1bOLIA.png","backgroundImageId":"","bio":"","twitterScreenName":"msciocia","allowNotes":1,"mediumMemberAt":1722198023194,"isWriterProgramEnrolled":true,"isSuspended":false,"firstOpenedIosApp":1578088841385,"isMembershipTrialEligible":false,"facebookDisplayName":"","optInToIceland":true,"subdomainCreatedAt":1622567497004,"hasCompletedProfile":true,"userDismissableFlags":[32,12,8,5,21,3,2,1,33],"hasSeenIcelandOnboarding":true,"postSubscribeMembershipUpsellShownAt":0,"languageCode":"en-us","type":"User"},"1713555e580d":{"userId":"1713555e580d","name":"Y. A.","username":"yamilah","createdAt":1596142563269,"imageId":"1*0SoAF-MpGnY1Xh8nJesZDQ.jpeg","backgroundImageId":"","bio":"Sent from my iPhone","twitterScreenName":"","allowNotes":1,"mediumMemberAt":0,"isWriterProgramEnrolled":true,"isSuspended":false,"firstOpenedIosApp":1699639980306,"firstOpenedAndroidApp":1659360515223,"isMembershipTrialEligible":false,"facebookDisplayName":"","optInToIceland":true,"hasCompletedProfile":false,"userDismissableFlags":[32,47,29,8,21,30,3,2,33],"hasSeenIcelandOnboarding":true,"postSubscribeMembershipUpsellShownAt":0,"languageCode":"en-us","type":"User"},"8a4831a624c6":{"userId":"8a4831a624c6","name":"Taras Skytskyi","username":"skytskyi","createdAt":1431677820369,"imageId":"1*q7PId3fNuHJPI_O5pH8Ltw.png","backgroundImageId":"","bio":"User Experience and Interaction Designer at SoftServe. www.softserveinc.com","twitterScreenName":"skytskyi","allowNotes":1,"mediumMemberAt":0,"isWriterProgramEnrolled":true,"isSuspended":false,"isMembershipTrialEligible":true,"facebookDisplayName":"Taras Skytskyi","optInToIceland":true,"hasCompletedProfile":false,"userDismissableFlags":[32,29,12,50,21,30,1],"hasSeenIcelandOnboarding":true,"postSubscribeMembershipUpsellShownAt":0,"languageCode":"en-us","type":"User"},"fde1eb3eb589":{"userId":"fde1eb3eb589","name":"Michal Malewicz","username":"michalmalewicz","createdAt":1544878596917,"imageId":"1*149zXrb2FXvS_mctL4NKSg.png","backgroundImageId":"","bio":"One design and one lifestyle story per week Redefine education at https://square.one → run https://squareblack.com → talk at https://youtube.com/MalewiczHype","twitterScreenName":"michalmalewicz","allowNotes":1,"mediumMemberAt":1565781169000,"isWriterProgramEnrolled":true,"isSuspended":false,"isMembershipTrialEligible":true,"facebookDisplayName":"","optInToIceland":true,"subdomainCreatedAt":1604063545152,"hasCompletedProfile":false,"isCreatorPartnerProgramEnrolled":true,"userDismissableFlags":[32,29,22,21,19,18,16,47,13,12,44,11,9,8,5,4,36,3,2,10,34,1,33],"hasSeenIcelandOnboarding":true,"postSubscribeMembershipUpsellShownAt":0,"languageCode":"en-gb","type":"User"},"f979767824dd":{"userId":"f979767824dd","name":"Christie Tang","username":"christiet","createdAt":1536521195624,"imageId":"1*Z1e43YiQS-fo9vvvndLUJw.jpeg","backgroundImageId":"","bio":"Product Designer at Meta. Jury at Awwwards. eSports enthusiast. Bonafide nerd. Ketogenic foodie. Sarcastic and crass INTJ. Design casually explained.","twitterScreenName":"","allowNotes":1,"mediumMemberAt":0,"isWriterProgramEnrolled":true,"isSuspended":false,"isMembershipTrialEligible":true,"facebookDisplayName":"","optInToIceland":true,"userFlags":[1],"subdomainCreatedAt":1603305173200,"hasCompletedProfile":false,"isCreatorPartnerProgramEnrolled":true,"userDismissableFlags":[32,29,12,11,9,50,21,3,2,18,1,33],"hasSeenIcelandOnboarding":true,"postSubscribeMembershipUpsellShownAt":0,"languageCode":"en-us","type":"User"},"a174f7ac9f65":{"userId":"a174f7ac9f65","name":"Audrey Hacq","username":"audreyhacq","createdAt":1443541040189,"imageId":"0*geIfMVXr31AXmuFT.jpg","backgroundImageId":"","bio":"Product Design Director @Openclassrooms & Design Systems advocate","twitterScreenName":"reac89","allowNotes":1,"mediumMemberAt":0,"isWriterProgramEnrolled":true,"isSuspended":false,"isMembershipTrialEligible":true,"facebookDisplayName":"Audrey Hacq","optInToIceland":true,"subdomainCreatedAt":1616750306959,"hasCompletedProfile":false,"userDismissableFlags":[32,29,12,30,3,2,18,1,33],"hasSeenIcelandOnboarding":true,"postSubscribeMembershipUpsellShownAt":0,"languageCode":"fr-fr","type":"User"},"f95f1c3c17a4":{"userId":"f95f1c3c17a4","name":"Havana Nguyen","username":"havana-nguyen","createdAt":1451485883730,"imageId":"1*2hWx-HCU5z2vq1i3M00Knw.jpeg","backgroundImageId":"","bio":"UX Design / Lead Character Artist for Kamikaze / Career Mentor / Co-host of The Bluth Society: a Don Bluth Podcast / Rookie Plant Lady and Rock Climber","twitterScreenName":"","allowNotes":1,"mediumMemberAt":1510773971000,"isWriterProgramEnrolled":true,"isSuspended":false,"firstOpenedAndroidApp":1708139123713,"isMembershipTrialEligible":true,"facebookDisplayName":"","optInToIceland":true,"subdomainCreatedAt":1609446286108,"hasCompletedProfile":false,"userDismissableFlags":[32,12,8,50,5,21,3,2,1],"hasSeenIcelandOnboarding":true,"postSubscribeMembershipUpsellShownAt":0,"languageCode":"en-us","type":"User"},"9e48700a9ecd":{"userId":"9e48700a9ecd","name":"Tess Gadd","username":"tessgadd","createdAt":1450434069974,"imageId":"0*-eaghEYioJltyRo6.jpg","backgroundImageId":"","bio":"UI Designer","twitterScreenName":"TessGadd","allowNotes":1,"mediumMemberAt":1555673492000,"isWriterProgramEnrolled":true,"isSuspended":false,"isMembershipTrialEligible":true,"facebookDisplayName":"","optInToIceland":true,"subdomainCreatedAt":1628701099923,"hasCompletedProfile":false,"isCreatorPartnerProgramEnrolled":true,"userDismissableFlags":[32,29,21,19,18,12,11,9,8,5,3,2,1,33],"hasSeenIcelandOnboarding":true,"postSubscribeMembershipUpsellShownAt":0,"languageCode":"en-us","type":"User"},"7c88c0813696":{"userId":"7c88c0813696","name":"Zhenshuo Fang","username":"zhenshuofang","createdAt":1398461034241,"imageId":"1*dxTa4AAHXvh2bpiDdIyPVQ.png","backgroundImageId":"","bio":"NYC ➡️ Beijing | Design Director at Tencent | ex-Googler | ex-Mozillian | CMU MHCI Alum | Sketchnoter, PeopleWatcher, Flute Player & Food Lover","twitterScreenName":"zhenshuofang","allowNotes":1,"mediumMemberAt":0,"isWriterProgramEnrolled":true,"isSuspended":false,"isMembershipTrialEligible":true,"facebookDisplayName":"Zhenshuo Fang","optInToIceland":true,"hasCompletedProfile":false,"userDismissableFlags":[32,12,8,5,21,30,2,1],"hasSeenIcelandOnboarding":false,"postSubscribeMembershipUpsellShownAt":0,"languageCode":"en-us","type":"User"},"fe2c62b10f97":{"userId":"fe2c62b10f97","name":"Taruna Manchanda","username":"Taruna2309","createdAt":1435130715473,"imageId":"1*k7FO7rBI3fWOwNZi4u50qg.jpeg","backgroundImageId":"","bio":"awkward | boring | uncool | old school | tastefully creepy | gets high on cheese | not the fattest one in gym anymore | PM at work and a hopeless writer in life","twitterScreenName":"Taruna2309","allowNotes":1,"mediumMemberAt":0,"isWriterProgramEnrolled":true,"isSuspended":false,"isMembershipTrialEligible":true,"facebookDisplayName":"Taruna Manchanda","optInToIceland":true,"hasCompletedProfile":false,"userDismissableFlags":[5,21,29,2,18,1],"hasSeenIcelandOnboarding":true,"postSubscribeMembershipUpsellShownAt":0,"languageCode":"en-gb","type":"User"},"df202ed26a1c":{"userId":"df202ed26a1c","name":"Jason Yuan","username":"jasonyuan","createdAt":1490578599427,"imageId":"1*BxbZXMbsJ7igbHBH8xtyaw.jpeg","backgroundImageId":"","bio":"Reinvent everything","twitterScreenName":"jasonyuandesign","allowNotes":1,"mediumMemberAt":0,"isWriterProgramEnrolled":true,"isSuspended":false,"isMembershipTrialEligible":true,"facebookDisplayName":"Jason Yuan","optInToIceland":true,"subdomainCreatedAt":1609787224304,"hasCompletedProfile":false,"isCreatorPartnerProgramEnrolled":true,"userDismissableFlags":[2,1,9],"hasSeenIcelandOnboarding":true,"postSubscribeMembershipUpsellShownAt":0,"languageCode":"en-us","type":"User"}},"Collection":{"138adf9c44c":{"id":"138adf9c44c","name":"UX Collective","slug":"user-experience-design-1","tags":["UX","DESIGN","ARTIFICIAL INTELLIGENCE","TECHNOLOGY","PRODUCT"],"creatorId":"50e39baefa55","description":"We believe designers are thinkers as much as they are makers. Curated stories on UX, Visual & Product Design. https://linktr.ee/uxc","shortDescription":"We believe designers are thinkers as much as they are…","image":{"imageId":"1*mDhF9X4VO0rCrJvWFatyxg.png","filter":"","backgroundSize":"","originalWidth":180,"originalHeight":180,"strategy":"resample","height":0,"width":0},"metadata":{"followerCount":514280,"activeAt":1734564584114},"virtuals":{"permissions":{"canPublish":false,"canPublishAll":false,"canRepublish":false,"canRemove":false,"canManageAll":false,"canSubmit":false,"canEditPosts":false,"canAddWriters":false,"canViewStats":false,"canSendNewsletter":false,"canViewLockedPosts":false,"canViewCloaked":false,"canEditOwnPosts":false,"canBeAssignedAuthor":false,"canEnrollInHightower":false,"canLockPostsForMediumMembers":false,"canLockOwnPostsForMediumMembers":false,"canViewNewsletterV2Stats":false,"canCreateNewsletterV3":false},"isSubscribed":false,"isEnrolledInHightower":false,"isEligibleForHightower":false,"isSubscribedToCollectionEmails":false,"isMuted":false,"canToggleEmail":false,"isWriter":false},"logo":{"imageId":"1*9V9oqYyYnfP5yy7cb7YTMQ.png","filter":"","backgroundSize":"","originalWidth":612,"originalHeight":102,"strategy":"resample","height":0,"width":0},"twitterUsername":"uxdesigncc","publicEmail":"hello@uxdesign.cc","collectionMastheadId":"91711cb9ae5","domain":"uxdesign.cc","sections":[{"type":2,"collectionHeaderMetadata":{"title":"UX Collective","backgroundImage":{},"logoImage":{},"alignment":2,"layout":4}},{"type":1,"postListMetadata":{"source":4,"layout":5,"number":2,"postIds":[],"tagSlug":"UX"}},{"type":1,"postListMetadata":{"source":4,"layout":4,"number":6,"postIds":[],"tagSlug":"Editor Picks","sectionHeader":"Editor Picks"}},{"type":1,"postListMetadata":{"source":4,"layout":4,"number":6,"postIds":[],"tagSlug":"UX","sectionHeader":"Latest & Greatest"}},{"type":3,"promoMetadata":{"sectionHeader":"","promoId":"4e4f54ad93fd"}},{"type":1,"postListMetadata":{"source":3,"layout":4,"number":6,"postIds":["44b73c807081","c8b7b69f3295","c04cc4779d94","dafc08bd1d66","7c8dd466d753","a30025c0f432"],"sectionHeader":"Timeless Gems"}},{"type":1,"postListMetadata":{"source":4,"layout":4,"number":18,"postIds":[],"tagSlug":"UX","sectionHeader":"New & Noteworthy"}},{"type":3,"promoMetadata":{"sectionHeader":"","promoId":"4451d5a856e4"}},{"type":1,"postListMetadata":{"source":2,"layout":4,"number":3,"postIds":[],"sectionHeader":"Trending"}},{"type":1,"postListMetadata":{"source":3,"layout":7,"number":7,"postIds":["930a2af62ad","80ebab8f3407","7f763b81bf0e","cf93e2d0fd7e","432a38eac295","d4505dc20a92","269ec91d7d7"]}},{"type":1,"postListMetadata":{"source":3,"layout":4,"number":1,"postIds":["eb05f271c19d"]}},{"type":1,"postListMetadata":{"source":3,"layout":4,"number":6,"postIds":["5dc9778ae655","8087780cb1a6","e033d97e5f13","21e307a2c327","73e9413c1b14","1aca266b333e"]}},{"type":1,"postListMetadata":{"source":4,"layout":5,"number":25,"postIds":[],"tagSlug":"UX"}},{"type":1,"postListMetadata":{"source":4,"layout":5,"number":25,"postIds":[],"tagSlug":"UX"}}],"tintColor":"#FF000000","lightText":true,"favicon":{"imageId":"1*dn6MbbIIlwobt0jnUcrt_Q.png","filter":"","backgroundSize":"","originalWidth":256,"originalHeight":256,"strategy":"resample","height":0,"width":0},"colorPalette":{"defaultBackgroundSpectrum":{"colorPoints":[{"color":"#FF868484","point":0},{"color":"#FF7C7B7A","point":0.1},{"color":"#FF737171","point":0.2},{"color":"#FF696867","point":0.3},{"color":"#FF5F5E5E","point":0.4},{"color":"#FF555454","point":0.5},{"color":"#FF4A4949","point":0.6},{"color":"#FF3F3E3E","point":0.7},{"color":"#FF343333","point":0.8},{"color":"#FF272727","point":0.9},{"color":"#FF1A1A1A","point":1}],"backgroundColor":"#FFFFFFFF"},"tintBackgroundSpectrum":{"colorPoints":[{"color":"#FF000000","point":0},{"color":"#FF1E1D1D","point":0.1},{"color":"#FF3C3B3B","point":0.2},{"color":"#FF565555","point":0.3},{"color":"#FF6F6D6D","point":0.4},{"color":"#FF868484","point":0.5},{"color":"#FF9C9A99","point":0.6},{"color":"#FFB1AEAE","point":0.7},{"color":"#FFC5C3C2","point":0.8},{"color":"#FFD9D6D6","point":0.9},{"color":"#FFECE9E9","point":1}],"backgroundColor":"#FF000000"},"highlightSpectrum":{"colorPoints":[{"color":"#FFF5F2F1","point":0},{"color":"#FFF3F0EF","point":0.1},{"color":"#FFF1EEED","point":0.2},{"color":"#FFEFECEC","point":0.3},{"color":"#FFEDEAEA","point":0.4},{"color":"#FFEBE8E8","point":0.5},{"color":"#FFE9E6E6","point":0.6},{"color":"#FFE7E5E4","point":0.7},{"color":"#FFE5E3E2","point":0.8},{"color":"#FFE4E1E0","point":0.9},{"color":"#FFE2DFDE","point":1}],"backgroundColor":"#FFFFFFFF"},"darkBackgroundSpectrum":{"colorPoints":[{"color":"#FF9E9C9C","point":0},{"color":"#FFA7A5A4","point":0.1},{"color":"#FFAFADAD","point":0.2},{"color":"#FFB8B5B5","point":0.3},{"color":"#FFC0BEBD","point":0.4},{"color":"#FFC8C6C5","point":0.5},{"color":"#FFD1CECD","point":0.6},{"color":"#FFD9D6D5","point":0.7},{"color":"#FFE1DEDD","point":0.8},{"color":"#FFE9E6E5","point":0.9},{"color":"#FFF1EEED","point":1}],"backgroundColor":"#FF000000"}},"navItems":[{"type":1,"title":"Editor Picks","tagSlug":"editor-picks","url":"https://uxdesign.cc/tagged/editor-picks","source":"tagSlug"},{"type":6,"title":"About","url":"https://uxdesign.cc/about"},{"type":4,"title":"Publish a Story","url":"https://uxdesign.cc/publish/home","topicId":"280a7723865c","source":"topicId"},{"type":3,"title":"Receive our Newsletter","url":"http://newsletter.uxdesign.cc/"}],"colorBehavior":2,"googleAnalyticsId":"UA-41116679-1","collectionFeatures":[30,27,25],"ampLogo":{"imageId":"","filter":"","backgroundSize":"","originalWidth":0,"originalHeight":0,"strategy":"resample","height":0,"width":0},"header":{"title":"UX Collective","backgroundImage":{},"logoImage":{},"alignment":2,"layout":4},"subscriberCount":514280,"tagline":"We believe designers are thinkers as much as they are makers.","instagramUsername":"doc.cc_","isOptedIntoAurora":false,"newsletterV3":{"newsletterV3Id":"5fb308046049","type":1,"name":"The UX Collective Newsletter","description":"A weekly resourceful newsletter that helps designers stay in the know, be productive, and think more critically about their work.","collectionId":"138adf9c44c","newsletterSlug":"the-ux-collective-newsletter","isSubscribed":false,"showPromo":true,"avatarImageId":"1*-G-bB63PVXw4WIIPxPibtw.png","creatorId":"50e39baefa55","showNewsletterPostsInCollectionHome":false,"exportableSubscribersCount":23832,"subscribersCount":80826,"promoHeadline":"","promoBody":"","replyToEmail":""},"isCurationAllowedByDefault":false,"polarisCoverImage":{"imageId":"1*4qZD3VhzQ5SKG8yGpCMiUQ.png","filter":"","backgroundSize":"","originalWidth":1080,"originalHeight":240,"strategy":"resample","height":0,"width":0},"ptsQualifiedAt":1616092952635,"type":"Collection"}},"Post":{"60713dc86950":{"id":"60713dc86950","versionId":"2ffaac240c11","creatorId":"50e39baefa55","homeCollectionId":"138adf9c44c","title":"The worst volume control UI in the world","detectedLanguage":"en","latestVersion":"2ffaac240c11","latestPublishedVersion":"2ffaac240c11","hasUnpublishedEdits":false,"latestRev":411,"createdAt":1497120899599,"updatedAt":1709553770161,"acceptedAt":0,"firstPublishedAt":1497487741837,"latestPublishedAt":1626288909358,"vote":false,"experimentalCss":"","displayAuthor":"","content":{"subtitle":"A group of bored developers and designers has decided to start a thread on reddit to figure out who can come up with the worst volume…","postDisplay":{"coverless":true}},"virtuals":{"statusForCollection":"APPROVED","allowNotes":true,"previewImage":{"imageId":"1*Hd6mWoraRdfF2e4d2XkDRA.gif","filter":"","backgroundSize":"","originalWidth":500,"originalHeight":250,"strategy":"resample","height":0,"width":0},"wordCount":535,"imageCount":24,"readingTime":3.9688679245283023,"subtitle":"A group of bored developers and designers has decided to start a thread on reddit to figure out who can come up with the worst volume…","publishedInCount":1,"usersBySocialRecommends":[],"noIndex":false,"recommends":4368,"isBookmarked":false,"tags":[{"slug":"ux","name":"UX","postCount":211455,"metadata":{"postCount":211455,"coverImage":{"id":"1*AvtDgMOmzDBIqKiUiHL40g.png","originalWidth":1024,"originalHeight":1024,"isFeatured":true}},"type":"Tag"},{"slug":"design","name":"Design","postCount":403790,"metadata":{"postCount":403790,"coverImage":{"id":"1*9HBxmCTAsK0_WHSzx6zZvw.jpeg"}},"type":"Tag"},{"slug":"interaction-design","name":"Interaction Design","postCount":8916,"metadata":{"postCount":8916,"coverImage":{"id":"1*7OKnD_RJmL0RJQklVCSyHA.png","originalWidth":5112,"originalHeight":2880,"isFeatured":true}},"type":"Tag"},{"slug":"usability","name":"Usability","postCount":8097,"metadata":{"postCount":8097,"coverImage":{"id":"1*iiWIg644E1ZhswlBeilzIQ.jpeg","originalWidth":766,"originalHeight":238,"isFeatured":true,"alt":"designs of moka pots through the years"}},"type":"Tag"},{"slug":"user-experience","name":"User Experience","postCount":72156,"metadata":{"postCount":72156,"coverImage":{"id":"0*2wlSW32Cz5O-_FZg","originalWidth":5347,"originalHeight":3558}},"type":"Tag"}],"socialRecommendsCount":0,"responsesCreatedCount":67,"links":{"entries":[{"url":"https://www.reddit.com/r/ProgrammerHumor/search?q=volume&restrict_sr=on","alts":[],"httpStatus":200},{"url":"https://essays.uxdesign.cc/case-study-factory/","alts":[],"httpStatus":200}],"version":"0.3","generatedAt":1626288910038},"isLockedPreviewOnly":false,"metaDescription":"","totalClapCount":26735,"sectionCount":1,"readingList":0,"topics":[{"topicId":"55321ac40456","slug":"design","createdAt":1536181929758,"deletedAt":0,"image":{"id":"1*1aLu20aptPeUTDg_E8KtmA@2x.jpeg","originalWidth":6016,"originalHeight":4016},"name":"Design","description":"Below the surface.","relatedTopics":[],"visibility":1,"relatedTags":[],"relatedTopicIds":[],"seoTitle":"Design Articles and News — Medium","type":"Topic"},{"topicId":"617a1adb36d5","slug":"ux","createdAt":1540922382587,"deletedAt":0,"image":{"id":"1*X6jzEGtbMtOW4eoQJcDImQ@2x.jpeg","originalWidth":1920,"originalHeight":1275},"name":"UX","description":"All about that user.","relatedTopics":[],"visibility":1,"relatedTags":[],"relatedTopicIds":[],"seoTitle":"UX Articles and News — Medium","type":"Topic"}]},"coverless":true,"slug":"the-worst-volume-control-ui-in-the-world","translationSourcePostId":"","translationSourceCreatorId":"","isApprovedTranslation":false,"inResponseToPostId":"","inResponseToRemovedAt":0,"isTitleSynthesized":true,"allowResponses":true,"importedUrl":"","importedPublishedAt":0,"visibility":0,"uniqueSlug":"the-worst-volume-control-ui-in-the-world-60713dc86950","previewContent":{"bodyModel":{"paragraphs":[{"name":"previewImage","type":4,"text":"","layout":10,"metadata":{"id":"1*Hd6mWoraRdfF2e4d2XkDRA.gif","originalWidth":500,"originalHeight":250,"isFeatured":true}},{"name":"39e2","type":3,"text":"The worst volume control UI in the world","markups":[],"alignment":1},{"name":"8b89","type":1,"text":"A group of bored developers and designers has decided to start a thread on reddit to…","markups":[{"type":3,"start":65,"end":81,"href":"https://www.reddit.com/r/ProgrammerHumor/search?q=volume&restrict_sr=on","title":"","rel":"noopener","anchorType":0}],"alignment":1}],"sections":[{"startIndex":0}]},"isFullContent":false,"subtitle":"A group of bored developers and designers has decided to start a thread on reddit to figure out who can come up with the worst volume…"},"license":0,"inResponseToMediaResourceId":"","canonicalUrl":"","approvedHomeCollectionId":"138adf9c44c","isNewsletter":false,"newsletterId":"","webCanonicalUrl":"","mediumUrl":"","migrationId":"","notifyFollowers":true,"notifyTwitter":false,"notifyFacebook":false,"responseHiddenOnParentPostAt":0,"isSeries":false,"isSubscriptionLocked":false,"seriesLastAppendedAt":0,"audioVersionDurationSec":0,"sequenceId":"","isEligibleForRevenue":false,"isBlockedFromHightower":false,"deletedAt":0,"lockedPostSource":0,"hightowerMinimumGuaranteeStartsAt":0,"hightowerMinimumGuaranteeEndsAt":0,"featureLockRequestAcceptedAt":0,"mongerRequestType":1,"layerCake":3,"socialTitle":"","socialDek":"","editorialPreviewTitle":"","editorialPreviewDek":"","curationEligibleAt":0,"primaryTopicId":"617a1adb36d5","isProxyPost":false,"proxyPostFaviconUrl":"","proxyPostProviderName":"","proxyPostType":0,"isSuspended":false,"isLimitedState":false,"seoTitle":"","previewContent2":{"bodyModel":{"paragraphs":[{"name":"39e2","type":3,"text":"The worst volume control UI in the world","markups":[]},{"name":"8b89","type":1,"text":"A group of bored developers and designers has decided to start a thread on reddit to figure out who can come up with the worst volume control interface in the world:","markups":[{"type":3,"start":65,"end":81,"href":"https://www.reddit.com/r/ProgrammerHumor/search?q=volume&restrict_sr=on","title":"","rel":"noopener","anchorType":0},{"type":1,"start":121,"end":165}]},{"name":"d95c","type":14,"text":"reddit.com: search results - volume\nr/ProgrammerHumor: Dedicated to humor and jokes relating to programmers and programming.www.reddit.com","markups":[{"type":3,"start":0,"end":138,"href":"https://www.reddit.com/r/ProgrammerHumor/search?q=volume&restrict_sr=on","title":"https://www.reddit.com/r/ProgrammerHumor/search?q=volume&restrict_sr=on","rel":"","anchorType":0},{"type":1,"start":0,"end":35},{"type":2,"start":36,"end":124}],"mixtapeMetadata":{"mediaResourceId":"2b8f774cb558213d5280c44e44f29393","thumbnailImageId":"0*OtFMhZA50S58TwUB","href":"https://www.reddit.com/r/ProgrammerHumor/search?q=volume&restrict_sr=on"}},{"name":"9969","type":1,"text":"Yep. That super simple volume control UI we interact with several times a day. How can we make it…","markups":[]}],"sections":[{"name":"bd6b","startIndex":0}]},"isFullContent":false,"subtitle":"A group of bored developers and designers has decided to start a thread on reddit to figure out who can come up with the worst volume…"},"cardType":0,"isDistributionAlertDismissed":false,"isShortform":false,"shortformType":0,"responsesLocked":false,"isLockedResponse":false,"isPublishToEmail":false,"responseDistribution":0,"isMarkedPaywallOnly":false,"type":"Post"},"10bd98614fa9":{"id":"10bd98614fa9","versionId":"77eccb835acc","creatorId":"8a4831a624c6","homeCollectionId":"138adf9c44c","title":"The ultimate guide to proper use of animation in UX","detectedLanguage":"en","latestVersion":"77eccb835acc","latestPublishedVersion":"77eccb835acc","hasUnpublishedEdits":false,"latestRev":1404,"createdAt":1533369448899,"updatedAt":1706925999499,"acceptedAt":0,"firstPublishedAt":1536106892516,"latestPublishedAt":1552146000056,"vote":false,"experimentalCss":"","displayAuthor":"","content":{"subtitle":"Nowadays it’s hard to impress or even surprise with an interface animation. It shows interactions between screens, explains how to use the…","postDisplay":{"coverless":true}},"virtuals":{"statusForCollection":"APPROVED","allowNotes":true,"previewImage":{"imageId":"1*Haa2NTc2-cKxUZ4BeFNlEQ.png","filter":"","backgroundSize":"","originalWidth":2500,"originalHeight":960,"strategy":"resample","height":0,"width":0},"wordCount":2243,"imageCount":30,"readingTime":10.714150943396227,"subtitle":"Nowadays it’s hard to impress or even surprise with an interface animation. It shows interactions between screens, explains how to use the…","publishedInCount":1,"usersBySocialRecommends":[],"noIndex":false,"recommends":11399,"isBookmarked":false,"tags":[{"slug":"animation","name":"Animation","postCount":27879,"metadata":{"postCount":27879,"coverImage":{"id":"1*17S2wuYMzP0vrW3Za0WrXw.jpeg","originalWidth":1400,"originalHeight":754,"isFeatured":true,"focusPercentX":47,"focusPercentY":34}},"type":"Tag"},{"slug":"ux","name":"UX","postCount":211455,"metadata":{"postCount":211455,"coverImage":{"id":"1*AvtDgMOmzDBIqKiUiHL40g.png","originalWidth":1024,"originalHeight":1024,"isFeatured":true}},"type":"Tag"},{"slug":"motion-design","name":"Motion Design","postCount":2424,"metadata":{"postCount":2424,"coverImage":{"id":"1*Haa2NTc2-cKxUZ4BeFNlEQ.png","originalWidth":2500,"originalHeight":960,"isFeatured":true}},"type":"Tag"},{"slug":"ui","name":"UI","postCount":66244,"metadata":{"postCount":66244,"coverImage":{"id":"1*5bEcogL476RNW032ke4mrw.png","originalWidth":2120,"originalHeight":1192,"isFeatured":true,"alt":"An pro photo of woman with some street art being edited on Pixelmator."}},"type":"Tag"},{"slug":"t","name":"Ts","postCount":1,"metadata":{"postCount":1,"coverImage":{"id":"0*bZuWNg1YHaHrp1GS","originalWidth":1212,"originalHeight":684,"isFeatured":true}},"type":"Tag"}],"socialRecommendsCount":0,"responsesCreatedCount":134,"links":{"entries":[{"url":"http://cubic-bezier.com/","alts":[],"httpStatus":200},{"url":"https://www.wikiwand.com/en/Disney_Animation:_The_Illusion_of_Life","alts":[],"httpStatus":200},{"url":"http://easings.net/","alts":[],"httpStatus":200},{"url":"https://vimeo.com/93206523","alts":[{"type":2,"url":"vimeo://app.vimeo.com/videos/93206523"},{"type":3,"url":"vimeo://app.vimeo.com/videos/93206523"}],"httpStatus":200},{"url":"https://medium.com/this-also/getting-started-with-ui-motion-design-d82d4a625801","alts":[{"type":2,"url":"medium://p/d82d4a625801"},{"type":3,"url":"medium://p/d82d4a625801"}],"httpStatus":200},{"url":"https://medium.com/@adaptivepath/jedi-principles-of-ui-animation-2b88423b1dac","alts":[{"type":2,"url":"medium://p/2b88423b1dac"},{"type":3,"url":"medium://p/2b88423b1dac"}],"httpStatus":200},{"url":"https://books.google.de/books?id=Ano3DwAAQBAJ&printsec=frontcover&dq=editions:ISBN1933820322&hl=uk#v=onepage&q=editions:ISBN1933820322&f=false","alts":[],"httpStatus":200},{"url":"https://valhead.com/2016/05/05/how-fast-should-your-ui-animations-be/","alts":[],"httpStatus":200},{"url":"https://www.youtube.com/watch?v=6p3i6H2oGa0","alts":[{"type":2,"url":"vnd.youtube://www.youtube.com/watch?v=6p3i6H2oGa0&feature=applinks"},{"type":3,"url":"vnd.youtube://www.youtube.com/watch?v=6p3i6H2oGa0&feature=applinks"}],"httpStatus":200},{"url":"https://www.youtube.com/watch?v=DTLF-Mpv534","alts":[{"type":2,"url":"vnd.youtube://www.youtube.com/watch?v=DTLF-Mpv534&feature=applinks"},{"type":3,"url":"vnd.youtube://www.youtube.com/watch?v=DTLF-Mpv534&feature=applinks"}],"httpStatus":200},{"url":"https://material.io/design/motion/speed.html#duration","alts":[],"httpStatus":200},{"url":"https://material.io/design/motion/customization.html#speed","alts":[],"httpStatus":200},{"url":"https://material.io/design/motion/customization.html#movement","alts":[],"httpStatus":200},{"url":"https://www.facebook.com/skytskyi","alts":[{"type":3,"url":"fb://profile/1044357810"},{"type":2,"url":"fb://profile/1044357810"}],"httpStatus":200},{"url":"https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc","alts":[{"type":2,"url":"medium://p/a87a4584ddc"},{"type":3,"url":"medium://p/a87a4584ddc"}],"httpStatus":200}],"version":"0.3","generatedAt":1552146002111},"isLockedPreviewOnly":false,"metaDescription":"","totalClapCount":79117,"sectionCount":3,"readingList":0,"topics":[{"topicId":"22d054b693da","slug":"visual-design","createdAt":1490119315338,"deletedAt":0,"image":{"id":"1*Su6vAh8QOnSkcOrlJAyLmw@2x.jpeg","originalWidth":5184,"originalHeight":3456},"name":"Visual Design","description":"More than just a pretty typeface.","relatedTopics":[],"visibility":1,"relatedTags":[],"relatedTopicIds":[],"seoTitle":"Visual Design: Articles and News — Medium","type":"Topic"},{"topicId":"55321ac40456","slug":"design","createdAt":1536181929758,"deletedAt":0,"image":{"id":"1*1aLu20aptPeUTDg_E8KtmA@2x.jpeg","originalWidth":6016,"originalHeight":4016},"name":"Design","description":"Below the surface.","relatedTopics":[],"visibility":1,"relatedTags":[],"relatedTopicIds":[],"seoTitle":"Design Articles and News — Medium","type":"Topic"},{"topicId":"617a1adb36d5","slug":"ux","createdAt":1540922382587,"deletedAt":0,"image":{"id":"1*X6jzEGtbMtOW4eoQJcDImQ@2x.jpeg","originalWidth":1920,"originalHeight":1275},"name":"UX","description":"All about that user.","relatedTopics":[],"visibility":1,"relatedTags":[],"relatedTopicIds":[],"seoTitle":"UX Articles and News — Medium","type":"Topic"}]},"coverless":true,"slug":"the-ultimate-guide-to-proper-use-of-animation-in-ux","translationSourcePostId":"","translationSourceCreatorId":"","isApprovedTranslation":false,"inResponseToPostId":"","inResponseToRemovedAt":0,"isTitleSynthesized":true,"allowResponses":true,"importedUrl":"","importedPublishedAt":0,"visibility":0,"uniqueSlug":"the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9","previewContent":{"bodyModel":{"paragraphs":[{"name":"previewImage","type":4,"text":"","layout":10,"metadata":{"id":"1*Haa2NTc2-cKxUZ4BeFNlEQ.png","originalWidth":2500,"originalHeight":960,"isFeatured":true}},{"name":"6477","type":3,"text":"The ultimate guide to proper use of animation in UX","markups":[{"type":1,"start":18,"end":51}],"alignment":1}],"sections":[{"startIndex":0}]},"isFullContent":false,"subtitle":"Nowadays it’s hard to impress or even surprise with an interface animation. It shows interactions between screens, explains how to use the…"},"license":0,"inResponseToMediaResourceId":"","canonicalUrl":"","approvedHomeCollectionId":"138adf9c44c","isNewsletter":false,"newsletterId":"","webCanonicalUrl":"","mediumUrl":"","migrationId":"","notifyFollowers":true,"notifyTwitter":false,"notifyFacebook":false,"responseHiddenOnParentPostAt":0,"isSeries":false,"isSubscriptionLocked":false,"seriesLastAppendedAt":0,"audioVersionDurationSec":0,"sequenceId":"","isEligibleForRevenue":false,"isBlockedFromHightower":false,"deletedAt":0,"lockedPostSource":0,"hightowerMinimumGuaranteeStartsAt":0,"hightowerMinimumGuaranteeEndsAt":0,"featureLockRequestAcceptedAt":0,"mongerRequestType":1,"layerCake":3,"socialTitle":"","socialDek":"","editorialPreviewTitle":"","editorialPreviewDek":"","curationEligibleAt":0,"primaryTopicId":"22d054b693da","isProxyPost":false,"proxyPostFaviconUrl":"","proxyPostProviderName":"","proxyPostType":0,"isSuspended":false,"isLimitedState":false,"seoTitle":"","previewContent2":{"bodyModel":{"paragraphs":[{"name":"6477","type":3,"text":"The ultimate guide to proper use of animation in UX","markups":[{"type":1,"start":18,"end":51}]},{"name":"c2e7","type":4,"text":"","markups":[],"layout":3,"metadata":{"id":"1*Haa2NTc2-cKxUZ4BeFNlEQ.png","originalWidth":2500,"originalHeight":960,"isFeatured":true}},{"name":"976d","type":1,"text":"Nowadays it’s hard to impress or even surprise with an interface animation. It shows interactions between screens, explains how to use the application or simply directs a user’s attention. While exploring the articles about animation, I found out that almost all of them describe only specific use cases or general…","markups":[]}],"sections":[{"name":"999e","startIndex":0}]},"isFullContent":false,"subtitle":"Nowadays it’s hard to impress or even surprise with an interface animation. It shows interactions between screens, explains how to use the…"},"cardType":0,"isDistributionAlertDismissed":false,"isShortform":false,"shortformType":0,"responsesLocked":false,"isLockedResponse":false,"isPublishToEmail":false,"responseDistribution":0,"isMarkedPaywallOnly":false,"type":"Post"},"b47cef3bf3a6":{"id":"b47cef3bf3a6","versionId":"7090dcb0c37","creatorId":"fde1eb3eb589","homeCollectionId":"138adf9c44c","title":"Neumorphism in user interfaces","detectedLanguage":"en","latestVersion":"7090dcb0c37","latestPublishedVersion":"7090dcb0c37","hasUnpublishedEdits":false,"latestRev":653,"createdAt":1576496587396,"updatedAt":1678050225001,"acceptedAt":0,"firstPublishedAt":1576545527002,"latestPublishedAt":1678050225001,"vote":false,"experimentalCss":"","displayAuthor":"","content":{"subtitle":"How UI trends reach for inspiration into the real world and what problems do we have to solve to make those trends work.","postDisplay":{"coverless":true}},"virtuals":{"statusForCollection":"APPROVED","allowNotes":true,"previewImage":{"imageId":"1*d7_iZtG8vNH0OJrAc1SwIQ.png","filter":"","backgroundSize":"","originalWidth":2680,"originalHeight":2218,"strategy":"resample","height":0,"width":0},"wordCount":1273,"imageCount":12,"readingTime":6.153773584905661,"subtitle":"How UI trends reach for inspiration into the real world and what problems do we have to solve to make those trends work.","publishedInCount":1,"usersBySocialRecommends":[],"noIndex":false,"recommends":2607,"isBookmarked":false,"tags":[{"slug":"design","name":"Design","postCount":403790,"metadata":{"postCount":403790,"coverImage":{"id":"1*9HBxmCTAsK0_WHSzx6zZvw.jpeg"}},"type":"Tag"},{"slug":"ui","name":"UI","postCount":66244,"metadata":{"postCount":66244,"coverImage":{"id":"1*5bEcogL476RNW032ke4mrw.png","originalWidth":2120,"originalHeight":1192,"isFeatured":true,"alt":"An pro photo of woman with some street art being edited on Pixelmator."}},"type":"Tag"},{"slug":"accessibility","name":"Accessibility","postCount":19643,"metadata":{"postCount":19643,"coverImage":{"id":"0*Z2kDRaMEufAC9Vqs","originalWidth":5184,"originalHeight":3888,"alt":"Scrabble Tiles spell out “Listen More”"}},"type":"Tag"},{"slug":"visual-design","name":"Visual Design","postCount":8109,"metadata":{"postCount":8109,"coverImage":{"id":"1*1tQb4dPtQvBqprSHvHQ8zA.png","originalWidth":1080,"originalHeight":1080,"isFeatured":true}},"type":"Tag"},{"slug":"mobile","name":"Mobile","postCount":69585,"metadata":{"postCount":69585,"coverImage":{"id":"1*-BWzNMtAA4KYWZsuRes-Qg.jpeg","originalWidth":736,"originalHeight":736}},"type":"Tag"}],"socialRecommendsCount":0,"responsesCreatedCount":49,"links":{"entries":[{"url":"https://neumorphism.io","alts":[],"httpStatus":200},{"url":"https://designingui.com/","alts":[],"httpStatus":200},{"url":"https://twitter.com/michalmalewicz","alts":[],"httpStatus":200},{"url":"https://gumroad.com/l/dvffR","alts":[],"httpStatus":200}],"version":"0.3","generatedAt":1678050225501},"isLockedPreviewOnly":false,"metaDescription":"","totalClapCount":13487,"sectionCount":1,"readingList":0,"topics":[{"topicId":"22d054b693da","slug":"visual-design","createdAt":1490119315338,"deletedAt":0,"image":{"id":"1*Su6vAh8QOnSkcOrlJAyLmw@2x.jpeg","originalWidth":5184,"originalHeight":3456},"name":"Visual Design","description":"More than just a pretty typeface.","relatedTopics":[],"visibility":1,"relatedTags":[],"relatedTopicIds":[],"seoTitle":"Visual Design: Articles and News — Medium","type":"Topic"},{"topicId":"55321ac40456","slug":"design","createdAt":1536181929758,"deletedAt":0,"image":{"id":"1*1aLu20aptPeUTDg_E8KtmA@2x.jpeg","originalWidth":6016,"originalHeight":4016},"name":"Design","description":"Below the surface.","relatedTopics":[],"visibility":1,"relatedTags":[],"relatedTopicIds":[],"seoTitle":"Design Articles and News — Medium","type":"Topic"},{"topicId":"617a1adb36d5","slug":"ux","createdAt":1540922382587,"deletedAt":0,"image":{"id":"1*X6jzEGtbMtOW4eoQJcDImQ@2x.jpeg","originalWidth":1920,"originalHeight":1275},"name":"UX","description":"All about that user.","relatedTopics":[],"visibility":1,"relatedTags":[],"relatedTopicIds":[],"seoTitle":"UX Articles and News — Medium","type":"Topic"}]},"coverless":true,"slug":"neumorphism-in-user-interfaces","translationSourcePostId":"","translationSourceCreatorId":"","isApprovedTranslation":false,"inResponseToPostId":"","inResponseToRemovedAt":0,"isTitleSynthesized":false,"allowResponses":true,"importedUrl":"","importedPublishedAt":0,"visibility":2,"uniqueSlug":"neumorphism-in-user-interfaces-b47cef3bf3a6","previewContent":{"bodyModel":{"paragraphs":[{"name":"previewImage","type":4,"text":"","layout":10,"metadata":{"id":"1*d7_iZtG8vNH0OJrAc1SwIQ.png","originalWidth":2680,"originalHeight":2218,"isFeatured":true}},{"name":"eef6","type":3,"text":"Neumorphism in user interfaces","markups":[],"alignment":1},{"name":"91a4","type":13,"text":"How UI trends reach for inspiration into the real world and what…","markups":[],"alignment":1}],"sections":[{"startIndex":0}]},"isFullContent":false,"subtitle":"How UI trends reach for inspiration into the real world and what problems do we have to solve to make those trends work."},"license":0,"inResponseToMediaResourceId":"","canonicalUrl":"","approvedHomeCollectionId":"138adf9c44c","isNewsletter":false,"newsletterId":"","webCanonicalUrl":"https://hype4.academy/articles/design/neumorphism-in-user-interfaces","mediumUrl":"","migrationId":"","notifyFollowers":true,"notifyTwitter":false,"notifyFacebook":false,"responseHiddenOnParentPostAt":0,"isSeries":false,"isSubscriptionLocked":true,"seriesLastAppendedAt":0,"audioVersionDurationSec":0,"sequenceId":"","isEligibleForRevenue":true,"isBlockedFromHightower":false,"deletedAt":0,"lockedPostSource":1,"hightowerMinimumGuaranteeStartsAt":0,"hightowerMinimumGuaranteeEndsAt":0,"featureLockRequestAcceptedAt":0,"mongerRequestType":1,"layerCake":3,"socialTitle":"","socialDek":"","editorialPreviewTitle":"","editorialPreviewDek":"","curationEligibleAt":1576507662288,"primaryTopicId":"617a1adb36d5","isProxyPost":false,"proxyPostFaviconUrl":"","proxyPostProviderName":"","proxyPostType":0,"isSuspended":false,"isLimitedState":false,"seoTitle":"","previewContent2":{"bodyModel":{"paragraphs":[{"name":"eef6","type":3,"text":"Neumorphism in user interfaces","markups":[]},{"name":"91a4","type":13,"text":"How UI trends reach for inspiration into the real world and what problems do we have to solve to make those trends work.","markups":[]},{"name":"7d95","type":4,"text":"The example we’ve made live in front of an audience in about 1h at our…","markups":[],"layout":1,"metadata":{"id":"1*d7_iZtG8vNH0OJrAc1SwIQ.png","originalWidth":2680,"originalHeight":2218,"isFeatured":true}},{"name":"3413","type":1,"text":"Last week we explored some potential new trends in UI design, with one particular trend gaining a lot of attention on both Dribbble and Instagram lately. This “New skeuomorphism” has been called by Jason Kelley Neuomorphism in the comments. I decided to skip the “o” and the name Neuomorphism came…","markups":[{"type":3,"start":198,"end":210,"anchorType":2,"userId":"dc97044e62de"}]}],"sections":[{"name":"9d0a","startIndex":0}]},"isFullContent":false,"subtitle":"How UI trends reach for inspiration into the real world and what problems do we have to solve to make those trends work."},"cardType":0,"isDistributionAlertDismissed":false,"isShortform":false,"shortformType":0,"responsesLocked":false,"isLockedResponse":false,"isPublishToEmail":false,"responseDistribution":0,"isMarkedPaywallOnly":false,"type":"Post"},"970de4c16e01":{"id":"970de4c16e01","versionId":"cb92f65de1fd","creatorId":"f979767824dd","homeCollectionId":"138adf9c44c","title":"Responsive grids and how to actually use them","detectedLanguage":"en","latestVersion":"cb92f65de1fd","latestPublishedVersion":"cb92f65de1fd","hasUnpublishedEdits":false,"latestRev":1474,"createdAt":1540271204488,"updatedAt":1673849786405,"acceptedAt":0,"firstPublishedAt":1555630371009,"latestPublishedAt":1587926450518,"vote":false,"experimentalCss":"","displayAuthor":"","content":{"subtitle":"A detailed explanation for designers on how to use grids for responsive design, and how things will scale in between breakpoints.","postDisplay":{"coverless":true}},"virtuals":{"statusForCollection":"APPROVED","allowNotes":true,"previewImage":{"imageId":"1*Pk2VauRO-tQJnpHXiOFpbA.png","filter":"","backgroundSize":"","originalWidth":1280,"originalHeight":887,"strategy":"resample","height":0,"width":0},"wordCount":2056,"imageCount":35,"readingTime":10.258490566037736,"subtitle":"A detailed explanation for designers on how to use grids for responsive design, and how things will scale in between breakpoints.","publishedInCount":1,"usersBySocialRecommends":[],"noIndex":false,"recommends":3057,"isBookmarked":false,"tags":[{"slug":"design-process","name":"Design Process","postCount":25328,"metadata":{"postCount":25328,"coverImage":{"id":"1*_38OBGagK5HYrZTn_Y3OaQ.jpeg","originalWidth":1400,"originalHeight":763,"isFeatured":true}},"type":"Tag"},{"slug":"visual-design","name":"Visual Design","postCount":8109,"metadata":{"postCount":8109,"coverImage":{"id":"1*1tQb4dPtQvBqprSHvHQ8zA.png","originalWidth":1080,"originalHeight":1080,"isFeatured":true}},"type":"Tag"},{"slug":"user-experience","name":"User Experience","postCount":72156,"metadata":{"postCount":72156,"coverImage":{"id":"0*2wlSW32Cz5O-_FZg","originalWidth":5347,"originalHeight":3558}},"type":"Tag"},{"slug":"design","name":"Design","postCount":403790,"metadata":{"postCount":403790,"coverImage":{"id":"1*9HBxmCTAsK0_WHSzx6zZvw.jpeg"}},"type":"Tag"},{"slug":"ui","name":"UI","postCount":66244,"metadata":{"postCount":66244,"coverImage":{"id":"1*5bEcogL476RNW032ke4mrw.png","originalWidth":2120,"originalHeight":1192,"isFeatured":true,"alt":"An pro photo of woman with some street art being edited on Pixelmator."}},"type":"Tag"}],"socialRecommendsCount":0,"responsesCreatedCount":75,"links":{"entries":[{"url":"https://wordpress.com/","alts":[],"httpStatus":200},{"url":"https://designsystemsrepo.com/design-systems/","alts":[],"httpStatus":200},{"url":"https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-margins","alts":[],"httpStatus":200},{"url":"https://designsystem.quickbooks.com/foundations/responsive-column-grid/","alts":[],"httpStatus":200},{"url":"http://www.dropbox.design","alts":[],"httpStatus":200},{"url":"https://uxdesign.cc/responsive-grids-and-how-to-actually-use-them-common-ui-layouts-7073293697f8","alts":[{"type":3,"url":"medium://p/7073293697f8"},{"type":2,"url":"medium://p/7073293697f8"}],"httpStatus":200},{"url":"https://themockup.club/","alts":[],"httpStatus":200},{"url":"https://www.carbondesignsystem.com/guidelines/layout#2x-grid-fundamentals","alts":[],"httpStatus":200},{"url":"http://www.instagram.com","alts":[{"type":3,"url":"https://www.instagram.com/_n/mainfeed/"},{"type":2,"url":"instagram://mainfeed"}],"httpStatus":200},{"url":"https://www.invisionapp.com/enterprise/design-genome/report/atlassian","alts":[],"httpStatus":200}],"version":"0.3","generatedAt":1587926455224},"isLockedPreviewOnly":false,"metaDescription":"","totalClapCount":16593,"sectionCount":6,"readingList":0,"topics":[{"topicId":"22d054b693da","slug":"visual-design","createdAt":1490119315338,"deletedAt":0,"image":{"id":"1*Su6vAh8QOnSkcOrlJAyLmw@2x.jpeg","originalWidth":5184,"originalHeight":3456},"name":"Visual Design","description":"More than just a pretty typeface.","relatedTopics":[],"visibility":1,"relatedTags":[],"relatedTopicIds":[],"seoTitle":"Visual Design: Articles and News — Medium","type":"Topic"},{"topicId":"55321ac40456","slug":"design","createdAt":1536181929758,"deletedAt":0,"image":{"id":"1*1aLu20aptPeUTDg_E8KtmA@2x.jpeg","originalWidth":6016,"originalHeight":4016},"name":"Design","description":"Below the surface.","relatedTopics":[],"visibility":1,"relatedTags":[],"relatedTopicIds":[],"seoTitle":"Design Articles and News — Medium","type":"Topic"},{"topicId":"617a1adb36d5","slug":"ux","createdAt":1540922382587,"deletedAt":0,"image":{"id":"1*X6jzEGtbMtOW4eoQJcDImQ@2x.jpeg","originalWidth":1920,"originalHeight":1275},"name":"UX","description":"All about that user.","relatedTopics":[],"visibility":1,"relatedTags":[],"relatedTopicIds":[],"seoTitle":"UX Articles and News — Medium","type":"Topic"}]},"coverless":true,"slug":"responsive-grids-and-how-to-actually-use-them","translationSourcePostId":"","translationSourceCreatorId":"","isApprovedTranslation":false,"inResponseToPostId":"","inResponseToRemovedAt":0,"isTitleSynthesized":false,"allowResponses":true,"importedUrl":"","importedPublishedAt":0,"visibility":2,"uniqueSlug":"responsive-grids-and-how-to-actually-use-them-970de4c16e01","previewContent":{"bodyModel":{"paragraphs":[{"name":"previewImage","type":4,"text":"","layout":10,"metadata":{"id":"1*Pk2VauRO-tQJnpHXiOFpbA.png","originalWidth":1280,"originalHeight":887,"isFeatured":true}},{"name":"previewTitle","type":3,"text":"Responsive grids and how to actually use them","alignment":1},{"name":"previewSubtitle","type":13,"text":"A detailed explanation for designers on how to use grids…","alignment":1}],"sections":[{"startIndex":0}]},"isFullContent":false,"subtitle":"A detailed explanation for designers on how to use grids for responsive design, and how things will scale in between breakpoints."},"license":0,"inResponseToMediaResourceId":"","canonicalUrl":"","approvedHomeCollectionId":"138adf9c44c","isNewsletter":false,"newsletterId":"","webCanonicalUrl":"","mediumUrl":"","migrationId":"","notifyFollowers":true,"notifyTwitter":false,"notifyFacebook":false,"responseHiddenOnParentPostAt":0,"isSeries":false,"isSubscriptionLocked":true,"seriesLastAppendedAt":0,"audioVersionDurationSec":0,"sequenceId":"","isEligibleForRevenue":true,"isBlockedFromHightower":false,"deletedAt":0,"lockedPostSource":1,"hightowerMinimumGuaranteeStartsAt":0,"hightowerMinimumGuaranteeEndsAt":0,"featureLockRequestAcceptedAt":0,"mongerRequestType":1,"layerCake":1,"socialTitle":"","socialDek":"","editorialPreviewTitle":"","editorialPreviewDek":"","curationEligibleAt":1555555978840,"primaryTopicId":"22d054b693da","isProxyPost":false,"proxyPostFaviconUrl":"","proxyPostProviderName":"","proxyPostType":0,"isSuspended":false,"isLimitedState":false,"seoTitle":"","previewContent2":{"bodyModel":{"paragraphs":[{"name":"d4bc","type":3,"text":"Responsive grids and how to actually use them","markups":[]},{"name":"a4ce","type":1,"text":"You looked around, you saw all the arguments on why to use a grid, how to set one up, and you’re totally on board with all of that, but nobody told you how to use one. Same.","markups":[{"type":2,"start":159,"end":162}]},{"name":"63da","type":1,"text":"Technically this article can be applied to grids in print but for our…","markups":[]}],"sections":[{"name":"807e","startIndex":0}]},"isFullContent":false,"subtitle":"A detailed explanation for designers on how to use grids for responsive design, and how things will scale in between breakpoints."},"cardType":0,"isDistributionAlertDismissed":false,"isShortform":false,"shortformType":0,"responsesLocked":false,"isLockedResponse":false,"isPublishToEmail":false,"responseDistribution":0,"isMarkedPaywallOnly":false,"type":"Post"},"54b109851969":{"id":"54b109851969","versionId":"7b7e515ec113","creatorId":"a174f7ac9f65","homeCollectionId":"138adf9c44c","title":"Everything you need to know about Design Systems","detectedLanguage":"en","latestVersion":"7b7e515ec113","latestPublishedVersion":"7b7e515ec113","hasUnpublishedEdits":false,"latestRev":2209,"createdAt":1525447893717,"updatedAt":1581431126988,"acceptedAt":0,"firstPublishedAt":1527016595011,"latestPublishedAt":1581431126779,"vote":false,"experimentalCss":"","displayAuthor":"","content":{"subtitle":"→ Pour la version en Français, c’est par ici","postDisplay":{"coverless":true}},"virtuals":{"statusForCollection":"APPROVED","allowNotes":true,"previewImage":{"imageId":"1*-Fcng9a7mZ01KEZNd0E51w.jpeg","filter":"","backgroundSize":"","originalWidth":3778,"originalHeight":2014,"strategy":"resample","height":0,"width":0},"wordCount":2048,"imageCount":23,"readingTime":9.628301886792453,"subtitle":"→ Pour la version en Français, c’est par ici","publishedInCount":1,"usersBySocialRecommends":[],"noIndex":false,"recommends":2116,"isBookmarked":false,"tags":[{"slug":"design-systems","name":"Design Systems","postCount":9341,"metadata":{"postCount":9341,"coverImage":{"id":"1*WEJ1mIjP5d32jGhapRiscQ.png","originalWidth":2181,"originalHeight":1188}},"type":"Tag"},{"slug":"component-libraries","name":"Component Libraries","postCount":581,"metadata":{"postCount":581,"coverImage":{"id":"1*-Fcng9a7mZ01KEZNd0E51w.jpeg","originalWidth":3778,"originalHeight":2014}},"type":"Tag"},{"slug":"methodology","name":"Methodology","postCount":2943,"metadata":{"postCount":2943,"coverImage":{"id":"1*nnBKkFWM3nMDgDluI3pE3Q.png","originalWidth":1024,"originalHeight":1024,"isFeatured":true}},"type":"Tag"},{"slug":"atomic-design","name":"Atomic Design","postCount":907,"metadata":{"postCount":907,"coverImage":{"id":"1*-Fcng9a7mZ01KEZNd0E51w.jpeg","originalWidth":3778,"originalHeight":2014}},"type":"Tag"},{"slug":"ux","name":"UX","postCount":211455,"metadata":{"postCount":211455,"coverImage":{"id":"1*AvtDgMOmzDBIqKiUiHL40g.png","originalWidth":1024,"originalHeight":1024,"isFeatured":true}},"type":"Tag"}],"socialRecommendsCount":0,"responsesCreatedCount":30,"links":{"entries":[{"url":"https://atlassian.design/","alts":[],"httpStatus":200},{"url":"http://bradfrost.com/blog/post/your-sketch-library-is-not-a-design-system/","alts":[],"httpStatus":200},{"url":"https://designsystemsrepo.com/design-systems/","alts":[],"httpStatus":200},{"url":"https://principles.design/","alts":[],"httpStatus":200},{"url":"https://material.io/","alts":[],"httpStatus":200},{"url":"https://polaris.shopify.com","alts":[],"httpStatus":200},{"url":"http://polaris.shopify.com","alts":[],"httpStatus":200},{"url":"https://vimeo.com/262958762","alts":[{"type":3,"url":"vimeo://app.vimeo.com/videos/262958762"},{"type":2,"url":"vimeo://app.vimeo.com/videos/262958762"}],"httpStatus":200},{"url":"http://designsystemsbook.com/","alts":[],"httpStatus":200},{"url":"http://craftui.com/","alts":[],"httpStatus":200},{"url":"https://dribbble.com/jahit","alts":[],"httpStatus":200},{"url":"https://medium.com/@audreyhacq/tout-savoir-sur-les-syst%C3%A8mes-de-design-1b6400c9a1b3","alts":[{"type":3,"url":"medium://p/1b6400c9a1b3"},{"type":2,"url":"medium://p/1b6400c9a1b3"}],"httpStatus":200},{"url":"https://medium.com/@audreyhacq/workshop-how-to-measure-your-design-system-success-b9c3b988edc2","alts":[{"type":3,"url":"medium://p/b9c3b988edc2"},{"type":2,"url":"medium://p/b9c3b988edc2"}],"httpStatus":200},{"url":"https://www.invisionapp.com/blog/ux-team-core-values/","alts":[],"httpStatus":200},{"url":"http://ibm.com/design/language/","alts":[],"httpStatus":200},{"url":"https://medium.com/@audreyhacq/workshop-how-to-prioritize-your-design-system-components-744aa99f07d7","alts":[{"type":3,"url":"medium://p/744aa99f07d7"},{"type":2,"url":"medium://p/744aa99f07d7"}],"httpStatus":200},{"url":"https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0","alts":[{"type":3,"url":"medium://p/2cf9d03be6a0"},{"type":2,"url":"medium://p/2cf9d03be6a0"}],"httpStatus":200},{"url":"https://www.backelite.com/fr/2018/03/a-design-systems-conference/","alts":[],"httpStatus":200},{"url":"https://uxdesign.cc/atomic-design-how-to-design-systems-of-components-ab41f24f260e","alts":[{"type":3,"url":"medium://p/ab41f24f260e"},{"type":2,"url":"medium://p/ab41f24f260e"}],"httpStatus":200},{"url":"https://www.backelite.com/","alts":[],"httpStatus":200},{"url":"https://medium.com/eightshapes-llc/patterns-components-2ce778cbe4e8","alts":[{"type":2,"url":"medium://p/2ce778cbe4e8"},{"type":3,"url":"medium://p/2ce778cbe4e8"}],"httpStatus":200},{"url":"https://uxdesign.cc/workshop-how-to-prioritize-your-design-system-components-744aa99f07d7","alts":[{"type":3,"url":"medium://p/744aa99f07d7"},{"type":2,"url":"medium://p/744aa99f07d7"}],"httpStatus":200}],"version":"0.3","generatedAt":1581431128454},"isLockedPreviewOnly":false,"metaDescription":"","totalClapCount":10458,"sectionCount":6,"readingList":0,"topics":[{"topicId":"55321ac40456","slug":"design","createdAt":1536181929758,"deletedAt":0,"image":{"id":"1*1aLu20aptPeUTDg_E8KtmA@2x.jpeg","originalWidth":6016,"originalHeight":4016},"name":"Design","description":"Below the surface.","relatedTopics":[],"visibility":1,"relatedTags":[],"relatedTopicIds":[],"seoTitle":"Design Articles and News — Medium","type":"Topic"}]},"coverless":true,"slug":"everything-you-need-to-know-about-design-systems","translationSourcePostId":"","translationSourceCreatorId":"","isApprovedTranslation":false,"inResponseToPostId":"","inResponseToRemovedAt":0,"isTitleSynthesized":true,"allowResponses":true,"importedUrl":"","importedPublishedAt":0,"visibility":0,"uniqueSlug":"everything-you-need-to-know-about-design-systems-54b109851969","previewContent":{"bodyModel":{"paragraphs":[{"name":"5505","type":3,"text":"Everything you need to know about Design Systems","markups":[],"alignment":1},{"name":"e808","type":4,"text":"","markups":[],"layout":9,"metadata":{"id":"1*-Fcng9a7mZ01KEZNd0E51w.jpeg","originalWidth":3778,"originalHeight":2014}}],"sections":[{"startIndex":0}]},"isFullContent":false,"subtitle":"→ Pour la version en Français, c’est par ici"},"license":0,"inResponseToMediaResourceId":"","canonicalUrl":"","approvedHomeCollectionId":"138adf9c44c","isNewsletter":false,"newsletterId":"","webCanonicalUrl":"","mediumUrl":"","migrationId":"","notifyFollowers":true,"notifyTwitter":false,"notifyFacebook":false,"responseHiddenOnParentPostAt":0,"isSeries":false,"isSubscriptionLocked":false,"seriesLastAppendedAt":0,"audioVersionDurationSec":0,"sequenceId":"","isEligibleForRevenue":false,"isBlockedFromHightower":false,"deletedAt":0,"lockedPostSource":0,"hightowerMinimumGuaranteeStartsAt":0,"hightowerMinimumGuaranteeEndsAt":0,"featureLockRequestAcceptedAt":0,"mongerRequestType":1,"layerCake":3,"socialTitle":"","socialDek":"","editorialPreviewTitle":"","editorialPreviewDek":"","curationEligibleAt":0,"isProxyPost":false,"proxyPostFaviconUrl":"","proxyPostProviderName":"","proxyPostType":0,"isSuspended":false,"isLimitedState":false,"seoTitle":"","previewContent2":{"bodyModel":{"paragraphs":[{"name":"5505","type":3,"text":"Everything you need to know about Design Systems","markups":[]},{"name":"e808","type":4,"text":"","markups":[],"layout":1,"metadata":{"id":"1*-Fcng9a7mZ01KEZNd0E51w.jpeg","originalWidth":3778,"originalHeight":2014}},{"name":"663c","type":1,"text":"→ Pour la version en Français, c’est par ici","markups":[{"type":3,"start":2,"end":44,"href":"https://medium.com/@audreyhacq/tout-savoir-sur-les-syst%C3%A8mes-de-design-1b6400c9a1b3","title":"","rel":"","anchorType":0},{"type":2,"start":0,"end":44}]},{"name":"8902","type":1,"text":"Design Systems have become a key part of my everyday work… And from discussions around me, it seems that it is now the case for a lot of people ;)","markups":[]},{"name":"b767","type":1,"text":"After reading Alla Kholmatova’s book last year, I was lucky to…","markups":[{"type":3,"start":14,"end":36,"href":"http://designsystemsbook.com/","title":"","rel":"","anchorType":0},{"type":3,"start":74,"end":99,"href":"https://www.backelite.com/fr/2018/03/a-design-systems-conference/","title":"","rel":"","anchorType":0}]}],"sections":[{"name":"8bf7","startIndex":0}]},"isFullContent":false,"subtitle":"→ Pour la version en Français, c’est par ici"},"cardType":0,"isDistributionAlertDismissed":false,"isShortform":false,"shortformType":0,"responsesLocked":false,"isLockedResponse":false,"isPublishToEmail":false,"responseDistribution":0,"isMarkedPaywallOnly":false,"type":"Post"},"490a3760533":{"id":"490a3760533","versionId":"a51d703bef3b","creatorId":"f95f1c3c17a4","homeCollectionId":"138adf9c44c","title":"Designing Tables for Reusability","detectedLanguage":"en","latestVersion":"a51d703bef3b","latestPublishedVersion":"a51d703bef3b","hasUnpublishedEdits":false,"latestRev":1263,"createdAt":1509112482481,"updatedAt":1529581185018,"acceptedAt":0,"firstPublishedAt":1513653874115,"latestPublishedAt":1517839913705,"vote":false,"experimentalCss":"","displayAuthor":"","content":{"subtitle":"Written by Ada Rafalowicz and Havana Nguyen","postDisplay":{"coverless":true}},"virtuals":{"statusForCollection":"APPROVED","allowNotes":true,"previewImage":{"imageId":"1*Y4uOirTNPvJbJj5_bSVFWw.png","filter":"","backgroundSize":"","originalWidth":3000,"originalHeight":2000,"strategy":"resample","height":0,"width":0},"wordCount":3367,"imageCount":34,"readingTime":15.15566037735849,"subtitle":"Written by Ada Rafalowicz and Havana Nguyen","publishedInCount":1,"usersBySocialRecommends":[],"noIndex":false,"recommends":2868,"isBookmarked":false,"tags":[{"slug":"enterprise","name":"Enterprise","postCount":5883,"metadata":{"postCount":5883,"coverImage":{"id":"1*zONG2ur4f6Ei0q4Hx_DqVg.png","originalWidth":5200,"originalHeight":2772,"alt":"Light and dark mode color palettes for my personal website set against an abstract backdrop."}},"type":"Tag"},{"slug":"design","name":"Design","postCount":403790,"metadata":{"postCount":403790,"coverImage":{"id":"1*9HBxmCTAsK0_WHSzx6zZvw.jpeg"}},"type":"Tag"},{"slug":"product-design","name":"Product Design","postCount":66498,"metadata":{"postCount":66498,"coverImage":{"id":"1*D8nIb4WQULZzcNpbNm39Lw.jpeg","originalWidth":6000,"originalHeight":4000,"isFeatured":true,"alt":"A woman throwing a soda into a trash can"}},"type":"Tag"},{"slug":"careers","name":"Career","postCount":0,"metadata":{"postCount":0,"coverImage":{"id":"1*ZntLwjJgT1OyhIdhhm06Ag.jpeg","originalWidth":5707,"originalHeight":3890}},"type":"Tag"},{"slug":"ux","name":"UX","postCount":211455,"metadata":{"postCount":211455,"coverImage":{"id":"1*AvtDgMOmzDBIqKiUiHL40g.png","originalWidth":1024,"originalHeight":1024,"isFeatured":true}},"type":"Tag"}],"socialRecommendsCount":0,"responsesCreatedCount":82,"links":{"entries":[{"url":"https://www.linkedin.com/in/rachael-dudziak-92b92556/","alts":[],"httpStatus":999},{"url":"http://www.havananguyen.com","alts":[],"httpStatus":200},{"url":"https://dribbble.com/shots/1903644-Data-Grid","alts":[],"httpStatus":200},{"url":"https://www.usersknow.com/podcast/2017/8/1/complexity","alts":[],"httpStatus":200},{"url":"https://www.linkedin.com/in/michael-pate-1674526/","alts":[],"httpStatus":999},{"url":"https://www.linkedin.com/in/kiaynispearman/","alts":[],"httpStatus":999},{"url":"https://www.linkedin.com/in/ada-rafalowicz/","alts":[],"httpStatus":999},{"url":"https://dribbble.com/shots/3032012-Expand-ll","alts":[],"httpStatus":200},{"url":"https://www.linkedin.com/in/ariellecason/","alts":[],"httpStatus":999},{"url":"https://www.linkedin.com/in/rinaandrejev/","alts":[],"httpStatus":999},{"url":"https://dribbble.com/virgilpana","alts":[],"httpStatus":200},{"url":"https://www.careerbuilder.com/","alts":[],"httpStatus":200},{"url":"https://www.linkedin.com/in/timwardneversettle/","alts":[],"httpStatus":999},{"url":"https://dribbble.com/markpatterson","alts":[],"httpStatus":200},{"url":"https://quoteinvestigator.com/2014/05/22/solve/","alts":[{"type":1,"url":"https://cdn.ampproject.org/c/s/quoteinvestigator.com/2014/05/22/solve/amp/"}],"httpStatus":200},{"url":"http://pttrns.com","alts":[],"httpStatus":200}],"version":"0.3","generatedAt":1517839915793},"isLockedPreviewOnly":false,"metaDescription":"","totalClapCount":20397,"sectionCount":1,"readingList":0,"topics":[{"topicId":"22d054b693da","slug":"visual-design","createdAt":1490119315338,"deletedAt":0,"image":{"id":"1*Su6vAh8QOnSkcOrlJAyLmw@2x.jpeg","originalWidth":5184,"originalHeight":3456},"name":"Visual Design","description":"More than just a pretty typeface.","relatedTopics":[],"visibility":1,"relatedTags":[],"relatedTopicIds":[],"seoTitle":"Visual Design: Articles and News — Medium","type":"Topic"},{"topicId":"55321ac40456","slug":"design","createdAt":1536181929758,"deletedAt":0,"image":{"id":"1*1aLu20aptPeUTDg_E8KtmA@2x.jpeg","originalWidth":6016,"originalHeight":4016},"name":"Design","description":"Below the surface.","relatedTopics":[],"visibility":1,"relatedTags":[],"relatedTopicIds":[],"seoTitle":"Design Articles and News — Medium","type":"Topic"}]},"coverless":true,"slug":"designing-tables-for-reusability","translationSourcePostId":"","translationSourceCreatorId":"","isApprovedTranslation":false,"inResponseToPostId":"","inResponseToRemovedAt":0,"isTitleSynthesized":true,"allowResponses":true,"importedUrl":"","importedPublishedAt":0,"visibility":0,"uniqueSlug":"designing-tables-for-reusability-490a3760533","previewContent":{"bodyModel":{"paragraphs":[{"name":"04cd","type":3,"text":"Designing Tables for Reusability","markups":[],"alignment":1},{"name":"c6de","type":13,"text":"Written by Ada Rafalowicz and Havana Nguyen","markups":[{"type":3,"start":11,"end":25,"href":"https://www.linkedin.com/in/ada-rafalowicz/","title":"","rel":"","anchorType":0},{"type":3,"start":30,"end":43,"href":"http://www.havananguyen.com","title":"","rel":"","anchorType":0},{"type":1,"start":0,"end":43}],"alignment":1},{"name":"2e98","type":4,"text":"","markups":[],"layout":10,"metadata":{"id":"1*Y4uOirTNPvJbJj5_bSVFWw.png","originalWidth":3000,"originalHeight":2000}}],"sections":[{"startIndex":0}]},"isFullContent":false,"subtitle":"Written by Ada Rafalowicz and Havana Nguyen"},"license":0,"inResponseToMediaResourceId":"","canonicalUrl":"","approvedHomeCollectionId":"138adf9c44c","isNewsletter":false,"newsletterId":"","webCanonicalUrl":"","mediumUrl":"","migrationId":"","notifyFollowers":true,"notifyTwitter":false,"notifyFacebook":false,"responseHiddenOnParentPostAt":0,"isSeries":false,"isSubscriptionLocked":false,"seriesLastAppendedAt":0,"audioVersionDurationSec":0,"sequenceId":"","isEligibleForRevenue":false,"isBlockedFromHightower":false,"deletedAt":0,"lockedPostSource":0,"hightowerMinimumGuaranteeStartsAt":0,"hightowerMinimumGuaranteeEndsAt":0,"featureLockRequestAcceptedAt":0,"mongerRequestType":1,"layerCake":0,"socialTitle":"","socialDek":"","editorialPreviewTitle":"","editorialPreviewDek":"","curationEligibleAt":0,"isProxyPost":false,"proxyPostFaviconUrl":"","proxyPostProviderName":"","proxyPostType":0,"isSuspended":false,"isLimitedState":false,"seoTitle":"","previewContent2":{"bodyModel":{"paragraphs":[{"name":"04cd","type":3,"text":"Designing Tables for Reusability","markups":[]},{"name":"c6de","type":13,"text":"Written by Ada Rafalowicz and Havana Nguyen","markups":[{"type":3,"start":11,"end":25,"href":"https://www.linkedin.com/in/ada-rafalowicz/","title":"","rel":"","anchorType":0},{"type":3,"start":30,"end":43,"href":"http://www.havananguyen.com","title":"","rel":"","anchorType":0},{"type":1,"start":0,"end":43}]},{"name":"2e98","type":4,"text":"","markups":[],"layout":3,"metadata":{"id":"1*Y4uOirTNPvJbJj5_bSVFWw.png","originalWidth":3000,"originalHeight":2000}},{"name":"e3d2","type":7,"text":"“If I had an hour to solve a problem I’d spend 55 minutes thinking about the problem and 5 minutes thinking about solutions.”","markups":[{"type":2,"start":0,"end":125}]},{"name":"a95e","type":7,"text":"– Unknown","markups":[{"type":3,"start":2,"end":9,"href":"https://quoteinvestigator.com/2014/05/22/solve/","title":"","rel":"","anchorType":0},{"type":2,"start":0,"end":9}]},{"name":"5c78","type":1,"text":"It is so tempting to jump straight onto paper or Sketch or Axure and start building. In environments where shipping fast is a constant demand…","markups":[]}],"sections":[{"name":"a0f4","startIndex":0}]},"isFullContent":false,"subtitle":"Written by Ada Rafalowicz and Havana Nguyen"},"cardType":0,"isDistributionAlertDismissed":false,"isShortform":false,"shortformType":0,"responsesLocked":false,"isLockedResponse":false,"isPublishToEmail":false,"responseDistribution":0,"isMarkedPaywallOnly":false,"type":"Post"},"7329ed9d6112":{"id":"7329ed9d6112","versionId":"6e29c34389dd","creatorId":"9e48700a9ecd","homeCollectionId":"138adf9c44c","title":"UI cheat sheets: buttons","detectedLanguage":"en","latestVersion":"6e29c34389dd","latestPublishedVersion":"6e29c34389dd","hasUnpublishedEdits":false,"latestRev":4060,"createdAt":1550338309130,"updatedAt":1639096808419,"acceptedAt":0,"firstPublishedAt":1557646576545,"latestPublishedAt":1603389385675,"vote":false,"experimentalCss":"","displayAuthor":"","content":{"subtitle":"My favourite design element is the buttons. In fact, I [insert swear word of your choice] love buttons. In this cheat sheet, we will go…","postDisplay":{"coverless":true}},"virtuals":{"statusForCollection":"APPROVED","allowNotes":true,"previewImage":{"imageId":"1*YLUbUqRCoU3cXUCmDImu7g.png","filter":"","backgroundSize":"","originalWidth":1400,"originalHeight":700,"strategy":"resample","height":0,"width":0},"wordCount":2838,"imageCount":28,"readingTime":12.859433962264152,"subtitle":"My favourite design element is the buttons. In fact, I [insert swear word of your choice] love buttons. In this cheat sheet, we will go…","publishedInCount":1,"usersBySocialRecommends":[],"noIndex":false,"recommends":2464,"isBookmarked":false,"tags":[{"slug":"design","name":"Design","postCount":403790,"metadata":{"postCount":403790,"coverImage":{"id":"1*9HBxmCTAsK0_WHSzx6zZvw.jpeg"}},"type":"Tag"},{"slug":"interface-design","name":"Interface Design","postCount":1518,"metadata":{"postCount":1518,"coverImage":{"id":"1*EO1v1-QfDErEKgmXXh3hwQ.jpeg","originalWidth":2024,"originalHeight":1848,"isFeatured":true}},"type":"Tag"},{"slug":"user-experience","name":"User Experience","postCount":72156,"metadata":{"postCount":72156,"coverImage":{"id":"0*2wlSW32Cz5O-_FZg","originalWidth":5347,"originalHeight":3558}},"type":"Tag"},{"slug":"ui","name":"UI","postCount":66244,"metadata":{"postCount":66244,"coverImage":{"id":"1*5bEcogL476RNW032ke4mrw.png","originalWidth":2120,"originalHeight":1192,"isFeatured":true,"alt":"An pro photo of woman with some street art being edited on Pixelmator."}},"type":"Tag"},{"slug":"ux","name":"UX","postCount":211455,"metadata":{"postCount":211455,"coverImage":{"id":"1*AvtDgMOmzDBIqKiUiHL40g.png","originalWidth":1024,"originalHeight":1024,"isFeatured":true}},"type":"Tag"}],"socialRecommendsCount":0,"responsesCreatedCount":36,"links":{"entries":[{"url":"http://accessible-colors.com/","alts":[],"httpStatus":200},{"url":"https://support.google.com/accessibility/android/answer/7101858?hl=en","alts":[],"httpStatus":200},{"url":"https://www.urbandictionary.com/define.php?term=fat%20finger","alts":[{"type":1,"url":"https://cdn.ampproject.org/c/s/www.urbandictionary.com/define.php?term=fat-finger&amp=true"}],"httpStatus":200},{"url":"http://touchlab.mit.edu/publications/2003_009.pdf","alts":[],"httpStatus":200},{"url":"https://material.io/design/environment/elevation.html#depicting-elevation","alts":[],"httpStatus":200},{"url":"https://material.io/design/components/buttons-floating-action-button.html","alts":[],"httpStatus":200},{"url":"https://material.io/design/components/buttons.html#anatomy","alts":[],"httpStatus":200},{"url":"https://material.io/design/components/buttons-floating-action-button.html","alts":[],"httpStatus":200},{"url":"https://uxdesign.cc/make-sense-of-rounded-corners-on-buttons-dfc8e13ea7f7","alts":[{"type":3,"url":"medium://p/dfc8e13ea7f7"},{"type":2,"url":"medium://p/dfc8e13ea7f7"}],"httpStatus":200},{"url":"https://www.nngroup.com/articles/keyboard-accessibility/","alts":[],"httpStatus":200},{"url":"https://medium.com/@uxmovement/5-rules-for-choosing-the-right-words-on-button-labels-dc3f74c2c2a3","alts":[{"type":3,"url":"medium://p/dc3f74c2c2a3"},{"type":2,"url":"medium://p/dc3f74c2c2a3"}],"httpStatus":200},{"url":"https://medium.com/@zacdicko/size-matters-accessibility-and-touch-targets-56e942adc0cc","alts":[{"type":3,"url":"medium://p/56e942adc0cc"},{"type":2,"url":"medium://p/56e942adc0cc"}],"httpStatus":200}],"version":"0.3","generatedAt":1603389386853},"isLockedPreviewOnly":false,"metaDescription":"","totalClapCount":11399,"sectionCount":10,"readingList":0,"topics":[{"topicId":"55321ac40456","slug":"design","createdAt":1536181929758,"deletedAt":0,"image":{"id":"1*1aLu20aptPeUTDg_E8KtmA@2x.jpeg","originalWidth":6016,"originalHeight":4016},"name":"Design","description":"Below the surface.","relatedTopics":[],"visibility":1,"relatedTags":[],"relatedTopicIds":[],"seoTitle":"Design Articles and News — Medium","type":"Topic"},{"topicId":"617a1adb36d5","slug":"ux","createdAt":1540922382587,"deletedAt":0,"image":{"id":"1*X6jzEGtbMtOW4eoQJcDImQ@2x.jpeg","originalWidth":1920,"originalHeight":1275},"name":"UX","description":"All about that user.","relatedTopics":[],"visibility":1,"relatedTags":[],"relatedTopicIds":[],"seoTitle":"UX Articles and News — Medium","type":"Topic"},{"topicId":"decb52b64abf","slug":"programming","createdAt":1493934116328,"deletedAt":0,"image":{"id":"1*iPa136b1cGEO7lvoXg6uHQ@2x.jpeg","originalWidth":6016,"originalHeight":4016},"name":"Programming","description":"The good, the bad, the buggy.","relatedTopics":[],"visibility":1,"relatedTags":[],"relatedTopicIds":[],"seoTitle":"Programming News and Articles — Medium","type":"Topic"}]},"coverless":true,"slug":"ui-cheat-sheets-buttons","translationSourcePostId":"","translationSourceCreatorId":"","isApprovedTranslation":false,"inResponseToPostId":"","inResponseToRemovedAt":0,"isTitleSynthesized":false,"allowResponses":true,"importedUrl":"","importedPublishedAt":0,"visibility":2,"uniqueSlug":"ui-cheat-sheets-buttons-7329ed9d6112","previewContent":{"bodyModel":{"paragraphs":[{"name":"previewImage","type":4,"text":"","layout":10,"metadata":{"id":"1*YLUbUqRCoU3cXUCmDImu7g.png","originalWidth":1400,"originalHeight":700,"isFeatured":true}},{"name":"e068","type":3,"text":"UI cheat sheet: buttons","markups":[],"alignment":1},{"name":"c3c7","type":1,"text":"My favourite design element is the buttons. In fact, I [insert swear word of your choice] love buttons. In this cheat…","markups":[],"alignment":1}],"sections":[{"startIndex":0}]},"isFullContent":false,"subtitle":"My favourite design element is the buttons. In fact, I [insert swear word of your choice] love buttons. In this cheat sheet, we will go…"},"license":0,"inResponseToMediaResourceId":"","canonicalUrl":"","approvedHomeCollectionId":"138adf9c44c","isNewsletter":false,"newsletterId":"","webCanonicalUrl":"","mediumUrl":"","migrationId":"","notifyFollowers":true,"notifyTwitter":false,"notifyFacebook":false,"responseHiddenOnParentPostAt":0,"isSeries":false,"isSubscriptionLocked":true,"seriesLastAppendedAt":0,"audioVersionDurationSec":0,"sequenceId":"","isEligibleForRevenue":true,"isBlockedFromHightower":false,"deletedAt":0,"lockedPostSource":1,"hightowerMinimumGuaranteeStartsAt":0,"hightowerMinimumGuaranteeEndsAt":0,"featureLockRequestAcceptedAt":0,"mongerRequestType":1,"layerCake":3,"socialTitle":"","socialDek":"","editorialPreviewTitle":"","editorialPreviewDek":"","curationEligibleAt":1557646574986,"primaryTopicId":"55321ac40456","isProxyPost":false,"proxyPostFaviconUrl":"","proxyPostProviderName":"","proxyPostType":0,"isSuspended":false,"isLimitedState":false,"seoTitle":"","previewContent2":{"bodyModel":{"paragraphs":[{"name":"e068","type":3,"text":"UI cheat sheet: buttons","markups":[]},{"name":"7e3f","type":4,"text":"","markups":[],"layout":1,"metadata":{"id":"1*YLUbUqRCoU3cXUCmDImu7g.png","originalWidth":1400,"originalHeight":700,"isFeatured":true}},{"name":"c3c7","type":1,"text":"My favourite design element is the buttons. In fact, I [insert swear word of your choice] love buttons. In this cheat sheet, we will go through different types of buttons, states, and interactions. For the purpose of this story, we will be ignoring radio buttons, tabs, checkboxes, and other types…","markups":[]}],"sections":[{"name":"fab3","startIndex":0}]},"isFullContent":false,"subtitle":"My favourite design element is the buttons. In fact, I [insert swear word of your choice] love buttons. In this cheat sheet, we will go…"},"cardType":0,"isDistributionAlertDismissed":false,"isShortform":false,"shortformType":0,"responsesLocked":false,"isLockedResponse":false,"isPublishToEmail":false,"responseDistribution":0,"isMarkedPaywallOnly":false,"type":"Post"},"6ecbe9ec38b7":{"id":"6ecbe9ec38b7","versionId":"1f1ecad69277","creatorId":"7c88c0813696","homeCollectionId":"138adf9c44c","title":"5 steps to master a whiteboard design challenge","detectedLanguage":"en","latestVersion":"1f1ecad69277","latestPublishedVersion":"1f1ecad69277","hasUnpublishedEdits":false,"latestRev":3048,"createdAt":1456181769580,"updatedAt":1706749520066,"acceptedAt":0,"firstPublishedAt":1457548033548,"latestPublishedAt":1500004845346,"vote":false,"experimentalCss":"","displayAuthor":"","content":{"subtitle":"A step by step guide on how to approach a whiteboard design interview","postDisplay":{"coverless":true}},"virtuals":{"statusForCollection":"APPROVED","allowNotes":true,"previewImage":{"imageId":"1*OCqRyD1IlQ45QW1lUlcWjA.png","filter":"","backgroundSize":"","originalWidth":1200,"originalHeight":367,"strategy":"resample","height":0,"width":0},"wordCount":1704,"imageCount":8,"readingTime":7.563522012578616,"subtitle":"A step by step guide on how to approach a whiteboard design interview","publishedInCount":1,"usersBySocialRecommends":[],"noIndex":false,"recommends":2443,"isBookmarked":false,"tags":[{"slug":"ux","name":"UX","postCount":211455,"metadata":{"postCount":211455,"coverImage":{"id":"1*AvtDgMOmzDBIqKiUiHL40g.png","originalWidth":1024,"originalHeight":1024,"isFeatured":true}},"type":"Tag"},{"slug":"design","name":"Design","postCount":403790,"metadata":{"postCount":403790,"coverImage":{"id":"1*9HBxmCTAsK0_WHSzx6zZvw.jpeg"}},"type":"Tag"},{"slug":"interview","name":"Interview","postCount":86639,"metadata":{"postCount":86639,"coverImage":{"id":"1*0ygFBsM_EIjgR4M7ebLdbA.png","originalWidth":1058,"originalHeight":536,"isFeatured":true}},"type":"Tag"}],"socialRecommendsCount":0,"responsesCreatedCount":38,"links":{"entries":[{"url":"https://cdn1.vox-cdn.com/thumbor/neJR1Pjm2e9UG-Ac6IS8tAix33I=/cdn0.vox-cdn.com/uploads/chorus_asset/file/3461336/newark2.0.jpeg","alts":[],"httpStatus":200},{"url":"http://wp.streetwise.co/wp-content/uploads//2014/06/Screen-Shot-2014-06-11-at-6.37.56-PM.png","alts":[],"httpStatus":200}],"version":"0.3","generatedAt":1500004845724},"isLockedPreviewOnly":false,"metaDescription":"","totalClapCount":10720,"sectionCount":1,"readingList":0,"topics":[{"topicId":"55321ac40456","slug":"design","createdAt":1536181929758,"deletedAt":0,"image":{"id":"1*1aLu20aptPeUTDg_E8KtmA@2x.jpeg","originalWidth":6016,"originalHeight":4016},"name":"Design","description":"Below the surface.","relatedTopics":[],"visibility":1,"relatedTags":[],"relatedTopicIds":[],"seoTitle":"Design Articles and News — Medium","type":"Topic"}]},"coverless":true,"slug":"5-steps-to-master-a-whiteboard-design-challenge","translationSourcePostId":"","translationSourceCreatorId":"","isApprovedTranslation":false,"inResponseToPostId":"","inResponseToRemovedAt":0,"isTitleSynthesized":false,"allowResponses":true,"importedUrl":"","importedPublishedAt":0,"visibility":0,"uniqueSlug":"5-steps-to-master-a-whiteboard-design-challenge-6ecbe9ec38b7","previewContent":{"bodyModel":{"paragraphs":[{"name":"previewImage","type":4,"text":"","layout":10,"metadata":{"id":"1*OCqRyD1IlQ45QW1lUlcWjA.png","originalWidth":1200,"originalHeight":367}},{"name":"previewTitle","type":3,"text":"5 steps to master a whiteboard design challenge","alignment":1},{"name":"previewSubtitle","type":13,"text":"A step by step guide on how to approach a whiteboard…","alignment":1}],"sections":[{"startIndex":0}]},"isFullContent":false,"subtitle":"A step by step guide on how to approach a whiteboard design interview"},"license":0,"inResponseToMediaResourceId":"","canonicalUrl":"","approvedHomeCollectionId":"138adf9c44c","isNewsletter":false,"newsletterId":"","webCanonicalUrl":"","mediumUrl":"","migrationId":"","notifyFollowers":true,"notifyTwitter":false,"notifyFacebook":false,"responseHiddenOnParentPostAt":0,"isSeries":false,"isSubscriptionLocked":false,"seriesLastAppendedAt":0,"audioVersionDurationSec":0,"sequenceId":"","isEligibleForRevenue":false,"isBlockedFromHightower":false,"deletedAt":0,"lockedPostSource":0,"hightowerMinimumGuaranteeStartsAt":0,"hightowerMinimumGuaranteeEndsAt":0,"featureLockRequestAcceptedAt":0,"mongerRequestType":1,"layerCake":0,"socialTitle":"","socialDek":"","editorialPreviewTitle":"","editorialPreviewDek":"","curationEligibleAt":0,"isProxyPost":false,"proxyPostFaviconUrl":"","proxyPostProviderName":"","proxyPostType":0,"isSuspended":false,"isLimitedState":false,"seoTitle":"","previewContent2":{"bodyModel":{"paragraphs":[{"name":"d4ab","type":3,"text":"5 steps to master whiteboard design challenge","markups":[]},{"name":"a526","type":13,"text":"Best practices and a step-by-step guide to better approach onsite whiteboard design interview for UX candidates","markups":[]},{"name":"9c05","type":4,"text":"http://wp.streetwise.co/wp-content/uploads//2014/06/Screen-Shot-2014-06-11-at-6.37.56-PM.png","markups":[{"type":3,"start":0,"end":92,"href":"http://wp.streetwise.co/wp-content/uploads//2014/06/Screen-Shot-2014-06-11-at-6.37.56-PM.png","title":"","rel":"nofollow","anchorType":0}],"layout":5,"metadata":{"id":"1*OCqRyD1IlQ45QW1lUlcWjA.png","originalWidth":1200,"originalHeight":367}},{"name":"2e68","type":1,"text":"It’s always exiting to get a call from the recruiter inviting you to an onsite interview. You get to see the office, meet the team, get a feel of the culture and show your work. It can also be stressful and a lot to prepare. There are plenty of resources…","markups":[]}],"sections":[{"name":"8367","startIndex":0}]},"isFullContent":false,"subtitle":"A step by step guide on how to approach a whiteboard design interview"},"cardType":0,"isDistributionAlertDismissed":false,"isShortform":false,"shortformType":0,"responsesLocked":false,"isLockedResponse":false,"isPublishToEmail":false,"responseDistribution":0,"isMarkedPaywallOnly":false,"type":"Post"},"1193c2bd79c4":{"id":"1193c2bd79c4","versionId":"5b144f2a1d65","creatorId":"fe2c62b10f97","homeCollectionId":"138adf9c44c","title":"How Hinge plays with your emotions to get you a match","detectedLanguage":"en","latestVersion":"5b144f2a1d65","latestPublishedVersion":"5b144f2a1d65","hasUnpublishedEdits":false,"latestRev":672,"createdAt":1564683128730,"updatedAt":1639206548912,"acceptedAt":0,"firstPublishedAt":1565911749814,"latestPublishedAt":1593069721522,"vote":false,"experimentalCss":"","displayAuthor":"","content":{"subtitle":"Few months ago, I was on this dating app called Hinge (you guessed it right — for the noble purpose of ‘research’). While navigating…","postDisplay":{"coverless":true}},"virtuals":{"statusForCollection":"APPROVED","allowNotes":true,"previewImage":{"imageId":"1*nnz7_GKD14inkiRIeKlo5Q.jpeg","filter":"","backgroundSize":"","originalWidth":2768,"originalHeight":1848,"strategy":"resample","height":0,"width":0},"wordCount":2240,"imageCount":18,"readingTime":10.102830188679246,"subtitle":"Few months ago, I was on this dating app called Hinge (you guessed it right — for the noble purpose of ‘research’). While navigating…","publishedInCount":1,"usersBySocialRecommends":[],"noIndex":false,"recommends":233,"isBookmarked":false,"tags":[{"slug":"ux","name":"UX","postCount":211455,"metadata":{"postCount":211455,"coverImage":{"id":"1*AvtDgMOmzDBIqKiUiHL40g.png","originalWidth":1024,"originalHeight":1024,"isFeatured":true}},"type":"Tag"},{"slug":"ui","name":"UI","postCount":66244,"metadata":{"postCount":66244,"coverImage":{"id":"1*5bEcogL476RNW032ke4mrw.png","originalWidth":2120,"originalHeight":1192,"isFeatured":true,"alt":"An pro photo of woman with some street art being edited on Pixelmator."}},"type":"Tag"},{"slug":"design","name":"Design","postCount":403790,"metadata":{"postCount":403790,"coverImage":{"id":"1*9HBxmCTAsK0_WHSzx6zZvw.jpeg"}},"type":"Tag"},{"slug":"design-thinking","name":"Design Thinking","postCount":71927,"metadata":{"postCount":71927,"coverImage":{"id":"1*WCyLaCBnUhU1tbK7kjm7ng.png","originalWidth":1456,"originalHeight":816,"isFeatured":true}},"type":"Tag"},{"slug":"user-experience","name":"User Experience","postCount":72156,"metadata":{"postCount":72156,"coverImage":{"id":"0*2wlSW32Cz5O-_FZg","originalWidth":5347,"originalHeight":3558}},"type":"Tag"}],"socialRecommendsCount":0,"responsesCreatedCount":10,"links":{"entries":[{"url":"https://www.psychologytoday.com/intl/blog/positive-prescription/201703/why-we-love-talking-about-ourselves","alts":[{"type":1,"url":"https://cdn.ampproject.org/c/s/www.psychologytoday.com/intl/blog/positive-prescription/201703/why-we-love-talking-about-ourselves?amp"}],"httpStatus":200},{"url":"https://twitter.com/hinge","alts":[],"httpStatus":429},{"url":"https://medium.com/tinder-engineering","alts":[{"type":2,"url":"medium://tinder-engineering"},{"type":3,"url":"medium://tinder-engineering"}],"httpStatus":200},{"url":"https://twitter.com/Tinder","alts":[],"httpStatus":429},{"url":"https://www.facepixelizer.com/","alts":[],"httpStatus":200},{"url":"https://hinge.co/","alts":[],"httpStatus":200},{"url":"http://healthland.time.com/2012/05/08/why-we-overshare-the-brain-likes-it/","alts":[],"httpStatus":200},{"url":"https://www.scientificamerican.com/article/the-neuroscience-of-everybody-favorite-topic-themselves/","alts":[],"httpStatus":200},{"url":"https://www.oversixty.com.au/health/mind/why-people-love-talking-about-themselves","alts":[],"httpStatus":200}],"version":"0.3","generatedAt":1593069722921},"isLockedPreviewOnly":false,"metaDescription":"","totalClapCount":1350,"sectionCount":5,"readingList":0,"topics":[{"topicId":"55321ac40456","slug":"design","createdAt":1536181929758,"deletedAt":0,"image":{"id":"1*1aLu20aptPeUTDg_E8KtmA@2x.jpeg","originalWidth":6016,"originalHeight":4016},"name":"Design","description":"Below the surface.","relatedTopics":[],"visibility":1,"relatedTags":[],"relatedTopicIds":[],"seoTitle":"Design Articles and News — Medium","type":"Topic"},{"topicId":"617a1adb36d5","slug":"ux","createdAt":1540922382587,"deletedAt":0,"image":{"id":"1*X6jzEGtbMtOW4eoQJcDImQ@2x.jpeg","originalWidth":1920,"originalHeight":1275},"name":"UX","description":"All about that user.","relatedTopics":[],"visibility":1,"relatedTags":[],"relatedTopicIds":[],"seoTitle":"UX Articles and News — Medium","type":"Topic"}]},"coverless":true,"slug":"how-hinge-plays-with-your-emotions-to-get-you-a-match","translationSourcePostId":"","translationSourceCreatorId":"","isApprovedTranslation":false,"inResponseToPostId":"","inResponseToRemovedAt":0,"isTitleSynthesized":false,"allowResponses":true,"importedUrl":"","importedPublishedAt":0,"visibility":0,"uniqueSlug":"how-hinge-plays-with-your-emotions-to-get-you-a-match-1193c2bd79c4","previewContent":{"bodyModel":{"paragraphs":[{"name":"previewImage","type":4,"text":"","layout":10,"metadata":{"id":"1*nnz7_GKD14inkiRIeKlo5Q.jpeg","originalWidth":2768,"originalHeight":1848,"isFeatured":true}},{"name":"previewTitle","type":3,"text":"How Hinge plays with your emotions to get you a match","alignment":1},{"name":"previewSubtitle","type":13,"text":"Few months ago, I was on this dating app called…","alignment":1}],"sections":[{"startIndex":0}]},"isFullContent":false,"subtitle":"Few months ago, I was on this dating app called Hinge (you guessed it right — for the noble purpose of ‘research’). While navigating…"},"license":0,"inResponseToMediaResourceId":"","canonicalUrl":"","approvedHomeCollectionId":"138adf9c44c","isNewsletter":false,"newsletterId":"","webCanonicalUrl":"","mediumUrl":"","migrationId":"","notifyFollowers":true,"notifyTwitter":false,"notifyFacebook":false,"responseHiddenOnParentPostAt":0,"isSeries":false,"isSubscriptionLocked":false,"seriesLastAppendedAt":0,"audioVersionDurationSec":0,"sequenceId":"","isEligibleForRevenue":false,"isBlockedFromHightower":false,"deletedAt":0,"lockedPostSource":0,"hightowerMinimumGuaranteeStartsAt":0,"hightowerMinimumGuaranteeEndsAt":0,"featureLockRequestAcceptedAt":0,"mongerRequestType":1,"layerCake":3,"socialTitle":"","socialDek":"","editorialPreviewTitle":"","editorialPreviewDek":"","curationEligibleAt":1565770398790,"isProxyPost":false,"proxyPostFaviconUrl":"","proxyPostProviderName":"","proxyPostType":0,"isSuspended":false,"isLimitedState":false,"seoTitle":"","previewContent2":{"bodyModel":{"paragraphs":[{"name":"8464","type":3,"text":"How Hinge plays with your psychology to get you a match","markups":[]},{"name":"0164","type":4,"text":"Photo by Jodie DS","markups":[],"layout":1,"metadata":{"id":"1*nnz7_GKD14inkiRIeKlo5Q.jpeg","originalWidth":2768,"originalHeight":1848,"isFeatured":true}},{"name":"2f08","type":1,"text":"Few months ago, I was on this dating app called Hinge (you guessed it right — for the noble purpose of ‘research’). While navigating through Hinge, or rather while researching the app, I found some super smart UX flows that actually led me to engage more & more with Hinge.","markups":[{"type":3,"start":48,"end":53,"href":"https://hinge.co/","title":"","rel":"","anchorType":0},{"type":3,"start":141,"end":146,"anchorType":2,"userId":"e34355880fd7"},{"type":3,"start":267,"end":272,"href":"https://twitter.com/hinge","title":"","rel":"","anchorType":0}]},{"name":"08a2","type":1,"text":"…","markups":[]}],"sections":[{"name":"1147","startIndex":0}]},"isFullContent":false,"subtitle":"Few months ago, I was on this dating app called Hinge (you guessed it right — for the noble purpose of ‘research’). While navigating…"},"cardType":0,"isDistributionAlertDismissed":false,"isShortform":false,"shortformType":0,"responsesLocked":false,"isLockedResponse":false,"isPublishToEmail":false,"responseDistribution":0,"isMarkedPaywallOnly":false,"type":"Post"},"f4de45a04289":{"id":"f4de45a04289","versionId":"e6028b66a3ef","creatorId":"df202ed26a1c","homeCollectionId":"138adf9c44c","title":"Introducing Mercury OS","detectedLanguage":"en","latestVersion":"e6028b66a3ef","latestPublishedVersion":"e6028b66a3ef","hasUnpublishedEdits":false,"latestRev":6695,"createdAt":1558843971027,"updatedAt":1672262422258,"acceptedAt":0,"firstPublishedAt":1559065238868,"latestPublishedAt":1576297284173,"vote":false,"experimentalCss":"","displayAuthor":"","content":{"subtitle":"A speculative vision of the operating system, driven by humane design principles.","postDisplay":{"coverless":true}},"virtuals":{"statusForCollection":"APPROVED","allowNotes":true,"previewImage":{"imageId":"1*sxksghXlAI6HLtn1ZqREIg.png","filter":"","backgroundSize":"","originalWidth":2880,"originalHeight":1920,"strategy":"resample","height":0,"width":0},"wordCount":2500,"imageCount":25,"readingTime":11.433962264150944,"subtitle":"A speculative vision of the operating system, driven by humane design principles.","publishedInCount":1,"usersBySocialRecommends":[],"noIndex":false,"recommends":8964,"isBookmarked":false,"tags":[{"slug":"design","name":"Design","postCount":403790,"metadata":{"postCount":403790,"coverImage":{"id":"1*9HBxmCTAsK0_WHSzx6zZvw.jpeg"}},"type":"Tag"},{"slug":"ux","name":"UX","postCount":211455,"metadata":{"postCount":211455,"coverImage":{"id":"1*AvtDgMOmzDBIqKiUiHL40g.png","originalWidth":1024,"originalHeight":1024,"isFeatured":true}},"type":"Tag"},{"slug":"product-design","name":"Product Design","postCount":66498,"metadata":{"postCount":66498,"coverImage":{"id":"1*D8nIb4WQULZzcNpbNm39Lw.jpeg","originalWidth":6000,"originalHeight":4000,"isFeatured":true,"alt":"A woman throwing a soda into a trash can"}},"type":"Tag"},{"slug":"design-thinking","name":"Design Thinking","postCount":71927,"metadata":{"postCount":71927,"coverImage":{"id":"1*WCyLaCBnUhU1tbK7kjm7ng.png","originalWidth":1456,"originalHeight":816,"isFeatured":true}},"type":"Tag"},{"slug":"artificial-intelligence","name":"Artificial Intelligence","postCount":468846,"metadata":{"postCount":468846,"coverImage":{"id":"1*gAn_BSffVBcwCIR6bDgK1g.jpeg"}},"type":"Tag"}],"socialRecommendsCount":0,"responsesCreatedCount":235,"links":{"entries":[{"url":"mailto:me@jasonyuan.design","alts":[],"httpStatus":0},{"url":"https://www.instagram.com/jasonyuandesign/","alts":[],"httpStatus":200},{"url":"http://mercuryos.com","alts":[],"httpStatus":200},{"url":"http://www.jasonyuan.design","alts":[],"httpStatus":200},{"url":"https://marisa.lu","alts":[],"httpStatus":200},{"url":"https://link.medium.com/yEm1QOmHfX","alts":[],"httpStatus":200},{"url":"https://twitter.com/jasonyuandesign","alts":[{"type":2,"url":"twitter://user?screen_name=jasonyuandesign"},{"type":3,"url":"twitter://user?screen_name=jasonyuandesign"}],"httpStatus":200}],"version":"0.3","generatedAt":1576297284878},"isLockedPreviewOnly":false,"metaDescription":"","totalClapCount":69444,"sectionCount":9,"readingList":0,"topics":[{"topicId":"22d054b693da","slug":"visual-design","createdAt":1490119315338,"deletedAt":0,"image":{"id":"1*Su6vAh8QOnSkcOrlJAyLmw@2x.jpeg","originalWidth":5184,"originalHeight":3456},"name":"Visual Design","description":"More than just a pretty typeface.","relatedTopics":[],"visibility":1,"relatedTags":[],"relatedTopicIds":[],"seoTitle":"Visual Design: Articles and News — Medium","type":"Topic"},{"topicId":"55321ac40456","slug":"design","createdAt":1536181929758,"deletedAt":0,"image":{"id":"1*1aLu20aptPeUTDg_E8KtmA@2x.jpeg","originalWidth":6016,"originalHeight":4016},"name":"Design","description":"Below the surface.","relatedTopics":[],"visibility":1,"relatedTags":[],"relatedTopicIds":[],"seoTitle":"Design Articles and News — Medium","type":"Topic"},{"topicId":"617a1adb36d5","slug":"ux","createdAt":1540922382587,"deletedAt":0,"image":{"id":"1*X6jzEGtbMtOW4eoQJcDImQ@2x.jpeg","originalWidth":1920,"originalHeight":1275},"name":"UX","description":"All about that user.","relatedTopics":[],"visibility":1,"relatedTags":[],"relatedTopicIds":[],"seoTitle":"UX Articles and News — Medium","type":"Topic"}]},"coverless":true,"slug":"introducing-mercury-os","translationSourcePostId":"","translationSourceCreatorId":"","isApprovedTranslation":false,"inResponseToPostId":"","inResponseToRemovedAt":0,"isTitleSynthesized":false,"allowResponses":true,"importedUrl":"","importedPublishedAt":0,"visibility":0,"uniqueSlug":"introducing-mercury-os-f4de45a04289","previewContent":{"bodyModel":{"paragraphs":[{"name":"previewImage","type":4,"text":"","layout":10,"metadata":{"id":"1*sxksghXlAI6HLtn1ZqREIg.png","originalWidth":2880,"originalHeight":1920,"isFeatured":true}},{"name":"495b","type":3,"text":"Introducing Mercury OS","markups":[],"alignment":1},{"name":"8c49","type":13,"text":"A speculative vision of the operating system, driven by humane design…","markups":[],"alignment":1}],"sections":[{"startIndex":0}]},"isFullContent":false,"subtitle":"A speculative vision of the operating system, driven by humane design principles."},"license":0,"inResponseToMediaResourceId":"","canonicalUrl":"","approvedHomeCollectionId":"138adf9c44c","isNewsletter":false,"newsletterId":"","webCanonicalUrl":"","mediumUrl":"","migrationId":"","notifyFollowers":true,"notifyTwitter":false,"notifyFacebook":false,"responseHiddenOnParentPostAt":0,"isSeries":false,"isSubscriptionLocked":false,"seriesLastAppendedAt":0,"audioVersionDurationSec":0,"sequenceId":"","isEligibleForRevenue":false,"isBlockedFromHightower":false,"deletedAt":0,"lockedPostSource":0,"hightowerMinimumGuaranteeStartsAt":0,"hightowerMinimumGuaranteeEndsAt":0,"featureLockRequestAcceptedAt":0,"mongerRequestType":1,"layerCake":3,"socialTitle":"","socialDek":"","editorialPreviewTitle":"","editorialPreviewDek":"","curationEligibleAt":0,"primaryTopicId":"22d054b693da","isProxyPost":false,"proxyPostFaviconUrl":"","proxyPostProviderName":"","proxyPostType":0,"isSuspended":false,"isLimitedState":false,"seoTitle":"","previewContent2":{"bodyModel":{"paragraphs":[{"name":"495b","type":3,"text":"Introducing Mercury OS","markups":[]},{"name":"8c49","type":13,"text":"A speculative vision of the operating system, driven by humane design principles.","markups":[]},{"name":"7bc5","type":1,"text":"Nine months ago, I set out to invent a new way of interfacing with our devices, armed with only a single metaphor: Mercury.","markups":[{"type":1,"start":115,"end":122}]},{"name":"3d26","type":6,"text":"Mercury, the elemental manifestation of fluid chrome. \nMercury, the Roman deity bridging the boundary between two worlds. \nMercury, the nearest planet to the sun.","markups":[]},{"name":"cc3f","type":1,"text":"Although these versions…","markups":[{"type":2,"start":149,"end":154},{"type":2,"start":182,"end":187},{"type":2,"start":253,"end":283}]}],"sections":[{"name":"8f01","startIndex":0},{"name":"4e3c","startIndex":2}]},"isFullContent":false,"subtitle":"A speculative vision of the operating system, driven by humane design principles."},"cardType":0,"isDistributionAlertDismissed":false,"isShortform":false,"shortformType":0,"responsesLocked":false,"isLockedResponse":false,"isPublishToEmail":false,"responseDistribution":0,"isMarkedPaywallOnly":false,"type":"Post"}}},"paging":{},"collection":{"id":"138adf9c44c","name":"UX Collective","slug":"user-experience-design-1","tags":["UX","DESIGN","ARTIFICIAL INTELLIGENCE","TECHNOLOGY","PRODUCT"],"creatorId":"50e39baefa55","description":"We believe designers are thinkers as much as they are makers. Curated stories on UX, Visual & Product Design. https://linktr.ee/uxc","shortDescription":"We believe designers are thinkers as much as they are…","image":{"imageId":"1*mDhF9X4VO0rCrJvWFatyxg.png","filter":"","backgroundSize":"","originalWidth":180,"originalHeight":180,"strategy":"resample","height":0,"width":0},"metadata":{"followerCount":514280,"activeAt":1734564584114},"virtuals":{"permissions":{"canPublish":false,"canPublishAll":false,"canRepublish":false,"canRemove":false,"canManageAll":false,"canSubmit":false,"canEditPosts":false,"canAddWriters":false,"canViewStats":false,"canSendNewsletter":false,"canViewLockedPosts":false,"canViewCloaked":false,"canEditOwnPosts":false,"canBeAssignedAuthor":false,"canEnrollInHightower":false,"canLockPostsForMediumMembers":false,"canLockOwnPostsForMediumMembers":false,"canViewNewsletterV2Stats":false,"canCreateNewsletterV3":false},"isSubscribed":false,"isEnrolledInHightower":false,"isEligibleForHightower":false,"isSubscribedToCollectionEmails":false,"isMuted":false,"canToggleEmail":false,"isWriter":false},"logo":{"imageId":"1*9V9oqYyYnfP5yy7cb7YTMQ.png","filter":"","backgroundSize":"","originalWidth":612,"originalHeight":102,"strategy":"resample","height":0,"width":0},"twitterUsername":"uxdesigncc","publicEmail":"hello@uxdesign.cc","collectionMastheadId":"91711cb9ae5","domain":"uxdesign.cc","sections":[{"type":2,"collectionHeaderMetadata":{"title":"UX Collective","backgroundImage":{},"logoImage":{},"alignment":2,"layout":4}},{"type":1,"postListMetadata":{"source":4,"layout":5,"number":2,"postIds":[],"tagSlug":"UX"}},{"type":1,"postListMetadata":{"source":4,"layout":4,"number":6,"postIds":[],"tagSlug":"Editor Picks","sectionHeader":"Editor Picks"}},{"type":1,"postListMetadata":{"source":4,"layout":4,"number":6,"postIds":[],"tagSlug":"UX","sectionHeader":"Latest & Greatest"}},{"type":3,"promoMetadata":{"sectionHeader":"","promoId":"4e4f54ad93fd"}},{"type":1,"postListMetadata":{"source":3,"layout":4,"number":6,"postIds":["44b73c807081","c8b7b69f3295","c04cc4779d94","dafc08bd1d66","7c8dd466d753","a30025c0f432"],"sectionHeader":"Timeless Gems"}},{"type":1,"postListMetadata":{"source":4,"layout":4,"number":18,"postIds":[],"tagSlug":"UX","sectionHeader":"New & Noteworthy"}},{"type":3,"promoMetadata":{"sectionHeader":"","promoId":"4451d5a856e4"}},{"type":1,"postListMetadata":{"source":2,"layout":4,"number":3,"postIds":[],"sectionHeader":"Trending"}},{"type":1,"postListMetadata":{"source":3,"layout":7,"number":7,"postIds":["930a2af62ad","80ebab8f3407","7f763b81bf0e","cf93e2d0fd7e","432a38eac295","d4505dc20a92","269ec91d7d7"]}},{"type":1,"postListMetadata":{"source":3,"layout":4,"number":1,"postIds":["eb05f271c19d"]}},{"type":1,"postListMetadata":{"source":3,"layout":4,"number":6,"postIds":["5dc9778ae655","8087780cb1a6","e033d97e5f13","21e307a2c327","73e9413c1b14","1aca266b333e"]}},{"type":1,"postListMetadata":{"source":4,"layout":5,"number":25,"postIds":[],"tagSlug":"UX"}},{"type":1,"postListMetadata":{"source":4,"layout":5,"number":25,"postIds":[],"tagSlug":"UX"}}],"tintColor":"#FF000000","lightText":true,"favicon":{"imageId":"1*dn6MbbIIlwobt0jnUcrt_Q.png","filter":"","backgroundSize":"","originalWidth":256,"originalHeight":256,"strategy":"resample","height":0,"width":0},"colorPalette":{"defaultBackgroundSpectrum":{"colorPoints":[{"color":"#FF868484","point":0},{"color":"#FF7C7B7A","point":0.1},{"color":"#FF737171","point":0.2},{"color":"#FF696867","point":0.3},{"color":"#FF5F5E5E","point":0.4},{"color":"#FF555454","point":0.5},{"color":"#FF4A4949","point":0.6},{"color":"#FF3F3E3E","point":0.7},{"color":"#FF343333","point":0.8},{"color":"#FF272727","point":0.9},{"color":"#FF1A1A1A","point":1}],"backgroundColor":"#FFFFFFFF"},"tintBackgroundSpectrum":{"colorPoints":[{"color":"#FF000000","point":0},{"color":"#FF1E1D1D","point":0.1},{"color":"#FF3C3B3B","point":0.2},{"color":"#FF565555","point":0.3},{"color":"#FF6F6D6D","point":0.4},{"color":"#FF868484","point":0.5},{"color":"#FF9C9A99","point":0.6},{"color":"#FFB1AEAE","point":0.7},{"color":"#FFC5C3C2","point":0.8},{"color":"#FFD9D6D6","point":0.9},{"color":"#FFECE9E9","point":1}],"backgroundColor":"#FF000000"},"highlightSpectrum":{"colorPoints":[{"color":"#FFF5F2F1","point":0},{"color":"#FFF3F0EF","point":0.1},{"color":"#FFF1EEED","point":0.2},{"color":"#FFEFECEC","point":0.3},{"color":"#FFEDEAEA","point":0.4},{"color":"#FFEBE8E8","point":0.5},{"color":"#FFE9E6E6","point":0.6},{"color":"#FFE7E5E4","point":0.7},{"color":"#FFE5E3E2","point":0.8},{"color":"#FFE4E1E0","point":0.9},{"color":"#FFE2DFDE","point":1}],"backgroundColor":"#FFFFFFFF"},"darkBackgroundSpectrum":{"colorPoints":[{"color":"#FF9E9C9C","point":0},{"color":"#FFA7A5A4","point":0.1},{"color":"#FFAFADAD","point":0.2},{"color":"#FFB8B5B5","point":0.3},{"color":"#FFC0BEBD","point":0.4},{"color":"#FFC8C6C5","point":0.5},{"color":"#FFD1CECD","point":0.6},{"color":"#FFD9D6D5","point":0.7},{"color":"#FFE1DEDD","point":0.8},{"color":"#FFE9E6E5","point":0.9},{"color":"#FFF1EEED","point":1}],"backgroundColor":"#FF000000"}},"navItems":[{"type":1,"title":"Editor Picks","tagSlug":"editor-picks","url":"https://uxdesign.cc/tagged/editor-picks","source":"tagSlug"},{"type":6,"title":"About","url":"https://uxdesign.cc/about"},{"type":4,"title":"Publish a Story","url":"https://uxdesign.cc/publish/home","topicId":"280a7723865c","source":"topicId"},{"type":3,"title":"Receive our Newsletter","url":"http://newsletter.uxdesign.cc/"}],"colorBehavior":2,"googleAnalyticsId":"UA-41116679-1","collectionFeatures":[30,27,25],"ampLogo":{"imageId":"","filter":"","backgroundSize":"","originalWidth":0,"originalHeight":0,"strategy":"resample","height":0,"width":0},"header":{"title":"UX Collective","backgroundImage":{},"logoImage":{},"alignment":2,"layout":4},"subscriberCount":514280,"tagline":"We believe designers are thinkers as much as they are makers.","instagramUsername":"doc.cc_","isOptedIntoAurora":false,"newsletterV3":{"newsletterV3Id":"5fb308046049","type":1,"name":"The UX Collective Newsletter","description":"A weekly resourceful newsletter that helps designers stay in the know, be productive, and think more critically about their work.","collectionId":"138adf9c44c","newsletterSlug":"the-ux-collective-newsletter","isSubscribed":false,"showPromo":true,"avatarImageId":"1*-G-bB63PVXw4WIIPxPibtw.png","creatorId":"50e39baefa55","showNewsletterPostsInCollectionHome":false,"exportableSubscribersCount":23832,"subscribersCount":80826,"promoHeadline":"","promoBody":"","replyToEmail":""},"isCurationAllowedByDefault":false,"polarisCoverImage":{"imageId":"1*4qZD3VhzQ5SKG8yGpCMiUQ.png","filter":"","backgroundSize":"","originalWidth":1080,"originalHeight":240,"strategy":"resample","height":0,"width":0},"ptsQualifiedAt":1616092952635,"type":"Collection"},"masthead":{"collectionMastheadId":"91711cb9ae5","editorsNote":"The UX Collective (ISSN: 2766-5267) is an independent design publication and blog built to help designers think more critically about their work. Curated stories on user experience (UX), visual, and product design. The polar bear is a reference to \"Information Architecture for the Web and Beyond\", one of the most famous books in UX. Email: hello@uxdesign.cc","staff":[{"userId":"50e39baefa55","excluded":false,"title":"EDITOR & Founder","isEditor":true,"type":"CollectionMastheadUserItem"},{"userId":"27353c0f540b","excluded":false,"title":"EDITOR & FOUNDER","isEditor":true,"type":"CollectionMastheadUserItem"},{"userId":"18d3164779c","excluded":false,"type":"CollectionMastheadUserItem"},{"userId":"13b67d1162f3","excluded":false,"type":"CollectionMastheadUserItem"},{"userId":"1e26deede653","excluded":false,"type":"CollectionMastheadUserItem"},{"userId":"2077d81eb28f","excluded":false,"type":"CollectionMastheadUserItem"},{"userId":"214231bb14b1","excluded":false,"type":"CollectionMastheadUserItem"},{"userId":"12c412a5bf7b","excluded":false,"type":"CollectionMastheadUserItem"},{"userId":"19c0e9da162f","excluded":false,"type":"CollectionMastheadUserItem"},{"userId":"148dd7b26206","excluded":false,"type":"CollectionMastheadUserItem"},{"userId":"296f38d72186","excluded":false,"type":"CollectionMastheadUserItem"},{"userId":"1eeac15c31ac","excluded":false,"type":"CollectionMastheadUserItem"},{"userId":"117fc188f037","excluded":false,"type":"CollectionMastheadUserItem"},{"userId":"29638f4e79d0","excluded":false,"type":"CollectionMastheadUserItem"},{"userId":"1a1bb25f9998","excluded":false,"type":"CollectionMastheadUserItem"},{"userId":"2365891b52a9","excluded":false,"type":"CollectionMastheadUserItem"},{"userId":"1b4ce8d08db0","excluded":false,"type":"CollectionMastheadUserItem"},{"userId":"18841d27f5e9","excluded":false,"type":"CollectionMastheadUserItem"},{"userId":"15d824a869b1","excluded":false,"type":"CollectionMastheadUserItem"},{"userId":"1ba4a202207f","excluded":false,"type":"CollectionMastheadUserItem"},{"userId":"25977829f22e","excluded":false,"type":"CollectionMastheadUserItem"},{"userId":"167bd37b63d7","excluded":false,"type":"CollectionMastheadUserItem"},{"userId":"1f7df5f02e8b","excluded":false,"type":"CollectionMastheadUserItem"},{"userId":"1713555e580d","excluded":false,"type":"CollectionMastheadUserItem"}],"type":"CollectionMasthead"},"archiveIndex":{"timeBucket":{"year":"","month":"","day":"","hasStories":false},"yearlyBuckets":[{"year":"2013","month":"","day":"","hasStories":true},{"year":"2014","month":"","day":"","hasStories":true},{"year":"2015","month":"","day":"","hasStories":true},{"year":"2016","month":"","day":"","hasStories":true},{"year":"2017","month":"","day":"","hasStories":true},{"year":"2018","month":"","day":"","hasStories":true},{"year":"2019","month":"","day":"","hasStories":true},{"year":"2020","month":"","day":"","hasStories":true},{"year":"2021","month":"","day":"","hasStories":true},{"year":"2022","month":"","day":"","hasStories":true},{"year":"2023","month":"","day":"","hasStories":true},{"year":"2024","month":"","day":"","hasStories":true}],"monthlyBuckets":[],"dailyBuckets":[]},"tags":[{"slug":"artificial-intelligence","name":"Artificial Intelligence","postCount":468846,"metadata":{"postCount":468846,"coverImage":{"id":"1*gAn_BSffVBcwCIR6bDgK1g.jpeg"}},"type":"Tag"},{"slug":"design-thinking","name":"Design Thinking","postCount":71927,"metadata":{"postCount":71927,"coverImage":{"id":"1*WCyLaCBnUhU1tbK7kjm7ng.png","originalWidth":1456,"originalHeight":816,"isFeatured":true}},"type":"Tag"},{"slug":"product-design","name":"Product Design","postCount":66498,"metadata":{"postCount":66498,"coverImage":{"id":"1*D8nIb4WQULZzcNpbNm39Lw.jpeg","originalWidth":6000,"originalHeight":4000,"isFeatured":true,"alt":"A woman throwing a soda into a trash can"}},"type":"Tag"},{"slug":"ux","name":"UX","postCount":211455,"metadata":{"postCount":211455,"coverImage":{"id":"1*AvtDgMOmzDBIqKiUiHL40g.png","originalWidth":1024,"originalHeight":1024,"isFeatured":true}},"type":"Tag"},{"slug":"design","name":"Design","postCount":403790,"metadata":{"postCount":403790,"coverImage":{"id":"1*9HBxmCTAsK0_WHSzx6zZvw.jpeg"}},"type":"Tag"},{"slug":"user-experience","name":"User Experience","postCount":72156,"metadata":{"postCount":72156,"coverImage":{"id":"0*2wlSW32Cz5O-_FZg","originalWidth":5347,"originalHeight":3558}},"type":"Tag"},{"slug":"design-thinking","name":"Design Thinking","postCount":71927,"metadata":{"postCount":71927,"coverImage":{"id":"1*WCyLaCBnUhU1tbK7kjm7ng.png","originalWidth":1456,"originalHeight":816,"isFeatured":true}},"type":"Tag"},{"slug":"design","name":"Design","postCount":403790,"metadata":{"postCount":403790,"coverImage":{"id":"1*9HBxmCTAsK0_WHSzx6zZvw.jpeg"}},"type":"Tag"},{"slug":"ui","name":"UI","postCount":66244,"metadata":{"postCount":66244,"coverImage":{"id":"1*5bEcogL476RNW032ke4mrw.png","originalWidth":2120,"originalHeight":1192,"isFeatured":true,"alt":"An pro photo of woman with some street art being edited on Pixelmator."}},"type":"Tag"},{"slug":"ux","name":"UX","postCount":211455,"metadata":{"postCount":211455,"coverImage":{"id":"1*AvtDgMOmzDBIqKiUiHL40g.png","originalWidth":1024,"originalHeight":1024,"isFeatured":true}},"type":"Tag"}],"streamItems":[{"createdAt":1734578762885,"postPreview":{"postId":"60713dc86950"},"randomId":"86f0336ca6e1","itemType":"postPreview","type":"StreamItem"},{"createdAt":1734578762885,"postPreview":{"postId":"10bd98614fa9"},"randomId":"78c5869a1276","itemType":"postPreview","type":"StreamItem"},{"createdAt":1734578762885,"postPreview":{"postId":"b47cef3bf3a6"},"randomId":"cef857cdbf4f","itemType":"postPreview","type":"StreamItem"},{"createdAt":1734578762885,"postPreview":{"postId":"970de4c16e01"},"randomId":"56354106b107","itemType":"postPreview","type":"StreamItem"},{"createdAt":1734578762885,"postPreview":{"postId":"54b109851969"},"randomId":"d6b2cbedc2a4","itemType":"postPreview","type":"StreamItem"},{"createdAt":1734578762885,"postPreview":{"postId":"490a3760533"},"randomId":"8f373e0081d1","itemType":"postPreview","type":"StreamItem"},{"createdAt":1734578762885,"postPreview":{"postId":"7329ed9d6112"},"randomId":"ea206520e2f4","itemType":"postPreview","type":"StreamItem"},{"createdAt":1734578762885,"postPreview":{"postId":"6ecbe9ec38b7"},"randomId":"954b0030c8dd","itemType":"postPreview","type":"StreamItem"},{"createdAt":1734578762885,"postPreview":{"postId":"1193c2bd79c4"},"randomId":"627e95f125c6","itemType":"postPreview","type":"StreamItem"},{"createdAt":1734578762885,"postPreview":{"postId":"f4de45a04289"},"randomId":"059d72c6b7e8","itemType":"postPreview","type":"StreamItem"}]}) // ]]></script><script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'8f4449f1edb3a08a',t:'MTczNDU3ODc2My4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body></html>