Jakiś czas temu spotkałam się z bardzo trafnym porównaniem. Mówiło ono, że strona internetowa powinna być tak przejrzysta i zorganizowana, jak praca doktorska.
Była to opinia z artykułu poświęconego pozycjonowaniu, jednak świetnie nadaje się do projektowania stron.
Strona internetowa, oprócz atrakcyjnego wyglądu musi być doskonale zorganizowana. Poruszanie się po niej musi być tak łatwe, jak korzystanie ze spisu treści i przeglądanie książki. Skorzystają na tym wszyscy:
- strona będzie zawierała informacje, które chce zamieścić na niej Klient, ale — będą zorganizowane jak praca naukowa
- odwiedzającym będzie łatwiej znaleźć te informacje i w pełni korzystać z funkcjonalności strony internetowej
- strona, przez swoją organizację, będzie się dużo lepiej pozycjonować
- będzie też łatwiej wypromować ją w płatnych reklamach
Wad nie widać, a zalety wciąż rosną. Niestety, nie da się tego osiągnąć bez wcześniejszego przygotowania.
Wywiad i zebranie materiałów
W moim przekonaniu niewykonalne jest stworzenie strony, która będzie spełniać oczekiwania, bez odpowiedniego planu. Najważniejszym etapem jest rozmowa z Klientem. Im więcej informacji na temat strony internetowej uda się zebrać podczas rozmów – tym lepiej. Ponad to, Klient może dysponować różnymi materiałami: logo, firmową paletą barw lub typografią. Bardzo dobrze jeżeli posiada też księgę znaku.
Klient może też posiadać wcześniej przygotowane teksty i zdjęcia. Najczęściej z taką sytuacją mamy do czynienia wtedy, kiedy Klient miał już wcześniej stronę internetową, a naszym zadaniem jest stworzenie jej od nowa lub odświeżenie.
Przystańmy na chwilę przy temacie materiałów, a głównie – treści, jaka ma znaleźć się na stronie. To, czy przed przystąpieniem do projektowania wyglądu, Klient posiada gotowe teksty, dyktuje dwa, kompletnie różne podejścia do projektowania. Posiadanie tekstów ma kluczowy wpływ na sposób pracy.
Są to Design–First i Content–First Design.
Design–First
Wygląd ponad wszystko! Nie wiadomo jakie treści mają pojawić się na stronie. Struktura strony tworzona jest w oparciu o luźne założenia. Wiemy mniej więcej jakie podstrony mają się pojawić, ale nie mamy jeszcze ich zawartości merytorycznej.
Projekt strony internetowej powstaje w oparciu o przykładową treść i zdjęcia. Teksty są często budowane w oparciu o Lorem Ipsum (czyli są pisane łaciną). Natomiast przykładowe zdjęcia są znajdowane w katalogach online. To wszystko ma na celu zwizualizować ile tekstu znajdzie się na stronie i w jaki sposób będzie on skomponowany ze zdjęciami.
Zaletą takiego podejścia jest fakt, że nie ma potrzeby tworzenia zawartości przed powstaniem strony. Natomiast wad, jest trochę więcej:
- strona nie zawsze jest dobrze przystosowana do późniejszej zawartości
- to wygląd strony, a nie jej zawartość, wymusza organizację strony
- wygląd ogranicza zawartość (np. nie możemy wstawić dłuższego tytułu do artykułu, bo w wyglądzie tego nie przewidziano i się nie mieści; treść musi zawierać dokładnie 500 znaków, bo inaczej wyjdzie poza przeznaczone na nią pole)
Design-First to sposób projektowania, który jest przestarzały i powinien być stosowany tylko w awaryjnych sytuacjach.
Content-First Design
Nowoczesne podejście, w którym przed rozpoczęciem projektowania wyglądu przygotowywane są materiały jakie mają pojawić się na stronie www. Co najważniejsze – pisane są wszystkie teksty.
Jak dobrze przygotować teksty na stronę?
Trzeba wyczerpać temat. Tekst powinien być zrozumiały dla odbiorcy i zawierać wszystkie najważniejsze informacje.
Tekst powinien być podzielony na paragrafy. Paragrafy powinny mieć nagłówki (tytuły) o odpowiedniej ważności (bardzo ważne, ważne, średnio ważne, mało ważne). W tekście powinny być zaznaczone jego najważniejsze fragmenty oraz mało istotne przypisy.
Teksty na stronę internetową są już gotowe… Co dalej?
Czasami jeszcze przed przystąpieniem do projektowania zbierane są też zdjęcia. Dopiero na tej podstawie przygotowywana jest wizualizacja strony.
Podejście Content–First Design, o ile w pierwszej chwili może wydawać się zbyt przytłaczające, niesie za sobą nieporównywalne korzyści. Przygotowane wcześniej teksty dają możliwość stworzenia dokładnej architektury strony. Jest to bardzo ważne dla jej pozycjonowania oraz tego, jak łatwo będzie na niej można znaleźć informacje. Ponadto, strona może być dużo skutecznie podzielona na odpowiednie podstrony. Łatwiej też zaprojektować nawigację.
Najważniejszą korzyścią Content–First Design jest to, że to do treści dobudowywany jest wygląd, nie odwrotnie. Dzięki temu ważne informacje są dodatkowo akcentowane przez przyciągające wzrok elementy graficzne. Z kolei przypisy umieszczane są w specjalnie dla nich zarezerwowanym, mniej widocznym miejscu. Uwaga osób odwiedzających kierowana jest w sposób przemyślany, a nie przypadkowy. To ważność informacji dyktuje jak wygląda strona, a nie wygląd strony decyduje, czy dana treść jest ważna.
Dzięki takiemu podejściu, zyskujemy:
- możliwość dokładnego zaplanowania architektury strony (czyli: zorganizowania informacji na stronie w sposób przemyślany i logiczny)
- lepsze zaplecze do pozycjonowania
- dużą łatwość znajdywania informacji
- treść nie jest w żaden sposób ograniczona wyglądem
- graficzne podkreślenie istotnych informacji
Z podejścia Content–First Design skorzystał na przykład ING Bank, a o jego sukcesie możemy teraz usłyszeć w reklamach telewizyjnych.
ING Bank zdobył nagrodę najprzyjaźniejszego banku internetowego, właśnie dzięki temu, że projektowanie strony internetowej rozpoczął od dokładnego zgromadzenia jej zawartości.
Na podstawie naszych doświadczeń w pełni rekomendujemy podejście Content–First Design.
Projektowanie
Projektowanie strony, jak już wcześniej wspomniałam, odbywa się w oparciu o ustalenia z Klientem oraz istniejące materiały (logo, paletę barw, teksty). W zależności od ustaleń wizualizacje są tworzone dla kilku podstron, a czasami nawet dla kilku urządzeń. Ważne jest to, aby Klient brał czynny udział w każdym etapie projektowania strony internetowej. Im szybciej zgłosi swoje uwagi, tym lepszy będzie ostateczny projekt.
Szkicowanie
Początkowo, projektowanie wyglądu odbywa się na zwykłej kartce papieru. Szkicowane są różne układy oraz sposoby rozmieszczenia elementów. Pozwala to na szybkie przetestowanie wielu różnych wersji strony i wybranie tego, który najlepiej się sprawdzi w danej sytuacji.
Prototypowanie
Dla wybranego szkicu tworzona jest w programie graficznym odpowiednia siatka (ang. grid). Aby stworzyć siatkę, należy:
- zdecydować o domyślnym rozmiarze strony dla danego urządzenia. Rozmiar przyjmuje się na podstawie najpopularniejszych rozdzielczości ekranu np. 1920×1080 lub 1440×720.
- dobrać odpowiednie marginesy, czyli odstępu strony od lewej i prawej krawędzi przeglądarki.
- zdecydować o ilości kolumn (na podstawie wcześniej przygotowanych szkiców) oraz ich szerokości – zdecydować o szerokości odstępów między kolumnami (ang. gutter).
Na tak przygotowanej siatce opierać się będą później wszystkie elementy strony. Pozwala to uniknąć przypadkowych rozmiarów zawartości i narzuca zachowanie przejrzystości i proporcji.
Dobór siatki i proporcji
Siatka powinna być dopasowana do zawartości. Jeżeli na przykład, głównym założeniem planowanej przez nas strony będzie prowadzenie bloga, wtedy warto dopasować siatkę tak, aby jak najlepiej wyświetlała tekst. Należy:
- wybrać font, który jest czytelny w przypadku wyświetlania długich tekstów
- dla każdego z urządzeń (telefon, tablet, laptop, komputer) dobrać rozmiar tego fontu, który będzie czytelny dla danej rozdzielczości
- ustalić ilość znaków w jednej linijce, którą najlepiej się czyta (złotą liczbą dla tekstu drukowanego jest 66, w przypadku ekranu liczba ta jest większa, i wynosi nawet 80 znaków)
- obliczyć długość linii (czyli ilośc pikseli, które zajmie linijka tekstu danego fontu o danym rozmiarze na danym wyświetlaczu)
- na tej podstawie obliczyć ilość oraz wielkość kolumn i odstępów między nimi, a co za tym idzie – całą siatkę
Dla każdego z urządzeń należy stworzyć oddzielnego grid–a. Wtedy mówimy o prawdziwej responsywności strony.
Responsywność strony nie oznacza tylko, że działa ona na wszystkich urządzeniach. Oznacza, że strona wygląda na nich dobrze i jest wygodna w obsłudze.
Design–First
Początkowo elementy strony prezentowane są w formie zwykłych, szarych prostokątów. Reprezentują one bloki tekstu lub miejsca, gdzie mają być wstawione zdjęcia. Co robią? To, co najważniejsze, na tym etapie — nie rozpraszają. Kiedy strona, składająca się z samych szarych prostokątów i logo wygląda dobrze, wtedy, kiedy zapełni się ją już właściwą zawartością, będzie wyglądać jeszcze lepiej.
W późniejszych etapach szare prostokąty znikają, a w ich miejsca trafiają przykładowe teksty. Obok nich pojawiają się różne elementy graficzne, takie jak na przykład ikony, linie, figury. Wszystk,o co zwiększa atrakcyjność strony.
Content–First Design
W tym przypadku tworzenie strony przypomina rysowanie z natury. Dla osób nie rysujących — podstawowa zasada: spędzamy więcej czasu patrząc na nasz obiekt, niż na kartkę papieru. Tylko wtedy nasz obraz nie jest przekłamany przez naszą wyobraźnię, a jest wierną kopią natury.
Korzystając z tej zasady, „naszym obiektem” są zebrane teksty, a „naszym płótnem” jest program graficzny z siatką. Mając przed oczami teksty, ich nagłówki i podkreślenia, układamy szare prostokąty na stronie tak, aby jak najlepiej przedstawiały i pomagały zrozumieć treść.
Typografia
Typografia ma olbrzymi wpływ na charakter strony oraz jej czytelność. Dlatego nie można wybrać jej ot tak, po prostu. Na początku należy się zastanowić, czy coś ogranicza nas w jej wyborze:
- Firma posiada logo / logotyp? Typografię należy do niego dobrać.
- Strona ma nieść konkretne przesłanie? Typografia musi się z tym przesłaniem kojarzyć.
- Strona jest skierowana do konkretnych odbiorców? Typografia musi być dla nich czytelna.
Na stronie oprócz zwykłych tekstów i menu pojawiają się również inne elementy. Są to nagłówki, cytaty, wprowadzenia, linki, dodatkowa nawigacja. Wszystkie te odmiany tekstu najlepiej umieścić w jednym pliku wraz z logo i widząc je równocześnie, dobierać do nich najlepsze fonty, ich wielkość, ewentualne pogrubienia i pochylenia.
Kiedy każdy typ tekstu będzie miał już zdefiniowany wygląd, przenosimy go do istniejącej wizualizacji. Ponad wszystko musimy trzymać się tych ustaleń! Uwierz mi, jeden styl nagłówka jest dużo, dużo, dużo lepszy niż dziesięć różnych styli! Nadmiar styli wprowadza bałagan, a strona drastycznie traci na czytelności.
Kolorowanie i zapełnianie
Kiedy mamy już dopracowany układ strony, zapełnionej treścią, ikonami i innymi elementami graficznymi, pora dla projektu wybrać odpowiednie kolory. Podobnie, jak w przypadku typografii, należy zastanowić się, czy coś nas nie ogranicza.
- Klient posiada logo? Dopasowujemy kolory do logo.
- Firma posiada gotową paletę barw? Wykorzystujemy istniejącą paletę barw.
- Strona ma określony klimat, charakter lub odbiorców? Dobieramy na tej podstawie odpowiednie barwy.
Dopiero w tym momencie w wizualizacji umieszczamy zdjęcia. Dzięki temu nie wymuszają one na projekcie określonej palety barw (chyba, że jest to wymogiem, ponieważ zdjęcia są kluczowym elementem strony, narzucającym jej charakter).
Projekt strony można uznać za skończony. Co dalej?
Tak właśnie wyglądają podstawy projektowania strony internetowej. Po tak dużej ilości pracy, jej efektem jest obrazek — wizualizacja (lub kilka wizualizacji, dla różnych podstron / urządzeń). Gotowy projekt przekazywany jest do klienta w formie obrazka, do akceptacji.
Jeżeli wywiad był dobrze przeprowadzony, były zebrane wszystkie materiały i Klient brał czynny udział w każdym etapie projektowania strony, projekt spodoba się od razu.
Po zatwierdzeniu projektu i ewentualnych poprawkach, projekt przekazywany jest w ręce developera. To on zadba o to, żeby wizualizację zamienić w prawdziwą klikalną stronę internetową. Jeżeli projekt jest wysokiej jakości, strona internetowa też taka będzie.
