This document provides design guidelines and branding standards for the Isis Telecom brand identity. It includes guidelines for proper usage of the Isis logotype and colors, as well as typography standards. Specific directions are given for acceptable page layouts, placement of the logo and photography, and font usage. Examples demonstrate correct and incorrect applications of the brand assets. The document aims to maintain a coherent brand image and consistent customer experience across all Isis communications.

2. First printed in the United States of America by Hi there, my name is Paul West.
LuLu, August 2009.
I’m an English born graphic
All original: graphics, web site design, designer, art director and interface
illustration, custom code, layout and images specialist. I use both Mac and PC, I
© Copyright 2009 Paul West. All rights reserved.
prefer Mac.
All other content © Copyright their respective
owners.
Specially designed to fit along side
No part of this publication my be reproduced, your graphic novels.
in any form or by any means, without the prior
written permission of the author.

3. Storyimp identity
Illustration, character, branding, direction
Storyimp asked me to join their team and lead the creation of a brand
identity and character design.
The Imp characters are modelled on 19th century inkwell designs.
The Imps came with special requirements: each Imp must be quickly
producible, easily modified, colored and posed. Happy Smug Sad
A serif font was chosen and edited for the logotype to mimic printed
story books.
Scared Oh? Standard
Oh no? Wasn’t me! Base body
style
04

4. 06

5. ?
08

6. Storyimp website
Design, layout, ux, html, css, jquery
With brand and character design completed, the Storyimp application
needed some user experience and layout love.
Each page had to be designed around advertisement placing and
existing functionality. All code was built to reduce server calls and load
times. As much navigation as possible is text based and images are
placed in sprites.
www.storyimp.com
10

7. 12

8. Deadly Furry Cute
Illustration, character, toy, paper, game, direction
Deadly Fury Cute is a paper toy project: depicting furry animals of the
world, one species at a time.
Custom made toy templates designed to print on A4/Letter paper or
card. Toys are offered as free downloads to individuals and teachers.
The latest version to date includes a battle style number game and
color-your-own variants.
14

9. 16

10. 18

11. Deadly Furry Cute website
Illustration, design, layout, copy, ux, html, css, jquery
The website for Deadly Furry Cute is designed as a simple portal for
downloading and building the paper toys.
The site is designed to appeal to all ages with a vibrant quirky tone. The
content was written to be helpful, quick to absorb and easy to follow.
www.deadlyfurrycute.com
20

12. HOME TOYS BATTLE HELP ABOUT NEWS EXTRAS Search 4
Series 1: Cats WANT MORE?
Series 3: Apes
Series 2: Squirrels
Series 1: Cats
DOWNLOAD DEADLY DOWNLOAD FURRY DOWNLOAD CUTE What are the colour your
own versions of this toy?
Colour Your Colour Your Colour Your Donec quis est massa. Suspendisse
Own Version Own Version Own Version
ac ante mauris, ac luctus diam.
Etiam eget congue erat. Sed
pharetra, enim sed lobortis ultrices,
Battle Stats orci mauris iaculis diam, non lacinia
Learn how to play...
leo massa id metus. Praesent elit
orci, fringilla id consequat at, iaculis
BLACK CAT FLUFFY CAT YAWNING CAT
(Deadly) (Furry) (Cute) sed libero. Aliquam erat volutpat.
Vivamus et condimentum elit.
2 2 2
7 7 7
12 12 12 Want to hear about the
latest toys and games?
3 3 3 Signup to the newsletter and
we’ll keep you informed.
5 5 5
Email Address
2 2 2 Unsubscribe SIGNUP
d 2 Comments
... Leave a comment...
Davey Jones Sed tincidunt vulputate diam. Proin risus turpis, consequat sit amet
Reply volutpat consectetur, pretium sit amet dolor. Suspendisse volutpat,
ipsum sodales dapibus fermentum, justo mi dictum odio, non
scelerisque risus orci ac velit. In eu dui et lectus rutrum auctor.
Davey Jones Sed tincidunt vulputate diam. Proin risus turpis, consequat sit amet
Reply volutpat consectetur, pretium sit amet dolor. Suspendisse volutpat,
ipsum sodales dapibus fermentum, justo mi dictum odio, non
scelerisque risus orci ac velit. In eu dui et lectus rutrum auctor.
Leave a comment
All elds are required.
Name
If you’ve not yet had a
comment approved, it will
Email
be held for moderation.
Message
POST COMMENT
22

