Digital Guidelines For Local Age UKs

Digital guidelines for local Age UKs
Version 1.0 April 2011
Contents
Introduction
Document usage and contacts Digital design principles 03 05 Weclome 04
Section 1: Basic elements

Logo specification Logo usage - things to avoid Logo usage Digital colour palette Use of colour Colour loop graphic Use of type Tone of Voice and Writing for screen Imagery and graphics WAI compliance WCAG 2 at a glance 07 08 09 11 12 13 14 16 17 19 20
Section 2: Specific elements

Web templates - global elements 22 Home page Menu page Content page Latest news News archive News Article Newsletter sign-up and error handling Newsletter sign-up Donation page Local directory Event listings Calendar listing Video and audio content 24 26 28 30 31 32 34 33 35 37 38 40 41
Calendar 39
Version 1.0 August 2011
Digital Guidelines for Local Age UKs
Introduction Document usage and contacts

Age UK is the voice of age. We are here to represent all that people in later life have to offer. We bring together the vital products and services of Age Concern and Help the Aged, and add to them something new. By combining our time and talents, our services and our solutions, we can do more to enrich the lives of many, both at home and abroad. The digital environment and the opportunities that new technologies offer us are essential elements of our ability to deliver upon this promise. These digital guidelines are here to support Local Age UKs who are working with our digital brand. This document provides specific information for digital channels and should be read in conjunction with the main Age UK Digital guidelines and the Local Age UK brand guidelines. For more information about these guidelines, contact: For more information about the Age UK digital guidelines, contact: For more information about the Age UK brand guidelines, contact:
Helen Barratt
Digital Partner Manager Age UK Tavis House 1-6 Tavistock Square London WC1H 9NB T: 020 3033 1573 E: helen.barratt@ageuk.org.uk
Alison McCormack
Group Head of Digital Age UK Tavis House 1-6 Tavistock Square London WC1H 9NB T: 020 3033 1252 E: alison.mccormack@ageuk.org.uk
Daniel Stewart
Brand Marketing Manager Age UK Tavis House 1-6 Tavistock Square London WC1H 9NB T: 020 3033 1017 E: partners@ageuk.org.uk
Introduction
Welcome
Together, we have built the most amazing online resource to help older people. The Age UK digital presence is the largest in the charitable sector, and is the result of collaborative work that has united over 200 websites under a shared purpose. Now more people than ever before can easily discover more about the work of Age UK both nationally and locally. These guidelines will help keep principles of collaboration and shared purpose at the heart of the network of local sites. Together, we can take full advantage of the digital communications revolution and the ever increasing part it plays in the lives of our core audiences. This is very much the start, not the end of the journey. We look forward to working on all the ways we can help make your work come to life in a digital age.
Our digital design principles

The Age UK identity is designed to help us stand out from the crowd. Our choices of words and images are carefully decided to help make everyone think differently about what it means to age. But our digital design principles run deeper than the visual interface of our digital properties. In designing for our audiences we are concerned with accessible and universal design. Accessible design includes the needs of people whose physical, mental, or environmental conditions limit their performance. Universal design aims to extend standard design principles to make them inclusive for people of all ages and abilities, but does not address all of the specific needs of any particular disability.
Introduction Digital design principles

Our digital design principles are based on 5 key elements:
01
Build for users

Keeping our users front-ofmind and always trying to meet their needs is an essential focus of our strategy. Understanding user needs is not always easy, but our digital properties must be designed with audience understanding and to meet clear user goals. Where possible we should test with real people.
02
Be inclusive
Inclusive design means that we design for all possible users, irrespective of their age or ability. For our audiences, digital technologies can provide great opportunities to access information, services, products and tools, but we need to be aware that new technologies can introduce new barriers, and these must also be considered.
03
Design an engaging interface

The freshness and vitality of our brand creates a new space and new tools for communicating our varied messages. We have expressive assets and elements, including our vibrant colour palette and image style as part of our digital design toolkit. Use our brand confidently and expertly.
04
Be simple, intuitive and consistent

Always base designs on user expectations. We dont design to be different for the sake of it and it is always our aim to keep user journeys, functionality and interfaces as simple as possible. Consistency is an important factor in providing intuitive experiences.
05
Focus on content
We are a trusted source of information and support. It is important that our content is well-considered, grammatically accurate, easyto-read and factually correct.
Section 1 Basic elements

