Latest from the design community

Ahmad Shadeed · Dec 9, 2022

Inside the mind of a frontend developer: Article layout

A List Apart · by Colin Eagan , Jeffrey MacIntyre · Dec 8, 2022

Personalization Pyramid: A Framework for Designing with User Data

As a UX professional in today’s data-driven landscape, it’s increasingly likely that you’ve been asked to design a personalized digital experience, whether it’s a public website, user portal, or native application. Yet while there continues to be no shortage of marketing hype around personalization platforms, we still.

EightShapes · Nathan Curtis · Nov 26, 2022

Reimagining a Token Taxonomy

Notes from design token projects, from audits to implementation Design token dreams have turned to reality across most design systems. Yet some teams now see a years-old inventory as out of step with how naming design tokens has evolved. Others lack alignment across outputs and continue the struggle with libraries and.

Manuel Matuzovic · Nov 21, 2022

Day 41: custom properties and url()s

Let’s say you want to swap the background image of an element based on a certain condition, like whether it’s pressed, using custom properties. button { --background-image: "/not-pressed.svg"; background: url(var(--background-image)); } button[aria-pressed="true"] { --background-image: "/pressed.svg"; } This looks fin.

Heydon Pickering · Nov 18, 2022

How I Accidentally Killed Several UX Designers

Material Design · Nov 8, 2022

Top Tips for Data Accessibility

Six strategies for making your data visualization accessible, scalable, and helpful

Scott O'Hara · Scott O'Hara · Nov 7, 2022

Responsive accessibility using visibility hidden

Like it or not, even though content can be made to adapt to different viewport sizes and zoom levels by use of CSS media queries, sometimes the end result can be a bit awkward without further adjustments that go beyond visual presentation.

Manuel Matuzovic · Nov 1, 2022

Day 27: the font-variation-settings property

Adjustable features of a variable font are called axes. You can use the font-variations-settings property to change these features by specifying the four letter axis name along with a value. @font-face { font-family: 'Saira'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(/blog/.

Material Design · Oct 24, 2022

Material Design at Android Developer Summit 2022

Design, code, and tools: everything new in Material at this year’s ADS

Material Design · Oct 20, 2022

MDC-Android Stable release 1.7.0

with Material Design 3 shape guidance and improved a11y

Manuel Matuzovic · Oct 20, 2022

Day 19: the placeholder-shown pseudo-class

You can use the :placeholder-shown pseudo-class to select input fields with a placeholder that haven't been filled out yet. input:placeholder-shown { outline: 5px solid blue; } Name E-Mail input:placeholder-shown { outline: 5px solid blue; } Name E-Mail PS: Yeah, I know, that one has been around for quite a while alre.

Material Design · Oct 18, 2022

Introducing the M3 design kit for Figma

Jumpstart your designs with ready-to-use components and styles in Figma

Adam Silver · Oct 17, 2022

Designing a time input

In 2021 I worked on a service that allows teacher training providers to set up interviews with trainees. We needed to find the best way for users to enter a time. But it’s harder than it seems because: - a time is made up of hours, minutes and a period (AM or PM) - there are many different formats for the same time li.

Manuel Matuzovic · Oct 3, 2022

Day 6: the :has() pseudo-class

:has() allows you to check whether a parent element contains specific children. In the following example, each .form-item that contains/has a child with the aria-invalid attribute set to “true” displays text in red color. (currently only in Chrome/Edge 105+ and Safari 15.4+ ) .form-item { --color: #000; color: var(--c.

Material Design · Sep 13, 2022

First Batch of Color Fonts Arrives on Google Fonts

Customize color palettes, add gradients, and more with COLRv1

Lea Verou · Jul 28, 2022

Help design the State of CSS Survey 2022!

Since 2019, the annual State of CSS survey has collected feedback from web developers from across the world to try and take the pulse of the CSS ecosystem, and it’s become a valuable resource not only for CSS developers, but also for browser vendors. This summer, one of my side projects is helping out with survey desi.

Léonie Watson · Léonie Watson · Jul 14, 2022

Perceived affordances and the functionality mismatch

Styling one element to look like another creates a mismatch between the actions people expect to take and the ones they actually can, highlighting the essential problem with this common pattern.

Lea Verou · Jul 14, 2022

What is the best way to mark up an exclusive button group?

A few days ago I asked Twitter a seemingly simple question (I meant aria-pressed , not aria-selected but Twitter doesn’t allow edits…) : https://twitter.com/LeaVerou/status/1545712667515654144 For background, I was implementing a web component for an app I’m working on at work and I was getting into some pretty weird.

Learn UI Design · Erik D. Kennedy · Jul 11, 2022

37 Easy Ways to Spice Up Your UI Designs

Illustrated tips for making your UI and web designs more visually interesting · Backgrounds · Borders & dividers · Shadows · Text · Other techniques

Material Design · Jul 7, 2022

Material Design Components for Android 1.6.1

With color harmony and Material Design 3 refinements