Digital Guidelines for Local Age UKs

7/27/2019 Digital Guidelines for Local Age UKs

1/42

Version 1.0 April 2011

Digital guidelinesfor local Age UKs


2/42

Digital Guidelines or Local Age UKs 2Version 1.0 August 2011

Contents

Introduction

Document usage and contacts 03

Weclome 04

Digital design principles 05

Section 1:

Basic elementsLogo specication 07

Logo usage - things to avoid 08

Logo usage 09

Digital colour palette 11

Use o colour 12

Colour loop graphic 13

Use o type 14

Tone o Voice and Writingor screen 16

Imagery and graphics 17

WAI compliance 19

WCAG 2 at a glance 20

Section 2:

Specifc elementsWeb templates - global elements 22

Home page 24

Menu page 26

Content page 28

Latest news 30

News archive 31

News Article 32

Newsletter sign-upand error handling 34

Newsletter sign-up 33

Donation page 35

Local directory 37

Event listings 38

Calendar 39

Calendar listing 40

Video and audio content 41


3/42


Introduction

Age UK is the voice o age. We are hereto represent all that people in later liehave to oer. We bring together thevital products and services oAge Concern and Help the Aged,and add to them something new.By combining our time and talents,our services and our solutions, we cando more to enrich the lives o many,

both at home and abroad.

The digital environment and theopportunities that new technologiesoer us are essential elements o ourability to deliver upon this promise.

These digital guidelines are hereto support Local Age UKs who areworking with our digital brand.This document provides specicinormation or digital channels andshould be read in conjunction withthe main Age UK Digital guidelinesand the Local Age UK brand guidelines.

Document usage

and contacts

For more inormation about theseguidelines, contact:

Helen BarrattDigital Partner ManagerAge UKTavis House1-6 Tavistock SquareLondonWC1H 9NB

T: 020 3033 1573E: [email protected]

For more inormation about theAge UK digital guidelines, contact:

Alison McCormackGroup Head o DigitalAge UKTavis House1-6 Tavistock SquareLondonWC1H 9NB


For more inormation about theAge UK brand guidelines, contact:

Daniel StewartBrand Marketing ManagerAge UKTavis House1-6 Tavistock SquareLondonWC1H 9NB



4/42


Introduction

Welcome Our digitaldesign principles

Together, we have built the most amazingonline resource to help older people.The Age UK digital presence is the largestin the charitable sector, and is the result ocollaborative work that has united over 200websites under a shared purpose.Now more people than ever beore can easilydiscover more about the work o Age UK bothnationally and locally.These guidelines will help keep principleso collaboration and shared purpose at theheart o the network o local sites. Together,we can take ull advantage o the digitalcommunications revolution and the everincreasing part it plays in the lives o our coreaudiences.

This is very much the start, not the end o the

journey. We look orward to working on all theways we can help make your work come tolie in a digital age.

The Age UK identity is designed to help usstand out rom the crowd. Our choices owords and images are careully decided tohelp make everyone think dierently aboutwhat it means to age. But our digital designprinciples run deeper than the visual interaceo our digital properties. In designing or ouraudiences we are concerned with accessibleand universal design.

Accessible design includes the needso people whose physical, mental, orenvironmental conditions limit theirperormance.

Universal design aims to extend standarddesign principles to make them inclusiveor people o all ages and abilities, but doesnot address all o the specic needs o any

particular disability.


5/42


Introduction

Digital design

principlesOur digital design principles arebased on 5 key elements:

01Build or usersKeeping our users ront-o-mind and always trying tomeet their needs is anessential ocus o our strategy.Understanding user needs isnot always easy, but ourdigital properties must bedesigned with audienceunderstanding and to meetclear user goals. Where

possible we should test withreal people.

02Be inclusiveInclusive design means thatwe design or all possibleusers, irrespective o their ageor ability. For our audiences,digital technologies canprovide great opportunities toaccess inormation, services,products and tools, but weneed to be aware that newtechnologies can introduce

