01.02.2017

Projektowanie Warstwa powierzchni Konkret • Kolorystyka powierzchnia Metodyka

szkielet =  Metody

struktura Techniki  +  zakres Proces Model Biznesowy Abstrakcja

Warstwa powierzchni Kolor i Web • Typografia …lub sterownika drukarki…

To ewidentny błąd oprogramowania do przetwarzania grafiki

Psychologia kolorów Jak reagujemy na kolory?

1 01.02.2017

Psychologia kolorów Wpływ kolorów • Oddziaływanie psychologiczne – czerwień rozdrażnia, – szkarłat sprawia wrażenie majestatyczne lub żałobne, – żółty rozwesela, – zieleń uspokaja, – fiolet przygnębia

Wpływ kolorów Znaczenie kolorów Kolor Znaczenie Czerwony Siła, władza, pasja, niebezpieczeństwo, błąd, stop, ostrzeżenie, agresja, ogień, odwaga, gorący, luksusowy, namiętność, bogactwo • Oddziaływanie fizjologiczne Różowy Kobiecość, kolor słodki, cukierkowy, kiczowatość, popkultura Pomarańczowy Ciepło, jesień, Halloween, energia, żywotność, świeżość, – ostra czerwień działa podniecająco nowoczesność, ostrożność Żółty, złoty Zadowolenie, ostrożność, słoneczność, pogoda ducha, optymizm, – blady błękit, chłodne zielenie działają radość, dostatek, zawiść, zazdrość uspokajająco Brązowy Zabrudzenie, zaufanie, przyjaźń, pewność, jesień, klasyka Zielony Zazdrość, sielska atmosfera, wiosna, natura, wzrost, żyzność, nowość, – światło czerwone powoduje wyraźny nadzieja, przyjaźń, sukces, uzdrowienie Niebieski Męskość, woda, smutek, bezpieczeństwo, niebo, spokój ducha wzrost ciśnienia krwi, przyśpieszenie Fioletowy Tajemnica, kolor królewski, mądrość, duchowe poznanie oddechu czy tętna oraz zwiększa Czarny Zło, noc, upiorny, śmierć, żałoba, powaga, autorytet, strach, siła Szary, srebrny Czystość, rozsądek, niewinność, szlachetność, stare czasy częstotliwość mrugania powiekami Biały Niewinność, czysty, zimny, nieskazitelny, zima

Znaczenie kulturowe Jak reagujemy na Kultura Czerwony Niebieski Zielony Żółty Biały USA Niebezpie- Męskość Bezpie- Tchórzostwo Czystość kolory w różnych czeństwo czeństwo Francja Arystokracja Wolność, Półświatek Przemijanie Neutralność pokój kręgach kulturowych? Egipt Śmierć Cnota, Żyzność, Szczęście, Radość walka, tężyzna prosperity prawda Indie Życie, Cnota, Żyzność Sukces Śmierć, twórczość walka, czystość prawda Japonia Gniew, Nieuczci- Przyszłość, Gracja, Śmierć niebez- wość energia szlachetność pieczeństwo Chiny Szczęście Niebo, Dynastia Narodziny, Śmierć, chmury Ming, niebo, bogactwo, czystość chmury moc

2 01.02.2017

Wartość koloru

Jakie są • Jest miarą rozpiętości tonalnej – od odcieni jasnych do ciemnych Jasny charakterystyki • Pomagają we wprowadzaniu W odcień A tradycyjnej dychotomii dobra i zła R Czysty T kolorów? kolor • Ciemne kolory – ciężkie i gęste O (kolor + czerń) Ś Ć Ciemny odcień • Jasne kolory – pozytywne, miękkie, delikatne (kolor + biel)

Walka dobra ze złem Nasycenie kolorów a kolory… • Stopień natężenia lub przygaszenia • Dodanie koloru szarego (czarny + biały) powoduje zmatowienie i zmniejsza nasycenie • Kolory matowe zmniejszają napięcie, nadają medytacyjny, marzycielski nastrój W  a r t o ś ć Nasycenie

