Data

13.12.2021

Autor wpisu

Ewa Strózik - Hędrzak

Ewa Strózik - Hędrzak

Wracamy do Was z kontynuacją kompendium wiedzy w ramach serii „Tworzymy stronę WWW”. Poprzedni wpis traktował o roli klienta w procesie projektowania strony. Chcieliśmy tu odczarować mylne wyobrażenie dotyczące tego, że cała magia i praca nad tworzeniem witryny zaczyna się tuż po sfinalizowaniu umowy – nic bardziej mylnego! Punktem wyjściowym jest tu wsparcie merytoryczne od klienta – w końcu nikt nie zna lepiej swojego biznesu i grupy docelowej niż on sam! Poza uzyskanym kapitałem informacji o specyfice branży potrzebujemy też „wsadu” w postaci szkieletu treści, zdjęć i wszelkich multimediów, które powinny znaleźć się na stronie.

Dopiero w oparciu o te wartościowe wskazówki jesteśmy w stanie rozpocząć wewnętrzną burzę mózgów i przystąpić do realizacji wspólnie opracowanej strategii.

Na czym opiera się skuteczny webdesign?

Po przejściu przez etapy omówione w poprzednim wpisie o tworzeniu stron WWW, nadchodzi moment właściwego projektowania. Na czym polega? Definiując to jak najbardziej obrazowo – to pewien rodzaj sztuki cyfrowej. Wyraża się w projektowaniu witryny i wymaga holistycznego podejścia do tego procesu oraz wykazania się zarówno zmysłem estetycznym, jak i wiedzą techniczną, również w kontekście dobrego UX (user experience).

Na czym opiera się skuteczny webdesign?

Ujmując to jeszcze dosadniej – zadaniem naszych webdesignerów jest agregowanie wszystkich uzyskanych informacji i materiałów, które mają być użyteczne dla odwiedzających. Czasami włącza się w ten proces również specjalista SEO – pomaga wówczas w zaprojektowaniu właściwej taksonomii, która będzie później logicznie porządkować treści na stronie. W przypadku bardziej rozbudowanych witryn (np. przy sklepach internetowych) wspomagamy się również zewnętrznymi narzędziami do tworzenia map witryny.

Projektowanie nawigacji ma ułatwić podjęcie konkretnych ruchów na stronie WWW

Skanowanie zawartości stron WWW podczas konsumowania zawartych na nich treści, jest faktem. Wiedza na temat przyzwyczajeń użytkowników i ich zachowania pozwala nam ułatwić nawigację podczas wizyty użytkownika na stronie. Naszym celem jest takie zaprojektowanie struktury strony, aby znalezienie niezbędnych informacji przebiegało szybko i intuicyjnie.

Projektowanie nawigacji ma ułatwić podjęcie konkretnych ruchów na stronie WWW

To również dobry moment do tego, aby uwypuklić naszą czujność w zakresie tworzenia stron zgodnie ze standardami UX. Szeregi adencji zasilają entuzjaści takich dziedzin jak: projektowanie, psychologia, marketing czy informatyka. Kompilacja tej wiedzy pozwala nam tworzyć użyteczne strony, które spełniają założone cele marketingowe i korespondują z „tone of voice” marki, są funkcjonalne i wygodne w nawigacji, a także atrakcyjne wizualnie.

Dobry projekt warto zacząć od strategii – czyli słowo o makietowaniu

Tutaj ponownie odwołamy się do wyobraźni – makieta to swojego rodzaju szkic, pierwotny zamysł strony, który będzie odzwierciedlał jej zawartość i porządkował poszczególne elementy. Na tym etapie mamy okazję do (okiełznanego ;)) wyżycia się na papierze czy ekranie komputera, podczas systematyzowania składowych strony. Dzięki makietom możemy na bardzo wczesnym etapie weryfikować pomysły i testować różne rozwiązania. Zawsze w pierwszej kolejności na warsztat bierzemy funkcję, a dopiero później dopieszczamy całość przy użyciu różnych wizualnych środków. Dzięki temu, razem z klientem, możemy skupić się najpierw na tym, jak elementy na stronie WWW mają działać. Zwieńczeniem tych prac jest jasne i klarowne ulokowanie niezbędnych elementów serwisu.

Dobry projekt warto zacząć od strategii – czyli słowo o makietowaniu

Co daje nam korzystanie z narzędzi do makietowania?

