Jak zaprojektować stronę internetową – etapy i cechy dobrego projektu

Wykonawca przysyła Ci pierwszą makietę strony głównej i prosi o akceptację. Widzisz szare prostokąty, kilka nagłówków i przycisk, ale nie wiesz, czy to szkic, projekt graficzny, czy prawie gotowa strona, ani co właściwie masz zatwierdzić.

U nas projekt strony powstaje w stałej kolejności: najpierw rozmowa o celach i klientach, potem mapa podstron i plan treści, następnie szkielet strony głównej i podstron, a na końcu projekt graficzny w Twojej identyfikacji, w wersji na komputer i telefon. Każdy z tych etapów zatwierdzasz osobno.

Jeśli więc dostajesz do akceptacji układ bez kolorów i zdjęć, patrzysz na szkic. Oceniasz wtedy kolejność sekcji i treści, a o wyglądzie rozmawiamy dopiero w kolejnym kroku.

Jak zaprojektować stronę internetową, zaczynając od celu i odbiorcy

Pierwsze decyzje zapadają w rozmowie, nie w programie graficznym. Na starcie rozmawiamy z Tobą o celach strony, Twoich klientach i frazach, po których mają ją znaleźć.

Cel najłatwiej nazwać jednym działaniem odwiedzającego, na przykład wysłaniem zapytania, telefonem albo zapisem na termin. Bez tej decyzji projektant może przygotować ładną stronę, ale nie będzie wiedział, który przycisk ma być najważniejszy na pierwszym ekranie.

Odbiorca decyduje o tym, co znajdzie się wysoko na stronie. Inaczej czyta ją ktoś, kto porównuje kilku wykonawców, a inaczej stały klient, który szuka numeru telefonu. Przed pierwszym spotkaniem warto spisać, kto najczęściej się z Tobą kontaktuje i o co pyta, bo te pytania podpowiadają treść i kolejność sekcji.

Mapa podstron i plan treści przed pierwszym szkicem

Z rozmowy o celach powstaje mapa podstron i plan treści. Jeszcze przed projektem graficznym analizujemy strukturę usług, najważniejsze frazy oraz podstrony, które będą potrzebne do późniejszego pozycjonowania.

Mapa podstron rozstrzyga sprawy, które łatwiej ustalić na liście niż na gotowym projekcie:

• które usługi albo grupy produktów dostają osobne podstrony, a które wystarczy opisać na jednej,
• jaką frazę ma obsłużyć każda podstrona, żeby dwie nie odpowiadały na to samo zapytanie,
• jakie treści są potrzebne na każdej podstronie i kto je przygotuje,
• gdzie odwiedzający ma trafić z menu i ze strony głównej.

Treści nie muszą być gotowe przed szkicem, bo przygotowujemy je lub wdrażamy równolegle ze szkieletem strony, zgodnie z ustalonym zakresem. Plan treści powinien jednak istnieć wcześniej, inaczej projektant nie wie, ile miejsca zostawić na opis usługi, cennik czy odpowiedzi na pytania klientów.

Sama nowa strona nie gwarantuje wysokich pozycji, ale dobrze zaprojektowany serwis tworzy solidną bazę do dalszego pozycjonowania. Które sekcje zaplanować na stronie głównej i podstronach, opisujemy we wpisie o tym, jakie sekcje powinna mieć strona internetowa.

Projekt strony internetowej na kartce, czyli szkic układu przed grafiką

Drugim etapem jest u nas szkielet strony głównej i podstron. Na takim szkicu prostokąty zastępują zdjęcia, linie zastępują tekst, a przyciski są tylko podpisane.

Szkic, makieta i projekt graficzny to trzy różne dokumenty. Szkic można narysować na kartce albo w prostym programie i służy do ustalenia, jakie sekcje stoją po kolei. Makieta to zwykle dokładniejsza, cyfrowa wersja tego układu, z prawdziwymi nagłówkami i proporcjami, ale nadal bez oprawy graficznej. Projekt graficzny dodaje kolory, typografię, zdjęcia i ikony i pokazuje stronę tak, jak będzie wyglądać po wdrożeniu.

Przestawienie sekcji na szkicu wymaga przerysowania kilku prostokątów, a w projekcie graficznym oznacza poprawki w gotowych widokach na komputer i telefon. Dlatego układ najlepiej sprawdzić właśnie teraz.

W firmie usługowej szkic strony głównej może zaczynać się od jednego zdania o tym, co firma robi i dla kogo, z przyciskiem do formularza zapytania. Niżej mogą stać główne usługi z odnośnikami do podstron, potem krótki opis współpracy, a na końcu dane kontaktowe. Jeśli na takim szkicu zauważysz, że klienci najczęściej pytają o terminy realizacji, a na stronie nie ma o nich ani słowa, dopisujesz sekcję teraz, zanim powstanie grafika.

Zasady rozmieszczania elementów na szkicu rozwija wpis o tym, jak powinien wyglądać układ strony zgodny z UX.

