Typografia w projektach internetowych ma znaczenie

12 stycznia, 2017

Jakiś czas temu wiele negatywnych komentarzy w tzw. środowisku otrzymała nowa strona jednego z najpopularniejszych sklepów z artykułami dziecięcymi ze względu na użycie na stronie czcionki Comic Sans. Faktem jest, że jest to chyba najbardziej wyśmiewana czcionka świata, a jeśli projektanci serwisu użyli jej świadomie i w dodatku nie celując w ironię, było to niewątpliwie posunięcie ryzykowne. Zaczęłam się jednak przy tej okazji zastanawiać, jak wielkie naprawdę znaczenie ma typografia w projektowaniu i jak bardzo przekłada się to na postrzeganie produktu końcowego.

Więcej

Spis treści

O co w tym chodzi?

Typografia internetowa podlega w większości tym samym zasadom, co typografia w projektach drukowanych – te jednakże miały setki lat, by się rozwinąć i unormować, podczas gdy projektowanie w internecie często wciąż jeszcze musi „iść na kompromisy”. Czym w zasadzie jest typografia? To nic innego, jak projektowanie i stosowanie krojów pisma jako środka komunikacji. I mamy tu na myśli nie tylko samą czcionkę jako taką, ale też sposób ułożenia liter czy cyfr, znaki, rozplanowanie całych linii i akapitów, a w końcu również białe przestrzenie.

Dobra typografia w projektach internetowych może stać się gwarantem tego, że strona będzie w zamierzony sposób komunikowała z odbiorcami, jeśli jednak nie będzie odpowiednio przemyślana, nawet wspaniałe grafiki, palety i zdjęcia nie sprawią, że przesłanie będzie odebrane w zamierzony sposób. A często jednak ten element jest pomijany, bowiem ważniejsza jest komunikacja obrazkowa. Czy jednak słusznie?

Przykład strony wspomnianej we wstępie pokazuje, że coś w tym jest – coraz więcej mamy osób zainteresowanych projektowaniem, coraz więcej też komunikacji dostępnej nawet dla laików (memy ośmieszające jakąś osobę są już codziennością, jednakże istnieje również mnóstwo memów dotyczących używania niesławnej czcionki). Czy użycie Comic Sans przełożyło się w jakikolwiek sposób na wyniki biznesowe? Nie wiem, nie mam dostępu do wiarygodnych danych. Jednakże wizerunkowo na pewno nie było to korzystne.

Czego więc unikać?

Na to pytanie zapewne odpowiedziało już bardzo dużo wpisów, artykułów, czy choćby memów 😉 Ale pokuszę się o kolejną krótką opinię na ten temat.

Czcionka dobrana do wersji językowych

Celowo ustawiam to jako pierwszy punkt, ponieważ często mamy do czynienia z projektami wielojęzycznymi, strona skierowana jest do odbiorców w różnych krajach, a nagle okazuje się, że wybrana czcionka nie ma znaków dla danej grupy językowej. Warto się upewnić, że wybrany przez nas krój ma dostępne znaki we wszystkich potrzebnych nam językach i nie będziemy musieli narażać naszych odbiorców na niesympatycznie wyglądające słowa z zastąpionymi znakami innym krojem.

Co za dużo, to niezdrowo

Mnogość dostępnych dzisiaj rodzin czcionek i ich odmian (pochylenie, pogrubienie) korci niewątpliwie, by stosować je z rozmachem. Warto jednak pamiętać, że tekst ma być przede wszystkim czytelny i forma nie powinna odwracać uwagi od treści. Jeśli chcemy użyć więcej niż jeden krój, na dwóch warto poprzestać, przy czym trzeba dobrać je umiejętnie – jeśli jeden jest dominujący, wyjątkowo rzucający się w oczy, drugi powinien być bardziej stonowany, zdecydowanie mniej ozdobny i czytelny. Kroje muszą też do siebie pasować wizualnie – jeśli nie mamy pewności czy tak jest, możemy skorzystać z jeden z wielu dostępnych stron pomagających w doborze odpowiednich czcionek – Font Combinations lub fontpair.co.

Szerokość bloku

Dzielenie tekstów na bloki i kolumny na stronie internetowej może wyglądać nieco inaczej niż w książce – tutaj musimy wziąć pod uwagę, że użytkownicy czytają na monitorze, tekst nie powinien więc być rozmieszczony w jednej kolumnie od brzegu do brzegu strony, łatwo bowiem wówczas zgubić linię i czytanie staje się kłopotliwe. Nie warto również dzielić jednego tekstu na więcej niż dwie kolumny – o czytelność wówczas równie trudno. Z zasady dla optymalnego komfortu – bez konieczności poruszania gałkami ocznymi – linia tekstu powinna mieć około 66 znaków (mniej więcej 9 wyrazów).

Testowanie

