Dobre praktyki przy projektowaniu witryn internetowych, część IV

Projektując grafikę dla stron www trzeba pamiętać, że nadal najistotniejszym elementem każdej strony jest tekst. Tak więc w naszych projektach odpowiednio dużo uwagi poświęcić musimy zagadnieniu takiemu jak

Typografia

Typografia publikacji internetowych kontynuuje tradycje wywodzące się z druku tradycyjnego, a więc sięga tradycji wywodzących się z czasów Gutenberga, a nawet wcześniejszych tradycji tyczących się np. kaligrafii. Jakkolwiek typografia tradycyjna różni się od internetowej, to w obu przypadkach idzie o to samo: o funkcjonalność, czytelność i estetykę. Tak naprawdę różnice leżą raczej w medium jakim się posługujemy, bowiem w obu przypadkach trzeba wykorzystywać wiedzę o tym jak działa ludzkie oko, jakie są zasady języka, alfabet, słownictwo, czym są porządek, różnorodność, rytm, kontrast, symetria, równowaga, napięcie, skala, przestrzeń, tekstura, kształt, światło, cień, kolor…

Nie zagłębiając się w tajniki typografii musimy zdawać sobie sprawę z konieczności panowania nad podstawowymi elementami charakteryzującymi elementy tekstowe naszych projektów. W ramach jednego artykułu trudno jest odnieść się całościowo do dziedziny tak rozległej jak typografia internetowa. Chcąc podsumować zasadnicze elementy składające się na typograficzny charakter strony www, należy wymienić:

• dobór czcionki: prawidłowo dobrana czcionka może decydować o charakterze strony. Czcionkę dobieramy tak, aby była zgodna z "duchem" projektu, z zasady ograniczając liczbę użytych krojów pisma. Stosujemy zwykle czcionki bezszeryfowe, ponieważ są one bezpieczniejsze w renderingu., tradycyjnie też, czcionki szeryfowe stosuje się do dłuższych tekstów. Więcej na ten temat w jednym z moich poprzednich postów.
  
• dobór rozmiarów pisma i rozmiarów odstępów: tutaj także trzeba kierować się estetyką i ogólnym stylem projektu, ale też nie można łamać dobrych zasad pochodzących jeszcze z zamierzchłych technik drukarskich. Dbać należy przede wszystkim o zachowanie równomiernego rytmu tekstu. Rozmiar pisma oraz odstępów powinien też być dobierany do przyjętej długości linii.
  
• optymalizowanie długości linii: długość linii tekstu powinna ułatwiać czytanie, co oznacza że linia nie może być zbyt krótka ale tez zbyt długa. Przyjmuje się, że optymalna długość wiersza ma wartość od półtorej do dwóch długości alfabetu złożonego małymi literami (27 znaków to minimalna długość wiersza, 40 optymalna, a 70 maksymalna), pod względem zaś liczby wyrazów optymalna długość wiersza to dziewięć lub dziesięć wyrazów (mieszczących średnio 5,5 znaków na wyraz).
  
• optymalizowanie rozmiaru stron: o tym będzie mój kolejny artykuł :)
  
• barwa tekstu: barwa tekstu nie istnieje oddzielnie od barwy tła, tak więc dobieramy ją przede wszystkim tak, aby poziom kontrastu zapewniał jak najlepszą czytelność, ponieważ nie istnieje nic gorszego jak tekst który zlewa się z otoczeniem. Niezależnie od faktycznej barwy istotnym parametrem tekstu jest "jednolita szarość kolumny" do której powinniśmy dążyć. W zależności od cech druku takich jak krój, stopień i odmiana czy odstępy, blok jednolitego (czarnego) tekstu staje mniej lub bardziej rozjaśniony (szary), co widać na przykładzie:
  
  AaaaaaaaaaAaaaaaaaaaAaaaaaaaaaAaaaaaaaaaAaaaaaaaaaAaaaaaaaaa
  AaaaaaaaaaAaaaaaaaaaAaaaaaaaaaAaaaaaaaaaAaaaaaaaaaAaaaaaaaaa
  AaaaaaaaaaAaaaaaaaaaAaaaaaaaaaAaaaaaaaaaAaaaaaaaaaAaaaaaaaaa
  AaaaaaaaaaAaaaaaaaaaAaaaaaaaaaAaaaaaaaaaAaaaaaaaaaAaaaaaaaaa AaaaaaaaaaAaaaaaaaaaAaaaaaaaaaAaaaaaaaaaAaaaaaaaaaAaaaaaaaaa AaaaaaaaaaAaaaaaaaaaAaaaaaaaaaAaaaaaaaaaAaaaaaaaaaAaaaaaaaaa
  AaaaaaaaaaAaaaaaaaaaAaaaaaaaaaAaaaaaaaaaAaaaaaaaaaAaaaaaaaaa
  
  W naszym przykładzie łatwo identyfikujemy element "bardziej szary" niż reszta tekstu, takiego to efektu w miarę możliwości powinniśmy unikać.
   