Temperatura kolorów • Kolory zimne – od zielonego po niebieski Jak reagujemy na

• Mają tendencję do wycofywania się • Sprawdzają się jako tło lub większe kolory – wiek i płeć? elementy na stronie

• Kolory ciepłe – od czerwonego po żółty, łącznie z pomarańczowym, różowym, brązowym i burgundowym

• Mają tendencję do zwracania na siebie uwagi • Dominuje i tworzy wizualne wyróżnienie

3 01.02.2017

Porządek preferencji kolorystycznych • Najprzyjemniejsze barwy –Niebieska –Czerwona Badania psychologa Hansa Eysencka –Zielona 14.000 osób –Purpurowa • Nieprzyjemne barwy –Żółta –Pomarańczowa • Osoby dorosłe: pastelowe; dzieci: żywe

4 01.02.2017

Kolor i biznes

• Czarny + złoty, czarny + srebrny – sklep z luksusową biżuterią • Ciemny zielony, khaki, szary – militaria, survival • Jasny zielony oraz uzupełniające – ogrodnictwo • Brązowy, czarny – galanteria skórzana • Żółty, pomarańczowy, piaskowe brązy, błękitny – turystyka • Granatowy, szary – strony dla menedżerów • Żółty, pomarańczowy, czarny, szary – sprzęt budowlany

Teoria kolorów Model RGB

• Kolory wyświetlane na ekranach komputerów – addytywny model kolorów (RGB) • Poligrafia – drukarki atramentowe, laserowe, prasy drukarskie – subtraktywny model koloru (CMYK)

Pantone - międzynarodowy standard identyfikacji kolorów do celów przemysłowych (w tym poligraficznych) opracowany i aktualizowany przez amerykańską firmę Pantone Inc. RGB jest addytywnym modelem barw, kolory powstają przez sumowanie sygnałów w poszczególnych kanałach. Jasność wynikowego koloru zależy od sumy sygnałów składowych.

Model RGB Model CMYK • RGB – model odwzorowania kolorów, który powstał na potrzeby ICT • Cyan, Magenta, Yellow, blacK – Czerwony (Red) – #FF0000 Im większa liczba • Zjawisko odbicia światła od tym kolor jaśniejszy powierzchni przedmiotów – Zielony (Green) – #00FF00 #FFFFFF – biały • Powierzchnie barwne – Niebieski (Blue) – #0000FF #000000 - czarny pochłaniają część światła • Zmieszanie w odpowiednich proporcjach trzech • Światło odbite docierające do wiązek światła o ww. barwach obserwatora stwarza • 255 odcieni każdego z podstawowych kolorów wrażenie koloru • Kolorystykę wykorzystywaną w sieci obejmuje tzw. • Intensywność pigmentów reguluje gęstość siatki rastra tablica bezpiecznych barw - 216. – 256 kolorów – 40 kolorów inaczej odzwierciedlanych w Jest to model subtraktywny - barwy powstają prze odejmowanie Windows a inaczej w systemach Apple’a poszczególnych składników od światła białego.

5 01.02.2017

Teoria kolorów Koło kolorów • Studia nad klasyfikacją kolorów – Arystoteles III wiek p.n.e. 1. Kolory podstawowe – czerwony, • Koło kolorów – Isaac Newton, Johann żółty, niebieski – Barwy tworzą trójkąt równoboczny Wolfgang Goethe, Johannes Itten; XVII, XVIII, – Co 4 kolor jest kolorem podstawowym IX wiek

