DVLA Design
What's this? The DVLA where possible follows the guidance for GOV.UK services, and uses the current best practice and most appropriate elements as discussed on the Design Elements hackpad.
Where specialist needs have presented themselves, this document aims to provide consistent guidance for use on DVLA services.
Resources - use these first
Extra DVLA resources
Vehicle registration marks
Usage: Where the mark is presented to the user, outside of longer copy, consider presenting the mark styled like a physical number plate.
Benefits: User recognition is high, the distinctive style allows it to be presented without a label telling the user it is a vehicle registration mark.
Implementation: The mark looks best when presented at medium to large headline sizes:
CU57 ABD
300%
CU57 ABC
200%
CU57 ABC
150%
CU57 ABC
120%
A class .reg-mark is available for inclusion in markup. The border width and rounded corner are measured using em units, so they scale with the font size. Use of a non-breaking space between character chunks is recommended.
The UK number plate font is available as a base64 encoded webfont and can be added to pages that need it using:
Numberplate Font encoded as base64 in a CSS file
And where it's needed in your HTML use:
<link href="/public/stylesheets/numberplate.css" media="screen" rel="stylesheet" type="text/css" /> or just include in your main CSS styles. File size is minimal, just 48k, compared to 270k for the GDS Transport font used across the site.
Fallback to New Transport or sans is acceptable.
More on the way GDS Transport has been embedded as a webfont (which is similar to this usage) by Chris Heathcote on the GDS Blog.
Powerpoint has been a good place to start before diving into code, or when you have no other tools available. It's good for making screengrabbed mockups and allows simple clicks and flows.
Here's a good starter GOV.UK styled template: Prototype-Template.pptx
Adobe Creative Suite is really big and expensive, and you probably only need 5% of the functionality. Sketch app has that 5% covered, and is fast and lightweight. Try it out.
Here is a file with many of the GOV.UK elements created using Sketch you may wish to use for wireframes and mockups: GOV_UK_Sketch_parts.sketch
There are lots of different text editors around, but many people like Sublime Text to edit multiple files in one project. Try it out.
Fonts for GOV.UK sites are Transport in light and bold, ask someone on your team or from GDS Design for the files if you need them, they can't be distributed widely. A UK numberplate font for use in design apps can be downloaded: UKNumberPlate-2-webfont.ttf
To use the GOV.UK prototyping toolkit you need to get a few command line tools working.
Homebrew is a useful package manager that helps you install things. Put this into a terminal prompt to install:
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Boxfresh Macs: You will likely get asked to install Xcode command line tools from Apple before continuing.
Git is used to manage your files, and upload to servers. You probably have it: find out how new yours is using git --version and if very old ie. version 1.8 you can use brew upgrade git to be newer.
Node.js is used to build websites, you might have it - find out using node -v and if you need to use brew install node to get it.
NPM should have come along with Node, but let's check with npm -v and if you need to use brew install npm to complete.
Heroku is very useful as a simple web server to host your work online. They have an installer to download here - https://toolbelt.heroku.com. You'll need to set up a free account on Heroku and use the login details to complete the process.
Github is also essential to get and share code. Create a free account at http://github.com and get started by cloning this project, see below.
If you are new to using a command line, FISH is a really nice improvement on the standard terminal that comes with your Mac. Download it here and replace the default, or just type chsh -s /usr/local/bin/fish after installing to do it.
You may need to open System Preferences > Security & Privacy and allow the installer to run.
Or in a terminal use git clone https://github.com/paulpod/dvladesign.git
Simple pages
Get this project off Github. https://github.com/paulpod/dvladesign
Or in a terminal use git clone https://github.com/paulpod/dvladesign
After cloning, move to the new directory "dvladesign" with cd dvladesign and run npm install which will get all the additional parts fresh from the internet.
Node-SASS should get installed with that, but on our box-fresh macs we had to add it manually using npm install node-sass to get things working.
Use node start.js to start your local private webserver - note the address at the end messages. Now visit http://localhost:3001 in your browser and you should see this page, but running locally from your machine.
Edit HTML pages using Sublime Text by opening the "dvladesign" directory in the app. You'll see a file list on the left hand side. Your pages are in app/views/examples/elements and your CSS, images and stylesheets are in app/assets.
Don't edit the ones in /public as those are temporary, and are deleted each time you restart your webserver!
Flow, Forms and Facts
Many of the pages you will design and prototype will be one of these. Below are a few simple pages that combined can make an early prototype of most things.
GDS has recently provided improved guidance on form structure, which is a good starting point to crack most tough problems.
Basic input page : basic-1-field.html
The page features a black top bar, only containing the name of the service. We have found using this space for sub-navigation or other functions does not work, users do not see it.
Following the one-thing-per-page pattern, this page asks for a document reference number, using a stylised illustration of the document it comes from.
There is some javascript code to only allow numbers to be entered into the field, and a javascript helper called Parsely checks the number is there and that it contains 16 digits and prints a message if not.
The page also features a small back button at the top. Research shows users do not like to use the browser back button within forms, they sometimes fail. Adding this one, it provides confidence that it will work and they can correct mistakes.
There is one button styled in a green box, the main action is to continue.
Code in routes.js
/* Pass nextpage for Basic Flow control */
app.get('/examples/elements/basic-flow', function (req, res) {
/* line above starts a new JS function, receives the form action event from the webpage */
var next = req.query.nextlink;
/* this line pulls out the name of the next page that was sent with the weblink */
res.render('examples/elements/' + next, {});
/* this line renders a new page based on the HTML of the file sent as the next page */
});
/* ends the app.get javascript function */
Basic branching page : basic-2-buttons.html
The page features a black top bar, small back button at the top and follows the one-thing-per-page pattern. Here we are making a basic choice between 2 options, only one can be selected.
There is some javascript code that does complicated things with the styling of the buttons, but this allows you to keep the HTML simple with one label and input per option.
Again only one button is styled in a green box, the main action is to continue.
Code in routes.js
/* Chooser for Basic Branching control */
app.get('/examples/elements/basic-branch', function (req, res) {
var next = req.query.nextlink;
/* this line pulls out the filename of the next page, sent with the weblink */
var branch = req.query.branch;
/* this line pulls out the name of the branch from the input buttons */
res.render('examples/elements/' + next + '-' + branch, {});
/* this line renders a new page based on the HTML of the filename + branchname */
});
/* ends the app.get javascript function */
Basic playback page : payment-card.html
The page features a black top bar, small back button at the top and plays back a chunk of the information already provided by the user before stepping into the next logical process, ie. payment.
We do some styling on this page to make it easier to read, namely putting data into a list, with two regularly spaced columns per line.
Where we have a VRN / Reg Mark standing alone (not in a line of text) we can style it to look like a real numberplate. This makes it easier to recognise for users.
We also use the GOV.UK standard 'help notice' to clearly warn the user of important details.
Progressive disclosure : basic-3-prog.html
This page features a progressive disclosure function, which allows details to be minimised on a page. A click to open will show the contents. This is a good way to fufill the needs of a minority of users within the main flow of a service.
Putting it together into a workflow
You'll get into a flow of making a change in Sublime Text, having a look in your browser, and repeat. When you hit a point where 'things are good' it's an idea to make a 'commit' which is like a little marker you can roll work back to later.
In the terminal either stop the running Node process with CTRL + C or (better idea) ⌘ + T for a new tab, and cd ~/dvladesign (or wherever you put it).
Use git add . -A which collects all your changes to files, including deleted ones. Then use git commit -m "Write a meaningful description of your changes here" to record your changes.
This is sometimes a good point to put your prototype online, or share it on github, or both. You can create a new Heroku public webserver using heroku create once.
Enter git remote --v and you can view your project's 'remotes' ... places other than your local copy.
Then use git push heroku master as often as you want to upload and update your public server. It'll have a URL something like https://damp-sofa-2097.herokuapp.com but you can change that.
This is intended to be a quick starter for designers at the DVLA, all commands 'work for me' but may not be the best/correct way to use them. If you find it useful elsewhere or spot a terrible mistake, get in touch via a pull request, twitter or email.
@paulpod
GOV.UK