Teksty na stronie #2 – Rozmieszczenie | Blog X-Coding
teksty-na-stronie-2-rozmieszczenie

Teksty na stronie #2 – Rozmieszczenie

27.05.2015 / / E-Commerce

Tydzień temu opisałem ważne informacje dotyczące wyboru czcionek na stronę. Wyjaśniłem, że typografia odpowiada za takie zagadnienia jak odpowiednie prezentowanie treści na stronie. Pokazałem, że czcionka składa się z kilku ważnych elementów, m.in.: trzon, ramię, wydłużenie górne, wydłużenie dolne, szeryfy, kerning oraz wysokość x (wysokość średnia). Wielkość tych elementów jest różna dla czcionek i wpływa bezpośrednio na ich odbiór przez użytkowników stron internetowych, a także na łatwność czytania. Ogólnie możesz o wszystkim przeczytać tu.

Wskazałem też na kilka kategorii czcionek, wśród których rozróżniam style:

  • Oldstyle,
  • Modern (nowoczesny),
  • Slab serif (szeryf belkowy),
  • Sans serif (bezszeryfowy),
  • Script (odręczny),
  • Decorative (dekoracyjny).

Umiejętność ich rozróżniania pomaga stosować je w odpowiedni sposób, tak by konstruowany tekst był zarówno ciekawy, jak i miły dla oka, czytelny. W tym artykule skupię się na tym, jakie stosować zasady ułożenia tekstu względem siebie tworząc m.in idealną stronę. Zasady te są jednak na tyle uniwersalne, że doskonale sprawdzają się również tworząc ulotki, ogłoszenia czy wizytówki. Są to zasady:

  • odległości,
  • wyrównania,
  • powtarzania,
  • kontrastu.

Zasady te oczywiście są ze sobą powiązane i często stosuje się więcej niż jedną na raz, ale postaram się omówić z osobna.

Zasada odległości

Zasada odległości jest prosta, zresztą tak jak i pozostałe zasady. Zgodnie z tą zasadą obiekty, elementy które są blisko siebie sprawiają wrażenie w jakiś sposób połączonych. Natomiast obiekty oddalone od siebie wyglądają jakby miały ze sobą niewiele wspólnego.

Z tego powodu elementy, które nie są ze sobą powiązane powinniśmy zawsze umieszczać w widocznej odległości od siebie, a te zależne od siebie – blisko. Dobrym przykładem jest nagłówek i akapit. Nagłówek powinien być blisko akapitu, którego dotyczy, a oddalenie go od poprzedniego akapitu sprawia, że tekst staje się bardziej przejrzysty.

Jest to ważne, ponieważ odpowiednie zastosowanie odległości na stronie nadaje jej strukturę, elementy wyglądają na sensownie zorganizowane, a szukane informacje łatwiej jest znaleźć.

Ważne jest również, że gdy elementy są sensownie ułożone względem siebie, to tzw. „white space”, czyli niezagospodarowana część strony, również wygląda zorganizowaną. Jej duża ilość nie sprawia wtedy wrażenia przypadkowej pustki, której nie udało się odpowiednio zagospodarować.

Zasada odległości tekstu

Zasada wyrównania

Zasada wyrównania traktuje o tym, że nic na stronie nie powinno się znaleźć w danym miejscu tylko dlatego, że akurat jest tam wolna przestrzeń. Każdy element musi być natomiast być wizualnie połączony innym obiektem na stronie. Czyli nawet stosując zasadę odległości, elementy na stronie muszą wyglądać jak część większej całości.

Przeglądając wiele aukcji internetowych widać, że np. najpopularniejszym wyrównaniem jest to do środka. Niestety jest to o tyle niepraktyczne, że nie sprawia wrażenia jedności na stronie, a w dodatku utrudnia czytanie tekstu. A jeśli już chce się to robić, to tak, żeby było widoczne iż jest to celowy zabieg projektanta, a nie przypadkowe ułożenie, jak to zaprezentowano na obrazku poniżej.

Ważne jest również, by zachować spójność – jeśli wszystkie teksty wyrównane są do lewej strony, to niech zaczynają się w jednej linii pionowej. W przeciwnym razie ciężko jest uzyskać wrażenie całości, a elementy mogą wyglądać na rozmieszczone chaotycznie.

Najbezpieczniej jest używać jednego wyrównania na stronie, ew. dwóch pod warunkiem że żadne z nich nie jest do środka. Teksty wyrównane do lewej i prawej strony, jeśli znajdują się w przeciwnych rogach strony, sprawiają wrażenie całości i nadają strukturę.

Zasada wyrównania

Zasada powtarzania

Ta zasada mówi, że należy powtarzać pewne elementy projektu, tak by jego zawartość można było łatwiej rozpoznawać. Dotyczy to np. pogrubionej czcionki w nagłówkach, cienkiej linii na dole strony, koloru wyróżnionych elementów tekstu, konkretnego sposobu wypunktowania (włącznie np. z innym kolorem i czcionką niż reszta tekstu), czy nawet elementów graficznych.

Powtarzanie sprzyja poczuciu spójności wszystkiego na stronie, a także wzmaga wizualne zainteresowanie. A to co wygląda interesująco z większym prawdopodobieństwem zostanie przeczytane.

Należy jednak uważać, by powtarzające się elementy pozostały dość subtelne i by nie zaczęły dominować nad tekstem.

Zasada powtarzania

Zasada kontrastu

Ostatnia z wymienionych przeze mnie zasad dotyczy kontrastu elementów na stronie. Jest to najbardziej efektowny sposób by wizualnie zainteresować czytelników prezentowaną treścią. Zasada ta mówi, że jeśli dwa elementy nie są dokładnie takie same, to spraw by były różne. I to wyraźnie różne.

Kontrast można tworzyć na wiele sposób, można zestawiać ze sobą wielką i małą czcionkę, albo styl odstyle z pogrubionym bezszeryfowym, cienką i grubą linię, element poziomy i pionowy (jak np. długa linia tekstu z wąską kolumną), a nawet czarną czcionkę na białym tle z nagłówkiem białym na czarnym tle. Ważne jest by kontrast uczynić wyraźnym.

Stosuje się go po to, by przyciągnąć uwagę. Elementy wyraźnie zróżnicowane wyglądają ciekawiej, a w dodatku, jak w przypadku poprzednich zasad, pomagają uwypuklić organizację strony. Stosując wyraźny kontrast czytelnik jest w stanie  błyskawicznie dowiedzieć się, jak informacje są ułożone względem siebie i w jakiej kolejności je czytać.

Zasada kontrastu

Podsumowanie

W niniejszym artykule przedstawiłem najważniejsze zasady, z których korzystam w codziennej pracy. Nie są to ścisłe reguły postępowania, raczej wskazówki pomagające tak ułożyć elementy na stronie względem siebie, by zainteresować czytelnika, a także by był wstanie zwrócić uwagę na elementy najistotniejsze. Ważne jest, jak wspomniałem we wstępie, że aby osiągnąć najlepszą organizację treści na stronie, należy brać pod uwagę wszystkie te zasady, nie wystarczy skupić się na jednej z nich.

Na koniec zachęcam do poeksperymentowania z tworzonymi przez siebie dokumentami czy stronami, tak aby na własnym przykładzie zobaczyć, jak ciekawe efekty daje stosowanie tych zasad.