User Interface

Design System

Wprowadzając kolejne produkty na rynek czy zwiększając swoją ofertę łatwo zatracić spójność w projektowaniu i przekazie. Jest coś, co może nam pomóc pozostać konsekwentnym. To design system. Pomożemy ci zbudować zbiór zasad i bibliotekę komponentów pozwalających na utrzymanie i rozbudowę Twojego produktu cyfrowego.

UX/UI - e-commerce redesign

View case study

Co to jest design system?

Design system to spis wytycznych, którymi powinny kierować się osoby zaangażowane w projektowanie (projektanci UX, UI, programiści i project ownerzy) a także rozwijające nasze rozwiązanie (marketing, sprzedawcy, itp.). Zawiera zasady projektowania twojej aplikacji dla designerów i developerów, ale także wspiera twój brand i komunikację zewnętrzną marki.

Czy design system jest mi potrzebny?

Design system wspiera produkt na każdym etapie rozwoju, lecz w szczególności, gdy znajdujesz się w jednej z poniższych sytuacji.

Rozwijam duży produkt

Design system sprawi, że projekty nowych widoków i komunikaty będą spójne z poprzednią wersją produktu nawet, gdy angażujemy projektantów z zewnątrz.

Tworzę ekosystem produktów

Design system pozwala uspójnić komunikację wewnątrz zespołów, które zarządzają kilkunastoma markami lub siecią produktów i stworzy wymogi UX przy tworzeniu produktów.

Brand manual nie opisuje dostatecznie obszaru digital

Brand manual jest podstawowym dokumentem opisującym twoją markę; rozszerzenie go o design system sprawi, że zadbasz o trzymanie się standardów także podczas projektowania.

Mój zespół designerski rośnie

Utrzymanie spójności przy zwiększającej się liczbie projektantów (czy to wewnętrznych, czy z zewnętrznych agencji) bywa nie lada wyzwaniem. Design system stanowi dobry drogowskaz dla wszystkich zaangażowanych w tworzenie materiałów wizualnych online.

Jak powstaje design system?

Research

Zaczynamy od poznania twoich użytkowników. Sprawdzamy, jakie problemy rozwiązuje twój produkt. Analizujemy mapę podróży klienta na każdym urządzeniu, zwracając uwagę na spójność i konsekwencję w projekcie, a także styl komunikatu.

Inwentaryzacja wizualna

Przeprowadzamy audyt projektu. Zapisujemy nasze obserwacje, prowadząc inwentaryzację kolorów, typografii, obszarów tekstowych, przycisków, grafik, odstępów wraz z opisem relacji między nimi.

Projektowanie głównych widoków

Projektujemy najważniejsze widoki, które wskażą nam zasady projektowania interfejsu. Wybrane przez nas widoki pokazują wszystkie możliwe interakcje pomiędzy elementami w twojej aplikacji, na których zostanie oparty design system.

Stworzenie biblioteki komponentów i style guide’a

Dzięki bibliotece komponentów (pattern library) i style guide’owi możemy zgromadzić wszystkie komponenty interfejsu i zbiór atrybutów wizualnych w jednym dokumencie, do którego możemy wejść i pobrać gotowy element, co skróci nam czas pracy.

Opisanie zasad używania komponentów

Zabieramy się za opisanie zasad użycia komponentów oraz opracowanie tonu głosu i sposobu komunikacji, który odzwierciedla twoją markę i jej wartości.

Dodanie instrukcji użytkowania

Naszym celem jest stworzenie systemu, z którego łatwo się korzysta. W zależności od twoich potrzeb tworzymy stronę internetową, PDF-a, bibliotekę w Sketchu, którą łatwo możesz podzielić się z członkami zespołu lub z podwykonawcami.

Co dostaję w ramach usługi?

Dostarczymy ci ukończony design system. To od ciebie zależy, w jakiej formie chcesz dostać skończony design system. Możemy zbudować go w formie strony internetowej, prezentacji PDF lub biblioteki w Sketchu. Design system zawiera instrukcje na temat zasad projektowania i programowania widoków w twoim produkcie.

Jakie są najczęstsze pytania o design system?

Jak używać design systemu?

Design system ułatwia prace projektowe w produkcie cyfrowym, przyspiesza sam proces projektowania i pisania kodu, ale też usprawnia proces komunikacji w zespole, pozwalając uniknąć tzw. wiedzy plemiennej – wraz z design systemem twój zespół będzie zgrany i samodzielny. Zastosuj design system w momencie, kiedy planujesz nowe widoki, rozmawiasz z podwykonawcą lub wdrażasz nowego pracownika.

Czy design system ogranicza kreatywność?

Nie, pomimo tego, że design system zawiera wytyczne dotyczące użycia poszczególnych elementów, to nie pozbawia projektantów kreatywności, a wprowadza spójność w projektowaniu UI i UX.

Jak sprawić, że design system będzie zawsze aktualny?

Używać go zawsze i bez wyjątku. Z czasem przekonasz się, że chcesz coś dodać do design systemu. Nic dziwnego, design system jest jak żywy organizm. Najczęściej odczujesz taką potrzebę, kiedy będziesz zastanawiać się nad redesignem lub stworzeniem dodatkowego produktu cyfrowego np. aplikacji na telefon itd.