Projekt graficzny strony internetowej na komputer i telefon

Trzeci etap to projekt strony w Twojej identyfikacji, w wersji na komputer i na telefon.

Zatwierdzasz konkretne widoki, czyli stronę główną i podstrony ze szkicu, każdą w obu wersjach. Doradztwo na etapie projektowania grafiki jest w każdym pakiecie stron, więc podpowiadamy, które rozwiązania pasują do Twojej oferty, a decyzja należy do Ciebie. W naszym zespole projektanci UX/UI pracują obok programistów front-end i back-end oraz specjalistów SEO.

Wersja mobilna jest częścią projektu od początku, a nie pomniejszoną wersją strony na komputer. Na telefonie menu się zwija, kolumny układają się jedna pod drugą, a przycisk kontaktu powinien być łatwy do kliknięcia kciukiem, dlatego widok mobilny warto ocenić osobno, najlepiej na własnym telefonie.

Jak strona dopasowuje się do ekranów po wdrożeniu, wyjaśniamy w poradniku o tym, jak działa responsywna strona.

Cechy dobrego projektu strony, które da się sprawdzić przed wdrożeniem

Na pytanie, czym powinien się cechować projekt strony internetowej, najłatwiej odpowiedzieć pytaniami, które zadajesz przed akceptacją. Tabela zbiera cechy, które sprawdzisz na projekcie, zanim trafi do programistów.

Cecha	Pytanie przed akceptacją	Na czym się opiera
Jasny cel	Czy na pierwszym ekranie widać, czym się zajmujesz i jakie działanie ma wykonać odwiedzający?	Na ustaleniach z rozmowy o celach i klientach.
Skupienie	Czy każda sekcja jest potrzebna, czy któraś zawiera informacje mało istotne albo rzadko potrzebne?	Według heurystyk użyteczności Nielsen Norman Group interfejs nie powinien zawierać informacji nieistotnych ani rzadko potrzebnych.
Spójność	Czy przyciski, nagłówki i nazwy w menu wyglądają i nazywają się tak samo na wszystkich podstronach?	Według tych samych heurystyk użytkownik nie powinien się zastanawiać, czy różne słowa, sytuacje albo działania oznaczają to samo.
Wersja na telefon	Czy dostajesz osobny widok mobilny, a nie tylko pomniejszony widok z komputera?	Na zakresie etapu projektu graficznego.
Szybkość	Czy projekt zakłada ciężkie elementy na pierwszym ekranie, na przykład duże filmy, i jak wykonawca planuje utrzymać szybkie ładowanie?	Dla dobrych wrażeń użytkowników LCP powinno nastąpić w ciągu 2,5 sekundy od rozpoczęcia ładowania strony.

Takie sprawdzenie nie zastąpi testów po wdrożeniu, ale wyłapuje problemy wtedy, gdy ich usunięcie oznacza zmianę w projekcie, a nie w gotowym kodzie. Ocenę gotowej, działającej strony ułatwią cechy nowoczesnej strony internetowej opisane w osobnym wpisie. Jeśli strona już działa i chcesz sprawdzić jej użyteczność, przeprowadzamy Audyt UX.

Akceptacja projektu, poprawki i przekazanie do wdrożenia

Akceptacja nie jest jednym podpisem na końcu. Widzisz postępy kolejno przy mapie podstron, szkielecie i projekcie graficznym, akceptujesz je i dopiero wtedy przechodzimy dalej. Dzięki temu uwaga o brakującej podstronie trafia do mapy, a nie do gotowej grafiki.

W etapie projektu graficznego przewidzieliśmy dwie rundy poprawek. Warto wykorzystać je na uwagi zebrane w jednym miejscu: przejrzyj wszystkie widoki na komputerze i telefonie, porównaj je z tabelą cech i wyślij jedną listę zmian, zamiast poprawiać projekt po jednej uwadze.

Zatwierdzony projekt trafia do wdrożenia. Większość profesjonalnych stron firmowych realizujemy na WordPressie z własnym motywem, a jeśli projekt wymaga rozbudowanej logiki biznesowej lub nietypowych funkcji, możemy zaproponować inne rozwiązanie technologiczne. Jak wygląda ten etap, pokazujemy na stronie o tym, jak powstają strony WordPress z własnym motywem, a cały zakres współpracy opisuje oferta tworzenie stron internetowych.

Masz już cel strony i listę podstron? Bezpłatna wycena w 24 h do niczego nie zobowiązuje, a konkretną wycenę dostajesz po krótkiej rozmowie.

Najczęstsze pytania

Zanim umówisz się z projektantem, spisz na jednej kartce cel strony, swoich odbiorców, listę podstron i adresy kilku stron, które Ci się podobają, z krótką notatką, co w nich cenisz. Z taką kartką możesz przyjść na bezpłatną konsultację (30 minut) albo zadzwonić do Jakuba Domagalskiego, doradcy klienta: 512 215 804.