13 ms·
The Gov.uk Design System is now live
- nonrandomstring 5y agoA big success. I am impressed by the quality of UK go websites.
- chanandler_bong 5y agogov.uk is the best, consistent, and usable government portals I have ever used. Kudos to GDS on their work and transparency.
- 5350-uiop-1130 5y agoGlad they shared this. Not a fan of the "govuk" prefix tbh.
- wackget 5y agoYeah, well, govuk yourself.
- deleted 5y ago[deleted]
- the_other 5y agoAn aside: Assuming that page was authored using the design system... can anyone tell me why the leading/margin above a heading is shorter than that below it. To me it makes the headings appear to be more connected to the paragraph above them than below, messing with my semantic overview.
- petepete 5y agoI've noticed this on the blog too. The Design System itself has better spacing. Take a look at this page as an example: https://www.gov.uk/guidance/living-safely-with-respiratory-infections-including-covid-19 https://www.gov.uk/guidance/living-safely-with-respiratory-i...
- the_other 5y agoThat’s more what I expected. Thanks!
- Apfel 5y agoWould be nice if they'd get around to developing a standardised calendar-based date picker component for, say, appointment booking at some point. Feels like a huge gap in their offerings.
- whylo 5y agoIt's on their backlog: https://github.com/alphagov/govuk-design-system-backlog/issues/17 https://github.com/alphagov/govuk-design-system-backlog/issu... Would definitely be nice to have
- tpict 5y agoIIRC this is something they’ve investigated for years, but the prototypes didn’t stand up to a simple day/month/year input group in usability testing. Date pickers are hard to do well!
- epolanski 5y agoI really dislike calendar inputs, they are almost always confusing to use. Their inconsistencies moreover lead to further confusion as each calendar seems to be very different.
- bambataa 5y agoWhile we’re discussing datepickers, the new iOS one annoys me. When I have to put in my birthday, it defaults to the current date and wraps any value past that back to today. So I put in my day and month of birth, have it wrap back to today and then start again by setting the year first. I assume this is configurable and developers just forget to set it, but it’s a weird default.
- als0 5y agoI've enjoyed reading their thoughtful guidelines for common forms and pages. On the whole, it all seems like good advice that can be applied to any website. They also talk about the pain points and potential research areas. Here's one example https://design-system.service.gov.uk/patterns/gender-or-sex/ https://design-system.service.gov.uk/patterns/gender-or-sex/
- deleted 5y ago[deleted]
- 2Gkashmiri 5y agohttps://github.com/alphagov/govuk-design-system-backlog/issues/69 https://github.com/alphagov/govuk-design-system-backlog/issu... am i the only one seeing this tongue-in-cheek thing?
- caffeine 5y agoBased on the issue number, tongue is not in cheek…
- 2Gkashmiri 5y agoand yet im the one being downvoted. this isnt funny
- DiggyJohnson 5y agoBut is it a problem worth solving?
- NoGravitas 5y ago
- ibejoeb 5y ago>if your service allows people to jointly apply for something, you might need to refer to both the user and the person they’re applying with. In these cases, use the person’s name, ‘they’ or ‘their’. This is incorrect. We are talking about government services. Language needs to be precise. There are cases where there is a difference between an individual, a couple, and a group of 3 or more. There is also a very tricky case for non-native speakers and those that are not aware of the culture from which these nuances arise. The guidance must direct the implementors to use specific language. If confronting a situation in which a pronoun gives rise to ambiguity, do not use a pronoun. So, "if your service allows people to jointly apply for something," define it. Is it "your service allows two people to jointly apply," or "your service allows a group of people to apply," or something else? Using "they" is inappropriate. Something like "you and the other individual" is appropriate.
- pcurve 5y agoHere's their matching Design System artifact in Figma. https://www.figma.com/community/file/946837271092540314 https://www.figma.com/community/file/946837271092540314
- lvl102 5y agoI like this vs the US designs.
- rsstack 5y agoWell, if you don't like our government's design system you might as well leave the country! /s What do you like about this more? The visuals, the documentation, the guidelines, the code?
- 23andwalnut 5y agoWhich aspects of this one do you prefer over USWDS?
- oceankid 5y agoI've been building prototypes with this. It is everything good web design should be– UI with good contrast, legible type and accessibility patterns. My only gripe is perhaps if their teams made example pages from their own use cases– sub-nav from the components page, charts/references from their Covid dashboards. Great work overall!
- azmodeus 5y agoWould love to see how some prototypes look with it if you want to share any :)
- oceankid 5y agoThese are sort of how they started in an afternoon. Then folks were easily able build on top... https://imgur.com/a/XARRn1n https://imgur.com/a/XARRn1n
- WickyNilliams 5y agoSome departments open source all their work, if you're interested in browsing real apps built to GDS standards. I previously contracted at the Office of National Statistics, and it was the case there that everything was built in the open on github. For instance this django app runs all online surveys for the ONS, including the national census! https://github.com/ONSdigital/eq-survey-runner https://github.com/ONSdigital/eq-survey-runner
- robin_reala 5y agoNot sure if you used the Prototype Kit, but that’s another extremely useful product from GDS: https://govuk-prototype-kit.herokuapp.com/docs https://govuk-prototype-kit.herokuapp.com/docs
- reaperducer 5y agoI'm a little disappointed that gov.uk has custom date inputs specified. I think it's time for web sites to stop doing custom date inputs. Even Safari finally has a native date input. The worst are the sites that make you enter a day from a drop-down menu. Second-worst are the ones that are asking for your birth date as input, but the default drop-down for the year is the current year. As if a six-month-old baby is signing up for a car loan. Third-worst are the ones that make you pick a day from a drop-down. Bad programmers do this because they're bad at input validation. Well, with your drop-downs I can enter February 31. So now you've got two problems. I once saw a government web site that had you pick each number from the date input as a separate drop-down. Who builds these things?
- daveoc64 5y agoI agree some of the choices are questionable, but they have done quite a bit of research in reaching what they currently use: https://github.com/alphagov/govuk-design-system-backlog/issues/42 https://github.com/alphagov/govuk-design-system-backlog/issu... https://designnotes.blog.gov.uk/2013/12/05/asking-for-a-date-of-birth/ https://designnotes.blog.gov.uk/2013/12/05/asking-for-a-date... https://github.com/alphagov/govuk-design-system-backlog/issues/17 https://github.com/alphagov/govuk-design-system-backlog/issu...
- reaperducer 5y agoBut, they didn't test the native date inputs, just drop-down and text options. So my point stands for now. At least they do research and document. Thanks for those links. I build my web sites based on first- and third-party research, but work in an organization stuffed with managers who want our sites to look more like TikTok, because that's what they spend most of their time on, and think we don't look like a real company if we don't have pop-ups and garrish colors, and things flying around the screen. We're a healthcare company. I had one manager tell me that the company's web site didn't look like a "real" web site because it didn't have lots of little placeholder spinners. Explaining that they're not needed because the page loads in under a second got me a look like when you're trying to explain temporal physics to a collie.
- eric4smith 5y agoVery good work. I’ll definitely be using this on a project we are starting soon instead of tailwind. Sometimes to move fast one needs opinionated constraints. That’s why bootstrap was so popular and still is.
- faraaz98 5y agoComing from Rails, sensible defaults are one thing that I've sorely missed
- robin_reala 5y agoA well-written design system is a godsend for end-user consistency, especially for people who use assistive technologies and are easily forgotten about by inexperienced teams. It also means that teams can focus in on the problem they’re actually trying to solve, and stop obsessing over the common components. I was only around for the first six months or so of this project, but I’ve taken so much of what I’ve learnt into my current design system, and I continue to reference GDS’s continuing work as the gold standard for researched user interface patterns.
- miohtama 5y agoSome of UX guidance is really good and should be in fact part of the HTML spec. > Do not use <input type="number"> unless your user research shows that there’s a need for it. With <input type="number"> there’s a risk of users accidentally incrementing a number when they’re trying to do something else - for example, scroll up or down the page. And if the user tries to enter something that’s not a number, there’s no explicit feedback about what they’re doing wrong. > Do not set the inputmode attribute to decimal as it causes some devices to bring up a keypad without a key for the decimal separator Also, sad to realise that some of core UX features for HTML, like entering numbers, is so broken three decades later.
- chefandy 5y agoThe whatwg.org living standard has a note: https://html.spec.whatwg.org/multipage/input.html#when-number-is-not-appropriate https://html.spec.whatwg.org/multipage/input.html#when-numbe... > The type=number state is not appropriate for input that happens to only consist of numbers but isn't strictly speaking a number. For example, it would be inappropriate for credit card numbers or US postal codes. A simple way of determining whether to use type=number is to consider whether it would make sense for the input control to have a spinbox interface (e.g. with "up" and "down" arrows). Getting a credit card number wrong by 1 in the last digit isn't a minor mistake, it's as wrong as getting every digit incorrect. So it would not make sense for the user to select a credit card number using "up" and "down" buttons. When a spinbox interface is not appropriate, type=text is probably the right choice (possibly with an inputmode or pattern attribute).
- blondin 5y agoi love these government design systems. both the UK gov design system and the US web design system (https://designsystem.digital.gov/ https://designsystem.digital.gov/). i am always battling with bad UX. that's because i have default settings to help me have a better web experience. once in a while i come across websites designed with care and better experience for the end users. and they stand out. kudos to the people behind both design systems. you are doing way better than the loud voices we have in the field. ps: can we get them to adopt a naming convention? (country code + web design system) uswds, ukwds, jpwds, etc...
- auggierose 5y agoIs Nunjucks a thing now? First time I hear about it.
- Apfel 5y agoRealistically, it's just Jinja2 ported to js. If you've ever worked with Django or flask it's very quick to pick up.
- vatotemking 5y agoIts been there ever since nodejs was around. Ive been using it for a long time now. I love it as a template engine.
- bennyp101 5y agoI've been using Carbon Design System for the consistent look and feel, but there is a lot of good content on this that can be applied as well. Each component describes when you should use it, how to do things, and considers accessibility from all angles. I'll be having a red through later!
- drchaim 5y agoAlways I go to any .gov.uk website I only feel envy comparing it to the .gob.es I need to deal with from time to time.
- AlexDragusin 5y agoI agree with the Design System and I apply simplicity and user centric design throughout my sites as well, for example at Ypson [1], I also advocate for this through Leanternet [2]. Wish more people would go against the flow of multi megabytes sites with large hero images and endless frameworks, worst offenders being the ones who load entire frameworks to just display a few lines of text. Please, focus on the user as your primary goal of your website, the rest is fluff and can be trimmed. Thank you! [1] https://www.ypson.com https://www.ypson.com [2] https://www.leanternet.com https://www.leanternet.com
- osigurdson 5y agoI'm not a UI designer but to me it looks a bit like a website designed in Microsoft Word. Just a datapoint.
- hnhg 5y agoThink of it more as a standardised toolkit for making things that look and behave consistently, for a wide range of use cases and audiences.
- rocgf 5y agoGovernment websites are not supposed to look good or to be at the forefront of design. The percentage of people with disabilities is well within the double digits, and government websites are supposed to work for them as well. What is important is accessibility, clear access to information, good UX.
- madeofpalk 5y agoI think gov.uk shows you can build websites that do look good, and are very usable by as many people as possible.
- yreg 5y agoWhy does the sticker in the photo say "GOV.UK Design System — Live 19 November 2021"?
- robin_reala 5y agoPotentially related to the quote: “As it turns out, we did not pass our live assessment the first time.”
- uncletammy 5y agoThis is wonderful! For me, accessibility has always been kind of an afterthought. Not because I don't think it's important but because I don't really have the knowledge of best practices. I hope someone creates a generator for it because I would easily make this my standard front-end for all new projects. You can check out the code at https://github.com/alphagov/govuk-frontend https://github.com/alphagov/govuk-frontend
- ChrisArchitect 5y agoThe design system that launched in 2018 and went 'live' in Nov 2021, is now....live? Sure ok Still legends.
- kjerzyk 5y agoAny gov services must go through very detailed assessments. Quite often moving from "public beta" to "live" takes years - lots of data is required. So yes, they did only just go live, they were in beta :)
- osigurdson 5y agoThis is what it looked like in 2017. https://web.archive.org/web/20170119063846mp_/https://www.gov.uk/benefits-calculators https://web.archive.org/web/20170119063846mp_/https://www.go...
- AtNightWeCode 5y agoI understand that there are high WCAG compatible demands but overall design vise, it seems a bit poorly balanced and sometimes confusing. Not bad, not great. The animations though… Please remove. Also remove underlines from heading like elements. If there is a confusion in the context if a heading is clickable or not underlines only adds to that confusion.
- notoverthere 5y agoWhich animations are you referring to? I don't think I can find any components with animations in the GOV.UK Design System <https://design-system.service.gov.uk/ https://design-system.service.gov.uk/>. Likewise for underlines on headings – I can't see that in the style guide.
- AtNightWeCode 5y agoThe animation when you click links. I was thinking that they are dogfooding and the blog has those types of headings.
- ricardo81 5y agoBetter than most. I'd recently complained about my local Council (in the UK) failing to provide accessible information. If you're into horror shows then feel free: https://eyesiteview.co.uk/galacampus/informal-consultation/explore.pano?id=1 https://eyesiteview.co.uk/galacampus/informal-consultation/e... It previously used to 301 if you were on Linux and a whole host of other user agents saying "you cannot view this page due to incompatibility". After 30 years of the web, publicly funded information should be available to all.
- Eduard 5y agoIt's awful! The VR navigation is already nonsense, but the cherry on top is clicking one of the info bubbles and then being presented with a framed PDF document.
- svnpenn 5y agoWell done. Someone should share this with the current Stack Exchange designers, since they don't know what the hell they are doing.
- monkeydust 5y agoAs a UK taxpayer reading this gives me a rare feeling of being proud of where my money is going.
- hdlothia 5y agoHow does this compare to the US one? Thinking of using one for my next project
- systemvoltage 5y agoI am personally extremely repulsed by UK GDS. It is tremendously bloated, there is no visual cohesiveness and negative space is liberally applied everywhere. Typography is haphazardly sized. Not sure why people think this is a good trend. It is possible to design compact, well functioning and accessible design frameworks. UDWDS is far better in this regard: https://designsystem.digital.gov/ https://designsystem.digital.gov/
- Eduard 5y agoTabs in smartphone screen size portrait mode looks wrong, e.g. tablist presentation is different, and the tabs container has no visual wrap: https://design-system.service.gov.uk/components/tabs/default/index.html https://design-system.service.gov.uk/components/tabs/default...
- petepete 5y agoHow do you mean wrong? It's meant to look like a small table of contents that links to the relevant subheading beneath.
- Eduard 5y agoIt's wrong because tabs are not meant to be presented as a small table of contents. Viewing the same page in landscape mode/bigger screen does show tabs. Tabs are meant to be presenting only the currently selected option, one reason for that being concise in a constrained environment. Their tabs implementation does the wrong/opposite thing when it is the most useful (small screen). Also, it is confusing to have a completely different presentation depending on screen size.
- petepete 5y agoRendering them inline might not be ideal but user research has shown that having more than a couple of tabs on mobile leads to problems. They are exacerbated when the tabs wrap on to multiple lines - or heaven forbid, require horizonal scrolling. From a usability point of view rendering the content online makes sense. It has the added benefit of working well for people who have disabled JavaScript too.
- kavehkhorram 5y agoGlad to finally see gov design finally getting close to private industry!
- Eduard 5y agoThere is so much praise in this comment section, that I gotta be the grumpy negative guy: It isn't good yet: * The brutalist/minimal style is so reduced yet blown-up I find it confusing to grasp sections. E.g. on first visit (incognito) visiting https://design-system.service.gov.uk/styles/ https://design-system.service.gov.uk/styles/ all this monster cookie notice, footer, whitespace leaves the actual content maybe just 10 percent on a regular desktop screen. * Tables ( https://design-system.service.gov.uk/components/table/ https://design-system.service.gov.uk/components/table/ ) are so minimalistic (no vertical column separators, no color shading to context, no visual scrollability hints), plenty of scenarios exist where visually reading tables becomes hard. You need visual separations between columns when the header is far away (and non-sticky). Also, all this empty table void does not communicate to mobile / small screen users that they can horizontally scroll tables. The mini examples on https://design-system.service.gov.uk/components/table/ https://design-system.service.gov.uk/components/table/ don't show these apparent issues. * Would you have guessed "HTML"/"Nunjuck" have tabbish behavior and reveal content on-page on click? They look like regular navigational links. * HTML code is way too verbose and there is plenty of unnecessary nested div soups. What is the need for `class="govuk-footer__meta-item govuk-footer__meta-item--grow"`? Do you need to be so specific? (Hint: you don't; a wrapper class is often enough for any further (CSS/JS) matching). https://design-system.service.gov.uk/components/footer/ https://design-system.service.gov.uk/components/footer/ * Does not allow more than one skip link ( https://design-system.service.gov.uk/components/skip-link https://design-system.service.gov.uk/components/skip-link ), as they are visually overlapping. * https://design-system.service.gov.uk/components/inset-text/ https://design-system.service.gov.uk/components/inset-text/ There are dedicated HTML elements which semantically fulfill this div component's purpose (`blockquote`, `aside`...) * File upload component: No value added to what browsers have out of the box ( https://design-system.service.gov.uk/components/file-upload/ https://design-system.service.gov.uk/components/file-upload/) * Buttons and color: No matter if default (green), secondary (grey) or warning (red): the moment these buttons receive focus, they all get the same focus color yellow, thereby no longer communicating their intent visually. * Accordions, they are just confusing: where does a accordion's content start and end? Put some borders around it. The over-the-top focus highlight adds to this confusion https://design-system.service.gov.uk/components/accordion/ https://design-system.service.gov.uk/components/accordion/ * ... Which brings me to the last point: The screaming focus yellow highlight. This and other stuff in this design system is bleeding-edge accessibility conformity: crank accessibility to 150%, help some with it, but also leave others confused by it. Maybe think about `:focus-visible` instead of `:focus`. But hey, Chrome Lighthouse gives 100/100 ;-). To end on something positive, I checked with NVDA and keyboard input superficially (e.g. search box) and accessibility/ `aria-` markup looked fine.
- kranke155 5y agoThe GDS is fundamentally the best UX team I’ve ever seen in the wild delivering large projects consistently.
- Stevvo 5y agoI despise GDS Transport. A font deisgned to remind you of your powerlessness. The symbols of oppression.
- SeasonalEnnui 5y agoI enjoy using gov.uk services and it is due to this cohesive clean style. It is not perfect, example: I’ve encountered long questionnaires that show just one question per page so it feels endless and unrelenting, however it is reassuring to know that my parents and other demographics could comfortably access the same services.
- msaharia 5y agoHi, is there a wordpress theme with this design system that we could drop in an existing website and benefit from it?
- minroot 5y agoWhy does it have a icon at the bottom left corner for cookie agreement, I have made the decision when I visited it for the first time?