Copy
View this email in your browser
 
The Importance of Luminosity In UI Design

An important component of user interface design is the choice of color palettes and swatches. When rebranding, you want to design your new UI to have that "wow" effect when people look at it, but there is an often overlooked aspect of choosing colors: luminosity.

Whenever the luminosity of two adjacent colors is very similar, those colors often clash. For example:

 

These bright cyan and yellow colors just don't look quite right together. In order to tweak these colors so that they go better together, you can adjust their luminosity. Luminosity is the natural lightness of a color on a screen. In tools like Sketch and Photoshop, you can add a blend mode of luminosity on your colors, (which will temporarily turn them to grayscale) and measure their luminosity. Basically, if their grayscale luminosity is very similar, that means those two colors will clash visually. (Notice in the example above the greys underneath each color are very similar). The solution is to make their luminosities different. Either reduce one or increase the other, depending on your creative liking. In order to do that, you'll have to fiddle with the brightness and saturation settings in your design software. Then, disable the blend mode and the results are a lot easier on the eye:
 

 
And, voila! This design digression was inspired by a lesson from learnui.design, which is this week's .design site spotlight winner. If you'd like to learn more, check out Erik's site.
Sam Torrey
@Porkbun

.DESIGN SITE SPOTLIGHT

As mentioned above, this week's .design Site Spotlight goes to...

learnui.design

learnui.design is filled with courses on how to design beautiful user interfaces for any app or site. Learn UI teaches you tricks that you can apply to your design work right away. Whether you need to dive into typography, color theory, elements, or process, Learn UI can help you learn practical and specific skills that will take your design to the next level. It's a well-designed website as well.
 

Have a .design site you'd like to nominate? Let us know and we might feature it in the next .design digest.

NOMINATE
THE DIGEST
 

dreamhost.design: Sharing Design Principles

The award-winning web-hosting company, Dreamhost, has launched its .design site on dreamhost.design. This site shares how they think about, discuss, and justify their design process. They also have a vast library of icons and components to use. Another great example of a brand-name company using .design to showcase what their design department is working on.
DREAMHOST.DESIGN

Free Shopping Bag Mockups

Thanks to Iggy @ Line25 for sharing these versatile mockups for you to experiment with in your next prototyping design project. There are different variants for you to play with including recycles paper mockups or photorealistic scene sets ups.
PAPER BAG MOCKUPS
 
3 Essential Web Design Trends, June 2019

Check out WebDesignerDepot's take on what's hot right now regarding web design elements. Carrie Cousins details 3 trends that are working well.
3 WEB DESIGN TRENDS

Free Sci-Fi Font, Astron

 Thanks to Mason Mulcahy for providing this fresh Sci-Fi font. For those of you who are as obsessed with Sci-Fi films as we are, this font is for you! Check it out!. 
FREE SCI FI FONT
Copyright © 2019 Porkbun LLC, All rights reserved.


Want to change how you receive these emails?
You can update your preferences or unsubscribe from this list.