Learn the principles behind the interface
From design to website
Build visually in Webflow, just like you design. Fine-tune typography, spacing, layout, and interactions until everything looks right, then publish your site live.
UX Movement · anthony · Aug 28, 2024
A sidebar navigation with a few items is simple to design. All you have to do is display them in a list with relevant icons. But what do you do when you have multiple large-scale item groups to display? The typical approach uses disclosure arrows to collapse each item group with an accordion functionality. However, [….
Scott O'Hara · Scott O'Hara · Aug 22, 2024
The topic of how to make an accessible spoiler component, or ‘should there be a spoiler element?’ has recently (re)-caught my attention. (I wrote most of this back in February and then forgot about it… as I seem to do these days. But then people necro’d a GitHub issue on the topic, so here we go again)
Manuel Matuzovic · Aug 21, 2024
CSS animations can be composited in three ways: replace , add , and accumulate . The animation-composition property allows you to switch between them. div { animation: changeColor 1s forwards; animation-composition: add; } Let's say you have two color HEX values, #112233 and #224466 . Here's what happens with each com.
CSS Wizardry · Aug 19, 2024
Quantifying the importance of caching just got a lot easier
tempertemper · Martin Underhill · Jul 28, 2024
When getting to grips with accessibility, there’s often a tension between what users ask for and doing things in an accessible way.
Lyft Design · Namika Varma-Chang · Jul 23, 2024
When a new component is deployed we announce it on the Lyft Product Language homepage. I’m new to the design system’s team at Lyft. After 6 years of working as a feature designer, I decided to make the jump to design systems and I couldn’t have picked a better design system to learn from. At my last gig, I built out a.
Manuel Matuzovic · Jul 19, 2024
The light-dark() color function allows you to define two values for a color property. The property uses the first value when the color scheme is light or unknown and the second when it's dark. For the function to work, you must define the available color schemes for the element. Apply it to the html element if you wan.
Lea Verou · Jul 3, 2024
A few days ago, I gave a very well received talk about API design at dotJS titled “API Design is UI Design” 1 . One of the points I made was that good UIs (and thus, good APIs) have a smooth UI complexity to Use case complexity curve. This means that incremental user effort results in incremental value ; at no point g.
Slack Design · andyacevedo · Jun 26, 2024
In software design we have all heard the phrase “well-crafted user experience.” It may have come up in conversation, in an article or in a job interview. Indeed, conversation and debate about craft, what it is and why it matters, has been a through-line during my 20+ years in tech. I’ve worked at companies that […] Th.
tempertemper · Martin Underhill · Jun 10, 2024
Some people use the keyboard to get around their computer. Knowing how to do this is important for accessibility testing and to inform design.
A List Apart · by Gerry Duffy · May 30, 2024
Ever since I was a boy, I’ve been fascinated with movies. I loved the characters and the excitement—but most of all the stories. I wanted to be an actor. And I believed that I’d get to do the things that Indiana Jones did and go on exciting adventures. I even dreamed up ideas for movies that my friends and I could mak.
Adam Silver · May 19, 2024
Last week I posted this on LinkedIn: I tell my students to avoid select boxes. Because it’s often better to go for radios. But they often say “But it’ll make the page long”. Yep, but that doesn’t necessarily mean it’s bad UX. See below for the page I designed to let users select a course. Huge list of radio buttons. B.
Lea Verou · May 17, 2024
Can we emulate the upcoming CSS contrast-color() function via CSS features that have already widely shipped? And if so, what are the tradeoffs involved and how to best balance them? Relative Colors Out of all the CSS features I have designed , Relative Colors aka Relative Color Syntax (RCS) is definitely among the one.
tempertemper · Martin Underhill · May 11, 2024
Those little accessibility widgets you see on some websites are absolutely not for who you think they are.
Material Design · May 8, 2024
New color options and carousel refinements
tempertemper · Martin Underhill · Apr 23, 2024
If the text of an interactive element like a button or link is preceded with an accessible image, we’ve probably got an accessibility problem.
Adam Silver · Apr 22, 2024
In case you don’t know David Hamill, he posts regularly on LinkedIn. And last week he posted a UX challenge to redesign the iPhone screen for accepting or declining a call while you’re already on one. This is the current design: Some of the issues may seem obvious to you at first glance, but I found the challenge a lo.
Adam Silver · Apr 9, 2024
When you design a product, you should usability test it. Otherwise, you won’t know how well it works. Typically you either: - create and test a prototype - build it in production and test there Building it in production is usually the most expensive and risky approach so lets leave that out for today. Which leaves us.
Learn UI Design · Erik D. Kennedy · Mar 29, 2024
The 4 most-common portfolio mistakes · Homepage best practices · How to create a great project case study · 10 example portfolios, annotated & explained · Top sites for creating your portfolio
Scott O'Hara · Scott O'Hara · Mar 22, 2024
I wrote this article on the default accessibilty properties (some might say ‘semantics’) of the popover attribute with Hidde de Vries.