If you are designing and producing digital materials for a Local Age UK then you will need to know the rules about using our logos, our digital colour palette, our typefaces and our graphic devices. You will find the specifications for these basic elements in this section.
Basic elements Logo specification

ur logos comprise three elements O the life loop, the words Age UK and your name. The logo should always be used in full colour. In digital media the space around the logo and the space given to communicate key messages must be carefully balanced. The main brand guidelines specify a minimum clear area for offline materials, but it is often the case that we are working with smaller spaces than in print. The minimum area of clear space is shown here by the grey shaded area containing the Age UK logo. The construction of this box is based on 3/4 of the width of the e. Where possible you should use this guideline or as near to it as possible. Where it is not possible to meet this guideline, as a minimum use 1/2 X. This rule applies for all local Age UKs logos. Please note that the RGB version of the logo should be used throughout any digital media. Logos created for print should never be used.
Version 1.0 August 2011 Digital Guidelines for Local Age UKs
/2X
/2X
Basic elements Logo usage things to avoid
Always only use approved artwork for the logo and give it space and prominence when you can. There are some clear things to avoid, which are demonstrated here: A master logo for use in digital media is available. Please note that the RGB version of the logo should be used throughout any digital media. Logos created for print should never be used. For full logo usage details please refer to the Age UK brand guidelines.
1 Dont encroach on the clear space
2 Dont use the full colour logo on any coloured backgrounds
3 Dont use the full colour logo on complicated photographic backgrounds
4 Dont use the life loop or the Age UK wording separately
5 Dont alter the size, scale or colour of individual elements within the logo
6 Dont rotate or crop the logo in any way
7 Dont distort the logo in any way
8 Dont change the colour of the logo or colour the elements separately
Camden
Shop
9 Dont change the typeface always use the master artwork supplied 10 Dont place text in the clear space 11 Dont apply any effects to area or create a sub-brand using the logo the logo
Basic elements Logo usage

Our logo is used on a variety of digital materials. Small spaces When we use the logo in digital environments we do not specify absolute sizes, but as a guideline we do ask that it is not used any smaller than 70 pixels. Our website and emails Our website and emails provide us with enough space to display the logo prominently. The size of the logo should be in balance with the page and content.
70px
Logo size on website is 80 pixels in height.
80px
Basic elements Logo usage

External sites Our logo guidelines should be reflected in any external usage. Favicons To further reinforce the brand, we associate the life loop symbol with any Age UK URL. By doing this, we create a visual identifier for people bookmarking Age UK sites or checking through their browser history.
10
Basic elements Digital colour palette

At Age UK, we are bold and energetic, and our colours reflect this. Our digital palette is made up of 7 colours, with 6 of them having supporting contrast colours. Our core brand digital colour palette complies to the code of practice set out in the Disability Discrimination Act (DDA). Colour should always be used in line with the main Age UK Brand Guidelines. However, care must be taken to ensure Age UK is always legible and accessible online.
Midnight blue
R: 20 G: 23 B: 96 WEB HEX 141760
Indigo purple
R: 115 G: 73 B: 140 WEB HEX 73498C R: 85 G: 34 B: 93 WEB HEX 55225D
Fuschia pink
R: 203 G: 0 B: 122 WEB HEX CB007A R: 158 G: 0 B: 94 WEB HEX 9E005E
Plum
R: 131 G: 3 B: 79 WEB HEX 83034F R: 92 G: 0 B: 55 WEB HEX 5C0037
Sky blue
R: 0 G: 174 B: 239 WEB HEX 00AEEF R: 0 G: 118 B: 163 WEB HEX 0076A3
Sunshine orange
R: 237 G: 89 B: 19 WEB HEX ED5913 R: 195 G: 67 B: 6 WEB HEX C34306
Apple green
R: 109 G: 156 B: 45 WEB HEX 6D9C2D R: 85 G: 125 B: 37 WEB HEX 557D25
11
Basic elements Use of colour