new barriers, and these mustalso be considered.

03Design anengaginginteraceThe reshness and vitalityo our brand creates a newspace and new tools orcommunicating our variedmessages. We have expressiveassets and elements, includingour vibrant colour palette andimage style as part o ourdigital design toolkit. Useour brand condentlyand expertly.

04Be simple,intuitive andconsistentAlways base designs on userexpectations. We dont designto be dierent or the sake oit and it is always our aim tokeep user journeys,unctionality and interaces assimple as possible. Consistencyis an important actor inproviding intuitive experiences.

05Focus on contentWe are a trusted source oinormation and support.It is important that ourcontent is well-considered,grammatically accurate, easy-to-read and actually correct.


6/42

Section 1Basic elements

I you are designing and producing digitalmaterials or a Local Age UK then you will needto know the rules about using our logos, ourdigital colour palette, our typeaces and ourgraphic devices. You will nd the specicationsor these basic elements in this section.

Version 1.0 August 2011 Digital Guidelines or Local Age UKs 6


7/42


Basic elements

Logo specifcation

Our logos comprise three elements the lie loop, the words Age UK and

your name. The logo should always beused in ull colour.

In digital media the space aroundthe logo and the space given tocommunicate key messages must becareully balanced. The main brandguidelines speciy a minimum cleararea or ofine materials, but it is otenthe case that we are working withsmaller spaces than in print.

The minimum area o clear spaceis shown here by the grey shadedarea containing the Age UK logo.The construction o this box is basedon 3/4 o the width o the e. Wherepossible you should use this guidelineor as near to it as possible.

Where it is not possible to meetthis guideline, as a minimum use1/2 X. This rule applies or all localAge UKs logos.

Please note that the RGB version o thelogo should be used throughout anydigital media. Logos created or printshould never be used.

XXX

X

X

1/2X

1/2X


8/42Digital Guidelines or Local Age UKs 8Version 1.0 August 2011

Basic elements

Logo usage

things to avoidAlways only use approved artworkor the logo and give it space andprominence when you can. Thereare some clear things to avoid,which are demonstrated here:

A master logo or use in digitalmedia is available.

Please note that the RGB version othe logo should be used throughoutany digital media. Logos created orprint should never be used.

For full logo usage details please referto the Age UK brand guidelines.

1 Dont encroach on the clear space

5 Dont alter the size, scale orcolour o individual elementswithin the logo

9 Dont change the typeace always use the master artworksupplied

2 Dont use the ull colour logoon any coloured backgrounds

6 Dont rotate or crop the logoin any way

10 Dont place text in the clear spacearea or create a sub-brand usingthe logo

3 Dont use the ull colour logoon complicated photographicbackgrounds

7 Dont distort the logo in any way

11 Dont apply any eects tothe logo

4 Dont use the lie loop or theAge UK wording separately

8 Dont change the colour o thelogo or colour the elementsseparately

Camden

Shop



Basic elements

Logo usage

Our logo is used on a variety odigital materials.

Small spacesWhen we use the logo in digitalenvironments we do not speciyabsolute sizes, but as a guideline wedo ask that it is not used any smallerthan 70 pixels.

Logo size on website is 80 pixelsin height.

70px

80px

Our website and emailsOur website and emails provide uswith enough space to display thelogo prominently. The size o the logoshould be in balance with the pageand content.



Basic elements

Logo usage

External sitesOur logo guidelines should be refectedin any external usage.

FaviconsTo urther reinorce the brand, weassociate the lie loop symbol withany Age UK URL. By doing this, wecreate a visual identier or peoplebookmarking Age UK sites or checkingthrough their browser history.


11/42


Basic elements

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

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

Plum

R: 131 G: 3 B: 79

WEB HEX 83034F

R: 92 G: 0 B: 55

WEB HEX 5C0037

Digital colour

paletteAt Age UK, we are bold and energetic,and our colours refect this. Ourdigital palette is made up o7 colours, with 6 o them havingsupporting contrast colours.

