reustyle 2.0.7

data/styleguide/content/design/index.tpl

@@ -0,0 +1,367 @@
+---
+name: Imagery
+---
+<ul class='table-of-contents'>
+  <li><a href="#how-to-select-an-image">How to select an image</a></li>
+  <li><a href="#cropping">Cropping</a></li>
+  <li><a href="#where-to-get-images">Where to get images</a></li>
+  <li><a href="#what-to-purchase">What to purchase</a></li>
+  <li><a href="#types-of-licenses">Types of licenses</a></li>
+  <li><a href="#image-storage">Image storage</a></li>
+  <li><a href="#about-retina">About Retina</a></li>
+  <li><a href="#our-image-sizes">Our image sizes</a></li>
+  <li><a href="#alt-text">Alt text</a></li>
+  <li><a href="#examples">Examples</a></li>
+</ul>
+
+<div class="us-content-group" id="how-to-select-an-image">
+  <h2>How to select an image</h2>
+  <p>We use imagery to relate and engage with our customers, to support our message, and to aid in understanding. These guidelines are here to help you chose images that reflect our brand values and personality. If you’re questioning whether an image is suitable, ask a designer – they’ll be happy to help.</p>
+
+  <h3>Principles</h3>
+
+  <h4>Focused</h4>
+  <p>Images are more interesting when they have a point of focus.</p>
+
+  <h4>Contextual</h4>
+  <p>People and objects should be properly contextualised. Avoid cropping an image so severely that it’s setting is lost.</p>
+
+  <h4>Local</h4>
+  <p>Make sure clothing, architectural features, light and style have a UK feel.</p>
+
+  <h3>Mood</h3>
+  <p>Relatable, genuine, optimistic, affirmative.</p>
+
+  <h4>Colour</h4>
+  <p>Our preference is for natural light where possible. Colours should be warm, vibrant and saturated where possible – avoid images that are “washed out”. Do not use dramatic filters, colourisation effects, or black and white.</p>
+
+  <h4>People and lifestyle</h4>
+  <p>Lifestyle shots should be reportage in style, documenting people in their day-to-day lives. Subjects should be unposed, and within their natural environment. People should never be cut out or appear over solid backgrounds. Images should be relatable and feature real, everyday people. Avoid fake or forced emotions as it can seem ingenuine. A range of gender, race, and age should be represented.</p>
+
+  <h4>Products and objects</h4>
+  <p>Object focused imagery may be cut out and appear over our brand colours or on white. When cut out, the whole object must be appear – edges must never be cut off.</p>
+
+  <p>When objects aren’t cut out, they should be realistic in their setting and not appear staged. Images should be straightforward, not overly metaphor based, and should not appear noticeably manipulated.</p>
+
+  <h4>Illustrations</h4>
+  <p>Illustrations may be used to add understanding and delight to an experience.</p>
+
+  <p>Our illustrative style is simple and geometric. Our brand colours should be used predominantly, although variations in shades and saturation may be necessarily. Illustrations should generally appear over solid colour or white backgrounds. Avoid using illustrations that are clichéd or overly metaphor based.</p>
+
+  <h4>Generating new photography</h4>
+  <p>We generally try to avoid commissioning photography unless completely necessary as it can prove to be extremely expensive. Before commissioning new photography, carefully consider:</p>
+
+  <ol>
+  <li>Do we already have what’s needed in our image library?</li>
+  <li>If not, can you find it – in stock, from a press office or other legitimate source?</li>
+  </ol>
+
+  <p>Where we do shoot our own (product shots, staff portraits etc being examples of where this may be necessary) we follow these guidelines.</p>
+</div>
+
+<div class="us-content-group" id="cropping">
+  <h2>Cropping</h2>
+  <p>Images will often need to be cropped to fit various size requirements. When cropped, images should still follow all guidelines.</p>
+</div>
+
+<div class="us-content-group" id="where-to-get-images">
+  <h2>Where to get images</h2>
+  <p>The following sites are our preferred resources as images are royalty-free, reasonably priced, and generally good quality. There are shared uSwitch logins for these sites – get in touch with the Service Desk if you don't have access.</p>
+
+  <ol>
+  <li><a href="http://www.shutterstock.com">www.shutterstock.com</a></li>
+  <p>Monthly subscription which allows us to download 750 images per month</p>
+
+  <li><a href="http://www.istock.com">www.istock.com</a></li>
+  <p>Monthly subscription which allows us to download 10 signature images per month</p>
+
+  <li><a href="http://www.500px.com">www.500px.com</a></li>
+  <p>Images are purchased individually.</p>
+  </ol>
+</div>
+
+<div class="us-content-group" id="what-to-purchase">
+  <h2>What to purchase</h2>
+  <h3>Dimensions</h3>
+  <p>Stock sites often allow you to purchase images in Small, Medium and Large sizes. Purchasing the largest option is recommended as this will cover most of our online use cases and allow for flexibility when it comes to cropping.</p>
+
+  <h3>File types</h3>
+  <h4>Photography</h4>
+  <p>Most photography that you purchase from stock sites will be either JPG or TIFF format. Either is fine, but if it’s a TIFF, it will need to be converted to a JPG before using online.</p>
+
+  <h4>Graphics and Illustrations</h4>
+  <p>Graphics and illustrations are usually available in EPS, SVG, or PNG format. When available, EPS or SVG files are preferred as they can be scaled to any size. EPS files will need to be converted to an SVG or PNG before using online.</p>
+</div>
+
+
+<div class="us-content-group" id="types-of-licenses">
+  <h2>Types of licenses</h2>
+
+  <h3>1. Rights-managed</h3>
+  <p>Rights-managed images often have limitations in regards to the following:</p>
+
+  <ul>
+  <li>How many times you can use them</li>
+  <li>Regions you can use them in</li>
+  <li>Type of media you can use them on</li>
+  <li>Length of time you can use them for</li>
+  </ul>
+
+  <h3>2. Royalty-free</h3>
+  <p>Royalty-free images can generally be used on multiple projects for an unlimited amount of time. They should not be confused with “free”. You must still pay a one-off cost to use them.</p>
+
+  <p>We prefer royalty-free images as there’s fewer restrictions around using them. However even with this type of licence, there may be some usage restrictions, so it’s important to read the licence agreements and act accordingly.</p>
+
+  <ul>
+  <li><a href="http://www.shutterstock.com/license">Shutterstock licensing</a></li>
+  <li><a href="http://www.istockphoto.com/legal/license-agreement">iStock licensing</a></li>
+  <li><a href="http://static.500px.net/docs/commercial_licensing_agreement.pdf">500px licensing</a></li>
+  </ul>
+
+  <h3>3. Creative Commons</h3>
+  <p>Creative Commons means the owner of an image has made it available for use under certain restrictions. Restrictions often include that you must attribute the image to the owner, that you may not use it for commercial purposes, or that you may not alter the image.</p>
+
+  <p><a href="http://www.flickr.com">Flickr</a> is a good resource for images that have been made available through Creative Commons, but make sure you understand and comply with any restrictions they’re being offered under.</p>
+
+  <h3>4. Public Domain</h3>
+  <p>Public Domain refers to images that do not have a copyright and therefore free for anyone to use. It can apply to images that are very old or where the creator has given up their copyright.</p>
+
+  <h3>How do you know if you can use an image?</h3>
+  <h4>Only use an image if:</h4>
+  <ol type="a">
+   <li>You’ve purchased it</li>
+   <li>You’ve taken it yourself or hired a photographer to take it for you</li>
+   <li>You have written permission from the owner of the image</li>
+   <li>It’s Creative Commons and you’ve complied with any usage conditions</li>
+   <li>It’s Public Domain</li>
+  </ol>
+
+ <h4>Never take images directly from:</h4>
+  <ul>
+   <li>Search engines (Google images etc.)</li>
+   <li>Other people’s or organisation’s social media (embedding a tweet is ok if you ask the owner’s permission)</li>
+   <li>News outlets</li>
+  </ul>
+
+  <p>Keep in mind that manipulating an image that isn’t yours (adding a filter, cropping etc) doesn’t give you the right to use it.</p>
+</div>
+
+<div class="us-content-group" id="image-storage">
+  <h2>Image Storage</h2>
+  <h3>Where to store images</h3>
+  <p>Purchased images should be added to our shared Google Drive storage within the appropriate category. <strong>This should be the original, full-sized, uncropped and uncompressed image only.</strong> This allows for cross vertical sharing as well as usage in other mediums such as email.</p>
+
+  <p>While the shared library exists so images can be reused, try not to overuse images to the point that they lose their impact.</p>
+
+  <h3>What to name images</h3>
+  <p>Images should be named with a few descriptive words, with words separated by hyphens. Images that are an illustration should have the prefix of "illustation-".</p>
+
+  <p>For mobile phones, image names should be formatted as follows:</p>
+  <p><strong>yyyy-mm-dd-manufacturer-phonename-phoneversion.png</strong></p>
+  <p>For example:<strong> 2015-04-10-samsung-galaxy-s6.png</strong></p>
+  <p>The date refers to the <u>date of the phone release.</u></p>
+
+  <h3>Tagging images</h3>
+  <p>For searchability, it's important to include descriptive tags for each image you add to Google Drive. You can do this under the "Description" field. The first two tags should be the stock site you got the image from, as well as the image number. Include any other tags that might be useful, separating each tag with commas. </p>
+</div>
+
+<div class="us-content-group" id="about-retina">
+  <h2>About Retina</h2>
+  <p><strong>Retina display</strong> refers to monitors and devices that have a very high pixel density, making screen content appear very crisp and sharp.</p>
+
+  <p>To take advantage of these high-quality displays, we must use <strong>Retina images</strong>. That simply means that we need to double the intended size of our images. </p>
+</div>
+
+<div class="us-content-group" id="our-image-sizes">
+  <h2>Our image sizes</h2>
+  <p>Below are the minimum required sizes for our images in various materials. If an image does not meet this size, it can’t be used and an alternate image will need to be sourced. An image must not be scaled up in order to meet the minimum required size.</p>
+
+  <h3>Emails</h3>
+
+  <h4>Insights</h4>
+
+  <strong>Hero article</strong>
+  <ul>
+  <li>Display size: 130w x 147h</li>
+  <li>Minimum required size: 260w x 294h</li>
+  </ul>
+
+  <strong>Article</strong>
+  <ul>
+  <li>Display size: 150w x 170h</li>
+  <li>Minimum required size: 300w x 340h</li>
+  </ul>
+
+  <strong>Mobile phones</strong>
+  <ul>
+  <li>Display size: 75w x 125h</li>
+  <li>Minimum required size: 150w x 250h</li>
+  </ul>
+
+  <strong>Provider logos</strong>
+  <ul>
+  <li>Display size: 100w x 35h</li>
+  <li>Minimum required size: 200w x 70h</li>
+  </ul>
+
+  <h4>Tacticals</h4>
+
+  <strong>Hero article</strong>
+  <ul>
+  <li>Display size: 250w x 200h</li>
+  <li>Minimum required size: 500w x 400h</li>
+  </ul>
+
+  <h4>Guides</h4>
+
+  <strong>Top banner</strong>
+  <ul>
+  <li>Display size: 1170hw x 168h</li>
+  <li>Minimum required size: Not currently Retina</li>
+  </ul>
+
+  <strong>Content</strong>
+  <ul>
+  <li>Display size: 770w x flexible height</li>
+  <li>Minimum required size: Not currently Retina</li>
+  </ul>
+
+  <h4>News</h4>
+
+  <strong>Content</strong>
+  <ul>
+  <li>Display size: 800w x flexible height</li>
+  <li>Minimum required size: Not currently Retina</li>
+  </ul>
+</div>
+
+<div class="us-content-group" id="alt-text">
+  <h2>Alternative (alt) text</h2>
+  <p>Alt text is an important aspect of web accessibility. All images on our site should include meaningful alt text. <a href="http://webaim.org/techniques/alttext/">See here</a> for best practices.</p>
+  <p>If the image is purely decorative, it should have a blank alternative text
+  so something unintended (like the image file name) is not read out by a screenreader.</p>
+</div>
+
+<div class="us-content-group" id="examples">
+  <h2>Examples</h2>
+  <div>
+    <div class="us-col-xsm-6 image-examples">
+      <img class="us-img--full" src="/images/natural-1.jpg" alt="">
+      <img class="us-img--full" src="/images/natural-2.jpg" alt="">
+      <img class="us-img--full" src="/images/natural-3.jpg" alt="">
+      <p class="image-example-reason">
+        <strong class="us-color--green">Do</strong><br />
+        Images feel natural and authentic.
+      </p>
+    </div>
+    <div class="us-col-xsm-6 image-examples">
+      <img class="us-img--full" src="/images/unnatural-1.jpg" alt="">
+      <img class="us-img--full" src="/images/unnatural-2.jpg" alt="">
+      <img class="us-img--full" src="/images/unnatural-3.jpg" alt="">
+      <p class="image-example-reason">
+        <strong class="us-color--red">Don't</strong><br />
+        Images appear staged.
+      </p>
+    </div>
+    <div class="us-col-xsm-6 image-examples">
+      <img class="us-img--full" src="/images/good-subject.jpg" alt="">
+      <p class="image-example-reason">
+        <strong class="us-color--green">Do</strong></br />
+        Subject is contextualised.
+      </p>
+    </div>
+    <div class="us-col-xsm-6 image-examples">
+      <img class="us-img--full" src="/images/bad-subject.jpg" alt="">
+      <p class="image-example-reason">
+        <strong class="us-color--red">Don't</strong><br />
+        Image is too closely cropped.
+      </p>
+    </div>
+    <div class="us-col-xsm-6 image-examples">
+      <img class="us-img--full" src="/images/accurate-housing.jpg" alt="">
+      <p class="image-example-reason">
+        <strong class="us-color--green">Do</strong><br />
+        Houses are a typical UK style.
+      </p>
+    </div>
+    <div class="us-col-xsm-6 image-examples">
+      <img class="us-img--full" src="/images/innaccurate-housing.jpg" alt="">
+      <p class="image-example-reason">
+        <strong class="us-color--red">Don't</strong><br />
+        Houses feel american style.
+      </p>
+    </div>
+    <div class="us-col-xsm-6 image-examples">
+      <img class="us-img--full" src="/images/warm.jpg" alt="">
+      <p class="image-example-reason">
+        <strong class="us-color--green">Do</strong><br />
+        Image has warm tones.
+      </p>
+    </div>
+    <div class="us-col-xsm-6 image-examples">
+      <img class="us-img--full" src="/images/cold.jpg" alt="">
+      <p class="image-example-reason">
+        <strong class="us-color--red">Don't</strong><br />
+        Image is too cool.
+      </p>
+    </div>
+    <div class="us-col-xsm-6 image-examples">
+      <img class="us-img--full" src="/images/unaltered.jpg" alt="">
+      <p class="image-example-reason">
+        <strong class="us-color--green">Do</strong><br />
+        Image does not appear altered.
+      </p>
+    </div>
+    <div class="us-col-xsm-6 image-examples">
+      <img class="us-img--full" src="/images/altered.jpg" alt="">
+      <p class="image-example-reason">
+        <strong class="us-color--red">Don't</strong><br />
+        Image is noticeably manipulated.
+      </p>
+    </div>
+    <div class="us-col-xsm-6 image-examples">
+      <img class="us-img--full" src="/images/realistic.jpg" alt="">
+      <p class="image-example-reason">
+        <strong class="us-color--green">Do</strong><br />
+        Image is realistic and relatable.
+      </p>
+    </div>
+    <div class="us-col-xsm-6 image-examples">
+      <img class="us-img--full" src="/images/cliche.jpg" alt="">
+      <p class="image-example-reason">
+        <strong class="us-color--red">Don't</strong><br />
+        Image is cliché and metaphor based.
+      </p>
+    </div>
+    <div class="us-col-xsm-6 image-tip">
+      <img class="us-img--full" src="/images/not-centered.jpg" alt="">
+    </div>
+    <div class="us-col-xsm-6 image-tip">
+      <img class="us-img--full" src="/images/centered.jpg" alt="">
+    </div>
+    <div class="image-tip image-tip__reason us-col-xsm-12">
+      <p class="image-example-reason">
+        <strong class="us-color--green">Tip</strong><br />
+        Images where subjects are placed to the left/right and top/bottom are more interesting than those placed centrally.
+      </p>
+    </div>
+    <div>
+      <div class="us-col-xsm-6 image-tip">
+        <img class="us-img--full" src="/images/illustrations_1.png" alt="">
+        <img class="us-img--full" src="/images/illustrations_2.png" alt="">
+        <img class="us-img--full" src="/images/illustrations_3.png" alt="">
+      </div>
+      <div class="us-col-xsm-6 image-tip">
+        <img class="us-img--full" src="/images/illustrations_4.png" alt="">
+        <img class="us-img--full" src="/images/illustrations_5.png" alt="">
+        <img class="us-img--full" src="/images/illustrations_6.png" alt="">
+      </div>
+      <div class="image-tip image-tip__reason us-col-xsm-12">
+        <p class="image-example-reason">
+          <strong class="us-color--green">Do</strong><br />
+          Illustrations are simple, geometric and consist primarily of brand colours (or shade/tones of brand colours).
+        </p>
+      </div>
+    </div>
+  </div>
+</div>

