5 narzędzi, które usprawniają pracę pomiędzy designerem a deweloperem

Łukasz Krzemiński on 18 października 2018

Współpraca designera z deweloperem polega na wymianie bardzo dużej liczby precyzyjnych informacji o wyglądzie interfejsu aplikacji mobilnej, webowej lub strony internetowej, np. wybór palety kolorów, wielkość odstępów pomiędzy poszczególnymi elementami, zastosowane cienie, wybór typografii itp. Dobra komunikacja wpływa na sprawną realizację całego przedsięwzięcia i na oddanie gotowego produktu w odpowiednim terminie i w oczekiwanej, wysokiej jakości. Istnieje wiele narzędzi – platform, których zadaniem jest ułatwienie tego procesu.

W tym artykule przedstawię pięć z nich, a mianowicie: InVision (z którego korzystamy w Appchance), Zeplin, Avocode, UXPin oraz Sympli, i mam nadzieję, że tym samym pomogę nieco w wyborze.

Kiedy kończy się design, a zaczyna dewelopment

Zaczynając proces projektowy UX/UI, designer zabiera się za wstępny research, zbiera wymagania, tworzy moodboard oraz persony. Następnie przygotowuje flow chart oraz pierwsze makiety, aż w końcu zaczyna pracę nad designem aplikacji mobilnej, webowej lub też strony internetowej. Po zaakceptowaniu projektu graficznego przez klienta rozpoczyna się etap wdrożenia i tworzenia gotowego produktu. Zanim to jednak nastąpi, deweloperzy muszą otrzymać odpowiednie pliki graficzne oraz dostęp do struktury gotowego designu (w celu sprawdzenia wszelkich parametrów projektu: marginesów, odstępów pomiędzy sekcjami, rodzaju i rozmiaru fontów itp.).

Designer niechętnie dzieli się otwartym plikiem graficznym z doszlifowanym projektem. Wynika to prawdopodobnie z obawy przed tym, że coś może zostać zmienione, “popsute”, źle wyeksportowane. Koniec końców może to spowodować więcej problemów niż korzyści. W jaki sposób zatem udostępnić pliki?

Research, czyli jakie narzędzie wybrać?

Aktualnie na rynku istnieje wiele narzędzi oferujących szereg funkcji, z których każdy ma swoje wady i zalety. Aby wybrać platformę do współpracy designera z deweloperem, która w najlepszy sposób zaspokoi potrzeby projektowe w firmie, należy dowiedzieć się, w czym dane narzędzie może nam pomóc, a czym może nas rozczarować.

Eksport projektu



W celu sprawdzenia poszczególnych programów pod kątem eksportu plików stworzyłem w Sketchu plik testowy składający się z 50 artboardów oraz z jednego, bardzo obszernego style guide’u. InVision, Zeplin, UXPin oraz Sympli umożliwiają bardzo sprawny eksport plików ze Sketcha. Wyjątkiem są pliki o sporych rozmiarach, kiedy np. artboard posiada dużą liczbę zagnieżdżonych elementów wtedy trzeba wykazać się większą cierpliwością. W przypadku Avocode przesłanie plików graficznych ze Sketcha do aplikacji zabiera sporo czasu i według mnie jest elementem zdecydowanie do poprawy.

Integracja ze Sketchem i Slackiem

Każda z testowanych aplikacji ma swój własny plugin do Sketcha, co jest wielkim plusem przy udostępnianiu projektu graficznego dzięki temu możemy to zrobić bezpośrednio jednym kliknięciem.

Wszystkie programy posiadają również synchronizację ze Slackiem, co pozwala na zintegrowanie naszego projektu z utworzonym kanałem projektowym. Dzięki temu osoby w danym kanale otrzymują notyfikację o update’cie designu lub o nowym komentarzu w projekcie.

Praca na wyeksportowanym projekcie graficznym

Sympli, InVision, Zeplin oraz Avocode po eksporcie plików graficznych dają deweloperowi swobodę przeglądania warstw w projekcie. Bardzo ważne jest, aby designer stosował odpowiednie nazewnictwo dla każdej z warstw i komponentów. Programy pozwalają też sprawdzać marginesy, fonty oraz wszystko inne, co w danym momencie go interesuje.

