Web Design Link Picks
resources from newsletter #0116 #0117 #0118 & #119
Article written on Tuesday, 04 Feb 2020
Link love to the max! In this edition Sara Soueidan closes her SVG filter series. Val Head shows us how we can include animation into our design system. There's also a little test; Solid Vs. Outline Icons: Which Are Faster to Recognize? A handy CSS Selectors Cheatsheet and game to test your knowledge and if you are having problems in combining fonts there's this inspiration tool that can help. Sticky footers and a lot more so buckle up and enjoy this ride.
SVG Filter Effects: Moving Forward
In this last part of the SVG Filter series Sara Soueidan shares a list of useful resources to learn more about SVG Filters. For those who missed the previous ones they are linked in there too.
Solid Vs. Outline Icons: Which Are Faster to Recognize?
When creating a mobile application as a designer we all face this choice. Insightful read and the answer is a little more complicated.
CSS Selectors Cheatsheet
Not sure how CSS selectors actually work? As a designer I prefer visual things. That's what this CSS selectors cheatsheet does. There's also a game to test your knowledge.
Poems to Go
Malarkey's write-ups are always a joy to read. I wish more folks discussed art direction in detail like this. This one's especially interesting since it was done with a small budget (£4200).
Style Your Default Global Links Using the :not CSS Selector
Great video that dives into styling your default global links without affecting your component links styles. Clever!
Content-based Grid Tracks and Embracing Flexibility
Hidde de Vries writes an article on how content-based sizing works in a CSS Grid layout.
Including Animation In Your Design System
Need animation in your design system but aren't sure how? Val Head writes what to include in a set of motion guidelines for your design system.
Responsive Spacing With Viewport and CH Units
Interesting approach that I never crossed my mind.
Position: Stuck; — and a Way to Fix It
Some good tips for dealing with position: sticky and overflow.
Sophisticated Partitioning with CSS Grid
Rob Weychert wrote about how he is using CSS Grid and variable fonts in the design of Tinnitus Tracker, his new live music
8 useful CSS tricks: Parallax images, sticky footers and more
In this article Bret Cameron shares several useful tips and tricks that represent key developments in my own journey learning CSS. Never too old to learn something new.
Font Combinations for Web Designers
This inspiration tool gives you possible font combinations based on the font you choose. It has over 400 Google font combinations, and renders font pairing suggestions in a web page “design mockup”. Nice!
Stacked "Borders"
Eric Meyer's first-ever article for CSS-Tricks, in which he explores a variety of ways to fake the effect of stacking multiple borders atop one other.
How to become a “Designer Who Codes”
You could classify me as a true believer that it's a bonus if you understand/know how to write CSS. The stages Meagan Fisher went through on her path to learning front-end development.
Sketch Favicon Exporter
Wonder how to do Favicons? If you use Sketch here's a template to easily generate all the necessary favicons for today's devices.
