Serwis internetowy miasta stołecznego Warszawy. Księga Identyfikacji Wizualnej Portalu Miejskiego

Transkrypt

1 Serwis internetowy miasta stołecznego Warszawy Księga Identyfikacji Wizualnej Portalu Miejskiego

2 Miasta Stołeczne Warszawa - Księga Identyfikacji Wizualnej Portalu Miejskiego Strona 2. WPROWADZENIE. Podstawowe definicje.2 Wytyczne projektu graficznego.3 Bazowe elementy strony 2. KOLORY 2. Definicje podstawowych kolorów 3. GRID - SIATKA MODUŁOWA STRONY 3. Podstawowy grid 3.2 Grid strony głównej 3.3 Grid podstrony 3.4 Grid serwisu specjalnego 3.5 Budowa strony głównej na podstawie siatki (przykład) 4. ELEMENTY STRONY 4. Nagłówek strony głównej 4.2 Nagłówek podstron 4.3 Menu główne 4.4 Boks 4.5 Boks z zakładkami 4.6 Boks osoby 4.7 Odnośniki 4.8 Przyciski 4.9 Kroki 4.0 Wyróżnienie wybranych treści - zakładki aktualności 4. Wyróżnienie wybranych treści - wydarzenie promowane 4.2 Stopka 4.3 Komunikat specjalny 4.4 Elementy typograficzne 4.5 Elementy wysuwane 4.6 Breadcrumbs 4.7 Teasery ze znakiem promocyjnym miasta 4.8 Teasery wewnętrzne 4.9 Mapa 4.20 Wyszukiwanie połączeń 5. SERWIS SPECJALNY 5. Podstawowe informacje 5.2 Nagłówek serwisu specjalnego 5.3 Elementy budowy serwisu specjalnego 5.4 Boksy w serwisie specjalnym 6. INTERAKCJA Z KURSOREM 6. Interakcja odnośników 6.2 Interakcja pozostałych elementów 7. SEKCJA TEMATYCZNA 7. Wytyczne projektu graficznego 7.2 Grid podstawowy 7.3 Dobór zdjęć 7.4 Teaser wewnętrzny 7.5 Teaser reklamowy

