Page t|t|e

On||ne sty|e gu|de 2006

Body copy will go here and look like this.
Created w|tb |ove by
On||ne sty|e gu|de 2006
Introduct|on
S|te Construct|on
S|te foundat|on
Homepage components
Homepage gr|d system
Common page components
Common page gr|d system
Spac|ng and marg|ns
Look and fee|
Zopa brand marque
Co|our pa|ette
Typograpby
Iconograpby
I|ustrat|on
Promot|ons
Forms
Temp|ate samp|es
Interface deta||s
Pr|mary nav|gat|on
Secondary nav|gat|on
Pr|mary ca||s to act|on
Secondary ca||s to act|on
Tert|ary ca||s to act|on
1
2
3
4
5
6
7
8
10
11
12
13
14
15-16
17 -20
21
22
23
24
25
26
27
28
On||ne sty|e gu|de 2006
Cons|stency |n botb |ayout |og|c and
grapb|c treatment |s essent|a| |n
prov|d|ng tbe user fam|||ar exper|ences
across a|| user |ourneys w|tb|n tbe s|te.
These style guidelines provide a visual framework to ensure future developments
of Zopa.com are consistent with the key foundation pages produced.
Although, please note these are only 'guidelines' and it is expected that situations
will arise when common sense is needed in bending these guidelines responsibly.
On||ne sty|e gu|de 2006
page 1
Introduct|on
On||ne sty|e gu|de 2006 page 2
S|te construct|on
S|te construct|on
Tb|s cbapter te||s you about tbe
foundat|ons upon wb|cb tbe Zopa
s|te bas been des|gned.
Featuring the grid systems on top of which page templates have
been developed. The 'Spacing and margins' details will give you an
understanding of how to position items in pages.
On||ne sty|e gu|de 2006
S|te foundat|on

#D6D1BD
Background
co|ours
#3A372C
#DFDCCF
#F3F1E6
Centered
760 px|
page 3
artwork f||es:
zopabrowser.psd
The Zopa website will be centrally positioned in
all web browsers.
The background colours will expand to fill to the width of the
browser window, as shown below.
The measurements below, and throughout this document
reference 'pixels'.
On||ne sty|e gu|de 2006 page 4
Homepage components
01. Header, Primary navigation
02. visualisation window
03. Columns x 4

01
02
03
artwork f||es:
homepage.psd
On||ne sty|e gu|de 2006 page 5
Homepage gr|d system
95 px|
345 px|
Not f|xed
184 px|
8 px|
6 px|
artwork f||es:
homepage.psd
On||ne sty|e gu|de 2006 page 6
01. Header, Primary navigation
02. Secondary navigation
03. Content area
04. Promotion spot
05. Promotion spot
Common page components
01
02
04
05
03
artwork f||es:
commonpage.psd
On||ne sty|e gu|de 2006 page 7
Common page gr|d system
95 px|
Not f|xed
508 px|
10 px|
212 px|
Not
f|xed
20 px|
Not
f|xed
artwork f||es:
commonpage.psd
On||ne sty|e gu|de 2006 page 8
Spac|ng and Marg|ns
These details will help you place items on the
common page grid system.
Nav|gat|on co|umn*
The spacing between
objects is always 10 pxl.
The left padding for promotion
panel content is always 10 pxl.
The top / bottom padding of
promotion panel content is
always 20 pxl.
The bottom padding of promotion
panels is always 15 pxl ( the space
beneath button).
artwork f||es:
spacingmargins_01.psd
spacingmargins_02.psd
10 px|
* Please note the web pages above were designed before the
common page grid system was revised to 10 - 212 - 20 - 508 - 10
10 px|
15 px|
20 px|
20 px|
10 px|
Ma|n co|umn*
The general spacing between
objects in the main column
is 30 pxl.
lf a dotted line seperates two
objects, 30 pxl spacing is placed
either side of the line.
The spacing eitherside of the 'Next
page' item is 50 pxl.
30 px|
30 px|
50 px|
50 px|
On||ne sty|e gu|de 2006 page 9
Look and fee|
Look and fee|
Tb|s cbapter g|ves you an
overv|ew of tbe way tbe Zopa
brand bebaves on||ne.
A mixture of guidelines and inspiring words to encourage
creativity, will help you when producing new page designs
for the site.
On||ne sty|e gu|de 2006 page 10
Zopa brand marque
The original CMK colour values of the Zopa marque have
been replaced with new vibrant PGB values for screen use.
Smallest size for screen use
82x58 pixels
He|pfu| t|p
All 3rd party/partner logo's
are rendered in grey scale
if placed on a white bg.
Borrow|ng ye||ow
#F3CF03
Lend|ng orange
#FA8100
58 px|
82 px|
artwork f||es:
zopalogo.ai
On||ne sty|e gu|de 2006 page 11
Co|our pa|ette
The colour palette we have developed for the new Zopa
website is constructed from solid, flat colours.
This 'solid colour' approach is to be applied to the treatment of
all typography and illustrative elements used across the site.
The one exception to this, is the background of the Zopa
window on the homepage, where a gradient fill is used to blend
Borrowing yellow through to Lending orange.

