Księga Identyfikacji Wizualnej Kompleksowego Systemu Internetowego PARP

Transkrypt

1 Księga Identyfikacji Wizualnej Kompleksowego Systemu Internetowego PARP Warszawa, 2012

2 Spis treści 1. Architektura informacji Architektura informacji systemu Serwis główny PARP Siatka 1200px Budowa głównego serwisu PARP Pasek nawigacji globalnej Pasek nawigacji bocznej Ścieżka powrotu Stopka Typografia podstawowa Typografia uzupełniająca Kolorystyka Kolory uzupełniające Nagłówki Nagłówek Nagłówek Wypunktowanie Hiperłącza Typografia na banerze Przyciski Ikony Ikony rozszerzeń plików Zakładki Formularze Tabele, zestawienia Newsletter Newslettery portali skojarzonych Przykładowe podstrony PARP Widok strony o zwiększonym kontraście Wersja mobilna Responsive Web Design Wersja mobilna strony Portale skojarzone Kolorystyka portali skojarzonych Budowa serwisów skojarzonych Portale społecznościowe Portale społecznościowe Załączniki Załączniki

3 Księga Systemu Identyfikacji Wizualnej opisuje szczegółowo budowę serwisu, jego bloków, typografię, kolorystykę oraz charakterystyczne elementy, które w nim występują. Oprócz dokładnego opisu samego głównego serwisu PARP Księga opisuje zasadę tworzenia layoutów dla portali skojarzonych. W kolejnych rozdziałach zostały przedstawione widoki mobilne Serwisu oraz projekty portali społecznościowych. 3

4 4

5 1. Architektura informacji 5

6 Architektura informacji systemu System internetowy PARP oferuje kompleksowe wsparcie dla Małych i Średnich Przedsiębiorstw. Z racji mnogości informacji została stworzona taka architektura informacji, dzięki której użytkownik będzie mógł w łatwy i przejrzysty sposób dotrzeć do poszukiwanej treści. System został podzielony na cztery główne sekcje tematyczne: Finansowanie Szkolenia Publikacje Kooperacja Każda z tych stron stanowi pewnego rodzaju landing page (strona docelowa, tj. pierwsza strona, na którą trafia odwiedzający), która jest w stanie pokierować użytkownika do informacji z danej kategorii tematycznej. Cztery kategorie zostały umieszczone na głównym pasku nawigacji globalnej, który występuje w nagłówku wszystkich portali należących do PARP. Istotną pozycją w architekturze jest zakładka Wszystkie portale, dzięki której jesteśmy w stanie w szybki sposób dostać się do każdego z serwisów PARP. 6

7 1. Architektura informacji Szkolenia Zarz dzanie strategiczne index/1999 Baza nowe podej cie Zarz dzanie wiekiem index/2001 Akademia E-biznesu 19_1996.html Punkty konsultacyjne KSU opieka_nad_klientem_oraz_doradztwo Telepraca index/2002 Zarz dzanie zasobami ludzkimi index/2000 Inwestycja w kadry Marketing i sprzeda index/2006 Biznes dla edukacji Doradztwo Krajowej Sieci Innowacji porady_innowacyjne?first=y Umiej tno ci mened erskie i osobiste index/2007 Zarz dzanie rodowiskiem index/1998 Akademia PARP - E-learning praca z sektorem publicznym index/2003 Krajowy System Us ug CIP - Konkurencyjno i Innowacja Tworzenie szkole e- learningowych index/2008 Dla urz marsza kowskich i COIE index/2087 CIP - krajowe punkty kontaktowe 3.html index/1972 E-punkt Instytut Szybkiego Reagowania Finansowanie POIG PORPW Bon na innowacje index/1415 Po yczki i por czenia index/1416 POKL Szwajcarsko-Polski Program pracy Granty index/1762 Technologie kosmiczne Publikacje Tematyka Rodzaj _1228_e-booki.html Wydawca Kooperacja Mi dzynarodowa Krajowa Regionalna z PARP EEN Enterprice Europe Network wyszukiwanie-ofert.html Partnerstwo Publiczno Prywatne (Seminaria) page_id=40 Baza firm B2B praca regionalna KSU wspolpraca_regionalna?first=y Przetargi PARP (bip) Go China Baza us ug Nowe Podej cie s,baza_uslug,14.html Baza zapyta ofertowych Punkty konsultacyjne KSU opieka_nad_klientem_oraz_doradztwo Regionalne instytucje finansuj ce Baza firm dla indywidualnych rodki Krajowej Sieci Innowacji porady_innowacyjne Wszystkie portale Strony wszystkich portali PARP 7

8 8

9 2. Serwis główny PARP 9

10 Siatka 1200px Serwis w wersji podstawowej dostosowany jest do rozdzielczości 1200px. Układ rozplanowany jest na siatce piętnastu kolumn. Na stronie głównej pierwsze trzy kolumny są zarezerwowane na menu boczne. W pozostałych znajduje się główna treść serwisu. Rozwinięte menu (drugiego poziomu) przysłania stronę w tle na szerokości odpowiadającej 3 kolumnom siatki. Siatka jest dostosowana do płynnego skalowania się serwisu tzw. Responsive Web Design, o którym będzie mowa w dalszej części Księgi Systemu Identyfikacji Wizualnej. 10px 60px 20px 15 kolumn 10