Our core brand digital colour palettecomplies to the code o practice setout in the Disability Discrimination

Act (DDA).

Colour should always be used inline with the main Age UK BrandGuidelines. However, care must betaken to ensure Age UK is alwayslegible and accessible online.


12/42


Basic elements

Use o colour

We always use our palette odistinctive colours to create resh,bright and modern designs. Inaddition to the colours specied,white is extremely important to ourpalette, although it does not needspeciying. We use contrasting coloursor boldness and multiple coloursor character. However, dont useso many colours on a design that itbecomes conusing or ussy.

It is essential that only colours romthe digital palette are used.

When using imagery, matchsurrounding colours to thephotography.

WebsitesThe Local Age UK websites have beendesigned with a strong use o thebrand colours. Colours have beenassigned to sections o the sites,and this helps with signposting orusers. Those colours are then carriedthrough to the pages within thesesections.

TextThere are some specic rules aroundusing colour or text. These are:

Bright Sky blue must never be usedor any text, or images o text.

Bright Sunshine orange and brightApple green must never be usedor any text, or images o text, thatis less than 18-point, or 14-point i

bold. For legibility, body copy should

always be black: web hex #000000.

Using tintsWe do not use tints o the colourpalette in our digital materials,but we do use a tint o grey on ourwebsite. This is used to help thelegibility o template inormationwhere there is a lot o content onthe page.

Using gradientsNo gradients to be used.


13/42


Basic elements

Colour loop graphic

The colour loop is an important parto the Age UK identity. It adds colour,visual interest and ensures the brandis bold, striking and contemporary.

The graphic can be used as anindividual device or overlaid ontoan image. It can be used as a maindesign eature or as an accentgraphic to add interest. We donot recommend that it is used

with text placed across it in digitalenvironments.

Please note that the RGB versionshould be used throughout anydigital media.

For detailed information on use of thelife loop graphic refer to the Age UKbrand guidelines.


14/42


Basic elements

Our chosen web ont is Arial. Arial is asans seri system ont, which is highlylegible on screen, in both bold andregular. Arial refects our brand andgives us the opportunity to make alltext accessible to all devices and besearch engine riendly.

Our main brand onts are FS Me andFoco. These are mainly used in ourofine materials, or or headlines ondigital properties. I the user doesnot have the onts loaded on theircomputer, the text will revert to thesystem ont.

For more information about how touse the main brand fonts, please referto the Age UK brand guidelines.

AaAa aArial Italic

Arial bold

Arial bold italic

T

t a

The quick brown fox

jumps over The lAzy dog

1234567890 !?%&@

Use o type


15/42


Basic elements

Use o type

Our digital onts work with ourimagery, design and templates tocreate our overall page designs. Thereare some basic best practice rules toollow that will help with type layout:

Use the system onts in mostinstances only use the brandonts sparingly.

Use headings and sub-headings to

break up text and content.

Always use 12pt or larger online except or ootnotes or legalstatements.

Always abide by the accessibilityrules when setting type on acoloured background

Do not introduce any other

typeaces.

Dont set text in a variety o ormats.


16/42


Basic elements

Tone o voice and

writing or screenWriting copyWriting copy or the web requires aslightly dierent approach todeveloping content or printeddocuments. The basic guidelines ormost copy apply, i.e. write as clearlyand simply as possible, and make surethat what you are giving out as act isaccurate and precise; but digitalchannels also oer us the opportunityto interact with users in a dierentway.

Beore you start:

Consider who your main audience is:this may aect your tone o voice, orthe levels o explanation you give

Decide on what you want to sayand to achieve

Tone o voiceOur tone o voice and writing styleis explained ully in the main Age UKbrand guidelines, with some examplesto help you write copy. In summary itis based on the principles o:

1. SimplicityAvoid using 20 words when hal adozen will do: the message will soundmuch more direct and will be easierto understand. Get to the point asquickly as you can, beore you lose thereaders attention.

2. ClarityFor longer text, use chapter or section

