Navigation Menu

Skip to content
This repository has been archived by the owner on Dec 5, 2017. It is now read-only.

Commit

Permalink
Merge pull request #1 from tomstuart/typography
Browse files Browse the repository at this point in the history 
Fix typography
  • Loading branch information
@phae
phae committed Apr 5, 2012
2 parents 846bbe0 + 7cba760 commit 6cbf7a1
Show file tree
Hide file tree
Showing 2 changed files with 39 additions and 39 deletions.
60 changes: 30 additions & 30 deletions index.html
View file
Expand Up @@ -13,7 +13,7 @@
</div> </div>
<header> <header>
<h1>Government Digital Service <strong>Design Principles</strong></h1> <h1>Government Digital Service <strong>Design Principles</strong></h1>
<p>Listed below are our design principles and examples of how we've used them so far. These build on, and add to, our original <a href="http://www.flickr.com/photos/benterrett/7041509709/">7 digital principles</a>.</p> <p>Listed below are our design principles and examples of how we’ve used them so far. These build on, and add to, our original <a href="http://www.flickr.com/photos/benterrett/7041509709/">7 digital principles</a>.</p>
</header> </header>
<nav> <nav>
<ol> <ol>
Expand Down Expand Up @@ -93,9 +93,9 @@ <h2>*user needs not government needs</h2>
<div class="outline"> <div class="outline">
<p> <p>
The design process must start with identifying and thinking about real The design process must start with identifying and thinking about real
user needs. We should design around those - not around the way the user needs. We should design around those — not around the way the
‘official process’ is at the moment. We must understand those needs thoroughly ‘official process’ is at the moment. We must understand those needs thoroughly
- interrogating data, not just making assumptions - and we should — interrogating data, not just making assumptions — and we should
remember that what users ask for is not always what they need.</p> remember that what users ask for is not always what they need.</p>
</div> </div>


Expand All @@ -120,7 +120,7 @@ <h1>Examples of how we start with needs.</h1>
<img src="https://d17tffe05zdvwj.cloudfront.net/designprinciples/app/assets/images/content/01/needs_wall.png" /> <img src="https://d17tffe05zdvwj.cloudfront.net/designprinciples/app/assets/images/content/01/needs_wall.png" />
</div> </div>
<div class="caption"> <div class="caption">
<p>If we start from the wrong place there's no chance we will get the design right. Before we begin any project we spend a long time working out what the user needs are. <a href="http://digital.cabinetoffice.gov.uk/2011/09/19/introducing-the-needotron-working-out-the-shape-of-the-product/">This blog post explains a bit more about how we do that.</a></p> <p>If we start from the wrong place there’s no chance we will get the design right. Before we begin any project we spend a long time working out what the user needs are. <a href="http://digital.cabinetoffice.gov.uk/2011/09/19/introducing-the-needotron-working-out-the-shape-of-the-product/">This blog post explains a bit more about how we do that.</a></p>


</div> </div>
</article> </article>
Expand All @@ -133,7 +133,7 @@ <h1>Be clear</h1>
<a href="https://d17tffe05zdvwj.cloudfront.net/designprinciples/app/assets/images/content/01/example-vat.png"><img src="https://d17tffe05zdvwj.cloudfront.net/designprinciples/app/assets/images/content/01/example-vat.png" /></a> <a href="https://d17tffe05zdvwj.cloudfront.net/designprinciples/app/assets/images/content/01/example-vat.png"><img src="https://d17tffe05zdvwj.cloudfront.net/designprinciples/app/assets/images/content/01/example-vat.png" /></a>
</div> </div>
<div class="caption"> <div class="caption">
<p><a href="https://www.gov.uk/vat-rates">This VAT page</a> is a good example of a design that results from thinking about user needs. Most people will arrive at this page after a search for VAT rates. The answer most people are after is 20%, so we've made that the largest, clearest piece of information on the page. You can get the answer you are looking for incredibly quickly. There is more to VAT than just one rate so we've included this but clearly designed as secondary information. There's a slim chance you've arrived at the wrong page so we have links to genuinely related items in the box on the top right.</p> <p><a href="https://www.gov.uk/vat-rates">This VAT page</a> is a good example of a design that results from thinking about user needs. Most people will arrive at this page after a search for VAT rates. The answer most people are after is 20%, so we’ve made that the largest, clearest piece of information on the page. You can get the answer you are looking for incredibly quickly. There is more to VAT than just one rate so we’ve included this but clearly designed as secondary information. There’s a slim chance you’ve arrived at the wrong page so we have links to genuinely related items in the box on the top right.</p>
<p>The page is simple and clear but contains all the different information you might need.</p> <p>The page is simple and clear but contains all the different information you might need.</p>
</div> </div>
</article> </article>
Expand All @@ -152,8 +152,8 @@ <h1 id="second">Do less</h1>


