[HN Gopher] USWDS: The United States Web Design System
___________________________________________________________________
USWDS: The United States Web Design System
Author : jakelazaroff
Score : 277 points
Date : 2022-03-29 15:37 UTC (7 hours ago)
(HTM) web link (designsystem.digital.gov)
(TXT) w3m dump (designsystem.digital.gov)
| cors-fls wrote:
| 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' !
| oh_sigh wrote:
| It's just best-effort namespacing. Call it "checkboxes" and the
| library has a much higher chance of negatively interacting with
| a different library.
| topspin wrote:
| Sigh. No mention of a dark mode in the documentation.
| chess_buster wrote:
| filter: invert, huerotate(180deg);
| topspin wrote:
| If only it were really that simple.
| walrus01 wrote:
| makes me wonder how many phishing site operators are taking
| copies/examples of this for their own design needs, when making
| fake federal government webpages.
| Someone1234 wrote:
| 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 Bootstrap while being incompatible, and having to
| maintain them in-house. Just feels like NIH.
|
| Am I missing something?
| bobabob wrote:
| I call that the @tiangolo/FastAPI pattern of open source
| software.
|
| After individuals noticed that it's possible to make tons of
| money through donations/sponsors on Github and providing
| support for their OSS many just rebrand libraries by sugar
| coating abstractions on top of it (what FastAPI did to
| Starlette) and trying to own all parts of the development (by
| not giving access to anyone on the project for example) so that
| they own they're seen as the only person able to provide true
| support for it.
|
| See https://github.com/tiangolo/fastapi/issues/4263 and
| https://github.com/tiangolo
| sdunwoody wrote:
| Using a custom library over Bootstrap would potentially offer
| them the following benefits:
|
| * Full control over browser support (Government Agencies are
| likely to have to support older browser than Bootstrap for
| example would support).
|
| * Full control over accessibility (as far as I know, Bootstrap
| is not entirely accessible).
|
| * Ability to limit customisation to more closely fit any
| government style guide etc.
|
| * Not needing to update the version they are using whenever
| Twitter drop support for older versions, as they completely
| control the development life cycle and how long they support
| each version for.
|
| Possibly some other ones I have missed as well.
|
| Would they have saved money in the long term by using
| Bootstrap? Quite possibly (although I think it is hard to say
| definitively, and I really doubt creating this library cost
| significant amounts of money).
|
| Would using Bootstrap have resulted in sites that didn't look
| as nice? I highly suspect so.
| clairity wrote:
| bootstrap is a common design system base for companies that
| can't afford nor needs a full design team. it's a one-size-
| fits-none approach, but it's close enough that devs can wrangle
| it into shape well enough.
|
| larger entities with multiple, decoupled teams often move
| toward developing their own living design systems as bootstrap
| no longer fits the many idiosyncracies of the organization.
|
| i'm really looking forward to design systems that no longer
| rely on set breakpoints/grids and move to fully flexible,
| responsive layouts and components (come on, container
| queries!).
| wanda wrote:
| Nope, you're not missing anything really, but I'm sure glad
| that not every website looks like a Bootstrap 3.
|
| I think these government ones are more about keeping a
| consistent style and look across departmental websites, than
| advertising a product for general use.
|
| In fact, I think the government would not take very kindly to
| hobbyists making official-looking websites serving a non-
| government agenda.
|
| Front-end isn't that difficult for websites that primarily
| display information and at most require a contact us form or
| some basic CRUD.
|
| So, naturally, given what may be an unconscious existential
| dread that one day the world may realise that front-end is more
| or less solved, front-end developers like to make sure that
| there's always something new to do, rather than admit that a
| problem is more or less solved.
|
| And thus _fashion_ is born.
|
| Clothing was also a problem solved. We figured out that we
| needed shoes, trousers, shirts, jumpers when it's cold, coats
| when it's raining, etc.
|
| But once you have those, well, the tailor has no income. So the
| idea emerges that we need to have _nice_ shoes, shirts and
| trousers for _special_ occasions.
|
| And that perhaps some clothing items are better than other
| clothing items.
|
| And what if you don't want to dress in white and grey tomorrow,
| perhaps you'd like to be eye-catching?
|
| And so, fashion was born.
|
| The basic template is the same. You have some fabric that
| covers your legs, genitals, torso, arms etc. and the lower half
| is, more often than not, a different garment to the top half,
| to allow for easy swapping of components for different looks
| etc. But the base structure is the same.
|
| And if you are so inclined, you can have a totally bespoke and
| crazy item of clothing made for you by a designer.
|
| Sound familiar?
| reidjs wrote:
| I wonder if there is some hidden value to fashion trends.
| There are obvious reasons to wear clothes like you mentioned,
| to stay warm, protect from elements, carry your wallet, etc.
| but it also helps you identify in group/out group. Your style
| conveys your age and generation. Your music preferences.
| Where you are from.
|
| I think web design can convey similar things, sometimes at
| the cost of utility. For example, a website may want to
| convey that it's for professionals and businesses. Or that
| it's fun & silly like a toy. Or that it's for academics and
| learning. The style of the site helps to identify if you're
| in the right place for your "group". users can look past bad
| UI. In fact, they will often complain if you decide to
| "improve" the UI without their consent.
| pishpash wrote:
| > I think these government ones are more about keeping a
| consistent style and look across departmental websites, than
| advertising a product for general use.
|
| And how long will this last? Until the next administration
| who hates the association with the predecessor's style?
| DangitBobby wrote:
| > So, naturally, given what may be an unconscious existential
| dread that one day the world may realise that front-end is
| more or less solved, front-end developers like to make sure
| that there's always something new to do, rather than admit
| that a problem is more or less solved.
|
| Can you really not think of one thing that you couldn't do in
| the frontend 10 years ago that you can do today? Or that is
| significantly _easier_ to do today than it used to be?
| _Nothing_ new or novel or of value has emerged lately? I
| understand that your comment was intended to be inflammatory,
| but come on. Use your brain.
| alephnan wrote:
| > The basic template is the same
|
| It's obvious you are a tech person who did not study fashion
| design and don't know what you're taking about. No one would
| use the term template. There are silhouettes and there are
| patterns (that's a technical term). There's a reason Uniqlo
| is respected by fashion design students, but H&M / Zara is
| the bane of their existence, and that difference is pattern.
| Pattern, even more than fabric, is that difference between a
| $200 designer t-shirt and $5 from H&M. The layman will notice
| color, maybe a luxury logo, but the trained eye looks for
| pattern. Pretty much every MFA thesis is pushing the
| boundaries on pattern and silhouette among other things such
| as process, and that's why the garments may appear
| outlandish. Every decade, a professional fashion designer
| comes with a distinct silhouette. Unlike students, it is more
| basic and rudimentary, yet no one has thought of it before.
| There was Alexander McQueen, now there is Demna Gsvalia, in
| between there is Raf Simons. Based on the way you're
| describing things, I don't expect you know who any of these
| people are. Yes, it's fashion and doesn't introduce any
| functional improvements, but the way you're describing things
| makes fashion seem superfluous. It's art yes, and maybe art
| is superfluous for you, but it's weird to use analogies on a
| discipline you don't really understand. It's fine if you
| don't care or don't understand or don't think fashion is
| important, but don't think you know what fashion is simply
| because you wear clothing. I understand this as a naive and
| hand wavy analogy, but if I were to take it seriously then
| it's quite offensive to suggest fashion is unnecessary. It's
| the equivalent of a non technical MBA waxing up corporate
| talking points about Machine Learning or cryptography.
|
| > you can have a totally bespoke and crazy item of clothing
| made for you by a designer
|
| This reflects your preconceived notions that there is Costco,
| and then fashion = couturiers.
|
| First, if people are seeking a specific "designer", they're
| going to seek out motifs or a particular style of the
| designer. At the same time, the designer has their specific
| approach, and so this is not infinite possibilities of
| bespokeness.
|
| There's also nuanced distinction between tailors, designers,
| couturier, atelier craftspeople, pattern makers, creative
| director. What you think of "designer" is most likely a
| creative director at the helm of a fashion label. These
| people's skills are management, understanding industry
| trends, strategically positioning their brand given
| budget/limited resources, managing risks. Nowadays many of
| them don't even design or are capable of working with the
| governments. It's the difference between a movie producer and
| a director of photography. For sufficiently small firms, they
| might be the same person, but at any sufficiently large
| project, especially with how much money is involved in
| fashion, it's not. These are different roles in the industry,
| and there are overlap and people can change roles, but most
| of the time people can't. It's like thinking all engineers,
| or all engineers in tech ( SRE vs SWE), or even all software
| engineers are interchangeable. In Japan, I see management try
| to teach designers to become software engineers because to
| them all people work with computers are equivalent.
|
| > Clothing was also a problem solved
|
| It's not a solved problem. New fabrics are being developed.
| Mount Everest, high altitude climbing, winter sports is
| becoming easier over the decade in part to innovation in
| clothing and wearables.
|
| Then there is athleisure wear, athletic wear. Fashion is
| symbiotic with functional improvements. Cowboywear were
| fashion but also function.
|
| > nice shoes
|
| Just because the shoes are nice looking doesn't mean there
| aren't improvements in comfortability, and function. Allbirds
| which is liked among the HackerNews crowd just IPO'd in the
| last year.
| Uehreka wrote:
| Honestly, in my experience, the drive for bespoke styles
| isn't from developers, but from product folks and
| stakeholders. For instance, I once had to build a CMS UI with
| a dropdown where users could pick how they wanted to sort
| their search results. The product folks also asked me to add
| a "Show Translations" option in the dropdown, which wasn't a
| sort order, and could be toggled separately. They insisted
| that it needed to be in this dropdown and not a separate UI
| control, and since they generally know what the users want
| better than I do, I went with it.
|
| I've semi-frequently had to build custom tree views and tree
| selectors with multiple modes of operation and various
| amenities. And sometimes the way those complicated widgets
| are built requires that we customize more basic components
| like split-buttons or dropdowns to match so that users aren't
| thrown off.
|
| Sometimes all of this can be accomplished by taking a library
| like Bootstrap and applying a theme. But sometimes the theme
| gets so intense that we realize we're basically just building
| Material UI on top of Bootstrap's code, and it makes more
| sense to use that library instead. And as mentioned before,
| sometimes there are just things that we can't get from
| Bootstrap or Material, but that we're going to use fairly
| often (last I checked, Bootstrap didn't have a 5-star rating
| widget).
|
| The "It's Fashion!" narrative seems very appealing to people
| on HN, to the point that I'd advise people to double check
| that they're not falling for confirmation bias before
| proffering it as an explanation.
| gedy wrote:
| > I'm sure glad that not every website looks like a Bootstrap
| 3
|
| Just to clarify, Bootstrap is designed to be themeable, they
| don't hardcode styles. Examples:
| https://www.bootstrapcdn.com/bootswatch/
| tvanantwerp wrote:
| I would assume that the USWDS are built with section 508
| compliance in mind, and I'm not sure Bootstrap, et al., care
| about that.
|
| https://www.section508.gov/
| rootusrootus wrote:
| First thing that came to mind when I clicked that link was "I
| wonder if those blue-on-blue hyperlinks are compliant?"
| because man, my eyes are getting old.
| deltarholamda wrote:
| Government agencies love making standards. It provides busy
| work for the many interns and gives the desk workers a sense of
| joie de vivre because they're "making a difference."
|
| I really love the landing page. Has any landing page ever been
| useful at all to the end user? It's always a top priority, but
| on pretty much every site I've ever used it's never seen or
| used. Often I'll scroll all the way down just so I can get to
| the bottom page links that I'm actually looking for.
|
| I wonder why this is so difficult. Everybody has seen Google's
| landing page. Function over form. It's really weird that
| "design meetings" have completely eliminated usability on the
| damned home page.
| stjohnswarts wrote:
| Or they wedge it all into a hamburger menu because "we
| prioritize mobile". Fine, but how hard would it be to expand
| the options for a laptop?
| jrochkind1 wrote:
| Having seen how bad government websites can be, the design
| area specifically included (including accessibility concerns)
| -- I do not consider providing a well-designed useable design
| system to government to be busy-work. At least not if it
| actually gets uptake.
|
| This one is high-quality enough that if it was done by many
| interns, those are some really good interns.
| wallfacer120 wrote:
| Um yeah, but it's the government doing it so it's really
| important that we all react with scorn and derision,
| because we're all such bold iconoclasts you see.
| ProfessorLayton wrote:
| >Everybody has seen Google's landing page. Function over
| form.
|
| My favorite thing about google's home page is having their
| elaborate doodles load just as I'm about to tap on the search
| box, leading me to an unintended search. Function over form
| at its finest.
|
| I've resorted to bookmarking an empty search results page.
| haltcase wrote:
| I know everyone has their own workflow, but I'm still
| surprised anyone actually goes to Google's home page
| anymore what with their search bar being accessible from
| practically anywhere (browser address bar for example).
|
| I don't remember the last time I actually went to the
| Google home page. What leads you there these days?
| ProfessorLayton wrote:
| My default address bar search is DDG, but need to
| fallback to google at times, and I keep my iPhone
| relatively google-free (Other than google voice).
| stevenhuang wrote:
| Use !g at start or end of your query to query google
| https://duckduckgo.com/bang
| brimble wrote:
| Or, indeed, anywhere in your query. "test !g query" will
| search Google for "test query".
| Aeolun wrote:
| 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.
| ramesh31 wrote:
| >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.
| hallway_monitor wrote:
| Didn't you mean designers? In my experience, that's who loves
| pushing low-value efforts like this (yes, at the scale of the
| US government, Google etc it may be warranted). The real
| problem is you have too many designers on staff and they have
| found something to keep themselves busy.
| jonshariat wrote:
| (full disclosure: I am a designer)
|
| While I agree with you in general, I think the US gov has an
| excuse while others may not: they have much stricter laws and
| requirements they HAVE to meet.
| brimble wrote:
| In my experience, PMs and middle managers drive a fair amount
| of unnecessary design work. Looks better in a PowerPoint than
| most things do, I reckon.
| somehnacct3757 wrote:
| I would find real peace of mind in a design system maintained
| by a government that guarantees compliance with that
| government's accessibility requirements.
| sakopov wrote:
| Any kind of technical compliance by government is guaranteed
| to be old and obsolete in the near future. The reality of the
| situation is that this "design system" is a waste of time and
| it will never iterate as fast as other systems maintained by
| industry experts in web compliance and accessibility.
|
| This is just a case where folks are happy that our government
| isn't doing shit in Dreamweaver anymore and has moved on to
| something that resembles progress. However, government should
| be focusing on streamlining government operations, not
| developing accessibility standards and reinventing the same
| wheel. Leave that to professionals and use what's already
| available.
| rado wrote:
| BS is an opinionated framework aimed towards app devs who need
| UI for their web app ASAP. It's not suitable for all cases and
| required some tweaking to boot up (rounded buttons, hidden
| focus ring etc).
| dpedu wrote:
| As someone who does exactly this - building a website with
| Bootstrap or similar tools will get you 90% of the way there in
| terms of how closely your functional product matches its
| design. The remaining 10% requires fighting Bootstrap (since
| this is css, this means overriding rules). This is annoying and
| produces a fragile resulting code. Maybe it's a reason why the
| 90-90 rule exists. Instead, I choose to write exactly what's
| needed instead of trying to shoehorn in something to save time
| initially.
| vsareto wrote:
| The shoehorning can come from designers who don't put things
| together using bootstrap components as their design language.
| Then the developer tries to do forbidden CSS alchemy and go
| from a Bootstrap component to the designer component. That's
| using an opinionated framework when your designers don't
| share the same opinions which often will make things more
| difficult.
|
| Bootstrap and other opinionated frameworks are super handy
| when you don't have designs/designers though.
| atiragram wrote:
| Reminds me of the design system of Helsinki, Finland's capital
| city: https://hds.hel.fi/
|
| Both have educational value.
| TiredGuy wrote:
| 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.
| WorldMaker wrote:
| Beyond the accessibility problems, Icon fonts don't tree-shake
| very well and subsetting them is complicated and requires
| dedicated tools. Bandwidth may seem cheap/free in many cases,
| but SVG-based approaches can tree-shake down using ordinary web
| platform tools like Webpack to just the used SVG curves of the
| icons needed specific to a page or app and that can save you
| megabytes compared to most icon fonts.
| DanAtC wrote:
| Icon fonts aren't accessible.
| deltarholamda wrote:
| I did not know this.
|
| It appears there are workarounds, but I'm not sure how that's
| better than doing things Ye Olde Waye.
| fuzzy2 wrote:
| I'm not sure I follow. Are _icons_ accessible at all? Whether
| they're fonts or SVGs or bitmap images shouldn't really
| matter.
| WorldMaker wrote:
| In HTML when used as images with the IMG tag, SVGs and
| bitmap images have a direct concept of ALT attribute for
| accessibility to screen reading. Font glyphs do not. You
| can add aria- tags around font glyphs but you can't add/set
| those in just pure CSS and so most icon font libraries
| don't bother. It also doesn't help that the most common tag
| for adding icons from icon fonts is the I tag (from ancient
| HTML for Italic, though EM is the preferred tag) which not
| only doesn't naturally support things like ALT tags it is
| even worse for accessibility by implying the wrong semantic
| meaning ("there are italics near here"? But there aren't).
| clairity wrote:
| svg's aren't inherently accessible either. in both cases, you
| have to actively add accessibility.
| kingcharles wrote:
| Can you expand on your pithy comment? :) I'm genuinely
| interested.
| evan_ wrote:
| 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.
| fuzzy2 wrote:
| I would expect modern icon fonts to exclusively use the
| Unicode Private Use Area. Fallback fonts would then not
| have glyphs for these code points. Screen readers would
| hopefully ignore them.
| WorldMaker wrote:
| Screen readers ignoring them is a problem when it is UI
| the user needs to interact with. How does the use know
| that U+E9AF is the Edit icon they are looking for versus
| say maybe U+E9AE is the Delete icon?
| WorldMaker wrote:
| Font Awesome 5+ supports ligatures in that way, though my
| understanding is that it was intended for ease of use in
| design apps like InDesign more than for accessibility,
| but I suppose it can help accessibility too. (Though Font
| Awesome suggests SVGs over icon fonts for actual usage on
| the web.)
| kevin_thibedeau wrote:
| Fontforge has SVG import.
| cechmaster wrote:
| Don't use font icons, I use svg icons with <svg
| fill="currentColor" /> and works great. Much easier to
| customize when you need to in my opinion.
| vosper wrote:
| Font Awesome uses font icons, and they seem to have
| accessibility figured out?
|
| https://fontawesome.com/docs/web/dig-deeper/accessibility
| WorldMaker wrote:
| Font Awesome also suggests SVG over web fonts in any app
| with JS:
|
| https://fontawesome.com/docs/web/dig-deeper/webfont-vs-svg
|
| One of the key notes in the bottom table on that page is
| "Auto-Accessibility" and the JS libraries with SVG icons
| provide better accessibility out of the box. Most of the
| document you linked is stuff you need to do _manually_ by
| default when working with web fonts.
| EricE wrote:
| 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 buttons that
| don't look like buttons because they blend into the background
| are another pet peeve - or have light gray on dark gray. Ugh!
| Contrast serves a purpose!
| simonh wrote:
| Even basic things like window borders, our Windows 10 desktops
| at work don't have them and MS app window backgrounds are
| white. If several windows are overlapped and there's a small
| window in the middle somewhere, good luck trying to find the
| edges to move it. It's just a sea of white with text scattered
| about.
| ramenmeal wrote:
| Am I misinterpreting it? To me it makes sense that smaller text
| would require greater contrast. I'm understanding it that
| larger text/headings need more contrast. Might be more eye-
| catching, but that doesn't make sense for accessibility.
| tablespoon wrote:
| > 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
| buttons that don't look like buttons because they blend into
| the background are another pet peeve - or have light gray on
| dark gray. Ugh! Contrast serves a purpose!
|
| Modern UX design fads appear to be a UX trainwreck.
|
| It's kind of sad when the supposed experts choose to badly
| screw up stuff that had already been figured out. Sometimes it
| seems UX rule one is: show you're better than your users by
| invalidating their investment and making your UI harder to use
| once they've gotten used to it.
| datavirtue wrote:
| Exactly,I seriously can't wait until our modern UIs are made
| illegal by a modification to the disabilities act. I'll
| probably throw a party.
| laurent92 wrote:
| It's boring when UIs have a stark contrast; What makes light
| contrasts beautiful is rarity. Perhaps in the future,
| extremely elusive UIs with very faint variations will be the
| top of the design fashion after using cookies to know the
| user's tolerance to light contrast.
|
| For example, today's movies are pitch black because they want
| to upsell 5000:1 screens. The sole reason it didn't happen to
| software yet is because we don't receive any kickback from
| screen manufacturers, as opposed to movies.
| paulryanrogers wrote:
| Yet UIs are too often services increasingly necessary to
| live and excel in life. So all these rare and beautiful
| designs keep out users with vision problems, or at minimum
| push them to use more tooling to work around that shit.
| chockchocschoir wrote:
| > Especially the contrast/magic number discussion
|
| Speaking about accessibility, who came up with that name "magic
| number"? It's already an overloaded term with multiple meanings
| and even has one negative one (for constants that has seemingly
| "magic" meaning or not a fully understood one).
|
| Even something like "contrast ratio" would be immediate to come
| up with, and much better name as it actually says something on
| the tin.
|
| > Hey Pete, what is the magic number for our color scheme in
| article body text?
|
| Makes no sense... Replace "magic number" with "contrast ratio"
| and suddenly it does make sense.
| dylan604 wrote:
| You're forgetting two basic concepts: 1)Naming things is
| hard, 2)Nothing more permanent than a temporary solution. In
| this case, both are at play.
| Aeolun wrote:
| 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.
| jfengel wrote:
| The contrast on that Using Color page seems unexpectedly low to
| me. The text is dark gray on a light gray background. It's not
| unreadable, and I assume it follows their own guidelines, but I
| find it draining to read.
|
| There is a dark-gray-on-white area on the front page that I
| find more pleasant to read.
| lelandfe wrote:
| The background is nearly white at #fcfcfc, and the body copy
| is an 80% black color (roughly #323232). That is a contrast
| ratio of 12.49:1, which far exceeds even the most stringent
| contrast requirements in WCAG 2.1 AAA of 7:1.
|
| The "Color, Color Family, and Grade" callout box has the same
| color text but an #e6e6e6 background, which produces a
| contrast ratio of 10.27:1 - also passing.
|
| Everyone has different preferences, but in terms of color
| contrast they're doing great.
| kingcharles wrote:
| 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.
| darekkay wrote:
| > Especially the contrast/magic number discussion.
|
| From a developer perspective, working with color palettes with
| defined "magic numbers" is really great. I have written a blog
| post [1] around this topic and wrote a tool [2] to
| calculate/ensure accessible magic numbers for color palettes.
|
| [1] https://darekkay.com/blog/accessible-color-palette/
|
| [2] https://github.com/darekkay/a11y-contrast
| knowuh wrote:
| I can't tell you how much I love that your first example of
| contrast failure is HN.
|
| > Our favorite orange website isn't leading by example,
| either. Some comments are almost unreadable
| alephnan wrote:
| I studied computer science and have been software engineer for
| almost a decade. Before college I came from a design
| background. I also went back to design school after I already
| became a senior engineer.
|
| One thing I've noticed is that art students have looked into
| pivoting into UI/UX design because it pays. There are skills
| and intuition that transfer, such as designing for visual
| hierarchy. In fact, there are even systemic ways in design
| school to do color analysis. One way is to take a screenshot of
| the page and view it in greyscale in Photoshop. I've seen every
| corporate designer talk about accessibility, but not a single
| one of them do something like this. They will spend time coming
| up with a color theme for the brand, but it's really about
| their own personal brand, not the company's.
|
| The problem becomes when ego takes over and people treat
| service design as their own aesthetic endeavor. Craigslist is
| good design. HackerNews is good design. Google was a design
| innovator under Marissa Meyer. Now it feels like Google's
| design department is just bikeshedding. Material design is a
| yawnfest but the whole lexicon around it feels pretentious,
| bordering on those abstract post-modern descriptions in art
| museums. "Leveraging fluid streams of irregular forms, the
| artist manifests environmental concerns to provoke sublinear
| ethereal emotions latent in time and memory". I remember an
| architecture class where one of the exam questions was "Check
| all the following that describe the architectural style of the
| Byzantine empire". One of the answers was "abstract". Out of 50
| questions on the exam, this question was one of the questions
| that tripped people up the most. The instructor held a session
| for people to review the exam and express their grievances.
| Some of the students felt this question was biased towards
| Westerners, and asked the lecturer what "abstract" meant. The
| lecturer responded "abstract means abstract". To this day I
| still dwell on whether this instructor knows what abstracts
| means.
|
| The hardest class I took in university was not Operating
| Systems, String Theory, nor even graduate level Philosophy. It
| was modern architecture. The text was harder to read and
| understand than Kant. Even using Google Translate on some
| classic Chinese text makes more sense. Maybe Google Translate
| should add "design" as a language ( _not to be confused with
| design language and design systems_ ). Yes, there are ideas
| being transferred and communicated, but 90% of the content felt
| like it's not making any substantive or meaningful statement.
| It literally felt like reading Infinite Jest.
|
| And so we end up with bloated CSS. Why use lot CSS when few CSS
| do trick? HackerNews still has personality and brand, and
| people who built an HN clone might remember bits of it in their
| head. In fact, when my girlfriend talks to me she just says
| "oh, did you read that on The Orange Website?" Designers feel
| it is business critical and that the product shouldn't launch
| if we don't have rounded corners with an exact amount of
| curvature, or the line height is off by 1. Yes, some engineers
| shouldn't be left to their own accord and build dashboards that
| look like it was built by engineer. Maybe we can also blame the
| media perception that Steve Jobs is a perfectionist. He
| probably is, but most software products are CRUD apps and don't
| need an academic treatise on design. I've worked at a place
| where designers always wear black, and as far as a turtleneck.
| I've considered going back to school for Industrial Design, and
| having UI/UX design as a fallback, but when I think about the
| cliquey and political overhead of the day-to-day, I just stay
| collecting my engineering paycheck so that eventually I don't
| have to rely on a paycheck and then muddle my personal ego with
| doing corporate design work.
|
| I have designer friends outside of work where I can observe
| designers out the corporate veil. Their priorities ( corporate
| politics are different topic ) are not aligned with the user.
| They treat the work as the pyramid of Giza, or at least
| something to cement their careers and portfolio. The problem
| when art students become UI/UX designers is that they view
| their design as art: "what does the work say/convey?" / "what
| artistic boundaries is it pushing?". That's not relevant to
| useful software.
|
| This is not unique to designers. Computer Science graduates
| have a tendency to shoehorn all their academic learnings into
| the source code. Angular felt like people needing to flex all
| the design patterns they learned from Gang of Four. At least in
| my bubble, it felt like frontend engineers always felt an
| inferiority complex. I don't think that's warranted, but
| nonetheless frontend engineers need to remind people they have
| a computer science degree, too. And so the Node ecosystem
| becomes what it is. Go felt like it was designed by pragmatic
| programmers, not object oriented philosophers inspired by
| Plato's theory of form.
|
| Designing to be aesthetically interesting is okay, too, insofar
| that it does not hinder the user experience. It's kind of cruel
| that Microsoft ended up being more aesthetically interesting
| than Google. In terms of being original, interesting and
| aesthetic, Metro is better than Material, and XBox is better
| than whatever hardware Google cranks out. Then again, Microsoft
| is more engaged and in-tune open source and the frontend
| ecosystems nowadays than Google is. Less than decade ago, my
| Microsoft friends was perplexed why anyone would want to build
| a web app with HTML5 when they can build native applications
| with C#. I think Google would be better off if they lower
| compensation, I might consider rejoining.
| XorNot wrote:
| I actually really hate material design in general. It's
| "okay" on Android, and that's the only place it works.
|
| The Material web design layout _never_ feels good in the
| browser - it 's floaty. Interactions don't ever feel "solid"
| - basically the experience is always like using a buggy
| webapp where you're thinking you need to open the dev panel
| to see if it's erroring silently. Try using any of Google's
| setting panels or the like compared to an old school
| bootstrap app - regardless of actual quality, you constantly
| feel like your interactions with Google are being ignored and
| that's on Material designs floatiness.
|
| Bootstrap _feels_ solid and clean. Heck even the AWS UI
| console - which is broken a ton of the time between corporate
| IAM and just jank - always feels more responsive to your
| inputs.
|
| It's just a terrible system.
| alephnan wrote:
| I worked at Amazon, too. People look down on Amazon,
| especially relatively to Google. But Amazon had their
| priorities straight when it comes to frontend. I worked on
| the team that made shares UI widgets, and it was forking
| off of Bootstrap.
|
| Yes, people may remember Amazon retail being bloated, still
| kind of is sometimes, but those are product design
| decisions separate from the ui components. AWS wise, there
| is just so many products and maybe not enough users / page
| where it doesn't make enough business sense to invest more
| resources.
|
| Actually, Amazon had the most practical designers I ever
| met. They were also closer to the metal in the terms of
| being considerate about CSS bloat.
|
| > interactions don't ever feel "solid" - basically the
| experience is always like using a buggy webapp where you're
| thinking you need to open the dev panel to see if it's
| erroring silently
|
| Funny you mentioned AWS. This is exactly the problem with
| the GCP web console, even though it had a better overall
| visual hierarchy than AWS.
|
| Disclaimer: I also worked on the frontend for GCP
| causality0 wrote:
| Like on Windows where you can't tell where on the top of the
| window you have to click to drag, where lets you resize the
| window, and where does nothing at all.
| deepspace wrote:
| Canada has a similar Web Design System. It is very, very white,
| with a touch of red and blue.
|
| https://www.canada.ca/en/government/about/design-system.html
| vkou wrote:
| As a user, I also think it's fantastic, from a design and
| usability perspective. (I can't speak for accessibility.)
|
| It's snappy, clean, and not at all bloated. I dread the day
| that some MBA introduces Silicon Valley KPI reviews and perf
| metrics to the government, leading to some middle-level
| engineer replacing that simple, clean, bell-and-whistle-free
| design with some built-for-promo bloated garbage.
| dwater wrote:
| I'm not surprised. Lena Trudeau served at GSA and stood up 18F,
| did a 3 year stint at Amazon, and then went to the Canadian
| Digital Service.
|
| https://www.linkedin.com/in/ltrudeau/details/experience/
| game_the0ry wrote:
| Super interesting project, but....uh oh, I see a package.json.
|
| I hope that our federal government has staffed enough experienced
| node devs to keep an eye on any rogue deps that get added to the
| project, though it should go without saying.
|
| And it looks like they use Snyk so that's something.
|
| However, I do not like that you have to email them to raise a
| security issue [1]. To easy for some wannabe product manager
| bureaucrat to suppress that out of fear and embarrassment.
| warpech wrote:
| The term "design system" made a great career in a very short
| time. It wasn't really coined until 2016.
| astroalex wrote:
| That's not correct. A quick search using Google's Ngram viewer
| shows that "design system" peaked in 1986, and had quite a long
| history before that too, starting in the 1960s.
|
| https://books.google.com/ngrams/graph?content=design+system&...
| guilhermeasg wrote:
| I haven't used them myself, but the GOV.UK components look and
| function great.
|
| https://govuk-components.netlify.app/
| systemvoltage wrote:
| I am not a fan of Gov UK framework. For once, the banner takes
| up 50% of the space on my mobile browser.
|
| All design elements and controls are excessively large and
| bloated. Negative space is liberally applied everywhere.
|
| USWDS strikes a good balance.
| mardifoufs wrote:
| Wait why is the UK gov using a netlify.app link? I'm not a web
| dev so I'm not sure if that's common or more convenient
| lloydatkinson wrote:
| Well, why not? It's a great host with a whole bunch of
| features you'd have to invent yourself otherwise like feature
| branch previews. It's a static site/documentation site
| afterall.
| dimitrisnl wrote:
| I believe it's about not using their domain as whole.
| jrochkind1 wrote:
| If I wanted to appear/be
| professional/institutional/official I'd use a custom domain
| though. Which i assume netlify supports, let's look... sure
| https://docs.netlify.com/domains-https/custom-domains/
|
| In this case to a proper government domain... aha, I bet
| there's some policy against pointing .gov.uk hostnames to a
| third-party platform?
| sodality2 wrote:
| >In this case to a proper government domain... aha, I bet
| there's some policy against pointing .gov.uk hostnames to
| a third-party platform?
|
| Some guidance that might be relevant:
| https://www.gov.uk/guidance/use-your-govuk-domain-
| name?step-...
| jrochkind1 wrote:
| Doesn't seem to rule out using a .gov.uk domain name for
| something hosted on netlify.
|
| I agree it looks cheesy and makes me wonder if it's
| really official government documetnation, without a
| .gov.uk hostname (and SSL cert, naturally).
| ChrisArchitect wrote:
| They're not, dunno where that other link came from but it's
| not the official. Sneaky
|
| https://design-system.service.gov.uk/components/
| ChrisArchitect wrote:
| https://design-system.service.gov.uk/components/
|
| where did you get that other url
| guilhermeasg wrote:
| Just did a quick search on GitHub. Turns out the one I picked
| is from the DfE org:
|
| https://github.com/DFE-Digital/govuk-components
| dflock wrote:
| That's the Ruby/Rails components, mostly.
|
| The Design System is here: https://design-
| system.service.gov.uk/get-started/
| bluetwo wrote:
| I have used this several times, and I have to say I really like
| the lightweight setup of the V1 version of this and can't stand
| the V2 version they now support.
|
| The V1, which you can still download, just works so well out of
| the box it is amazing. It adds styles to the base tags and is
| easy to just drop into an html site you are already working on.
| You only have to add classes when you need to do something
| different than the defaults.
|
| V2 makes you add classes everywhere, which means content managed
| by HTML editors like CKedit won't work without extra pain.
| ChrisArchitect wrote:
| Anything new here?
| bxclltkfz wrote:
| ramesh31 wrote:
| 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.
| robertoandred wrote:
| There's actually tons of JS in there to control interactivity,
| which therefore limits how well the system can be integrated
| into various frameworks.
___________________________________________________________________
(page generated 2022-03-29 23:00 UTC)