13. 24

14. Promotional photography
Studio, location, direction
26

15. 28

16. 30

17. Rosie’s Mai Tais
Illustration, ui, animation, flash, game, direction
32

18. Totally Money
Illustration, character, design, animation, flash
34

19. 36

20. Vodafone Flexphone
ai 08/29/06 mk
Illustration, animation, flash, direction
D109
38

21. coupled with our selected colour palette is
an integral ingredient of our identity. Bold
use of these colours maintains coherence
Isis Telecom
across our brand and helps our customers
recognise Isis and it’s communications.
Design, layout, print
06 Isis Brand Guidelines 07
Brand Values
The tone of voice for all Isis communications
is Flexible, Knowledgeable, Helpful. Isis is a
credible and trusted source for information.
Organised and Resourceful.
flexible
knowledgeable
helpful
22 Isis Brand Guidelines 23 08 Isis Brand Guidelines 09 10 Isis Brand Guidelines 11 14 Isis Brand Guidelines 15
Photography Logotype Logotype continued Typography continued
Exclusion zone Colour Restrictions Size
Isis is continuing to pursue brand integrity When using the Isis logo it must be clearly The exclusion zone ensures that there is always a In addition to the standard exclusion zone the blue Where possible the standard Isis logo (blue on white) Where the Isis logotype sits over photographic imagery The Isis logotype has been specially designed and As a guide logo should appear at 4cm wide, although The Arial typeface has two weights Regular and Bold, The way you use these different typefaces will be Arial Regular - Arial Regular Italic
across its whole product range, this ensures visible with no distractions or items interfering consistent amount of clear space around the logo. It area surrounding the alternate logo should also equate should be used, it is possible however to use the the logo must maximise the communication of our should never be redrawn. Always use approved the application and target audience will ultimately both are available in Italic. These choices are given integral to your designs, each weight, size, colour and
the reputation and image of the company with it and should employ the exclusion zone
also prevents anything else on the page from impairing to 50% the height of the lowercase ‘i’ (excluding the alternate Isis logotype of white on a blue surround if brand. This means on a light background using the electronic artwork when reproducing the logotype. define which size the logo is used at. so you have a flexible set of styles for the different emphasis can evoke a number of different tones, voices ABCDEFGHIJKLMNOPQRSTUVWXYZ
visually on the logo. dot) in the word Isis. this better fits the work being produced. standard blue instance only when it is easily visible, applications you me be designing for depending on the and emotions. Subtle small lines of text can be just
is consistent with the expectations and as described below. In all cases the logotype other wise the alternate must be used, where the logo Do not alter the colour of the logotype (fig 1), do not The minimum size of the logo should be no smaller nature of your communication. as effective as a larger bold headline. Used carefully
abcdefghijklmnopqrstuvwxyz
experience of our customers. should not appear closer to any edge than The exclusion zone should equate to 50% of the height will reside on a dark background image a black and apply a drop shadow to the logotype (fig 2), do not than 2cm wide on an A4 sheet of paper, while the your choices can create a number of different styles 1234567890&!?@£$%
the distance defined in the exclusion zone. of the lowercase ‘i’ (excluding the dot) in the word Isis white reverse of the standard style must be used to alter the typeface of the logotype (fig 3), do not alter alternate versions minimum should be no more than Also available for use in printed documents is the and themes while still aligning with Isis’s brand.
The Isis logotype has been especially created where imagery or typography is to be placed above, maximise visibility. the scale of the logotypes (fig 4) and do not rearrange 2.5cm wide. This is to ensure the logotype is legible Helvetica type face, as it is very close to Arial in design
and should never be redrawn. below, to the left or to the right-hand side. the logotype (fig 5). Do not introduce department and clear across all applications. and is found more regularly on Mac’s. ABCDEFGHIJKLMNOPQRSTUVWXYZ
Strong photography fuels the
imagination
Either version of the logo maybe printed in black and names, sub identities or slogans to the logotype, our
white if the work requires. logo should reflect that we are one single entity or In special circumstances the logo maybe displayed at a
abcdefghijklmnopqrstuvwxyz
company. smaller size, i.e. small promotional items, please contact a 1234567890&!?@£$%
member of the Marketing Tam for this application.
capturing interest
X
Arial Bold - Arial Bold Italic
and impacting ABCDEFGHIJKLMNOPQRSTUVWXYZ
perception abcdefghijklmnopqrstuvwxyz
1234567890&!?@£$%
1/2 x 1/2 x
X
4 cm
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1/2 x
abcdefghijklmnopqrstuvwxyz
ofthearialtypeface
1234567890&!?@£$%
x
2 cm
X X
x
1/2 x
X X
1/2 x
4 cm
1/2 x 1/2 x
1/2 x
2.5 cm
1/2 x 1/2 x 1/2 x 1/2 x
40

