Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

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

Podobne prezentacje


Prezentacja na temat: "Typografia Podstawy projektowania graficznego Projektowanie strony internetowej Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów."— Zapis prezentacji:

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

2 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

3 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

4 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

5 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

6 Typografia Podstawy Pojęcia dodatkowe 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

7 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

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

9 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

10 Typografia Co ma znaczenie? Hierarchia Nagłówek stopnia 1 Nagłówek stopnia 2 Nagłówek stopnia 3 Nagłówek stopnia 4 Nagłówek stopnia 5 Nagłówek stopnia 6 Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów

11 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 ) Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów źródło:

12 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

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

14 Typografia Co ma znaczenie? Stopień pisma UPPERCASE versus lowercase Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów 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. 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.

15 Wyróżnienia BoldItalikUnderline Typografia Co ma znaczenie? Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów 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.

16 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

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

18 Typografia Jak dobrać czcionkę? Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów

19 Typografia Gdzie, co i jak? Optymalizacja funkcjonalności serwisów internetowych, J. Nielsen, H. Loranger, Helion 2007 Typografia, G. Ambrose, P. Harris, PWN (z ) (z ) (z ) (z ) (z ) Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów

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


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

Podobne prezentacje


Reklamy Google