2. Kolory pochodne – Powstają przez wymieszanie sąsiadujących: pomarańcz (czerwień + żółty), zieleń (żółty + niebieski) i fiolet (niebieski + czerwień

Koło kolorów Schematy kolorów

• Monochromatyczny 3. Kolory pochodne trzeciorzędowe – Mieszanie koloru podstawowego • Analogiczny z kolorem pochodnym – Czerwono-pomarańczowy, żółto- • Uzupełniający pomarańczowy, żółtozielony, niebiesko- zielony, fiołkowy, czerwono-fioletowy • Rozdzielony uzupełniający • Triadyczny • Tetradyczny (podwójnie uzupełniający)

Schemat monochromatyczny Schemat analogiczny

• Kolor podstawowy + dowolna liczba odcieni • Schemat zawierający barwy sąsiadujące na tego koloru kole (nie bierz kawałka większego niż 1/3)

6 01.02.2017

Blinksale Schemat uzupełniający Chłodna strona firmowa • Schemat zawierający barwy umiejscowione naprzeciw siebie na kole (zielony-czerwony, żółty-fioletowy, pomarańczowy-niebieski) • Pułapki: – Jednoczesny kontrast – każdy kolor sprawia, że ten drugi wygląda na bardziej jaskrawy – Połączenia dysonansowe – gryzą się powodując, że oglądający odczuwa dysonans

Schemat uzupełniający Schemat rozdzielony uzupełniający

• Schemat zawierający barwy będące kolorami granicznymi koloru uzupełniającego barwy podstawowej

Schemat triadyczny Schemat tetradyczny

• Schemat zawierający barwy przesunięte tak, • Schemat, w którym jakikolwiek uzupełniający aby wszystkie kolory były jednakowo schemat barw jest połączony z innym rozstawione uzupełniającym schematem

7 01.02.2017

Zapis szesnastkowy Zapis szesnastkowy kolorów kolorów

Zapis szesnastkowy Zapis szesnastkowy kolorów kolorów

Zapis szesnastkowy Projekt schematu kolorów

kolorów • Klient: firma zajmująca się wykonywanymi na zamówienie instalacjami z płytek i kamienia w luksusowych rezydencjach przy plażach

• Podstawowy kolor: pomyśl o barwach, które są powszechne w regionie, z którego pochodzi klient

8 01.02.2017

Projekt schematu kolorów Projekt schematu kolorów

• Grupa docelowa: ludzie, którzy chcą podnieść • Drzewa mangrowe… standard przybrzeżnych domów – Dobór kolorów powinien być skorelowany ze stylem życia przy plaży Pomyśl o przyjemnej bryzie morskiej, tropikalnych drzewach mangrowych, prywatnych plażach i bardzo drogich willach – Kolor główny: ciepły kolor piaskowy – Kolor uzupełniający: ciemny odcień niebieskiego – kontrast pomiędzy kolorami • Bujna zieleń mangrowa + ziemista czerwień

Kolory i dostępność

Kolorowe gry, które umieściłem na witrynie, z mocno migającym tłem i niewyraźnymi czcionkami, są kluczowe dla mojej profesji – powodują znaczne pogorszenie się wzroku odwiedzających

Zaburzenia w widzeniu kolorów Typy barwoślepoty

• Protanopia – nierozpoznawanie barwy czerwonej, lub mylenie z barwą zieloną (dotyka 1% mężczyzn i 0,22% kobiet) • Deuteranopia (daltonizm) – nierozpoznawanie barwy zielonej, lub mylenie jej z barwą czerwoną (dotyka 1% mężczyzn i 0,22% kobiet • Tritanopia – nierozpoznawanie barw żółtej Test z użyciem kart Ishihary (Shinobu Ishihara) i niebieskiej (dotyka 0,002% mężczyzn http://manta.univ.gda.pl/~awieruck/ishihara/ i 0,001% kobiet)

9 01.02.2017

Niedowidzenie barw Narzędzia do kolorów • Łapacze kolorów • Protanomalia – obniżona percepcja – Pobranie kolorystyki ze zdjęcia nasycenia i jaskrawości czerwieni, • Ustalanie jak osoby z barwoślepotą dotyka 1% mężczyzn widzą witrynę (aspekt dostępności) • Deuteranomalia – obniżona percepcja • Dobór kolorów wg zasad nasycenia (ale nie jaskrawości) zieleni, wykorzystywanych dotyka 6% mężczyzn i 0,4% kobiet w sztukach plastycznych • Tritanomalia – obniżona percepcja • Dobór zdjęcia do kolorystyki barwy niebieskiej, występuje nad wyraz • Wyszukiwanie witryn pod kolorystykę rzadko

http://www.degraeve.com/color-palette/ http://colorcombos.com

Sprawdzenie barwoślepoty http://colorschemedesigner.com/

10 01.02.2017

http://www.colorschemer.com

http://www.dark-i.com/

Typografia Rodziny fontów • Szeryfowe – Poprzeczne lub ukośne zakończenia z kresek – Korzenie: starożytny Rzym – Poprawiają znacznie czytelność dużych i zbitych bloków pisma – Nie sprawdzają się podczas czytania z ekranu monitora – , , Baskerwille, Garamond – Zastosowanie: nagłówki, tytuły wpisów na blogach – Wybór: charakter serwisu vs. jego czytelność

Rodziny fontów Typy fontów

• Monospaced • Bezszeryfowe – Stała szerokość znaków – Korzenie: eksperymenty w typografii w XIX w. – , Courier New, Elite, Pica, Prestige – Teksty literackie, serwisy techniczne – Nowoczesny wygląd • Cursive – – Upodabniający się do pisma odręcznego („pisanka”) Tekst napisany czcionką bezszeryfową jest – Pochylona czcionka znacznie czytelniejszy – Poszczególne litery wyglądają na połączone – , , Helvetica – BrushScript, Blackadder, Vivaldi – Strony o charakterze historycznym lub literackim, kartki – Verdana – szeryfowa litera „I” „l” elektroniczne, serwisy związane ze ślubem • Fantasy – Teksty drukowane lub składane w formie .pdf – ozdobny – Alpha Geometrique, Critter, FB Reactor

11 01.02.2017

Fonty w Internecie Fonty w Internecie • Core for the Web • Adobe WebType – Wprowadzone w 1998 r. przez Microsoft – Wprowadzone przez Adobe – Pakiet czcionek nadających się do wykorzystania – Pakiet 12 fontów ze specjalnym przeznaczeniem w Sieci do Internetu – Duża czytelność na ekranach komputerów – Komercyjny – Istniejące czcionki – zmiana obrysów wektorowych – Brak własnej przeglądarki oraz opłaty przyczyniły na ich odpowiedniki w pikselach. Nowe czcionki – się do marginalizacji znaczenia pakietu bitmapa obrysowana wektorowo • Monotype ESQ Fonts Agfa – Pierwszy zestaw fontów: IE 4.0 – Wprowadzone przez Agfa • Verdana, Arial, Arial Black, Georgia, Trebuchet MS, – Obszerny zestaw, stale rozbudowywany MS, , Andale Mono, oraz . • Uzupełniono o istniejące kroje – Times New Roman – Marginalizacja, ograniczone zastosowanie

Panagramy Arial Koń i żółw grali w kości z piękną ćmą u • Pójdźże, kiń tę chmurność w głąb flaszy źródła 0123456789 [] () {} /\ <> ? • Koń i żółw grali w kości z piękną ćmą u źródła – Zaprojektowany w 1982 przez Robina Nicholasa – Panagram stosowany w ramach polskojęzycznej wersji i Patricię Saunders systemu MacOS – Najpopularniejszy font bezszeryfowy • Filmuj rzeź żądań, pość, gnęb chłystków – Wąskie litery – niezbyt wygodny do czytania • Sic surgens, dux, zelotypos quam karus haberis • Rodzina: bezszeryfowy • A quick movement of the enemy will jeopardize • Czytelność: czytelny powyżej 10 pkt. six gunboats • Charakterystyka – Nowoczesny, prosty u podstawy, uproszczony Grec. Pan gramma – każda litera – Ogólnie lubiany przez ludzi w różnym wieku

Arial Black

Koń i żółw grali w kości z piękną ćmą u źródła 0123456789 [] () {} /\ <> ? – Zaprojektowany w 1982 przez Robina Nicholasa i Patricię Saunders • Rodzina: bezszeryfowy • Czytelność: znacznie obniżona w stosunku do fontu Arial. Nadaje się tylko do nagłówków • Charakterystyka – Toporny

12 01.02.2017

Comic Sans MS Koń i żółw grali w kości z piękną ćmą u źródła 0123456789 [] () {} /\ <> ? – Zaprojektowany przez Vincenta Connare – Wprowadzony w Windows 95 Plus Pack – Specyfika komiksowa; dokumenty o niezobowiązującej wymowie i formie • Rodzina: kursywa • Czytelność: wymyślny, trudny do czytania w Sieci • Charakterystyka – Młodzieżowy, zabawny, nieformalny – Nie nadaje się do poważnych zastosowań

Courier New

Koń i żółw grali w kości z piękną ćmą u źródła 0123456789 [] () {} /\ <> ? – Wywodzi się z czcionki, która została zamówiona przez IBM w latach 50 do maszyn do pisania • Rodzina: monotypiczny (stała szerokość znaków) • Czytelność: co najmniej dobra • Charakterystyka – Przestarzały – Anachroniczny krój

Georgia Koń i żółw grali w kości z piękną ćmą u źródła. 0123456789 [] () {} /\ <> ? – Zaprojektowany przez Matthewa Cartera w 1993 na zlecenie Microsoftu • Rodzina: szeryfowy • Czytelność: najlepszy fony szeryfowy do wykorzystania w Sieci. Nie powinien być mniejszy niż 10 pkt. • Charakterystyka – Tradycyjny wygląd; nowocześniejsza i czytelniejsza od Times New Roman – Świetna alternatywa dla fontów szeryfowych

13 01.02.2017

Helvetica

Koń i żółw grali w kości z piękną ćmą u źródła 0123456789 [] () {} /\ <> ? – Zaprojektowany w 1957 przez Maksa Miedingera dla firmy ze Szwajcarii – Nazwa pochodzi od słowa Helwecja, rzymskiej nazwy obecnych terenów Szwajcarii • Rodzina: bezszeryfowy • Czytelność: bardzo dobra

Impact Lucida Koń i żółw grali w kości z piękną ćmą u źródła 0123456789 [] () {} /\ <> ? Koń i żółw grali w kości z piękną ćmą – Wynik projektu Microsoftu Web Type Core u źródła 0123456789 [] () {} /\ <> ? • Rodzina: bezszeryfowy – Lucida Bright, Lucida Caligraphy, Lucida Console – Lucida Grande – główny font występujący • Czytelność: używany w druku i niepolecany do w MacOS redagowania stron internetowych; słaba czytelność, nawet przy większych rozmiarach • Rodzina: bezszeryfowy • Charakterystyka • Czytelność: bardzo dobra – Pogrubiony a zarazem smukły • Charakterystyka – Nie nadaje się do bloków treści – Font nowoczesny – Może być oszczędnie używany w krótkich nagłówkach

Tahoma Koń i żółw grali w kości z piękną ćmą u źródła 0123456789 [] () {} /\ <> ? – Zaprojektowany w 1994 przez Matthew Cartera z Microsoft – W windows 2000 oraz XP i Server 2003 zastąpił Ms Sans Serif w roli czcionki systemowej • Rodzina: bezszeryfowy • Czytelność: podobna do Verdany • Charakterystyka – Nowoczesny, nie tak nudny jak Verdana, czy Arial

14 01.02.2017

Times New Roman Koń i żółw grali w kości z piękną ćmą u źródła 0123456789 [] () {} /\ <> ? – Zaprojektowany na potrzeby tygodnika „Times” przez Stanleya Morisona i Victora Lardena – Do dzisiaj stosowana w większości gazet – Niezbyt czytelny jako kursywa • Rodzina: szeryfowy • Czytelność: dobry do druku, czytelność spada wraz z mniejszym rozmiarem; co najmniej 12 pkt. • Charakterystyka – Tradycyjny, nieposiadający osobowości, mdły i nijaki – Niezalecany, nie jest preferowany przez użytkowników w różnym wieku

Trebuchet MS Verdana Koń i żółw grali w kości z piękną ćmą u Koń i żółw grali w kości z piękną ćmą u źródła 0123456789 [] () {} /\ <> ? źródła 0123456789 [] () {} /\ <> ? – Zaprojektowany w 1996 r. przez Matthew Cartera – Zaprojektowany przez Vincenta Connare’a dla – Ma poszerzone odstępy międzyliterowe; zapobiega Microsoftu zlewaniu się tekstu – Podobna do Verdany • Rodzina: bezszeryfowy • Rodzina: bezszeryfowy • Czytelność: najczytelniejszy font do wykorzystania w Sieci; nawet przy niewielkiej wielkości • Czytelność: czytelny; co najmniej 10 pkt. • Charakterystyka • Charakterystyka – Nowoczesny, prosty – Nowoczesny, prosty, kanciasty – Zalecany do bloków tekstu zasadniczego – Lubiany przez użytkowników

Czcionki mieszane i inne fonty • Nie więcej niż 4-5 rodzajów fontów Gdy chcemy użyć innych fontów • Użycie grafiki (bitmapa) – Skalowanie, obniżenie czytelności fontów • Dołączenie plików z fontami do witryny – WEFT Microsoft, TrueDoc Bitstream – waga strony • sIFR, Scalable Inman Flash Replacement – Javascript – zastąpienie obiektów HTML plikami Flash – www.mikeindustries.com/sifr

15 01.02.2017

Wielkość czcionki Kolor czcionki • Możliwości podobne jak w przypadku • Standardowa odległość od monitora 30-40 cm formatowania tła strony – wielkość czcionki 9-11 pkt. • Kontrast między kolorem tła i czcionki! • Windows XP – domyślna wielkość 8 pkt. • Najczęściej: czarna czcionka na białym tle • Oficjalne zalecenia – tekst zasadniczy 12 pkt. • Kontrast negatywowy obniża czytelność

Czytelnicy Wielkość czcionki Inne zalecenia 10-40%. Oko wykonuje więcej fiksacji. Dzieci 12-14 pkt. 10-12 pkt. • Skład w kontrze (jasne czcionki, ciemne tło) Młodzież 10-12 pkt. 8-10 pkt. Standardowo 10-12 pkt. 8-10 pkt. – Spadek czytelności o co najmniej 10% Osoby starsze oraz z wadą wzroku 12-14 pkt. 10-12 pkt. – Źle wypadają czcionki szeryfowe – Barwy pastelowe czcionki zwiększają czytelność

Kolor czcionki Colour Check (http://www.etre.com/tools/colourcheck) • Możliwości podobne jak w przypadku formatowania tła strony • Kontrast między kolorem tła i czcionki! • Najczęściej: czarna czcionka na białym tle • Kontrast negatywowy obniża czytelność 10-40%. Oko wykonuje więcej fiksacji. • •RóżnicaSkład pomiędzy w kontrze jasnością (jasne barwy czcionki, tła a jasnością ciemne barwy tło) liter powinna być większa niż 125 – Spadek czytelności o co najmniej 10% • Różnica odcieniem barwy tła a odcieniem barwy liter powinna– Źle być wypadają większa niż czcionki 500 szeryfowe – Barwy pastelowe czcionki zwiększają czytelność

Colour Contrast Check Wyróżnienia http://www.snook.ca/technical/colour_contrast/colour.html • Klasyczny skład – kursywa – jednolity kształt i odcień szarości • Skład komputerowy – kursywa znacznie utrudnia czytanie tekstu (odkształcenie liter oraz schodkowanie) • Wytłuszczenie – TAK! • Podkreślenie – NIE! Hiperłącza • KAPITALIKI – NIE! gubią naturalny kształt AccessColor Tool (http://www.accesskeys.org/tools/color-contrast.html) liter, co utrudnia czytanie

16 01.02.2017

Formatowanie akapitów Szerokość kolumny • W celu poprawy czytelności tekstu należy • Szerokość kolumny wpływa na jakość dzielić go na akapity i szybkość czytania • Akapity z przeznaczeniem reklamowo- Optymalna szerokość kolumny – 8-10 cm informacyjnym nie powinny zawierać więcej • niż 5-10 wersów LCD 96 dpi – 400 pikseli • Tekst objaśniający – maksymalnie 5 wersów • Czcionka 9-11 pkt. – 60-70 znaków na kolumnę • Akapity tekstu z jasnym przeznaczeniem do czytania mogą mieć więcej wersów • Wiersze dłuższe niż 70 znaków oraz • Podział może być realizowany za pomocą krótsze niż 40 znaków – obniżenie punktowania i numerowania jakości czytania i spowolnienie czytania

Wyrównanie tekstu Światło

• Justowanie – nie sprawdza się, gdy • Światło – zachowanie odpowiednich odstępów między czcionka jest duża lub kolumna jest zbyt literami, wyrazami w jednym wersie oraz liniami tekstu wąska w akapicie • Odległość pomiędzy literami 0,2-0,3 ich szerokości • Skład chorągiewkowy – wyrównanie • Ściśnięte wiersze obniżają poziom czytelności, tekstu do lewej strony zwłaszcza, gdy wiersze są krótkie (poniżej 40 – Naturalny – przypomina efekt przy ręcznym znaków), lub zbyt długie (powyżej 100) pisaniu • Interlinia – 1:1 – 1:1,2 wysokości litery do wysokości – Światła międzywyrazowe nadają jeden rytm odstępu pomiędzy wierszami tekstowi • 50% powierzchni strony zajmuje przestrzeń z tekstem, – Są czytelnicy, którzy uważają układ a pozostałą część marginesy chorągiewkowy za mało estetyczny i profesjonalny

Choosing the Right Fonts Choosing the Right Fonts Define the feelings you’re trying to evoke • Think about logos, the album covers, the in your target audience textbooks you’ve seen – Does website represents hip and young? OR – How have those typographic elements affected your portrays an aura of steadfast wisdom… perception of the entities they represent? – Is site based on a certain theme, like a • Use at least two, but no more than four Hawaiian luau or a Mexican fiesta? OR • Think about variants (bold, italic, regular etc.) conveys a more formal identity… • Don’t combine two different serif fonts or two By asking yourself these kinds of questions, and different sans-serif fonts thinking about fonts on an emotional level, you should – placing different fonts from the same family next to be able to decide reasonably easily whether a given each other can feel uncomfortable font is appropriate for your application.

17 01.02.2017

Joe’s Restaurant

The font that you choose will play a crucial role in the way potential diners perceive the attitude and identity of the restaurant.

Casual bistro

Metropolitan restaurant serving five-star cuisine

18 01.02.2017

Dockside bar Lorem ipsum… • Klasyczny, napisany w języku łacińskim tekst autorstwa Cycerona „De finibus bonorum et malorum” (O granicy dobra i zła) • Od wielu lat wykorzystywany przez drukarzy do sprawdzania kroju pism i układu graficznego • Niezrozumiały dla odbiorcy – pozwala się skupić na wizualnych aspektach a nie na znaczeniu słów • Wykorzystywany przy projektowaniu stron webowych: prezentacja kroju pisma, układu kolumn, wyglądu składu, typografii…

www.lipsum.com

http://lipsum.pl/ http://www.typetester.org/

19