Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Fix typography #1

Merged
merged 5 commits into from

2 participants

@tomstuart

The Design Principles pages make inconsistent or incorrect use of apostrophes, quotes and dashes. This branch cleans them up.

I don't know whether there's yet a house style for dashes. For the moment I've fixed hyphens by replacing them with spaced em dashes, but either spaced en or unspaced em would also be fine if applied consistently.

@tomstuart tomstuart referenced this pull request in alphagov/static
Merged

Fix typography for Design Principles welcome message #2

@phae phae merged commit 6cbf7a1 into alphagov:master
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Apr 5, 2012
  1. @tomstuart
  2. @tomstuart
  3. @tomstuart

    Use double quotes for HTML element attributes

    tomstuart authored
    This makes rogue typewriter apostrophes easier to grep for.
  4. @tomstuart
  5. @tomstuart

    Use spaced em dashes instead of hyphens

    tomstuart authored
    The choice between spaced and unspaced, or between em and en dashes,
    is a question of style, but hyphens are wrong.
This page is out of date. Refresh to see the latest.
Showing with 39 additions and 39 deletions.
  1. +30 −30 index.html
  2. +9 −9 styleguide.html
View
60 index.html
@@ -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>
View
18 styleguide.html
@@ -34,32 +34,32 @@
<div class="outline">
<p>We get straight to the point, and then we stay there.</p>
</div>
- <p>Our ethos is to write concisely and tell people what they need to know or need to do, and not what government thinks they might want to know. We don't confound people with extra information, however useful we might think that is.</p>
- <p>You won't find government jargon or complex, unwieldy sentences on GOV.UK. Obviously we write in <a href="http://en.wikipedia.org/wiki/Plain_English">plain English</a>. We don't let caveats (including grammatical ones) cloud simplicity, eg we say "you can" and not "you may be able to".</p>
+ <p>Our ethos is to write concisely and tell people what they need to know or need to do, and not what government thinks they might want to know. We dont confound people with extra information, however useful we might think that is.</p>
+ <p>You wont find government jargon or complex, unwieldy sentences on GOV.UK. Obviously we write in <a href="http://en.wikipedia.org/wiki/Plain_English">plain English</a>. We dont let caveats (including grammatical ones) cloud simplicity, eg we say you can and not you may be able to.</p>
</article>
</li>
<li class="principle">
<article>
<h1>Getting rid of advice</h1>
<div class="outline">
- <p>Analysis showed people didn't want advice from GOV.UK. We listened and obeyed.</p>
+ <p>Analysis showed people didnt want advice from GOV.UK. We listened and obeyed.</p>
</div>
<p>We found no user demand for content like keeping warm in winter. But there is a place for government funded energy saving schemes, eg <a href="https://www.gov.uk/warm-front-scheme"> Warm Front.</a></p>
- <p>If there's no action for government (or the user) then we don't cover it on GOV.UK. Advice-based content (eg how to write a CV) is done very well by other trusted organisations.</p>
+ <p>If theres no action for government (or the user) then we dont cover it on GOV.UK. Advice-based content (eg how to write a CV) is done very well by other trusted organisations.</p>
</article>
</li>
<li class="principle">
<article>
<h1>Content design</h1>
<div class="outline">
- <p>Our analysis of our content needs spawned a suite of content formats. These allow us to effectively answer user needs by designing content that's clear and rummageable and gives people confidence that they've got the right answer.</p>
+ <p>Our analysis of our content needs spawned a suite of content formats. These allow us to effectively answer user needs by designing content thats clear and rummageable and gives people confidence that theyve got the right answer.</p>
</div>
<h2>Guides</h2>
- <p>Our guides are a set of related information about a specific topic (eg <a href="https://www.gov.uk/council-housing"> Council housing</a>) or life event (eg <a href="https://www.gov.uk/after-a-death"> After someone dies</a>). One guide has one or more related 'parts' - people can see the edges of a topic and choose to read the whole lot or simply home in on a specific element.</p>
+ <p>Our guides are a set of related information about a specific topic (eg <a href="https://www.gov.uk/council-housing"> Council housing</a>) or life event (eg <a href="https://www.gov.uk/after-a-death"> After someone dies</a>). One guide has one or more related parts’ — people can see the edges of a topic and choose to read the whole lot or simply home in on a specific element.</p>
<h2>Answers</h2>
- <p>Our answers assume prior knowledge of a subject and answer one specific need, eg <a href="National Minimum wage rates."></a> We answer the question only and don't crowd the answer with surplus information. We also use answers to address popular needs (eg <a href="https://www.gov.uk/child-benefit-rates">Child Benefit rates</a>). We go into <a href="https://www.gov.uk/child-benefit">detail on Child Benefit</a> in our guide.</p>
+ <p>Our answers assume prior knowledge of a subject and answer one specific need, eg <a href="National Minimum wage rates."></a> We answer the question only and dont crowd the answer with surplus information. We also use answers to address popular needs (eg <a href="https://www.gov.uk/child-benefit-rates">Child Benefit rates</a>). We go into <a href="https://www.gov.uk/child-benefit">detail on Child Benefit</a> in our guide.</p>
<h2>Benefits and schemes</h2>
- <p>A swathe of our content is about money and other things you can get from government. Amongst the morass of information about these schemes, the user needs are always centred around 3 tasks: How much can I get? Am I eligible? How do I claim? Our 'Benefits and schemes' format allows us to design content around these tasks.</p>
+ <p>A swathe of our content is about money and other things you can get from government. Amongst the morass of information about these schemes, the user needs are always centred around 3 tasks: How much can I get? Am I eligible? How do I claim? Our Benefits and schemes format allows us to design content around these tasks.</p>
<h2>Services</h2>
<p>What can we say about this format, other than it lets us direct people to <a href="https://www.gov.uk/file-your-self-assessment-tax-return">find the quick do!</a></p>
</article>
@@ -67,7 +67,7 @@
<li class="principle">
<article>
<h1>Technical style points</h1>
- <p>We do what you'd expect with numerals, days of the week and link text. We use a small 'g' for government. Broadly we follow the <a href="http://www.economist.com/blogs/johnson/2011/07/housekeeping-announcement"> Economist Style Guide.</a></p>
+ <p>We do what youd expect with numerals, days of the week and link text. We use a small ‘g’ for government. Broadly we follow the <a href="http://www.economist.com/blogs/johnson/2011/07/housekeeping-announcement"> Economist Style Guide.</a></p>
</article>
</li>
</ol>
Something went wrong with that request. Please try again.