Design, który sprzedaje: projektowanie UX/UI

Jeśli Twoja strona wygląda dobrze, a zapytań z niej nie ma, przyczyna zwykle leży w układzie. Przycisk ginie w tle, najważniejsza informacja jest schowana pod trzecim przewinięciem, a formularz pyta o rzeczy, których nikt nie chce podawać. Taką stronę klienci chwalą, po czym zamykają kartę. Projektowanie UX/UI zaczynamy więc od jednego pytania: co użytkownik ma zrobić na tym ekranie? Pod tę odpowiedź układamy wszystko inne.

Nagłówek ma zatrzymać, sekcja oferty ma wyjaśnić, czym różnisz się od konkurencji, a wezwanie do działania ma być oczywistym następnym krokiem. Jeśli cele i odbiorców ustaliliśmy wcześniej, w ramach strategii i kierunku strony, projekt jest przełożeniem tego planu na ekrany. Jeśli strategii nie było, te same pytania zadajemy na pierwszej rozmowie.

Dobry projekt poznasz po tym, że użytkownik się nie zastanawia: wie, gdzie jest, co może zrobić i co stanie się po kliknięciu. Tę oczywistość budują hierarchia nagłówków, odstępy, kontrast i kolejność sekcji, więc od nich zaczynamy. Kolory, zdjęcia i detale dobieramy, kiedy układ już działa.

Projekt powstaje w Figmie i przechodzi od szkicu struktury do interfejsu gotowego do kodowania. Gotowych motywów nie używamy: każdy ekran rysujemy od zera, pod to, co Twoja strona ma sprzedać i komu. Dokładny zakres ustalamy przy wycenie, ale w praktyce prawie zawsze składa się z tych elementów:

• Makiety i prototypy

  od szkicu low-fi do klikalnego prototypu, który przejdziesz na telefonie jak gotową stronę.

• Projekt UI

  typografia, kolory, zdjęcia i detale spójne z Twoją marką i podporządkowane zadaniu każdego ekranu.

• System designu, jeśli strona ma rosnąć

  komponenty, typografia i kolory, z których składasz kolejne podstrony.

• Warianty responsywne

  projekt mobile-first, od ekranów o szerokości 375 px wzwyż.

• Projekt pod konwersję

  jedno wezwanie do działania na sekcję i ścieżka użytkownika bez ślepych zaułków.

• Testy prototypu, jeśli je dołożysz

  sprawdzamy go z prawdziwymi użytkownikami, zanim trafi do kodu.

Zaczynamy od makiet low-fi, czyli samej struktury bez kolorów i zdjęć. Na tym etapie rozmawiamy o kolejności treści i o tym, którędy użytkownik ma przejść; odcień przycisku poczeka. Po zatwierdzeniu układu przechodzimy do projektu UI: typografii, kolorów, zdjęć i detali. Na końcu łączymy ekrany w klikalny prototyp, który przejdziesz na telefonie i komputerze jak działającą stronę.

Projekt oglądasz w Figmie z włączonym trybem komentarzy. Uwagę zostawiasz przy konkretnym elemencie, więc nie piszesz maila o „tym niebieskim przycisku po lewej”, a my nie musimy zgadywać, o który chodzi. Na każdym etapie masz w cenie dwie rundy poprawek. Po dobrze zrobionej strategii zwykle wystarczają, a jeśli okaże się, że potrzebna jest trzecia, wyceniamy ją osobno i mówimy o tym, zanim zaczniemy.

Projekt akceptujesz przed kodowaniem, więc nie płacisz za przerabianie gotowych widoków. Osoba, która wdraża stronę, dostaje komplet: wszystkie ekrany, stany i warianty responsywne. U nas projekt i kod prowadzi ta sama osoba, Kacper Baranowski, więc nic nie ginie między makietą a wdrożeniem strony w kodzie.

Większość Twoich klientów otworzy stronę na telefonie, więc projekt zaczynamy od ekranu o szerokości 375 px i dopiero potem rozszerzamy go na desktop. Przyciski są w zasięgu kciuka, formularze krótkie, a najważniejsza informacja mieści się na pierwszym ekranie. Desktop dostaje więcej przestrzeni i tę samą logikę.

Żeby strona sprzedawała, w każdej sekcji zostawiamy jedno główne wezwanie do działania, ścieżkę prowadzimy bez ślepych zaułków, a dowody zaufania ustawiamy tam, gdzie pojawiają się wątpliwości. Kontrast, czytelną typografię, widoczny fokus i obsługę klawiaturą planujemy już w makietach, bo dostępność na poziomie WCAG 2.2 AA jest u nas kryterium odbioru strony, a taniej ją zaprojektować od razu niż poprawiać po wdrożeniu. Jeśli w zakresie są animacje i 3D, na tym etapie decydujemy, gdzie ruch pomaga, a gdzie rozprasza.