• justowanie: nagminnym zjawiskiem jest wykorzystywanie obustronnego justowania tekstu. Nie polecam tej metody, ponieważ bardzo często tak sformatowany tekst wygląda śmiesznie bowiem jest "podziurawiony". Z dwojga złego lepsze jest wyrównywanie lewostronne, zaś najlepiej, jeśli dzielimy wyrazy korzystając z miękkiego podziału, co jest pracochłonne ale daje najlepsze efekty.

O typografii internetowej można by pisać niemal w nieskończoność. W końcu internet to medium oparte o przekazywanie treści w formie druku na ekranie monitora, a więc typografia odnosi się do niemal wszystkich zagadnień związanych z projektowaniem grafiki witryn internetowych. A ponieważ taka jest ogólna tematyka mojego bloga, proszę potraktować powyższy artykuł jako wstęp.

Dobre praktyki przy projektowaniu witryn internetowych, część III

Jednymi z najbardziej frustrujących doświadczeń przy przeglądaniu stron internetowych jest sytuacja gdy nie wiemy gdzie jesteśmy i gdzie powinniśmy pójść dalej. Uniknąć podobnych sytuacji powinna nam pomóc intuicyjna i dobrze zaprojektowana


Nawigacja


Wydawać by się mogło, że nawigacje są elementami już dawno ustandaryzowanymi w których nic nie można zepsuć. Niestety tak nie jest. Aby uniknąć poważniejszych błędów trzeba pamiętać o dwóch podstawowych aspektach:

• widoczności i łatwości nawigowania - użytkownik musi łatwo orientować się w sposobie sterowania nawigacją, przyciski czy menu muszą znajdować się w widocznym miejscu u góry strony a zarazem muszą być łatwo identyfikowalne. Niedopuszczalna jest sytuacja gdy użytkownik ma problem ze znalezieniem elementów nawigacyjnych lub ze zrozumieniem ich znaczenia. Teksty przycisków menu powinny być jasne i jednoznaczne.
  Ważne jest tutaj zachowanie zdrowego rozsądku i kierowanie się naczelną zasadą użyteczności. Dla przykładu w rozwijanym menu trzeba zadbać o łatwą "klikalność" oraz o to aby kolejne podmenu nie zwijały się niespodziewanie. Dobrze jest np. wspomagać użytkownika podświetlając aktualnie wybierane elementy, tak aby miał on pewność wyboru właściwego kierunku nawigacji.
• orientacji w położeniu na mapie serwisu - istnieje wiele sposobów aby wskazać użytkownikowi "gdzie się znajduje". W małych witrynach wystarczy odpowiednio zatytułowany nagłówek lub odpowiednie oznaczenie aktywnej opcji menu. W dużych witrynach warto skorzystać ze ścieżek (breadcrumbs) lub rozbudowanych sekcji nagłówkowych dla poszczególnych działów i poddziałów, przydaje się też mapa serwisu lecz trzeba pamiętać, że dla użytkownika jest to rozwiązanie "ostateczne" zaś wielu mniej cierpliwych klientów nigdy nie skorzysta z tego akurat elementu nawigacji.

Dobre praktyki przy projektowaniu witryn internetowych, część II

Istotnym narzędziem w ręku każdego projektanta stron internetowych jest

Światła: zarządzanie wolnymi przestrzeniami

Wbrew pozorom nie każdy wolny fragment strony musi zostać wypełniony informacją, równie ważne jak elementy widoczne na stronie okazują się wolne przestrzenie, interlinie czy odstępy. Właściwe zarządzanie tego typu obiektami pozwala uzyskać wyższą czytelność zamieszczanych informacji, a tym samym ułatwiać ich przekaz.

W DTP każde puste miejsce pomiędzy elementami tekstowymi lub graficznymi na kolumnie publikacji poligraficznej lub np. na stronie internetowej nazywa się potocznie Światłem.

