Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

USWDS: The United States Web Design System

designsystem.digital.gov

Post reply on HN
Print view View original

21–30 of 151 posts

Re: USWDS: The United States Web Design System

#21

Post by Aeolun »

EricE wrote: post #18

Anyone with any part in designing user interfaces seriously needs to commit their section on color to heart: https://designsystem.digital.gov/design-tokens/color/overvie... Especially the contrast/magic number discussion. It's crazy how many user interfaces these days blur design elements to where you can't tell were controls are. The recent trend to eliminate window title bars is particularly infuriating, but button…

The contrast on the example images rated as AA is actually quite horrible though. I can read the header, but the normal sized text is almost indistinguishable.

Re: USWDS: The United States Web Design System

#22

Post by Aeolun »

Someone1234 wrote: post #5

Developers are an interesting bunch "Why does anyone use Bootstrap anymore?" and then goes and creates basically the exact same components again by hand. Seems like that same trend repeats every couple of years "[Popular library] is now outdated, let me just create an in-house clone or move to identical but trendy [Popular library]." To be clear I very much like the USWDS components, but they are mostly 1:1 with Boot…

At least for our business, we need the components to do fairly specific things that are not, or only partially supported by pre-build components.

So we make our own. Now they’d suck for anyone else to use, but they’re perfect for us.

Re: USWDS: The United States Web Design System

#23

Post by kingcharles »

EricE wrote: post #18

Anyone with any part in designing user interfaces seriously needs to commit their section on color to heart: https://designsystem.digital.gov/design-tokens/color/overvie... Especially the contrast/magic number discussion. It's crazy how many user interfaces these days blur design elements to where you can't tell were controls are. The recent trend to eliminate window title bars is particularly infuriating, but button…

Windows 11 has some infuriating parts like this where the contrast between elements is so small you can't tell what is going on (like.. where is the scrollbar?). Especially when you own some cheap LCD display that's 15 years old with 20 nits of brightness and a contrast ratio of non-existent. Compared to the guy that designed the UI (and I'm guilty of this in the past) who persuaded his boss he needed a $6500 Apple ProRes UltraHDR+++ display that is literally brighter than the noonday sun and has a contrast ratio approaching aleph-zero.

Re: USWDS: The United States Web Design System

#24

Post by kingcharles »

DanAtC wrote: post #3
TiredGuy wrote: post #2

The last gov team I was on had trouble with the uswds icon set. There didn't seem to be a way to import them as a font rather than as separate svgs. We noticed though that the icons were roughly based on Material Design icons, so we used the Material Design icon fonts instead and they were close enough. There were still a few icons that didn't map over, but we found some others within the new set that sufficed.

Icon fonts aren't accessible.

Can you expand on your pithy comment? :) I'm genuinely interested.

Re: USWDS: The United States Web Design System

#25

Post by ramesh31 »

On a meta level, this is exactly how you should specify a design system. There is zero focus whatsoever on any technical implementation beyond basic raw HTML and CSS. So many design systems fall into the trap of trying to put out framework specific libraries of their components that inevitably fall short and end up being a bigger liability than they are worth. Just put out a visual specification and a UX language to build to, and leave the project specific details to each developer.

Re: USWDS: The United States Web Design System

#26

Post by oh_sigh »

cors-fls wrote: post #10

I love the 'usa' in every classes ! You can't forget where you come from when you are putting 'usa-checkboxes' into 'usa-fieldsets' into 'usa-forms' ! At least it's shorter than 'america' !

It's just best-effort namespacing. Call it "checkboxes" and the library has a much higher chance of negatively interacting with a different library.

Re: USWDS: The United States Web Design System

#27

Post by ramesh31 »

Aeolun wrote: post #22
Someone1234 wrote: post #5

Developers are an interesting bunch "Why does anyone use Bootstrap anymore?" and then goes and creates basically the exact same components again by hand. Seems like that same trend repeats every couple of years "[Popular library] is now outdated, let me just create an in-house clone or move to identical but trendy [Popular library]." To be clear I very much like the USWDS components, but they are mostly 1:1 with Boot…

At least for our business, we need the components to do fairly specific things that are not, or only partially supported by pre-build components. So we make our own. Now they’d suck for anyone else to use, but they’re perfect for us.

>At least for our business, we need the components to do fairly specific things that are not, or only partially supported by pre-build components.

I would say the moment you are dealing with business logic you are no longer dealing with something that can seriously be called a "component", that's just application development. And if you are spending developer time to build custom HTML select boxes or dropdowns in the year 2022 you're really doing something wrong.

Re: USWDS: The United States Web Design System

#28

Post by cechmaster »

TiredGuy wrote: post #2

The last gov team I was on had trouble with the uswds icon set. There didn't seem to be a way to import them as a font rather than as separate svgs. We noticed though that the icons were roughly based on Material Design icons, so we used the Material Design icon fonts instead and they were close enough. There were still a few icons that didn't map over, but we found some others within the new set that sufficed.

Don't use font icons, I use svg icons with and works great. Much easier to customize when you need to in my opinion.

Re: USWDS: The United States Web Design System

#29

Post by evan_ »

kingcharles wrote: post #24
DanAtC wrote: post #3

Earlier quoted context omitted.

Icon fonts aren't accessible.

Can you expand on your pithy comment? :) I'm genuinely interested.

Consider an icon font where "E" is a little "edit" pencil- to a screen reader it just looks like an "E".

Of course you could just put `aria-label="edit"` on its container the same way you would an SVG.

The icon font is also a problem if the font doesn't load and the browser uses a fallback, now you have a weird "E" in the middle of your document. They're harder to get aligned just right in my experience as well.

Someone's probably done this already but it would be cool to have an icon font that uses ligatures- so you'd type "Edit" and it would turn into the Edit icon. Wouldn't solve the other issues but it would be neat.

Post reply on HN