We always use our palette of distinctive colours to create fresh, bright and modern designs. In addition to the colours specified, white is extremely important to our palette, although it does not need specifying. We use contrasting colours for boldness and multiple colours for character. However, dont use so many colours on a design that it becomes confusing or fussy. It is essential that only colours from the digital palette are used. When using imagery, match surrounding colours to the photography. Websites The Local Age UK websites have been designed with a strong use of the brand colours. Colours have been assigned to sections of the sites, and this helps with signposting for users. Those colours are then carried through to the pages within these sections. Text There are some specific rules around using colour for text. These are: Bright Sky blue must never be used for any text, or images of text. Bright Sunshine orange and bright Apple green must never be used for any text, or images of text, that is less than 18-point, or 14-point if bold. For legibility, body copy should always be black: web hex #000000. Using tints We do not use tints of the colour palette in our digital materials, but we do use a tint of grey on our website. This is used to help the legibility of template information where there is a lot of content on the page. Using gradients No gradients to be used.
12
Basic elements Colour loop graphic

The colour loop is an important part of the Age UK identity. It adds colour, visual interest and ensures the brand is bold, striking and contemporary. The graphic can be used as an individual device or overlaid onto an image. It can be used as a main design feature or as an accent graphic to add interest. We do not recommend that it is used with text placed across it in digital environments. Please note that the RGB version should be used throughout any digital media. For detailed information on use of the life loop graphic refer to the Age UK brand guidelines.
13
Basic elements Use of type

Our chosen web font is Arial. Arial is a sans serif system font, which is highly legible on screen, in both bold and regular. Arial reflects our brand and gives us the opportunity to make all text accessible to all devices and be search engine friendly. Our main brand fonts are FS Me and Foco. These are mainly used in our offline materials, or for headlines on digital properties. If the user does not have the fonts loaded on their computer, the text will revert to the system font. For more information about how to use the main brand fonts, please refer to the Age UK brand guidelines.
Arial
Arial regular Arial Italic Arial bold Arial bold italic
The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog 1234567890 !?%&@
14
Basic elements Use of type

Our digital fonts work with our imagery, design and templates to create our overall page designs. There are some basic best practice rules to follow that will help with type layout: Use the system fonts in most instances only use the brand fonts sparingly. Use headings and sub-headings to break up text and content. Always use 12pt or larger online except for footnotes or legal statements. Always abide by the accessibility rules when setting type on a coloured background Do not introduce any other typefaces. Dont set text in a variety of formats.
15
Basic elements Tone of voice and writing for screen

Writing copy Writing copy for the web requires a slightly different approach to developing content for printed documents. The basic guidelines for most copy apply, i.e. write as clearly and simply as possible, and make sure that what you are giving out as fact is accurate and precise; but digital channels also offer us the opportunity to interact with users in a different way. Before you start: Consider who your main audience is: this may affect your tone of voice, or the levels of explanation you give Decide on what you want to say and to achieve Tone of voice Our tone of voice and writing style is explained fully in the main Age UK brand guidelines, with some examples to help you write copy. In summary it is based on the principles of: 1. Simplicity Avoid using 20 words when half a dozen will do: the message will sound much more direct and will be easier to understand. Get to the point as quickly as you can, before you lose the readers attention. 2. Clarity For longer text, use chapter or section headings and subheadings. Break up the text into paragraphs containing a main point each. Use a bullet or numbered list if you have three or more short points, but make sure they are used properly. 3. Accuracy Age UK should be a trusted and credible source of information people need to be sure that what we have told them is correct. It sounds obvious, but always make sure you have doublechecked all facts. Reading on screen Research shows that often people who read on screen scan text in a different way to the way they read printed materials. On screen, a users dominant reading pattern looks like the letter F. Eyetracking software proves that firstly, users read in a horizontal movement across the upper part of the content area, before moving down the page and then across in a second horizontal movement that typically covers a shorter area than previously, so forming the Fs lower bar.
F-shaped pattern
difficulties, has a very different reading style online to other audience groups. One of the most noticeable differences is the ability to understand text at a glance. Users in these audience groups must read word-for-word and may spend considerable time trying to understand multi-syllabic words. Because they need to focus more closely on the words, these users have a narrower field of view so can be likely to miss things going on around the main body of text. These users also tend to skip large chunks of text when they lose their concentration or find the wording too dense. Consequently, the key to writing for these users is to write in a more simple style and keep navigation and signposting clear and straightforward. Prioritise information, and try to minimise the risk of users losing their place after scrolling down. Keep global, elements consistent and visibly placed and make all of the text static.
Finally, users scan the contents left side in a vertical movement. Sometimes this is a fairly slow and systematic scan, whereas other users move faster. This last element forms the Fs stem. Write for your audience An audience which includes older people, visually impaired users and those with learning or cognitive
16
Basic elements Imagery and graphics

