--- title: "UI: co to jest? Słownik pojęć" description: "UI (user interface) to interfejs, czyli wszystko, co człowiek widzi na ekranie i czego używa: przyciski, pola formularzy, menu, ikony, typografia i kolory." url: https://fluostudio.pl/baza-wiedzy/slownik/ui/ --- [Strony www](https://fluostudio.pl/baza-wiedzy/slownik/?dzial=www) # UI Inaczej user interface, interfejs użytkownika, UI design UI (user interface) to interfejs, czyli wszystko, co człowiek widzi na ekranie i czego używa: przyciski, pola formularzy, menu, ikony, typografia i kolory. ## W skrócie - Kontrast tekstu do tła: co najmniej 4,5:1, dla dużego tekstu 3:1 (WCAG, poziom AA) - Każdy przycisk ma kilka stanów: zwykły, po najechaniu, zaznaczony z klawiatury, nieaktywny - Ten sam element wygląda i działa tak samo na każdej podstronie ## Usługa - [UI / UX design](https://fluostudio.pl/uslugi/product-design/ui-ux-design/) Interfejs to ta część produktu, którą klient ma przed oczami i pod palcem. Projektant UI decyduje, jak wygląda przycisk i czy w ogóle widać, że to przycisk. Ustala też wygląd pól formularza, komunikatów o błędach, menu na telefonie i kart produktów. Granica z [UX](https://fluostudio.pl/baza-wiedzy/slownik/ux/) jest płynna. UX ustala, co ma się wydarzyć i w jakiej kolejności. UI ustala, jak to wygląda i jak się to obsługuje. Często robi to ten sam zespół, bo jedno bez drugiego nie działa. ## Po czym poznać dobry interfejs - **Czytelność.** Tekst wyraźnie odcina się od tła, a stopień pisma da się przeczytać na telefonie w tramwaju. - **Przewidywalność.** Przycisk wygląda jak przycisk, link jak link. Ten sam element działa tak samo na każdej podstronie. - **Hierarchia.** Od razu widać, co na ekranie jest najważniejsze. Gdy wszystko jest pogrubione i kolorowe, nic się nie wyróżnia. - **Komplet stanów.** Przycisk w trakcie ładowania i nieaktywny, pole puste, wypełnione i z błędem. Zapomniane stany wychodzą dopiero przy wdrożeniu i wtedy programista zgaduje. - **Ruch z sensem.** [Mikrointerakcje](https://fluostudio.pl/baza-wiedzy/slownik/mikrointerakcja/) potwierdzają działania i pokazują, że coś się dzieje. ## UI i marka Interfejs to też część marki. Kolory, kroje pisma, ikony i sposób, w jaki elementy się poruszają, powinny wynikać z [identyfikacji wizualnej](https://fluostudio.pl/baza-wiedzy/slownik/identyfikacja-wizualna/), a nie z gotowego szablonu. Strona marki dla nastolatków może być głośna i pełna ruchu, strona kancelarii prawnej spokojna i rzeczowa. Obie muszą być czytelne. Żeby kolejne ekrany nie powstawały od zera, elementy interfejsu zbiera się w [design system](https://fluostudio.pl/baza-wiedzy/slownik/design-system/). Nowa podstrona wygląda wtedy jak reszta, a zespół nie projektuje przycisku po raz piąty. ## W naszych projektach - ### [Overmax](https://fluostudio.pl/projekty/overmax/) Ciemny sklep z autami RC dostał jaśniejszy niebieski z linii samochodów, bo podstawowy niebieski marki ginął na czarnym tle. - ### [Pokket](https://fluostudio.pl/projekty/pokket/) Głośna, kolorowa i pełna ruchu strona marki musów w tubkach dla pokolenia Z. ## Więcej na blogu - [UX Design: Twój klucz do sukcesu w cyfrowej przestrzeni](https://fluostudio.pl/ux-design-twoj-klucz-do-sukcesu-w-cyfrowej-przestrzeni/) ## Zobacz też - [Strony www UX UX (user experience) to doświadczenie człowieka, który korzysta ze strony, aplikacji albo usługi: czy szybko znajduje to, czego szuka, rozumie, co ma zrobić, i kończy sprawę bez frustracji.](https://fluostudio.pl/baza-wiedzy/slownik/ux/) - [Identyfikacja wizualna Design system Design system to uporządkowany zbiór komponentów, zasad i plików źródłowych, z których zespół składa kolejne ekrany albo materiały marki. Zamiast projektować każdy element od nowa, korzysta się z gotowych, sprawdzonych części.](https://fluostudio.pl/baza-wiedzy/slownik/design-system/) - [Strony www Mikrointerakcja Mikrointerakcja to drobna reakcja interfejsu na jedno działanie użytkownika, np. zmiana przycisku po naciśnięciu albo animacja licznika w koszyku. Pokazuje, że system przyjął polecenie i co dzieje się dalej.](https://fluostudio.pl/baza-wiedzy/slownik/mikrointerakcja/) - [Identyfikacja wizualna Identyfikacja wizualna Identyfikacja wizualna to system elementów graficznych marki, czyli logo, kolorów, krojów pisma, ikon i stylu zdjęć, razem z zasadami ich łączenia. Dzięki niej materiały firmy wyglądają jak od jednego nadawcy.](https://fluostudio.pl/baza-wiedzy/slownik/identyfikacja-wizualna/) - [Strony www Responsywność Responsywność to zdolność strony do dopasowania układu do szerokości ekranu. Ten sam serwis na komputerze, tablecie i telefonie pokazuje te same treści, ułożone tak, żeby dało się je wygodnie czytać i obsługiwać.](https://fluostudio.pl/baza-wiedzy/slownik/responsywnosc/) - [Strony www Dostępność cyfrowa Dostępność cyfrowa to projektowanie stron i aplikacji tak, żeby mogły z nich korzystać także osoby z niepełnosprawnościami, np. niewidome, słabowidzące, niesłyszące albo obsługujące komputer tylko klawiaturą.](https://fluostudio.pl/baza-wiedzy/slownik/dostepnosc-cyfrowa/) - [Identyfikacja wizualna Typografia Typografia to dobór i układ liter w tekście: krojów pisma, ich wielkości, odstępów i hierarchii. W identyfikacji wizualnej to zasady, dzięki którym teksty marki łatwo się czyta i wyglądają wszędzie tak samo.](https://fluostudio.pl/baza-wiedzy/slownik/typografia/) - [Identyfikacja wizualna Ikonografia Ikonografia to zestaw ikon marki narysowanych według wspólnych zasad: tej samej grubości linii, narożników, siatki i stylu. Dzięki temu ikony na stronie, w katalogu i w aplikacji wyglądają jak jedna rodzina.](https://fluostudio.pl/baza-wiedzy/slownik/ikonografia/) Hasło pojawia się też w: [Aplikacja webowa](https://fluostudio.pl/baza-wiedzy/slownik/aplikacja-webowa/), [CTA](https://fluostudio.pl/baza-wiedzy/slownik/cta/), [Front-end](https://fluostudio.pl/baza-wiedzy/slownik/front-end/), [Makieta](https://fluostudio.pl/baza-wiedzy/slownik/makieta/), [Product design](https://fluostudio.pl/baza-wiedzy/slownik/product-design/), [Prototyp](https://fluostudio.pl/baza-wiedzy/slownik/prototyp/), [UX writing](https://fluostudio.pl/baza-wiedzy/slownik/ux-writing/) ## Strona ma sprzedawać, działać szybko i dawać się łatwo edytować. Porozmawiajmy o Twojej. Na pierwszej rozmowie sprawdzimy, czy i jak możemy pomóc, bez zobowiązań. [Porozmawiajmy](https://fluostudio.pl/kontakt/) [Umów 30 minut konsultacji](https://calendly.com/anita-fluo/darmowa-konsultacja-30-minut)