W sklepach i aplikacjach dochodzą stany, o których łatwo zapomnieć: pusty koszyk, błąd w formularzu, ładowanie danych, komunikat po wysłaniu. Projektujemy je razem z głównymi widokami, bo właśnie w tych momentach użytkownik najczęściej rezygnuje. Na prototypie zobaczysz je wcześniej niż Twój klient.

Cena zależy od liczby widoków, stanów i wariantów, od tego, czy potrzebujesz pełnego systemu designu, i od tego, czy masz już identyfikację wizualną. Wizytówka z kilkoma widokami to inny zakres niż serwis z ofertą, blogiem i landingami, dlatego jednej kwoty bez rozmowy nie podajemy. Bezpłatną wycenę z rozpisanym zakresem i harmonogramem dostajesz do 48 godzin od rozmowy, więc decyzję podejmujesz, znając kwotę i terminy.

Jeśli masz brand book albo wytyczne wizualne, trzymamy się ich. Jeśli ich nie masz, kierunek wizualny ustalamy razem na etapie projektu, a na Twoje życzenie rozszerzamy zakres o identyfikację od podstaw. Do projektu możesz też dołożyć trzy samodzielne pozycje, z tymi samymi cenami co w cenniku. Opłacają się najbardziej, gdy stronę będzie potem rozwijał Twój zespół albo gdy ścieżka klienta jest długa i kosztowna, jak w sklepie czy aplikacji.

• System designu

  komponenty, typografia i kolorystyka opisane tak, że Twój zespół rozwija stronę bez pytania nas o każdą zmianę. Możesz go przekazać swojemu deweloperowi albo zostawić wdrożenie nam. Od 2 500 zł netto.

• Testy użyteczności

  przed zamknięciem projektu sprawdzamy makiety z prawdziwymi użytkownikami z Twojej grupy docelowej. Dowiadujesz się, gdzie się zatrzymują i dlaczego odchodzą, zanim cokolwiek trafi do kodu. Od 1 500 zł netto.

• Projekt ekranów mobilnych

  widoki na telefon projektowane osobno, z układem pod obsługę kciukiem i mniejszy ekran, zamiast automatycznego zmniejszania desktopu. Od 1 200 zł netto.

Po odbiorze dostajesz pliki źródłowe w Figmie: wszystkie ekrany, komponenty i style. Możesz je przekazać innemu wykonawcy albo własnemu zespołowi i nikogo nie musisz o to prosić. Jeśli w zakresie był system designu, dostajesz też bibliotekę komponentów, z której składa się nowe podstrony bez projektowania od zera.

Jeśli wdrożenie robimy my, projekt trafia do kodu jeden do jednego, z tymi samymi odstępami, stanami i animacjami, a na błędy z naszego kodu masz 30 dni bezpłatnych poprawek liczonych od odbioru. Jeśli wdraża ktoś inny, dostaje komplet materiałów i niczego nie musi sobie dopowiadać. W obu przypadkach strona na produkcji wygląda tak jak zatwierdzony prototyp.

Kiedy po starcie chcesz dołożyć sekcję, landing kampanii albo nową podstronę, składasz je z gotowych komponentów systemu designu, zamiast zamawiać projekt od zera. Strona po roku wciąż wygląda jak jedna całość, a każda zmiana zajmuje mniej czasu.

Design jest częścią każdej naszej oferty. Przy stronach internetowych dla firm projekt prowadzi do zapytania albo telefonu. W sklepach internetowych projektujemy ścieżkę zakupową od karty produktu do płatności. Przy stronach branżowych układ odpowiada na zwyczaje klientów danej branży: menu i rezerwacja w restauracji, portfolio u wykonawcy, dowody kompetencji w kancelarii.

W produktach cyfrowych zaczynamy od przepływów użytkownika i klikalnego prototypu, zanim powstanie kod. Tak pracujemy przy aplikacji webowej i aplikacji mobilnej, gdzie dochodzą gesty i nawigacja pod kciukiem. Możesz też zamówić sam projekt, na przykład dla swojego dewelopera. Napisz w formularzu na dole strony, co budujesz i na kiedy. Odpowiemy najpóźniej następnego dnia roboczego, a wycenę z zakresem i harmonogramem dostaniesz do 48 godzin od rozmowy.