{"id":628400,"date":"2023-04-12T09:49:27","date_gmt":"2023-04-12T14:49:27","guid":{"rendered":"https:\/\/news.sellorbuyhomefast.com\/index.php\/2023\/04\/12\/rules-for-developers-to-design-beautiful-uis-without-a-designer\/"},"modified":"2023-04-12T09:49:27","modified_gmt":"2023-04-12T14:49:27","slug":"rules-for-developers-to-design-beautiful-uis-without-a-designer","status":"publish","type":"post","link":"https:\/\/newsycanuse.com\/index.php\/2023\/04\/12\/rules-for-developers-to-design-beautiful-uis-without-a-designer\/","title":{"rendered":"Rules for developers to design beautiful UIs without a designer"},"content":{"rendered":"<div id=\"__next\" data-reactroot>\n<header>\n<div>\n<p>From the creators of <span>Tailwind CSS<\/span><\/p>\n<p>Over <span>20,000<\/span> copies sold<\/p>\n<p><a href=\"https:\/\/www.goodreads.com\/en\/book\/show\/43190966-refactoring-ui\"><svg width=\"124\" height=\"20\" fill=\"none\"><path d=\"M9.292 2.038c.233-.672 1.183-.672 1.416 0l1.472 4.233a.75.75 0 0 0 .693.504l4.48.09c.711.015 1.005.919.438 1.348l-3.57 2.708a.75.75 0 0 0-.266.815l1.298 4.289c.206.68-.563 1.239-1.146.833l-3.679-2.56a.75.75 0 0 0-.856 0l-3.679 2.56c-.583.406-1.352-.152-1.146-.833l1.298-4.29a.75.75 0 0 0-.265-.814L2.209 8.213c-.567-.43-.273-1.333.438-1.347l4.48-.091a.75.75 0 0 0 .693-.504l1.472-4.233ZM35.292 2.038c.233-.672 1.183-.672 1.416 0l1.472 4.233a.75.75 0 0 0 .693.504l4.48.09c.711.015 1.005.919.438 1.348l-3.57 2.708a.75.75 0 0 0-.266.815l1.298 4.289c.206.68-.563 1.239-1.146.833l-3.679-2.56a.75.75 0 0 0-.856 0l-3.679 2.56c-.584.406-1.352-.152-1.146-.833l1.298-4.29a.75.75 0 0 0-.265-.814l-3.571-2.708c-.567-.43-.273-1.333.438-1.347l4.48-.091a.75.75 0 0 0 .693-.504l1.472-4.233ZM61.292 2.038c.233-.672 1.183-.672 1.416 0l1.472 4.233a.75.75 0 0 0 .693.504l4.48.09c.711.015 1.005.919.438 1.348l-3.57 2.708a.75.75 0 0 0-.266.815l1.298 4.289c.206.68-.563 1.239-1.146.833l-3.679-2.56a.75.75 0 0 0-.856 0l-3.679 2.56c-.584.406-1.352-.152-1.146-.833l1.298-4.29a.75.75 0 0 0-.265-.814l-3.571-2.708c-.567-.43-.273-1.333.438-1.347l4.48-.091a.75.75 0 0 0 .693-.504l1.472-4.233ZM87.292 2.038c.233-.672 1.183-.672 1.416 0l1.472 4.233a.75.75 0 0 0 .693.504l4.48.09c.711.015 1.005.919.438 1.348l-3.57 2.708a.75.75 0 0 0-.266.815l1.298 4.289c.206.68-.563 1.239-1.146.833l-3.679-2.56a.75.75 0 0 0-.856 0l-3.679 2.56c-.584.406-1.352-.152-1.146-.833l1.298-4.29a.75.75 0 0 0-.265-.814l-3.571-2.708c-.567-.43-.273-1.333.438-1.347l4.48-.091a.75.75 0 0 0 .693-.504l1.472-4.233Z\" fill=\"#CBD5E1\" \/><path d=\"M113.292 2.038c.233-.672 1.183-.672 1.416 0l1.472 4.233a.75.75 0 0 0 .693.504l4.48.09c.711.015 1.005.919.438 1.348l-3.571 2.708a.751.751 0 0 0-.265.815l1.298 4.289c.206.68-.563 1.239-1.146.833l-3.679-2.56a.749.749 0 0 0-.856 0l-3.679 2.56c-.583.406-1.352-.152-1.146-.833l1.298-4.29a.751.751 0 0 0-.265-.814l-3.571-2.708c-.567-.43-.273-1.333.438-1.347l4.48-.091a.75.75 0 0 0 .693-.504l1.472-4.233Z\" fill=\"#3E4F68\" \/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"m116 5.753-1.291-3.715c-.234-.671-1.183-.671-1.417 0l-1.471 4.233a.75.75 0 0 1-.693.504l-4.481.091c-.711.015-1.004.918-.438 1.348l3.571 2.707a.75.75 0 0 1 .265.815l-1.298 4.29c-.206.68.563 1.238 1.147.832l3.678-2.56a.75.75 0 0 1 .857 0L116 15.392v-9.64Z\" fill=\"#CBD5E1\" \/><\/svg><span><span>4.68<\/span><span> stars<\/span> on Goodreads<\/span><\/a><\/div>\n<div>\n<div>\n<h2>Make your ideas look awesome, without relying on a designer.<\/h2>\n<p>Learn how to design beautiful user interfaces by yourself using specific tactics explained from a developer&#8217;s point-of-view.<\/p>\n<p><a href=\"http:\/\/www.refactoringui.com\/#get-refactoring-ui\">Buy now<\/a><\/p>\n<\/div>\n<ul>\n<li class>\n<figure>\n<blockquote><p>This is the survival kit I wish I had when I was starting out building apps.<\/blockquote><figcaption><img decoding=\"async\" src=\"http:\/\/www.refactoringui.com\/_next\/static\/media\/derrickreimer.e7cfaa82266167a389409f8f52ef02a6.jpg\" alt><\/figcaption><\/figure>\n<\/li>\n<li>\n<figure>\n<blockquote><p>This book is fantastic for engineers learning how to design.<\/blockquote><figcaption><img decoding=\"async\" src=\"http:\/\/www.refactoringui.com\/_next\/static\/media\/maccaw.e2e0208c49e160eb0618ee8ec9789cca.jpg\" alt><\/figcaption><\/figure>\n<\/li>\n<li>\n<figure>\n<blockquote><p>This book Refactoring UI is a no-brainer for anyone in the web industry.<\/blockquote><figcaption><img decoding=\"async\" src=\"http:\/\/www.refactoringui.com\/_next\/static\/media\/mijustin.4693f549d80543014093ebe573944f88.jpg\" alt><\/figcaption><\/figure>\n<\/li>\n<\/ul>\n<\/div>\n<\/header>\n<section>\n<div>\n<h2>\u201cI know this looks terrible, but I have no idea why.\u201d<\/h2>\n<div>\n<p>Hi! I&#8217;m <a href=\"https:\/\/twitter.com\/adamwathan\">Adam Wathan<\/a>, a full stack developer who used to suck at design. I&#8217;ve been friends with <a href=\"https:\/\/twitter.com\/steveschoger\">Steve Schoger<\/a> for years and we&#8217;ve worked on a bunch of side projects together \u2014 him handling the UI design and me taking care of development.<\/p>\n<p>Like a lot of developers, I always wished I could make my ideas look awesome without relying on a designer, but any time I tried to design something myself I would always get frustrated and give up.<\/p>\n<p>I always chalked it up to a left brain\/right brain sort of thing \u2014 I&#8217;m logical and analytical so I&#8217;m good at programming, people like Steve are intuitive and creative so he&#8217;s good at design.<\/p>\n<p>But after working closely with Steve I started picking up little tricks. Tricks that didn&#8217;t require any artistic talent, but made things look better instantly for reasons that made sense to me as a developer.<\/p>\n<\/div>\n<h3>Design with tactics, not talent.<\/h3>\n<div>\n<p>Here&#8217;s a concrete design tactic I bet you see applied every day but haven&#8217;t explicitly noticed.<\/p>\n<p><strong>Use fewer borders.<\/strong><\/p>\n<p>Borders are a great way to distinguish two elements from one another, but using too many of them can make your design feel busy and cluttered.<\/p>\n<p>Instead, try adding a box shadow, using contrasting background colors, or simply adding more space between elements.<\/p>\n<p>It doesn&#8217;t take any talent to make changes like this \u2014 once you know the tactic you just need to notice the problem and apply the solution.<\/p>\n<\/div>\n<\/div>\n<div>\n<div><svg viewBox=\"0 0 32 32\" fill=\"currentColor\"><circle cx=\"16\" cy=\"16\" r=\"16\" \/><circle cx=\"16\" cy=\"16\" r=\"19\" fill=\"none\" stroke=\"currentColor\" opacity=\"0.5\" stroke-width=\"2\" \/><circle cx=\"16\" cy=\"16\" r=\"23\" fill=\"none\" stroke=\"currentColor\" opacity=\"0.1\" stroke-width=\"2\" \/><path d=\"M11 11L21 21M11 21L21 11\" stroke-linecap=\"round\" fill=\"none\" stroke=\"white\" stroke-width=\"2\" \/><\/svg><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.refactoringui.com\/_next\/static\/media\/borders-too-many.c466bcad57dc26352541db40248238be.png\" alt width=\"800\" height=\"774\"><\/p>\n<\/div>\n<div><svg viewBox=\"0 0 32 32\" fill=\"currentColor\"><circle cx=\"16\" cy=\"16\" r=\"16\" \/><circle cx=\"16\" cy=\"16\" r=\"19\" fill=\"none\" stroke=\"currentColor\" opacity=\"0.5\" stroke-width=\"2\" \/><circle cx=\"16\" cy=\"16\" r=\"23\" fill=\"none\" stroke=\"currentColor\" opacity=\"0.1\" stroke-width=\"2\" \/><path d=\"M10.743 16.331a1 1 0 1 0-1.486 1.338l1.486-1.338Zm11.926-4.587a1 1 0 1 0-1.338-1.488l1.338 1.488ZM14.5 22l-.743.669a1 1 0 0 0 1.692-.352L14.5 22Zm.949.317c1.34-4.018 4.11-7.777 7.22-10.573l-1.338-1.488c-3.306 2.973-6.306 7.012-7.78 11.427l1.898.634Zm-6.192-4.648 4.5 5 1.486-1.338-4.5-5-1.486 1.338Z\" fill=\"#fff\" \/><\/svg><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.refactoringui.com\/_next\/static\/media\/borders-just-right.2a3cc8fdd62e633da203d5b4e38ebd3c.png\" alt width=\"800\" height=\"852\"><\/p>\n<\/div>\n<\/div>\n<div>\n<h3>Most design courses are missing the mark.<\/h3>\n<div>\n<p>They focus so much on high level principles like color theory and typography which, while important, never helped me make instant improvements like the actionable, specific tactics I was picking up from Steve.<\/p>\n<p>Working together, we knew we could create something better.<\/p>\n<p>Over the last few years, we&#8217;ve helped thousands of developers get better at design through <a href=\"https:\/\/twitter.com\/i\/moments\/994601867987619840\">quick tips<\/a>, <a href=\"https:\/\/medium.com\/@refactoringui\">in-depth articles<\/a>, and <a href=\"https:\/\/www.youtube.com\/steveschoger\">video tutorials<\/a>.<\/p>\n<p>Refactoring UI takes everything we know about design and bundles it into one comprehensive package, including a book, screencasts, a component gallery, custom designed assets, and more.<\/p>\n<p>It\u2019s exactly what I needed when I was struggling to make my projects look awesome.<\/p>\n<\/div>\n<\/div>\n<\/section>\n<section>\n<div>\n<div>\n<h2>What we\u2019ve put together<\/h2>\n<div>\n<p>It&#8217;s not just a book \u2014 it&#8217;s everything you need to start producing better designs today.<\/p>\n<p>When we first started working on this project, our ambitions were pretty modest \u2014 take all of the <a href=\"https:\/\/twitter.com\/i\/moments\/994601867987619840\">tips and tricks we\u2019ve shared on Twitter<\/a>, bundle them up into one resource, and put it out into the world.<\/p>\n<p>But the more time we put into planning it, the more we realized that we had an opportunity to create something better than that. Something that wasn\u2019t just a book, but <span>more like a complete survival kit for designing for the web<\/span>.<\/p>\n<p>Here\u2019s what we ended up with\u2026<\/p>\n<\/div>\n<h3 id=\"the-book\">The Book<\/h3>\n<div>\n<p>A beautiful PDF containing <strong>50 incredibly visual chapters<\/strong> spread across 200+ painstakingly typeset pages.<\/p>\n<p>This book contains literally everything we know about web design, distilled into short, easy to read chapters.<\/p>\n<p>Every chapter is designed to be as independent as possible, so you can read them in almost any order. And if you want to sit down and read the whole thing at once, you\u2019ll have no trouble getting through it in just a couple of hours.<\/p>\n<p>We hate books that repeat the same ideas over and over just to fill out the page count. This book is written a lot like our <a href=\"https:\/\/medium.com\/refactoring-ui\/7-practical-tips-for-cheating-at-design-40c736799886\">blog posts<\/a> \u2014 every sentence is highlight-worthy.<\/p>\n<\/div>\n<\/div>\n<div>\n<h4>Full table of contents<\/h4>\n<ol>\n<li>\n<h5>Starting from Scratch<\/h5>\n<ol>\n<li><span>Start with a feature, not a layout<\/span><span><span><\/span><\/span><span>7<\/span><\/li>\n<li><span>Detail comes later<\/span><span><span><\/span><\/span><span>10<\/span><\/li>\n<li><span>Don\u2019t design too much<\/span><span><span><\/span><\/span><span>13<\/span><\/li>\n<li><span>Choose a personality<\/span><span><span><\/span><\/span><span>17<\/span><\/li>\n<li><span>Limit your choices<\/span><span><span><\/span><\/span><span>24<\/span><\/li>\n<\/ol>\n<\/li>\n<li>\n<h5>Hierarchy is Everything<\/h5>\n<ol>\n<li><span>Not all elements are equal<\/span><span><span><\/span><\/span><span>30<\/span><\/li>\n<li><span>Size isn\u2019t everything<\/span><span><span><\/span><\/span><span>32<\/span><\/li>\n<li><span>Don&#8217;t use grey text on colored backgrounds<\/span><span><span><\/span><\/span><span>36<\/span><\/li>\n<li><span>De-emphasize to emphasize<\/span><span><span><\/span><\/span><span>39<\/span><\/li>\n<li><span>Labels are a last resort<\/span><span><span><\/span><\/span><span>41<\/span><\/li>\n<li><span>Separate visual hierarchy from document hierarchy<\/span><span><span><\/span><\/span><span>46<\/span><\/li>\n<li><span>Balance weight and contrast<\/span><span><span><\/span><\/span><span>48<\/span><\/li>\n<li><span>Semantics are secondary<\/span><span><span><\/span><\/span><span>52<\/span><\/li>\n<\/ol>\n<\/li>\n<li>\n<h5>Layout and Spacing<\/h5>\n<ol>\n<li><span>Start with too much white space<\/span><span><span><\/span><\/span><span>56<\/span><\/li>\n<li><span>Establish a spacing and sizing system<\/span><span><span><\/span><\/span><span>60<\/span><\/li>\n<li><span>You don\u2019t have to fill the whole screen<\/span><span><span><\/span><\/span><span>65<\/span><\/li>\n<li><span>Grids are overrated<\/span><span><span><\/span><\/span><span>72<\/span><\/li>\n<li><span>Relative sizing doesn\u2019t scale<\/span><span><span><\/span><\/span><span>79<\/span><\/li>\n<li><span>Avoid ambiguous spacing<\/span><span><span><\/span><\/span><span>83<\/span><\/li>\n<\/ol>\n<\/li>\n<li>\n<h5>Designing Text<\/h5>\n<ol>\n<li><span>Establish a type scale<\/span><span><span><\/span><\/span><span>88<\/span><\/li>\n<li><span>Use good fonts<\/span><span><span><\/span><\/span><span>94<\/span><\/li>\n<li><span>Keep your line length in check<\/span><span><span><\/span><\/span><span>99<\/span><\/li>\n<li><span>Baseline, not center<\/span><span><span><\/span><\/span><span>102<\/span><\/li>\n<li><span>Line-height is proportional<\/span><span><span><\/span><\/span><span>105<\/span><\/li>\n<li><span>Not every link needs a color<\/span><span><span><\/span><\/span><span>109<\/span><\/li>\n<li><span>Align with readability in mind<\/span><span><span><\/span><\/span><span>111<\/span><\/li>\n<li><span>Use letter-spacing effectively<\/span><span><span><\/span><\/span><span>115<\/span><\/li>\n<\/ol>\n<\/li>\n<li>\n<h5>Working with Color<\/h5>\n<ol>\n<li><span>Ditch hex for HSL<\/span><span><span><\/span><\/span><span>119<\/span><\/li>\n<li><span>You need more colors than you think<\/span><span><span><\/span><\/span><span>123<\/span><\/li>\n<li><span>Define your shades up front<\/span><span><span><\/span><\/span><span>129<\/span><\/li>\n<li><span>Don\u2019t let lightness kill your saturation<\/span><span><span><\/span><\/span><span>133<\/span><\/li>\n<li><span>Greys don\u2019t have to be grey<\/span><span><span><\/span><\/span><span>139<\/span><\/li>\n<li><span>Accessible doesn\u2019t have to mean ugly<\/span><span><span><\/span><\/span><span>142<\/span><\/li>\n<li><span>Don\u2019t rely on color alone<\/span><span><span><\/span><\/span><span>146<\/span><\/li>\n<\/ol>\n<\/li>\n<li>\n<h5>Creating Depth<\/h5>\n<ol>\n<li><span>Emulate a light source<\/span><span><span><\/span><\/span><span>150<\/span><\/li>\n<li><span>Use shadows to convey elevation<\/span><span><span><\/span><\/span><span>158<\/span><\/li>\n<li><span>Shadows can have two parts<\/span><span><span><\/span><\/span><span>163<\/span><\/li>\n<li><span>Even flat designs can have depth<\/span><span><span><\/span><\/span><span>167<\/span><\/li>\n<li><span>Overlap elements to create layers<\/span><span><span><\/span><\/span><span>170<\/span><\/li>\n<\/ol>\n<\/li>\n<li>\n<h5>Working with Images<\/h5>\n<ol>\n<li><span>Use good photos<\/span><span><span><\/span><\/span><span>174<\/span><\/li>\n<li><span>Text needs consistent contrast<\/span><span><span><\/span><\/span><span>176<\/span><\/li>\n<li><span>Everything has an intended size<\/span><span><span><\/span><\/span><span>181<\/span><\/li>\n<li><span>Beware user-uploaded content<\/span><span><span><\/span><\/span><span>187<\/span><\/li>\n<\/ol>\n<\/li>\n<li>\n<h5>Finishing Touches<\/h5>\n<ol>\n<li><span>Supercharge the defaults<\/span><span><span><\/span><\/span><span>192<\/span><\/li>\n<li><span>Add color with accent borders<\/span><span><span><\/span><\/span><span>195<\/span><\/li>\n<li><span>Decorate your backgrounds<\/span><span><span><\/span><\/span><span>198<\/span><\/li>\n<li><span>Don\u2019t overlook empty states<\/span><span><span><\/span><\/span><span>203<\/span><\/li>\n<li><span>Use fewer borders<\/span><span><span><\/span><\/span><span>206<\/span><\/li>\n<li><span>Think outside the box<\/span><span><span><\/span><\/span><span>210<\/span><\/li>\n<\/ol>\n<\/li>\n<li>\n<h5>Leveling Up<\/h5>\n<ol>\n<li><span>Leveling up<\/span><span><span><\/span><\/span><span>215<\/span><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/div>\n<\/div>\n<div>\n<div>\n<h3 id=\"video-tutorials\">Video tutorials<\/h3>\n<div>\n<p>The book will teach you a ton, but there are some things best learned by watching an expert do it themselves.<\/p>\n<p>We\u2019ve put together three in-depth video tutorials that walk through how to take all of the ideas in the book and apply them to three common UI design scenarios.<\/p>\n<\/div>\n<\/div>\n<div>\n<p>Each video is tightly edited and just the right pace, so there\u2019s no wasted time watching me \u201chmm\u201d and \u201cuhh\u201d my way around the design.<\/p>\n<\/div>\n<\/div>\n<div>\n<div>\n<h3 id=\"the-component-gallery\">The Component Gallery<\/h3>\n<div>\n<p>How many times have you found yourself looking at other apps to get ideas for things like button styles, form layouts, or navigation treatments?<\/p>\n<p>This has always been a huge pain point for us with our own work, so we built the component gallery to solve it.<\/p>\n<p>The component gallery is a huge resource of <strong>20+ component\/layout categories<\/strong>, and <strong>200+ individual component styles<\/strong>.<\/p>\n<\/div>\n<\/div>\n<div>\n<p>It includes medium-fidelity mockups of every idea we could think of, for every component we could think of, including things like:<\/p>\n<ul>\n<li>Button styles<\/li>\n<li>Card layouts<\/li>\n<li>Login page layouts<\/li>\n<li>Table styles<\/li>\n<li>Marketing page sections<\/li>\n<li>Navigation layouts<\/li>\n<\/ul>\n<p>\u2026and much, much more.<\/p>\n<\/div>\n<\/div>\n<div>\n<div>\n<h3 id=\"color-palettes\">Color Palettes<\/h3>\n<div>\n<p>If you\u2019ve ever used an online color palette generator, you know that the five swatches they end up giving you are never enough to build out a real interface.<\/p>\n<p>We set out to solve this by handcrafting <strong>over a dozen comprehensive color palettes<\/strong> that include 10 shades for each included color, as well as an example UI showing how those colors are intended to be used:<\/p>\n<\/div>\n<\/div>\n<div>\n<p>We\u2019ve also put together a huge library of individual color scales that you can use to curate your own palettes, without handpicking every single shade yourself.<\/p>\n<\/div>\n<\/div>\n<div>\n<div>\n<h3 id=\"font-suggestions\">Font Suggestions<\/h3>\n<div>\n<p>Trying to pick the perfect font for a project is a nightmare. There are thousands of fonts to choose from, and trying to make an informed decision without seeing a particular font in the right context takes forever.<\/p>\n<p>We\u2019ve put together a list of over 30 fonts we absolutely love, and broken it down across three categories: UI, headlines, and article copy.<\/p>\n<\/div>\n<\/div>\n<div>\n<p>Each font is shown in an example UI for that category, so you can get a feel for exactly how it\u2019s going to look where you intend to use it, without having to try each font yourself.<\/p>\n<p>If you\u2019ve ever felt uneasy trying to choose a typeface, this is going to save you a ton of time.<\/p>\n<\/div>\n<\/div>\n<\/section>\n<div id=\"get-refactoring-ui\">\n<h2>Get Refactoring UI today.<\/h2>\n<p>Learn how to design beautiful user interfaces by yourself using specific tactics explained from a developer&#8217;s point-of-view.<\/p>\n<\/div>\n<section>\n<h2>Over 20,000 people are already using Refactoring UI to make their ideas look awesome.<\/h2>\n<p>Here\u2019s what some of them are saying\u2026<\/p>\n<div>\n<ul>\n<li>\n<figure>\n<blockquote>\n<p>People ask me all the time where to learn to become a better designer. Well, here it is!<\/p>\n<\/blockquote><figcaption><img decoding=\"async\" src=\"http:\/\/www.refactoringui.com\/_next\/static\/media\/wesbos.a0b5ac4fbf1c77a692bf128d11d2390d.jpg\" alt><\/p>\n<div>\n<p>Wes Bos<\/p>\n<div>\n<p>@<\/p>\n<p>wesbos<\/p>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/twitter.com\/wesbos\/status\/1072502089102880768\"><span>View tweet by Wes Bos<\/span><\/a><\/figcaption><\/figure>\n<\/li>\n<li>\n<figure>\n<blockquote>\n<p>We just bought this at work and I absolutely love it. You guys did a great job. I do a lot of UI work but did it based on &#8220;feel&#8221; but couldn&#8217;t explain why&#8230; your book does exactly that. Great work!<\/p>\n<\/blockquote><figcaption><img decoding=\"async\" src=\"http:\/\/www.refactoringui.com\/_next\/static\/media\/_DanaCottreau.c3099be5f75957319dbbda1a278cefee.jpeg\" alt><\/p>\n<div>\n<p>Dana Cottreau<\/p>\n<div>\n<p>@<\/p>\n<p>_DanaCottreau<\/p>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/twitter.com\/_DanaCottreau\/status\/1191743079423729664\"><span>View tweet by Dana Cottreau<\/span><\/a><\/figcaption><\/figure>\n<\/li>\n<li>\n<figure>\n<blockquote>\n<p>Well I just read Refactoring UI by <a href=\"https:\/\/twitter.com\/adamwathan\">@adamwathan<\/a> and <a href=\"https:\/\/twitter.com\/steveschoger\">@steveschoger<\/a> in one sitting. So it\u2019s safe to say it\u2019s a great book ????<\/p>\n<\/blockquote><figcaption><img decoding=\"async\" src=\"http:\/\/www.refactoringui.com\/_next\/static\/media\/_tashhockey.e04395736917731c4659ba91300bc1ab.jpg\" alt><\/p>\n<div>\n<p>Tash<\/p>\n<div>\n<p>@<\/p>\n<p>_tashhockey<\/p>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/twitter.com\/_tashhockey\/status\/1074750211229147137\"><span>View tweet by Tash<\/span><\/a><\/figcaption><\/figure>\n<\/li>\n<li>\n<figure>\n<blockquote>\n<p>I can proudly say that this is the best purchase I have made in a long time. Maybe ever! I love how visual it is &#8212; forcing my wife to read it next! ????<\/p>\n<\/blockquote><figcaption><img decoding=\"async\" src=\"http:\/\/www.refactoringui.com\/_next\/static\/media\/chrisbreuer1904.7acc91063a6a26ebe4adba4b7b2ab7c5.jpg\" alt><\/p>\n<div>\n<p>Chris Breuer<\/p>\n<div>\n<p>@<\/p>\n<p>chrisbreuer1904<\/p>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/twitter.com\/ChrisBreuer1904\/status\/1073287728530259968\"><span>View tweet by Chris Breuer<\/span><\/a><\/figcaption><\/figure>\n<\/li>\n<li>\n<figure>\n<blockquote>\n<p>Wow. What a read. This book has the most approachable, actionable, and useful design advice that I&#8217;ve ever seen ???????????? <a href=\"https:\/\/twitter.com\/steveschoger\">@steveschoger<\/a> and <a href=\"https:\/\/twitter.com\/adamwathan\">@adamwathan<\/a> deserve a massive round of applause for putting this together<\/p>\n<\/blockquote><figcaption><img decoding=\"async\" src=\"http:\/\/www.refactoringui.com\/_next\/static\/media\/nickjbasile.d0cacfdfb73958928a8a8869e1a69c63.jpg\" alt><\/p>\n<div>\n<p>Nick Basile<\/p>\n<div>\n<p>@<\/p>\n<p>nickjbasile<\/p>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/twitter.com\/nickjbasile\/status\/1072595673600720896\"><span>View tweet by Nick Basile<\/span><\/a><\/figcaption><\/figure>\n<\/li>\n<\/ul>\n<ul>\n<li>\n<figure>\n<blockquote>\n<p>Over the weekend, I read Refactoring UI by <a href=\"https:\/\/twitter.com\/adamwathan\">@adamwathan<\/a> and <a href=\"https:\/\/twitter.com\/steveschoger\">@steveschoger<\/a>. The content is amazing and the writing is clear, concise, and to-the-point. I need to come up with a strategy that ensures that I weave this book into my ongoing development efforts.<\/p>\n<\/blockquote><figcaption><img decoding=\"async\" src=\"http:\/\/www.refactoringui.com\/_next\/static\/media\/BenNadel.7b89ab09c03e5336b41caa375e437f9d.jpeg\" alt><\/p>\n<div>\n<p>Ben Nadel<\/p>\n<div>\n<p>@<\/p>\n<p>BenNadel<\/p>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/twitter.com\/BenNadel\/status\/1074656671035723776\"><span>View tweet by Ben Nadel<\/span><\/a><\/figcaption><\/figure>\n<\/li>\n<li>\n<figure>\n<blockquote>\n<p>I can definitely see why this book is called \u201cRefactoring UI\u201d \u2026 tons of UI smells \/ anti-patterns and how to correct them with great examples for each case. ???? Congrats <a href=\"https:\/\/twitter.com\/adamwathan\">@adamwathan<\/a> and <a href=\"https:\/\/twitter.com\/steveschoger\">@steveschoger<\/a>  on the launch!<\/p>\n<\/blockquote><figcaption><img decoding=\"async\" src=\"http:\/\/www.refactoringui.com\/_next\/static\/media\/taylorotwell.fcc043ca590b0cb7e59a2437debfa0d3.jpg\" alt><\/p>\n<div>\n<p>Taylor Otwell<\/p>\n<div>\n<p>@<\/p>\n<p>taylorotwell<\/p>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/twitter.com\/taylorotwell\/status\/1072489875415416832\"><span>View tweet by Taylor Otwell<\/span><\/a><\/figcaption><\/figure>\n<\/li>\n<li>\n<figure>\n<blockquote>\n<p>Only read the first chapter of <a href=\"https:\/\/twitter.com\/steveschoger\">@steveschoger<\/a> and <a href=\"https:\/\/twitter.com\/adamwathan\">@adamwathan<\/a>\u2019s Refactoring UI book so far and already I\u2019ve had so many \u201cAh &#8211; that makes so much sense!\u201d moments ???? This stuff is genius<\/p>\n<\/blockquote><figcaption><img decoding=\"async\" src=\"http:\/\/www.refactoringui.com\/_next\/static\/media\/JLSorak.c9301308a8a86711acde17f236fd403d.jpg\" alt><\/p>\n<div>\n<p>JL Sorak<\/p>\n<div>\n<p>@<\/p>\n<p>JLSorak<\/p>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/twitter.com\/JLSorak\/status\/1073369022312448005\"><span>View tweet by JL Sorak<\/span><\/a><\/figcaption><\/figure>\n<\/li>\n<li>\n<figure>\n<blockquote>\n<p>Purchased Refactoring UI! The way <a href=\"https:\/\/twitter.com\/adamwathan\">@adamwathan<\/a> &#038; <a href=\"https:\/\/twitter.com\/steveschoger\">@steveschoger<\/a> share concepts and examples is the only way I can understand graphic design on the web. Very thankful they worked so hard to put this together. ????<\/p>\n<\/blockquote><figcaption><img decoding=\"async\" src=\"http:\/\/www.refactoringui.com\/_next\/static\/media\/satinflame.fc0e5536ad9e92d1206f979920fd60ae.jpg\" alt><\/p>\n<div>\n<p>Jeanine Schoessler<\/p>\n<div>\n<p>@<\/p>\n<p>satinflame<\/p>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/twitter.com\/Graphical\/status\/1072591396748619777\"><span>View tweet by Jeanine Schoessler<\/span><\/a><\/figcaption><\/figure>\n<\/li>\n<li>\n<figure>\n<blockquote>\n<p>Talk about a no-brainer purchase! <a href=\"https:\/\/twitter.com\/adamwathan\">@adamwathan<\/a> and <a href=\"https:\/\/twitter.com\/steveschoger\">@steveschoger<\/a> put together an AMAZING product.<\/p>\n<\/blockquote><figcaption><img decoding=\"async\" src=\"http:\/\/www.refactoringui.com\/_next\/static\/media\/faasie.dd657148004db072dd1e8318549e3cc6.jpg\" alt><\/p>\n<div>\n<p>Michael Faas<\/p>\n<div>\n<p>@<\/p>\n<p>faasie<\/p>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/twitter.com\/faasie\/status\/1072589209293217798\"><span>View tweet by Michael Faas<\/span><\/a><\/figcaption><\/figure>\n<\/li>\n<\/ul>\n<ul>\n<li>\n<figure>\n<blockquote>\n<p>Today I was revisiting &#8220;Refactoring UI&#8221;, a visual design book for engineers. Started writing down my highlights&#8230; but then I realized I was trying to save most of the book. At least that&#8217;s when you know it&#8217;s good<\/p>\n<\/blockquote><figcaption><img decoding=\"async\" src=\"http:\/\/www.refactoringui.com\/_next\/static\/media\/nithinaray.fd95bd1aa77d39475006f5e5960824e4.jpeg\" alt><\/p>\n<div>\n<p>nithi<\/p>\n<div>\n<p>@<\/p>\n<p>nithinaray<\/p>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/twitter.com\/nithinaray\/status\/1351339908539944961\"><span>View tweet by nithi<\/span><\/a><\/figcaption><\/figure>\n<\/li>\n<li>\n<figure>\n<blockquote>\n<p>Why didn&#8217;t I ever think of the personality of the site I am designing the apps for? Great stuff &#8211; Thanks <a href=\"https:\/\/twitter.com\/steveschoger\">@steveschoger<\/a> and <a href=\"https:\/\/twitter.com\/adamwathan\">@adamwathan<\/a>!<\/p>\n<\/blockquote><figcaption><img decoding=\"async\" src=\"http:\/\/www.refactoringui.com\/_next\/static\/media\/williamsrabia.0c2b59a92fde3e9c0a0976a115140ea7.jpg\" alt><\/p>\n<div>\n<p>Rabia Williams<\/p>\n<div>\n<p>@<\/p>\n<p>williamsrabia<\/p>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/twitter.com\/williamsrabia\/status\/1075358377201430529\"><span>View tweet by Rabia Williams<\/span><\/a><\/figcaption><\/figure>\n<\/li>\n<li>\n<figure>\n<blockquote>\n<p>???? Just had the pleasure of proofreading <a href=\"https:\/\/twitter.com\/adamwathan\">@adamwathan<\/a> and <a href=\"https:\/\/twitter.com\/steveschoger\">@steveschoger<\/a>&#8216;s new book. I can&#8217;t remember the last time I absorbed that much knowledge in such a short time!<\/p>\n<\/blockquote><figcaption><img decoding=\"async\" src=\"http:\/\/www.refactoringui.com\/_next\/static\/media\/petersuhm.0130a0ef84b69ebb873fcf5465919c55.jpg\" alt><\/p>\n<div>\n<p>Peter Suhm<\/p>\n<div>\n<p>@<\/p>\n<p>petersuhm<\/p>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/twitter.com\/petersuhm\/status\/1072104828401266688\"><span>View tweet by Peter Suhm<\/span><\/a><\/figcaption><\/figure>\n<\/li>\n<li>\n<figure>\n<blockquote>\n<p>Working my way through this at the moment. Every page is pure gold!<\/p>\n<\/blockquote><figcaption><img decoding=\"async\" src=\"http:\/\/www.refactoringui.com\/_next\/static\/media\/mattbrailsford.0191c9c97aae17ad08180654d3ba8e07.jpg\" alt><\/p>\n<div>\n<p>Matt Brailsford<\/p>\n<div>\n<p>@<\/p>\n<p>mattbrailsford<\/p>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/twitter.com\/mattbrailsford\/status\/1073276668985438210\"><span>View tweet by Matt Brailsford<\/span><\/a><\/figcaption><\/figure>\n<\/li>\n<li>\n<figure>\n<blockquote>\n<p>Loving every bit of this! <a href=\"https:\/\/twitter.com\/steveschoger\">@steveschoger<\/a> <a href=\"https:\/\/twitter.com\/adamwathan\">@adamwathan<\/a> im plowing unstoppably through this book. Such great content ???? Thank you! ????????<\/p>\n<\/blockquote><figcaption><img decoding=\"async\" src=\"http:\/\/www.refactoringui.com\/_next\/static\/media\/mathiasarlund.42dd7377a12d45a6c703cda654be10c8.jpg\" alt><\/p>\n<div>\n<p>mathias arlund<\/p>\n<div>\n<p>@<\/p>\n<p>mathiasarlund<\/p>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/twitter.com\/mathiasarlund\/status\/1073327370348716032\"><span>View tweet by mathias arlund<\/span><\/a><\/figcaption><\/figure>\n<\/li>\n<\/ul>\n<\/div>\n<\/section>\n<div>\n<h2>Frequently asked questions<\/h2>\n<dl>\n<div id=\"team-pricing\">\n<dt>Can I get Refactoring UI for my entire team?<\/dt>\n<dd>\n<p>Sure! We offer team discounts on the Complete Package based on the number of team members you&#8217;d like to purchase for:<\/p>\n<ul>\n<li><a href=\"http:\/\/www.refactoringui.com\/checkout\/team-3\"><\/a><\/li>\n<li><a href=\"http:\/\/www.refactoringui.com\/checkout\/team-5\"><\/a><\/li>\n<li><a href=\"http:\/\/www.refactoringui.com\/checkout\/team-10\"><\/a><\/li>\n<li><a href=\"http:\/\/www.refactoringui.com\/checkout\/team-15\"><\/a><\/li>\n<li><a href=\"http:\/\/www.refactoringui.com\/checkout\/team-25\"><\/a><\/li>\n<\/ul>\n<\/dd>\n<\/div>\n<div>\n<dt>Can I get an invoice?<\/dt>\n<dd>\n<p>Totally! After making a purchase we will automatically email you a receipt. That email will include a link to generate a more detailed invoice that can include your company information, should you need that for tax purposes.<\/p>\n<\/dd>\n<\/div>\n<div>\n<dt>What format are the files? Is there any DRM?<\/dt>\n<dd>\n<p>The book, component gallery, color palettes, and font recommendations are PDFs, the screencasts are downloadable mp4 files, and the icons are SVG.<\/p>\n<p>Everything is DRM-free; that crap is annoying.<\/p>\n<\/dd>\n<\/div>\n<div>\n<dt>Can I upgrade to the complete package later?<\/dt>\n<dd>\n<p>Of course! Shoot us an email at <a href=\"http:\/\/www.refactoringui.com\/cdn-cgi\/l\/email-protection#54272124243b2620142631323537203b263d3a33213d7a373b39\"><span data-cfemail=\"b7c4c2c7c7d8c5c3f7c5d2d1d6d4c3d8c5ded9d0c2de99d4d8da\">[email\u00a0protected]<\/span><\/a> and we&#8217;ll sort you out.<\/p>\n<\/dd>\n<\/div>\n<div>\n<dt>Does the component gallery include CSS?<\/dt>\n<dd>\n<p>Short answer is no.<\/p>\n<p>Long answer is that the goal with the component gallery is to provide layout and treatment ideas with just enough fidelity to be useful.<\/p>\n<p>If you need an idea for a pricing page layout, the idea is that you&#8217;d browse the component gallery to find one you like, then combine that with what you learn from the book to create a great-looking design yourself.<\/p>\n<p>There are a million ways you could style these components, and we don&#8217;t want the component gallery to encourage you to make every project look the same.<\/p>\n<\/dd>\n<\/div>\n<div>\n<dt>What&#8217;s the license for the icons?<\/dt>\n<dd>\n<p>You can read a copy of the license <a href=\"https:\/\/gist.github.com\/adamwathan\/cbda1bb6c23e3bf4e31f7a98b2ac0edb\">here<\/a>.<\/p>\n<p>TL;DR: Do pretty much whatever you want with them, including using them in open-source projects. Just don&#8217;t resell them or publish them on npm purely to distribute them for free or anything lame like that.<\/p>\n<\/dd>\n<\/div>\n<div>\n<dt>What if I decide it&#8217;s not for me?<\/dt>\n<dd>\n<p>No problem at all! Email us at <a href=\"http:\/\/www.refactoringui.com\/cdn-cgi\/l\/email-protection#52212722223d2026122037343331263d203b3c35273b7c313d3f\"><span data-cfemail=\"b8cbcdc8c8d7caccf8caddded9dbccd7cad1d6dfcdd196dbd7d5\">[email\u00a0protected]<\/span><\/a> within 60 days and we&#8217;ll refund you in full, no questions asked.<\/p>\n<\/dd>\n<\/div>\n<\/dl>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/www.refactoringui.com\/\" class=\"button purchase\" rel=\"nofollow noopener\" target=\"_blank\">Read More<\/a><br \/>\n Elroy Drews<\/p>\n","protected":false},"excerpt":{"rendered":"<p>From the creators of Tailwind CSSOver 20,000 copies sold4.68 stars on GoodreadsMake your ideas look awesome, without relying on a designer.Learn how to design beautiful user interfaces by yourself using specific tactics explained from a developer&#8217;s point-of-view.Buy nowThis is the survival kit I wish I had when I was starting out building apps.This book is<\/p>\n","protected":false},"author":1,"featured_media":628401,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23360,2849,46],"tags":[],"class_list":{"0":"post-628400","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-developers","8":"category-rules","9":"category-technology"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/newsycanuse.com\/index.php\/wp-json\/wp\/v2\/posts\/628400","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/newsycanuse.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/newsycanuse.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/newsycanuse.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/newsycanuse.com\/index.php\/wp-json\/wp\/v2\/comments?post=628400"}],"version-history":[{"count":0,"href":"https:\/\/newsycanuse.com\/index.php\/wp-json\/wp\/v2\/posts\/628400\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/newsycanuse.com\/index.php\/wp-json\/wp\/v2\/media\/628401"}],"wp:attachment":[{"href":"https:\/\/newsycanuse.com\/index.php\/wp-json\/wp\/v2\/media?parent=628400"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/newsycanuse.com\/index.php\/wp-json\/wp\/v2\/categories?post=628400"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/newsycanuse.com\/index.php\/wp-json\/wp\/v2\/tags?post=628400"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}