22. Silicon Village
D O EB IGN
Design, layout, print, copy, direction
O F
D O EB IGN
D
O F
N
AN
D
T’
N
AN
T’
S
W ES
’S
S
W ES
’S
O
D
O
D
D
DO’s and DONT’s of Web Design Color Schemes 6
D
D O EB IGN
DO’s and DONT’s of Web Design White Space 5
O F
D
N
Color schemes are one Black text on a white
AN
of those page elements background is the most
T’
common choice for a web
that can complement
page.
or corrupt web page
S
designs. Just because
W ES
’S
‘you’ can see it on your Contrast and Readability
screen or just because
O
‘you’ like that color mix
D
doesn’t mean other
D
people will. Some people White text on a black
D O EB IGN
may be color blind and background, although heavily
although this is a constant contrasted, is not always easy
O F
issue, what’s more for people to read, especially
D O EB IGN
D
important is understand at smaller text sizes.
N
O F
how colors interact with
AN
D
each other, contrast and Contrast and Readability
T’
N
readability are paramount
AN
when dealing with
S
T’
W ES
information.
’S
Avoid shades of the same
S
W ES
color, grey over black or
O
D
’S
light blue over dark blue as
example.
D
O
D
Contrast and Readability
Not just in art is white space
D O EB IGN
necessary, this fine balance
O F
D
Some colors will work great between objects and contrast
N
for artistic websites, but think
AN
hard before using them on also exists in design. White
T’
mainly textual pages.
space is paramount in
S
Contrast and Readability
situations where you must
W ES
’S
display large amounts of
O
D
content, such as on a web
D
page. If information fills
D O EB IGN
the whole page it can be
O F
D O EB IGN
D
increasingly hard for a user to
N
O F
AN
read.
D
T’
N
As a test step back from your
AN
S
T’
W ES
computer and look at the
’S
DO’s and DONT’s of Web Design Information Location 8 DO’s and DONT’s of Web Design Fonts 10
S
page, do you see mostly light
W ES
O
D
S
or dark? If you see a lot of
D
D
dark go back and edit your
All your content is Using too many fonts on
pages design to ‘lighten’ it up.
WHITE SPACE
important right? a page can make your
Yes and no, while you design look all cluttered,
hope the user will read can confuse the user and
all your content, the truth
is that some will be more
1 2 is generally bad design.
important than others.
This is where content
DON’T USE
BALANCE
placement comes in to
FONTS OR
play.
TOO MANY
FONT
You’ll want, for yourself
as much as for the
2
user, to place all of your
important information
at the top of the page.
We’ve established all
3
SIZES
your content is important,
but some of it you will
definitely want the user
to see and some you
wont mind if they don’t. Grading your content will let ON YOUR PAGES!
This is where you grade you place it on the page in
the content, any system an intelligent way, allowing
will do, but grading from the user access to what s/he
1 to 3 works well, 1 for is likely to want right away, As a rule have no more
while drawing them down the than 3 different fonts on the
the most important, 2 for graded content levels.
quite important and 3 for page, in 3 different sizes.
It’s generally a good idea to
optional.
have one font type and size
for your navigation, one for
your headings and one for
your main content. That then
leaves you some play in size
or type for other navigational
or informational elements.
same goes for colors!
42

23. Team Meerkat
Illustration, design, ux, css, html, jquery, wordpress
www.teammeerkat.com
44

24. 46

25. Gaming Characters
Illustration, character, direction
48

26. 50

27. For more, please see;
www.yaypaul.com
www.designergamergeek.com
www.deadlyfurrycute.com