SKUPINA ČEZ GRAFICKÝ MANUÁL PRO WEBOVÉ STRÁNKY SKUPINY ČEZ / VERZE 06/2014

Transkript

1 GRAFICKÝ MANUÁL PRO WEBOVÉ STRÁNKY SKUPINY ČEZ / VERZE 06/0

2 OBSAH ZÁKLADNÍ PRAVIDLA JEDNOTLIVÉ ŠABLONY UNIVERZÁLNÍ MODULY 0 Základní pravidla 0 Práce s grafickým manuálem 05 Barevné schéma 06 Typografie - nadpisy 07 Typografie - texty 08 Jednotlivé šablony 09 Homepage Menu Stránka - rozcestník s vizuály Stránka - textový rozcestník Stránka - rozcestník obsahové sekce 5 Stránka s obsahem - příklad 7 Typy rozvržení stránek 8 Univerzální moduly 9 Formátování bloků - homepage Formátování bloků - podstránky 5 Formuláře 6 Inputy, select boxy, chybové hlášky 7 Speciální inputy a select boxy 8 Tabulky 9 Tlačítka 0 Stránkování Ikony

3 Základní pravidla Práce s grafickým manuálem Barevné schéma Typografie - nadpisy Typografie - texty, 05/0. VYROBENO V SYMBIO DIGITAL, S. R. O. 0, 05/0. VYROBENO V SYMBIO DIGITAL, S. R. O. 0

4 Základní pravidla PRÁCE S GRAFICKÝM MANUÁLEM K ČEMU MANUÁL SLOUŽÍ GRAFICKÝ STYL GRAFICKÉ ŠABLONY Manuál je návodem ke správnému použití grafických prvků užitých na webových stránkách Skupiny ČEZ. Vychází z pravidel komunikace stanovených manuálem jednotného vizuálního stylu Skupiny ČEZ, který je k nalezení na Design stránek je navržen ve stylu Flat User Interface, který je založen na minimalismu, použití jednoduchých geometrických obrazců a absenci stylistických úprav, které by vytvářely iluzi třetího rozměru (například barevné přechody, vržené stíny a textury). Cílem zvoleného grafického stylu je maximální přehlednost a srozumitelnost sdělení. PSD soubory jsou vytvořeny v Adobe Photoshop CC a jako předlohu pro vytváření dalších stránek je možné je vyžádat u marketingového oddělení Skupiny ČEZ. V případě potíží při práci s dokumenty, či dotazy k vizuální stránce webové prezentace, kontaktujte tým digitální komunikace na u web@cez.cz., 05/0. VYROBENO V SYMBIO DIGITAL, S. R. O. 0

5 Základní pravidla BAREVNÉ SCHÉMA DOMINANTNÍ BARVY Oranžová RGB: 0/79/0 #ff00 Tmavě šedá RGB: 8/8/8 #000 Šedá RGB: 7/7/7 #555 Jemně šedá RGB: // #ddd Zelená RGB: 9/79/0 #77b00 Červená RGB: 55/0/0 #ff0000 DOPLŇKOVÉ BARVY Šedá RGB: 9/9/9 # Jemně šedá RGB: // #e7e7e7 Jemně šedá RGB: 8/8/8 #eeeeee Jemně šedá RGB: 50/50/50 #fafafa Světle oranžová RGB: 5//5 #fefeb, 05/0. VYROBENO V SYMBIO DIGITAL, S. R. O. 05

6 Základní pravidla TYPOGRAFIE - NADPISY Titulek <H> Arial Bold 5 px / řádkování 55 px / barva #ff00 Titulek <H> Arial Bold 5 px / řádkování 55 px / barva #ffffff Nadpis <H> Arial Bold px / řádkování 9 px / px barva #ff00 Nadpis - odkaz v bílém bloku <H> Arial Bold Underlined px / řádkování 0 px / barva # Nadpis - odkaz v rozcestníku <H> Arial Bold Underlined 0 px / řádkování 0 px / barva #ff00 Podnadpis <H> Arial Bold 6 px / řádkování px / barva #ff00 Nadpis u seznamu odkazů <H> Arial Bold 9 px / řádkování 6 px / barva #ff00 Nadpis bloku Časté dotazy <H> Arial 0 px / řádkování 7 px / barva #000 Nadpis v tmavém bloku <H> Arial Bold 9 px / řádkování 6 px / barva #ffffff Pokračování na další stránce, 05/0. VYROBENO V SYMBIO DIGITAL, S. R. O. 06

