Tags: ui

389

sparkline

Get the Balance Right: Responsive Display Text ◆ 24 ways

Some really great CSS tips from Rich on sizing display text for multiple viewports.

We’ve updated the radios and checkboxes on GOV.UK | GDS design notes

I always loved the way that Gov.uk styled their radio buttns and checkboxes with nice big visible labels, but it turns out that users never used the label area. And because it’s still so frickin’ hard to style native form elements, custom controls with generated content is the only way to go if you want nice big hit areas.

Installing web apps on phones (for real)

Henrik points to some crucial information that slipped under the radar at the Chrome Dev Summit—the Android OS is going to treat progressive web apps much more like regular native apps. This is kind of a big deal.

It’s a good time to go all in on the web. I can’t wait to see what the next few years bring. Personally, I feel like the web is well poised to replace the majority of apps we now get from app stores.

Document your design systems with Fractal | Creative Bloq

This quick dip into Fractal was in last month’s Net magazine.

It’s very gratifying to see how much Fractal is resonating with people—Mark has put so much hard work into it.

History of Icons – a visual brief on icon history by FUTURAMO

An illustrated history of digital iconography.

Smithsonian 3D Apollo 11 Command Module

This is so wonderful! A 3D fly-through of the Apollo 11 command module, right in your browser. It might get your fan whirring, but it’s worth it.

Click through for lots of great details on the interface controls, like which kinds of buttons and switches were chosen for which tasks.

And there’s this lovely note scrawled near the sextant by Michael Collins (the coolest of all the astronauts):

Spacecraft 107, alias Apollo 11, alias ‘Columbia.’ The Best Ship to Come Down the Line. God Bless Her.

My biggest takeaway from the second Offline Camp in Santa Margarita, CA — plus toast!

J. Renée Beach writes on Ev’s blog about three things to consider when planning for offline experiences:

  • Freshness,
  • Reach, and
  • Assurance.

How will you express to your users that the content is up to date, safe and available across their network?

Usability Testing of Inline Form Validation: 40% Don’t Have It, 20% Get It Wrong - Articles - Baymard Institute

I saw Christian speak on this topic at Smashing Conference in Barcelona. Here, he takes a long hard look at some of the little things that sites get wrong when doing validating forms on the fly. It’s all good sensible stuff, although it sounds a bit medical when he takes about “Premature Inline Validation.”

Why I am a web developer | Seldo.Com Blog

I think it’s worth revisiting this post by Laurie on a regular basis for a shot of perspective and inspiration.

The web saved my life and then built me a new one. A single living entity, it touches everything in the world and is always getting better — and I can help. I owe it so much; if I can help it out, make it better in any small way, how can I possibly refuse? And if I can make it easier for other people to help make it better, then my efforts are multiplied.

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.