Borrow|ng ye||ow
#F3CF03
R 243
G 207
B 3
Lend|ng orange
#FA8100
R 250
G 129
B 20
About Zopa green
#HB8BC09
R 184
G 188
B 9
Commun|ty red
#C70303
R 199
G 3
B 3
My Zopa b|ue
#2BA1DF
R 43
G 161
B 223
Remember
Keep the palette solid, Do
NOT use gradients or soft
drop shadows anywhere!
On||ne sty|e gu|de 2006 page 12
Typograpby
Page bead|ngs are set to 36pt
AG Book Rounded med|um, w|tb
a ||ne be|gbt of 34pt. Tbey |nber|t
tbe|r sect|on's co|our and are
a|ways m|xed case.
Support|ng bead||ne copy |s set to 20pt AG Book Rounded
med|um, w|tb a ||ne be|gbt of 22pt. A|ways set to a co|our
va|ue of #B7B3A1, and a|ways m|xed case.
Subbead|ngs are a|so set to 20pt AG Book Rounded
med|um, |t |s expected tbey w||| not exceed one ||ne. Tbey
|nber|t tbe sect|on's co|our tbey p|aced |n, and are a|ways
m|xed case.
All body copy is set to regular airal 10pt, with a line height of 15pt and colour value of #666666.
Don't forget
Bullet point lists should be
indented 10 pixels from the
left hand margin.
Below are the principle typography details which will help you
set type across the site.
ln certain circumstances eg. where ascenders clash with
descenders, details such as line height should be altered to
best fit the situation.
Remember
Zopa Promotion headlines
and general button labels
are the only places to set
full words in UPPEPCASE.
On||ne sty|e gu|de 2006 page 13
Iconograpby
When developing additional icons please ensure they are in a
similar style as the exisiting icon sets. lt's important that all
graphical elements feel part of the Zopa illustration family!
Jo|n Zopa, Reg|strat|on process |cons
He|p |cons*
Keep |t s|mp|e
The icons created so far
are simple, so avoid
adding too much detail in
the new ones you create.
Commun|ty |cons*
* Please note the promotional panels above were
designed prior the current grid system on page 7.
artwork f||es:
iconography.psd
On||ne sty|e gu|de 2006 page 14
I||ustrat|on
Here are some tips to ensure you're illustrations
look and feel part of the Zopa illustration family.
Key pr|nc|p|es
Warm, human, friendly tone of voice.
Zopa lllustrations are constructed of
simple shapes, don't try to put too
much detail in!

When postioned with typography, don't
overcrowd, allow type to breathe.
Pbotograpby
Cut out photography is
mixed with illustration
elements only for Zopa
promotions.
Co|our pa|ette
Only use and introduce colours that
sit in with the Zopa colour palette.
Don't confuse the user, use the
correct colour to reference the topic /
process you're referring too.
ie. use the borrowing yellow to
visualise borrowing rates.
2D vs. 3D
Consider how the isometric grid works
with your illustration.
Always use 2D numbers /characters to
visualise key rates / figures.
artwork f||es:
illustration_01.psd
illustration_02.psd
illustration_03.psd
On||ne sty|e gu|de 2006 page 15
Here are some tips to ensure you're illustrations
look and feel part of the Zopa illustration family.
I||ustrat|on
Don't forget...
Make sure your shadows are being cast in the
right direction.
Be consistent, re-use key devices where
possible ie. arrows.
A|ways...
Try to make pages |ook |nterest|ng.
Br|ng tbe content to ||fe!
Where possible try summarising the page
content with a bold illustration in the header.
lf a page is about people, visualise them with a
character and photo, a human feel will be added
to the design.
Perhaps the addition of a simple diagram
highlighting the steps involved in a process will
make for a more engaging page, try
incorporating icons too.
lf the page is a really long text heavy page,
sprinkle more illustrations throughout the page
to help highlight key points.
Where appropriate use simple graphical devices.
For example ticks & crosses to aid the
communication of bullet lists.
Never ever...
Please don't use dotted
line strokes for box
outlines!
artwork f||es:
illustration_04.psd
illustration_05.psd
On||ne sty|e gu|de 2006 page 16
Promot|ons
There are three types of promotion spots that have been
devised so far for Zopa.com.
1. Help promotion
2. Community promotion
3. Zopa promotion
1. He|p promot|ons*
The styling of the Help promo spots remain the same across
all placements on the site. Panel titles are infleunced by the
section the panel is placed in.
The 'MOPE HELP' call to
action links through to the
Zopa Help homepage.
3 hyperlinks are placed in
all help promo spots.
Delievering support to the
user in a pop up window.
f|xed {212 px|)*
not f|xed
Promot|on p|acement{s)
All three spots are placed in the left handside column of
the common page template*, The Zopa promotions also
have a additonal spot on the homepage.
The three promotion types can be used in combination of
each other, the number and type of which is infleunced by
the main page content.

