A cool spinner made only with divs, some border tricks, and one CSS animation.

I really enjoyed digging into this pen by Luke Richardville. You wouldn’t think it had much to teach, seeing as it’s only 12 lines of Pug and 32 lines of SCSS.

https://codepen.io/lukerichardville/pen/NWpYdQY

In this post, UXPin looks at using negative space in design and how you can use it to create more engaging websites and apps.

Good web design with tall line-height

100 Colorful vector illustration to design website banners and landing pages, commercial license and SVG FIGMA SKETCH AI files included

If you ever wanted to create triangles using CSS, you probably found code samples on stack-overflow or css-tricks. But how do they really work ? Understanding the process behind creating triangles…

Every element I use for the basic structure of a HTML document, with explanations why.

Usually when I start a new project, I either copy the HTML structure of the last site I built or I head over to HTML5 Boilerplate and copy their boilerplate.

https://html5boilerplate.com/

What does Cache-Control really do? In basic terms? Let’s find out!

When designing a website, the most important thing is to make it as usable and convenient as possible. On a website on which users could possibly get confused, it is best to include help elements. Help elements come in all different shapes and sizes: an entire page, a suggestion box or a quick tip. But they all have one thing in common: besides doing the obvious (i.e. helping the user), help elements provide an extra convenience that brings the website closer to that sought-after usability.

I find working with the grid helpful. The grid helps to maintain consistency across the different layouts and make faster design decisions. Grids give more precise control over alignments and layout on different screen sizes.

Fixed-Width Layout Grid Setup

To set up a fixed-width grid, we use fixed numeric value for gutters and columns. I recommend 74px wide columns, 32px wide gutters and 16px side margins on each side.

Mobile View

For mobile devices, we use a fluid grid where gutters and side margins have fixed numeric values. I recommend 16px wide gutters and 16px wide side margins on each side.
We can design mobile interfaces at 360×640 sized artboard.
Mobile devices have a small screen resolution. If we display the 12 separate columns, gutters, and side margins on such a small resolution, it becomes quite cumbersome to design at scale.

If there's one button you use every time you open Spotify, it’s the play button. Today, we’re updating it significantly for better accessibility.

iPhone design guidelines for UI elements, typography, navigation, design patterns, and more · Downloadable resources · iPhone Sketch template

Choosing good colors for your charts is hard. This article tries to make it easier.

01 Broaden your understanding of colors
02 Don’t dance all over the color wheel
03 Use saturation and lightness to make your hues work
04 Use warm colors & blue
05 When using green, make it a yellow or blue one
06 Avoid pure colors
07 Avoid bright, saturated colors
08 Combine colors with different lightness
09 Make your colors similarly “colorful”
10 Avoid too little contrast to the background
11 Avoid too much contrast to the background
12 Choose a background that’s desaturated enough
13 Copy colors, or understand them

In this modern era of web development, we don’t really need a heavy-handed reset, or even a reset at all, because CSS browser compatibility issues are much less likely than they were in the old IE 6 days. That era was when resets such as normalize.css came about and saved us all heaps of hell. Those days are gone now and we can trust our browsers to behave more, so I think resets like that are probably mostly redundant.

https://github.com/andy-piccalilli/modern-css-reset

Design is problem solving

In a previous essay, I visualized it like this:
By focussing on the thinking part of design, design could move into a broader problem solving space. Hence the statement that design is problem solving. It is. Design solves design problems.

Design is making the world more beautiful

Design is question finding

But design is even more than problem solving and making the world more beautiful.

Most people see design as just the second diamond: problem solving. Most clients approach a designer with a problem definition a.k.a. a design brief. They already know what the problem is and w(previous essay)ant a (team of) designer(s) to solve it for them. If that is actually the right problem, great. Experience tells us that that is not always the case. More often than not, new insights about the problem at hand arise during the solving of the problem. That is why designers often propose to go into the first diamond first to investigate the problem and possibly redefine the problem. This prevents them from designing a brilliant solution for the wrong problem. That can be very expensive. The goal of the first diamond is to make sure we are solving the right problem, find the right question. Most innovations and complex problems benefit hugely from going through the first diamond. In his recent Harvard Business Review article, Art Markman argues that the quality of our problem framing determines the success of your solution.

It's that time of year again – where we consider what the color trends have been for the past couple years, and how those might change going into 2021.

Color scheme for UI design

Complete guide to the free font Libre Franklin. See beautiful examples, recommended pairings, OpenType features, and more.

https://larahogan.me/blog/we-need-to-talk-about-your-q3-roadmap/

The button state communicate its status to the user
Creating correct interactions and styles for your buttons is one of the most important parts of the process. Each state must have clear affordances that distinguish it from other states and the surrounding layout, but should not drastically alter a component or create a lot of visual noise.

Free, high-quality alternatives to: Apercu · Avenir · Circular · DIN · Futura · Gotham · Helvetica · Proxima Nova · Times New Roman

An accessible sortable table is not necessarily the same as a usable sortable table. Outline: Basics Let The User Know This Thing Has Sorted Screen Reader Announcement Sort Arrows Column Background Let The User Know This Thing Sorts SVGs Layout Windows High Contrast Mode Screen Readers Sort Hint aria-describedby…