Podstawy projektowania graficznego Projektowanie strony internetowej

Prezentacja na temat: "Podstawy projektowania graficznego Projektowanie strony internetowej"— Zapis prezentacji:

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

2 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

3 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

4 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

5 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

6 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

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 <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

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

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 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

14 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

15 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

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 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

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 Typografia, G. Ambrose, P. Harris, PWN 2006 (z ) (z ) (z ) (z ) (z ) Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów

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