The five best design links, every weekday

Friday10/30

1

mattperry.is

Layout projection: A method for animating browser layouts at 60fps

Browser layouts are difficult to animate. Layout projection provides a method of animating layouts at 60fps with no visual distortion.

2

codepen.io

The Caretaker

A pure CSS Horror / Puzzle game

3

blog.animaapp.com

Introducing the 1st design-to-development platform

After months of hard work, we’re proud to introduce Anima 4.0!

4

css-tricks.com

The CSS Custom Property Toggle Trick

The entire world of branching conditional logic for custom CSS properties only exists because of a tiny footnote that has gone unnoticed.

5

figma.com

Bridging design and code with Variants

Today we’re launching Variants and updates to the Inspect panel to power up your design system

The Sidebar Newsletter

5 Design Links in Your Inbox Every Weekday

Thursday10/29

1

tympanus.net

Awesome Demos Roundup #18

A big selection of the best web experiments made in the past weeks.

2

medium.com

Informative & Decisional

Product designers and engineers frequently ask our team to add features to our messaging components.

3

fastcompany.com

What is the best political branding of all time? Experts weigh in

Ben Ostrower and Susan Merriam debate the branding of various political campaigns—from Eisenhower to Obama.

4

css-tricks.com

Comparing Static Site Generator Build Times

There are so many static site generators (SSGs). It’s overwhelming trying to decide where to start.

5

ui.coach

UI Coach

A UI Design challenge generator to become a better UI designer

Wednesday10/28

1

webflow.com

Designing a COVID-19 vaccine visualization and tracker

An oral history about the team that built a site concisely explaining and tracking the development of COVID-19 vaccines.

2

figma.com

Behind the feature: the hidden challenges of autosave

The technical challenges of updating our autosave system.

3

uxdesign.cc

This is NOT collaboration

Yes, this is going to be one of those controversial articles, and if you’re a Figma superfan, you likely want to start throwing rocks at me right now.

4

sketch.com

Part of your world: Why we’re proud to build a truly native Mac app

From personalization and performance, to familiarity and flexibility — there are plenty of reasons to love native apps

5

tyrus.design

Tyrus

Tyrus is a free digital toolkit from Airbnb Design that helps freelance illustrators optimize their business.

Tuesday10/27

1

p01.org

MONOSPACE

MONOSPACE: Flip dots with feelings, a JavaScript demo in 1021 bytes, winner of the 1024 bytes demo competition at Assembly 2020.

2

secretgeek.github.io

This page is a truly naked, brutalist html quine.

One of my favorite things is to misuse technology in creative ways. Breaking the rules without breaking the rules.

3

css-tricks.com

WordPress and Jamstack

I recently moderated a panel at Netlify’s virtual Jamstack Conf that included Netlify CEO Matt Biilman and Automattic founder Matt Mullenweg.

4

medium.muz.li

Responsive Grid Design: Ultimate Guide

Responsive grid helps to maintain consistency & make faster design decisions.

5

phosphoricons.com

Phosphor Icons

A flexible icon family for interfaces, diagrams, presentations — whatever, really.

Monday10/26

1

getstream.io

7 UX Best Practices for Livestream ChatSponsored

Live streaming your next event? Follow Stream's UX best practices for chat and engagement so you can scale your app with lightning speed.

2

web.dev

min(), max(), and clamp(): three logical CSS functions to use today

Min, max, and clamp provide some powerful CSS capabilities that enable more responsive styling with fewer liens of code.

3

marcandrew.me

7 (more) tips to help you quickly improve your UIs

In this follow-up article I’ve focused primarily on Typography.

4

nngroup.com

Spatial Memory: Why It Matters for UX Design

Users develop imprecise memory of objects and content in a UI, but still need additional signals to help them find a specific item.

5

fastcompany.com

Adobe’s latest AI experiments will melt your brain

Every year, Adobe pulls up the curtain on some of its most futuristic projects. Here’s the best of 2020.

Friday10/23

1

fastcompany.com

The 25 most spectacular branding fails of the last 25 years

From McDonald’s hamburger for adults to ‘The Dead Kid’ Super Bowl ad, these are the biggest ‘what were they thinking?’ moments since 1995.

2

nngroup.com

State-Switch Controls: The Infamous Case of the “Mute” Button

On–off controls that switch between two different system states need to clearly communicate to users both states.

3

formito.com

Build your SVG favicon in seconds

Build a letter-based favicon like most big tech companies, or be playful and create an emoji-based favicon.

4

frontend.horse

Thinking Outside the Box with CSS Grid

When you think of CSS Grid, you generally think of a boxy layout, right?

5

growth.design

The Psychology of Misinformation During the 2020 U.S. Elections

This case study shows you the psychological principles that make people spread misinformation on social media (and how that could be improved).

Thursday10/22

1

vimeo.com

The Map

A short documentary about a revolutionary redesign of New York City's iconic subway map.

2

thedesignest.net

Photoshop Introduces 5 Long-Awaited AI Features

The future starts today! Adobe releases the new version of Photoshop for the desktop and iPad enriched with five AI features.

3

joshwcomeau.com

Hands-Free Coding

Earlier this year, I developed Cubital Tunnel Syndrome, a repetitive-strain injury, in both of my elbows.

4

arun.is

Icon designer Louie Mantia's take on traditional Japanese playing cards

I got a chance to ask accomplished icon designer Louie Mantia about his newest project, a set of Hanafuda playing cards.

5

kottke.org

“Reverse Toonification” of Pixar Characters

Using an AI-based framework called Pixel2Style2Pixel, Nathan Shipley made some more photorealistic faces for Pixar characters.

Browse Archives