data/styleguide/content/design/typography.md

@@ -0,0 +1,68 @@
+Typography is a key element of how we communicate at uSwitch. We've recently revised our type settings and removed Open Sans from our fonts to increase legibility across devices.
+
+We have chosen to use system fonts across the website for multiple reasons:
+
+* Improved legibility in operating systems
+* No performance overhead in loading custom fonts
+* Users are accustomed to their operating system fonts
+
+Depending on the operating system you are on, you will get one of the following fonts:
+
+<table class="pure-table pure-table-bordered">
+<thead>
+<tr class="header">
+<th>Font</th>
+<th>Device Targeted</th>
+</tr>
+</thead>
+<tbody>
+<tr class="odd">
+<td>-apple-system (San Francisco)</td>
+<td>iOS Safari, macOS Safari, macOS Firefox</td>
+</tr>
+<tr class="even">
+<td>BlinkMacSystemFont (San Francisco)</td>
+<td>macOS Chrome</td>
+</tr>
+<tr class="odd">
+<td>Segoe UI</td>
+<td>Windows</td>
+</tr>
+<tr class="even">
+<td>Roboto</td>
+<td>Android, Chrome OS</td>
+</tr>
+<tr class="odd">
+<td>Oxygen / Oxygen-Sans</td>
+<td>KDE</td>
+</tr>
+<tr class="even">
+<td>Fira Sans</td>
+<td>Firefox OS</td>
+</tr>
+<tr class="odd">
+<td>Droid Sans</td>
+<td>Older versions of Android</td>
+</tr>
+<tr class="even">
+<td>Ubuntu</td>
+<td>Ubuntu</td>
+</tr>
+<tr class="odd">
+<td>Cantarell</td>
+<td>GNOME</td>
+</tr>
+<tr class="even">
+<td>Helvetica Neue</td>
+<td>macOS versions &lt; 10.11</td>
+</tr>
+<tr class="odd">
+<td>Arial</td>
+<td>Any</td>
+</tr>
+<tr class="even">
+<td>sans-serif</td>
+<td>Any</td>
+</tr>
+</tbody>
+</table>