3 Strona 3 Miasta Stołeczne Warszawa - Księga Identyfikacji Wizualnej Portalu Miejskiego WPROWADZENIE - Podstawowe definicje Dokument opisuje graficzną stronę serwisu internetowego m. st. Warszawy - jego podstawowe funkcje oraz elementy, z których jest zbudowany. Dokument definiuje w szczegółach sposób prezentacji treści w ramach projektu graficznego. Celem dokumentu jest utrzymanie spójności wszystkich komponentów serwisu i zapewnienie użytkownikowi jednolitego przekazu. W dokumencie opisano zarówno budowę serwisu (siatkę modułową, odległości pomiędzy elementami), jak i poszczególne elementy (przyciski, nagłówki, typografię) oraz ich interakcję z kursorem myszy. Do wyróżnienia i oznaczenia poszczególnych detali użyto koloru czarnego. W miarach odległości elementów graficznych od elementów tekstowych w pionie należy przyjąć, że pomiar wykonywany jest od linii wydłużeń tekstu (dolnych lub górnych). Sposób zapisu typografii w dokumencie jest następujący: [Nazwa fontu oraz odmiana], [Stopień w rem] [Wartość koloru w #]/[Alternatywna wartość koloru] Na przykład: Open Sans Normal, rem oraz przy nagłówkach,85rem o kolorach #4a4848/#ffffff oznacza, że tekst pisany jest fontem Open Sans normal o stopniu 0,75rem rem,,85rem i kolorem #666, pojawiającym się w danym kontekście również w kolorze #ffffff. Brak oznaczenia interlinii oznacza interlinię standardową bądź tekst jednowierszowy.

4 WPROWADZENIE - Wytyczne projektu graficznego Miasta Stołeczne Warszawa - Księga Identyfikacji Wizualnej Portalu Miejskiego Strona 4 Projekt graficzny portalu miejskiego powstał na bazie znaku promocyjnego według następujących zasad: Dominującym akcentem kolorystycznym wykorzystywanym w projekcie jest kolor czerwony. Dodatkowo wykorzystujemy odcień koloru niebieskiego z podstawowej wersji znaku promocyjnego oraz odcień koloru zielonego z jego wersji ekologicznej. Projekt graficzny wykorzystuje fonty z rodziny Open Sans. Projekt strony odzwierciedla zasady oraz wytyczne zawarte w Katalogu Systemu Identyfikacji Wizualnej m.st.warszawy.

5 Strona 5 Miasta Stołeczne Warszawa - Księga Identyfikacji Wizualnej Portalu Miejskiego WPROWADZENIE - Bazowe elementy strony. Nagłówek zawierający znak promocyjny m.st. Warszawy. 2. Meta nawigacja. 3. Sekcja główna z wyszukiwarką. 4. Pole z aktualnościami. 5. Kategorie. 6. Obszar stopki

6 KOLORY - Definicja podstawowych kolorów Miasta Stołeczne Warszawa - Księga Identyfikacji Wizualnej Portalu Miejskiego Strona 6 Podstawową kolorystykę strony wyznaczają barwy: czerwona, zielona i niebieska.. Czerwony kolor wykorzystywany jest dla elementów niezmiennych (nagłówek strony, stopka) oraz dla elementów z działu Miasto i mieszkaniec. Niebieski jest używany przede wszystkim jako kolor interakcji z kursorem, przycisków akcji. Jest kolorem kategorii Biznes i inwestycje RGB: 204:5:5 #CC3333 RGB: :8:72 #076ac RGB: 20:29:35 #4823 Zielony jest kolorem kategorii Turystyka i rekreacja. 2. Kolory drugorzędne są odcieniami szarości. Wykorzystywane do tekstu ciągłego, podpisów oraz do wyróżniania nagłówków lub jako podkłady. 2 RGB: 74:72:72 RGB: 2::3 RGB: 98:97:200 Dobór kolorystyczny podyktowany jest wymogami #4a4848 #706f7 #c6c5c8 wynikającymi z krajowych ram interoperacyjności oraz zaleceń WCAG dotyczących kontrastów.

7 Strona 7 Miasta Stołeczne Warszawa - Księga Identyfikacji Wizualnej Portalu Miejskiego GRID SIATKA MODUŁOWA STRONY - Podstawowy grid Projekt strony został oparty na systemie siatki modułowej. Siatka jest podzielona na 2 kolumn wypełniających całą szerokość strony, która w przypadku wersji desktopowej wynosi 60 pikseli a w przypadku tabletu i telefonu wypełnia całą dostępną przestrzeń na ekranie danego urządzenia. Nagłówek oraz stopka stanowią najszersze elementy strony o szerokości 00% ekranu, które wykraczają poza content strony 60px. Dla ekranów o większej gęstości punktów na cal zapewnione zostanie odpowiednie skalowanie. 20% 00% 66% 20% 20% 20% 20% 88% 00%

8 GRID SIATKA MODUŁOWA STRONY - Grid strony głównej Miasta Stołeczne Warszawa - Księga Identyfikacji Wizualnej Portalu Miejskiego Strona 8 Grid strony głównej, opiera się o bazowy grid 88% ze specyficznymi ustawieniami marginesów. 00% Główne kolumny oddzielone są marginesem 4,375rem w pionie. Elementy kategorii odzielone są marginesami,85rem w poziomie i,85rem w pionie. 4,375 66% 20% 4,375 20%,85 20% 20% 20% 20%,85 4,375 88% 4,375 00%

9 Strona 9 Miasta Stołeczne Warszawa - Księga Identyfikacji Wizualnej Portalu Miejskiego GRID SIATKA MODUŁOWA STRONY - Grid podstrony Na podstronach główne menu umieszczone jest w sekcji głównej z wyszukiwarką i ma szerokość 8 kolumn. 00% Banner promocyjny musi wpasować się wymiarami w siatkę. Szerokość banneru musi stanowić wielokrotność szerokości kolumny i zachowywać przypisane im marginesy. 66% 20% 88% 00%

10 GRID SIATKA MODUŁOWA STRONY - Grid serwisu specjalnego Miasta Stołeczne Warszawa - Księga Identyfikacji Wizualnej Portalu Miejskiego Strona 0 Grid serwisu specjalnego jest połączeniem siatki modułowej strony głównej oraz podstrony. Element menu nawigacyjnego znajdującego się pod głównym sliderem. 00% 88% 42% 42% 88% 20% 20% 20% 20% 88% 00%

11 Strona Miasta Stołeczne Warszawa - Księga Identyfikacji Wizualnej Portalu Miejskiego GRID SIATKA MODUŁOWA STRONY - Budowa strony głownej na podstawie siatki Za pomocą elementów opisanych w tym dokumencie oraz siatce modułowej możliwe jest opracowanie wielu kombinacji projektu graficznego dostosowanego do specyficznego kontekstu. Nagłówek 2 kolumn 00% Po lewej stronie umieszczony został projekt graficzny strony głównej, a po prawej jego interpretacja ze wskazaniem elementów z poszczególnych rozdziałów. Aktualności 2 kolumn 88% Nagłówek kategorii 2 kolumn 88% Box z kategoriami 2 kolumn 88% Nagłówek kategorii 2 kolumn 88% Box z zakładkami 2 kolumn 88% Nagłówek kategorii 2 kolumn 88% Box z zakładkami 2 kolumn 88% Stopka 2 kolumn 00% Box z newsletterem 2 kolumn 88%

12 ELEMENTY STRONY - Nagłówek strony głównej Miasta Stołeczne Warszawa - Księga Identyfikacji Wizualnej Portalu Miejskiego Strona 2 Nagłówek pełni kluczową rolę na stronie głównej oraz głównych podstronach. Jest zarówno elementem informacyjno-identyfikacyjnym jak i promocyjnym. Zdjęcie będzie elementem zmiennym. Zdjęcie w nagłówku powinno być dobierane w taki sposób, by podkreślało charakter miasta i jego wyjątkowe cechy. Rolą zdjęcia jest prezentacja unikalnych cech i atrakcji miasta. Zdjęcie nie powinno być wykorzystywane jako forma bannera promocyjnego, a więc służyć do reklamowania wydarzeń, akcji itp.. Wygląd nagłówka. 2. Sekcja główna z wyszukiwarką 2a) Typografia: Open Sans semibold italic,5 rem, #44042, tło: #ffffff 2b) Typografia: Open Sans regular rem, #ffffff, tło: # c) Typografia: Open Sans regular rem, #44042, tło: #ffffff 3. Prawa strona nagłówka. Prawa część nagłówka zawierająca meta nawigację Typografia: Open Sans rem, #ffffff 4. Elementy społecznościowe c 2a 2b

