Projektowanie graficzne i skład tekstu. dr inż. Piotr Steć

Transkrypt

1 Projektowanie graficzne i skład tekstu dr inż. Piotr Steć

2 Zasady projektowania interfejsu użytkownika

3 Wpływ pamięci 7 elementów +/- 2 Pamięć krótkotrwała przechowuje informacje około sekund Użytkownik nie powinien być zmuszany do zapamiętywania informacji pomiędzy ekranami

4 Informowanie o stanie Jeśli aplikacja wykonuje długą operację, użytkownik powinien być o tym poinformaowany Klepsydra Pasek posępu Ekran informacyjny Użytkownik woli krótki czas odpowiedzi aplikacji, nawet kosztem ogólnej szybkości działania Czas odpowiedzi systemu powinien być odpowiedni do zadania

5 Organizacja ekranu Obiekty statyczne, takie jak przyciski, opisy i ikony powtarzające się na wielu ekranach powinny być zawsze w tym samym miejscu Powinny być opisane w sposób jednoznacznie opisujący ich funkcję Położenie, kształt i rozmiar obiektów powinny być ujednolicone Kolejność przechodzenia pomiędzy kontrolkami za pomocą klawisza [Tab[ Tab] ] powinien być taki, jak kolejność wprowadzanych informacji

6 Ergonomia ekranu Należy eliminować zbędną informację Używać zwięzłych opisów i łatwych do rozpoznania ikon Wydajność użytkownika spada, jeśli tło stanowi mniej niż 25% ekranu Dla wyświetlaczy tekstowych tło powinno zajmować 50% ekranu Powiązane informacje powinny być logicznie pogrupowane

7 Przykład dobrze zaprojektowanego okna dialogowego

8 Prezentacja tekstu Używać tylko dwóch poziomów jasności Używać pogrubienia i negatywu z rozwagą Nigdy nie używać podkreśleń! Nie używać więcej niż 3 krojów czcionki (fontów) Długi tekst czcionka szeryfowa Prezentacje czcionka bezszeryfowa Należy stosować się do zasad gramatyki i ortografii

9 Kolor w projektach

10 Użycie koloru Kolor jest najbardziej nadużywanym elementem w projektach multimedialnych Używać nie więcej niż 4 odcieni kolorów na ekranie Nie więcej niż 7 w aplikacji Najbardziej czytelne są litery białe lub żółte na czarnym lub niebieskim tle (ale nie zawsze takie zestawienie dobrze wygląda) Tekst nie powinien być w kolorze niebieskim, ponieważ utrudnia to czytanie (patrz budowa siatkówki)

11 Znaczenia kolorów Kolor może wspomagać treść Czerwony: : miłość, namiętność, ogień, przemoc, agresję. Czerwony oznacza STOP lub coś zakazanego w wielu kulturach Fioletowy: : kreatywność, tajemnica, królewskość, mistycyzm, rzadkość, czasem śmierć Niebieski: : lojalność, bezpieczeństwo, konserwatyzm, spokój, zimno, smutek Zielony: : natura, żyzność, wzrost, zazdrość, wolna droga, środowisko Żółty: : jasność, oświetlenia, choroba, tchórzostwo Czarny: : siła, wyszukanie, nowoczesność, śmierć, makabrę, zło Biały: : czystość, niewinność, schludność, prawdę, pokój, zimno, sterylność

12 Harmonia kolorów Największym problemem przy projektowaniu graficznym jest uzyskanie odpowiedniej kompozycji kolorów Należy zachować równowagę pomiędzy monotonią a zbytnim pobudzeniem

13 Koło kolorów RGB Wierzchołki kolory podstawowe Podstawy kolory drugorzędne Pozostałe kolory trzeciorzędne

14 Kolory w plastyce Kolory podstawowe

15 Temperatura koloru Kolory ciepłe Kolory zimne

16 Kolory drugorzędne Kolory drugorzędne powstają po zmieszaniu takiej samej ilości kolorów podstawowych

17 Kolory pośrednie Dwa kolory podstawowe zmieszane w proporcjach 2:1 4=2A+B 5=2B+A 6=2B+C 7=2A+C 8=2C+A 9=2C+B