headings and subheadings. Break upthe text into paragraphs containing amain point each. Use a bullet ornumbered list i you have three or moreshort points, but make sure they areused properly.

3. AccuracyAge UK should be a trusted andcredible source o inormation peopleneed to be sure that what we have toldthem is correct. It sounds obvious, butalways make sure you have double-checked all acts.

Reading on screenResearch shows that oten people whoread on screen scan text in a dierentway to the way they read printedmaterials. On screen, a users dominantreading pattern looks like the letter F.

Eyetracking sotware proves thatrstly, users read in a horizontalmovement across the upper part othe content area, beore moving downthe page and then across in a secondhorizontal movement that typicallycovers a shorter area than previously,so orming the Fs lower bar.

Finally, users scan the contents letside in a vertical movement.

Sometimes this is a airly slow andsystematic scan, whereas other usersmove aster. This last element ormsthe Fs stem.

Write or your audienceAn audience which includes olderpeople, visually impaired users andthose with learning or cognitive

diculties, has a very dierentreading style online to otheraudience groups.

One o the most noticeable dierencesis the ability to understand text at aglance. Users in these audience groupsmust read word-or-word and mayspend considerable time trying tounderstand multi-syllabic words.

Because they need to ocus moreclosely on the words, these users havea narrower eld o view so can be likelyto miss things going on around themain body o text. These users alsotend to skip large chunks o text whenthey lose their concentration or ndthe wording too dense.

Consequently, the key to writing or

these users is to write in a more simplestyle and keep navigation andsignposting clear and straightorward.Prioritise inormation, and try tominimise the risk o users losing theirplace ater scrolling down. Keep global,elements consistent and visibly placedand make all o the text static.

F-shaped

pattern


17/42


Basic elements

Imagery

and graphicsWe have 5 guiding principles inchoosing and using photography:

People in later lie have asked us to bemindul o the ollowing ve principleswhen we represent themphotographically. They say:

1 Be inclusiveWe are rom diverse backgrounds andorigins, so make sure you represent usall. We want to be seen interacting not

just with people o our own age butwith people o all ages.

2 Be positiveWe live in colour. Show us that way.And be kind with the lighting wewant to look our best. We love lie look how much weve had o it. Andare still having. Show it.

3 Be truthul and realisticDont make us look unnatural, sittingin orced poses, doing things no onereally ever does. Use empathy andquiet observation. Take your time tophotograph us.

4 Show me solutions and beneftsShow me the benet, not the problem.Show me the un part. Sometimes,show the benet but denitely not thesolution. Incontinence has a solution,but theres no need or a picture.

5 Respect meWe deserve respect and dignity. Dontportray us as victims, outcasts or poorold dears. We wont be patronised andwere not going to be shufed o intoa corner and kept quiet.

There are comprehensive guides toimagery in the main Age UK brandguidelines, however, there is someguidance specic to our Local Age UKwebsites and other digital properties.

The imagery you choose shouldrepresent your local area, the services

you provide and the issues youraudience ace. They should be chosenor use with care and should alwayslook natural and positive. Whether thesubject is a portrait or a real liescenario, our photography always eelstruthul, optimistic and honest.

Photography should always contributeto the screen, and support the overallcontent or messaging. However,images do not have to be literal. It ismore important to capture the essence

o what is being said. When images arebeing shot or chosen always thinkabout the space and size at which theywill be used, and remember, croppingand raming imagery can add to theinterest and strength o the shot.


18/42


Basic elements

Imagery

and graphicsI an image is being chosen or use ina particular section o the site, try tocomplement some o the huesassociated with the section in thecomposition.

There are three important rules toremember when choosing images:

1 Never use imagery that eels bleak,

cold, or shows the negative aspectso growing older.

2 Never use photography that iscontrived or out o place.

3 Avoid staged, clichd or cheesystock photography.

All images used must be inRGB ormat

Graphics

As well as using imagery, icons andillustrations can be used as graphics.However, we recommend that theseare created proessionally and clip artshould never be used.


19/42


Accessibility

Web Accessibility

Initiative complianceAccessibilityWe have previously talked about thedierence between Universal designand Accessible design. The generalguidelines in this document providedirections on creating digital materialsthat are universally usable by thewidest possible audiences.

This section deals specically withAccessibility ocussing on people withauditory, cognitive, neurological,physical, speech, and visualimpairments and the rules we mustollow to ensure our websites andother digital media are Accessible.

The Web Accessibility Initiative is alegal requirement under the Disabilityand Equality Act 2010.

Many older people have age-relatedimpairments that can aect how theyuse the Web, such as declining:

vision including reduced contrastsensitivity, colour perception, andnear-ocus, making it dicult toread web pages

physical ability including reduced

dexterity and ne motor control,making it dicult to use a mouseand click small targets

hearing including dicultyhearing higher-pitched sounds andseparating sounds, making itdicult to hear podcasts and otheraudio, especially when there isbackground music

cognitive ability includingreduced short-term memory,diculty concentrating, and beingeasily distracted, making it dicultto ollow navigation and completeonline tasks

These issues overlap with theaccessibility needs o people withdisabilities. This means that websitesand tools that are accessible to peoplewith disabilities are more accessible toolder users as well.

Age UK is committed to supportingthe Web Accessibility Initiative (WAI)and thereore all sites developed inpartnership with Age UK must becompliant with the Web ContentAccessibility Guidelines 2.0 (WCAG 2.0).

Websites can be made accessible bymany techniques. These includesupporting the use o assistivetechnologies - such as text-to-speechsotware - by not using tables toormat pages, or helping those whostruggle with mouse accuracy with

larger clickable areas. The benets oollowing clear standards andguidelines are ar-reaching.

Web Content Accessibility guidelinesIt is essential that all people andagencies responsible or editing andpublishing content to the websiteunderstand the requirements o thiscompliance. A ull set o the WAIWCAG 2.0 standards and guidelinescan be viewed at:http://www.w3.org/WAI/intro/wcag.php

There are 3 levels o compliance withthe WCAG guidelines, A, AA and AAA.We comply with level AA.


20/42


Accessibility

Web Content

AccessibilityGuidelinesWe do understand that the WCAGare lengthy and are not easy tounderstand or everyone. Our LocalAge UK websites have all been builton a ully accessible platorm, withinbuilt rules or accessibilitycompliance. However, we haveprovided compliance tips and best

practice guidelines or you to ollowin this document, as well as theollowing short checklist to help.

01Perceivable Provide text alternatives

or any non-text content,so that it can be accessedin the required ormat,such as larger print, byspeech readers use, orsimpler language

Provide captions andother alternatives orrich media content, suchas transcriptions o allvideo, audio and movingimage scripts

Create content that canbe presented indierent ways - or

example use a simplerlayout - withoutlosing meaning

Make it easier or users tosee and hear content,including separatingoreground rombackground

02Operable Make all unctionality

available rom akeyboard

Give users enough timeto read and use content

Do not design content ina way that is known tocause seizures, i.e.rapidly fashing content

Provide ways to helpusers navigate, ndcontent and determinewhere they are

03Understandable Make text readable and

understandable

Make content appear andoperate in predictableways

Help users avoid andcorrect mistakes

04Robust Maximise compatibility

with current and utureuser tools, includingassistive technologies

To be compliant, all digital media must be:

For more information about Accessibility visit:http://www.w3.org/WAI/gettingstarted/Overview.html


21/42

Section 2Speciic elements

There are a number o elements that arespecic to the Local Age UK web templates,or need to be separately specied. This sectionprovides inormation about those items or allsite editors, designers and content providers.



22/42


Specic elements

Web templates

global elements HeaderThe header or the website always contains theollowing elements:

Your Local Age UK logo The ability or 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 o these elements should not bechanged and no other elements should be included

in the header. This header appears on every page.

There is a watermark o a representation o thelie loop on every template and this sits behindthese elements.

Header imageThe header image should be a proessional lookingphotograph which represents your local area andportrays its personality and identity.