Światła są niezbędne, aby informacja tekstowo-graficzna prezentowała się w sposób estetyczny i funkcjonalny. Zbyt duże zagęszczenie wszelkich elementów na stronie powoduje, że światła nie ma, a więc publikacja "nie oddycha". Odbiorca ma wrażenie nadmiernego ścisku, tłoku, a czasem nawet bałaganu, i to nawet w sytuacji usystematyzowanego ułożenia wszystkich elementów względem siebie. Odbiór przekazu jest utrudniony, ponieważ niedobór światła uniemożliwia szybkie rozróżnianie formalnych elementów budowy strony (np. rozróżnianie sąsiednich pionowych bloków tekstu). Natomiast stosowanie nadmiaru światła jest dozwolone w niemal wszystkich sytuacjach - a poprawność jego użycia jest uzależniona jedynie od koncepcji projektanta. Jedynym zastrzeżeniem jest tutaj światło wewnątrz akapitu tekstu, w którym zbyt duże odległości pomiędzy sąsiednimi wierszami tekstu są ewidentnym błędem projektowym, rozpraszającym uwagę odbiorcy od zintegrowanego tematycznie bloku informacji

Podstawowymi typami odstępów z których możemy skorzystać w projekcie internetowym są:

• interlinie - to jest odległości między sąsiednimi wierszami tekstu liczone jako odstęp pomiędzy dolną linią pisma w wierszu górnym i górną linią pisma w wierszu dolnym. Przestrzeń między liniami bezpośrednio wpływa na czytelność tekstu. Zbyt mała przestrzeń powoduje że czytającemu zlewają się kolejne wiersze tekstu, zaś jego wzrok ma tendencję do przeskakiwania pomiędzy nimi oraz pomijania niektórych linii. Z kolei za duży odstęp powoduje że wzrok czytającego "gubi się" przy przechodzeniu pomiędzy wierszami. Ogólnie należy znaleźć złoty środek pasujący do danego projektu
• odstępy międzyakapitowe - odległości pomiędzy akapitami tekstu, w wypadku HTML mamy do czynienia z odległościami pomiędzy paragrafami. Dal większej czytelności tekstu ważne jest, aby odstęp pomiędzy akapitami był wyraźnie większy niż interlinia.
• paddingi - ogólnie rzecz ujmując tekst nigdy nie powinien dotykać innych elementów strony. Aby odseparować bloki tekstu od pozostałych elementów stosuje się właśnie padding

Warto dodać że duża ilość światła w kompozycji powoduje iż zwykle wydaje się ona bardziej elegancka a nawet ekskluzywna. Stąd właśnie na stronach internetowych kierowanych do odbiorców drogich i unikalnych produktów znajdziemy dużo świetnie skomponowanej, wolnej przestrzeni.

Dobre praktyki przy projektowaniu witryn internetowych, część I

Zaprojektowanie dobrej witryny internetowej jest  zagadnieniem dosyć skomplikowanym, ponieważ wymaga wytworzenia produktu który będzie jednocześnie użyteczny a zarazem przyjemny w odbiorze, będzie dostarczał informacji a jednocześnie posłuży do budowania identyfikacji marki, będzie wizualnie spójny i technicznie niezawodny, bogaty graficznie a przy tym możliwie szybki.

Każdy z realizowanych projektów jest też zwykle "jedyny w swoim rodzaju", posiada swoją specyfikę, krótko mówiąc portal czy strona internetowa jako produkt nie jest produktem seryjnym, schodzącym z określoną częstotliwością z taśmy produkcyjnej. Jednakże dobrze jest zidentyfikować i określić elementy procesu projektowania, które używane w sposób powtarzalny pozwolą projektantowi zachować pewien standard i poziom jego prac.

Priorytetyzacja informacji

Projekt internetowy służy prezentowaniu informacji, można by rzec nawet, iż informacja jest esencją każdej witryny internetowej. Strona internetowa nie miałaby racji bytu bez informacji. Chcąc zaprojektować stronę która wybijała się będzie ponad przeciętność musimy zdawać sobie sprawę z tego oczywistego właściwie faktu. 
  
Jednym z najistotniejszych narzędzi w arsenale projektanta jest właściwa priorytetyzacja prezentowanych informacji. Dobry projekt tak porządkuje informacje według ich ważności, aby podczas nawigacji użytkownik był
niejako prowadzony po ekranie przez projektanta.

