TAURON Polska Energia S.A. Web manual

Transkrypt

1 TAURON Polska Energia S.A. Web manual

2 TAURON Polska Energia / Web Manual v.. / s. 2 Spis treści. Wprowadzenie 3. Cel i charakter dokumentu 4.2 Informacje techniczne 5 2. Kolory i typografia 6 2. Definicje podstawowych kolorów Wagi kolorów Fonty i ich zastosowanie 9 3. Elementy podstawowe 0 3. Dymek 3.2 Dymek - dobre i złe praktyki Przyciski Odnośniki i wypunktowania Teasery edytowalne A Teasery nieedytowalne Zdjęcia i nagłówki graficzne Grafika - portale spółek Infografiki Wykresy Elementy złożone 2 4. Nawigacja główna - portal Nawigacja główna - portale spółek Nawigacja główna - systemy Nawigacja boczna Zakładki Akordeon Stopka portali spółek Artykuł Tabela Odtwarzacz multimedialny 3 4. Boksy kontaktowe i boczne Formularze Podstawowe elementy Podstawowe zasady konstrukcji formularzy Formularze dwukolumnowe Walidacja Komunikaty Siatka modułowa (grid) Definicja siatki Przykłady layoutów 4 7. Typy serwisów Główny Serwis Korporacyjny Mikrostrony Serwis mobilny i aplikacje mobilne Portale spółek Ekstranety Intranet i aplikacje wewnętrzne Zamieszczanie logotypu Obszar minimalny znaku Wielkość znaku Jakość znaku Warianty znaku Przykłady Przykłady Bannery reklamowe Elementy składowe Podstawowe zasady Aneks 60

3 . Wprowadzenie TAURON Polska Energia / Web Manual v../ s. 3

4 TAURON Polska Energia / Web Manual v.. / s. 4. Cel i charakter dokumentu Celem dokumentu jest definicja wszystkich elementów graficznych serwisów internetowych TAURON. Web manual definiuje w szczegółach sposób prezentacji treści w ramach projektu graficznego Nadrzędną funkcją podręcznika jest utrzymanie spójności wszystkich komponentów serwisu i zapewnienie użytkownikowi pożądanego odbióru marki.

5 TAURON Polska Energia / Web Manual v../ s. 5.2 Informacje techniczne Wszystkie elementy opisywane w tym dokumencie są dostępne w postaci tzw. wzorników opracowanych w Adobe Photoshop, skąd można pobrać elementy w ich oryginalnym wyglądzie. ABCdefg HIJKLmnop Częścią tej dokumentacji są również charakterystyczne typy stron zaprojektowanych dla portalu TAURON w plikach PSD Na potrzeby opisu niektóre elementy w tym podręczniku zostały zwiększone lub zmniejszone - obowiązującą miarą są piksele podane w wymiarowaniu. Do wyróżnienia i oznaczenia poszczególnych detali użyto koloru cyan, niewystępującego w palecie barw serwisu. Odniesienia do poszczególnych elementów prezentowanych po prawej są oznaczane w dokumecie za pomocą nawiasów kwadratowych [] Miary odległości w elementach tesktowych podano od linii bazowej kolejnych wierszy tekstu []. Typografia i wszystkie inne miary w dokumencie podane są w pikselach.

6 2. Kolory i typografia TAURON Polska Energia / Web Manual v.. / s. 6

7 TAURON Polska Energia / Web Manual v../ s. 7 Kolory i typografia 2. Definicje podstawowych kolorów W projekcie wykorzystano podstawowe [] i dodatkowe [2] kolory TAURON zdefiniowane w Systemie Identyfikacji Wizualnej. Wszystkim kolorom nadano opdpowiednie kody, aby precyzyjniej określać barwę elementów. T RGB: 226/0/22 #e2007a T2 RGB: 2/3/5 #70773 Podstawowe kolory brandu TAURON [] uzupełnione są o dodatkowe kolory marki używane do wyróżnienia elementów w serwisie [2]. 2 D D2 D3 D4 Kolory elementów interfejsu używane do tekstów, linii, wyróżnień to różne odcienie szarości [3]. RGB: 73/0/64 #ad0040 RGB: 0/65/8 #0045 RGB: 6/94/85 #05e55 RGB: 0/46/95 #002e5f D5 RGB: 237/83/0 #edb700 3 C C2 C3 C4 RGB: 39/39/39 RGB: 76/76/76 RGB: 9/9/9 RGB: 230/230/230 # #4c4c4c #bfbfbf #e6e6e6

8 TAURON Polska Energia / Web Manual v.. / s. 8 Kolory i typografia 2.2 Wagi kolorów Ze względu na duże natężenie podstawowego koloru - magenty, w serwisach należy używać jej w elementach najistotniejszych (nawigacja, wyróżniki, przyciski wezwania do działania). Stosowanie barw dodatkowych należy ograniczyć do elementów interaktywnych bądź infografik wg podanej proporcji.

9 TAURON Polska Energia / Web Manual v../ s. 9 Kolory i typografia 2.3 Fonty i ich zastosowanie Podstawowym fontem systemowym używanym w projektach jest Arial w trzech odmianach []. Font ten powinien być używany w większości elementów serwisu z wyłączeniem nagłówków i nawigacji. Frutiger [2] jest podstawowym fontem brandowym, jednak z uwagi na aspekty technologiczne (wygładzenie fontów przy dostępnych technikach), powinien być używany przede wszystkim w nawigacji (odmiana Roman) oraz nagłówkach i tytułach (odmiana Bold). Arial Normal/Regular abcdefghijklmnopqrstuvwxyząężźćńó ABCDEFGHIJKLMNOPQRSTUVWXYZ Arial Bold abcdefghijklmnopqrstuvwxyząężźćńó ABCDEFGHIJKLMNOPQRSTUVWXYZ Arial Italic abcdefghijklmnopqrstuvwxyząężźćńó ABCDEFGHIJKLMNOPQRSTUVWXYZ Dla uspójnienia systemu typograficznego przyjęto następujące miary tekstów w serwisach TAURON: Niski stopień tekstu: px Tekst standardowy: 3px Wyższy stopień tekstu: 5px Nagłówek 4 stopnia: 4px Nagłówek 3 stopnia: 6px Nagłówek 2 stopnia: 2px Nagłówek stopnia: 29px Tabele: 2px 2 Frutiger Roman abcdefghijklmnopqrstuvwxyząężźćńó ABCDEFGHIJKLMNOPQRSTUVWXYZ Frutiger Bold abcdefghijklmnopqrstuvwxyząężźćńó ABCDEFGHIJKLMNOPQRSTUVWXYZ

10 3. Elementy podstawowe TAURON Polska Energia / Web Manual v.. / s. 0

11 TAURON Polska Energia / Web Manual v../ s. Elementy podstawowe 3. Dymek Dymek [] powstał jako uniwersalny element identyfikujący TAURON w Internecie. Za pomocą kształtu nawiązującego do charakterystycznego elementu konwersacji stworzony został szereg narzędzi do komunikacji treści. Dymek może występować w formie konturu zawierającego w sobie element zdjęciowy [3]. W takim przypadku zabronione jest umieszczanie dodatkowych tekstów i elementów. Jeżeli na dymku znjadują się elementy tekstowe (slogan) lub interaktywne (przycisk) to stosowana jest zasada środkowania treści [2] wg której cały blok treści centrowany jest w okręgu. Jako dodatek do tekstu dopuszczalne jest również zastosowanie na dymkach prostych ikon w tym samym kolorze co typografia [2a] Wydłużenie dymka jest zawsze z lewej strony [3], chyba, że element ten umieszczono w ostatniej prawej kolumnie serwisu (wydłużenie znajduje się z prawej). 3 2 Lorem ipsum dolor sit amet 2a Lorem ipsum dolor sit amet W przypadku zastosowania kolorów dodatkowych ze zbioru D - kolory typografii stosuje się odpowiednio [4] 4 C biały biały biały biały C biały

12 TAURON Polska Energia / Web Manual v.. / s. 2 Elementy podstawowe 3.2 Dymek - dobre i złe praktyki Dymek może być używany do komunikowania haseł, sloganów, podkreślania treści w serwisie [] Użycie dymka w przypadku teasera głównego powinno opierać się o typografię TAURON oraz zasady układania treści (justowanie do lewej) [2] Dobra decyzja 2 Dobra decyzja Promocja na piątkę z plusem 3 Zdjęcia powinny być zgodne z SIW - kadrowanie powinno pokazywać obiekt centralnej części w sposób zrozumiały i jednoznaczny [3] Zabronione jest umieszczanie tekstu na dymkach w które została wkadrowana fotografia [4] W przypadku używania kolorów TAURON należy dążyć do priorytetyzowania barwy magentowej i niebieskiej - a kolory dobierać wg schamtu określonego w rozdziale 3. [5] Nie wolno stosować typografii innej niż kroje dopuszczone do użycia przez TAURON. Niedopuszczalne jest justowanie tekstu do środka. [6] 4 Dobra decyzja 5 Dobra decyzja Promocja na piątkę z plusem 6 Konkurs Energia w potrawach

13 TAURON Polska Energia / Web Manual v../ s. 3 Elementy podstawowe 3.3 Przyciski Na potrzeby serwisu opracowano 3 rodzaje przycisków [2]: B jako przycisk akcji głównej występujący tylko w podstawowej barwie T. Typografia: Arial Bold 7px B2 do akcji drugorzędnych w serwisie w kolorach T, C i D4. Typografia: Arial Bold 5px B3 do akcji pomocniczych (np. w aplikacjach) w kolorach T, C i D4. Typografia: Arial Bold 3px Budowę przycisków oparto o gradienty przenikające się w 50% odległości pionowej [] oraz dwupikselowe obramowanie. Opcjonalnie każdy z przycisków może przedłużać się w formę strzałki [2a] pełniącej funkcję wskazówki przejścia dalej/wstecz. Grot może kierować w obie strony. Oprócz przycisku nieaktywnego [5] wszystkie opisane są kolorem #ffffff 2 2px B3 5% opacity 2a #FFFFFF #4c4c4c # B B2 3 T #c2006b 5% opacity #f707d #c2006b C #222 #333 #222 D4 #00254c #00366f #00254c #ffffff #d6d6d6 #ffffff #d6d6d6 Po najechaniu przyciski zmieniają tło i styl gradientu [3]. Możliwe jest wykorzystanie ikon (max 6x6px) przed tekstem przycisków [4]. Ikona traktowana jest odpowiednio jako tekst (marginesy) T2 #C3 #a3a3a3

