LSD Design style guide version 1.0 page 1 1Foreword by John Darvell 2Copyright 3The proposition 4Typography 5The colour palette 5.1 Websafe colour palette 5.2 Supplementary (non-websafe) colour palette 6Imagery 6.1 Imagery – people 6.2 Imagery – objects 6.3 Imagery – cut outs 6.4 Imagery – real life 6.5 Promotions 6.6 Layer Unsuitable imagery 6.8 Purchasing imagery Table of contents

LSD Design style guide version 1.0 page 2 Foreword Welcome to the Businesslink.gov.uk website Local Site Development (LSD) Design Style Guide. The aim of this document is to provide guidance to the Regional Development Agencies and local Businesslink sites who are part of the LSD project and who need to understand the design rules for the site. This document is an abridged version of the main businesslink.gov.uk website, of which a copy can be provided if needed. These design guidelines are there to ensure that the site continues to be display a consistent ‘look and feel’ and user experience across the site. This is very important to us, especially as we continue to expand and grow. Many of the principles in this style guide come from direct testing with our customers - over 90 user-testing sessions have been carried out to date. In addition, we have used the expertise of our main design contractor, who helped us develop the overall ‘look and feel’ and design logic for the site. The site itself has won the International Visual Communication Association Gold Award for best website. Therefore we are committed to ensure that the design maintains this high standard for our users. If you are using our style guide, I'd ask you to let me know, so that we can keep in touch with you as we continue to develop it. If you have any questions or comments about these guidelines, please contact me. John Darvell Design Manager, businesslink.gov.uk September 2004

LSD Design style guide version 1.0 page 3 Copyright © Crown copyright the text in this style guide is subject to Crown copyright protection. Use of Crown copyright material The text in this style guide may be reproduced free of charge in any format or medium, provided it is reproduced accurately and not used in a misleading context. Where any of the information in this style guide is being republished or copied to others, you must receive our permission in writing, identify the businesslink.gov.uk style guide as the source of the material, and acknowledge its copyright status.

LSD Design style guide version 1.0 page 4 Proposition “The first place to go to find out what you need to know or do, how to get it done and who can help you start-up, grow and manage your business.” 1. Why have we prepared this note and who is it for? The Business Link portal (Businesslink.gov.uk) is the online channel for Business Link. This section is a reminder of the key principles and values to bear in mind when creating content, tools, page design and navigational constructs for the site. It is intended for all those involved in production and development and should be kept close to hand. 2. Who is our target market? Essentially the information and services we are providing should be relevant to all businesses - and those wanting to set up in business - but with a focus on key individuals in SMEs, including: · Owner managers · Owner directors · Administrators and managers in medium businesses The information we provide is for businesses all over the UK. Where there are differences between the nations, for example in regulations, we only cover England in any detail and offer prompt hand-offs to sites run by the devolved government agencies, for customers in Wales, Scotland and Northern Ireland. All content is provided in English. 3. Why are we doing this? To address customers’ key needs: · To make it easier to find the government information you need · To make it easier to find the right advisory services · To provide a single point of access to government information and services · To provide greater control over, and confidence in, your dealings with government · To provide a better understanding of what government can do to help · To allow you to deal with government more efficiently · To help you find out what applies and what to do about it · To make it easier for you to sell to government · To help you become an informed user of other (including commercial) services To provide benefits for our partners in government: · For improved compliance and greater take-up of support activities · To help meet policy objectives (especially around efficiency) · To provide opportunities for collaboration with government partners (joining-up) · To increase traffic to our partners’ transactional services This is not “just another portal”, it must earn the right to be the first place businesses go to when facing problems or challenges and it must move the customer forward by answering the problem or referring them to someone who can.

LSD Design style guide version 1.0 page 5 4. What does this mean practically? Through the Business Link portal we provide information, guidance and action support, enabling businesses to handle their business challenges and manage their dealings with central and local government more successfully. The site is intended to: · Be uniquely authoritative and credible as all regulatory content has been approved and openly endorsed by the responsible government departments and agencies, and is painstakingly kept up-to-date. · Provide a combination of compliance assistance - ie what regulations apply to the customer’s business and what do they have to do about them - and business support - ie what help is available from Government or private/voluntary sector and how to get it. · Give completely free information that does not try to sell you anything (well, almost nothing, we do encourage online filing by selling the benefits and detailing the incentives). · Steer clear of giving personal advice, instead highlighting things the customer needs to think about or do - providing unbiased, objective, insightful information, guidance and action-support, pointing them to sources of expert advice. · Provide 24/7 access, interactivity and tailoring, powerful searching, downloading/printing forms you would otherwise have to order by post, online filing and calculations. · Be a single entry point to government for business. However, many customers should have a large portion of their needs met without having to leave the site. · Refer the user to helplines, printed publications, face-to-face services where appropriate (ie personalised diagnostics of complex business issues). · Refer the user as directly as possible to wherever they are most likely to find the help or solution they need - very careful not to endorse any non-government providers referred to - help users become informed users/buyers of services. · Contain really good site search, sector overviews and key profiling/tailoring tools (in the future, tabs like “what applies to me” that give the customer an idea of which areas of the site they would find most useful) 5. How are we doing this? The way we do this is just as important as what we do. · Everything we do is thoroughly tested with customers. · The tone is clear, practical and authoritative NOT cold or patronising. · We recognise the diversity of the SME market - we are not assuming anything other than an interest in business and shortage of time. · The content is concise and arranged in one-screen chapters, getting to the point fast, can be skimmed easily, using a mixture of formats like dos and don’ts/checklists/graphics to provide variety and quality. · It is written and presented from the SMEs’ perspective, not from the way the government is organised. · We use the best format for the job eg a decision tree instead of plain text if dealing with something best handled via a series of yes/no questions. Above all, the content is relentlessly action-focused helping busy and pressurised SMEs (or those thinking of starting up) get things done, not just inform them; practical assistance through brilliant basics. Proposition continued

