Design Tools Are Running Out of Track

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Design Tools Are Running Out of Track | Big Medium</title> <meta name="description" content="Our design tools are fundamentally disconnected from the realities and constraints of working software—which means that designers are, too." /> <meta name="author" content="Josh Clark" /> <meta name="copyright" content="Copyright Big Medium, 2024" /> <link rel="canonical" href="https://bigmedium.com/ideas/links/design-tools-are-running-out-of-track.html" /> <meta name="robots" content="index,follow" /> <link rel="icon" href="https://bigmedium.com/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="https://bigmedium.com/favicon.ico" type="image/x-icon" /> <link rel="alternate" type="application/rss+xml" href="https://bigmedium.com/bm.feed.xml" title="Big Medium - Full Feed" /> <link rel="stylesheet" href="https://bigmedium.com/bm.styles.css" type="text/css" /> <style type="text/css"> div.bma_page1566 { display: none } </style> <link rel="home" title="Home" href="https://bigmedium.com/" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@bigmediumjosh" /> <meta name="twitter:url" property="og:url" content="https://bigmedium.com/ideas/links/design-tools-are-running-out-of-track.html" /> <meta name="twitter:title" property="og:title" content="Design Tools Are Running Out of Track | Big Medium" /> <meta name="twitter:description" property="og:description" content="Our design tools are fundamentally disconnected from the realities and constraints of working software—which means that designers are, too." /> <meta name="twitter:image" property="og:image" content="https://bigmedium.com/bm.pix/design-tools.orig-1000.png" /> <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"> <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/favicon-194x194.png" sizes="194x194"> <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96"> <link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192"> <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"> <link rel="manifest" href="/manifest.json"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"> <meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileImage" content="/mstile-144x144.png"> <meta name="theme-color" content="#ffffff"> <link rel="stylesheet" href="/styles.css?cache" type="text/css" /> <meta property="og:site_name" content="Big Medium" /> <script> /*! grunt-grunticon Stylesheet Loader - v2.1.2 | https://github.com/filamentgroup/grunticon | (c) 2015 Scott Jehl, Filament Group, Inc. | MIT license. */ (function(e){function t(t,n,r,o){"use strict";function a(){for(var e,n=0;u.length>n;n++)u[n].href&&u[n].href.indexOf(t)>-1&&(e=!0);e?i.media=r||"all":setTimeout(a)}var i=e.document.createElement("link"),l=n||e.document.getElementsByTagName("script")[0],u=e.document.styleSheets;return i.rel="stylesheet",i.href=t,i.media="only x",i.onload=o||null,l.parentNode.insertBefore(i,l),a(),i}var n=function(r,o){"use strict";if(r&&3===r.length){var a=e.navigator,i=e.Image,l=!(!document.createElementNS||!document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect||!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1")||e.opera&&-1===a.userAgent.indexOf("Chrome")||-1!==a.userAgent.indexOf("Series40")),u=new i;u.onerror=function(){n.method="png",n.href=r[2],t(r[2])},u.onload=function(){var e=1===u.width&&1===u.height,a=r[e&&l?0:e?1:2];n.method=e&&l?"svg":e?"datapng":"png",n.href=a,t(a,null,null,o)},u.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==",document.documentElement.className+=" grunticon"}};n.loadCSS=t,e.grunticon=n})(this);(function(e,t){"use strict";var n=t.document,r="grunticon:",o=function(e){if(n.attachEvent?"complete"===n.readyState:"loading"!==n.readyState)e();else{var t=!1;n.addEventListener("readystatechange",function(){t||(t=!0,e())},!1)}},a=function(e){return t.document.querySelector('link[href$="'+e+'"]')},c=function(e){var t,n,o,a,c,i,u={};if(t=e.sheet,!t)return u;n=t.cssRules?t.cssRules:t.rules;for(var l=0;n.length>l;l++)o=n[l].cssText,a=r+n[l].selectorText,c=o.split(");")[0].match(/US\-ASCII\,([^"']+)/),c&&c[1]&&(i=decodeURIComponent(c[1]),u[a]=i);return u},i=function(e){var t,o,a;o="data-grunticon-embed";for(var c in e)if(a=c.slice(r.length),t=n.querySelectorAll(a+"["+o+"]"),t.length)for(var i=0;t.length>i;i++)t[i].innerHTML=e[c],t[i].style.backgroundImage="none",t[i].removeAttribute(o);return t},u=function(t){"svg"===e.method&&o(function(){i(c(a(e.href))),"function"==typeof t&&t()})};e.embedIcons=i,e.getCSS=a,e.getIcons=c,e.ready=o,e.svgLoadedCallback=u,e.embedSVG=u})(grunticon,this); grunticon(["/grunticon-v2/icons.data.svg.css", "/grunticon-v2/icons.data.png.css", "/grunticon-v2/icons.fallback.css"]); </script> <noscript><link href="/grunticon-v2/icons.fallback.css" rel="stylesheet"></noscript> <script src="/js/picturefill-min.js" async></script>  <script type="text/javascript"> var _paq = _paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="//bigmedium.com/bigstats/"; _paq.push(['setTrackerUrl', u+'piwik.php']); _paq.push(['setSiteId', '1']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s); })(); </script>  </head>  <body id="Page-design-tools-are-running-out-of-track" class="bmt_page bmt_page-links bmslug-links"> <header id="bm-top" class="header toolbar"> <div class="lc"> <a href="https://bigmedium.com/" class="logo"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 830 147" role="img" aria-label="Big Medium" preserveAspectRatio="xMaxYMax meet"><title>Big Medium</title><desc>Big Medium logo</desc><defs><symbol id="bmlogo"><g fill="#000" fill-rule="evenodd"><path id="bmlogo-arrow" d="M56 9.94V0h32v30h-9.94V17.394L62.456 33 55 25.545 70.606 9.94"/><path class="bmlogo" d="M0 0v116h88V40H46V0H0zm36 10H10v96h68V50H36V10zM144 0h-10v95l-1 21h8l2-10c3.874 6.617 10.956 12 23 12 20.618 0 29-17.023 29-38v-4c0-21.292-8.382-38.316-29-38-11.033-.316-17.97 4.34-22 10V0zm0 59c3.064-5.16 9.046-12 20-12 14.142 0 21 11.352 21 29v4c0 17.648-6.858 29-21 29-10.954 0-16.936-6.84-20-12V59zm69 57h10V39h-10v77zM224 8h-13v13h13V8zm68 109c.016 13.62-5.33 21.158-20 21-14.38.158-19.872-7.09-20-22h-10v2c.445 16.1 7.96 29 30 29 21.895 0 30.133-12.61 30-30V61l1-21h-8l-2 10c-3.874-6.637-10.956-12-23-12-20.473 0-29 16.38-29 36v3c0 19.414 8.527 35.503 29 36 11.033-.497 17.825-4.846 22-11v15zm0-58v32c-3.2 5.216-9.014 12-20 12-14.02 0-21-10.392-21-26v-4c0-15.32 6.98-26 21-26 10.986 0 16.8 6.784 20 12zm156 58V61c0-14.677-7.67-23-21-23-12.868 0-20.54 5.84-25 13-2.487-8.473-9.29-13-19-13-12.434 0-19.96 5.55-24 12l-2-10h-8l1 22v55h10V59c3.184-5.083 8.395-11.8 19-12 8.79.2 14.868 3.558 15 15v55h10V59c3.184-5.083 8.395-11.8 19-12 8.79.2 14.868 3.558 15 15v55h10zm81-35v-6c0-20.9-9.765-38-32-38-22.944 0-33 17.1-33 38v4c0 20.9 10.056 38 33 38 22.09 0 32-13.768 32-26h-10c.235 8.03-6.177 17.45-22 17-15.074.45-22.215-9.986-23-27h55zm-33-36c14.618 0 21.42 10.484 22 27h-44c.434-16.516 7.526-27 22-27zm76-8c-20.618-.316-29 16.708-29 38v4c0 20.977 8.382 38 29 38 11.9 0 19.126-5.383 23-12l1 10h9l-1-21V0h-10v48c-4.175-5.66-10.967-10.316-22-10zm3 71c-14.167 0-21-11.352-21-29v-4c0-17.648 6.833-29 21-29 10.84 0 16.8 6.84 20 12v38c-3.2 5.16-9.16 12-20 12zm50 7h10V39h-10v77zM636 8h-13v13h13V8zm18 31v54c0 14.632 7.973 25 23 25 13.386 0 21.65-5.55 26-12l2 10h8l-1-22V39h-10v58c-3.206 4.937-9.15 11.8-21 12-10.474-.2-16.998-5.603-17-17V39h-10zm176 78V61c0-14.677-7.67-23-21-23-12.868 0-20.54 5.84-25 13-2.487-8.473-9.29-13-19-13-12.434 0-19.96 5.55-24 12l-2-10h-8l1 22v55h10V59c3.184-5.083 8.395-11.8 19-12 8.79.2 14.868 3.558 15 15v55h10V59c3.184-5.083 8.395-11.8 19-12 8.79.2 14.868 3.558 15 15v55h10z"/></g></symbol></defs><use xlink:href="#bmlogo"></use></svg> </a> <nav class="bmw_navigation bmn_hnav" role="navigation"> <div class="bmn_skipnav"><a href="#bm-skipnavtop">Skip Navigation</a></div> <ul> <li class="bmn_sec-ideas bmn_active"><a title="" href="https://bigmedium.com/ideas/">Ideas</a></li> <li class="bmn_sec-projects"><a title="" href="https://bigmedium.com/projects/">Projects</a></li> <li class="bmn_sec-speaking"><a title="" href="https://bigmedium.com/speaking/">Talks</a></li> <li class="bmn_sec-about"><a title="" href="https://bigmedium.com/about/">About</a></li> <li class="bmn_sec-hire"><a title="" href="https://bigmedium.com/hire/">Hire Us</a></li> </ul> <span class="bmn_clearNav" id="bm-skipnavtop"> </span> </nav> <div class="powertools"> <a href="#" class="icon icon-microphone icon-utility" title="speech commands" id="toggleSpeech">Speak</a> <a href="#" id="toggleSearch" class="icon icon-search icon-utility" title="search">Search</a> <a href="#nav" id="toggleMenu" class="icon icon-menu icon-utility" title="menu">Menu</a>  <form action="https://bigmedium.com/cgi-bin/moxiebin/bm-search.cgi/q/3" method="get" class="bmw_search" enctype="multipart/form-data" accept-charset="utf-8"><div> <input type="search" name="bmq" placeholder="Search" value="" /> <button type="submit" class="icon icon-search icon-utility">Search</button> <input type="hidden" name="bms" value="3" /> </div></form>  </div> </div> </header> <main role="main"> <article class="article"> <header class="page-header"> <div class="page-icon"> <div class="lc"> <svg width="187" height="187" viewBox="0 0 187 187" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMaxYMax meet" role="img" aria-label="link"><title>link</title><g fill-rule="nonzero" fill="#FFF"><path d="M43.453 186.973c-11.516-.008-22.56-4.583-30.7-12.73C4.614 166.098.038 155.056.03 143.542c-.007-11.513 4.56-22.562 12.694-30.71l39.488-39.51c8.134-8.162 19.2-12.745 30.73-12.723 8.3 0 16.434 2.38 23.432 6.86 2.64 1.68 5.085 3.644 7.297 5.862 2.51 2.523 3.828 6.008 3.595 9.564-.21 2.975-1.492 5.77-3.594 7.878-4.902 4.612-12.548 4.612-17.444 0-7.275-7.26-19.052-7.26-26.32 0L30.263 130.37c-7.275 7.273-7.275 19.07 0 26.344 7.275 7.273 19.074 7.274 26.35 0l23.43-23.466h.01c.88-.888 2.217-1.157 3.38-.677 6.31 2.562 13.053 3.87 19.862 3.85h1.244c1.258-.008 2.4.748 2.888 1.912.48 1.164.21 2.502-.684 3.39l-32.59 32.587c-8.135 8.145-19.186 12.7-30.7 12.662z"/><path d="M103.485 127.11h-2.364.008c-1.55-.066-3.092-.21-4.627-.437-1.272-.218-2.516-.465-3.753-.778l-1.833-.495c-.655-.19-1.33-.4-1.986-.654-.655-.248-1.332-.466-1.986-.742-.655-.277-1.302-.53-1.957-.837-4.62-2.145-8.825-5.084-12.42-8.692-2.51-2.524-3.825-6-3.592-9.558.196-2.997 1.476-5.82 3.593-7.943 4.904-4.61 12.55-4.61 17.446 0 7.274 7.26 19.052 7.26 26.32 0l10.178-10.118.247-.276 29.115-29.08.007-.008c7.274-7.274 7.274-19.072 0-26.345-7.276-7.273-19.075-7.274-26.35 0L106.156 54.49c-.888.886-2.22 1.155-3.383.675-6.293-2.568-13.037-3.89-19.83-3.877h-1.15c-1.273.022-2.423-.727-2.917-1.89-.502-1.165-.248-2.518.647-3.412l32.562-32.53C123.063 2.48 139.067-1.803 154.06 2.212c14.995 4.016 26.715 15.734 30.73 30.726 4.016 14.99-.27 30.995-11.247 41.97l-39.518 39.512c-5.558 5.557-12.52 9.5-20.143 11.42h-.342l-1.797.37-.997.19-2.138.313h-1.055c-.808 0-1.52.153-2.204.19l-1.865.21z"/></g></svg> </div> </div> <div class="lc"> <a href="https://bigmedium.com/ideas/links/" class="kicker">What We’re Reading</a>  <h1 class="bmw_headline">Design Tools Are Running Out of Track</h1>   <h2 class="bmw_byline">By <a href="https://bigmedium.com/about/josh-clark.html" class="bmc_byline">Josh Clark</a> <br /> <span class="bmc_bylineTitle">Principal, Big Medium</span> </h2>   <span class="bmw_pubdate">Published Oct 14, 2018</span>  </div> </header> <div class="lc maincontent"> <section class="bodycontent">  <div class="bmw_pageContent"> <figure class="media-right bmc_image"> <a href="https://bigmedium.com/bm.pix/design-tools.png" rel="bm_lightbox" title="" target="_blank"><img src="https://bigmedium.com/bm.pix/design-tools.orig-250.png" alt="Frustrating design tools" srcset="https://bigmedium.com/bm.pix/design-tools.orig-2000.png 2000w, https://bigmedium.com/bm.pix/design-tools.orig-1000.png 1000w, https://bigmedium.com/bm.pix/design-tools.orig-500.png 500w, https://bigmedium.com/bm.pix/design-tools.orig-250.png 250w" sizes="(min-width: 1100px) 690px, (min-width: 830px) 501px, (min-width: 640px) 380px, 100vw" title="Click to enlarge" /></a> </figure> <p>About a year ago, <a href="https://www.colmtuite.com">Colm Tuite</a> reviewed the state of UI design tools and found them wanting: <a href="https://medium.freecodecamp.org/design-tools-are-running-out-of-track-94f21b6ae939">Design Tools Are Running Out of Track</a>. If anything, his critique feels even more relevant a year later. Our most popular design tools are fundamentally disconnected from the realities and constraints of working software:</p> <ul> <li>They generate static images in an era of voice, video, motion, and complex interactions. (“Our design tools should manipulate the <em>actual product</em>, not a picture of it.”)</li> <li>They have no awareness of the layout conventions of the web, so they don’t help designers work with the grain of CSS grid and flexbox.</li> <li>They’re tuned for infinite flexibility instead of usefully embracing the constraints of a design system or code base.</li> </ul> <p>As I’ve worked with more and more companies struggling to design at scale, this last point has proven to be especially troublesome when maintaining or evolving existing software. Most design tools are not well tuned to support designer-developer collaboration within design systems (though some are beginning to innovate here). Tuite writes:</p> <blockquote> <p>Your design tool is never going to tell you that you can’t do something. It’s never going to pull you up for using an off-brand color. It’s never going to prevent you from using a whitespace value which doesn’t belong in your spacing scale. It’s never going to warn you that 20% of the population literally cannot see that light gray text you’ve just designed.</p> <p>And why not…? Because design tools don’t care.</p> <p>Design tools are so waywardly enamoured with a vision for unlimited creativity that they have lost sight of what it means to design sensibly, to design inclusively, to design systematically.</p> <p>Put simply, design tools allow us to do whatever the hell we want. To some extent, this level of boundless creativity is useful, especially in the ideation phases. As UI designers though, the majority of our workflow doesn’t call for much creativity. Rather, our workflow calls for reuse, repetition, familiarity and standardisation; needs that our tools do little to satisfy.</p> </blockquote> <p>Developer culture and workflow have a strong bias toward consistency and reuse. That’s less true of design, and the tools are part of the problem. When there are no guardrails, it’s easy to wander off the road. Our systems don’t help us stay the path within established design systems.</p> <p>This causes a disconnect between designers and developers because design comps drift from the realities of the established patterns in the code base. A Sketch library—or any collected drawings of software—can be a canonical UI reference only when the design is first conceived. Once the design gets into code, the product itself should be the reference, and fresh design should work on top of that foundation. It’s more important that our design libraries reflect what’s in the code than the reverse. Production code—and the UI it generates—has to be the single source of truth, or madness ensues.</p> <p>That doesn’t mean that developers exclusively run the show or that we as designers have no agency in the design system. We can and should offer changes to the design and interaction of established patterns. But we also have to respect the norms that we’ve already helped to establish, and our tools should, too.</p> <p>That’s the promise of design-token systems like InVision’s Design System Manager. Tokens help to establish baseline palettes and styles across code and design tools. The system gets embedded in whatever environment where designers or developers prefer to work. Designers and developers alike can edit those rules at the source—within the system itself.</p> <p>This approach is a step forward in helping designers and developers stay in sync by contributing to the same environment: the actual product and the pattern library that feeds it. We’ve seen a lot of success helping client teams to make this transition, but it requires adopting a (sometimes challenging) new perspective on how to work—and where design authority lies. Big rewards come with that change in worldview.</p> <p><em>Is your organization wrestling with inconsistent interfaces and duplicative design work? Big Medium helps companies scale great design and improve collaboration through design systems. <a href="https://bigmedium.com/hire/">Get in touch</a> for a workshop, executive session, or design engagement.</em></p> <div class="bmc_external_link"> <a href="https://medium.freecodecamp.org/design-tools-are-running-out-of-track-94f21b6ae939" class="btn btn--next"> freeCodeCamp | Design Tools Are Running Out of Track </a> </div> </div>   </section> <section class="moreinfo">  <h3>Read more about...</h3> <ul class="bmw_tags"> <li><a href="https://bigmedium.com/bm.tags/design-system/">design system</a></li> <li><a href="https://bigmedium.com/bm.tags/collaboration/" rel="tag">collaboration</a></li> <li><a href="https://bigmedium.com/bm.tags/design/" rel="tag">design</a></li> <li><a href="https://bigmedium.com/bm.tags/process/" rel="tag">process</a></li> <li><a href="https://bigmedium.com/bm.tags/software/" rel="tag">software</a></li> </ul>  </section> </div> </article> </main> <section class="touts"> <div class="lc u--zero-pad"> <div class="standard-margin touts-3up"> <h2><a href="/ideas/" class="kicker kicker--invert">Ideas</a></h2>  <div class="tout-links tout-links--latest tout-links--sec-ideas"> <div class="bmw_link bma_page1685"> <div class="bma_mediatop"> <a href="https://bigmedium.com/ideas/workshop-sentient-design-ai-experiences.html" class="bma_thumb"><img src="https://bigmedium.com/bm.pix/sentent-design-workshop.4x3-250.png" class="bma_thumb" alt="Four devices lighting up with Sentient Design and machine intelligence" srcset="https://bigmedium.com/bm.pix/sentent-design-workshop.4x3-2000.png 1200w, https://bigmedium.com/bm.pix/sentent-design-workshop.4x3-1000.png 1000w, https://bigmedium.com/bm.pix/sentent-design-workshop.4x3-500.png 500w, https://bigmedium.com/bm.pix/sentent-design-workshop.4x3-250.png 250w" sizes="(min-width: 1050px) 449px, 50vw" /></a> </div> <div class="bma_body"> <div class="bma_body-wrap"> <a href="https://bigmedium.com/bm.tags/events-workshops/" class="kicker kicker--tout kicker--invert">events & workshops</a> <h3 class="bma_head"><a href="https://bigmedium.com/ideas/workshop-sentient-design-ai-experiences.html" title="Workshop: Craft AI-Powered Experiences with Sentient Design" rel="bookmark">Workshop: Craft AI-Powered Experiences with Sentient Design</a></h3> <div class="bma_desc">Reserve a private workshop to teach your product and design teams to imagine, design, and deliver AI-powered features and products.</div> </div> </div> </div> <div class="bmw_link bma_page1698"> <div class="bma_mediatop"> <a href="https://bigmedium.com/ideas/design-system-governance-bugs-design-discrepancies.html" class="bma_thumb"><img src="https://bigmedium.com/bm.pix/governance.4x3-250.png" class="bma_thumb" alt="Point" srcset="https://bigmedium.com/bm.pix/governance.4x3-2000.png 1066w, https://bigmedium.com/bm.pix/governance.4x3-1000.png 1000w, https://bigmedium.com/bm.pix/governance.4x3-500.png 500w, https://bigmedium.com/bm.pix/governance.4x3-250.png 250w" sizes="(min-width: 1050px) 449px, 50vw" /></a> </div> <div class="bma_body"> <div class="bma_body-wrap"> <a href="https://bigmedium.com/bm.tags/design-system/" class="kicker kicker--tout kicker--invert">design system</a> <h3 class="bma_head"><a href="https://bigmedium.com/ideas/design-system-governance-bugs-design-discrepancies.html" title="“The Design System Isn't Working for Me!”" rel="bookmark">“The Design System Isn't Working for Me!”</a></h3> <div class="bma_desc">What’s going on when a design system’s can’t get it to do what they need? How to manage bugs, missing features, intentional design deviations, new patterns, and more.</div> </div> </div> </div> <div class="bmw_link bma_page1687"> <div class="bma_mediatop"> <a href="https://bigmedium.com/ideas/your-sparkles-are-fizzling.html" class="bma_thumb"><img src="https://bigmedium.com/bm.pix/sparkles-wilting.4x3-250.png" class="bma_thumb" alt="Illustration of sparkles wilting on the vine" srcset="https://bigmedium.com/bm.pix/sparkles-wilting.4x3-2000.png 1200w, https://bigmedium.com/bm.pix/sparkles-wilting.4x3-1000.png 1000w, https://bigmedium.com/bm.pix/sparkles-wilting.4x3-500.png 500w, https://bigmedium.com/bm.pix/sparkles-wilting.4x3-250.png 250w" sizes="(min-width: 1050px) 449px, 50vw" /></a> </div> <div class="bma_body"> <div class="bma_body-wrap"> <a href="https://bigmedium.com/bm.tags/icons/" class="kicker kicker--tout kicker--invert">icons</a> <h3 class="bma_head"><a href="https://bigmedium.com/ideas/your-sparkles-are-fizzling.html" title="Your Sparkles Are Fizzling" rel="bookmark">Your Sparkles Are Fizzling</a></h3> <div class="bma_desc">Let’s retire the sparkle emoji, purple hues, and rainbow gradients for AI-powered features.</div> </div> </div> </div> <div class="bmw_link bma_page1686"> <div class="bma_mediatop"> <a href="https://bigmedium.com/ideas/data-whisperer-pinocchio-sentient-design.html" class="bma_thumb"><img src="https://bigmedium.com/bm.pix/pinocchio-2.4x3-250.png" class="bma_thumb" alt="Illustration of Pinocchio with AI sparkles-2" srcset="https://bigmedium.com/bm.pix/pinocchio-2.4x3-2000.png 1200w, https://bigmedium.com/bm.pix/pinocchio-2.4x3-1000.png 1000w, https://bigmedium.com/bm.pix/pinocchio-2.4x3-500.png 500w, https://bigmedium.com/bm.pix/pinocchio-2.4x3-250.png 250w" sizes="(min-width: 1050px) 449px, 50vw" /></a> </div> <div class="bma_body"> <div class="bma_body-wrap"> <a href="https://bigmedium.com/bm.tags/sentient-design/" class="kicker kicker--tout kicker--invert">sentient design</a> <h3 class="bma_head"><a href="https://bigmedium.com/ideas/data-whisperer-pinocchio-sentient-design.html" title="Data Whisperers, Pinocchios, and Sentient Design" rel="bookmark">Data Whisperers, Pinocchios, and Sentient Design</a></h3> <div class="bma_desc">Podcasts from PDFs! Working code from pen-and-paper sketches! Discover the new AI-powered design patterns that liberate content from frozen formats—and create new experience paradigms.</div> </div> </div> </div> <div class="bmw_link bma_page1684"> <div class="bma_mediatop"> <a href="https://bigmedium.com/ideas/the-already-here-future-of-prototyping.html" class="bma_thumb"><img src="https://bigmedium.com/bm.pix/lightbulb.4x3-250.png" class="bma_thumb" alt="A lightbulb with a right-facing arrow pointing towards three cogs" srcset="https://bigmedium.com/bm.pix/lightbulb.4x3-2000.png 1066w, https://bigmedium.com/bm.pix/lightbulb.4x3-1000.png 1000w, https://bigmedium.com/bm.pix/lightbulb.4x3-500.png 500w, https://bigmedium.com/bm.pix/lightbulb.4x3-250.png 250w" sizes="(min-width: 1050px) 449px, 50vw" /></a> </div> <div class="bma_body"> <div class="bma_body-wrap"> <a href="https://bigmedium.com/bm.tags/ai/" class="kicker kicker--tout kicker--invert">ai</a> <h3 class="bma_head"><a href="https://bigmedium.com/ideas/the-already-here-future-of-prototyping.html" title="The Already-Here Future of Prototyping" rel="bookmark">The Already-Here Future of Prototyping</a></h3> <div class="bma_desc">With LLM tools like ChatGPT and Claude, it’s easier than ever for anyone — including and perhaps especially non-developers — to develop ideas in code.</div> </div> </div> </div> <div class="bmw_link bma_page1665"> <div class="bma_mediatop"> <a href="https://bigmedium.com/ideas/hello-sentient-design.html" class="bma_thumb"><img src="https://bigmedium.com/bm.pix/sentient-design-hello.4x3-250.png" class="bma_thumb" alt="Illustration of four computers and devices lighting up with Sentient Design awareness" srcset="https://bigmedium.com/bm.pix/sentient-design-hello.4x3-2000.png 1200w, https://bigmedium.com/bm.pix/sentient-design-hello.4x3-1000.png 1000w, https://bigmedium.com/bm.pix/sentient-design-hello.4x3-500.png 500w, https://bigmedium.com/bm.pix/sentient-design-hello.4x3-250.png 250w" sizes="(min-width: 1050px) 449px, 50vw" /></a> </div> <div class="bma_body"> <div class="bma_body-wrap"> <a href="https://bigmedium.com/bm.tags/sentient-design/" class="kicker kicker--tout kicker--invert">sentient design</a> <h3 class="bma_head"><a href="https://bigmedium.com/ideas/hello-sentient-design.html" title="Say Hello to Sentient Design" rel="bookmark">Say Hello to Sentient Design</a></h3> <div class="bma_desc">Sentient Design is the already-here future of intelligent interfaces and AI-mediated experiences. Discover this framework and philosophy for working with AI as a design material.</div> </div> </div> </div> </div>  <div class="continue"> <a href="/ideas/" class="btn btn--next"> <span class="btn-arrow-text--right">More Ideas</span> </a> </div> </div> </div> </section> <section class="touts"> <div class="lc u--zero-pad"> <div class="standard-margin touts-simple"> <h2><a href="https://bigmedium.com/ideas/links/" class="kicker kicker--invert">What We’re Reading</a></h2>  <div class="tout-links tout-links--latest tout-links--sec-links"> <div class="bmw_link bma_page1699 bmw_link--noimage"> <div class="bma_body"> <div class="bma_body-wrap"> <h3 class="bma_head"><a href="https://bigmedium.com/ideas/links/when-combinations-of-humans-and-ai-are-useful.html" title="When Combinations of Humans and A.I. are Useful" rel="bookmark">When Combinations of Humans and A.I. are Useful</a></h3> <div class="bma_desc">A research study raises challenging questions about collaborative AI interfaces, including the value of “human in the loop” interfaces and explanations of AI logic and confidence scores.</div> </div> </div> </div> <div class="bmw_link bma_page1694 bmw_link--noimage"> <div class="bma_body"> <div class="bma_body-wrap"> <h3 class="bma_head"><a href="https://bigmedium.com/ideas/links/ai-pioneer-thinks-ai-is-dumber-than-a-cat.html" title="This AI Pioneer Thinks AI Is Dumber Than a Cat" rel="bookmark">This AI Pioneer Thinks AI Is Dumber Than a Cat</a></h3> <div class="bma_desc">AI pioneer Yann LeCun reminds us that just because LLMs are good at language doesn’t mean that they’re smart.</div> </div> </div> </div> <div class="bmw_link bma_page1693 bmw_link--noimage"> <div class="bma_body"> <div class="bma_body-wrap"> <h3 class="bma_head"><a href="https://bigmedium.com/ideas/links/beware-of-botshit.html" title="Beware of Botshit" rel="bookmark">Beware of Botshit</a></h3> <div class="bma_desc">Botshit is hallucinated content that makes its way into human communications or screws up decision making.</div> </div> </div> </div> <div class="bmw_link bma_page1692 bmw_link--noimage"> <div class="bma_body"> <div class="bma_body-wrap"> <h3 class="bma_head"><a href="https://bigmedium.com/ideas/links/radically-adaptive-world-model-ethan-mollick.html" title="A Radically Adaptive World Model" rel="bookmark">A Radically Adaptive World Model</a></h3> <div class="bma_desc">A research project generates a world based on Counter-Strike, frame by frame in response to your actions. What happens when you apply the same thinking to the design of websites, dashboards, or canvas apps?</div> </div> </div> </div> <div class="bmw_link bma_page1691 bmw_link--noimage"> <div class="bma_body"> <div class="bma_body-wrap"> <h3 class="bma_head"><a href="https://bigmedium.com/ideas/links/exploring-the-ai-solution-space-jorge-arango.html" title="Exploring the AI Solution Space" rel="bookmark">Exploring the AI Solution Space</a></h3> <div class="bma_desc">Jorge Arango explores what it means for machine intelligence to be “used well” and, in particular, questions the current fascination with general-purpose, open-ended chat interfaces.</div> </div> </div> </div> <div class="bmw_link bma_page1688 bmw_link--noimage"> <div class="bma_body"> <div class="bma_body-wrap"> <h3 class="bma_head"><a href="https://bigmedium.com/ideas/links/salesforce-generative-canvas.html" title="Introducing Generative Canvas" rel="bookmark">Introducing Generative Canvas</a></h3> <div class="bma_desc">Salesforce is piloting a radically adaptive, AI-mediated dashboard for CRM users. Look out, enterprise, here comes Sentient Design.</div> </div> </div> </div> </div>  <div class="continue"> <a href="https://bigmedium.com/ideas/links/" class="btn btn--next"> <span class="btn-arrow-text--right">More What We’re Reading</span> </a> </div> </div> </div> </section> <section id="nav" class="prefooter"> <div class="toolbar"> <div class="lc"> <a href="https://bigmedium.com/" class="logo"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 830 147" role="img" aria-label="Big Medium" preserveAspectRatio="xMaxYMax meet"><title>Big Medium</title><desc>Big Medium logo</desc><use xlink:href="#bmlogo" id="footerLogo" /></svg> </a> <a href="#bm-top" id="BackToTop" class="icon icon-menu-up icon-utility">Back to top</a> </div> </div> <div class="lc">  <form action="https://bigmedium.com/cgi-bin/moxiebin/bm-search.cgi/q/3" method="get" class="bmw_search" enctype="multipart/form-data" accept-charset="utf-8"><div> <input type="search" name="bmq" placeholder="Search" value="" /> <button type="submit" class="icon icon-search icon-utility">Search</button> <input type="hidden" name="bms" value="3" /> </div></form>  <nav class="bmw_navigation bmn_hnav" role="navigation"> <div class="bmn_skipnav"><a href="#bm-skipnavbottom">Skip Navigation</a></div> <ul> <li class="bmn_sec-ideas bmn_active"><a title="" href="https://bigmedium.com/ideas/">Ideas</a></li> <li class="bmn_sec-projects"><a title="" href="https://bigmedium.com/projects/">Projects</a></li> <li class="bmn_sec-speaking"><a title="" href="https://bigmedium.com/speaking/">Talks</a></li> <li class="bmn_sec-about"><a title="" href="https://bigmedium.com/about/">About</a></li> <li class="bmn_sec-hire"><a title="" href="https://bigmedium.com/hire/">Hire Us</a></li> </ul> <span class="bmn_clearNav" id="bm-skipnavbottom"> </span> </nav> </div> </section>  <div class="bmw_footer"> <footer class="footer"> <div class="lc"> <div class="read-us"> <h3>Read us</h3> <ul> <li class="book-atomic"> <a href="https://atomicdesign.bradfrost.com"> <img src="/pix/atomic-design.png" alt="Atomic Design, by Brad Frost" /> </a> </li> <li class="book-touch"> <a href="http://abookapart.com/products/designing-for-touch"> <img src="/pix/designing-for-touch.png" alt="Designing for Touch, by Josh Clark" /> </a> </li> </ul> </div> <div class="hire-us"> <h3>Work with us</h3> <ul> <li><a href="/hire/#design-systems">Design systems</a></li> <li><a href="/hire/#ui-ux-design">Interface and experience design</a></li> <li><a href="/hire/#product-strategy-process">Digital strategy and process</a></li> <li><a href="/hire/#production">Production and co-creation</a></li> <li><a href="/hire/#action-plan">Action plan</a></li> <li><a href="/hire/#coaching">Coaching and hands-on advice</a></li> <li><a href="/hire/#workshops-talks">Workshops and talks</a></li> </ul> </div> <div class="follow-us"> <h3>Follow us</h3> <h4>Get the <a href="/ideas/big-medium-newsletter.html">newsletter</a></h4> <div id="mc_embed_shell_bmfooter" class="bmc_mailchimp"> <div id="mc_embed_signup_bmfooter"> <form action="https://bigmedium.us5.list-manage.com/subscribe/post?u=6c0c3f4dcd40d88bc1cedb3fa&id=7540015453&f_id=00d6c4eaf0" method="post" id="mc-embedded-subscribe-form_bmfooter" name="mc-embedded-subscribe-form" class="validate" target="_self" novalidate=""> <div id="mc_embed_signup_scroll_bmfooter"> <div class="mc-field-group"><label for="mce-EMAIL_bmfooter">Email Address</label><input type="email" name="EMAIL" class="required email" id="mce-EMAIL_bmfooter" required="" value=""></div> <div id="mce-responses_bmfooter" class="clear"> <div class="response" id="mce-error-response_bmfooter" style="display: none;"></div> <div class="response" id="mce-success-response_bmfooter" style="display: none;"></div> </div><div class="clear"><input type="submit" class="btn" name="subscribe" id="mc-embedded-subscribe_bmfooter" class="button" value="Subscribe"></div> </div> </form> </div> </div> <ul class="social"> <li><a href="https://twitter.com/bigmediumjosh" class="icon icon-twitter">Twitter</a></li> <li><a href="/bm.feed.xml" class="icon icon-rss">RSS</a></li> <li><a href="https://instagram.com/joshclark/" class="icon icon-instagram">Instagram</a></li> <li><a href="https://github.com/bigmedium" class="icon icon-github">Github</a></li> </ul> </div> <div class="contact-us"> <h3>Contact us</h3> <div itemscope itemtype="http://schema.org/Organization"> <div> <h4>Start with Josh Clark</h4> <meta itemprop="name" content="Big Medium" /> <meta itemprop="sameAs" content="https://bigmedium.com/" /> </div> <p > <a itemprop="email" href="mailto:josh@bigmedium.com">josh@bigmedium.com</a><br /> <a itemprop="telephone" href="tel:+14013393381" class="p-tel">(401) 339-3381</a> </p> </div> </div> <p class="copyright"> Big Medium is a Global Moxie company.<br /> Copyright 2003–2024 Global Moxie, LLC. All rights reserved. </p> </div> </footer> </div>  <script src="/js/bigmed-min.js" type="text/javascript"></script> <script type="text/javascript"> BigM.initPage(); </script> </body> </html>

CINXE.COM

Design Tools Are Running Out of Track | Big Medium