14 TAURON Polska Energia / Web Manual v.. / s. 4 Elementy podstawowe 3.4 Odnośniki i wypunktowania Odnośniki w serwisie zostały oznaczone w serwisie na dwa sposoby (z pewnymi odstępstwami od tej zasady omówionymi dalej): C2 2 Odnośniki samodzielne [] [3] [4] zostały oznaczone symbolem strzałki w kolorze C i tekstem w kolorze T. Po najechaniu kursorem tekst C2 zamienia się na T Odnośniki tekstowe wewnątrz tekstu [2] zostały wyróżnione kolorem T, a po najechaniu kursorem zostają podkreślone 3 25 C2 Samodzielne odnośniki można grupować [3] stosując stały stopień typografii (3px). Alternatywnie zamiast strzałki możliwe jest użycie ikony 6x6px w kolorze T [4a]. W przypadku nagłówków [] wyróżnienie nagłówka klikalnego odbywa się poprzez dodanie strzałki w kolorze T przed nagłówkiem C C4 B0 0 Specjalnym rodzajem odnośnika jest B0 [5], którego szerokość zawsze wynosi wielokrotność pojedynczego modułu siatki (gridu). Element B0 nie powinien być stosowany samodzielnie - jest to odpowiednik grupy linków [3] w przypadku gdy konieczne jest mocniejsze wybicie graficzne elementów. 4 4a 25 C2 #ffffff

15 TAURON Polska Energia / Web Manual v../ s. 5 Elementy podstawowe 3.5 Teasery edytowalne A Teasery edytowalne stanowią elementy systemu internetowego pozwalające na ręczne wprowadzenie treści i wezwania do działania w systemie CMS. Zasada konstrukcji [] teaserów została oparta o dwie linie tekstu (Arial 3px Regular) zakończone call to action (Arial 3px Bold). Teasery mają jednolite marginesy wewnętrzne [2] i występują w palecie barw i odpowiednio im towarzyszącym kolorom tekstu analogicznie do dymków zdefiniowanych w rozdziale A 8 0 Paleta T i D Teasery wystepują tylko w jednym rozmiarze: 225x90px. A4 Specyficzną formą teasera edytowalnego jest dymek informacyjny, który pełni formę odnośnika [3]. W takim przypadku stosowana jest typografia Arial 6px bold 3

16 TAURON Polska Energia / Web Manual v.. / s. 6 Elementy podstawowe 3.6 Teasery nieedytowalne Teaserami nieedytowalnymi zostały oznaczone te elementy graficzne, które wykonywane są przez projektanta lub agencję pracującą dla TAURON. 2 Wszystkie elementy zawierają call to action [5], opartego o Arial 3px Bold oraz towarzyszącą mu strzałkę. W przypadku tła call to action rekomendowany jest kolor T. A Wprowadzono gamę rozmiarów, aby w odpowiedni sposób odzwierciedlić potrzeby prezentacji różnych natężeń i wag. Rozmiary i nagłówki teaserów to odpowiednio: 3 4 A3 A2 A4 A []: 225x90px, Frutiger Bold 6px A2 [2]: 225x80px, Frutiger Bold 2px. A3 [3]: 225x380px, Frutiger Bold 2px. A4 [4]: 225x245px, Frutiger Bold 2px Dokument dopuszcza różne zabiegi stylistyczne dotyczące projektów, pod warunkiem zachowania następujących zasad: Margines wewnętrzny teasera zawsze wynosi 0px 5 Nagłówek wyrównany do lewego górnego marginesu teasera Barwy użyte w stylistyce powinny odzwieciedlać paletę barw TAURON (T, D, C). 5a

17 TAURON Polska Energia / Web Manual v../ s. 7 Elementy podstawowe 3.7 Zdjęcia i nagłówki graficzne Do zilustrowania treści w serwisie użyto szeregu elementów zdjęciowych: Nagłówek I3 []: 75x225px. Stosowany jako ilustracja dla stron serwisu. Elementem obligatoryjnym jest dymek znajdujący się w lewej górnej części nagłówka. I3 Dymek z wtopionym zdjęciem I [2a]: 225x245px. Zdjęcie wyszparowane I2 [2b]: 225x245px. Rekomendowane do używania na stronach produktowych Zdjęcia zwykłe. Używane jako ilustracja artykułów. Rozmiary: 3a: 225x245px 3b: 345x230px 3c: 470x33px 3d: 345x5px 3e: 225x70px 3f: 345x345px Na zdjęciach unikamy opisów tekstowych jeśli nie są teaserami a I 2b I2 3a 3c 3e 3b 3d 3f

18 TAURON Polska Energia / Web Manual v.. / s. 8 Elementy podstawowe 3.8 Grafika - portale spółek Dla portali spółek należących do Grupy TAURON Polska Energia stosujemy spójny element graficzny strony głównej []. Zawiera on trzy podstawowe składowe: a Zdjęcie przewodnie w formacie 75x65px [a] b Dymek w lewym górnym rogu wraz z call to action [b] Element ze statystykami w formacie 470x76px podzielony na dwie równe części na półprzeźroczystej apli (opacity 70%). [c] Kolorystyka apli i dymka powinna uwzględniać tonację zdjęcia przewodniego. c

19 TAURON Polska Energia / Web Manual v../ s. 9 Elementy podstawowe 3.9 Infografiki Ogólne zasady tworzenia infografik: Infografiki powinny zachować płaski, uproszczony styl (bez cieni, gradientów i innych stylistycznych zabiegów) [] Do ich tworzenia stosujemy kolory podstawowe i dodatkowe oraz pomocnicze kolory ze skali szarości zdefiniowane w Web Manualu. Do tworzenia infografik można wykorzystać kształt dymka z zastosowaniem podstawowych zasad dotyczących umieszczania grafiki na dymkach[2]. W takim zastosowaniu dopuszczalne jest przeskalowanie dymka w celu dopasowania go do kontekstu użycia.[3] 2 2a 3 Rekomendowane kolory w infografikach: elementy najistotniejsze [2a] (wyróżniające się): T > D4 Do wielu elementów równorzędnych używamy kolorów dopełniających [2b]: D, D2, D3, D4, D5 i T2 Przy dobieraniu elementów barwnych trzeba zwrócić uwagę na zachowanie proporcji kolorystycznych portalu szczegółowo opisanych w rozdziale b W uzasadnionych przypadkach możliwe są odstępstwa

20 TAURON Polska Energia / Web Manual v.. / s. 20 Elementy podstawowe 3.0 Wykresy Wykresy pełnią istotną rolę przy prezentacji danych, dlatego szczególnie istotne jest dążenie do takiej ich prezentacji, aby informacje były możliwie minimalne, ale wystarczająco zrozumiałe dla użytkownika końcowego. a d W przypadku wykresów liniowych siatkę wyznacza px linia C4, a tło jest zawsze białe [a] b Linie wykresu powinny być opracowywane minimalną linią o grubości 3px [b] z towarzyszącą im legendą w odpowiadającym kolorze [c]. Opisy detali wykresu powinny być dostepne na tooltipach [d] o kolorze tła C4 i obramowaniu C3. Wykresy kołowe powinny być konstruowane w oparciu o płaskie kolory bez dodatkowych efektów z 2px białą linią pomiędzy częściami wykresu. c 2 3 W przypadku konieczności prezentacji dużej ilości wykresów możliwe jest używanie odcieni jednej z barw TAURON do segmentacji wykresu [3] - wg definicji kolorów w SIW. Barwy wykorzystywane we wszystkich wykresach powinny być dobierane w następującej kolejności: D D4 D5 T2 D3 C D2

21 4. Elementy złożone TAURON Polska Energia / Web Manual v../ s. 2

22 TAURON Polska Energia / Web Manual v.. / s. 22 Elementy złożone 4. Nawigacja główna - portal Nawigacja główna serwisu składa się z: a b c logotypu umieszczonego przy lewej krawędzi serwisu []. Wysokość litery T wyznacza odstepy od krawędzi górnej przeglądarki i dolnego gradientu [2] d e numeru infolinii [b]. Arial 9px C2 menu narzędziowego [c]. Arial 2px T 2 22 menu głównego [d]. Frutiger Roman 2px C2 25 wyszukiwarki [e] 35 Element menu zaznaczony zawsze okala prostokąt w kolorze T [3] 22 Każdy z elementów menu może zostać rozwinięty do dropdown, którego wyświetlenie jest opóźnione o 0,5 sekundy od najechania kursorem

23 TAURON Polska Energia / Web Manual v../ s. 23 Elementy złożone 4.2 Nawigacja główna - portale spółek Nawigacja główna portali spółek różni się od nawigacji portalu głównego i składa się z następujących elementów: a b d W topie znajduje się magentowy pasek c d z nazwą spółki - Frutiger Bold 4px # fff [a] oraz elementy linkujące poza serwis [b] m. in. do strony głównej TAURON Polska Energia i innych spółek Grupy - Arial Regular 3px #fff logotyp [c] z zachowaniem pola ochronnego (wysokość litery T) dosunięty do lewej krawędzi gridu % opacity #FFFFFF #4c4c4c # elementy menu [d] dopisywane są od lewej. Odstępy między elementami menu są równe, przy czym max. powinny wynosić 40px, a min. 30px (w przypadku dużej ilości elementów menu) - Frutiger Regular 5px C2. 20 w topie znajduję się wyszukiwarka 3 20 Element menu zaznaczony zawsze okala prostokąt w kolorze T [3a] a 3a

24 TAURON Polska Energia / Web Manual v.. / s. 24 Elementy złożone 4.3 Nawigacja główna - systemy Nawigacja główna systemów różni się od nawigacji portalu większą ilością elementów: c a d b pasek wyboru systemu [a]. Arial Bold 2px C2 dla wybranego systemu oraz Arial Normal px C2 dla pozostałych. Dane użytkownika zalogowanego [b]. Arial Bold px C2 (użytkownik) oraz Arial Regular px C2 (Firma) logotyp [c] z zachowaniem pola ochronnego (wysokość litery T) elementy menu [d] dopisywane są od lewej. Frutiger Regular 5px C W przypadku gdy dostepnych dla użytkownika jest więcej systemów niż jest w stanie pomieścić pasek nawigacyjny, stosowane jest rozwinięcie pozostałych systemów za pomocą dropdown [2a] 5 Elementy nawigacji dotyczące konta użytkownika są również dostępne po rozwinięciu [2b]. Wyjątkiem jest odnośnik do wylogowania (Arial Regular px T) 2 2a 2b

25 TAURON Polska Energia / Web Manual v../ s. 25 Elementy złożone 4.4 Nawigacja boczna Nawigacja boczna umożliwia prezentację 4 poziomów zagłębienia: tytuł sekcji - poziom pierwszy [a] Frutiger Bold 6px C2 poziom drugi [b] Arial Normal 5px C 34 a b a poziom trzeci [c] Arial Normal 3px C poziom czwarty [d] Arial Normal 2px C Element zaznaczony oraz wszystkie poprzedzające oznaczane są odmianą Bold. Aktywna strona [e][2a] oznaczone są dodatkowo kolorem T oraz innym stylem strzałki. e d c C

26 TAURON Polska Energia / Web Manual v.. / s. 26 Elementy złożone 4.5 Zakładki Zakładki budowane są wg następujących zasad: zakładka wybrana [a] Arial Normal 4px #fffff 5 a C2 5 6 b C4 30 zakładka [b] Arial Normal 4px C c podział // [c] z 5px marginesami podział 2/ [d] z 5px marginesem d podział /2 [e] z 5px marginesem e W szczególnych przypadkach kiedy wymaga tego czytelność projektu można zastosować zakładki odwrócone [2]. Obszar jednolitej apli [2a] może zostać wykorzystany do umieszczenia dodatkowych elementów nawigacyjnych i narzędziowych dotyczących grupy zakładek 5 2 C4 #ffffff 2a 30 Alternatywną formą prezentacji treści w zakładkach są zakładki proste [3]. Element ten rozciąga się zawsze na wielokrotność modułu grid. Zakładka zaznaczona [3a] Arial px T. Pozostałe [3b] Arial px C. Zakładki pisane wielkimi literami (majuskułami). 3 3a 30 3b

27 TAURON Polska Energia / Web Manual v../ s. 27 Elementy złożone 4.6 Akordeon 20 C4 Akordeony są specyficzną odmianą zakładek. W ramach elementów graficznych TAURON opracowane zostały dwa typy akordeonów: zwykły [], który powinien być używany do prezentacji nie więcej niż 8 elementów oraz lekki [2] w którym może znajdować się dowolna ilość elementów. a 40 max 800 Akordeony składają się z: Zakładki zaznaczonej [a] Arial Normal 5px C [2a] Arial Normal 35px C b Zakładki aktywnej [b] Arial Normal 5px #fffff [2b] Arial Normal 3px T c W efekcie po najechaniu kursorem stosuje się efekt najechania taki jak na przyciskach [c] lub kolor C4 [2c] 2 2a 5 C4 30 Treść w każdym z elementów akordeona nie powinna przekraczać orientacyjnej wysokości 800px. max 800 2b 2c C4

28 TAURON Polska Energia / Web Manual v.. / s. 28 Elementy złożone 4.7 Stopka portali spółek W stopce wyróżniamy dwie strefy : Strefę górną gdzie znajdują się dane kontaktowe Arial Regular 3px T2 oraz linki do kluczowych sekcji serwisu Arial Regular 3px T2 [a] a c Poszczególne sekcje strefy górnej stopki opisują nagłówki Frutiger Bold 4px T2 [c] Pasek dolny zawiera odnośniki do niezbędnych elementów serwisu, które nie są zamieszczone w głównym menu np. BIP czy Polityka prywatności [b] b Rekomendujemy podział górnej części stopki na 4 kolumny o szerokości wynikającej z gridu - elementy są dodawane od lewej strony, w przypadku małej ilość treści skrajna prawa kolumna może pozostać pusta. W przypadku elementów niestandardowych pojawiających się w stopce możliwy jest inny podział. W dolnej części stosujemy jedną szpaltę i równamy elementy do skrajnie lewej strony (BIP), a pozostałe linki do skrajnie prawej strony [b].

29 TAURON Polska Energia / Web Manual v../ s. 29 Elementy złożone 4.8 Artykuł W artykułach wprowadzone zostały cztery typy nagłówków tekstowych stopnia [a] Frutiger Bold 29px C2 a b 45 2 stopnia [e] Frutiger Bold 2px C2 3 stopnia [f] Frutiger Bold 6px C2 c 35 4 stopnia [g] Frutiger Bold 4px C2 Każdy artykuł powinien rozpoczynać się od wprowadzenia [b] Arial Normal 5px C2 z interlinią 8px. Treść w serwisie [c] pisana jest Arialem Normal 3px C2 z interlinią 8px. Treść może być wyróżniona przez wyboldowanie Arial Bold 3px. Stopień pisma może zostać zmniejszony do px. W przypadku list wypunktowanych [d] lub numerowanych [h] stosowana jest interlinia 20px. d e f g i Podpisy pod zdjęciami [i] zamknięte są w formie oddzielonego tłem w kolorze C4 kontenera z marginesem wewnętrznym 0px i typografią Arial Normal px o interlinii 3px T2 h

30 TAURON Polska Energia / Web Manual v.. / s. 30 Elementy złożone 4.9 Tabela Tabele konstruowane są w oparciu o następujące zasady: Nagłówek tabeli [a] jest rozdzielany za pomocą px linii C3 [d]. Przy formatowaniu nagłówka elementy tekstowe (Arial Normal 2px C) są wyrównane do górnej krawędzi. W przypadku sortowania kolumn element klikalny [g] zmienia kolor na T, a element aktualnie sortowany [f] zachowuje kolor C3 z wektorem sortowania w kolorze T a b C4 d f g 0 0 e e Treść umieszczana w tabeli [b] może c być pisana Arialem Normal C2 w stopniu 3px lub px. Treść jest rozdzielana liniami pionowymi px C4 [e] i poziomymi separatorami. W przypadku gdy element tesktowy jest klikalny [c] stosowany jest wyróżnik w kolorze T.

31 TAURON Polska Energia / Web Manual v../ s. 3 Elementy złożone 4.0 Odtwarzacz multimedialny Odtwarzacz multimedialny może zostać osadzony na szerokości 2 lub 3 modułów. Standardowo zgłasza się po wczytaniu strony widokiem [a] w którym uruchomienie odtwarzania odbywa się za pomocą kliknięcia dymku [b] lub wciśnięcia przycisku odtwarzania [c]. W czasie odtwarzania mozna je zatrzymać przyciskiem [d] lub klikając na obszar odtwarzania. Regulacja głośności odbywa się poprzez element [e], który powinien zapamiętywać swoją wartośc po opuszczeniu strony. Kliknięcie w element [e] wycisza dźwięk [f] [i] a c b g W playerach przewidziano możliwość prezentacji napisów. Ich włączenie odbywa się poprzez wybranie przycisku [g]. Widok pełnoekranowy włączany jest za pomocą [h] d e h f i

32 TAURON Polska Energia / Web Manual v.. / s. 32 Elementy złożone 4. Boksy kontaktowe i boczne Elementy te zostały zaprojektowane jako tła do informacji kontatkowych [][2] i powiązanych. Wykorzystywane są również do oznaczania kolejnych kroków formularza [3]. a W bocznej krawędzi boksów znajduje się cień, który zawsze powinien przylegać do przeciwległej krawędzi względem skrajnej szpalty serwisu w której jest umieszczony. Niedopuszczalne jest używanie boksa w modułach środkowych serwisu. 5 b Margines wewnętrzny boksów wynosi 5px. Stosowane są maksymalnie nagłówki H4 w kolorach C lub C2. Do oddzielenia treści używany jest separator [b]. c C4 3 3a Zalecane jest stosowanie przycisku B3 [c] w kolorze białym. W przypadku użycia boksa do oznaczania kolejnych kroków formularza [3] stosowane są następujące zasady: 3b 3c Dla elementu wypełnionego [3a] Arial Normal 3px C Dla elementu wypełnianego [3b] Arial Normal 3px T Dla elementu kolejnego, niewypełnionego [3c] Arial Normal 3px T2

33 5. Formularze TAURON Polska Energia / Web Manual v../ s. 33

34 TAURON Polska Energia / Web Manual v.. / s. 34 Formularze 5. Podstawowe elementy Wszystkie elementy formularzy, za wyjątkiem specyficznych sytuacji, opisywane są typografią Arial 3px C2 (elementy nieaktywne # 9a9a9a [2b], [3a]). Szerokość pól tekstowych [] stanowi wielokrotność 50px lub wielokrotność modułu siatki (gridu) z uwzgl. marginesów formularza. Po najechaniu na element listy w dropdown menu zmienia on kolor na T [a] Pola tekstowe [], radio [2] oraz checkbox [3] kontynuowane są jeden pod drugim, chyba, że specyficzny projekt wymaga użycia pól obok siebie [2a] a 23 2b 25 a Do opisu pól stosowany jest znak zapytania [4], który po najechaniu zmienia tło na T i prezentuje tooltip z podpowiedzią (Arial px C2) a Poszczególne pola mogą być oddzielane od siebie w pionie za pomocą przerywanej linii [5] zwanej Separatorem. 4 W przypadku dłuższych formularzy w których można wyodrębnić logiczne zbiory danych, stosowany jest Separator Sekcji [6]. UWAGA: Powyżej opisane zostały typowe formularze używane w serwisie. W przypadku skomplikowanych formularzy lub ich specyficznych zastosowań (np. aplikacje RIA) dopuszczalne są odstępstwa pod warunkiem zachowania maksimum zasad. 5 6

35 TAURON Polska Energia / Web Manual v../ s. 35 Formularze 5.2 Podstawowe zasady konstrukcji formularzy Formularze zawsze umieszczone są na obrysach (canvas) [], o marginesie wewnętrznych 5px. Każdy formularz powinien zawierać tytuł [a], który stanowi również informację o kroku, jeśli jest to formularz wielokrokowy. Nagłówki stosuje się odpowiednio do zasad pisanych w rozdziale Artykuły. 5 b a x c Dla formularzy jednokolumnowych przyjęto zasadę definicji szerokości pola na opisy pól [b], która jest wielokrotnością 50px. Tekst nie mieszczący się w tej szerokości jest łamany do nowej linii. Pola, po uwzględnie- 20 niu 5px pmarginesu, wyrównane są więc zawsze do stałej odległości od lewej Separatory [c], jeśli użyte raz, stosowane sa obligatoryjnie w całym formularzu. Każdy formularz powinien kończyć się 5 5 widocznym przyciskiem kończącym [d]. Dla formularzy jednokrokowych rekomendawany jest przycisk B lub B2 w kolorze T. Dla wielokrokowych przycisk B2 lub B3 w kolorze D4 oraz B lub B2 w kolorze T2 dla 40 d 30 5 kroku ostatniego. 40

36 TAURON Polska Energia / Web Manual v.. / s. 36 Formularze 5.3 Formularze dwukolumnowe W przypadku niektórych formularzy pożądne jest użycie dwóch kolumn do prezentacji wszystkich pól. W takim przypadku nadrzędną zasadą jest zastosowanie dwóch dostępnych podziałów na bazie siatki modułowej [d] [2c]. a b 6 30 Opisy pól tekstowych umieszczone są na gó- c rze [a] [2a] i zawsze są tej samej szerokości co najdłuższe pole w danej kolumnie. Pola tekstowe mogą stanowić 00% szerokości [a] dostępnej dla kolumny (wynikającej z siatki modułowej po odjęciu marginesów formularza), bądź stanowić wielokrotność 50px [b] [2b] d a 2b 2c

37 TAURON Polska Energia / Web Manual v../ s. 37 Formularze 5.4 Walidacja Określanie czy formularz został prawidłowo wypełniony zostało zdefiniowane na dwa sposoby. 36 a Pierwszym rodzajem walidacji jest sprawdzanie formularza w loci e[]. W takim przypadku z prawej strony pola tekstowego używane są ikony do weryfikacji na bieżąco czy w pole została wprowadzona prawidłowa wartość. Na etapie konstrukcji formularza wymagane jest zabezpieczenie odpowiedniej ilości miejsca na prezentację ikon [a] [b]. Walidacja ta rekomendaowana jest do prostych formularzy. D D b W pozostałych przypadkach [2] stosowana jest walidacja pól w której pola prawidłowo wypełnione nie są oznaczane, natomiast pola nieprawidłowe podpisywane są komunikatem błędu z ikoną x [2a]. W przypadkach w których pola są zbyt krótkie na prezentację treści komunikatu błędu [2b] [2c] stosowane jest umieszcznie ikony x i obok niej ikony informacyjnej i po najechaniu na ktorą prezentowany jest błąd. 2 2a Wszystkie elementy graficzno - typograficzne związane z oznaczaniem błędu są prezentowane z użyciem koloru D. 2b 2c

38 TAURON Polska Energia / Web Manual v.. / s. 38 Formularze 5.5 Formularze dla akcji promocyjnych Formularze dla akcji promocyjnych kierowane są do dwóch różnych grup odbiorców - klientów biznesowych oraz klientów indywidualnych. 2a 2b Do komuniakcji z klientami biznesowymi dedykowane są formularze z granatowym nagłówkiem. Budowę nagłówka oparto o gradienty pionowy bazujący na kolorze D4 []. w zestawie z nagłówkiem D4 stosujemy: Białe lub szare tło z możliwością dodania zakładek kroków dopasowanymi do danego typu tła [2a], [2b] 3a 3c 3b Przycisk akcji głównej w kolorze T lub D4 w wersji podstawowej [3a] outline px Przycisk akcji głównej w kolorze T lub D4 ze wskazaniem kieunku [3b] stosowane w formularzach krokowych dla akcji dalej #eee Nagłówek + 2 dopuszczalne tła + 3 dopuszczalne przyciski Przyciski do akcji pomocniczych [3c] - stosowane w formularzach krokowych dla akcji wstecz typografia: #f4772 # a #f0f0f0 #fff 3a 3b Frutiger Bold 2/25 px #fff 2b #e0e0e0 3c #f0f0f0

39 TAURON Polska Energia / Web Manual v../ s. 39 Formularze 5.5 Formularze dla akcji promocyjnych Do komuniakcji z klientami indywidualnym możemy stosować trzy różne kolory nagłówków: magentowy T, żółty D5 i grafitowy C2. Przy czym magentowe nagłówki są dedykowane do konkursów. Budowa wszystkich nagłówków oparta jest o gradient pionowy [a], [2a], [3a]. w zestawie z nagłówkami magentowym [a] i grafitowymi [2a] stosujemy: Przyciski akcji głównej w kolorze T w wersji podstawowej lub ze wskazaniem kieunku w przypadku formularzy krokowych [b],[c], Białe lub szare tło z zakładkami kroków odpowiednimi dla danego typu tła oraz nr kroków w kolorze T [4a], Nagłówek a Nagłówek 2a #e5f8a #c706c typografia: Frutiger Bold 2/25 px #fff # # typografia: Frutiger Bold 2/25 px #fff + dopuszczalne przyciski d c b + 4a dopuszczalne tła #e2007a #f0f0f0 #fff #e0e0e0 #f0f0f0 Dla nagłówka żółtego [3a] stosujemy: przyciski akcji głównej w kolorze D5 w wersji podstawowej lub ze wskazaniem kieunku [3b], [3c]. Białe tło z zakładkami kroków z nr kroków w kolorze D5 [4b], Dla wszystkich nagłówków stosujemy: Szare przyciski do akcji pomocniczych [d], [3d], Nagłówek dopuszczalne przyciski + + #efc0f #da00 3c 3a typografia: 3d Frutiger Bold 2/25 px # b 4b #f0f0f0 dopuszczalne tło #edb700 #fff

40 TAURON Polska Energia / Web Manual v.. / s. 40 Formularze 5.6 Komunikaty Komunikaty stosowane są w górnej części strony pod główną nawigacją i ścieżką dostępu. Komunikaty operacyjne występują zawsze po podjęciu określonego działania przez użytkownika i służą do informowaniu klienta o przebiegu dokonywanych przez niego zmian. Wyróżniamy następujące typy komunikatów: Komunikaty potwierdzające. Są one walidacją generalną całego operacji i informują czy dana akcja się powiodła [], px 27 9 Arial Regular 3pt/8, kolor #008f4d Arial Regular 3pt/8, kolor D, Arial Regular 3pt/8, kolor #d98e7, Komunikaty błędu, np. gdy wystąpił błąd w trakcie przesyłania danych [2], Komunikaty ostrzegawcze, np. gdy zmiany wprowadzane przez użytkownika są wiążące i trudno odwracalne [3]. Komunikaty informacyjne pojawiają się na podstronach gdzie potrzebne są dodatkowe wyjaśnienia lub chcemy poinformować o czymś klienta w danym kontekście. Komunikat informacyjny priorytetowy [4] - dotyczy zdarzeń ogólnych np. dużej awarii - umieszczany jest zazwyczaj na stronie głównej, Komunikaty informacyjne standardowe [5a], [5b], [5c]. 5a 5b 5c 5 5 5

41 6. Siatka modułowa (grid) TAURON Polska Energia / Web Manual v../ s. 4

42 TAURON Polska Energia / Web Manual v.. / s. 42 Grid 6. Definicja siatki Siatka została oparta na stałej szerokości 960px. 960 Ponieważ podział dotyczy serwisów internetowych w gridzie nie uwzględniono wysokości modułów, a jedynie ich poziomy podział Najmniejszym modułem jest 225px [] i jest to bazowy podział strony. Możliwe jest łączenie modułów w ramach jednej strony. a Dla specyficznych odmian stron w serwisie internetowym wprowadzono również siatkę z podziałem na nawigację boczną i podział części z treścią na dwie równe kolumny [2] [3]

43 TAURON Polska Energia / Web Manual v../ s. 43 Grid 6.2 Przykłady layoutów Przykład podziału strony głównej na bazie siatki modułowej. 960

44 7. Typy serwisów TAURON Polska Energia / Web Manual v.. / s. 44

45 TAURON Polska Energia / Web Manual v../ s. 45 Typy serwisów 7. Główny Serwis Korporacyjny Główny serwis korporacyjny jest podstawowym serwisem sprzedażowym i reprezentatywnym dla całej Grupy TAURON. Witryna wspiera obecność firmy na rynku, pozwalając obecnym jak i potencjalnym klientom poznać firmę i jej ofertę. Główny serwis posiada następujące wyróżniające elementy: Charakterystyczny top [], Duży banner (A0) na stronie głównej [2], Rozwijane menu główne [3], Regionalizacje serwisu [4a], [4b] b 4a

46 TAURON Polska Energia / Web Manual v.. / s. 46 Typy serwisów 7.2 Mikrostrony Mikrostrony są zintegrowane z Serwisem Głównym Grupy Tauron, ale nie są oznaczone w jego strukturze. Mikrostrona to pierwsza strona, na którą trafia odwiedzający wskutek podejmowanych przez firmę działań promocyjnych. Głównym celem mikrostrony jest wywołanie pożądanej akcji ze strony odwiedzających i zwiększenie konwersji W związku z tym dopuszczalne jest stosowanie następujących zabiegów fokusujących i wizualnych: Top z ograniczonym kontekstowym menu i logotypem po prawej stronie [], Większa typografia nagłówków [2], System ikon w rozmiarach 6x6px, 32x32px, 56x56px; dopuszczalne kolory użycia to: T, T2, D3 D4, D5, C3 [3], Dymek z grafiką o rozmiarach 350 x 383px [4], 5 6 Kroki prezentujące przebieg procesu [5], Boksy z porównaniem produktów i oferty [6], Informacje dotyczące promocji nad stopką [7], Zredukowana stopka [8]. 7 8

47 TAURON Polska Energia / Web Manual v../ s. 47 Typy serwisów 7.3 Serwis mobilny i aplikacje mobilne Serwis mobliny i aplikacje mobilne projektowane są w oparciu o specyfikacje techniczną urządzeń mobilnych. W celu poprawienia czytelności i dostosowania do wymagań technicznych zastosowano następujące zabiegi: Ilość i sposób wyświetlania informacji został dostosowany do możliwości sprzętowych [a], [b]. a 2a 2b 3a 3b Nawigacja została przearanżowana i wprowadzone zostały dodatkowe ikony [2a], [2b]. Został wykluczony font Frutiger Normal i Frutiger Bold. Został rozszerzony system typograficzny b o odmiany Arial Regular i Arial Bold w wielkościach: 20pt, 8pt, 6pt i 4pt w celu utrzymania hierarchii 5 prezentowanych treści [3a], [3b], [3c]. Niektóre elementy takie jak stopka [4], czy separatory sekcji [5] zostały graficznie uproszczone. 4 3c

48 TAURON Polska Energia / Web Manual v.. / s. 48 Typy serwisów 7.4 Portale spółek Portale spółek służą do prezentacji szczegółowych informacji na temat spółek należących do Grupy TAURON. Aby podkreślić ich odrębny charakter został zmieniony główny element wizerunkowy. Przy pomocy infografiki zostały również wyeksponowane dane charakterystyczne dla danej spółki. Elementy wyróżniające Portale spółek to: 2a Belka górna z linkami do Głównego Serwisu Korporacyjnego [], Element wiodący z infografiką na stronie głównej [2], [2a] 2 Stopka na białym tle [3]. Pozostałe podstrony zbudowane są według ogólnych zasad i dostosowywane do potrzeb informacyjnych danej spółki za pomocą standardowych elementów interfejsu. 3

49 TAURON Polska Energia / Web Manual v../ s. 49 Typy serwisów 7.5 Ekstranety Ekstranety to zewnętrzne systemy internetowe dedykowane realizacji celów biznesowych i informacyjnych Grupy TAURON. 2 Przykłady ekstranetów: TAURON e-licznik[] TAURON e-bok[2] Ekstranety projektowane są w oparciu o typowe elementy używane w pozostałych serwisach Grupy TAURON. Ich cechą charakterystyczną jest duża ilość specyficznych rozwiązań funkcjonalnych. W celu realizacji założeń serwisu, mogą zostać zastosowane unikalne rozwiązania graficzne i funkcjonalne. Elementy te budowane są w oparciu o całość systemu z uwzględnieniem jego zasad i stylistyki. 2a Przykłady unikalnych elementów: TAURON e-licznik - zmiana parametrów [a] TAURON e-bok - rozbudowana tabela [2a] TAURON e-bok - porównawcze wykresy słupkowe [2b] a 2b

50 TAURON Polska Energia / Web Manual v.. / s. 50 Typy serwisów 7.6 Intranet i aplikacje wewnętrzne Intranet [] i aplikacje wewnętrzne Grupy TAURON posiadają odmienne wytyczne graficzne w celu wyodrębnienia ich od reszty serwisów i zostały one opisane w osobnym dokumencie: Wytyczne graficzne dla Intranetu i aplikacji wewnętrznych.

51 TAURON Polska Energia / Web Manual v../ s. 5

52 8. Zamieszczanie logotypu TAURON Polska Energia / Web Manual v.. / s. 52

53 TAURON Polska Energia / Web Manual v../ s. 53 Zamieszczanie logotypu 8. Obszar minimalny znaku Obszar minimalny logo stanowi pole ochronne gwarantujące zachowanie integralności logo i zabezpieczającym logo przed niekorzystnym wpływem elementów otoczenia. Obszar minimalny wyznacza margines, jaki powinien oddzielać logo od tekstu, znaków graficznych, barwnych pól i zdjęć sąsiadujących z logo. Wielkość pola ochronnego logo TAURON wyznaczona jest przez wysokość literki T z nazwy marki.[] Przykład zastosowania [2] 2

54 TAURON Polska Energia / Web Manual v.. / s. 54 Zamieszczanie logotypu 8.2 Wielkość znaku Rozmiar logo powinien zostać dopasowany do kontekstu użycia (adekwatnie do innych elementów na stronie) lecz nie powinien schodzić poniżej wartości minimalnych. Zdefiniowanie najmniejszej dopuszczalnej wielkości logo gwarantuje czytelność liter zawartych w logotypie oraz kształt elementów konstrukcyjnych przed wpływem zniekształceń [a], [b]. Stosując logo należy pamiętać o przestrzeganiu założonych ograniczeń w odniesieniu do konkretnych wersji logo. Ważne jest, aby przy umieszczaniu logo na małych powierzchniach pamiętać nie tylko o zachowaniu wielkości minimalnej, ale i minimalnego pola ochronnego (obszaru minimalnego znaku). a 08 px b 72px

55 TAURON Polska Energia / Web Manual v../ s. 55 Zamieszczanie logotypu 8.3 Jakość znaku W celu uzyskania najwyższej jakości logotyp powinien być skalowany w pliku wektorowym (np:.eps,.ai ) do pożądanej wielkości i dopiero wtedy konwertowany na format bitmapowy (.png,.jpg). [] 2 Absolutnie zakazane jest skalowanie wersji bitmapowej (np. format: jpg, png) znaku do większych rozmiarów. [2] W trakcie skalowania znaku należy zwrócić uwagę na ostrość krawędzi znaku po przeskalowaniu [3] - widok w powiększeniu 3

56 TAURON Polska Energia / Web Manual v.. / s. 56 Zamieszczanie logotypu 8.4 Warianty znaku W przypadku uzasadnionym charakterem materiałów wykluczającym duże białe powierzchnie tła, możliwe jest zastosowanie logo w wersji odwróconej (kontrze) z zachowaniem dopuszczalnej kolorystyki tła: wersja w kontrze magentowa #e2007a [] wersja w kontrze szara #70773 [2] 2

57 TAURON Polska Energia / Web Manual v../ s. 57 Zamieszczanie logotypu 8.5 Przykłady Logo TAURON może funkcjonować w internecie w obrębie serwisów Grupy TAURON [] lub na serwisach współpracujących firm, dla których grupa TAURON jest partnerem biznesowym[2]. 2 pole ochronne pole ochronne

58 TAURON Polska Energia / Web Manual v.. / s. 58 Zamieszczanie logotypu 8.6 Przykłady W sytuacji kiedy logotyp TAURON stosowany jest w kontekście logotypów innych firm jego wielkość powinna być dobrana adekwatnie do hierarchii [] i wielkości innych logotypów [2]. 2

59 9. Bannery reklamowe TAURON Polska Energia / Web Manual v../ s. 59

60 TAURON Polska Energia / Web Manual v.. / s. 60 Bannery reklamowe 9. Elementy składowe Bannery reklamowe to elementy graficzne funkcjonujące poza serwisami Grupy TAURON, dlatego stałymi elementami składowymi bannerów są: a c Logo - umieszczając logo na bannerze należy pamiętać o polu ochronnym [c] oraz minimalnej wielkości logo [d]. Najczęściej logo umiejscowione jest w lewym górnym rogu [a], ale w zależności od projektu i formatu może być również umiejscowione w lewym dolnym rogu [b] 3a 3b Przyciski - wszystkie elementy zawierają call to action [2a], [2b]. Dopuszczalne typy przycisków zostały zdefiniowane w rozdziale Elementy podstawowe: Przyciski. W przypadku bannerów reklamowych rekomendowany kolor przycisków to T. 2a b d 2b Motyw przewodni kampanii reklamowej (hasło + grafika) - możemy wyodrębnić dwa charakterystyczne typy: - Hasło uzupełnione motywem graficznymi prezentowanym na białym tle [3a]. - Pełne zdjęcie + hasło [3b].

61 TAURON Polska Energia / Web Manual v../ s. 6 Bannery reklamowe 9. Podstawowe zasady Dokument dopuszcza różne zabiegi stylistyczne dotyczące projektów, pod warunkiem zachowania następujących zasad 4a Barwy użyte w stylistyce powinny odzwierciedlać paletę barw TAURON (T, D, C) []. Margines wewnętrzny bannera wynosi 0px [2] Do haseł reklamowych stosujemy font Frutiger Bold [3] lub w uzasadnionych przypadkach Frutiger Regular. Dla jednej kampanii stosujemy spójność kolorystyczną oraz kompozycyjną [4a], [4b], [4c], [4d]. 3 4b 4d 4c 2 0

62 TAURON Polska Energia / Web Manual v.. / s. 62 Aneks Wytyczne graficzne dla Intranetu i aplikacji wewnętrznych Uwaga: wytyczne graficzne stosowane do Intranetu nie mogą być stosowane do pozostałych serwisów Grupy TAURON.

63 TAURON Polska Energia / Web Manual v../ s. 63 Spis treści. Wprowadzenie 62. Cel i charakter dokumentu 63.2 Informacje techniczne Kolory i typografia Definicje podstawowych kolorów Wagi kolorów Kroje pisma i ich zastosowanie Elementy podstawowe Nawigacja i 2 poziomu Nawigacja boczna - 3 poziomu Nawigacja boczna - 4 poziomu Zakładki i akordeon Zakładki - kontekst użycia Menu kontekstowe Przyciski Odnośniki Zastosowanie typografii Przykładowe zastosowanie typografii Elementy złożone Elementy składowe strony Top Top - elementy opcjonalne Stopka Elementy formularza Formularze - przykładowy układ Formularze - przykładowy układ Wyszukiwarka Filtry Listy SharePoint Tabele Słownik Komunikaty Komunikaty - kontekst użycia Komunikat na popup ie Ikony Notowania giełdowe i znacznik na mapie Organigram Organigram Rotator ze zdjęciami pracowników Pracownik w organizacji Pytania i odpowiedzi Fotografie Teasery na stronie głównej Galeria zdjęć Galeria video Mapa serwisu Siatka modułowa (grid) Definicja siatki Przykłady layoutów Przykłady layoutów Przykłady layoutów Przykłady layoutów Siatka strony głównej Siatka strony głównej 5

64 . Wprowadzenie TAURON Polska Energia / Web Manual v.. / s. 64

65 TAURON Polska Energia / Web Manual v../ s. 65. Cel i charakter dokumentu Celem dokumentu jest zdefiniowanie elementów graficznych Intranetu Grupy TAURON oraz aplikacji wewnętrznych dla pracowników Grupy TAURON. Dokument opisuje szczegółowy sposób prezentacji treści / informacji w Intranecie. Nadrzędną funkcją dokumentu jest uzyskanie spójności wszystkich komponentów Intranetu i aplikacji wewnętrznych w celu zapewnienia pożądanego odbioru marki TAURON. Wytyczne powinny być stosowane podczas projektowania, programowania i aktualizacji cyfrowych mediów dla pracowników Grupy TAURON. Kontakt: Biuro Usług Internetowych i Intranetowych TOK Tel: redakcja.tauronet@tauron-pe.pl

66 TAURON Polska Energia / Web Manual v.. / s Informacje techniczne Wszystkie elementy opisywane w tym dokumencie zostały również dostarczone w plikach w formacie psd, w rozdzielczości 72 dpi, skąd można pobrać elementy w ich oryginalnym wyglądzie i rozmiarze. Częścią tej dokumentacji są również charakterystyczne typy stron zaprojektowanych dla Intranetu dla Grupy TAURON w plikach PSD. Na potrzeby opisu niektóre elementy w tym podręczniku zostały zwiększone lub zmniejszone - obowiązującą miarą są piksele podane w wymiarowaniu. ABCdefg HIJKLmnop legenda do oznaczeń graficznych: x stan po najechaniu myszką hover stan po kliknięciu mouse click Dla potrzeb tego dokumentu użyto koloru niebieskiego, niewystępującego w palecie barw serwisu. Jest on stosowany do wyróżnienia i opisania poszczególnych detali. Odniesienia do poszczególnych elementów prezentowanych po prawej są oznaczane w dokumencie za pomocą nawiasów kwadratowych []. linia oznaczająca grid wymiarowanie linia wskazująca opisany element numerowanie elementów Informacja o zastosowanej typografii zapisywana jest w następujący sposób: najpierw podajemy rodzinę i typ fontu, następnie wielkość fontu w px, a po ukośniku wysokość interlinii w px [2]. 2 Arial Regular 3px/8 Lorem ipsum dolor sit amet, consectetur adipisicing elit interlinia 8px

67 2. Kolory i typografia TAURON Polska Energia / Web Manual v../ s. 67

68 TAURON Polska Energia / Web Manual v.. / s. 68 Kolory i typografia 2. Definicje podstawowych kolorów W Intranecie i dla potrzeb aplikacji wewnętrznych wykorzystano podstawowe [] i dodatkowe [2,3] kolory TAURON zdefiniowane w Systemie Identyfikacji Wizualnej marki TAURON. Wszystkim kolorom nadano odpowiednie kody, aby precyzyjniej określać barwę elementów. T RGB: 226/0/22 #e2007a T2 RGB: 2/3/5 #70773 Dodatkowym kolorem wyróżniającym Intranet i aplikacje wewnętrzne dla pracowników Grupy TAURON od reszty serwisów jest kolor granatowy B, użyty dla oznaczenia elementów interaktywnych oraz elementów charakterystycznych takich jak górna belka menu. 2 B RGB: 0/46/95 #002e5f Podstawowe kolory brandu TAURON [] uzupełnione są o dodatkowe kolory marki, które mogą być użyte do wyróżnienia niektórych elementów w serwisie (np. wykresy) [3]. 3 D RGB: 237/83/0 D2 D3 D4 RGB: 0/65/8 RGB: 6/94/85 RGB: 73/0/64 Kolory elementów interfejsu używane do #edb700 #0045 #05e55 #ad0040 tekstów, linii, wyróżnień to różne odcienie szarości [4]. 4 C C2 C3 C4 RGB: 39/39/39 RGB: 76/76/76 RGB: 9/9/9 RGB: 230/230/230 # #4c4c4c #bfbfbf #e6e6e6

69 TAURON Polska Energia / Web Manual v../ s. 69 Kolory i typografia 2.2 Wagi kolorów Ze względu na intensywną barwę podstawowego koloru - magenty, w Intranecie i aplikacjach wewnętrznych dla pracowników Grupy TAURON, została ona użyta tylko do niewielkich elementów interaktywnych oraz do stanu hover - po najechaniu myszką na element interaktywny. Natomiast kolorem wiodącym jest kolor granatowy (B). Stosowanie barw dodatkowych należy ograniczyć do elementów interaktywnych bądź infografik.

70 TAURON Polska Energia / Web Manual v.. / s. 70 Kolory i typografia 2.3 Kroje pisma i ich zastosowanie Podstawowym fontem systemowym używanym w projektach jest Arial w dwóch odmianach []. Font ten powinien być używany w większości elementów serwisu z wyłączeniem nagłówków i nawigacji. Frutiger [2] jest podstawowym fontem brandowym, jednak z uwagi na aspekty technologiczne, powinien być używany przede wszystkim w nawigacji (odmiana Roman) oraz nagłówkach i tytułach (odmiana Bold). Dla uspójnienia systemu typograficznego przyjęto następujące miary tekstów: Niski stopień tekstu - Opis zdjęcia/przypis tabeli : px, Tekst standardowy - Standardowy i Tabele : 3px, Cytowanie wypowiedzi - Wypowiedzi : 3px Italic, Wyższy stopień tekstu - Wstęp artykułu : 5px, Nagłówek 4 stopnia - Śródtytuł 3. poziomu H4: 4px, Nagłówek 3 stopnia - Śródtytuł 2. poziomu H3: 6px, Nagłówek 2 stopnia - Śródtytuł. poziomu H2: 2px, Nagłówek stopnia - Tytuł H: 29px, 2 Arial Normal/Regular abcdefghijklmnopqrstuvwxyząężźćńó ABCDEFGHIJKLMNOPQRSTUVWXYZ Arial Bold abcdefghijklmnopqrstuvwxyząężźćńó ABCDEFGHIJKLMNOPQRSTUVWXYZ Arial Italic abcdefghijklmnopqrstuvwxyząężźćńó ABCDEFGHIJKLMNOPQRSTUVWXYZ Frutiger Roman abcdefghijklmnopqrstuvwxyząężźćńó ABCDEFGHIJKLMNOPQRSTUVWXYZ Frutiger Bold abcdefghijklmnopqrstuvwxyząężźćńó ABCDEFGHIJKLMNOPQRSTUVWXYZ

71 3. Elementy podstawowe TAURON Polska Energia / Web Manual v../ s. 7

72 TAURON Polska Energia / Web Manual v.. / s. 72 Elementy podstawowe 3. Nawigacja i 2 poziomu Nawigacja główna [] jest w kolorze identyfikującym Intranet i aplikacje wewnętrzne dla pracowników Grupy TAURON. Elementy nawigacji są w kolorze #fff Typografia: Arial Regular 5px, natomiast element zaznaczony okala prostokąt w kolorze # f5f5f5 z efektem inner shadow, Typografia: Arial Regular 5px, kolor C2 [a]. Nawigacja drugiego poziomu [2] zbudowana jest z zakładek w kolorze C4 i typografii w kolorze C2[2a]. Dla menu drugiego poziomu może zostać rozwinięta lista rozwijana [2b] - kolor po rozwinięciu B. Element wybrany jest w kolorze T2, Typografia: Arial Regular 4px #fff [2c]. W przypadku dużej ilości zakładek tekst może układać się w dwóch wierszach [2d] kolor B Arial Regular 5px #fff 2b Arial Regular 5px 30 kolor C 5 a Arial Regular 4px/8 kolor C2 Arial Regular 4px/8 5 #fff 7 2a 2c 2d kolor C4 kolor T2 layer style/inner shadow: - blend mode: multiply - opacity: 7% - angle: 90 - distence: 3 - size: Arial Regular 3px/28 kolor C2 3

73 TAURON Polska Energia / Web Manual v../ s. 73 Elementy podstawowe 3.2 Nawigacja boczna - 3 poziomu Nawigacja boczna [] wykorzystywana jest do nawigacji trzeciego poziomu i zmienia się w zależności od wybranej zakładki w nawigacji poziomej. 2 Nawigacja boczna wyróżniona jest szarą aplą, której minimalna wysokość wynosi 200px. W przypadku braku nawigacji bocznej lewa kolumna pozostaje wolna. Elementy cienia [2]: Cień w lewej kolumnie dostosowany jest do wysokości treści strony (w środkowej kolumnie), Cień w prawej kolumnie stosowany jest do wyróżnienia zawartości prawej kolumny i jest dostosowany do jej wysokości. Jego minimalna wartość wynosi 85px Nagłówek menu Frutiger Bold 6px kolor C2

74 TAURON Polska Energia / Web Manual v.. / s. 74 Elementy podstawowe 3.2. Nawigacja boczna - 4 poziomu Kliknięcie w element nawigacji 3 poziomu [] zawierający podmenu 4 poziomu powoduje: b 2 Rozwinięcie się lista z nawigacją 4 poziomu[a]. Arial Regular 3px/25, kolor C2, a 2a Zaznaczenie klikniętego elementu z listy [b], Arial Bold 3 px, kolor C, Przeniesienie użytkownika na wybraną podstronę. Kliknięcie w element nawigacji 4 poziomu powoduje: Zaznaczenie wybranego elementu [2a]: ikona strzałki - kolor T, Arial Bold 3px, kolor T, Przeniesienie użytkownika na wybraną podstronę ną podstronnę.

75 TAURON Polska Energia / Web Manual v../ s. 75 Elementy podstawowe 3.3 Zakładki i akordeon W treści strony mogą zostać zastosowane zakładki kontekstowe []: Element wybrany w kolorze C2, Elementy niewybrane w kolorze B. Arial Regular All Caps px kolor C Arial Regular All Caps px kolor B Akordeon [2] jest elementem pozwalającym w sposób logiczny grupować informacje. Może być wykorzystywany również w sytuacji dużej ilości informacji, które chcemy zaprezentować na jednej podstronie. W przypadku złożonej nawigacji mogą być zastosowane zakładki ponad 2 5 Arial Regular 5px kolor C b 2a 2c 20 akordeonem [2a], Element akordeonu rozwinięty [2b], Zakładki wewnątrz akordeonu - element opcjonalny stosowany 2d w szczególnych przypadkach - posiada dwa typy nawigacji z widoczną 20 zawartością rozwiniętego elementu akordeonu: interaktywne elementy tekstowe [2c] oraz dodatkowe strzałki boczne przewijające zawartość akordeonu [2d], 49 Zwinięty element akordeonu [2e]. Arial Regular 5px kolor B e 2

76 TAURON Polska Energia / Web Manual v.. / s. 76 Elementy podstawowe 3.3. Zakładki - kontekst użycia Przykładowe zastosowania zakładek w kontekście strony [], [2]. 2

77 TAURON Polska Energia / Web Manual v../ s. 77 Elementy podstawowe 3.4 Menu kontekstowe W Intranecie i aplikacjach wewnętrznych dla pracowników Grupy TAURON stosowana jest ikona wywołująca dodatkowe akcje na elemencie. W zależności od elementu może to być rozwijane menu lub okienko na warstwie z dodatkowymi informacjami: Po najechaniu na ikonę zmienia ona ikona w stanie hover #a tło - C4 stroke - px C3 Arial Regural px C2 kolor i pojawia sie dymek z informacją o dodatkowych opcjach []. 2 Po kliknięciu pojawia się: Rozwijane menu [2], 28 Element z dodatkowymi funkcjami i informacjami [3]. ikona w stanie click kolor C kolor B 3

78 TAURON Polska Energia / Web Manual v.. / s. 78 Elementy podstawowe 3.5 Przyciski W Intranecie i aplikacjach wewnętrznych dla pracowników Grupy TAURON zastosowano 3 rodzaje przycisków: P jako przycisk akcji głównej występujący tylko w kolorze B. Typografia: Arial Bold 7px, P2 do akcji drugorzędnych w serwisie w kolorach B i D4. Typografia: Arial Bold 5px, P3 do akcji pomocniczych w kolorach B i D4. Typografia: Arial Bold 3px. 40 P P2 P3 20 a b Opcjonalnie każdy z przycisków może przedłużać się w formę strzałki [a],[b] pełniącej funkcję wskazówki przejścia dalej/wstecz. Grot może kierować w lewą lub prawą stronę. Budowę przycisków oparto o gradienty przenikające się w 50% odległości pionowej [2a], [2b] oraz dwupikselowe obramowanie. Po najechaniu przyciski zmieniają tło i styl gradientu [2c], [2d]. 2a 2c 5% opacity #FFFFFF B 2b #ffffff #4c4c4c #00254c #d6d6d6 5% opacity # #FFFFFF #00366f #4c4c4c 2d #ffffff #00254c # #d6d6d6

79 TAURON Polska Energia / Web Manual v../ s. 79 Elementy podstawowe 3.6 Odnośniki W Intranecie i aplikacjach wewnętrznych dla pracowników Grupy TAURON elementy klikalne (inaczej odnośniki) zmieniają swój wygląd po najechaniu na nie myszką (stan hover ). Informuje on użytkowników, że dany element jest interaktywny. Stan normalny [] Stan hover [2] Frutiger Bold 2px C2 Frutiger Bold 6px C2 Frutiger Bold 4px C2 a kolor B b Arial Regular 3px/25 C2 2 W przypadku nagłówków [a] wyróżnienie nagłówka klikalnego odbywa się poprzez dodanie strzałki w kolorze T przed nagłówkiem. d Samodzielne odnośniki można grupować [b] stosując stały stopień typografii (3px). Alternatywnie zamiast strzałki możliwe jest użycie ikony 6x6px w kolorze T [c]. c Odnośniki tekstowe [d] zostały wyróżnione kolorem B, a po najechaniu kursorem zostają podkreślone i zmieniają kolor na T. Ikona systemowa, kolor tekstu C2 samodzielna ikona w stanie hover #a93976

80 TAURON Polska Energia / Web Manual v.. / s. 80 Elementy podstawowe 3.7 Zastosowanie typografii Zastosowanie typografii: Niski stopień tekstu - Opis zdjęcia/przypis tabeli : Arial Regular px, Tekst standardowy - Standardowy i Tabele : Arial Regular 3px, Cytowanie wypowiedzi - Wypowiedzi : Arial Italic 3px, Wyższy stopień tekstu - Wstęp artykułu : Arial Regular 5px, Nagłówek 4 stopnia - Śródtytuł 3. poziomu H4: Frutiger Bold 4px, Nagłówek 3 stopnia - Śródtytuł 2. poziomu H3: Frutiger Bold 6px, Nagłówek 2 stopnia - Śródtytuł. poziomu H2: Frutiger Bold 2px, Nagłówek stopnia - Tytuł H: Frutiger Bold 29px, 29px 2px 6px 4px 5px px 3px Wypowiedzi: Arial Italic 3 px

81 TAURON Polska Energia / Web Manual v../ s. 8 Elementy podstawowe 3.8 Przykładowe zastosowanie typografii Każdy artykuł powinien rozpoczynać się od wprowadzenia [] Arial Normal 5px C2 z interlinią 8px. 35 Treść w serwisie [2] pisana jest Arialem Normal3px C2 z interlinią 8px W przypadku list wypunktowanych [3] lub numerowanych stosowana jest interlinia 20px. Podpisy pod tabelą [4] w kolorze C2 i typografia Arial Normal px o interlinii 3px Pod artykułem może pojawić się sekcja z linkami [5] do powiązanych artykułów z interlinią 25px. Treść może być wyróżniona przez wyboldowanie Arial Bold [6]

82 4. Elementy złożone TAURON Polska Energia / Web Manual v.. / s. 82

83 TAURON Polska Energia / Web Manual v../ s. 83 Elementy złożone 4. Elementy składowe strony Na każdej podstronie możemy wyróżnić trzy podstawowe obszary: Nawigacja główna Top [], Kontent [2], Nawigacja drugiego poziomu 2 Top Stopkę [3]. Nawigacja boczna Kontent 3 Stopka

84 TAURON Polska Energia / Web Manual v.. / s. 84 Elementy złożone 4.2 Top Top Intranetu Grupy TAURON zawiera: Logotyp TAURON Polska Energia [], Wyszukiwarkę [2], Odnośnik do książki adresowej [3], Elementy dotyczące ustawień konta [4], Nawigację główną [5], Ścieżkę dostępu [6], Arial Regular px, kolor wybranego elementu: T2, kolor linku: C Nawigację drugiego poziomu [7] ikona 32x32px

85 TAURON Polska Energia / Web Manual v../ s. 85 Elementy złożone 4.3 Top - elementy opcjonalne Opcjonalnie dla osób upoważnionych może pojawić się element umożliwiający zmianę kontekstu przeglądanej zawartości Intranetu []. Narzędziownik (wstążka) - pojawia się z zależności od wykonanej akcji ponad topem [2]. Kontekst przeglądania zawartości Intranetu 340 kolor C3 kolor C zakładka wybrana belka górna i tekst: kolor B belka górna niewybranej zakładki oraz linie podziału: kolor C3 26

86 TAURON Polska Energia / Web Manual v.. / s. 86 Elementy złożone 4.4 Stopka Stopka jest elementem stałym i występuje na każdej podstronie. Zawiera następujące elementy: Dane spółki, w której jest zatrudniony użytkownik Intranetu [], Najważniejsze telefony [2], 0 Szybkie linki do materiałów pracownika [3], 7 Odnośnik do struktury organizacji [4], 8 53 Odnośnik do Polityki dla Intranetu [5], Przyciski umożliwiające wysłanie zgłoszenia dotyczącego Intranetu [6], x = 275 x = 275 y = 43 /2x = Logotypy spółek Grupy Tauron - łącza do wizytówek spółek [7], Linki do polityki prywatności, mapy serwisu oraz serwisu korporacyjnego [8]. Rozłożenie elementów oparte jest na gridzie strony głównej.

87 TAURON Polska Energia / Web Manual v../ s. 87 Elementy złożone 4.5 Elementy formularza Formularze mogą się składać z następujących elementów podstawowych: Arial Regular 3px, kolor T2 Pole do wprowadzania tekstu [], Element jednokrotnego wyboru [2], Element wielokrotnego wyboru [3], Rozwijana nawigacja [4]. Ich wielkość i rozmieszczenie uwarunkowane są funkcją i gridem a 5b Elementami pomocniczymi odpowiedzialnymi za akcje dotyczące formularzy są ikony [5a], przyciski oraz linki z ikonami [5b] (ikona + tekst). 2 Arial Regular 3px, kolor C Arial Regular 3px, kolor T2 4 Arial Regular 3px, kolor C element niewybrany: Arial Regular 3px, # x6px, kolor T 455

88 TAURON Polska Energia / Web Manual v.. / s. 88 Elementy złożone 4.5. Formularze - przykładowy układ Elementy formularza podzielone są na sekcje. Do oznaczenia podziału służą poziome linie z cieniem [], tzw. separatory sekcji. 2 Nagłówek H2, kolor C2 Nagłówek H, kolor C2 Sekcje zaczynają się od nagłówków [2], [2a]. Nagłówek H3, kolor C2 Przycisk akcji [3] wyrównany jest do prawej strony szpalty, którą zajmuje formularz. Do akcji drugorzędnych [3a] (np. anuluj) możliwych na formularzu zastosowane są linki z magentowymi ikonami. 2a Nagłówek H3, kolor C2 Nagłówek H4, kolor C2 Nagłówek H4, kolor C2 455 Nagłówek H3, kolor C2 3a 3

89 TAURON Polska Energia / Web Manual v../ s. 89 Elementy złożone Formularze - przykładowy układ Elementy formularza ułożone są na gridzie zastosowanym na podstronach i wyrównane do lewej strony. Komunikaty błędów [] pojawiające się w trakcie walidacji formularza znajdują się w osobnej kolumnie (po prawej str. od formularza). Pola do wprowadzania tekstów pojawiają się w kilku rozmiarach dostosowanych do gridu i ich wielkość jest dobierana w zależności od ilości wpisywanych danych. 00 osobna kolumna na walidację, font: Arial Regular px kolor D

90 TAURON Polska Energia / Web Manual v.. / s. 90 Elementy złożone 4.6 Wyszukiwarka Element wyszukiwarki pojawia się w topie i na stronach wyników wyszukiwania

91 TAURON Polska Energia / Web Manual v../ s. 9 Elementy złożone 4.7 Filtry Filtry budowane są z elementów modułowych. Ilość elementów zależy od złożoności filtra. Ogólna zasada budowania filtrów opiera się na rozmieszczeniu poszczególnych elementów w następujący sposób: Filtr daty zajmuje całą przedostatnią kolumnę (licząc od lewej) [], Skrajna prawa kolumna zajęta jest przez przyciski akcji: pokaż i wyczyść wyrównane do prawej [2], Dodajemy elementy w kolejności od lewej do prawej kolumny, Kolejne rozwijane listy dodawane są w pierwszych dwóch kolumnach od lewej [3]. Filtry zbudowane są z rozwijanych list wyboru, pól do wprowadzania tekstu oraz przycisków akcji. Po kliknięciu w listę rozwija się menu z opcjami do wyboru [4]

92 TAURON Polska Energia / Web Manual v.. / s. 92 Elementy złożone 4.8 Listy SharePoint Nagłówek tabeli [] Frutiger Bold 6px C2 Ilość elementów [2] Arial Regular 3px C2 Elementy interaktywne: [3] Arial Regular px/3 B Elementy statyczne [4] Arial Regular px/3 C2 Opisy kolumn tabeli: [5] Arial Regular px/3 T2 Tryb hover - po najechaniu myszką Tryb wiersz wybrany - po kliknięciu 8 35

93 TAURON Polska Energia / Web Manual v../ s. 93 Elementy złożone 4.9 Tabele Tabele służą do organizacji dużej ilości informacji typu dane pracowników lub spółek. 6 2 W przypadku podstron dotyczących pracowników stosujemy nagłówek w rozmiarze H i zielną ikonę 6x6px [] wyróżniającą pracowników W Tabeli stosujemy następująca typografię: Opis wiersza - Arial Regular 3px/20; kolor T2 [2], Tryb hover - po najechaniu myszką Treść zwykła tabeli: Arial Regular 3px/20, kolor C2 [3], Treść podlinkowana w tabeli: Arial Regular 3px/20, kolor B [4], Linki pomocnicze: podkreślony Arial Regular px, kolor B [5]. Tryb wiersz wybrany - po kliknięciu Wiersze w tabeli oddzielają separatory z px lini przerywanej [6]

94 TAURON Polska Energia / Web Manual v.. / s. 94 Elementy złożone 4.0 Słownik Podstrona Słownik składa się z: Filtra[], Alfabetycznej nawigacji na zakładkach [2], Treści słownikowej umieszczonej w tabelce [3] ze stronicowaniem [3a], Przycisku akcji pozwalającego dodać nowe pojęcie do słownika [4] a

95 TAURON Polska Energia / Web Manual v../ s. 95 Elementy złożone 4. Komunikaty Komunikaty mogą być stosowane w górnej części strony - pod nawigacją poziomu i ścieżką dostępu. Budowa komunikatu: Komunikat prezentowany jest na kolorowej podlewce w kolorze D4 o 95% przeźroczystości z px obwódką w kolorze D4 [] Treść komunikatu - Arial Regular 3px/8 kolor D4 [2], Opcjonalnie mogą wystąpić linki - Arial Regular 3px kolor B [3], Komunikaty posiadają x umożliwiający zamknięcie komunikatu w kolorze T2 o wymiarach 0x0px [4].

96 TAURON Polska Energia / Web Manual v.. / s. 96 Elementy złożone 4.. Komunikaty - kontekst użycia Komunikaty mogą być stosowane na stronie głównej [] lub na wybranych podstronach [2] i wyświetlać się zdefiniowanej grupie docelowej. Wyłączenie komunikatu może nastąpić z inicjatywy użytkownika - x w prawym górnym rogu [3]. Po wyłączeniu komunikat znika i kontent serwisu wraca na swoje miejsce. Po ponownym otwarciu Intranetu, komunikat znów będzie widoczny, chyba że nastąpi wyłączenie komunikatu ze strony systemu. 2 3

97 TAURON Polska Energia / Web Manual v../ s. 97 Elementy złożone 4.2 Komunikat na popup ie Komunikat na warstwie (popup) pojawia się w sytuacji konieczności wykonania akcji przez użytkownika w celu finalizacji wcześniej podjętego działania. Zalecane jest stosowanie następujących elementów: Okno kolor #fff z px obwódką koloru C3 [], a 3 Tło kolor #000 opacity 80% [2], 5 X zamykający okno kolor T2 [3], 6b Tytuł komunikatu - kolor C2, nagłówek H [4], Nagłówek sekcji wyróżnionej - kolor C2, nagłówek H3 [5], Treść - kolor C2, Arial Regular 5px [6a], Arial Regular 3px [6b], Przycisk akcji P2 [7], Link anulujący akcję [8] tekst - kolor C2, Arial Regular 3px; ikona kolor T.

98 TAURON Polska Energia / Web Manual v.. / s. 98 Elementy złożone 4.3 Ikony W Intranecie i aplikacjach wewnętrznych dla pracowników Grupy TAURON ikony stosowane są jako elementy interaktywne. Stosowane są systemowe ikony plików oraz ikony zadaniowe np. edytuj dla których stosujemy color T. Ikony mogą występować samodzielnie lub w połączeniu z tekstem. Wyróżniamy następujące zastosowanie ikon: Arial Regular px, kolor C2 Samodzielne ikony (kolor T) [] - stosowane np. przy polach do wprowadzania tekstów w formularzach, Arial Regular 3px, kolor C2 Systemowe ikony plików + link (Arial Regular px, kolor C2) [2] - stosowane na listach lub do dodatkowych funkcji na stronie np. do eksportowania zawartości danej podstrony, Ikona (kolor T) + link (Arial Regular 3px, kolor C2) [3] - stosowane do drugorzędnych akcji na stronie np. do anulowania podjętej akcji, dodania kolejnego wiersza w formularzu, Arial Regular 3px/25, kolor C2 Ikona (kolor T) + lista linków (Arial 0 Regular 3px/25, kolor C2) [4] - stosowane do wyróżnienia listy linków np. listy dokumentów lub typowych akcji.

99 TAURON Polska Energia / Web Manual v../ s. 99 Elementy złożone 4.4 Notowania giełdowe i znacznik na mapie. Notowania giełdowe pojawiają się na stronie głównej Intranetu. Tekst wyrównany jest do lewej strony, natomiast link akcji do prawej i jest zbudowany zgodnie z typem [2] zastosowania ikon. Frutiger Bold 4px, kolor C3 Frutiger Bold 4px, kolor T2 Frutiger Bold 4px, kolor D3 2. W Intranecie i aplikacjach wewnętrznych dla pracowników Grupy TAURON zastosowane zostały spersonalizowane znaczniki na mapie - są one zgodne z systemem identyfikacji wizualnej , kolor T - efekt jak na przyciskach

100 TAURON Polska Energia / Web Manual v.. / s. 00 Elementy złożone 4.5 Organigram Nadrzędna komórka organizacyjna [] Wybrana komórka organizacyjna [2] Podlegające komórki organizacyjne [3] Arial Bold 2px, kolor fff Arial Bold 2px, kolor C Nagłówek H4, kolor C2 Link - Arial Regular px, kolor B

101 TAURON Polska Energia / Web Manual v../ s. 0 Elementy złożone 4.5. Organigram Komórki podlegające prezentowane są po 4 w rzędzie []. Poniżej organigramu znajduje się wykaz pracowików danej komórki [2]

102 TAURON Polska Energia / Web Manual v.. / s. 02 Elementy złożone 4.6 Rotator ze zdjęciami pracowników Element ten występuje pojedynczo lub sekwencyjnie. W obu przypadkach proporcje między elementami są zachowane i całość równana jest do lewej, różnica polega na dodatkowej przestrzeni na cień w przypadku pojedynczego elementu w prawej kolumnie Nagłówek H3, kolor C2. Zastosowanie elementu w prawej kolumnie [] Zastosowanie powielonego elementu w kontekście siatki podziału strony [2] Arial Bold 3px kolor B Arial Regular px kolor C

103 TAURON Polska Energia / Web Manual v../ s. 03 Elementy złożone 4.7 Pracownik w organizacji Element wybrany w strukturze - informacje szczegółowe [] Arial Bold 3px, kolor B Element wybrany w strukturze - kontekst użycia [2]. Arial Regular px, kolor C2 Arial Regular px, kolor B 28 Arial Regular 3px, kolor C2 Arial Regular px, kolor B

104 TAURON Polska Energia / Web Manual v.. / s. 04 Elementy złożone 4.8 Pytania i odpowiedzi Element Pytania i odpowiedzi został zaprojektowany tak, by wyróżnić pytanie od wątku odpowiedzi. 3 Obie sekcje podzielone są Separatorem Sekcji [], natomiast wątki odpowiedzi podzielone są Separatorem Podsekcji [2]. 3a 3b 3c Do elementu Pytanie [3] zastosowane zostały następujące style: Opis wierszy kolor T2, typografia: Arial Regular 3px, [3a], Treść pytania kolor C2, typografia: Arial Regular 3px; [3b], 4 4a Autor (element podlinkowany) kolor B, typografia: Arial Bold 3px. [3c]. Dla odpowiedzi ocenionych [4] są dwa stany ikon: Odpowiedź oceniona [4a], 4b 2 Odpowiedź oceniona przez użytkownika [4b]. W przypadku braku oceny ikona się nie wyświetla [4c]. 4c

105 TAURON Polska Energia / Web Manual v../ s. 05 Elementy złożone 4.9 Fotografie Nagłówek graficzny [] to element wyróżniający stronę tekstową. Przykład zastosowania fotografii w artykule na stronach tekstowych [2]. 695 Dymek [3] to element stosowany na stronach z komunikatami typu błąd 404/ odmowa dostępu. Wielkość elementu dostosowana jest do szerokości kolumny (25px) ,

106 TAURON Polska Energia / Web Manual v.. / s. 06 Elementy złożone 4.20 Teasery na stronie głównej Przykłady teaserów na stronie głównej. 574 px px

107 TAURON Polska Energia / Web Manual v../ s. 07 Elementy złożone 4.2 Galeria zdjęć Galeria zdjęć składa się z następujących elementów: a 93 Slajdera z miniaturami [] z zaznaczonym wybranym zdjęciem [a], Wybranego zdjęcia wyświetlonego w dużym formacie [2] Frutiger Bold 4px - C2 695 px 39

108 TAURON Polska Energia / Web Manual v.. / s. 08 Elementy złożone 4.22 Galeria video Galeria video składa się z dwóch elementów: Odtwarzacza (playera) [], Przewijanej listy z zajawkami innych filmów [2] , px

109 TAURON Polska Energia / Web Manual v../ s. 09 Elementy złożone 4.23 Mapa serwisu Podstrona mapa serwisu pokazuje strukturę Intranetu do drugiego poziomu nawigacji, poszczególne listy są podlinkowane do konkretnych podstron. Ułożone są w 4 kolumnach zgodnych z gridem. Frutiger Bold 9px - T 22 Arial Regular 3px - C2 Arial Regular 5px - T Frutiger Bold 6px - C2 23 Nagłówek H- C

110 5. Siatka modułowa (grid) TAURON Polska Energia / Web Manual v.. / s. 0

111 TAURON Polska Energia / Web Manual v../ s. Grid 5. Definicja siatki Grid to siatka nałożona na przestrzeń projektową. Projektowanie w oparciu o grid polega na rozmieszczaniu elementów oraz doborze ich wielkości w taki sposób, aby zaczynały się i kończyły na liniach siatki. Siatka została oparta na stałej szerokości 75 px Ponieważ projekt wyświetlany jest w przeglądarce internetowej, definicja siatki nie uwzględnia wysokości modułów, a jedynie ich poziomy podział, czyli szerokość stosowanych kolumn i marginesów. a Najmniejszym modułem jest 25px [] i jest to bazowy podział strony. Możliwe jest łączenie modułów w ramach jednej strony Lewa kolumna zarezerwowana jest dla bocznego menu, jedyny wyjątek stanowi strona startowa (zobacz roz. 5.3)

112 TAURON Polska Energia / Web Manual v.. / s. 2 Grid 5.2. Przykłady layoutów Przykład podziału podstrony na bazie siatki modułowej. Zastosowanie szerokiej kolumny głównej na przykładzie podstrony z artykułem

113 TAURON Polska Energia / Web Manual v../ s. 3 Grid Przykłady layoutów Zastosowanie podziału treści strony na dwie główne kolumny na przykładzie podstrony Źródła branżowe

114 TAURON Polska Energia / Web Manual v.. / s. 4 Grid Przykłady layoutów Przykład podziału głównej treści strony na jedną główną kolumnę i dwie kolumny dodatkowe, stosowany w przypadku dużej różnorodności informacji

115 TAURON Polska Energia / Web Manual v../ s. 5 Grid Przykłady layoutów Przykład podziału podstrony na bazie siatki modułowej. Zastosowanie szerokiej kolumny głównej z wydzielonymi sekcjami poziomymi

116 TAURON Polska Energia / Web Manual v.. / s. 6 Grid 5.3 Siatka strony głównej Siatka strony głównej została oparta na stałej szerokości 75 px Ponieważ na stronie głównej pojawia się wyłącznie nawigacja pierwszego poziomu, został zastosowany podział na cztery kolumny. Pozwala to na optymalne wykorzystanie przestrzeni i czytelniejsze przedstawienie zróżnicowanej treści, charakterystycznej dla strony głównej Najmniejszym modułem jest 275px [] i jest to bazowy podział strony głównej. W ramach strony głównej również zostało zastosowane łączenie modułów

117 TAURON Polska Energia / Web Manual v../ s. 7 Grid 5.3. Siatka strony głównej Strona główna z zaznaczonym podziałem na moduły []