Learn UI Design: The Complete Online Video Course

<!DOCTYPE html> <html class="no-js" lang="en"> <head> <meta charset="utf-8">  <script async src="https://www.googletagmanager.com/gtag/js?id=G-32XGNVLTZH"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-32XGNVLTZH'); </script>  <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="description" content="The full-length online course on UI design: color, typography, layout, design process, and more. Includes downloadable resources, homework, and a student community."> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <meta name="google-site-verification" content="hT0REfh6cLm7Tq1EE8RcDGVhOZ5JUZHCrnKQKmryF0w" /> <link rel="canonical" href="https://learnui.design/">  <link rel="icon" href="/favicon.ico">  <meta name="twitter:image:src" content="https://learnui.design/img/twitter-large-luid.png" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@erikdkennedy" /> <meta name="twitter:title" content="Learn UI Design" /> <meta name="twitter:description" content="The full-length online course on UI design: color, typography, layout, design process, and more. Includes downloadable resources, homework, and a student community." />  <meta property="og:image" content="https://learnui.design/img/twitter-large-luid.png" /> <meta property="og:url" content="https://learnui.design/" /> <meta property="og:title" content="Learn UI Design" /> <meta property="og:type" content="website" /> <meta property="og:description" content="The full-length online course on UI design: color, typography, layout, design process, and more. Includes downloadable resources, homework, and a student community." /> <title>Learn UI Design: The Complete Online Video Course</title>  <link rel="preload" href="/Fonts/rajdhani-600.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="/Fonts/rajdhani-700.woff2" as="font" type="font/woff2" crossorigin>  <link rel="stylesheet" href=/css/styles-main.css>  <script> (function (d) { var config = { kitId: 'rbq4wdf', scriptTimeout: 3000, async: true }, h = d.documentElement, t = setTimeout(function () { h.className = h.className.replace(/\bwf-loading\b/g, "") + " wf-inactive"; }, config.scriptTimeout), tk = d.createElement("script"), f = false, s = d.getElementsByTagName("script")[0], a; h.className += " wf-loading"; tk.src = 'https://use.typekit.net/' + config.kitId + '.js'; tk.async = true; tk.onload = tk.onreadystatechange = function () { a = this.readyState; if (f || a && a != "complete" && a != "loaded") return; f = true; clearTimeout(t); try { Typekit.load(config); } catch (e) { } }; s.parentNode.insertBefore(tk, s); })(document); </script>  <meta name="theme-color" content="#232323">  <style type="text/css"> @font-face { font-family: "Avenir Next W01_n4"; src: url("/Fonts/e9167238-3b3f-4813-a04a-a384394eed42.eot?#iefix") format("eot") } @font-face { font-family: "Avenir Next W01"; src: url("/Fonts/e9167238-3b3f-4813-a04a-a384394eed42.eot?#iefix"); src: url("/Fonts/e9167238-3b3f-4813-a04a-a384394eed42.eot?#iefix") format("eot"), url(/Fonts/2cd55546-ec00-4af9-aeca-4a3cd186da53.woff2) format("woff2"), url("/Fonts/1e9892c0-6927-4412-9874-1b82801ba47a.woff") format("woff"), url("/Fonts/46cf1067-688d-4aab-b0f7-bd942af6efd8.ttf") format("truetype"); font-weight: 400; font-style: normal; } @font-face { font-family: "Avenir Next W01_i4"; src: url("/Fonts/d1fddef1-d940-4904-8f6c-17e809462301.eot?#iefix") format("eot") } @font-face { font-family: "Avenir Next W01"; src: url("/Fonts/d1fddef1-d940-4904-8f6c-17e809462301.eot?#iefix"); src: url("/Fonts/d1fddef1-d940-4904-8f6c-17e809462301.eot?#iefix") format("eot"), url("/Fonts/7377dbe6-f11a-4a05-b33c-bc8ce1f60f84.woff2") format("woff2"), url("/Fonts/92b66dbd-4201-4ac2-a605-4d4ffc8705cc.woff") format("woff"), url("/Fonts/18839597-afa8-4f0b-9abb-4a30262d0da8.ttf") format("truetype"); font-weight: 400; font-style: italic; } @font-face { font-family: "Avenir Next W01_n6"; src: url("/Fonts/12d643f2-3899-49d5-a85b-ff430f5fad15.eot?#iefix") format("eot") } @font-face { font-family: "Avenir Next W01"; src: url("/Fonts/12d643f2-3899-49d5-a85b-ff430f5fad15.eot?#iefix"); src: url("/Fonts/12d643f2-3899-49d5-a85b-ff430f5fad15.eot?#iefix") format("eot"), url("/Fonts/aad99a1f-7917-4dd6-bbb5-b07cedbff64f.woff2") format("woff2"), url("/Fonts/91b50bbb-9aa1-4d54-9159-ec6f19d14a7c.woff") format("woff"), url("/Fonts/a0f4c2f9-8a42-4786-ad00-fce42b57b148.ttf") format("truetype"); font-weight: 600; font-style: normal; } @font-face { font-family: "Avenir Next W01_i6"; src: url("/Fonts/770d9a7e-8842-4376-9319-8f2c8b8e880d.eot?#iefix") format("eot") } @font-face { font-family: "Avenir Next W01"; src: url("/Fonts/770d9a7e-8842-4376-9319-8f2c8b8e880d.eot?#iefix"); src: url("/Fonts/770d9a7e-8842-4376-9319-8f2c8b8e880d.eot?#iefix") format("eot"), url("/Fonts/687932cb-145b-4690-a21d-ed1243db9e36.woff2") format("woff2"), url("/Fonts/bc350df4-3100-4ce1-84ce-4a5363dbccfa.woff") format("woff"), url("/Fonts/bc13ae80-cd05-42b4-b2a9-c123259cb166.ttf") format("truetype"); font-weight: 600; font-style: italic; } </style>  <script async src="https://js.sparkloop.app/team_f00743092ecf.js" data-sparkloop></script>  <script>!function (t, e) { var o, n, p, r; e.__SV || (window.posthog = e, e._i = [], e.init = function (i, s, a) { function g(t, e) { var o = e.split("."); 2 == o.length && (t = t[o[0]], e = o[1]), t[e] = function () { t.push([e].concat(Array.prototype.slice.call(arguments, 0))); }; } (p = t.createElement("script")).type = "text/javascript", p.async = !0, p.src = s.api_host + "/static/array.js", (r = t.getElementsByTagName("script")[0]).parentNode.insertBefore(p, r); var u = e; for (void 0 !== a ? u = e[a] = [] : a = "posthog", u.people = u.people || [], u.toString = function (t) { var e = "posthog"; return "posthog" !== a && (e += "." + a), t || (e += " (stub)"), e; }, u.people.toString = function () { return u.toString(1) + ".people (stub)"; }, o = "capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys onSessionId".split(" "), n = 0; n < o.length; n++)g(u, o[n]); e._i.push([i, s, a]); }, e.__SV = 1); }(document, window.posthog || []); posthog.init('phc_IVbfFirMI2bQ30AXl48R8A79IXkDDY7zfKhXpZwMiBx', { api_host: 'https://app.posthog.com' })</script> </head> <body class="sales-page dark-theme"> <a href="#content" class="skip-to-content">Skip to content</a> <header > <div class="header__logo"> <a href="/" aria-label="Learn UI Design"> <svg xmlns="http://www.w3.org/2000/svg" width="227" height="48" viewBox="0 0 227 48" alt="Learn UI Design"> <defs> <linearGradient id="logo-and-text-a" x1="50%" x2="50%" y1="0%" y2="100%"> <stop offset="0%" stop-color="#FF9F2F" /> <stop offset="100%" stop-color="#FF6026" /> </linearGradient> </defs> <g fill="none" fill-rule="evenodd"> <path fill="#FFF" d="M78.7452267,17.1764789 L76,17.1764789 L76,30.7065246 L84.4317676,30.7065246 L84.4317676,28.3926907 L78.7452267,28.3926907 L78.7452267,17.1764789 Z M86.089224,17.1764789 L86.089224,30.7065246 L94.5209916,30.7065246 L94.5209916,28.3926907 L88.8344507,28.3926907 L88.8344507,24.8631135 L93.9327288,24.8631135 L93.9327288,22.5492796 L88.8344507,22.5492796 L88.8344507,19.5099215 L94.5209916,19.5099215 L94.5209916,17.1764789 L86.089224,17.1764789 Z M98.158933,30.7065246 L98.982501,28.1377768 L103.512125,28.1377768 L104.335693,30.7065246 L107.257399,30.7065246 L102.551296,17.1764789 L99.9237216,17.1764789 L95.2176187,30.7065246 L98.158933,30.7065246 Z M101.237509,21.0590137 L102.766992,25.8239429 L99.7080252,25.8239429 L101.237509,21.0590137 Z M119.13102,30.7065246 L116.326967,24.9415486 C117.797624,24.333677 118.640801,23.1375425 118.640801,21.3139276 C118.640801,18.568701 116.699533,17.1764789 113.58174,17.1764789 L108.738376,17.1764789 L108.738376,30.7065246 L111.483603,30.7065246 L111.483603,25.3925501 L113.679784,25.3925501 L116.111271,30.7065246 L119.13102,30.7065246 Z M111.483603,23.0787162 L111.483603,19.5099215 L113.326826,19.5099215 C114.954354,19.5099215 115.895574,19.9020968 115.895574,21.3139276 C115.895574,22.7257585 114.954354,23.0787162 113.326826,23.0787162 L111.483603,23.0787162 Z M128.612372,17.1764789 L128.612372,25.6670728 L123.318007,17.1764789 L121.04339,17.1764789 L121.04339,30.7065246 L123.651356,30.7065246 L123.651356,22.3335832 L128.926112,30.7065246 L131.220338,30.7065246 L131.220338,17.1764789 L128.612372,17.1764789 Z M146.869162,17.1764789 L146.869162,25.23568 C146.869162,27.5495139 146.10442,28.5691695 144.418066,28.5691695 C142.731713,28.5691695 141.966971,27.5495139 141.966971,25.23568 L141.966971,17.1764789 L139.221745,17.1764789 L139.221745,25.23568 C139.221745,29.2162587 141.417926,30.8830034 144.418066,30.8830034 C147.418207,30.8830034 149.614388,29.2162587 149.614388,25.2160712 L149.614388,17.1764789 L146.869162,17.1764789 Z M155.428902,17.1764789 L152.683676,17.1764789 L152.683676,30.7065246 L155.428902,30.7065246 L155.428902,17.1764789 Z M168.410935,30.7065246 C171.469902,30.7065246 173.607257,29.1182149 173.607257,24.823896 L173.607257,23.0591074 C173.607257,18.7451798 171.469902,17.1764789 168.410935,17.1764789 L163.606788,17.1764789 L163.606788,30.7065246 L168.410935,30.7065246 Z M168.410935,28.3926907 L166.352015,28.3926907 L166.352015,19.5099215 L168.410935,19.5099215 C170.23455,19.5099215 170.86203,20.7256648 170.86203,23.0591074 L170.86203,24.823896 C170.86203,27.1573387 170.23455,28.3926907 168.410935,28.3926907 Z M176.068672,17.1764789 L176.068672,30.7065246 L184.50044,30.7065246 L184.50044,28.3926907 L178.813899,28.3926907 L178.813899,24.8631135 L183.912177,24.8631135 L183.912177,22.5492796 L178.813899,22.5492796 L178.813899,19.5099215 L184.50044,19.5099215 L184.50044,17.1764789 L176.068672,17.1764789 Z M195.707363,19.2157901 C194.746534,17.7255242 193.119007,17 190.962043,17 C187.746206,17 186.334375,18.6667448 186.334375,20.8040998 C186.334375,23.0394987 187.667771,24.3140682 190.334563,25.0199836 C192.530744,25.5886377 193.099398,26.1180743 193.099398,27.0592949 C193.099398,27.8828629 192.569961,28.5691695 191.00126,28.5691695 C189.609038,28.5691695 188.78547,28.118168 188.059946,27.216165 L185.961809,28.6672133 C187.157943,30.2359143 188.805079,30.8830034 191.177739,30.8830034 C194.354359,30.8830034 195.844625,29.1574324 195.844625,26.9416423 C195.844625,24.5493733 194.570055,23.4905002 191.746393,22.7845848 C189.942387,22.3335832 189.079602,21.862973 189.079602,20.8040998 C189.079602,19.882488 189.7463,19.3138339 190.981652,19.3138339 C192.354265,19.3138339 193.06018,19.7648354 193.648443,20.6864472 L195.707363,19.2157901 Z M201.031658,17.1764789 L198.286432,17.1764789 L198.286432,30.7065246 L201.031658,30.7065246 L201.031658,17.1764789 Z M208.924701,23.6669791 L208.924701,25.980813 L211.199317,25.980813 C211.042447,27.6083402 210.414967,28.5691695 208.865875,28.5691695 C207.277565,28.5691695 206.434388,27.4906876 206.434388,24.9023311 L206.434388,22.9806724 C206.434388,20.3923158 207.277565,19.3138339 208.865875,19.3138339 C210.238488,19.3138339 210.964012,20.1374019 211.199317,21.3727539 L213.826891,21.3727539 C213.415107,18.6079185 211.709145,17 208.865875,17 C205.826517,17 203.689161,18.8040061 203.689161,23.17676 L203.689161,24.9023311 C203.689161,29.0397798 205.826517,30.8830034 208.865875,30.8830034 C211.924841,30.8830034 213.8465,29.0397798 213.8465,24.9023311 L213.8465,23.6669791 L208.924701,23.6669791 Z M223.876898,17.1764789 L223.876898,25.6670728 L218.582532,17.1764789 L216.307916,17.1764789 L216.307916,30.7065246 L218.915881,30.7065246 L218.915881,22.3335832 L224.190638,30.7065246 L226.484863,30.7065246 L226.484863,17.1764789 L223.876898,17.1764789 Z" /> <path fill="#4B4B4B" d="M48.003127,0.000151951537 C55.2880286,5.47353401 60,14.1864971 60,24 C60,33.8139507 55.2875986,42.5272612 48.0021297,48.0005973 L11.9978703,48.0005973 C4.71240142,42.5272612 0,33.8139507 0,24 C0,14.1864971 4.71197138,5.47353401 11.996873,0.000151951537 Z" /> <path fill="url(#logo-and-text-a)" d="M24,14.9933977 C24,14.4447593 24.4437166,14 24.9998075,14 L28.0001925,14 C28.5523709,14 29,14.4474894 29,14.9985024 L29,27.0000004 L39.0044225,27.0000002 C39.5542648,27.0000002 40,27.4437168 40,27.9998076 L40,31.0001927 C40,31.5523711 39.5553691,32.0000002 38.9991283,32.0000002 L27.0094776,32.0000002 C25.347389,32.0000002 24,30.6470746 24,29.0074604 L24,14.9933977 Z" /> <rect width="3" height="5" x="29" y="27" fill="#232323" opacity=".3" /> </g> </svg> </a> </div> <div class="header__notice"> <span class="header__open-date">Open until <strong>Nov 30 2024</strong></span>  <a href="#enroll-now" class="header__btn header__enroll-now">Enroll Now</a>  <span class="header__countdown"><strong class="countdown__days">--</strong> days <strong class="countdown__hours">--</strong> hr <strong class="countdown__minutes">--</strong> min <strong class="countdown__seconds">––</strong> sec</span> </div> <ul class="header__nav"> <li> <a href="/" class="header__link header__link--active" >UI<span class="mobile-lg"> Course</span></a> </li> <li> <a href="/courses/learn-ux-design.html" class="header__link" >UX<span class="mobile-lg"> Course</span></a> </li> <li> <a href="/courses/landing-page-academy.html" class="header__link" >LP<span class="mobile-lg"> Course</span></a> </li> <li> <a href="/blog/" class="header__link" >Blog</a> </li> <li class="header__menu-parent" aria-haspopup="true"> <a href="/tools/" class="header__link" >Tools</a> <ul class="header__menu" aria-label="submenu"> <li><a href="/tools/data-color-picker.html"> <svg xmlns="http://www.w3.org/2000/svg" width="15" height="13" viewBox="0 0 15 13" class="tool-logos__data"> <g fill="none" fill-rule="evenodd"> <path fill="#008FD1" d="M1,4 L2,4 C2.55228475,4 3,4.44771525 3,5 L3,13 L3,13 L0,13 L0,5 C-6.76353751e-17,4.44771525 0.44771525,4 1,4 Z" /> <path fill="#BF7EDC" d="M5,0 L6,0 C6.55228475,-1.01453063e-16 7,0.44771525 7,1 L7,13 L7,13 L4,13 L4,1 C4,0.44771525 4.44771525,1.01453063e-16 5,0 Z" /> <path fill="#FF6C8A" d="M9,2 L10,2 C10.5522847,2 11,2.44771525 11,3 L11,13 L11,13 L8,13 L8,3 C8,2.44771525 8.44771525,2 9,2 Z" /> <path fill="#FFA600" d="M13,6 L14,6 C14.5522847,6 15,6.44771525 15,7 L15,13 L15,13 L12,13 L12,7 C12,6.44771525 12.4477153,6 13,6 Z" /> </g> </svg> <span>Data Visualization Color Picker</span> </a></li> <li><a href="/tools/accessible-color-generator.html"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" viewBox="0 0 12 12" class="tool-logos__a11y"> <defs> <path id="accessible-color-generator-logo-mini-b" d="M2.5638852,-1.03584031e-16 L7.4361148,1.03584031e-16 C8.32763354,-6.01853049e-17 8.65091978,0.0928256111 8.9768457,0.267132704 C9.30277163,0.441439796 9.5585602,0.697228371 9.7328673,1.0231543 C9.90717439,1.34908022 10,1.67236646 10,2.5638852 L10,7.4361148 C10,8.32763354 9.90717439,8.65091978 9.7328673,8.9768457 C9.5585602,9.30277163 9.30277163,9.5585602 8.9768457,9.7328673 C8.65091978,9.90717439 8.32763354,10 7.4361148,10 L2.5638852,10 C1.67236646,10 1.34908022,9.90717439 1.0231543,9.7328673 C0.697228371,9.5585602 0.441439796,9.30277163 0.267132704,8.9768457 C0.0928256111,8.65091978 4.01235366e-17,8.32763354 -6.90560205e-17,7.4361148 L6.90560205e-17,2.5638852 C-4.01235366e-17,1.67236646 0.0928256111,1.34908022 0.267132704,1.0231543 C0.441439796,0.697228371 0.697228371,0.441439796 1.0231543,0.267132704 C1.34908022,0.0928256111 1.67236646,6.01853049e-17 2.5638852,-1.03584031e-16 Z" /> <filter id="accessible-color-generator-logo-mini-a" width="120%" height="120%" x="-5%" y="-5%" filterUnits="objectBoundingBox"> <feOffset dx="1" dy="1" in="SourceAlpha" result="shadowOffsetOuter1" /> <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" /> </filter> </defs> <g fill="none" fill-rule="evenodd"> <path fill="#006A85" d="M4.5638852,2 L9.4361148,2 C10.3276335,2 10.6509198,2.09282561 10.9768457,2.2671327 C11.3027716,2.4414398 11.5585602,2.69722837 11.7328673,3.0231543 C11.9071744,3.34908022 12,3.67236646 12,4.5638852 L12,9.4361148 C12,10.3276335 11.9071744,10.6509198 11.7328673,10.9768457 C11.5585602,11.3027716 11.3027716,11.5585602 10.9768457,11.7328673 C10.6509198,11.9071744 10.3276335,12 9.4361148,12 L4.5638852,12 C3.67236646,12 3.34908022,11.9071744 3.0231543,11.7328673 C2.69722837,11.5585602 2.4414398,11.3027716 2.2671327,10.9768457 C2.09282561,10.6509198 2,10.3276335 2,9.4361148 L2,4.5638852 C2,3.67236646 2.09282561,3.34908022 2.2671327,3.0231543 C2.4414398,2.69722837 2.69722837,2.4414398 3.0231543,2.2671327 C3.34908022,2.09282561 3.67236646,2 4.5638852,2 Z" /> <use fill="#000" filter="url(#accessible-color-generator-logo-mini-a)" xlink:href="#accessible-color-generator-logo-mini-b" /> <use fill="#4AC4E2" xlink:href="#accessible-color-generator-logo-mini-b" /> <path fill="#00556D" fill-rule="nonzero" d="M4.1485,8.195 C4.8895,8.195 5.4095,7.831 5.8385,7.311 L5.8905,7.311 C6.1115,7.909 6.6445,8.26 7.7885,8.13 L7.9055,6.973 C7.4505,6.947 7.3725,6.882 7.3725,6.427 L7.3725,4.282 C7.4115,2.631 6.6965,1.812 4.8505,1.812 C3.8625,1.812 2.9265,2.15 2.3415,2.514 L2.6535,3.723 C3.2905,3.359 4.0315,3.086 4.6425,3.086 C5.5005,3.086 5.8385,3.424 5.8385,4.23 L5.8385,4.373 C3.0955,4.464 2.2895,5.4 2.2895,6.505 C2.2895,7.454 3.0695,8.195 4.1485,8.195 Z M4.6945,7.077 C4.1485,7.077 3.7975,6.752 3.7975,6.297 C3.7975,5.66 4.3435,5.361 5.8385,5.179 L5.8385,6.557 C5.5655,6.856 5.1755,7.077 4.6945,7.077 Z" /> </g> </svg> <span>Accessible Color Generator</span> </a></li> <li><a href="/tools/gradient-generator.html"> <svg class="tool-logos__gradient" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="12" height="12"> <path d="M2.46927 11.6955C3.20435 12 4.13623 12 6 12C7.86377 12 8.79565 12 9.53073 11.6955C10.5108 11.2895 11.2895 10.5108 11.6955 9.53073C12 8.79565 12 7.86377 12 6C12 4.13623 12 3.20435 11.6955 2.46927C11.2895 1.48915 10.5108 0.710458 9.53073 0.304482C8.79565 0 7.86377 0 6 0C4.13623 0 3.20435 0 2.46927 0.304482C1.48915 0.710458 0.710458 1.48915 0.304482 2.46927C0 3.20435 0 4.13623 0 6C0 7.86377 0 8.79565 0.304482 9.53073C0.710458 10.5108 1.48915 11.2895 2.46927 11.6955Z" fill="url(#paint0_linear)" /> </mask> <g mask="url(#mask0)"> <path fill-rule="evenodd" clip-rule="evenodd" d="M6 12C4.13623 12 3.20435 12 2.46927 11.6955C1.48915 11.2895 0.710458 10.5108 0.304482 9.53073C0 8.79565 0 7.86377 0 6C0 4.13623 0 3.20435 0.304482 2.46927C0.710458 1.48915 1.48915 0.710458 2.46927 0.304482C3.20435 0 4.13623 0 6 0C7.86377 0 8.79565 0 9.53073 0.304482C10.5108 0.710458 11.2895 1.48915 11.6955 2.46927C11.7636 2.6336 11.8164 2.80777 11.8575 2.99999H8.66667H8.00002H3.00002V8.99999H9.50002L8 6H8.66667V5.99999H12C12 5.99999 12 6 12 6C12 7.86377 12 8.79565 11.6955 9.53073C11.2895 10.5108 10.5108 11.2895 9.53073 11.6955C8.79565 12 7.86377 12 6 12Z" fill="url(#paint1_linear)" /> <path opacity="0.3" d="M3 3H0V9H3V3Z" fill="#4B4B4B" /> <path opacity="0.3" d="M9.5 9H7.5L8.99998 12H11L9.5 9Z" fill="#4B4B4B" /> </g> <defs> <linearGradient id="paint0_linear" x1="1.33333" y1="12" x2="11" y2="1" gradientUnits="userSpaceOnUse"> <stop stop-color="#5BBBD9" /> <stop offset="0.142857" stop-color="#48BFD9" /> <stop offset="0.285714" stop-color="#00C9CF" /> <stop offset="0.428571" stop-color="#11D2AD" /> <stop offset="0.571429" stop-color="#70D775" /> <stop offset="0.714286" stop-color="#B6D33B" /> <stop offset="0.857143" stop-color="#EACA0E" /> <stop offset="1" stop-color="#FFC400" /> </linearGradient> <linearGradient id="paint1_linear" x1="1.33333" y1="12" x2="11" y2="1" gradientUnits="userSpaceOnUse"> <stop stop-color="#5BBBD9" /> <stop offset="0.142857" stop-color="#48BFD9" /> <stop offset="0.285714" stop-color="#00C9CF" /> <stop offset="0.428571" stop-color="#11D2AD" /> <stop offset="0.571429" stop-color="#70D775" /> <stop offset="0.714286" stop-color="#B6D33B" /> <stop offset="0.857143" stop-color="#EACA0E" /> <stop offset="1" stop-color="#FFC400" /> </linearGradient> </defs> </svg> <span>Gradient Generator</span> </a></li> <li><a href="/tools/typography-tutorial.html"> <svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg" class="tool-logos__itt"> <rect opacity="0.8" y="9" width="10" height="3" fill="#4AC4E2" /> <rect opacity="0.8" x="3" y="3" width="4" height="6" fill="#4AC4E2" /> <rect opacity="0.3" x="3" y="3" width="4" height="2" fill="#4B4B4B" /> <rect opacity="0.3" x="3" y="8" width="4" height="1" fill="#4B4B4B" /> <rect opacity="0.8" width="10" height="3" fill="#4AC4E2" /> </svg> <span>Interactive Typography Tutorial</span> </a></li> </ul> </li> <li> <a href="/newsletter.html" class="header__btn">Join 60k+ readers</a> </li> </ul> </header> <div class="top-details"> <span class="top-details__open-date"> Open until Nov 30 2024 </span> <span><a href="https://sso.teachable.com/secure/70335/users/sign_in" class="top-details__login">Log In</a></span> </div>  <div class="hero" id="content"> <h1 class="hero__title"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 589 107" alt="Learn UI Design"> <path fill="#FFFFFF" d="M251.84,298 L251.84,286.52 L234.06,286.52 L234.06,191.6 L220.62,191.6 L220.62,298 L251.84,298 Z M291.32,298 L291.32,286.52 L271.3,286.52 L271.3,249.84 L288.52,249.84 L288.52,238.36 L271.3,238.36 L271.3,203.08 L291.04,203.08 L291.04,191.6 L257.86,191.6 L257.86,298 L291.32,298 Z M308.54,298 L311.2,270.56 L323.52,270.56 L326.18,298 L340.18,298 L327.16,191.6 L307.84,191.6 L295.1,298 L308.54,298 Z M322.54,259.08 L312.18,259.08 L317.36,205.46 L322.54,259.08 Z M359.5,298 L359.5,252.64 L365.24,252.64 L373.5,298 L386.52,298 L378.12,251.66 L385.54,244.24 L385.54,200 L377.14,191.6 L346.06,191.6 L346.06,298 L359.5,298 Z M369.3,241.72 L359.5,241.72 L359.5,202.8 L369.3,202.8 L372.1,205.6 L372.1,238.92 L369.3,241.72 Z M407.24,298 L407.24,225.34 L422.64,298 L437.2,298 L437.2,191.6 L425.02,191.6 L425.02,265.38 L409.62,191.6 L395.06,191.6 L395.06,298 L407.24,298 Z M499.64,298 L508.04,289.6 L508.04,191.6 L494.6,191.6 L494.6,283.72 L491.8,286.52 L484.94,286.52 L482.14,283.72 L482.14,191.6 L468.7,191.6 L468.7,289.6 L477.1,298 L499.64,298 Z M530.58,298 L530.58,191.6 L517.14,191.6 L517.14,298 L530.58,298 Z M593.72,298 L602.12,289.6 L602.12,200 L593.72,191.6 L562.22,191.6 L562.22,298 L593.72,298 Z M585.88,286.52 L575.66,286.52 L575.66,203.08 L585.88,203.08 L588.68,205.88 L588.68,283.72 L585.88,286.52 Z M644.4,298 L644.4,286.52 L624.38,286.52 L624.38,249.84 L641.6,249.84 L641.6,238.36 L624.38,238.36 L624.38,203.08 L644.12,203.08 L644.12,191.6 L610.94,191.6 L610.94,298 L644.4,298 Z M679.96,298 L688.36,289.6 L688.36,246.76 L679.96,238.36 L666.8,238.36 L664,235.56 L664,205.6 L666.8,202.8 L671.7,202.8 L674.5,205.6 L674.5,222.4 L687.94,222.4 L687.94,200 L679.54,191.6 L658.96,191.6 L650.56,200 L650.56,241.44 L658.96,249.84 L672.12,249.84 L674.92,252.64 L674.92,284 L672.12,286.8 L666.52,286.8 L663.72,284 L663.72,267.34 L650.28,267.34 L650.28,289.6 L658.68,298 L679.96,298 Z M709.78,298 L709.78,191.6 L696.34,191.6 L696.34,298 L709.78,298 Z M748.98,298 L757.38,289.6 L757.38,242.56 L737.22,242.56 L737.22,254.6 L743.94,254.6 L743.94,283.72 L741.14,286.52 L734.84,286.52 L732.04,283.72 L732.04,205.88 L734.84,203.08 L741.14,203.08 L743.94,205.88 L743.94,222.54 L757.38,222.54 L757.38,200 L748.98,191.6 L727,191.6 L718.6,200 L718.6,289.6 L727,298 L748.98,298 Z M778.1,298 L778.1,225.34 L793.5,298 L808.06,298 L808.06,191.6 L795.88,191.6 L795.88,265.38 L780.48,191.6 L765.92,191.6 L765.92,298 L778.1,298 Z" transform="translate(-220 -191)" /> </svg> </h1> <p class="hero__subtitle label--lg"> <span class="mobile-only">Video Course & Resource Library</span> <span class="no-mobile">The Complete Online Video Course & Resource Library</span> </p> </div> <div class="hero__cta-wrapper content-width--674"> <a href="#enroll-now" class="btn btn--orange btn--cta">Enroll Now</a> </div> <div class="tetraptych"> <div class="tetraptych__panel" id="panel--color"> <div class="color-viz__oval" id="color-viz__yellow"></div> <div class="color-viz__oval" id="color-viz__orange"></div> <div class="color-viz__oval" id="color-viz__red"></div> <div id="color-viz__gray"></div> <p class="tetraptych__label rajdhani">Color</p> </div> <div class="tetraptych__panel" id="panel--patterns"> <img src="img/design-pattern-phone-2x.webp" onerror="this.onerror=null; this.src='img/design-pattern-phone.jpg'" id="unit-viz-phone" width="311px"> <p class="tetraptych__label rajdhani">Design Patterns</p> </div> <div class="tetraptych__panel" id="panel--typography"> <div class="abc-wrapper"> <svg id="abc-thin" fill="none" viewBox="0 0 129 58" xmlns="http://www.w3.org/2000/svg"> <path d="m26.837 31.665h-10.152c-4.7775 0-8.6374 1.1841-11.311 3.4707-2.6842 2.2961-4.1088 5.6503-4.1088 9.8491 0 3.8592 1.393 6.9813 4.0203 9.1279 2.6137 2.1355 6.392 3.2595 11.088 3.2595 4.8036 0 8.618-1.6172 11.28-4.4737l0.1093 3.0592 0.0172 0.4821h6.4217v-21.478c0-6.2763-1.3519-11.114-4.1406-14.387-2.8014-3.2883-6.9809-4.9151-12.444-4.9151-5.8123 0-10.922 2.2343-14.826 6.6161l-0.30143 0.3383 0.30709 0.3331 3.6521 3.9625 0.35722 0.3876 0.36821-0.3772c3.1072-3.1826 6.6355-4.7441 10.288-4.7441 2.9657 0 5.0905 0.8589 6.5861 2.4894 1.4276 1.5564 2.3369 3.8749 2.7887 6.9995zm19.322 24.275v0.5h6.8822l0.0227-0.4762 0.2381-4.9982c2.9242 4.0264 7.326 6.4068 12.705 6.4068 5.3105 0 9.8396-2.14 13.034-5.8351 3.1901-3.6897 5.0269-8.9014 5.0269-15.021 0-6.1198-1.8368-11.332-5.0269-15.021-3.1947-3.695-7.7238-5.835-13.034-5.835-5.2809 0-9.6535 2.3547-12.632 6.3348v-20.942h-7.2163v54.887zm81.449-9.4213 0.216-0.4594-0.462-0.2091-5.673-2.564-0.453-0.205-0.207 0.4526c-2.021 4.4144-5.967 7.0891-10.891 7.0891-3.709 0-6.856-1.4391-9.079-3.9042-2.2268-2.4687-3.5526-5.9953-3.5526-10.202 0-4.2092 1.3075-7.7366 3.5056-10.205 2.195-2.4643 5.302-3.9019 8.971-3.9019 4.799 0 8.821 2.394 10.905 6.2635l0.219 0.4081 0.424-0.1882 5.595-2.4863 0.48-0.2136-0.237-0.4692c-3.201-6.3213-9.6-10.064-17.231-10.064-5.838 0-10.828 2.1472-14.358 5.846-3.5277 3.6971-5.5679 8.9147-5.5679 15.01 0 6.0968 2.0605 11.315 5.6179 15.012 3.5586 3.6981 8.5868 5.8445 14.464 5.8445 7.728 0 14.122-4.0718 17.314-10.854zm-119.2-1.6114c0-2.3086 0.66572-4.046 2.1257-5.2244 1.483-1.197 3.872-1.8898 7.4758-1.8898h9.2306l0.0601 1.6816c-0.04 3.3924-1.0957 6.2736-2.9392 8.3012-1.8404 2.0242-4.4994 3.2355-7.8278 3.2355-2.6515 0-4.6868-0.6069-6.0474-1.6541-1.3441-1.0345-2.0778-2.5341-2.0778-4.45zm44.971-8.3911c0-4.2226 1.1795-7.7764 3.1731-10.264 1.9874-2.4793 4.7988-3.9209 8.138-3.9209 6.957 0 12.01 5.7595 12.01 14.184 0 8.4206-5.1274 14.184-12.088 14.184-3.2986 0-6.0907-1.4401-8.0693-3.92-1.9846-2.4875-3.1641-6.0419-3.1641-10.264z" opacity=".8" stroke="#FF9F2F"/> </svg> <svg id="abc-medium" fill="none" viewBox="0 0 131 58" xmlns="http://www.w3.org/2000/svg"> <path d="m26.152 31.898h-8.6167c-5.0329 0-9.0826 1.08-11.884 3.2828-2.8207 2.218-4.3081 5.5213-4.3081 9.8039 0 3.9345 1.3911 7.0592 4.0315 9.1882 2.6245 2.1162 6.4217 3.1992 11.151 3.1992 4.4679 0 7.8405-1.4136 10.093-4.1232l0.05 2.7001 0.0091 0.4907h10.546v-21.944c0-5.8296-1.4968-10.551-4.4914-13.818-3.001-3.2743-7.4412-5.0181-13.177-5.0181-6.479 0-12.998 2.4467-16.92 6.8492l-0.30231 0.3394 0.30909 0.3332 5.9816 6.4487 0.35781 0.3858 0.36703-0.377c2.7727-2.8481 6.291-4.1221 9.8182-4.1221 2.7209 0 4.3431 0.6605 5.3477 1.7769 0.9407 1.0453 1.4178 2.5724 1.6376 4.6042zm19.716 24.042v0.5h10.676l0.0331-0.4644 0.2881-4.0331c2.665 3.4604 6.5581 5.4299 11.41 5.4299 5.4919 0 10.024-2.0347 13.177-5.6898 3.1458-3.6473 4.8794-8.8625 4.8794-15.166 0-6.304-1.7336-11.519-4.8794-15.166-3.1526-3.6552-7.685-5.6898-13.177-5.6898-4.7194 0-8.5045 1.8568-11.152 5.111v-19.718h-11.254v54.887zm83.672-10.454 0.2-0.4867-0.496-0.1748-9.711-3.4186-0.432-0.1523-0.189 0.4179c-1.393 3.0795-4.474 5.067-8.012 5.067-2.78 0-5.11-1.0533-6.749-2.839-1.642-1.7891-2.617-4.3433-2.617-7.3829 0-3.0423 0.957-5.5975 2.571-7.386 1.61-1.7846 3.901-2.836 6.64-2.836 3.558 0 6.634 1.8513 8.018 4.6915l0.195 0.4017 0.421-0.1495 9.633-3.4186 0.496-0.1759-0.201-0.4861c-3.04-7.3599-10.154-11.497-18.096-11.497-6.179 0-11.475 2.1607-15.228 5.8644-3.7534 3.7041-5.9361 8.9246-5.9361 14.992 0 6.0685 2.2032 11.289 5.9861 14.993 3.7823 3.7031 9.1169 5.8631 15.333 5.8631 8.033 0 15.062-4.3038 18.174-11.887zm-117.33-0.8114c0-0.7168 0.1298-1.3328 0.4025-1.8575 0.2711-0.5215 0.6978-0.9809 1.3366-1.366 1.298-0.7825 3.4568-1.249 6.8498-1.249h5.631c-0.179 4.1044-3.669 8.0127-8.4276 8.0127-1.93 0-3.3957-0.3614-4.3624-0.9798-0.9414-0.6023-1.4299-1.4573-1.4299-2.5604zm44.913-8.158c0-3.0906 0.9041-5.6896 2.4273-7.5066 1.5177-1.8105 3.6694-2.8708 6.2393-2.8708 5.1713 0 8.8997 4.2092 8.9773 10.377-0.0777 6.1674-3.883 10.455-9.055 10.455-4.9982 0-8.5889-4.2658-8.5889-10.455z" opacity=".8" stroke="#FF8225"/> </svg> <svg id="abc-thick" fill="none" viewBox="0 0 133 58" xmlns="http://www.w3.org/2000/svg"> <path d="m24.435 32.598h-9.1235c-4.5702 0-8.2781 0.9625-10.852 3.0232-2.5932 2.0764-3.9598 5.2068-3.9598 9.3642 0 3.9694 1.3705 7.0939 3.9552 9.2146 2.5698 2.1086 6.2758 3.1728 10.856 3.1728 4.0567 0 7.3913-1.3928 9.7938-4.0269l0.0512 2.6043 0.0096 0.4902h14.135v-22.332c0-5.4806-1.8919-10.109-5.4415-13.363-3.5453-3.2505-8.6934-5.0845-15.126-5.0845-6.6342 0-13.954 2.7532-17.576 7.1757l-0.28431 0.3471 8.4036 8.5558 0.35333 0.3598 0.35674-0.3564c2.2213-2.2189 5.2732-3.1946 8.2025-3.1946 2.3909 0 3.8481 0.4941 4.7612 1.2698 0.7858 0.6676 1.2325 1.5977 1.4844 2.7804zm20.47 23.342v0.5h14.251l0.0472-0.4476 0.3317-3.1474c2.412 2.9637 5.8232 4.5274 10.294 4.5274 5.643 0 10.185-1.9299 13.309-5.5437 3.1154-3.604 4.7691-8.8231 4.7691-15.312 0-6.4895-1.6537-11.708-4.7691-15.312-3.124-3.6138-7.6663-5.5437-13.309-5.5437-4.2439 0-7.5327 1.3802-9.9226 4.0481v-18.655h-15.001v54.887zm86.565-11.405 0.179-0.4895-0.497-0.1586-13.378-4.2732-0.427-0.1364-0.182 0.4094c-0.843 1.8956-3.06 3.2773-5.455 3.2773-1.854 0-3.412-0.6874-4.508-1.8445-1.097-1.1591-1.759-2.8183-1.759-4.8035 0-1.9893 0.645-3.6498 1.715-4.808 1.068-1.1554 2.585-1.84 4.397-1.84 2.487 0 4.763 1.3921 5.526 3.2628l0.176 0.4304 0.442-0.1437 13.378-4.351 0.493-0.1603-0.178-0.4869c-3.038-8.3056-10.714-12.76-19.059-12.76-13.001 0-22.279 8.6619-22.279 20.856 0 12.198 9.3596 20.856 22.434 20.856 8.351 0 15.945-4.5367 18.982-12.837zm-116.12 0.139c0-1.0339 0.4385-1.8294 1.291-2.3887 0.8785-0.5764 2.2267-0.9184 4.0425-0.9184h3.6851c-0.0957 1.5691-0.6444 2.8529-1.5265 3.7657-0.9721 1.0061-2.3912 1.6053-4.1809 1.6053-1.1522 0-1.9935-0.2245-2.5313-0.5853-0.5129-0.3441-0.7799-0.8294-0.7799-1.4786zm44.56-8.158c0-2.068 0.6642-3.787 1.764-4.9839 1.0971-1.1938 2.6532-1.8972 4.5029-1.8972 3.4787 0 6.0337 2.7466 6.1112 6.8811-0.0776 4.1337-2.7095 6.9587-6.189 6.9587-3.5637 0-6.1891-2.832-6.1891-6.9587z" opacity=".8" stroke="#FF6026"/> </svg> </div> <p class="tetraptych__label rajdhani">Typography</p> </div> <div class="tetraptych__panel" id="panel--components"> <svg id="unit-viz-icons" width="208px" fill="none" viewBox="0 0 208 115" xmlns="http://www.w3.org/2000/svg"> <g fill="url(#a)" filter="url(#b)"> <path d="m4.8371 27.504c-0.3946-5.6431-0.59191-8.4646 1.0386-10.34 1.6305-1.8757 4.452-2.073 10.095-2.4676l19.951-1.3951c5.643-0.3946 8.4646-0.5919 10.34 1.0386 1.8757 1.6305 2.073 4.452 2.4676 10.095l1.3951 19.951c0.3946 5.6431 0.5919 8.4646-1.0386 10.34-1.6305 1.8756-4.452 2.0729-10.095 2.4675l-19.951 1.3952c-5.6431 0.3946-8.4647 0.5919-10.34-1.0386-1.8757-1.6305-2.073-4.4521-2.4676-10.095l-1.3951-19.951z"/> <path d="m8.3249 77.382c-0.3946-5.6431-0.5919-8.4646 1.0386-10.34 1.6305-1.8757 4.452-2.073 10.095-2.4676l19.951-1.3951c5.643-0.3946 8.4646-0.5919 10.34 1.0386 1.8756 1.6305 2.0729 4.452 2.4675 10.095l1.3952 19.951c0.3946 5.6431 0.5919 8.4643-1.0386 10.34s-4.4521 2.073-10.095 2.468l-19.951 1.395c-5.6431 0.394-8.4646 0.592-10.34-1.039-1.8757-1.63-2.073-4.452-2.4676-10.095l-1.3951-19.951z"/> <path d="m54.715 24.016c-0.3946-5.6431-0.5919-8.4647 1.0386-10.34 1.6305-1.8757 4.452-2.073 10.095-2.4676l19.951-1.3951c5.643-0.3946 8.4646-0.5919 10.34 1.0386 1.8757 1.6305 2.073 4.452 2.4676 10.095l1.3949 19.951c0.395 5.643 0.592 8.4646-1.0384 10.34-1.6305 1.8757-4.452 2.073-10.095 2.4676l-19.951 1.3951c-5.6431 0.3946-8.4647 0.5919-10.34-1.0386-1.8757-1.6304-2.073-4.452-2.4676-10.095l-1.3951-19.951z"/> <path d="m58.203 73.894c-0.3946-5.6431-0.5919-8.4646 1.0386-10.34s4.452-2.073 10.095-2.4676l19.951-1.3951c5.6431-0.3946 8.4646-0.5919 10.34 1.0386 1.8756 1.6305 2.0726 4.452 2.4676 10.095l1.395 19.951c0.395 5.643 0.592 8.4646-1.039 10.34-1.63 1.876-4.4516 2.073-10.095 2.468l-19.951 1.395c-5.6431 0.394-8.4646 0.592-10.34-1.039-1.8757-1.63-2.073-4.4518-2.4676-10.095l-1.3951-19.951z"/> <path d="m104.59 20.528c-0.394-5.643-0.591-8.4646 1.039-10.34 1.631-1.8757 4.452-2.073 10.095-2.4676l19.951-1.3951c5.644-0.3946 8.465-0.5919 10.341 1.0386 1.875 1.6305 2.073 4.452 2.467 10.095l1.395 19.951c0.395 5.6431 0.592 8.4646-1.038 10.34-1.631 1.8757-4.452 2.073-10.095 2.4676l-19.952 1.3951c-5.643 0.3946-8.464 0.5919-10.34-1.0386-1.875-1.6305-2.073-4.452-2.467-10.095l-1.396-19.951z"/> <path d="m108.08 70.406c-0.394-5.643-0.592-8.4646 1.039-10.34 1.63-1.8757 4.452-2.073 10.095-2.4676l19.951-1.3951c5.643-0.3946 8.465-0.5919 10.341 1.0386 1.875 1.6304 2.073 4.452 2.467 10.095l1.395 19.951c0.395 5.6431 0.592 8.4646-1.038 10.34-1.631 1.8757-4.452 2.073-10.095 2.4677l-19.952 1.395c-5.643 0.395-8.464 0.592-10.34-1.039-1.876-1.6301-2.073-4.4516-2.468-10.095l-1.395-19.951z"/> <path d="m154.47 17.04c-0.395-5.6431-0.592-8.4646 1.038-10.34 1.631-1.8757 4.452-2.073 10.095-2.4676l19.952-1.3951c5.643-0.39461 8.464-0.59191 10.34 1.0386s2.073 4.452 2.468 10.095l1.395 19.951c0.394 5.6431 0.592 8.4646-1.039 10.34-1.63 1.8757-4.452 2.073-10.095 2.4676l-19.951 1.3951c-5.643 0.3946-8.465 0.5919-10.341-1.0386-1.875-1.6305-2.073-4.452-2.467-10.095l-1.395-19.951z"/> <path d="m157.96 66.918c-0.395-5.6431-0.592-8.4646 1.038-10.34 1.631-1.8756 4.452-2.0729 10.095-2.4675l19.951-1.3952c5.644-0.3946 8.465-0.5919 10.341 1.0386 1.875 1.6305 2.073 4.4521 2.467 10.095l1.395 19.951c0.395 5.6431 0.592 8.4646-1.038 10.34-1.631 1.8757-4.452 2.073-10.095 2.4676l-19.952 1.3951c-5.643 0.3946-8.464 0.5919-10.34-1.0386-1.875-1.6305-2.073-4.452-2.467-10.095l-1.395-19.951z"/> </g> <path d="m22.006 29.31 9.9756-0.6976 0.9766 13.966-5.1971-2.6439-4.7785 3.3415-0.9766-13.966z" clip-rule="evenodd" fill-rule="evenodd" stroke="#fff" stroke-width="2"/> <path d="m30.968 85.823c2.2038-0.1541 3.8654-2.0655 3.7113-4.2693-0.1541-2.2037-2.0656-3.8653-4.2693-3.7112-2.2038 0.1541-3.8654 2.0655-3.7113 4.2693s2.0656 3.8653 4.2693 3.7112z" clip-rule="evenodd" fill-rule="evenodd" stroke="#fff" stroke-width="2"/> <path d="m24.614 95.289-0.2791-3.9903s3.352-2.2392 6.8435-2.4834c3.4914-0.2441 7.1224 1.5068 7.1224 1.5068l0.279 3.9903" stroke="#fff" stroke-width="2"/> <path d="m70.166 29.952 0.6278 8.9781 13.966-0.9766-0.6278-8.978" stroke="#fff" stroke-width="2"/> <rect transform="rotate(-4 73.299 31.738)" x="73.299" y="31.738" width="4" height="7" fill="#fff"/> <rect transform="rotate(-4 79.283 31.32)" x="79.283" y="31.32" width="2" height="3" fill="#fff"/> <path d="m68.241 31.089 8.6293-5.6156 9.3268 4.36" stroke="#fff" stroke-width="2"/> <path d="m79.629 86.43c3.0302-0.2119 5.3149-2.8401 5.103-5.8703s-2.8401-5.3148-5.8703-5.1029-5.3148 2.8401-5.1029 5.8702c0.2119 3.0302 2.8401 5.3149 5.8702 5.103z" clip-rule="evenodd" fill-rule="evenodd" stroke="#fff" stroke-width="2"/> <path d="m84.049 85.118 4.2693 3.7112" stroke="#fff" stroke-width="2"/> <path d="m130.31 21.755c-1.234-0.5942-2.444-0.8498-3.63-0.7669-3.325 0.2325-6.465 3.1252-9.418 8.6781 1.024 1.4088 2.033 2.6136 3.029 3.6144l1.314-1.5121c-0.566-0.5778-1.144-1.2364-1.736-1.9775l-0.231-0.292 0.188-0.3192c2.393-4.0473 4.762-6.0406 6.993-6.1965l0.187-0.0089c0.614-0.0152 1.258 0.104 1.929 0.3622l1.375-1.5816zm-4.669 8.4188 2.568-2.9538c0.571 0.3178 0.975 0.9087 1.024 1.6091 0.077 1.1019-0.754 2.0576-1.856 2.1347-0.7 0.0489-1.341-0.2689-1.736-0.79zm-2.56 2.9452c1.588 1.2781 3.057 1.8769 4.389 1.8439l0.186-0.0089c2.231-0.156 4.6-2.1493 6.993-6.1966l0.187-0.3211-0.229-0.29c-1.362-1.7056-2.656-2.9738-3.876-3.8276l1.316-1.5142c1.68 1.2164 3.402 3.0386 5.166 5.4666-2.953 5.5528-6.092 8.4455-9.417 8.6781-1.945 0.136-3.954-0.6381-6.026-2.3222l1.311-1.508z" clip-rule="evenodd" fill="#fff" fill-rule="evenodd"/> <path d="m119.82 37.507 14.845-17.077" stroke="#fff" stroke-linecap="square" stroke-width="2"/> <path d="m129.45 74.926-2.993 0.2093c-2.204 0.1541-3.865 2.0655-3.711 4.2693 0.154 2.2037 2.065 3.8653 4.269 3.7112l2.993-0.2093" stroke="#fff" stroke-width="2"/> <path d="m132 82.767 2.993-0.2092c2.204-0.1541 3.865-2.0655 3.711-4.2693s-2.065-3.8653-4.269-3.7112l-2.993 0.2092" stroke="#fff" stroke-width="2"/> <path d="m133.72 78.638-5.986 0.4186" stroke="#fff" stroke-linecap="round" stroke-width="2"/> <path d="m176.7 19.496 5.986-0.4185 0.418 5.9854" stroke="#fff" stroke-width="2"/> <path d="m182.68 19.077-5.567 6.4039" stroke="#fff" stroke-width="2"/> <path d="m174.7 19.635-3.99 0.2791 0.837 11.971 11.971-0.837-0.279-3.9903" stroke="#fff" stroke-width="2"/> <path d="m174.83 78.77 0.07 0.9975 0.139 1.9952 11.971-0.8371-0.209-2.9927" stroke="#fff" stroke-width="2"/> <path d="m176.4 72.646 3.711-4.2693 4.27 3.7113" stroke="#fff" stroke-width="2"/> <path d="m180.11 68.376 0.628 8.978" stroke="#fff" stroke-width="2"/> <defs> <filter id="b" x=".5625" y=".56201" width="206.96" height="114.18" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"> <feFlood flood-opacity="0" result="BackgroundImageFix"/> <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/> <feOffset dy="2"/> <feGaussianBlur stdDeviation="2"/> <feComposite in2="hardAlpha" operator="out"/> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0"/> <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_1480_1489"/> <feBlend in="SourceGraphic" in2="effect1_dropShadow_1480_1489" result="shape"/> </filter> <linearGradient id="a" x1="104.04" x2="104.04" y1="-10.848" y2="101.65" gradientUnits="userSpaceOnUse"> <stop stop-color="#4AC4E2" offset="0"/> <stop stop-color="#0080A2" offset="1"/> </linearGradient> </defs> </svg> <p class="tetraptych__label rajdhani">Components</p> </div> </div>  <div class="bullets"> <ul class="bullets__list bullets__list--join-to"> <li> <svg width="20" height="20" viewBox="0 0 20 20" fill="none"> <circle cx="10" cy="10" r="9.5" stroke="white" /> <path d="M3.5 14V17" stroke="white" /> <path d="M7.5 11L7.5 19" stroke="white" /> <path d="M11.5 8V19" stroke="white" /> <path d="M15.5 5V18" stroke="white" /> </svg> Level up your visual design skills </li> <li> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"> <circle cx="10" cy="10" r="9.5" stroke="white" /> <path d="M8 8H5V14H15V8H12M8 8V6C8 5.44772 8.44772 5 9 5H11C11.5523 5 12 5.44772 12 6V8M8 8H12" stroke="white" /> </svg> Create a portfolio & get hired </li> <li> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"> <circle cx="10" cy="10" r="9.5" stroke="white" /> <path d="M8.43171 4.14721L10.2554 5.8414L10.5156 6.08318L10.8296 5.917L13.0296 4.75254L13.1212 7.24004L13.1342 7.59503L13.4738 7.69953L15.8528 8.43178L14.1586 10.2555L13.9168 10.5157L14.083 10.8297L15.2475 13.0297L12.76 13.1212L12.405 13.1343L12.3005 13.4738L11.5682 15.8529L9.74456 14.1587L9.48431 13.9169L9.17035 14.0831L6.97032 15.2475L6.87877 12.76L6.8657 12.405L6.52619 12.3006L4.14714 11.5683L5.84134 9.74463L6.08311 9.48438L5.91693 9.17041L4.75247 6.97039L7.23998 6.87884L7.59496 6.86577L7.69946 6.52626L8.43171 4.14721Z" stroke="white" /> </svg> Make your startup or side project look professional </li> </ul> <ul class="bullets__list bullets__list--comes-with"> <li> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"> <circle cx="10" cy="10" r="9.5" stroke="white" /> <rect x="5" y="5" width="1" height="1" fill="white" /> <rect x="8" y="5" width="7" height="1" fill="white" /> <rect x="5" y="8" width="1" height="1" fill="white" /> <rect x="8" y="8" width="7" height="1" fill="white" /> <rect x="5" y="11" width="1" height="1" fill="white" /> <rect x="8" y="11" width="7" height="1" fill="white" /> <rect x="5" y="14" width="1" height="1" fill="white" /> <rect x="8" y="14" width="7" height="1" fill="white" /> </svg> Comprehensive, practical curriculum </li> <li> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"> <circle cx="10" cy="10" r="9.5" stroke="white" /> <path d="M7.5 5.90212L14.0566 10L7.5 14.0979L7.5 5.90212Z" stroke="white" /> </svg> Over 36 hours of video lessons </li> <li> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"> <circle cx="10" cy="10" r="9.5" stroke="white" /> <path d="M8.25 4.75H10V8.25H8.25C7.2835 8.25 6.5 7.4665 6.5 6.5C6.5 5.5335 7.2835 4.75 8.25 4.75Z" stroke="white" /> <path d="M10 4.75H11.75C12.7165 4.75 13.5 5.5335 13.5 6.5C13.5 7.4665 12.7165 8.25 11.75 8.25H10V4.75Z" stroke="white" /> <path d="M8.25 8.25H10V11.75H8.25C7.2835 11.75 6.5 10.9665 6.5 10C6.5 9.0335 7.2835 8.25 8.25 8.25Z" stroke="white" /> <rect x="10" y="8.25" width="3.5" height="3.5" rx="1.75" stroke="white" /> <path d="M8.25 11.75H10V13.5C10 14.4665 9.2165 15.25 8.25 15.25C7.2835 15.25 6.5 14.4665 6.5 13.5C6.5 12.5335 7.2835 11.75 8.25 11.75Z" stroke="white" /> </svg> Figma resource library </li> <li> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"> <circle cx="10" cy="10" r="9.5" stroke="white" /> <path d="M13.4979 11.5H15.5001L15.5002 4.5H6.50024L6.49828 7.5M13.4983 7.5H4.50024L4.5 14.5H6.49756L6.50019 16.5L10.5002 14.5H13.498L13.4983 7.5Z" stroke="white" stroke-linecap="square" /> </svg> Community with mentor feedback </li> </ul> </div>   <div class="trusted trusted--topless"> <p class="trusted__label rajdhani centered pb32"> Join <span class="trusted__underline-container">Over 5,000 <svg class="trusted__underline" width="81" height="8" viewBox="0 0 81 8" fill="none"> <path fill-rule="evenodd" clip-rule="evenodd" d="M79.9559 0.849554C79.9378 0.947587 79.9619 1.06825 80.0056 1.16025C80.1608 1.47546 80.1533 1.76651 79.9649 2.07267C79.7442 2.42884 80.5229 2.56733 80.7168 2.67897C80.8144 2.7351 80.8448 3.02866 80.6972 3.05602L80.5985 3.07387C79.3718 3.29585 78.1456 3.51773 76.8866 3.46926C76.0308 3.43608 75.181 3.51451 74.3297 3.62611C73.0007 3.80106 71.6627 3.77844 70.3307 3.62159C68.1971 3.36972 66.065 3.39991 63.9315 3.60954C62.396 3.75888 60.8117 3.64831 59.3042 3.99712C58.8959 4.09214 58.4529 4.04238 58.025 4.0469C57.0622 4.05444 56.1068 4.12836 55.1485 4.24449C53.3587 4.46297 51.5176 4.50063 49.7152 4.59889C47.9162 4.69826 46.0621 4.63435 44.2773 4.89901C43.6459 4.99252 42.9995 5.00611 42.3591 5.02723C40.9172 5.07247 39.4707 4.98048 38.0378 5.22632C36.9107 5.1313 35.8033 5.43141 34.6792 5.39069C32.8297 5.33779 30.9652 5.94271 29.0996 5.94271C27.064 5.93215 25.057 6.3152 23.0244 6.36799C21.7436 6.40166 20.4711 6.59509 19.1897 6.63494C17.8856 6.67586 16.4718 6.51735 15.1817 6.74054C12.2635 7.238 9.15844 6.92159 6.20891 6.99089C4.70365 7.02709 3.2255 6.78125 1.73983 6.6063C1.37533 6.56338 0.812141 6.18756 0.977396 5.75418C1.35233 4.77093 1.62872 3.99173 2.8699 4.04993C5.00546 4.14654 7.13676 4.11283 9.27519 4.07857C11.0403 4.04938 12.9837 4.28966 14.7266 3.96697C16.0495 3.71661 17.3891 3.75279 18.7241 3.72715C19.8994 3.70453 21.0686 3.65328 22.2409 3.49492C25.4899 3.06046 29.0118 2.50463 32.2804 2.48143C35.5079 2.45514 38.7886 1.3889 42.0141 1.74239C42.5339 1.7997 43.0809 1.70165 43.6052 1.61569C44.8936 1.40507 46.1463 1.42522 47.4174 1.2628C48.9831 1.06629 50.4305 1.5843 52.0296 1.20245C52.7573 1.029 53.4896 0.845025 54.2295 0.766599C55.343 0.647453 56.464 0.559991 57.5835 0.553959C62.515 0.526711 67.4465 0.525346 72.378 0.523981L73.1423 0.523766C73.9967 0.523766 74.854 0.534348 75.6993 0.701757C75.853 0.73192 76.0172 0.713795 76.1769 0.710779C76.415 0.706254 77.8836 0.558721 78.3829 0.532553C79.8805 0.45394 79.9559 0.849554 79.9559 0.849554Z" fill="#FF9F2F" /> </svg> </span> Students From: </p> <ul class="trusted__orgs"> <li class="trusted__org"><img src="img/trusted/apple.svg" alt="Apple"></li> <li class="trusted__org"><img src="img/trusted/meta.svg" alt="Meta"></li> <li class="trusted__org"><img src="img/trusted/google.svg" alt="Google"></li> <li class="trusted__org"><img src="img/trusted/netflix.svg" alt="Netflix"></li> <li class="trusted__org"><img src="img/trusted/amazon.svg" alt="Amazon"></li> <li class="trusted__org"><img src="img/trusted/uber.svg" alt="Uber"></li> <li class="trusted__org"><img src="img/trusted/stripe.svg" alt="Stripe"></li> <li class="trusted__org"><img src="img/trusted/nintendo.svg" alt="Nintendo"></li> </ul> </div>  <div class="vision"> <h2 class="vision__subhead">Confidently design <strong><em>beautiful</em></strong><br class="desktop-only" /> user interfaces for any app or site.</h2> </div> <div class= "blurb" > <p class="blurb__quote">I've been watching Erik Kennedy's Learn UI Design course to bone up a bit... If you're serious about wanting to get better at design, this is the course for you.”</p> <img src="/img/testimonials/chris-coyier.jpg" alt="Chris Coyier" class="blurb__photo"> <div class="blurb__footer"> <div class="blurb__byline"> <p>Chris Coyier</p> <p> Founder, CSS-Tricks.com </p> </div> </div> </div> <div class= "blurb blurb--reverse" > <p class="blurb__quote">Learn UI Design has made my work here at Google so much better. I even had a coworker ask how I got so much better at design – and now he's enrolled too!”</p> <img src="/img/testimonials/david-east.jpg" alt="David East" class="blurb__photo"> <div class="blurb__footer"> <div class="blurb__byline"> <p>David East</p> <p> Dev Advocate for Firebase, Google </p> </div> </div> </div> <div class= "blurb" > <p class="blurb__quote">Learn UI Design is the best money I've ever spent in my (short) career – and I'm not even done with it yet!”</p> <img src="/img/testimonials/jagoda-gniadek.jpg" alt="Jagoda Gniadek" class="blurb__photo"> <div class="blurb__footer"> <div class="blurb__byline"> <p>Jagoda Gniadek</p> <p> Product Designer, Healios </p> </div> </div> </div> <div class= "blurb blurb--reverse" > <p class="blurb__quote">Shortly after completing Learn UI Design, I landed my first job as a UX/UI designer. Listening to Erik’s design rationale helped me develop a healthy thought process and explain all of my design decisions with confidence. One of the best investments I’ve ever made!”</p> <img src="/img/testimonials/christian-laing.jpg" alt="Christian Laing" class="blurb__photo"> <div class="blurb__footer"> <div class="blurb__byline"> <p>Christian Laing</p> <p> UX Designer, Home Depot </p> </div> </div> </div> <section> <p><span class="lede">Let me save you some time.</span> Honestly, there's only one reason to read anything on this page, and it's this: you want to learn how to create <strong>great-looking user interfaces</strong>.</p> <p>If that’s not you, you can bounce along now. No hard feelings 🙂</p> <p>If you’re anything like I was, you find UI design to be confusing and open-ended. The advice out there seems vague, contradictory, and theoretical (rather than practical).</p> <p>When you look at design topics like <em>typography</em> or <em>color</em>, you're overwhelmed.</p> <p>And when you see beautiful designs, they seem to be some mix of:</p> <ul> <li>Subjective</li> <li>Arbitrary</li> <li>Easy to recognize, but difficult to create</li> </ul> <p>These feelings are all too familiar to me.</p> <p>When I was a developer and PM, I felt this way <em>constantly</em>. I saw tons of great designs. I could even tell you which I liked best. But when it came to recreating something similar for myself, I was <em>hopeless</em>. </p> <p>I saw UI designers as magical creatures who sprinkle 🌈 <strong>mysterious design dust</strong> 🦄 over any wireframe and make it shine. It seemed like some <em>art school voodoo</em> that was completely inaccessible to others – myself included.</p> </section> <section> <h2>The Hard Way</h2> <p>When I learned UI design, I had to do it the hard way. Largely self-taught, making progress an inch at a time. In the end, I learned the aesthetics of apps the same way I’ve learned any creative endeavor: <strong>cold, hard analysis</strong>. And shameless copying of what works. I’ve worked 10 hours on a UI project and billed for 1. The other 9 were the wild flailing of learning.</p> <p>During that time, I came to have a disdain for the theory-heavy tripe that plagues so much design writing. You know what I’m talking about? Stuff like:</p> <ul> <li>Color theory (in reality, no designers really use it)</li> <li>The golden ratio (seems insightful, doesn’t help)</li> <li>Grids (less practical than you’d expect, given the airtime they get)</li> </ul> <p>This stuff <em>seems</em> useful, but it failed the only metric that mattered to me: <em>does it help me <strong>make a bad design look good</strong></em>?</p> <p>Let’s fast-forward a few years. Now, I’ve designed interfaces for clients like <strong>Amazon, Soylent, Roam Research, and more</strong>, and made hundreds of thousands of dollars doing it. I’ve <strong>circled the globe freelancing</strong> from a dozen countries. From enterprise systems to personal side-projects, I’m confident in my ability to design whatever I need to – and have it look <em>awesome</em>.</p> <p>“But I don’t know Arial from Helvetica” you cry. How will you ever become confident in design?</p> <p>I thought you’d never ask.</p> </section> <div class= "blurb" > <p class="blurb__quote">I’ve been a professional Visual Designer for 5 years and the course still showed me new stuff – both in the basics and advanced stuff. Just get Learn UI Design. It's a no-brainer.”</p> <img src="/img/testimonials/oskar-bader.jpg" alt="Oskar Bader" class="blurb__photo"> <div class="blurb__footer"> <div class="blurb__byline"> <p>Oskar Bader</p> <p> VIsual Designer, Metafinanz Informationssysteme </p> </div> </div> </div> <div class= "blurb blurb--reverse" > <p class="blurb__quote">Learn UI Design's straightforward approach, illustrated with real-life examples and tutorials, was extremely helpful and eye-opening. I would <em>highly</em> recommend this course for UX designers wanting to add UI design to their toolkit.”</p> <img src="/img/testimonials/sarah-kim.png" alt="Sarah Kim" class="blurb__photo"> <div class="blurb__footer"> <div class="blurb__byline"> <p>Sarah Kim</p> <p> UX Design Lead </p> </div> </div> </div> <div class= "blurb" > <p class="blurb__quote">This hands-on course is easily the most effective way I've found to learn UI design”</p> <img src="/img/testimonials/aaron-franks.png" alt="Aaron Franks" class="blurb__photo"> <div class="blurb__footer"> <div class="blurb__byline"> <p>Aaron Franks</p> <p> Software Engineer, Reelhouse </p> </div> </div> </div>  <div class="introducing"> <p class="introducing__subsubtitle">Introducing</p> <h2 class="introducing__title content-width--674"> <img src="img/title.svg" alt="Learn UI Design"> <img src="img/two-point-oh.svg" class="two-point-oh" alt="2.0"> </h2> <p class="introducing__subtitle">The Complete Online Video Course</p> <div class="introducing__content introducing__content--reverse" id="introducing-content-1"> <div class="introducing__img-wrapper"> <img src="img/falling-laptop.webp" onerror="this.onerror=null; this.src='img/falling-laptop.png'" data-parallax data-speed="0.1" alt="" width="685px"> </div> <div class="introducing__text-wrapper"> <h3><strong>54</strong> Video-Based Lessons</h3> <p>Over <a href="#syllabus">36 hours of video lessons</a>, filled with strategies and live examples covering all major areas of UI design. Watch me, Erik, as I <em>actually</em> design dozens of examples right in front of you.</p> </div> </div> <div class="angle-wrapper"> <svg class="introducing__angle-bottom" viewBox="0 0 100 100" preserveAspectRatio="none"> <polygon fill="#1f1f1f" points="100,100 100,0 0,0"></polygon> </svg> </div> <div class="introducing__content" id="introducing-content-2"> <div class="introducing-content-2__sub-wrapper"> <div class="introducing__img-wrapper"> <img src="img/falling-phone.webp" onerror="this.onerror=null; this.src='img/falling-phone.png'" data-parallax data-speed="0.2" alt="" style="width: 353px"> <img src="img/falling-tablet.webp" onerror="this.onerror=null; this.src='img/falling-tablet.png'" data-parallax data-speed="0.15" alt="" style="width: 534px"> </div> <div class="introducing__text-wrapper"> <h3>Watch from any device</h3> <p>Learn UI Design works on phones and tablets too, so you can watch from your desk or on the go.</p> </div> </div> </div> <div class="angle-wrapper"> <svg class="introducing__angle-top" viewBox="0 0 100 100" preserveAspectRatio="none"> <polygon fill="#121212" points="0,0 0,100 100,100"></polygon> </svg> </div> <div class="introducing__content" id="introducing-content-3"> <div class="introducing__text-wrapper"> <div class="introducing__img-wrapper"> <img src="img/downloadable-exercises.svg" alt=""> </div> <h3>Skill-Based exercises</h3> <p>Dozens of assignments tailored to efficiently hone your UI design skills. <p> <p>Take a shot at them – then post in the student community for feedback from the <a href="#mentors">student mentors</a>.</p> </div> <div class="introducing__text-wrapper"> <div class="introducing__img-wrapper"> <img src="img/cheatsheets.webp" onerror="this.onerror=null; this.src='img/cheatsheets.png'" alt="Learn UI Design PDF cheatsheets" style="width: 212px"> </div> <h3>Cheatsheets & Checklists</h3> <p>Old-school? No doubt. But it works.</p> <p>Get over a dozen printable PDF cheatsheets and checklists with key design reminders and frameworks.</p> <p>I keep these on my office wall. You’ll want to too.</p> </div> <div class="introducing__text-wrapper"> <div class="introducing__img-wrapper"> <img src="img/student-community.webp" onerror="this.onerror=null; this.src='img/student-community.png'" alt=""> </div> <h3>Feedback & Community</h3> <p>Come for the practical design feedback, stay for the welcoming community. Learn alongside other aspiring designers.</p> <p>(There’s plenty of elitist, overly-competitive design communities out there — but we’re <em>NOT</em> one of them 🙂)</p> </div> </div> </div> <div class="summary summary--wide summary--raised body-text"> <h2 class="underline--fire">Watch Over a Pro's Shoulder</h2> <div class="gifs"> <div class="gif-wrapper"> <img src="img/clashing-colors.gif" alt="Animated GIF of lesson on fixing clashing colors"> <p class="rajdhani">3.5 Fixing Clashing Colors</p> </div> <div class="gif-wrapper"> <img src="img/styling-text-3.gif" alt="Animated GIF of lesson on styling text in editorial designs"> <p class="rajdhani">4.9 Styling Text III</p> </div> <div class="gif-wrapper no-mobile"> <img src="img/icon-design.gif" alt="Animated GIF of lesson on designing icons"> <p class="rajdhani">5.4 Icon Design</p> </div> </div> <p>Learn UI Design is packed full of <strong>live video demos</strong>. Follow along as I create <strong>dozens of layouts, color schemes, elements, and more</strong>. From blank canvas to finished design, you'll see how the process looks at every step of the way.</p> <p>Articles can be helpful, slide decks can be illustrative — but live videos combine the best of both worlds. I’ve designed these videos to be like <strong>watching over my shoulder</strong> as I share the frameworks, tips, and tricks that have helped me design UI for companies of every size.</p> <p>In total, we’ll cover every major area of interface design.</p> <p>Which lesson will you do first?</p> <p> <a href="#enroll-now" class="btn btn--orange btn--cta btn--center">Enroll Now</a> </p> </div> <div class= "blurb" > <p class="blurb__quote">The color videos BLEW MY MIND! This is EXACTLY what I’ve needed to learn for years. I could never name it, but you just showed me. I’ve been paying attention to color for decades, and have NEVER seen this ANYWHERE. Thank you, Erik!”</p> <img src="/img/testimonials/kelly-kuran.png" alt="Kelly Kuran" class="blurb__photo"> <div class="blurb__footer"> <div class="blurb__byline"> <p>Kelly Kuran</p> <p> Chocolatier, Pinkoko Confections </p> </div> </div> </div> <div class= "blurb blurb--reverse" > <p class="blurb__quote">Fonts have always been a complete mystery to me. But just from watching <em>just the first two</em> typography videos, I am actually capable of pairing fonts – with exquisite results! Learn UI Design's pragmatic approach to design has taught me <em>infinitely</em> more than what reading any design books ever did!”</p> <img src="/img/testimonials/anders-nysom.png" alt="Anders Nysom" class="blurb__photo"> <div class="blurb__footer"> <div class="blurb__byline"> <p>Anders Nysom</p> <p> Freelance Web Developer </p> </div> </div> </div> <div class= "blurb" > <p class="blurb__quote">I’m partially red-green colorblind, and I never thought I could ‘get' color. I just watched [the color palette] lesson and had a bunch of ‘aha’ moments. These last two videos hit a serious home run, and lifted the veil. I never realized how easy colors actually were. THANK YOU!”</p> <img src="/img/testimonials/david-garrison.png" alt="David Garrison" class="blurb__photo"> <div class="blurb__footer"> <div class="blurb__byline"> <p>David Garrison</p> <p> Senior Principal Software Engineer, Harris Corporation </p> </div> </div> </div> <div class="section--dark" id="syllabus"> <section> <h2>Inside the Course</h2> <p>Learn UI Design includes access to <strong>three</strong> things:</p> <div class="triple-feature"> <a href="#video-series" class="triple-feature__feature including-box"> <span class="hex-ordinal">I.</span> <div class="media--reverse"> <img src="img/video-series-icon.svg" alt="Learn UI Design Video Series"> <div> <h4 class="triple-feature__subtitle">The Lessons:</h4> <h3 class="triple-feature__title">Video Series</h3> </div> </div> <p class="primary">36+ hours of video content, along with cheat sheets, top resources, and skill-building homework assignments.</p> </a> <a href="#student-community" class="triple-feature__feature including-box"> <span class="hex-ordinal">II.</span> <div class="media--reverse"> <img src="img/circle-icon.svg" alt="Circle community"> <div> <h4 class="triple-feature__subtitle">The Community:</h4> <h3 class="triple-feature__title">Get Feedback</h3> </div> </div> <p class="primary">Where design mentors give personal feedback on your designs – homework, personal projects, and more.</p> </a> <a href="#live-redesign-vault" class="triple-feature__feature including-box"> <span class="hex-ordinal">III.</span> <div class="media--reverse"> <img src="img/live-redesign-vault-icon.svg" alt="Live Redesign Vault"> <div> <h4 class="triple-feature__subtitle">The Bonus:</h4> <h3 class="triple-feature__title">Redesign Vault</h3> </div> </div> <p class="primary">Dozens of sample redesign videos I’ve done from student submissions. 41+ hours of narrated design content.</p> </a> </div> <p>There is no other course that covers so extensively the skills you need to design beautiful UI, as well as the skills you need to be a <em>good designer</em> (and it’s more than just pretty pictures– see <a href="#unit-7">unit VII</a>).</p> <p>Let’s take a closer look at each of the 3 parts.</p> <div id="video-series"></div> <h3 class="header"> <span class="hex-ordinal header__hex-ordinal">I</span> <span class="header__label">UI design in 54 lessons:</span> The Video Series </h3> <p>Work through it lesson by lesson, or skip around to what you’re most curious about at the moment. I get it — 36+ hours of video is a lot, even watching at 2x speed. But every minute is something <em>I wish I had known</em> when I started designing UI.</p> <div class="unit" id="unit-1"> <h4 class="unit--title"><span>I.</span> Introductory Topics</h4> <ol class="unit--lessons"> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>1.1</span> Begin Here</a> <ul class="unit--lesson-description"> <li>How to use this course</li> <li>What makes for an ideal UI project for learning</li> <li>A few of my all-time favorite intro design resources</li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>1.2</span> Introduction to Figma</a> <ul class="unit--lesson-description"> <li>A primer on Figma functionality</li> <li>How to create and modify text, shapes, backgrounds, and more</li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>1.3</span> Introduction to Sketch</a> <ul class="unit--lesson-description"> <li>A primer on Sketch functionality</li> <li>How to create and modify text, shapes, backgrounds, and more</li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>1.4</span> Setting Up Your Workspace for UI Design</a> <ul class="unit--lesson-description"> <li>Other files you should keep on your computer for use in UI design</li> <li>The most common hotkeys for speeding up UI design</li> <li>Top tutorials for learning Figma (or your UI app of choice)</li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>1.5</span> How to Build Your Design Gut Instinct</a> <ul class="unit--lesson-description"> <li>A 2-step process for building your gut instinct</li> <li>What to focus on so you can improve as quickly as possible</li> <li>How to break down and analyze a "good" design</li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>1.6</span> Starting a Project: Brand & Goals</a> <ul class="unit--lesson-description"> <li>The 80-20 of branding – the most common brands designers should be able to create for</li> <li>The most powerful questions for helping you determine your brand</li> <li>How knowing your brand and goals can help make a good-but-plain design <em>great</em></li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>1.7</span> Finding & Using Design Inspiration</a> <ul class="unit--lesson-description"> <li>The best places to find inspiration</li> <li>My strategies for finding inspiration</li> <li>Setting up systems to keep inspiration close at hand when you need it</li> <li>How to use design inspiration without copying</li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>1.8</span> 3 Ways to Design Above Your Level</a> <ul class="unit--lesson-description"> <li>How to move forward when there's a thousand things you could change</li> <li>A strategy for how to iterate on designs efficiently</li> <li>When to say "enough is enough" when you're designing</li> </ul> </li> </ol> </div> <div class="unit" id="unit-2"> <h4 class="unit--title"><span>II.</span> Fundamentals</h4> <ol class="unit--lessons"> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>2.1</span> Introduction: Analyzing Aesthetics</a> <ul class="unit--lesson-description"> <li>How the "Design Fundamentals" in this course differ from most courses or articles</li> <li>The six techniques you'll be using in every single design you ever do</li> <li>How you know these principles aren't just "opinion"</li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>2.2</span> Alignment</a> <ul class="unit--lesson-description"> <li>The importance of alignment</li> <li>The trick to aligning tables and padded elements</li> <li>Centering asymmetric elements</li> <li>Vertically aligning text</li> <li>How an element's shape changes how you align it</li> <li>The importance of alignment in an era of responsive design</li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>2.3</span> Spacing</a> <ul class="unit--lesson-description"> <li>The 4 most important rules of spacing</li> <li>How to add whitespace in data-heavy apps</li> <li>Unique spacing concerns in mobile apps</li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>2.4</span> Consistency</a> <ul class="unit--lesson-description"> <li>A simple trick for all designing with as much consistency as possible</li> <li>When to break consistency – and how to do it effectively</li> <li>How to draw the line between consistency vs. standing out</li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>2.5</span> Sizing</a> <ul class="unit--lesson-description"> <li>The only 5 text sizes you'll ever need</li> <li>Sizing elements on mobile vs. desktop</li> <li>The 3 heuristics of proper sizing of UI elements</li> </ul> </li> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>2.6</span> Simplicity</a> <ul class="unit--lesson-description"> <li>The 6 strategies of making a messy design look clean and simple</li> <li>Removing clutter from busy data tables</li> <li>How you know when a design is "clean enough"</li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>2.7</span> Lighting & Shadows</a> <ul class="unit--lesson-description"> <li>How to use shadows to mimic real world lighting</li> <li>The 2 major types of lights and what they mean for UI design</li> <li>6 techniques for making shadows in different situations</li> <li>Advanced lighting effects</li> </ul> </li> </ol> </div> <div class="unit" id="unit-3"> <h4 class="unit--title"><span>III.</span> Color</h4> <ol class="unit--lessons"> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>3.1</span> HSB</a> <ul class="unit--lesson-description"> <li>An introduction to Hue, Saturation, and Brightness</li> <li>Developing an intuitive understanding of the HSB system</li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>3.2</span> Luminosity</a> <ul class="unit--lesson-description"> <li>Why luminosity is such an important property in color</li> <li>Practical situations in which luminosity can help you find the right color</li> <li>Luminosity's role in accessibility</li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>3.3</span> Gray: The Most Important Color</a> <ul class="unit--lesson-description"> <li>Why gray is the most important - <em>and common</em> - color in UI design</li> <li>How to make gray match any other color</li> <li>Specific tactics for using gray on various supporting elements</li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>3.4</span> Variations: The Most Important Color Skill</a> <ul class="unit--lesson-description"> <li>How to generate entire interfaces from just 1 or 2 base colors</li> <li>6 techniques for modifying colors in various circumstances</li> <li>When to adjust different colors to <em>appear</em> the same</li> <li>Why "color palettes" is a misnomer in day-to-day UI design</li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>3.5</span> 3 Techniques to Fix Clashing Colors</a> <ul class="unit--lesson-description"> <li>Major reasons colors appear to clash – or blend together – and how to fix them</li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>3.6</span> Picking a Primary UI Color</a> <ul class="unit--lesson-description"> <li>Why you shouldn't just go with blue for your app</li> <li>Ideas for generating "non-obvious" themes (e.g. green for an environmental app)</li> <li>Why app colors are less subjective than you think</li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>3.7</span> Creating a Brand-Based Palette</a> <ul class="unit--lesson-description"> <li>The 2 major types of secondary UI colors</li> <li>3 strategies for finding brand colors that match</li> <li>Live demos of generating secondary UI colors</li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>3.8</span> Dark Interfaces</a> <ul class="unit--lesson-description"> <li>How to use lighting and shadows when the background is dark</li> <li>The best times to use – and avoid – dark background UI</li> <li>How to modify your color scheme for use with dark backgrounds</li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>3.9</span> Gradients</a> <ul class="unit--lesson-description"> <li>The 3 main types of gradients</li> <li>The best way to make brilliant multi-stop gradients</li> <li>Common mistakes with gradients and how to avoid them</li> </ul> </li> </ol> </div> <div class="unit" id="unit-4"> <h4 class="unit--title"><span>IV.</span> Typography</h4> <ol class="unit--lessons"> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>4.1</span> Intro to Typography</a> <ul class="unit--lesson-description"> <li>The 2 fundamental skills of UI typography</li> <li>The paradox of learning typography</li> <li>The most important typographic terminology</li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title unit--lesson-title--figma"><span>4.2</span> The Good Fonts Table</a> <ul class="unit--lesson-description"> <li>Over 100 of the best free or cheap fonts for UI design work</li> <li>A brief analysis of each font, helping you know what brands and apps would be a good fit </li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>4.3</span> Choosing Fonts: Overview</a> <ul class="unit--lesson-description"> <li>The 3 primary constraints of fonts in UI design</li> <li>How many fonts you should use in a project</li> <li>A 3-step process for finding good fonts</li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>4.4</span> Choosing Body Fonts</a> <ul class="unit--lesson-description"> <li>4 hacks for finding great body fonts</li> <li>How letterform shape determines legibility</li> <li>How even a "plain" body font can match your project's brand</li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>4.5</span> Styling Text I: The Basic Rules</a> <ul class="unit--lesson-description"> <li>How line length relates to line height and font size</li> <li>The ideal paragraph spacing, and the danger of baseline grids</li> <li>How text styling differs on mobile vs. desktop</li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>4.6</span> Brand & Letterform</a> <ul class="unit--lesson-description"> <li>How the shape of letterforms relates directly to a font's brand</li> <li>The 5 most common brands you should be evoke with typography</li> <li>Why the "energy" of a font is a useful for UI design</li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>4.7</span> Styling Text II: Interactive Apps</a> <ul class="unit--lesson-description"> <li>The 4 most important principles of styling text in data-heavy web/mobile apps</li> <li>Common typographical design patterns</li> <li>6 strategies for styling "data" (and <em>everything</em> is data)</li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>4.8</span> Pairing Fonts</a> <ul class="unit--lesson-description"> <li>A framework for making sense of the many font-pairing strategies</li> <li>The 4 most common font-pairing mistakes</li> <li>How pairing fonts differs between clean/simple/neutral sites and heavily-branded sites</li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>4.9</span> Styling Text III: Editorial</a> <ul class="unit--lesson-description"> <li>Special text stylings to keep in mind for text-heavy content – like blogs and articles</li> <li>Using condensed fonts</li> <li>Tips for creating drop caps</li> </ul> </li> </ol> </div> <div class="unit" id="unit-5"> <h4 class="unit--title"><span>V.</span> User Interface Components</h4> <ol class="unit--lessons"> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>5.1</span> Component Libraries I: Controls</a> <ul class="unit--lesson-description"> <li>How to match your components to your brand</li> <li>The 4 most important rules of creating a component library</li> <li>A deep dive into button variations</li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>5.2</span> Component Libraries II: States</a> <ul class="unit--lesson-description"> <li>The 7 most common states – and which components they apply to</li> <li>How to prototype hover and focus states in Figma</li> <li>Creating an error message in 8 simple decisions (I promise! 🙂)</li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>5.3</span> Vector Illustration</a> <ul class="unit--lesson-description"> <li>An overview of vector editing functionality, from nodes to networks</li> <li>When to use blend modes in illustration – and which ones</li> <li>A live example illustration you can follow along with</li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>5.4</span> Icon Design</a> <ul class="unit--lesson-description"> <li>The 4 main requirements of good icons</li> <li>The biggest beginner mistakes when designing icons</li> <li>Matching your icon style to your brand</li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>5.5</span> Photography & Imagery</a> <ul class="unit--lesson-description"> <li>5 simple tricks for stunning visuals</li> <li>How to identify top-notch imagery for UI design</li> <li>My favorite sites to find great free photography</li> <li>A practical overview of blend modes</li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>5.6</span> Lists & Tables</a> <ul class="unit--lesson-description"> <li>What elements to show in a list/table – and what to remove</li> <li>Strategies for making your huge data tables smaller</li> <li>Two example redesigns – desktop & mobile</li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>5.7</span> Charts & Data Visualizations</a> <ul class="unit--lesson-description"> <li>The two most common mistakes in making gorgeous data visualizations</li> <li>How to make a line chart look awesome</li> <li>The best workflows for creating – and coloring – a pie chart in Figma</li> </ul> </li> </ol> </div> <div class="unit" id="unit-6"> <h4 class="unit--title"><span>VI.</span> Digital Platforms & Paradigms</h4> <ol class="unit--lessons"> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>6.1</span> Responsive UI Design</a> <ul class="unit--lesson-description"> <li>4 overarching principles to make responsive design easier</li> <li>Plus 4 patterns to use to make any element responsive</li> <li>Dozens of specific strategies for designing responsive UI</li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>6.2</span> Designing Multi-State Screens</a> <ul class="unit--lesson-description"> <li>The 8 states you need to consider designing for every page</li> <li>When to use different controls for waiting/loading states</li> <li>Includes a checklist cheatsheet to reference as you design</li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>6.3</span> Accessibility</a> <ul class="unit--lesson-description"> <li>The most common mistakes in creating accessible interfaces – and how to fix them</li> <li>Why creating an accessible design is easier than you might initially think</li> <li>My favorite plugins and tools for creating accessible designs</li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>6.4</span> Overlaying Text on Images</a> <ul class="unit--lesson-description"> <li>7 techniques for placing text on top of images in your UI</li> <li>Pros and cons for each</li> <li>Thinking about text on images in terms of accessbility and responsive design</li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>6.5</span> Truncating Text</a> <ul class="unit--lesson-description"> <li>9 methods for truncating text</li> <li>Pros and cons for each</li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>6.6</span> Mobile: iOS</a> <ul class="unit--lesson-description"> <li>How to "think like Apple" when designing an interface</li> <li>3 reasons to use the default iOS styles</li> <li>The most common UI paradigm that differ between iPhone and other UIs</li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>6.7</span> Mobile: Android/Material Design</a> <ul class="unit--lesson-description"> <li>Key differences between Android and iOS design</li> <li>The most common UI controls in Android apps</li> <li>When to use – and not use – a floating action button</li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>6.8</span> Grids</a> <ul class="unit--lesson-description"> <li>When grids shine; when they fail</li> <li>Thinking responsive when designing layouts</li> <li>The major reason to break a grid</li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>6.9</span> Autolayout</a> <ul class="unit--lesson-description"> <li>A deep dive into Autolayout functionality</li> <li>An intuitive explanation of Autolayout sizing properties</li> </ul> </li> </ol> </div> <div class="unit" id="unit-7"> <h4 class="unit--title"><span>VII.</span> Communicating Design</h4> <ol class="unit--lessons"> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>7.1</span> Creating a Design Portfolio</a> <ul class="unit--lesson-description"> <li>How to get portfolio projects when you don't have paying clients yet</li> <li>Best practices and examples of great portfolios around the web</li> <li>Tips for telling a good story with your project writeups</li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>7.2</span> Interviewing for Design Jobs</a> <ul class="unit--lesson-description"> <li>The 5 most common types of interviews – and how to succeed at each</li> <li>How to avoid common design interview pitfalls and red flags</li> <li>How your past work deck differs from your portfolio</li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>7.3</span> Finding Clients</a> <ul class="unit--lesson-description"> <li>The best methods for a new freelancer to find clients</li> <li>Best practices for turning <em>one</em> job into <em>many</em></li> <li>The <em>worst</em> places to find new clients</li> </ul> </li> <li class="unit--lesson" id="presenting"> <a href="#" class="unit--lesson-title"><span>7.4</span> Presenting Your Designs</a> <ul class="unit--lesson-description"> <li>The most common mistake when presenting a design</li> <li>How to get the best possible feedback (and not have a design go <a href="http://theoatmeal.com/comics/design_hell" target="_blank">straight to hell</a>) </li> <li>A sample presentation with example questions that I answer</li> </ul> </li> <li class="unit--lesson"> <a href="#" class="unit--lesson-title"><span>7.5</span> Click-Through Prototyping</a> <ul class="unit--lesson-description"> <li>How to use Figma's prototyping functionality</li> <li>The 4 main goals of a prototype</li> <li>Workarounds for one of the biggest drawbacks of click-through prototypes</li> </ul> </li> <li class="unit--lesson" id="presenting"> <a href="#" class="unit--lesson-title"><span>7.6</span> Developer Handoff</a> <ul class="unit--lesson-description"> <li>The most important things you can do for a developer when handing off a file</li> <li>How a developer looks at your design file</li> <li>A checklist of things to cover with your developer</li> </ul> </li> </ol> </div> <div id="student-community"></div> <h3 class="header"> <span class="hex-ordinal header__hex-ordinal">II</span> <span class="header__label">The Community:</span> Feedback & Mentorship </h3> <p>Learning design is a tough thing to do alone. Wouldn’t it be nice if you had someone to ask questions, get feedback, and bounce ideas off of?</p> <p>With Learn UI Design, you’ll get full access to a special community forum where you can do all of that:</p> <ul> <li>Submit (and receive feedback) on every single homework</li> <li>Get design reviews on your own personal projects</li> <li>Ask questions from the community mentors</li> <li>Talk shop with other designers and folks in tech</li> </ul> <h4 class="slub mt64" id="mentors">The community mentors</h4> <ul class="mentors"> <li class="mentor"> <div class="mentor__img"> <img src="img/erik.png" class="mw100p"> <img src="img/thats-me.svg" class="thats-me"> </div> <div class="media__text"> <h5 class="mentor__name">Erik Kennedy</h5> <p class="mentor__position">Founder, Learn UI Design</p> <p class="mentor__bio">Humble brag, but relevant: I’ve probably seen more beginner UI designs than anyone on earth 🙈. 10,000+ submissions later, I’m still in the student community, answering questions, giving feedback, and working to improve the course.</p> </div> </li> <li class="mentor"> <img src="img/leah-huyghe.png" class="mentor__img"> <div class="media__text"> <h5 class="mentor__name">Leah H&#8203uyghe</h5> <p class="mentor__position">Lead Product Designer, Meta</p> <p class="mentor__bio">L&#8203eah took Learn UI Design in late 2018 and was hired by Meta a few months later. Now she’s back, this time as a Community Mentor, doling out wisdom on UI, UX, process, and career.</p> </div> </li> <li class="mentor"> <img src="img/shane-doyle.png" class="mentor__img"> <div class="media__text"> <h5 class="mentor__name">Shane Doyle</h5> <p class="mentor__position">Lead Designer, Threefold Systems</p> <p class="mentor__bio">Coming in hot from County Wexford, Ireland, Shane took Learn UI Design in 2017, and used the lessons from it to get hired as a designer – and promoted to lead – within one year. Look out for Shane’s hard-hitting feedback – delivered in a pleasant Irish lilt.</p> </div> </li> <li class="mentor"> <img src="img/jenny-yakovenko.png" class="mentor__img"> <div class="media__text"> <h5 class="mentor__name">Jenny Yakovenko</h5> <p class="mentor__position">Senior Designer, Ob’vious</p> <p class="mentor__bio">As a self-taught designer (coming from the world of cartography 🗺), Jenny quickly realized there’s a large gap between useless theory and practical design advice. Learn UI Design resonated with her when she took it in 2019, and after getting promoted shortly thereafter, she now returns as a student mentor.</p> </div> </li> <li class="mentor"> <img src="img/julia-scheffer.png" class="mentor__img"> <div class="media__text"> <h5 class="mentor__name">Julia Scheffer</h5> <p class="mentor__position">UX/UI Designer, Bleech</p> <p class="mentor__bio">Coming from a product management background, Julia blazed through Learn UI Design and Learn UX Design in a few months early in 2022. She got hired shortly thereafter, and now returns to give feedback on UX, portfolios, career, and more.</p> </div> </li> </ul> <div id="live-redesign-vault"></div> <h3 class="header"> <span class="hex-ordinal header__hex-ordinal">III</span> <span class="header__label">The Bonus:</span> Live Redesign Vault </h3> <p>Completely separate from the main lessons of the course, the Live Redesign Vault is 41+ hours of video recordings of me, Erik, redesigning student submissions.</p> <p>The events are live – and all students are invited. But the vault is where they’re cataloged and tagged by color, fonts, overall brand, and platform – so you can reference them for inspiration and best practices. </p> <p>As with the video lessons, no rush. You have lifetime access.</p> <figure class="figure--centered"> <img src="img/live-redesign-vault-screenshot.png" alt="Live Redesign Vault screenshot"> <div class="pointer pointer--left" style="--x: 2%;--y: 22%;"> <a href="#" class="pointer__circle"></a> <span class="pointer__line"></span> <p class="pointer__caption">Choose from 38+ redesigns</p> </div> <div class="pointer pointer--left" style="--x: 2%;--y: 74%;"> <a href="#" class="pointer__circle"></a> <span class="pointer__line"></span> <p class="pointer__caption">Cataloged by colors, fonts, and brand used</p> </div> <div class="pointer" style="--x: 88%;--y: 36%;"> <a href="#" class="pointer__circle"></a> <span class="pointer__line"></span> <p class="pointer__caption">Fully-narrated rationale for design decisions</p> </div> <div class="pointer" style="--x: 92%;--y: 95%;"> <a href="#" class="pointer__circle"></a> <span class="pointer__line"></span> <p class="pointer__caption">Easily see the before/after and more</p> </div> </figure> </section> </div> <div class="alt-bg"> <div class="summary summary--raised-2 body-text"> <p>When it comes to learning how to create beautiful designs, this is the most comprehensive course on earth: </p> <ul> <li><strong>Lifetime access</strong> to 54 video lessons, complete with cheatsheets, skill-building homework assignments</li> <li>A <strong>supportive community</strong> of beginning designers, mentored by top alum</li> <li>A vault containing dozens of past redesigns of student submission.</li> </ul> <p> <a href="#enroll-now" class="btn btn--orange btn--cta btn--center">Enroll Now</a> </p> </div> <section> <p>I’ll be the first to admit this course is not for everyone. And while there is a 30-day 100% money-back guarantee, I want to save you the hassle of signing up, unless you’re in a very specific demographic:</p> </section> <section> <h2>Learn UI Design is <strong>not</strong> right for you if...</h2> <ul class="ul-x"> <li>You just want to finish a single design – not learn skills to serve you for years</li> <li>You believe you can become a better designer by passively watching videos (newsflash: you will have to <em>do</em> the homework assignments if you want to <em>improve</em>) </li> <li>You’re not a self-motivated learner (this is an <em>online</em> course, after all. I'm not handing out grades)</li> </ul> </section> <section> <h2>Learn UI Design is <strong>right</strong> for you if...</h2> <ul class="ul-check"> <li>You’re eager to learn and practice UI design</li> <li>You've tried designing something before – and it didn't come out so great</li> <li>You know learning UI design will <strong>add value to your career</strong> (thousands of dollars or more)</li> <li>You’re <strong>self-motivated</strong> when it comes to learning – after all, no one’s standing over your shoulder telling you to do your homework</li> <li>You’ve got some <strong>interest in tech</strong> (the more you enjoy geeking out about software, the quicker you'll learn)</li> </ul> </section> </div>  <div class="section--angled" id="faq"> <svg width="100%" viewBox="0 0 100 100" preserveAspectRatio="none"> <polygon fill="#232323" points="100,0 100,100 0,100"></polygon> </svg> <section> <h2>Frequently Asked Questions</h2> </section> <div class="double-wide"> <div class="call-and-response"> <p class="call-and-response__call-title">Question:</p> <h3 class="call-and-response__call-body">Is this just UI, or does it cover UX as well?”</h3> <div class="arrow-down"></div> <h3 class="call-and-response__response-title">Answer:</h3> <div class="call-and-response__response-body"> <p><em>Short</em>: it’s focused on visual design (UI), but often covers UX-related concepts incidentally.</p> <p><em>Long</em>: UX (“how it works”) and UI (“how it looks”) are sister disciplines. It’s impossible to do one well without the other.</p> <p>Therefore, I reference UX ideas/topics <em>constantly</em> in Learn UI Design, but it’s not <em>about</em> them per se. If you’re more interested in UX (that is: interaction design, usability, user research, etc.), check out <a href="/courses/learn-ux-design.html">Learn UX Design</a> 👍 </p> </div> </div> <div class="call-and-response"> <p class="call-and-response__call-title">Question:</p> <h3 class="call-and-response__call-body">Can I see some of the course for free?”</h3> <div class="arrow-down"></div> <h3 class="call-and-response__response-title">Answer:</h3> <div class="call-and-response__response-body"> <p>No.</p> <p>Well, actually, I <em>have</em> published <a href="https://www.youtube.com/watch?v=JOQJO_V7sew" target="_blank">one lesson from Learn UI Design</a> on YouTube.</p> <p>But apart from that, <em>no</em>.</p> <p>Why? Because I’ve published <em>so much stuff</em> for free already — <a href="blog/">a design blog</a>, <a href="newsletter.html">email tutorials</a>, <a href="https://www.youtube.com/channel/UCakPr8lc7Zcowd8Cp2Uy_Eg" target="_blank">a YouTube channel</a>, <a href="https://twitter.com/erikdkennedy/status/1328771593934290944" target="_blank">tips on twitter</a>, etc.</p> <p>Learn UI Design is not a different <em>type</em> of design advice than what I put out there for free — it’s simply much more organized and much more thorough.</p> <p>So if you find my free content useful, you’ll likewise love the course.</p> </div> </div> <div class="call-and-response"> <p class="call-and-response__call-title">Question:</p> <h3 class="call-and-response__call-body">Am I too much of a beginner for this course?”</h3> <div class="arrow-down"></div> <h3 class="call-and-response__response-title">Answer:</h3> <div class="call-and-response__response-body"> <p>No.</p> <p>Learn UI Design is created to guide you from <em>zero experience</em> to a professional level of UI design skills. Although many students have entered with formal training in visual design, the majority have none.</p> </div> </div> <div class="call-and-response"> <p class="call-and-response__call-title">Question:</p> <h3 class="call-and-response__call-body">Am I too advanced for this course?”</h3> <div class="arrow-down"></div> <h3 class="call-and-response__response-title">Answer:</h3> <div class="call-and-response__response-body"> <p>Likely not.</p> <p>I always tell more advanced prospective students to email me their portfolio, and I’ll let them know if I thought they were too advanced for Learn UI Design.</p> <p>However, even among students I’ve told not to join who did anyways, they only report loving the course and getting a ton out of it.</p> <p>Why? I suspect it’s because the curriculum is entirely original. I went to <em>engineering</em> school, not art school — and my take on design shows it. Read my <a href="blog/color-in-ui-design-a-practical-framework.html">color framework</a> or my <a href="blog/guide-pairing-fonts.html">step-by-step algorithm for pairing fonts</a>. If this is <em>useful stuff</em> you have not encountered in your own years of experience, you’ll feel similarly about the rest of the course. </p> <p>Oh — and if you don’t, there’s always a refund policy (see next question).</p> </div> </div> <div class="call-and-response"> <p class="call-and-response__call-title">Question:</p> <h3 class="call-and-response__call-body">Is there a money-back guarantee?”</h3> <div class="arrow-down"></div> <h3 class="call-and-response__response-title">Answer:</h3> <div class="call-and-response__response-body"> <p>Yes – there's a 30-day 100% money-back guarantee.</p> <p> <img src="img/wax-seal.webp" onerror="this.onerror=null; this.src='img/wax-seal.png'" alt="30-day 100% Money-Back Guarantee" class="guarantee-seal" width="279px"> </p> <p>Try Learn UI Design for 30 days. If you like it, great – you've got <strong>lifetime access</strong> to the 54 lessons, homework assignments, and resources (including future updates/additions). And if you don't like it? Just email and ask for a refund within 30 days – no conditions, no questions asked.</p> </div> </div> <div class="call-and-response" id="faq-sketch"> <p class="call-and-response__call-title">Question:</p> <h3 class="call-and-response__call-body">What app do you use?”</h3> <div class="arrow-down"></div> <h3 class="call-and-response__response-title">Answer:</h3> <div class="call-and-response__response-body"> <p>I use <a href="https://figma.com" target="_blank">Figma</a>.</p> <p>However, you can use any design app you'd like. Sketch is the next most popular. However, since they all have such similar interfaces, functionality, and even shortcut keys, it matters less <em>which one</em> you pick and more that you simply have a good reason for picking one. Students have successfully completed the course in these 3 apps and others.</p> <p>Please note: Learn UI Design is not a course <em>about</em> Figma. It’s a course on the underlying, unchanging principles of visual design.</p> <p>While I <em>happen</em> to cover Figma functionality — from the basics, all the way through prototyping, animations, interactive variants, and more — that is only incidental to teaching you how to do great design work.</p> </div> </div> <div class="call-and-response"> <p class="call-and-response__call-title">Question:</p> <h3 class="call-and-response__call-body">How can I get my work to pay for Learn UI Design?”</h3> <div class="arrow-down"></div> <h3 class="call-and-response__response-title">Answer:</h3> <div class="call-and-response__response-body"> <p>First of all, smart thinking!</p> <p>Here's a <a href="/for-employers.html" target="_blank">guide for your employer</a> that goes over common questions for businesses enrolling their employees in Learn UI Design, including:</p> <ul> <li>Benefits to the employee</li> <li>Group discounts (they're surprisingly large)</li> <li>Invoices, certificates, and more</li> </ul> </div> </div> <div class="call-and-response"> <p class="call-and-response__call-title">Question:</p> <h3 class="call-and-response__call-body">Are there enterprise discounts?”</h3> <div class="arrow-down"></div> <h3 class="call-and-response__response-title">Answer:</h3> <div class="call-and-response__response-body"> <p>Yes.</p> <p>Groups of 5+ seats get a 30% discount. Groups of 10+ seats get a 40% discount. Groups of 20+ seats get a 50% discount. If you are enrolling 5+ people, please <a href="mailto:erik@learnui.design?subject=Learn UI Design group license">contact me today</a> (even if enrollment is not officially open).</p> </div> </div> <div class="call-and-response"> <p class="call-and-response__call-title">Question:</p> <h3 class="call-and-response__call-body">Do I get immediate access to all videos?”</h3> <div class="arrow-down"></div> <h3 class="call-and-response__response-title">Answer:</h3> <div class="call-and-response__response-body"> <p>Yes.</p> <p>As soon as you sign up, you will get immediate access to the entire video series (including resources, homework assignments, and cheatsheets), as well as an automated invitation to the student community.</p> </div> </div> <div class="call-and-response"> <p class="call-and-response__call-title">Question:</p> <h3 class="call-and-response__call-body">Do I have lifetime access to the course?”</h3> <div class="arrow-down"></div> <h3 class="call-and-response__response-title">Answer:</h3> <div class="call-and-response__response-body"> <p>Yes, all students have lifetime access to the course. This includes all future updates and additions. </p> <p>As long as this course exists, you will be able to watch any video, complete any homework assignment, and see any resource. You can start the course the minute you buy it, or a year later – it's up to you.</p> </div> </div> <div class="call-and-response"> <p class="call-and-response__call-title">Question:</p> <h3 class="call-and-response__call-body">Will Learn UI Design help me get a job?”</h3> <div class="arrow-down"></div> <h3 class="call-and-response__response-title">Answer:</h3> <div class="call-and-response__response-body"> <p>Yes.</p> <p>Not only is it everything I wish I had known when I first started designing, it’s also packed with specific advice taking you from zero to hired:</p> <ul> <li>How to create a design portfolio (even when you don’t have any projects yet)</li> <li>How to find clients</li> <li>How to ace a design interview</li> </ul> <p>If you’re self-motivated enough to watch the videos, build your skills, and create a portfolio, there’s no better way to find a design job.</p> </div> </div> <div class="call-and-response"> <p class="call-and-response__call-title">Question:</p> <h3 class="call-and-response__call-body">How long does the course take?”</h3> <div class="arrow-down"></div> <h3 class="call-and-response__response-title">Answer:</h3> <div class="call-and-response__response-body"> <p>In its entirety, the course can be completed in 2–6 months.</p> <p>Learn UI Design is 54 lessons totalling 36 hours of video (average lesson length: 40 minutes). Most lessons also have a homework assignment and other reference material.</p> <p>This puts Learn UI Design on par with a typical semester-long college course. If you complete 3 lessons per week, it will take 4 months to go through.</p> <p>Note: Learn UI Design is a lifetime resource, and designed as much for tactical skipping around and re-watching as it is for linear viewing.</p> </div> </div> </div> </div> <section class="who-am-i"> <h2>Wait, wait – who are you?</h2> <img src="img/erik-rect.webp" onerror="this.onerror=null; this.src='img/erik-rect.png'" alt="Erik – that's me!" width="310px"> <p>Hey, my name is Erik Kennedy. I’m the creator of Learn UI Design and <a href="courses/learn-ux-design.html" target="_blank">Learn UX Design</a>.</p> <p>I’m <em>also</em> a freelance UX/UI designer based in 🌧️ Seattle, WA.</p> <p>My clients have ranged from Y-Combinator startups to Fortune 100, including folks like the below:</p> <ul class="clients"> <li class="client"><img src="img/clients/soylent.svg" alt="Soylent" width="115px" style="opacity: 0.9"></li> <li class="client"><img src="img/clients/amazon.svg" alt="Amazon" width="110px" style="opacity: 0.7"></li> <li class="client"><img src="img/clients/givewell.svg" alt="GiveWell" width="115px" style="opacity: 0.8"></li> <li class="client"><img src="img/clients/philo.svg" alt="Philo" width="105px" style="opacity: 0.85"></li> </ul> <p>I’ve also spoken in the US and abroad at businesses, meetups, and universities (like UC Berkeley, Yale, and UW). And my design writing has been read by <strong>over a million people</strong>.</p> <p>So my design career has been an amazing ride.</p> <p>But before all that, I was on a different path: <em>engineering school</em>. That’s right… <em>a developer</em> 🤓. When I first tried my hand at design, I felt <em>doomed</em>.</p> <p>It looked awful.</p> <p>Of course, I had my excuses. <em>I didn’t go to art school. I didn’t know crap about aesthetics</em>.</p> <p class="wide-quote">I majored in engineering – it’s almost a badge of pride to build something that looks awful. </p> <p>But the passion for design stuck. And I ended up teaching myself UI design the same way I’ve learned anything: <strong>cold, hard analysis</strong>. </p> <p>To cut it as a designer, I had to come up with tricks & tactics I could apply to whatever app I was working on in the moment. I mixed those strategies with the best of what I could find scattered across a myriad of books and blog posts.</p> <p>And it worked. Here I am.</p> <p>Still kickin’. Still designing.</p> <p>In the interim, I quit a nice, cushy job at Microsoft, made the jump to freelance, and:</p> <ul> <li>Upped my annual pay</li> <li>Worked with who I wanted, when I wanted</li> <li>Enjoyed that #freelancelife <em>unlimited unpaid vacation</em> 😉</li> </ul> <p>On top of that, my wife and I spent a year <strong>literally circling the globe</strong> on a trip we’ll never forget. It was an amazing opportunity, but it was only possible because UI design is a <em>valuable skill</em> that businesses are willing to pay top dollar for.</p> <p>Whatever reason you have for learning UI design — whether it’s <strong>getting a job, freelancing, launching a side project, or just upping your skills</strong> — I think you’ll find Learn UI Design is the very best way to do it.</p> <p>Join thousands of happy students — it’s time to master UI design.</p> </section> <div class= "blurb" > <p class="blurb__quote">Learn UI Design is great! Tons of ACTIONABLE tips and hours of practical advice on all important design topics – positioning, alignment, spacing, typography, colour… What I found to be the best part is when Erik fires up Sketch to show you how to apply the theory on real UI designs. I feel <em>much more confident</em> when approaching a new design project after going through the course!”</p> <img src="/img/testimonials/dražen-lučanin.png" alt="Dražen Lučanin" class="blurb__photo"> <div class="blurb__footer"> <div class="blurb__byline"> <p>Dražen Lučanin</p> <p> Founder, <a href="https://punkrockdev.com/" target="_blank">Punk Rock Dev</a> </p> </div> </div> </div> <div class= "blurb blurb--reverse" > <p class="blurb__quote">I've gone to art school and done a lot of online courses, but this is the first design course that just gets to the meat of what I need to learn to level up. There's no fluff. Every lesson is packed with useful content and exercises.”</p> <img src="/img/testimonials/evonne-okouye.jpg" alt="Evonne Okouye" class="blurb__photo"> <div class="blurb__footer"> <div class="blurb__byline"> <p>Evonne Okouye</p> <p> UX/UI Motion Designer </p> </div> </div> </div> <div class= "blurb" > <p class="blurb__quote">Hey Erik, I’ve got a success story – I landed a dream job in a world-class design agency. Learn UI Design helped make it happen. Thanks again for the valuable course – I return to the videos often.”</p> <img src="/img/testimonials/bill-barham.jpg" alt="Bill Barham" class="blurb__photo"> <div class="blurb__footer"> <div class="blurb__byline"> <p>Bill Barham</p> <p> Product Designer, Meta Agency </p> </div> </div> </div> <div class= "blurb blurb--reverse" > <p class="blurb__quote">Of all the money I’ve spent learning this is hands down the best investment (MUCH more valuable than the bootcamp that cost 10x as much)”</p> <img src="/img/testimonials/shane-williams.jpg" alt="Shane Williams" class="blurb__photo"> <div class="blurb__footer"> <div class="blurb__byline"> <p>Shane Williams</p> <p> UX PM, Lenovo </p> </div> </div> </div> <div class= "blurb" > <p class="blurb__quote">This is one hell of a well-planned course. It's like learning how to fly a plane by actually sitting in the cockpit with the pilot – Erik is constantly designing/redesigning real-world examples right in front of you, explaining why X is good or bad, and how to go about making it even better.”</p> <img src="/img/testimonials/mudassir-ali.jpg" alt="Mudassir Ali" class="blurb__photo"> <div class="blurb__footer"> <div class="blurb__byline"> <p>Mudassir Ali</p> <p> Frontend Developer, Canva </p> </div> </div> </div> <div class= "blurb blurb--reverse" > <p class="blurb__quote">Learn UI Design is the ONLY course I’ve found that provides the reasoning *why* this design choice is better than another… I feel like I owe you a personal thank you for taking the time to provide me with the *why* behind the design decisions… The course is worth every single penny.”</p> <img src="/img/testimonials/laura-strader.jpg" alt="Laura Strader" class="blurb__photo"> <div class="blurb__footer"> <div class="blurb__byline"> <p>Laura Strader</p> <p> Senior UX Designer, Udo </p> </div> </div> </div> <div id="enroll-now" class="open"> <h2 class="introducing__title"><img src="img/title.svg" alt="Learn UI Design"></h2> <h3 class="introducing__subtitle">The Complete Video Course</h3> <div class="skus"> <div class="sku" id="basic-plan"> <div class="sku__header"> <p class="sku__name">Basic Plan</p> <p class="sku__price" id="basic-lump-sum-price">$995</p> <p class="secondary centered mb16">Or <strong>6 monthly installments</strong> of <span id="basic-installment-price">$195</span></p> </div> <p class="sku__feature">54-Lesson, 36-hour Video Course</p> <p class="sku__feature">All resources, cheatsheets, and homework assignments</p> <p class="sku__feature">Lifetime access</p> <p class="sku__feature sku__not-included">Student Community<br /> <span class="secondary">Get feedback from Erik & mentors</span> </p> <p class="sku__feature sku__not-included">Live Redesign Vault<br /> <span class="secondary">41+ hours of redesigning student projects</span> </p> <p class="sku__feature sku__not-included">5 Design Coaching Sessions<br /> <span class="secondary">One-on-one mentoring with me, live co-designing, portfolio review, and more.</span> </p> <div class="sku__footer"> <p class="sku__guarantee centered">30-day money-back guarantee</p> <p class="sku__cta-wrapper"><a href="https://app.learnui.design/purchase?product_id=2151549" class="btn btn--orange btn--center btn--cta btn--full-width p0" id="enroll-basic-lump-sum">Enroll: Basic Plan</a></p> <p class="sku__secondary-payment-option p12"><a href="https://app.learnui.design/purchase?product_id=2151559" id="enroll-basic-installments">Enroll for 6 monthly payments of $195</a></p> </div> </div> <div class="sku" id="full-plan"> <div class="sku__header"> <p class="sku__name">Full Access Plan</p> <p class="sku__price">$1495</p> <p class="secondary centered mb20">Or <strong>6 monthly installments</strong> of $295</p> </div> <p class="sku__feature">54-Lesson, 36-hour Video Course</p> <p class="sku__feature">All resources, cheatsheets, and homework assignments</p> <p class="sku__feature">Lifetime access</p> <a href="#student-community" class="sku__feature"> Student Community<br /> <span class="secondary">Get feedback from Erik & mentors</span> </a> <a href="#live-redesign-vault" class="sku__feature">Live Redesign Vault<br /> <span class="secondary">41+ hours of redesigning student projects</span> </a> <p class="sku__feature sku__not-included">5 Design Coaching Sessions<br /> <span class="secondary">One-on-one mentoring with me, live co-designing, portfolio review, and more.</span> </p> <div class="sku__footer"> <p class="sku__guarantee centered">30-day money-back guarantee</p> <p class="sku__cta-wrapper"><a href="https://app.learnui.design/purchase?product_id=2151563" class="btn btn--orange btn--center btn--cta btn--full-width p0">Enroll: Full Access</a></p> <p class="sku__secondary-payment-option p12"><a href="https://app.learnui.design/purchase?product_id=2151570">Enroll for 6 monthly payments of $295</a></p> </div> </div> <div class="sku" id="coaching-plan"> <div class="sku__header"> <p class="sku__name">1-on-1 Coaching Plan</p> <p class="sku__price">$2495</p> <p class="secondary centered mb16">Or <strong>6 monthly installments</strong> of $495</p> </div> <p class="sku__feature">54-Lesson, 36-hour Video Course</p> <p class="sku__feature">All resources, cheatsheets, and homework assignments</p> <p class="sku__feature">Lifetime access</p> <a href="#student-community" class="sku__feature">Student Community<br /> <span class="secondary">Get feedback from Erik & mentors</span> </a> <a href="#live-redesign-vault" class="sku__feature">Live Redesign Vault<br /> <span class="secondary">41+ hours of redesigning student projects</span> </a> <a href="coaching.html" class="sku__feature">5 Design Coaching Sessions<br /> <span class="secondary">One-on-one mentoring with me, live co-designing, portfolio review, and more.</span> </a> <div class="sku__footer"> <p class="sku__guarantee centered">30-day money-back guarantee</p> <p class="sku__cta-wrapper"><a href="https://app.learnui.design/purchase?product_id=2151582" class="btn btn--orange btn--center btn--cta btn--full-width p0">Enroll: Coaching Plan</a></p> <p class="sku__secondary-payment-option p12"><a href="https://app.learnui.design/purchase?product_id=2151593">Enroll for 6 monthly payments of $495</a></p> </div> </div> </div> <div class="skus"> <div class="sku enroll-now__enterprise"> <div class="sku__header"> <p class="sku__name">Enterprise Plan</p> <p class="sku__price">30-50% off</p> </div> <p class="sku__feature">30% off for 5+ seats</p> <p class="sku__feature">40% off for 10+ seats</p> <p class="sku__feature">50% off for 20+ seats</p> <p class="sku__feature">Transferrable seats</p> <div class="sku__footer pb12"> <p class="sku__cta-wrapper"><a href="for-employers.html" class="btn btn--orange btn--center btn--cta btn--full-width p0 mt12">Enroll 5+ for 30%+ Discount</a></p> </div> </div> </div> <div class="enroll-now__questions"> <p class="mb12">Having difficulty enrolling? <a href="enrollment-help.html">Try this</a>.</p> <p class="">Still have questions? <a href="mailto:erik@learnui.design">Email me</a>.</p> </div> </div> <footer class="mt0"> <p>© 2024 Kennedy Design, Inc · <a href="https://app.learnui.design/p/terms">Terms</a> · <a href="https://app.learnui.design/p/privacy">Privacy</a></p> <p>Made in 🌧 Seattle</p> </footer> <script src=/js/vendor/jquery-3.0.0.min.js></script> <script src=/js/vendor/jquery.cssAnimateAuto.min.js></script> <script src=/js/vendor/isFontAvailable.min.js></script> <script src=/js/vendor/floatl.js></script> <script src=/js/main.js></script> <script src=/js/utm.js></script> <script src=/js/vendor/countdown.min.js></script> <script src='https://cdn.paritydeals.com/banner.js'></script> </body> </html>

CINXE.COM

Learn UI Design: The Complete Online Video Course