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!
> 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.
I vaguely remember a pizza delivery company facing a fine, because its website actively broke screen readers, and therefore was considered as discriminating against the blind.
Memory says a blind would-be customer complained loudly, but was ignored before they engaged the authorities with a formal complaint.
Honestly this all sounds very old fart “they don’t build them like they used to” and “back in my day”. That isn’t to say I disagree with the sentiment entirely. But:
A hidden button doesn’t clutter up what the user interacts with so long as the user knows how to find the button. I like clever interfaces after I figure them out. I don’t like them before because they make me feel stupid. But as soon as they make me feel smart after I figure them out, I suddenly enjoy them so long as they meet the second goal: make me productive. Take Snapchat for example. It has a really clever UX where you tap on your face and it will bring up filters. I honestly don’t know if there is a dedicated button for this somewhere. I certainly felt dumb right up to the point where someone showed this feature to me and and then it felt very neat.
So maybe when the pendulum swings from clutter-free to discoverable again we could find some compromise between 1000 buttons on the screen that all do something and no visible buttons and figure out clever AND discoverable interfaces.
And before yet another startup with their idea for a UI walk through GUI pops up, no those things aren’t the answer. They suck and I would prefer they didn’t exist. If your UI needs it, you designed a bad UI.
The problem starts if you have to make assumptions about the ability of the user to figure things out. Smart user interfaces too often leave people behind because it is far too complicated to test UX for discrimination. Good design guidelines like the OP help. However, I agree there is the slight possibility for smart UX: First build it with your grandma and a user with a switch input in mind (a11y personas) and let the kids do the learning curve...
> It's kind of sad when the supposed experts choose to badly screw up stuff that had already been figured out.
Most "experts" I meet know... nothing. They don't know basics of their jobs, they don't think how their design / code will have effect for people other then... them.
I'm not a web designer but I personally don't have any issue with "modern" UI design. It looks clean to me and I don't have any trouble distinguishing things. Just a data point.
I've been doing software engineering for about 16 years now and 10 of them have been specializing in design, UI and UX. Modern UI principles are good. A stark improvement from the days when hapless engineers were in charge of design because nobody considered it. There are always bad trends and bad apples, but they stick out a lot more now. Mostly because they're contrasted so sharply with good design everywhere.
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.
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.
> 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.
It's worth pointing out that HNs 's heavily downvoted posts are intentionally hard to read. Thats hardly a gotcha. Now whether they should be is a whole different question.
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.
Contrast ratio is not a good name to describe this concept. A contrast ratio is a decimal number, while a "magic number" is an ordinal value. Also, a contrast ratio has a clear definition from WCAG perspective, and it would be even more confusing to use the same term for two very related topics (magic numbers are based on WCAG contrast ratios).
"Magic number" is not good either, for the reasons you've mentioned. But while doing my research for this topic, I couldn't find any better alternative, nor did I want to come up with my own term. I think this topic is niche enough, so we don't have to overthink it.
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.
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.
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.
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.
I remember back before Material design, I think it was called "Polymer", and how it generally meant I needed to be extra careful because reimplementing basic browser behaviours in JS meant I was never sure if typing text in a textbox will work, not to mention dropdowns and such...
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
A lot of fashion trends can also come from advancements in materials or changes in their cost which allow new kinds of experimentation. As an example (not necessarily positive) fast fashion was enabled by ruthlessly cutting costs of production. Polyester was really big in the ‘60s after its commercial release. And so on.
> 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.
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, or one of those San Francisco Uber drivers who mention their glory days as a tech executive during the Dotcom bubble, but goes in a circle of buzzwords when you ask them about the technical details.
> 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. This is not 19th century Paris nor some developing country where rich people go to a local tailor who has a range of fabric in house and makes clothing from scratch.
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, deciding what the art direction for advertising should be, managing / taking risks. Nowadays many of them don’t even design or are capable of working with the garments. 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.
Moving past how misunderstood the analogy is, you’re not seeing the value in brand identity and uniqueness. Coca Cola is mostly branding.
> 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?
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.
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.
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.
>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.
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?
I would find real peace of mind in a design system maintained by a government that guarantees compliance with that government's accessibility requirements.
This one's the real answer (or at least a substantial part of it). On VA.gov, the USWDS components (and their composition into a modular forms system) was a large part of making sure that applications met the accessibility needs of the general public.
Source: I was the VA.gov engineering lead for awhile
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.
Considering that accessibility standards worldwide are mostly pushed forward by governments, even when there's action outside of it it's usually due to "government put laws stating specific requirements". While accessibility is usually afterthought unless directly whacked by a fine, and you can't just use "what's already available".
As for streamlining - this is streamlining, making it so that multiple entities within government that all need to build websites can use a common shared resource instead of duplicating the work (even "going shopping" for external solution takes valuable time).
> 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.
You really ought to check out how fast this design system has iterated to date:
> 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.
First, I'm not sure why you think accessibility doesn't fall under streamlining government operations.
Second, the folks at USDS are top professionals from industry and are limited to a four year "tour of duty", so they aren't lifelong government employees.
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!).
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.
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.
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.
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.
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.
>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.
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.
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).
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.
This is my side project, I'm a dev currently contracting at DfE. This library and the form builder[0] make working with the design system easier for Rails devs.
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.
former netlify employee here. all sites on netlify have a netlify subdomain, that doesnt go away when you add a custom domain. its just useful for deploy previews and stuff, content is basically the same. nothing untoward here
I think we're misunderstanding each other. I'd expect an official UK government site hosted on netlify to have a custom .gov.uk domain and to use that to refer to the site. Same as most large commercial enterprises probably do, right? Instead of using the netlify subdomain as the public host.
You have to remember who this is being designed for - citizens wanting to use government services, who may not necessarily have great eyesight, great computer literacy or even literacy in general.
The last thing you should ever want is for someone to fail to apply for welfare benefits because they were overwhelmed by the website design.
I agree that the cookie banner could be smaller though.
Few points after reading the comments. From designer pov:
- Although the definition of a Design System is somewhat loose, it can be stated that Bootstrap is a NOT a design system.
- To reduce Design System to a branded collection of technical assets is simplistic. You are still not getting it.
- The general idea of Design Systems is much more than organising some components for one medium (web). The execution of the system might or might not be good.
- In order to do design (UX, UI, ...), you don't need to be "a designer". However, the fact that it is possible to use something like Bootstrap does not make your design (outcome) work automatically. More often that not, the work done by non-designer is not as good. The craft exists. Thinking that "the problem has been solved already" means you don't actually understand the full problem. Like with anything, some aspects are re-solved continuously. Maybe unnecessarily. Maybe not.
- For many it would probably be easier to think that all design is design. Any act of diminishing some aspect of design can be mirrored by asking yourself if you think your design tasks can be done by anyone not paying appropriate attention. E.g. if you are a programmer, imagine a random stakeholder would quickly put together your data models and API designs and call it a day. Would it work? Would it scale? Would it be enough? Maybe.
- Any design can be challenged. Complaining about stakeholders is lame. Check your argumentation skills and asses if you have actually challenged the design when you had the opportunity.
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.
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.
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.
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.
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).
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.
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.)
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.
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?
They don't. That's is why icon-only items (links, buttons, …) must always be explicitly annotated, using aria- attributes. You can do this with any icon technology. You wouldn't annotate the icon itself.
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.
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.
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.
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.
Are you sure about the meaning though? Afaik, it started to be used in the context of UX/UI starting from the book "Atomic Design". That is also the earliest reference in the Wikipedia article.
Of course, there were systems in graphic design used earlier [1], but before 2016, the thing in the OP would be called "The US Web Design Patterns" or "...Language" or "...Toolkit" or "...Library", for the lack of a common term.
I'm not sure I understand the distinction you're drawing between UX/UI and graphic design. To me it seems obvious that the concept of a "design system" has been around for a while and has been applied universally in many sub-fields of design.
It doesn't seem super relevant whether or not there is a CSS/JS framework to support a design system — that seems more like an implementation detail.
> The Australian Government Design System has been decommissioned and will be taken down on 30th Sep 2021. Visit our community page for more information
And the “community page” link is dead. This is sad, both because it was abandoned and also because of how much time and money must have gone to waste.
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.
Dark mode can be very challenging, especially alignment-wise if the design system is used in applications that also use some custom components or styling.
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!