2. Commun|ty promot|ons*
Both the styling and 'Zopa loves' titling of the Community
promo spot remains the same across all placements on
the site.
The 'MOPE ZOPA LOvES'
call to action links through
to the Community section
of the site.
A single 'Zopa loves' is
placed in this promo spot.
f|xed {212 px|)*
not f|xed
* Please note the promotional panels above were
designed prior the current grid system on page 7.
artwork f||es:
commonpage.psd
helppromo.psd
popup.psd
communitypromo.psd
On||ne sty|e gu|de 2006 page 17
Promot|ons
Typograpby
Use UPPEPCASE type
in your offer headline to
help give the promotion
greater clarity
3. Zopa promot|ons
The subject of Zopa promotions range from Free Bees to Lender bonuses.
The challenge is to create 'stand out' for the offer across all executions of the
promo . ou can use illustration or cut out photography or a combination of
both to achieve this, supported by headline text.
The panel's colour palette, typography and 'Zopa Promotion' titling remains the
same for all Zopa promotions.
184 px|
not f|xed
The height of the homepage
promo spot is flexible,
where possible retain the
community panel beneath.
Zopa promot|on bomepage spot
Zopa Promotion (generic title)
Placement of the image(s)/
headline text is 'best fit'.
The 'FlND OUT MOPE' call to
action links through to a
dedicated promotion page.
Partner logo (where possible)
Promo blurb - try to keep this
text short and simple, we just
need to hook the user.
lmage proportions
We don't have to be literal
here, otherwise we wouldn't
be able to see the bees!
Zopa promot|on
common page spot*
This spot is easily created as it uses
the same ingredients as the
homepage spot.
{212 px|) f|xed*
not f|xed
* Please note the promotional panels above were
designed prior the current grid system on page 7.
artwork f||es:
zopapromo_01.psd
zopapromo_home.psd
zopapromo_02.psd
On||ne sty|e gu|de 2006 page 18
Promot|ons
Zopa promo |and|ng page*
Here is an example of a Zopa Promotion landing page. The page layout uses a
modular structure, which allows you customise your promotion landing page.
'Jump to page sect|on' menu
Promot|on coupon
Large illustration supporting
promotion headline text.
Full promotion details,
and calls to action for:
1. Loan calculator
2. Get loan
Update
An update on the Zopa /
partner relationship
Partner spot
Partner badge, with a link
through to partner site(s)
Loan rates tab|e
A sample of competitors rates
Terms & Cond|t|ons
* Please note the promotional panels above were
designed prior the current grid system on page 7.
artwork f||es:
zopapromo_landng.psd
On||ne sty|e gu|de 2006 page 19
Forms
Here is a general overview of the details to be used
across all of the form pages on Zopa.com
Form examp|e {Jo|n Zopa, step 1*)
An error(s) list is returned
beneath a generic
graphic title, in the Zopa
error red.
lncorrect / lncomplete
form section labels
are tinted red and an
arrow device is used to
highlight the error(s) to
the user.
Text f|e|ds
Standard web elements
are used.
Dotted ||nes
Are used to help focus
the user, chunking up the
form content.
Form f|e|d |abe|s
Are always idented
20 px from the left
margin, and set in bold
Forms are always constructed
on white backgrounds across all
sections of the site.
Error red
#FF0000
Form error messag|ng
* Please note the promotional panels above were
designed prior the current grid system on page 7.
artwork f||es:
forms_01.psd
forms_02.psd
On||ne sty|e gu|de 2006 page 20
Temp|ate samp|es
A flexible common page grid system has produced a number
of different layouts, here is a sample of the templates created
during the development of the key foundation pages.
* Please note the promotional panels above were
designed prior the current grid system on page 7.
Sect|on |and|ng page*
Lending
Brocbureware page*
About Zopa / Who we are
Process page*
Join Zopa
Secure page
My Zopa / My Details / My Zopa News
App||cat|on page**
Custom lend
* * The featured 'Custom lend' page design broke out
of the common page grid structure, using the full width
of the page.
artwork f||es:
ts_landing_01.psd
ts_landing_02.psd
ts_brochure_01.psd
ts_brochure_01.psd
ts_application_01.psd
ts_application_02.psd
ts_secure_01.psd
ts_secure_02.psd
ts_process_01.psd
ts_process_02.psd
On||ne sty|e gu|de 2006 page 21
Interface deta||s
Interface deta||s
Tb|s cbapter g|ves you an overv|ew
of tbe nav|gat|on components used
across tbe s|te.
lncluded are all the states for both the primary and secondary navigations,
as well as the various 'call to actions' featured in the key foundation pages.
On||ne sty|e gu|de 2006 page 22
3. 'Borrow|ng' sect|on se|ected, 'Commun|ty' sect|on bover act|vated
2. 'Borrow|ng' sect|on se|ected {button on)
Pr|mary nav|gat|on
The off, on and hover states of the primary navigation
are illustrated below.
1. No sect|on se|ected {a|| buttons off)
artwork f||es:
primarynavigation.psd
primarynav_states.psd
On||ne sty|e gu|de 2006 page 23
Secondary nav|gat|on
2
artwork f||es:
secondarynavigation.psd
secondarynav_states.psd
* Please note the promotional panels above were
designed prior the current grid system on page 7.
The selected and hover states of the secondary navigation*
is illustrated below.
1. 'How do we make our money?' section selected
2. 'How do we make our money?' section selected, hover state
activated for the 'What do you get for your money?' section.
1
L|ve text
off state:
Arial
Regular, 11 pt
#666666
on/bover state:
Arial
Bold, 11 pt
#666666
Typograpby
T|t|e:
AG Book Rounded
Med|um, 16pt
#FFFFFF
On||ne sty|e gu|de 2006 page 24
Pr|mary ca||s to act|on
Please bear in mind these button instances are to be used
sparingly, when appropriate.
For example:
1. ln a situation that requires a call to action to be prioritised
above a number of choices presented to the user at one time
eg. section landing page.
2. On a process page where the user needs to be alerted to
the next step eg. join zopa registration
For further guidance please see supplied screen designs.
Borrow|ng*
Lend|ng*
About Zopa*
These button instances will be used
on a white background.
These button instances will be used
when a primary action needs to
placed on a section's solid colour.
artwork f||es:
primary_cta_01.psd
* Please note the promotional panels above were
designed prior the current grid system on page 7.
On||ne sty|e gu|de 2006 page 25
Pr|mary ca||s to act|on
Please bear in mind these button instances are to be used sparingly, when
appropriate.
For example:
1. ln a situation that requires a call to action to be prioritised above a num-
ber of choices presented to the user at one time eg. section landing page.
2. On a process page where the user needs to be alerted to the next step
eg. join zopa registration
For further guidance please see supplied screen designs.
Commun|ty*
My Zopa*
These button instances will be used
on a white background.
These button instances will be used
when a primary action needs to
placed on a section's solid colour.
artwork f||es:
primary_cta_02.psd
* Please note the promotional panels above were
designed prior the current grid system on page 7.
On||ne sty|e gu|de 2006 page 26
Secondary ca||s to act|on
Gener|c*
Home
These button instances will be
used on the cream (FBF9EE)
background used by the
'Community' and 'About Zopa'
columns on the homepage
These button instances will be
used on a white background, and
also grey (F5F4F1) promo boxes
eg. 'Zopa help', 'Zopa loves'
These button instances* will be used when a secondary action needs to placed on a section's solid colour.
For further usage guidance please see supplied screen designs.
artwork f||es:
secondary_cta.psd
* Please note the promotional panels above were
designed prior the current grid system on page 7.
On||ne sty|e gu|de 2006 page 27
For further usage guidance please see supplied screen designs.
Tert|ary ca||s to act|on
Revea|
C|ose
These button instances are used
to close revealed content.
They are to be used on a white
(FFFFFF) and grey (F5F4F1)
backgrounds.

ln some situations they are used
without accompanying text.
eg. MyZopa / My lending / Lend-
ing summary
These button instances are used
to reveal content.
ln some situations they are used
without accompanying text.
eg. MyZopa / My lending / Lending
summary
These button instances are used
to in conjunction with anchor
hyperlinks.
eg. Zopa help / Zopa glossary
On selection the user will be re-
turned to the top of the screen.
Back to tbe top
artwork f||es:
tertiary_cta_01.psd
On||ne sty|e gu|de 2006 page 28
For further usage guidance please see supplied screen designs.
Tert|ary ca||s to act|on
Go to My Zopa
The 'Go to My Zopa' button instances are used to take the user from brochureware pages
to the 'My Zopa' section.
The 'Go to My Zopa' call to action always inherits the section's colour it is presented in,
and are always placed on a white background.
artwork f||es:
tertiary_cta_02 .psd