13 Strona 3 Miasta Stołeczne Warszawa - Księga Identyfikacji Wizualnej Portalu Miejskiego ELEMENTY STRONY - Nagłówek podstron Na podstronach portalu Urzędu m.st Warszawy sekcja główna z wyszukiwarką została zaprojektowana jako element o charakterze informacyjno-nawigacyjnym. Pojawia się ona na wszystkich stronach znajdujących się w hierarchii poniżej pierwszego poziomu. a c b Rolą tego elementu jest czytelne, a jednocześnie nieinwazyjne zasygnalizowanie przynależności do stron Urzędu Miasta. d. Budowa nagłówka. a) Znak promocyjny b) Meta nawigacja Typografia: Open sans, rem, #ffffff c) Pole szukania Typografia: Open sans semibold italic,,5rem, #44042, tło: #ffffff. d) Menu Typografia: Open sans regular rem, #44042, tło: #ffffff.

14 ELEMENTY STRONY - Menu główne Miasta Stołeczne Warszawa - Księga Identyfikacji Wizualnej Portalu Miejskiego Strona 4 Menu główne pełni w serwisie rolę podstawowego elementu nawigacyjnego. Zostało zaprojektowane w taki sposób, by poszczególne pozycje pełniły jednocześnie funkcję nagłówka identyfikacyjnego przynależności danej podstrony do jednej z głównych sekcji. Wygląd menu głównego. 2 2a 2b. Fragment zwiniętego menu głównego z elementami: zaznaczonym i nieaktywnym a) Open Sans regular, rem, #fffffff, Tło: #CC3333 b) Open Sans regular, rem, # 44042, Tło: #ffffff. 2. Menu rozwijane. a) Element aktywny menu głównego. Typografia: Open Sans regular, rem, #ffffff, Tło: #CC3333 b) Element niezaznaczony menu rozwijanego Typografia: Open Sans regular, rem, #ffffff, Tło: #4a b 3a

15 Strona 5 Miasta Stołeczne Warszawa - Księga Identyfikacji Wizualnej Portalu Miejskiego ELEMENTY STRONY - Boks Boxy są obszarami obramowującymi i grupującymi treści strony. Szerokość boksów wyznaczana jest na podstawie gridu.. Wygląd boksu. 2. Elementy boksu a) Nagłówek Tło: # cc3333. Typografia: Open sans bold, rem, #ffffff b) Open Sans regular, rem, #44042 c ) Kolor tła boksu # ff2f2 2 2a d) Linia oddzielająca. 2b 2d 2c

16 ELEMENTY STRONY - Boks z zakładkami Miasta Stołeczne Warszawa - Księga Identyfikacji Wizualnej Portalu Miejskiego Strona 6 Zakładki są elementami umożliwiającymi przełączanie treści bez przeładowania strony. Jest to rozwiązanie pożądane w przypadku dużej ilości informacji zgrupowanej wg określonych kryteriów.. Wygląd boxu z zakładkami. 2. Odległość między zakładkami 0 px. 3. Budowa zakładek a) Zakładka aktywna Tło:#4823 Typografia: Open Sans bold, rem, #fffffff b) Zakładka nieaktywna Tło: #706f7 Typografia: Open Sans regular, rem, #ffffff a 3b

17 Strona 7 Miasta Stołeczne Warszawa - Księga Identyfikacji Wizualnej Portalu Miejskiego ELEMENTY STRONY - Boks osoby Box lista osób to element grupujący osoby w sekcjach strony poświęconych m.in. kulturze i sztuce.. Wygląd listy. 2. Wygląd pojedynczego elementu a) Zdjęcie b) Opis Imię i nazwisko: Open Sans bold,,25rem, #44042, Stanowisko: Open Sans regular, rem #58595b. 3. Tło #ffffff 2 2a 2b 3

18 ELEMENTY STRONY - Odnośniki Miasta Stołeczne Warszawa - Księga Identyfikacji Wizualnej Portalu Miejskiego Strona 8 Odnośniki są kluczową częścią strony umożliwiającą nawigację za pomocą tekstu.. Odnośnik listy elementów znajdujących się w artykule. 2. Lista odnośników w artykule. 3. Odnośniki w postacji Breadcrumba. 4. Różnego rodzaju inne odnośniki wykorzystywane w projekcie. a) Odnośnik w postacji linków Typografia: Open Sans semibold, rem # Czym jest lorem ipsum? Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. b) Odnośnik tytułów aktualności Typografia: Open Sans regular, 0,75rem, #44042, Open sans semibold rem, # Aktywne (w zależności w jakiej głównej kategorii jesteśmy): Open Sans semibold rem, # cc3333, # 4823, # 076ac 4 4a 4b

19 Strona 9 Miasta Stołeczne Warszawa - Księga Identyfikacji Wizualnej Portalu Miejskiego ELEMENTY STRONY - Przyciski Przyciski zostały zaprojektowane jako element ilustracyjny użyto elementów nawiązujących do stylistyki znaku promocyjnego.. przycisk umieszczony w skrótach aktualności i artykułów, prowadzący do zakładek z całą ich treścią. 2 2a 2b Tło: #076ab, Typografia: Open Sans semibold,,85rem, #ffffff. 2. Przycisk przenoszący do następnej strony 3 Typografia: Open Sans semibold rem # ffffff a) Tło nie aktywne: # 706f7 b) Tło aktywne: # 076ab. 3. Przycisk wyboru kategorii. 4. Przycisk szukania. Tło: # 076ab, ikonka #ffffff Przycisk powrotu na górę strony. Tło: #076ab, ikonka #ffffff. Typografia: Open Sans regular, 0.75rem # Przycisk dropdowna. Tło: # 0099cb, 6 8 Typografia: Open Sans regular, rem # ffffff. 7. Przycisk przekierowujący do określonej kategorii. Tło: #cc3333. Typografia: rem, #ffffff 8. Przycisk służący do zmiany galerii zdjęć. Tło: #ffffff. 7 9 Ikonka: # Przycisk akcji w artykule. Tło: #f5f5f5, Ikonka: # ddb

20 ELEMENTY STRONY - Kroki Miasta Stołeczne Warszawa - Księga Identyfikacji Wizualnej Portalu Miejskiego Strona 20 Na potrzeby objaśnienia Użytkownikowi procesu załatwiania spraw urzędowych powstał diagram obrazujący procedurę w kolejnych krokach.. Wygląd kroków w procesie. 2. Elementy ikony kroku Kolor tła: #c6c5c8 Cyfra: Open Sans regular,,5rem Tekst: Open Sans regular, rem, #