<div class="outline"> <div class="outline">
<p>Government should only do what only government can do. If someone else <p>Government should only do what only government can do. If someone else
is doing it - link to it. If we can provide resources (like <a href="http://en.wikipedia.org/wiki/Application_programming_interface">APIs</a>) is doing it — link to it. If we can provide resources (like <a href="http://en.wikipedia.org/wiki/Application_programming_interface">APIs</a>)
that will help other people build things - do that. We should that will help other people build things — do that. We should
concentrate on the irreducible core.</p> concentrate on the irreducible core.</p>
</div> </div>


Expand Down Expand Up @@ -193,17 +193,17 @@ <h1>An example of how we are doing less</h1>
<h1 id="third">Design with data</h1> <h1 id="third">Design with data</h1>


<div class="outline"> <div class="outline">
<p>Normally, we’re not starting from scratch - users are already using <p>Normally, we’re not starting from scratch — users are already using
our services. This means we can learn from real world behaviour. We our services. This means we can learn from real world behaviour. We
should do this, but we should make sure we continue this into the should do this, but we should make sure we continue this into the
build and development process - prototyping and testing with real build and development process — prototyping and testing with real
users on the live web. We should understand the desire paths of how we are designing with data and use users on the live web. We should understand the desire paths of how we are designing with data and use
them in our designs.</p> them in our designs.</p>
</div> </div>


<section class="why"> <section class="why">
<div class="content"> <div class="content">
<p>This is the great advantage of digital services - we can watch and <p>This is the great advantage of digital services — we can watch and
learn from user behaviour, shaping the system to fit what people learn from user behaviour, shaping the system to fit what people
naturally choose to do rather than bending them to a system we’ve naturally choose to do rather than bending them to a system we’ve
invented.</p> invented.</p>
Expand Down Expand Up @@ -250,13 +250,13 @@ <h1 id="fourth">Do the hard work to make it simple</h1>


<div class="outline"> <div class="outline">
<p>Making something look simple is easy; making something simple to use <p>Making something look simple is easy; making something simple to use
is much harder - especially when the underlying systems are complex - is much harder — especially when the underlying systems are complex —
but that’s what we should be doing.</p> but that’s what we should be doing.</p>
</div> </div>


<section class="why"> <section class="why">
<div class="content"> <div class="content">
<p>With great power comes great responsibility - very often people have <p>With great power comes great responsibility — very often people have
no choice but to use our services. If we don’t work hard to make them simple and no choice but to use our services. If we don’t work hard to make them simple and
usable we’re abusing that power, and wasting people’s time.</p> usable we’re abusing that power, and wasting people’s time.</p>
</div> </div>
Expand Down Expand Up @@ -300,7 +300,7 @@ <h1 id="fifth">Iterate. Then iterate again.</h1>
<p>Iteration reduces risk. It makes big failures unlikely and turns small <p>Iteration reduces risk. It makes big failures unlikely and turns small
failures into lessons. This avoids the 200 page spec document failures into lessons. This avoids the 200 page spec document
which can turn into a bottleneck. This, again, is the core advantage of which can turn into a bottleneck. This, again, is the core advantage of
digital: we’re not building bridges - things can be undone.</p> digital: we’re not building bridges — things can be undone.</p>


