Logo NFU StudioLogo medium icon
wróć do listy
Projekty

Projekt strony internetowej - ważniejszy niż implementacja?

Po co jest faza projektowa strony internetowej i co powinno zostać ustalone przed rozpoczęciem implementacji. Jak projektować żeby to miało ręce i nogi a do tego przynosiło firmie zyski.
5 minut czytania

Projekt strony internetowej - ważniejszy niż implementacja?

Na wstępie warto zaznaczyć, że witryna internetowa to jeden z elementów wchodzących w skład marki firmy. Zakładasz własny biznes, lub masz już firmę i wpadłeś/aś na pomysł budowy strony firmowej? To naprawdę super decyzja, ale warto to zrobić porządnie. No bo strona może być tylko stroną, na którą potencjalny klient wejdzie i wyjdzie, ale przecież nie o to chodzi. Po co płacić za domenę i hosting, kiedy nie przynosi to oczekiwanych efektów? Dlatego warto poważnie podejść do fazy projektowej, którą w tym poście rozłożymy na części pierwsze.

Cele budowy strony internetowej

Zacznijmy od tego, że strona internetowa ma spełniać określone cele a nie poprostu wisieć w internecie. Ogólnym celem stworzenia strony firmowej powinien być rozwój biznesu i pozykanie nowych klientów. Dlatego podczas fazy projektowej kluczowy jest kontakt z kontachentem aby poznać jego biznes i grupę klientów. Warto tutaj postawić 2 pytania:

  • Jaki jest cel minimalny interakcji użytkownika ze stroną?
  • Jaki jest cel maksymalny interakcji użytkownika ze stroną?

Cele minimalny i maksymalny powinny określić jakie pożądane informacje mają trafić do użytkownika lub jakie iterakcje użytkownik ma przeprowadzić w trakcie korzystania z witryny. Celem minimalnym może być przykładowo przedstawienie usług firmy, a celem maksymalnym wysłania wiadomości kontaktowej lub inna forma kontaktu w sprawie współpracy. Dobrą praktyką przy określaniu celów budowy strony jest ustalenie jakie wrażenie i emocje u klienta powinna wywołać strona w stosunku do prowadzonego biznesu. Pomaga to odrazu w doborze treści jaką umieścimy na stronie. Przykładowo, gdy prowadzisz firmę budowlaną to pokaż i opisz jak niezawodne są twoje realizacje. Jeśli jesteś dyrektorem przedszkola to pokaż jak bezpiecznie i przyjaźnie jest w murach przedszkola. Klientów łatwiej przekonać wywołując u nich pewne emocje niż prezentując suche fakty.

Persony i wędrówka poznawcza

Dobrą praktyką podczas fazy projektowej jest sporządzenie profili nowych klientów strony i przejście przez ich wędrówkę poznawczą. Najlepiej wziąć na warsztat 2-3 persony reprezentujące różne grupy wiekowe oraz wchodzące na stronę z różnymi potrzebami. Mamy wtedy możliwość zbadania różnych scenariuszy korzystania z wiryny. Pozwala nam to odpowiedzieć na ważne projektowe pytania takie jak:

  • Czy użytkownik samodzielnie próbując, jest w stanie osiągnąć zamierzony efekt na stronie?
  • Czy użytkownik zauważy akcje niezbędne do wykonania zamierzonego celu?

Przeprowadzenie tego badania przede wszystkim może pozytywnie wpłynąć na odczucia użytkowników, związane z interakcją ze stroną internetową Po ustaleniu aspektów biznesowych można przejść do technicznych elementów UI.

Reprezentacja graficzna

