large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p><a href="https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886">medium bookmark / Raindrop.io</a> |  </p>
<div>
<hr>
<div>
<div>
<p>Every web developer inevitably runs into situations where they need to make visual design decisions, whether they like it or not.</p>
<p>Maybe the company you work for doesn’t have a full-time designer and you need to implement the UI for a new feature on your own. Or maybe you’re hacking on a side-project and you want it to look better than <em>yet-another-Bootstrap-site.</em></p>
<p>It’s easy to throw your hands up and say,<em> “I’ll never be able to make this look good, I’m not an artist!”</em> but it turns out there are a ton of tricks you can use to level up your work that don’t require a background in graphic design.</p>
<p>Here are seven simple ideas you can use to improve your designs today<em>.</em></p>
</div>
</div>
</div>
<div>
<hr>
<div>
<h3>1. Use color and weight to create hierarchy instead of size</h3>
<div>
<p>A common mistake when styling UI text is relying too much on font size to control your hierarchy.</p>
<p><em>“Is this text important? Let’s make it bigger.”</em></p>
<p><em>“Is this text secondary? Let’s make it smaller.”</em></p>
<p>Instead of leaving all of the heavy lifting to font size alone, <strong>try using color or font weight to do the same job</strong>.</p>
<p><em>“Is this text important? </em><strong><em>Let’s make it bolder.</em></strong><em>”</em></p>
<p><em>“Is this text secondary? </em><strong><em>Let’s use a lighter color.</em></strong><em>”</em></p>
<p>Try and stick to two or three colors:</p>
<ul>
<li>A dark (<a href="https://ianstormtaylor.com/design-tip-never-use-black/">but not black</a>) color for primary content <em>(like the headline of an article)</em></li>
<li>A grey for secondary content <em>(like the date an article was published)</em></li>
<li>A lighter grey for ancillary content <em>(maybe the copyright notice in a footer)</em></li>
</ul>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*YgsvBILjjtgtW1vz2L0alA.png" alt="1*YgsvBILjjtgtW1vz2L0alA.png"></div>
<p>Similarly, two font weights is usually enough for UI work:</p>
<ul>
<li>A normal font weight <em>(400 or 500 depending on the font)</em> for most text</li>
<li>A heavier font weight <em>(600 or 700)</em> for text you want to emphasize</li>
</ul>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*-3bCVP1BmdOlpLVhdsf82A.png" alt="1*-3bCVP1BmdOlpLVhdsf82A.png"></div>
<p><strong>Stay away from font weights under 400 for UI work</strong>; they can work for large headings but are too hard to read at smaller sizes. If you’re considering using a lighter weight to de-emphasize some text, use a lighter color or smaller font size instead.</p>
</div>
</div>
</div>
<div>
<hr>
<div>
<div>
<h3>2. Don’t use grey text on colored backgrounds</h3>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*mJNQKesDhIBNahphhHYs6w.png" alt="1*mJNQKesDhIBNahphhHYs6w.png"></div>
<p>Making text a lighter grey is a great way to de-emphasize it on white backgrounds, but it doesn’t look so great on colored backgrounds.</p>
<p>That’s because the effect we’re actually seeing with grey on white is <em>reduced contrast</em>.</p>
<p><strong>Making the text closer to the background color is what actually helps create hierarchy</strong>, not making it light grey.</p>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*_ePvWjK_OfkzlrHkm6BnXA.png" alt="1*_ePvWjK_OfkzlrHkm6BnXA.png"></div>
<p>There are two ways you can reduce contrast when working with colorful backgrounds:</p>
<h4>1. Reduce the opacity of your text</h4>
<p>Use white text and lower the opacity. This lets the background color bleed through a bit, de-emphasizing the text in a way that doesn’t clash with the background.</p>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*R3PXb00mvKlqe7MmLIc9Xw.png" alt="1*R3PXb00mvKlqe7MmLIc9Xw.png"></div>
<h4><strong>2. Hand-pick a color that’s based on the background color</strong></h4>
<p>This works better than reducing the opacity when your background is an image or pattern, or when reducing the opacity makes the text feel too dull or washed out.</p>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*VV3HdleqILozFwMDaXeC1w.png" alt="1*VV3HdleqILozFwMDaXeC1w.png"></div>
<p>Choose a color that’s the same hue as the background, adjusting saturation and lightness until it looks right to you.</p>
</div>
</div>
</div>
<div>
<hr>
<div>
<h3>3. Offset your shadows</h3>
<div>
<p>Instead of using large blur and spread values to make box shadows more noticeable, add a vertical offset.</p>
<p>It looks a lot more natural because it simulates a light source shining down from above like we’re used to seeing in the real world.</p>
<p>This applies to inset shadows like you might use on wells or form inputs too:</p>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*Wfx1lgewcSk2rZVJwnJGJw.png" alt="1*Wfx1lgewcSk2rZVJwnJGJw.png"></div>
<p>If you’re interested in learning more about shadow design, the <a href="https://material.io/guidelines/material-design/elevation-shadows.html">Material Design Guidelines</a> are a fantastic primer.</p>
</div>
</div>
</div>
<div>
<hr>
<div>
<h3>4. Use fewer borders</h3>
<div>
<p>When you need to create separation between two elements, try to resist immediately reaching for a border.</p>
<p>While borders are a great way to distinguish two elements from one another, they aren’t the <em>only</em> way, and using too many of them can make your design feel busy and cluttered.</p>
<p>The next time you find yourself reaching for a border, try one of these ideas instead:</p>
<h4>1. Use a box shadow</h4>
<p>Box shadows do a great job of outlining an element like a border would, but can be more subtle and accomplish the same goal without being as distracting.</p>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*qH-2RAS3rbnql-vpP8flmg.png" alt="1*qH-2RAS3rbnql-vpP8flmg.png"></div>
<h4><strong>2. Use two different background colors</strong></h4>
<p>Giving adjacent elements slightly different background colors is usually all you need to create distinction between them. If you’re already using different background colors in addition to a border, try removing the border; you might not need it.</p>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*MXl8E6iezVfxpL1fPIrHgQ.png" alt="1*MXl8E6iezVfxpL1fPIrHgQ.png"></div>
<h4>3. Add extra spacing</h4>
<p>What better way to create separation between elements than to simply increase the separation? Spacing things further apart is a great way to create distinction between groups of elements without introducing any new UI at all.</p>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*ruf8ZA1merZZZHtel0NGmw.png" alt="1*ruf8ZA1merZZZHtel0NGmw.png"></div>
</div>
</div>
</div>
<div>
<hr>
<div>
<h3>5. Don’t blow up icons that are meant to be small</h3>
<div>
<p>If you’re designing something that could use some large icons <em>(like maybe the “features” section of a landing page)</em>, you might instinctively grab a free icon set like <a href="https://fontawesome.com/">Font Awesome</a> or <a href="http://www.zondicons.com/">Zondicons</a> and bump up the size until they fit your needs.</p>
<p>They’re vector images after all, so the quality isn’t going to suffer if you increase the size right?</p>
<p>While it’s true that vector images won’t degrade in quality when you increase their size, <strong>icons that were drawn at 16–24px are never going to look very professional when you blow them up to 3x or 4x their intended size.</strong> They lack detail, and always feel disproportionately “chunky”.</p>
</div>
<div>
<p>If small icons are all you’ve got, try enclosing them inside another shape and giving the shape a background color:</p>
</div>
<div>
<p>This lets you keep the actual icon closer to its intended size, while still filling the larger space.</p>
<p>If you have the budget, you could also use a premium icon set designed to be used at larger sizes, like <a href="http://www.heroicons.com/">Heroicons</a> or <a href="https://useiconic.com/">Iconic</a>.</p>
</div>
</div>
</div>
<div>
<hr>
<div>
<h3>6. Use accent borders to add color to a bland design</h3>
<div>
<p>If you’re not a graphic designer, how do you add that dash of visual flair to your UI that other designs get from beautiful photography or colorful illustrations?</p>
<p>Well one simple trick that can make a big difference is to add colorful accent borders to parts of your interface that would otherwise feel a bit bland.</p>
<p>For example, along the side of an alert message:</p>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*KNP-vTxNx9LFErut8sJvlQ.png" alt="1*KNP-vTxNx9LFErut8sJvlQ.png"></div>
<p>…or to highlight active navigation items:</p>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*bLVdALS3GeuVO1UOM09ZkA.png" alt="1*bLVdALS3GeuVO1UOM09ZkA.png"></div>
<p>…or even across the top of your entire layout:</p>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*YMrMBgjpbuTs_WqdbhymNg.png" alt="1*YMrMBgjpbuTs_WqdbhymNg.png"></div>
<p>It doesn’t take any graphic design talent to add a colored rectangle to your UI, and it can go a long way towards making your site feel more “designed.”</p>
<p><em>Have a hard time picking colors? Try choosing from a constrained palette like </em><a href="https://dribbble.com/colors"><em>Dribbble’s color search</em></a><em> to avoid feeling overwhelmed by the endless possibilities of a traditional color picker.</em></p>
</div>
</div>
</div>
<div>
<hr>
<div>
<h3>7. Not every button needs a background color</h3>
<div>
<p>When there are multiple actions a user can take on a page, it’s easy to fall into the trap of designing those actions based purely on semantics.</p>
<p>Frameworks like Bootstrap sort of encourage this by giving you a menu of semantic styles to choose from whenever you’re adding a new button:</p>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*2xkDfSjvq7Xyb_ceInrMpw.png" alt="1*2xkDfSjvq7Xyb_ceInrMpw.png"></div>
<p><em>“Is this a positive action? Make the button green.”</em></p>
<p><em>“Does this delete data? Make the button red.”</em></p>
<p>Semantics are an important part of button design, but there’s a more important dimension that’s commonly forgotten: <strong><em>hierarchy.</em></strong></p>
<p>Every action on a page sits somewhere in a pyramid of importance. Most pages only have one true primary action, a couple of less important secondary actions, and a few seldom used tertiary actions.</p>
<p>When designing these actions,<strong> it’s important to communicate their place in the hierarchy.</strong></p>
<ul>
<li><strong>Primary actions should be obvious.</strong> Solid, high contrast background colors work great here.</li>
<li><strong>Secondary actions should be clear but not prominent. </strong>Outline styles or lower contrast background colors are great options.</li>
<li><strong>Tertiary actions should be discoverable but unobtrusive.</strong> Styling these actions like links is usually the best approach.</li>
</ul>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*CiEQ9mpfpfAXp62pTE2fbw.png" alt="1*CiEQ9mpfpfAXp62pTE2fbw.png"></div>
<p><em>“What about destructive actions, shouldn’t they always be red?”</em></p>
<p>Not necessarily! If the destructive action isn’t the <em>primary</em> action on the page, it might be better to give it a secondary or tertiary button treatment.</p>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*pIMOui8TSM_gUX9xNFyBng.png" alt="1*pIMOui8TSM_gUX9xNFyBng.png"></div>
<p>Save the big, red, and bold styling for when that negative action actually <em>is</em> the primary action in the interface, like in a confirmation dialog:</p>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*cuYcwjOO26sKHImHaY6yFA.png" alt="1*cuYcwjOO26sKHImHaY6yFA.png"></div>
</div>
</div>
</div>
<div>
<hr>
<div>
<div>
<p><em>If you enjoyed this post, be sure to visit </em><a href="https://refactoringui.com/"><em>RefactoringUI.com</em></a><em> and subscribe to get notified when we publish something new.</em></p>
</div>
</div>
</div>
<div><a href="https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886">https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886</a></div>


7 Practical Tips for Cheating at Design – Refactoring UI – Medium

7 Practical Tips for Cheating at Design – Refactoring UI – Medium

Top Stories