Permalink
Browse files

Merge pull request #1 from tomstuart/typography

Fix typography
  • Loading branch information...
2 parents 846bbe0 + 7cba760 commit 6cbf7a18b0ee0a47bc840617acb6b4f4235e36f5 @phae phae committed Apr 5, 2012
Showing with 39 additions and 39 deletions.
  1. +30 −30 index.html
  2. +9 −9 styleguide.html
View
@@ -13,7 +13,7 @@
</div>
<header>
<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 weve 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>
<nav>
<ol>
@@ -93,9 +93,9 @@ <h1 id="first">Start with needs*</h1>
<div class="outline">
<p>
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
- - 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>
</div>
@@ -120,7 +120,7 @@ <h1 id="first">Start with needs*</h1>
<img src="https://d17tffe05zdvwj.cloudfront.net/designprinciples/app/assets/images/content/01/needs_wall.png" />
</div>
<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 theres 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>
</article>
@@ -133,7 +133,7 @@ <h1 id="first">Start with needs*</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>
</div>
<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>
</div>
</article>
@@ -152,8 +152,8 @@ <h1 id="second">Do less</h1>
<div class="outline">
<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>)
- that will help other people build things - do that. We should
+ 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
concentrate on the irreducible core.</p>
</div>
@@ -193,17 +193,17 @@ <h1 id="second">Do less</h1>
<h1 id="third">Design with data</h1>
<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
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
them in our designs.</p>
</div>
<section class="why">
<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
naturally choose to do rather than bending them to a system we’ve
invented.</p>
@@ -250,13 +250,13 @@ <h1 id="fourth">Do the hard work to make it simple</h1>
<div class="outline">
<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>
</div>
<section class="why">
<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
usable we’re abusing that power, and wasting people’s time.</p>
</div>
@@ -300,7 +300,7 @@ <h1 id="fifth">Iterate. Then iterate again.</h1>
<p>Iteration reduces risk. It makes big failures unlikely and turns small
failures into lessons. This avoids the 200 page spec document
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>
</section>
@@ -328,7 +328,7 @@ <h1 id="fifth">Iterate. Then iterate again.</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>
</div>
<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>
</article>
@@ -371,14 +371,14 @@ <h1 id="sixth">Build for inclusion</h1>
<div class="outline">
<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
- 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
clearly.</p>
</div>
<section class="why">
<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
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>
@@ -571,7 +571,7 @@ <h1 id="eighth">Build digital services, not websites</h1>
<section class="why">
<div class="content">
<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>
</div>
</section>
@@ -601,7 +601,7 @@ <h1 id="ninth">Be consistent, not uniform</h1>
<div class="outline">
<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
consistent. So our users will have a reasonable chance of guessing
what they’re supposed to do.</p>
@@ -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
it. Every circumstance is different and should be addressed on its own
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>
</div>
</section>
@@ -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,
with users, with the world. Share code, share designs, share ideas,
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>
</div>
@@ -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
open source code and the generosity of the web design community. So we
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 all this...</p>
</div>
@@ -689,7 +689,7 @@ <h1 id="tenth">Make things open: it makes things better</h1>
<img src="https://d17tffe05zdvwj.cloudfront.net/designprinciples/app/assets/images/content/design/colour_palette.png" alt="A screenshot of the colour palette" />
</div>
<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 weve used for <a href="http://www.gov.uk">GOV.UK</a>. Its a deliberately
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
attention to something.</p>
@@ -706,13 +706,13 @@ <h1 id="tenth">Make things open: it makes things better</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" />
</div>
<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. Its 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>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 were 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>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>The full list of type styles we've used is illustrated here.</p>
+ <p>The full list of type styles weve used is illustrated here.</p>
</div>
</article>
<article class="process">
@@ -724,7 +724,7 @@ <h1 id="tenth">Make things open: it makes things better</h1>
<img src="https://d17tffe05zdvwj.cloudfront.net/designprinciples/app/assets/images/content/design/small_icons.png" alt="A screenshot of some small icons" />
</div>
<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 weve used on <a href="http://www.gov.uk">GOV.UK</a>.</p>
</div>
</article>
@@ -735,7 +735,7 @@ <h1 id="tenth">Make things open: it makes things better</h1>
<p class="status tried">Tried &amp; tested</p>
</header>
<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>
</article>
<article class="process no-image">
@@ -769,13 +769,13 @@ <h1 id="tenth">Make things open: it makes things better</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" >
</div>
<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>Were 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>
</article>
<article class="comparison">
<header>
- <h1>Some things we've banned</h1>
+ <h1>Some things weve banned</h1>
<p class="status tried">Tried &amp; tested</p>
</header>
<div class="example">
@@ -800,6 +800,6 @@ <h1 id="tenth">Make things open: it makes things better</h1>
<h1>Feedback</h1>
</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
- <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>
</div>
Oops, something went wrong.

0 comments on commit 6cbf7a1

Please sign in to comment.