21 Strona 2 Miasta Stołeczne Warszawa - Księga Identyfikacji Wizualnej Portalu Miejskiego ELEMENTY STRONY - Wyróżnienie wybranej treści - zakładki aktualności Na potrzeby wyróżnienia wydarzeń szczególnie ważnych dla miasta powstały dwa zamiennie stosowane sposoby ich prezentacji. Pierwszy z nich to slider, które pozwalają dynamicznie wyświetlać zapowiedzi artykułów połączone ze zdjęciami.. Wygląd slidera. 2. Slider. a) Zakładka główna aktywna b) Zakładka pozioma zaznaczona. Tło: #ffffff, Typografia: Open Sans regular, rem #cc3333 c) Zakładka pozioma niezaznaczona. Tło: #ffffff, Typografia: Open Sans regular, rem # a d) Opis zdjęcia. Tło: #44042, Typografia: Nagłówek - Open Sans semibold,,5rem #ffffff. Treść typografia: Open Sans,regular, rem #ffffff. 2d 2c 2b

22 ELEMENTY STRONY - Wyróżnienie wybranych treści - wydarzenia promowane Miasta Stołeczne Warszawa - Księga Identyfikacji Wizualnej Portalu Miejskiego Strona 22 Drugim sposobem podkreślenia ważnych dla miasta treści jest boks wydarzenia promowane.. Wygląd boksu wydarzenie promowane. 2. Elementy boksu wydarzenie promowane. a) Zdjęcie lub ilustracja nawiązująca do wydarzenia. b) Tytuł wydarzenia Tekst: Tło: #44042, Typografia: Nagłówek - 2b 2a Open Sans semibold,,5rem,#ffffff. c) Treść typografia: Open Sans regular, rem, #ffffff 2 2c

23 Strona 23 Miasta Stołeczne Warszawa - Księga Identyfikacji Wizualnej Portalu Miejskiego ELEMENTY STRONY - Stopka Stopka jest elementem zamykającym stronę. Zawiera informacje o prawach autorskich, odnośniki dotyczące polityki prywatności oraz kontakt.. Wygląd stopki strony głównej. 2. Zdjęcie promujące miasto Warszawę. 3. Znak promujący m.st. Warszawę. 4. Menu

24 ELEMENTY STRONY - Komunikaty specjalne Miasta Stołeczne Warszawa - Księga Identyfikacji Wizualnej Portalu Miejskiego Strona 24 Komunikat specjalny jest elementem wprowadzanym na stronę w przypadku pojawienia się wyjątkowo istotnych informacji, które mają w pierwszej kolejności przyciągnąć uwagę użytkownika.. Wygląd komunikatu na stronie głównej. Typografia: Open Sans regular, rem #cc3333 (w kontrze#ffffff) Komunikat specjalny po rozwinięciu. Typografia: Open Sans regular rem, # UWAGA: Komunikat przysłania treść zawartą pod nim (nie przesuwa jej w dół).

25 Strona 25 Miasta Stołeczne Warszawa - Księga Identyfikacji Wizualnej Portalu Miejskiego ELEMENTY STRONY - Elementy typograficzne. Wygląd artykułu. a b c a) Nagłówek pierwszego stopnia Open Sans semibold,,85rem, #4a4848 a b b) Data publikacji. Open Sans regular, 075rem, #4a4848 c) Wtyczki społecznościowe oraz akcje np:. pobierz artykuł w pdf d d) Odnośniki w artykule e) Podpis pod zdjęciem: Open Sans regular, #4a4848 e f) Nagłówek drugiego stopnia: Open Sans bold,,5rem, #4a4848 g) Tekst standardowy Open Sans regular, rem #58595b. f g

26 ELEMENTY STRONY - Elementy typograficzne Miasta Stołeczne Warszawa - Księga Identyfikacji Wizualnej Portalu Miejskiego Strona 26. Wygląd artykułu. h) Video, 8 kolumn i) Slider zdjęć, 2 kolumn j) Miniaturki zdjęć, 2 kolumny h m k) Legenda l) Mapa, 7 kolumn m) Lista plików do pobrania, 2 kolumn i k l j