7 Základní pravidla TYPOGRAFIE - TEXTY Nadpis <H> Arial Bold 5 px / řádkování px / barva #000 Url odkaz Arial Regular Underlined 5 px / řádkování px / barva #ff00 Hlavní text Arial Regular 5 px / řádkování px / barva #000 Drobečková navigace Arial Regular px / barva # Položka seznamu - Homepage Arial Regular 6 px / řádkování px / barva # Položka seznamu - Podstránka Arial Regular 5 px / řádkování px / barva # Hlavní menu Arial Regular 7 px / řádkování px / barva #000 Jedinými používanými fonty webu jsou font Skupiny ČEZ FUTURA ČEZ OT nastavený na vyhlazený a systémový font Arial. Ostrost písma Arial se řídí systémovým nastavením uživatelského PC. Sadou písma FUTURA ČEZ OT disponuje na vyžádání příslušné marketingové oddělení ČEZ. Podstránkové levé menu Arial Regular 5 px / řádkování px / barva #555, 05/0. VYROBENO V SYMBIO DIGITAL, S. R. O. 07

8 Jednotlivé šablony Homepage Menu Stránka - Rozcestník s vizuál Stránka - Textový rozcestník Stránka - Rozcestník obsahové sekce Stránka s obsahem - příklad Typy rozvržení stránek, 05/0. VYROBENO V SYMBIO DIGITAL, S. R. O. 0, 05/0. VYROBENO V SYMBIO DIGITAL, S. R. O. 08

9 Jednotlivé šablony HOMEPAGE Panel záhlaví. Výška 0 px, šířka maximální. Oblast loga. Výška 67 px, šířka 9 px. Zarovnaný vlevo. Input pro vyhledávání. Výška 6 px, šířka 67 px. Menu. Výška 5 px, šířka 970 px. 5 Produktový blok. Výška 90 px, šířka px. 6 Promo blok. Výška volitelná, šířka 75 px. 7 Co dělat když. Výška volitelná, šířka 75 px. 8 Tiskové zprávy. Výška volitelná, šířka 75 px. 8 9 Vzdálenost mezi bloky je 0 px. Pokračování na další stránce, 05/0. VYROBENO V SYMBIO DIGITAL, S. R. O. 09

10 Jednotlivé šablony HOMEPAGE 9 Bloky s vizuály. Doporučená výška 5 px, šířka 75 px. 0 Blok Z jaderných elektráren - inforgrafika. Výška 9 px, šířka 75 px. Blok Z jaderných elektráren - text. Výška volitelná, šířka 75 px. Panel kontakty, pobočkami, odkazy. Výška px, šířka 970 px. Patička. Výška 5 px, šířka maximální. 0 Blok Co dělat když může být dočasně nahrazen blokem CX Kodex. Výška 75 px, šířka 75 px., 05/0. VYROBENO V SYMBIO DIGITAL, S. R. O. 0

11 Jednotlivé šablony MENU Panel záhlaví. Odkazy jsou defaultně bez podtržení. Mouseover = podtržení. Menu. Aktivní položka = oranžové podtržení a ztmavení tlačítka. Mouseover = oranžový text. Button ČEZ ON-LINE. Mouseover = okno pro přihlášení., 05/0. VYROBENO V SYMBIO DIGITAL, S. R. O.

12 Jednotlivé šablony STRÁNKA - ROZCESTNÍK S VIZUÁLY Titulek stránky s perexem. Výška proměnlivá, šířka 970 px. Blok Zákaznická péče. Výška 00 px, šířka 60 px. Blok Energetické poradenství. Výška 00 px, šířka 0 px. Další bloky rozcestníku. Výška 00 px, šířka 60 px. Jednotlivé bloky tvoří poměrově třetinu šířky stránky. Pouze blok Zákaznická péče zabírá prostor dvou bloků, tedy dvou třetin stránky. Vzdálenost mezi bloky je 0 px., 05/0. VYROBENO V SYMBIO DIGITAL, S. R. O.

13 Jednotlivé šablony STRÁNKA - TEXTOVÝ ROZCESTNÍK Blok s titulkem stránky a perexem. Výška proměnlivá, šířka 970 px. Univerzální blok. Výška 85 px, šířka 0 px. Jednotlivé bloky tvoří poměrově třetinu šířky stránky. Počet bloků na stránce není fixní. Vzdálenost mezi bloky je 0 px., 05/0. VYROBENO V SYMBIO DIGITAL, S. R. O.