18 Kolory trzeciorzędne Trzy kolory podstawowe zmieszane w różnych proporcjach 10=2A+B+C 11=2B+A+C 12=2C+A+B

19 Tworzenie kontrastowych schematów kolorów Im większa odległość kolorów na kole, tym większy kontrast koloru Kolory znajdujące się po przeciwnych stronach koła nazywane są dopełniającymi Takie kolory są ciężkie w odbiorze, jeśli zbyt duży obszar jest nimi pokryty. Wytwarzają bardzo silny efekt, więc najczęściej są używane do ukazywania informacji Kolory dopełniające

20 Tworzenie kontrastowych schematów kolorów Niektórzy ludzie mają problem z rozróżnianiem kolorów (Daltonizm) Około 10% mężczyzn nie rozróżnia koloru zielonego i czerwonego Nie należy używać zielonego i czerwonego, jeśli odróżnienie kolorów ma istotne znaczenie

21 Tworzenie kontrastowych schematów kolorów Kolory, które nie leżą dokładnie naprzeciw siebie zapewniają dobry kontrast Nie jest on tak rażący jak dla kolorów dopełniajacych

22 Tworzenie kontrastowych schematów kolorów Kolory leżące w równych odległościach na kole dają zrównoważony zestaw kolorów Nazywa się je triadą kolorów Takie zestawienia są bardzo często spotykane

23 Harmoniczne schematy kolorów Kolory sąsiadujące ze sobą na kole dają mniejszy kontrast, ale lepiej ze sobą harmonizują Czasem są nazywane kolorami analogicznymi Takie schematy podkreślają podobieństwa

24 Monochromatyczne schematy kolorów Jeden kolor Zmienia się jego jasność bądź nasycenie

25 Podstawowe zasady kompozycji

26 Złoty podział Złoty podział jest uważany za najbardziej estetyczną proporcję a b c ab bc bc = ac = 1 1,618

27 Złoty podział w sztuce Dobrym przykładem jest Partenon na Akropolu Można znaleźć w nim wiele elementów, które zachowują złote proporcje

28 Złoty podział w sztuce b a o c e ac ao = ao co d bd = do = do bo =1,618 Święta Rodzina Michała Anioła może być wpisana w pentagram o złotych proporcjach

29 Złoty podział w sztuce Autoportret Rembrandta

30 Złoty podział w sztuce

31 Optyczny środek strony Środek rodek optyczny strony znajduje się powyżej i na prawo od środka geometrycznego Jeśli ważny element ma być umieszczony w środku kompozycji, umieszcza się go w środku optycznym

32 Mocne punkty

33 Mocne punkty

34 Mocne punkty

35 Prawo kontynuacji

36 Umysł Prawo domknięcia Umysł ludzki się zamykać przestrzeń dopełniając kontur i ignorując przerwy w figurze

37 Prawo domknięcia Kompozycja zamknięta, statyczna i pasywna. Ogranicza wyobraźnię widza Otwarty kształt kwiatu wystającego poza kadr pobudza wyobraźnię.

38 Równowaga kompozycji Plakat firmy Time Warner z 1990 r.

39 Równowaga kompozycji Plakat firmy Time Warner z 1990 r. Zepsuty przeze mnie

40 Równowaga kompozycji Czy czegoś tu nie brakuje?

41 Równowaga kompozycji Logo dociąża prawą stronę

42 Druk i skład tekstu

43 Wynalezienie druku Pierwsi ruchomej czcionki użyli Chińczycy około 1000 lat przed Guttenbergiem Niestety przygotowanie druku trwało dłużej niż przepisanie tekstu ręcznie Problemem było też przechowywanie czcionek z tysiącami znaków chińskiego pisma Dlatego wynalazek ten nie zrewolucjonizował ówczesnego świata

44 Czcionka metalowa Jan Gutenberg 1450 Gutenberg był kowalem z południowych Niemiec Chciał zarobić na sprzedaży popularnych wówczas odpustów, wymyślił więc technikę ich szybkiej produkcji Najbardziej znane dzieło jego wydrukowane tym wynalazkiem, to Biblia Gutenberga