Your Local Age UK name and the strap line For the

local community can be changed using theContent Management System.

The chosen image must be suitable or the textand you need to ensure the text is legible and meetscolour contrast guidance. Images may need to beretouched or manipulated to make this work.

I you do not have a suitable image you may use thename and strapline on a plain, Midnight blue panelThis is the deault setting, however we recommendthat an image is used.

NavigationNavigation appears on the let-hand side o the webpages. There are 7 main sections, and these have allbeen assigned a brand colour, which is shown with aline underneath the navigation signpost.

All site content should sit within these navigationheadings.

Templates have been created orall main web pages.

We have described the globalelements and each template inthis section.


23/42


Web templates

global elements Contact panelThis is a panel which includes: Your Local Age UK name Your Local Age UK telephone number A link to your contact details

Social BookmarksSocial bookmarks are links to be able to easily share

your pages with users through social channels suchas Facebook or Twitter. Social bookmarks appear onall pages.

The option to email this page is also given in

this panel.

FooterThe ooter should always contain links to theglobal navigation areas and a link to the NationalAge UK website. This is represented in a Midnightblue panel.

Legal and ownership inormation is also containedin the ooter.

Alt tagAlt tags must be applied to every imageused on the site. They act as an alternativedescription o the image and are read byscreen readers.

An Alt tag is alternative text that is shown tothe user when the image cannot be seen. Forinstance, a visually impaired user, who is usinga screen reader, will hear the the alt text inplace o an image.

Specic elements


24/42


25/42


Specic elements

Web templates

home page(bottom)

LinksUse contrasting colours to help links and actionsstand out. This should be the same colour as theheading text and border.

Content ModuleThis module eatures a two column set, withimagery and content links. Both columns o themodule must contain content and headings, andlinks must appear in the colour or the section inwhich the content sits.


26/42


Specic elements

Web templates

menu page(top)

ModulesThis module allows or a large page title and someexplanatory text. Its purpose is to provide anintroduction to the section.

The space allowed or this is fexible, but werecommend you do not exceed 100 words.

This module allows you to have up to 4 links to otherareas within the site, and an image.

This quadruple set o content areas allow youto group content and links within the section tohelp users to nd inormation easily. You can useexplanatory headings and 2-3 line descriptors, alongwith up to 4 links and an image.

This menu page is one o the pagesa user will reach when clicking on asignpost in the main navigation.

This page allows you to promotecontent that sits within each section.

The template will take on the

colourway o the section it relatesto. In this instance the Our Servicesmenu page uses the dark Apple as itsmain colour, as per the navigation.


27/42


Using a module with a let-hand image helps tobreak up the page and allows space or additional

inormation and links, i required.

This module allows or two columns o contactinormation or other text.

External linksWhere links to external websites are promoted,the external website icon must be used as it is aconsistant way o indicating to the user that theyare to be taken to an external site.

Download iconWhen providing documents or users to downloadthe arrow icon should be used.

Grouping linksIt is very useul to group links together to urthercontent and inormation. Headings should be usedto dierentiate whether links direct to internal orexternal content and the appropriate icons shouldbe used.

Specic elements

Web templates

menu page(bottom)


28/42


Specic elements

Web templates -

content page(top)

ModulesThis module allows or a large page title, paragrapho explanatory text and an image. The image sitsto the right o the text and title and is 232h x 132w

pixels in size.

This is a fexible module, which allows you to eaturedierent types o content, including downloads,links, an image and a table.

Inormation can be presented in tabular ormatwhere it makes sense to do so, and where there iscomplex inormation that needs simpliying.

The download icon must always beused where there is a document todownload

This is the main content page. Itis made up o a series o modules,which can be used according tothe content.

It is important that you think aboutthe construction o the page, toensure that it does not look over-

crowded or dicult or users to ndthe inormation they require.

This template shows all o thepossible content modules. You donot need to use all o them. Leaveanything you dont want to use blank.


29/42


Specic elements

