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

LSD Design style guide version 1.0 page 1

1 Foreword by John Darvell2 Copyright3 The proposition4 Typography5 The colour palette

5.1 Websafe colour palette5.2 Supplementary (non-websafe) colour palette

6 Imagery6.1 Imagery – people6.2 Imagery – objects6.3 Imagery – cut outs6.4 Imagery – real life6.5 Promotions6.6 Layer 26.7 Unsuitable imagery6.8 Purchasing imagery

Table of contents


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 [email protected] September 2004


Copyright

Copyright © Crown copyright 2004 - 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.


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 servicesThis 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.


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


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


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: 333333

Link colour for text is hex: 333399

Visited link colour is hex: 993399


Websafe colour palette


Supplementary (non-websafe) colour palette


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


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


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


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)

________________________


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


Promotions

Promo images’ size depend on the area of the site on which they appear.

Promo image on the homepage (slot one):Width – 166 pixelsHeight – 66 pixelsFile size – 10kFormat - .jpg

Promo image on the homepage (slot two):Width – 166 pixelsHeight – 91 pixelsFile size – 10kFormat - .jpg

Promo image on a theme landing page:Width – 76 pixelsHeight – 76 pixelsFile size – 5kFormat - .jpg


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

Alternative option


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


Purchasing imagery

Sources of imagery can be found at the following online stock photography companies:

• www.gettyimages.com - a good source of Promotions, Layer 2, Case Studies and Guide page imagery • http://pro.corbis.com - a good source of Promotions, Layer 2, Case Studies page imagery. However Gettyimages is the best company for Guide page images.

Documents

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