UXPin umożliwia nam odczyt wartości, ale wyłącznie w obrębie nadrzędnego komponentu  jeżeli w Sketchu stworzyliśmy komponent, to w UXPin nie mamy możliwości jego rozbicia i sprawdzenia pomniejszych atomów. Aby sprawdzić zagnieżdżone głębiej elementy, jak na przykład font czy obrazek komponent powinniśmy rozdzielić na poziomie Sketcha i dopiero wtedy wyeksportować do UXPin.

Udostępnianie assetów

Nieodłącznie we współpracy designera z deweloperem pojawia się temat udostępniania wszelkich elementów potrzebnych do realizacji projektu jak ikony, zdjęcia, itp. (tak zwane assety). Po zaakceptowaniu projektu graficznego aplikacji mobilnej, webowej lub strony internetowej przez klienta, pozostaje jeszcze eksport assetów do “programu pośredniczącego” w wymianie informacji. InVision, Sympli oraz Zeplin umożliwiają pobranie plików zaraz po eksporcie, co jest bardzo wygodne. Z kolei Avocode, pozwala na utworzenie komponentu z poziomu aplikacji, niezależnie od tego co zrobimy w Sketchu. Aplikacja sama analizuje co jest assetem i daje możliwość jego pobrania.

W UXPin po dodaniu stworzonego przez nas styleguide’a z assetami, program sam zmienia sobie ich nazwy, co jest uciążliwe i wprowadza chaos (np. asset o nazwie icon.png zmienia nazwę na 6B3F4A9C-A3C2-4DA4-96B1-D4FE498BA394.png).

Organizacja projektu

Designer, tworząc projekt, odpowiednio go organizuje, co ma na celu zachowanie właściwej hierarchii i struktury designu. Bardzo ważne z perspektywy współpracy designera z deweloperem jest prawidłowe i przejrzyste przedstawienie tej struktury, po to, aby programista wiedział, jak poruszać się po projekcie i bezproblemowo odnajdywał to, co w danym momencie jest mu najbardziej potrzebne.

W przypadku InVision oraz Zeplin w łatwy sposób można organizować wyeksportowane artboardy, a także przypisywać je do stworzonych przez nas grup (Zeplin daje dodatkową możliwość tagowania artboardów). Ponadto, eksportowane ekrany układają się w takiej kolejności, w jakiej są ułożone w Sketchu.

Po eksporcie do Sympli mamy możliwość organizacji artboard’ów manualnie, według daty, według nazwy oraz po pozycji, jaką miały w Sketchu. Grupowanie artboardów odbywa się poprzez tagowanie kolejnych ekranów.

Niestety w UXPin nie mamy możliwości łączenia poszczególnych artboardów w grupy, ani zmiany ich kolejności po wyeksportowaniu do aplikacji. Powoduje to, że ciężko jest nam zapanować nad projektem.

Aktualizacja projektu na poszczególnych platformach

Warto również wspomnieć o aktualizacji projektu po kolejnych iteracjach. Prym wiedzie InVision, w którym update projektu jest bezproblemowy. Poszczególne artboardy podczas pierwszego eksportu mają nadane “unikatowe ID”. Wspomniane ID jest niezmienne. Dzięki temu zmiana nazwy artboardu z poziomu Sketcha nie zaburza struktury wyeksportowanego projektu. InVision posiada ponadto opcję timeline’u z historią zmian, a każdy artboard jest wzbogacony o informację kiedy miała miejsce ostatnia aktualizacja.

W UXPin wszystkie artboardy także mają nadane swoje ID, dzięki czemu, tak jak w przypadku InVision, eksport projektu ze Sketcha powoduje update konkretnych artboardów.

Aplikacja Sympli również przypisuje artboardowi “unikatowe ID” oraz umożliwia bezkolizyjny update niezależnie od tego, czy w międzyczasie zmieniliśmy jego nazwę w Sketchu. Dostępny jest także timeline z historią zmian. Przy każdym artboardzie znajduje się informacja z numerem aktualnej wersji. Istnieje możliwość porównania kolejnych iteracjach na konkretnym ekranie dzięki opcji „Changes”, która zestawia obok siebie stary i nowy artboard.