27 Strona 27 Miasta Stołeczne Warszawa - Księga Identyfikacji Wizualnej Portalu Miejskiego ELEMENTY STRONY - Elementy wysuwane Elementami wysuwanymi w tym dokumencie nazywane będą bloki pojawiające się po kliknięciu na link, które zostaną rozwinięte poniżej danego odnośnika (jednocześnie przesuwając treść znajdującą się pod nimi). b a. Blok wysuwany z adresem i mapą. Tło: #4a4848 a) Mapa b b) Tytuł. Open Sans semibold,,25rem, #ffffff c) Dane adresowe. Open Sans semibold, #ffffff. Tło: rem, # 58595b (przezroczystość 90%) Zapamiętaj d d) Przycisk Zapamiętaj. Open Sans semibold #ffffff. Tło:,25rem, #076ac.

28 ELEMENTY STRONY - breadcrumbs Miasta Stołeczne Warszawa - Księga Identyfikacji Wizualnej Portalu Miejskiego Strona 28 Breadcrumbs to forma nawigacji w serwisie pozwalająca użytkownikowi na określenie, w którym miejscu na mapie serwisu aktualnie się znajduje.. Umiejscowienie breadcrumbs. a) Breadcrumbs Typografia: Open Sans Regular, 0,875rem, #4a4848 b) Aktywny: Typografia: Open Sans Bold, 0,875rem, #cc3333. a b

29 Strona 29 Miasta Stołeczne Warszawa - Księga Identyfikacji Wizualnej Portalu Miejskiego ELEMENTY STRONY - Teasery ze znakiem promocyjnym miasta Teasery to elementy graficzne, które mają ne celu podniesienie oglądalności promowanych podstron w serwisie. Nazwą teaser w tym dokumencie określany będzie każdy graficzny element promocyjny, który promuje strony wewnątrz struktury serwisu Urzędu m. st. Warszawy. Dla porządku nazewnictwa każdy element graficzny odnoszący się do stron zewnętrznych będzie nazywany bannerem.. Wygląd teasera ze znakiem promocyjnym

30 ELEMENTY STRONY - Teasery wewnętrzne Miasta Stołeczne Warszawa - Księga Identyfikacji Wizualnej Portalu Miejskiego Strona 30 Teaser wewnętrzny powstał, aby promować strony dotyczące ważnych dla miasta wydarzeń kulturalnych, oświatowych, społecznych oraz biznesowych.. Wygląd teasera wewnętrznego 2. Szczegóły teasera. a) Transparentny pasek z tekstem Kolor: #cc3333 Przeźroczystość (opacity): 90% 2 Typografia: Open Sans Regular 2d b) Transparentny pasek z tekstem Kolor: #076ac Przeźroczystość 2a 2b 2c (opacity): 90% Typografia: Open Sans Regular c) Transparentny pasek z tekstem Kolor: #4823 Przeźroczystość (opacity): 90% Typografia: Open Sans Regular d) Zdjęcie lub ilustracja w tle.

31 Strona 3 Miasta Stołeczne Warszawa - Księga Identyfikacji Wizualnej Portalu Miejskiego ELEMENTY STRONY - Wyszukiwanie mapowe. Podstawowy widok wyszukiwania mapowego a) Nagłówek pola. a Pole do wpisania recznego. Tło: #e0e0e0 Typografia: Open sans regular, rem, # a 3. Wybór filtrów. Tło: # Typografia: Open sans regular, rem, #ffffff 4 a) Akcja listy rozwijanej. Tło: #23f20. Ikonka: #ffffff. 4a 4. Wybór kategorii obiektów a) Pole do zaznaczania. Obrys: # Typografia: rem,# Mapa Przycisk służący do wyszukania zaznaczonych powyżej elementów. Tło: # cc3333 Typografia:,25rem, #ffffff.

32 ELEMENTY STRONY - Wyszukiwanie połączeń Miasta Stołeczne Warszawa - Księga Identyfikacji Wizualnej Portalu Miejskiego Strona 32. Widok wyszukiwania połączeń a) Tło, # ff2f2 b) Nagłówek pola, Typografia: # b 3 5 a 2. Pole wyboru. Tło: # Typografia: Open sans regular, rem, #ffffff. 3. Przycisk automatycznego znajdowania lokalizacji w jakiej jesteśmy. Tło: # Ikonka: #ffffff Radio button - wybór opcji (odjazd, przyjazd). 5. Mapa

33 Strona 33 Miasta Stołeczne Warszawa - Księga Identyfikacji Wizualnej Portalu Miejskiego SERWIS SPECJALNY - Podstawowe informacje Serwis specjalny jest należącym do Urzędu Miasta podserwisem tematycznym związanym z zagadnieniem wymagającym szczególnego wydzielenia w strukturze stron.

