Projektowanie stron internetowych a typografia i liternictwo
Jeżeli chodzi o projektowanie nowoczesnych serwisów i stron www z wykorzystaniem nauki związanej z czytelnością i estetyką projektowania to być może żaden pokrewny temat nie jest bardziej dzisiaj niedoceniany w przemyślanym projektowaniu stron internetowych niż typografia czyli liternictwo publikowane przez strony internetowe - z punktu widzenia projektanta liternictwo czyli typografia jest sztuką oraz techniką formatowania oraz układania i stylizacji tekstu wykorzystywanego w określonym celu i miejscu na stronach www. Wiele osób zajmujących się na co dzień projektowaniem aplikacji internetowych oraz stron i sklepów internetowych czerpie swoją wiedzę i doświadczenie z inspiracji ale także i nauki - przeglądając liczne strony internetowe zbieramy bowiem wiedzę i ćwiczymy swój warsztat oraz oko. Jak wiemy nawet polskie serwisy i portale różnią się podejściem do tej tematyki i gołym okiem widać różnicę który jest zaprojektowany estetycznie, czytelnie i atrakcyjnie dla odbiorcy - mało kto uświadamia czytając wiadomości na wirtualnej polsce czy innym portalu i zwraca uwagę na to że artykuł był przemyślanie zaprojektowany od strony typografii - po prostu wchodzimy na dany portal szukając czystych informacji, czytamy treści i wychodzimy zapamiętując głównie treść stron internetowych. Faktycznie może oznaczać to, że biorąc pod uwagę typograficzny punktu widzenia osoby odpowiedzialne za UX/UI i projektowanie wykonali swoje zadania w zgodzie ze sztuką i zasadami formatowania tekstu oraz doboru czcionek i ich parametrów. Współcześnie liternictwo i typografia odgrywają kluczowe i istotne role niemal w przypadku każdej stronie www udostępnianej publicznie - wpływając na jakość ich odbioru po stronie internauty a tym samym zapewniając nie tylko komfort czytania ale i emocje związane z przetwarzania całej zawartości kontekstowej i tekstowej oraz z przyswajaniem zdobytej wiedzy. Jeżeli natomiast typografia strony czy sklepy działa poprawnie i została "napisana" w sposób przemyślany to często nawet tego nie zauważamy na co dzień. Inaczej bywa jeśli nie dograją się dane czcionki albo arkusze styli - czyli formatowanie strony i tekstów się nie powiedzie, wówczas prawdopodobnie automatycznie wyłączamy takie strony internetowe oraz odbijamy się od nich gdyż czytanie domyślnego tekstu jest wręcz nieprzyjemne i uciążliwe.
Lata temu część tekstów (np. nagłówki stron i inne elementy) wizualizowało się za pomocą grafiki, gdyś dostępność czcionek webowych była ograniczona. Dzisiaj w zasadzie wszystkie strony internetowe posiadają tekst pisany czyli renderowany przez przeglądarkę, a więc wszędzie tam gdzie jest renderowany tekst tekst istnieje jakaś typografia - abstrahujemy od tego czy jest lepsza czy gorsza, ale zawsze z jakąś mamy do czynienia. Biorąc pod uwagę te fakty, każdy kto zajmuje się tworzeniem i projektowaniem produktów internetowych powinien poświęcić czas na zagłębienie tej tematyki a więc tym samym musi zainwestować swój czas w typografię projektowanej strony czy to na potrzeby własne czy podczas zlecenia dla klienta a skupiając swoją uwagę i w głównej mierze koncentrując się nie tylko na wyglądzie ale (co istotne) również na czytelności swoich tekstu renderowanego, projektant ma więc swojego rodzaju pewność że odbiorcy korzystający później z owoców jego pracy dostaną czytelny i łatwy w odbiorze produkt i publikację. Istotną rolę zatem w każdej firmie zajmującej się tworzeniem witryn www odgrywają osoby odpowiedzialne za front-end a nieliczni back-endowcy, którzy doceniają dobrą typografię i liternictwo oraz dbają o takie niuanse i szczegóły - praca tych ludzi będzie świadczyć o ich profesjonalnym podejściu, zrozumieniu odbiorcy oraz kreatywności pomysłowości w dziedzinie projektowania. Czytelniku - z poniższego przewodnika i artykułu pozyskasz wiedzę oraz dowiesz się wszystkiego, co powinieneś brać pod uwagę podczas tworzenia stron internetowych w taki sposób żeby być w stanie zacząć korzystać z bogactwa rozwiązań związanych typografią tworząc swoje produkty. Zostanie omówiona podstawową powszechna terminologia z tego zakresu a potem na wstępie weźmiemy pod uwagę oraz przejrzymy kilka znanych powszechnych ale istotnych wskazówek, których powinien się trzymać oraz przestrzegać każdy zajmujący się czytelnym oraz estetycznym i atrakcyjnym formatowaniem tekstu renderowanego.
Czym jest typografia / liternictwo strony internetowej i jakie ma znaczenie?
Przyjmując współczesny punkt widzenia można jasno powiedzieć iż ogólnie typografia określa i definiuje to jak dany renderowany w przeglądarce tekst strony internetowej wygląda w oczach użytkownika - czytelnika oraz wpływa na to jak wizualizowane pisane słowa dosłownie pojawiają się / renderują na stronie internetowe (niezależnie czy jest to ekran monitora, telefonu komórkowego czy tabletu). Przemyślane liternictwo wykorzystuje się do różnych celów - przede wszystkim dobrze sformatowany może pomóc skupiać uwagę internauty tylko na tekście, widzianym na stronach internetowych - może to wynikać z istotnego faktu mówiącego o tym iż jedne z najlepszych praktyk dotyczących tekstu wyświetlanego na przeglądarkach internetowych mogą a nawet często różnią się w sposób zasadniczy od tekstów publikowanych w formie drukowanej (gdzie jego łamanie występuje w sposób sztywny i nie bierze się pod uwagę responsywności). Teksty na stronach www publikowanych w formie online muszą zatem z technicznego punktu widzenia uwzględniać więcej problematycznych kwestii. Ze względu na powstała zupełnie inna dziedzina zajmująca się tylko i wyłącznie typografią i liternictwem do zastosowań w przypadku stron www a zatem tworzy to już zupełnie inną specjalną kategorię wzornictwa i projektowania. Co więcej - można śmiało stwierdzić że typografia internetowa może obejmować zarówno sposób w jaki projektanci skupiają się na formatowaniu samego wygląd prezentowanego tekstu - czyli doboru czcionek, odpowiednie wykorzystanie zasad funkcjonowania kolorów i styl (charakter i klimat) - oraz sposób i jakość prezentacji danego tekstu. Biorąc pod uwagę wszystkie te zasady i szczegóły można stwierdzić że mają one istotne znaczenie, gdyż składają się te czynniki i elementy nie tylko na komfort czytania i odbioru dla możliwie jak największej liczby osób przeglądających. Dodatkowo oprócz lekkości i łatwości czytania tekstu renderowanego - wszystkie teksty cyfrowe powinny być projektowane z myślą o tym aby spełniać następujące zasady:
- znacząco krótsze okresy uwagi czytelnika (osoby przeglądającej)
- dostępność treści - zasady ułatwiające czytelność ponieważ nie wszyscy odbiorcy stron internetowych tak samo postrzegają dane obrazy i symbole - lub wchodzą w interakcję z nimi w podobny sposób
- przejrzystość treści na stronie internetowej - warto o to zadbać ponieważ użytkownicy często najzwyklej w świecie odwiedzają strony www poszukując czegoś co ich na dany moment interesuje - dlatego chcą szybko odnaleźć się w treściach
- Ważna jest responsywność i skalowanie cross-browser gdyż obecnie istnieje wiele rodzajów urządzeń i rozmiarów ekranów (komputery stacjonarne, przenośne i telefony) dlatego też tekst powinien być czytelny na każdym urządzeniu.
Dodatkowo dbając o estetykę oraz czytelność projektowanych stron internetowych, nasza firma Exponet Bielsko-Biała stosuje dodatkowo następujące reguły:
- Ograniczamy ilość wykorzystywanych na stronach internetowych krojów pisma (fonts)
- Staramy się używać bezszeryfowej krojów pisma dla tekstu podstawowego głównego kontentu strony
- W możliwy sposób próbujemy się początkowo trzymać czcionek standardowych, lub reguł alternatywnych wykorzystania krojów podstawowych - w przypadku opóźnienia ładowania się zasobów zewnętrznych (np. czcionki Google).
- Dopasowujemy rozmiar tekstu w sposób elastyczny tak aby zachować proporcje do dostępnej przestrzeni (wspomaganie responsywności)
- Unikamy cap-locka, stosowanie wielkich liter drukowanych jest mało eleganckie i wprowadza wrażenie krzyku
- Stosujemy odpowiedni dobór kolorów wynikający w głównej mierze z kolorystyki template / szablonu reszty projektu strony www.
- Łamiemy tekst tak aby nie przekraczał liczby stu znaków w jednej linijce tekstu pisanego - ułatwia to czytanie
- Dbamy o przestrzeń i stosujemy white-space tak aby nadać lekkości strony w odbiorze
- Nie stosujemy animacji tekstu - unikamy scrolli, migania oraz migotania - akceptowane są jedynie zachowania związane z akcjami na stronie (buttony i inne)
Warto przeczytać:
