overflow
PLRUENUA
PROCES · 10 ETAPÓW

Jak pracuję.

Każdą stronę prowadzę przez dziesięć kroków. Nie sztywny regulamin, a kolejność, która usuwa większość problemów z wyprzedzeniem.

Poniżej — co robię na każdym etapie i po co. Po briefie ustalamy każdy kolejny krok, żeby wynik nie był niespodzianką.

  1. 01

    Brief

    Pierwsza rozmowa. Poznaję zadanie, odbiorców, budżet, terminy. Im dokładniejsza ramka — tym mniej przeróbek później.

    Więcej
    Jak dokładnie
    • Krótka ankieta albo rozmowa na 30-40 minut.
    • Cele konkretne, nie „więcej klientów".
    • Kto jest odbiorcą i co dla niego ważne.
    • Ograniczenia: budżet, terminy, czego nie wolno zmieniać.
    Co zwykle się psuje, jeśli pominąć
    • „Zrób ładnie" bez wyjaśnienia dla kogo.
    • Cele bez liczby i terminu.
    • Start bez uzgodnionego briefu — przeróbki gwarantowane.
  2. 02

    Analiza niszy

    Oglądam 5-7 stron konkurencji: co działa, czego brakuje. Tam, gdzie nikt nie poszedł — możemy iść my.

    Więcej
    Jak dokładnie
    • Dla każdej strony: paleta, fonty, struktura hero, ton.
    • Jeśli 4 z 5 robi to samo — nie ma sensu biec tam samo.
    • Czego nikt nie robi, a jest przydatne — to szansa.
    Co zwykle się psuje, jeśli pominąć
    • „Wszystkie strony takie same" — zwykle oglądałeś jedną.
    • Kopiuję „ładne" u innych — wychodzi jak u wszystkich.
    • Ignoruję co działa — powtarzam cudze błędy.
  3. 03

    Koncepcja

    Decyduję, jak to podać: ton, akcent, jedna główna obietnica. Jeden kierunek, a nie „po trochu ze wszystkiego".

    Więcej
    Jak dokładnie
    • Krótko formułuję: dla kogo, co obiecujemy, czym się różnimy.
    • Wybieram jeden kierunek, nie mieszam.
    • Utrwalam — potem sprawdzam z tym każdą decyzję.
    Co zwykle się psuje, jeśli pominąć
    • „Połączmy wszystko po trochu" — wyjdzie bez charakteru.
    • Pomysł tylko w głowie — za tydzień zapomniany.
    • Koncepcja dla picu — na etapie kodu wszystko się rozjeżdża.
  4. 04

    Struktura

    Jakie strony, co na każdej, w jakiej kolejności bloki. Tu widać — lending czy multipage.

    Więcej
    Jak dokładnie
    • Każda strona uzasadnia swój sens. „Bo wszyscy mają" — wyrzucam.
    • Dla lendingu — logika bloków: przyciągnąć → przekonać → zaprosić.
    • Dla multipage — przejścia i menu.
    Co zwykle się psuje, jeśli pominąć
    • „O nas", gdzie nie ma co powiedzieć.
    • Blog bez planów pisania.
    • Katalog na lendingu, który sprzedaje jedną usługę.
  5. 05

    Teksty

    Piszę copy przed kodem. Najpierw sens — potem forma. To bardzo zmienia jakość.

    Więcej
    Jak dokładnie
    • Ton wybrany wcześniej: spokojny, przyjazny, techniczny.
    • Każdy blok z celem: co zrozumieć albo zrobić.
    • Przyciski — konkretne czasowniki, nie „dowiedz się więcej".
    Co zwykle się psuje, jeśli pominąć
    • Marketingowa woda: „innowacyjne rozwiązanie", „najwyższa jakość".
    • „Potem przepiszemy" — znaczy nigdy.
    • Kodować na lorem ipsum — struktura pod nieistniejący tekst.
  6. 06

    Styl

    Paleta, fonty, podstawowe elementy — od razu w zmiennych CSS. Jeden zestaw, z którego składa się cała strona.

    Więcej
    Jak dokładnie
    • Paleta: kilka wariantów nastroju, jasny i ciemny.
    • Fonty: nagłówki i tekst, czasem monospace dla liczb.
    • Przyciski, pola, karty — w zmiennych, żeby wielokrotnie użyć.
    Co zwykle się psuje, jeśli pominąć
    • Inter i czarny domyślnie — lenistwo, nie decyzja.
    • Kolory bez sprawdzenia kontrastu — tekst nieczytelny.
    • Elementy „w trakcie" — między stronami rozjazd.
  7. 07

    Kluczowe ekrany

    Makiet w Figmie nie rysuję — od razu koduję główne ekrany, desktop i mobile. Tak wcześniej widać, jak to naprawdę żyje.

    Więcej
    Jak dokładnie
    • Najpierw pierwszy ekran i 2-3 kluczowe bloki — na prawdziwych tekstach.
    • Sprawdzam na długich i krótkich liniach.
    • Pokazuję, zbieram poprawki, dopracowuję do zgody.
    Co zwykle się psuje, jeśli pominąć
    • Uzgadniać po obrazku, którego potem nie da się powtórzyć w kodzie.
    • Tylko desktop — na telefonie się sypie.
    • Pokaz na jednym urządzeniu — niespodzianka na telefonie.
  8. 08

    Programowanie

    Dokańczam resztę stron według zatwierdzonych ekranów. Czysty kod, optymalizacja obrazków, responsywność na wszystko.

    Więcej
    Jak dokładnie
    • Stack pod zadanie: statyka, multipage, e-commerce — różne odpowiedzi.
    • Obrazki w WebP/AVIF, pod rozmiar ekranu.
    • Kod kompaktowy, bez zbędnych bibliotek.
    Co zwykle się psuje, jeśli pominąć
    • Biblioteki „bo popularne" — zbędny ciężar.
    • „Prawie jak na ekranie" = nie.
    • Responsywność na koniec — przeróbka layoutu.
  9. 09

    Kontrola jakości

    Checklista przed oddaniem: szybkość, dostępność, podstawy SEO, kompatybilność, formularze.

    Więcej
    Jak dokładnie
    • Lighthouse na produkcyjnej domenie, nie na localhost. Poniżej 90 — sprawdzam.
    • Chrome, Firefox, Safari — na telefonie i desktopie.
    • Testowe zgłoszenie: sprawdzam, że wiadomość dochodzi.
    • Każdy link klikam.
    Co zwykle się psuje, jeśli pominąć
    • „W Chrome ok" zamiast Safari — o bugu dowiesz się od klienta.
    • Formularz nie dochodzi — klient nie wie, że zgłoszenia giną.
    • Lighthouse mierzony na localhost — na prod inaczej.
  10. 10

    Przekazanie

    Deploy na produkcyjną domenę, SSL, krótka instrukcja jak edytować teksty. Dalej strona działa beze mnie.

    Więcej
    Jak dokładnie
    • Domenę i hosting konfiguruję sam, nie zostawiam klientowi.
    • Instrukcja: jak zmienić telefon, dodać newsa, podmienić obrazek.
    • Trzeba poprawić za pół roku — jestem na kontakcie, bez osobnego kontraktu.
    Co zwykle się psuje, jeśli pominąć
    • Oddane „tak jak jest" bez instrukcji — klient boi się ruszać.
    • Zapomniany SSL — przeglądarka straszy ostrzeżeniem.
    • Zniknięcie zaraz po oddaniu — drobny bug leży tygodniami.

Masz projekt?

Napisz parę zdań o zadaniu — odpowiem w ciągu dnia: pytaniami albo szacunkiem terminu.

Wypełnij brief →