14 Jednotlivé šablony STRÁNKA - ROZCESTNÍK OBSAHOVÉ SEKCE Blok s rozcestníkem. Výška 50 px, šířka 970 px. Rozcestník s popisky. Výška 00 px, šířka 60 px. Bloky s vizuály. Výška 0 px, šířka 0 px. U všech zmíněných částí stránky je důležité dodržovat proporčně stejnou šířku jednotlivých bloků., 05/0. VYROBENO V SYMBIO DIGITAL, S. R. O.

15 Jednotlivé šablony STRÁNKA S OBSAHEM - PŘÍKLAD Levé menu. Výška proměnlivá, šířka 50 px. Drobečková navigace. Výška 5 px, šířka 70 px. Hlavička podstránky. Výška 56 px, šířka 70 px. Bloky FAQ. Výška proměnlivá, šířka 0 px. 5 Call to action blok. Výška proměnlivá, šířka 690 px. 6 Blok s příkladem. Výška 68 px, šířka 690 px. 5 6 Pokračování na další stránce, 05/0. VYROBENO V SYMBIO DIGITAL, S. R. O. 5

16 Jednotlivé šablony STRÁNKA S OBSAHEM - PŘÍKLAD 7 Infografika. Výška proměnlivá px, šířka 690 px. 8 Blok Zjistěte si cenu. Výška 0 px, šířka 690 px. 6 U všech zmíněných částí stránky je důležité dodržovat proporčně stejnou šířku jednotlivých bloků. 7, 05/0. VYROBENO V SYMBIO DIGITAL, S. R. O. 6

17 Jednotlivé šablony TYPY ROZVRŽENÍ STRÁNEK Homepage Stránka s levým menu Stránka bez menu max max max 9 px 67 px 9 px 67 px 9 px 67 px 970 px 970 px 970 px px px px 50 px 70 px 70 px 970 px 75 px 75 px 690 px 970 px 75 px 970 px 970 px 970 px max max max Logo v základním tvaru Stálé prvky Proměnlivá obsahová část, 05/0. VYROBENO V SYMBIO DIGITAL, S. R. O. 7

18 Univerzální moduly Formátování bloků - homepage Formátování bloků - podstránky Formuláře Inputy, select boxy, chybové hlášky Speciální inputy a select boxy Tabulky Tlačítka Stránkování Ikony, 05/0. VYROBENO V SYMBIO DIGITAL, S. R. O. 0, 05/0. VYROBENO V SYMBIO DIGITAL, S. R. O. 8

19 Univerzální moduly FORMÁTOVÁNÍ BLOKŮ - HOMEPAGE px px 5 px 6 px 5 px 0 px 0 px Univerzální velikost mezer mezi bloky 0 px 0 px px 0 px px 0 px 5 px 0 px 0 px 0 px 0 px 8 px 8 px 0 px 0 px Pokračování na další stránce, 05/0. VYROBENO V SYMBIO DIGITAL, S. R. O. 9

20 Univerzální moduly FORMÁTOVÁNÍ BLOKŮ - HOMEPAGE 0 px 0 px 0 px 0 px 0 px 0 px 5 px px 0 px 0 px 0 px 6 px 0 px 6 px 0 px px 0 px px px 0 px 0 px Pokračování na další stránce, 05/0. VYROBENO V SYMBIO DIGITAL, S. R. O. 0

21 Univerzální moduly FORMÁTOVÁNÍ BLOKŮ - HOMEPAGE 50 px Vzdálenost od posledního bloku obsahu stránky 0 px Vzdálenost ke konci stránky px px 0 px 0 px Obsahová část šedé plochy zápatí se může lišit. Musí však dodržovat pravidla formátování použitých prvků. 8 px 8 px, 05/0. VYROBENO V SYMBIO DIGITAL, S. R. O.

22 Univerzální moduly FORMÁTOVÁNÍ BLOKŮ - PODSTRÁNKY 5 px Kalkulačka - šířky částí bloku se liší dle obsahu. 0 px 0 px px px px 7 px 0 px Obsahová část kalkulačky se může lišit. Musí však splňovat pravidla formátování použitých prvků. 0 px 0 px Informační blok s fotkou dole. Blok Co dělat když 0 px px px px px px Pokračování na další stránce, 05/0. VYROBENO V SYMBIO DIGITAL, S. R. O.

23 Univerzální moduly FORMÁTOVÁNÍ BLOKŮ - PODSTRÁNKY 5 px Odrážkový seznam na tmavé ploše. px 5 Odrážkový seznam na bílé ploše. Pokud používáme tyto dva konkrétní bloky, je nutné, aby měly shodnou šířku i výšku. px Používá se zejména na stránkách produktových řad. 0 px 0 px 0 px 0 px 5 px 5 px 0 px 60 px 60 px 5 px Pokračování na další stránce, 05/0. VYROBENO V SYMBIO DIGITAL, S. R. O.

24 Univerzální moduly FORMÁTOVÁNÍ BLOKŮ - PODSTRÁNKY 0 px 0 px 6 Blok s příběhem a fotografií 9 px 6 7 px 5 px 55 px, 05/0. VYROBENO V SYMBIO DIGITAL, S. R. O.

25 Univerzální moduly FORMULÁŘE 0 px Blok s kroky formuláře 0 px Formátování ve formuláři 5 px 5 px 5 px 5 px 76 px Obsahová část kalkulačky se může lišit. 8 px Musí však splňovat pravidla 0 px formátování použitých prvků. 0 px 0 px 0 px, 05/0. VYROBENO V SYMBIO DIGITAL, S. R. O. 5

26 Univerzální moduly INPUTY, SELECT BOXY, CHYBOVÉ HLÁŠKY 8 px Základní input Barva ohraničení: #eee Input s nápovědou Před a po rozkliku Barva horní linky: #ababab 5 Textové pole 0 px Input do kterého se právě píše Barva ohraničení: #bdbdbd Barva horní linky: # Select box Před a po rozkliku Checkboxy Input s chybovou hláškou 5 Barva ohraničení: #ffdd 8 Radio buttony Barva horní linky: #cc Chybové hlášky se zobrazují stejně u všech typů formulářových prvků. Prvek zčervená a pod ním se zobrazí vysvětlení chyby. 7 8, 05/0. VYROBENO V SYMBIO DIGITAL, S. R. O. 6

27 Univerzální moduly SPECIÁLNÍ INPUTY A SELECT BOXY Velký input v tmavém poli Input s nápovědou Před a po rozkl Select box Tyto prvky se používají zejména v kalkulačkách stránek Plyn, Elektřina a Mobil, 05/0. VYROBENO V SYMBIO DIGITAL, S. R. O. 7

28 Univerzální moduly TABULKY 6 px Tabulka s výčtem položek Tabulka s důležitým řádkem 5 px 5 px Velikost řádků tabulky se liší podle počtu řádků textu jednotlivých buňkách. 5 px 5 px 5 px 5 px 0 px, 05/0. VYROBENO V SYMBIO DIGITAL, S. R. O. 8

29 Univerzální moduly TLAČÍTKA Na webových stránkách se vyskytují tři velikosti tlačítek. Velikost tlačítka určuje důležitost stránky, kam tlačítko odkadzuje. Nejvyšší priorita - Používá se pro objednání produktových řad Stav před a po kliku Vysoká priorita - Tlačítka formulářů, registrace zákazníka, přechod na sjednávací formulář Stav před a po kliku Střední priorita - Hledání, více informací, odkazy na stránky Stav před a po kliku Tlačítko s upřesněním Stav před a po kliku, 05/0. VYROBENO V SYMBIO DIGITAL, S. R. O. 9

30 Univerzální moduly STRÁNKOVÁNÍ 5 px 6 px Výchozí stav Stav po najetí Označení právě zobrazené stránky Stránkování v bloku Fotografie 5 6 Stránkování v sekci Často kladené dotazy Výchozí stav Stránkování v sekci Často kladené dotazy Stav po najetí 5 6, 05/0. VYROBENO V SYMBIO DIGITAL, S. R. O. 0

31 Univerzální moduly IKONY Hlavní ikony komodit ČEZ Propracovanější ikony reprezentující kroky objednávacího procesu Ikony vysvětlující složení ceny 5 Ikony spojené s kontakty - je možné měnit barvu pozadí Ikony sociálních sítí - barva evokuje korporátní barvu dané sítě 6 Ikony pro lepší zorientování v textu 6 Ikony k tlačítkům a inputům 5 6 7, 05/0. VYROBENO V SYMBIO DIGITAL, S. R. O.

32 Vyrobeno v SYMBIO Digital, s. r. o. verze 06/0