Collective #550

Inspirational Website of the Week: Déplacé Maison
A refreshing design with lots of character and perfect details. Our pick this week.
Check it out
Where to put buttons on forms
Button placement can make or break a form. Find out the best place to put them in this article by Adam Silver.
Read it
Art of Symbols
Emotive Brand's creative exploration on how ancient symbols inform contemporary brand design.
Check it out
The Ultimate WordPress Page Builder
You've never built a WordPress website like this before. Divi is more than just a WordPress theme, it's a completely new website building platform that replaces the standard WordPress post editor with a vastly superior visual editor.
Try it
CopyPalette
Create consistent monochromatic color palettes and export them to Figma or Sketch.
Check it out
wAve
A wonderful wavy letter demo by Adam Kuhn.
Check it out
My Design Process Of The Cover Design For Smashing Magazine Print Issue #1
In this article, Veerle Pieters, sheds some light into her design process of Smashing Magazine's cover.
Read it
Thinking in React Hooks
Amelia Wattenberger's draft for a guide to the fundamental mindset change when switching from React class components to functional components + hooks.
Read it
Generated Photos
100,000 AI-generated faces free to use in any project.
Check it out
Monocle
A wonderful magnifying list experiment by Hakim El Hattab.
Check it out
Keeping it simple with CSS that scales
A written version of Andy Bell's talk he first delivered at "State of the Browser 2019".
Read it
Thoughts on the State of the Web
Michelle Barker reflects on "State of the Browser" conference and shares some thoughts on the current state of the web.
Read it
Using Custom Properties to Wrangle Variations in Keyframe Animations
Read how Sandrina Pereira found a way to account for variations within a keyframe animation using custom properties.
Read it
Dark Mode — Working with Color Systems
Søren Clausen writes how with the introduction of Dark Modes, colors now also need to be put into systems.
Read it
Upside down
A hypnotizing demo made by K-T.
Check it out
Raindrop
A rain effect that realistically interacts with elements on a page. By Neal Agarwal.
Check it out
Nullish coalescing
Learn about the nullish coalescing proposal that adds a new short-circuiting operator meant to handle default values in JavaScript.
Read it
Typing Animation.. with Puns!
A fun typing animation made by Dave Quah.
Check it out
Testing Accessibility on Windows with VirtualBox
The Accessibility DIY Kit for VirtualBox lets you test the accessibility of your website on Windows when working on a Mac.
Read it
Free Font: Krisha
A bold and beautiful display typeface by Daler Mukhiddinov.
Get it
How to Build a Color Customizer App for a 3D Model with Three.js
Learn how to create a complete color customizer app for a 3d model of a chair using Three.js in this in-depth tutorial.
Read it