45 Tekst drukowany Tekst drukowany zrewolucjonizował świat Pozwala na szybki dostęp do informacji Dzięki książkom można korzystać z doświadczenia i wiedzy innych ludzi Dzisiejsza gazeta zawiera więcej informacji niż otrzymywał przeciętny mieszkaniec 18-wiecznej Europy w ciągu całego swojego życia

46 Tekst w projektach Tekst musi być częścią hierarchii. Ludzie najpierw czytają największy tekst; najpierw nagłówki, potem nagłówki sekcji, podpisy, a na końcu tekst podstawowy Organizacja tekstu powinna zwiększać czytelność Odległości pomiędzy literami, słowami i liniami mają wpływ na czytelność, przekazywaną treść i siłę wyrazu. Automatyczne dopasowanie tych parametrów rzadko daje dobre wyniki (szczególnie w aplikacjach firmy Microsoft) Każda litera jest formą sztuki. Jej kształt i parametry zostały specjalnie zaprojektowane przez typografa

47 Budowa tekstu górna linia pisma średnia linia pisma stopień pisma interlinia dolna linia pisma odstęp linii pisma

48 Parametry tekstu Tracking równomierne zmiany odległości znaków w tekście Leading reguluje światło pomiędzy liniami; równy stopniowi pisma dla interlinii=0; jednostka to ułamek stopnia pisma Kerning reguluje światło międzyliterowe; określony dla odpowiednich par znaków leading tracking Wisl eu feugait wisci tat ad mod kerning

49 Kerning Głównym zadaniem kerningu jest optyczne wyrównanie odstępów między literami Musi być projektowany wraz z czcionką Przykłady: AL AW AIW

50 Jednostki miary w tpografii Punkt (p.) podstawowa jednostka w systemie Didota,, stanowi 1/2660 m = 0,376 mm Cycero (cyc.) 12 punktów Kwadrat (kw.) 4 cyc. lub 48 p.

51 Pojęcia związane ze składem tekstu Czwórka tytułowa cztery początkowe kolumny książki Przedtytuł Wakat lub tekst okolicznościowy Tytuł Kolofon, metryczka lub wakat

52 Pojęcia związane ze składem tekstu Falcowanie składanie zadrukowanego arkusza Składka arkusz po falcowaniu, zwykle 8, 16 lub 32 stronicowy Broszura jedna składka po zszyciu i obcięciu Książka kilka składek

53 Pojęcia związane ze składem tekstu Justunek niedrukujący materiał zecerski, służy do wprowadzania odstępów Firet rodzaj justunku, kwadrat o boku równym stopniowi pisma; stosuje się półfirety, ćwierćfirety oraz jako spacje trzecianki (1/3 fireta); ; w składzie komputerowym szerokość litery M Frakcja rodzaj czcionki służącej do tworzenia indeksów i przypisów

54 Pojęcia związane ze składem tekstu Kolofon informacja wydawnicza dotycząca książki (nazwa wydawcy, prawa autorskie, autorzy towarzyszący grafik, typograf itp.) Kolumna zadrukowany obszar pomiędzy marginesami (bardzo często mylona z łamem) Łam określona liczba wierszy tekstu stanowiąca kolumnę lub jej część\ Wakat pusta strona Inicjał wielka litera rozpoczynająca akapit, znacznie większa od stopnia pisma, czasem bogato zdobiona

55 Kolumna i łam kolumna łam

56 Inicjały

57 Pojęcia związane ze składem tekstu Łamanie formatowanie kolumny i ilustracji Majuskuła (wersalik) wielka litera alfabetu Minuskuła mała litera alfabetu Marginalia objaśnienia na marginesach Impozycja umieszczanie gotowych stron na arkuszu, aby po złożeniu uzyskać właściwą kolejność

58 Impozycja

59 Wyrównanie marginesów geometryczne optyczne

60 Zasady składu tekstu Wcięcia akapitowe Do szerokości łamu 6 kwadratów, wcięcie 1 firet Powyżej 6 kwadratów, 1,5 firetu Wcięcia w przypisach, uwagach i innych tekstach o stopniu różnym od podstawowego takie same jak w tekście podstawowym Można składać bez wcięć, ale wtedy akapity muszą być oddzielone odstępem Nie stosuje się wcięć i odstępów razem Ostatni wiersz musi być co najmniej dwa razy dłuższy od wcięcia

61 Zasady składu tekstu Odstępy między wyrazami (spacje) Jeśli szerokość litery a = 0,5 firetu, to spacja powinna mieć szerokość 0,33 firetu, w przeciwnym razie spacja ma szerokość a Przy wyrównaniu obustronnym można regulować spacje w zakresie od 0,25 do 0,75 firetu Tekst nie może mieć korytarzy (spacji w tym samym miejscu w kolejnych liniach) Należy unikać jednakowych wyrazów stojących nad sobą w kolejnych wierszach

62 Korytarz

63 Zasady składu tekstu Wyróżnienia: Inny rodzaj pisma (np. kursywa) Inny stopień pisma Kapitaliki (rzadziej i mniejszym stopniem) Podkreślenie NIGDY Rozstrzelenie NIGDY

64 Znaki pisarskie Kropka zawsze występuje bez odstępu od litery po której następuje Na końcu zdania Po skrócie, jeśli odrzucono koniec wyrazu Po symbolu wyliczenia (1. lub a.) Przy oddzielaniu minut od godzin Po cyfrach zastępujących liczebniki porządkowe (w 1. tomie = w pierwszym tomie)

65 Znaki pisarskie Kropki nie umieszcza się Po tytułach i śródtytułach Po żywej paginie W nagłówkach czasopism W nagłówkach tabel Po skrótach miar oraz symbolach naukowych Po rzymskich cyfrach Kropkę w podpisach ilustracji umieszcza się na końcu zdań złożonych zawierających znaki interpunkcyjne

66 Znaki pisarskie Pauza kreska stosowana do oznaczenia dialogu A może to Charłamp? rzekł Zagłoba. Pólpauza to ta kreska na lewo Dywiz pomiędzy wyrazami złożonymi onymi np. biało-czerwony, bez spacji; stosowany równier wnież do przenoszenia wy- razów; w zanczeniu od do ze spacją np. W dniach maja; tych spacji nie powinno się łamać Minus stosowany w wyrażeniach matematycznych 3 2 = 1

67 Znaki pisarskie Cudzysłowy Zwykłe: pies Francuskie: «pies» Niemieckie:»pies«Jako cudzysłowy w cudzysłowach można stosować przecinki i apostrofy: Podziwiam,odwagę tego pana. Lub ich inne odmiany: Podziwiam»odwagę«tego pana.

68 Inne znaki Abrewiatury umowne skróty np.:, % Ligatury znaki pisarskie łącz czące ce dwie lub trzy litery, np.: & (z łacińskiego et), æ; ; w profesjonalnych wydaniach stosowane w celu podniesienia estetyki i czytelność pisma, np.: fi (zamiast fi), fl (zamiast fl); Kapitaliki pomniejszone (nie przez skalowanie!) wersje wielkich liter danego kroju

69 Przenoszenie i rozdzielanie Nie rozdziela się lub nie przenosi Wyrazów dwusylabowych pauzy Tytułów prof. dr inż. od nazwisk Skrótów itp., itd. Jednoliterowych skrótów od liczb, np. s. 11 liczb Sylaby li Skrótów nazw instytucji Skrótów jednostek od liczb Długość linii w znakach do > 60 Nie określa się Nie określa się Nie określa się Nie określa się Nie określa się Nie określa się Nie określa się Nie należy Nie należy Nie należy Nie należy Nie należy Nie należy Nie należy Nie należy Nie należy

70 Pozostawianie na końcu wiersza Nie pozostawia się na Długość linii w znakach końcu wiersza do > 60 Pojedynczych liter lub cyfr z kropką lub nawiasem stosowanych przy wyliczeniach Inicjałów imion przed nazwiskami Wyrazów jednoliterowych a, i, o, u, w, z Nie określa się Nie określa się Nie określa się Nie należy Nie należy Nie należy