Web templates -

content page(bottom)

This module allows or two columns o contact

inormation or other text.

On any orm it is always important to thinkcareully about the data you wish to capture, and donot capture anything that is not essential or useulto you.

Always ensure that input titles or questions are clearand sel-explanatory, so the user knows exactly theinormation they should complete.

Always make sure drop-down menus are populatedand users are invited to select or can clearlyunderstand the action they are required to take.

Required elds on a orm are always indicated bya red asterix. This alerts the user to the act thisinormation is mandatory.

The Submit (or action) button must always bepositioned to the right, in clear space and easilyvisible to the user.

Using a block colour module on a busy page can bevery eective in helping to break up the content anddraw attention to key points. This is best used as ahighlight, rather than or large blocks o content.

It is very useul to group links to urther contentand inormation together. Headings should be usedto dierentiate whether links direct to internal orexternal content, and the appropriate icons shouldbe used.


30/42


Web templates

latest news

IntroductionAt the top o the News & campaignspage we have

allowed space or you to write some explanatory text.

This space is fexible, but we recommend that youdont include too much, as it will make the pagelook busy and push the news urther down the page.

We would suggest approximately 100 words.

TabsThe News landing page has tabs which allowthe user to switch between latest news and thenews archive.

Latest News areaAlways eatures a news headline, the date o thearticle and the rst three lines o the article.

ListingsSpace is allowed or the last 3 stories to be listed,along with a urther link to the News archive

ModuleThis module allows you to promote a relevantcampaign or eature article, along with an imageand a link to internal content.

Specic elements


31/42


Web templates

news archive

IntroductionAt the top o the News & campaigns page we

have allowed space or you to write someexplanatory text.

This space is fexible but we recommend that youdont include too much as it will make the page lookbusy and push the news urther down the page.


ArchiveOnly 3 years worth o news stories are archived.

Archive storiesNews archive stories are listed in date order, andled under the appropriate year.

Specic elements


32/42


Specic elements

Web templates

news article

InstructionsThe large heading, coloured introduction text and

image provides space to introduce the news articleand include a representative photograph.

Main bodyThe main body o the news article should bepublished in this space.

Contact inormationAlways provide contact inormation or a newsarticle, so users are clear about who to talk to orurther inormation. Remember, news articles maybe picked up by journalists and local press so they

need to be able to contact you.

Alternative optionsAdding alternative contact options such asan enquiry orm is useul, and always includeinormation to download or other useul links.


33/42


Specic elements

Web templates

newsletter sign-up

InstructionsAt the top o the Newsletter sign-up page we


This space is fexible but we recommend thatyou dont include too much as it will make thepage look busy and push the sign up orm urtherdown the page.


Required feldsOn a orm these are always indicated by ared asterix. This alerts the user to the act thisinormation is mandatory.

DataAlways think careully about the data you wish tocapture, and do not capture anything that is notessential or useul to you.

Always ensure that input titles or questions are clearand sel-explanatory, so the user knows exactly theinormation they should complete.

Protection statementAll orms which capture user data will require a dataprotection statement. This always sits below theorm, but above the Submit or action button.

SubmitThe Submit (or action) button must always bepositioned to the right, in clear space and easilyvisible to the user.


34/42


Specic elements

Web templates

newsletter sign-uperror handling

Form elds are validated against completion orrequired elds. I a required eld is not completed anerror will display at the top o the page, with text toexplain to the user the area that has been missed.

This illustration shows how errors arepresented to the user.


35/42


Specic elements

Web templates

donation page(top)

ModulesThis 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 i required

When a background colour is used the call to actionbuttons must stand out clearly.

Try to visually line up text and images evenlyat the bottom where possible, as this creates aproessional and consistent eel to the content.

The size o the image in this module is291w x 185h pixels.

This module consists o 2 text blocks, that canbe used with or without a call to action button.I this module is used both text blocks mustcontain content.

This page is compiled rom a series opredened modules, which are usedtogether to create an interesting andevenly paced user experience.

