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…

If you want to make text better stand out against a background image, there’s a little trick: You can use a CSS linear-gradient overlay with a certain opacity on top of the image to improve color contrast.

How to determine the opacity to use for the overlay? The Optimal Overlay Finder helps you find out. You upload an image, enter your text and choose your overlay and text colors, and the tool shows you a preview of what the overlay looks like when applied to your image, as well as the optimal overlay opacity.

https://twitter.com/addyosmani/status/1365735686838493187

• The Main Element
• The Section Element
• The Aside Element
• The Article Element
• The Nav Element
• The Footer Element

HTML5 Doctor has a really handy flowchart to help answer that question:
http://html5doctor.com/downloads/h5d-sectioning-flowchart.png

Instead of using “Disabling” selectors, you should focus on writing “Enabling” selectors.

a:not(:last-child) {
  margin-bottom: 1rem;
}

or

a + a {
  margin-top: 1rem;
}

Learn how to handle text over images in CSS by taking accessibility in mind

Note: The Model, View, Controller pattern, or “MVC”, actually comes in many flavors.

Model—The application.
View—What the consumer (user) sees. Often HTML, JSON, or XML.
Controller—A thin layer connecting the View and the Model.

And that’s it! There’s nothing fancy, but it often requires explanation. The controller, as shown above, should be as thin as possible. The view should only have display logic and the model is ... what, exactly?

2. Tighten Heading Spacing

3. Loosen Non-Word Spacing

4. Use System Fonts for Inputs

Learn what it takes to ensure your buttons or button-styled links have accessible contrast across all states and surfaces, then use the generator to check and adjust your button palette.

How’s it going, compadres? This month’s roundup hand-picked from all across the web includes icons, design assets, illustrations, vector artwork, UI kits, some really cool code snippets, fonts, te

Disney developed 12 Principles of Animation which I find to be so important because of the way they depict realistic movement and emotional engagement.

Feedback

Feedforward

Spatial Awareness

User Focus

Brand Tone of Voice

2 — Text tooltips

https://codepen.io/beforesemicolon/pen/BaKLeRL

6 — Extend the clickable area

The following example simply extends the type circle dot button click area by 2(two) by positioning a pseudo-element on top and centered.

8 — Frosted glass effect

.container {
   background-color: rgba(255, 255, 255, .15);
   backdrop-filter: blur(5px);
}

9 — Image grid with random height (Mansory Layout)

This is the famous Pinterest layout that you can use the old column property to accomplish quite easily.

10 — Math with Calc

Nothing in this world requires no math and the CSS calc function is magical.

I think the folks building Tailwind are talented and nice people. But at a pure technical level, I simply don't like Tailwind. Whoever it was built for, it was not built for me.

• Reason 1: Tailwind promotes ugly-ass HTML.
• Reason 2: @apply is fundamentally incompatible and non-standard (and largely unnecessary).
• Reason 3: Tailwind's focus on design systems and tokens could mostly be replaced by CSS Custom Properties (aka variables)—which IS a standard.
• Reason 4: Tailwind forgets that web components exist.
• Reason 5: Finally, Tailwind encourages div/span-tag soup.

...using <div> and <span> tags everywhere in your markup is an anti-pattern. We live in a world where custom elements (aka <whatever-you-can-dream-of>) are fully supported and enabled by modern browsers.

Instead of serving dozens of icons, all you need is just five icons and one JSON file.

In your HTML, for the browser:

<link rel="icon" href="/favicon.ico"><!-- 32×32 -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple.png"><!-- 180×180 -->
<link rel="manifest" href="/manifest.webmanifest">

And in your web app manifest:

// manifest.webmanifest
{
  "icons": [
    { "src": "/192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

By default, lots of image editing tools save PNGs with 2^24 color depth, just in case.

So in Acorn, my image editor of choice, I’ve been taking special care to crank down the bit depth on PNGs in the export dialog. In many cases, I’ve cut image weight 80% or more by indexing colors to a palette of 256 or fewer values, with no loss of visual fidelity.

That PNG at full-color depth is about 379KB. Restricted to a palette of 32 colors, it’s 61KB. And that’s just at the export time: once I run them through ImageOptim, the optimized sizes are 359KB and 48KB.