Szata graficzna strony internetowej to element również bardzo związany z prowadzonym biznesem. Klientki salonu kosmetycznego zazwyczaj są bardziej wyczulone odczucia wizualne niż klienci szukający taksówki lub firmy przewozowej. Wiedząc dla kogo budujemy stronę możemy lepiej podejść do następujących kwestii:

  • W pierwszej kolejności dowiadujemy się, czy firma dla której będzie tworzona strona posiada własną identyfikacje wizualną, w której oprócz loga zawarte są ustalone fonty i palety kolorów. Jeśli są sztywno ustalone, wtedy dostosowujemy się do wytycznych. W innych przypadkach sami dopasowujemy fonty oraz paletę kolorów do projektu, który może być odniesieniem dla firmy w dalszym budowaniu języka wizualnego marki. Przy ustalaniu kolorów elementów i tekstu warto korzystać z narzędzi do badania kontrastu między jak CONTRACT CHECKER w celu zapewnienia czytelności tekstów.
  • Dobór kolorów - kolory komponentów i tekstu powinny być spójne z dostarczoną lub nowo ustaloną paletą kolorów. Na początek sprawdzi się ograniczenie palety do 4-6 kolorów. Idealnym narzędziem przy ustalaniu kolorów jest: COOLORS., który pomaga sprawnie znaleźć interesującą nas kombinacje.
  • Wybór fontów - zalecanym sposobem doboru fontów jest organicznie się do dwóch - głównego używanego przede wszystkim do nagłówków oraz drugiego do długich oraz pozostałych treści. Jak dobrać fonty? Najczęściej na początek używamy FONT JOY. Nowo dobrany font główny dopasowujemy między innymi do charakteru firmy, ich odbiorców. Drugi font do długich treści (używanego między innymi w "body", linkach, danych) powinien współgrać wizualnie z fontem głównym, ale być czytelny, aby odbiorca nie męczył się lub nie pomylił podczas odczytywania informacji.

Mapy kontentowe i CTA

Przed rozpoczęciem pracy w Figmie lub innych środowiskach projektowych, aby usprawnić pracę najlepiej sporządzić z klientem ideowe mapy kontentowe treści na stronie. Jest to nic innego jak spisany, od góry do dołu, układ poszczególnych kompomponentów strony, takich jak nawigacja, baner czy stopka. Optymalny układ wymienionych komponentów pozostaje niezmienny od dłuższego czasu. Rozkład firmowej treści marketingowej czy informacyjnej jest już nieco bardziej zależny od sformułowanych wcześniej celów budowy. Sprawdzonym sposobem kontrolowania wędrówki użytkownika na stronie są przyciski lub sekcje CTA (call to action). Polegają na świadomym kierowaniu userów do konkretnych miejsc witryny gdzie znajdują się np: kluczowe informacje, komponenty akcyjne czy też poprostu reprezentatywne zdjęcia, wywołujące konkretne emocje.

Przykładowe sekcje CTA:

CTA1

CTA2

Prezentacja części projektowej w formie widoków

Kiedy zebraliśmy już wszystkie informacje o prowadzonym biznesie, uslaliliśmy techiczne aspekty reprezentacji wizualnej możemy przejść do projektowania widoków. Posiadając wiedzę zebraną podczas kontaktów z klientem, praca nad widokami nie wymaga już od nas żadnych przemyśleń o sprawach biznesowych. Nie zastanawiamy się czy dana sekcja akurat tutaj będzie adekwatna ani czy taki kolor będzie pasował do loga. Wtedy liczy się już tylko dobre oko i zmysł designera. Do przekazania klientowi dobrego projektu, ale i również ułatwienia życia programistom, należy sporządzić widoki strony w rozdzielczości desktopowej i mobilnej.

Frame1

Podsumowanie

Na projekt nie ma co żałować środków ani czasu. Od tej fazy zależy czy implementacja pójdzie sprawnie, oraz czy stona firmowa osiągnie sukces po wdrożeniu. Oczywiście, że stronę można aktualizować, ale chyba lepiej od początku nastawić się na pozyskiwanie klientów a nie metodę prób i błędów. Oszczędza to później sporo czasu na zastanawianie się, czemu skoro mamy stronę, to dalej nikt nie i nie mamy klientów ani pracy.

jeszcze jeden i starczy...

Design

Polecane i przydatne pluginy do Figmy

Zobacz przydatne pluginy, które ulepszają pracę w Figmie
Przeczytaj post - Polecane i przydatne pluginy do Figmy

Kodowe

Kompozycja Reactowa czyli elastyczność ponad przewidywalność.

Dlaczego do znudzenia warto utrwalać wzorzec kompozycji w React. Dlaczego biblioteki takie jak Shadcn rządzą na polu frontendowych rozwiązań.
Przeczytaj post - Kompozycja Reactowa czyli elastyczność ponad przewidywalność.

Design

Auto Layout w Figmie - wprowadzenie na dobry początek

Jeśli chcesz szybciej i przyjemniej projektować w Figmie to zapoznaj się jak używać Auto Layout.
Przeczytaj post - Auto Layout w Figmie - wprowadzenie na dobry początek