Z E S P Ó Ł
P R O J E K T O W A N I A
U X
TYPOGRAFIA - KOMPOZYCJA - KOLOR
KOMPOZYCJA
1.
W przypadku kreowania stron www, największe znaczenie ma dla nas kompozycja: otwarta - zamknięta statyczna – dynamiczna. Jako przykład, podaję subiektywny odbiór w/w zestawów, które mogą przybliżyć / naporwadzić na właściwe ich zastosowanie:
•
Chcemy zwrócić uwagę – komp. Dynamiczna
•
Chcemy zachować czytelność – komp. Statyczna
•
Obraz kierowany dla młodych, sportowców, dzieci, komp. Dynamiczna
•
Obraz kierowany dla starczych, introwertyków, kochających ład i porządek – komp. Statyczna
•
Chcemy skupić uwagę w konkretnym miejscu – komp. Zamknięta
•
Chcemy nadać przestrzeni, oddechu i lekkości – komp. Otwarta
2.
Zasada komponowania: nie powinno być wrażenia, że jest jakaś niezagospodarowana przestrzeń. Nie może być „dziur” w kompozycji czyli pustych miejsc.
TYPOGRAFIA 1.
Możemy korzystać z czcionek systemowych takich jak: Counter New, Arial, Times New Roman, Tahoma jednak z pomocą przychodzi nam google font www.google. com/fonts Uwaga nie każdy krój ma polskie znaki!! Kroje do pisania po polsku znajdziecie www.netwizards.com.pl/zasoby/darmowe-polskie-czcionki-google-fonts-zpolskimi-znakami/
2.
Myślę, że kwestia użycia fontu jest Wam znana: wielkość , odstępy między literami oraz wierszami, kontrast.
•
Kontrast tekstu można sprawdzić tutaj: www.webaim.org/resources/contrastchecker/
•
Interlinia warto zwiększyć o 50% w przypadku tekstu w kolumnie np. jeśli korzystamy z wielkości 14 pix to interlinie ustawiamy na 150% Jeśli fonty jest większy należy kontrolować to proporcjonalnie, „na oko” , zasada +50% może spowodować rozrzucenie tekstu.
•
Nie justujemy paragrafów. Zastawiamy „chorągiewkę” Nie wszystkie przeglądarki radzą sobie z wyświetlaniem tekstu justowanego. Skutkuje dużym światłem międzywyrazowym, „rozrzuceniem” wyrazów w łamach.
•
Staramy się używać jednego kroju tzn. jeśli działamy Arialem to przy nim zostajemy. Jednak potraktujmy tekst bardziej graficzne przy jednoczesnym zachowaniu zasad i harmonii. Podzielmy tekst na: nagłówek: może być inny font. Fanie sprawdzają się kroje szeryfowe, możemy zastosować krój CONDENSED czyli www.kentype.pl/?menu=31&group=guide&article=184 leed (zajawka): możemy wyróżnić np. kursywą, kolorem… treść: krój czytelny, NIE Condensed, odwieczne pytanie szeryf nie czy sans?... Litery z szeryfami sprawdzają się w druku. Lepiej się czyta, oko sprawniej skanuje tekst. W internecie krój szeryfowy nie jest „pixel perfect” Ozdobniki wypadają na połówkach pikseli co skutkuje rozmyciem. O dobie dynamicznego rozwoju matryc oraz rozdzielczości takie dywagacje tracą na znaczeniu. Nasze oko nie dostrzega
Ćwiczenia „Bede grać w grę” www.type.method.ac
rozmyć w obrębie ozdobników jednak „teoretycy” cały czas przepychają się na argumenty. Wg Nielsena nie ma powodów aby nie stosować „szeryfów”.
KOLOR Przed rozpoczęciem projektowania należy sobie odpowiedzieć na pytanie:
tekstem oraz pastelowymi kolorami elementów strony. Mocno nasycone
„jaki chcemy uzyskać efekt?” Kolorystykę dobieramy do ogólnych
kolory wyglądają sztucznie )
warunków panujących na stronie tzn. jeśli będzie dużo zdjęć dajemy neutralne zdjęcia. Jeśli nie ma zdjęć albo jest ich mało, działamy dużymi
www.volkswagen-sportscars.fr
obszarami kolorystycznymi , typografią, geometrią , ikony np.:
www.spacecraftforall.com www.guinness.com
www.semplicelabs.com www.makemepulse.com
•
jasna, monochromatyczna – czystość, lekkość, elegancka, design
Proponuję mikser kolorów:
www.newjumoconcept.com
www.paletton.com
www.etq-amsterdam.com
1.
Zachowanie głównej tonacji (jednego koloru dominującego)
•
- nie oznacza to, że nie możemy „bawić się” nasyceniem,
jasna, kolorowa – radość, żywioł, energia, młodość, liberalność, nowoczesność, lekkość
intensywnością koloru, etc. www.trasmissione-energia.terna.it 2.
Pamiętamy, kolor dają zdjęcia więc jeśli na stronie będzie dużo
www.randco.com
zdjęć , kolor ograniczamy do niezbędnego minimum. Stosujemy
www.roguesocietygin.com
kolory neutralne: biele, szarości, czernie. 5.
Kontrast znajduje się po przeciwnej stronie spektrum barwnego.
www.palais-coburg.com www.stylista.com www.copenhagenfashionweek.com 3.
Czasami pojawiają się zdjęcia, na które nie mamy wpływu (są brzydkie, nie mamy kontroli nad kolorami). Takim elementom nadajemy odpowiednie proporcje /wielkość alby nadać im odpowiedni „ciężar” .
4.
Kolory oddają grupę docelową strony (od każdej zasady istnieją wyjątki nie jest to reguła tylko podpowiedź):
•
ciemna, monochromatyczna - elegancka, splendor, jakość, powaga www.cloudsovercuba.com www.soundcityproject.com www.warsawrising.eu
•
ciemna, kolorowa – precyzja, nowoczesność , energia, technologia, tradycja (Jest to ciężkie i trudne zestawienie. Wymaga wprawy aby kompozycja nie była przytłaczająca. Najczęściej nie używa się czerni
Ćwiczenia
tylko ciemne szarości połączone z bardzo jasnym szarym / białym
„Bede grać w grę” www.szkolawidzenia.pl