Design 🎨 heavy edition: guide to responsive design, neurodiversity design system, CSS container and style queries, colors and contrasts and easier dark mode.
Web design
The Guide To Responsive Design In 2023 and Beyond
“Responsive design isn’t just about fixed-width breakpoints and making a website work on mobile, tablet, and desktop.” (from CSS Weekly)
Neurodiversity Design System
“Although oriented for LMS (Learning Management Systems), the Dos and Don’ts on these design principles are worth checking.” (from Web Design Weekly)
Advanced techniques for writing good interfaces
“Some techniques you can use for the next time you’re swirling through endless revisions and need a new idea to get unstuck.” (from Web Design Weekly)
30 practical tips for effective User Interface design
“A list of 30 tips to help you improve your user interface design skills. From layout and color to typography.” (from Web Design Weekly)
Visual design rules you can safely follow every time
“23 visual design rules that are inherently present in any good layout design.” (from Web Design Weekly)
(modern) CSS
CSS tips for better Web Development
“Popular CSS tricks to make your website stand out, including different layout implementations, scroll snapping, image shapes, and animation tricks.” (from Web Design Weekly)
Building a color palette with CSS: 3 methods
“Learn about the basics of color harmony and contrast, the 60-30-10 rule of color distribution, and three techniques to create color palettes with CSS.” (from Web Design Weekly)
CSS Style Queries
“Although still experimental and currently implemented only in Chrome Canary, style queries let us query a CSS property or CSS variable for a container.” (from Web Design Weekly)
Simplified Dark Mode With Style Queries
“How style queries can help you simplify dark mode styles.” tl;dr; Utilizin container queries and prefers-color-scheme media query (from CSS Weekly)
Colors
11 tips for creating the perfect dark website design
“The title says it all. Halo Lab points out eleven principles of dark mode UI.” (from Web Design Weekly)
Creating A High-Contrast Design System With CSS Custom Properties
“Deep dive into how you can create a high-contrast system while maintaining a balance between designing something accessible and respecting the look and feel of a brand.” tl;dr; CSS custom properties and prefers-contrast media query (from CSS Weekly)
Building your color palette
“This article breaks a good color palette down into three categories, instead of using the traditional five hex codes given by a color palette generator.” (from Web Design Weekly)
101 brilliant color combinations
“Adobe’s article exploring the 101 color combination examples to get inspiration for good color combos. It also includes a bit about color theory and the color wheel, and how to design your very own color schemes.”(from Web Design Weekly)
Poline
“Poline is an enigmatic color palette generator.” (from Web Design Weekly)
Leave a Reply