We have 5 guiding principles in choosing and using photography: People in later life have asked us to be mindful of the following five principles when we represent them photographically. They say: 1 Be inclusive We are from diverse backgrounds and origins, so make sure you represent us all. We want to be seen interacting not just with people of our own age but with people of all ages. 2 Be positive We live in colour. Show us that way. And be kind with the lighting we want to look our best. We love life look how much weve had of it. And are still having. Show it. 3 Be truthful and realistic Dont make us look unnatural, sitting in forced poses, doing things no one really ever does. Use empathy and quiet observation. Take your time to photograph us. 4 Show me solutions and benefits Show me the benefit, not the problem. Show me the fun part. Sometimes, show the benefit but definitely not the solution. Incontinence has a solution, but theres no need for a picture. 5 Respect me We deserve respect and dignity. Dont portray us as victims, outcasts or poor old dears. We wont be patronised and were not going to be shuffled off into a corner and kept quiet. There are comprehensive guides to imagery in the main Age UK brand guidelines, however, there is some guidance specific to our Local Age UK websites and other digital properties. The imagery you choose should represent your local area, the services you provide and the issues your audience face. They should be chosen for use with care and should always look natural and positive. Whether the subject is a portrait or a real life scenario, our photography always feels truthful, optimistic and honest. Photography should always contribute to the screen, and support the overall content or messaging. However, images do not have to be literal. It is more important to capture the essence of what is being said. When images are being shot or chosen always think about the space and size at which they will be used, and remember, cropping and framing imagery can add to the interest and strength of the shot.
17
Basic elements Imagery and graphics

If an image is being chosen for use in a particular section of the site, try to complement some of the hues associated with the section in the composition. There are three important rules to remember when choosing images: 1 Never use imagery that feels bleak, cold, or shows the negative aspects of growing older. 2 N ever use photography that is contrived or out of place. 3 Avoid staged, clichd or cheesy stock photography. All images used must be in RGB format Graphics As well as using imagery, icons and illustrations can be used as graphics. However, we recommend that these are created professionally and clip art should never be used.
18
Accessibility Web Accessibility Initiative compliance

Accessibility We have previously talked about the difference between Universal design and Accessible design. The general guidelines in this document provide directions on creating digital materials that are universally usable by the widest possible audiences. This section deals specifically with Accessibility focussing on people with auditory, cognitive, neurological, physical, speech, and visual impairments and the rules we must follow to ensure our websites and other digital media are Accessible. The Web Accessibility Initiative is a legal requirement under the Disability and Equality Act 2010. Many older people have age-related impairments that can affect how they use the Web, such as declining: vision including reduced contrast sensitivity, colour perception, and near-focus, making it difficult to read web pages physical ability including reduced dexterity and fine motor control, making it difficult to use a mouse and click small targets h earing including difficulty hearing higher-pitched sounds and separating sounds, making it difficult to hear podcasts and other audio, especially when there is background music cognitive ability including reduced short-term memory, difficulty concentrating, and being easily distracted, making it difficult to follow navigation and complete online tasks These issues overlap with the accessibility needs of people with disabilities. This means that websites and tools that are accessible to people with disabilities are more accessible to older users as well. Age UK is committed to supporting the Web Accessibility Initiative (WAI) and therefore all sites developed in partnership with Age UK must be compliant with the Web Content Accessibility Guidelines 2.0 (WCAG 2.0). Websites can be made accessible by many techniques. These include supporting the use of assistive technologies - such as text-to-speech software - by not using tables to format pages, or helping those who struggle with mouse accuracy with larger clickable areas. The benefits of following clear standards and guidelines are far-reaching. Web Content Accessibility guidelines It is essential that all people and agencies responsible for editing and publishing content to the website understand the requirements of this compliance. A full set of the WAI WCAG 2.0 standards and guidelines can be viewed at: http://www.w3.org/WAI/intro/wcag.php There are 3 levels of compliance with the WCAG guidelines, A, AA and AAA. We comply with level AA.
19
Accessibility Web Content Accessibility Guidelines

