Studia Podyplomowe Grafika Komputerowa i Techniki Multimedialne, 2015/2016, semestr II, dr inż. Robert Banasiak Projektowanie Stron WWW.

Save this PDF as:
 WORD  PNG  TXT  JPG

Wielkość: px
Rozpocząć pokaz od strony:

Download "Studia Podyplomowe Grafika Komputerowa i Techniki Multimedialne, 2015/2016, semestr II, dr inż. Robert Banasiak Projektowanie Stron WWW."

Transkrypt

1 Ćwiczenia Responsive Web Design Praca własna dr inż. Robert Banasiak

2 Wprowadzenie Coraz więcej użytkowników korzysta z Internetu w urządzeniach mobilnych w celu przeglądania stron internetowych. Warto zadbać o użyteczność strony na urządzeniach przenośnych. Rozdzielczości urządzeń mobilnych Pierwszym krokiem do stworzenia responsywnej strony internetowej jest zastanowienie się nad rozdzielczościami wyświetlaczy urządzeń przenośnych, na których strona będzie prezentowana. W głównej mierze interesuje nas szerokość. Rozdzielczości ekranów urządzeń mobilnych jest sporo. Zestawienie najpopularniejszych z nich możemy znaleźć tutaj: Biorąc pod uwagę obecne trendy technologiczne szerokość naszej strony będzie przyjmować takie wartości dla poszczególnych urządzeń: 1050px (komputer) 950px (tablet poziomo) 750px (tablet pionowo) 450px (telefon poziomo) 300px (telefon pionowo) Layout strony Po ustaleniu wymiarów przejdźmy do stworzenia prostego layoutu strony. Postanowiliśmy, że nasz layout będzie wyglądał tak:

3 Nie jest on przypadkowy - zaplanowaliśmy go tak, aby w łatwy sposób można było dopasować go do urządzeń mobilnych o małej szerokości. Warto podkreślić, iż nie wszystkie strony da się zrobić jako responsywne (nie uda nam się przecież przenieść nagłówka na sam dół czy też stopki na samą górę). Warto więc dokładnie zaplanować swój layout, aby można było go swobodnie dopasowywać do poszczególnych szerokości. Nasz został zaplanowany, aby na urządzeniach z najmniejszą rozdzielczością nasza strona wyświetlała się w następujący sposób: Szkielet strony w HTML5 Wiemy jak ma wyglądać nasza strona, przejdźmy więc do programu Dreamweaver CS6 i zajmijmy się kodem HTML. Dla naszego layoutu szkielet wyglądać będzie w sposób następujący (dodaliśmy również zawartość naszej strony): <!DOCTYPE HTML> <html lang="pl"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>strona responsywna</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <!-- header --> <header> <img src="images/header.jpg" alt=""/> </header> <!-- sidebar --> <aside> <nav> <ul> <li><a href="#">start</a></li> <li><a href="#">o firmie</a></li> <li><a href="#">oferta</a></li> <li><a href="#">galeria</a></li> <li><a href="#">kontakt</a></li> </ul> </nav> </aside>

