CINXE.COM

<!doctype html><html lang="en"><head><title data-rh="true">The root causes for the dev-design mismatch | by Erez Reznikov | Nov, 2024 | UX Collective</title><meta data-rh="true" charset="utf-8"/><meta data-rh="true" name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,maximum-scale=1"/><meta data-rh="true" name="theme-color" content="#000000"/><meta data-rh="true" name="twitter:app:name:iphone" content="Medium"/><meta data-rh="true" name="twitter:app:id:iphone" content="828256236"/><meta data-rh="true" property="al:ios:app_name" content="Medium"/><meta data-rh="true" property="al:ios:app_store_id" content="828256236"/><meta data-rh="true" property="al:android:package" content="com.medium.reader"/><meta data-rh="true" property="fb:app_id" content="542599432471018"/><meta data-rh="true" property="og:site_name" content="Medium"/><meta data-rh="true" property="og:type" content="article"/><meta data-rh="true" property="article:published_time" content="2024-11-17T19:20:25.950Z"/><meta data-rh="true" name="title" content="The root causes for the dev-design mismatch | by Erez Reznikov | Nov, 2024 | UX Collective"/><meta data-rh="true" property="og:title" content="The root causes for the dev-design mismatch"/><meta data-rh="true" property="al:android:url" content="medium://p/4c66e0fa6740"/><meta data-rh="true" property="al:ios:url" content="medium://p/4c66e0fa6740"/><meta data-rh="true" property="al:android:app_name" content="Medium"/><meta data-rh="true" name="description" content="There are two persistent issues that keep plaguing the product design and development worlds. The first one is very much on the surface, and thus — no surprise — gets both a lot of attention and a…"/><meta data-rh="true" property="og:description" content="Designers use an unconstrained canvas tool to design for rule-based interactive systems, hoping the devs will perfect everything in…"/><meta data-rh="true" property="og:url" content="https://uxdesign.cc/the-root-causes-for-the-dev-design-mismatch-4c66e0fa6740"/><meta data-rh="true" property="al:web:url" content="https://uxdesign.cc/the-root-causes-for-the-dev-design-mismatch-4c66e0fa6740"/><meta data-rh="true" property="og:image" content="https://miro.medium.com/v2/resize:fit:1200/1*GE4vWD3070W9L4pIDMPEDw.png"/><meta data-rh="true" property="og:image:alt" content="A diagram illustrating the tradeoff between generic and wide and specific and narrow apps"/><meta data-rh="true" property="article:author" content="https://medium.com/@erezreznikov"/><meta data-rh="true" name="author" content="Erez Reznikov"/><meta data-rh="true" name="robots" content="index,noarchive,follow,max-image-preview:large"/><meta data-rh="true" name="referrer" content="unsafe-url"/><meta data-rh="true" property="twitter:title" content="The root causes for the dev-design mismatch"/><meta data-rh="true" name="twitter:site" content="@uxdesigncc"/><meta data-rh="true" name="twitter:app:url:iphone" content="medium://p/4c66e0fa6740"/><meta data-rh="true" property="twitter:description" content="Designers use an unconstrained canvas tool to design for rule-based interactive systems, hoping the devs will perfect everything in…"/><meta data-rh="true" name="twitter:image:src" content="https://miro.medium.com/v2/resize:fit:1200/1*GE4vWD3070W9L4pIDMPEDw.png"/><meta data-rh="true" name="twitter:image:alt" content="A diagram illustrating the tradeoff between generic and wide and specific and narrow apps"/><meta data-rh="true" name="twitter:card" content="summary_large_image"/><meta data-rh="true" name="twitter:label1" content="Reading time"/><meta data-rh="true" name="twitter:data1" content="11 min read"/><link data-rh="true" rel="icon" href="https://miro.medium.com/v2/resize:fill:256:256/1*dn6MbbIIlwobt0jnUcrt_Q.png"/><link data-rh="true" rel="search" type="application/opensearchdescription+xml" title="Medium" href="/osd.xml"/><link data-rh="true" rel="apple-touch-icon" sizes="152x152" href="https://miro.medium.com/v2/resize:fill:304:304/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156"/><link data-rh="true" rel="apple-touch-icon" sizes="120x120" href="https://miro.medium.com/v2/resize:fill:240:240/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156"/><link data-rh="true" rel="apple-touch-icon" sizes="76x76" href="https://miro.medium.com/v2/resize:fill:152:152/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156"/><link data-rh="true" rel="apple-touch-icon" sizes="60x60" href="https://miro.medium.com/v2/resize:fill:120:120/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156"/><link data-rh="true" rel="mask-icon" href="https://miro.medium.com/v2/resize:fill:1000:1000/7*GAOKVe--MXbEJmV9230oOQ.png" color="#171717"/><link data-rh="true" id="glyph_preload_link" rel="preload" as="style" type="text/css" href="https://glyph.medium.com/css/unbound.css"/><link data-rh="true" id="glyph_link" rel="stylesheet" type="text/css" href="https://glyph.medium.com/css/unbound.css"/><link data-rh="true" rel="author" href="https://medium.com/@erezreznikov"/><link data-rh="true" rel="canonical" href="https://uxdesign.cc/the-root-causes-for-the-dev-design-mismatch-4c66e0fa6740"/><link data-rh="true" rel="alternate" href="android-app://com.medium.reader/https/medium.com/p/4c66e0fa6740"/><script data-rh="true" type="application/ld+json">{"@context":"http:\u002F\u002Fschema.org","@type":"NewsArticle","image":["https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1200\u002F1*GE4vWD3070W9L4pIDMPEDw.png"],"url":"https:\u002F\u002Fuxdesign.cc\u002Fthe-root-causes-for-the-dev-design-mismatch-4c66e0fa6740","dateCreated":"2024-11-17T19:20:25.950Z","datePublished":"2024-11-17T19:20:25.950Z","dateModified":"2024-11-18T02:34:34.596Z","headline":"The root causes for the dev-design mismatch - UX Collective","name":"The root causes for the dev-design mismatch - UX Collective","description":"There are two persistent issues that keep plaguing the product design and development worlds. The first one is very much on the surface, and thus — no surprise — gets both a lot of attention and a…","identifier":"4c66e0fa6740","author":{"@type":"Person","name":"Erez Reznikov","url":"https:\u002F\u002Fuxdesign.cc\u002F@erezreznikov"},"creator":["Erez Reznikov"],"publisher":{"@type":"Organization","name":"UX Collective","url":"uxdesign.cc","logo":{"@type":"ImageObject","width":360,"height":60,"url":"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002F1*9V9oqYyYnfP5yy7cb7YTMQ.png"}},"mainEntityOfPage":"https:\u002F\u002Fuxdesign.cc\u002Fthe-root-causes-for-the-dev-design-mismatch-4c66e0fa6740"}</script><style type="text/css" data-fela-rehydration="570" data-fela-type="STATIC">html{box-sizing:border-box;-webkit-text-size-adjust:100%}*, *:before, *:after{box-sizing:inherit}body{margin:0;padding:0;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:rgba(0,0,0,0.8);position:relative;min-height:100vh}h1, h2, h3, h4, h5, h6, dl, dd, ol, ul, menu, figure, blockquote, p, pre, form{margin:0}menu, ol, ul{padding:0;list-style:none;list-style-image:none}main{display:block}a{color:inherit;text-decoration:none}a, button, input{-webkit-tap-highlight-color:transparent}img, svg{vertical-align:middle}button{background:transparent;overflow:visible}button, input, optgroup, select, textarea{margin:0}:root{--reach-tabs:1;--reach-menu-button:1}#speechify-root{font-family:Sohne, sans-serif}div[data-popper-reference-hidden="true"]{visibility:hidden;pointer-events:none}.grecaptcha-badge{visibility:hidden} /*XCode style (c) Angel Garcia <angelgarcia.mail@gmail.com>*/.hljs {background: #fff;color: black; }/* Gray DOCTYPE selectors like WebKit */ .xml .hljs-meta {color: #c0c0c0; }.hljs-comment, .hljs-quote {color: #007400; }.hljs-tag, .hljs-attribute, .hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-name {color: #aa0d91; }.hljs-variable, .hljs-template-variable {color: #3F6E74; }.hljs-code, .hljs-string, .hljs-meta .hljs-string {color: #c41a16; }.hljs-regexp, .hljs-link {color: #0E0EFF; }.hljs-title, .hljs-symbol, .hljs-bullet, .hljs-number {color: #1c00cf; }.hljs-section, .hljs-meta {color: #643820; }.hljs-title.class_, .hljs-class .hljs-title, .hljs-type, .hljs-built_in, .hljs-params {color: #5c2699; }.hljs-attr {color: #836C28; }.hljs-subst {color: #000; }.hljs-formula {background-color: #eee;font-style: italic; }.hljs-addition {background-color: #baeeba; }.hljs-deletion {background-color: #ffc8bd; }.hljs-selector-id, .hljs-selector-class {color: #9b703f; }.hljs-doctag, .hljs-strong {font-weight: bold; }.hljs-emphasis {font-style: italic; } </style><style type="text/css" data-fela-rehydration="570" data-fela-type="KEYFRAME">@-webkit-keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}@-moz-keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}@keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}</style><style type="text/css" data-fela-rehydration="570" data-fela-type="RULE">.a{font-family:medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif}.b{font-weight:400}.c{background-color:rgba(255, 255, 255, 1)}.l{display:block}.m{position:sticky}.n{top:0}.o{z-index:500}.p{padding:0 24px}.q{align-items:center}.r{border-bottom:solid 1px #F2F2F2}.y{height:41px}.z{line-height:20px}.ab{display:flex}.ac{height:57px}.ae{flex:1 0 auto}.af{color:inherit}.ag{fill:inherit}.ah{font-size:inherit}.ai{border:inherit}.aj{font-family:inherit}.ak{letter-spacing:inherit}.al{font-weight:inherit}.am{padding:0}.an{margin:0}.ao{cursor:pointer}.ap:disabled{cursor:not-allowed}.aq:disabled{color:#6B6B6B}.ar:disabled{fill:#6B6B6B}.au{width:auto}.av path{fill:#242424}.aw{height:25px}.ax{margin-left:16px}.ay{border:none}.az{border-radius:20px}.ba{width:240px}.bb{background:#F9F9F9}.bc path{fill:#6B6B6B}.be{outline:none}.bf{font-family:sohne, "Helvetica Neue", Helvetica, Arial, sans-serif}.bg{font-size:14px}.bh{width:100%}.bi{padding:10px 20px 10px 0}.bj{background-color:transparent}.bk{color:#242424}.bl::placeholder{color:#6B6B6B}.bm{display:inline-block}.bn{margin-left:12px}.bo{margin-right:12px}.bp{border-radius:4px}.bq{margin-left:24px}.br{height:24px}.bx{background-color:#F9F9F9}.by{border-radius:50%}.bz{height:32px}.ca{width:32px}.cb{justify-content:center}.ch{max-width:680px}.ci{min-width:0}.cj{animation:k1 1.2s ease-in-out infinite}.ck{height:100vh}.cl{margin-bottom:16px}.cm{margin-top:48px}.cn{align-items:flex-start}.co{flex-direction:column}.cp{justify-content:space-between}.cq{margin-bottom:24px}.cw{width:80%}.cx{background-color:#F2F2F2}.dd{height:44px}.de{width:44px}.df{margin:auto 0}.dg{margin-bottom:4px}.dh{height:16px}.di{width:120px}.dj{width:80px}.dp{margin-bottom:8px}.dq{width:96%}.dr{width:98%}.ds{width:81%}.dt{margin-left:8px}.du{color:#6B6B6B}.dv{font-size:13px}.dw{height:100%}.ep{color:#FFFFFF}.eq{fill:#FFFFFF}.er{background:rgba(134, 132, 132, 1)}.es{border-color:rgba(134, 132, 132, 1)}.ew:disabled{cursor:inherit !important}.ex:disabled{opacity:0.3}.ey:disabled:hover{background:rgba(134, 132, 132, 1)}.ez:disabled:hover{border-color:rgba(134, 132, 132, 1)}.fa{border-radius:99em}.fb{border-width:1px}.fc{border-style:solid}.fd{box-sizing:border-box}.fe{text-decoration:none}.ff{text-align:center}.fi{margin-right:32px}.fj{position:relative}.fk{fill:#6B6B6B}.fn{background:transparent}.fo svg{margin-left:4px}.fp svg{fill:#6B6B6B}.fr{box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.05)}.fs{position:absolute}.fz{margin:0 24px}.gd{background:rgba(255, 255, 255, 1)}.ge{border:1px solid #F2F2F2}.gf{box-shadow:0 1px 4px #F2F2F2}.gg{max-height:100vh}.gh{overflow-y:auto}.gi{left:0}.gj{top:calc(100vh + 100px)}.gk{bottom:calc(100vh + 100px)}.gl{width:10px}.gm{pointer-events:none}.gn{word-break:break-word}.go{word-wrap:break-word}.gp:after{display:block}.gq:after{content:""}.gr:after{clear:both}.gs{line-height:1.23}.gt{letter-spacing:0}.gu{font-style:normal}.gv{font-weight:700}.hq{margin-bottom:-0.27em}.hr{line-height:1.394}.im{align-items:baseline}.in{width:48px}.io{height:48px}.ip{border:2px solid rgba(255, 255, 255, 1)}.iq{z-index:0}.ir{box-shadow:none}.is{border:1px solid rgba(0, 0, 0, 0.05)}.it{margin-left:-12px}.iu{width:28px}.iv{height:28px}.iw{z-index:1}.ix{width:24px}.iy{margin-bottom:2px}.iz{flex-wrap:nowrap}.ja{font-size:16px}.jb{line-height:24px}.jd{margin:0 8px}.je{display:inline}.jf{color:rgba(134, 132, 132, 1)}.jg{fill:rgba(134, 132, 132, 1)}.jj{flex:0 0 auto}.jm{flex-wrap:wrap}.jp{white-space:pre-wrap}.jq{margin-right:4px}.jr{overflow:hidden}.js{max-height:20px}.jt{text-overflow:ellipsis}.ju{display:-webkit-box}.jv{-webkit-line-clamp:1}.jw{-webkit-box-orient:vertical}.jx{word-break:break-all}.jz{padding-left:8px}.ka{padding-right:8px}.lb> *{flex-shrink:0}.lc{overflow-x:scroll}.ld::-webkit-scrollbar{display:none}.le{scrollbar-width:none}.lf{-ms-overflow-style:none}.lg{width:74px}.lh{flex-direction:row}.li{z-index:2}.ll{-webkit-user-select:none}.lm{border:0}.ln{fill:rgba(117, 117, 117, 1)}.lq{outline:0}.lr{user-select:none}.ls> svg{pointer-events:none}.mb{cursor:progress}.mc{margin-left:4px}.md{margin-top:0px}.me{opacity:1}.mf{padding:4px 0}.mi{width:16px}.mk{display:inline-flex}.mq{max-width:100%}.mr{padding:8px 2px}.ms svg{color:#6B6B6B}.nj{clear:both}.np{margin-left:auto}.nq{margin-right:auto}.nr{max-width:1600px}.nx{padding-top:5px}.ny{padding-bottom:5px}.oa{cursor:zoom-in}.ob{z-index:auto}.od{height:auto}.oe{line-height:1.58}.of{letter-spacing:-0.004em}.og{font-family:source-serif-pro, Georgia, Cambria, "Times New Roman", Times, serif}.oz{margin-bottom:-0.46em}.pa{line-height:1.12}.pb{letter-spacing:-0.022em}.pc{font-weight:600}.pv{margin-bottom:-0.28em}.qb{list-style-type:decimal}.qc{margin-left:30px}.qd{padding-left:0px}.qj{text-decoration:underline}.qk{box-shadow:inset 3px 0 0 0 #242424}.ql{padding-left:23px}.qm{margin-left:-20px}.qn{font-style:italic}.qo{margin-top:32px}.qp{margin-bottom:14px}.qq{padding-top:24px}.qr{padding-bottom:10px}.qs{background-color:#000000}.qt{height:3px}.qu{width:3px}.qv{margin-right:20px}.qw{margin-bottom:26px}.qx{margin-top:6px}.qy{margin-top:8px}.qz{margin-right:8px}.ra{padding:8px 16px}.rb{border-radius:100px}.rc{transition:background 300ms ease}.re{white-space:nowrap}.rf{border-top:none}.rg{height:52px}.rh{max-height:52px}.ri{box-sizing:content-box}.rj{position:static}.rl{max-width:155px}.rw{height:0px}.rx{margin-bottom:40px}.ry{margin-bottom:48px}.sm{border-radius:2px}.so{height:64px}.sp{width:64px}.sq{align-self:flex-end}.sr{color:rgba(255, 255, 255, 1)}.ss{fill:rgba(255, 255, 255, 1)}.st{background:rgba(25, 25, 25, 1)}.su{border-color:rgba(25, 25, 25, 1)}.sx:disabled{opacity:0.1}.sy:disabled:hover{background:rgba(25, 25, 25, 1)}.sz:disabled:hover{border-color:rgba(25, 25, 25, 1)}.ta{flex:1 1 auto}.te{padding-right:4px}.tf{font-weight:500}.ts{margin-top:16px}.ub{gap:18px}.uc{fill:rgba(61, 61, 61, 1)}.ue{fill:#242424}.uf{background:0}.ug{border-color:#242424}.uh:disabled:hover{color:#242424}.ui:disabled:hover{fill:#242424}.uj:disabled:hover{border-color:#242424}.uu{border-bottom:solid 1px #E5E5E5}.uv{margin-top:72px}.uw{padding:24px 0}.ux{margin-bottom:0px}.uy{margin-right:16px}.as:hover:not(:disabled){color:rgba(25, 25, 25, 1)}.at:hover:not(:disabled){fill:rgba(25, 25, 25, 1)}.et:hover{background:rgba(115, 113, 113, 1)}.eu:hover{border-color:rgba(115, 113, 113, 1)}.ev:hover{cursor:pointer}.fl:hover{color:#242424}.fm:hover{fill:#242424}.fq:hover svg{fill:#242424}.ft:hover{background-color:rgba(0, 0, 0, 0.1)}.jc:hover{text-decoration:underline}.jh:hover:not(:disabled){color:rgba(115, 113, 113, 1)}.ji:hover:not(:disabled){fill:rgba(115, 113, 113, 1)}.lp:hover{fill:rgba(8, 8, 8, 1)}.mg:hover{fill:#000000}.mh:hover p{color:#000000}.mj:hover{color:#000000}.mt:hover svg{color:#000000}.rd:hover{background-color:#F2F2F2}.sn:hover{background-color:none}.sv:hover{background:#000000}.sw:hover{border-color:#242424}.ud:hover{fill:rgba(25, 25, 25, 1)}.bd:focus-within path{fill:#242424}.lo:focus{fill:rgba(8, 8, 8, 1)}.mu:focus svg{color:#000000}.oc:focus{transform:scale(1.01)}.lt:active{border-style:none}</style><style type="text/css" data-fela-rehydration="570" data-fela-type="RULE" media="all and (min-width: 1080px)">.d{display:none}.bw{width:64px}.cg{margin:0 64px}.cv{height:48px}.dc{margin-bottom:52px}.do{margin-bottom:48px}.ef{font-size:14px}.eg{line-height:20px}.em{font-size:13px}.eo{padding:5px 12px}.fh{display:flex}.fy{margin-bottom:68px}.gc{max-width:680px}.hm{font-size:42px}.hn{margin-top:1.19em}.ho{line-height:52px}.hp{letter-spacing:-0.011em}.ie{font-size:22px}.if{margin-top:0.92em}.ig{line-height:28px}.il{align-items:center}.kn{border-top:solid 1px #F2F2F2}.ko{border-bottom:solid 1px #F2F2F2}.kp{margin:32px 0 0}.kq{padding:3px 8px}.kz> *{margin-right:24px}.la> :last-child{margin-right:0}.ma{margin-top:0px}.mp{margin:0}.no{max-width:1192px}.nw{margin-top:56px}.ov{font-size:20px}.ow{margin-top:2.14em}.ox{line-height:32px}.oy{letter-spacing:-0.003em}.pr{font-size:24px}.ps{margin-top:1.95em}.pt{line-height:30px}.pu{letter-spacing:-0.016em}.qa{margin-top:0.94em}.qi{margin-top:1.14em}.rq{display:inline-block}.rv{margin-bottom:104px}.rz{flex-direction:row}.sc{margin-bottom:0}.sd{margin-right:20px}.tb{max-width:500px}.tq{line-height:24px}.tr{letter-spacing:0}.tx{margin-bottom:88px}.ua{margin-bottom:72px}.uo{width:min-width}.ut{padding-top:72px}</style><style type="text/css" data-fela-rehydration="570" data-fela-type="RULE" media="all and (max-width: 1079.98px)">.e{display:none}.lz{margin-top:0px}.rp{display:inline-block}</style><style type="text/css" data-fela-rehydration="570" data-fela-type="RULE" media="all and (max-width: 903.98px)">.f{display:none}.ly{margin-top:0px}.ro{display:inline-block}</style><style type="text/css" data-fela-rehydration="570" data-fela-type="RULE" media="all and (max-width: 727.98px)">.g{display:none}.lw{margin-top:0px}.lx{margin-right:0px}.rn{display:inline-block}</style><style type="text/css" data-fela-rehydration="570" data-fela-type="RULE" media="all and (max-width: 551.98px)">.h{display:none}.s{display:flex}.t{justify-content:space-between}.bs{width:24px}.cc{margin:0 24px}.cr{height:40px}.cy{margin-bottom:44px}.dk{margin-bottom:32px}.dx{font-size:13px}.dy{line-height:20px}.eh{padding:0px 8px 1px}.fu{margin-bottom:4px}.gw{font-size:32px}.gx{margin-top:1.01em}.gy{line-height:38px}.gz{letter-spacing:-0.014em}.hs{font-size:18px}.ht{margin-top:0.79em}.hu{line-height:24px}.ih{align-items:flex-start}.jk{flex-direction:column}.jn{margin-bottom:2px}.kb{margin:24px -24px 0}.kc{padding:0}.kr> *{margin-right:8px}.ks> :last-child{margin-right:24px}.lj{margin-left:0px}.lu{margin-top:0px}.lv{margin-right:0px}.ml{margin:0}.mv{border:1px solid #F2F2F2}.mw{border-radius:99em}.mx{padding:0px 16px 0px 12px}.my{height:38px}.mz{align-items:center}.nb svg{margin-right:8px}.nk{max-width:100%}.ns{margin-top:40px}.oh{margin-top:1.56em}.oi{line-height:28px}.oj{letter-spacing:-0.003em}.pd{font-size:20px}.pe{margin-top:1.2em}.pf{letter-spacing:0}.pw{margin-top:0.67em}.qe{margin-top:1.34em}.rm{display:inline-block}.rr{margin-bottom:96px}.sk{margin-bottom:20px}.sl{margin-right:0}.tg{font-size:24px}.th{line-height:30px}.ti{letter-spacing:-0.016em}.tt{margin-bottom:64px}.uk{width:100%}.up{padding-top:48px}.na:hover{border-color:#E5E5E5}</style><style type="text/css" data-fela-rehydration="570" data-fela-type="RULE" media="all and (min-width: 904px) and (max-width: 1079.98px)">.i{display:none}.bv{width:64px}.cf{margin:0 64px}.cu{height:48px}.db{margin-bottom:52px}.dn{margin-bottom:48px}.ed{font-size:14px}.ee{line-height:20px}.ek{font-size:13px}.el{padding:5px 12px}.fg{display:flex}.fx{margin-bottom:68px}.gb{max-width:680px}.hi{font-size:42px}.hj{margin-top:1.19em}.hk{line-height:52px}.hl{letter-spacing:-0.011em}.ib{font-size:22px}.ic{margin-top:0.92em}.id{line-height:28px}.ik{align-items:center}.kj{border-top:solid 1px #F2F2F2}.kk{border-bottom:solid 1px #F2F2F2}.kl{margin:32px 0 0}.km{padding:3px 8px}.kx> *{margin-right:24px}.ky> :last-child{margin-right:0}.mo{margin:0}.nn{max-width:1192px}.nv{margin-top:56px}.or{font-size:20px}.os{margin-top:2.14em}.ot{line-height:32px}.ou{letter-spacing:-0.003em}.pn{font-size:24px}.po{margin-top:1.95em}.pp{line-height:30px}.pq{letter-spacing:-0.016em}.pz{margin-top:0.94em}.qh{margin-top:1.14em}.ru{margin-bottom:104px}.sa{flex-direction:row}.se{margin-bottom:0}.sf{margin-right:20px}.tc{max-width:500px}.to{line-height:24px}.tp{letter-spacing:0}.tw{margin-bottom:88px}.tz{margin-bottom:72px}.un{width:min-width}.us{padding-top:72px}</style><style type="text/css" data-fela-rehydration="570" data-fela-type="RULE" media="all and (min-width: 728px) and (max-width: 903.98px)">.j{display:none}.w{display:flex}.x{justify-content:space-between}.bu{width:64px}.ce{margin:0 48px}.ct{height:48px}.da{margin-bottom:52px}.dm{margin-bottom:48px}.eb{font-size:13px}.ec{line-height:20px}.ej{padding:0px 8px 1px}.fw{margin-bottom:68px}.ga{max-width:680px}.he{font-size:42px}.hf{margin-top:1.19em}.hg{line-height:52px}.hh{letter-spacing:-0.011em}.hy{font-size:22px}.hz{margin-top:0.92em}.ia{line-height:28px}.ij{align-items:center}.kf{border-top:solid 1px #F2F2F2}.kg{border-bottom:solid 1px #F2F2F2}.kh{margin:32px 0 0}.ki{padding:3px 8px}.kv> *{margin-right:24px}.kw> :last-child{margin-right:0}.mn{margin:0}.nm{max-width:100%}.nu{margin-top:56px}.on{font-size:20px}.oo{margin-top:2.14em}.op{line-height:32px}.oq{letter-spacing:-0.003em}.pj{font-size:24px}.pk{margin-top:1.95em}.pl{line-height:30px}.pm{letter-spacing:-0.016em}.py{margin-top:0.94em}.qg{margin-top:1.14em}.rt{margin-bottom:104px}.sb{flex-direction:row}.sg{margin-bottom:0}.sh{margin-right:20px}.td{max-width:500px}.tm{line-height:24px}.tn{letter-spacing:0}.tv{margin-bottom:88px}.ty{margin-bottom:72px}.um{width:min-width}.ur{padding-top:72px}</style><style type="text/css" data-fela-rehydration="570" data-fela-type="RULE" media="all and (min-width: 552px) and (max-width: 727.98px)">.k{display:none}.u{display:flex}.v{justify-content:space-between}.bt{width:24px}.cd{margin:0 24px}.cs{height:40px}.cz{margin-bottom:44px}.dl{margin-bottom:32px}.dz{font-size:13px}.ea{line-height:20px}.ei{padding:0px 8px 1px}.fv{margin-bottom:4px}.ha{font-size:32px}.hb{margin-top:1.01em}.hc{line-height:38px}.hd{letter-spacing:-0.014em}.hv{font-size:18px}.hw{margin-top:0.79em}.hx{line-height:24px}.ii{align-items:flex-start}.jl{flex-direction:column}.jo{margin-bottom:2px}.kd{margin:24px 0 0}.ke{padding:0}.kt> *{margin-right:8px}.ku> :last-child{margin-right:8px}.lk{margin-left:0px}.mm{margin:0}.nc{border:1px solid #F2F2F2}.nd{border-radius:99em}.ne{padding:0px 16px 0px 12px}.nf{height:38px}.ng{align-items:center}.ni svg{margin-right:8px}.nl{max-width:100%}.nt{margin-top:40px}.ok{margin-top:1.56em}.ol{line-height:28px}.om{letter-spacing:-0.003em}.pg{font-size:20px}.ph{margin-top:1.2em}.pi{letter-spacing:0}.px{margin-top:0.67em}.qf{margin-top:1.34em}.rs{margin-bottom:96px}.si{margin-bottom:20px}.sj{margin-right:0}.tj{font-size:24px}.tk{line-height:30px}.tl{letter-spacing:-0.016em}.tu{margin-bottom:64px}.ul{width:100%}.uq{padding-top:48px}.nh:hover{border-color:#E5E5E5}</style><style type="text/css" data-fela-rehydration="570" data-fela-type="RULE" media="print">.rk{display:none}</style><style type="text/css" data-fela-rehydration="570" data-fela-type="RULE" media="(orientation: landscape) and (max-width: 903.98px)">.jy{max-height:none}</style><style type="text/css" data-fela-rehydration="570" data-fela-type="RULE" media="(prefers-reduced-motion: no-preference)">.nz{transition:transform 300ms cubic-bezier(0.2, 0, 0.2, 1)}</style></head><body><div id="root"><div class="a b c"><div class="d e f g h i j k"></div><script>document.domain = document.domain;</script><div class="l c"><div class="l m n o c"><div class="p q r s t u v w x i d y z"><a class="du ag dv bf ak b am an ao ap aq ar as at s u w i d q dw z" href="https://rsci.app.link/?%24canonical_url=https%3A%2F%2Fmedium.com%2Fp%2F4c66e0fa6740&amp;%7Efeature=LoOpenInAppButton&amp;%7Echannel=ShowPostUnderCollection&amp;source=---top_nav_layout_nav----------------------------------" rel="noopener follow">Open in app<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="none" viewBox="0 0 10 10" class="dt"><path fill="currentColor" d="M.985 8.485a.375.375 0 1 0 .53.53zM8.75 1.25h.375A.375.375 0 0 0 8.75.875zM8.375 6.5a.375.375 0 1 0 .75 0zM3.5.875a.375.375 0 1 0 0 .75zm-1.985 8.14 7.5-7.5-.53-.53-7.5 7.5zm6.86-7.765V6.5h.75V1.25zM3.5 1.625h5.25v-.75H3.5z"></path></svg></a><div class="ab q"><p class="bf b dx dy dz ea eb ec ed ee ef eg du"><span><a class="bf b dx dy eh dz ea ei eb ec ej ek ee el em eg eo ep eq er es et eu ev ew ex ey ez fa fb fc fd bm fe ff" data-testid="headerSignUpButton" href="https://medium.com/m/signin?operation=register&amp;redirect=https%3A%2F%2Fuxdesign.cc%2Fthe-root-causes-for-the-dev-design-mismatch-4c66e0fa6740&amp;source=post_page---top_nav_layout_nav-----------------------global_nav-----------" rel="noopener follow">Sign up</a></span></p><div class="ax l"><p class="bf b dx dy dz ea eb ec ed ee ef eg du"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerSignInButton" href="https://medium.com/m/signin?operation=login&amp;redirect=https%3A%2F%2Fuxdesign.cc%2Fthe-root-causes-for-the-dev-design-mismatch-4c66e0fa6740&amp;source=post_page---top_nav_layout_nav-----------------------global_nav-----------" rel="noopener follow">Sign in</a></span></p></div></div></div><div class="p q r ab ac"><div class="ab q ae"><a class="af ag ah ai aj ak al am an ao ap aq ar as at ab" aria-label="Homepage" data-testid="headerMediumLogo" href="https://medium.com/?source=---top_nav_layout_nav----------------------------------" rel="noopener follow"><svg xmlns="http://www.w3.org/2000/svg" width="719" height="160" fill="none" viewBox="0 0 719 160" class="au av aw"><path fill="#242424" d="m174.104 9.734.215-.047V8.02H130.39L89.6 103.89 48.81 8.021H1.472v1.666l.212.047c8.018 1.81 12.09 4.509 12.09 14.242V137.93c0 9.734-4.087 12.433-12.106 14.243l-.212.047v1.671h32.118v-1.665l-.213-.048c-8.018-1.809-12.089-4.509-12.089-14.242V30.586l52.399 123.305h2.972l53.925-126.743V140.75c-.687 7.688-4.721 10.062-11.982 11.701l-.215.05v1.652h55.948v-1.652l-.215-.05c-7.269-1.639-11.4-4.013-12.087-11.701l-.037-116.774h.037c0-9.733 4.071-12.432 12.087-14.242m25.555 75.488c.915-20.474 8.268-35.252 20.606-35.507 3.806.063 6.998 1.312 9.479 3.714 5.272 5.118 7.751 15.812 7.368 31.793zm-.553 5.77h65.573v-.275c-.186-15.656-4.721-27.834-13.466-36.196-7.559-7.227-18.751-11.203-30.507-11.203h-.263c-6.101 0-13.584 1.48-18.909 4.16-6.061 2.807-11.407 7.003-15.855 12.511-7.161 8.874-11.499 20.866-12.554 34.343q-.05.606-.092 1.212a50 50 0 0 0-.065 1.151 85.807 85.807 0 0 0-.094 5.689c.71 30.524 17.198 54.917 46.483 54.917 25.705 0 40.675-18.791 44.407-44.013l-1.886-.664c-6.557 13.556-18.334 21.771-31.738 20.769-18.297-1.369-32.314-19.922-31.042-42.395m139.722 41.359c-2.151 5.101-6.639 7.908-12.653 7.908s-11.513-4.129-15.418-11.63c-4.197-8.053-6.405-19.436-6.405-32.92 0-28.067 8.729-46.22 22.24-46.22 5.657 0 10.111 2.807 12.236 7.704zm43.499 20.008c-8.019-1.897-12.089-4.722-12.089-14.951V1.309l-48.716 14.353v1.757l.299-.024c6.72-.543 11.278.386 13.925 2.83 2.072 1.915 3.082 4.853 3.082 8.987v18.66c-4.803-3.067-10.516-4.56-17.448-4.56-14.059 0-26.909 5.92-36.176 16.672-9.66 11.205-14.767 26.518-14.767 44.278-.003 31.72 15.612 53.039 38.851 53.039 13.595 0 24.533-7.449 29.54-20.013v16.865h43.711v-1.746zM424.1 19.819c0-9.904-7.468-17.374-17.375-17.374-9.859 0-17.573 7.632-17.573 17.374s7.721 17.374 17.573 17.374c9.907 0 17.375-7.47 17.375-17.374m11.499 132.546c-8.019-1.897-12.089-4.722-12.089-14.951h-.035V43.635l-43.714 12.551v1.705l.263.024c9.458.842 12.047 4.1 12.047 15.152v81.086h43.751v-1.746zm112.013 0c-8.018-1.897-12.089-4.722-12.089-14.951V43.635l-41.621 12.137v1.71l.246.026c7.733.813 9.967 4.257 9.967 15.36v59.279c-2.578 5.102-7.415 8.131-13.274 8.336-9.503 0-14.736-6.419-14.736-18.073V43.638l-43.714 12.55v1.703l.262.024c9.459.84 12.05 4.097 12.05 15.152v50.17a56.3 56.3 0 0 0 .91 10.444l.787 3.423c3.701 13.262 13.398 20.197 28.59 20.197 12.868 0 24.147-7.966 29.115-20.43v17.311h43.714v-1.747zm169.818 1.788v-1.749l-.213-.05c-8.7-2.006-12.089-5.789-12.089-13.49v-63.79c0-19.89-11.171-31.761-29.883-31.761-13.64 0-25.141 7.882-29.569 20.16-3.517-13.01-13.639-20.16-28.606-20.16-13.146 0-23.449 6.938-27.869 18.657V43.643L545.487 55.68v1.715l.263.024c9.345.829 12.047 4.181 12.047 14.95v81.784h40.787v-1.746l-.215-.053c-6.941-1.631-9.181-4.606-9.181-12.239V66.998c1.836-4.289 5.537-9.37 12.853-9.37 9.086 0 13.692 6.296 13.692 18.697v77.828h40.797v-1.746l-.215-.053c-6.94-1.631-9.18-4.606-9.18-12.239V75.066a42 42 0 0 0-.578-7.26c1.947-4.661 5.86-10.177 13.475-10.177 9.214 0 13.691 6.114 13.691 18.696v77.828z"></path></svg></a><div class="ax h"><div class="ab ay az ba bb q bc bd"><div class="bm" aria-hidden="false" aria-describedby="searchResults" aria-labelledby="searchResults"></div><div class="bn bo ab"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M4.092 11.06a6.95 6.95 0 1 1 13.9 0 6.95 6.95 0 0 1-13.9 0m6.95-8.05a8.05 8.05 0 1 0 5.13 14.26l3.75 3.75a.56.56 0 1 0 .79-.79l-3.73-3.73A8.05 8.05 0 0 0 11.042 3z" clip-rule="evenodd"></path></svg></div><input role="combobox" aria-controls="searchResults" aria-expanded="false" aria-label="search" data-testid="headerSearchInput" tabindex="0" class="ay be bf bg z bh bi bj bk bl" placeholder="Search" value=""/></div></div></div><div class="h k w fg fh"><div class="fi ab"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerWriteButton" href="https://medium.com/m/signin?operation=register&amp;redirect=https%3A%2F%2Fmedium.com%2Fnew-story&amp;source=---top_nav_layout_nav-----------------------new_post_topnav-----------" rel="noopener follow"><div class="bf b bg z du fj fk ab q fl fm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" aria-label="Write"><path fill="currentColor" d="M14 4a.5.5 0 0 0 0-1zm7 6a.5.5 0 0 0-1 0zm-7-7H4v1h10zM3 4v16h1V4zm1 17h16v-1H4zm17-1V10h-1v10zm-1 1a1 1 0 0 0 1-1h-1zM3 20a1 1 0 0 0 1 1v-1zM4 3a1 1 0 0 0-1 1h1z"></path><path stroke="currentColor" d="m17.5 4.5-8.458 8.458a.25.25 0 0 0-.06.098l-.824 2.47a.25.25 0 0 0 .316.316l2.47-.823a.25.25 0 0 0 .098-.06L19.5 6.5m-2-2 2.323-2.323a.25.25 0 0 1 .354 0l1.646 1.646a.25.25 0 0 1 0 .354L19.5 6.5m-2-2 2 2"></path></svg><div class="dt l">Write</div></div></a></span></div></div><div class="k j i d"><div class="fi ab"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerSearchButton" href="https://medium.com/search?source=---top_nav_layout_nav----------------------------------" rel="noopener follow"><div class="bf b bg z du fj fk ab q fl fm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" aria-label="Search"><path fill="currentColor" fill-rule="evenodd" d="M4.092 11.06a6.95 6.95 0 1 1 13.9 0 6.95 6.95 0 0 1-13.9 0m6.95-8.05a8.05 8.05 0 1 0 5.13 14.26l3.75 3.75a.56.56 0 1 0 .79-.79l-3.73-3.73A8.05 8.05 0 0 0 11.042 3z" clip-rule="evenodd"></path></svg></div></a></div></div><div class="fi h k j"><div class="ab q"><p class="bf b dx dy dz ea eb ec ed ee ef eg du"><span><a class="bf b dx dy eh dz ea ei eb ec ej ek ee el em eg eo ep eq er es et eu ev ew ex ey ez fa fb fc fd bm fe ff" data-testid="headerSignUpButton" href="https://medium.com/m/signin?operation=register&amp;redirect=https%3A%2F%2Fuxdesign.cc%2Fthe-root-causes-for-the-dev-design-mismatch-4c66e0fa6740&amp;source=post_page---top_nav_layout_nav-----------------------global_nav-----------" rel="noopener follow">Sign up</a></span></p><div class="ax l"><p class="bf b dx dy dz ea eb ec ed ee ef eg du"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerSignInButton" href="https://medium.com/m/signin?operation=login&amp;redirect=https%3A%2F%2Fuxdesign.cc%2Fthe-root-causes-for-the-dev-design-mismatch-4c66e0fa6740&amp;source=post_page---top_nav_layout_nav-----------------------global_nav-----------" rel="noopener follow">Sign in</a></span></p></div></div></div><div class="l" aria-hidden="false"><button class="ay fn am ab q ao fo fp fq" aria-label="user options menu" data-testid="headerUserIcon"><div class="l fj"><img alt="" class="l fd by bz ca cx" src="https://miro.medium.com/v2/resize:fill:64:64/1*dmbNkD5D-u45r44go_cf0g.png" width="32" height="32" loading="lazy" role="presentation"/><div class="fr by l bz ca fs n ay ft"></div></div></button></div></div></div><div class="l"><div class="fu fv fw fx fy l"><div class="ab cb"><div class="ci bh fz ga gb gc"></div></div><article><div class="l"><div class="l"><span class="l"></span><section><div><div class="fs gi gj gk gl gm"></div><div class="gn go gp gq gr"><div class="ab cb"><div class="ci bh fz ga gb gc"><div><h1 id="3dc0" class="pw-post-title gs gt gu bf gv gw gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq bk" data-testid="storyTitle">The root causes for the dev-design mismatch</h1></div><div><h2 id="df44" class="pw-subtitle-paragraph hr gt gu bf b hs ht hu hv hw hx hy hz ia ib ic id ie if ig cq du">Designers use an unconstrained canvas tool to design for rule-based interactive systems, hoping the devs will perfect everything in production. This causes misalignment between designers and devs.</h2><div><div class="speechify-ignore ab cp"><div class="speechify-ignore bh l"><div class="ih ii ij ik il ab"><div><div class="ab im"><div><div class="bm" aria-hidden="false"><a href="https://medium.com/@erezreznikov?source=post_page---byline--4c66e0fa6740--------------------------------" rel="noopener follow"><div class="l in io by ip iq"><div class="l fj"><img alt="Erez Reznikov" class="l fd by dd de cx" src="https://miro.medium.com/v2/resize:fill:88:88/1*xAQ1gGumKbKEY10sLhSJyQ.jpeg" width="44" height="44" loading="lazy" data-testid="authorPhoto"/><div class="ir by l dd de fs n is ft"></div></div></div></a></div></div><div class="it ab fj"><div><div class="bm" aria-hidden="false"><a href="https://uxdesign.cc/?source=post_page---byline--4c66e0fa6740--------------------------------" rel="noopener follow"><div class="l iu iv by ip iw"><div class="l fj"><img alt="UX Collective" class="l fd by br ix cx" src="https://miro.medium.com/v2/resize:fill:48:48/1*mDhF9X4VO0rCrJvWFatyxg.png" width="24" height="24" loading="lazy" data-testid="publicationPhoto"/><div class="ir by l br ix fs n is ft"></div></div></div></a></div></div></div></div></div><div class="bn bh l"><div class="ab"><div style="flex:1"><span class="bf b bg z bk"><div class="iy ab q"><div class="ab q iz"><div class="ab q"><div><div class="bm" aria-hidden="false"><p class="bf b ja jb bk"><a class="af ag ah ai aj ak al am an ao ap aq ar jc" data-testid="authorName" href="https://medium.com/@erezreznikov?source=post_page---byline--4c66e0fa6740--------------------------------" rel="noopener follow">Erez Reznikov</a></p></div></div></div><span class="jd je" aria-hidden="true"><span class="bf b bg z du">·</span></span><p class="bf b ja jb du"><span><a class="jf jg ah ai aj ak al am an ao ap aq ar ex jh ji" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fuser%2F1a7046474bbe&amp;operation=register&amp;redirect=https%3A%2F%2Fuxdesign.cc%2Fthe-root-causes-for-the-dev-design-mismatch-4c66e0fa6740&amp;user=Erez+Reznikov&amp;userId=1a7046474bbe&amp;source=post_page-1a7046474bbe--byline--4c66e0fa6740---------------------post_header-----------" rel="noopener follow">Follow</a></span></p></div></div></span></div></div><div class="l jj"><span class="bf b bg z du"><div class="ab cn jk jl jm"><div class="jn jo ab"><div class="bf b bg z du ab jp"><span class="jq l jj">Published in</span><div><div class="l" aria-hidden="false"><a class="af ag ah ai aj ak al am an ao ap aq ar jc ab q" data-testid="publicationName" href="https://uxdesign.cc/?source=post_page---byline--4c66e0fa6740--------------------------------" rel="noopener follow"><p class="bf b bg z jr js jt ju jv jw jx jy bk">UX Collective</p></a></div></div></div><div class="h k"><span class="jd je" aria-hidden="true"><span class="bf b bg z du">·</span></span></div></div><span class="bf b bg z du"><div class="ab ae"><span data-testid="storyReadTime">11 min read</span><div class="jz ka l" aria-hidden="true"><span class="l" aria-hidden="true"><span class="bf b bg z du">·</span></span></div>6 days ago</div></span></div></span></div></div></div><div class="ab cp kb kc kd ke kf kg kh ki kj kk kl km kn ko kp kq"><div class="h k w fg fh q"><div class="lg l"><div class="ab q lh li"><div class="pw-multi-vote-icon fj jq lj lk ll"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerClapButton" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fuser-experience-design-1%2F4c66e0fa6740&amp;operation=register&amp;redirect=https%3A%2F%2Fuxdesign.cc%2Fthe-root-causes-for-the-dev-design-mismatch-4c66e0fa6740&amp;user=Erez+Reznikov&amp;userId=1a7046474bbe&amp;source=---header_actions--4c66e0fa6740---------------------clap_footer-----------" rel="noopener follow"><div><div class="bm" aria-hidden="false"><div class="lm ao ln lo lp lq am lr ls lt ll"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-label="clap"><path fill-rule="evenodd" d="M11.37.828 12 3.282l.63-2.454zM13.916 3.953l1.523-2.112-1.184-.39zM8.589 1.84l1.522 2.112-.337-2.501zM18.523 18.92c-.86.86-1.75 1.246-2.62 1.33a6 6 0 0 0 .407-.372c2.388-2.389 2.86-4.951 1.399-7.623l-.912-1.603-.79-1.672c-.26-.56-.194-.98.203-1.288a.7.7 0 0 1 .546-.132c.283.046.546.231.728.5l2.363 4.157c.976 1.624 1.141 4.237-1.324 6.702m-10.999-.438L3.37 14.328a.828.828 0 0 1 .585-1.408.83.83 0 0 1 .585.242l2.158 2.157a.365.365 0 0 0 .516-.516l-2.157-2.158-1.449-1.449a.826.826 0 0 1 1.167-1.17l3.438 3.44a.363.363 0 0 0 .516 0 .364.364 0 0 0 0-.516L5.293 9.513l-.97-.97a.826.826 0 0 1 0-1.166.84.84 0 0 1 1.167 0l.97.968 3.437 3.436a.36.36 0 0 0 .517 0 .366.366 0 0 0 0-.516L6.977 7.83a.82.82 0 0 1-.241-.584.82.82 0 0 1 .824-.826c.219 0 .43.087.584.242l5.787 5.787a.366.366 0 0 0 .587-.415l-1.117-2.363c-.26-.56-.194-.98.204-1.289a.7.7 0 0 1 .546-.132c.283.046.545.232.727.501l2.193 3.86c1.302 2.38.883 4.59-1.277 6.75-1.156 1.156-2.602 1.627-4.19 1.367-1.418-.236-2.866-1.033-4.079-2.246M10.75 5.971l2.12 2.12c-.41.502-.465 1.17-.128 1.89l.22.465-3.523-3.523a.8.8 0 0 1-.097-.368c0-.22.086-.428.241-.584a.847.847 0 0 1 1.167 0m7.355 1.705c-.31-.461-.746-.758-1.23-.837a1.44 1.44 0 0 0-1.11.275c-.312.24-.505.543-.59.881a1.74 1.74 0 0 0-.906-.465 1.47 1.47 0 0 0-.82.106l-2.182-2.182a1.56 1.56 0 0 0-2.2 0 1.54 1.54 0 0 0-.396.701 1.56 1.56 0 0 0-2.21-.01 1.55 1.55 0 0 0-.416.753c-.624-.624-1.649-.624-2.237-.037a1.557 1.557 0 0 0 0 2.2c-.239.1-.501.238-.715.453a1.56 1.56 0 0 0 0 2.2l.516.515a1.556 1.556 0 0 0-.753 2.615L7.01 19c1.32 1.319 2.909 2.189 4.475 2.449q.482.08.971.08c.85 0 1.653-.198 2.393-.579.231.033.46.054.686.054 1.266 0 2.457-.52 3.505-1.567 2.763-2.763 2.552-5.734 1.439-7.586z" clip-rule="evenodd"></path></svg></div></div></div></a></span></div><div class="pw-multi-vote-count l lu lv lw lx ly lz ma"><p class="bf b dv z du"><span class="mb">--</span></p></div></div></div><div><div class="bm" aria-hidden="false"><button class="ao lm me mf ab q fk mg mh" aria-label="responses"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="md"><path d="M18.006 16.803c1.533-1.456 2.234-3.325 2.234-5.321C20.24 7.357 16.709 4 12.191 4S4 7.357 4 11.482c0 4.126 3.674 7.482 8.191 7.482.817 0 1.622-.111 2.393-.327.231.2.48.391.744.559 1.06.693 2.203 1.044 3.399 1.044.224-.008.4-.112.486-.287a.49.49 0 0 0-.042-.518c-.495-.67-.845-1.364-1.04-2.057a4 4 0 0 1-.125-.598zm-3.122 1.055-.067-.223-.315.096a8 8 0 0 1-2.311.338c-4.023 0-7.292-2.955-7.292-6.587 0-3.633 3.269-6.588 7.292-6.588 4.014 0 7.112 2.958 7.112 6.593 0 1.794-.608 3.469-2.027 4.72l-.195.168v.255c0 .056 0 .151.016.295.025.231.081.478.154.733.154.558.398 1.117.722 1.659a5.3 5.3 0 0 1-2.165-.845c-.276-.176-.714-.383-.941-.59z"></path></svg><p class="bf b dv z du"><span class="pw-responses-count mc md">17</span></p></button></div></div></div><div class="ab q kr ks kt ku kv kw kx ky kz la lb lc ld le lf"><div class="mi k j i d"></div><div class="h k"><div><div class="bm" aria-hidden="false"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerBookmarkButton" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2F4c66e0fa6740&amp;operation=register&amp;redirect=https%3A%2F%2Fuxdesign.cc%2Fthe-root-causes-for-the-dev-design-mismatch-4c66e0fa6740&amp;source=---header_actions--4c66e0fa6740---------------------bookmark_footer-----------" rel="noopener follow"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 25 25" class="du mj" aria-label="Add to list bookmark button"><path fill="currentColor" d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .805.396L12.5 17l5.695 4.396A.5.5 0 0 0 19 21v-8.5a.5.5 0 0 0-1 0v7.485l-5.195-4.012a.5.5 0 0 0-.61 0L7 19.985z"></path></svg></a></span></div></div></div><div class="fd mk cn"><div class="l ae"><div class="ab cb"><div class="ml mm mn mo mp mq ci bh"><div class="ab"><div class="bm bh" aria-hidden="false"><div><div class="bm" aria-hidden="false"><button aria-label="Listen" data-testid="audioPlayButton" class="af fk ah ai aj ak al mr an ao ap ex ms mt mh mu mv mw mx my s mz na nb nc nd ne nf u ng nh ni"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M3 12a9 9 0 1 1 18 0 9 9 0 0 1-18 0m9-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m3.376 10.416-4.599 3.066a.5.5 0 0 1-.777-.416V8.934a.5.5 0 0 1 .777-.416l4.599 3.066a.5.5 0 0 1 0 .832" clip-rule="evenodd"></path></svg><div class="j i d"><p class="bf b bg z du">Listen</p></div></button></div></div></div></div></div></div></div></div><div class="bm" aria-hidden="false" aria-describedby="postFooterSocialMenu" aria-labelledby="postFooterSocialMenu"><div><div class="bm" aria-hidden="false"><button aria-controls="postFooterSocialMenu" aria-expanded="false" aria-label="Share Post" data-testid="headerSocialShareButton" class="af fk ah ai aj ak al mr an ao ap ex ms mt mh mu mv mw mx my s mz na nb nc nd ne nf u ng nh ni"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M15.218 4.931a.4.4 0 0 1-.118.132l.012.006a.45.45 0 0 1-.292.074.5.5 0 0 1-.3-.13l-2.02-2.02v7.07c0 .28-.23.5-.5.5s-.5-.22-.5-.5v-7.04l-2 2a.45.45 0 0 1-.57.04h-.02a.4.4 0 0 1-.16-.3.4.4 0 0 1 .1-.32l2.8-2.8a.5.5 0 0 1 .7 0l2.8 2.79a.42.42 0 0 1 .068.498m-.106.138.008.004v-.01zM16 7.063h1.5a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-11c-1.1 0-2-.9-2-2v-10a2 2 0 0 1 2-2H8a.5.5 0 0 1 .35.15.5.5 0 0 1 .15.35.5.5 0 0 1-.15.35.5.5 0 0 1-.35.15H6.4c-.5 0-.9.4-.9.9v10.2a.9.9 0 0 0 .9.9h11.2c.5 0 .9-.4.9-.9v-10.2c0-.5-.4-.9-.9-.9H16a.5.5 0 0 1 0-1" clip-rule="evenodd"></path></svg><div class="j i d"><p class="bf b bg z du">Share</p></div></button></div></div></div></div></div></div></div></div></div></div></div><div class="nj"><div class="ab cb"><div class="ml nk mm nl mn nm cf nn cg no ci bh"><figure class="ns nt nu nv nw nj nx ny paragraph-image"><div role="button" tabindex="0" class="nz oa fj ob bh oc"><div class="np nq nr"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*DL0odu-2eILPZXCM1GXzbA.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*DL0odu-2eILPZXCM1GXzbA.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*DL0odu-2eILPZXCM1GXzbA.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*DL0odu-2eILPZXCM1GXzbA.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*DL0odu-2eILPZXCM1GXzbA.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*DL0odu-2eILPZXCM1GXzbA.png 1100w, https://miro.medium.com/v2/resize:fit:2000/format:webp/1*DL0odu-2eILPZXCM1GXzbA.png 2000w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*DL0odu-2eILPZXCM1GXzbA.png 640w, https://miro.medium.com/v2/resize:fit:720/1*DL0odu-2eILPZXCM1GXzbA.png 720w, https://miro.medium.com/v2/resize:fit:750/1*DL0odu-2eILPZXCM1GXzbA.png 750w, https://miro.medium.com/v2/resize:fit:786/1*DL0odu-2eILPZXCM1GXzbA.png 786w, https://miro.medium.com/v2/resize:fit:828/1*DL0odu-2eILPZXCM1GXzbA.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*DL0odu-2eILPZXCM1GXzbA.png 1100w, https://miro.medium.com/v2/resize:fit:2000/1*DL0odu-2eILPZXCM1GXzbA.png 2000w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px"/><img alt="Cover image illustrating the overlap between design and development worlds" class="bh mq od c" width="1000" height="590" loading="eager"/></picture></div></div></figure></div></div></div><div class="ab cb"><div class="ci bh fz ga gb gc"><p id="c3b3" class="pw-post-body-paragraph oe of gu og b hs oh oi oj hv ok ol om on oo op oq or os ot ou ov ow ox oy oz gn bk">There are two persistent issues that keep plaguing the product design and development worlds. The first one is very much on the surface, and thus — no surprise — gets both a lot of attention and a plethora of sometimes reasonable solutions. The second one is much deeper, more subtle, and easier to miss.</p><h1 id="5f52" class="pa pb gu bf pc pd pe hu pf pg ph hx pi pj pk pl pm pn po pp pq pr ps pt pu pv bk">Let’s start with the first one — the handoff problem.</h1><p id="de44" class="pw-post-body-paragraph oe of gu og b hs pw oi oj hv px ol om on py op oq or pz ot ou ov qa ox oy oz gn bk">There are, in fact, several reasons why the handoff process is a major problem:</p><ol class=""><li id="45cd" class="oe of gu og b hs oh oi oj hv ok ol om on oo op oq or os ot ou ov ow ox oy oz qb qc qd bk">Friction, and with it the potential for mistakes in a handoff, causes the actual coded products to differ from the designers’ intentions, as captured in their design tool. The only experience that matters is that of real users with the real-coded product. Not getting the designs perfectly reflected in the final product makes the process ineffective and demoralizing.</li><li id="16ed" class="oe of gu og b hs qe oi oj hv qf ol om on qg op oq or qh ot ou ov qi ox oy oz qb qc qd bk">Handoff wastes a lot of time for designers and developers. It takes a lot of mental effort to encode and decode all the relevant info for building the screens correctly. A designer must over-communicate with specs, examples, comments, and documentation, while a developer must inspect the designs with paranoid, detective-level vigilance, sometimes squinting to avoid missing anything.</li><li id="246d" class="oe of gu og b hs qe oi oj hv qf ol om on qg op oq or qh ot ou ov qi ox oy oz qb qc qd bk">Handing designs to developers to build from scratch creates a redundant, atrophied artifact. Once the code is live, it diverges from the source of truth, creating a never-ending race to ensure the design file and the ‘reality’ match. When that pairing is inevitably broken, a chain of mistrust builds. Developers see outdated designs and feel justified in ignoring parts that seem out of touch with ‘reality.’ As a result, designers become hyper-vigilant, hunting for mismatches between the design and the implementation. This occurs frequently when developers choose a library as the optimal solution for a component and do not properly match the specified styling.</li><li id="ff4e" class="oe of gu og b hs qe oi oj hv qf ol om on qg op oq or qh ot ou ov qi ox oy oz qb qc qd bk">The need to hand designs over forces designers to waste time on things they usually don’t like or value that much. It’s not the peak of creativity to specify and document all the ways a text field should be able to render in the product. Especially knowing that this is not the actual thing being built, but only a disposable artifact. It forces front-end developers to focus on tasks of little joy or meaning as well. Recreating an already designed screen in code while chasing down designers to verify how things should reflow when the viewport gets smaller or larger is no fun either.</li></ol><p id="6d94" class="pw-post-body-paragraph oe of gu og b hs oh oi oj hv ok ol om on oo op oq or os ot ou ov ow ox oy oz gn bk">Since those problems are quite clear, the motivation for solving them was, and still is, high.</p><p id="1f9f" class="pw-post-body-paragraph oe of gu og b hs oh oi oj hv ok ol om on oo op oq or os ot ou ov ow ox oy oz gn bk">And so there were two general directions for solutions that the market allowed to evolve:</p><p id="3d54" class="pw-post-body-paragraph oe of gu og b hs oh oi oj hv ok ol om on oo op oq or os ot ou ov ow ox oy oz gn bk">One was a path of helper apps to the most popular canvas design tools. It started with tools for easier inspection (<a class="af qj" href="https://www.linkedin.com/company/avocode-inc-/?originalSubdomain=il" rel="noopener ugc nofollow" target="_blank">Avocode</a>, <a class="af qj" href="https://zeplin.io/" rel="noopener ugc nofollow" target="_blank">Zeplin</a>, <a class="af qj" href="https://sympli.io/" rel="noopener ugc nofollow" target="_blank">Simpli</a>, <a class="af qj" href="https://www.abstract.com/" rel="noopener ugc nofollow" target="_blank">Abstract</a>). Then, design tools added inspection features (like Dev Mode in Figma, Sketch, XD, and InVision). After that, specific tools appeared. These included <a class="af qj" href="https://zeroheight.com/" rel="noopener ugc nofollow" target="_blank">Zeroheight</a> and InVision’s DSM for easier documentation. Many plugins also emerged in the Sketch and Figma marketplaces, like Anima, Locofy, and other ‘Figma-to-HTML’ tools.</p></div></div><div class="nj"><div class="ab cb"><div class="ml nk mm nl mn nm cf nn cg no ci bh"><figure class="ns nt nu nv nw nj nx ny paragraph-image"><div role="button" tabindex="0" class="nz oa fj ob bh oc"><div class="np nq nr"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*7La6kbU0jzyj6yE7QugdAw.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*7La6kbU0jzyj6yE7QugdAw.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*7La6kbU0jzyj6yE7QugdAw.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*7La6kbU0jzyj6yE7QugdAw.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*7La6kbU0jzyj6yE7QugdAw.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*7La6kbU0jzyj6yE7QugdAw.png 1100w, https://miro.medium.com/v2/resize:fit:2000/format:webp/1*7La6kbU0jzyj6yE7QugdAw.png 2000w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*7La6kbU0jzyj6yE7QugdAw.png 640w, https://miro.medium.com/v2/resize:fit:720/1*7La6kbU0jzyj6yE7QugdAw.png 720w, https://miro.medium.com/v2/resize:fit:750/1*7La6kbU0jzyj6yE7QugdAw.png 750w, https://miro.medium.com/v2/resize:fit:786/1*7La6kbU0jzyj6yE7QugdAw.png 786w, https://miro.medium.com/v2/resize:fit:828/1*7La6kbU0jzyj6yE7QugdAw.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*7La6kbU0jzyj6yE7QugdAw.png 1100w, https://miro.medium.com/v2/resize:fit:2000/1*7La6kbU0jzyj6yE7QugdAw.png 2000w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px"/><img alt="diagram of helper apps vs end to end apps" class="bh mq od c" width="1000" height="589" loading="eager"/></picture></div></div></figure></div></div></div><div class="ab cb"><div class="ci bh fz ga gb gc"><p id="0db0" class="pw-post-body-paragraph oe of gu og b hs oh oi oj hv ok ol om on oo op oq or os ot ou ov ow ox oy oz gn bk">The other path was entirely different in nature. It sought to eliminate the handoff altogether by creating a new breed of design tools that were able to ‘ship end-to-end’ by themselves with little to no help from developers. The most prominent and robust nowadays would be Webflow and Framer, but there is a whole slew of them, starting with Dreamweaver some 25 years ago.</p><p id="37a7" class="pw-post-body-paragraph oe of gu og b hs oh oi oj hv ok ol om on oo op oq or os ot ou ov ow ox oy oz gn bk">The biggest issue with all these no-code / low-code tools was, and still is, that the way they’re built not only eliminates the handoff, but also the need for developers themselves. This, naturally, created a pretty low ceiling for the complexity of the products these tools can allow designers to build end-to-end. Primarily for this reason, the <a class="af qj" href="https://eulerpool.com/en/stock/Wix.Com-Stock-IL0011301780/Marketcapitalization" rel="noopener ugc nofollow" target="_blank">monetary success</a> followed <a class="af qj" href="https://www.thezerotoone.co/p/how-webflow-grows-gtm" rel="noopener ugc nofollow" target="_blank">website building tools</a>, rather than native iOS / Android or web app building tools (at this stage I’m only aware of <a class="af qj" href="https://createwithplay.com/" rel="noopener ugc nofollow" target="_blank">Play</a> for iOS and <a class="af qj" href="https://draftbit.com/" rel="noopener ugc nofollow" target="_blank">Draftbit</a>). The chief reason for this, as I can make sense of it, is that in apps the logical complexity exceeds the ability of the no-code tools to deliver. In the last few years, some vertical tools like <a class="af qj" href="https://www.framer.com/solutions/figma-to-html/" rel="noopener ugc nofollow" target="_blank">Framer</a>, <a class="af qj" href="https://university.webflow.com/lesson/figma-to-webflow-plugin?topics=layout-design" rel="noopener ugc nofollow" target="_blank">Webflow</a>, <a class="af qj" href="https://www.builder.io/m/design-to-code" rel="noopener ugc nofollow" target="_blank">Builder.io</a> started building ‘bridges’ as an import ability from canvas tools like Figma, using their own plugins.</p><p id="7f57" class="pw-post-body-paragraph oe of gu og b hs oh oi oj hv ok ol om on oo op oq or os ot ou ov ow ox oy oz gn bk">And so, the space of solutions for the handoff problem has a trade-off in the middle of its heart:</p><blockquote class="qk ql qm"><p id="768e" class="oe of qn og b hs oh oi oj hv ok ol om on oo op oq or os ot ou ov ow ox oy oz gn bk"><em class="gu">You either have a generic canvas tool that allows you to design the most complex apps in the world, but the design is only an artifact and necessitates a handoff, or you have a specialized builder tool that frees you to design and develop by yourself, but it has a low ceiling of complexity for the product you want to create.</em></p></blockquote></div></div><div class="nj"><div class="ab cb"><div class="ml nk mm nl mn nm cf nn cg no ci bh"><figure class="ns nt nu nv nw nj nx ny paragraph-image"><div role="button" tabindex="0" class="nz oa fj ob bh oc"><div class="np nq nr"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*GE4vWD3070W9L4pIDMPEDw.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*GE4vWD3070W9L4pIDMPEDw.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*GE4vWD3070W9L4pIDMPEDw.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*GE4vWD3070W9L4pIDMPEDw.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*GE4vWD3070W9L4pIDMPEDw.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*GE4vWD3070W9L4pIDMPEDw.png 1100w, https://miro.medium.com/v2/resize:fit:2000/format:webp/1*GE4vWD3070W9L4pIDMPEDw.png 2000w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*GE4vWD3070W9L4pIDMPEDw.png 640w, https://miro.medium.com/v2/resize:fit:720/1*GE4vWD3070W9L4pIDMPEDw.png 720w, https://miro.medium.com/v2/resize:fit:750/1*GE4vWD3070W9L4pIDMPEDw.png 750w, https://miro.medium.com/v2/resize:fit:786/1*GE4vWD3070W9L4pIDMPEDw.png 786w, https://miro.medium.com/v2/resize:fit:828/1*GE4vWD3070W9L4pIDMPEDw.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*GE4vWD3070W9L4pIDMPEDw.png 1100w, https://miro.medium.com/v2/resize:fit:2000/1*GE4vWD3070W9L4pIDMPEDw.png 2000w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px"/><img alt="A diagram illustrating the tradeoff between generic and wide and specific and narrow apps" class="bh mq od c" width="1000" height="589" loading="eager"/></picture></div></div></figure></div></div></div><div class="ab cb"><div class="ci bh fz ga gb gc"><p id="927f" class="pw-post-body-paragraph oe of gu og b hs oh oi oj hv ok ol om on oo op oq or os ot ou ov ow ox oy oz gn bk">As far as I’m aware, there have only been two design/development tools that successfully incorporated a different, unifying strategy.</p><ol class=""><li id="e1fa" class="oe of gu og b hs oh oi oj hv ok ol om on oo op oq or os ot ou ov ow ox oy oz qb qc qd bk">Flash (created by Macromedia, succeeded by Adobe, killed by Steve Jobs)</li><li id="05e9" class="oe of gu og b hs qe oi oj hv qf ol om on qg op oq or qh ot ou ov qi ox oy oz qb qc qd bk">Blend for Visual Studio using XAML and the WPF platform from Microsoft.</li></ol><p id="0bd8" class="pw-post-body-paragraph oe of gu og b hs oh oi oj hv ok ol om on oo op oq or os ot ou ov ow ox oy oz gn bk">Flash had ActionScript that allowed the same object to be freely designed by the designer and logically manipulated using ActionScript commands by the developer. This setup let all the relevant pros do their jobs. The designers focused on what was important, both experientially and visually. They didn’t need to hand off anything to developers, since they could just target the existing assets created by the designers. No throwaway artifacts, no handoff, and no limit to the complexity. Flash didn’t try to code for you. It allowed developers to pick up where designers maxed out their comfort zone.</p><p id="344e" class="pw-post-body-paragraph oe of gu og b hs oh oi oj hv ok ol om on oo op oq or os ot ou ov ow ox oy oz gn bk">Blend for Visual Studio had a similar story, but with different files, structures, and logic. It was a twin-environment setup. The designers could design, and the Visual Studio developers could target the exact same assets. Again, no handoff, no throwaway artifacts, and no limits on complexity.</p><p id="a296" class="pw-post-body-paragraph oe of gu og b hs oh oi oj hv ok ol om on oo op oq or os ot ou ov ow ox oy oz gn bk">As we all know, Flash died because of security and performance incompatibility with the iPhone. Blend and Visual Studio are now niche, unpopular tools. In all the surveys of tool usage in the last 7 years, I haven’t seen a single mention of them. Meanwhile, <a class="af qj" href="https://uxtools.co/survey/2023/ui-design/#ui-design-tools-graph" rel="noopener ugc nofollow" target="_blank">Figma has taken almost all the product design market share</a>).</p><p id="b6d8" class="pw-post-body-paragraph oe of gu og b hs oh oi oj hv ok ol om on oo op oq or os ot ou ov ow ox oy oz gn bk">This has to lead us to the conclusion that the tools with the best approach are still not immune to failing for all sorts of other reasons. Business is a fickle and unpredictable game, indeed.</p><p id="1c73" class="pw-post-body-paragraph oe of gu og b hs oh oi oj hv ok ol om on oo op oq or os ot ou ov ow ox oy oz gn bk">Now, as I’ve stated at the beginning, there are two persistent issues that keep plaguing the product design and development worlds. Let’s explore the more hidden, but an even more important issue:</p><h1 id="7aa5" class="pa pb gu bf pc pd pe hu pf pg ph hx pi pj pk pl pm pn po pp pq pr ps pt pu pv bk">Naive canvas-based tools hide the vast spectrum of design properties from designers.</h1></div></div><div class="nj"><div class="ab cb"><div class="ml nk mm nl mn nm cf nn cg no ci bh"><figure class="ns nt nu nv nw nj nx ny paragraph-image"><div role="button" tabindex="0" class="nz oa fj ob bh oc"><div class="np nq nr"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*RtQ52abdCypy6zM8nt1Gcg.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*RtQ52abdCypy6zM8nt1Gcg.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*RtQ52abdCypy6zM8nt1Gcg.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*RtQ52abdCypy6zM8nt1Gcg.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*RtQ52abdCypy6zM8nt1Gcg.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*RtQ52abdCypy6zM8nt1Gcg.png 1100w, https://miro.medium.com/v2/resize:fit:2000/format:webp/1*RtQ52abdCypy6zM8nt1Gcg.png 2000w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*RtQ52abdCypy6zM8nt1Gcg.png 640w, https://miro.medium.com/v2/resize:fit:720/1*RtQ52abdCypy6zM8nt1Gcg.png 720w, https://miro.medium.com/v2/resize:fit:750/1*RtQ52abdCypy6zM8nt1Gcg.png 750w, https://miro.medium.com/v2/resize:fit:786/1*RtQ52abdCypy6zM8nt1Gcg.png 786w, https://miro.medium.com/v2/resize:fit:828/1*RtQ52abdCypy6zM8nt1Gcg.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*RtQ52abdCypy6zM8nt1Gcg.png 1100w, https://miro.medium.com/v2/resize:fit:2000/1*RtQ52abdCypy6zM8nt1Gcg.png 2000w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px"/><img alt="Illustration of part of a wider spectrum of all the possible design properties" class="bh mq od c" width="1000" height="589" loading="eager"/></picture></div></div></figure></div></div></div><div class="ab cb"><div class="ci bh fz ga gb gc"><p id="0531" class="pw-post-body-paragraph oe of gu og b hs oh oi oj hv ok ol om on oo op oq or os ot ou ov ow ox oy oz gn bk">The ramifications of this problem are large. But it’s not a malicious plot to keep designers blissfully ignorant — it’s the bad side of a tradeoff that designers used to only look at its good side. Freedom. And boy, do designers love their freedom. I know I do.</p><p id="5e70" class="pw-post-body-paragraph oe of gu og b hs oh oi oj hv ok ol om on oo op oq or os ot ou ov ow ox oy oz gn bk">It is important to realize how we got to where we are with the canvas tools that have become so ubiquitous in the industry.</p><p id="aff3" class="pw-post-body-paragraph oe of gu og b hs oh oi oj hv ok ol om on oo op oq or os ot ou ov ow ox oy oz gn bk">We started with a physical page. Paper, ink, and colors manipulated to perfection by graphic designers. The page was static, concrete, well-defined, and never changing. Then graphic programs arrived to help speed things up — Photoshop, Freehand, Corel Draw, Illustrator (and many more after those). All helped us design printed and mostly static web assets. Then, something important happened. Computers began to diverge in screen sizes. The internet and native apps had to adapt. They introduced responsive units and rules. It all escalated even more after the introduction of the iPhone and tablets. But the designers, graphic and early-interactive designers that is, were hooked on the page metaphor. Naturally, the revenue-powered design tools kept giving them exactly that. The ease of direct manipulation (first with a mouse and keyboard, then with finger gestures and a stylus) was too comfortable to give up for other benefits. This led to a mismatch where designers were encouraged by the tools to have freedom, while the demand now was for responsive, systematic, smart, parametric design rules — for developers to implement.</p><p id="1928" class="pw-post-body-paragraph oe of gu og b hs oh oi oj hv ok ol om on oo op oq or os ot ou ov ow ox oy oz gn bk">And this is where the great divide becomes clear because:</p><blockquote class="qk ql qm"><p id="b4b2" class="oe of qn og b hs oh oi oj hv ok ol om on oo op oq or os ot ou ov ow ox oy oz gn bk"><em class="gu">The set of tools and abilities that maximize intuitive, freeform graphic manipulation is exactly the opposite of the set of tools that help define coherent, robust, flexible, and parametric systems.</em></p></blockquote><p id="a0c0" class="pw-post-body-paragraph oe of gu og b hs oh oi oj hv ok ol om on oo op oq or os ot ou ov ow ox oy oz gn bk">Think about the very basic nature of ‘gravitation’: in all the main canvas tools up until the introduction of Figma’s auto-layout a few years ago, the freedom meant that there was no gravitational pull either upwards or downwards. Very much unlike both the web and the native iOS and Android environments.</p></div></div><div class="nj"><div class="ab cb"><div class="ml nk mm nl mn nm cf nn cg no ci bh"><figure class="ns nt nu nv nw nj nx ny paragraph-image"><div role="button" tabindex="0" class="nz oa fj ob bh oc"><div class="np nq nr"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*oJ87o9W-pk5eYU2GLAIbew.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*oJ87o9W-pk5eYU2GLAIbew.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*oJ87o9W-pk5eYU2GLAIbew.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*oJ87o9W-pk5eYU2GLAIbew.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*oJ87o9W-pk5eYU2GLAIbew.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*oJ87o9W-pk5eYU2GLAIbew.png 1100w, https://miro.medium.com/v2/resize:fit:2000/format:webp/1*oJ87o9W-pk5eYU2GLAIbew.png 2000w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*oJ87o9W-pk5eYU2GLAIbew.png 640w, https://miro.medium.com/v2/resize:fit:720/1*oJ87o9W-pk5eYU2GLAIbew.png 720w, https://miro.medium.com/v2/resize:fit:750/1*oJ87o9W-pk5eYU2GLAIbew.png 750w, https://miro.medium.com/v2/resize:fit:786/1*oJ87o9W-pk5eYU2GLAIbew.png 786w, https://miro.medium.com/v2/resize:fit:828/1*oJ87o9W-pk5eYU2GLAIbew.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*oJ87o9W-pk5eYU2GLAIbew.png 1100w, https://miro.medium.com/v2/resize:fit:2000/1*oJ87o9W-pk5eYU2GLAIbew.png 2000w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px"/><img alt="Illustration of a difference between Canvas and DOM environment" class="bh mq od c" width="1000" height="589" loading="eager"/></picture></div></div></figure></div></div></div><div class="ab cb"><div class="ci bh fz ga gb gc"><p id="3dad" class="pw-post-body-paragraph oe of gu og b hs oh oi oj hv ok ol om on oo op oq or os ot ou ov ow ox oy oz gn bk">When you have no gravitation, the default mode of everything is to be absolutely positioned in gradual z-index order, one on top of the other. Nothing pushes anything else. Nothing interacts. Paddings and margins don’t mean anything. Text doesn’t make boxes get larger when more words are typed in. Since there’s no viewport, no viewport-related measurements can be used; even percentages are almost never used. So almost nothing is relative.</p><p id="5c3b" class="pw-post-body-paragraph oe of gu og b hs oh oi oj hv ok ol om on oo op oq or os ot ou ov ow ox oy oz gn bk">Slowly, UI-friendly tools started appearing. Sketch opened the door for both XD and Figma. It did this by using components, overrides, a generic mapping of frame = div, and more visual qualities that can be parameterized (colors, typography, effects, and layout grids in Figma). It was a breath of fresh air, but the challenges rose in tandem with the tools.</p><p id="1982" class="pw-post-body-paragraph oe of gu og b hs oh oi oj hv ok ol om on oo op oq or os ot ou ov ow ox oy oz gn bk">The most technical designers felt the pressure to start experimenting with code by themselves. This gave them superpowers because it informed their otherwise naive stance about how the real world of UI programming works. A push towards getting more robust tools was felt, and the leading tools (Sketch, Figma, and XD) introduced Auto Layout, which was a slightly capped but friendly version of Flexbox. It was like having a mini-universe with DOM-like gravity inside a capsuled ‘auto-layout-enabled frame,’ inside a universe of a do-whatever-you-like canvas.</p><p id="6f74" class="pw-post-body-paragraph oe of gu og b hs oh oi oj hv ok ol om on oo op oq or os ot ou ov ow ox oy oz gn bk">This was revolutionary. Designers began to consider how content affects container sizes. Layout reflow became more robust, and finally, padding mattered.</p><p id="e797" class="pw-post-body-paragraph oe of gu og b hs oh oi oj hv ok ol om on oo op oq or os ot ou ov ow ox oy oz gn bk">Savvy designers started building almost everything they had in the UI using auto-layout.</p><h1 id="0f47" class="pa pb gu bf pc pd pe hu pf pg ph hx pi pj pk pl pm pn po pp pq pr ps pt pu pv bk">Now, let that sink in for a second…</h1><p id="48c7" class="pw-post-body-paragraph oe of gu og b hs pw oi oj hv px ol om on py op oq or pz ot ou ov qa ox oy oz gn bk">In a universe with no gravitation, we are creating almost everything as a bunch of microuniverses with gravitation! Wouldn’t it be so much easier if the base default reality was the one with the gravitation, sort of auto layout by default!? Oh wait, that’s exactly how the web, iOS, and Android already work.</p></div></div><div class="nj"><div class="ab cb"><div class="ml nk mm nl mn nm cf nn cg no ci bh"><figure class="ns nt nu nv nw nj nx ny paragraph-image"><div role="button" tabindex="0" class="nz oa fj ob bh oc"><div class="np nq nr"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*PzNgyj233lXvXmtuAuFwng.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*PzNgyj233lXvXmtuAuFwng.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*PzNgyj233lXvXmtuAuFwng.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*PzNgyj233lXvXmtuAuFwng.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*PzNgyj233lXvXmtuAuFwng.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*PzNgyj233lXvXmtuAuFwng.png 1100w, https://miro.medium.com/v2/resize:fit:2000/format:webp/1*PzNgyj233lXvXmtuAuFwng.png 2000w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*PzNgyj233lXvXmtuAuFwng.png 640w, https://miro.medium.com/v2/resize:fit:720/1*PzNgyj233lXvXmtuAuFwng.png 720w, https://miro.medium.com/v2/resize:fit:750/1*PzNgyj233lXvXmtuAuFwng.png 750w, https://miro.medium.com/v2/resize:fit:786/1*PzNgyj233lXvXmtuAuFwng.png 786w, https://miro.medium.com/v2/resize:fit:828/1*PzNgyj233lXvXmtuAuFwng.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*PzNgyj233lXvXmtuAuFwng.png 1100w, https://miro.medium.com/v2/resize:fit:2000/1*PzNgyj233lXvXmtuAuFwng.png 2000w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px"/><img alt="A speculative diagram of the progress design tools have made in terms of resemblance to code" class="bh mq od c" width="1000" height="589" loading="eager"/></picture></div></div></figure></div></div></div><div class="ab cb"><div class="ci bh fz ga gb gc"><p id="62e3" class="pw-post-body-paragraph oe of gu og b hs oh oi oj hv ok ol om on oo op oq or os ot ou ov ow ox oy oz gn bk">So the trajectory of progress seems clear if you look at the last 10 years. Tools are trying to get designers closer and closer to systematic and flexible design rule-making.</p><p id="e825" class="pw-post-body-paragraph oe of gu og b hs oh oi oj hv ok ol om on oo op oq or os ot ou ov ow ox oy oz gn bk">But…</p><p id="4506" class="pw-post-body-paragraph oe of gu og b hs oh oi oj hv ok ol om on oo op oq or os ot ou ov ow ox oy oz gn bk">We are still before the biggest, most important leap forward.</p><blockquote class="qk ql qm"><p id="e2d7" class="oe of qn og b hs oh oi oj hv ok ol om on oo op oq or os ot ou ov ow ox oy oz gn bk"><em class="gu">For the actual UI building (components and pages) — product designers will have to give up their beloved free-form canvas.</em></p></blockquote><p id="ee59" class="pw-post-body-paragraph oe of gu og b hs oh oi oj hv ok ol om on oo op oq or os ot ou ov ow ox oy oz gn bk">As far as I can see it, designing and building digital products will have to abide by the constraints of the platform in which they are coded and tested. As a designer, I must have the full spectrum of tools to use flex, grid, padding, margin, percentages on every single measurement, viewport units, and many more. I need to be able to easily change the viewport and see everything that needs to be affected — be affected. Components should have a difference between states and properties because they are not the same. Their variants should be set in a rule-based fashion, not by specifying all my variants one by one. Instead of styles, Design Tokens should parametrize everything. Robust, multi-layered tokens with aliases and composite token types (like typography).</p><p id="7122" class="pw-post-body-paragraph oe of gu og b hs oh oi oj hv ok ol om on oo op oq or os ot ou ov ow ox oy oz gn bk">The default of the tool has to help me make <em class="qn">better</em> decisions, not <em class="qn">nicer</em> or <em class="qn">easier</em> decisions. It has to keep me from veering too easily into a naive, chaotic, inconsistent mess of a system. A system that will be easy to create on a whim, but nightmarish to maintain. To get a sense of what we are actually doing when we’re designing for interactive digital experiences — read what Frank Chimero wrote in his essay <a class="af qj" href="https://frankchimero.com/blog/2015/the-webs-grain/" rel="noopener ugc nofollow" target="_blank">‘The Web’s Grain’</a>. This part is about how hard it is to master the design for screens because they are:</p><blockquote class="qk ql qm"><p id="ee24" class="oe of qn og b hs oh oi oj hv ok ol om on oo op oq or os ot ou ov ow ox oy oz gn bk"><em class="gu">‘an edgeless surface of unknown proportions comprised of small, individual, and variable elements from multiple vantages assembled into a readable whole that documents a moment’.</em></p></blockquote><p id="6c47" class="pw-post-body-paragraph oe of gu og b hs oh oi oj hv ok ol om on oo op oq or os ot ou ov ow ox oy oz gn bk">This is the grain of digital products, web, and elsewhere. So the design tools we use should help us actually interact with this ‘surface,’ not hide and abstract it away from us. It’s time we mature as designers. The quality of processes, the relationships with the developers, our products, and the well-being of our customers are all well worth the effort.</p><p id="5f7f" class="pw-post-body-paragraph oe of gu og b hs oh oi oj hv ok ol om on oo op oq or os ot ou ov ow ox oy oz gn bk">The right tool will have to be built for a collaboration. A true collaboration, not a handoff. With developers, because complex products (which will be the vast majority) need them. There’s no avoiding that with dreams of magic AI fairy dust and no-code, no-dev narrow builders, empowering as they may seem.</p><p id="bdf8" class="pw-post-body-paragraph oe of gu og b hs oh oi oj hv ok ol om on oo op oq or os ot ou ov ow ox oy oz gn bk">I hope disruption is well on its way. I’m working with my friends to build a tool I believe has these properties. It’s called <a class="af qj" href="http://jux.io" rel="noopener ugc nofollow" target="_blank">Jux</a>. Still very early days and a long way to go, but I think we’re on to something truly radical.</p></div></div></div><div class="ab cb qo qp qq qr" role="separator"><span class="qs by bm qt qu qv"></span><span class="qs by bm qt qu qv"></span><span class="qs by bm qt qu"></span></div><div class="gn go gp gq gr"><div class="ab cb"><div class="ci bh fz ga gb gc"><p id="b335" class="pw-post-body-paragraph oe of gu og b hs oh oi oj hv ok ol om on oo op oq or os ot ou ov ow ox oy oz gn bk">Dive even deeper by reading these:</p><ol class=""><li id="a3c4" class="oe of gu og b hs oh oi oj hv ok ol om on oo op oq or os ot ou ov ow ox oy oz qb qc qd bk">Nathan Curtis’s <a class="af qj" href="https://medium.com/eightshapes-llc/component-specifications-1492ca4c94c" rel="noopener">great article</a> about what should a spec for handoff include</li><li id="61f1" class="oe of gu og b hs qe oi oj hv qf ol om on qg op oq or qh ot ou ov qi ox oy oz qb qc qd bk">Brad Frost’s <a class="af qj" href="https://bradfrost.com/blog/post/the-already-here-future-of-prototyping/" rel="noopener ugc nofollow" target="_blank">article + demo</a> for prototyping using Claude with real coded objects.</li><li id="28f0" class="oe of gu og b hs qe oi oj hv qf ol om on qg op oq or qh ot ou ov qi ox oy oz qb qc qd bk">To have a good sense of the real interactivity of most common components go through this <a class="af qj" href="https://component.gallery/components/" rel="noopener ugc nofollow" target="_blank">list by Iain Bean.</a> There’s a page for components and a page for some great design systems.</li><li id="7fbb" class="oe of gu og b hs qe oi oj hv qf ol om on qg op oq or qh ot ou ov qi ox oy oz qb qc qd bk">Read Shamsi’s <a class="af qj" href="https://nohandoff.org/no-handoff-between-product-and-engineering/" rel="noopener ugc nofollow" target="_blank">article</a> laying out an argument against the handoff.</li><li id="ee56" class="oe of gu og b hs qe oi oj hv qf ol om on qg op oq or qh ot ou ov qi ox oy oz qb qc qd bk">Read Joe Alterio’s <a class="af qj" rel="noopener" target="_blank" href="/the-death-of-craft-feec4cc5eb58">deep piece</a> about tools and craft and how AI will affect it all.</li><li id="20ad" class="oe of gu og b hs qe oi oj hv qf ol om on qg op oq or qh ot ou ov qi ox oy oz qb qc qd bk"><a class="af qj" href="https://www.smashingmagazine.com/2023/03/best-handoff-is-no-handoff/" rel="noopener ugc nofollow" target="_blank">Great read</a> from Vitaly Friedman of Smashing Magazine regarding ‘no handoff’</li></ol></div></div></div><div class="ab cb qo qp qq qr" role="separator"><span class="qs by bm qt qu qv"></span><span class="qs by bm qt qu qv"></span><span class="qs by bm qt qu"></span></div><div class="gn go gp gq gr"><div class="ab cb"><div class="ci bh fz ga gb gc"><p id="d852" class="pw-post-body-paragraph oe of gu og b hs oh oi oj hv ok ol om on oo op oq or os ot ou ov ow ox oy oz gn bk">Originally posted on the Jux blog <a class="af qj" href="https://www.jux.io/blog/the-root-causes-for-the-dev-design-mismatch" rel="noopener ugc nofollow" target="_blank">here</a></p></div></div></div></div></section></div></div></article></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="qw qx ab jm"><div class="qy ab"><a class="qz ay am ao" href="https://medium.com/tag/ui?source=post_page-----4c66e0fa6740--------------------------------" rel="noopener follow"><div class="ra fj cx rb ge rc rd bf b bg z bk re">UI</div></a></div><div class="qy ab"><a class="qz ay am ao" href="https://medium.com/tag/product-design?source=post_page-----4c66e0fa6740--------------------------------" rel="noopener follow"><div class="ra fj cx rb ge rc rd bf b bg z bk re">Product Design</div></a></div><div class="qy ab"><a class="qz ay am ao" href="https://medium.com/tag/development?source=post_page-----4c66e0fa6740--------------------------------" rel="noopener follow"><div class="ra fj cx rb ge rc rd bf b bg z bk re">Development</div></a></div><div class="qy ab"><a class="qz ay am ao" href="https://medium.com/tag/ux?source=post_page-----4c66e0fa6740--------------------------------" rel="noopener follow"><div class="ra fj cx rb ge rc rd bf b bg z bk re">UX</div></a></div><div class="qy ab"><a class="qz ay am ao" href="https://medium.com/tag/design?source=post_page-----4c66e0fa6740--------------------------------" rel="noopener follow"><div class="ra fj cx rb ge rc rd bf b bg z bk re">Design</div></a></div></div></div></div><div class="l"></div><footer class="rf qp rg rh ri ab q rj iw c"><div class="l ae"><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="ab cp rk"><div class="ab q lh"><div class="rl l"><span class="l rm rn ro e d"><div class="ab q lh li"><div class="pw-multi-vote-icon fj jq lj lk ll"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="footerClapButton" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fuser-experience-design-1%2F4c66e0fa6740&amp;operation=register&amp;redirect=https%3A%2F%2Fuxdesign.cc%2Fthe-root-causes-for-the-dev-design-mismatch-4c66e0fa6740&amp;user=Erez+Reznikov&amp;userId=1a7046474bbe&amp;source=---footer_actions--4c66e0fa6740---------------------clap_footer-----------" rel="noopener follow"><div><div class="bm" aria-hidden="false"><div class="lm ao ln lo lp lq am lr ls lt ll"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-label="clap"><path fill-rule="evenodd" d="M11.37.828 12 3.282l.63-2.454zM13.916 3.953l1.523-2.112-1.184-.39zM8.589 1.84l1.522 2.112-.337-2.501zM18.523 18.92c-.86.86-1.75 1.246-2.62 1.33a6 6 0 0 0 .407-.372c2.388-2.389 2.86-4.951 1.399-7.623l-.912-1.603-.79-1.672c-.26-.56-.194-.98.203-1.288a.7.7 0 0 1 .546-.132c.283.046.546.231.728.5l2.363 4.157c.976 1.624 1.141 4.237-1.324 6.702m-10.999-.438L3.37 14.328a.828.828 0 0 1 .585-1.408.83.83 0 0 1 .585.242l2.158 2.157a.365.365 0 0 0 .516-.516l-2.157-2.158-1.449-1.449a.826.826 0 0 1 1.167-1.17l3.438 3.44a.363.363 0 0 0 .516 0 .364.364 0 0 0 0-.516L5.293 9.513l-.97-.97a.826.826 0 0 1 0-1.166.84.84 0 0 1 1.167 0l.97.968 3.437 3.436a.36.36 0 0 0 .517 0 .366.366 0 0 0 0-.516L6.977 7.83a.82.82 0 0 1-.241-.584.82.82 0 0 1 .824-.826c.219 0 .43.087.584.242l5.787 5.787a.366.366 0 0 0 .587-.415l-1.117-2.363c-.26-.56-.194-.98.204-1.289a.7.7 0 0 1 .546-.132c.283.046.545.232.727.501l2.193 3.86c1.302 2.38.883 4.59-1.277 6.75-1.156 1.156-2.602 1.627-4.19 1.367-1.418-.236-2.866-1.033-4.079-2.246M10.75 5.971l2.12 2.12c-.41.502-.465 1.17-.128 1.89l.22.465-3.523-3.523a.8.8 0 0 1-.097-.368c0-.22.086-.428.241-.584a.847.847 0 0 1 1.167 0m7.355 1.705c-.31-.461-.746-.758-1.23-.837a1.44 1.44 0 0 0-1.11.275c-.312.24-.505.543-.59.881a1.74 1.74 0 0 0-.906-.465 1.47 1.47 0 0 0-.82.106l-2.182-2.182a1.56 1.56 0 0 0-2.2 0 1.54 1.54 0 0 0-.396.701 1.56 1.56 0 0 0-2.21-.01 1.55 1.55 0 0 0-.416.753c-.624-.624-1.649-.624-2.237-.037a1.557 1.557 0 0 0 0 2.2c-.239.1-.501.238-.715.453a1.56 1.56 0 0 0 0 2.2l.516.515a1.556 1.556 0 0 0-.753 2.615L7.01 19c1.32 1.319 2.909 2.189 4.475 2.449q.482.08.971.08c.85 0 1.653-.198 2.393-.579.231.033.46.054.686.054 1.266 0 2.457-.52 3.505-1.567 2.763-2.763 2.552-5.734 1.439-7.586z" clip-rule="evenodd"></path></svg></div></div></div></a></span></div><div class="pw-multi-vote-count l lu lv lw lx ly lz ma"><p class="bf b dv z du"><span class="mb">--</span></p></div></div></span><span class="l h g f rp rq"><div class="ab q lh li"><div class="pw-multi-vote-icon fj jq lj lk ll"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="footerClapButton" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fuser-experience-design-1%2F4c66e0fa6740&amp;operation=register&amp;redirect=https%3A%2F%2Fuxdesign.cc%2Fthe-root-causes-for-the-dev-design-mismatch-4c66e0fa6740&amp;user=Erez+Reznikov&amp;userId=1a7046474bbe&amp;source=---footer_actions--4c66e0fa6740---------------------clap_footer-----------" rel="noopener follow"><div><div class="bm" aria-hidden="false"><div class="lm ao ln lo lp lq am lr ls lt ll"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-label="clap"><path fill-rule="evenodd" d="M11.37.828 12 3.282l.63-2.454zM13.916 3.953l1.523-2.112-1.184-.39zM8.589 1.84l1.522 2.112-.337-2.501zM18.523 18.92c-.86.86-1.75 1.246-2.62 1.33a6 6 0 0 0 .407-.372c2.388-2.389 2.86-4.951 1.399-7.623l-.912-1.603-.79-1.672c-.26-.56-.194-.98.203-1.288a.7.7 0 0 1 .546-.132c.283.046.546.231.728.5l2.363 4.157c.976 1.624 1.141 4.237-1.324 6.702m-10.999-.438L3.37 14.328a.828.828 0 0 1 .585-1.408.83.83 0 0 1 .585.242l2.158 2.157a.365.365 0 0 0 .516-.516l-2.157-2.158-1.449-1.449a.826.826 0 0 1 1.167-1.17l3.438 3.44a.363.363 0 0 0 .516 0 .364.364 0 0 0 0-.516L5.293 9.513l-.97-.97a.826.826 0 0 1 0-1.166.84.84 0 0 1 1.167 0l.97.968 3.437 3.436a.36.36 0 0 0 .517 0 .366.366 0 0 0 0-.516L6.977 7.83a.82.82 0 0 1-.241-.584.82.82 0 0 1 .824-.826c.219 0 .43.087.584.242l5.787 5.787a.366.366 0 0 0 .587-.415l-1.117-2.363c-.26-.56-.194-.98.204-1.289a.7.7 0 0 1 .546-.132c.283.046.545.232.727.501l2.193 3.86c1.302 2.38.883 4.59-1.277 6.75-1.156 1.156-2.602 1.627-4.19 1.367-1.418-.236-2.866-1.033-4.079-2.246M10.75 5.971l2.12 2.12c-.41.502-.465 1.17-.128 1.89l.22.465-3.523-3.523a.8.8 0 0 1-.097-.368c0-.22.086-.428.241-.584a.847.847 0 0 1 1.167 0m7.355 1.705c-.31-.461-.746-.758-1.23-.837a1.44 1.44 0 0 0-1.11.275c-.312.24-.505.543-.59.881a1.74 1.74 0 0 0-.906-.465 1.47 1.47 0 0 0-.82.106l-2.182-2.182a1.56 1.56 0 0 0-2.2 0 1.54 1.54 0 0 0-.396.701 1.56 1.56 0 0 0-2.21-.01 1.55 1.55 0 0 0-.416.753c-.624-.624-1.649-.624-2.237-.037a1.557 1.557 0 0 0 0 2.2c-.239.1-.501.238-.715.453a1.56 1.56 0 0 0 0 2.2l.516.515a1.556 1.556 0 0 0-.753 2.615L7.01 19c1.32 1.319 2.909 2.189 4.475 2.449q.482.08.971.08c.85 0 1.653-.198 2.393-.579.231.033.46.054.686.054 1.266 0 2.457-.52 3.505-1.567 2.763-2.763 2.552-5.734 1.439-7.586z" clip-rule="evenodd"></path></svg></div></div></div></a></span></div><div class="pw-multi-vote-count l lu lv lw lx ly lz ma"><p class="bf b dv z du"><span class="mb">--</span></p></div></div></span></div><div class="bq ab"><div><div class="bm" aria-hidden="false"><button class="ao lm me mf ab q fk mg mh" aria-label="responses"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="md"><path d="M18.006 16.803c1.533-1.456 2.234-3.325 2.234-5.321C20.24 7.357 16.709 4 12.191 4S4 7.357 4 11.482c0 4.126 3.674 7.482 8.191 7.482.817 0 1.622-.111 2.393-.327.231.2.48.391.744.559 1.06.693 2.203 1.044 3.399 1.044.224-.008.4-.112.486-.287a.49.49 0 0 0-.042-.518c-.495-.67-.845-1.364-1.04-2.057a4 4 0 0 1-.125-.598zm-3.122 1.055-.067-.223-.315.096a8 8 0 0 1-2.311.338c-4.023 0-7.292-2.955-7.292-6.587 0-3.633 3.269-6.588 7.292-6.588 4.014 0 7.112 2.958 7.112 6.593 0 1.794-.608 3.469-2.027 4.72l-.195.168v.255c0 .056 0 .151.016.295.025.231.081.478.154.733.154.558.398 1.117.722 1.659a5.3 5.3 0 0 1-2.165-.845c-.276-.176-.714-.383-.941-.59z"></path></svg><p class="bf b bg z du"><span class="pw-responses-count mc md">17</span></p></button></div></div></div></div><div class="ab q"><div class="qv l jj"><div><div class="bm" aria-hidden="false"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="footerBookmarkButton" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2F4c66e0fa6740&amp;operation=register&amp;redirect=https%3A%2F%2Fuxdesign.cc%2Fthe-root-causes-for-the-dev-design-mismatch-4c66e0fa6740&amp;source=---footer_actions--4c66e0fa6740---------------------bookmark_footer-----------" rel="noopener follow"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 25 25" class="du mj" aria-label="Add to list bookmark button"><path fill="currentColor" d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .805.396L12.5 17l5.695 4.396A.5.5 0 0 0 19 21v-8.5a.5.5 0 0 0-1 0v7.485l-5.195-4.012a.5.5 0 0 0-.61 0L7 19.985z"></path></svg></a></span></div></div></div><div class="qv l jj"><div class="bm" aria-hidden="false" aria-describedby="postFooterSocialMenu" aria-labelledby="postFooterSocialMenu"><div><div class="bm" aria-hidden="false"><button aria-controls="postFooterSocialMenu" aria-expanded="false" aria-label="Share Post" data-testid="footerSocialShareButton" class="af fk ah ai aj ak al mr an ao ap ex ms mt mh mu"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M15.218 4.931a.4.4 0 0 1-.118.132l.012.006a.45.45 0 0 1-.292.074.5.5 0 0 1-.3-.13l-2.02-2.02v7.07c0 .28-.23.5-.5.5s-.5-.22-.5-.5v-7.04l-2 2a.45.45 0 0 1-.57.04h-.02a.4.4 0 0 1-.16-.3.4.4 0 0 1 .1-.32l2.8-2.8a.5.5 0 0 1 .7 0l2.8 2.79a.42.42 0 0 1 .068.498m-.106.138.008.004v-.01zM16 7.063h1.5a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-11c-1.1 0-2-.9-2-2v-10a2 2 0 0 1 2-2H8a.5.5 0 0 1 .35.15.5.5 0 0 1 .15.35.5.5 0 0 1-.15.35.5.5 0 0 1-.35.15H6.4c-.5 0-.9.4-.9.9v10.2a.9.9 0 0 0 .9.9h11.2c.5 0 .9-.4.9-.9v-10.2c0-.5-.4-.9-.9-.9H16a.5.5 0 0 1 0-1" clip-rule="evenodd"></path></svg></button></div></div></div></div></div></div></div></div></div></footer><div class="rr rs rt ru rv l"><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="rw bh r rx"></div><div class="ry l"><div class="ab rz sa sb jl jk"><div class="sc sd se sf sg sh si sj sk sl ab cp"><div class="h k"><a href="https://uxdesign.cc/?source=post_page---post_publication_info--4c66e0fa6740--------------------------------" rel="noopener follow"><div class="fj ab"><img alt="UX Collective" class="sm in io cx" src="https://miro.medium.com/v2/resize:fill:96:96/1*mDhF9X4VO0rCrJvWFatyxg.png" width="48" height="48" loading="lazy"/><div class="sm l io in fs n fr sn"></div></div></a></div><div class="j i d"><a href="https://uxdesign.cc/?source=post_page---post_publication_info--4c66e0fa6740--------------------------------" rel="noopener follow"><div class="fj ab"><img alt="UX Collective" class="sm sp so cx" src="https://miro.medium.com/v2/resize:fill:128:128/1*mDhF9X4VO0rCrJvWFatyxg.png" width="64" height="64" loading="lazy"/><div class="sm l so sp fs n fr sn"></div></div></a></div><div class="j i d sq jj"><div class="ab"><span><a class="bf b bg z sr ra ss st su sv sw ev ew sx sy sz fa fb fc fd bm fe ff" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fcollection%2Fuser-experience-design-1&amp;operation=register&amp;redirect=https%3A%2F%2Fuxdesign.cc%2Fthe-root-causes-for-the-dev-design-mismatch-4c66e0fa6740&amp;collection=UX+Collective&amp;collectionId=138adf9c44c&amp;source=post_page---post_publication_info--4c66e0fa6740---------------------follow_profile-----------" rel="noopener follow">Follow</a></span></div></div></div><div class="ab co ta"><div class="tb tc td nl nk l"><a class="af ag ah aj ak al am an ao ap aq ar as at ab q" href="https://uxdesign.cc/?source=post_page---post_publication_info--4c66e0fa6740--------------------------------" rel="noopener follow"><h2 class="pw-author-name bf tf tg th ti tj tk tl on tm tn or to tp ov tq tr bk"><span class="gn te">Published in <!-- -->UX Collective</span></h2></a><div class="qy ab im"><div class="l jj"><span class="pw-follower-count bf b bg z du"><a class="af ag ah ai aj ak al am an ao ap aq ar jc" rel="noopener follow" href="/followers?source=post_page---post_publication_info--4c66e0fa6740--------------------------------">508K Followers</a></span></div><div class="bf b bg z du ab jp"><span class="jd l" aria-hidden="true"><span class="bf b bg z du">·</span></span><a class="af ag ah ai aj ak al am an ao ap aq ar jc" rel="noopener follow" href="/the-not-so-hidden-tax-of-good-ideas-b3bbbb1e1607?source=post_page---post_publication_info--4c66e0fa6740--------------------------------">Last published <!-- -->22 hours ago</a></div></div><div class="ts l"><p class="bf b bg z bk">We believe designers are thinkers as much as they are makers. Curated stories on UX, Visual &amp; Product Design. <a class="af ag ah ai aj ak al am an ao ap aq ar qj go" href="https://linktr.ee/uxc" rel="noopener ugc nofollow">https://linktr.ee/uxc</a></p></div></div></div><div class="h k"><div class="ab"><span><a class="bf b bg z sr ra ss st su sv sw ev ew sx sy sz fa fb fc fd bm fe ff" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fcollection%2Fuser-experience-design-1&amp;operation=register&amp;redirect=https%3A%2F%2Fuxdesign.cc%2Fthe-root-causes-for-the-dev-design-mismatch-4c66e0fa6740&amp;collection=UX+Collective&amp;collectionId=138adf9c44c&amp;source=post_page---post_publication_info--4c66e0fa6740---------------------follow_profile-----------" rel="noopener follow">Follow</a></span></div></div></div></div><div class="ab rz sa sb jl jk"><div class="sc sd se sf sg sh si sj sk sl ab cp"><div class="h k"><a tabindex="0" href="https://medium.com/@erezreznikov?source=post_page---post_author_info--4c66e0fa6740--------------------------------" rel="noopener follow"><div class="l fj"><img alt="Erez Reznikov" class="l fd by io in cx" src="https://miro.medium.com/v2/resize:fill:96:96/1*xAQ1gGumKbKEY10sLhSJyQ.jpeg" width="48" height="48" loading="lazy"/><div class="fr by l io in fs n ay sn"></div></div></a></div><div class="j i d"><a tabindex="0" href="https://medium.com/@erezreznikov?source=post_page---post_author_info--4c66e0fa6740--------------------------------" rel="noopener follow"><div class="l fj"><img alt="Erez Reznikov" class="l fd by so sp cx" src="https://miro.medium.com/v2/resize:fill:128:128/1*xAQ1gGumKbKEY10sLhSJyQ.jpeg" width="64" height="64" loading="lazy"/><div class="fr by l so sp fs n ay sn"></div></div></a></div><div class="j i d sq jj"><div class="ab"><span><a class="bf b bg z sr ra ss st su sv sw ev ew sx sy sz fa fb fc fd bm fe ff" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fuser%2F1a7046474bbe&amp;operation=register&amp;redirect=https%3A%2F%2Fuxdesign.cc%2Fthe-root-causes-for-the-dev-design-mismatch-4c66e0fa6740&amp;user=Erez+Reznikov&amp;userId=1a7046474bbe&amp;source=post_page-1a7046474bbe--post_author_info--4c66e0fa6740---------------------follow_profile-----------" rel="noopener follow">Follow</a></span></div></div></div><div class="ab co ta"><div class="tb tc td nl nk l"><a class="af ag ah aj ak al am an ao ap aq ar as at ab q" href="https://medium.com/@erezreznikov?source=post_page---post_author_info--4c66e0fa6740--------------------------------" rel="noopener follow"><h2 class="pw-author-name bf tf tg th ti tj tk tl on tm tn or to tp ov tq tr bk"><span class="gn te">Written by <!-- -->Erez Reznikov</span></h2></a><div class="qy ab im"><div class="l jj"><span class="pw-follower-count bf b bg z du"><a class="af ag ah ai aj ak al am an ao ap aq ar jc" href="https://medium.com/@erezreznikov/followers?source=post_page---post_author_info--4c66e0fa6740--------------------------------" rel="noopener follow">177 Followers</a></span></div><div class="bf b bg z du ab jp"><span class="jd l" aria-hidden="true"><span class="bf b bg z du">·</span></span><a class="af ag ah ai aj ak al am an ao ap aq ar jc" href="https://medium.com/@erezreznikov/following?source=post_page---post_author_info--4c66e0fa6740--------------------------------" rel="noopener follow">63 Following</a></div></div><div class="ts l"><p class="bf b bg z bk"><span class="gn">Principal designer @ Jux. Looking for ways to make designers feel more knowledgable of, and empowered by, the actual abilities of code</span></p></div></div></div><div class="h k"><div class="ab"><span><a class="bf b bg z sr ra ss st su sv sw ev ew sx sy sz fa fb fc fd bm fe ff" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fuser%2F1a7046474bbe&amp;operation=register&amp;redirect=https%3A%2F%2Fuxdesign.cc%2Fthe-root-causes-for-the-dev-design-mismatch-4c66e0fa6740&amp;user=Erez+Reznikov&amp;userId=1a7046474bbe&amp;source=post_page-1a7046474bbe--post_author_info--4c66e0fa6740---------------------follow_profile-----------" rel="noopener follow">Follow</a></span></div></div></div></div></div></div><div class="tt tu tv tw tx l"><div class="rw bh r tt tu ty tz ua"></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="ab q cp"><h2 class="bf tf pd hu pf pg hx pi pj pl pm pn pp pq pr pt pu bk">Responses (<!-- -->17<!-- -->)</h2><div class="ab ub"><div><div class="bm" aria-hidden="false"><a class="uc ud" href="https://policy.medium.com/medium-rules-30e5502c4eb4?source=post_page---post_responses--4c66e0fa6740--------------------------------" rel="noopener follow" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25"><path fill-rule="evenodd" d="M11.987 5.036a.754.754 0 0 1 .914-.01c.972.721 1.767 1.218 2.6 1.543.828.322 1.719.485 2.887.505a.755.755 0 0 1 .741.757c-.018 3.623-.43 6.256-1.449 8.21-1.034 1.984-2.662 3.209-4.966 4.083a.75.75 0 0 1-.537-.003c-2.243-.874-3.858-2.095-4.897-4.074-1.024-1.951-1.457-4.583-1.476-8.216a.755.755 0 0 1 .741-.757c1.195-.02 2.1-.182 2.923-.503.827-.322 1.6-.815 2.519-1.535m.468.903c-.897.69-1.717 1.21-2.623 1.564-.898.35-1.856.527-3.026.565.037 3.45.469 5.817 1.36 7.515.884 1.684 2.25 2.762 4.284 3.571 2.092-.81 3.465-1.89 4.344-3.575.886-1.698 1.299-4.065 1.334-7.512-1.149-.039-2.091-.217-2.99-.567-.906-.353-1.745-.873-2.683-1.561m-.009 9.155a2.672 2.672 0 1 0 0-5.344 2.672 2.672 0 0 0 0 5.344m0 1a3.672 3.672 0 1 0 0-7.344 3.672 3.672 0 0 0 0 7.344m-1.813-3.777.525-.526.916.917 1.623-1.625.526.526-2.149 2.152z" clip-rule="evenodd"></path></svg></a></div></div></div></div><div class="qo l"><button class="bf b bg z bk ra ue uf ug mj mg sw ev ew ex uh ui uj fa uk ul um un uo fb fc fd bm fe ff">See all responses</button></div></div></div></div><div class="up uq ur us ut l bx"><div class="h k j"><div class="rw bh uu uv"></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="uw ab lh jm"><div class="ux uy l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://help.medium.com/hc/en-us?source=post_page-----4c66e0fa6740--------------------------------" rel="noopener follow"><p class="bf b dv z du">Help</p></a></div><div class="ux uy l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://medium.statuspage.io/?source=post_page-----4c66e0fa6740--------------------------------" rel="noopener follow"><p class="bf b dv z du">Status</p></a></div><div class="ux uy l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://medium.com/about?autoplay=1&amp;source=post_page-----4c66e0fa6740--------------------------------" rel="noopener follow"><p class="bf b dv z du">About</p></a></div><div class="ux uy l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://medium.com/jobs-at-medium/work-at-medium-959d1a85284e?source=post_page-----4c66e0fa6740--------------------------------" rel="noopener follow"><p class="bf b dv z du">Careers</p></a></div><div class="ux uy l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="pressinquiries@medium.com?source=post_page-----4c66e0fa6740--------------------------------" rel="noopener follow"><p class="bf b dv z du">Press</p></a></div><div class="ux uy l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://blog.medium.com/?source=post_page-----4c66e0fa6740--------------------------------" rel="noopener follow"><p class="bf b dv z du">Blog</p></a></div><div class="ux uy l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://policy.medium.com/medium-privacy-policy-f03bf92035c9?source=post_page-----4c66e0fa6740--------------------------------" rel="noopener follow"><p class="bf b dv z du">Privacy</p></a></div><div class="ux uy l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://policy.medium.com/medium-terms-of-service-9db0094a1e0f?source=post_page-----4c66e0fa6740--------------------------------" rel="noopener follow"><p class="bf b dv z du">Terms</p></a></div><div class="ux uy l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://speechify.com/medium?source=post_page-----4c66e0fa6740--------------------------------" rel="noopener follow"><p class="bf b dv z du">Text to speech</p></a></div><div class="ux l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://medium.com/business?source=post_page-----4c66e0fa6740--------------------------------" rel="noopener follow"><p class="bf b dv z du">Teams</p></a></div></div></div></div></div></div></div></div></div></div><script>window.__BUILD_ID__="main-20241122-185319-7bcdc08639"</script><script>window.__GRAPHQL_URI__ = "https://uxdesign.cc/_/graphql"</script><script>window.__PRELOADED_STATE__ = {"algolia":{"queries":{}},"cache":{"experimentGroupSet":true,"reason":"This request is not using the cache middleware worker","group":"disabled","tags":["group-edgeCachePosts","post-4c66e0fa6740","user-1a7046474bbe","collection-138adf9c44c"],"serverVariantState":"","middlewareEnabled":false,"cacheStatus":"DYNAMIC","shouldUseCache":false,"vary":[],"lohpSummerUpsellEnabled":false,"publicationHierarchyEnabledWeb":false,"postBottomResponsesEnabled":false},"client":{"hydrated":false,"isUs":false,"isNativeMedium":false,"isSafariMobile":false,"isSafari":false,"isFirefox":false,"routingEntity":{"type":"COLLECTION","id":"138adf9c44c","explicit":true},"viewerIsBot":false},"debug":{"requestId":"8681bc37-40ae-4934-a960-db2da0b24937","hybridDevServices":[],"originalSpanCarrier":{"traceparent":"00-4b08b29037f5d0ff85eeaa60781c7c72-df151b56b0aef025-01"}},"multiVote":{"clapsPerPost":{}},"navigation":{"branch":{"show":null,"hasRendered":null,"blockedByCTA":false},"hideGoogleOneTap":false,"hasRenderedAlternateUserBanner":null,"currentLocation":"https:\u002F\u002Fuxdesign.cc\u002Fthe-root-causes-for-the-dev-design-mismatch-4c66e0fa6740","host":"uxdesign.cc","hostname":"uxdesign.cc","referrer":"","hasSetReferrer":false,"susiModal":{"step":null,"operation":"register"},"postRead":false,"partnerProgram":{"selectedCountryCode":null},"queryString":"?source=tag_recommended_stories_page------design---5-85--------------------272a068d_40a1_4c2b_b31e_a627acca6d57-------"},"config":{"nodeEnv":"production","version":"main-20241122-185319-7bcdc08639","target":"production","productName":"Medium","publicUrl":"https:\u002F\u002Fcdn-client.medium.com\u002Flite","authDomain":"medium.com","authGoogleClientId":"216296035834-k1k6qe060s2tp2a2jam4ljdcms00sttg.apps.googleusercontent.com","favicon":"production","glyphUrl":"https:\u002F\u002Fglyph.medium.com","branchKey":"key_live_ofxXr2qTrrU9NqURK8ZwEhknBxiI6KBm","algolia":{"appId":"MQ57UUUQZ2","apiKeySearch":"394474ced050e3911ae2249ecc774921","indexPrefix":"medium_","host":"-dsn.algolia.net"},"recaptchaKey":"6Lfc37IUAAAAAKGGtC6rLS13R1Hrw_BqADfS1LRk","recaptcha3Key":"6Lf8R9wUAAAAABMI_85Wb8melS7Zj6ziuf99Yot5","recaptchaEnterpriseKeyId":"6Le-uGgpAAAAAPprRaokM8AKthQ9KNGdoxaGUvVp","datadog":{"applicationId":"6702d87d-a7e0-42fe-bbcb-95b469547ea0","clientToken":"pub853ea8d17ad6821d9f8f11861d23dfed","rumToken":"pubf9cc52896502b9413b68ba36fc0c7162","context":{"deployment":{"target":"production","tag":"main-20241122-185319-7bcdc08639","commit":"7bcdc08639c179dc5172558201a3fd3abc1b5db6"}},"datacenter":"us"},"googleAnalyticsCode":"G-7JY7T788PK","googlePay":{"apiVersion":"2","apiVersionMinor":"0","merchantId":"BCR2DN6TV7EMTGBM","merchantName":"Medium","instanceMerchantId":"13685562959212738550"},"applePay":{"version":3},"signInWallCustomDomainCollectionIds":["3a8144eabfe3","336d898217ee","61061eb0c96b","138adf9c44c","819cc2aaeee0"],"mediumMastodonDomainName":"me.dm","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"],"tierOneDomains":["medium.com","thebolditalic.com","arcdigital.media","towardsdatascience.com","uxdesign.cc","codeburst.io","psiloveyou.xyz","writingcooperative.com","entrepreneurshandbook.co","prototypr.io","betterhumans.coach.me","theascent.pub"],"topicsToFollow":["d61cf867d93f","8a146bc21b28","1eca0103fff3","4d562ee63426","aef1078a3ef5","e15e46793f8d","6158eb913466","55f1c20aba7a","3d18b94f6858","4861fee224fd","63c6f1f93ee","1d98b3a9a871","decb52b64abf","ae5d4995e225","830cded25262"],"topicToTagMappings":{"accessibility":"accessibility","addiction":"addiction","android-development":"android-development","art":"art","artificial-intelligence":"artificial-intelligence","astrology":"astrology","basic-income":"basic-income","beauty":"beauty","biotech":"biotech","blockchain":"blockchain","books":"books","business":"business","cannabis":"cannabis","cities":"cities","climate-change":"climate-change","comics":"comics","coronavirus":"coronavirus","creativity":"creativity","cryptocurrency":"cryptocurrency","culture":"culture","cybersecurity":"cybersecurity","data-science":"data-science","design":"design","digital-life":"digital-life","disability":"disability","economy":"economy","education":"education","equality":"equality","family":"family","feminism":"feminism","fiction":"fiction","film":"film","fitness":"fitness","food":"food","freelancing":"freelancing","future":"future","gadgets":"gadgets","gaming":"gaming","gun-control":"gun-control","health":"health","history":"history","humor":"humor","immigration":"immigration","ios-development":"ios-development","javascript":"javascript","justice":"justice","language":"language","leadership":"leadership","lgbtqia":"lgbtqia","lifestyle":"lifestyle","machine-learning":"machine-learning","makers":"makers","marketing":"marketing","math":"math","media":"media","mental-health":"mental-health","mindfulness":"mindfulness","money":"money","music":"music","neuroscience":"neuroscience","nonfiction":"nonfiction","outdoors":"outdoors","parenting":"parenting","pets":"pets","philosophy":"philosophy","photography":"photography","podcasts":"podcast","poetry":"poetry","politics":"politics","privacy":"privacy","product-management":"product-management","productivity":"productivity","programming":"programming","psychedelics":"psychedelics","psychology":"psychology","race":"race","relationships":"relationships","religion":"religion","remote-work":"remote-work","san-francisco":"san-francisco","science":"science","self":"self","self-driving-cars":"self-driving-cars","sexuality":"sexuality","social-media":"social-media","society":"society","software-engineering":"software-engineering","space":"space","spirituality":"spirituality","sports":"sports","startups":"startup","style":"style","technology":"technology","transportation":"transportation","travel":"travel","true-crime":"true-crime","tv":"tv","ux":"ux","venture-capital":"venture-capital","visual-design":"visual-design","work":"work","world":"world","writing":"writing"},"defaultImages":{"avatar":{"imageId":"1*dmbNkD5D-u45r44go_cf0g.png","height":150,"width":150},"orgLogo":{"imageId":"7*V1_7XP4snlmqrc_0Njontw.png","height":110,"width":500},"postLogo":{"imageId":"bd978bb536350a710e8efb012513429cabdc4c28700604261aeda246d0f980b7","height":810,"width":1440},"postPreviewImage":{"imageId":"1*hn4v1tCaJy7cWMyb0bpNpQ.png","height":386,"width":579}},"collectionStructuredData":{"8d6b8a439e32":{"name":"Elemental","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F980\u002F1*9ygdqoKprhwuTVKUM0DLPA@2x.png","width":980,"height":159}}},"3f6ecf56618":{"name":"Forge","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F596\u002F1*uULpIlImcO5TDuBZ6lm7Lg@2x.png","width":596,"height":183}}},"ae2a65f35510":{"name":"GEN","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F264\u002F1*RdVZMdvfV3YiZTw6mX7yWA.png","width":264,"height":140}}},"88d9857e584e":{"name":"LEVEL","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F540\u002F1*JqYMhNX6KNNb2UlqGqO2WQ.png","width":540,"height":108}}},"7b6769f2748b":{"name":"Marker","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F383\u002F1*haCUs0wF6TgOOvfoY-jEoQ@2x.png","width":383,"height":92}}},"444d13b52878":{"name":"OneZero","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F540\u002F1*cw32fIqCbRWzwJaoQw6BUg.png","width":540,"height":123}}},"8ccfed20cbb2":{"name":"Zora","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F540\u002F1*tZUQqRcCCZDXjjiZ4bDvgQ.png","width":540,"height":106}}}},"embeddedPostIds":{"coronavirus":"cd3010f9d81f"},"sharedCdcMessaging":{"COVID_APPLICABLE_TAG_SLUGS":[],"COVID_APPLICABLE_TOPIC_NAMES":[],"COVID_APPLICABLE_TOPIC_NAMES_FOR_TOPIC_PAGE":[],"COVID_MESSAGES":{"tierA":{"text":"For more information on the novel coronavirus and Covid-19, visit cdc.gov.","markups":[{"start":66,"end":73,"href":"https:\u002F\u002Fwww.cdc.gov\u002Fcoronavirus\u002F2019-nCoV"}]},"tierB":{"text":"Anyone can publish on Medium per our Policies, but we don’t fact-check every story. For more info about the coronavirus, see cdc.gov.","markups":[{"start":37,"end":45,"href":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Fcategories\u002F201931128-Policies-Safety"},{"start":125,"end":132,"href":"https:\u002F\u002Fwww.cdc.gov\u002Fcoronavirus\u002F2019-nCoV"}]},"paywall":{"text":"This article has been made free for everyone, thanks to Medium Members. For more information on the novel coronavirus and Covid-19, visit cdc.gov.","markups":[{"start":56,"end":70,"href":"https:\u002F\u002Fmedium.com\u002Fmembership"},{"start":138,"end":145,"href":"https:\u002F\u002Fwww.cdc.gov\u002Fcoronavirus\u002F2019-nCoV"}]},"unbound":{"text":"This article is free for everyone, thanks to Medium Members. For more information on the novel coronavirus and Covid-19, visit cdc.gov.","markups":[{"start":45,"end":59,"href":"https:\u002F\u002Fmedium.com\u002Fmembership"},{"start":127,"end":134,"href":"https:\u002F\u002Fwww.cdc.gov\u002Fcoronavirus\u002F2019-nCoV"}]}},"COVID_BANNER_POST_ID_OVERRIDE_WHITELIST":["3b31a67bff4a"]},"sharedVoteMessaging":{"TAGS":["politics","election-2020","government","us-politics","election","2020-presidential-race","trump","donald-trump","democrats","republicans","congress","republican-party","democratic-party","biden","joe-biden","maga"],"TOPICS":["politics","election"],"MESSAGE":{"text":"Find out more about the U.S. election results here.","markups":[{"start":46,"end":50,"href":"https:\u002F\u002Fcookpolitical.com\u002F2020-national-popular-vote-tracker"}]},"EXCLUDE_POSTS":["397ef29e3ca5"]},"embedPostRules":[],"recircOptions":{"v1":{"limit":3},"v2":{"limit":8}},"braintreeClientKey":"production_zjkj96jm_m56f8fqpf7ngnrd4","braintree":{"enabled":true,"merchantId":"m56f8fqpf7ngnrd4","merchantAccountId":{"usd":"AMediumCorporation_instant","eur":"amediumcorporation_EUR","cad":"amediumcorporation_CAD"},"publicKey":"ds2nn34bg2z7j5gd","braintreeEnvironment":"production","dashboardUrl":"https:\u002F\u002Fwww.braintreegateway.com\u002Fmerchants","gracePeriodDurationInDays":14,"mediumMembershipPlanId":{"monthly":"ce105f8c57a3","monthlyV2":"e8a5e126-792b-4ee6-8fba-d574c1b02fc5","monthlyWithTrial":"d5ee3dbe3db8","monthlyPremium":"fa741a9b47a2","yearly":"a40ad4a43185","yearlyV2":"3815d7d6-b8ca-4224-9b8c-182f9047866e","yearlyStaff":"d74fb811198a","yearlyWithTrial":"b3bc7350e5c7","yearlyPremium":"e21bd2c12166","monthlyOneYearFree":"e6c0637a-2bad-4171-ab4f-3c268633d83c","monthly25PercentOffFirstYear":"235ecc62-0cdb-49ae-9378-726cd21c504b","monthly20PercentOffFirstYear":"ba518864-9c13-4a99-91ca-411bf0cac756","monthly15PercentOffFirstYear":"594c029b-9f89-43d5-88f8-8173af4e070e","monthly10PercentOffFirstYear":"c6c7bc9a-40f2-4b51-8126-e28511d5bdb0","monthlyForStudents":"629ebe51-da7d-41fd-8293-34cd2f2030a8","yearlyOneYearFree":"78ba7be9-0d9f-4ece-aa3e-b54b826f2bf1","yearly25PercentOffFirstYear":"2dbb010d-bb8f-4eeb-ad5c-a08509f42d34","yearly20PercentOffFirstYear":"47565488-435b-47f8-bf93-40d5fbe0ebc8","yearly15PercentOffFirstYear":"8259809b-0881-47d9-acf7-6c001c7f720f","yearly10PercentOffFirstYear":"9dd694fb-96e1-472c-8d9e-3c868d5c1506","yearlyForStudents":"e29345ef-ab1c-4234-95c5-70e50fe6bc23","monthlyCad":"p52orjkaceei","yearlyCad":"h4q9g2up9ktt"},"braintreeDiscountId":{"oneMonthFree":"MONTHS_FREE_01","threeMonthsFree":"MONTHS_FREE_03","sixMonthsFree":"MONTHS_FREE_06","fiftyPercentOffOneYear":"FIFTY_PERCENT_OFF_ONE_YEAR"},"3DSecureVersion":"2","defaultCurrency":"usd","providerPlanIdCurrency":{"4ycw":"usd","rz3b":"usd","3kqm":"usd","jzw6":"usd","c2q2":"usd","nnsw":"usd","q8qw":"usd","d9y6":"usd","fx7w":"cad","nwf2":"cad"}},"paypalClientId":"AXj1G4fotC2GE8KzWX9mSxCH1wmPE3nJglf4Z2ig_amnhvlMVX87otaq58niAg9iuLktVNF_1WCMnN7v","paypal":{"host":"https:\u002F\u002Fapi.paypal.com:443","clientMode":"production","serverMode":"live","webhookId":"4G466076A0294510S","monthlyPlan":{"planId":"P-9WR0658853113943TMU5FDQA","name":"Medium Membership (Monthly) with setup fee","description":"Unlimited access to the best and brightest stories on Medium. Membership billed monthly."},"yearlyPlan":{"planId":"P-7N8963881P8875835MU5JOPQ","name":"Medium Membership (Annual) with setup fee","description":"Unlimited access to the best and brightest stories on Medium. Membership billed annually."},"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\u002Fredeem.","price":"50.00","currency":"USD","sku":"membership-gift-1-yr"},"oldMonthlyPlan":{"planId":"P-96U02458LM656772MJZUVH2Y","name":"Medium Membership (Monthly)","description":"Unlimited access to the best and brightest stories on Medium. Membership billed monthly."},"oldYearlyPlan":{"planId":"P-59P80963JF186412JJZU3SMI","name":"Medium Membership (Annual)","description":"Unlimited access to the best and brightest stories on Medium. Membership billed annually."},"monthlyPlanWithTrial":{"planId":"P-66C21969LR178604GJPVKUKY","name":"Medium Membership (Monthly) with setup fee","description":"Unlimited access to the best and brightest stories on Medium. Membership billed monthly."},"yearlyPlanWithTrial":{"planId":"P-6XW32684EX226940VKCT2MFA","name":"Medium Membership (Annual) with setup fee","description":"Unlimited access to the best and brightest stories on Medium. Membership billed annually."},"oldMonthlyPlanNoSetupFee":{"planId":"P-4N046520HR188054PCJC7LJI","name":"Medium Membership (Monthly)","description":"Unlimited access to the best and brightest stories on Medium. Membership billed monthly."},"oldYearlyPlanNoSetupFee":{"planId":"P-7A4913502Y5181304CJEJMXQ","name":"Medium Membership (Annual)","description":"Unlimited access to the best and brightest stories on Medium. Membership billed annually."},"sdkUrl":"https:\u002F\u002Fwww.paypal.com\u002Fsdk\u002Fjs"},"stripePublishableKey":"pk_live_7FReX44VnNIInZwrIIx6ghjl","log":{"json":true,"level":"info"},"imageUploadMaxSizeMb":25,"staffPicks":{"title":"Staff Picks","catalogId":"c7bc6e1ee00f"}},"session":{"xsrf":""}}</script><script>window.__APOLLO_STATE__ = {"ROOT_QUERY":{"__typename":"Query","viewer":null,"variantFlags":[{"__typename":"VariantFlag","name":"enable_deprecate_legacy_providers_v3","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_branch_io","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_braintree_apple_pay","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_moc_load_processor_all_recs_surfaces","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_braintree_client","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_pp_country_expansion","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_verifications_service","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"ios_enable_friend_links_postpage_banners","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_sprig","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_tribute_landing_page","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"ios_enable_home_post_menu","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"available_monthly_plan","valueType":{"__typename":"VariantFlagString","value":"60e220181034"}},{"__typename":"VariantFlag","name":"enable_footer_app_buttons","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"ios_display_paywall_after_onboarding","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_android_miro_v2","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_medium2_kbfd","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_update_topic_portals_wtf","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_tipping_v0_android","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"ios_social_share_sheet","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_entities_to_follow_v2","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_billing_frequency_on_step2","valueType":{"__typename":"VariantFlagString","value":"group_1"}},{"__typename":"VariantFlag","name":"enable_braintree_webhook","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_conversion_model_v2","valueType":{"__typename":"VariantFlagString","value":"group_2"}},{"__typename":"VariantFlag","name":"enable_recaptcha_enterprise","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_see_pronouns","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"signin_services","valueType":{"__typename":"VariantFlagString","value":"twitter,facebook,google,email,google-fastidv,google-one-tap,apple"}},{"__typename":"VariantFlag","name":"enable_speechify_widget","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_aurora_pub_follower_page","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_configure_pronouns","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_newsletter_lo_flow_custom_domains","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_sharer_create_post_share_key","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"allow_signup","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_tipping_v0_ios","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_moc_load_processor_first_story","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_recirc_model","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"ios_remove_twitter_onboarding_step","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_author_cards_byline","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_pp_v4","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_tag_recs","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"available_monthly_premium_plan","valueType":{"__typename":"VariantFlagString","value":"12a660186432"}},{"__typename":"VariantFlag","name":"enable_rito_upstream_deadlines","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"android_enable_lists_v2","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_lo_homepage","valueType":{"__typename":"VariantFlagString","value":"control"}},{"__typename":"VariantFlag","name":"enable_moc_load_processor_c","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_android_dynamic_programming_paywall","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_android_verified_author","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_author_cards","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_lite_server_upstream_deadlines","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_post_bottom_responses","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"android_enable_editor_new_publishing_flow","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_new_manage_membership_flow","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_ranker_v10","valueType":{"__typename":"VariantFlagString","value":"control"}},{"__typename":"VariantFlag","name":"price_smoke_test_yearly","valueType":{"__typename":"VariantFlagString","value":""}},{"__typename":"VariantFlag","name":"allow_test_auth","valueType":{"__typename":"VariantFlagString","value":"disallow"}},{"__typename":"VariantFlag","name":"enable_ios_offline_reading","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"coronavirus_topic_recirc","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"ios_enable_friend_links_creation","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"redefined_top_posts","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"can_receive_tips_v0","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_premium_tier","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"android_enable_friend_links_postpage_banners","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_explicit_signals","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_legacy_feed_in_iceland","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_marketing_emails","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_publication_hierarchy_web","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"browsable_stream_config_bucket","valueType":{"__typename":"VariantFlagString","value":"curated-topics"}},{"__typename":"VariantFlag","name":"enable_auto_follow_on_subscribe","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_ml_rank_rex_anno","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_starspace","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_conversion_ranker_v2","valueType":{"__typename":"VariantFlagString","value":"control"}},{"__typename":"VariantFlag","name":"enable_pre_pp_v4","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"price_smoke_test_monthly","valueType":{"__typename":"VariantFlagString","value":""}},{"__typename":"VariantFlag","name":"enable_rex_new_push_notification_endpoint","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_updated_pub_recs_ui","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"limit_post_referrers","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"num_post_bottom_responses_to_show","valueType":{"__typename":"VariantFlagString","value":"3"}},{"__typename":"VariantFlag","name":"enable_android_dynamic_aspirational_paywall","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"signup_services","valueType":{"__typename":"VariantFlagString","value":"twitter,facebook,google,email,google-fastidv,google-one-tap,apple"}},{"__typename":"VariantFlag","name":"enable_intrinsic_automatic_actions","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_sharer_validate_post_share_key","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_switch_plan_premium_tier","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_maim_the_meter","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_pill_based_home_feed","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_tick_landing_page","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"android_enable_friend_links_creation","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_members_only_audio","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_cache_less_following_feed","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_ios_autorefresh","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_lite_homepage","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"goliath_externalsearch_enable_comment_deindexation","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_automod","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_ios_dynamic_paywall_aspiriational","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"android_enable_syntax_highlight","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"can_send_tips_v0","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"allow_access","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"ios_enable_lock_responses","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_braintree_integration","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_iceland_forced_android","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"available_annual_plan","valueType":{"__typename":"VariantFlagString","value":"2c754bcc2995"}},{"__typename":"VariantFlag","name":"available_annual_premium_plan","valueType":{"__typename":"VariantFlagString","value":"4a442ace1476"}},{"__typename":"VariantFlag","name":"ios_in_app_free_trial","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"reader_fair_distribution_non_qp","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"reengagement_notification_duration","valueType":{"__typename":"VariantFlagNumber","value":3}},{"__typename":"VariantFlag","name":"glyph_font_set","valueType":{"__typename":"VariantFlagString","value":"m2-unbound-source-serif-pro"}},{"__typename":"VariantFlag","name":"enable_import","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"rex_generator_max_candidates","valueType":{"__typename":"VariantFlagNumber","value":1000}},{"__typename":"VariantFlag","name":"enable_apple_webhook","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_seamless_social_sharing","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_app_flirty_thirty","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_group_gifting","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_android_offline_reading","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_recommended_publishers_query","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_bayesian_average_pub_search","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_diversification_rex","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_ios_dynamic_paywall_programming","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"android_enable_topic_portals","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"ios_enable_verified_book_author","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_eventstats_event_processing","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_simplified_digest_v2_b","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_susi_redesign_android","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_apple_sign_in","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_speechify_ios","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"android_enable_image_sharer","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"android_rating_prompt_stories_read_threshold","valueType":{"__typename":"VariantFlagNumber","value":2}},{"__typename":"VariantFlag","name":"enable_explicit_signals_updated_post_previews","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_google_webhook","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_lite_archive_page","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_post_bottom_responses_input","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_premium_tier_badge","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_bg_post_post","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_lite_continue_this_thread","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"textshots_userid","valueType":{"__typename":"VariantFlagString","value":""}},{"__typename":"VariantFlag","name":"enable_ios_easy_resubscribe","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"ios_iceland_nux","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"android_two_hour_refresh","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_update_explore_wtf","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_creator_welcome_email","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_mastodon_avatar_upload","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"onboarding_tags_from_top_views","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_abandoned_cart_promotion_email","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_braintree_google_pay","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_google_one_tap","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_rex_reading_history","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"mobile_custom_app_icon","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"disable_partner_program_enrollment","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_braintree_paypal","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_braintree_trial_membership","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_lite_response_markup","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"skip_fs_cache_user_vals","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_mastodon_for_members","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_susi_redesign_ios","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_boost_nia_v01","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"limit_user_follows","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_new_stripe_customers","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_rex_aggregator_v2","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_mastodon_for_members_username_selection","valueType":{"__typename":"VariantFlagBoolean","value":true}}],"collectionByDomainOrSlug({\"domainOrSlug\":\"uxdesign.cc\"})":{"__ref":"Collection:138adf9c44c"},"postResult({\"id\":\"4c66e0fa6740\"})":{"__ref":"Post:4c66e0fa6740"}},"ImageMetadata:1*dn6MbbIIlwobt0jnUcrt_Q.png":{"__typename":"ImageMetadata","id":"1*dn6MbbIIlwobt0jnUcrt_Q.png"},"Collection:138adf9c44c":{"__typename":"Collection","id":"138adf9c44c","favicon":{"__ref":"ImageMetadata:1*dn6MbbIIlwobt0jnUcrt_Q.png"},"customStyleSheet":null,"colorPalette":{"__typename":"ColorPalette","highlightSpectrum":{"__typename":"ColorSpectrum","backgroundColor":"#FFFFFFFF","colorPoints":[{"__typename":"ColorPoint","color":"#FFF5F2F1","point":0},{"__typename":"ColorPoint","color":"#FFF3F0EF","point":0.1},{"__typename":"ColorPoint","color":"#FFF1EEED","point":0.2},{"__typename":"ColorPoint","color":"#FFEFECEC","point":0.3},{"__typename":"ColorPoint","color":"#FFEDEAEA","point":0.4},{"__typename":"ColorPoint","color":"#FFEBE8E8","point":0.5},{"__typename":"ColorPoint","color":"#FFE9E6E6","point":0.6},{"__typename":"ColorPoint","color":"#FFE7E5E4","point":0.7},{"__typename":"ColorPoint","color":"#FFE5E3E2","point":0.8},{"__typename":"ColorPoint","color":"#FFE4E1E0","point":0.9},{"__typename":"ColorPoint","color":"#FFE2DFDE","point":1}]},"defaultBackgroundSpectrum":{"__typename":"ColorSpectrum","backgroundColor":"#FFFFFFFF","colorPoints":[{"__typename":"ColorPoint","color":"#FF868484","point":0},{"__typename":"ColorPoint","color":"#FF7C7B7A","point":0.1},{"__typename":"ColorPoint","color":"#FF737171","point":0.2},{"__typename":"ColorPoint","color":"#FF696867","point":0.3},{"__typename":"ColorPoint","color":"#FF5F5E5E","point":0.4},{"__typename":"ColorPoint","color":"#FF555454","point":0.5},{"__typename":"ColorPoint","color":"#FF4A4949","point":0.6},{"__typename":"ColorPoint","color":"#FF3F3E3E","point":0.7},{"__typename":"ColorPoint","color":"#FF343333","point":0.8},{"__typename":"ColorPoint","color":"#FF272727","point":0.9},{"__typename":"ColorPoint","color":"#FF1A1A1A","point":1}]},"tintBackgroundSpectrum":{"__typename":"ColorSpectrum","backgroundColor":"#FF000000","colorPoints":[{"__typename":"ColorPoint","color":"#FF000000","point":0},{"__typename":"ColorPoint","color":"#FF1E1D1D","point":0.1},{"__typename":"ColorPoint","color":"#FF3C3B3B","point":0.2},{"__typename":"ColorPoint","color":"#FF565555","point":0.3},{"__typename":"ColorPoint","color":"#FF6F6D6D","point":0.4},{"__typename":"ColorPoint","color":"#FF868484","point":0.5},{"__typename":"ColorPoint","color":"#FF9C9A99","point":0.6},{"__typename":"ColorPoint","color":"#FFB1AEAE","point":0.7},{"__typename":"ColorPoint","color":"#FFC5C3C2","point":0.8},{"__typename":"ColorPoint","color":"#FFD9D6D6","point":0.9},{"__typename":"ColorPoint","color":"#FFECE9E9","point":1}]}},"domain":"uxdesign.cc","slug":"user-experience-design-1","googleAnalyticsId":"UA-41116679-1","editors":[{"__typename":"CollectionMastheadUserItem","user":{"__ref":"User:50e39baefa55"}},{"__typename":"CollectionMastheadUserItem","user":{"__ref":"User:27353c0f540b"}}],"name":"UX Collective","avatar":{"__ref":"ImageMetadata:1*mDhF9X4VO0rCrJvWFatyxg.png"},"description":"We believe designers are thinkers as much as they are makers. Curated stories on UX, Visual & Product Design. https:\u002F\u002Flinktr.ee\u002Fuxc","subscriberCount":508939,"latestPostsConnection({\"paging\":{\"limit\":1}})":{"__typename":"PostConnection","posts":[{"__ref":"Post:b3bbbb1e1607"}]},"viewerEdge":{"__ref":"CollectionViewerEdge:collectionId:138adf9c44c-viewerId:lo_51ae385ee829"},"twitterUsername":"uxdesigncc","facebookPageId":null,"logo":{"__ref":"ImageMetadata:1*9V9oqYyYnfP5yy7cb7YTMQ.png"}},"User:50e39baefa55":{"__typename":"User","id":"50e39baefa55"},"User:27353c0f540b":{"__typename":"User","id":"27353c0f540b"},"ImageMetadata:1*mDhF9X4VO0rCrJvWFatyxg.png":{"__typename":"ImageMetadata","id":"1*mDhF9X4VO0rCrJvWFatyxg.png"},"User:f8d4571511bc":{"__typename":"User","id":"f8d4571511bc","customDomainState":{"__typename":"CustomDomainState","live":{"__typename":"CustomDomain","domain":"avi-siegel.medium.com"}},"hasSubdomain":true,"username":"avi-siegel"},"Post:b3bbbb1e1607":{"__typename":"Post","id":"b3bbbb1e1607","firstPublishedAt":1732311656401,"creator":{"__ref":"User:f8d4571511bc"},"collection":{"__ref":"Collection:138adf9c44c"},"isSeries":false,"mediumUrl":"https:\u002F\u002Fuxdesign.cc\u002Fthe-not-so-hidden-tax-of-good-ideas-b3bbbb1e1607","sequence":null,"uniqueSlug":"the-not-so-hidden-tax-of-good-ideas-b3bbbb1e1607"},"LinkedAccounts:1a7046474bbe":{"__typename":"LinkedAccounts","mastodon":null,"id":"1a7046474bbe"},"UserViewerEdge:userId:1a7046474bbe-viewerId:lo_51ae385ee829":{"__typename":"UserViewerEdge","id":"userId:1a7046474bbe-viewerId:lo_51ae385ee829","isFollowing":false,"isUser":false,"isMuting":false},"User:1a7046474bbe":{"__typename":"User","id":"1a7046474bbe","linkedAccounts":{"__ref":"LinkedAccounts:1a7046474bbe"},"isSuspended":false,"imageId":"1*xAQ1gGumKbKEY10sLhSJyQ.jpeg","mediumMemberAt":0,"verifications":{"__typename":"VerifiedInfo","isBookAuthor":false},"name":"Erez Reznikov","socialStats":{"__typename":"SocialStats","followerCount":177,"followingCount":56,"collectionFollowingCount":7},"username":"erezreznikov","customDomainState":null,"hasSubdomain":false,"bio":"Principal designer @ Jux. Looking for ways to make designers feel more knowledgable of, and empowered by, the actual abilities of code","isPartnerProgramEnrolled":false,"viewerEdge":{"__ref":"UserViewerEdge:userId:1a7046474bbe-viewerId:lo_51ae385ee829"},"viewerIsUser":false,"newsletterV3":null,"postSubscribeMembershipUpsellShownAt":0,"membership":null,"allowNotes":true,"twitterScreenName":""},"Topic:617a1adb36d5":{"__typename":"Topic","slug":"ux","id":"617a1adb36d5","name":"UX"},"Paragraph:c38c6317500f_0":{"__typename":"Paragraph","id":"c38c6317500f_0","name":"3dc0","type":"H3","href":null,"layout":null,"metadata":null,"text":"The root causes for the dev-design mismatch","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_1":{"__typename":"Paragraph","id":"c38c6317500f_1","name":"df44","type":"H4","href":null,"layout":null,"metadata":null,"text":"Designers use an unconstrained canvas tool to design for rule-based interactive systems, hoping the devs will perfect everything in production. This causes misalignment between designers and devs.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*DL0odu-2eILPZXCM1GXzbA.png":{"__typename":"ImageMetadata","id":"1*DL0odu-2eILPZXCM1GXzbA.png","originalHeight":944,"originalWidth":1600,"focusPercentX":null,"focusPercentY":null,"alt":"Cover image illustrating the overlap between design and development worlds"},"Paragraph:c38c6317500f_2":{"__typename":"Paragraph","id":"c38c6317500f_2","name":"c41b","type":"IMG","href":null,"layout":"OUTSET_CENTER","metadata":{"__ref":"ImageMetadata:1*DL0odu-2eILPZXCM1GXzbA.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_3":{"__typename":"Paragraph","id":"c38c6317500f_3","name":"c3b3","type":"P","href":null,"layout":null,"metadata":null,"text":"There are two persistent issues that keep plaguing the product design and development worlds. The first one is very much on the surface, and thus — no surprise — gets both a lot of attention and a plethora of sometimes reasonable solutions. The second one is much deeper, more subtle, and easier to miss.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_4":{"__typename":"Paragraph","id":"c38c6317500f_4","name":"5f52","type":"H3","href":null,"layout":null,"metadata":null,"text":"Let’s start with the first one — the handoff problem.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_5":{"__typename":"Paragraph","id":"c38c6317500f_5","name":"de44","type":"P","href":null,"layout":null,"metadata":null,"text":"There are, in fact, several reasons why the handoff process is a major problem:","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_6":{"__typename":"Paragraph","id":"c38c6317500f_6","name":"45cd","type":"OLI","href":null,"layout":null,"metadata":null,"text":"Friction, and with it the potential for mistakes in a handoff, causes the actual coded products to differ from the designers’ intentions, as captured in their design tool. The only experience that matters is that of real users with the real-coded product. Not getting the designs perfectly reflected in the final product makes the process ineffective and demoralizing.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_7":{"__typename":"Paragraph","id":"c38c6317500f_7","name":"16ed","type":"OLI","href":null,"layout":null,"metadata":null,"text":"Handoff wastes a lot of time for designers and developers. It takes a lot of mental effort to encode and decode all the relevant info for building the screens correctly. A designer must over-communicate with specs, examples, comments, and documentation, while a developer must inspect the designs with paranoid, detective-level vigilance, sometimes squinting to avoid missing anything.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_8":{"__typename":"Paragraph","id":"c38c6317500f_8","name":"246d","type":"OLI","href":null,"layout":null,"metadata":null,"text":"Handing designs to developers to build from scratch creates a redundant, atrophied artifact. Once the code is live, it diverges from the source of truth, creating a never-ending race to ensure the design file and the ‘reality’ match. When that pairing is inevitably broken, a chain of mistrust builds. Developers see outdated designs and feel justified in ignoring parts that seem out of touch with ‘reality.’ As a result, designers become hyper-vigilant, hunting for mismatches between the design and the implementation. This occurs frequently when developers choose a library as the optimal solution for a component and do not properly match the specified styling.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_9":{"__typename":"Paragraph","id":"c38c6317500f_9","name":"ff4e","type":"OLI","href":null,"layout":null,"metadata":null,"text":"The need to hand designs over forces designers to waste time on things they usually don’t like or value that much. It’s not the peak of creativity to specify and document all the ways a text field should be able to render in the product. Especially knowing that this is not the actual thing being built, but only a disposable artifact. It forces front-end developers to focus on tasks of little joy or meaning as well. Recreating an already designed screen in code while chasing down designers to verify how things should reflow when the viewport gets smaller or larger is no fun either.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_10":{"__typename":"Paragraph","id":"c38c6317500f_10","name":"6d94","type":"P","href":null,"layout":null,"metadata":null,"text":"Since those problems are quite clear, the motivation for solving them was, and still is, high.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_11":{"__typename":"Paragraph","id":"c38c6317500f_11","name":"1f9f","type":"P","href":null,"layout":null,"metadata":null,"text":"And so there were two general directions for solutions that the market allowed to evolve:","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_12":{"__typename":"Paragraph","id":"c38c6317500f_12","name":"3d54","type":"P","href":null,"layout":null,"metadata":null,"text":"One was a path of helper apps to the most popular canvas design tools. It started with tools for easier inspection (Avocode, Zeplin, Simpli, Abstract). Then, design tools added inspection features (like Dev Mode in Figma, Sketch, XD, and InVision). After that, specific tools appeared. These included Zeroheight and InVision’s DSM for easier documentation. Many plugins also emerged in the Sketch and Figma marketplaces, like Anima, Locofy, and other ‘Figma-to-HTML’ tools.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":116,"end":123,"href":"https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Favocode-inc-\u002F?originalSubdomain=il","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":125,"end":131,"href":"https:\u002F\u002Fzeplin.io\u002F","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":133,"end":139,"href":"https:\u002F\u002Fsympli.io\u002F","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":141,"end":149,"href":"https:\u002F\u002Fwww.abstract.com\u002F","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":301,"end":311,"href":"https:\u002F\u002Fzeroheight.com\u002F","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*7La6kbU0jzyj6yE7QugdAw.png":{"__typename":"ImageMetadata","id":"1*7La6kbU0jzyj6yE7QugdAw.png","originalHeight":942,"originalWidth":1600,"focusPercentX":null,"focusPercentY":null,"alt":"diagram of helper apps vs end to end apps"},"Paragraph:c38c6317500f_13":{"__typename":"Paragraph","id":"c38c6317500f_13","name":"6df3","type":"IMG","href":null,"layout":"OUTSET_CENTER","metadata":{"__ref":"ImageMetadata:1*7La6kbU0jzyj6yE7QugdAw.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_14":{"__typename":"Paragraph","id":"c38c6317500f_14","name":"0db0","type":"P","href":null,"layout":null,"metadata":null,"text":"The other path was entirely different in nature. It sought to eliminate the handoff altogether by creating a new breed of design tools that were able to ‘ship end-to-end’ by themselves with little to no help from developers. The most prominent and robust nowadays would be Webflow and Framer, but there is a whole slew of them, starting with Dreamweaver some 25 years ago.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_15":{"__typename":"Paragraph","id":"c38c6317500f_15","name":"37a7","type":"P","href":null,"layout":null,"metadata":null,"text":"The biggest issue with all these no-code \u002F low-code tools was, and still is, that the way they’re built not only eliminates the handoff, but also the need for developers themselves. This, naturally, created a pretty low ceiling for the complexity of the products these tools can allow designers to build end-to-end. Primarily for this reason, the monetary success followed website building tools, rather than native iOS \u002F Android or web app building tools (at this stage I’m only aware of Play for iOS and Draftbit). The chief reason for this, as I can make sense of it, is that in apps the logical complexity exceeds the ability of the no-code tools to deliver. In the last few years, some vertical tools like Framer, Webflow, Builder.io started building ‘bridges’ as an import ability from canvas tools like Figma, using their own plugins.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":347,"end":363,"href":"https:\u002F\u002Feulerpool.com\u002Fen\u002Fstock\u002FWix.Com-Stock-IL0011301780\u002FMarketcapitalization","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":373,"end":395,"href":"https:\u002F\u002Fwww.thezerotoone.co\u002Fp\u002Fhow-webflow-grows-gtm","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":489,"end":493,"href":"https:\u002F\u002Fcreatewithplay.com\u002F","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":506,"end":514,"href":"https:\u002F\u002Fdraftbit.com\u002F","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":711,"end":717,"href":"https:\u002F\u002Fwww.framer.com\u002Fsolutions\u002Ffigma-to-html\u002F","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":719,"end":726,"href":"https:\u002F\u002Funiversity.webflow.com\u002Flesson\u002Ffigma-to-webflow-plugin?topics=layout-design","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":728,"end":738,"href":"https:\u002F\u002Fwww.builder.io\u002Fm\u002Fdesign-to-code","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_16":{"__typename":"Paragraph","id":"c38c6317500f_16","name":"7f57","type":"P","href":null,"layout":null,"metadata":null,"text":"And so, the space of solutions for the handoff problem has a trade-off in the middle of its heart:","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_17":{"__typename":"Paragraph","id":"c38c6317500f_17","name":"768e","type":"BQ","href":null,"layout":null,"metadata":null,"text":"You either have a generic canvas tool that allows you to design the most complex apps in the world, but the design is only an artifact and necessitates a handoff, or you have a specialized builder tool that frees you to design and develop by yourself, but it has a low ceiling of complexity for the product you want to create.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"EM","start":0,"end":326,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*GE4vWD3070W9L4pIDMPEDw.png":{"__typename":"ImageMetadata","id":"1*GE4vWD3070W9L4pIDMPEDw.png","originalHeight":942,"originalWidth":1600,"focusPercentX":null,"focusPercentY":null,"alt":"A diagram illustrating the tradeoff between generic and wide and specific and narrow apps"},"Paragraph:c38c6317500f_18":{"__typename":"Paragraph","id":"c38c6317500f_18","name":"5015","type":"IMG","href":null,"layout":"OUTSET_CENTER","metadata":{"__ref":"ImageMetadata:1*GE4vWD3070W9L4pIDMPEDw.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_19":{"__typename":"Paragraph","id":"c38c6317500f_19","name":"927f","type":"P","href":null,"layout":null,"metadata":null,"text":"As far as I’m aware, there have only been two design\u002Fdevelopment tools that successfully incorporated a different, unifying strategy.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_20":{"__typename":"Paragraph","id":"c38c6317500f_20","name":"e1fa","type":"OLI","href":null,"layout":null,"metadata":null,"text":"Flash (created by Macromedia, succeeded by Adobe, killed by Steve Jobs)","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_21":{"__typename":"Paragraph","id":"c38c6317500f_21","name":"05e9","type":"OLI","href":null,"layout":null,"metadata":null,"text":"Blend for Visual Studio using XAML and the WPF platform from Microsoft.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_22":{"__typename":"Paragraph","id":"c38c6317500f_22","name":"0bd8","type":"P","href":null,"layout":null,"metadata":null,"text":"Flash had ActionScript that allowed the same object to be freely designed by the designer and logically manipulated using ActionScript commands by the developer. This setup let all the relevant pros do their jobs. The designers focused on what was important, both experientially and visually. They didn’t need to hand off anything to developers, since they could just target the existing assets created by the designers. No throwaway artifacts, no handoff, and no limit to the complexity. Flash didn’t try to code for you. It allowed developers to pick up where designers maxed out their comfort zone.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_23":{"__typename":"Paragraph","id":"c38c6317500f_23","name":"344e","type":"P","href":null,"layout":null,"metadata":null,"text":"Blend for Visual Studio had a similar story, but with different files, structures, and logic. It was a twin-environment setup. The designers could design, and the Visual Studio developers could target the exact same assets. Again, no handoff, no throwaway artifacts, and no limits on complexity.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_24":{"__typename":"Paragraph","id":"c38c6317500f_24","name":"a296","type":"P","href":null,"layout":null,"metadata":null,"text":"As we all know, Flash died because of security and performance incompatibility with the iPhone. Blend and Visual Studio are now niche, unpopular tools. In all the surveys of tool usage in the last 7 years, I haven’t seen a single mention of them. Meanwhile, Figma has taken almost all the product design market share).","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":258,"end":316,"href":"https:\u002F\u002Fuxtools.co\u002Fsurvey\u002F2023\u002Fui-design\u002F#ui-design-tools-graph","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_25":{"__typename":"Paragraph","id":"c38c6317500f_25","name":"b6d8","type":"P","href":null,"layout":null,"metadata":null,"text":"This has to lead us to the conclusion that the tools with the best approach are still not immune to failing for all sorts of other reasons. Business is a fickle and unpredictable game, indeed.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_26":{"__typename":"Paragraph","id":"c38c6317500f_26","name":"1c73","type":"P","href":null,"layout":null,"metadata":null,"text":"Now, as I’ve stated at the beginning, there are two persistent issues that keep plaguing the product design and development worlds. Let’s explore the more hidden, but an even more important issue:","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_27":{"__typename":"Paragraph","id":"c38c6317500f_27","name":"7aa5","type":"H3","href":null,"layout":null,"metadata":null,"text":"Naive canvas-based tools hide the vast spectrum of design properties from designers.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*RtQ52abdCypy6zM8nt1Gcg.png":{"__typename":"ImageMetadata","id":"1*RtQ52abdCypy6zM8nt1Gcg.png","originalHeight":942,"originalWidth":1600,"focusPercentX":null,"focusPercentY":null,"alt":"Illustration of part of a wider spectrum of all the possible design properties"},"Paragraph:c38c6317500f_28":{"__typename":"Paragraph","id":"c38c6317500f_28","name":"4af4","type":"IMG","href":null,"layout":"OUTSET_CENTER","metadata":{"__ref":"ImageMetadata:1*RtQ52abdCypy6zM8nt1Gcg.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_29":{"__typename":"Paragraph","id":"c38c6317500f_29","name":"0531","type":"P","href":null,"layout":null,"metadata":null,"text":"The ramifications of this problem are large. But it’s not a malicious plot to keep designers blissfully ignorant — it’s the bad side of a tradeoff that designers used to only look at its good side. Freedom. And boy, do designers love their freedom. I know I do.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_30":{"__typename":"Paragraph","id":"c38c6317500f_30","name":"5e70","type":"P","href":null,"layout":null,"metadata":null,"text":"It is important to realize how we got to where we are with the canvas tools that have become so ubiquitous in the industry.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_31":{"__typename":"Paragraph","id":"c38c6317500f_31","name":"aff3","type":"P","href":null,"layout":null,"metadata":null,"text":"We started with a physical page. Paper, ink, and colors manipulated to perfection by graphic designers. The page was static, concrete, well-defined, and never changing. Then graphic programs arrived to help speed things up — Photoshop, Freehand, Corel Draw, Illustrator (and many more after those). All helped us design printed and mostly static web assets. Then, something important happened. Computers began to diverge in screen sizes. The internet and native apps had to adapt. They introduced responsive units and rules. It all escalated even more after the introduction of the iPhone and tablets. But the designers, graphic and early-interactive designers that is, were hooked on the page metaphor. Naturally, the revenue-powered design tools kept giving them exactly that. The ease of direct manipulation (first with a mouse and keyboard, then with finger gestures and a stylus) was too comfortable to give up for other benefits. This led to a mismatch where designers were encouraged by the tools to have freedom, while the demand now was for responsive, systematic, smart, parametric design rules — for developers to implement.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_32":{"__typename":"Paragraph","id":"c38c6317500f_32","name":"1928","type":"P","href":null,"layout":null,"metadata":null,"text":"And this is where the great divide becomes clear because:","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_33":{"__typename":"Paragraph","id":"c38c6317500f_33","name":"b4b2","type":"BQ","href":null,"layout":null,"metadata":null,"text":"The set of tools and abilities that maximize intuitive, freeform graphic manipulation is exactly the opposite of the set of tools that help define coherent, robust, flexible, and parametric systems.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"EM","start":0,"end":198,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_34":{"__typename":"Paragraph","id":"c38c6317500f_34","name":"a0c0","type":"P","href":null,"layout":null,"metadata":null,"text":"Think about the very basic nature of ‘gravitation’: in all the main canvas tools up until the introduction of Figma’s auto-layout a few years ago, the freedom meant that there was no gravitational pull either upwards or downwards. Very much unlike both the web and the native iOS and Android environments.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*oJ87o9W-pk5eYU2GLAIbew.png":{"__typename":"ImageMetadata","id":"1*oJ87o9W-pk5eYU2GLAIbew.png","originalHeight":942,"originalWidth":1600,"focusPercentX":null,"focusPercentY":null,"alt":"Illustration of a difference between Canvas and DOM environment"},"Paragraph:c38c6317500f_35":{"__typename":"Paragraph","id":"c38c6317500f_35","name":"f16b","type":"IMG","href":null,"layout":"OUTSET_CENTER","metadata":{"__ref":"ImageMetadata:1*oJ87o9W-pk5eYU2GLAIbew.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_36":{"__typename":"Paragraph","id":"c38c6317500f_36","name":"3dad","type":"P","href":null,"layout":null,"metadata":null,"text":"When you have no gravitation, the default mode of everything is to be absolutely positioned in gradual z-index order, one on top of the other. Nothing pushes anything else. Nothing interacts. Paddings and margins don’t mean anything. Text doesn’t make boxes get larger when more words are typed in. Since there’s no viewport, no viewport-related measurements can be used; even percentages are almost never used. So almost nothing is relative.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_37":{"__typename":"Paragraph","id":"c38c6317500f_37","name":"5c3b","type":"P","href":null,"layout":null,"metadata":null,"text":"Slowly, UI-friendly tools started appearing. Sketch opened the door for both XD and Figma. It did this by using components, overrides, a generic mapping of frame = div, and more visual qualities that can be parameterized (colors, typography, effects, and layout grids in Figma). It was a breath of fresh air, but the challenges rose in tandem with the tools.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_38":{"__typename":"Paragraph","id":"c38c6317500f_38","name":"1982","type":"P","href":null,"layout":null,"metadata":null,"text":"The most technical designers felt the pressure to start experimenting with code by themselves. This gave them superpowers because it informed their otherwise naive stance about how the real world of UI programming works. A push towards getting more robust tools was felt, and the leading tools (Sketch, Figma, and XD) introduced Auto Layout, which was a slightly capped but friendly version of Flexbox. It was like having a mini-universe with DOM-like gravity inside a capsuled ‘auto-layout-enabled frame,’ inside a universe of a do-whatever-you-like canvas.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_39":{"__typename":"Paragraph","id":"c38c6317500f_39","name":"6f74","type":"P","href":null,"layout":null,"metadata":null,"text":"This was revolutionary. Designers began to consider how content affects container sizes. Layout reflow became more robust, and finally, padding mattered.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_40":{"__typename":"Paragraph","id":"c38c6317500f_40","name":"e797","type":"P","href":null,"layout":null,"metadata":null,"text":"Savvy designers started building almost everything they had in the UI using auto-layout.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_41":{"__typename":"Paragraph","id":"c38c6317500f_41","name":"0f47","type":"H3","href":null,"layout":null,"metadata":null,"text":"Now, let that sink in for a second…","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_42":{"__typename":"Paragraph","id":"c38c6317500f_42","name":"48c7","type":"P","href":null,"layout":null,"metadata":null,"text":"In a universe with no gravitation, we are creating almost everything as a bunch of microuniverses with gravitation! Wouldn’t it be so much easier if the base default reality was the one with the gravitation, sort of auto layout by default!? Oh wait, that’s exactly how the web, iOS, and Android already work.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*PzNgyj233lXvXmtuAuFwng.png":{"__typename":"ImageMetadata","id":"1*PzNgyj233lXvXmtuAuFwng.png","originalHeight":942,"originalWidth":1600,"focusPercentX":null,"focusPercentY":null,"alt":"A speculative diagram of the progress design tools have made in terms of resemblance to code"},"Paragraph:c38c6317500f_43":{"__typename":"Paragraph","id":"c38c6317500f_43","name":"1980","type":"IMG","href":null,"layout":"OUTSET_CENTER","metadata":{"__ref":"ImageMetadata:1*PzNgyj233lXvXmtuAuFwng.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_44":{"__typename":"Paragraph","id":"c38c6317500f_44","name":"62e3","type":"P","href":null,"layout":null,"metadata":null,"text":"So the trajectory of progress seems clear if you look at the last 10 years. Tools are trying to get designers closer and closer to systematic and flexible design rule-making.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_45":{"__typename":"Paragraph","id":"c38c6317500f_45","name":"e825","type":"P","href":null,"layout":null,"metadata":null,"text":"But…","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_46":{"__typename":"Paragraph","id":"c38c6317500f_46","name":"4506","type":"P","href":null,"layout":null,"metadata":null,"text":"We are still before the biggest, most important leap forward.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_47":{"__typename":"Paragraph","id":"c38c6317500f_47","name":"e2d7","type":"BQ","href":null,"layout":null,"metadata":null,"text":"For the actual UI building (components and pages) — product designers will have to give up their beloved free-form canvas.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"EM","start":0,"end":122,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_48":{"__typename":"Paragraph","id":"c38c6317500f_48","name":"ee59","type":"P","href":null,"layout":null,"metadata":null,"text":"As far as I can see it, designing and building digital products will have to abide by the constraints of the platform in which they are coded and tested. As a designer, I must have the full spectrum of tools to use flex, grid, padding, margin, percentages on every single measurement, viewport units, and many more. I need to be able to easily change the viewport and see everything that needs to be affected — be affected. Components should have a difference between states and properties because they are not the same. Their variants should be set in a rule-based fashion, not by specifying all my variants one by one. Instead of styles, Design Tokens should parametrize everything. Robust, multi-layered tokens with aliases and composite token types (like typography).","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_49":{"__typename":"Paragraph","id":"c38c6317500f_49","name":"7122","type":"P","href":null,"layout":null,"metadata":null,"text":"The default of the tool has to help me make better decisions, not nicer or easier decisions. It has to keep me from veering too easily into a naive, chaotic, inconsistent mess of a system. A system that will be easy to create on a whim, but nightmarish to maintain. To get a sense of what we are actually doing when we’re designing for interactive digital experiences — read what Frank Chimero wrote in his essay ‘The Web’s Grain’. This part is about how hard it is to master the design for screens because they are:","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":413,"end":430,"href":"https:\u002F\u002Ffrankchimero.com\u002Fblog\u002F2015\u002Fthe-webs-grain\u002F","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"EM","start":44,"end":50,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"EM","start":66,"end":71,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"EM","start":75,"end":81,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_50":{"__typename":"Paragraph","id":"c38c6317500f_50","name":"ee24","type":"BQ","href":null,"layout":null,"metadata":null,"text":"‘an edgeless surface of unknown proportions comprised of small, individual, and variable elements from multiple vantages assembled into a readable whole that documents a moment’.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"EM","start":0,"end":178,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_51":{"__typename":"Paragraph","id":"c38c6317500f_51","name":"6c47","type":"P","href":null,"layout":null,"metadata":null,"text":"This is the grain of digital products, web, and elsewhere. So the design tools we use should help us actually interact with this ‘surface,’ not hide and abstract it away from us. It’s time we mature as designers. The quality of processes, the relationships with the developers, our products, and the well-being of our customers are all well worth the effort.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_52":{"__typename":"Paragraph","id":"c38c6317500f_52","name":"5f7f","type":"P","href":null,"layout":null,"metadata":null,"text":"The right tool will have to be built for a collaboration. A true collaboration, not a handoff. With developers, because complex products (which will be the vast majority) need them. There’s no avoiding that with dreams of magic AI fairy dust and no-code, no-dev narrow builders, empowering as they may seem.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_53":{"__typename":"Paragraph","id":"c38c6317500f_53","name":"bdf8","type":"P","href":null,"layout":null,"metadata":null,"text":"I hope disruption is well on its way. I’m working with my friends to build a tool I believe has these properties. It’s called Jux. Still very early days and a long way to go, but I think we’re on to something truly radical.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":126,"end":129,"href":"http:\u002F\u002Fjux.io","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_54":{"__typename":"Paragraph","id":"c38c6317500f_54","name":"b335","type":"P","href":null,"layout":null,"metadata":null,"text":"Dive even deeper by reading these:","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_55":{"__typename":"Paragraph","id":"c38c6317500f_55","name":"a3c4","type":"OLI","href":null,"layout":null,"metadata":null,"text":"Nathan Curtis’s great article about what should a spec for handoff include","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":16,"end":29,"href":"https:\u002F\u002Fmedium.com\u002Feightshapes-llc\u002Fcomponent-specifications-1492ca4c94c","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_56":{"__typename":"Paragraph","id":"c38c6317500f_56","name":"61f1","type":"OLI","href":null,"layout":null,"metadata":null,"text":"Brad Frost’s article + demo for prototyping using Claude with real coded objects.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":13,"end":27,"href":"https:\u002F\u002Fbradfrost.com\u002Fblog\u002Fpost\u002Fthe-already-here-future-of-prototyping\u002F","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_57":{"__typename":"Paragraph","id":"c38c6317500f_57","name":"28f0","type":"OLI","href":null,"layout":null,"metadata":null,"text":"To have a good sense of the real interactivity of most common components go through this list by Iain Bean. There’s a page for components and a page for some great design systems.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":89,"end":107,"href":"https:\u002F\u002Fcomponent.gallery\u002Fcomponents\u002F","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_58":{"__typename":"Paragraph","id":"c38c6317500f_58","name":"7fbb","type":"OLI","href":null,"layout":null,"metadata":null,"text":"Read Shamsi’s article laying out an argument against the handoff.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":14,"end":21,"href":"https:\u002F\u002Fnohandoff.org\u002Fno-handoff-between-product-and-engineering\u002F","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_59":{"__typename":"Paragraph","id":"c38c6317500f_59","name":"ee56","type":"OLI","href":null,"layout":null,"metadata":null,"text":"Read Joe Alterio’s deep piece about tools and craft and how AI will affect it all.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":19,"end":29,"href":"https:\u002F\u002Fuxdesign.cc\u002Fthe-death-of-craft-feec4cc5eb58","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_60":{"__typename":"Paragraph","id":"c38c6317500f_60","name":"20ad","type":"OLI","href":null,"layout":null,"metadata":null,"text":"Great read from Vitaly Friedman of Smashing Magazine regarding ‘no handoff’","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":0,"end":10,"href":"https:\u002F\u002Fwww.smashingmagazine.com\u002F2023\u002F03\u002Fbest-handoff-is-no-handoff\u002F","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:c38c6317500f_61":{"__typename":"Paragraph","id":"c38c6317500f_61","name":"d852","type":"P","href":null,"layout":null,"metadata":null,"text":"Originally posted on the Jux blog here","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":34,"end":38,"href":"https:\u002F\u002Fwww.jux.io\u002Fblog\u002Fthe-root-causes-for-the-dev-design-mismatch","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"CollectionViewerEdge:collectionId:138adf9c44c-viewerId:lo_51ae385ee829":{"__typename":"CollectionViewerEdge","id":"collectionId:138adf9c44c-viewerId:lo_51ae385ee829","isEditor":false,"isMuting":false},"ImageMetadata:1*9V9oqYyYnfP5yy7cb7YTMQ.png":{"__typename":"ImageMetadata","id":"1*9V9oqYyYnfP5yy7cb7YTMQ.png","originalWidth":612,"originalHeight":102},"PostViewerEdge:postId:4c66e0fa6740-viewerId:lo_51ae385ee829":{"__typename":"PostViewerEdge","shouldIndexPostForExternalSearch":true,"id":"postId:4c66e0fa6740-viewerId:lo_51ae385ee829"},"Tag:ui":{"__typename":"Tag","id":"ui","displayTitle":"UI","normalizedTagSlug":"ui"},"Tag:product-design":{"__typename":"Tag","id":"product-design","displayTitle":"Product Design","normalizedTagSlug":"product-design"},"Tag:development":{"__typename":"Tag","id":"development","displayTitle":"Development","normalizedTagSlug":"development"},"Tag:ux":{"__typename":"Tag","id":"ux","displayTitle":"UX","normalizedTagSlug":"ux"},"Tag:design":{"__typename":"Tag","id":"design","displayTitle":"Design","normalizedTagSlug":"design"},"Post:4c66e0fa6740":{"__typename":"Post","id":"4c66e0fa6740","collection":{"__ref":"Collection:138adf9c44c"},"content({\"postMeteringOptions\":{}})":{"__typename":"PostContent","isLockedPreviewOnly":false,"bodyModel":{"__typename":"RichText","sections":[{"__typename":"Section","name":"afc6","startIndex":0,"textLayout":null,"imageLayout":null,"backgroundImage":null,"videoLayout":null,"backgroundVideo":null},{"__typename":"Section","name":"95f7","startIndex":54,"textLayout":null,"imageLayout":null,"backgroundImage":null,"videoLayout":null,"backgroundVideo":null},{"__typename":"Section","name":"04d5","startIndex":61,"textLayout":null,"imageLayout":null,"backgroundImage":null,"videoLayout":null,"backgroundVideo":null}],"paragraphs":[{"__ref":"Paragraph:c38c6317500f_0"},{"__ref":"Paragraph:c38c6317500f_1"},{"__ref":"Paragraph:c38c6317500f_2"},{"__ref":"Paragraph:c38c6317500f_3"},{"__ref":"Paragraph:c38c6317500f_4"},{"__ref":"Paragraph:c38c6317500f_5"},{"__ref":"Paragraph:c38c6317500f_6"},{"__ref":"Paragraph:c38c6317500f_7"},{"__ref":"Paragraph:c38c6317500f_8"},{"__ref":"Paragraph:c38c6317500f_9"},{"__ref":"Paragraph:c38c6317500f_10"},{"__ref":"Paragraph:c38c6317500f_11"},{"__ref":"Paragraph:c38c6317500f_12"},{"__ref":"Paragraph:c38c6317500f_13"},{"__ref":"Paragraph:c38c6317500f_14"},{"__ref":"Paragraph:c38c6317500f_15"},{"__ref":"Paragraph:c38c6317500f_16"},{"__ref":"Paragraph:c38c6317500f_17"},{"__ref":"Paragraph:c38c6317500f_18"},{"__ref":"Paragraph:c38c6317500f_19"},{"__ref":"Paragraph:c38c6317500f_20"},{"__ref":"Paragraph:c38c6317500f_21"},{"__ref":"Paragraph:c38c6317500f_22"},{"__ref":"Paragraph:c38c6317500f_23"},{"__ref":"Paragraph:c38c6317500f_24"},{"__ref":"Paragraph:c38c6317500f_25"},{"__ref":"Paragraph:c38c6317500f_26"},{"__ref":"Paragraph:c38c6317500f_27"},{"__ref":"Paragraph:c38c6317500f_28"},{"__ref":"Paragraph:c38c6317500f_29"},{"__ref":"Paragraph:c38c6317500f_30"},{"__ref":"Paragraph:c38c6317500f_31"},{"__ref":"Paragraph:c38c6317500f_32"},{"__ref":"Paragraph:c38c6317500f_33"},{"__ref":"Paragraph:c38c6317500f_34"},{"__ref":"Paragraph:c38c6317500f_35"},{"__ref":"Paragraph:c38c6317500f_36"},{"__ref":"Paragraph:c38c6317500f_37"},{"__ref":"Paragraph:c38c6317500f_38"},{"__ref":"Paragraph:c38c6317500f_39"},{"__ref":"Paragraph:c38c6317500f_40"},{"__ref":"Paragraph:c38c6317500f_41"},{"__ref":"Paragraph:c38c6317500f_42"},{"__ref":"Paragraph:c38c6317500f_43"},{"__ref":"Paragraph:c38c6317500f_44"},{"__ref":"Paragraph:c38c6317500f_45"},{"__ref":"Paragraph:c38c6317500f_46"},{"__ref":"Paragraph:c38c6317500f_47"},{"__ref":"Paragraph:c38c6317500f_48"},{"__ref":"Paragraph:c38c6317500f_49"},{"__ref":"Paragraph:c38c6317500f_50"},{"__ref":"Paragraph:c38c6317500f_51"},{"__ref":"Paragraph:c38c6317500f_52"},{"__ref":"Paragraph:c38c6317500f_53"},{"__ref":"Paragraph:c38c6317500f_54"},{"__ref":"Paragraph:c38c6317500f_55"},{"__ref":"Paragraph:c38c6317500f_56"},{"__ref":"Paragraph:c38c6317500f_57"},{"__ref":"Paragraph:c38c6317500f_58"},{"__ref":"Paragraph:c38c6317500f_59"},{"__ref":"Paragraph:c38c6317500f_60"},{"__ref":"Paragraph:c38c6317500f_61"}]},"validatedShareKey":"","shareKeyCreator":null},"creator":{"__ref":"User:1a7046474bbe"},"inResponseToEntityType":null,"isLocked":false,"isMarkedPaywallOnly":false,"lockedSource":"LOCKED_POST_SOURCE_NONE","mediumUrl":"https:\u002F\u002Fuxdesign.cc\u002Fthe-root-causes-for-the-dev-design-mismatch-4c66e0fa6740","primaryTopic":{"__ref":"Topic:617a1adb36d5"},"topics":[{"__typename":"Topic","slug":"design"},{"__typename":"Topic","slug":"ux"}],"isPublished":true,"latestPublishedVersion":"c38c6317500f","visibility":"PUBLIC","postResponses":{"__typename":"PostResponses","count":17},"clapCount":814,"allowResponses":true,"isLimitedState":false,"title":"The root causes for the dev-design mismatch","isSeries":false,"sequence":null,"uniqueSlug":"the-root-causes-for-the-dev-design-mismatch-4c66e0fa6740","socialTitle":"","socialDek":"","canonicalUrl":"","metaDescription":"","latestPublishedAt":1731871225950,"readingTime":10.040566037735848,"previewContent":{"__typename":"PreviewContent","subtitle":"Designers use an unconstrained canvas tool to design for rule-based interactive systems, hoping the devs will perfect everything in…"},"previewImage":{"__ref":"ImageMetadata:1*GE4vWD3070W9L4pIDMPEDw.png"},"isShortform":false,"seoTitle":"","firstPublishedAt":1731871225950,"updatedAt":1731897274596,"shortformType":"SHORTFORM_TYPE_LINK","seoDescription":"","viewerEdge":{"__ref":"PostViewerEdge:postId:4c66e0fa6740-viewerId:lo_51ae385ee829"},"isSuspended":false,"license":"ALL_RIGHTS_RESERVED","tags":[{"__ref":"Tag:ui"},{"__ref":"Tag:product-design"},{"__ref":"Tag:development"},{"__ref":"Tag:ux"},{"__ref":"Tag:design"}],"isNewsletter":false,"statusForCollection":"APPROVED","pendingCollection":null,"detectedLanguage":"en","wordCount":2409,"layerCake":1,"responsesLocked":false}}</script><script src="https://cdn-client.medium.com/lite/static/js/manifest.b2314f6d.js"></script><script src="https://cdn-client.medium.com/lite/static/js/9865.1496d74a.js"></script><script src="https://cdn-client.medium.com/lite/static/js/main.24534aeb.js"></script><script src="https://cdn-client.medium.com/lite/static/js/instrumentation.d9108df7.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/reporting.ff22a7a5.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/9120.5df29668.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5049.d1ead72d.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/4810.6318add7.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6618.db187378.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2707.b0942613.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/9977.5b3eb23a.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8599.1ab63137.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5250.9f9e01d2.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6349.b071a958.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2648.26563adf.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8393.826a25fb.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/7079.67349d50.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/3735.afb7e926.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5642.a2d9f6a1.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6546.cd03f950.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6834.08de95de.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/7346.72622eb9.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2420.2a5e2d95.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/839.ca7937c2.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/7975.d195c6f1.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2106.21ff89d3.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/7394.3d049572.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2961.00a48598.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8204.c4082863.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/4391.59acaed3.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/PostPage.MainContent.c8a11795.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8414.6565ad5f.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/3974.8d3e0217.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2527.a0afad8a.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/PostResponsesContent.36c2ecf4.chunk.js"></script><script>window.main();</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:'8e73cb2c0cd5ce3f',t:'MTczMjM5MjUzMi4wMDAwMDA='};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>

Pages： 1 2 3 4 5 6 7 8 9 10