We do understand that the WCAG are lengthy and are not easy to understand for everyone. Our Local Age UK websites have all been built on a fully accessible platform, with inbuilt rules for accessibility compliance. However, we have provided compliance tips and best practice guidelines for you to follow in this document, as well as the following short checklist to help.
To be compliant, all digital media must be:
01
Perceivable
Provide text alternatives for any non-text content, so that it can be accessed in the required format, such as larger print, by speech readers use, or simpler language Provide captions and other alternatives for rich media content, such as transcriptions of all video, audio and moving image scripts Create content that can be presented in different ways - for example use a simpler layout - without losing meaning Make it easier for users to see and hear content, including separating foreground from background
02
Operable
Make all functionality available from a keyboard Give users enough time to read and use content Do not design content in a way that is known to cause seizures, i.e. rapidly flashing content Provide ways to help users navigate, find content and determine where they are
03
Understandable
Make text readable and understandable Make content appear and operate in predictable ways Help users avoid and correct mistakes
04
Robust
Maximise compatibility with current and future user tools, including assistive technologies
For more information about Accessibility visit: http://www.w3.org/WAI/gettingstarted/Overview.html

20
Section 2 Specific elements

There are a number of elements that are specific to the Local Age UK web templates, or need to be separately specified. This section provides information about those items for all site editors, designers and content providers.
21
Specific elements Web templates global elements

Templates have been created for all main web pages. We have described the global elements and each template in this section.
Header The header for the website always contains the following elements: Your Local Age UK logo The ability for the user to change their display options A clear link to the Age UK National website, shown in a Midnight blue box The Search Input box and Search button The header image The positioning of these elements should not be changed and no other elements should be included in the header. This header appears on every page. There is a watermark of a representation of the life loop on every template and this sits behind these elements.
Header image The header image should be a professional looking photograph which represents your local area and portrays its personality and identity. Your Local Age UK name and the strap line For the local community can be changed using the Content Management System. The chosen image must be suitable for the text and you need to ensure the text is legible and meets colour contrast guidance. Images may need to be retouched or manipulated to make this work. If you do not have a suitable image you may use the name and strapline on a plain, Midnight blue panel This is the default setting, however we recommend that an image is used.
Navigation Navigation appears on the left-hand side of the web pages. There are 7 main sections, and these have all been assigned a brand colour, which is shown with a line underneath the navigation signpost. All site content should sit within these navigation headings.
22
Specific elements Web templates global elements
Contact panel This is a panel which includes: Your Local Age UK name Your Local Age UK telephone number A link to your contact details Social Bookmarks Social bookmarks are links to be able to easily share your pages with users through social channels such as Facebook or Twitter. Social bookmarks appear on all pages.
Alt tag Alt tags must be applied to every image used on the site. They act as an alternative description of the image and are read by screen readers. An Alt tag is alternative text that is shown to the user when the image cannot be seen. For instance, a visually impaired user, who is using a screen reader, will hear the the alt text in place of an image.
The option to email this page is also given in this panel.
Footer The footer should always contain links to the global navigation areas and a link to the National Age UK website. This is represented in a Midnight blue panel. Legal and ownership information is also contained in the footer.
23
Specific elements Web templates home page (top)

The Home page is the first page most users will visit.
Headline promo box The main large image on the home page is called the Headline promo box and it should be used to promote a specific event, campaign or area of content on the site. It should feature strong imagery that gives a feel for the subject matter.
Call to action A clear call to action should be used to drive users to the content relating to this hero promotion.
Reverse colour module The use of a reverse colour module, with an image and text provides contrast from the content above and below and helps this area stand out on the page. Always aim to line up your call to action buttons with the bottom of the image for a professional look and feel. Links Links to internal site content always feature the chevron icon, so users have a consistent way of understanding where the link will lead.
24
Specific elements Web templates home page (bottom)
Links Use contrasting colours to help links and actions stand out. This should be the same colour as the heading text and border.
Content Module This module features a two column set, with imagery and content links. Both columns of the module must contain content and headings, and links must appear in the colour for the section in which the content sits.
25
Specific elements Web templates menu page (top)

This menu page is one of the pages a user will reach when clicking on a signpost in the main navigation. This page allows you to promote content that sits within each section. The template will take on the colourway of the section it relates to. In this instance the Our Services menu page uses the dark Apple as its main colour, as per the navigation.
Modules This module allows for a large page title and some explanatory text. Its purpose is to provide an introduction to the section. The space allowed for this is flexible, but we recommend you do not exceed 100 words.
This module allows you to have up to 4 links to other areas within the site, and an image. This quadruple set of content areas allow you to group content and links within the section to help users to find information easily. You can use explanatory headings and 2-3 line descriptors, along with up to 4 links and an image.
26
Specific elements Web templates menu page (bottom)
Using a module with a left-hand image helps to break up the page and allows space for additional information and links, if required.
This module allows for two columns of contact information or other text. External links Where links to external websites are promoted, the external website icon must be used as it is a consistant way of indicating to the user that they are to be taken to an external site.
Download icon When providing documents for users to download the arrow icon should be used. Grouping links It is very useful to group links together to further content and information. Headings should be used to differentiate whether links direct to internal or external content and the appropriate icons should be used.
27
Specific elements Web templates content page (top)