LSD Design style guide version 1.0 page 6 There are consistent guidelines for font usage across the Businesslink website. The main font for the HTML copy is Verdana. Ariel is used for the main header in the top bar - ‘Practical advice for business ’. Headings come in different formats, as follows: Typography A Heading – Verdana regular 17pt B Heading – Verdana bold 13pt C Heading – Verdana bold 11pt

LSD Design style guide version 1.0 page 7 The online colour palette refers to the colours used for the web. The palette is made up of soft colours and tones to give a positive, clean, fresh organised feel. These colours are from the websafe colour palette. Each colour is assigned to a particular sector - never mix and match colours for different areas and always use the website purple hex (666699) for generic areas, ie sitemap, search etc. The darker colours are used when coloured html text is needed (ie headings) and the main colour for the area is too light. Always make sure that you use colours which provide enough contrast for users. There are colours used which are not websafe. These are the lighter tints that are used on the homepage and for blocks of colour behind text. The colour palette Main copy text is dark grey hex: Link colour for text is hex: Visited link colour is hex:

LSD Design style guide version 1.0 page 8 Websafe colour palette

LSD Design style guide version 1.0 page 9 Supplementary (non-websafe) colour palette

LSD Design style guide version 1.0 page 10 Imagery Different styles of imagery are used throughout the site, dependent on which content area they sit within. These styles are divided into the following categories: People Objects Cut outs Real-life pictures Each style of imagery is presented within different areas of the site. These are: Promotions – uses the people and object style of imagery Layer 2 - uses the people and object style of imagery Content – uses the cut-out style of imagery Case studies – uses the real-life pictures

LSD Design style guide version 1.0 page 11 Imagery - people Acceptable People included but not full body People interaction/discussion Casual Real people Home and work environments Mixed ages, genders and race Subtle tones to complement site colours Soft focus in parts Close crops Focused Unacceptable Posed smiley people Too many computers Overuse of corporate navy blue City business offices/people

LSD Design style guide version 1.0 page 12 Imagery - objects Acceptable Casual Real life activities Home and work environments Evidence of work in progress Manual work Work accessories Travel places/documents Soft focus in parts Subtle tones to complement site colours Close crops Focused Unacceptable People elements High fashion Not too many computers Overuse of corporate navy blue City business offices/people

LSD Design style guide version 1.0 page 13 Imagery - cut outs Acceptable Real-life object Whole object visible Royalty free Must relate to subject of guide Humour Unacceptable Illustrations/cartoons People Foreign money to illustrate UK money Cut off corners Drop shadows Sizing (maximum 5k, format.gif) ________________________

LSD Design style guide version 1.0 page 14 Imagery - real life Real-life imagery should be used for all case studies. Acceptable Action orientated poses Close crops Subtle tones Relates to business type Must have a left hand cut out in white Sizing – the image must be 181 pixels in width, and 121 pixels in height. Maximum file size of 10k, format.jpg Unacceptable Smiling Business company name being displayed Full body shots

LSD Design style guide version 1.0 page 15 Promotions Promo images’ size depend on the area of the site on which they appear. Promo image on the homepage (slot one): Width – 166 pixels Height – 66 pixels File size – 10k Format -.jpg Promo image on the homepage (slot two): Width – 166 pixels Height – 91 pixels File size – 10k Format -.jpg Promo image on a theme landing page: Width – 76 pixels Height – 76 pixels File size – 5k Format -.jpg

LSD Design style guide version 1.0 page 16 Layer 2 Layer 2 images can come in a number of styles. Each image of 146 pixels by 146 pixels (10k file size, format.jpg) is made up of two or more smaller images. When images are combined, they must be separated by a gap of 2 pixels. Each quarter of the larger image should be 72 pixels by 72 pixels. Preferred option Least preferred option Alternative option

LSD Design style guide version 1.0 page 17 Unsuitable imagery A number of image styles are unsuitable for the Businesslink website, including the following examples: Negative expression Too abstract Too much focus on the people Too contrived Unnatural poses – too fashion conscious Colours do not fit with the palette Cartoon-style drawings Too people orientated – incorrect shape to fit image size style This would be the correct use of the above image

LSD Design style guide version 1.0 page 18 Purchasing imagery Sources of imagery can be found at the following online stock photography companies: - a good source of Promotions, Layer 2, Case Studies and Guide page imagery - a good source of Promotions, Layer 2, Case Studies page imagery. However Gettyimages is the best company for Guide page images.