Erik Kennedy presents three heuristics on the UX of where to place certain controls. Once you see them, you’ll realize they’re in basically every UI you’ve ever used.
xLayers is a web app which aims to bridge the gap between designers and developers. Its mission is to allow both the design and development worlds to collaborate and iterate fast.
Upload your Sketch file and you will get the code generated for your favorite framework of choice (React, Vue, Angular, LitHtml, Stencil and even Xamarin Forms…and more to come).
I’ve always felt a little put off by the clip-path property, thinking it was rather obscure and probably not worth learning. Boy was I wrong. In this article Travis Almand takes us through how incredibly powerful this property is, and how by animating it you can create a range of beautiful transition effects with a few simple lines of CSS.
This is a thoughtful look at the relationship between content and design, and some steps that designers can take to better work with copywriters.
We all know designers and copywriters should not work in silos. We know design and copy should inform each other, rather than one being retrofitted to the other. This is especially true for UX writing, which must work in tandem with design to do its job well. Effective collaboration between design and content, however, is easier said than done.
The author goes on to lay out some ideas to improve collaboration, mostly from the standpoint of the designer, but honestly I think a lot of these same ideas are important for developers. And you can extend it further by saying “don’t use placeholder copy for user generated content”.
I spent last weekend making a GUI for rsync (and this past week tidying it up a bit) and I learned a lot about rsync, GUIs, design, power, control, and decisions around verbosity and freedom of choice versus simplicity and guidance/support, packaging, maintenance and support.
She had me at
This is the coolest webpage I’ve seen in awhile. The way the quine is accomplished is so brilliantly simple, it almost feels like cheating. It’s brilliant, by the way, because of the esoteric knowledge required to pull it off. It’s simple, because it’s literally a single CSS rule.
Front-end developers are often in a position of trying to interpolate between a (static) design and the (dynamic) needs of a product. When something comes up that isn’t quite covered by the design, what should you do? In an ideal world we could have a conversation with the designer, but the world is rarely ideal, so it’s useful to have at least a sense of good practices to apply.
This article is great because it keeps it simple - just four straightforward principles. As author Anna 4erepawko Mészáros says:
Will this help you create shiny beautiful designs? No. Will this help you create great, clear and comprehensible designs that everyone can easily understand and interact with? Absolutely.
Erik Kennedy is at it again, this time with a 201-level design tip about tying a site together and turning a good design great.
Matej Latin takes us through the current state of fluid typography on the web:
Fluid typography gives us so many opportunities to better design the reading experiences on the web but, at the same time, it introduces problems of font sizes scaling uncontrollably and potential accessibility issues. Is fluid web typography ready to be used?
TLDR: No, it’s not ready. But you should still read the article, which has a great breakdown of pros and cons of fluid typography and other typography approaches.
The report focuses on 5 questions about the internet.
- Is it safe?
- How open is it?
- Who is welcome?
- Who can succeed?
- Who controls it?
The answer is complicated, and the report doesn’t make any particular conclusions so much as share a series of research & stories about each topic. Includes some fascinating looks at what’s going on in AI, inclusive design, open source, decentralization and more.
Put your brand color(s) in, and get accessible color variations out. An easy way to generate WCAG AA/AAA color pairs based on an existing color.
A carefully crafted collection designed with a focus on fluidity, simplicity, and ease of use. Powered by CSS with minimal markup. Completely open source and MIT licensed.
You’re gonna want to click through and then click around. 💯
Do you remember that endless summer back in ’84? Cruising down the ocean-highway with the top down, the wind in our hair and heads buzzing with neon dreams?
No, I don’t remember it either, but with this experimental theme we can go there.
Themer takes your favorite colors and generates themes for your editor, terminal, Slack, browser, desktop wallpaper, and more. It even has a PWA UI for visual theme development as well as a CLI for automation/integration with your dotfiles repo.
Playroom allows you to create a zero-install code-oriented design environment, built into a standalone bundle that can be deployed alongside your existing design system documentation.
We literally now have an open-source typeface created by the people, for the people — contributions are welcome.
Public Sans is a strong, neutral, principles-driven, open-source typeface for text or display.
I commonly make quick demo pages or websites with simple content. For these, I don’t want to spend time styling them but don’t like the uglyness of the default styles.
Water.css is a css framework that doesn’t require any classes. You just include it in yourand forget about it, while it silently makes everything nicer.
Includes a light theme and a dark theme. Demo here.
Definitely one of my favorite announcements from Apple at their special event this week — the physical version of Apple’s new credit card, Apple Card.
As is expected from Apple, the card is unlike any other. At a close glance, the minutest details set it apart from the rest. Of course, the physical card hasn’t been released yet, but we can learn a lot from what Apple has shown in promotional material.
If you haven’t yet, tune in to Backstage #3 for our hottest of hot takes right after Apple’s special event.
A thoughtful, step-by-step redesign of the repo page we all know so well. I didn’t realize how many problems the current design has! Perhaps I’ve been inoculated to them by sheer volume of use.
His redesign takes a few left turns on me (I’ve always loved how code-centric the design is, for example), but overall there are many good ideas inside. I hope GitHub’s design teams read this and “steal” a few of the goodies.
You may recall Erik from episode #333 of The Changelog. In this video, he does a great job describing his decision making process so you can learn how to apply a similar thought process.
User flows tools, prototyping tools, font tools, animation tools, all the design tools!
Adam talks with Erik Kennedy about tactical design advice for developers. Erik is a self-taught UI designer and brings a wealth of practical advice for those seeking to advance their design skills and learn more about user interface design. We cover his seven rules for creating gorgeous UI, the fundamentals of user interface design — color, typography, layout, and process. We also talk about his course Learn UI Design and how it’s the ultimate on-ramp for upcoming UI designers.
This post from HTML & CSS expert and advocate Rachel Andrew shares her perspective drawn from the 20 years she’s been working on the front and backend of the web.
When we talk about HTML and CSS these discussions impact the entry point into this profession. Whether front or backend, many of us without a computer science background are here because of the ease of starting to write HTML and CSS. The magic of seeing our code do stuff on a real live webpage! We have already lost many of the entry points that we had. We don’t have the forums of parents teaching each other HTML and CSS, in order to make a family album. Those people now use Facebook, or perhaps run a blog on wordpress.com…
Two front-end developers are sitting at a bar. They have nothing to talk about.