This is the main content page. It is made up of a series of modules, which can be used according to the content. It is important that you think about the construction of the page, to ensure that it does not look overcrowded or difficult for users to find the information they require. This template shows all of the possible content modules. You do not need to use all of them. Leave anything you dont want to use blank.
Modules This module allows for a large page title, paragraph of explanatory text and an image. The image sits to the right of the text and title and is 232h x 132w pixels in size. The download icon must always be used where there is a document to download This is a flexible module, which allows you to feature different types of content, including downloads, links, an image and a table.
Information can be presented in tabular format where it makes sense to do so, and where there is complex information that needs simplifying.
28
Specific elements Web templates content page (bottom)
This module allows for two columns of contact information or other text. On any form it is always important to think carefully about the data you wish to capture, and do not capture anything that is not essential or useful to you. Always ensure that input titles or questions are clear and self-explanatory, so the user knows exactly the information they should complete. Always make sure drop-down menus are populated and users are invited to select or can clearly understand the action they are required to take. Required fields on a form are always indicated by a red asterix. This alerts the user to the fact this information is mandatory. The Submit (or action) button must always be positioned to the right, in clear space and easily visible to the user. Using a block colour module on a busy page can be very effective in helping to break up the content and draw attention to key points. This is best used as a highlight, rather than for large blocks of content. It is very useful to group links to further content and information together. Headings should be used to differentiate whether links direct to internal or external content, and the appropriate icons should be used.
29
Specific elements Web templates latest news
Introduction At the top of the News & campaignspage we have allowed space for you to write some explanatory text. This space is flexible, but we recommend that you dont include too much, as it will make the page look busy and push the news further down the page. We would suggest approximately 100 words. Tabs The News landing page has tabs which allow the user to switch between latest news and the news archive. Latest News area Always features a news headline, the date of the article and the first three lines of the article. Listings Space is allowed for the last 3 stories to be listed, along with a further link to the News archive Module This module allows you to promote a relevant campaign or feature article, along with an image and a link to internal content.
30
Specific elements Web templates news archive
Introduction At the top of the News & campaigns page we have allowed space for you to write some explanatory text. This space is flexible but we recommend that you dont include too much as it will make the page look busy and push the news further down the page. We would suggest approximately 100 words. Archive Only 3 years worth of news stories are archived. Archive stories News archive stories are listed in date order, and filed under the appropriate year.
31
Specific elements Web templates news article
Instructions The large heading, coloured introduction text and image provides space to introduce the news article and include a representative photograph.
Main body The main body of the news article should be published in this space.
Contact information Always provide contact information for a news article, so users are clear about who to talk to for further information. Remember, news articles may be picked up by journalists and local press so they need to be able to contact you. Alternative options Adding alternative contact options such as an enquiry form is useful, and always include information to download or other useful links.
32
Specific elements Web templates newsletter sign-up
Instructions At the top of the Newsletter sign-up page we have allowed space for you to write some explanatory text. This space is flexible but we recommend that you dont include too much as it will make the page look busy and push the sign up form further down the page. We would suggest approximately 150 words. Required fields On a form these are always indicated by a red asterix. This alerts the user to the fact this information is mandatory. Data Always think carefully about the data you wish to capture, and do not capture anything that is not essential or useful to you. Always ensure that input titles or questions are clear and self-explanatory, so the user knows exactly the information they should complete. Protection statement All forms which capture user data will require a data protection statement. This always sits below the form, but above the Submit or action button. Submit The Submit (or action) button must always be positioned to the right, in clear space and easily visible to the user.
33
Specific elements Web templates newsletter sign-up error handling

This illustration shows how errors are presented to the user.
Form fields are validated against completion for required fields. If a required field is not completed an error will display at the top of the page, with text to explain to the user the area that has been missed.
34
Specific elements Web templates donation page (top)