11 2. Serwis główny PARP 11

12 Budowa głównego serwisu PARP Serwis główny podzielony jest na cztery podstawowe segmenty: pasek nawigacji globalnej, pasek nawigacji bocznej, kontener na treść, stopkę. Są to stałe elementy występujące również na wszystkich podstronach serwisu oraz na stronach portali skojarzonych. Dokładna budowa tych portali nieco odbiegająca od prezentowanego tutaj schematu, została opisana w dalszym rozdziale. Pasek nawigacji oraz stopka są stałymi elementami, które w sposób niezmienny prezentują się na stronie głównej serwisu oraz podstronach. Te elementy zostały dokładniej opisane poniżej. Zawartość kontenera na treść generuje się dynamicznie w zależności od rodzaju podstrony, na której się znajdujemy. Wszystkie strony Systemu Internetowego PARP wyrównywane są do lewej krawędzi. 12

13 2. Serwis główny PARP Nawigacja globalna Kontener treści Nawigacja boczna Stopka 13

14 Pasek nawigacji globalnej Pasek nawigacji globalnej jest stałym elementem, który pojawia się na każdej ze stron Kompleksowego Systemu Internetowego PARP. Niezależnie od miejsca występowania nie zmienia on swojego wyglądu, a jedynie wysokość, która dla serwisu głównego PARP wynosi 90px, a dla serwisów skojarzonych 57px. Pasek składa się z następujących elementów: logotypu PARP, głównych punktów startowych, przycisków funkcjonalnych. Na pasku nawigacji znajduje się także przełącznik pomiędzy portalami skojarzonymi. Po jego wybraniu rozwija się lista wszystkich skojarzonych serwisów, podzielonych na trzy kategorie główne: Portale tematyczne, Portale poświęcone dotacjom, Portale projektowe i inicjatywy. Kliknięcie w wybrany skutkuje przeniesieniem na stronę. Logotyp utrzymany jest w standardowej kolorystyce i po kliknięciu przenosi on użytkownika na stronę główną głównego serwisu PARP. Podstrony serwisu umieszczone na pasku są elementami aktywnymi, tj. po wybraniu (kliknięciu) wybranej pozycji menu zmienia ona swój wygląd (nad nią pojawia się pasek, a sam tekst staje się pogrubiony). Po najechaniu na wybraną pozycję pojawia się nad nią pasek (stan hover ). Jednocześnie wybrana uprzednio pozycja pozostaje bez zmian (zachowuje pogrubienie oraz pasek). Przyciski funkcjonalne to ikonka BIP (Biura Informacji Publicznej), ikonka odpowiedzialna za przełączanie między wersjami językowymi strony oraz zmianę kontrastu. Dodatkowo na pasku jest także wyszukiwarka, która pozwala przeszukiwać daną stronę lub wszystkie portale PARP. Po kliknięciu w ikonę wyszukiwarki rozwija się panel wyszukiwania (aby przeszukiwać wszystkie strony należy zaznaczyć odpowiednią opcję poniżej paska wyszukiwarki). 14

15 2. Serwis główny PARP Pasek nawigacji globalnej Logo PARP Aktywna pozycja menu (pojawia się pasek, pogrubienie tekstu) Biuletyn Informacji Publicznej Wersja angielska strony Panel wyszukiwania Stan hover (pojawia się pasek, aktywna pozycja menu nie ulega zmianie) Zwiększenie kontrastu Przełącznik pomiędzy portalami skojarzonymi Pole wyszukiwania w widoku hover Po kliknięciu w ikonę wyszukiwarki rozwija się panel wyszukiwania Lista portali skojarzonych w widoku hover Po kliknięciu w ikonę rozwija się panel dostępu do wszystkich skojarzonych portali, kolor tła: #F8F9FA kolor ramki: #E5E5E5 15

16 Pasek nawigacji bocznej Boczna nawigacja ma formę pionowego prostokąta i utrzymana jest w kolorystyce PARP. Składa się ona z aktywnej listy podstron, miejsca na opcjonalną reklamę o wielkości 200x200px, która może pojawić się na wybranych podstronach oraz ikon logotypów odpowiadających wybranym serwisom społecznościowym, do których bezpośrednio prowadzą (Facebook, YouTube, Google+). Menu pierwszego poziomu (zwinięte) rozwija się na kolejne podmenu po najechaniu myszką na wybrany element. Obok pojawia się druga kolumna (odrębna kolorystycznie), która także może wygenerować menu trzeciego poziomu w wybranych sekcjach. Każdy poziom menu wyróżnia się kolorystycznie. Zasada dobierania kolorów menu bocznego głównego serwisu PARP oraz serwisów skojarzonych jest następująca. Kolor paska nawigacji pierwszego poziomu odpowiada pierwszemu kolorowi z belki oddzielającej nagłówek od treści. Kolory pasków nawigacji drugiego i trzeciego poziomu są coraz jaśniejszymi odcieniami koloru pierwszego (bazowego). Wyjątkiem mogą być portale, których logo składa się z szerszej gamy kolorystycznej niż ta zawarta w belce pod nagłówkiem. Wtedy jeden z kolorów logo (niekoniecznie występujący w belce) może zostać użyty jako kolor bazowy do tworzenia paska nawigacji bocznej. Taka sytuacja ma miejsce np. w portalu web.gov.pl. 16

17 2. Serwis główny PARP Pasek nawigacji bocznej, menu pierwszego poziomu (zwinięte) Kolor tła: #002b5c Menu drugiego poziomu (rozwijane po najechaniu myszką) Kolor tła: #4D6A8D Menu trzeciego poziomu (rozwijane po najechaniu myszką) Kolor tła: #8397AF Wygląd elementu - hover (po najechaniu myszką) Wygląd elementu aktywnej ścieżki (wskazuje aktualnie otwarty element z menu) Kolor tła: #A0B3CA Przekierowanie na portalu PARP w serwisie społecznościowym Reklama 200x200px pojawia się opcjonalnie na wybranych podstronach 17

18 Ścieżka powrotu Ścieżka powrotu konstruowana jest standardowo jak dla serwisów internetowych. Dodatkowo każdy element ścieżki (prócz nadrzędnego - strony głównej oraz np. artykułu niepowiązanego bezpośrednio z elementem menu) mający swój odpowiednik w nawigacji bocznej wyposażony jest w przycisk nawigacji ścieżki powrotu, umożliwiający rozwinięcie menu nawigacyjnego ścieżki powrotu. W menu nawigacyjnym ścieżki powrotu znajdują się linki odpowiadające tym sam pozycjom w danym poziomie nawigacji bocznej. 18

19 2. Serwis główny PARP Link w widoku hover Font: Droid Sans Regular podkreślony Kolor: #DA5F0E Aktywna pozycja Przycisk nawigacji ścieżki powrotu Strzałka: Kolor #002B5C Grubość: 1px Obrys: Kolor #A3AECA Grubość: 1px 13 px 13 px 19

20 Stopka Stopka składa się z dwóch części: spisu wszystkich skojarzonych portali PARP oraz danych kontaktowych. Lista portali podzielona jest na trzy bloki: Programy operacyjne Portale tematyczne Strony programów Każda nazwa strony jest linkiem prowadzącym do odpowiedniego portalu. Logotyp PARP oraz dane kontaktowe to element stały i wspólny dla wszystkich stron systemu PARP. W tej sekcji znajduje się także link do Centrum prasowego oraz Infolinii. 20

21 2. Serwis główny PARP Kolor tła stopki: #F8F9FA Przekierowania do wszystkich skojarzonych portali PARP Dane kontaktowe. Element ten jest wspólny dla wszystkich stron systemu PARP 21

22 Typografia podstawowa Podstawowym krojem pisma używanym w serwisie głównym oraz w portalach tematycznych jest Droid Sans. Występuje on na stronach w odmianie Regular oraz Bold. Przy tworzeniu przekazu należy dbać o jego czytelność. Hasła i tytuły powinny być pisane zdecydowanie większym fontem niż pozostałe bloki tekstowe. Wszelkie treści w nagłówkach oraz blokach tekstowych wyrównywane są do lewej strony (bez justowania). Wyjątkiem są przyciski, w których tekst jest wyśrodkowany. Paragrafy nie rozpoczynają się wcięciem, w całości wyrównywane są do lewej strony. Dla utrzymania przejrzystego układu treści stosowane są natomiast jednowierszowe odstępy pomiędzy paragrafami. Typografia uzupełniająca Fontem dodatkowym, wykorzystywanym w polach formularzy oraz wyszukiwania, jest Arial Regular. 22

23 2. Serwis główny PARP Droid Sans Regular AĄBCĆDEĘFGHIJKLŁMNŃOÓPQRSŚTUVWXYZŹŻ aąbcćdeęfghijklłmnńoópqrsśtuvwxyzźż Droid Sans Bold AĄBCĆDEĘFGHIJKLŁMNŃOÓPQRSŚTUVWXYZŹŻ aąbcćdeęfghijklłmnńoópqrsśtuvwxyzźż Arial Regular AĄBCĆDEĘFGHIJKLŁMNŃOÓPQRSŚTUVWXYZŹŻ aąbcćdeęfghijklłmnńoópqrsśtuvwxyzźż

24 Kolorystyka W odróżnieniu od kroju pisma czy innych elementów, które są wspólne dla głównego serwisu PARP oraz skojarzonych z nim portali tematycznych, stosowane palety kolorów są detalem, który odróżnia je od siebie. Dla każdej ze stron kompleksowego systemu internetowego PARP dobrane zostały trzy podstawowe kolory charakteryzujące jedynie tą stronę. Trójki kolorystyczne zawarte są w belkach oddzielających nagłówki od treści. Na ich podstawie dobierane są pozostałe barwy serwisów. Ich pełny wykaz znajduje się w dalszej części dokumentu. Ten rozdział poświęcony jest kolorystyce głównego serwisu PARP, która bazuje na kolorach logotypu PARP. Wspomniane wyżej podstawowe trzy barwy (#002b5c, #a3aeca, #cfd8e7) zostały szczegółowo opisane na stronie obok. Wyjątek stanowi portal web.gov.pl. W tym przypadku zostały użyte cztery kolory z logotypu (#d6192a, #fc753c, #fccc04, #d6192a). 24

25 2. Serwis główny PARP Barwy podstawowe strony głównego serwisu PARP (W zestawieniu tworzą belkę oddzielającą nagłówki od treści) RGB: 0,43,92 #: 002B5C RGB: 163,174,202 #: A3AECA RGB: 207,216,231 #: CFD8E7 Jedna z trzech podstawowych barw serwisu głównego PARP. Bazowy kolor logotypu PARP i najsilniejszy akcent kolorystyczny strony. Występowanie: tło menu bocznego 1. stopnia, tło pola wyszukiwania, tekst nagłówków, nazwy przycisków, aktywne stany przycisków, punktory. Druga z podstawowych barw serwisu głównego PARP. Kolor zaczerpnięty z logo PARP. Występowanie: tła ikon, ramki aktywnych zakładek, ramki przycisków, ramki pól szukania i formularzy. Ostatnia z trzech podstawowych barw serwisu głównego. Nie pochodzi ona z logo PARP, a została dobrana jako neutralny kolor uzupełniający. Występowanie: tła przycisków, tła nieaktywnych zakładek. 25

26 Kolory uzupełniające Barwy dodatkowe serwisu stanowią uzupełnienie trójki kolorystycznej prezentowanej powyżej. Paleta ta jest stonowana, z małym akcentem w postaci pomarańczu, który przeznaczony jest przede wszystkim dla hiperłączy. Zaleca się, aby nowe elementy dodawane do strony, takie jak banery, nawiązywały do prezentowanej w tym dokumencie palety barw. 26

27 2. Serwis główny PARP WYSTĘPOWANIE RGB: 77,106,141 #: 4D6A8D Tło menu bocznego 2. stopnia, tło przycisków linkujących do portali społecznościowych. RGB: 131,151,175 #: 8397AF Tło menu bocznego 3. stopnia. RGB: 160, 179, 202 #: A0B3CA Tło menu bocznego 3. stopnia w stanie hover. RGB: 255,255,255 #: FFFFFF Tło: paska nawigacji globalnej, głównego kontenera na treści, aktywnych zakładek; kolor tekstów z menu bocznego oraz wszystkich elementów występujących na granatowym (podstawowym) tle. Barwy uzupełniające RGB: 249,249,249 #: F9F9F9 RGB: 229,229,229 #: e5e5e5 Tło panelu dostępu do portali skojarzonych, tło stopki. Poziome i pionowe linie podziału, ramki poszczególnych kontenerów na treść. RGB: 218,95,14 #: da5f0e Kolor fontu linków w stanie hover. RGB: 103,101,101 #: Kolor fontu: wylistowanych adresów portali skojarzonych w panelu górnym oraz stopce, danych adresowych ze stopki. RGB: 53,50,49 #: Kolor fontu w pasku nawigacji globalnej. RGB: 33,33,33 #: Podstawowy kolor fontu na stronie. 27

28 Nagłówki Charakterystycznym elementem wyróżniającym nagłówki na stronie jest belka oddzielająca je od poniższych treści. Jej kolorystyka jest zaczerpnięta z logo PARP, a forma w pewien sposób nawiązuje do jego budowy. Składa się ona z trzech jednakowej długości odcinków, których kontynuacją jest jasnoszara linia o długości zależnej od szerokości danego pola tekstowego. Kolejnym elementem wyróżniającym nagłówki jest wielkość oraz kolor użytego w nich fonta. Znacznie odbiegają one od tych zastosowanych w tekście podstawowym. Element graficzny nagłówka jest elementem stałym i nie skaluje się wraz ze stroną. Nagłówek 1 Ten rodzaj nagłówka używany jest przede wszystkim w nazwach podstron oraz głównych działów stron systemu PARP. Nagłówek 2 Jest on stosowany w obrębie zakładek i wyszczególnionych ramką kontenerach na treść. 28

29 2. Serwis główny PARP Nagłówek 1 18px 4px Tekst: Droid Sans Regular 28 pt; Kolor: #002B5C; Nagłówek 1 Linia: Kolor: #D0D8E7; Grubość: 1px; 63px 63px 63px długość zależna od szerokości pola treści Kolor: #002B5C Kolor: #A3AECA Kolor: #CFD8E7 Nagłówek 2 12px 2px Tekst: Droid Sans Regular 24 pt; Kolor: #002B5C; Nagłówek 2 Linia: Kolor: #D0D8E7; Grubość: 1px; 37px 37px 37px długość zależna od szerokości pola treści Kolor: #002B5C Kolor: #CFD8E7 Kolor: #A3AECA 29

30 Wypunktowanie Na stronach głównego serwisu PARP zastosowano punktory w postaci kwadratów o wymiarach 7x7px, w kolorze #002b5c, oddalonych o 10px od tekstu i wyśrodkowanych względem niego. Taki rodzaj wypunktowania w prosty sposób nawiązuje do logo PARP pod względem formy oraz kolorystyki. Taka forma wypunktowania występuje w paragrafach. W zależności od rodzaju wypunktowania mogą być stosowane poziome lub pionowe linie w kolorze #e5e5e5 i grubości 1px, oddzielające jego poszczególne elementy. W przypadku wypunktowania w postaci listy występujących jeden pod drugim elementów, długość tych linii jest zgodna z szerokością pola tekstowego. Taka forma wypunktowania występuje w boksach z newsami. W przypadku wypunktowania w postaci elementów wyliczanych kolejno jeden po drugim, linie oddzielające o orientacji pionowej mają wysokość 10px. Odstęp pomiędzy końcem wyrazu a linią oraz pomiędzy linią a początkiem kolejnego punktora wynosi również 10px. 30

31 2. Serwis główny PARP Wymiary pojedynczego punktora 7px 10px Tekst : Droid Sans 13pt; Kolor: # px Przykładowy tekst Kolor punktora: #002b5c Wypunktowanie w postaci listy 1px 18px 7px 18px Kolor lini: #E4E4E4 Przykładowy tekst Przykładowy tekst 33px 1px 33px Wyliczanie elementów px Kolor lini: #E4E4E4 Grubość: 1px, wysokość: 10px WEB.gov.pl Akademia PARP Inwestycja w kadry Enterprise Europe Network Baza nowe podejście 31

32 Hiperłącza W serwisie PARP występują dwa rodzaje linków. Pierwsza podstawowa grupa to hiperłącza, które w widoku hover (po najechaniu myszką) zmieniają swój kolor na pomarańczowy (#da5f0e). Dotyczy to wszystkich linkujących tekstów, które w podstawowym widoku występują w kolorze # (standardowy tekst na stronie), # (linki ze stopki) oraz #002b5c (Centrum prasowe, Infolinia ze stopki). Drugi, rzadko występujący rodzaj linków, dotyczy tekstów, których podstawowym kolorem jest charakterystyczny dla hiperłączy pomarańcz (#da5f0e). W widoku hover teksty te są podkreślane. 32

33 2. Serwis główny PARP Link standardowy Link w widoku hover Font: Droid Sans Regular Kolor: #da5f0e (zmiana z #262625) Link niestandardowy Link w widoku hover Font: Droid Sans Regular podkreślony Kolor: #da5f0e (bez zmiany) 33

34 Typografia na banerze Podstawową cechą typografii umieszczanej na banerach powinna być jej przejrzystość i czytelność oraz spójność z pozostałymi elementami strony. Dlatego zalecane jest stosowanie na banerach podstawowego kroju pisma serwisu jakim jest Droid Sans. Kolor fonta powinien być zaczerpnięty z kolorystyki strony, a tło na którym występuje, nie powinno zaburzać czytelności przekazu. Dlatego sugeruje się, aby zdjęcia czy grafiki banerów przechodziły stopniowo w jednolity kolor, będący tłem dla hasła. Jednocześnie w przypadku głównego baneru nie powinna być to biel, ponieważ jest ona kolorem tła, na którym on występuje. Prezentowany obok banner (938x167px) jest jedynie przykładem, w jaki sposób powinno się tworzyć kolejne. Nie stanowi on sztywnego wzorca, a jest tylko sugerowaną formą. Miejscem prezentowania baneru 200x200px jest menu boczne, dlatego nie powinien on zaburzać jego czytelności. Sugeruje się, aby jego forma oraz kolorystyka korespondowały z menu bocznym i nie stanowiły dla niego konkurencji formalnej. 34

35 2. Serwis główny PARP Baner strony głównej Tekst1 Font: Droid Sans Regular, 14pt Kolor: #81b1d5 Tekst2 Font: Droid Sans Bold, Regular, 24pt Kolor: #002b5c Kolor tła: #F4F4F4 938px 938px Baner paska nawigacji bocznej 200px Font: Droid Sans 30px Kolor: #8397af 200px Font: Droid Sans 60px Kolor: #ffffff Ramka Kolor: #8397af Grubość: 1px Kolor tła: #002b5c 35

36 Przyciski Standardowe przyciski głównego serwisu PARP oraz portali skojarzonych podzielone są na dwie części. Pierwsza zawiera nazwę przycisku, druga strzałkę skierowaną w prawą stronę. Proporcje drugiej części są stałe. Zbudowana jest ona na bazie kwadratu o boku a (gdzie a występuje w dwóch wielkościach: 24px dla przycisków więcej i pobierz oraz 41px dla szukaj ). Wysokość pierwszej części jest również stała i wynosi a, jej długość natomiast zależy od długości nazwy przycisku. Wolna przestrzeń pomiędzy początkiem i końcem nazwy jest dla wszystkich przycisków taka sama i wynosi 3/4 a. Szczegółowe parametry oraz sposób zachowania przycisków standardowych opisane zostały na przykładach znajdujących się na stronie obok. W serwisie pojawiają się również przyciski niestandardowe, które wyglądem czy zachowaniem nieco odbiegają od opisanych powyżej. Zaliczają się do nich prezentowane obok przyciski przekierowujące na strony portali społecznościowych. 36

37 2. Serwis główny PARP Proporcje przycisku standardowego Marginesy napisu wewnątrz przycisku: 3/4 a a 1px (niezależnie od wielkości przycisku) a Kolorystyka przycisku standardowego Kolor lewej strony wnętrza przycisku: #cfd8e7 Kolor prawej strony wnętrza przycisku: #ffffff Kolor ramki: #a3aeca Kolor napisu: #002b5c Kolor ikony: #002b5c Przyciski w stanie hover Kolor tła: #002b5c Kolor napisu: #ffffff Kolor tła: #cfd8e7 Przyciski niestandardowe 37

38 Ikony Ikony występujące w serwisie można podzielić na następujące grupy: Ikony paska nawigacji globalnej Ikony tematyczne Ikony funkcjonalne Ikony - etykiety Ikony z pierwszej grupy występują w postaci niezmienionej (również pod względem koloru) na wszystkich stronach Kompleksowego Systemu Internetowego PARP. Wynika to z ich lokalizacji, jaką jest pasek nawigacji globalnej. Ikony tematyczne znajdują zastosowanie w zakładkach pionowych. Są one graficznymi odpowiednikami nazw zakładek, dlatego też występują w dwóch wariantach kolorystycznych: nieaktywnym (kolor tła #A3AECA) i aktywnym (kolor tła #002B5C). Ikony funkcjonalne przypisane są do konkretnych akcji, takich jak np. Wydrukuj. Ikony - etykiety są jedynie graficznymi akcentami na stronie. Nie są klikalne dlatego też zostały zaakcentowane odmiennym od reszty kształtem. Ikony portali skojarzonych wyglądają analogicznie do prezentowanych obok. Poza pierwszą grupą Ikon paska nawigacji globalnej, powinny być one dostosowane kolorystycznie do palety obowiązującej w danym serwisie. 38

39 2. Serwis główny PARP Ikony paska nawigacji globalnej 50px 16px 50px Ikona wyszukiwania 16px Ikona zwiększenia kontrastu Ikony tematyczne 33px 33px Ikona Jestem przedsiębiorcą W widoku aktywnym Ikona Jestem pracownikiem W widoku aktywnym Ikona Jestem inną instytucją W widoku aktywnym Kolor symbolu: #FFFFFF Kolor tła: #A3AECA Kolor symbolu: #FFFFFF Kolor tła: #002B5C Ikony funkcjonalne 24px 24px Ikona Śledź kanały RSS Ikona Zgłoś błąd Ikona Wydrukuj Ikony - etykiety 26px 18px 14px 26px 18px Ikona Filtruj wg. daty Ikona Filtruj wg. wydawcy Ikona NOWE 45 o 39

40 Ikony rozszerzeń plików Na stronie obok prezentowane są wszystkie ikony rozszerzeń plików zgodne z listą zamieszczoną w Dzienniku Ustaw Rzeczpospolitej Polskiej (Poz. 526, Rozporządzenie Rady Ministrów z dnia 12 kwietnia 2012r.) Ikony te zostały zaprojektowane w taki sposób, aby ich forma pasowała do projektu całego systemu internetowego. Na stronach występują w postaci kwadratów o wymiarach 24x24px. Umieszczono na nich skróty literowe lub elementy graficzne sugerujące ich źródło pochodzenia. Dodatkowo na stronach obok ikon pojawiają się nazwy rozszerzeń przez nie reprezentowanych. 40

41 2. Serwis główny PARP 24px 24px 41

42 Zakładki W serwisie występują dwa rodzaje zakładek: jedne o poziomym, drugie o pionowym sposobie nawigacji. Ich elementy składowe w zasadzie nie różnią się od siebie, a jedynie sposób korzystania z nich jest inny. W ich budowie można wyróżnić zdecydowanie wybijająca się zakładkę aktywną (białe tło, obramowanie 1px, wyróżniony nagłówek). Jest ona nieco przesunięta względem pozostałych dając tym efekt pewnej przestrzenności. Zakładki nieaktywne (znacznie ciemniejsze tło, brak obramowania, stonowane nagłówki) stanowią dla niej tło. 42

43 2. Serwis główny PARP Zakładka pozioma Zakładka aktywna: Kolor: #ffffff; Tekst zakładki aktywnej: Droid Sans Regular 18pt Kolor: #002b5c Tekst zakładki nieaktywnej: Droid Sans Regular 14pt Kolor: #002b5c Zakładki nieaktywne: Kolor tła: #cfd8e7; Zakładka 1 Zakładka 2 Tło pola aktywnej zakładki: Kolor: #ffffff; Grubość obrysu: 1px; Kolor obrysu: #a3aeca Zakładka pionowa Ikona zakładki aktywnej: Kolor ikony: #ffffff Kolor tła: #002b5c Ikona zakładki nieaktywnej: Kolor ikony: #ffffff Kolor tła: #a3aeca 43

44 Formularze Formularze stosowane w projekcie charakteryzuje prostota i uniwersalizm. Pola przeznaczone do uzupełnienia i rozwijane listy wyodrębniane są z tła za pomocą ramki (1px) oraz delikatnego wewnętrznego cienia (parametry obok na stronie). Fontem użytym w nazwach pól jest standardowo Droid Sans Regular, natomiast fontem służącym do uzupełniania formularza jest Arial Regular (13px). 44

45 2. Serwis główny PARP Formularz Font: Droid Sans 28px Kolor: # Font: Droid Sans 17px Kolor: # px 250px 52px Długość przycisku zgodna z szerokością formularza Rozwijana lista (część formularza) Tekst: Arial Regular 13pt; Kolor: # Obrys: Kolor: #e5e5e5 Grugość: 1px Tło pola: Kolor: #ffffff Cień wewnętrzny Przesunięcie x: 0px; Przesunięcie y: -3px; Rozmiar: 2px; Kolor: #f1f1f1 Tło pola: Kolor: #f9f9f9 Strzałka: Kolor: #

46 Tabele, zestawienia Tabela składa się z nazwy całego zestawienia (Droid Sans Regular 28pt) oraz dowolnej ilości grup, z których każda posiada własną, osobną nazwę (Droid Sans Regular 24pt). Każdy plik posiada osobny wiersz, w którym mieszczą się dwie linie tekstu (nazwa pliku). W przypadku trzech lub czterech linii tekstu w wierszu, zmienia on (podwaja) automatycznie swoją wysokość. W obrębie grupy wiersze mają dwa kolory tła (#ffffff oraz #e5e5e5) i ułożone są naprzemiennie, rozpoczynając zawsze od wiersza z białym tłem (#ffffff ). W obrębie wiersza znajduje się nazwa pliku z opisem, tj. formatem (także zwizualizowanym w formie znaku odpowiadającemu danemu rodzajowi pliku) oraz wagą (wyrażoną wartością liczbową). Przy każdym pliku znajduje się standardowy przycisk umożliwiający jego pobranie. Nowe pozycje w tabeli oznaczane są ikoną etykiety NOWE. 46

47 2. Serwis główny PARP Przykład tabeli zawierającej dokumenty do pobrania Nazwa całego zestawienia: Droid Sans Regular 28pt Kolor: #002a5c Nazwa danej grupy: Droid Sans Regular 24pt Kolor: # Kolor rozszerzenia pliku: # Kolor wiersza A: #ffffff 58px 68px Tekst: Droid Sans Regular 14pt Kolor: # Kolor wiersza B: # Linie podziału wierszy i kolumn: Kolor: #e5e5e5 Grubość: 1px Standardowy przycisk Przykład tabeli zawierającej zadania pracownika Nazwa tabeli: Droid Sans Regular 28pt Kolor: #002a5c Nagłówki kolumn: Droid Sans Regular 14pt Kolor: #1a1918 Tekst wierszy: Droid Sans Regular 12pt Kolor: #1a

48 Newsletter Newsletter PARP jest rodzajem interaktywnego a przesyłanego do grupy odbiorców. Ma on stałą szerokość (700px), dopasowaną do standardowych okien poczty elektronicznej. Dzięki temu nie wymaga on bocznego scrollowania. Długość newslettera jest nieograniczona i zależy jedynie od ilości zawartych w nim treści. Jest on w pełni klikalnym dokumentem, którego poszczególne sekcje z widoku ogólnego linkują do pełnych artykułów w serwisie www. Prezentowany obok newsletter (w widoku ogólnym i szczegółowym), jest dedykowany głównemu serwisowi PARP. Zawiera on charakterystyczne elementy ikonografii tego właśnie serwisu, takie jak: kolorystykę, przyciski, nagłówki. 48

49 2. Serwis główny PARP 49

50 Newslettery portali skojarzonych Newslettery portali skojarzonych opierają się na takich samych zasadach tworzenia, co prezentowany wcześniej szablon przeznaczony dla serwisu głównego PARP. Elementem odróżniającym je od siebie, jest ich kolorystyka. Niepowtarzalne palety barw, przypisane do poszczególnych portali, powinny znaleźć zastosowanie w odpowiadających im newsletterach. Obok zaprezentowano przykład newslettera w widoku ogólnym i szczegółowym, przeznaczonego dla portalu web.gov.pl. 50

51 2. Serwis główny PARP Newslette portalu web.gov.pl 51

52 52

53 3. Przykładowe podstrony PARP 53

54 Widok strony głównej 54

55 3. Przykładowe podstrony PARP Widok podstrony Kooperacja 55

56 Widok podstrony Publikacje 56

57 3. Przykładowe podstrony PARP Widok podstrony Publikacje tymczasowe 57

58 Widok szczegółowy artykułu 58

59 3. Przykładowe podstrony PARP Widok galerii zdjęć 59

60 Widok podstrony Szkolenia 60

61 3. Przykładowe podstrony PARP Widok podstrony Finansowanie 61

62 Widok listy dokumentów 62

63 3. Przykładowe podstrony PARP Widok podstrony 63

64 Widok strony o zwiększonym kontraście Widok strony przeznaczonej dla osób niedowidzących, który cechuje ciemne tło i osadzona na nim jasna czcionka. Zastosowanie wysokiego kontrastu, większej czcionki oraz mniejszej ilości kolorów wspomaga czytanie przez osoby z wadą wzroku. 64

65 Widok menu głównego oraz wyszukiwarki Arial Regular 14pt Kolor: # Arial Bold 14pt Kolor: #FFFF00 Widok podstrony Arial Bold 24pt Kolor: #FFFF00 Arial Regular 16pt Kolor: #FFFFFF Widok stopki Arial Bold 16pt Kolor: #FFFF00 Arial Bold 14pt Kolor: #FFFF00 Arial Regular 14pt Kolor: #00FFFF 65

66 Widok strony głównej o zwiększonym kontraście 66

67 3. Przykładowe podstrony PARP Widok podstrony Aktualności o zwiększonym kontraście 67

68 68

69 4. Wersja mobilna 69

70 Responsive Web Design System internetowy PARP posiada strony zoptymalizowane pod wyświetlanie na urządzeniach mobilnych i tabletach. Jest to możliwe dzięki zastosowaniu podejścia Responsive Web Design do projektowania i wdrażania stron. RWD zakłada w pełni funkcjonalne widoki stron, z nawigacją dostosowaną do rozmiaru ekranu, czytelne i intuicyjne w użytkowaniu. Dzięki nowym atrybutom media queries w CSS3, możliwe jest serwowanie odpowiednich styli w zależności od rozdzielczości urządzenia. System internetowy PARP posiada: widok strony internetowej wyświetlanej na monitorach powyżej rozdzielczości 1024px, widok tabletowy pomiędzy 481px a 1024px, widok mobilny na urządzenia mobilne o rozdzielczości mniejszej bądź równej 480px. 70

71 4. Wersja mobilna Widok strony głównej w wersji tabletowej 71

72 Wersja mobilna strony Widok mobilny jest zoptymalizowany pod kątem wszystkich użytkowników smartfonów. Każdy z elementów strony internetowej układa się tak, aby był dostępny i czytelny na ekranie telefonu. Dzięki temu użytkownicy otrzymują w pełni funkcjonalną stronę i mogą dotrzeć do interesujących ich informacji. Belka nawigacji globalnej została zaprojektowana tak, aby było w niej możliwe poziome przewijanie elementów. Całe dotychczasowe menu boczne jest schowane i pojawia się dopiero po jego wywołaniu przez przycisk Menu. 72

73 4. Wersja mobilna Widok strony głównej w wersji mobilnej 73

74 74

75 5. Portale skojarzone 75

76 Kolorystyka portali skojarzonych Wszystkie portale Kompleksowego Systemu Internetowego PARP zostały podzielone na cztery grupy. Do pierwszej należy portal korporacyjny PARP (serwis główny). Kolejne grupy to: Portale tematyczne Portale poświęcone dotacjom Portale projektowe i inicjatywy Do każdego z portali zostały dobrane trzy podstawowe kolory charakteryzujące jego stronę główną i podstrony. Trójki kolorystyczne zawarte są w belkach oddzielających nagłówki od treści. Na ich podstawie dobierane są pozostałe barwy serwisów. Wyjątkiem jest widok serwisu web.gov.pl opisany w części poświęconej menu bocznemu. Na kolejnych stronach znajduje się zestawienie trójek kolorystycznych wszystkich portali skojarzonych. 76

77 5. Portale skojarzone 1. Portal korporacyjny PARP #002b5c #a3aeca #cfd8e7 77

78 2. Portale tematyczne #f15f23 #f78b26 #ffc60b # #ff6200 #f6be8c #d6192a #d6192ia #fc753c Kolor menu bocznego #fccc04 #245a84 #e47614 #d9d9d9 #004e8e #f7d359 #ffe898 78

79 5. Portale skojarzone #3963b0 #a1b0cd #cfd8e7 #001b86 #0094da #ffcd2c #251e6c #65b930 #f1bb03 #002a5c #ed1b23 #fc6b70 79

80 3. Portale poświęcone dotacjom #00a097 #00b6ad #afdfdc #4b4894 #645faa #e1dfef #dc651e #f58221 #fdd1af #ca031a #e2253b #fc

81 5. Portale skojarzone 4. Portale projektowe i inicjatywy # #a1b0cd #cfd8e7 #002c59 #a1b0cd #cfd8e7 #a8034f #a1b0cd #cfd8e7 #0085a1 #a1b0cd #cfd8e7 #ff6dob #a1b0cd #cfd8e7 81

82 #dd15b6 #10b1db #cfd8e7 #1f5a18 #10b1db #cfd8e7 #54616e #a1b0cd #cfd8e7 #d82423 #a1b0cd #cfd8e7 #1bb7d9 #a1b0cd #cfd8e7 82

83 5. Portale skojarzone #002b5c #a1b0cd #cfd8e7 #002b5c #a1b0cd #cfd8e7 #f39910 #a1b0cd #cfd8e7 #980b10 #a1b0cd #cfd8e7 #8f52a1 #a1b0cd #cfd8e7 83

84 Budowa serwisów skojarzonych Serwisy skojarzone swoją budową praktycznie nie odbiegają od układu zastosowanego w głównym serwisie PARP. Podzielone są na pięć podstawowych części: pasek nawigacji globalnej, nagłówek z logiem danego portalu oraz elementami funkcjonalnymi, np. panel logowania, ikony społecznościowe, informacje kontaktowe, pasek nawigacji bocznej, kontener na treść, stopkę. Nagłówek z logiem danego portalu jest dodanym elementem, który nie występuje w głównym serwisie PARP. Paski nawigacji oraz stopka są stałymi elementami, które w sposób niezmienny prezentują się na stronach głównych serwisów oraz podstronach. Zawartość kontenera na treść generuje się dynamicznie w zależności od rodzaju podstrony, na której się znajdujemy. Na kolejnych stronach prezentowane są projekty stron głównych sześciu wybranych portali skojarzonych systemu PARP. 84

85 5. Portale skojarzone Nawigacja globalna Nagłówek z logiem danego portalu Kontener treści Nawigacja boczna Stopka 85

86 Widok strony głównej Program Innowacyjna Gospodarka 86

87 5. Portale skojarzone Widok strony głównej Biuletyn Informacji Publicznej 87

88 Widok strony głównej Planowanie Strategiczne 88

89 5. Portale skojarzone Widok strony głównej Inwestycja w Kadry 89

90 Widok strony głównej Web.gov.pl 90

91 5. Portale skojarzone Widok strony głównej Akademia PARP 91