</div> </div>
</section> </section>
Expand Down Expand Up @@ -328,7 +328,7 @@ <h1>Release and keep improving</h1>
<a href="https://d17tffe05zdvwj.cloudfront.net/designprinciples/app/assets/images/content/05/early_designs.jpg"><img src="https://d17tffe05zdvwj.cloudfront.net/designprinciples/app/assets/images/content/05/early_designs.jpg" alt="A selection of design iterations from GOV.UK" /></a> <a href="https://d17tffe05zdvwj.cloudfront.net/designprinciples/app/assets/images/content/05/early_designs.jpg"><img src="https://d17tffe05zdvwj.cloudfront.net/designprinciples/app/assets/images/content/05/early_designs.jpg" alt="A selection of design iterations from GOV.UK" /></a>
</div> </div>
<div class="caption"> <div class="caption">
<p>Release often and release early. A 'launch' is not the end of the project, but an opportunity to test the product in the wild, and get feedback quickly. Act on the feedback and continuously improve the product. You can read some examples of this on the blog, <a href="http://digital.cabinetoffice.gov.uk/2012/02/01/govuk-beta-day1/">day 1 iterations</a> and further iterations the <a href="http://digital.cabinetoffice.gov.uk/2012/02/02/day-2-of-gov-uk-more-iteration/">following week</a> made on the GOV.UK beta, and the <a href="http://digital.cabinetoffice.gov.uk/2012/03/13/inside-government-how-busy-the-busy-bees-have-been/">INSIDE GOVERNMENT first week iteration</a>.</p> <p>Release often and release early. A ‘launch’ is not the end of the project, but an opportunity to test the product in the wild, and get feedback quickly. Act on the feedback and continuously improve the product. You can read some examples of this on the blog, <a href="http://digital.cabinetoffice.gov.uk/2012/02/01/govuk-beta-day1/">day 1 iterations</a> and further iterations the <a href="http://digital.cabinetoffice.gov.uk/2012/02/02/day-2-of-gov-uk-more-iteration/">following week</a> made on the GOV.UK beta, and the <a href="http://digital.cabinetoffice.gov.uk/2012/03/13/inside-government-how-busy-the-busy-bees-have-been/">INSIDE GOVERNMENT first week iteration</a>.</p>
</div> </div>
</article> </article>


Expand Down Expand Up @@ -371,14 +371,14 @@ <h1 id="sixth">Build for inclusion</h1>
<div class="outline"> <div class="outline">
<p>Accessible design is good design. We should build a product that’s as <p>Accessible design is good design. We should build a product that’s as
inclusive, legible and readable as possible. If we have to sacrifice inclusive, legible and readable as possible. If we have to sacrifice
elegance - so be it. We shouldn’t be afraid of the obvious, shouldn’t elegance — so be it. We shouldn’t be afraid of the obvious, shouldn’t
try to reinvent web design conventions and should set expectations try to reinvent web design conventions and should set expectations
clearly.</p> clearly.</p>
</div> </div>


<section class="why"> <section class="why">
<div class="content"> <div class="content">
<p>We’re designing for the whole country - not just the ones who are used <p>We’re designing for the whole country — not just the ones who are used
to using the web. In fact, the people who most need our services are to using the web. In fact, the people who most need our services are
often the people who find them hardest to use. If we think about those often the people who find them hardest to use. If we think about those
people at the beginning we should make a better site for everyone.</p> people at the beginning we should make a better site for everyone.</p>
Expand Down Expand Up @@ -571,7 +571,7 @@ <h1 id="eighth">Build digital services, not websites</h1>
<section class="why"> <section class="why">
<div class="content"> <div class="content">
<p>We shouldn’t be about websites, we should be about digital services. <p>We shouldn’t be about websites, we should be about digital services.
Right now, the best way to deliver digital services is via the web - Right now, the best way to deliver digital services is via the web —
but that might change, and sooner than we might expect.</p> but that might change, and sooner than we might expect.</p>
</div> </div>
</section> </section>
Expand Down Expand Up @@ -601,7 +601,7 @@ <h1 id="ninth">Be consistent, not uniform</h1>


<div class="outline"> <div class="outline">
<p>Wherever possible we should use the same language and the same design <p>Wherever possible we should use the same language and the same design
patterns &ndash; this helps people get familiar with our services. But, when patterns — this helps people get familiar with our services. But, when
this isn’t possible, we should make sure our underlying approach is this isn’t possible, we should make sure our underlying approach is
consistent. So our users will have a reasonable chance of guessing consistent. So our users will have a reasonable chance of guessing
what they’re supposed to do.</p> what they’re supposed to do.</p>
Expand All @@ -613,7 +613,7 @@ <h1 id="ninth">Be consistent, not uniform</h1>
services by rote. We can’t imagine every scenario and write rules for services by rote. We can’t imagine every scenario and write rules for
it. Every circumstance is different and should be addressed on its own it. Every circumstance is different and should be addressed on its own
terms. What unites things, therefore, should be a consistent approach terms. What unites things, therefore, should be a consistent approach
- one that users will hopefully come to understand and trust - even as — one that users will hopefully come to understand and trust — even as
we move into new digital spaces.</p> we move into new digital spaces.</p>
</div> </div>
</section> </section>
Expand Down Expand Up @@ -649,7 +649,7 @@ <h1 id="tenth">Make things open: it makes things better</h1>
<p>We should share what we’re doing whenever we can. With colleagues, <p>We should share what we’re doing whenever we can. With colleagues,
with users, with the world. Share code, share designs, share ideas, with users, with the world. Share code, share designs, share ideas,
share intentions, share failures. The more eyes there are on a service share intentions, share failures. The more eyes there are on a service
the better it gets - howlers get spotted, better alternatives get the better it gets — howlers get spotted, better alternatives get
pointed out, the bar gets raised.</p> pointed out, the bar gets raised.</p>
</div> </div>