This page is compiled from a series of predefined modules, which are used together to create an interesting and evenly paced user experience. Always think carefully about the order in which modules are used and try to include variety on a long content page.
Modules This header module is made up with: a clear and descriptive heading descriptive body copy a clear call to action links to other areas or other sites if required When a background colour is used the call to action buttons must stand out clearly. Try to visually line up text and images evenly at the bottom where possible, as this creates a professional and consistent feel to the content. The size of the image in this module is 291w x 185h pixels. This module consists of 2 text blocks, that can be used with or without a call to action button. If this module is used both text blocks must contain content.
35
Specific elements Web templates donation page (bottom)
This module contains a heading and a series of links to other areas in the site. The image in the right hand column does not scale, it always remains 302w x 185h pixels size.
Full width text modules can contain an image, such as a logo or cut out picture.
36
Specific elements Web templates local directory

The local directory allows uses to see local events listings.
Instructions At the top of the Local Directory page we have allowed space for you to write some explanatory text. This space is flexible but we recommend that you dont include too much as it will make the page look busy and push the listings and map further down the page. We would suggest approximately 100 words. External links Must always be highlighted with the use of the external link icon. Listings The Local Directory listings are shown in a twocolumn layout. The map is provided using Bing Maps, and this has a standard format and layout. Map The map sits under the listings, which allows it to make use of the full width of the content panel. This is important as it allows some space between the map pins, especially on very heavily populated areas. Pagination Consistency is used to assist the user with navigation to more listings.
37
Specific elements Web templates event listings

Each event listing will have a page which details information about the event.
Map A static map will dynamically appear on an event listing page. The size and location of this element is set. Details The listings details will appear to the side of the static map. Provide as much detail as possible to help people understand the key information about the event or listing. External links Must always be highlighted with the use of the external link icon.
38
Specific elements Web templates calendar
Instructions At the top of the Calendar page we have allowed space for you to write some explanatory text. This space is flexible but we recommend that you dont include too much as it will make the page look busy and push the calendar further down the page. We would suggest approximately 100 words. Listings Calender listings are shown to the right hand side of the calendar grid, which makes good use of the space available and ensures users do not need to scroll.
Calendar The calendar grid uses the bright Fuschia colour, as it is part of the Activities & Events section. Dates which have populated events are blocked out in the Fuschia and the date you have selected is shown blocked out in the Midnight blue. If no date is selected then todays date will be shown in the Midnight blue. Users can easily move between the previous and next month. Pagination Is used to assist the user with navigation to more listings.
39
Specific elements Web templates calendar listing

This page is exactly the same as the local directory listing page, other than the difference of the heading, date and icon colours, which are shown in the Fuschia.
A static map will dynamically appear on an event listing page. The size and location of this element is set at 300w x 199h pixels. The listings details will appear to the side of the static map. Provide as much detail as possible to help people understand the key information about the event or listing. External links must always be highlighted with the use of the external link icon.
40
Specific elements Video and audio content

Incorporating video and audio content is a great way of getting messages across to your audiences and transforming a website into a rich, multimedia experience. However, as with all content, you should think carefully about what you are trying to say and who it is aimed at. Generally, video content should be short and succinct, to keep a viewers attention. If you are using video or audio for online training or a specific presentation it may be worth considering editing longer content into segments, so that users have the option of viewing it as shorter pieces. It is useful to have a call to action at the end of the video, and the video should not start automatically when a user arrives at the page. The user must always have the option to turn the sound on/off, and to play, stop/ pause, rewind and forward the video. With audio content the user should initiate the playing of the sound. Production Video content can now be produced by almost anyone with a suitable camera or even a phone camera. However, while it is tempting to save costs by using amateur video, remember that the message and content must always look and sound professional and well produced. The sound on the video or any audio files must be clear, with all spoken words legible and background noise removed or minimised. Any music that is used on a video or audio file must be copyright free or cleared for usage and must not contravene any copyright rules. Alternative content If video or audio files are used on your website, an alternative method of accessing the content must also be provided. This is most usually done by supplying a link to a transcription of the sound.
41

Digital Guidelines For Local Age UKs

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Digital Guidelines For Local Age UKs

Uploaded by

Copyright:

Available Formats

Digital guidelines for local Age UKs

Version 1.0 April 2011

Section 1: Basic elements

Section 2: Specific elements

Version 1.0 August 2011