GOV.UK AdobeXD Wireframing Kit
AdobeXD (Adobe eXperience Design) is a free rapid wireframing and prototyping tool that places emphasis on performance and consistent feature updates. With market leading prototyping features (tap, drag, time, voice and key & gamepad triggers) as well as complementary actions (transition, overlays, auto-animate and voice playback), XD gives you a reliable platform for building interfaces that encompasses both traditional and modern interactions.
This blog will help you to understand how I compiled GOV.UK’s design system within XD using its powerful components update.
Mockups or Code ..?
The GOVUK design system provides a prototyping kit, that allows product teams to create government services that look and feel like the eventual end product. You could argue that you can get stuck in the prototyping kit pretty much straight away and crack on with user research. However, personally I’ve found working within design tools outweigh the benefits of diving into HTML prototypes straight away, let me explain why.
Generate ideas quickly
Working in a fast paced environment, as a designer you would need to walk the stakeholders through early concepts quickly but thoroughly. Ever heard of “fail fast, learn fast”? Exploring ideas however ambitious whilst also involving everyone in the product team becomes a quick, iterative, collaborative process within a design tool, this all eventually provides direction to both the product vision and design language.
Sparking early discussions
Getting everyone around the same table, talking, critiquing and analysing mockups made within a design tool ticks all the boxes for better team collaboration. Time is a very precious resource, the earlier and faster you can get ideas in-front of stakeholders and team members, the faster you can learn and evolve the design.
No initial setup or markup language knowledge needed
The GOVUK prototyping kit is essentially an HTML prototyping tool, and would therefore require a designer having basic markup and terminal knowledge. For someone who hasn’t been introduced to this before, it could potentially take longer to setup and understand the mechanics behind the prototyping kit.
Why AdobeXD?
I’ve been using the standard Photoshop and Illustrator apps within the Adobe ecosystem for some time now, it seemed like Adobe didn’t really recognise UX or Interaction Design as much as they should have, paving the path for competitors like Sketch and InVision. Bolting on mobile and web artboards in an application that was meant for photo editing didn’t really cut it for me, the following quote from my colleague at Hippo Digital is something I still agree with:
“Dumped Adobe about 8 years ago when they stopped innovating, switched to an insanely expensive subscription licensing and continued to fail to understand interaction design..”
But then AdobeXD came along, introducing Adobe’s vision in a standalone app for interaction design. The community and team behind XD have gained a tremendous amount of momentum within this space, rivalling the likes of Sketch and InVision. I’ve personally been using AdobeXD since its initial beta release (early 2016), and it’s safe to say the platform has come leaps and bounds since then. I could probably write an entire blog or two about XD’s past and evolution, but let’s save that for another time. For now, the two main aspects of XD I’d like to highlight are:
Performance
Performance of AdobeXD was one of the deciding factors for myself to transition my workflow from Sketch. Working within the public sector, file sizes for different design artefacts can become rather large. I’ve often experienced considerable lag and stuttering within Sketch.
I’ve yet to experience this lag within AdobeXD, something that has often been repeated by product managers on the XD team (@ashorten , @laffertybug and @jonathanpimento) to name a few, is unrivalled performance. It is a breath of fresh air when you see a design platform putting their money where their mouth is.
Components
Components were known as symbols prior to the May 2019 XD update . Overriding a symbol previously would override all previous instances. With components, the playing field has changed. Components allow you to use the same UI element multiple times, without changing the master.
Rapid prototyping is crucial whilst working on a public sector project. Synthesising a hypothesis, designing and prototyping a solution and analysing user research has to be iterative and fluid. Components within this prototyping kit considerably reduces the amount of time needed to design from scratch, but rather get concepts out in the wild quickly to be tested and iterated.
Wireframing Kit Structure
Prior to fully adopting XD as part of my workflow, I used Sketch. A massive help while designing government services in Sketch was the kit that Craig Abbott made. It pretty much inspired and motivated me to crack on with a kit for AdobeXD too!
Information
During the course of compiling and getting the wireframing kit in shape, I had a look around the more generic kits that are available. Whilst I appreciate the fact that I was looking at wireframing kit examples, and not full design systems, the majority if not all did not have any justification or guidance for the components within the kit.
This is something I wanted to implement, a snapshot of guidance into why and where that component should be used, to better inform designs moving forward.
Components
Like I mentioned previously, the components feature is now insanely powerful, stable and efficient. The UI elements within this kit are sectioned into three aspects: colour, typography and components.
A massive advantage to having the assets panel within AdobeXD is the search functionality too. There are 120 components within this wireframing kit, trawling through the library to find the right UI element can be tedious. The search functionality allows you to firstly select high level sections e.g. components, once selected, you can then search specifically for unique components that live within that specific section e.g. bulleted-list.
The GOVUK AdobeXD wireframing kit is free and open for anyone to download and start using!
Any feedback? You can catch me on Twitter: @SulyyK
Visit the following link to view the prerequisites and download the kit:
