elektroniczna platforma usług administracji publicznej system identyfikacji wizualnej

elektroniczna platforma usług administracji publicznej system identyfikacji wizualnej

wstęp znak epuap geneza budowa znaku opis geometryczny liternictwo kolorystyka odmiany znaku skalowanie znaku zasady umieszczania zastosowanie WWW zastosowanie materiały biurowe zastosowanie dokumenty zastosowanie materiały promocyjne czego nie wolno 3 4 5 6 7 8 9 10 11 12 13 14 15 spis rzeczy

Zadaniem tego opracowania jest nie tylko uporządkowanie i systematyzacja stosowania logo elektronicznej Platformy Usług Administracji Publicznej, ale także wytyczenie ram, w jakich będą powstawać wszelkie materiały oraz publikacje opatrzone tym znakiem. Utrzymanie ścisłych reguł stosowania znaku systematyzujących liternictwo, kolorystykę, format, sposoby rozmieszczenia i użycie dopuszczalnych wariantów jest niezbędne do zachowania jednorodnej i rozpoznawalnej tożsamości. Wizerunek epuap ma spełniać następujące funkcje: wizerunkowe i estetyczne promowanie idei społeczeństwa obywatelskiego i informacyjnego kreowanie partnerskich relacji między państwem a obywatelem zaznaczenie służebnej wobec obywatela funkcji instytucji publicznych stworzenie nowoczesnego i eleganckiego wizerunku, który jednocześnie ociepli formalny charakter instytucji publicznych syntetyczne ujęcie funkcji i medium, w którym operuje epuap merytoryczne i funkcjonalne: wdrożenie ładu wizualnego w wizerunku instytucji publicznych przez systematyzację i ujednolicenie materiałów graficznych czytelność i rozpoznawalność, stworzenie kodu porządkującego o wysokim stopniu funkcjonalności i uniwersalności stworzenie przejrzystego i funkcjonalnego systemu otwartego, umożliwiającego rozbudowę wraz z rozwojem instytucji. wstęp3

elektroniczna platforma usług administracji publicznej biuletyn informacji publicznej Najważniejszym punktem odniesienia w trakcie projektowania znaku była idea Platformy jako mostu obrazującego bezpośrednią relację Państwo Obywatel. Tak powstał biało-czerwony most, który umieszczony nad literą e logotypu ma symbolizować dialogiczną funkcję Platformy. Jako, że epuap administracyjnie przynależy do Departamentu Informatyzacji MSWiA, stylistyka znaku nawiązuje do logo innego przedsięwzięcia podlegającego Departamentowi Biuletynu Informacji Publicznej. To nawiązanie i próba ujednolicenia ma stanowić przyczynek do wizerunkowej unifikacji wszelkich przedsięwzięć DI MSWiA. Znak epuap został oparty na tych samych co BIP krojach pism, użyto też zbliżonej stylistyki i metaforyki. geneza4

logotyp rozwinięcie skrótu a a a a 2,5 pole ochronne a element dopełniający Znak składa się z logotypu epuap, wizerunku stylizowanego, biało-czerwonego mostu oraz rozwinięcia skrótu umieszczonego na prawo od logotypu. Most stanowi geometryczną wynikową litery e logotypu osie okręgów wykreślających wewnętrzne łuki mostu pokrywają się ze środkiem litery e. Dla uniknięcia zbyt cienkich, zanikających zakończeń łuków, oś okręgu wyznaczającego większą krzywiznę łuku jest nieznacznie odchylona od osi mniejszego łuku. Lewa połowa mostu jest wypełniona gradientem od czerwonego do ciemnoczerwonego, zaś istnienie prawej połowy sygnalizuje jedynie wycięcie w kolejnej literze logotypu ( P ). Logotyp, złożony krojem Beep Sans Semibold, został wypełniony gradientem przechodzącym przez jego całą długość, od koloru błękitnego do granatowego. Rozwinięcie skrótu jest ciemnoszare, złożone w dwóch liniach krojem Rotis Sans Serif w odmianie Regular. Wysokość bloku tekstowego zawierającego rozwinięcie skrótu odpowiada odległości dolnej linii pisma logotypu od górnej. Obszar pola ochronnego wyznacza odległość a równa grubości kresek jednoelementowego kroju Beep. Dopełnieniu znaku służy dodatkowy element - rysunek mostu, którego prawa część jest wypełniona gradientem od szarości do bieli. budowa znaku5

Georgia @abcdefghijklmnoprstuwxyz Verdana @abcdefghijklmnoprstuwxyz elektroniczna platforma usług administracji publicznej Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Warszawa 30.10.2007 Georgia Lorem ipsum dolor Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Verdana Bold Verdana Ustawa z dnia 6 wrzesnia 2001r. o dostepie do informacji publicznej Ustawa z dnia 6 wrzesnia 2001r. o dostepie do informacji publicznej Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus blandit ultricies diam. Donec mauris. Praesent auctor tortor at felis. Curabitur vel libero. Donec lectus metus, rhoncus a, condimentum ut, viverra ut, sapien. Aliquam ut erat id mauris fringilla interdum. Morbi feugiat porta arcu. Mauris lobortis vehicula ipsum. Sed a nulla. Nulla nunc nisl, mollis vel, vulputate sit amet, egestas ac, mi. Vivamus aliquam felis a eros. Integer varius semper metus. Fusce odio pede, malesuada sit amet, mattis vitae, commodo at, lacus. Nulla id mauris. Mauris cursus tempus ligula. Mauris facilisis. Nunc id tortor eu felis facilisis dapibus. Donec eu risus. In pretium, ante eget eleifend fringilla, dolor sem tempor velit, sit amet fringilla eros dolor quis nibh. Mauris augue. ii legunt saepius. Mauris lobortis vehicula ipsum. Sed a nulla. Nulla nunc nisl, mollis vel, vulputate sit amet, egestas ac, mi. Vivamus aliquam felis a eros. Integer varius semper metus. Fusce odio pede, malesuada sit amet, mattis vitae, commodo at, lacus. Nulla id mauris. Mauris cursus tempus Rotis Sans Serif Bold epuap.gov.pl epuap.gov.pl W logotypie użyto kroju Beep Sans Semibold. Zaleca się wykorzystanie tego kroju, jako jednego z elementów rozpoznawalności, podczas tworzenia kolejnych elementów tożsamości wizualnej epuap. Krojem dopełniającym w materiałach firmowych i promocyjnych jest Rotis Semisans i jego odmiany. W sytuacjach, gdy możliwe jest użycie tylko fontów systemowych (szablony dokumentów i prezentacji) należy używać fontów Georgia do tekstów dokumentów oraz Verdana do prezentacji ekranowych. liternictwo6

pełny kolor gradient pełny kolor apla CMYK: Ma: 100%, Ye: 100%, K: 40% RGB: R: 134, G: 20, B: 28 CMYK: Cy: 80% Ma: 10% RGB: R: 77, G: 143, B: 218 CMYK: Cy: 100%, Ma: 75%, K: 40% RGB: R: 11, G: 54, B: 107 PANTONE COOL GRAY 11 C PANTONE COOL GRAY 11 U CMYK: K: 75% RGB: R: 155, G: 155, B: 155 PANTONE CMYK: Ma: 100%, Ye: 100%, K: 15% RGB: R: 170, G: 0, B: 30 PANTONE CMYK: Cy: 100% Ma: 35%, K: 10% RGB: R: 0, G: 114, B: 176 PANTONE COOL GRAY 11 C PANTONE COOL GRAY 11 U CMYK: K: 75% RGB: R: 155, G: 155, B: 155 CMYK: Ma: 100%, Ye: 100% RGB: R: 193, G: 70, B: 31 CMYK: Ma: 100%, Ye: 100%, K: 40% RGB: R: 134, G: 20, B: 28 PANTONE COOL GRAY 11 C: 80% PANTONE COOL GRAY 11 U: 80% CMYK: K: 40% RGB: R: 134, G: 20, B: 28 CMYK: Ma: 100%, Ye: 100% RGB: R: 193, G: 70, B: 31 Kolory epuap-u to czerwony, niebieski i biały. Czerwień występuje w formie gradientu wypełniającego połowę mostu od jasnej do ciemnej czerwieni. W dwóch odcieniach użyto także niebieskiego gradient w logotypie przechodzi od błękitu do granatu. Natomiast wizerunek mostu, funkcjonujący jako samodzielny element, jest dodatkowo wypełniony gradientem od szarości do bieli. kolorystyka7

LOGO pełny kolor gradient pełny kolor apla czarno-białe kontra odmiana podstawowa odmiana podstawowa wersja anglojęzyczna uproszczenie ZNAKI DOPEŁNIAJĄCE most adres www znaki SPO WKP i EU Logo, prócz wersji podstawowej, ma również szereg odmian. Odmiana anglojęzyczna z rozwinięciem skrótu w jęz. angielskim. Znaku uproszczonego można używać, gdy warunki ekspozycji (np. pomniejszenie) uniemożliwią czytelne podanie rozwinięcia skrótu. Do zastosowań w kontrze należy używać wersji znaku z logotypem i rozwinięciem skrótu w kolorze białym, w rozwinięciu skrótu następuje wówczas zmiana odmiany kroju Rotis, z Regular na Bold. W sytuacjach gdy użycie koloru jest niemożliwe (np. fax) można używać znaku w odmianie czarno-białej. Do zastosowań popularyzacyjnych służy osobny znak dla strony www.epuap.gov.pl adres WWW uzupełniony czerwoną połową mostu ze znaku epuap. Na wszystkich materiałach informacyjnych i promocyjnych epuap należy umieszczać dodatkowo: znak Unii dla Przedsiębiorczych (SPO WKP), flagę Unii Europejskiej (EU) oraz tekst z informacją o finansowaniu przez te instytucje. Zalecane umiejscowienie tych znaków to dolny, prawy róg strony, w rozmiarze pozwalającym na zachowanie czytelności tekstu. W przypadku publikacji dwu- i wielostronicowych znaki te można umieszczać na drugiej / ostatniej stronie. W stosowaniu tych znaków należy się kierować odpowiednimi dla nich specyfikacjami dostępnymi na stronach http://www.konkurencyjnosc.gov.pl/promocja+i+logo/ oraz http://europa.eu/abc/symbols/emblem/graphics1_pl.htm. odmiany8

min. 50 mm min. 15 mm 7 pt 7 pt pozytyw min. 60 mm min. 17 mm druk 8 pt 8 pt kontra min. 195 px min. 56 px pozytyw 9 pt 9 pt min. 230 px min. 68 px kontra ekran 10 pt 10 pt Podczas pomniejszania znaku należy przestrzegać podanych dopuszczalnych wielkości minimalnych. Skalowanie poniżej tych wartości spowoduje utratę czytelności, utrudni rozpoznawanie oraz spowoduje obniżenie jakości odwzorowania znaków. Odmienne wartości obowiązują dla reprodukcji w druku oraz do wyświetlania znaków na ekranie monitora. Dla obu rodzajów mediów wielkości zostały podane w odpowiednich jednostkach miary (mm i px). Czynnikiem decydującym o skali pomniejszenia jest czytelność tekstu. Jako minimalną dopuszczalną wielkość tekstu przyjęto odpowiednio: dla druku 7 pkt (8 pkt dla kontry) oraz dla ekranu 9 pkt (10 pkt dla kontry). skalowanie9

4a 4a a a a Pole ochronne 4a Zalecany margines 4a Dla zapewnienia czytelności i odpowiedniej ekspozycji znaku należy zachowywać pole ochronne. Wszystkie inne elementy dokumentu (teksty, ilustracje) powinny znajdować się poza jego obszarem. Wielkość pola ochronnego to odległość równa segmentowi siatki modułowej (na rysunku wartość a ). Z kolei wartość równa 4 segmentom siatki to zalecany margines odsunięcia od krawędzi strony. Zalecana lokalizacja znaku na stronie to lewy górny róg, ale dopuszczalne jest umieszczanie go w pozostałych narożnikach strony. rozmieszczanie10

Verdana, Myriad, sans-serif 9pt, underline #3F6F8F Georgia, Palatino (bold), serif 14pt, interlinia 17pt #5f788c Rotis Semi Serif, sans-serif 16pt. interlinia 29px #5f788c Rotis Sans Serif (regular) 17pt, interlinia 29px #5684a3, hover: #b5001d Verdana, Myriad, sans-serif 10pt, #898989 Verdana, Myriad, sans-serif 9pt #9c9c9c Verdana, Myriad (regular), sans-serif 12pt, interlinia 16pt #535353 Georgia, Palatino, (bold) serif 14pt, interlinia 17pt #b80004 bold, underline, #b5001d Strona główna www.epuap.mswia.gov.pl zastosowanie11

notatnik teczka A4 papier firmowy A4 koperta DL wizytówka imienna tył i przód Druki i materiały biurowe. Podczas przygotowania druków i dokumentów epuap należy używać charakterystycznej, niebiesko-biało-czerwonej kolorystyki. Na przykładowych materiałach uwidoczniono sposób stosowania odmian znaku oraz znaków uzupełniających. Jako materiału ilustaracyjnego użyto pejzaży miejskich z motywem biało-czerwonego mostu symbolu epuap. zastosowanie12

szablony dokumentów Sposoby realizacji przez podmioty obowiązków wynikających z Ustawy o dostępie do informacji publicznej Zastępca Dyrektora BAG MSWiA ds. Łączności i Informatyki mgr inż. Jan KOWALSKI Dyrektor Departamentu Informatyzacji MSWiA E-mail: j.kowalski@mswia.gov.pl Ustawa z dnia 6 września 2001r. o dostępie do informacji publicznej Ustawa z dnia 6 września 2001r. o dostępie do informacji publicznej Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus blandit ultricies diam. Donec mauris. Praesent auctor tortor at felis. Curabitur vel libero. Donec lectus metus, rhoncus a, condimentum ut, viverra ut, sapien. Aliquam ut erat id mauris fringilla interdum. Morbi feugiat porta arcu. Mauris lobortis vehicula ipsum. Sed a nulla. Nulla nunc nisl, mollis vel, vulputate sit amet, egestas ac, mi. Vivamus aliquam felis a eros. Integer varius semper metus. Fusce odio pede, malesuada sit amet, mattis vitae, commodo at, lacus. Nulla id mauris. Mauris cursus tempus ligula. Mauris facilisis. Nunc id tortor eu felis facilisis dapibus. Donec eu risus. In pretium, ante eget eleifend fringilla, dolor sem tempor velit, sit amet fringilla eros dolor quis nibh. Mauris augue. Mauris lobortis vehicula ipsum. Sed a nulla. Nulla nunc nisl, mollis vel, vulputate sit amet, egestas ac, mi. Vivamus aliquam felis a eros. Integer varius semper metus. Fusce odio pede, malesuada sit amet, mattis vitae, commodo at, lacus. Nulla id mauris. Mauris cursus tempus ligula. Mauris facilisis. Nunc id tortor eu felis facilisis dapibus. Donec eu risus. In pretium, ante eget eleifend fringilla, dolor sem tempor velit, sit amet fringilla eros dolor quis nibh. Mauris augue. Ustawa z dnia 6 września 2001r. o dostępie do informacji publicznej Ustawa z dnia 6 września 2001r. o dostępie do informacji publicznej Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus blandit ultricies diam. Donec mauris. Praesent auctor tortor at felis. Curabitur vel libero. Donec lectus metus, rhoncus a, condimentum ut, viverra ut, sapien. Aliquam ut erat id mauris fringilla interdum. Morbi feugiat porta arcu. Mauris lobortis vehicula ipsum. Sed a nulla. Nulla nunc nisl, mollis vel, vulputate sit amet, egestas ac, mi. Vivamus aliquam felis a eros. Integer varius semper metus. Fusce odio pede, malesuada sit amet, mattis vitae, commodo at, lacus. Nulla id mauris. Mauris cursus tempus ligula. Mauris facilisis. Nunc id tortor eu felis facilisis dapibus. Donec eu risus. In pretium, ante eget eleifend fringilla, dolor sem tempor velit, sit amet fringilla eros dolor quis nibh. Mauris augue. Mauris lobortis vehicula ipsum. Sed a nulla. Nulla nunc nisl, mollis vel, vulputate sit amet, egestas ac, mi. Vivamus aliquam felis a eros. Integer varius semper metus. Fusce odio pede, malesuada sit amet, mattis vitae, commodo at, lacus. Nulla id mauris. Mauris cursus tempus ligula. Mauris facilisis. Nunc id tortor eu felis facilisis dapibus. Donec eu risus. In pretium, ante eget eleifend fringilla, dolor sem tempor velit, sit amet fringilla eros dolor quis nibh. Mauris augue. prezentacja multimedialna Szablony dokumentów elektronicznych Ważnym elementem wizerunkowym są również szablony: dokumentów tekstowych, arkuszy, faksów, prezentacji multimedialnych. Podczas ich użytkowania należy przestrzegać reguł stosowania znaku, stosowania jednolitej kolorystyki i liternictwa. zastosowanie13

gadżety promocyjne kubek, długopis, koszulka polo, smycz stend promocyjny Materiały promocyjne Konieczność utrzymania jednorodnej kolorystyki, liternictwa i stylistyki dotyczy również projektów materiałów promocyjnych i ekspozycyjnych. zastosowanie14

elektroniczna platforma usług administracji publicznej Liternictwo to nieodłączny element rozpoznawalności i czytelności znaku. Nie można w znaku stosować dowolnych krojów pisma. Nie należy rozbielać znaku (w charakterze np elementu tła) ani zmieniać nasycenia opisnych w specyfikacji kolorów. Nie należy odcinać znaku dodatkowym obrysem. Znak występuje tylko w wersji poziomej, niedopuszczalne jest jego przechylanie i obracanie. Nie należy modyfikować znaku dodatkowymi efektami, takimi jak bevel & emboss i podobnymi. Nie należy przemieszczać względem siebie elementów znaku. Powyżej podano kilka przykładów nieprawidłowego użycia znaku. Trudno opisać wszystkie takie sytuacje, dlatego stosując znak należy kierować się, prócz niniejszej specyfikacji, zdrowym rozsądkiem. Znak ma być czytelny, rozpoznawalny, możliwie dobrze wyeksponowany i odwzorowany. Ma informować, a w miarę możliwości zdobić. czego nie wolno15

Departament Informatyzacji MSWiA. Projekt i opracowanie: studiotwarte 16