Tags: 25

549

sparkline

Friday, July 13th, 2018

Codebar Barcelona meets Codebar Brighton!

Codebar Barcelona meets Codebar Brighton!

Tuesday, July 10th, 2018

Picture 1 Picture 2 Picture 3

Workshoppers.

https://webanimationworkshops.com/

Picture 1 Picture 2

Workshopping in @68MiddleSt with @vlh and @sarah_edo.

Sunday, July 8th, 2018

Said goodnight to @vlh, @sarah_edo and @dizzyd …and proceeded to bump into @kytrinyx. Seems like everyone’s in Brighton this week!

Pizza! 🍕

Pizza! 🍕

Wednesday, June 27th, 2018

Oh, for the confidence of all the randudes in my mentions sharing Very Strong Opinions based on a photograph of a single slide from a conference talk they didn’t attend.

Saturday, June 16th, 2018

Travel advisory notice for Tusken Raiders travelling with gaffi sticks.

Travel advisory notice for Tusken Raiders travelling with gaffi sticks.

Thursday, June 14th, 2018

Picture 1 Picture 2

Watching @clagnut sign copies of his excellent web typography book (selling like hot cakes at @cssdayconf).

http://book.webtypography.net

Monday, June 11th, 2018

Help! I’m trapped in a stock photo!

Help! I’m trapped in a stock photo!

Tuesday, June 5th, 2018

Progressive web apps on my home screen.

Progressive web apps on my home screen.

Tuesday, May 22nd, 2018

Removing @Autoprefixer from my build process.

Feels good.

Monday, May 21st, 2018

Picture 1 Picture 2 Picture 3 Picture 4

The handsome paperback version of Going Offline accessorises nicely with socks, books, kettles, and computers.

https://abookapart.com/products/going-offline

Tuesday, May 15th, 2018

Picture 1 Picture 2 Picture 3 Picture 4

If you are a member of the Royal Society Of Putting Things On Top Of Other Things, might I recommend putting a copy of Going Offline on top of a table.

https://www.youtube.com/watch?v=5ixeRWrg0yg

Friday, May 11th, 2018

Thanks for the shout-out at @DeltaVconf, @HenriHelvetica. (the cheque is in the post) https://abookapart.com/products/going-offline

Thanks for the shout-out at @DeltaVconf, @HenriHelvetica.

(the cheque is in the post)

https://abookapart.com/products/going-offline

Thank you, kind people of @DeltaVconf for listening to my 10 minute whirlwind talk, “Any site can be a progressive web app.”

https://noti.st/adactio/d1zSa7/any-site-can-be-a-progressive-web-app

Thursday, May 10th, 2018

Hey @CodebarBrighton, the London contingent say hello! 👋

Hey @CodebarBrighton, the London contingent say hello! 👋

Tuesday, May 8th, 2018

Picture 1 Picture 2 Picture 3 Picture 4

I love seeing the pictures people are posting of their copies of Going Offline—keep ’em coming!

https://abookapart.com/products/going-offline

Monday, May 7th, 2018

Design systems

Talking about scaling design can get very confusing very quickly. There are a bunch of terms that get thrown around: design systems, pattern libraries, style guides, and components.

The generally-accepted definition of a design system is that it’s the outer circle—it encompasses pattern libraries, style guides, and any other artefacts. But there’s something more. Just because you have a collection of design patterns doesn’t mean you have a design system. A system is a framework. It’s a rulebook. It’s what tells you how those patterns work together.

This is something that Cennydd mentioned recently:

Here’s my thing with the modularisation trend in design: where’s the gestalt?

In my mind, the design system is the gestalt. But Cennydd is absolutely right to express concern—I think a lot of people are collecting patterns and calling the resulting collection a design system. No. That’s a pattern library. You still need to have a framework for how to use those patterns.

I understand the urge to fixate on patterns. They’re small enough to be manageable, and they’re tangible—here’s a carousel; here’s a date-picker. But a design system is big and intangible.

Games are great examples of design systems. They’re frameworks. A game is a collection of rules and constraints. You can document those rules and constraints, but you can’t point to something and say, “That is football” or “That is chess” or “That is poker.”

Even though they consist entirely of rules and constraints, football, chess, and poker still produce an almost infinite possibility space. That’s quite overwhelming. So it’s easier for us to grasp instances of football, chess, and poker. We can point to a particular occurrence and say, “That is a game of football”, or “That is a chess match.”

But if you tried to figure out the rules of football, chess, or poker just from watching one particular instance of the game, you’d have your work cut for you. It’s not impossible, but it is challenging.

Likewise, it’s not very useful to create a library of patterns without providing any framework for using those patterns.

I would go so far as to say that the actual code for the patterns is the least important part of a design system (or, certainly, it’s the part that should be most malleable and open to change). It’s more important that the patterns have been identified, named, described, and crucially, accompanied by some kind of guidance on usage.

I could easily imagine using a tool like Fractal to create a library of text snippets with no actual code. Those pieces of text—which provide information on where and when to use a pattern—could be more valuable than providing a snippet of code without any context.

One of the very first large-scale pattern libraries I can remember seeing on the web was Yahoo’s Design Pattern Library. Each pattern outlined

  1. the problem being solved;
  2. when to use this pattern;
  3. when not to use this pattern.

Only then, almost incidentally, did they link off to the code for that pattern. But it was entirely possible to use the system of patterns without ever using that code. The code was just one instance of the pattern. The important part was the framework that helped you understand when and where it was appropriate to use that pattern.

I think we lose sight of the real value of a design system when we focus too much on the components. The components are the trees. The design system is the forest. As Paul asked:

What methodologies might we uncover if we were to focus more on the relationships between components, rather than the components themselves?

Monday, April 30th, 2018

Picture 1 Picture 2

Two book reviews, eight years apart. Thank you, @BenNadel!

https://www.bennadel.com/

Sunday, April 29th, 2018

Checked in at The Foundry. Sunday session map

Checked in at The Foundry. Sunday session