Tags: ui

426

sparkline

Learn CSS Grid - A Guide to Learning CSS Grid | Jonathan Suh

A quick visual guide to CSS Grid properties and values.

Presentation: Accessibility in a Responsive World, A11Y Days 2017

There are some great hands-on accessibility patterns in this talk transcript from Scott.

Style Guide Guide | Style Guide Guide

If you want to understand the thinking behind this style guide guide, be sure to read Brad’s style guide guide guide.

The cost of change | The White Site

Ben points to a new product aiming to ease the pain of connected devices bumping up against the harsh realities of shearing layers:

By exposing the ‘hardwiring’ of our electrical systems, Conduct emphasises how much we rely on existing systems to power our ‘new’ technology – the rate of change and advancement in our traditional technologies moves at a much slower pace than our mobile app-based world and there are physical limitations as a result of this hardwired legacy.

I am—unsurprisingly—in favour of exposing the seams like this.

Nick Jones - Interface Prototyper / Designer

A really interesting and well-executed portfolio site, utterly let down by the tone of this demeaning and insulting piece of copy:

WARNING: Do not proceed if you suffer from vertigo or if you find experimental interfaces offensive.

(Pssst: copy is also interface.)

Codebar Coach Guide

It’s a short list, but this brief guide for coaches at Codebar is packed with excellent advice for anybody getting into teaching or training:

  • Do not take over the keyboard! This can be off-putting and scary.
  • Encourage the students to type and not copy paste.
  • Assume that anyone you’re teaching has no knowledge but infinite intelligence.

Creating a pattern library in Sketch, Roobottom.com

A smart approach to creating patterns as symbols in Sketch. Sounds like diligence and vigilance is required to make it work, but then, that’s true of any pattern library.

Springer Nature frontend playbook: house style guide

I like it when organisations share their in-house coding styles. This one from Springer Nature not only has guides for HTML, CSS, and JavaScript, but it also has a good primer on progressive enhancement.

Control Panel | Flickr

Photos of analogue interfaces: switches, knobs, levers, dials, buttons, so many buttons.

Using NPM as a Build Tool | gablaxian.com

For a small to medium sized project, this sounds like a sensible way to approach build tasks. It feels nice and close to the metal.

IF Data Permissions Catalogue

A collection of interface patterns for granting or denying permissions.

A Todo List

A great step-by-step walkthrough by Heydon of making an accessible to-do list, the “Hello World” of JavaScript frameworks.

There’s a lot of great knowledge in here that can be applied to plenty of other interface elements too.

Griddy

A handy GUI for experimenting with CSS Grid Layout without having to recall the syntax.

CodePen - CSS Grid Template Builder

Here’s a handy interface if you want to get your head around named areas in CSS Grid, also known as doing layout with ASCII art.

Patterns Beyond Context · Matthias Ott – User Experience Designer

If we describe patterns also in terms of content, context, and contrast, we are able to define more precisely what a specific pattern is all about, what its role within a design system is, and how it is defined and shaped by its environment.

Inclusive Components

A great new site from Heydon:

A blog trying to be a pattern library. Each post explores the design of a robust, accessible interface component.

The first component is a deep dive into toggle buttons.

Let’s Make the World We Want To Live In | Big Medium

Josh gives a thorough roundup of the Interaction ‘17 event he co-chaired.

“I think I’ve distilled what this conference is all about,” Jeremy Keith quipped to me during one of the breaks. “It’s about how we’ll save the world through some nightmarish combination of virtual reality, chatbots, and self-driving cars.”

The Not Quiz – Test your celebrity, music and film knowledge

This is really good fun! And thanks to service workers, it works offline too.

The rounds are:

  • Dead or Not Dead,
  • Number 1 or Not Number 1, and
  • Oscar or Not Oscar.

Sketching at Clearleft.

An interview with Batesy that gives a nice insight into life at Clearleft.

He’s sketching mad, that one!

World of Concrete: Inside the Industry That’s Building Trump’s America Brick by Brick - The Atlantic

Fear and concrete in Las Vegas: a great piece of infrastructure reportage by Georgina.