7 ms·
A design system for the federal government
- deleted 3y ago[deleted]
- candiddevmike 3y agoInteresting LICENSE: https://github.com/uswds/uswds/blob/develop/LICENSE.md https://github.com/uswds/uswds/blob/develop/LICENSE.md Wonder why they decided to go with Material Icons vs building out their own icon library? US seems to have various glyphs all over the place, would be neat to see them consolidated in a standard icon library.
- pcurve 3y agoCreating icon set from scratch is rather difficult and time consuming. It also requires a lot of research to ensure usability. What ends up happening is designers will just start from existing icon set anyway to stay close to existing convention and mental model. I guess they felt it’s not the best use of their limited resources?
- moritzwarhier 3y agoIt also mentions Font Awesome. Probably better to build on ubuquitous icon sets instead of wasting taxpayers money on redesigning exclamation mark icons. This would cost a lot of money. They can still augment with custom icons where it actually matters.
- dclowd9901 3y agoReally unfortunate. It’s not like we don’t have the will or capability. I’m hoping this is just while they iron out licensing agreements.
- glompers 3y agoCould you or someone please help explain why a new icon library or license would be really fortunate compared to this choice?
- deleted 3y ago[deleted]
- azemetre 3y agoHow does public domain license compare to something like GPL? Isn't public domain better?
- dhosek 3y agoPublic domain allows you to do whatever you want with the work. GPL requires derivative works to also be GPL’d. As a matter of law, all copyrightable work done by Federal employees as part of their job is public domain. This is yet another loss to society in the trend towards privatizing government operations.
- vxNsr 3y agoCan’t tell what you’re lamenting.
- wlesieutre 3y agoIf the federal government designed their own icon set it would be available for anyone to use without license restrictions. Since they’ve decided to use someone else’s icon system, they aren’t making a public domain set of icons.
- encomiast 3y agoBut also, since they’ve decided to use someone else’s icon system, taxpayers are not paying for yet another icon system, when an existing one under an Apache license is available.
- dhosek 3y agoThis is true. In some ways, Apache/MIT licensing is superior to public domain licensing as some jurisdictions (Germany, IIRC) don’t recognize public domain as a status.
- dhosek 3y agoI’m lamenting the fact that by contracting out work to private companies, the government-sponsored work product belongs to the private companies and not the public domain. I suspect from the part of those architecting the contracting (on both the government and private side) that this is a feature, not a bug.
- rswerve 3y agoThere is a standard set. https://designsystem.digital.gov/components/icon/ https://designsystem.digital.gov/components/icon/
- candiddevmike 3y agoThose are material icons
- asoneth 3y agoProducing a bespoke icon library for a large organization can be shockingly expensive depending on how the organization is structured. I've worked on projects where dozens of different stakeholders needed to sign off on the icon library resulting in thousands of person-hours of design review meetings alone. If I could save millions of dollars by picking an existing icon library and adding only what is needed that seems like a smart move to me.
- brutusborn 3y agoI don’t know much about web design so I ask from a place of ignorance: has this been done well? Standardising components sounds like a good way to improve efficiency and safety but I imagine if it is done badly it could do the opposite. I’m always skeptical of big government initiatives, so I am interested to hear how those in the know grade the gov in this example.
- SoftTalker 3y agoAny site design will look stale after five years, no matter what standards you follow. It's just an unfortunate reality, there is no way off of the wheel unless you are like Craigslist and deliberately reject all convention.
- ics 3y agoI wish this wasn't such a commonly shared opinion. Too defeatist, in my view. Craigslist is spartan, sure, but there are less extreme examples such as McMaster-Carr. They've had the same design more or less since 2010 at least and it is usually considered both functional and tastefully current. I think in the early 2000s they had a different design which was fine, and they obviously skipped the whole "web 2.0" era of design.
- SoftTalker 3y agoYou're right, there are a few exceptional sites that manage to have a "timeless" look and I'd probably put McMaster in that category.
- nextaccountic 3y ago> there are less extreme examples such as McMaster-Carr. They've had the same design more or less since 2010 at least and it is usually considered both functional and tastefully current. This? https://www.mcmaster.com/ https://www.mcmaster.com/ On desktop, sure. But they don't work in mobile. And that's easily 80% of the troubles of modern design: to avoid building everything twice, today people write "responsive", "mobile first" websites that, on desktop, tend to have an excessive amount of whitespace and other issues (see for example the old vs new reddit layout) What's being demanded of websites in 2023 is just much more difficult to do well than what people wanted in 2010.
- chevman 3y agoIt doesn't look like anything in the github repo or change logs on the actual site itself have been updated in over a year. Is anyone still actively maintaining this effort?
- binarysneaker 3y agoNot a patch on the UK government design system IMO. Used by the UK gov and 3rd parties to produce consistent, accessible and aesthetically pleasing public service front-ends. More: https://design-system.service.gov.uk/ https://design-system.service.gov.uk/
- deleted 3y ago[deleted]
- bobbylarrybobby 3y agoI love the UK government site design, in particular their font (Transport something or other?). Sadly the font may not be used anywhere but .gov.uk sites.
- melx 3y agoIt's called GDS Transport[0] and it's custom version of New Transport (for digital use) that's based on the original Transport font designed in the 1950s. [0] https://en.m.wikipedia.org/wiki/Transport_(typeface) https://en.m.wikipedia.org/wiki/Transport_(typeface)
- ceedaxp 3y agoHaving seen a number of different gov websites, I think that gov.uk are the most aesthetically pleasant and UX-focused. I would only say that at times they are excessively verbose, but that is less of a design system fault and more from the "let's protect us from any liabilities and people making totally silly assumptions about what, when, and how we do things" department.
- nicbou 3y agoMy favourite part is the NHS website. Pages like this one [0] are an excellent example of clear, effective writing. They heavily influence how I write similar content. [0] https://www.nhs.uk/conditions/cough/ https://www.nhs.uk/conditions/cough/
- quickthrower2 3y agoI want this to be good. I would happily use something like this for my "bootstrap" knowing that a lot of thought has been put into it.
- deleted 3y ago[deleted]
- mock-possum 3y agoIs it weird to anyone else how completely they avoid talking about the actual technologies involved? It just keeps saying “design system.” So… is it just a bunch of SASS files and icons? Or is it web components? Or is it react/vue/angular components? Are there tests? Is there a storybook? It seems like all that stuff should be front and center on the landing page
- deleted 3y ago[deleted]
- petepete 3y agoIt's a set of styles and guidance on how to use them in a universally accessible manner. You're unlikely to build anything that's usable by everyone using React/Vue/Angular. I mean, it is possible, but it's hard enough to get right with plain HTML and CSS - adding a load of JavaScript to the mix just confuses matters.
- KronisLV 3y ago> You're unlikely to build anything that's usable by everyone using React/Vue/Angular. I wonder why so few actually try doing this. I mentioned this in another comment, but PrimeFaces is one of the few (only one?) sets of usable components, that have libraries available for Angular/React/Vue/Java (though using Java is a bit of a mess because of JSF, though some like it): https://www.primefaces.org/ https://www.primefaces.org/ It's immensely cool to be able to use similar components and such across different technologies, as opposed to wanting one of those component libraries and thus being pigeonholed into either using just React (or something else), or third party bindings of questionable quality. It's probably never going to be truly 1:1, but getting close enough seems like a good thing to me, here's an example of a random component: https://primeng.org/treetable https://primeng.org/treetable https://primereact.org/treetable/ https://primereact.org/treetable/ https://primevue.org/treetable/ https://primevue.org/treetable/ https://www.primefaces.org/showcase/ui/data/treetable/basic.xhtml https://www.primefaces.org/showcase/ui/data/treetable/basic....
- 3y ago
- AndrewKemendo 3y agoAs a user of the department of VA website I can say with confidence it is absolutely unnecessarily terrible. The login process alone is kafkaesque with literally 6 methods of login offered and a Byzantine routing process between nameservers, root DNS bouncers and processes that can’t maintain login state. What a joke
- encomiast 3y agoHow is the login experience, DNS, and routing related to the US Web Design System?
- salil999 3y agoYeah this reply doesn't make sense. This is talking about design. You're talking about login. You can stretch it and say UX can be improved but even then it's not as relevant.
- junon 3y agoYou're complaining (albeit potentially rightfully) about how the system is used. Design systems are more about how things look. The line is a bit blurry but what you're describing has little to do with the design system.
- AndrewKemendo 3y agoCorrect. Design is UX not simply UI
- junon 3y agoA design system has little to do with UX. "Design system" is a nuclear term.
- amatecha 3y agoThe Canadian government has a design system[0] for government services too, that I think is quite decent. It's almost primitive, but it's clean, consistent and follows good accessibility principles. It's downright boring, but I think that's great. I am not interested in a flashy, only-compatible-with-latest-Chrome design for a government website. :) Oh, they even include a content style guide[1] which goes so far as to recommend things like writing with "plain language" to ensure content is easily understood. Really cool! Even further, they outline some good practice around how to actually create and maintain a good website[2], including suggestions like "build in accessibility from the start" and "use open standards and solutions".. How cool is that? For real though, I need to reiterate how impressed I am with their design system. Check out Canada.ca[3], the country's official website. It's "plain jane", right? I can't believe how readable it is. It's just plainly-worded links to topics of information you may be seeking. The chosen standard font is extremely legible, compared to so many websites. And it loads SO fast! :D I notice UK Govt's website[4] is quite similar, which is great (though the cookie banner covering 2/3 of the screen isn't so nice haha) [0] https://design.canada.ca/ https://design.canada.ca/ [1] https://design.canada.ca/style-guide/ https://design.canada.ca/style-guide/ [2] https://www.canada.ca/en/government/system/digital-government/government-canada-digital-standards.html https://www.canada.ca/en/government/system/digital-governmen... [3] https://www.canada.ca/en.html https://www.canada.ca/en.html [4] https://www.gov.uk/ https://www.gov.uk/
- ricardobeat 3y agoDutch government websites also have a no-frills design and well-written content in a similar style: https://business.gov.nl/ https://business.gov.nl/ https://duo.nl https://duo.nl https://belastingdienst.nl https://belastingdienst.nl
- raylus 3y agoIn our foundational setup for the new https://beta.nasa.gov https://beta.nasa.gov and https://beta.science.nasa.gov https://beta.science.nasa.gov websites, we've adopted the US Web Design System (USWDS). While our other core products primarily rely on Tailwind, we are quite familiar with this toolkit. In my opinion, comparing the two is not entirely straightforward, but the USWDS toolkit has been implemented effectively, despite some of its "America First" usa-* class names. The decision to use the same toolkit across our projects is largely influenced by the 21st Century Integrated Digital Experience Act (IDEA), which mandates federal agencies to modernize their websites and digital services. You can find more information about IDEA here: https://www.hhs.gov/web/governance/21st-century-idea.html#:~:text=The%2021st%20Century%20Integrated%20Digital%20Experience%20Act%20(IDEA)%20requires%20federal,their%20websites%20and%20digital%20services https://www.hhs.gov/web/governance/21st-century-idea.html#:~....
- thaumasiotes 3y ago> despite some of its "America First" usa-* class names It's the American government... isn't it? What namespace would you expect them to use?
- junon 3y agoI would wager the intention there is that the prefix is unnecessary or that it could otherwise reflect the name of the toolkit as opposed to the country. As an American I also find it a little "yeehaw, 'murica" and not the norm for design frameworks, but it's much ado about nothing.
- wink 3y agoSomewhere in London some intern at gov.uk is still not finished rewriting all the god-save-the-queen-hr-<color> CSS class names to god-save-the-king-...
- koshergweilo 3y ago*god-save-the-queen-hr-<colour>
- throwmeout123 3y agoThe design system, where once productive FE devs go to die thinking everyone should use it
- KronisLV 3y ago> The design system, where once productive FE devs go to die thinking everyone should use it Genuine questions: is it badly made to the point where it would slow people down, or do you have another reason for disliking it? What's wrong with the government thinking that many of their sites should look and behave in similarly predictable ways, in addition to tackling accessibility as well, at least to a certain degree? In my eyes, that's not that different to people choosing to go with Bootstrap or PrimeFaces (which actually provides UI components that have versions tailored for Angular, React and Vue, in addition to Java; something that seems cool and that I haven't seen many others actually try to do) because they want something that works out of the box and lets them worry about the forms and page content, instead of as much about how it works. In other words, do we really need so many bespoke design systems (and all of the work that goes into that), as opposed to fewer but more well made ones?
- throwmeout123 3y agoYour point makes a lot of sense, but then everyone wants that small bit of customization that substantially destroys the whole idea of a design system. Not to mention that while making sense for the government, which might have contractors without even knowing about them, it’s really stupid for small companies (why the hell i want to use randomCo design system?) and it’s just pure vanity.
- euroderf 3y agoTables, but no treeviews.
- ProxCoques 3y agoIt's one thing to have a great repository of reusable, accessible, versioned, centrally managed and agreed components. It's quite another to have production systems actually using that repository, unless the DS came before building the systems. So I'd be interested to see how this might get over the hurdle of being retrofitted into legacy systems. So many design systems I've encountered are effectively fictions: great ideas being maintained in theory, but it's next to impossible to commit the necessary operating costs to getting them into production. So the sites and apps you see may look like they're using a DS, but many of those components are "impostors" not being managed in the DS at all.
- janeerie 3y agoHaving worked on a couple of these projects, the new design system is being implemented as new systems are built or when upgrading tech on older systems. I don't think anybody is doing an overhaul just to implement the design system, but as part of a new design or redesign, it's quite useful.
- ProxCoques 3y agoIndeed, certainly nobody is doing an overhaul just to implement the design system, because the business case for that (unfortunately) is too hard to make. And obviously, if you've got a DS and building some new front end from scratch then you're going to use it. But in my experience, when upgrading tech or introducing new features that involve cracking open the FE codebase, there is extreme pressure to do the cheapest/fastest thing. If a product manager asks his team how long it would take to do X, then how long it would take to do it AND update various things to use the DS in the process, that extra work seldom gets signed off. "No extra opex on my budget".
- EricE 3y agoI wish more designers would read the section on color: https://designsystem.digital.gov/design-tokens/color/overview/ https://designsystem.digital.gov/design-tokens/color/overvie... Especially the sections on contrast and accessibility. The current trends for shades of gray/off white everywhere often make pages disturbingly hard to decipher.
- iancmceachern 3y agoIronic, I literally 5 minutes ago had to break out my laptop to do a simple task on a US government website because of very poor mobile UI design. This is much needed and much appreciated!