Tags: ui



Overview | Atlassian Design Guidelines

A nicely-documented styleguide from Atlassian. It’s not a component library, though—there’s no code here.

Maintaining and organising a pattern library - FutureLearn

Alla looks at a few different ways of organising the contents of a pattern library, based on her experience with the FutureLearn team.

You Might Not Need JavaScript

Una has put together a nice collection of patterns that use CSS for interactions. JavaScript would certainly be more suitable for many of these, but they still provide some great ideas for robust fallbacks.

Taking Pattern Libraries To The Next Level – Smashing Magazine

Here’s an epic brain dump by Vitaly on the challenges of putting together a pattern library and then maintaining it.

Sacrificing consistency for usability is fine. A slightly open-ended, inconsistent but heavily used pattern library is better than a perfectly consistent pattern library that is never used.

Can These Pornographers End ‘MILFs,’ ‘Teens,’ and ‘Thugs’? | The Nation

A fascinating look at an attempt to redefine the taxonomy of online porn.

Porn is part of the ecosystem that tells us what sex and sexuality are. Porn terms are, to use Foucault’s language, part of a network of technologies creating truths about our sexuality.

Reminds of the heady days of 2005, when it was all about tagging and folksonomies.

The project, at its most ambitious, seeks to create a new feedback loop of porn watched and made, unmoored from the vagaries of old, bad, lazy categories.

First Time User Experiences

Krystal’s excellent annotated collection of onboarding examples.

Fantasy UIs

Interviews with the designers who make on-screen interfaces for sci-fi films.

How do I learn? - Snook.ca

I can very much relate to Jonathan’s learning process (except for the bit about reading Hacker News—spit):

  1. Reading
  2. Building
  3. Writing

I think I read about 20-30 times more than I write, but the writing part is still crucial for helping me get stuff straight in my own head.

Style Guides, Pattern Libraries, Design Systems and other amenities. // Speaker Deck

This slide deck is a whistle-stop tour of all things styleguide and pattern-library related. Nice to see Charlotte’s excellent exercise get a shout-out.

I Wanted To Type a Number | Filament Group, Inc., Boston, MA

Choosing the right input type for your form field.

Create awesome styles- Nucleus - Living style guide generator

Another style guide generator that parses comments in CSS.

Indicating offline | justmarkup

Some interesting interface ideas here for informing users when a service worker is doing its magic.

In the future users may expect a site to work offline after visiting again, but until this happens, I think it is a good idea to let the users know about this feature.

CSS only scroll indicator

This is witchcraft. I’ve been deconstructing the CSS to figure out how this works and it’s really clever.

(Hint: try commenting out some of the CSS and see what happens.)

You Know What? Fuck Dropdowns

An entertaining presentation from South By Southwest on the UI element of last resort.

It’s funny because it’s true.

Join Fractal on Slack!

If you’re planning on giving Fractal a test drive, jump into this Slack channel. Mark and others will be able to help you out with any questions that aren’t covered in the docs.

Stop the overuse of overflow menus — Medium

The trouble with overflow menus is that you didn’t actually take anything away, you just obnoxiously obfuscated it.

Words of warning and advice from Daniel.

Instead of prioritizing, we just sweep complexity under the rug and pretend that it doesn’t exist.

Fractal v1.0 | Clearleft

Mark sets the scene for Fractal, the fantastic tool he’s built for generating pattern libraries.

This 1.0 release is just a start; it hopefully provides a solid foundation on which we (and anyone else who wants to contribute) can build and expand on in the future.


Fractal Documentation

This is the tool that we use at Clearleft to generate pattern libraries. It’s pretty damn cool. Mark built it. It’s pretty damn cool.

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.