01
Szkice układu
Szkielet każdej podstrony: kolejność sekcji, hierarchia treści, droga od wejścia do formularza. Zatwierdzasz strukturę, zanim wejdą kolory.
1-2iteracje
Przesunięcie sekcji w projekcie zajmuje minutę. Ta sama zmiana po wdrożeniu to kilka godzin pracy i osobna faktura. Dlatego najpierw powstaje makieta w Figmie — na telefon i na komputer, z prototypem do przeklikania. Od 400 zł, gotowa w 3–7 dni.
Projekt to moment, w którym pomyłka jest najtańsza. Dopóki strona żyje w Figmie, zmiana kolejności sekcji, koloru przycisku albo długości formularza kosztuje minutę. Po wdrożeniu ta sama decyzja wraca jako godziny pracy programisty. Dlatego robię projekt jako osobną usługę, a nie jako etap doklejony do kodowania.
Zamów projekt, jeśli: masz własnego programistę i brakuje Ci tylko makiety; chcesz pokazać stronę wspólnikowi albo bankowi, zanim wydasz budżet; planujesz więcej niż trzy podstrony i zależy Ci, żeby każda kolejna powstawała z gotowych klocków; albo masz stronę, która wygląda porządnie, a mimo to nikt nie wypełnia na niej formularza.
Nie zamawiaj projektu, jeśli: potrzebujesz jednej prostej wizytówki na wczoraj — wtedy szybciej i taniej wychodzi [pakiet Mini](/cennik) na sprawdzonym układzie. Odpuść też, jeśli nie masz jeszcze tekstów ani zdjęć: makieta wypełniona rybnym tekstem wygląda ładnie i nie rozstrzyga niczego, a poprawki po dostarczeniu prawdziwych treści zjedzą obie rundy rewizji. W tej sytuacji zacznij od tekstów, a projekt zamów miesiąc później.
Plik Figmy przechodzi na Twoje konto z prawem edycji — możesz go wdrożyć u mnie, u siebie albo u kogokolwiek innego. Jeśli chcesz od razu gotową stronę, projekt najczęściej idzie w parze z [implementacją](/uslugi/implementacja).
Lista plików, które trafiają na Twoje konto po odbiorze projektu.
Szkielet każdej podstrony: kolejność sekcji, hierarchia treści, droga od wejścia do formularza. Zatwierdzasz strukturę, zanim wejdą kolory.
Każda podstrona w wersji na komputer i na telefon: kolory, kroje pisma, ikony, zdjęcia, stany przycisków i pól formularza.
Kolory, rozmiary tekstu, odstępy, przyciski, karty i formularze w jednym pliku. Kolejna podstrona powstaje z gotowych klocków, nie od zera.
Przejścia między ekranami działają w przeglądarce. Wysyłasz link wspólnikowi albo kilku klientom i zbierasz uwagi, zanim ruszy kod.
Wartości CSS, ikony i grafiki w SVG, PNG i WebP, opis zachowania komponentów. Programista czyta je wprost z pliku, bez pytań do mnie.
Każdy ekran narysowany w szerokości 375 px i 1440 px, tablet 768 px na życzenie. Bez odkładania telefonu na „dopracujemy później”.
Plik Figmy przeniesiony na Twoje konto z prawem edycji, bez znaków wodnych i bez opłat po zakończeniu projektu.
Prototyp przeklikuje 3–5 osób z Twojej grupy docelowej. Dostajesz notatkę: gdzie się zatrzymali, czego nie znaleźli, co kliknęli zamiast.
PDF z uzasadnieniem: dlaczego ten układ, ten kolor, ta kolejność sekcji. Przydaje się, gdy za rok wracasz do strony z nowym pomysłem.
05 etapów · 3-7 dni roboczych
30 minut o tym, kto ma na tę stronę wchodzić i po co. Wypełniamy brief, przekazujesz logo, zdjęcia i teksty. Efekt: spisany zakres i lista podstron do zaprojektowania.
Oglądam 5–10 stron firm, z którymi konkurujesz o to samo zapytanie w Google. Efekt: trzy kierunki stylistyczne na jednej planszy — wybierasz jeden, zanim powstanie pierwszy ekran.
Każda podstrona w szarościach: co jest na górze, co pod spodem, gdzie stoi formularz. Efekt: zatwierdzona struktura, po której nie wracamy do przestawiania sekcji.
Kolory, kroje pisma, zdjęcia i komponenty na każdej podstronie, w wersji na komputer i telefon. Efekt: projekt do zatwierdzenia, z dwiema rundami poprawek w cenie.
Podpinam przejścia między ekranami, eksportuję ikony i grafiki, spisuję wartości CSS. Efekt: link do prototypu i plik Figmy przeniesiony na Twoje konto.
Narzędzia, które zna każdy programista i każdy grafik. Nic, co uzależniałoby Cię ode mnie.
Główne narzędzie projektowe — wektory, auto-layout, prototypowanie, design system, handoff dla dewa.
Whiteboard do user flows, mapowania ścieżek, ideation sessions, brainstorm z klientem.
Open-source biblioteka 1400+ ikon. Używam gdy klient nie ma własnego setu. Spójne, wektorowe, darmowe na zawsze.
Dobór palety i sprawdzenie kontrastu tekstu do progu WCAG AA — żeby cena na przycisku była czytelna także w słońcu.
Free fonty o produkcyjnej jakości — Inter, Manrope, Geist, Satoshi. Bez licencji, bez kosztów miesięcznych dla klienta.
Darmowe zdjęcia stockowe o prawdziwej jakości — do moodboardów i draftów, zanim klient dostarczy własne materiały.
Narzędzia do zdalnych testów użyteczności — nagrywam sesje, zbieram heatmapy, analizuję błędy w przepływach.
Dokumentacja projektowa, timeline, komunikacja z klientem. Jedno miejsce na wszystkie ustalenia, zamiast chaosu w mailach.
400 zł to jedna podstrona w wersji na komputer i telefon — układ w rodzaju nagłówek, trzy sekcje i stopka. Bez prototypu do przeklikania i bez systemu komponentów, bo przy jednym ekranie nie ma czego ujednolicać.
800–1200 zł to pełna strona sprzedażowa: 6–8 sekcji, prototyp, podstawowy system kolorów i komponentów. Termin 5 dni roboczych.
Od 1500 zł kosztuje rozbudowany system komponentów pod stronę wielostronicową. Ma sens wtedy, gdy podstron będzie kilkanaście — każda kolejna powstaje wtedy z gotowych elementów zamiast od zera.
W każdym wariancie dwie rundy poprawek są w cenie, a kwota z briefu wchodzi do umowy. Projekt zamawiany razem z [implementacją](/uslugi/implementacja) wyceniam łącznie i taniej. Wycena wraca w 24 h — napisz na [kontakt](/kontakt) albo zajrzyj do [cennika](/cennik).
05 questions
Dwa wdrożenia, w których projekt powstał przed kodem, stoją dziś na produkcji: centrum rehabilitacji Exura Ortho i Kancelaria Notarialna Włoszczyński. Oba znajdziesz na [/portfolio](/portfolio) razem z pozostałymi kafelkami — te opisane jako studia stylów są ćwiczeniami warsztatowymi, nie wdrożeniami dla klientów, i tak są oznaczone.
Najwięcej mówi jednak proces, nie zrzut ekranu. Na rozmowie przechodzę z Tobą przez konkretny plik: od szkicu układu, przez prototyp, po wartości CSS, które czyta programista. Napisz na [/kontakt](/kontakt) i umów 20 minut.
Napisz, ile podstron ma mieć strona i do kogo mówi. Wycena wraca w 24 h, projekt w 3–7 dni od zebrania materiałów. Prototyp do przeklikania i plik Figmy trafiają na Twoje konto.