Always think careully about theorder in which modules are usedand try to include variety on a long

content page.


36/42


Specic elements

This module contains a heading and a series o linksto 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.

Web templates donation page(bottom)


37/42


Specic elements

Web templates local directory

InstructionsAt the top o the Local Directory page we


This space is fexible but we recommend that youdont include too much as it will make the pagelook busy and push the listings and map urtherdown the page.


External linksMust always be highlighted with the use o theexternal link icon.

Listings

The Local Directory listings are shown in a two-column layout.

The map is provided using Bing Maps, and this has astandard ormat and layout.

MapThe map sits under the listings, which allowsit to make use o the ull width o the contentpanel. This is important as it allows some spacebetween the map pins, especially on very heavilypopulated areas.

PaginationConsistency is used to assist the user withnavigation to more listings.

The local directory allows uses tosee local events listings.


38/42


MapA static map will dynamically appear on an event

listing page. The size and location o this elementis set.

DetailsThe listings details will appear to the side o thestatic map. Provide as much detail as possible tohelp people understand the key inormation aboutthe event or listing.

External linksMust always be highlighted with the use o theexternal link icon.

Specic elements

Each event listing will have a pagewhich details inormation aboutthe event.

Web templates event listings


39/42


Specic elements

Web templates calendar

InstructionsAt the top o the Calendar page we have allowed

space or you to write some explanatory text.

This space is fexible but we recommend that youdont include too much as it will make the page lookbusy and push the calendar urther down the page.


ListingsCalender listings are shown to the right handside o the calendar grid, which makes good use othe space available and ensures users do not needto scroll.

CalendarThe calendar grid uses the bright Fuschia colour,as it is part o the Activities & Events section.

Dates which have populated events are blockedout in the Fuschia and the date you have selectedis shown blocked out in the Midnight blue. I no dateis selected then todays date will be shown inthe Midnight blue.

Users can easily move between the previous andnext month.

PaginationIs used to assist the user with navigation tomore listings.


40/42


Specic elements

Web templates calendar listing

A static map will dynamically appear on an eventlisting page. The size and location o this element isset at 300w x 199h pixels.

The listings details will appear to the side o thestatic map. Provide as much detail as possible tohelp people understand the key inormation aboutthe event or listing.

External links must always be highlighted with theuse o the external link icon.

This page is exactly the same as thelocal directory listing page, other thanthe dierence o the heading, dateand icon colours, which are shown inthe Fuschia.


41/42


Specic elements

Video andaudio content

Incorporating video and audiocontent is a great way o gettingmessages across to your audiencesand transorming a website intoa rich, multimedia experience.However, as with all content, youshould think careully about what

you are trying to say and who it isaimed at. Generally, video contentshould be short and succinct, to keep

a viewers attention. I you are usingvideo or audio or online training or aspecic presentation it may be worthconsidering editing longer contentinto segments, so that users have theoption o viewing it as shorter pieces.

It is useul to have a call to action atthe end o the video, and the videoshould not start automatically whena user arrives at the page. The user

must always have the option to turnthe sound on/o, and to play, stop/pause, rewind and orward the video.With audio content the user shouldinitiate the playing o the sound.

ProductionVideo content can now be producedby almost anyone with a suitablecamera or even a phone camera.However, while it is tempting tosave costs by using amateur video,remember that the message andcontent must always look and soundproessional and well produced. Thesound on the video or any audio

les must be clear, with all spokenwords legible and background noiseremoved or minimised. Any musicthat is used on a video or audio lemust be copyright ree or cleared orusage and must not contravene anycopyright rules.

Alternative contentI video or audio les are used on yourwebsite, an alternative method o

accessing the content must also beprovided. This is most usually doneby supplying a link to a transcriptiono the sound.


42/42

Digital Guidelinesfor Local Age UKs

Date post:	02-Apr-2018
Category:	Documents
Upload:	digitalbrandpartners
View:	220 times
Download:	0 times

Digital Guidelines for Local Age UKs

Documents