Sięganie po takie narzędzia to nasz life-hack na natychmiastowe zrewidowanie opracowanych przez nas pomysłów. Gdy mamy już wstępnie zgromadzone treści możemy np. sprawdzić jak poszczególne elementy będą funkcjonować przy konkretnej wielkości fontów.

Na tym etapie nie koncentrujemy się na warstwie wizualnej – skupiamy się tutaj przede wszystkim na osiągnięciu użytecznej i funkcjonalnej strony, która będzie przyjazna dla użytkowników.

Wspólnie z klientem ustalamy tutaj priorytety oraz jakie pożądane akcje powinien wykonać klient i jak poruszać się po stronie.

Projekt graficzny (user interface design)

Dopiero po wykonaniu powyższych etapów nasz projektant przystępuje do rozpoczęcia prac nad warstwą wizualną strony. Finalnym produktem jest tutaj projekt graficzny strony, z którym docelowo będą mierzyć się odwiedzający. Cała sztuka wyraża się na umiejętnej grze kolorami i kształtami w zgodzie z obowiązującą identyfikacją wizualną i zgrabnym połączeniu wszystkich materiałów przy okraszeniu ich dostarczonymi multimediami. 

Taka wstępna praca jest uzupełniana doszlifowywaniem proporcji, typografii i całej stylistyki, aby zachować spójność z poszczególnymi elementami.

Na tym etapie dążymy do uszczegółowienia wszystkich detali i do uzyskania pełnej akceptacji klienta. Projekt strony głównej ma charakter referencyjny – w odniesieniu do niej projektowane są później pozostałe zakładki, które następnie trafiają pod opiekę programisty.

Projekt graficzny (user interface design)

Grafik przykłada tutaj wagę do wizualnej warstwy strony i wysmakowanego stworzenia tła dla treści i poszczególnych elementów nawigacyjnych.

Mockupowanie to zwieńczenie poprzednich etapów prac w adencji

Dla wielu klientów (szczególnie tych, którzy po raz pierwszy doświadczają projektowania strony przez fachową agencję) może się wydawać, że projekt graficzny strony WWW to początek prac nad tworzeniem strony. Poprzez ten jak i poprzedni artykuł pragniemy wyjaśnić, że to po prostu etap stanowiący wizualne zwieńczenie prac poprzednich specjalistów.

Wszystkie działania, które poprzedzają udział projektanta graficznego mają prowadzić do stworzenia nie tylko przyjemnej dla oka strony, ale również intuicyjnej, zaprojektowanej z myślą o doświadczeniach użytkownika. W tym właśnie wyraża się dobry UX.

Content is the king!

Etap copywritingu następuje na zamieszczonym schemacie między makietowaniem a UI – praktyka dowodzi jednak, że im szybciej projektant otrzyma treści, tym efektywniej będzie mógł je zaaranżować na stronie. Warto przy tym pamiętać, że teksty zawarte w witrynie nie powinny być dziełem przypadku, ani powstawać na ostatnią chwilę. W końcu z założenia strona WWW pełni rolę internetowego sprzedawcy, który w systemie 24/7 informuje o specyfice biznesu. Poza odpowiednią strukturą treści i optymalizacją (nagłówki H2-H6, nasycenie słowami kluczowymi) powinien być także okraszony adekwatnymi CTA (call to action – wezwanie do działania, czyli werbalna zachęta do podjęcia jakiejś konkretnej aktywności, np. zakupu, nawiązania kontaktu, wypełnienia formularza, zapisu na newsletter itp.).

Content is the king!

Na bazie dotychczasowych doświadczeń – zdecydowanie rekomendujemy jak najwcześniejsze dostarczenie choćby zarysu tekstów. Dzięki temu projektant będzie mógł zaplanować optymalną ilość miejsca na teksty jeszcze przed rozpoczęciem makietowania.

Ufff, to tyle! Wierzymy, że ten artykuł pozwolił nieco zmienić optykę w kontekście postrzegania prac nad tworzeniem strony. To naprawdę czasochłonny proces, nad którym czuwa sztab osób.

Jeżeli podczas lektury poczułeś_aś ekscytację na myśl o podobnej podróży – zapraszamy na nasz pokład!

 

Chcesz zbudować doskonałą stronę WWW?
Wypełnij nasz formularz, a skontaktujemy się z Tobą w przeciągu 24h i porozmawiamy o Twoim biznesie oraz jego potrzebach w zakresie budowy strony WWW.

A jeśli wolisz porozmawiać, to wystarczy, że napiszesz nam maila ze swoimi danymi na adres biuro@adencja.pl lub po prostu zadzwonisz: +48 660 685 064.