34 SERWIS SPECJALNY- Elementy budowy serwisu specjalnego Miasta Stołeczne Warszawa - Księga Identyfikacji Wizualnej Portalu Miejskiego Strona 34 Nagłówek serwisu specjalnego pełni kluczową rolę na stronie głównej. Zdjęcie w nagłówku oraz podpis powinny być dobierane w taki sposób, by podkreślały charakter serwisu i jego wyjątkowe cechy. Rolą zdjęcia jest prezentacja unikalnych cech i atrakcji miasta.. Wygląd nagłówka Przycisk akcja wróc do portalu głównego. 3. Znak promocyjny Środek nagłówka Typografia: Open Sans bold oraz regular # Prawa część nagłówka zawierająca meta nawigację Typografia: Open Sans, #ffffff. 6. Elementy społecznościowe. 7. Przycisk akcji przenoszącej w dół strony.

35 Strona 35 Miasta Stołeczne Warszawa - Księga Identyfikacji Wizualnej Portalu Miejskiego SERWIS SPECJALNY- Boksy w serwisie specjalnym Miejskie serwisy specjalne odznaczają się dużą różnorodnością.przykładowe moduły zastosowane w innych stronach głównych serwisów miejskich. 2. Moduł z najważniejszymi linkami ze strony. 2. Moduł z grafiką promocyjną. 3. remarketing kontekstowy kategorii Moduł linków w postaci logotypów. 5. Moduł portali społecznościowych. 6. Moduł zgłoszenia się i chęć udziału w plebistycie

36 SERWIS SPECJALNY- Elementy budowy serwisu specjalnego Miasta Stołeczne Warszawa - Księga Identyfikacji Wizualnej Portalu Miejskiego Strona 36. Moduł linków, przenoszących do szczegółowych informacji o konkretnej osobie oraz oficjalnego profilu danej osoby w portalu społecznościowym, przykładowo Twitter. 2. Moduł informacyjny. 3. Moduł akcji logowania Moduł powrotu do strony startowej. 3 4

37 Strona 37 Miasta Stołeczne Warszawa - Księga Identyfikacji Wizualnej Portalu Miejskiego SERWIS SPECJALNY- Elementy budowy serwisu specjalnego Projekt graficzny serwisu specjalnego umożliwia dostosowanie niektórych elementów do kolorystyki identyfikującej ten serwis. Należy jednakże przestrzegać poniższych zasad: Zmiana kolorystyki elementów powinna być dokonywana tylko w przypadku gdy serwis specjalny wykorzystuje zaprojektowaną wcześniej księgę znaku, identyfikację wizualną lub inny dokument opisujący pożądaną kolorystykę, którą serwis mógłby przejąć i która nawiązywać będzie do jego charakteru Dopuszczalna zmiana kolorów w obrębie serwisu specjalnego dotyczy elementów przedstawionych na przykładzie oznaczonych gwiazdką. Serwisy, które wykorzystują herb miejski muszą używać standardowych elementów. Niedopuszczalne jest dowolne dobieranie kolorów dla serwisów nieposiadających swojej identyfikacji wizualnej, w szczególności serwisów wykorzystujących herb miejski.

38 INTERAKCJA Z KURSOREM - Interakcja odnośników oraz pozostałych odnośników Miasta Stołeczne Warszawa - Księga Identyfikacji Wizualnej Portalu Miejskiego Strona 38 Ten rozdział opisuje interakcje odnośników z kursorem. Najazd kursorem na określony element powoduje zmianę jego wyglądu w taki sposób, aby użytkownik otrzymał informację, iż jest to element aktywny.. Po kliknięciu link zmienia kolor oraz pojawia się podkreślenie. #0099CC. 2. Przycisk zmienia kolor na ciemniejszy. 2