Stąd nie jest bynajmniej przypadkiem umieszczanie logotypów zwykle w lewym górnym rogu strony internetowej. W badaniach wykazano, że po załadowaniu strony ludzie w pierwszej kolejności patrzą zwykle na ten fragment ekranu, co jest odruchem wynikającym z tego jak czytamy książki - zaczynamy od lewej od góry strony.

Ale proirytetyzacja powinna podążać znacznie dalej. Należy kierować wzrokiem użytkownika poprzez sekwencję kroków, wiodąc go poprzez kolejne informacje,  np. nagłówek / tytuł strony, wybijająca się grafikę aż do głównego tekstu który chcemy zaprezentować.




To na co patrzy użytkownik zależy w pierwszym rzędzie od projektanta. Kierowanie wzrokiem użytkownika jest możliwe dzięki narzędziom jakie mamy do dyspozycji:

• sterowaniu położeniem elementów - to gdzie umieścimy element odbija się na jego "widoczności" dla użytkownika. Ogólna zasada mówi, iż wzrok człowieka podąża od lewego górnego rogu strony do jej prawej dolnej części.
• koloryzacji elementów - barw oraz ich nasycenia także używamy do przyciągania wzroku użytkownika
• kolorów tła - ważne są nie tylko kolory elementów, ważna jest przede wszystkim kolorystyka strony jako całości, a to dlatego że chcąc przyciągnąć wzrok użytkownika do wybranego elementu nie kierujemy się jakimś określonym kolorem który jest lepszy od innych. Chodzi jedynie o to, aby kolor takiego elementu wyróżniał się na tle pozostałych.
• kontrast - elementy wyróżniające się budzą większe zainteresowanie niż takie które zlewają się wizualnie z pozostałymi
• rozmiar - elementy większe wyróżniają się na tle mniejszych i odwrotnie, kiedy pierwszy raz patrzymy na stronę, dostrzegamy zwykle np. drukowany wielką czcionką tytuł
• elementy  graficzne - jeśli przy jakimś elemencie umieścimy duży wykrzyknik - zapewne skierujemy tam wzrok użytkownika

Dobór czcionek na stronę www

Projektując stronę www, zastanawiamy się jaka czcionka najlepiej będzie oddawać charakter witryny. Musimy wziąć pod uwagę nie tylko wygląd czcionki lecz również prawidłowe jej wyświetlanie w różnych przeglądarkach. Co ciekawe - brak jest czcionek, które można uznać za „zupełnie bezpieczne”.

Co oznacza że czcionka jest bezpieczna?

Otóż zdarza się, że projektanci stron internetowych zapominają o użytkownikach systemów operacyjnych innych niż Windows. Znane i często używane w tym systemie czcionki nie zawsze mają swe odpowiedniki w innych systemach (MacOS, różne dystrybucje Linux'a, Android …).

Weźmy dla przykładu czcionkę Tahoma. Czcionka ta w systemie MacOS ma odpowiednik o nazwie Geneva, w niektórych dystrybucjach Linuxa istnieje podobna (lecz nie identyczna) czcionka Kalimati, w innych zaś najbardziej zbliżona będzie znana także z Windowsa Verdana.

Mimo że istnieje niewiele użytecznych a jednocześnie bezpiecznych zestawów czcionek,
to te które mamy do dyspozycji także mogą stać się efektywnym rozwiązaniem, szczególnie przy użyciu pewnych mechanizmów CSS takich jak rodziny czcionek (font stacks).

Rodziny czcionek

Rodziny czcionek uporządkowane są zestawami według „ważności”. Definiujemy je w CSS-owym atrybucie font-family, np.:

font-family: Tahoma, Geneva, Kalimati, Verdana, sans-serif

Przeglądarka dopasowuje czcionki do danego elementu html kierując się kolejnością nazw podanych jako wartość font-family. W naszym przykładzie przeglądarka najpierw próbuje znaleźć czcionkę Tahoma, a jeśli jej nie ma w systemie, szuka czcionki Geneva itd.

Wszystko zostaje w Rodzinie

Definiując rodzinę czcionek, po pierwsze należy rozważyć kontekst jej zastosowania, to jest funkcję jaką będzie spełniać tekst zapisany wybraną czcionką. Inaczej należy dobrać rodzinę dla nagłówków, inaczej dla treści artykułu a inaczej dla notek typu keywords czy copyright – inaczej bowiem niektóre czcionki „sprawują się” gdy wyświetlimy je dużych rozmiarach, a inaczej gdy występują w rozmiarze 12px w dużych blokach tekstu.

Na przykład, Helvetica wygląda dobrze na ekranie, gdy tekst jest wystarczająco duży, zaś Arial wygląda i „czyta się” nieco lepiej niż Helvetica w mniejszych formatach. Dlatego też w Twojej rodzinie czcionka Helvetica może występować w zależności od tego, czy projektujesz ją dla zawartości czy też dla tytułu strony.

Projektując rodzinę czcionek najpierw wybierajmy idealnego „kandydata”, potem zaś w zależności od kontekstu dokonujmy wyboru pozostałych czcionek rodziny.

Możemy przy tym kierować się zasadami wymienionymi poniżej:

Tytuły [ więcej niż 12px ]:

font-family: [czcionka]Idealna, Alternatywna,Podobna,Generyczna;

1. Idealna – Wybór nie musi być ograniczony tym co jest uważane powszechnie za "czcionkę bezpieczną". Istnieje wiele innych czcionek, które mają dość wysoki poziom popularności,
   i spośród nich wybieramy. Nie stosujemy jedynie czcionek specyficznych, a ograniczamy się do takich które są standardowymi czcionkami systemów.
2. Alternatywna – Wybierając czcionkę na tytuł lub nagłówek musimy pamiętać że przy większych rozmiarowo znakach bardziej zauważalne są szczegóły ich kroju, stąd starajmy się aby czcionka alternatywna oddawała przede wszystkim styl i ducha czcionki idealnej, natomiast mniej istotny może okazać się faktyczny lub względny jej rozmiar. Aby odnaleźć czcionkę stylowo zbliżoną do idealnej poszukać możemy w klasyfikacji krojów. Ogólnie zwracamy uwagę na podobieństwa formy poszczególnych znaków.
3. Podobna – Tutaj bierzemy pod uwagę czcionki „na oko” podobne, a przede wszystkim takie, które nie burzą oczekiwanego przez nas wyglądu stron.
4. Generyczna – Czcionki należące do tej samej grupy (np. sans-serif)
   

Akapity [ poniżej 12px ]:

font-family: [czcionka]Idealna, Alternatywna,Zgodna,Generyczna;

1. Idealna – Nawet jeśli zamierzamy dopasować wygląd tekstu do stylu tytułu, może warto rozważyć czytelność kroju pisma na przestrzeni kilku akapitów. Na przykład: Neue Helvetica i Arial są lepiej przystosowane do odczytu z ekranu niż Helvetica.
2. Zgodna – Szukamy tutaj czegoś co jest szeroko implementowane w systemach, a co nie psuje naszego layoutu. Dla przykładu pomiędzy czcionkami Times New Roman i Georgia jest jedynie 2pt różnicy, ale zastosowanie jednej jako zamiennika drugiej spowoduje na przestrzeni akapitów testu znaczne przesunięcia i w efekcie może całkowicie pogrzebać nasz skądinąd ładny projekt.
3. Podobna – Coś w podobnym stylu a jednocześnie szeroko implementowane na rożnych platformach
4. Generyczna – Czcionki należące do tej samej grupy (np. sans-serif).
   

Jeśli projektujemy strony w mniej popularnym systemie (np. MacOs) starajmy się jako idealnych używać czcionek typowych dla Windows, ponieważ większość z internautów pracuje w tym systemie. Więcej informacji na temat częstości występowania wybranych krojów na niektórych systemach operacyjnych znaleźć można na codestyle.org/css/font-family/.

Stwórz swoją rodzinę

Poniżej kilka propozycji rodzin czcionek dostosowanych do akapitów (a) oraz tytułów (t)

Arial, “Helvetica Neue”, Helvetica, sans-serif - a, t

“Courier New”, Courier, monospace - a, t

Times, “Times New Roman”, Georgia, serif - a, t

Baskerville, Times, “Times New Roman”, serif - t

Garamond, “Hoefler Text”, Palatino, “Palatino Linotype”, serif - t

Tahoma, Verdana, Geneva - t

Garamond, “Hoefler Text”, Times New Roman, Times, serif - a

Tahoma, Geneva, Verdana - a

Verdana, Geneva, Tahoma, sans-serif - a