Jak we wszystkim, tak w przypadku czcionek musimy przetestować – zwłaszcza używając webfontów – jak wyświetlają się one pod różnymi przeglądarkami. Bardzo często czcionka wygląda doskonale w projekcie, w Photoshopie wszystko pięknie się układa, ale wersja na żywo nie jest już taka idealna – zwłaszcza w przypadku cienkich krojów lub wersji Light , efekt może nie być tak zachwycający jak w projekcie. Google Fonts pozwala nam na przejrzenie wszystkich czcionek w środowisku internetowym, warto więc z tego skorzystać zanim zdecydujemy się na dobór kroju.

Podsumowując…

Projektowanie na potrzeby www to łączenie ze sobą naprawdę wielu dziedzin, aby produkt końcowy spełniał swoje cele, a typografia jest jednym z bardziej znaczących elementów. Trzeba znaleźć ten wspaniały punkt, w którym kolorystyka, dobór grafik, zdjęć, czcionek, wydźwięk i ogólna estetyka łączą się, a to nie zawsze bywa proste. Tak więc czy typografia jest najważniejsza? W większości przypadków nie. Czy ma znaczenie? Ogromne!

Po co nam te wireframe’y?!

24 lipca, 2015

Ania Owczarczak

Pamiętam, jak zaczynałam swoją przygodę w Internetach, że najważniejsze było takie zaprojektowanie grafiki, żeby programista mógł ją w miarę prosty sposób wdrożyć. Słyszałam wówczas ‘to się nie da, zaprojektuj to inaczej’ . Dzisiaj zarówno wiedza, jak i możliwości są coraz większe, już sama dobra grafika, czy bezbłędne (?!) kodowanie nie wystarcza, żeby powstał dobry serwis. Widuję mnóstwo stron, które mają wspaniałe layouty, nic się nie sypie, ale odnalezienie się w nich, dojście do interesujących mnie rzeczy nie jest takie proste. Czy można ten problem rozwiązać zanim się pojawi? Zazwyczaj tak.

Więcej

Spis treści

Historia pewnego systemu

Jakiś czas temu dla jednego z naszych klientów projektowaliśmy użyteczność serwisu. Zdania w obozie klienta były podzielone – czy w ogóle trzeba te wireframe’y projektować, nie szkoda pieniędzy? Przecież można to od razu z grafiką… Szybko jednakże okazało się, że nawet widząc prosty rysunek z rozkładem elementów, można dojść do tego, że przecież będą dwa rodzaje konta, więc należałoby od razu dać wybór, czy zakładać konto A, czy B. Często też wystarczy spojrzeć na szkic, aby się zorientować, że rozwiązanie, które w teorii wydawało się klientowi dobre, może wprowadzić chaos w serwisie. Wprowadzając jednak kilka drobnych zmian można pokazać rozwiązanie, które da się w prosty i przejrzysty sposób pokazać zarówno na monitorze, jak i na telefonie komórkowym. I zminimalizować ryzyko, że użytkownik odwiedzający serwis zgubi się, ucieknie.

Co to jest wireframe?

Wireframes czy page scheamtics to nic innego jak makiety strony, szkice tworzące ścieżkę po jakiej będzie poruszał się użytkownik po stronie. Zadaniem specjalisty przy tworzeniu tych schematów jest pokazanie struktury strony oraz rozmieszczenie najważniejszych jej elementów – logo, teksty, zdjęcia, rysunki, ikony i najważniejsze – miejsca, w których oczekujemy akcji użytkownika (butony CTA). Wireframes mogą osiągać różny stopień dokładności – od prostych szkiców z pustymi boksami, poprzez gray-box wireframing (zaznaczamy tu nasileniem szarości znaczenie poszczególnych elementów) aż po makiety z wykorzystaniem kolorów czy czcionek, które będą użyte w docelowym projekcie graficznym.

Czy to mi jest potrzebne?

Prawdopodobnie nie przy każdym projekcie projektowanie wireframes jest niezbędne (choć przydatne), jednakże przygotowanie nawet najprostszego szkicu może znacząco podnieść jakość końcowego produktu i pozwoli zastanowić się nad poszczególnymi elementami i funkcjami serwisu zarówno projektantom, jak i ich klientom.

Prawda jest bowiem taka, że jeśli ktoś odwiedzi naszą stronę i nie będzie mógł w prosty sposób znaleźć tego, czego szuka, nie wróci już do nas. Przygotowując wireframes zanim uruchomimy serwis możemy wyłapać błędy, które po uruchomieniu byłyby bardzo kosztowne do naprawienia. Możemy też przekonać się, że czasem sprawdzone rozwiązania będą najlepsze, że użytkownicy spodziewają się znaleźć pewne elementy w określonych miejscach. Możemy stworzyć stronę (aplikację, system itd.), z której będzie można łatwo korzystać.

Wypracowując wireframes dla wyżej wspomnianego serwisu udało nam się skrócić o 10% czas projektowania grafiki (względem estymowanego czasu) oraz znacząco obniżyć liczbę poprawek na etapie testowania.

Tag: projektowanie