5 ms·

The Washington Post's open-source design system

95 points by gaws 4y ago

robertlagrant 4y ago
> while maintaining visual consistency at scale What does at scale mean here?
- jasfi 4y ago
  Lots of sections with lots of pages, I would think. But then that's dynamically generated, of course. Maybe lots of components too?
  - capableweb 4y ago
    Also across the organization. While publicly they are famous for running a news site, they surely have more websites, both public and internal. Design system would help them having consistent styling and design across all of those properties.
    - mesofile 4y ago
      Also across devices, was my first thought; and across mediums – all media outlets have to publish to Twitter, Facebook, Google and Apple News etc these days
- Frost1x 4y ago
  Looks like loose language to fit some buzzwords in to me, but I'll give them the benefit of doubt. I'm guessing (hoping) it means either that by consistently using their design system, you'll see consistent results no matter the environment (browser, platform, etc.). Another interpretation could be that regardless of the aspect ratio viewed, resolution, etc., content will always render in a relatively consistent fashion regardless of if it's a phone or billboard, so everything is vector based with no rasterization or discrete level of details baked into content. And negative space and what not are all sort of relatively baked in to give the same style. It could also mean that since it's ran client side independent of other clients, you can inherently scale up indefinitely so long as your backend infrastructure can deliver the base content. This of course has been the case in pretty much anything delivered over the internet since its inception though. Of course there was the trend for several years of server side content rendering to enable dynamic content (e.g. the rise of SSI, CGI, PHP, etc.) where scaling was/is more of a consideration but in the current trends of front ends that paradigm seems to be mostly dead and it's just assumed your front-end design will "scale" easily... It's pretty easy to abuse generalized tech terms that are heavily overloaded and not lie while creating all sorts of implications to the reader should they decide to glance over it.
  - btbuildem 4y ago
    I think it means something more along the lines of "we publish thousands of pages of articles including media and data viz, and we need it to have a consistent look and feel"
- _fat_santa 4y ago
  I read it as: "We have a massive website and this design will help us bring consistency to all pages". I've worked as a web dev on some massive sites and almost all suffer from design fragmentation. It's very hard to make every page look consistent unless you're really on the ball with a framework like this.
punyearthling 4y ago
I work on design systems and a few things jump out at me: - Shocked there's no line-length restriction on long-form content, especially for a newspaper - I like the inclusion of bundle size info (even if it's currently broken) on each component - more design systems should be aware of their impact on bundle size - I wish their support info were more obvious - it's currently buried under Resources. Also wish their GH were visible. - It's not immediately apparent how to use their DS from a technical standpoint. I'm assuming it's React?

95 points by gaws 4y ago

robertlagrant 4y ago

> while maintaining visual consistency at scale What does at scale mean here?

jasfi 4y ago
Lots of sections with lots of pages, I would think. But then that's dynamically generated, of course. Maybe lots of components too?
- capableweb 4y ago
  Also across the organization. While publicly they are famous for running a news site, they surely have more websites, both public and internal. Design system would help them having consistent styling and design across all of those properties.
  - mesofile 4y ago
    Also across devices, was my first thought; and across mediums – all media outlets have to publish to Twitter, Facebook, Google and Apple News etc these days
Frost1x 4y ago
Looks like loose language to fit some buzzwords in to me, but I'll give them the benefit of doubt. I'm guessing (hoping) it means either that by consistently using their design system, you'll see consistent results no matter the environment (browser, platform, etc.). Another interpretation could be that regardless of the aspect ratio viewed, resolution, etc., content will always render in a relatively consistent fashion regardless of if it's a phone or billboard, so everything is vector based with no rasterization or discrete level of details baked into content. And negative space and what not are all sort of relatively baked in to give the same style. It could also mean that since it's ran client side independent of other clients, you can inherently scale up indefinitely so long as your backend infrastructure can deliver the base content. This of course has been the case in pretty much anything delivered over the internet since its inception though. Of course there was the trend for several years of server side content rendering to enable dynamic content (e.g. the rise of SSI, CGI, PHP, etc.) where scaling was/is more of a consideration but in the current trends of front ends that paradigm seems to be mostly dead and it's just assumed your front-end design will "scale" easily... It's pretty easy to abuse generalized tech terms that are heavily overloaded and not lie while creating all sorts of implications to the reader should they decide to glance over it.
- btbuildem 4y ago
  I think it means something more along the lines of "we publish thousands of pages of articles including media and data viz, and we need it to have a consistent look and feel"
_fat_santa 4y ago
I read it as: "We have a massive website and this design will help us bring consistency to all pages". I've worked as a web dev on some massive sites and almost all suffer from design fragmentation. It's very hard to make every page look consistent unless you're really on the ball with a framework like this.

punyearthling 4y ago

I work on design systems and a few things jump out at me: - Shocked there's no line-length restriction on long-form content, especially for a newspaper - I like the inclusion of bundle size info (even if it's currently broken) on each component - more design systems should be aware of their impact on bundle size - I wish their support info were more obvious - it's currently buried under Resources. Also wish their GH were visible. - It's not immediately apparent how to use their DS from a technical standpoint. I'm assuming it's React?