I wrote a quick tweet about teaching the basics of accessibility and colors to design students that go quite some attention. It brought up some interesting discussions. So I thought I would share with you all the resources, tips and tools I regularly use to build and check the color accessibility of my products in one place. Enjoy.
I get asked quite often for book recommendations on different design related topics. I finally found a little bit of time to go through my list of ebooks and paper books and picked a few ones. I ordered the list in different categories to help you go through. So here we go: my personal selection of book on UX design, user research, psychology, UI and web design, ethics, creativity, mobile and responsive web design, accessibility, collaboration, strategy, management and more.
👉 Your curated weekly Design and Front-End resources: centering in CSS, evolution of Google’s sign up form, SVG and CSS animation tips, CSS perspective, the story of macOS System Preferences, line breaks with inline CSS, CSS accessible checkboxes, figma wireframing library, designing with reduced motion, designin with Paint, a podcast on the need for UX specialists, a parody of branding, an accessible comic, etc.
👉 Your curated weekly Design and Front-End resources: some paper prototyping resources, information architecture and priority, CSS animations and transition demo, signage typography, responsive beyond media queries, accessibility standards, measuring scales and colors, a fun game, the CSS 100vh iOS bug, a cute rounded font, intrinsic value of a product, the 8pt grid, information architecture and tomatoes, colors and dataviz, winamp skins for nostalgic people etc.
👉 Your curated weekly Design and Front-End resources: accordion icons signifiers, CSS reset visually explained, 19,500+ illustrations to win, web inspiration, 226 free icons, CSS gradient gallery, CSS animations inspiration, designing for performance and connectivity, media query-less responsive components, microcopy tips, beyond mobile first design, accessibility and design systems, etc.
👉 Your curated weekly Design and Front-End resources: an interesting short ebook on interfaces, why design thinking is failing, design system assets, perfect banana bread sandwich with machine learning, some CSS inspiration, CSS grid doesn’t replace a grid framework, free Sketch illustration plugin, PWAs and privacy, grid vs tables and accessibility, random wikipedia pictures, cool 3D illustrations in CSS, a LEGO prosthetic arm, etc.
👉 Your curated weekly Design and Front-End resources: 7 deadly sins of dataviz, some great talks on binary thinking, design thinking being bullshit and inclusive design, showing users they can scroll with CSS, understanding the vocabulary of CSS, digging into the CSS Flex property, a piano built in JS, some online tools, naming layout components, some SVG calligraphy animation, recognizing gaslighting and being set up to fail, etc.
👉 Your curated weekly Design and Front-End resources: accessibility guidelines for designers, my free user journey miro template, user researchers skills, proximity design principle, difference between different CSS, HTML and JS properties, CSS borders with background-image gradients, CSS grid masonry solution, CSS content-visibility and performance, CSS Drop-Shadow filter, Figma for presentations, fun design quizz, CSS explained with comics, media accessibility bookmark for twitter, etc.
👉 Your curated weekly Design and Front-End resources: CSS animations and UX, the UX of LEGO interface panels, some smart interface design patterns checklists, making motion accessible on the web, design fiction, some nice free illustrations by icon8, a set of tiny free icons, 90’s video game style tool to hangout online with people, dark mode with prefers-color-scheme, some really cool SVG and CSS animations, different CSS media queries to detect user preferences, etc.
With CSS and JS progress, implementing animations on websites has never been easier. But how do we make sure that our CSS animations and transitions will be meaningful to our users? That they will not be just some annoying “in-your-face” eye candy? That they will not trigger motion sickness and cause accessibility issues to some?
You will find here a transcript with CSS codepen and video examples and LOT of resources to dig further in specific topics. I also published the PDF version of the slides at the end of the article.