4 <!-- main --> <section id="main"> <h1>rwd tutorial</h1> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras condimentum tempus mi, maximus volutpat urna sollicitudin vitae. Vivamus rutrum mi sit amet commodo rutrum. Suspendisse potenti. Sed a ullamcorper eros. Maecenas dapibus erat mi, a egestas ipsum cursus volutpat. Aliquam posuere mi at consectetur convallis. Cras vitae ligula eget leo ultrices hendrerit nec sed ex. Morbi at ipsum rhoncus, dictum elit in, consectetur lorem. Aliquam suscipit diam sit amet mauris luctus, a egestas magna pharetra. Donec laoreet viverra risus nec fermentum. Maecenas gravida lectus vel ante commodo bibendum. Donec ac pellentesque mi.</p> </section> <!-- footer --> <footer> <p>footstep.pl 2013</p> </footer> </div> </body> </html> Z ważniejszych rzeczy do odnotowania w powyższym kodzie jest to, że arkusz stylów znajduje się w folderze pod nazwą 'css', obrazy znajdują się w folderze 'images' a także dodana została linijka: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> aby zdefiniować szerokość okna przeglądarki dla Media Queries. Formatowanie CSS3 Nasz szkielet jest gotowy, możemy teraz zająć się arkuszem styli CSS, aby nasza strona nabrała odpowiedniego wyglądu. My ustaliliśmy jej szerokość na 1050px tak więc nasz kod CSS wygląda tak: * {padding:0;margin:0; html {width:100%;height:100%; body {font-family:arial, Helvetica, Sans-serif;font-size:14px; line-height:1.5; font-weight:400; color:#434343; background:#fff;.container {width:1050px; margin:0 auto; header {margin:25px 0; header img {width:100%; aside {float:left;width:30%; margin:0 0 25px; aside nav ul {list-style:none; aside nav ul li {margin-bottom:1px; aside nav ul li a {display:block;text-decoration:none; color:#000; background:#ffc000; padding:8px 20px; aside nav ul li a:hover{background:#212121; color:#fff; #main {float:right;width:65%;margin:0 0 25px; footer {clear:both;color:#fff; background:#121212; padding:15px 0 15px 30px;

5 Teraz nasza strona wygląda tak: Można powiedzieć, że strona jest prawie gotowa. Nam jednak zależy na stronie responsywnej Responsywność strony Aby nasza strona stała się stroną responsywną musimy dodać do naszego arkusza CSS warunki Media Queries. Aby posługiwać się warunkami Media Queries musimy dowiedzieć się czym one są i jak działają. Przedstawmy przykładową linię kodu CSS zawierającą warunek Media all and (max-width: 800px) and (min-width: 600px) { /* style css */ W kodzie powyżej został podany warunek który definiuje, że wpisane w nawias klamrowy style będą aktywne tylko dla szerokości okna przeglądarki mniejszej niż 800px gdyż ustaliliśmy wartość maxwidth na 800px i dla szerokości okna przeglądarki większej niż 600px gdyż ustaliliśmy wartość minwidth na 600px. Tak więc wpisane style będą aktywne gdy szerokość okna przeglądarki będzie zawierała się w przedziale od 800px do 600px. Możemy również stosować taki all and (min-width: 600px) { /* style css */ W takim przypadku nie mamy górnej granicy czyli max-width i warunek będzie spełniany za każdym razem kiedy szerokość okna przeglądarki będzie większa niż 600px. Analogiczna sytuacja jest z all and (max-width: 800px) { /* style css */

6 W takim przypadku nie mamy dolnej granicy czyli min-width tak więc warunek będzie spełniany za każdym razem kiedy szerokość okna przeglądarki będzie mniejsza niż 800px. Teraz przejdźmy do ustalania warunków CSS Media Queries dla naszej strony. Najłatwiejszym sposobem jest rozpisanie sobie wszystkich naszych szerokości umieszczając je w warunkach Media Queries bez podawania wartości oraz usuwając skrajne screen and (min-width: px) { /* style dla 1050px screen and (max-width: px) and (min-width: px) { /* style dla 950px screen and (max-width: px) and (min-width: px) { /* style dla 750px screen and (max-width: px) and (min-width: px) { /* style dla 450px screen and (max-width: px) { /* style dla 300px */ Z pierwszego warunku odpowiadającego za wyświetlanie strony na komputerach usunęliśmy górną granicę 'max'. Tym samym ustaliliśmy że ten warunek będzie spełniany dla każdej szerokości większej niż ta którą zdefiniujemy. To samo dotyczy najmniejszego warunku. Tutaj usunęlismy wartość 'min' sprawiając, że warunek będzie spełniany dla każdej szerokości poniżej. 1050px (komputer) Mając przygotowany szkielet możemy zdefiniować wartości dla naszych warunków. Zacznijmy od największego czyli odpowiedzialnego za wyświetlanie strony na komputerach. Wiemy, że nasza strona w tym warunku ma mieć szerokość 1050px, musi więc wyświetlać się w oknie przeglądarki większym niż 1050px tak, aby nie pojawił się na dole poziomy pasek przewijania. Dodajmy jeszcze do naszej wartości 50px 'luzu' na pionowy pasek przeglądania otrzymując w ten sposób wartość 1100px, którą to zastosujemy w pierwszym screen and (min-width: 1100px) { /* style dla 1050px */ 950px (tablet orientacja pozioma) Czas na kolejny warunek. We wcześniejszym zdefiniowaliśmy wartość 1100px jako wartość 'min'. W tym warunku musimy przyjąć tę wartość jako wartość 'max' (aby zachować ciągłość przedziałów). Wartość 'min' określamy w taki sam sposób jak robiliśmy to w poprzednim warunku tak więc otrzymujemy 1000px (950px szerokość strony plus 50px screen and (max-width: 1100px) and (min-width: 1000px) { /* style dla 950px */

7 750px (tablet orientacja pionowa) Kolejny warunek. Sytuacja analogiczna do screen and (max-width: 1000px) and (min-width: 800px) { /* style dla 750px */ 450px (telefon orientacja screen and (max-width: 800px) and (min-width: 500px) { /* style dla 450px */ 300px (telefon orientacja pionowa) W tym przypadku nie mamy wartości 'min' tak więc przepisujemy tylko do wartości 'max' wartość 'min' z poprzedniego screen and (max-width: 500px) { /* style dla 300px */ Możemy teraz przejść do wpisywania w przygotowane warunki style CSS dla naszej screen and (min-width: 1100px) {.container {width:1050px; margin:0 screen and (max-width: 1100px) and (min-width: 1000px) {.container {width:950px; margin:0 screen and (max-width: 1000px) and (min-width: 800px) {.container {width:750px; margin:0 screen and (max-width: 800px) and (min-width: 500px) {.container {width:450px; margin:0 screen and (max-width: 500px) {.container {width:300px; margin:0 auto; Jak widzimy wartość atrybutu margin jest dla każdego warunku taka sama więc możemy wyciągnąć ją poza warunki aby nie powtarzać jej w każdym z nich:.container {margin:0 screen and (min-width: 1100px) {.container {width:1050px;

8 @media screen and (max-width: 1100px) and (min-width: 1000px) {.container screen and (max-width: 1000px) and (min-width: 800px) {.container screen and (max-width: 800px) and (min-width: 500px) {.container screen and (max-width: 500px) {.container {width:300px; Z uwagi na to ze na rynku istnieje jeszcze wiele urządzeń mobilnych również takich o wyświetlaczach z rozdzielczością mniejsza niż 300px dobrym rozwiązaniem będzie zamiana dla najmniejszego warunku wartości szerokości strony z podanej w pikselach na procentową. Zastosujmy więc szerokość 90% całej dostępnej szerokości (max-width: 500px) {.container {width:90%; W tym momencie nasza strona jest już responsywna, lecz przy małych rozdzielczościach staje się nieczytelna. Zróbmy jeszcze porządek w taki sposób, aby z układu dwukolumnowego powstał układ jedno kolumnowy, pamiętając oczywiście o pogrupowaniu odpowiednio powtarzających się (min-width: 1100px) {.container {width:1050px; aside {width:30%; #main (max-width: 1100px) and (min-width: 1000px) {.container {width:950px; aside {width:30%; #main (max-width: 1000px) and (min-width: 800px) {.container {width:750px; aside {width:30%; #main (max-width: 800px) and (min-width: 500px) {.container {width:450px; aside, #main (max-width: 500px) {.container {width:90%; aside, #main {width:100%;

9 Tym prostym sposobem udało nam się stworzyć w pełni responsywną stronę. Pamiętajmy jednak, że nie da się jednoznacznie sprecyzować tworzenia stron responsywnych. Na zajęciach skorzystaliśmy z Media Queries i przetestowaliśmy jedynie ich podstawowe działanie. Istnieją również inne sposoby uzyskania takiego samego efektu np. wykorzystując JavaScript. Nasza wcześniejsza wersja opierała się o stałe wartości pikselowe. Stosując takie rozwiązanie nasza strona dla określonych rozdzielczości przeglądarki ma przypisaną konkretną stałą szerokość. Jak najbardziej gwarantuje to poprawne wyświetlanie się strony, jednak istnieje ryzyko, że dla pewnych rozdzielczości mogą pojawić się po bokach strony puste przestrzenie. Nie jest to pożądane zarówno ze względów estetycznych, jak i ekonomicznych - nie ma potrzeby marnować dostępną przestrzeń na wyświetlaczu, skoro możemy wykorzystać ją w całości. Aby dokonać modyfikacji skupimy się jedynie na arkuszu styli CSS. Kod HTML pozostanie niezmieniony. Aby oprzeć naszą stronę o wartości procentowe musimy zmodyfikowac element '.container'..container {width:90%;max-width:1050px;margin:0 auto; Jak widać nadaliśmy mu szerokość na 90% dostępnej przestrzeni oraz ustaliliśmy jego maksymalną szerokość na 1050px. Następnym krokiem będzie modyfikacja naszych warunków Media Queries. Zdefiniowaliśmy już style dla naszego elementu '.container' pozostało nam tylko uporządkowanie układu kolumn na naszej stronie. We wcześniejszej wersji ustaliliśmy, że zmiana układu z dwukolunowego do jednokolumnowego ma następować przy szerokości przeglądarki 800px. W tym przypadku możemy skorzystać z takich warunków Media (min-width: 800px) { /* tutaj style powyżej 800px (max-width: 800px) { /* tutaj style poniżej 800px */ Zastosowanie takich warunków umożliwi nam zdefiniowanie stylów dla szerokości przeglądarki powyżej 800px oraz poniżej 800px. Uzupełnijmy nasze warunki o odpowiednie (min-width: 800px) { aside {width:30%; #main (max-width: 800px) { aside, #main {width:100%; Teraz cały nasz kod CSS powienien wyglądać teraz tak: * {padding:0;margin:0; html {width:100%;height:100%;

10 body {font-family:arial, Helvetica, Sans-serif;font-size:14px;line-height:1.5; font-weight:400;color:#434343;background:#fff;.container {width:90%;max-width:1050px;margin:0 auto; header {margin:25px 0; header img {width:100%; aside {float:left;margin:0 0 25px; aside nav ul {list-style:none; aside nav ul li {margin-bottom:1px; aside nav ul li a {display:block;textdecoration:none;color:#000;background:#ffc000;padding:8px 20px; aside nav ul li a:hover{background:#212121;color:#fff; #main {float:right;margin:0 0 25px; footer {clear:both;color:#fff;background:#121212;padding:15px 0 15px 30px;margin:0 0 (min-width: 800px) { aside {width:30%; #main (max-width: 800px) { aside, #main {width:100%; Jak widać takie rozwiązanie pozwoliło nam znacznie zmniejszyć zawartość arkusza CSS, a nasza strona wykorzystuje teraz znacznie większą cześć wyświetlacza przy mniejszych rozdzielczościach, przez co zyskuje na czytelności. W ramach pracy własnej zapraszam do opracowania własnej koncepcji serwisu opartego na szablonie responsywnym.

METROPOLITALNE FORUM WÓJTÓW, BURMISTRZÓW, PREZYDENTÓW I STAROSTÓW

METROPOLITALNE FORUM WÓJTÓW, BURMISTRZÓW, PREZYDENTÓW I STAROSTÓW 1. Geneza znaku przeniesienie treści na obraz + + OBSZAR/ TEREN CZĘŚĆ WSPÓLNA / NAKŁADANIE SIĘ WSPÓLNYCH INTERESÓW ENERGIA / RUCH PRZEZ WZAJEMNE WSPIERANIE 2. Opis budowy i proporcji znaku (wraz z siatką

Bardziej szczegółowo

Księga znaku. Copyright MARR S.A. - Małopolska Agencja Rozwoju Regionalnego S.A. All rights reserved

Księga znaku. Copyright MARR S.A. - Małopolska Agencja Rozwoju Regionalnego S.A. All rights reserved Księga znaku Spis treści 1. Logotyp 1.1 Konstrukcja znaku 1.2 Pole ochronne znaku 1.3 Minimalne wielkości 1.4 Kontra 1.5 Opcjonalne wersje 1.6 Niedozwolone modyfikacje 2. Kolory 1.1 Logotyp - konstrukcja

Bardziej szczegółowo

POKAZUJEMY UCZYMY ZASPAKAJAMY POTRZEBĘ POZNANIA

POKAZUJEMY UCZYMY ZASPAKAJAMY POTRZEBĘ POZNANIA EKSPOZYCJA: Bezkresne bogactwo oceanów reprezentowane w logo przez największe ssaki morskie: Długopłetwiec (Megaptera novaeangliae), zwany też humbakiem. POKAZUJEMY UCZYMY ZASPAKAJAMY POTRZEBĘ POZNANIA

Bardziej szczegółowo

Przykładowy plik pdf do testowania załączników

Przykładowy plik pdf do testowania załączników Przykładowy plik pdf do testowania załączników Anonim 1 Pierwsza Lorem ipsum dolor sit amet consectetuer pede et in natoque ut. Consectetuer commodo vitae consectetuer volutpat Vivamus ut elit sit nulla

Bardziej szczegółowo

4. Materiały reklamowe

4. Materiały reklamowe 4. 4.1 Zasady konstrukcji layoutów - grid Nadrzędną, główna zasadą konstruowania przestrzeni poszczególnych projektów graficznych jest modułowy podział parzysty formatu. Wysokość i szerokość medium dzielona

Bardziej szczegółowo

Porównanie efektywności algorytmu ewolucyjnego z metodą podziału i ograniczeń dla problemu komiwojażera

Porównanie efektywności algorytmu ewolucyjnego z metodą podziału i ograniczeń dla problemu komiwojażera Porównanie efektywności algorytmu ewolucyjnego z metodą podziału i ograniczeń dla problemu komiwojażera Teodor Niżyński 14 listopada 2016 1 Wstęp teoretyczny Lorem ipsum dolor sit amet, consectetur adipiscing

Bardziej szczegółowo

byś cieszył się zielenią

byś cieszył się zielenią motyw Obrazem przewodnim jest napis / nazwa wraz z zielonym elementem ściętej trawy o grubości Wersja podstawowa elementów kroju pisma. Dopuszczalne, w przypadku bardzo małych rozmiarów bądź niemożności

Bardziej szczegółowo

BRAND BOOK. Ośrodek Rehabilitacji Jeży Jerzy dla Jeży w Kłodzku

BRAND BOOK. Ośrodek Rehabilitacji Jeży Jerzy dla Jeży w Kłodzku BRAND BOOK Ośrodek Rehabilitacji Jeży Jerzy dla Jeży w Kłodzku IDEA: Konstrukcja logo fundacji Jerzy dla Jeży jest zamierzona w taki sposób, aby łatwo kojarzyła się odbiorcy z przedmiotem działalności,

Bardziej szczegółowo

Księga znaku Swiss Contribution

Księga znaku Swiss Contribution Zasady stosowania znaku 2. Wersja podstawowa znaku 3. Forma i budowa znaku 4. Kolory dla znaku kolorowego i monochromatycznego 5. Liternictwo w znaku 6. Pole ochronne znaku 7. Swiss Contribution w ciągu

Bardziej szczegółowo

Zasady przygotowania referatu, artykułu, publikacji

Zasady przygotowania referatu, artykułu, publikacji Zasady przygotowania referatu, artykułu, publikacji Objętość referatu Objętość 16-20 stron + bibliografia + streszczenie; Układ strony Rozmiar:A4 Orientacja: Pionowa Marginesy: lewy 3 cm, pozostałe 1,5

Bardziej szczegółowo

KSIĘGA ZNAKU CBSS POLISH PRESIDENCY 2015-2016

KSIĘGA ZNAKU CBSS POLISH PRESIDENCY 2015-2016 CBSS POLISH PRESIDENC CBSS POLISH PRESIDENC SPIS TREŚCI LOGO OPIS STOSOWANIE ZNAKU JAKO MOTWU GRAFICZNEGO WERSJE LOGO KONSTRUKCJA LOGO WERSJA ANGIELSKA KONSTRUKCJA LOGO WERSJA POLSKA POLE OCHRONNE WERSJA

Bardziej szczegółowo

IDENTYFIKACJA WIZUALNA

IDENTYFIKACJA WIZUALNA LOGOTYP POLE OCHRONNE KOLORY PODSTAWOWE I UZUPE NIAJ CE 2 RGB PANTONE CMYK RGB PANTONE CMYK R 02, G 03, B 05 PANTONE 425 C C 0, M 0, Y 0, K 74 R 9, G 208, B 65 PANTONE 382 C C 34, M 0, Y 85, K 0 0/0/0/74

Bardziej szczegółowo

64 BGK BAZOWA KSIĘGA MARKI NOŚNIKI IDENTYFIKACJI

64 BGK BAZOWA KSIĘGA MARKI NOŚNIKI IDENTYFIKACJI 64 BGK BAZOWA KSIĘGA MARKI NOŚNIKI IDENTYFIKACJI Dragon Rouge 04 66 BGK BAZOWA KSIĘGA MARKI Druki fi r m o w e Dragon Rouge 04 7. Visual language guidelines Poniższy szablon komunikatu prasowego ma charakter

Bardziej szczegółowo

struktura i funkcja białka seminarium M.Eng. Michal Adam Michalowski

struktura i funkcja białka seminarium M.Eng. Michal Adam Michalowski struktura i funkcja białka seminarium M.Eng. Michal Adam Michalowski michal.michalowski@uwr.edu.pl michaladamichalowski@gmail.com michal.michalowski@uwr.edu.pl https://mmichalowskiuwr.wordpress.com/ Sienkiewicza

Bardziej szczegółowo

Księga znaku SWISSSTANDARDS.PL

Księga znaku SWISSSTANDARDS.PL Księga znaku SWISSSTANDARDS.PL 1 KOLOR SKALA SZAROŚCI WARIANT 1 str. 2 / / str. 3 / / ZNAK POD, WARIANTY str. 4 / / str. 5 / / SKALO str. 6 / / KOLORY DLA KOLOROWEGO, MONOCHROMATYCZNEGO str. 7 / / str.

Bardziej szczegółowo

KSIĘGA IDENTYFIKACJI WIZUALNEJ NFOŚiGW. Cz. 3 PODRĘCZNIK STOSOWANIA OZNACZEŃ Z UŻYCIEM LOGOTYPU NFOŚIGW DLA PODMIOTÓW ZEWNĘTRZNYCH

KSIĘGA IDENTYFIKACJI WIZUALNEJ NFOŚiGW. Cz. 3 PODRĘCZNIK STOSOWANIA OZNACZEŃ Z UŻYCIEM LOGOTYPU NFOŚIGW DLA PODMIOTÓW ZEWNĘTRZNYCH KSIĘGA IDENTYFIKACJI WIZUALNEJ NFOŚiGW Cz. 3 PODRĘCZNIK STOSOWANIA OZNACZEŃ Z UŻYCIEM LOGOTYPU NFOŚIGW DLA PODMIOTÓW ZEWNĘTRZNYCH 2015 Spis treści. Cz. 3 A Cz. 3 B Artykuł sponsorowany w prasie. Siatka

Bardziej szczegółowo

Wstęp. Niniejsza Księga Identyfikacji Wizualnej stanowi kompendium wiedzy na temat systemu wizualnego Szlaku Piastowskiego.

Wstęp. Niniejsza Księga Identyfikacji Wizualnej stanowi kompendium wiedzy na temat systemu wizualnego Szlaku Piastowskiego. Wstęp Niniejsza Księga Identyfikacji Wizualnej stanowi kompendium wiedzy na temat systemu wizualnego Szlaku Piastowskiego. Przed rozpoczęciem pracy z identyfikacją Szlaku Piastowskiego należy dokładnie

Bardziej szczegółowo

Akademia Ignatianum w Krakowie

Akademia Ignatianum w Krakowie Akademia Ignatianum w Krakowie Wydział Filozoficzny Instytut Filozofii Imię Nazwisko Pełny tytuł pracy Praca licencjacka Promotor pracy: prof. dr. hab. Jan Nowak Oświadczam, że ta praca licencjacka została

Bardziej szczegółowo

4. Druki i dokumenty

4. Druki i dokumenty 4. 4. z użyciem godła UMK 59 8x 7x System Identyfikacji Wizualnej y yy prof. dr hab. Andrzej Tretyn 3 REKTOR tel. +48 56 654 9 5 tel. kom.: +48 60 34 567 fax: +48 56 654 9 44 e-mail: rektor@umk.pl www.umk.pl

Bardziej szczegółowo

ZASADY STOSOWANIA. LOGOTYPU Com-Com Zone

ZASADY STOSOWANIA. LOGOTYPU Com-Com Zone ZASADY STOSOWANIA LOGOTYPU Com-Com Zone 1) LOGOTYP 2) TYPOGRAFIA 3) LAYOUT 4) KOLORYSTYKA LOGOTYP FORMA PODSTAWOWA ZNAKU I ODWRÓCONA (W KONTRZE) STOWARZYSZENIE SIEMACHA 2016 strona 2 LOGOTYP FORMA PODSTAWOWA

Bardziej szczegółowo

ZASADY STOSOWANIA. LOGOTYPU AS Progres

ZASADY STOSOWANIA. LOGOTYPU AS Progres ZASADY STOSOWANIA LOGOTYPU AS Progres 1) LOGOTYP 2) TYPOGRAFIA 3) LAYOUT 4) KOLORYSTYKA LOGOTYP FORMA PODSTAWOWA ZNAKU I ODWRÓCONA (W KONTRZE) STOWARZYSZENIE SIEMACHA 2016 strona 2 LOGOTYP FORMA PODSTAWOWA

Bardziej szczegółowo

ALFABETYCZNY SPIS MAREK WĘDKARSKICH

ALFABETYCZNY SPIS MAREK WĘDKARSKICH KATALOG HANDLOWY 0/0 ALFABETYCZNY SPIS MAREK WĘDKARSKICH Marka Dystrybutor Strona Marka Dystrybutor Strona KATALOG HANDLOWY 0/0 Ulica zmyślona Tel. + Y, marka Z, marka X, marka Y, marka Z, marka Ulica

Bardziej szczegółowo

Księga identyfikacji wizualnej Szwajcarsko-Polskiego Programu Współpracy Część 1 - Księga znaku Swiss Contribution

Księga identyfikacji wizualnej Szwajcarsko-Polskiego Programu Współpracy Część 1 - Księga znaku Swiss Contribution Księga identyfikacji wizualnej Szwajcarsko-Polskiego Programu Współpracy Część 1 - Księga znaku Swiss Contribution 2 Zasady stosowania znaku 1. Filozofia znaku 2. Wersja podstawowa znaku 3. Forma i budowa

Bardziej szczegółowo

Szlak Piastowski. Księga znaku. Spis treści

Szlak Piastowski. Księga znaku. Spis treści Szlak Piastowski Księga znaku Spis treści 02 04 05 06 07 08 09 10 12 13 podstawowa wersja znaku geneza znaku budowa i proporcje pole podstawowe znaku kolorystyka warianty achromatyczne warianty monochromatyczne

Bardziej szczegółowo

Idea of responsive web design. Roman Białek Mateusz Mikołajczak Kacper Palmowski Krzysztof Szot

Idea of responsive web design. Roman Białek Mateusz Mikołajczak Kacper Palmowski Krzysztof Szot Idea of responsive web design Roman Białek Mateusz Mikołajczak Kacper Palmowski Krzysztof Szot Czym tak właściwie jest responsive web design? Jest to podejście do projektowania stron internetowych w taki

Bardziej szczegółowo

ZASADY STOSOWANIA. LOGOTYPU SIEMACHA Spot

ZASADY STOSOWANIA. LOGOTYPU SIEMACHA Spot ZASADY STOSOWANIA LOGOTYPU SIEMACHA Spot 1) LOGOTYP 2) TYPOGRAFIA 3) LAYOUT 4) KOLORYSTYKA LOGOTYP FORMA PODSTAWOWA ZNAKU I ODWRÓCONA (W KONTRZE) STOWARZYSZENIE SIEMACHA 2016 strona 2 LOGOTYP FORMA PODSTAWOWA

Bardziej szczegółowo

Manual Systemu Identyfikacji Wizualnej dla Struktur Rządowych Rzeczypospolitej Polskiej

Manual Systemu Identyfikacji Wizualnej dla Struktur Rządowych Rzeczypospolitej Polskiej Manual Systemu Identyfikacji Wizualnej dla Struktur Rządowych Rzeczypospolitej Polskiej AUTORZY: Jakub Lorek Michał Porada Jan Węcławik SPIS TREŚCI: logo 4 typografia 11 papier firmowy 13 wizytówka 14

Bardziej szczegółowo

afisze, plakat, billboardy afisze plakat billboardy ogłoszenia prasowe ogłoszenie prasowe pionowe ogłoszenie prasowe poziome

afisze, plakat, billboardy afisze plakat billboardy ogłoszenia prasowe ogłoszenie prasowe pionowe ogłoszenie prasowe poziome 3. przykłady 3.1. 3.1.1. 3.1.2. 3.1.3. afisze, plakat, billboardy afisze plakat billboardy 3.2. broszury 3.3. 3.3.1. 3.3.2. ogłoszenia prasowe ogłoszenie prasowe pionowe ogłoszenie prasowe poziome 3.4.

Bardziej szczegółowo

logo Elektronek Laboratorium Nauki i Zabawy ZAJĘCIA DLA DZIECI 18M 2 ZAJĘCIA DLA DZIECI 4 8 LAT ZAJĘCIA DLA DZIECI 2 4 LAT GALERIA O NAS KONTAKT ZAJĘĆ

logo Elektronek Laboratorium Nauki i Zabawy ZAJĘCIA DLA DZIECI 18M 2 ZAJĘCIA DLA DZIECI 4 8 LAT ZAJĘCIA DLA DZIECI 2 4 LAT GALERIA O NAS KONTAKT ZAJĘĆ DZIECI 18M 2 DZIECI 2 4 DZIECI 4 8 Witamy w Elektronku Laboratorium Nauki i Zabawy! metus, at faucibus lorem. Sed lobortis tempor vehicula... DZIECI 18M 2 czytaj więcej DZIECI 2 4 czytaj więcej DZIECI

Bardziej szczegółowo

OCTOPUS STREET KSIĘGA ZNAKU. Identyfikacja wizualna Globlife Justyna Kołodziejczak Luty 2013

OCTOPUS STREET KSIĘGA ZNAKU. Identyfikacja wizualna Globlife Justyna Kołodziejczak Luty 2013 KSIĘGA ZNAKU Identyfikacja wizualna Globlife Justyna Kołodziejczak Luty 2013 1. LOGO SPIS TREŚCI X.X 1.0 1.1 1.2 1.3 1.4 1.5 1.6 1.7 1.8 1.9 1.10 1.11 Wstęp... O MARCE... O ZNAKU... O LOGOTYPIE Logo podstawowe...

Bardziej szczegółowo

POLE OCHRONNE WERSJE NIEDOZWOLONE MODYFIKACJE 10. 11. KOPERTA 12. TECZKA 13.

POLE OCHRONNE WERSJE NIEDOZWOLONE MODYFIKACJE 10. 11. KOPERTA 12. TECZKA 13. Księga IDENTYFIKACJI WIZUALNEJ SPIS TREŚCI TYPOGRAFIA I KOLORYSTYKA FIRMOWA 1. 2. TYPOGRAFIA KOLORYSTYKA LOGO 3. 4. 5. 6. 7. 8. ODMIANY KONSTRUKCJA POLE OCHRONNE SKALOWANIE WERSJE NIEDOZWOLONE MODYFIKACJE

Bardziej szczegółowo

WYMOGI REDAKCYJNE PUBLIKACJI

WYMOGI REDAKCYJNE PUBLIKACJI WYMOGI REDAKCYJNE PUBLIKACJI Objętość artykułu min 20 tys. znaków tekstu głównego max 15 stron (wraz z bibliografią i streszczeniami) cały plik Układ strony Rozmiar:B5 Orientacja: Pionowa Marginesy: lewy

Bardziej szczegółowo

BUDOWA LOGO. logo. sygnet. logotyp. PE NE LOGO - sk³ada siê z dwóch elementów ustawionych poziomo wzglêdem siebie (sygnet, logotyp).

BUDOWA LOGO. logo. sygnet. logotyp. PE NE LOGO - sk³ada siê z dwóch elementów ustawionych poziomo wzglêdem siebie (sygnet, logotyp). Ksiêga znaku BUDOWA LOGO PE NE LOGO - sk³ada siê z dwóch elementów ustawionych poziomo wzglêdem siebie (sygnet, logotyp). logo sygnet logotyp Strona 2 BUDOWA LOGO C.D. Centurion Old Odstêp miêdzy znakami

Bardziej szczegółowo

Książka znaku ADVERTISING/MEDIA/COMMUNICATION

Książka znaku ADVERTISING/MEDIA/COMMUNICATION Książka znaku ADVERTISING/MEDIA/COMMUNICATION Spis treści 1. Godło 2. Wersja podstawowa znaku 3. Wersja czarno-biała 4. Wersja achromatyczna 5. Konstrukcja znaku 6. Pole ochronne znaku 7. Pole podstawowe

Bardziej szczegółowo

Temat i cel konsultacji

Temat i cel konsultacji Interfejs urzędnika: NOWA KONSULTACJA Celem konsultacji jest określenie... Wymagane jeszcze 320 znaków Lista głównych pytań ID Treść pytania Inne jednostki UM [1] Lokalizacja przejazdu kolejowego Wydział

Bardziej szczegółowo

Barbara Ostrowska, Krzysztof Spalik Instytut Badań Edukacyjnych

Barbara Ostrowska, Krzysztof Spalik Instytut Badań Edukacyjnych Barbara Ostrowska, Krzysztof Spalik Instytut Badań Edukacyjnych 2011 2014 Rozdźwięk między wiedzą szkolną a wiedzą praktyczną Przyczyny Nauczanie bierne bez obserwacji, i eksperymentów Nauczanie wiadomości,

Bardziej szczegółowo

Księga znaku. Uniwersytet Medyczny w Łodzi

Księga znaku. Uniwersytet Medyczny w Łodzi Księga znaku Uniwersytet Medyczny w Łodzi 2009 Spis Treści 1 Spis treści micza 2 Koperty 4 Wizytówka 6 Papier firmowy 11 Elementy kompozycji 12 Konstrukcja projektu 13 Pozycja logo 14 Pozycja logo jednostki

Bardziej szczegółowo

Identyfikacja wizualna WĘGLOKOKS S.A.

Identyfikacja wizualna WĘGLOKOKS S.A. Identyfikacja wizualna WĘGLOKOKS S.A. 1 Identyfikacja wizualna WĘGLOKOKS S.A. Czerwiec 2013 r. (wersja 02-2013) Identyfikacja wizualna WĘGLOKOKS S.A. 3 1. Logo 3 1.1. Logo wersja pozioma 1.2. Logo wersja

Bardziej szczegółowo

LaTeX to epub the easy way Wersja: 5 z drobnymi modyfikacjami!

LaTeX to epub the easy way Wersja: 5 z drobnymi modyfikacjami! LaTeX to epub the easy way Wersja: 5 z drobnymi modyfikacjami! Wojciech Myszka 2010-10-01 23:15:50 +0200 2 Spis treści 1 Jak powstawała ta książka 7 1.1 L A TEX to epub the easy way......... 8 1.2 Pliki........................

Bardziej szczegółowo

Interfejs komunikacyjny z platformą Click4Mobile 2.0

Interfejs komunikacyjny z platformą Click4Mobile 2.0 Interfejs komunikacyjny z platformą Click4Mobile 2.0 Spis treści 1 Wstęp... 2 2 Architektura rozwiązania.... 2 3 Sposoby komunikacji.... 3 4 Struktura dokumentu xml... 3 4.1 Publisher... 3 4.2 Settings...

Bardziej szczegółowo

UCHWAŁA NR XXXI/270/12 RADY MIEJSKIEJ W WYSZKOWIE. z dnia 28 grudnia 2012 r.

UCHWAŁA NR XXXI/270/12 RADY MIEJSKIEJ W WYSZKOWIE. z dnia 28 grudnia 2012 r. UCHWAŁA NR XXXI/270/12 RADY MIEJSKIEJ W WYSZKOWIE z dnia 28 grudnia 2012 r. w sprawie ustanowienia znaku promocyjnego (logo) Gminy Wyszków oraz zasad jego używania i wykorzystywania Na podstawie art. 18

Bardziej szczegółowo

3. Druki i dokumenty

3. Druki i dokumenty 3. 3. Wzór wizytówki ogólnej UMK 8x 7x NIP: 879 07 7 9 Regon: 0000034 konto bankowe: 0 60 0 0000 0000 6090 894 y yy 7y Pozycja logo UMK (poziom) jest ściśle określona. Znak umieszczony jest na białym tle

Bardziej szczegółowo

System Identyfikacji Wizualnej

System Identyfikacji Wizualnej System Identyfikacji Wizualnej Hurtownie Elektryczne KOPEL Sp. z o. o. SPIS TREŚCI Logotyp Wersja podstawowa i dopuszczalne 6 Wersje kolorystyczne 7 Tabela kolorów 8 Pole ochronne 9 Kolorystyka tła 10

Bardziej szczegółowo

efaktura walidator Instrukcja integracji komponentów webowych v2012.04.11

efaktura walidator Instrukcja integracji komponentów webowych v2012.04.11 efaktura walidator Instrukcja integracji komponentów webowych v2012.04.11 Syriusz sp. z o.o. Rzeszów 2012 EFAKTURA INSTRUKCJA INTEGRACJI KOMPONENTÓW WEBOWYCH str. 2 Spis treści 1. Informacje ogólne...3

Bardziej szczegółowo

SYSTEM IDENTYFIKACJI WIZUALNEJ

SYSTEM IDENTYFIKACJI WIZUALNEJ SYSTEM IDENTYFIKACJI WIZUALNEJ SPIS TREŚCI. 1. ZNAK FIRMOWY 1.01 Wersja podstawowa, wersja skrócona 1.02 Alternatywna wersja znaku firmowego 1.03 Siatka modułowa wersji podstawowej 1.04 Siatka modułowa

Bardziej szczegółowo

DZIENNIK URZĘDOWY WOJEWÓDZTWA ŚLĄSKIEGO

DZIENNIK URZĘDOWY WOJEWÓDZTWA ŚLĄSKIEGO DZIENNIK URZĘDOWY WOJEWÓDZTWA ŚLĄSKIEGO Katowice, dnia 14 czerwca 2017 r. Poz. 3641 UCHWAŁA NR VII/4/2017 RADY MIEJSKIEJ W BIERUNIU z dnia 25 maja 2017 r. w sprawie przyjęcia logo Miasta Bierunia oraz

Bardziej szczegółowo

Obecnie jedynym słusznym rozwiązaniem jest wdrożenie strony responsywnej. Strona responsywna to po prostu responsywny szablon.

Obecnie jedynym słusznym rozwiązaniem jest wdrożenie strony responsywnej. Strona responsywna to po prostu responsywny szablon. Strony responsywne są nowością jeżeli chodzi o strony przeznaczone dla urządzeń mobilnych. Tworzenie stron określonych mianem responsywnych daje nam bardzo dużą elastyczność i wiele możliwości. Strony

Bardziej szczegółowo

Księga Identyfikacji Wizualnej

Księga Identyfikacji Wizualnej Księga Identyfikacji Wizualnej Spis treści. Logotyp 5.. Logotyp budowa znaku 6.. Logotyp wersja podstawowa i dodatkowa 7.. Logotyp warianty kolorystyczne poziom 8.. Logotyp warianty kolorystyczne pion

Bardziej szczegółowo

System identyfikacji miasta

System identyfikacji miasta 475 13.08. System identyfikacji miasta Spis treści 1. Charakterystyka budowy logotypu 05 1.1 Logotyp 1.1.1 logotyp 06 1.1.2 czcionka logotypu 09 1.1.3 wielkości, typy czcionek stosowanych w komunikacji

Bardziej szczegółowo

Identyfikacja wizualna miejskich jednostek organizacyjnych

Identyfikacja wizualna miejskich jednostek organizacyjnych Identyfikacja wizualna miejskich jednostek organizacyjnych Spis treści 1. Charakterystyka budowy logotypu 3 05 1.1 Logotyp 1.1.1 1.1.1 logotyp Logotyp /miejsce pochodzenia 4 06 1.1.2 Logotyp/rodzina 5

Bardziej szczegółowo

ZARZĄDZENIE NR 73/09 PREZYDENTA MIASTA SZCZECIN z dnia 24 lutego 2009

ZARZĄDZENIE NR 73/09 PREZYDENTA MIASTA SZCZECIN z dnia 24 lutego 2009 ZARZĄDZENIE NR 73/09 PREZYDENTA MIASTA SZCZECIN z dnia 24 lutego 2009 w sprawie wprowadzenia wzorów druków i oznaczeń systemu identyfikacji wizualnej Urzędu Miasta Szczecin Na podstawie art. 33 ust. 3

Bardziej szczegółowo

RESPONSYWNE INTERFEJSY. Klasy urządzeń klienckich Responsywne style CSS. Waldemar Korłub

RESPONSYWNE INTERFEJSY. Klasy urządzeń klienckich Responsywne style CSS. Waldemar Korłub RESPONSYWNE Waldemar Korłub INTERFEJSY Klasy urządzeń klienckich Responsywne style CSS Wytwarzanie Aplikacji Internetowych KASK ETI Politechnika Gdańska Klasy urządzeń klienckich Desktopy z zewnętrznymi

Bardziej szczegółowo

PRZEWODNIK IDENTYFIKACJI WIZUALNEJ Niezależnego Zrzeszenia Studentów

PRZEWODNIK IDENTYFIKACJI WIZUALNEJ Niezależnego Zrzeszenia Studentów opracowanie: Tomasz Ryś tomasz.rys@nzs.org.pl +48 55 329 63 współpraca: Jakub Pluta jakub.pluta@nzs.org.pl +48 62 518 356 spis treści znak...3 11 logotyp ogólnopolski...12 21 logotyp jednostki...22 32

Bardziej szczegółowo

Yellow Crocodiles W TELEGRAFICZNYM SKRÓCIE AGENCJA 360

Yellow Crocodiles W TELEGRAFICZNYM SKRÓCIE AGENCJA 360 Yellow Crocodiles W TELEGRAFICZNYM SKRÓCIE AGENCJA 360 STUDIO FOTO sesje zdjęciowe STRATEGIE kampanie reklamowe konkursy eventy VISUAL & OUTDOOR tablice i oznakowania litery przestrzenne LED billboardy

Bardziej szczegółowo

KSIĘGA ZNAKU 2015 OPRACOWANIE DEEFORM STUDIO 1

KSIĘGA ZNAKU 2015 OPRACOWANIE DEEFORM STUDIO 1 KSIĘGA ZNAKU 2015 OPRACOWANIE DEEFORM STUDIO 1 Symbol zbudowany na bazie pierwszej litery nazwy miasta J. Dodatkowo, w górnej części ukryto fragment herbu, co jest odniesieniem do historii Jarocina. Znak

Bardziej szczegółowo

Spis treści. Szlak Piastowski Brand Manual. Marzec 2014. Wstęp. Kolorystyka Kolorystyka podstawowa Kolorystyka rozszerzona

Spis treści. Szlak Piastowski Brand Manual. Marzec 2014. Wstęp. Kolorystyka Kolorystyka podstawowa Kolorystyka rozszerzona Szlak Piastowski Brand Manual Marzec 2014 Spis treści Wstęp Logo Logo Wersja podstawowa Geneza znaku Budowa i proporcje Kolorystyka Warianty achromatyczne Warianty monochromatyczne Pole ochronne Pole ochronne

Bardziej szczegółowo

RESPONSYWNE INTERFEJSY. Klasy urządzeń klienckich Responsywne style CSS. Waldemar Korłub

RESPONSYWNE INTERFEJSY. Klasy urządzeń klienckich Responsywne style CSS. Waldemar Korłub RESPONSYWNE Waldemar Korłub INTERFEJSY Klasy urządzeń klienckich Responsywne style CSS Wytwarzanie Aplikacji Internetowych KASK ETI Politechnika Gdańska Klasy urządzeń klienckich Desktopy z zewnętrznymi

Bardziej szczegółowo

DESIGN QUALITY TECHNOLOGY. Księga identyfikacji wizualnej wytyczne stosowania

DESIGN QUALITY TECHNOLOGY. Księga identyfikacji wizualnej wytyczne stosowania DESIGN QUALITY TECHNOLOGY Księga identyfikacji wizualnej wytyczne stosowania by DESIGN QUALITY TECHNOLOGY 1 LOGO 3 TYPOGRAFIA 2 Forma podstawowa z claimem 5 Forma uproszczona bez claimu 6 Forma podstawowa

Bardziej szczegółowo

1.1. Logotyp Wersja podstawowa. Znak 8OO LAT OPOLA w wersji podstawowej występuje na jednolitym, białym tle.

1.1. Logotyp Wersja podstawowa. Znak 8OO LAT OPOLA w wersji podstawowej występuje na jednolitym, białym tle. 1. L GOTYP 1.1 Wersja podstawowa 1.2 Wersja podstawowa na ciemnym tle 1.3 Wersja monochromatyczna 1.4 Wersja anglojęzyczna 1.5 Obszar minimalny 1.6 Obszar bezpieczny 1.7 Obszar minimalny 1.8 Wielkość minimalna

Bardziej szczegółowo

Strategia Komunikacji Wizualnej Marki Ogicom

Strategia Komunikacji Wizualnej Marki Ogicom Strategia Komunikacji Wizualnej Marki Ogicom spis tresci: System Identyfikacji Wizualnej (CI) 3 Symbol firmowy 4 Pole podstawowe i ochronne 4 Siatka modułowa 5 Zestawienia kolorów 6 Zestawienia kolorów

Bardziej szczegółowo

Katalog Systemu Identyfikacji Wizualnej Planetarium

Katalog Systemu Identyfikacji Wizualnej Planetarium Katalog Systemu Identyfikacji Wizualnej Planetarium Planetarium Niebo Kopernika jest najnowocześniejszym tego typu obiektem w Europie. Jako część Centrum Nauki Kopernik jego misją jest rozbudzanie ciekawości

Bardziej szczegółowo

Identyfikacja Wizualna Pomorskiego Klastra ICT

Identyfikacja Wizualna Pomorskiego Klastra ICT Identyfikacja Wizualna Pomorskiego Klastra ICT Projekt finansowany w ramach Regionalnego Programu Operacyjnego dla Województwa Pomorskiego na lata 2007-2013 Logotyp Wersja podstawowa Godło logotypu oparte

Bardziej szczegółowo

HTML5 i CSS. Deklaracja <!DOCTYPE> musi być na początki dokumentu napisanego w HTML5 przed tagiem <html>.

HTML5 i CSS. Deklaracja <!DOCTYPE> musi być na początki dokumentu napisanego w HTML5 przed tagiem <html>. Dokumenty HTML5 Każda przeglądarka dostępna na rynku obsługuje HTML5 w różnym stopniu. Możesz sprawdzić swoją testerem dostępnym pod adresem (http://html5test.com). HTML5 wprowadza cały zestaw zupełnie

Bardziej szczegółowo

IDENTYFIKACJA WIZUALNA. 17 Wizytówka personalizowana 18 Teczka A4 19 Segregator

IDENTYFIKACJA WIZUALNA. 17 Wizytówka personalizowana 18 Teczka A4 19 Segregator IDENTYFIKACJA WIZUALNA. BRANDBOOK. SPIS TREŚCI WSTĘP 02 Podstawowe informacje LOGOTYP 03 Wersja podstawowa 04 Wersja podstawowa pozioma 05 Wersja monochromatyczna 06 Wersja w odcieniach szarości 07 Pole

Bardziej szczegółowo

Księga wizualizacji znaku Programu Rozwoju Obszarów Wiejskich na lata 2007-2013

Księga wizualizacji znaku Programu Rozwoju Obszarów Wiejskich na lata 2007-2013 Księga wizualizacji znaku Programu Rozwoju Obszarów Wiejskich na lata 2007-2013 Księga wizualizacji znaku Programu Rozwoju Obszarów Wiejskich na lata 2007-2013 Europejski Fundusz Rolny na rzecz Rozwoju

Bardziej szczegółowo

Artykuł branżowy (opcja bezpłatna)

Artykuł branżowy (opcja bezpłatna) Cennik reklamowy Artykuł branżowy (opcja bezpłatna) Materiał dedykowany danej tematyce branżowej, najchętniej mieszczący się w ramach poszczególnych działów wydania, z ograniczeniem niewymieniania nazw

Bardziej szczegółowo

1.1 Logotyp. 1.1.1 Logotyp Podstawowa wersja logotypu

1.1 Logotyp. 1.1.1 Logotyp Podstawowa wersja logotypu 1.1 Logotyp 1.1.1 Logotyp Podstawowa wersja logotypu Podstawowe kolory występowania logo to ciemny błękit (100% cyan, 75% magenta), błękit (100%) i biel tła. Logotyp w podstawowej wersji kolorystycznej

Bardziej szczegółowo

Identyfikacja wizualna WĘGLOKOKS KRAJ Sp. z o.o. Luty 2014 r. (wersja 01-2014)

Identyfikacja wizualna WĘGLOKOKS KRAJ Sp. z o.o. Luty 2014 r. (wersja 01-2014) Identyfikacja wizualna WĘGLOKOKS KRAJ Sp. z o.o. Luty 2014 r. (wersja 01-2014) 1. Logo 5 1.1. Logo wersja podstawowa 1.2. Logo wersja pełna 1.3. Logo wersja podstawowa - warianty GKW oraz WCG 1.4. Logo

Bardziej szczegółowo

SYSTEM IDENTYFIKACJI WIZUALNEJ KUDOWA ZDRÓJ

SYSTEM IDENTYFIKACJI WIZUALNEJ KUDOWA ZDRÓJ SYSTEM IDENTYFIKACJI WIZUALNEJ KUDOWA ZDRÓJ Opracowanie: Agencja Reklamowa ADV. ul. Grunwaldzka 54 60-311 Poznań tel. 061 661 60 10 fax 061 661 60 11 www.adv.net.pl Spis treści Wstęp Logo -wersje podstawowe

Bardziej szczegółowo

WNIOSKI Z BADANIA FGI NAUCZYCIELI SZKOLNYCH I PRZEDSZKOLNYCH REALIZOWANEGO W RAMACH PROJEKTU. Zespół Ekonomii Edukacji, Instytut Badań Edukacyjnych

WNIOSKI Z BADANIA FGI NAUCZYCIELI SZKOLNYCH I PRZEDSZKOLNYCH REALIZOWANEGO W RAMACH PROJEKTU. Zespół Ekonomii Edukacji, Instytut Badań Edukacyjnych WNIOSKI Z BADANIA FGI NAUCZYCIELI SZKOLNYCH I PRZEDSZKOLNYCH REALIZOWANEGO W RAMACH PROJEKTU Zespół Ekonomii Edukacji, Instytut Badań Edukacyjnych W niniejszej prezentacji pokazane są najważniejsze wnioski

Bardziej szczegółowo

Europejski sektor e-commerce, e-fulfilment i nowe miejsca pracy

Europejski sektor e-commerce, e-fulfilment i nowe miejsca pracy Europejski sektor e-commerce, e-fulfilment i nowe miejsca pracy PAŹDZIERNIK 2015 Trwający od kilku lat rozwój sektora e-commerce wymusza na podmiotach działających w tym sektorze szereg działań służących

Bardziej szczegółowo

KSIĘGA ZNAKU I SYSTEM IDENTYFIKACJI WIZUALNEJ COP19 WARSZAWA 2013

KSIĘGA ZNAKU I SYSTEM IDENTYFIKACJI WIZUALNEJ COP19 WARSZAWA 2013 KSIĘGA ZNAKU I SYSTEM IDENTYFIKACJI WIZUALNEJ COP19 WARSZAWA 2013 SPIS TREŚCI I. Księga znaku 1. Idea znaku 2. Logo wersja podstawowa 3. Logo wersja skrócona 4. Logo wersja skrócona, pozioma 5. Logo wersja

Bardziej szczegółowo

Logo na siatce modułowej 4. Przykłady poprawnego zachowania pola ochronnego 7. Przykłady niepoprawnego zachowania pola ochronnego 8

Logo na siatce modułowej 4. Przykłady poprawnego zachowania pola ochronnego 7. Przykłady niepoprawnego zachowania pola ochronnego 8 KSIĘGA ZNAKU spis treści Symbolika znaku 2 Budowa znaku 3 Logo na siatce modułowej 4 Pole znaku 5 Pole ochronne znaku 6 Przykłady poprawnego zachowania pola ochronnego 7 Przykłady niepoprawnego zachowania

Bardziej szczegółowo

ZASADY STOSOWANIA LOGOTYPÓW POLITECHNIKI KOSZALIŃSKIEJ

ZASADY STOSOWANIA LOGOTYPÓW POLITECHNIKI KOSZALIŃSKIEJ ZASADY STOSOWANIA LOGOTYPÓW POLITECHNIKI KOSZALIŃSKIEJ SPIS TREŚCI I WSTĘP... 5 II LOGO... 8 1. Logo Politechniki Koszalińskiej... 9 budowa logo... 9 pole podstawowe logo... 9 wersja podstawowa logo...

Bardziej szczegółowo

System Identyfikacji Wizualnej dla Projektu e-zdrowie. dla Logotypu e-zdrowie w języku polskim

System Identyfikacji Wizualnej dla Projektu e-zdrowie. dla Logotypu e-zdrowie w języku polskim System Identyfikacji Wizualnej dla Projektu e-zdrowie dla Logotypu e-zdrowie w języku polskim 1 System Identyfikacji Wizualnej dla Projektu e-zdrowie zawiera opis konstrukcji podstawowych elementów identyfikacji

Bardziej szczegółowo

SYSTEM IDENTYFIKACJI WIZUALNEJ MARKI TAURON

SYSTEM IDENTYFIKACJI WIZUALNEJ MARKI TAURON SYSTEM IDENTYFIKACJI WIZUALNEJ MARKI TAURON 1 SPIS TREŚCI 6. Teczka....55 7. Galanteria biurowa.... 57 7.1. Notatka ze spotkania.... 58 7.2. Bloczki biurowe.... 59 8. Pieczątka.... 60 3. Submarki i logo

Bardziej szczegółowo

SYSTEM INFORMACJI WIZUALNEJ DLA MUZEUM KULTURY KURPIOWSKIEJ W OSTROŁĘCE

SYSTEM INFORMACJI WIZUALNEJ DLA MUZEUM KULTURY KURPIOWSKIEJ W OSTROŁĘCE SYSTEM INFORMACJI WIZUALNEJ DLA MUZEUM KULTURY KURPIOWSKIEJ W OSTROŁĘCE I. KOLORYSTYKA. TYPOGRAFIA 3. MOTYWY DEKORACYJNE iały: kolor tła oraz motywów dekoracyjnych RAL 906 CMYK 0/0/0/0 Rodzina krojów pisma

Bardziej szczegółowo

System Identyfikacji Wizualnej Euro-Centrum Park Naukowo-Technologiczny

System Identyfikacji Wizualnej Euro-Centrum Park Naukowo-Technologiczny Euro-Centrum Euro-Centrum LOGO - wersja podstawowa Logo Grupy Euro-Centrum składa się ze znaku graficznego oraz liternictwa. Znak graficzny zbudowany z dwóch dynamicznych form, które układają się w kształt

Bardziej szczegółowo

Spis treści. Symbolika. System identyfikacji wizualnej. Słowniczek

Spis treści. Symbolika. System identyfikacji wizualnej. Słowniczek Księga tożsamości Księga tożsamości Spis treści Słowniczek Symbolika I. Znak graficzny I.1 znak graficzny I.2 wersja pełna znaku I.3 wersja uproszczona znaku I.4 wersja typograficzna znaku I.5 podstawowa

Bardziej szczegółowo

SYSTEM IDENTYFIKACJI WIZUALNEJ

SYSTEM IDENTYFIKACJI WIZUALNEJ SYSTEM IDENTYFIKACJI WIZUALNEJ 1 Ogólnopolski Festiwal Miłośników Fantastyki POLCON 2017 odbywa się w tym roku pod hasłem Tchnienie Wschodu. To zwrócenie uwagi na wschód, Lublin jako najsilniejszy ośrodek

Bardziej szczegółowo

KSIĘGA IDENTYFIKACJI WIZUALNEJ Forum Uczelni Technicznych

KSIĘGA IDENTYFIKACJI WIZUALNEJ Forum Uczelni Technicznych KSIĘGA IDENTYFIKACJI WIZUALNEJ Forum Uczelni Technicznych Spis treści Sygnet logo FUT 3 Elementy identyfikacji wizualnej FUT Konstrukcja sygnetu logo 4 Wizytówki 25 Logo FUT wersja pozioma 5 Papier firmowy

Bardziej szczegółowo

WZORNIK TABLIC TURYSTYCZNYCH NA OBSZARZE LGD TRZY KRAJOBRAZY

WZORNIK TABLIC TURYSTYCZNYCH NA OBSZARZE LGD TRZY KRAJOBRAZY WZORNIK TABLIC TURYSTYCZNYCH NA OBSZARZE LGD TRZY KRAJOBRAZY na rzecz Rozwoju Obszarów Wiejskich Niniejszy dokument określa standardy projektowania informacyjnych tablic turystycznych na obszarze Lokalnej

Bardziej szczegółowo

PRZEWODNIK IDENTYFIKACJI WIZUALNEJ MARKI

PRZEWODNIK IDENTYFIKACJI WIZUALNEJ MARKI PRZEWODNIK IDENTYFIKACJI WIZUALNEJ MARKI upaid Integrator płatności mobilnych i internetowych, partner MasterCard Mobile. Integrujemy firmy m-commerce i e-commerce, systemy płatności, banki, operatorów

Bardziej szczegółowo

dlaczego taka osoba miałaby odwiedzić naszą stronę internetową,

dlaczego taka osoba miałaby odwiedzić naszą stronę internetową, Jak powstają strony internetowe - 6 kroków Krok 1 - Definiowanie wymagań nowej witryny Zespół projektowy, wraz z właścicielem witryny, precyzuje wymagania wobec nowej strony internetowej. Oczekiwania właściciela

Bardziej szczegółowo

Wprowadzenie... do czego służy CI?

Wprowadzenie... do czego służy CI? Wprowadzenie... do czego służy CI? System Identyfikacji Wizualnej posiada status dokumentu określającego normy i zasady stosowane w identyfikacji firmy Polskiej Federacji Squasha. Adresowany jest do firm

Bardziej szczegółowo

Laboratorium 1: Szablon strony w HTML5

Laboratorium 1: Szablon strony w HTML5 Laboratorium 1: Szablon strony w HTML5 Czas realizacji: 2 godziny Kurs: WYK01_HTML.pdf, WYK02_CSS.pdf Pliki:, Edytor: http://www.sublimetext.com/ stabilna wersja 2 (portable) Ćwiczenie 1. Szablon strony

Bardziej szczegółowo

ul. Franciszka Nullo 2, 00-486 Warszawa tel.: +48 22 501 55 00 fax: +48 22 501 55 01 www.orss.pl

ul. Franciszka Nullo 2, 00-486 Warszawa tel.: +48 22 501 55 00 fax: +48 22 501 55 01 www.orss.pl ul. Franciszka Nullo 2, 00-486 Warszawa tel.: +48 22 501 55 00 fax: +48 22 501 55 01 www.orss.pl Rola infrastruktury w rozwoju społeczeństwa informacyjnego potencjał usługowy sieci dla woj. Warmińsko-

Bardziej szczegółowo

Bootstrap. Tworzenie serwisów Web 2.0. dr inż. Robert Perliński rperlinski@icis.pcz.pl

Bootstrap. Tworzenie serwisów Web 2.0. dr inż. Robert Perliński rperlinski@icis.pcz.pl ootstrap 1/15 Bootstrap Tworzenie serwisów Web 2.0 dr inż. Robert Perliński rperlinski@icis.pcz.pl Politechnika Częstochowska Instytut Informatyki Teoretycznej i Stosowanej 11 kwietnia 2015 Bootstrap 2/15

Bardziej szczegółowo

KSIĘGA IDENTYFIKACJI WIZUALNEJ NFOŚiGW. Cz. 1 Księga Znaku

KSIĘGA IDENTYFIKACJI WIZUALNEJ NFOŚiGW. Cz. 1 Księga Znaku KSIĘGA IDENTYFIKACJI WIZUALNEJ NFOŚiGW Cz. 1 Księga Znaku 2015 Spis treści. Wstęp. 02 Warianty monochromatyczne. Forma uzupełniająca, układ poziomy, wyśrodkowany. 31 Forma podstawowa. Układ poziomy. 03

Bardziej szczegółowo

1.0 POLE OCHRONNE. pole ochronne i jego wyznaczanie

1.0 POLE OCHRONNE. pole ochronne i jego wyznaczanie 1.0 Średnica KOŁA z logotypu CELSIUM wyznacza podstawową jednostkę stosowaną przy pozycjonowaniu logo wewnątrz pola ochronnego. pole ochronne i jego wyznaczanie POLE OCHRONNE POMARAŃCZ Główny kolor SZAROŚĆ

Bardziej szczegółowo

System Identyfikacji Wizualnej Mysłowic

System Identyfikacji Wizualnej Mysłowic System Identyfikacji Wizualnej Mysłowic SPIS TREŚCI /...czyli co, gdzie i jak MARKA MYSŁOWICE / w dwóch słowach o M... str. 03 / idea kolorów str. 04 ZNAK MARKI / podstawowy znak marki str. 06 / pole podstawowe

Bardziej szczegółowo

SYSTEM IDENTYFIKACJI WIZUALNEJ WOJEWÓDZTWA ZACHODNIOPOMORSKIEGO

SYSTEM IDENTYFIKACJI WIZUALNEJ WOJEWÓDZTWA ZACHODNIOPOMORSKIEGO SYSTEM IDENTYFIKACJI WIZUALNEJ WOJEWÓDZTWA ZACHODNIOPOMORSKIEGO I. LOGO WOJEWÓDZTWA ZACHODNIOPOMORSKIEGO 1. Standaryzacja znaku Forma podstawowa logo Forma uzupełniająca logo Konstrukcja znaku Pole podstawowe

Bardziej szczegółowo

1.1 Logotyp Logotyp Podstawowa wersja logotypu

1.1 Logotyp Logotyp Podstawowa wersja logotypu 1.1 Logotyp 1.1.1 Logotyp Podstawowa wersja logotypu Podstawowe kolory występowania logo to ciemny błękit (100% cyan, 75% magenta), błękit (100%) i biel tła. Logotyp w podstawowej wersji kolorystycznej

Bardziej szczegółowo

LOKALNA GRUPA DZIAŁANIA - PRZYJAZNE MAZOWSZE

LOKALNA GRUPA DZIAŁANIA - PRZYJAZNE MAZOWSZE LOKALNA GRUPA DZIAŁANIA - PRZYJAZNE MAZOWSZE Wersja elektroniczna księgi dostępna jest na stronie www.lgdpm.pl Księga wizualizacji logo Lokalnej Grupy Działania - Przyjazne Mazowsze informacje ogólne Zasady

Bardziej szczegółowo

System identyfikacji miasta

System identyfikacji miasta System identyfikacji miasta Spis treści 1. Charakterystyka budowy logotypu 05 1.1 Logotyp 1.1.1 logotyp 06 1.1.2 czcionka logotypu 09 1.1.3 wielkości, typy czcionek stosowanych w komunikacji 10 1.1.4 kolorystyka

Bardziej szczegółowo

Wyniki za III kwartał 2011 r.

Wyniki za III kwartał 2011 r. Wyniki za III kwartał 2011 r. Listopad 2011 roku Paliwa z Biomasy Odnawialna Energia Wiatru Outsourcing Przemysłowy Plan Prezentacji Przegląd działalności Obecna działalność Projekty w fazie wdrażania

Bardziej szczegółowo

KSIĘGA ZNAKU SYSTEM IDENTYFIKACJI WIZUALNEJ

KSIĘGA ZNAKU SYSTEM IDENTYFIKACJI WIZUALNEJ KSIĘGA ZNAKU SYSTEM IDENTYFIKACJI WIZUALNEJ Lotnisko Warszawa/Modlin to nowoczesny port lotniczy wyspecjalizowany w obsłudze przewoźników typu low-cost oraz połączeń czarterowych. Lotnisko spełnia wszelkie

Bardziej szczegółowo

Wyniki za I półrocze i II kwartał 2011 r.

Wyniki za I półrocze i II kwartał 2011 r. Wyniki za I półrocze i II kwartał 2011 r. Sierpień 2011 Paliwa z Biomasy Odnawialna Energia Wiatru Outsourcing Przemysłowy Plan Prezentacji Przegląd działalności Obecna działalność Projekty w fazie wdrażania

Bardziej szczegółowo