Na mojej liście etapów w procesie projektowania strony internetowej, projekt warstwy wizualnej znalazł się dopiero na miejscu piątym. O wcześniejszych etapach już pisałam i opowiadałam na kanale, więc jeśli chcecie prześledzić sobie kolejne kroki po kolei, to tu macie listę tych materiałów:
- Proces projektowania strony (film na kanale)
- Zbieranie wymagań (wpis,film na kanale)
- Zakres prac (film na kanale)
- Flow, architektura (film na kanale)
- Treści na stronach (wpis, film na kanale)
A jeśli jesteście gotowi na projektowanie UI, to zaczynamy.
Projektowanie interfejsu to w gruncie rzeczy praca z wizualną warstwą strony. I często, niestety, jedyny etap, którym interesują się projektanci. Bywa bowiem tak, że po krótkiej wymianie maili albo rozmowie z klientem, projektant siada do programu i po prostu robi projekt. I czasem trafi, a czasem nie, w gusta klienta. Rzadziej trafia w gusta użytkownika, bo nie znając go, ciężko po prostu to zrobić.
No dobra, ale jak wyglądają prace nad graficzną stroną projektu?
Mood board – zbieramy inspiracje
O tym narzędziu już pisałam na blogu i wielokrotnie opowiadałam w filmach. Przede wszystkim dlatego, że świetnie sprawdza się we wszelkiej maści projektach graficznych. Niezależnie od tego, czy pracujecie nad nowym katalogiem, kampanią reklamową, nowym logo czy właśnie stroną internetową, taki mood board to jedno miejsce, do którego wrzucić możecie wszystkie inspiracje.
Forma zbierania takich inspiracji jest dowolna – ja staram się mieć po prostu jeden plik, do którego dorzucam screeny. Czasami jest to photoshopowy artboard, czasami trzymam wszystko w RealtimeBoard (jeśli projekt jest większy), a czasami sprawdzi się do tego Pinterest.
Do takich mood boardów wrzucam fragmenty interfejsów, kompozycje na stronach, palety kolorów, zdjęcia, które oddają jakiś klimat czy konkurencyjne rozwiązania. Po prostu wszystko co uznam za dobrą inspirację do budowania projektu.
Look & Feel
Z reguły zaczynam prace od wstępnego zarysu stylu – możecie spotkać się z nazwą look & feel lub key visual, choć to drugie pojęcie częściej stosuje się w marketingu i brandingu.
Look and feel może być projektem jednej lub dwóch zakładek, który ma pokazać kierunek graficzny, w którym projektant chce stworzyć resztę interfejsu. To narzędzie, które pozwala wypracować wspólną dla nas i klienta wizję, a przede wszystkim, pozwala oszczędzić czas na poprawki. Mając X ekranów i poprawiając wszędzie fonty czy kolory stracilibyśmy dużo czasu. Kiedy te zmiany wprowadzimy na materiałach z look & feel, pójdzie nam to o wiele sprawniej. A gdy wypracujemy już zaakceptowaną przez obie strony wersję, możemy lecieć z kolejnymi ekranami.
Makiety i szkice
Pracuję na makietach, architekturze informacji lub dokumentacji – zależnie od skali projektu. Są projekty, które będą wymagać wnikliwej analizy struktury treści i budowy modelu architektury informacji, a są projekty, które są tak małe i proste, że ograniczają się do wstępnego rozrysowania ich na kartce papieru. Niezależnie od skali jednak, zawsze zaczynam prace od szkiców na papierze.
Komponując sobie projekt na kartce, mogę skupić się na funkcji poszczególnych elementów, zanim jeszcze do etapu tego jak to będzie wyglądać. Pracując przy większych projektach i współpracując z architektami informacji, czy makieciarzami (wink wink), ten etap będzie wykonany już przez inne osoby. Wtedy do zadań projektanta UI należy przede wszystkim ubranie tych elementów w atrakcyjną szatę graficzną.
Program do projektowania UI
Dawno, dawno temu, kiedy nie było zbyt wielu narzędzi do projektowania, projektanci cisnęli UI w tym, co właściwie było dostępne. A co było przez długie lata najpopularniejszym programem do projektowania graficznego? Oczywiście, że Photoshop. I o ile da się zaprojektować stronę w Photoshopie i wielu projektantów nadal z niego korzysta, tak nie jest to najlepsze, dostępne w tej chwili oprogramowanie na rynku. Co więcej, wybór jest naprawdę spory.
Wybierając program, upewnijmy się, że nie będzie problemu z eksportem projektu dalej. Czy możemy zapisać go w jakimś uniwersalnym pliku? Albo czy dostępne są popularne wtyczki do takich narzędzi jak Zeplin lub Avocode? Czy możemy pracować na plikach lokalnych, czy zawsze będziemy musieli mieć dostęp do internetu, żeby z takiego narzędzia skorzystać? Czy musimy szukać programu darmowego, na rocznej licencji, czy może jesteśmy gotowi płacić za niego co miesiąc?
Zerknijcie na takie narzędzia jak Figma, Sketch, Protopie Studio, Framer, Adobe XD. O części z tych programów zresztą pisałam już na blogu, np. o tu.
Rozpoczęcie prac
Prace projektowe zaczynamy od ustalenia rozdzielczości wyjściowych (jedni wybiorą maksymalne szerokości ekranu, jedni mobilki, a inni wartości pośrednie). Wiedzą od czego zaczynamy, trzeba jeszcze pomyśleć o gridzie – siatce, według, której będziemy komponować treści na stronie (tu wpis o gridach). Prace nad projektem interfejsu często zaczynam od ułożenia treści na ekranie – z reguły na początku jest spory bałagan, ale łatwiej komponuje mi się elementy, kiedy mam wszystko w jednym miejscu, a nie dokładam je po kolei. Tu flow tworzenia jest bardzo zależne od projektanta i każdy będzie pracował w tym miejscu inaczej. Z czasem wypracujecie sobie swoje ulubione metody.
Ustalenie kolorystyki, fontów, wielkości elementów, dobór zdjęć, ikon czy ilustracji – to właśnie ten moment, kiedy to wszystko się dzieje. No chyba, że pracujecie na konkretnym design systemie, wtedy właściwie dzieje się samo.
Eksport dla developerów
W związku z tym, że wielu projektantów przez długie lata korzystało w projektowaniu UI z Photoshopa, developerzy nie mieli łatwego życia. Przygotowywanie projektu do wdrożenia polegało na cięciu projektu na mniejsze kawałki i eksportowaniu poszczególnych części, więc developer musiał znać podstawową obsługę Photoshopa. No i w ogóle musiał go mieć.
Dziś narzędzi mamy całkiem sporo, które nie tylko nie wymagają od programistów posiadania i znajomości programów graficznych, ale całkiem sprawnie łączą pracę projektanta i developera.
Takie aplikacje jak Zeplin i Avocode, importują projekty graficzne (dzięki wtyczkom do programów graficznych). A z tych projektów, generują style obiektów. Wartości kolorów, marginesy, wielkości obiektów, fontów, grubości obrysów kształtów – to wszystko można po prostu odczytać.
Warto pamiętać
Często zapomina się o takich drobiazgach w projektach, jak wizualizacja różnych stanów, ścieżek i wariantów. Jeżeli projektujemy sklep internetowy, to powinniśmy zaprojektować widok produktu w sklepie, ale również sytuację, kiedy produktu nie ma na magazynie, kiedy można go domówić lub po prostu jest w promocji. To samo tyczy się komunikatów błędów, potwierdzeń, powiadomień czy najzwyklejszych walidacji formularzy.
Na koniec
O projektowaniu UI powstaje tu całkiem sporo materiałów, więc jeśli interesuje was ten temat, to zerknijcie po prostu na bloga lub kanał na YouTube. Jeśli pracujecie nad portfolio, to zerknijcie koniecznie na ten materiał, który podpowie wam jak przygotować projekty, do prezentacji na stronie. A jak jesteście już na etapie poszukiwania pracy, to ostatnio powstał materiał o częstych błędach początkujących projektantów UI.
