Projektowanie graficzne i skład tekstu dr inż. Piotr Steć
Zasady projektowania interfejsu użytkownika
Wpływ pamięci 7 elementów +/- 2 Pamięć krótkotrwała przechowuje informacje około 30 120 sekund Użytkownik nie powinien być zmuszany do zapamiętywania informacji pomiędzy ekranami
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
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
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
Przykład dobrze zaprojektowanego okna dialogowego
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
Kolor w projektach
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)
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ść
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
Koło kolorów RGB Wierzchołki kolory podstawowe Podstawy kolory drugorzędne Pozostałe kolory trzeciorzędne
Kolory w plastyce Kolory podstawowe
Temperatura koloru Kolory ciepłe Kolory zimne
Kolory drugorzędne Kolory drugorzędne powstają po zmieszaniu takiej samej ilości kolorów podstawowych
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
Kolory trzeciorzędne Trzy kolory podstawowe zmieszane w różnych proporcjach 10=2A+B+C 11=2B+A+C 12=2C+A+B
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
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
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
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
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
Monochromatyczne schematy kolorów Jeden kolor Zmienia się jego jasność bądź nasycenie
Podstawowe zasady kompozycji
Złoty podział Złoty podział jest uważany za najbardziej estetyczną proporcję a b c ab bc bc = ac = 1 1,618
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
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
Złoty podział w sztuce Autoportret Rembrandta
Złoty podział w sztuce
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
Mocne punkty
Mocne punkty
Mocne punkty
Prawo kontynuacji
Umysł Prawo domknięcia Umysł ludzki się zamykać przestrzeń dopełniając kontur i ignorując przerwy w figurze
Prawo domknięcia Kompozycja zamknięta, statyczna i pasywna. Ogranicza wyobraźnię widza Otwarty kształt kwiatu wystającego poza kadr pobudza wyobraźnię.
Równowaga kompozycji Plakat firmy Time Warner z 1990 r.
Równowaga kompozycji Plakat firmy Time Warner z 1990 r. Zepsuty przeze mnie
Równowaga kompozycji Czy czegoś tu nie brakuje?
Równowaga kompozycji Logo dociąża prawą stronę
Druk i skład tekstu
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
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
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
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
Budowa tekstu górna linia pisma średnia linia pisma stopień pisma interlinia dolna linia pisma odstęp linii pisma
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
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
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.
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
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
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
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
Kolumna i łam kolumna łam
Inicjały
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ść
Impozycja
Wyrównanie marginesów geometryczne optyczne
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
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
Korytarz
Zasady składu tekstu Wyróżnienia: Inny rodzaj pisma (np. kursywa) Inny stopień pisma Kapitaliki (rzadziej i mniejszym stopniem) Podkreślenie NIGDY Rozstrzelenie NIGDY
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)
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
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 17 19 maja; tych spacji nie powinno się łamać Minus stosowany w wyrażeniach matematycznych 3 2 = 1
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.
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
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 25 25-50 51-60 > 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
Pozostawianie na końcu wiersza Nie pozostawia się na Długość linii w znakach końcu wiersza do 25 25-50 51-60 > 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