Photoshop przez lata był dla mnie narzędziem, w którym powstawały interfejsy stron internetowych i aplikacji mobilnych. I wciąż dla wielu osób i firm jest takim narzędziem. Jeśli zdecydujecie się na projektowanie UI (a dokładniej interfejsu graficznego) w Photoshopie (albo ktoś będzie tego od Was wymagał), pamiętajcie o kilku zasadach. Dzisiaj pokażę Wam w jaki sposób przygotowywałam pliki i jak wyglądał mój workflow w tym programie.
Oczywiście, żeby uprzedzić biadolenie malkontentów. Tak, są lepsze programy do projektowania UI, ale nie o tym jest ten wpis.
Projektowanie UI w Photoshopie
No to lecimy – 10 rad, które warto zastosować, jeśli decydujecie się na stworzenie projektu interfejsu w programie Photoshop.
1. Nazywanie i grupowanie warstw
Pracujecie nad stopką albo widokiem komentarzy – zgrupujcie tematycznie związane ze sobą elementy, dzięki czemu będzie nie tylko Wam łatwiej poruszać się w pliku, ale każdej osobie, która go po Was przechwyci (na przykład inny projektant). Najczęściej wykorzystywaną strukturą grup przeze mnie była: Header, Content, Sidebar, Footer (nagłówek, treść, panel boczny, stopka).
2. Jak najwięcej kształtów
Starajcie się unikać wykorzystywania płaskich warstw – zostawcie je jedynie na zdjęcia lub ilustracje (jeżeli nie możecie dostarczyć ich w formacie wektorowym). Kształty są skalowalne i łatwiejsze w edycji. A poza tym, w razie potrzeby, możecie wyeksportować je jako .svg. Proste, spłaszczone warstwy również mogą być eksportowane, przy kształtach macie jednak mniejsze ryzyko, że coś się sypnie.
3. Jeden plik – kilka widoków
Rozdzielanie każdej podstrony na osobne pliki .psd nie jest zbyt wydajnym rozwiązaniem. Co więcej, utrudnia projektowanie i aktualizowanie widoków – warto trzymać wszystkie podstrony w jednym pliku (odpowiednio zgrupowane), bądź rozłożyć je na artboardach. Ostrożnie jednak z artboardami – te lubią czasami wysypać się, gdy otwierane są na innym systemie (z reguły jednak wystarczy jeszcze raz odpalić plik lub restartować program).
Problem pojawić może się przy bardzo, bardzo rozbudowanych projektach – to zresztą najczęstszy głos przeciwko stosowania Photoshopa do UI (po prostu nie jest zbyt zoptymalizowany pod tym kątem). Warto zatem na bieżąco porządkować plik i pozbywać się nieużywanych, starych wersji projektu z głównego pliku.
4. Co z projektami RWD?
Photoshop niestety nie ma specjalnych narzędzi dedykowanych do takich projektów, dlatego najczęstszym rozwiązaniem jest dzielenie plików względem rozdzielczości – jeden plik .psd zawiera projekty wszystkich podstron dla szerokości np. 1280. To wygodne rozwiązanie dla stron, które mają sporo widoków i uciążliwe byłoby trzymanie ich wszystkich w grupach lub artboardach jednego pliku.
5. Zostawcie grid na wierzchu
Najlepiej w formie warstwy na samej górze, która jasno pokaże rozłożenie kolumn. Możecie również zostawić grid w formie linii pomocniczych, ale upewnijcie się wtedy, że wszystkie pozostałe, które wykorzystywaliście przy projekcie zostaną wyczyszczone. Osoba, która przejmie po Was plik nie będzie musiała zastanawiać się, przeliczać i rozkładać na nowo swojego grida by, na przykład, dorobić kolejne widoki.
6. Stany przycisków, formularzy i linków
Interfejs jest bytem dynamicznym, zachowuje się różnie w zależności od wykonywanych przez użytkownika akcji – klikaniu, najechaniu kursorem, zaznaczeniu, odznaczeniu i tak dalej. Projektant interfejsu wszystkie te stany musi zaprojektować i dobrze byłoby mieć na to jedno miejsce w pliku. Na koniec pracy warto wyciągnąć sobie najważniejsze elementy i wrzucić na jednej stronie podpisując stany – stworzy się dzięki temu taki mały style guide i z pewnością oszczędzi „30 pytań do”, kiedy front-end siądzie do kodowania Waszego projektu.
7. Fonty
Przede wszystkim upewniamy się, że mamy do dyspozycji web-font kroju, którego chcemy użyć. Pilnujemy by wielkości były zaokrąglone – nie tworzymy wartości typu „rozmiar nagłówka: 34.3”. W odróżnieniu od przygotowania do druku, fontów w pliku pod web nie krzywimy. Uniemożliwi to szybkie kopiowanie treści, utrudni edycję, a także pozwoli na pobranie informacji o własnościach kroju.
8. Łączenie warstw
Tych, które nie wymagają ingerencji innych osób – jeżeli tworzycie fotomanipulacje lub złożoną ilustrację, która składaja się z wielu płaskich warstw, to po prostu je złączcie. Upewnijcie się też, że są odpowiednio duże – to ważne, zwłaszcza przy responsywnych banerach, tłach i elementach, które będą po prostu powiększać się wraz z szerszym ekranem. To samo tyczy się kształtów – jeśli decydujecie się na stworzenie ikonki w Photoshopie, kształty ze sobą połączcie.
9. Inteligentne obiekty, biblioteki
Skoro Photoshop daje nam możliwość wielokrotnego wykorzystania jednego elementu, z możliwością szybkiej edycji to wykorzystujmy te możliwość, zwłaszcza w powtarzalnych obiektach, takich jak np. stopki czy nawigacja główna. To znacznie przyspieszy pracę.
10. Notatki, kontakt, instrukcje
Nie bójcie się dodawać notatek dla innych projektantów i front-endów jeśli uważacie to za zasadne. Jeżeli nie pracujecie w ramach swojego zespołu, warto zostawić też namiar na maila. Dzięki temu, np. kodująca osoba będzie mogła szybko się do Was zwrócić z pytaniami. To po prostu ułatwienie komunikacji. Warto dodawać również notatki, kiedy chcecie wyjaśnić działanie jakiegoś komponentu, a nie jest takie jasne na pierwszy rzut oka.