Expand All @@ -658,7 +658,7 @@ <h1 id="tenth">Make things open: it makes things better</h1>
<p>Partly because much of what we’re doing is only possible because of <p>Partly because much of what we’re doing is only possible because of
open source code and the generosity of the web design community. So we open source code and the generosity of the web design community. So we
should pay that back. But mostly because more openness makes for should pay that back. But mostly because more openness makes for
better services - better understood and better scrutinised. If we give better services — better understood and better scrutinised. If we give
away our code, we’ll be repaid in better code. That’s why we’re giving away our code, we’ll be repaid in better code. That’s why we’re giving
away all this...</p> away all this...</p>
</div> </div>
Expand Down Expand Up @@ -689,7 +689,7 @@ <h1>Colour palette</h1>
<img src="https://d17tffe05zdvwj.cloudfront.net/designprinciples/app/assets/images/content/design/colour_palette.png" alt="A screenshot of the colour palette" /> <img src="https://d17tffe05zdvwj.cloudfront.net/designprinciples/app/assets/images/content/design/colour_palette.png" alt="A screenshot of the colour palette" />
</div> </div>
<div class="caption"> <div class="caption">
<p>These are the colours we've used for <a href="http://www.gov.uk">GOV.UK</a>. It's a deliberately <p>These are the colours we’ve used for <a href="http://www.gov.uk">GOV.UK</a>. It’s a deliberately
broad palette as the scope for the site is so large. We use the paler broad palette as the scope for the site is so large. We use the paler
colours the most and the stronger colours when we want to draw colours the most and the stronger colours when we want to draw
attention to something.</p> attention to something.</p>
Expand All @@ -706,13 +706,13 @@ <h1>Typography</h1>
<img class="full-width" src="https://d17tffe05zdvwj.cloudfront.net/designprinciples/app/assets/images/content/10/type_styles.png" alt="A screenshot of typography examples" /> <img class="full-width" src="https://d17tffe05zdvwj.cloudfront.net/designprinciples/app/assets/images/content/10/type_styles.png" alt="A screenshot of typography examples" />
</div> </div>
<div class="caption"> <div class="caption">
<p>Typography is extremely important in any design. It's a key factor in legibility. We have more control over web typography than ever before and we should ensure our designs are clear and easy to read.</p> <p>Typography is extremely important in any design. It’s a key factor in legibility. We have more control over web typography than ever before and we should ensure our designs are clear and easy to read.</p>
<p>Over the next few months we will be testing different typographic designs.</p> <p>Over the next few months we will be testing different typographic designs.</p>
<p>Currently we're using <a href="http://en.wikipedia.org/wiki/Gill_Sans">Gill Sans</a> for headlines and section headings. We’re using it as ‘web font’, which isn’t without issues so we’re using it sparingly and carefully. It adds character and, spaced properly, feels British and modern.</p> <p>Currently we’re using <a href="http://en.wikipedia.org/wiki/Gill_Sans">Gill Sans</a> for headlines and section headings. We’re using it as ‘web font’, which isn’t without issues so we’re using it sparingly and carefully. It adds character and, spaced properly, feels British and modern.</p>
<p>We’re using Georgia for body text. That’s text that you would actually read, as opposed to glance at, or as used in highlights or warnings.</p> <p>We’re using Georgia for body text. That’s text that you would actually read, as opposed to glance at, or as used in highlights or warnings.</p>
<p>It was also <a href="http://en.wikipedia.org/wiki/Georgia_(typeface)">created by a British typographer</a>.</p> <p>It was also <a href="http://en.wikipedia.org/wiki/Georgia_(typeface)">created by a British typographer</a>.</p>
<p>For pretty much everything else we’re using Helvetica, where people have it installed, or Arial.</p> <p>For pretty much everything else we’re using Helvetica, where people have it installed, or Arial.</p>
<p>The full list of type styles we've used is illustrated here.</p> <p>The full list of type styles we’ve used is illustrated here.</p>
</div> </div>
</article> </article>
<article class="process"> <article class="process">
Expand All @@ -724,7 +724,7 @@ <h1>Icons</h1>
<img src="https://d17tffe05zdvwj.cloudfront.net/designprinciples/app/assets/images/content/design/small_icons.png" alt="A screenshot of some small icons" /> <img src="https://d17tffe05zdvwj.cloudfront.net/designprinciples/app/assets/images/content/design/small_icons.png" alt="A screenshot of some small icons" />
</div> </div>
<div class="caption"> <div class="caption">
<p>Here are the icons we've used on <a href="http://www.gov.uk">GOV.UK</a>.</p> <p>Here are the icons we’ve used on <a href="http://www.gov.uk">GOV.UK</a>.</p>
</div> </div>
</article> </article>


Expand All @@ -735,7 +735,7 @@ <h1>Collaborative code</h1>
<p class="status tried">Tried &amp; tested</p> <p class="status tried">Tried &amp; tested</p>
</header> </header>
<div class="caption"> <div class="caption">
<p>Tools like <a href="http://www.github.com">Github</a> are useful because people can make ‘<a href="http://help.github.com/send-pull-requests/">pull requests</a>’ to help you improve your code. Find out more in our blog post - <a href="http://digital.cabinetoffice.gov.uk/2012/02/02/gov-uk-truly-open-platform/">GOV.UK - a truly open and collaborative platform</a></p> <p>Tools like <a href="http://www.github.com">Github</a> are useful because people can make ‘<a href="http://help.github.com/send-pull-requests/">pull requests</a>’ to help you improve your code. Find out more in our blog post — <a href="http://digital.cabinetoffice.gov.uk/2012/02/02/gov-uk-truly-open-platform/">GOV.UK - a truly open and collaborative platform</a></p>
</div> </div>
</article> </article>
<article class="process no-image"> <article class="process no-image">
Expand Down Expand Up @@ -769,13 +769,13 @@ <h1>More detail coming soon</h1>
<img src="https://d17tffe05zdvwj.cloudfront.net/designprinciples/app/assets/images/content/10/transaction-inputs.jpg" alt="A photo of some early-stage transaction thinking" > <img src="https://d17tffe05zdvwj.cloudfront.net/designprinciples/app/assets/images/content/10/transaction-inputs.jpg" alt="A photo of some early-stage transaction thinking" >
</div> </div>
<div class="caption"> <div class="caption">
<p>We're currently working on a broad range of transactions to create a pick'n'mix of consistent design patterns which we can choose from for use in a number of scenarios.</p> <p>We’re currently working on a broad range of transactions to create a pick’n’mix of consistent design patterns which we can choose from for use in a number of scenarios.</p>
</div> </div>
</article> </article>


<article class="comparison"> <article class="comparison">
<header> <header>
<h1>Some things we've banned</h1> <h1>Some things we’ve banned</h1>
<p class="status tried">Tried &amp; tested</p> <p class="status tried">Tried &amp; tested</p>
</header> </header>
<div class="example"> <div class="example">
Expand All @@ -800,6 +800,6 @@ <h1>Some things we've banned</h1>
<h1>Feedback</h1> <h1>Feedback</h1>
</header> </header>
<p>This is an alpha release of the principles and we would like your feedback. Is there anything you think we should add that would make these principles more helpful? You can email your feedback to <p>This is an alpha release of the principles and we would like your feedback. Is there anything you think we should add that would make these principles more helpful? You can email your feedback to
<a href='mailto:govuk-feedback@digital.cabinet-office.gov.uk'>govuk-feedback@digital.cabinet-office.gov.uk</a> or leave a comment at <a href="http://www.getsatisfaction.com/govuk">GetSatisfaction</a>.</p> <a href="mailto:govuk-feedback@digital.cabinet-office.gov.uk">govuk-feedback@digital.cabinet-office.gov.uk</a> or leave a comment at <a href="http://www.getsatisfaction.com/govuk">GetSatisfaction</a>.</p>
</section> </section>
</div> </div>

0 comments on commit 6cbf7a1

Please sign in to comment.