39 Strona 39 Miasta Stołeczne Warszawa - Księga Identyfikacji Wizualnej Portalu Miejskiego SEKCJA TEMATYCZNA - Wytyczne projekty graficznego Projekt sekcji tematycznej miasta Warszawy, w naszym wypadku Edukacja, powstał, aby promować stolicę pod kątem edukacyjnym. W kompleksowy sposób ma on tworzyć wizerunek miasta Warszawy, podkreślając jego edukacyjny charakter. W projekcie zostało zawatych wiele elementów informacyjnych, które pomogą określonej grupie edukacyjnej znaleźć to czego szukają. Projekt graficzny sekcji tematycznej portalu miasta Warszawy powstał na bazie projektu Urzędu miasta i jego barw oraz znaku promocyjnego miasta. Nadrzędnym znakiem identyfikującym miasto jest znak promocyjny, a nadrzędną kolorystyką jest kolor czerwony z delikatnymi wstawkami koloru niebieskiego Znak promocyjny stanowi tu element identyfikujący stronę. Projekt graficzny powstał na bazie fontu z rodziny Open Sans. Projekt strony odzwierciedla zasady oraz wytyczne zawarte w dokumentach: Katalog Systemu Identyfikacji Wizualnej Urzędu m.st. Warszawy oraz Katalog Systemu Identyfikacji Wizualnej Znaku Promocyjnego m.st. Warszawy.

40 SEKCJA TEMATYCZNA - Grid podstawowy Miasta Stołeczne Warszawa - Księga Identyfikacji Wizualnej Portalu Miejskiego Strona 40. Projekt strony został oparty na systemie siatki modułowej o szerokości 2 kolumn. Bazowym modułem, który stanowi najmniejszy dopuszczalny blok informacji jest blok o szerokości 2rem 00% 42% Nagłówek oraz stopka stanowią najszersze moduły strony o szerokości 00% które wykraczają poza content strony 2 kolumn. 42% 42% 20% 66% 20% 88% 66% 20% 88% 00%

41 Strona 4 Miasta Stołeczne Warszawa - Księga Identyfikacji Wizualnej Portalu Miejskiego SEKCJA TEMATYCZNA - Dobór zdjęc Zdjęcia są integralnym elementem graficznym strony. Znajdują sie one zarówno w teaserach promocyjnych jak i w tle całego portalu. To one tworzą wizerunek oraz atmosferę portalu. Dlatego właśnie ich dobór jest niezwykle ważny. Zasady doboru zdjęć promujących miasto:. Zdjęcia w sekcji głównej z wyszukiwarką oraz w stopce. Powinny być to zdjęcia wykonane profesjonalnie, o dobrej jakości oraz wysokiej rozdzielczości (nie mniej niż 72dpi) Zdjęcia powinny być stonowane kolorystycznie i dobrze wykadrowane Powinny one przedstawiać Warszawę w sugestywnych detalach architektonicznych bądź krajobrazowych Powinny wyzwalać pozytywne emocje ukazując Warszawę jako miasto piękne, nowoczesne, żywe oraz kulturalne 2 2. Zdjęcia w teaserach muszą być powiązane z tematyką promowanych treści.

42 SEKCJA TEMATYCZNA - Teaser wewnętrzny Miasta Stołeczne Warszawa - Księga Identyfikacji Wizualnej Portalu Miejskiego Strona 42 Teaser wewnętrzny jest elementem promujacym obiekt lub wydarzenie. Jest on podstawowym elementem budującym stronę.. Szczegóły teasera. Wymiary: 2rem a) Transparentny pasek z tekstem Wymiary: 2rem Kolor: #cc3333 Przeźroczystość (opacity): 90% Typografia: Open Sans Regular. Wielkość: rem d a b c b) Transparentny pasek z tekstem Wymiary: 2rem Kolor: #076ac Przeźroczystość (opacity): 90% Typografia: Open Sans Regular. Wielkość: rem c) Transparentny pasek z tekstem Wymiary: 2rem Kolor: #4823 Przeźroczystość (opacity): 90% Typografia: Open Sans Regular. Wielkość: rem d) Zdjęcie lub ilustracja w tle Wymiary: 2rem.

43 Strona 43 Miasta Stołeczne Warszawa - Księga Identyfikacji Wizualnej Portalu Miejskiego SEKCJA TEMATYCZNA - Teaser reklamy Teaser reklamowy to element promujący ważne dla miasta wydarzenie lub obiekt. Prowadzi on do stron zewnętrznych względem portalu miasta. Teaser ten jest wyświetlany w dwóch miejscach:. na stronie głównej, gdzie ma szerokość 8 kolumn 2. na podstronach, gdzie ma szerokość 2 kolumn a) Transparentny pasek z tekstem Kolor: #cc3333 (jeden z kolorów) Przeźroczystość (opacity): 90% Typografia: Open Sans Regular Wielkość: rem. Kolory transparentnych pasków są dopasowane do kolorystyki identyfikacji wizualnej danej kategorii. 2 2a

44