Learn the principles behind the interface
Build websites without code
Learn how to turn your design work into live websites with Webflow, a visual, no-code website builder.
Manuel Matuzovic · Dec 13, 2016
An introduction to web accessibility. Tips on how to improve your markup and provide users with more and betters ways to navigate and interact with your site. My blog doesn't support comments yet, but you can reply via blog@matuzo.at .
Etsy Design · Henry Bayuzick · Nov 17, 2016
A Better Experience for Everyone Illustration by Naomi Wilkinson Here at Etsy, sandboxes are places where designers working on digital experiences can build whatever they want without blowing things up. At their core, sandboxes are really simple: just folders with some template files, hidden from the public. But their.
Etsy Design · Randy J. Hunt · Oct 18, 2016
Illustration by Jing Wei Allow us the privilege of introducing ourselves. “Hi! We’re Etsy Design.” “Hello, there. Wait…what’s Etsy?” “Oh, Etsy? It’s this special thing, and we’d love for you to be a part of it. Etsy is reimagining commerce and putting creative entrepreneurs at the center of the world. We’re building m.
Etsy Design · Alex Wright · Oct 18, 2016
Illustration by Sarah Abbott Like many of you, we enjoy making things: trying out new ideas, building prototypes, and fine-tuning our work as we go. Etsy is constantly looking for opportunities to improve our products and services, and exploring new ways to make things work better for everyone. Etsy has a big mission:.
Etsy Design · Victoria Bian · Oct 18, 2016
Thoughts, lessons, and tips Illustration by Laura Berger This June, I flew from San Francisco, California to Brooklyn, New York — far from my family, friends, and everything I’m familiar with. I felt curious and nervous, wondering what my Etsy internship would bring. “Will I feel comfortable working there? What if I m.
CSS Wizardry · Oct 10, 2016
A low-cost approach for providing user customisation in UI projects
Lea Verou · Sep 7, 2016
Recently, when I was making the minisite for markapp.io , I realized a neat trick one can do with CSS variables, precisely due to their dynamic nature. Let’s say you want to use a property that has multiple versions: an unprefixed one and one or more prefixed ones. In this example we are going to use clip-path , which.
Heydon Pickering · Aug 21, 2016
We need to talk about aria-controls . It's poorly supported, does very little, and does what it does when it does badly. It is poop and we rely on it way too much. We are short-changing assistive technology users when we do. What it is The aria-controls attribute is a 'relationship attribute' which denotes which eleme.
Adam Silver · Jul 1, 2016
Designers love to remove labels from inputs to save space and create a minimal aesthetic. But minimal doesn’t always mean simple . And in the case of labels they improve UX because: - sighted users can see them. - visually-impaired users can hear them with a screen reader. - motor-impaired users can more easily set fo.
Heydon Pickering · Jun 30, 2016
In September of last year, I decided I wanted to hear stories about how screen reader users access The Web. I suspected, as a sighted web user, I made a lot of incorrect assumptions. Accordingly, I composed seven questions to find out about strategies for reading and operation . Following are the raw, unedited respons.
CSS Wizardry · Jun 20, 2016
Giving talks is stressful. Follow these tips to make the logistics of it a little simpler.
Adam Silver · Jun 16, 2016
The placeholder attribute can be used to put hint text inside text inputs. When the user types, the placeholder text disappears to make room for the user’s answer. Placeholders are popular because they save space and have a minimalist aesthetic. But using placeholder text for labels or even just hint text is problemat.
CSS Wizardry · Feb 21, 2016
A look at managing typography more practically on larger sites and apps
Heydon Pickering · Feb 4, 2016
Tweet // !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); //
Adam Silver · Jan 8, 2016
According to Paul Adams there are 4 aspects to design : outcome, system, interaction and visual. Unfortunately, I think we often focus our attention on the visual side of things. This can create all sorts of different usability issues. Here I‘ll share some of the most common examples of this and why it’s problematic..
Adam Silver · Dec 27, 2015
Hover menus open and close when the user moves their mouse over or out of a menu. Despite their popularity they have several downsides. Here, I’ll explain what they are and what to do instead. 1. They’re easy to open by accident Hovering the cursor over part of the interface is not an intention to activate it. Technic.
Heydon Pickering · Dec 5, 2015
(This post was originally published on Medium, put has a permanent home here.) Flexbox—not to be confused with Sex Box , the British TV show wherein Mariella Frostrup interviews people who’ve just had sex in a box—is the CSS layout toolkit de rigueur . Of all the celebrated features of Flexbox, it is the l.
Adam Silver · Oct 9, 2015
I admit: I’ve bent the web many times in the past. For example, I’ve: - used tables for layout - given submit buttons a pointer cursor - used a select box as a makeshift navigation bar In A Dao of Web Design , John Allsopp says: “If you’ve never watched early television programs, it’s instructive viewing. Television w.
Heydon Pickering · Sep 18, 2015
They say accessibility is about people. Inaccessibility is about people too, of course. In either case, it's people — flesh-and-blood, living, breathing people — that interfaces are built to cater for, successfully or otherwise. What we learn in user research is that people are unpredictable, resistant, hesitant, cont.
Adam Silver · Sep 14, 2015
James Archer has explained why the hamburger menu can cause usability problems . I thought I’d jot down a few alternative designs here. 1. Medium Medium’s success is down to it’s simplicity which can be seen in its navigation which simply drops underneath the header. Medium’s navigation stacks on small screens 2. Prod.
