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.
Manuel Matuzovic · Sep 7, 2023
I specialize in HTML and CSS, but I also write JS. Especially in the last year or so, I wrote quite a lot of JavaScript because we decided to port the front end of one of my clients to web components. When I first learned about web components, I had a lot of questions, especially regarding accessibility. While I found.
Salesforce UX · Kate Hughes · Aug 31, 2023
Whether you’re in person or online, don’t miss all the places design is showing up at the AI event of the year. There’s something amazing about design at Dreamforce ’23. Now, it’s everywhere. You’ll see design on the big, broadcast stages ( True to the Core & Developer Keynote ); the theater sessions and workshops ( o.
Ahmad Shadeed · Aug 30, 2023
Intuit Design · Ted Drake · Aug 29, 2023
Intuit’s Accessibility Champion program enables everyone to become a champion and a roadmap for people to become leaders. This was created to celebrate people making contributions towards accessibility. It highlights people via employee profile badges, congratulatory spotlights, and notifications to managers about the.
Material Design · Aug 24, 2023
Catch up on Google Fonts' talk at Figma Config 2023
Manuel Matuzovic · Aug 17, 2023
I read Steve Faulkners “hasPopup hasPoop” where he mentions differences in what screen readers announce when dealing with the aria-haspopup attribute. I wanted to know how that manifests used on a button. table { table-layout: fixed; white-space: nowrap; } tbody td { background: green; color: #fff; } tbody th { font-w.
Adam Silver · Aug 6, 2023
There’s a new form design trend going around: Buttons inside inputs. Anthony Hobday mentioned it by asking his audience if there was any significant difference in usability between these 3 designs: 3 different layouts for an input and button combination - Button inside the input - Button touching input - Button next t.
Adam Silver · Aug 6, 2023
Disabling paste is usually done in the name of security. For example, let’s say the user has to type their email address twice. Using 2 separate inputs means a mismatch can be caught. But that doesn’t work if they paste an error from the first input into the second. But disabling paste degrades UX and is a terrible wa.
Lea Verou · Aug 3, 2023
As you may know, this summer I am leading the design of the inaugural State of HTML survey. Naturally, I am also exploring ways to improve both survey UX, as well as all questions. Shaine Madala , a data scientist working on the survey design team proposed using numerical inputs instead of brackets for the income ques.
Lea Verou · Jul 26, 2023
You have likely participated in several Devographics surveys before, such as State of CSS , or State of JS . These surveys have become the primary source of unbiased data for the practices of front-end developers today (there is also the Web Almanac research, but because this studies what is actually used on the web,.
Lyft Design · Karuna Harishanker · Jul 12, 2023
This article was co-written by Karuna Harishanker (Senior UX Researcher at Lyft) and Dylan Trow (Former Staff UX Researcher at Lyft) and represents their shared perspective. When we think about strong UX researchers, we often think about their ability to deliver compelling insights at the end of a study that influence.
EightShapes · Dan Brown · Jul 12, 2023
Photo by Eilis Garvey on Unsplash Series: information architecture in digital products It’s time for me to define what I mean by concept . I’ve dreaded this moment as much as you have. 😉 We use the word “concept” in design usually to mean “big idea” or “potential design direction.” But I’m talking about something els.
Adam Silver · Jul 9, 2023
Since 2016 I’ve used, created and contributed to multiple design systems. I’ve seen what works and what doesn’t. By “doesn’t” I mean designers don’t trust it. And as a result they don’t use it. When I’m feeling sassy, I call these people ‘cowboy designers’. Now there are some designers that will ignore your design sys.
EightShapes · Dan Brown · Jul 7, 2023
Joseph Chan on Unsplash Series: information architecture in digital products In the realm of digital products, some cater specifically to the enterprise. As I continue my exploration of Product IA, I’ll focus on these kinds of products because of their acute information architecture challenges. Let’s first define what.
Manuel Matuzovic · Jul 4, 2023
I wanted to know how and if common screen readers expose the element. Here are my results: Summary tl;dr : shit's complicated. Some screen readers don't announce articles and have no default quick nav shortcuts. Some don't announce them but treat them as landmarks. Others announce them as articles and treat them as la.
Adam Silver · Jul 2, 2023
Picture this. You’re designing a form but the questions are complicated. Users need a lot of guidance to understand each question. But this makes the page long and messy. You run through various patterns. ‘Tooltips!’, you say to yourself. And that’s cool because tooltips keep things clean while allowing users to acces.
Manuel Matuzovic · Jun 30, 2023
An important factor in terms of UX and accessibility for deciding whether the element is the right solution for a problem is the find-in-page behaviour. In Chromium-based browsers, the details element automatically opens when it contains a string the user searches for. If Safari and Firefox, it has to be opened for th.
EightShapes · Dan Brown · Jun 29, 2023
Photo by Claudio Schwarz on Unsplash Series: information architecture in digital products Theory: The information architecture of products happens at a higher level of abstraction than the IA of web sites, and is therefore harder to recognize, acknowledge, and discuss. When I was a young philosophy major back in 1991,.
Manuel Matuzovic · Jun 28, 2023
I wanted to know how well common screen readers and browsers support search and form landmarks . Here are my results: table { table-layout: fixed; white-space: nowrap; } tbody td { background: green; color: #fff; } tbody th { font-weight: normal; /* position: sticky; left: 0;*/ } td.no { background: #bf0404; } th a:is.
EightShapes · Dan Brown · Jun 26, 2023
Photo by Alina Grubnyak on Unsplash Series: information architecture in digital products Information architecture is commonly associated with navigation: how people get from one area to another within a digital space. But information architecture deals not just with navigation, but also the underlying conceptual struc.
