Projektowanie strony w pigułce: etapy i kolejność
Dobra strona powstaje w określonej kolejności: najpierw cel i treści, potem struktura, dopiero później wygląd, wdrożenie i testy. Odwrócenie tej kolejności — zaczynanie od kolorów i animacji — to najprostszy sposób na ładną stronę, która nie odpowiada na pytania klientów. U mnie projekt strony wygląda tak:
| Etap | Co się dzieje | Twoja rola |
|---|---|---|
| 1. Rozmowa | Poznaję firmę, klientów i to, co chcesz zmienić | Wysyłasz obecną stronę albo kilka zdań o pomyśle |
| 2. Struktura i makieta | Układam podstrony i kolejność treści wokół pytań klientów | Odpowiadasz na pytania, wskazujesz priorytety |
| 3. Propozycja | Pokazuję kierunek wizualny, zakres i cenę — przed umową i płatnością | Oceniasz i decydujesz, czy działamy |
| 4. Dopracowanie | Projektuję pozostałe widoki, pracujemy nad treściami, wdrażam stronę w CMS | Zgłaszasz uwagi — masz na to 30 dni od podpisania umowy |
| 5. Testy i akceptacja | Sprawdzam treści, telefon, formularze i działanie strony | Akceptujesz, a po akceptacji dostajesz fakturę |
| 6. Publikacja | Podłączam domenę, uruchamiam stronę i sprawdzam ją na docelowym adresie | Przekazujesz dostęp albo wprowadzasz rekordy DNS |
Poniżej opisuję, co dzieje się na każdym etapie i po czym poznać, że idzie dobrze. Sklep, markę albo system planuję indywidualnie — z etapami, zakresem i płatnościami zapisanymi przed startem — więc ten opis dotyczy strony firmowej.
Etap 1. Rozmowa: co muszę wiedzieć o Twojej firmie
Na start nie potrzebujesz briefu, tekstów ani zdjęć. Wystarczy link do obecnej strony albo kilka zdań o pomyśle. Resztę ustalamy w rozmowie, w której pytam przede wszystkim o:
- to, co robisz i dla kogo — kto jest klientem, który przynosi firmie najwięcej,
- pytania, które klienci zadają przez telefon, zanim się zdecydują,
- to, co ma zrobić osoba na stronie: zadzwonić, wysłać zapytanie, umówić wizytę, przyjechać,
- to, co na obecnej stronie działa, a co przeszkadza,
- firmy, z którymi klient Cię porównuje.
Jeśli lubisz mieć wszystko na piśmie, możesz przygotować krótki brief strony internetowej. Przyspiesza rozmowę, ale nie jest warunkiem startu.
Etap 2. Struktura i makieta: szkielet, zanim pojawią się kolory
Po rozmowie analizuję obecną stronę, konkurencję i to, jak klienci szukają podobnych usług. Z tego powstaje struktura: lista podstron, czyli mapa strony, i kolejność treści na każdej z nich. To najważniejsza decyzja w całym projekcie, choć najmniej efektowna.
Czym jest makieta
Makieta, nazywana też wireframe’em, to uproszczony schemat widoku: bloki treści, nagłówki, przyciski i ich kolejność, bez kolorów, zdjęć i ozdobników. Pozwala ustalić, co klient zobaczy najpierw, a co dalej, zanim zacznie się dyskusja o wyglądzie. Dobrze jest zaczynać od wąskiego ekranu telefonu — tam miejsca jest najmniej, więc od razu widać, co jest naprawdę ważne.
Jak ocenić makietę
Nie oceniaj jej estetyki — celowo jej nie ma. Zadaj sobie cztery pytania:
- Czy na pierwszym ekranie widać, co robisz, dla kogo i gdzie?
- Czy kolejność sekcji odpowiada kolejności pytań, które zadają klienci?
- Czy klient szybko znajdzie zakres, ceny lub sposób wyceny i kontakt?
- Czy na końcu każdej podstrony wiadomo, co zrobić dalej?
U mnie nie płacisz za samą makietę, zanim zobaczysz efekt. Propozycja, którą dostajesz przed umową, zawiera już wizualizacje: kierunek wizualny pokazany na konkretnym układzie strony. Dzięki temu oceniasz coś, co wygląda jak prawdziwa strona, a nie szare prostokąty.
Etap 3. Propozycja: kierunek, zakres i cena przed umową
Po analizie ustalam, co warto zrobić i kiedy pokażę koncepcję — termin koncepcji ustalam osobno. W propozycji oglądasz kierunek wizualny, poznajesz zakres i cenę. Widzisz ją przed podpisaniem umowy i przed jakąkolwiek płatnością, a samo obejrzenie do niczego Cię nie zobowiązuje.
Jak oceniać kierunek wizualny? Mniej pytaj, czy Ci się podoba, a bardziej, czy pasuje do Twoich klientów i do tego, jak firma pracuje. Obejrzyj go na telefonie. Zwróć uwagę na to, czy kolory firmowe i pismo są czytelne, czy przyciski od razu widać i czy zdjęcia pokazują Twoją pracę, a nie przypadkowe ujęcia.
Jeśli kierunek nie trafia, przygotuję nową, całościową propozycję — do trzech propozycji bez opłat. Drobne poprawki na tym etapie nie mają limitu. Jeśli kierunek Ci odpowiada, potwierdzamy zakres, cenę i warunki i podpisujemy umowę.
Etap 4. Projekt, treści i wdrożenie: dopracowanie z Tobą
Po podpisaniu umowy dopracowuję projekt. Powstają pozostałe widoki, wersje na telefon, wygląd przycisków, formularzy i komunikatów. Przy stronie od zera pomagam też w tekstach, zdjęciach i strukturze — nie musisz pisać wszystkiego sam.
Treści najlepiej powstają razem z projektem, a nie na końcu. Tekst zastępczy ukrywa problemy: nagłówek, który w projekcie miał trzy słowa, w rzeczywistości ma dwanaście, a sekcja „Opinie” okazuje się pusta. Dlatego wcześnie pracuję na prawdziwych treściach, nawet roboczych.
Gotowy projekt wdrażam w panelu CMS, żebyś po publikacji mógł samodzielnie zmieniać treści. Od podpisania umowy masz 30 dni na uwagi w uzgodnionym zakresie i akceptację. Dodatkowy zakres — nową podstronę czy funkcję — wyceniam przed pracą, więc na fakturze nie ma niespodzianek.
Uwagi najłatwiej zgłaszać, oglądając wersję roboczą tak jak klient: na telefonie, od pierwszego ekranu do formularza. Opisuj problem z jego perspektywy — „nie widać, że dojeżdżamy do okolicznych gmin” mówi więcej niż „zmień nagłówek”.
Etap 5. Testy i akceptacja
Zanim poproszę o akceptację, sprawdzam treści, widok na telefonie, formularze i działanie strony. W praktyce oznacza to między innymi:
- wygląd na różnych szerokościach ekranu, od telefonu po duży monitor,
- wysyłkę formularzy na właściwy adres,
- linki, menu i przyciski,
- tytuły i opisy podstron dla wyszukiwarki,
- przekierowania ze starych adresów, jeśli zmieniamy istniejącą stronę,
- szybkość i podstawowe dokumenty, takie jak polityka prywatności.
Potem Ty sprawdzasz stronę po swojemu. Usterki warto spisać w protokole odbioru, z informacją, gdzie występują. Fakturę wystawiam po Twojej akceptacji.
Etap 6. Publikacja i pierwsze tygodnie po niej
Po potwierdzeniu płatności podłączam domenę, uruchamiam stronę i sprawdzam ją na docelowym adresie: kopię konfiguracji, stronę i certyfikat SSL, formularze, adresy i pocztę. Jeśli projekt jest gotowy, a ja mam komplet dostępów, publikacja może nastąpić nawet w 24 godziny.
Domena pozostaje Twoja i możesz zostać przy obecnym hostingu. Nie potrzebuję głównego hasła do domeny — wystarczą konkretne rekordy DNS albo dostęp o ograniczonych uprawnieniach, który po wdrożeniu możesz usunąć. Jeśli wolisz, żeby stronę zainstalował Twój informatyk, dostaje komplet: pliki produkcyjne, wymagania hostingu, instrukcję instalacji i listę rzeczy do sprawdzenia.
Po publikacji przekazuję pliki i wskazówki do obsługi. W ciągu 30 dni możesz zgłosić dwie drobne zmiany, na przykład korektę tekstu lub linku. Jeśli coś się zepsuje, a naprawa zajmie 5–10 minut, nie płacisz za nią. Hosting (od 690 zł rocznie, pierwszy rok opcjonalnie w cenie strony) i opieka techniczna (od 249 zł miesięcznie) są opcjonalne.
Ile trwa projektowanie strony i co je przyspiesza
Nie podam jednej liczby, bo czas zależy od kilku rzeczy: liczby widoków, gotowości treści, integracji i tempa decyzji. Zakres i terminy zapisuję przed startem, a termin koncepcji ustalam osobno. Na tempo projektu najbardziej wpływają treści i decyzje, a nie samo projektowanie. Pomaga, gdy:
- decyzje podejmuje jedna osoba, a uwagi trafiają w jednej liście,
- logo, zdjęcia i dane firmy są dostępne od początku,
- dostęp do domeny i obecnej strony jest ustalony wcześniej, a nie w dniu publikacji,
- wiesz, kto u Ciebie odpowiada na zapytania z formularza.
Odświeżenie istniejącej strony zaczyna się u mnie od 3 490 zł netto, strona od zera z 5–8 widokami — od 5 990 zł netto, a rozbudowany serwis z 8–15 widokami i blogiem lub bazą wiedzy — od 9 490 zł netto. W każdej cenie są panel CMS, szybkość, responsywność, formularze, techniczne podstawy SEO, HTTPS i podstawowe dokumenty. Zasady współpracy krok po kroku opisuję też na stronie Jak działamy.