Tags: graph

676

sparkline

Thursday, January 23rd, 2020

Web standards, dictionaries, and design systems

Years ago, the world of web standards was split. Two groups—the W3C and the WHATWG—were working on the next iteration of HTML. They had different ideas about the nature of standardisation.

Broadly speaking, the W3C followed a specification-first approach. Figure out what should be implemented first and foremost. From this perspective, specs can be seen as blueprints for browsers to work from.

The WHATWG, by contrast, were implementation led. The way they saw it, there was no point specifying something if browsers weren’t going to implement it. Instead, specs are there to document existing behaviour in browsers.

I’m over-generalising somewhat in my descriptions there, but the point is that there was an ideological difference of opinion around what standards bodies should do.

This always reminded me of a similar ideological conflict when it comes to language usage.

Language prescriptivists attempt to define rules about what’s right or right or wrong in a language. Rules like “never end a sentence with a preposition.” Prescriptivists are generally fighting a losing battle and spend most of their time bemoaning the decline of their language because people aren’t following the rules.

Language descriptivists work the exact opposite way. They see their job as documenting existing language usage instead of defining it. Lexicographers—like Merriam-Webster or the Oxford English Dictionary—receive complaints from angry prescriptivists when dictionaries document usage like “literally” meaning “figuratively”.

Dictionaries are descriptive, not prescriptive.

I’ve seen the prescriptive/descriptive divide somewhere else too. I’ve seen it in the world of design systems.

Jordan Moore talks about intentional and emergent design systems:

There appears to be two competing approaches in designing design systems.

An intentional design system. The flavour and framework may vary, but the approach generally consists of: design system first → design/build solutions.

An emergent design system. This approach is much closer to the user needs end of the scale by beginning with creative solutions before deriving patterns and systems (i.e the system emerges from real, coded scenarios).

An intentional design system is prescriptive. An emergent design system is descriptive.

I think we can learn from the worlds of web standards and dictionaries here. A prescriptive approach might give you a beautiful design system, but if it doesn’t reflect the actual product, it’s fiction. A descriptive approach might give a design system with imperfections and annoying flaws, but at least it will be accurate.

I think it’s more important for a design system to be accurate than beautiful.

As Matthew Ström says, you should start with the design system you already have:

Instead of drawing a whole new set of components, start with the components you already have in production. Document them meticulously. Create a single source of truth for design, warts and all.

Friday, January 3rd, 2020

A short history of body copy sizes on the Web

A look at the trend towards larger and larger font sizes for body copy on the web, culminating with Resilient Web Design.

There are some good arguments here for the upper limit on the font size there being too high, so I’ve adjusted it slightly. Now on large screens, the body copy on Resilient Web Design is 32px (2 times 1em), down from 40px (2.5 times 1em).

Thursday, January 2nd, 2020

B612 – The font family

B612 is an highly legible open source font family designed and tested to be used on aircraft cockpit screens.

Available as a web font.

Monday, December 2nd, 2019

Thursday, November 21st, 2019

Frank Chimero Redesign Blog: The Popeye Moment

Frank is redesigning in the open. Watch this space:

By writing about it, it may help both of us. I can further develop my methods by navigating the friction of explaining them. I’ve been looking for a way to clarify and share my thoughts about typography and layout on screens, and this seems like a good chance to do so. And you? Well, perhaps the site can offer a clearly explained way of working that’s worth considering. That seems to be a rare thing on the web these days.

Sunday, November 17th, 2019

2019-11-17 – florian.photo

These are great photos of the speakers at Beyond Tellerrand—great captures of Sharon, Cassie, and Charlotte.

Tuesday, November 12th, 2019

The Department of Useless Images - Gerry McGovern

The Web is smothering in useless images. These clichéd, stock images communicate absolutely nothing of value, interest or use. They are one of the worst forms of digital pollution because they take up space on the page, forcing more useful content out of sight. They also slow down the site’s ability to download quickly.

Thursday, October 3rd, 2019

Photopea | Online Photo Editor

I found myself needing to open some old Photoshop files recently, but I haven’t had Photoshop installed on my computer for years (not since Adobe moved to the Mafia pricing model). It turns out there’s an online recreation of Photoshop!

I remember when this was literally the example people would give for the limitations of the web: “Well, you can’t build something like Photoshop in the browser…”

Tuesday, September 10th, 2019

SVG Artista

A handy tool for tweaking the animations in your SVGs.

Friday, September 6th, 2019

Enigma machine / Tom MacWright / Observable

See how an Enigma machine works …and interact with it.

Letters to be encrypted enter at the boundary, move through the wire matrix, and exit.

Recursive | Recursive

Play around with this variable font available soon from Google Fonts in monospaced and sans-serif versions.

Sunday, September 1st, 2019

Less… Is More? Apple’s Inconsistent Ellipsis Icons Inspire User Confusion - TidBITS

The ellipsis is the new hamburger.

It’s disappointing that Apple, supposedly a leader in interface design, has resorted to such uninspiring, and I’ll dare say, lazy design in its icons. I don’t claim to be a usability expert, but it seems to me that icons should represent a clear intention, followed by a consistent action.

Saturday, August 31st, 2019

Monday, August 26th, 2019

Online Color Picker From Image - Pick your color

A nice standalone tool for picking colours out of photos, and generating a colour palette from the same photo.

Sunday, July 21st, 2019

How using component-based design helps us build faster

A case study from Twitter on the benefits of using a design system:

With component-based design, development becomes an act of composition, rather than constantly reinventing the wheel.

I think that could be boiled down to this:

Component-based design favours composition over invention.

I’m not saying that’s good. I’m not saying that’s bad. I’m also not saying it’s neutral.

5 Keys to Accessible Web Typography | Better Web Type

Some excellent explanations for these five pieces of sensible typography advice:

  1. Set your base font size in relative units
  2. Check the colour of your type and only then its contrast
  3. Use highly legible fonts
  4. Shape your paragraphs well
  5. Correctly use the heading levels

Mapping the Moon

A look at all the factors that went into choosing the Apollo landing sites, including this gem:

Famous amateur astronomer, Sir Patrick Moore, also produced a hand drawn map of the moon from his own observations using his homemade telescope at his home in Selsey, Sussex. These detailed pen and ink maps of the Moon’s surface were used by NASA as part of their preparations for the moon landing.

Friday, July 19th, 2019

The Guardian digital design style guide

What a lovely way to walk through the design system underpinning the Guardian website.

Bonus points for using the term “tweak points”!

Monday, July 15th, 2019

Spurious Correlations

Correlation does not imply causation.

Monday, July 1st, 2019

Variable Fonts for Developers

A showcase of fun experiments with variable fonts, courtesy of Mandy.