Podstawy projektowania graficznego Projektowanie strony internetowej Typografia Podstawy projektowania graficznego Projektowanie strony internetowej Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów

Znaki fenickie, cyrylica… 1436 – Gutenberg – pierwsze ruchome czcionki Typografia Podstawy Co to jest typografia? Pismo klinowe Hieroglify Znaki fenickie, cyrylica… 1436 – Gutenberg – pierwsze ruchome czcionki Współczesne czcionki Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów

Co to jest font? Co to jest krój pisma? Foremka do ciastka Ciastko Typografia Podstawy Co to jest font? Fizyczny środek stosowany do tworzenia kroju pisma (nie ważne, czy to jest maszyna do pisania, wzornik, bloki czy kod PostScript) Foremka do ciastka Co to jest krój pisma? Zestaw znaków, liter, cyfr itp. Charakteryzujących się tym samym charakterystycznym wzorem. Ciastko Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów

Jednostki miary bezwzględne Typografia Podstawy Jednostki miary bezwzględne 3 cale 76,2 milimetra 216 punktów 18 pica Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów

Jednostki miary relatywne Firet – em Typografia Podstawy Jednostki miary relatywne Firet – em Związany ze stopniem pisma Tradycyjnie określa odstępy pomiędzy literami Firet jest równy wielkości pisma Wysokość x pisma Wysokość małej litery „x” Zależy od stopnia pisma Kluczowa przy projektowaniu layotu Mało ważna w przypadku layoutów stron internetowych  Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów

Pojęcia dodatkowe Typografia Podstawy Krój szeryfowy vs. Krój bezszeryfowy Ramka Kerning Interlinia Linia podstawowa Linia średnia Rodzina kroju pisma Roman (antykwa) Kursywa (italik) Pogrubiona (boldface) Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów

Typografia Czym jest typografia na www? Powiedzcie… 90% skuteczność rozpoznawania Helvetici przez małpki Czy web to tylko obrazki? www jako nośnik informacji I tak dalej… Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów

Typografia Co ma znaczenie? Kontrast Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów

Typografia Co ma znaczenie? Rozmiar 10 pt 12 pt 14 pt 18 pt 22 pt 28 pt 32 pt 48 pt 60 pt Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów

Typografia Co ma znaczenie? Hierarchia <h1>Nagłówek stopnia 1</h1> <h2>Nagłówek stopnia 2</h2> <h3>Nagłówek stopnia 3</h3> <h4>Nagłówek stopnia 4</h4> <h5>Nagłówek stopnia 5</h5> <h6>Nagłówek stopnia 6</h6> Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów

Typografia Co ma znaczenie? Przestrzeń Niech tekst „oddycha” Koncentruje, przyciąga uwagę… Block break (padding lub margin) Paragraph break (padding lub margin) Tracking (letter-spacing) Leading (line-height) Indentation (padding lub margin) źródło: http://www.webdesignerdepot.com Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów

Typografia Co ma znaczenie? Odpowiedni krój pisma Internet woli bezszeryfowe kroje pisma (Arial, Verdana, Helvetica…) Serif (Times New Roman) (Verdana) Sans Serif Nagłówki można wyróżniać szeryfowymi krojami… odwrotnie niż w przypadku tradycyjnej typografii… Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów

Typografia Co ma znaczenie? Kolor Półtony vs. Pełny kolor Uwaga!!! Ta prezentacja jeszcze będzie trwać 30 minut. Link Zabawa kolorem  Aktywny Nieaktywny SPRAWDŹNAWWW Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów

Typografia Co ma znaczenie? Stopień pisma Uppercase versus lowercase TYTUŁ Używanie wersalików jest dobrym pomysłem w przypadku tytułów, nagłówków, etc. Taki tekst jest wtedy dobrze wyróżniony i czytelny. Akapity, które w całości są pisane wersalikami wymagają dużo uwagi od czytającego. Przeczytaj ten tekst i pomyśl ile czasu Ci to zajęło. Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów

Typografia Co ma znaczenie? Wyróżnienia Bold Italik Underline Istotniejszy tekst można pogrubić. Nie wolno podkreślać tekstu, który nie jest linkiem!!! Zamiast tego, tekst można pochylić. W każdym bądź razie, nie można pogrubiać wszystkiego . Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów

Typografia Co ma znaczenie? Techniczne aspekty Pamiętajmy, że nie każdy ogląda nasza stronę internetowa na wyświetlaczu (monitorze) najwyższej jakości. Uwaga!!! antyaliasing Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów

Typografia Popularne czcionki Bezszeryfowe Szeryfowe Arial Times New Roman Arial Black Georgia Comic Sans MS Courier New Trebuchet MS Verdana Tahoma Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów

Typografia Jak dobrać czcionkę? http://www.typetester.org/ Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów

Typografia Gdzie, co i jak? Optymalizacja funkcjonalności serwisów internetowych, J. Nielsen, H. Loranger, Helion 2007 Typografia, G. Ambrose, P. Harris, PWN 2006 http://ilovetypography.com/ (z 18.03.2010) http://www.webdesignerwall.com/ (z 18.03.2010) http://www.tomontheweb2.ca/ (z 18.03.2010) http://www.markboulton.co.uk/ (z 18.03.2010) http://www.typetester.org/ (z 18.03.2010) Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów

Dzięki za uwagę  Typografia Koniec Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów