--- title: "UI/UX design: projektowanie interfejsów dla firm" description: "Projektujemy interfejsy sklepów, portali dla partnerów, konfiguratorów i aplikacji: od rozmów z użytkownikami i makiety po design system dla programistów." url: https://fluostudio.pl/uslugi/product-design/ui-ux-design/ --- # UI/UX design bez instrukcji obsługi. Projektujemy sklepy, portale dla partnerów, konfiguratory i aplikacje dla średnich i dużych firm. Zaczynamy od tego, co ludzie mają u Was załatwić, a kończymy na plikach, w których programiści znajdą odpowiedź na każde „a co, jeśli…”. [Porozmawiajmy o Waszym produkcie](https://fluostudio.pl/kontakt/) Czym różni się UX od UI? 01 / 05 Overmax Karta produktu na telefonie [Zobacz projekt](https://fluostudio.pl/projekty/overmax/) 01 UX i UI ## Jedna litera różnicy Piszemy je razem, z ukośnikiem, bo jedno bez drugiego nie działa. Najwygodniejsza ścieżka przegra z przyciskiem, którego nikt nie zauważył, a najładniejszy przycisk nie pomoże, jeśli prowadzi donikąd. ### UX User experience, doświadczenie użytkownika Wszystko, co człowiek przeżywa, korzystając z produktu. Czy szybko znajduje to, po co przyszedł, czy rozumie, co się stanie po kliknięciu, i czy dociera do celu bez telefonu do Waszego biura. Odpowiada na pytania - Kto korzysta z produktu i co chce załatwić? - W jakiej kolejności podejmuje decyzje? - Czego potrzebuje, żeby zrobić następny krok? Co z tego powstaje - Ścieżki użytkowników - Architektura informacji - Klikalna makieta [UX w słowniku pojęć](https://fluostudio.pl/baza-wiedzy/slownik/ux/) ### UI User interface, interfejs użytkownika Wszystko, co widać na ekranie i czego się dotyka: przyciski, pola, kolory, krój pisma, ikony, odstępy i ruch. Dobry interfejs od razu pokazuje, co jest najważniejsze, co da się kliknąć i czyj to produkt. Odpowiada na pytania - Na co spojrzę najpierw? - Co tu da się kliknąć i co się wtedy stanie? - Czy to wygląda jak Wasza marka? Co z tego powstaje - Widoki na komputer i telefon - Design system - Opis ruchu i stanów [UI w słowniku pojęć](https://fluostudio.pl/baza-wiedzy/slownik/ui/) Dobry UX sprawia, że się da. **Dobry UI, że się chce.** 02 Od UX do UI ## Jak pytanie klienta zamienia się w przycisk Weźmy kartę produktu w sklepie z lampami. Zanim ktoś kupi, zadaje sobie pięć pytań. UX ustala, gdzie i w jakiej kolejności znajdzie odpowiedzi, a UI nadaje im formę. Etap projektu Pytania Makieta Interfejs ### Najpierw pytania Zanim cokolwiek narysujemy, zbieramy pytania, które klient zadaje sobie przed zakupem, i układamy je w kolejności, w jakiej przychodzą mu do głowy. ### Potem makieta Każde pytanie dostaje swoje miejsce na ekranie. Kolorów jeszcze nie ma i to celowo, bo na tym etapie rozmawiamy tylko o tym, czy da się tu kupić lampę. ### Na końcu interfejs Te same miejsca dostają kolory marki, krój pisma, zdjęcia i ruch. Najważniejszy przycisk widać z daleka, a reszta mu nie przeszkadza. Oświetlenie nad stół Lampa wisząca Kopuła Kolor klosza Oliwka Piasek Grafit Cegła Ø 40 cm średnica klosza 60–150 cm regulowany zwis 649 zł Wysyłamy jutro Zapytaj o lampę 1. „Czy to ta lampa?” UX ustala Zdjęcie i nazwa na samej górze. Klient najpierw sprawdza, czy trafił we właściwe miejsce. UI pokazuje Duże zdjęcie na jasnym tle i nazwa w kroju marki. Kolejne zdjęcia przewija się palcem. 2. „Czy jest w moim kolorze?” UX ustala Kolory zaraz pod nazwą, bo od nich zależy, czy klient czyta dalej. UI pokazuje Próbki w kółkach, wybrana z obwódką. Klosz na zdjęciu zmienia kolor razem z wyborem. 3. „Czy zmieści się nad stołem?” UX ustala Wymiary, które klient sprawdza z miarką w ręku: średnica klosza i długość zwisu. UI pokazuje Mały rysunek z wymiarami, czytelny bez powiększania. 4. „Ile kosztuje i kiedy dojdzie?” UX ustala Cena i dostawa obok siebie, bo klient decyduje o jednym i drugim naraz. UI pokazuje Cena największym stopniem pisma, termin dostawy obok, z ikoną. 5. „Jak ją zamówić?” UX ustala Jeden główny przycisk w zasięgu kciuka. Pytanie do sklepu jako druga, cichsza opcja. UI pokazuje Przycisk w kolorze akcentu przy dolnej krawędzi. Po dotknięciu potwierdza, że lampa jest w koszyku. W praktyce Tak zaczęliśmy sklep Overmax. Większość klientów ogląda go na telefonie, a najważniejsza jest dla nich karta modelu, więc koncepcję zbudowaliśmy na mobilnej karcie X-Hooligana, a resztę sklepu dopiero na niej. [Zobacz projekt Overmax](https://fluostudio.pl/projekty/overmax/) ![Wersja mobilna biurokoncept.pl na dwóch telefonach, z przodu karta produktu](https://fluostudio.pl/media/projekty/biurokoncept/bk-foto-telefony.webp) [Biurokoncept: ponad tysiąc mebli biurowych w katalogu, który na telefon zaprojektowaliśmy osobno](https://fluostudio.pl/projekty/biurokoncept/) 03 Podejście ## Co robimy, aby interfejs był oczywisty? Oczywisty dla klienta, który widzi go pierwszy raz, i dla programisty, który będzie go budował. 1. ### Rozmowy Słuchamy ludzi, którzy będą korzystać z produktu, i tych, którzy dziś odbierają ich telefony. Dział obsługi klienta wie o interfejsie więcej niż niejeden raport. 2. ### Ścieżki Rozpisujemy, skąd ludzie przychodzą, co chcą załatwić i w którym miejscu dziś rezygnują. Każdy ekran dostaje swoje miejsce w tej drodze. 3. ### Porządek Układamy treści i funkcje w kolejności, w jakiej ludzie podejmują decyzje. W sklepie Biurokoncept do oferty prowadzą trzy drogi: przez przestrzenie, produkty i usługi. 4. ### Makieta Najpierw szare prostokąty z prawdziwymi treściami. Na [makiecie](https://fluostudio.pl/baza-wiedzy/slownik/makieta/) najtaniej przesunąć przycisk, dodać krok albo skreślić funkcję, której nikt nie potrzebuje. 5. ### Marka na ekranie Kiedy marka coś obiecuje, interfejs ma tej obietnicy dotrzymać. Kolory, krój pisma, ikony i ton komunikatów bierzemy z marki i sprawdzamy na ekranie. W ciemnym sklepie Overmax podstawowy niebieski okazał się za ciemny, więc sięgnęliśmy po jaśniejszy z linii samochodów. 6. ### Słowa Piszemy przyciski, komunikaty i podpowiedzi, czyli [UX writing](https://fluostudio.pl/baza-wiedzy/slownik/ux-writing/). „Wyślij zapytanie” mówi więcej niż „Dalej”, a dobry komunikat o błędzie podpowiada, jak go naprawić. 7. ### Dostępność Kontrast, wielkość tekstu, obsługa z klawiatury i opisy dla czytników ekranu sprawdzamy w każdym projekcie. Z interfejsu korzystają też ludzie ze słabszym wzrokiem, w pełnym słońcu i w biegu. 8. ### Przekazanie Programiści dostają widoki na komputer i telefon, stany, ruch i bibliotekę komponentów. Przy wdrożeniu odpowiadamy na ich pytania, a gdy trzeba, programujemy sami. Naszym celem są interfejsy, po których wdrożeniu **w dziale obsługi klienta robi się ciszej.** 04 Co projektujemy ## Co ma załatwić Wasz interfejs? Każdy z tych interfejsów ma inną pracę do wykonania, więc każdy projektujemy trochę inaczej. Sklep internetowy Karta produktu, koszyk i wszystko pomiędzy Co robimy Projektujemy sklepy od karty produktu w górę: zdjęcia, warianty, filtry, porównania, koszyk i zamówienie. Uwzględniamy też to, co jest tylko u Was, na przykład produkty, których nie wolno sprzedawać w internecie. Co dostajecie - Karta produktu w wariantach - Listy, filtry i porównywarka - Koszyk i ścieżka zamówienia - Widoki na komputer i telefon Design Optyk [Sklep połączony z salonami: przy markach, których nie wolno sprzedawać online, koszyk zamienia się w „Zapytaj o produkt”](https://fluostudio.pl/projekty/designoptyk/) [Więcej o sklepach internetowych](https://fluostudio.pl/uslugi/strony-www/sklep-internetowy/) Podobne realizacje - [Overmax](https://fluostudio.pl/projekty/overmax/) - [Biurokoncept](https://fluostudio.pl/projekty/biurokoncept/) Portal dla partnerów Partnerzy sami biorą, czego potrzebują Co robimy Projektujemy portale, z których partnerzy i sprzedawcy sami pobierają materiały, zdjęcia i prezentacje. Zaczynamy od próśb, które dziś trafiają do Was mailem, i robimy z nich menu. Co dostajecie - Podział materiałów na kategorie - Wyszukiwarka i filtry - Pobieranie wielu plików naraz - Panel do dodawania materiałów Acer UK [Partner Marketing Hub: partnerzy sami pobierają materiały marki, które wcześniej ktoś wysyłał im ręcznie](https://fluostudio.pl/projekty/acer/) Konfigurator produktu Klient składa produkt i od razu widzi wynik Co robimy Rozkładamy produkt na kroki, które klient rozumie bez katalogu w ręku, i pokazujemy wynik po każdym wyborze. Na końcu czeka koszyk albo zapytanie z pełną konfiguracją, więc handlowiec nie zaczyna rozmowy od zera. Co dostajecie - Kroki i logika wyborów - Podgląd, który zmienia się z wyborem - Podpowiedzi przy opcjach - Koszyk albo zapytanie z konfiguracją Itodi [Meble na wymiar w kilku krokach: szerokość, wysokość, fronty, podstawa i kolor](https://fluostudio.pl/projekty/itodi/) [Więcej o stronach z konfiguratorem](https://fluostudio.pl/uslugi/strony-www/strona-z-konfiguratorem/) Podobne realizacje - [Biurokoncept](https://fluostudio.pl/projekty/biurokoncept/) Serwis dla specjalistów Parametry, rysunki i wiedza dla architektów Co robimy Architekt przychodzi po konkret: parametr, rysunek, plik do projektu. Układamy serwis według wymagań, od których zaczyna, i podajemy mu wszystko w kilku kliknięciach, w jego języku. Co dostajecie - Tabele i filtry parametrów - Baza wiedzy z artykułami - Pliki do pobrania - Wersje językowe Porta [Strefa Architekta: drzwi według parametrów, baza wiedzy i pliki do pobrania po polsku i po rumuńsku](https://fluostudio.pl/projekty/porta-pro/) Aplikacja webowa i panel klienta Narzędzie, w którym ktoś pracuje codziennie Co robimy Panele klienta, narzędzia dla działów i aplikacje do codziennej pracy. Najpierw projektujemy to, co użytkownik robi najczęściej, bo to ma iść najszybciej. Rzadsze funkcje mogą poczekać piętro niżej. [Więcej o aplikacjach webowych](https://fluostudio.pl/uslugi/product-design/aplikacje-webowe/) Co dostajecie - Mapa ról i zadań - Tabele, formularze i komunikaty - Widoki z mikrointerakcjami - Design system na kolejne funkcje System dla wielu serwisów Wspólne elementy dla kilku stron, spółek i krajów Co robimy Gdy firma ma kilka serwisów, w kilku krajach albo dla kilku spółek, projektujemy jeden system: wspólny szkielet, komponenty i zasady. Każdy serwis dostaje własny akcent, a kolejne powstają szybciej, bo nikt nie zaczyna od zera. Co dostajecie - Biblioteka komponentów - Zasady użycia i warianty - Wersje dla spółek i krajów - Dokumentacja dla zespołów Grupa BEST [Jeden system dla sześciu serwisów spółek grupy w pięciu krajach](https://fluostudio.pl/projekty/best-s-a/) Jak pracujemy z design systemem Sytuacje, od których zaczynamy ## Z czym przychodzą do nas firmy [Wszystkie sytuacje](https://fluostudio.pl/wyzwania/) - [„Aplikacja urosła i każdy ekran wygląda trochę inaczej, bo każdy robił ktoś inny.” Zbieramy przyciski, formularze, tabele i komunikaty w jedną bibliotekę komponentów z zasadami użycia. Z niej powstają kolejne ekrany. Wspólny system Grupy BEST](https://fluostudio.pl/projekty/best-s-a/) - [„Nowe funkcje doklejaliśmy tam, gdzie było miejsce, i dziś nikt nie wie, gdzie czego szukać.” Układamy architekturę informacji od nowa: co jest najważniejsze, co idzie razem, a co może być głębiej. Kolejne funkcje mają z góry swoje miejsce. Projekt dla PolTREG](https://fluostudio.pl/projekty/poltreg/) - [„Mamy nową identyfikację, a aplikacja dalej wygląda jak przed rebrandingiem.” Przenosimy markę do interfejsu: kolory, krój pisma, ikony i ton komunikatów. Kolory sprawdzamy na kontraście, bo nie każdy kolor z logo działa na ekranie. Rebranding z wdrożeniem](https://fluostudio.pl/wyzwania/rebranding/) ![Partner Marketing Hub Acer UK na ośmiu ekranach telefonów: strona główna, produkty, materiały sprzedażowe i zdjęcia lifestyle](https://fluostudio.pl/media/projekty/acer/pelne-hub-telefony.webp) [Acer UK: Partner Marketing Hub, z którego partnerzy sami pobierają materiały marki](https://fluostudio.pl/projekty/acer/) 05 Proces ## Od rozmowy do plików dla programistów Pracujemy etapami i według harmonogramu, który znacie przed startem. Po każdym etapie pokazujemy, co powstało, i mówimy, co dalej, więc zawsze wiecie, co robimy, dlaczego i kiedy. Przy mniejszych zleceniach łączymy część etapów, ale kolejność zostaje. 1. ### Etap 1: Warsztaty i rozmowy Poznajemy Waszych klientów od podszewki: kim są, co chcą załatwić i gdzie dziś się gubią. Rozmawiamy z Wami, z obsługą klienta i, kiedy się da, z samymi użytkownikami. Co dostajecie - Lista użytkowników i ich zadań - Cele, do których wracamy przy każdej decyzji 2. ### Etap 2: Architektura informacji Układamy, co jest w produkcie, co idzie razem i jak się między tym poruszać. Tu zapadają najważniejsze decyzje, więc nie idziemy na skróty. Co dostajecie - Mapa widoków - Ścieżki najważniejszych zadań 3. ### Etap 3: Makieta funkcjonalna Klikalna makieta najważniejszych ścieżek, z prawdziwymi treściami i bez kolorów. Przechodzimy ją z Wami ekran po ekranie, aż wszystko stoi na swoim miejscu. Co dostajecie - Klikalna makieta - Lista treści do przygotowania 4. ### Etap 4: Koncepcja wizualna Kierunek pokazujemy na jednym, najważniejszym widoku, często na telefonie. Kiedy ten ekran działa, reszta ma się na czym oprzeć. Co dostajecie - Projekt kluczowego widoku - Kolory, kroje i styl ikon 5. ### Etap 5: Widoki, stany i system Projektujemy wszystkie widoki na komputer i telefon, razem ze stanami, o których łatwo zapomnieć: pusta lista, błąd, produkt niedostępny. Z powtarzalnych elementów powstaje biblioteka komponentów. Co dostajecie - Widoki na komputer i telefon - Design system ze stanami 6. ### Etap 6: Przekazanie i wdrożenie Oddajemy pliki z opisem zachowania elementów, ruchem i grafikami. Przy wdrożeniu odpowiadamy na pytania programistów i sprawdzamy, czy gotowy produkt wygląda jak projekt. Co dostajecie - Specyfikacja i pliki do wdrożenia - Przegląd gotowego wdrożenia 06 Design system ## Jeden przycisk, osiem stanów Na prezentacji przycisk ma jeden wygląd. W gotowym produkcie musi wiedzieć, co zrobić, gdy ktoś na niego najedzie, wejdzie z klawiatury albo kliknie, a serwer akurat nie odpowie. Każdy taki stan projektujemy raz, w [bibliotece komponentów](https://fluostudio.pl/baza-wiedzy/slownik/design-system/), i każdy ekran bierze go z tego samego miejsca. - [6 serwisów Grupy BEST w pięciu krajach stoi na jednym systemie](https://fluostudio.pl/projekty/best-s-a/) - [50+ bloków, z których zespół Porta sam składa nowe strony Strefy Architekta](https://fluostudio.pl/projekty/porta-pro/) Stan przycisku Zwykły Najechanie Fokus Wciśnięty Ładowanie Gotowe Błąd Nieaktywny 01 Tak wygląda, zanim ktokolwiek go dotknie. 02 Lekko się unosi, żeby było widać, że da się go kliknąć. 03 Wyraźna obwódka dla osób, które poruszają się po stronie klawiaturą. 04 Ugina się pod palcem, więc wiadomo, że kliknięcie doszło. 05 Pokazuje, że coś się dzieje, i nie przyjmuje drugiego kliknięcia. 06 Potwierdza, że się udało, a po chwili wraca do zwykłego stanu. 07 Mówi, co poszło nie tak i co zrobić dalej. 08 Wygląda na wyłączony i podpowiada, czego brakuje. ![Laptop na ciemnym tle ze stroną główną best.com.pl i hasłem „Twoje potrzeby są dla nas ważne”.](https://fluostudio.pl/media/projekty/grupa-best/duze-best-com-pl-laptop.webp) [Grupa BEST: best.com.pl, pierwszy serwis i źródło systemu dla spółek grupy](https://fluostudio.pl/projekty/best-s-a/) 07 Pytania ## Najczęstsze pytania Czym różni się UX design od UI designu? UX decyduje, co jest na ekranie, w jakiej kolejności i co się stanie po kliknięciu. UI decyduje, jak to wygląda i jak się zachowuje. Pierwsze zaczyna się od rozmów i makiety, drugie kończy na kolorach, krojach pisma i ruchu. Więcej piszemy na początku tej strony. Możecie zaprojektować samo UI do naszej makiety? Tak. Zaczynamy wtedy od przejścia makiety razem z Wami, żeby zrozumieć decyzje, które już zapadły. Jeśli coś w ścieżce nas zaniepokoi, powiemy o tym, zanim zaczniemy rysować. Pracujecie też na istniejącym sklepie albo aplikacji? Tak, i często od tego zaczynamy. Sprawdzamy, co działa, a co przeszkadza, i poprawiamy etapami, żeby klienci mogli korzystać z produktu przez cały czas. Sklep [Biurokoncept](https://fluostudio.pl/projekty/biurokoncept/) przenieśliśmy ze starej platformy razem z produktami, a każdy stary adres produktu prowadzi dziś na nowy. W jakim programie projektujecie? W Figmie. Dostajecie plik z widokami, komponentami i stylami, w którym Wasz zespół może dalej pracować. Ikony i grafiki eksportujemy w formatach gotowych do wdrożenia. Czy sami też programujecie? Tak. Serwisy i sklepy na WordPressie i WooCommerce budujemy sami, jak [Strefę Architekta Porta](https://fluostudio.pl/projekty/porta-pro/) i sklep Biurokoncept. Możemy też oddać projekt Waszym programistom, jak przy [sklepie Overmax](https://fluostudio.pl/projekty/overmax/), i odpowiadać na ich pytania przy wdrożeniu. Czy projekt będzie zgodny z WCAG? Kontrast, wielkość tekstu, kolejność przechodzenia klawiaturą i opisy dla czytników ekranu sprawdzamy w każdym projekcie. Gdy serwis musi spełniać WCAG, ustalamy poziom na starcie. Tak powstał [best.com.pl](https://fluostudio.pl/projekty/best-s-a/), wdrożony zgodnie z WCAG 2.0. Jak wygląda współpraca? Przed startem wiecie, jak będzie zorganizowana praca, w jakich etapach i co dostaniecie na koniec. Potem trzymamy się harmonogramu i po każdym etapie pokazujemy, co powstało. Jeśli coś wymaga Waszej decyzji, mówimy o tym od razu i podpowiadamy, co sami byśmy wybrali. Co dostaniemy na koniec? Plik w Figmie z widokami na komputer i telefon, bibliotekę komponentów ze stanami, klikalny prototyp, opis ruchu i zachowania elementów oraz grafiki do wdrożenia. Jeśli wdrażamy sami, także działający serwis i szkolenie z panelu. Wszystko zostaje u Was, więc część pracy może przejąć Wasz zespół, a do rozbudowy możemy razem wrócić w każdej chwili.