W przypadku Zeplin aktualizowane ekrany muszą mieć takie same nazwy jak ich odpowiedniki, które aktualnie znajdują się w programie. Wtedy update przebiega prawidłowo. Jeśli jednak chcemy zaktualizować istniejący ekran, ale w Sketchu zmieniliśmy mu chociażby literę lub cyfrę, to artboard nie zaktualizuje się, a pojawi się jako nowy, dodatkowy ekran, co powoduje zaburzenie struktury wyeksportowanego projektu. Ciekawą opcją jest natomiast wersjonowanie, które daje możliwość samodzielnego opisania, co w danej iteracji się zmieniło. Sam program jedynie oznacza, że nastąpiła jakaś zmiana.

Avocode posiada bardzo rozbudowaną opcję wersjonowania projektu. Po każdej aktualizacji ekranów program tworzy kolejną wersję projektu artboardy, w których nastąpiła zmiana, są podmieniane i oznaczone kolejnym numerem. Pozostałe są zduplikowane i zachowują numer. Zawsze wiadomo, które artboardy są aktualne, co jest niewątpliwie plusem. Ponadto, w każdym momencie istnieje możliwość cofnięcia się do poprzednich wersji projektów. Wadą takiego rozwiązania jest to, że w toku rozwoju i postępu prac, może pojawić się bardzo dużo wersji projektu. Projekt będzie oznaczony numerem pięć, a niektóre z designów będą miały wcześniejsze numery przez to, że nie były aktualizowane. Eksport artboardów aktualizuje poszczególne ekrany nawet wtedy, jeśli zmienimy nazwę konkretnego designu.

Funkcja komentowania projektów

W każdym projekcie, przy współpracy specjalistów, bardzo ważna jest wymiana uwag, myśli oraz sugestii (więcej na temat efektywnego komunikowania się możecie przeczytać w naszym artykule: Sztuka słuchania, czyli podstawa dobrej komunikacji).

Ciekawym i wygodnym rozwiązaniem jest możliwość nanoszenia komentarzy bezpośrednio na konkretny artboard w obrębie danego projektu, co pozwala w łatwy sposób odnieść do konkretnego widoku. Każdy z testowanych programów umożliwia dodawanie komentarzy. Ponadto, dostajemy opcję oznaczania członków zespołu po to, aby wysłać na jego adres e-mail powiadomienie o zmianie, która nastąpiła lub sugestii/komentarzu, które się pojawiły. Dodatkowo każda taka notka może zostać oznaczona jako „Resolve”, dzięki czemu cały czas mamy wgląd w historię wszystkich komentarzy (a i nie ma konieczności ich usuwania).

 

O narzędziach do współpracy designera z deweloperem podsumowanie

Każdy z opisanych programów jest dobrze znany w świecie designerskim oraz deweloperskim. Każdy posiada swoje plusy oraz minusy trudno którekolwiek z narzędzi nazwać idealnym. Bardzo ważne jest, aby wybrana aplikacja była wygodna i pomocna przede wszystkim dla naszego zespołu – ma ułatwiać, a nie utrudniać pracę. Na szczęście każdy z wymienionych programów można swobodnie przetestować bez konieczności zakupu w ciemno. I tak InVision oraz Zeplin posiadają swoją darmową wersję, która ogranicza liczbę aktywnych projektów do jednego. UXPin posiada 7-dniowy trial, Avocode 14-dniowy trial, a Sympli pozwala na 30 dni darmowego testowania. Nie pozostaje nic innego, jak zachęcić do odkrywania i sprawdzania opisanych wyżej (lub do poznawania innych) programów, tak aby w efektywny sposób tworzyć aplikacje mobilne, czy inne produkty cyfrowe.

Tagi: , , , , , , , , ,

Przeczytaj również

Jedna myśl na temat “5 narzędzi, które usprawniają pracę pomiędzy designerem a deweloperem”

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *