Information mesh
Timelines of people, interfaces, technologies and more:
30 years of facts about the World Wide Web.
Link tags: lines
42
Sparkline Sound-Off – Chris Burnell
Chris has made sonic sparklines on his site too, but they’re far more musical than mine. Here’s his explanation of how he did it.
Sadly, this is not The Onion
It’s not funny, cause it’s true.
Accessibility for Teams
I really, really like the way that this straightforward accessibility guide is subdivided by discipline. As Maya wrote in the blog post announcing its launch:
Each person on a team, whether you’re a manager, designer, or developer, has a role to play. Your responsibilities are different depending on your role. So that’s how we structured the guide, with a separate section for each of five roles:
- Product management
- Content design
- UX design
- Visual design
- Front-end development
Introducing the GOV.UK Design System - Government Digital Service
The Gov.uk design system is looking very, very good indeed—nicely organised with plenty of usage guidelines for every component.
Guidance on using components and patterns now follow a simple, consistent format based on task-based research into what users need in order to follow and trust an approach.
Monzo – Tone of Voice
Monzo’s guidelines for tone of voice, including a reference to “the curse of knowledge.”
Vox Product Accessibility Guidelines
Accessibility isn’t a checklist …but this checklist is a pretty damn good starting point. I really like that it’s organised by audience: designers, engineers, project managers, QA, and editorial. You can use this list as a starting point for creating your own—tick whichever items you want to include, and a handy copy/paste-able version will be generated for you.
Useful accessibility resources
A whoooole bunch of links about inclusive design, gathered together from a presentation.
clean-code-javascript
Opinionated ideas on writing JavaScript. I like it when people share their approaches like this.
Design Guidelines — The way products are built.
A collection of publicly available design systems, pattern libraries, and interface guidelines.
Voice Guidelines | Clearleft
I love what Ben is doing with this single-serving site (similar to my design principles collection)—it’s a collection of handy links and resources around voice UI:
Designing a voice interface? Here’s a useful list of lists: as many guiding principles as we could find, all in one place. List compiled and edited by Ben Sauer @bensauer.
BONUS ITEM: Have him run a voice workshop for you!
10 guidelines to improve your web accessibility | Aerolab
- Do not depend on color
- Do not block zoom
- Rediscover the alt attribute
- Add subtitles and captions to your videos
- Semantics = accessibility
- Use the right mark-up
- Use roles when necessary
- On hiding elements
- Follow web accessibility standards
- Audit and review
Another Lens - News Deeply x Airbnb.Design
A series of questions to ask on any design project:
- What are my lenses?
- Am I just confirming my assumptions, or am I challenging them?
- What details here are unfair? Unverified? Unused?
- Am I holding onto something that I need to let go of?
- What’s here that I designed for me? What’s here that I designed for other people?
- What would the world look like if my assumptions were wrong?
- Who might disagree with what I’m designing?
- Who might be impacted by what I’m designing?
- What do I believe?
- Who’s someone I’m nervous to talk to about this?
- Is my audience open to change?
- What am I challenging as I create this?
- How can I reframe a mistake in a way that helps me learn?
- How does my approach to this problem today compare to how I might have approached this one year ago?
- If I could learn one thing to help me on this project, what would that one thing be?
- Do I need to slow down?
Amazon Alexa Voice Design Guide
A style guide for voice interfaces.
Back to the Cave – Frank Chimero
Frank has published the (beautifully designed) text of his closing XOXO keynote.
Brendan Dawes - Now Boarding
I love this project by Brendan—a kind of retroactive design fiction featuring boarding passes from airline travel referenced (but never seen) in films like Die Hard, The French Connection, and Pulp Fiction.
Horizontal lines around centered content
Here’s another clever CSS technique. It uses flexbox to add horizontal lines either side of centred content.
Vox Product Accessibility Guidelines
I’m not a fan of the checklist approach to accessibility, but this checklist of checklists makes for a handy starting point and it’s segmented by job role. Tick all the ones that apply to you, and this page will generate a list for you to copy and paste.
The Joy of Sparks
This is so cool! The logs of the Indie Web Camp IRC channel visualised as a series of sparklines in the style of Joy Division/Jocelyn Bell Burnell.
BBC - Future Media Standards & Guidelines - Accessibility Guidelines v2.0
The minimum dependency for a web site should be an internet connection and the ability to parse HTML.