CINXE.COM

<!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Privacy Policy – Smart Interface Design Patterns</title> <link rel="preload" href="/build/Mija_Bold-subset.e92b1157.woff2" as="font" type="font/woff2" fetchpriority="high" crossorigin> <link rel="preconnect" href="https://player.vimeo.com/"> <script>if(document.documentElement){ document.documentElement.classList.add('has-js'); document.documentElement.classList.remove('no-js'); }</script> <link rel="stylesheet" href="/build/src/assets/scss/main.css" /> <link rel="preload" href="/build/ElenaWebRegular-subset.52089e95.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="/build/ElenaWebBold-subset.bccbf96e.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="/build/ElenaWebRegularItalic-subset.f8df7c80.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="/build/Mija_Regular-subset.fdae932c.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="/static/img/chapters/chapter-1.png" as="image"> <script src="/build/node_modules/courses-ui-components/src/assets/js/app.js" fetchpriority="high" defer></script> <meta name="description" content="" /> <meta property="og:url" content="https://smart-interface-design-patterns.com" /> <meta property="og:type" content="website" /> <meta property="og:title" content="Privacy Policy — Smart Interface Design Patterns" /> <meta property="og:description" content="" /> <meta property="og:image" content="https://smart-interface-design-patterns.com/static/img/open-graph.jpg" /> <meta property="og:image:alt" content="Smart Interface Design Patterns, 10h-video course with Vitaly Friedman" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Privacy Policy - Smart Interface Design Patterns" /> <meta name="twitter:description" content="" /> <meta name="twitter:image" content="https://smart-interface-design-patterns.com/static/img/open-graph.jpg" /> <meta name="google-site-verification" content="3dKepg8Oj4afYqeHE3T66ZeouPjFO7G8ab4FCAn66U4" /> <link rel="apple-touch-icon" sizes="180x180" href="/static/icons/apple-touch-icon.png"> <link rel="icon" href="/static/icons/favicon.ico" sizes="any"> <link rel="icon" href="/static/icons/favicon.svg" type="image/svg+xml"> <link rel="manifest" href="/static/icons/manifest.json"> <link rel="mask-icon" href="/static/icons/favicon.svg" color="#fff"> <meta name="apple-mobile-web-app-title" content="Smart Interface Design Patterns, with Vitaly Friedman"> <meta name="application-name" content="Smart Interface Design Patterns, with Vitaly Friedman"> <meta name="msapplication-TileColor" content="#0d242f"> <meta name="msapplication-config" content="/static/icons/browserconfig.xml"> <meta name="theme-color" content="#0d242f"> <link rel="alternate" type="application/rss+xml" href="https://smart-interface-design-patterns.com/feed.xml" title="Smart Interface Design Patterns RSS Feed" /> </head> <body class=""> <header class="c-header c-header--sticky" id="header"> <div class="c-header__wrap u-wrap u-wrap--full"> <div class="c-header__logo-wrapper"> <a class="c-header__logo" href="/" aria-label="Home"> <figure class="c-header__logo-smash"> <div class="c-header__logo-aspect"> <svg xmlns="http://www.w3.org/2000/svg" width="44" height="87" viewBox="0 0 44 87"><defs><linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="99.9%"><stop offset="0%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity=".3"/><stop offset="2%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity=".3"/><stop offset="28%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity=".1"/><stop offset="48%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity="0"/><stop offset="60%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity=".2"/><stop offset="14%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity=".1"/><stop offset="36%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity="0"/><stop offset="50%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity="0"/></linearGradient></defs><g fill="none" fill-rule="nonzero"><g fill="var(--smashing-logo, #FFF8EC)"><path d="M25.7 28.2c-2-1.5-4.2-2.7-6.5-3.5-1.8-.8-3.5-1.7-5-2.7-3.8-2.7-5.7-5.9-5.7-9.8A10 10 0 0111.4 5l-8 1.9A4.3 4.3 0 000 11.9l6.7 28.7a4.3 4.3 0 005.1 3.3l3.3-.8H15c-2.2-.7-4.4-1.7-6.4-2.8l3.5-7.7c2.7 2.3 6.2 3.5 9.7 3.5 3.8 0 5.7-1.4 5.7-4a5 5 0 00-1.8-3.9zM43.9 32L37.2 3.5A4.3 4.3 0 0032.1 0l-4.9 1.1a28.5 28.5 0 018 2.6l-2.9 7.5c-2.1-1.8-5-2.7-8.8-2.7-3.4 0-5 1.3-5 4 0 1.1.6 2.2 1.6 2.8 2.2 1.4 4.6 2.6 7.1 3.4 2.2.8 4.2 2 6 3.4.7.5 1.3 1.2 1.9 1.8 1.6 2.2 2.4 4.8 2.4 7.4 0 2.6-.8 5-2.3 7.1l5.4-1.2A4.3 4.3 0 0044 32z"/></g><path fill="url(#a)" d="M21.8 8c-3.5 0-7 1.1-9.7 3.4L8.6 3.7c2-1.2 4.2-2 6.4-2.8h.2L12 0c-2.3-.5-4.6 1-5.1 3.3L0 32c-.5 2.3 1 4.6 3.3 5.2l8 1.8a9.6 9.6 0 01-3-7.3c0-3.9 2-7.1 5.7-9.7 1.6-1.1 3.2-2 5-2.7 2.4-.9 4.6-2 6.6-3.6a5 5 0 001.7-3.8c0-2.7-1.8-4-5.6-4z" transform="translate(0 43)"/><path fill="url(#b)" d="M40.6 6.7l-5.4-1.2c1.5 2 2.4 4.6 2.3 7.1a11.6 11.6 0 01-4.3 9.3 22.2 22.2 0 01-6 3.3c-2.5.9-4.8 2-7 3.4-1 .6-1.6 1.6-1.7 2.8 0 2.6 1.7 4 5 4 3.8 0 6.7-1 8.8-2.7l2.8 7.5a26.4 26.4 0 01-7.8 2.6l4.8 1c2.3.6 4.6-.8 5.2-3.2L43.9 12a4.3 4.3 0 00-3.3-5.2z" transform="translate(0 43)"/></g></svg> </div> </figure> <figure class="c-header__logo-smart"> <div class="c-header__logo-aspect"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 142 41" id="smart-logo" fill="none" stroke="none"> <defs> <path id="a" d="M0 0h5.7v8H0z"/> </defs> <g fill="none" fill-rule="evenodd"> <path class="title" d="M3.4 0c.6 0 1 0 1.5.3.4.1.7.3 1 .6.3.2.4.5.5.8.2.3.2.6.2.9 0 .3-.1.4-.5.4h-.3l-.2-.4-.2-.6-.5-.5a2 2 0 00-.6-.4l-1-.1h-.8l-.6.4-.4.4-.1.6V3l.4.4c.2.1.4.3.7.3l1 .3 1.6.3 1 .5.4.6.2.7c0 .3 0 .5-.2.8 0 .3-.3.5-.5.7a3 3 0 01-1 .5 5.3 5.3 0 01-3 0l-1-.5C.6 7.4.4 7 .2 6.9L0 6l.1-.3.3-.1h.3L1 6l.2.3.3.4.5.4.4.2.5.2h.7c.7 0 1.2 0 1.5-.3.4-.2.5-.5.5-.9v-.5L5 5.4 4.3 5a37.8 37.8 0 00-2.6-.6L1 4c-.3-.2-.4-.5-.5-.7a2.3 2.3 0 010-1.8l.7-.8 1-.5L3.3 0M11.5.1h.4c.2 0 .2.1.3.2l.2.2.1.4A87.5 87.5 0 0015 6.6l.1-.4A157.2 157.2 0 0017.2.3l.3-.1h1.1l.1.5V5.3l.1 1V8l-.6.1-.4-.1v-.8-1-1.3a695.7 695.7 0 010-2.5v-.6-.2h-.1-.1l-.2.5-2 5.4-.2.4-.5.2c-.2 0-.4 0-.5-.2A44 44 0 0112 2.1l-.1-.3a5.1 5.1 0 00-.1-.3h-.2v.1a8 8 0 000 .6 47 47 0 000 4 66.5 66.5 0 000 1.9h-.9v-.4a34.7 34.7 0 010-2.9v-.6a56.1 56.1 0 000-3V.6l.1-.4.7-.2M24.8 4.4a3.2 3.2 0 000 .2l.1.2h2.3s.2 0 .2-.2l-.1-.2a135 135 0 00-.7-2l-.2-.7-.1-.2h-.5v.2a16.6 16.6 0 00-.4 1l-.2.3a30.7 30.7 0 01-.4 1.4m-2.4 3.4v-.1l.1-.3a12.6 12.6 0 01.6-1.6l.5-1.2A159.8 159.8 0 0125.4.3L26 0c.3 0 .6 0 .7.2l.5.7.2.6a173.2 173.2 0 011.1 3l.4 1.2a170.8 170.8 0 00.7 2.2l-.4.1h-.7l-.2-.4a67.8 67.8 0 01-1-2.2H24.5l-.1.2-.7 2c0 .2-.1.3-.2.3h-.8c-.2 0-.3 0-.3-.2M34.5 4v.2l.3.2h2.5l.8-.5.4-.5a1.7 1.7 0 000-1.4l-.5-.6-.8-.3a4 4 0 00-1-.2h-1l-.5.2s-.2 0-.2.2v.5a19.3 19.3 0 010 2v.1zm4.4 2.4l.5.6.4.2.3.2V8l-.5.1c-.3 0-.6 0-.8-.2l-.6-.5-.4-.7a18.9 18.9 0 01-.6-1l-.2-.3-.4-.1a21.9 21.9 0 01-1.4 0H35l-.2-.1h-.3v.2a31.3 31.3 0 000 1v.8a40.4 40.4 0 01-.1.8l-.5.1h-.4l-.1-.4v-1a147.5 147.5 0 010-6.1c0-.2.2-.3.4-.4l.8-.2H36a6 6 0 011.7.2l1.2.6c.3.2.5.5.6.8.2.4.2.7.2 1l-.1 1-.4.5-.4.4a3.6 3.6 0 01-.8.4h-.2v.2c.1 0 .2 0 .3.2l.3.3.5.8zM43.1.1h.4a53 53 0 011.8 0h1.9a84.2 84.2 0 001.6 0c.3 0 .4.2.4.5V1h-2.3l-.2.2-.1.2v.4a81.7 81.7 0 000 2v1a89 89 0 000 3.2l-.2.1h-.8l-.1-.4V4a49.6 49.6 0 010-2.9h-2.3L43 1V.6.2h.2M61 .1c.2 0 .4.2.4.5V8l-.2.1h-.8l-.1-.4v-3a143.2 143.2 0 000-2.5v-.8a41.3 41.3 0 010-1.2H61zM72.3 3.4a121.4 121.4 0 000 2.5v1a53.7 53.7 0 01-.1 1l-.6.2h-.3L71 8l-.2-.2a6.2 6.2 0 01-.5-.8l-.5-.7-.7-1.1a202.8 202.8 0 01-2.3-3.3v.3a3.3 3.3 0 000 .4V8l-.4.1h-.6V6.8a49 49 0 010-1.6V3a80.8 80.8 0 000-1.8V.8l.1-.5.5-.1.5.1.3.3a57.2 57.2 0 012.3 3.6l.9 1.3a43.3 43.3 0 00.9 1 42.6 42.6 0 000-5 39.8 39.8 0 010-1.2h.6c.2 0 .4 0 .4.3v2.8zM76.1.1h.4a53 53 0 011.8 0h1.9a84.2 84.2 0 001.6 0c.3 0 .4.2.4.5V1h-2.4l-.2.2V1.8a81.7 81.7 0 000 2v1a89 89 0 000 3.2l-.2.1h-.8l-.1-.4V4a49.6 49.6 0 010-2.9h-2.3l-.3-.1-.1-.4V.2h.3M91 4.3v.4H87l-.3.2V5a12.3 12.3 0 010 .7v.9l.1.4h1.4a50 50 0 001.6 0h1l.3.2.1.3V8l-.4.1h-.2a21.3 21.3 0 01-1.1 0H88a55.5 55.5 0 00-1.5 0h-.4l-.5-.1v-.4a14.6 14.6 0 010-.8V6v-.8a246.2 246.2 0 010-2.3V2a246.7 246.7 0 000-1.8h.5a37 37 0 003.2 0H91.2V1h-.4a20.2 20.2 0 01-1.7 0 31.1 31.1 0 00-2.2.1V4H90.6l.3.1.1.3M96.3 4v.2l.3.2h2.5l.8-.5.4-.5a1.7 1.7 0 000-1.4l-.5-.6-.7-.3A4 4 0 0098 .9h-1l-.4.2c-.2 0-.2 0-.2.2v.5a19.3 19.3 0 01-.1 2v.1zm4.5 2.4l.4.6.4.2.3.2.1.3-.1.3-.5.1c-.3 0-.5 0-.7-.2-.3-.1-.4-.3-.6-.5l-.5-.7a18.9 18.9 0 01-.6-1l-.2-.3-.3-.1a21.9 21.9 0 01-1.4 0h-.3l-.2-.1h-.2v.2a31.3 31.3 0 000 1v.8a40.4 40.4 0 01-.2.8l-.4.1h-.5V6.6a147.5 147.5 0 010-6.1c0-.2.1-.3.3-.4l.8-.2H98a6 6 0 011.7.2l1.1.6.7.8.2 1c0 .4 0 .7-.2 1 0 .2-.2.4-.3.5l-.5.4a3.6 3.6 0 01-.8.4h-.1v.2l.2.2.4.3.5.8zM111.2 4.5v.3l-.4.1h-3.7l-.3.1v2.7l-.1.3-.5.1h-.5v-.4a45.1 45.1 0 010-4.6v-1a455.7 455.7 0 000-1.8l.5-.2a51.9 51.9 0 013.1 0h1.6l.3.1.1.4-.1.4h-.4a19.1 19.1 0 01-1.7 0 30.5 30.5 0 00-2.2.1V3.7c0 .3 0 .4.4.4h3.8l.1.4M116.6 4.4a3.2 3.2 0 000 .2l.1.2h2.3c.1 0 .2 0 .2-.2v-.2a134.8 134.8 0 00-.8-2l-.2-.7v-.2h-.5l-.1.2a16.6 16.6 0 00-.4 1l-.1.3a30.7 30.7 0 01-.5 1.4m-2.3 3.4v-.1-.3a12.6 12.6 0 01.6-1.6l.5-1.2.4-1.1a159.8 159.8 0 011.4-3.2l.7-.2c.4 0 .6 0 .8.2l.4.7.2.6a173.1 173.1 0 011.1 3l.4 1.2a170.8 170.8 0 00.7 2.2l-.3.1h-.8l-.2-.4a67.8 67.8 0 01-1-2.2H116.3l-.1.2-.7 2c0 .2 0 .3-.2.3h-.8c-.1 0-.2 0-.2-.2M131.8 5.6l.3.1.1.3c0 .2 0 .4-.2.6 0 .3-.3.6-.5.8l-1.1.7-1.7.2c-.7 0-1.3 0-1.7-.3a3.3 3.3 0 01-2-2.2 5.8 5.8 0 01.1-3.3c.2-.5.4-.9.8-1.3a3.6 3.6 0 012.8-1.2 4 4 0 011.7.3c.4.2.8.4 1 .7a2.6 2.6 0 01.8 1.7c0 .3-.2.4-.5.4h-.4a1 1 0 01-.2-.5 3 3 0 00-.9-1.2c-.3-.3-.8-.4-1.4-.4-.5 0-1 0-1.3.2a2.8 2.8 0 00-1.5 2.2 5 5 0 00.2 2.2c.1.4.3.7.6 1 .2.3.5.5.9.6.3.2.7.2 1 .2l1-.1c.3 0 .6-.2.7-.3l.5-.4.3-.5.3-.4h.3M141.7 4.3v.4h-4l-.2.2V5a12.2 12.2 0 010 .7v1.3h1.5a50 50 0 001.6 0h1l.3.2.1.3-.1.4-.3.1h-.3a21.3 21.3 0 01-1 0h-1.5a55.5 55.5 0 00-1.5 0h-.4l-.5-.1v-.4a14.6 14.6 0 010-.8V6v-.8a246.4 246.4 0 010-2.3V2a246.7 246.7 0 000-1.8h.5a37 37 0 003.1 0h1.8l.2.4c0 .2 0 .3-.2.4h-.3a20.2 20.2 0 01-1.7 0 31.1 31.1 0 00-2.2.1V4H141.3l.3.1v.3M6 21.2c.3-.3.5-.6.6-1l.1-1.5-.1-1-.6-1a3 3 0 00-1-.8l-1.6-.2a13.4 13.4 0 00-1.2 0L2 16v.2a48 48 0 000 5v.5c0 .2.1.3.3.3l1 .1a10.4 10.4 0 001.5-.1c.2 0 .4-.2.5-.3.2 0 .4-.2.6-.4m-3-6.5c1 0 1.7 0 2.3.3l1.6.8c.4.4.6.8.8 1.3.2.5.3 1 .3 1.7v.8a3.4 3.4 0 01-.6 1.4l-.5.7-1.4 1-2 .2a21.6 21.6 0 01-2-.1 1 1 0 01-.4-.2v-.1L.8 22a27.3 27.3 0 010-2.3 96.9 96.9 0 000-4.2V15l.3-.3H2l1-.1M17.2 19v.4h-3.9l-.3.1v.3a12.3 12.3 0 010 .7v1.3h1.5a50 50 0 001.6 0h1l.3.1.1.4-.1.4h-.6a21.3 21.3 0 01-1 0h-1.5a55.5 55.5 0 00-1.5 0h-.9v-.4a14.6 14.6 0 010-.9v-.7-.7a246.2 246.2 0 010-2.3v-1a246.7 246.7 0 000-1.8h.5a37 37 0 003.1 0h1.8l.2.3-.1.5H17a20.2 20.2 0 01-1.7 0 31.1 31.1 0 00-2.2.1v2.7l.3.1h3.4l.3.1.1.3M24.4 14.7c.6 0 1 0 1.5.2l1 .7.5.8.2.9c0 .3-.2.4-.5.4l-.3-.1-.2-.3-.3-.6c0-.2-.2-.4-.4-.6a2 2 0 00-.6-.3l-1-.2-.8.1c-.3.1-.5.2-.6.4-.2 0-.3.2-.4.4l-.1.6v.6l.4.4.7.3 1 .3c.6 0 1.1.2 1.5.3l1 .5.5.5.2.8-.2.8-.5.7a3 3 0 01-1 .5 5.3 5.3 0 01-3 0l-1-.5-.8-.8-.2-.7.1-.3.3-.1h.3l.2.2.2.3.3.4.4.4.5.2.5.1.7.1c.7 0 1.2-.1 1.5-.3.3-.2.5-.5.5-1l-.1-.4c0-.1-.2-.3-.4-.3l-.7-.3a37.8 37.8 0 00-2.6-.7l-.8-.5c-.3-.2-.4-.4-.5-.6a2.3 2.3 0 010-1.8l.6-.8 1-.5 1.4-.2M32.4 14.8c.3 0 .4.2.4.5V22.7h-.2l-.3.1h-.5v-3.4a143.2 143.2 0 00-.1-2.5V16a41.3 41.3 0 010-1c.1-.2.3-.2.4-.2h.3zM40.8 15.6c-.5 0-1 .1-1.3.3a2.7 2.7 0 00-1.1 1l-.3.5-.2.7v.9c0 .4 0 .9.2 1.2a2.7 2.7 0 001.6 1.6 3.4 3.4 0 002.3 0c.3 0 .6-.2.8-.4l.4-.5.1-.5V20H41l-.2-.1v-.3-.4h2.8l.6.1.2.6a2.9 2.9 0 01-.9 2c-.2.3-.6.5-1 .7-.5.2-1 .3-1.7.3s-1.2-.2-1.7-.4a3.9 3.9 0 01-2.4-3.7c0-.5 0-1 .2-1.5l.6-1.2c.4-.5.8-1 1.3-1.2.6-.2 1.2-.3 2-.3a3.4 3.4 0 012.6.9l.5.8.3.9-.1.4-.4.1-.4-.1a1 1 0 01-.2-.4 3 3 0 00-.9-1.2c-.3-.3-.8-.5-1.4-.5M54.8 18a121.4 121.4 0 000 2.5v1a53.7 53.7 0 010 1.1l-.6.2H54l-.3-.2-.2-.1a6.2 6.2 0 01-.5-.8l-.5-.7-.7-1.1a202.8 202.8 0 01-2.3-3.3v.2a3.3 3.3 0 000 .5v5.4h-1v-1.2a49 49 0 010-1.6v-2.3a80.8 80.8 0 000-1.7v-.4-.5l.6-.1h.5l.3.4a57.2 57.2 0 012.3 3.5l.8 1.3a43.3 43.3 0 001 1.2V21a42.6 42.6 0 00-.1-4.8 39.8 39.8 0 010-1.3l.4-.1h.3c.2 0 .3.1.3.4V18zM69.6 19.2c.5 0 .9 0 1.1-.2.3 0 .6-.2.7-.3l.4-.6.1-.7c0-.6-.2-1-.7-1.3-.4-.3-1-.5-1.9-.5h-.8l-.5.1-.1.2v.5a21.3 21.3 0 01-.1 2.2v.4l.4.1h1.4m3.4-1.8c0 .4 0 .8-.2 1a2 2 0 01-.6 1 3 3 0 01-1 .5l-1.6.1a28.8 28.8 0 01-1.8 0v.3a38.2 38.2 0 000 2.2l-.1.3h-.9l-.1-.3a41 41 0 000-1.4 110.9 110.9 0 010-3.1v-.6a95 95 0 00.1-2.2l.4-.2.7-.2h1.4c.6 0 1.1 0 1.6.2.5 0 .9.3 1.2.5a2.3 2.3 0 011 2M78.2 19a3.2 3.2 0 000 .3c0 .1 0 .2.2.2h2.2l.2-.2V19a134.9 134.9 0 00-.7-2l-.3-.7v-.2l-.3-.1h-.2l-.1.3a16.6 16.6 0 00-.4 1l-.1.3a30.7 30.7 0 01-.5 1.4M76 22.5v-.2-.2a12.6 12.6 0 01.7-1.6l.4-1.3.4-1a159.8 159.8 0 011.4-3.3l.7-.1c.4 0 .6 0 .8.2.2.1.3.4.4.7l.2.6a173.2 173.2 0 011.2 3 170.8 170.8 0 001 3.4H82l-.1-.3a67.8 67.8 0 01-1-2.2H78 78v.2l-.8 2c0 .1 0 .3-.2.3h-.7c-.2 0-.3 0-.3-.2M85.7 14.8h.4a53 53 0 011.7 0h2a84.2 84.2 0 001.6 0c.2 0 .4.2.4.5l-.1.4h-2.3l-.2.1v.7a81.7 81.7 0 000 2v1a89 89 0 00-.1 3.2l-.2.1h-.8v-4.1a49.6 49.6 0 01-.1-2.9h-2.2l-.4-.1v-.4-.4h.3M94.8 14.8h.4a53 53 0 011.7 0h2a84.2 84.2 0 001.6 0c.2 0 .4.2.4.5l-.1.4h-2.3l-.2.1v.7a81.7 81.7 0 000 2v1a89 89 0 00-.1 3.2l-.2.1h-.8v-4.1a49.6 49.6 0 01-.1-2.9h-2.3l-.3-.1v-.4-.4h.3M109.7 19l-.1.4h-3.9l-.2.1v.3a12.2 12.2 0 010 .7v1.3h1.5a50 50 0 001.5 0h1l.4.1v.8h-.6a21.3 21.3 0 01-1 0h-1.5a55.5 55.5 0 00-1.6 0h-.8v-.4a14.6 14.6 0 010-.9v-.7-.7a246.4 246.4 0 010-2.3v-1a246.7 246.7 0 000-1.8h.5a37 37 0 003.1 0h1.8l.1.3v.5h-.4a20.2 20.2 0 01-1.7 0 31.1 31.1 0 00-2.2.1l-.1.3V18.5l.4.1h3.4l.3.1v.3M115 18.6v.3l.3.1.5.1h.9l1-.1.8-.4.5-.5a1.7 1.7 0 000-1.4l-.5-.6-.8-.4a4 4 0 00-1-.1h-1l-.5.1-.2.2V16.5a19.3 19.3 0 010 2v.1zm4.4 2.5l.5.5.4.3.3.2v.6h-.5l-.8-.1-.6-.5-.4-.7a18.8 18.8 0 01-.6-1l-.2-.3-.4-.1a21.9 21.9 0 01-1.4 0l-.2-.1h-.5v.2a31.3 31.3 0 000 1v.8a40.4 40.4 0 01-.1.8l-.5.1-.4-.1-.1-.3v-1a147.5 147.5 0 010-6.2l.4-.3.8-.2h1.4a6 6 0 011.7.2c.5.1.9.3 1.2.6.3.2.5.5.6.8.2.3.2.7.2 1l-.1.9-.4.6-.4.4a3.6 3.6 0 01-.9.3l-.1.1v.2l.3.1.3.4.5.8zM130.8 18a121.4 121.4 0 000 2.5v1a53.7 53.7 0 010 1.1l-.6.2h-.3l-.3-.2-.2-.1a6.2 6.2 0 01-.5-.8l-.5-.7-.7-1.1a202.8 202.8 0 01-2.3-3.3v.2a3.3 3.3 0 000 .5v5.4h-1v-1.2a49 49 0 010-1.6v-2.3a80.8 80.8 0 000-1.7v-.4-.5l.6-.1h.5l.3.4a57.2 57.2 0 012.3 3.5l.8 1.3a43.3 43.3 0 001 1.2V21a42.6 42.6 0 00-.1-4.8 39.8 39.8 0 010-1.3l.4-.1h.3c.2 0 .3.1.3.4V18zM138.1 14.7c.7 0 1.2 0 1.6.2l1 .7.5.8.2.9c0 .3-.2.4-.5.4l-.3-.1-.2-.3-.3-.6c0-.2-.2-.4-.4-.6a2 2 0 00-.6-.3l-1-.2-.8.1-.7.4-.3.4-.2.6.1.6.4.4.7.3 1 .3c.6 0 1.1.2 1.5.3l1 .5.5.5.1.8-.1.8-.5.7a3 3 0 01-1 .5 5.3 5.3 0 01-3 0l-1-.5-.8-.8-.2-.7.1-.3.3-.1h.3l.2.2.2.3.3.4.4.4.5.2.5.1.7.1c.7 0 1.2-.1 1.5-.3.3-.2.5-.5.5-1l-.1-.4c0-.1-.2-.3-.4-.3l-.8-.3a37.8 37.8 0 00-2.5-.7l-.9-.5-.4-.6a2.3 2.3 0 010-1.8l.6-.8 1-.5 1.3-.2" fill="var(--header-logo-primary)"/> <path class="author" d="M6.5 39c.3 0 .5 0 .6-.2l.3-.5.5-2.2.7-2.3v-.3-.2h-.8l-.2.5-.8 3.2a10.4 10.4 0 00-.2 1h-.1V38a8 8 0 00-.3-1 58.7 58.7 0 01-.9-3.3.8.8 0 00-.5-.2c-.2 0-.4 0-.5.2a1 1 0 00-.3.5 24.6 24.6 0 00-.8 3.7l-.1.3L3 38v-.2a10.5 10.5 0 00-.2-.8l-.9-3.3-.1-.3-.3-.1h-.4H1v.5l.2.5 1.1 4c0 .3.2.4.3.5l.6.2h.3l.2-.1.2-.3.2-.4a35.3 35.3 0 00.6-3.5l.2-.2v.2l.2.6.6 2.8c0 .3.2.6.3.7l.6.2zm3.9-6.6c.2 0 .4 0 .5-.2l.1-.5-.1-.5c-.1-.2-.3-.2-.5-.2-.3 0-.5 0-.6.2l-.2.5.2.5.6.2zm0 6.6h.3l.1-.3v-5l-.1-.3H10l-.1.3v.7a102.3 102.3 0 010 3.9V38.9l.4.1zm4.1 0l.9-.1.2-.5v-.3h-.7-.3l-.5-.1-.1-.5v-3.2-.1h1.3c.1 0 .2 0 .3-.2v-.3-.3H15a14 14 0 01-.7-.1H14 14v-1.5l-.1-.3H13V33.2l-.2.2h-.6l-.3.2v.2c0 .2 0 .3.3.3h.6l.1.2a61.4 61.4 0 010 3.8l.3.5c.2.1.3.3.5.3l.7.1zm6.6 0h.3l.1-.4v-1.2a58.6 58.6 0 010-1.5v-.5l-.1-1-.5-.8-.6-.3a3 3 0 00-.8-.1 2 2 0 00-.8.1 2 2 0 00-.5.3l-.3.3v.1h-.1V34a46.5 46.5 0 01-.1-2.8l-.4-.1-.4.1V39l.3.1h.5v-1a68.2 68.2 0 000-1.4v-1l.2-.7a1.4 1.4 0 01.9-.8h.6c.4 0 .7 0 .9.3.2.2.3.6.3 1v1.2a46.6 46.6 0 010 1.2V39h.5zm7.7 0l.4-.1.3-.4a139.5 139.5 0 002.1-6.7c0-.2 0-.3-.3-.3H31c-.2 0-.3.1-.4.4a76.8 76.8 0 00-1.3 4.4 119.3 119.3 0 01-.7 1.6l-.2-.1v-.3a60.7 60.7 0 01-1.6-4.7 210 210 0 00-.4-1.2h-.7c-.2 0-.3 0-.3.2a.8.8 0 000 .3 42.8 42.8 0 011 2.8l.2.6.2.5a386.8 386.8 0 011 2.9h.4a13 13 0 01.7.1zm4.5-6.6c.2 0 .4 0 .5-.2l.2-.5-.2-.5c-.1-.2-.3-.2-.5-.2-.3 0-.4 0-.6.2l-.1.5.1.5.6.2zm0 6.6h.3l.1-.3v-5-.3h-.8l-.1.3v.7a102.3 102.3 0 010 3.9V38.9l.4.1zm4.2 0l.8-.1.2-.5v-.3h-1L37 38l-.1-.5v-3.2-.1h1.4l.2-.2.1-.3-.1-.3H38a14 14 0 01-.8-.1H37 37v-1.5l-.1-.3H36l-.1.4v1.3l-.2.2h-.6l-.2.2-.1.2c0 .2.1.3.3.3h.6l.2.2a61.4 61.4 0 010 3.8c0 .2.1.3.3.5 0 .1.2.3.4.3l.8.1zm3.9.2l1-.2.6-.4.3-.3.2-.2v.1l.2.4.1.3.3.1h.2l.1-.2v-.4a30 30 0 000-2.4v-.4c0-.8-.2-1.4-.5-1.8-.4-.4-1-.6-1.8-.6-.5 0-.8 0-1.2.2-.3 0-.5.3-.7.4a1.7 1.7 0 00-.6 1.3l.1.4.4.2.3-.1.1-.3.2-.5.2-.5.5-.2h.6c.5 0 .8 0 1 .2.3.2.4.6.4 1V35.9l-.2.2-.5.1h-.8l-1.1.2-.7.3a1 1 0 00-.4.5l-.1.6v.5l.4.4.6.3.8.2zm.2-.8c-.4 0-.6-.1-.8-.3a.6.6 0 01-.2-.5c0-.2 0-.3.3-.5l1-.3a19.8 19.8 0 001.3-.1c.2 0 .2 0 .2.2l-.1.6-.4.4a2 2 0 01-.6.3l-.7.2zm5.5.6l.6-.1c.2-.1.3-.2.3-.4l-.1-.2-.2-.1h-.2-.2l-.3-.1v-6.7l-.2-.3-.4-.1-.3.1-.1.4v.8a163.8 163.8 0 000 5v1l.2.4.4.2.5.1zm2.7 1.8c.4 0 .8-.1 1-.4.4-.3.6-.6.7-1l1.7-5.4.1-.2v-.3-.1H52.4l-.1.2-1.2 4.2v.1h-.4v-.1l-1.4-4.3-.1-.1H48.6c-.2 0-.3 0-.3.2v.2a4.8 4.8 0 00.3.6 28 28 0 01.7 2.2 125.4 125.4 0 001.1 2.4l.2.1v.3l-.2.3-.3.2a1 1 0 01-.4 0c-.2 0-.3 0-.4.2l-.1.3.1.3.5.1zm8-1.8h.4v-2.8l.1-.1H62l.2-.1.1-.4v-.3h-3.6c-.3 0-.4-.2-.4-.4v-2.1-.3l.3-.1a21.8 21.8 0 011.8 0 25.3 25.3 0 001.5 0h.4v-.5-.3h-1.7a46.3 46.3 0 01-2.8 0h-.5v.4a39.5 39.5 0 000 3.2v.2a107 107 0 010 3.5l.4.1zm6.2 0h.4l.1-.3V36c0-.5.2-1 .5-1.3.3-.3.8-.4 1.3-.4.3 0 .5-.2.5-.5 0-.1 0-.3-.2-.3l-.4-.2c-.3 0-.6 0-.8.2a2 2 0 00-.5.4c0 .2-.2.3-.3.4l-.1.2v-.3l-.1-.7-.1-.2H64l-.3.1-.1.3v.6a86.3 86.3 0 010 3.8V39h.2l.2.1zm4.3-6.6c.2 0 .4 0 .5-.2l.2-.5c0-.2 0-.4-.2-.5-.1-.2-.3-.2-.5-.2s-.4 0-.5.2l-.2.5c0 .2 0 .3.2.5l.5.2zm0 6.6h.4v-5.3-.3h-.8v1a102.3 102.3 0 01-.1 3.9V38.9l.5.1zm4.5.1l1-.1.7-.4.5-.5v-.4c0-.3 0-.4-.3-.4-.1 0-.2 0-.3.2l-.3.3-.5.4-.8.1-.7-.1a1.6 1.6 0 01-.9-1l-.1-.7v-.2h1.2a55.2 55.2 0 011.5 0h1l.3-.2.2-.6c0-.3 0-.6-.2-.9a2.2 2.2 0 00-1.2-1.2c-.3-.2-.7-.2-1-.2a3 3 0 00-1.1.2c-.3 0-.6.2-.8.4l-.5.7a3 3 0 00-.3.9 4.7 4.7 0 000 2l.6 1 .8.5c.3.2.7.2 1.2.2zm1.3-3.5h-2.9v-.3-.4l.4-.4a1.7 1.7 0 011.2-.5c.3 0 .5 0 .7.2.2 0 .3.1.5.3l.2.4.1.4v.2l-.2.1zm4.5 3.5l1-.1.6-.4.3-.3.2-.2v.1a13.6 13.6 0 01.2.8h.7v-1.3a212 212 0 000-5.6v-.6l-.1-.4-.4-.1-.4.1v.4a46.5 46.5 0 000 2.4v.1h-.2c0-.2-.1-.3-.3-.4l-.5-.3a2.8 2.8 0 00-2 0l-.7.6c-.3.3-.4.6-.6 1l-.2 1.2c0 .5 0 .9.2 1.3l.5 1a2 2 0 001.7.7zm.3-.8c-.3 0-.5 0-.8-.2-.2 0-.4-.2-.5-.4a2 2 0 01-.3-.7l-.1-.8v-.8l.4-.7c.1-.2.3-.4.6-.5a2 2 0 011.5 0c.2 0 .4.2.5.4l.4.6v1c0 .6 0 1.2-.4 1.5-.3.4-.7.6-1.3.6zm4.7.7h.4l.1-.3v-.3a25.7 25.7 0 010-1v-1.5c0-.3 0-.6.2-.8l.3-.6c.1-.1.3-.3.5-.3l.6-.1c.3 0 .5 0 .7.3.2.2.3.6.3 1v1.1a45 45 0 000 1.4v1h.9v-3.6l.2-.5a1.2 1.2 0 01.7-.7h.6c.3 0 .6 0 .8.3.2.2.3.6.3 1v1.1a45 45 0 000 1.4v.7l.1.3h.8l.1-.2v-1.3a13.8 13.8 0 000-.8v-1.3c0-.4 0-.8-.2-1 0-.3-.2-.5-.4-.7-.1-.2-.3-.3-.5-.3l-.7-.1a2 2 0 00-1 .1 2 2 0 00-.7.7l-.2.2-.1-.2-.2-.3-.5-.4-.8-.1a1.6 1.6 0 00-1.3.5l-.3.4-.2.1H84v-.4a56.8 56.8 0 01-.2-.5h-.5l-.1.4a170.9 170.9 0 010 4.2v1l.4.1zm10.7.2l1-.2c.3-.1.5-.2.6-.4.2 0 .3-.2.4-.3l.1-.2.1.1.1.4.1.3.3.1h.3V38.4a30 30 0 000-2.4v-.4c0-.8-.1-1.4-.5-1.8-.3-.4-1-.6-1.7-.6-.5 0-1 0-1.2.2-.3 0-.6.3-.8.4a1.7 1.7 0 00-.6 1.3l.1.4.4.2.3-.1.2-.3.1-.5c0-.2.2-.3.3-.5l.4-.2h.7c.4 0 .8 0 1 .2.2.2.4.6.4 1v.4l-.1.2-.2.2-.5.1h-.8l-1 .2-.8.3a1 1 0 00-.4.5l-.1.6.1.5c0 .2.2.3.4.4.1.2.3.3.5.3l.8.2zm.2-.8c-.3 0-.6-.1-.8-.3a.6.6 0 01-.2-.5c0-.2.1-.3.3-.5l1-.3a19.8 19.8 0 001.4-.1c.1 0 .2 0 .2.2s0 .4-.2.6l-.4.4a2 2 0 01-.5.3l-.8.2zm4.8.6h.4V35.8l.2-.8.4-.6.6-.3.6-.1c.3 0 .6 0 .8.3.2.2.3.6.3 1v1.1a46.2 46.2 0 000 1.4v1l.4.1h.5v-1.6a13.8 13.8 0 000-.8v-1.3l-.1-1-.4-.7c-.2-.2-.4-.3-.7-.3l-.7-.1a2 2 0 00-.8.1 2 2 0 00-.8.7l-.2.2V34l-.1-.4-.1-.3H99l-.1.3v.1a390.2 390.2 0 010 4.2V38.9l.4.1z" fill="var(--header-logo-secondary)" fill-rule="nonzero"/> </g> </svg> </div> </figure> </a> <button type="button" id="siblings-trigger" aria-expanded="false" aria-controls="siblings" aria-label="Courses" class="c-button-circle c-button--shadow"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--chevron "> <use xlink:href="/static/svg/sprite.svg#chevron"></use> </svg> </button> <ul class="c-header__siblings" id="siblings" aria-labelledby="siblings-trigger" hidden> <li> <a href="https://measure-ux.com" class="c-twi c-twi--left"><span>Measure UX & Design Impact</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--header-tube "> <use xlink:href="/static/svg/sprite.svg#header-tube"></use> </svg> </a> </li> <li> <a href="https://smashingconf.com/online-workshops/workshops/interface-design-course-vitaly-friedman/" class="c-twi c-twi--left"><span>UX Live Training</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--header-hat "> <use xlink:href="/static/svg/sprite.svg#header-hat"></use> </svg> </a> </li> </ul> </div> <a class="c-navicon c-navicon--shadow c-navicon--open u-orange-shadow" href="#header" aria-label="Open Navigation"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--hamburger "> <use xlink:href="/static/svg/sprite.svg#hamburger"></use> </svg> </a> <a class="c-navicon c-navicon--shadow c-navicon--close u-orange-shadow" href="#0" aria-label="Open Navigation"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--hamburger "> <use xlink:href="/static/svg/sprite.svg#hamburger"></use> </svg> </a> <nav class="c-header__nav" id="nav"> <ul> <li> <a href="/#about-the-course" class="" target="_self"> <span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--header-hat "> <use xlink:href="/static/svg/sprite.svg#header-hat"></use> </svg> </span> <span>About the Course </span> </a> </li> <li> <a href="/#table-of-contents" class="" target="_self"> <span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--header-cookie "> <use xlink:href="/static/svg/sprite.svg#header-cookie"></use> </svg> </span> <span>Table of Contents </span> </a> </li> <li> <a href="https://www.youtube.com/watch?v=3mwZztmGgbE" class="" target="_blank"> <span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--header-leaf "> <use xlink:href="/static/svg/sprite.svg#header-leaf"></use> </svg> </span> <span>Free Preview <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--external "> <use xlink:href="/static/svg/sprite.svg#external"></use> </svg> </span> </a> </li> <li> <a href="/articles" class="" target="_self"> <span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--header-soup "> <use xlink:href="/static/svg/sprite.svg#header-soup"></use> </svg> </span> <span>Blog </span> </a> </li> <li> <a href="https://smart-interface-design-patterns.thinkific.com/users/sign_in" class="" target="_blank"> <span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--header-key "> <use xlink:href="/static/svg/sprite.svg#header-key"></use> </svg> </span> <span>Login </span> </a> </li> </ul> <a class="c-mobile-cta" href="/#packages"> <figure> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--cutlery-combo "> <use xlink:href="/static/svg/sprite.svg#cutlery-combo"></use> </svg> </figure> <div> <strong>Get the course!</strong> <small>10h video + UX training</small> </div> </a> <button class="c-header__nav-siblings-trigger" type="button" id="siblings-trigger-mobile" aria-expanded="false" aria-controls="siblings-mobile"> <span class="c-twi c-twi--right" ><span>More UX courses from Vitaly</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--chevron "> <use xlink:href="/static/svg/sprite.svg#chevron"></use> </svg> </span> </button> <ol class="c-header__nav-siblings" id="siblings-mobile" aria-labelledby="siblings-trigger-mobile" hidden> <li> <a href="https://measure-ux.com" class="c-twi c-twi--left"><span>Measure UX & Design Impact</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--header-tube "> <use xlink:href="/static/svg/sprite.svg#header-tube"></use> </svg> </a> </li> <li> <a href="https://smashingconf.com/online-workshops/workshops/interface-design-course-vitaly-friedman/" class="c-twi c-twi--left"><span>UX Live Training</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--header-hat "> <use xlink:href="/static/svg/sprite.svg#header-hat"></use> </svg> </a> </li> </ol> </nav> <a class="c-header__cta" href="/#packages"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--cutlery-combo "> <use xlink:href="/static/svg/sprite.svg#cutlery-combo"></use> </svg> <p> <strong>Get the course!</strong> <small>10h video + UX training</small> </p> </a> </div> </header> <a class="c-mobile-cta c-mobile-cta--fixed" href="/#packages"> <figure> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--cutlery-combo "> <use xlink:href="/static/svg/sprite.svg#cutlery-combo"></use> </svg> </figure> <div> <strong>Get the course!</strong> <small>10h video + UX training</small> </div> </a> <section class="o-slat c-course-content"> <div class="u-wrap u-wrap--content u-flow o-prose u-pad-bottom-l-xl"> <h1 class="c-h c-h-6">Privacy Policy</h1> <p>Your data belongs to you. We don’t use any analytics on this site, nor do we collect any information without your consent.</p> <p>There are only <strong>two use cases</strong> when some data could potentially be collected.</p> <ul> <li>Newsletter sign-up for collecting your <em>email</em>,</li> <li>Watching videos via Vimeo — loaded only if you choose to watch a video.</li> </ul> <p>You can check a more detailed privacy policy including all the details of the information collected in the <a href="https://www.iubenda.com/privacy-policy/88403137" class="iubenda-black iubenda-noiframe iubenda-embed iubenda-noiframe " title="Privacy Policy ">privacy policy</a>.</p> <script type="text/javascript">(function (w,d) {var loader = function () {var s = d.createElement("script"), tag = d.getElementsByTagName("script")[0]; s.src="https://cdn.iubenda.com/iubenda.js"; tag.parentNode.insertBefore(s,tag);}; if(w.addEventListener){w.addEventListener("load", loader, false);}else if(w.attachEvent){w.attachEvent("onload", loader);}else{w.onload = loader;}})(window, document);</script> </div> </section> <footer class="c-footer" role="contentinfo"> <div class="u-wrap"> <div class="c-footer__border"> <svg viewBox="0 0 262 105" width="262" height="105" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g transform="translate(32.98 1.6)"><path d="M100.83 36a16.32 16.32 0 00-8.75-2.53h-.3a13.42 13.42 0 00-22.52-9.07c-.9-3.1-2.87-5.76-5.56-7.52v-.5a16.38 16.38 0 00-32.34-3.68A16.38 16.38 0 007.75 26.33 13.45 13.45 0 000 35.7" stroke="#F4B67F" fill="#FFF6B3" fill-rule="nonzero"/><circle fill="#FFA18F" fill-rule="nonzero" cx="42.44" cy="11.21" r="1.34"/><circle fill="#FFA18F" fill-rule="nonzero" cx="52.9" cy="13.08" r="1.34"/><circle fill="#FFA18F" fill-rule="nonzero" cx="62.29" cy="25.96" r="1.34"/><circle fill="#FFA18F" fill-rule="nonzero" cx="33.05" cy="18.72" r="1"/><circle fill="#FFA18F" fill-rule="nonzero" cx="54.51" cy="20.96" r="1"/><circle fill="#FFA18F" fill-rule="nonzero" cx="48.61" cy="5.47" r="1"/><circle fill="#FFA18F" fill-rule="nonzero" cx="45.92" cy="19.42" r="1"/><path stroke="#F4B67F" stroke-linecap="round" d="M38.15 23.37v5.27M40.79 26h-5.28M24.95 19.41v5.27M27.59 22.05h-5.28"/></g><g transform="translate(1 37.89)" stroke="#82CDB2"><path stroke-width="2" fill="#4B4B4B" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" d="M0 66.11h25.58M37.96 66.11h221.5"/><path d="M17.34 0a85.1 85.1 0 00164.19 0H17.34z" stroke-width="2"/><path d="M181.54 0c-.89.07-116.7 10.21-125.2 49.71"/><path stroke-width="2" fill="#4B4B4B" fill-rule="nonzero" d="M69.22 57.42h60.08V66H69.22z"/><path d="M73.31 57.57v8.31M77.13 57.57v8.31M79.29 57.57v8.31M81.54 57.57v8.31"/><circle fill="#4B4B4B" fill-rule="nonzero" cx="99.31" cy="28.88" r="17.55"/><ellipse stroke-linecap="round" stroke-linejoin="round" transform="rotate(-40.1 96.41 30.28)" cx="96.41" cy="30.28" rx="7.12" ry="10.4"/><ellipse stroke-linecap="round" stroke-linejoin="round" transform="rotate(-49.9 102.38 30.25)" cx="102.38" cy="30.25" rx="10.4" ry="7.12"/></g><g transform="translate(181.52 45.14)"><path d="M16.26 5.5L20.82 0l5.5 4.56c5.18 4.3 5.89 12 1.58 17.18l-4.56 5.5-5.5-4.57A12.2 12.2 0 0116.27 5.5h0z" stroke="#82CDB2" stroke-width="2" fill="#BFE6C7" fill-rule="nonzero"/><path d="M20.58.84s8.63 10.06 2.5 25.79c0 0-.25-8.83-5.32-14.5" stroke="#82CDB2" stroke-width=".5" stroke-linecap="round"/><path d="M3.88 34.28l-3.88-6 6-3.88a12.2 12.2 0 0116.9 3.64l3.88 6-5.99 3.88a12.2 12.2 0 01-16.9-3.64h0z" stroke="#82CDB2" stroke-width="2" fill="#BFE6C7" fill-rule="nonzero"/><path d="M.75 28.76s12.17-5.24 25.36 5.28c0 0-8.51-2.38-15.43.77" stroke="#82CDB2" stroke-width=".5" stroke-linecap="round"/><path d="M55.35 44.73l4.79 5.3-5.3 4.78a12.2 12.2 0 01-17.23-.87l-4.77-5.28 5.3-4.8a12.2 12.2 0 0117.21.87h0z" stroke="#82CDB2" stroke-width="2" fill="#BFE6C7" fill-rule="nonzero"/><path d="M59.34 49.68s-11.18 7.1-25.88-1.18c0 0 8.77 1 15.1-3.22" stroke="#82CDB2" stroke-width=".5" stroke-linecap="round"/><circle stroke="#EE5B68" stroke-width="2" fill="#FFA18F" fill-rule="nonzero" cx="33.78" cy="36.13" r="13.78"/><path d="M35.4 33.39c1.72-.2 3.45-.2 5.16 0M37.96 35.99c-.19-1.71-.17-3.44.05-5.15" stroke="#EE5B68" stroke-linecap="round"/><circle stroke="#EE5B68" stroke-width="2" fill="#FFA18F" fill-rule="nonzero" cx="18.23" cy="44.65" r="13.78"/><path d="M21.43 45.35c1.7.3 3.34.79 4.92 1.48M23.15 48.55c.3-1.7.8-3.35 1.48-4.92" stroke="#EE5B68" stroke-linecap="round"/></g></g></svg> </div> <div class="c-footer__primary"> <form class="js-newsletter"> <div class="u-flow--m"> <header class="u-flow"> <h2 class="c-h c-h-4"> Still hungry? </h2> <p>Subscribe to get friendly and semi-regular tips around design and UX.</p> </header> <div class="with-js"> <div class="c-input-inline-button"> <div> <label class="c-label" for="footer-newsletter-email">Your email</label> <input type="email" class="c-input" name="email" autocomplete="email" inputmode="email" placeholder="e.g. meow@garfield.com" id="footer-newsletter-email" required /> </div> <input type="submit" value="Subscribe" class="c-button u-link u-sans u-strong u-link-highlight c-button--shadow c-button--shadow-orange" /> </div> </div> <div class="without-js"> <a href="#newsletter-modal" class="c-button c-button--inline">Subscribe</a> </div> </div> </form> <address class="u-flow--l"> <div class="u-flow"> <h2 class="c-h c-h-4">Contact Vitaly</h2> <div class="o-body o-body--primary-links"> <p>Interested in a <strong>public or in-house workshop</strong> on interface design, UX, or front-end? You are in the right place. <strong>Reach out via email</strong> and we can arrange something in no time, be it training, audit, consultancy, workshop or talk!</p> </div> </div> <p><a class="c-h c-button u-link u-link-highlight" href="mailto:vitaly@smashingconf.com?subject=Smart Interface Design Patterns">vitaly@smashingconf.com</a></p> </address> </div> <div class="c-footer__secondary"> <div> <p>🍩 UI and illustrations crafted with imagination and love by <a href="https://www.untilsunday.it">Chiara Aliotta</a>.<br />🍿 Illustrations animated with passion by <a href="https://www.cassie.codes/">Cassie Evans</a>.<br />🍧 Course animations beautifully designed by <a href="https://guillaumekurkdjian.com/">Guillaume Kurkdijan</a>.<br />🍎 Components built and put together with love by <a href="https://www.trysmudford.com/">Trys Mudford</a>.<br />🍰 Product illustrations refined with care by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a>.<br />🍭 Photos with love by <a href="https://marcthiele.com/">Marc Thiele</a>. Powered by Web Adventures OÜ.</p> </div> <ul> <li><a href="/privacy/">Privacy Policy</a></li> <li><a href="mailto:vitaly@smashingconf.com?subject=Smart Interface Design Patterns">Contact via email</a></li> <li><a href="https://smart-interface-design-patterns.thinkific.com/users/sign_in">User login</a></li> </ul> <div> <p>This course is brought to you by </p> <a href="https://www.smashingmagazine.com"> <img width="134" height="58" loading="lazy" decoding="async" src="/static/img/footer-logo.png" alt="Smashing Magazine" /> </a> </div> </div> </div> </footer> <aside class="c-newsletter-modal" id="newsletter-modal"> <div class="c-newsletter-modal__wrapper"> <header class="c-section-header c-section-header--small u-wrap u-flow--m"> <h1 class="c-h c-h-6">Friendly Newsletter</h1> <div class="o-prose"> <p>Please enter your details below — there is a lil’ gift waiting for you, too.</p> </div> </header> <a href="#0" class="c-newsletter-modal__close" aria-label="Close newsletter form"></a> <form action="https://smashingmagazine.us1.list-manage.com/subscribe/post?u=16b832d9ad4b28edf261f34df&id=8ed24b5d9e" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" novalidate> <div class="u-flow--l"> <div> <label class="c-label" for="modal-newsletter-name">How do your friends call you?</label> <input type="text" class="c-input" name="FNAME" autocomplete="name" inputmode="" placeholder="e.g. Alice" id="modal-newsletter-name" required /> </div> <div> <label class="c-label" for="modal-newsletter-email">Your email</label> <input type="email" class="c-input" name="EMAIL" autocomplete="email" inputmode="email" placeholder="e.g. meow@garfield.com" id="modal-newsletter-email" required /> </div> <div class="u-flow"> <h3 class="c-h">You are:</h3> <ul class="u-flow--2xs"> <li> <input type="radio" class="c-radio" name="group[86]" id="modal-newsletter-role-incredible-front-end-developer" value="1" required /> <label for="modal-newsletter-role-incredible-front-end-developer">Incredible front-end developer</label> </li> <li> <input type="radio" class="c-radio" name="group[86]" id="modal-newsletter-role-marvellous-ui-designer" value="2" required /> <label for="modal-newsletter-role-marvellous-ui-designer">Marvellous UI designer</label> </li> <li> <input type="radio" class="c-radio" name="group[86]" id="modal-newsletter-role-extraordinary-ux-designer" value="4" required /> <label for="modal-newsletter-role-extraordinary-ux-designer">Extraordinary UX designer</label> </li> <li> <input type="radio" class="c-radio" name="group[86]" id="modal-newsletter-role-just-a-jack-of-all-trades" value="8" required /> <label for="modal-newsletter-role-just-a-jack-of-all-trades">Just a jack of all trades!</label> </li> </ul> </div> <input type="submit" value="Subscribe!" class="c-button c-button--wide" /> <div class="o-body"> <p>No strings attached. Sent out at most 2× a month. You can unsubscribe any time, of course. <a href="/privacy">Check the privacy policy</a>.</p> </div> </div> </form> </div> <a href="#0" class="c-newsletter-modal__full-close" aria-label="Close newsletter form"></a> </aside> <script> var _beats = [{ slug: 'accessibility-strong-case', count: 2478 },{ slug: 'error-messages-ux', count: 458 },{ slug: 'design-autism', count: 252 },{ slug: 'drag-and-drop-ux', count: 224 },{ slug: 'better-carousel-ux', count: 210 },{ slug: 'interface-design-books', count: 147 },{ slug: 'naming-design-tokens', count: 135 },{ slug: 'design-handoff', count: 117 },{ slug: 'multi-lingual-ux', count: 115 },{ slug: 'language-selector', count: 106 },{ slug: 'back-button-ux', count: 103 },{ slug: 'accessible-tap-target-sizes', count: 99 },{ slug: 'how-to-redesign-guide', count: 96 },{ slug: 'perfect-design-process', count: 93 },{ slug: 'ux-career-ladder', count: 82 },{ slug: 'design-older-adults', count: 76 },{ slug: 'hidden-vs-disabled', count: 70 },{ slug: 'avoid-hamburger-menus', count: 68 },{ slug: 'navigation-design-mobile-ux', count: 65 },{ slug: 'disabled-buttons', count: 55 },{ slug: 'complex-filtering', count: 55 },{ slug: 'design-metrics-kpis', count: 50 },{ slug: 'design-patterns-almost-everything', count: 50 },{ slug: 'double-diamond-process', count: 47 },{ slug: 'free-inclusive-photos-of-people', count: 44 },{ slug: 'lessons-learned', count: 39 },{ slug: 'how-to-avoid-bias-in-ux-research', count: 36 },{ slug: 'dyslexia-design', count: 34 },{ slug: 'time-zone-selection-ux', count: 31 },{ slug: 'defend-design-decisions', count: 30 },{ slug: 'sustainable-design-patterns', count: 28 },{ slug: 'designing-better-meetings', count: 22 },{ slug: 'design-interviews-red-flags', count: 22 },{ slug: 'harmful-newsletter-pop-ups', count: 19 },{ slug: 'better-mobile-navigation', count: 18 },{ slug: 'select-slug-from-beats', count: 14 },{ slug: 'a-third-article', count: 12 },{ slug: 'copywriting', count: 12 },{ slug: 'a-slug', count: 10 },{ slug: 'navigate-the-team-of-one', count: 10 },{ slug: 'sticky-menus', count: 10 },{ slug: 'boost-ux-maturity', count: 9 },{ slug: 'designing-for-mobile-ios-android-guide', count: 9 },{ slug: 'another-slug', count: 8 },{ slug: 'filtering-ux', count: 8 },{ slug: 'design-guidelines-children', count: 8 },{ slug: 'miro-templates', count: 6 },{ slug: 'color-contrast-cheat-sheet', count: 6 },{ slug: 'timing-matters', count: 5 },{ slug: 'breadcrumbs-ux', count: 5 },{ slug: 'design-case-study', count: 5 },{ slug: 'fast-navigation', count: 5 },{ slug: '2-page-login-pattern', count: 5 },{ slug: 'autocomplete-ux', count: 4 },{ slug: 'birthday-picker', count: 4 },{ slug: 'links-ux', count: 3 },{ slug: 'ux-report', count: 3 },{ slug: 'another-article', count: 2 },{ slug: 'design-kpis', count: 2 },{ slug: 'design-systems', count: 2 },{ slug: 'never-hide-critical-navigation', count: 2 },{ slug: 'design-critiques', count: 2 },{ slug: 'avoid-misunderstandings-in-design-process', count: 2 },{ slug: 'frequently-asked-questions', count: 1 },{ slug: 'navigation-queries-ux', count: 1 },{ slug: 'reviews-and-ratings-ux', count: 1 },{ slug: 'beautiful-open-source-fonts', count: 1 },{ slug: 'design-management', count: 1 },{ slug: 'net-promotion-score', count: 1 },{ slug: 'business-language-vs-ux-language', count: 1 },{ slug: 'accessibility-ux', count: 0 },{ slug: 'ai-tools-for-designers', count: 0 },{ slug: 'bettercarouselux', count: 0 },{ slug: 'billboard-navigation-pattern', count: 0 },{ slug: 'breadcrumbs', count: 0 },{ slug: 'designkpis', count: 0 },{ slug: 'design-kpis-ux', count: 0 },{ slug: 'infinite-scroll', count: 0 },{ slug: 'inline-validation-ux', count: 0 },{ slug: 'onboarding-ux', count: 0 },{ slug: 'pricing-plans', count: 0 },{ slug: 'product-managers', count: 0 },{ slug: 'ten-useful-tools', count: 0 },{ slug: 'design-kpis-uk', count: 0 },{ slug: 'free-books', count: 0 },{ slug: 'guide-to-designing-better-data-visualization', count: 0 },{ slug: 'inclusive-design-ux-toolkits', count: 0 },{ slug: 'typefaces-combining', count: 0 },{ slug: 'ux-guides', count: 0 },{ slug: 'estimates', count: 0 },{ slug: 'exposure-hours', count: 0 },{ slug: 'combining-typefaces', count: 0 },{ slug: '30-questions-ux-interviews', count: 0 },{ slug: 'colorblindness-design', count: 0 },{ slug: 'should-links-open-new-tabs', count: 0 },{ slug: 'should-links-open-in-new-tabs', count: 0 },{ slug: 'how-to-fix-a-bad-user-interface', count: 0 },{ slug: 'how-to-make-strong-case-ux-research', count: 0 },{ slug: 'how-to-make-strong-case-ux-research-copy', count: 0 }]; var _beatsAPI = "https://beats.smart-interface-design-patterns.com" </script> <script delay="https://player.vimeo.com/api/player.js" defer></script> <script>const autoLoadDuration=5,eventList=["keydown","mousemove","wheel","touchmove","touchstart","touchend"],autoLoadTimeout=setTimeout(runScripts,5e3);function triggerScripts(){runScripts(),clearTimeout(autoLoadTimeout),eventList.forEach(function(t){window.removeEventListener(t,triggerScripts,{passive:!0})})}function runScripts(){document.querySelectorAll("script[delay]").forEach(function(t){t.setAttribute("src",t.getAttribute("delay"))}),document.querySelectorAll("iframe[data-src]").forEach(function(t){t.setAttribute("src",t.getAttribute("data-src"))})}eventList.forEach(function(t){window.addEventListener(t,triggerScripts,{passive:!0})});</script> <script async id="netlify-rum-container" src="/.netlify/scripts/rum" data-netlify-rum-site-id="04639e2a-921d-47d9-a473-1753bb5f18b8" data-netlify-deploy-branch="main" data-netlify-deploy-context="production" data-netlify-cwv-token="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzaXRlX2lkIjoiMDQ2MzllMmEtOTIxZC00N2Q5LWE0NzMtMTc1M2JiNWYxOGI4IiwiYWNjb3VudF9pZCI6IjVhMGYzNDI1NGM0YjkzMmE4YmJhNDVmYiIsImRlcGxveV9pZCI6IjY3MzJmMTdhMTExMDY4MDAwOGMyMjVlMCIsImlzc3VlciI6Im5mc2VydmVyIn0.bwRuKxCgYIVlwvZkxFl--3TyZQqxlnUIq9qZPN3lMTk"></script></body> </html>