{\Rtf1\Adeflang1025\Ansi\Ansicpg1252\Uc1\Adeff0\Deff0\Stshfdbch0\Stshfloch0\Stshfh Ich0\Stshfbi0\Deflang1033\Deflangfe1033{\Fonttbl{\f0\Froman\Fcharset0\Fprq2{\*\Pan Ose 02020603050405020304}Times New Roman{\*\Falt Times
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
{\Rtf1\Adeflang1025\Ansi\Ansicpg1252\Uc1\Adeff0\Deff0\Stshfdbch0\Stshfloch0\Stshfh Ich0\Stshfbi0\Deflang1033\Deflangfe1033{\Fonttbl{\f0\Froman\Fcharset0\Fprq2{\*\Pan Ose 02020603050405020304}Times New Roman{\*\Falt Times