Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Final copy change

  • Loading branch information...
commit b71cfe0831118cb5f90a599b8e3dad248d3dd07c 2 parents f3151d1 + 757a393
@wryobservations wryobservations authored
View
BIN  app/assets/downloads/betacolours.ase
Binary file not shown
View
BIN  app/assets/downloads/betacolours.pdf
Binary file not shown
View
BIN  app/assets/images/content/02/keeping-bees.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  app/assets/images/content/03/ab-test.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  app/assets/images/content/04/maternity-pay_sml.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  app/assets/images/content/05/iterate.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  app/assets/images/content/09/family.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  app/assets/images/content/10/type_styles.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  app/assets/images/content/design/bannedlist.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  app/assets/images/content/design/colour_palette.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  app/assets/images/content/design/font_stack.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  app/assets/images/content/design/small_icons.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
130 app/assets/stylesheets/main.css
@@ -41,6 +41,7 @@ html {
}
#wrapper {
+ position: relative;
color: #000;
background: #fff;
font-family: "Gill Sans W01 Book", "Gill Sans MT Pro", "Gill Sans", GillSans, sans-serif;
@@ -49,15 +50,15 @@ html {
font-size: 1.8rem;
line-height: 1.4444444444;
font-weight: 300;
- padding: 0 52px 13px 104px;
- padding: 0 5.2rem 1.3rem 10.4rem;
+ padding: 26px 52px 0 104px;
+ padding: 2.6rem 5.2rem 0 10.4rem;
margin: 0;
}
@media (max-width: 640px) {
#wrapper {
- padding: 0 26px 13px;
- padding: 0 2.6rem 1.3rem;
+ padding: 0 26px;
+ padding: 0 2.6rem;
}
}
@@ -80,7 +81,7 @@ html {
list-style-type: bullet;
}
-#wrapper header, #wrapper nav, #wrapper .principles {
+#wrapper header, #wrapper nav, #wrapper .principles {
position: relative;
margin: 0 auto;
max-width: 700px;
@@ -168,6 +169,23 @@ html {
min-height: 1px;
}
+#wrapper header p {
+ max-width: 85%;
+ padding: 23px 0 3px;
+ padding: 2.3rem 0 0.3rem;
+}
+
+#wrapper .principles {
+ padding-bottom: 78px;
+ padding-bottom: 7.8rem;
+}
+
+#wrapper .principles:after {
+ content: '.';
+ clear: both;
+ visibility: hidden;
+}
+
#wrapper nav {
padding-top: 26px;
padding-top: 2.6rem;
@@ -353,6 +371,10 @@ html {
display: block;
}
+#wrapper article .examples a:hover {
+ border-color: #fff;
+}
+
#wrapper article .examples .example,
#wrapper article .example a {
border: none;
@@ -372,7 +394,7 @@ html {
margin-top: 1px;
padding: 0;
display: block;
- background: #eee;
+ background: #ddd;
}
#wrapper article .examples header {
@@ -412,10 +434,91 @@ html {
}
.header-context,
-.beta-notice{
+#footer .beta-notice{
display:none;
}
+#wrapper .beta-notice {
+ color: #000;
+ float: left;
+
+ font-family: "Gill Sans W01 Medium", "Gill Sans MT Pro", "Gill Sans", GillSans, sans-serif;
+ text-transform: uppercase;
+ font-size: 14px;
+ font-size: 1.4rem;
+ line-height: 1.1538461538;
+ font-weight: 500;
+ letter-spacing: 0.2em;
+
+ display:block;
+ position:absolute;
+ z-index: 100;
+ top:42px;
+ left: 50%;
+ margin-left: -323px;
+ margin-left: -32.3rem;
+}
+
+@media (max-width: 640px) {
+ #wrapper .beta-notice {
+ top: 0;
+ left: 0;
+ margin-left: 26px;
+ margin-left: 2.6rem;
+ }
+}
+
+#wrapper .beta-notice a{
+ padding: 8px 13px;
+ padding: 0.8rem 1.3rem;
+ background-color:#d43783;
+ border: none;
+ float:left;
+ color:#fff;
+ text-decoration: none;
+}
+#wrapper .beta-notice span{
+ padding: 8px 13px;
+ padding: 0.8rem 1.3rem;
+ float:left;
+}
+
+#wrapper .alpha-feedback{
+ position: relative;
+ clear:both;
+ padding: 0 26px 26px;
+ padding: 0 2.6rem 2.6rem;
+ background-color:#d43783;
+ color:#fff;
+}
+
+@media (max-width: 640px) {
+ #wrapper .alpha-feedback{
+ padding: 0 13px 13px;
+ padding: 0 1.3rem 1.3rem;
+ }
+}
+
+#wrapper .alpha-feedback h1 {
+ font-size: 32px;
+ font-size: 3.2rem;
+}
+
+#wrapper .alpha-feedback a {
+ color: white;
+ border-color: white;
+ font-family: "Gill Sans W01 Medium", "Gill Sans MT Pro", "Gill Sans", GillSans, sans-serif;
+}
+
+#wrapper .alpha-feedback header {
+ padding: 0;
+ margin: 0;
+}
+
+#wrapper article .example {
+ background: transparent;
+}
+
#wrapper article .examples p.status {
position: absolute;
right: 0;
@@ -569,6 +672,10 @@ html {
width: 50%;
}
+#wrapper article .examples .comparison .example img.full-width {
+ width: 100%;
+}
+
#wrapper article .examples .comparison .caption {
clear: both;
margin: 0 13px 13px;
@@ -750,6 +857,15 @@ html {
html {
font-size: 9px!important;
}
+
+ #wrapper .beta-notice {
+ padding: 0 26px;
+ padding: 0 2.6rem;
+ }
+
+ #wrapper .beta-notice a {
+ display: none;
+ }
header, nav, .principles {
margin: 0!important;
View
243 index.html
@@ -4,11 +4,17 @@
---
<div id="wrapper" class="design-principles">
+ <div class="beta-notice">
+ <div class="inner">
+ <p>
+ <a href="http://digital.cabinetoffice.gov.uk/2012/04/03/design-principles-alpha/">ALPHA</a> <span>Last updated 3 April 2012</span>
+ </p>
+ </div>
+ </div>
<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>
</header>
-
<nav>
<ol>
<li>
@@ -88,7 +94,7 @@ <h1 id="first">Start with needs*</h1>
<p>
The design process must start with identifying and thinking about real
user needs. We should design around those - not around the way the
- ‘official process’ is done. 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
remember that what users ask for is not always what they need.</p>
</div>
@@ -107,7 +113,7 @@ <h1 id="first">Start with needs*</h1>
<div class="content">
<article class="design">
<header>
- <h1>We can't get the answer right until we get the question right.</h1>
+ <h1>Examples of how we start with needs.</h1>
<p class="status tried">Tried &amp; tested</p>
</header>
<div class="example">
@@ -120,7 +126,7 @@ <h1 id="first">Start with needs*</h1>
</article>
<article class="process">
<header>
- <h1>Don't be coy</h1>
+ <h1>Be clear</h1>
<p class="status tried">Tried &amp; tested</p>
</header>
<div class="example">
@@ -131,74 +137,6 @@ <h1 id="first">Start with needs*</h1>
<p>The page is simple and clear but contains all the different information you might need.</p>
</div>
</article>
- <!--article class="process">
- <header>
- <h1>Have loads of meetings, but not too many</h1>
- <p class="status experimental">Experimental</p>
- </header>
- <div class="example">
- <img src="http://placehold.it/650x400">
- </div>
- <div class="caption">
- <p>The design process must start with ident</p>
- </div>
- </article>
-
- <article class="writing">
- <header>
- <h1>Use plain language</h1>
- <p class="status tried">Tried &amp; tested</p>
- </header>
- <div class="example">
- <p>The design process must start with ident</p>
- </div>
- <div class="caption">
- <p>The design process must start with ident</p>
- </div>
- </article>
-
- <article class="code">
- <header>
- <h1>My bit of code</h1>
- <p class="status changeable">Likely to change</p>
- </header>
- <div class="example">
-<pre><code>&lt;header&gt;
- &lt;h1&gt;Government Digital Service <span class="highlight">&lt;strong&gt;</span>Design Principles<span class="highlight">&lt;/strong&gt;</span>&lt;/h1&gt;
-&lt;/header&gt;
-</code></pre>
- </div>
- <div class="caption">
- <p>This is a made up example of how someone might markup the header. We've highlighted the important elements in this case.</p>
- </div>
- </article>
-
- <article class="design">
- <header>
- <h1> Something like this, but not this</h1>
- <p class="status experimental">Experimental</p>
- </header>
- <div class="example">
- <img src="http://placehold.it/650x400">
- </div>
- <div class="caption">
- <p>The design process must start with ident</p>
- </div>
- </article>
-
- <article class="comparison">
- <header>
- <h1>Better than before</h1>
- <p class="status changeable">Likely to change</p>
- </header>
- <div class="example">
- <img src="http://placehold.it/650x400" />
- <img src="http://placekitten.com/650/400">
- </div>
- <div class="caption">
- <p>The design process must start with ident</p>
- </div>
- </article-->
</div>
@@ -214,7 +152,7 @@ <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 APIs)
+ 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>
@@ -231,11 +169,11 @@ <h1 id="second">Do less</h1>
<div class="content">
<article class="process">
<header>
- <h1>Do less</h1>
+ <h1>An example of how we are doing less</h1>
<p class="status tried">Tried &amp; tested</p>
</header>
<div class="example">
- <img src="http://placehold.it/650x400">
+ <img src="/app/assets/images/content/02/keeping-bees.jpg">
</div>
<div class="caption">
<p>Lots of page designs fail because the focus of the page isn’t clear. Don’t try to cram everything on to one page. By trying to do less and deciding what’s the most important thing on the page before you start designing you’ll end up with simpler, clearer designs. </p>
@@ -259,7 +197,7 @@ <h1 id="third">Design with data</h1>
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
- users on the live web. We should understand the desire paths and use
+ users on the live web. We should understand the Examples of how we are designing with data and use
them in our designs.</p>
</div>
@@ -277,7 +215,7 @@ <h1 id="third">Design with data</h1>
<div class="content">
<article class="process no-image">
<header>
- <h1>Desire paths</h1>
+ <h1>Examples of how we are designing with data</h1>
<p class="status experimental">Experimental</p>
</header>
@@ -320,7 +258,7 @@ <h1 id="fourth">Do the hard work to make it simple</h1>
<h2>Why?</h2>
<div class="content">
<p>With great power comes great responsibility - very often people have
- 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>
</div>
</section>
@@ -328,17 +266,16 @@ <h1 id="fourth">Do the hard work to make it simple</h1>
<section class="examples">
<h2>Examples</h2>
<div class="content">
- <article class="comparison">
+ <article class="design">
<header>
- <h1>Hiding complexity</h1>
+ <h1>An example of where we have done the hard work to make something simple</h1>
<p class="status tried">Tried &amp; tested</p>
</header>
<div class="example">
- <img src="/app/assets/images/content/04/married-couple.png" alt="A screen shot of a smart answer" />
- <img src="/app/assets/images/content/04/maternity-pay.png" alt="A screen shot of a smart answer" />
+ <img src="/app/assets/images/content/04/maternity-pay_sml.png" alt="A screen shot of a smart answer" />
</div>
<div class="caption">
- <p>You shouldn’t have to understand how government works to be able to interact with it. Government (especially given the maturity of the British constitution) and the services it provides are often complicated, so we should hide complexity where possible.</p>
+ <p>You shouldn’t have to understand how government works to be able to interact with it. Government and the services it provides are often complicated, so we should hide complexity where possible.</p>
<p>Our <a href="http://digital.cabinetoffice.gov.uk/2012/02/16/smart-answers-are-smart/">Smart Answer</a> format is a good example of this. Both <a href="https://www.gov.uk/calculate-married-couples-allowance">Married Couple’s Allowance</a> and <a href="https://www.gov.uk/maternity-benefits">Maternity Pay Entitlement</a> are good examples of how we have taken something complicated and made the interaction simple for the user. <a href="https://github.com/alphagov/smart-answers">The code for smart answers is available on GitHub.</a></p>
</div>
</article>
@@ -355,16 +292,15 @@ <h1 id="fifth">Iterate. Then iterate again.</h1>
<div class="outline">
<p>The best way to build effective services is to start small and iterate
- wildly. Release Minimum Viable Products early, test them with real
- users, move from Alpha to Beta to Launch adding features and
- refinements based on feedback from real users.</p>
+ wildly. Release <a href="http://en.wikipedia.org/wiki/Minimum_viable_product">Minimum Viable Products</a> early, test them with real
+ users, move from <a href="http://en.wikipedia.org/wiki/Software_release_life_cycle#Alpha">Alpha</a> to <a href="http://en.wikipedia.org/wiki/Software_release_life_cycle#Beta">Beta</a> to Launch adding features and refinements based on feedback from real users.</p>
</div>
<section class="why">
<div class="content">
<p>Iteration reduces risk. It makes big failures unlikely and turns small
- failures into lessons. And the alternative is 200 page spec documents
- which turn into bottlenecks. This, again, is the core advantage of
+ 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>
</div>
@@ -376,7 +312,7 @@ <h1 id="fifth">Iterate. Then iterate again.</h1>
<article class="process no-image">
<header>
- <h1>Iterate to cleaner code</h1>
+ <h1>Some examples of how we have been iterating</h1>
<p class="status tried">Tried &amp; tested</p>
</header>
<div class="caption">
@@ -384,7 +320,7 @@ <h1 id="fifth">Iterate. Then iterate again.</h1>
</div>
</article>
- <article class="process">
+ <article class="design">
<header>
<h1>Release and keep improving</h1>
<p class="status tried">Tried &amp; tested</p>
@@ -397,6 +333,19 @@ <h1 id="fifth">Iterate. Then iterate again.</h1>
</div>
</article>
+ <article class="design">
+ <header>
+ <h1>Alpha. Beta.</h1>
+ <p class="status tried">Tried &amp; tested</p>
+ </header>
+ <div class="example">
+ <a href="/app/assets/images/content/05/iterate.png"><img src="/app/assets/images/content/05/iterate.png" alt="A selection of design iterations from GOV.UK" /></a>
+ </div>
+ <div class="caption">
+ <p>We released an <a href="http://alpha.gov.uk/">alpha version of GOV.UK</a> last year and we released the <a href="https://www.gov.uk/">beta version</a> in January. Other people in government are starting to use this approach <a href="http://shropshire.gov.uk/projectwip/">Shropshire WIP</a> and <a href="http://www.directscot.org/">DirectScot</a> being good examples.</p>
+ </div>
+ </article>
+
<!--Day 1 iterations
http://digital.cabinetoffice.gov.uk/2012/02/01/govuk-beta-day1/
@@ -444,7 +393,7 @@ <h1 id="sixth">Build for inclusion</h1>
<article class="design">
<header>
- <h1>Contrasting colour</h1>
+ <h1>Some examples of how we have been building for inclusion</h1>
<p class="status tried">Tried &amp; tested</p>
</header>
<div class="example">
@@ -590,14 +539,15 @@ <h1 id="seventh">Understand context</h1>
<div class="content">
<article class="design">
<header>
- <h1>Think about why and how your website is going to be used</h1>
+ <h1>Examples of how we have been considering context</h1>
<p class="status experimental">Experimental</p>
</header>
<div class="example">
<img src="/app/assets/images/content/07/screens.png" alt="A photo showing a selection of devices" >
</div>
<div class="caption">
- <p>Your site could be accessed from almost anywhere on a wide variety of devices in all sorts of different environments. Consider how the usage might change for each of these. For instance, a low-cost, low-power shared PC in a public library or a smart phone used whilst walking down the street.</p>
+ <p>Your service could be accessed from almost anywhere on a wide variety of devices in all sorts of different environments. Consider how the usage might change for each of these. For instance, a low-cost, low-power shared PC in a public library or a smart phone used whilst walking down the street.</p>
+ <p>Remember we are designing information, not pushing pixels around a screen.</p>
</div>
</article>
</div>
@@ -631,7 +581,15 @@ <h1 id="eighth">Build digital services, not websites</h1>
<section class="examples">
<h2>Examples</h2>
<div class="content">
- <p></p>
+ <article class="process no-image">
+ <header>
+ <h1>One example of our content being used outside of our website</h1>
+ <p class="status experimental">Experimental</p>
+ </header>
+ <div class="caption">
+ <p>One example of this is the <a href="http://saulcozens.co.uk/pages/wordpressgovuk">WordPress plugin that Saul Cozens</a> made to “reproduce content from GOV.UK on any Wordpress post or page.”</p>
+ </div>
+ </article>
</div>
</section>
@@ -665,7 +623,19 @@ <h1 id="ninth">Be consistent, not uniform</h1>
<section class="examples">
<h2>Examples</h2>
<div class="content">
- <p></p>
+ <article class="design">
+ <header>
+ <h1>Examples of our design work being consistent but not uniform</h1>
+ <p class="status changeable">Likely to change</p>
+ </header>
+ <div class="example">
+ <img src="/app/assets/images/content/09/family.jpg" alt="Screenshots of the GOV.UK and INSIDE GOVERNMENT betas" >
+ </div>
+ <div class="caption">
+ <p>So far we have released beta version of GOV.UK and INSIDE GOVERNMENT, comparing page designs from both of these projects gives you a good visual example of what we mean in this principle. These designs feel like they come from the same family, but they are different depending on the different requirements of the page.</p>
+ </div>
+ </article>
+
</div>
</section>
@@ -699,7 +669,7 @@ <h1 id="tenth">Make things open: it makes things better</h1>
<section class="examples">
<h2>Examples</h2>
<div class="content">
- <h3>Design</h3>
+
<article class="design">
<header>
<h1>Design</h1>
@@ -721,42 +691,46 @@ <h1 id="tenth">Make things open: it makes things better</h1>
<img src="/app/assets/images/content/design/colour_palette.png" />
</div>
<div class="caption">
- <p>Here are the hex values for the colour palette we use for GOV.UK. You
- can also <a href="">download these colours and an Adobe Swatch library</a>. TODO: BEN!</p>
+ <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
+ colours the most and the stronger colours when we want to draw
+ attention to something.</p>
+ <p>You can <a href="/app/assets/downloads/betacolours.ase">download this colour palette as an Adobe Swatch Exchange file</a>, then you can import them straight into photoshop or illustrator</p>
+ <p>You can also <a href="/app/assets/downloads/betacolours.pdf">download a pdf of the colour palette</a>, so you can copy and paste the values.</p>
</div>
</article>
- <article class="design">
+ <article class="comparison">
<header>
- <h1>Fonts</h1>
+ <h1>Typography</h1>
<p class="status experimental">Experimental</p>
</header>
<div class="example">
- <img src="/app/assets/images/content/design/font_examples.png" />
+ <img class="full-width" src="/app/assets/images/content/10/type_styles.png" />
</div>
<div class="caption">
- <p>Currently we have used the following type styles. TODO: BEN!</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>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>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>
</div>
</article>
- <article class="design">
+ <article class="process">
<header>
<h1>Icons</h1>
<p class="status changeable">Likely to change</p>
</header>
<div class="example">
- <img src="/app/assets/images/content/design/icon_examples.png" />
+ <img src="/app/assets/images/content/design/small_icons.png" />
</div>
<div class="caption">
- <p>Here are the icons we have used. TODO: BEN!</p>
+ <p>Here are the icons we've used on <a href="http://www.gov.uk">GOV.UK</a>.</p>
</div>
</article>
- <!--
-
-Icons
-Here are the icons we have used.
-
-Link styles
-This is how we handle a link, and a hover state and a visited state.-->
- <h3>Technology</h3>
+
+
<article class="process no-image">
<header>
<h1>Collaborative code</h1>
@@ -766,47 +740,68 @@ <h1 id="tenth">Make things open: it makes things better</h1>
<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>
- <h3>Content</h3>
<article class="process no-image">
<header>
- <h1>Style guide</h1>
+ <h1>Content principles</h1>
<p class="status tried">Tried &amp; tested</p>
</header>
<div class="caption">
- <p>Language is extremely important to us and help we have <a href="/designprinciples/styleguide">developed a
- style guide which you can find here</a>.</p>
+ <p>Content is king. Our content design decisions, <a href="/designprinciples/styleguide">dstyle and tone are explained here</a>.</p>
</div>
</article>
-
- <h3>Transactions</h3>
<article class="design">
<header>
- <h1>What is a transaction?</h1>
+ <h1>Transactions</h1>
<p class="status experimental">Experimental</p>
</header>
<div class="example">
<img src="/app/assets/images/content/10/transaction-graph.jpg">
</div>
<div class="caption">
+ <p>What is a transaction?</p>
<p>At the end of a transaction some kind of action has been performed (above and beyond the simple exchange of information). Typically this would involve an exchange of goods and money, but government transactions also involve the transfer or creation of legal right and obligations. Another distinguishing feature of many government transactions is that they often involve more than two parties.</p>
</div>
</article>
<article class="design">
<header>
- <h1>Coming soon</h1>
+ <h1>More detail coming soon</h1>
<p class="status experimental">Experimental</p>
</header>
<div class="example">
<img src="/app/assets/images/content/10/transaction-inputs.jpg">
</div>
<div class="caption">
- <p>Transactions range from the relatively trivial like renewing a tax disc, to the life changing like appointing a lasting power of attorney. People can be novice web users claiming state pension, or professionals filing company returns. It would be foolish to try to develop design guidelines to address all types and all users with one silver bullet. 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>
</article>
+
+ <article class="comparison">
+ <header>
+ <h1>Some things we've banned</h1>
+ <p class="status tried">Tried &amp; tested</p>
+ </header>
+ <div class="example">
+ <img class="full-width" src="/app/assets/images/content/design/bannedlist.png" />
+ </div>
+ <div class="caption">
+ <p>We should be simple and clear in all our communications. Visual
+ metaphors which are overused tend to hinder communication rather than
+ help it. For that reason lightbulbs, brains, jigsaws, cheetahs,
+ chameleons and butterflies are all banned.</p>
+ </div>
+ </article>
</div>
</section>
</article>
</li>
</ol>
+
+ <section class="alpha-feedback">
+ <header>
+ <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://govuk.getsatisfaction.com">GetSatisfaction</a>.</p>
+ </section>
</div>
View
70 styleguide.html
@@ -9,60 +9,68 @@
</header>
- <ol class="principles">
- <li class="principle">
- <article>
+ <ol class="principles">
+ <li class="principle">
+ <article>
<h1>The voice of GOV.UK</h1>
<div class="outline">
<p>We speak to the user in their language. We give them the information they want to know and we make sure they find it quickly. </p>
- </div>
+ </div>
<p> Our writing is:</p>
-
- <li>serious but not pompous</li>
- <li>in the vernacular ;-)</li>
- <li>active and engaging</li>
- <li>trustworthy and official</li>
- <li>definitive and authoratitive</li>
- <li>incisive (but still human)</li>
- <li>brief, succinct and to the point</li>
-
+ <ul>
+ <li>serious but not pompous</li>
+ <li>in the vernacular ;-)</li>
+ <li>active and engaging</li>
+ <li>trustworthy and official</li>
+ <li>definitive and authoratitive</li>
+ <li>incisive (but still human)</li>
+ <li>brief, succinct and to the point</li>
+ </ul>
+ </article>
+ </li>
+ <li class="principle">
+ <article>
<h1>Do not pass Go</h1>
<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 plain English. We don't let caveats (including grammatical ones) cloud simplicity, eg we say "you can" and not "you may be able to".
- </p>
-
- <article>
+ <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 plain English. We don't 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>
</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. Adviced-based content (eg how to write a CV) is done very well by other trusted organisations.
-
-
+ <p>If there's no action for government (or the user) then we don't cover it on GOV.UK. Adviced-based content (eg how to write a CV) is done very well by other trusted organisations.</p>
+ </article>
+ </li>
<li class="principle">
- <article>
+ <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>
- </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>
-
+ </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>
<h2>Answers</h2>
+<<<<<<< HEAD
<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 "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 don't crowd the answer with surplus information. We also use answers to address popular needs (eg passport fees). We go into detail on [example] in a guide about the subject.</p>
+>>>>>>> 757a393441e831c74642e5247a7d40190ceb6a59
<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>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>
+ </li>
+ <li class="principle">
+ <article>
<h1>Technical style points</h1>
<p>We do what you'd expect with numerals, days of the week and link tex. 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>
Please sign in to comment.
Something went wrong with that request. Please try again.