Zamów stronę

Narzędzia projektowe #2 – InVision

Wróć do wpisów
Kategoria: Strony www
Wrzesień 12, 2018

Bez odpowiedniej komunikacji realizacja projektu strony jest bardzo trudna i uciążliwa, o czym mówiliśmy już w pierwszej części serii artykułów omawiając Trello, generuje niepotrzebne dodatkowe koszty i zabiera sporo czasu zarówno klientom, jak i projektantom. Mamy na to sprawdzony sposób!

Proces tworzenia strony dedykowanej

Realizując projekt strony dedykowanej – której wygląd projektuje graphic designer, oddając w rezultacie niepowtarzalny, skrojony na miarę projekt – mamy przed sobą 3 główne etapy:

  1. projektowanie graficzne (makiet low-fi i high-fi oraz finalnego projektu),
  2. wdrożenie (kodowanie),
  3. wprowadzenie treści.

Pierwszy z nich jest szczególnie skomplikowany, ponieważ tworzymy koncepcję, która będzie nam towarzyszyć aż do końca realizacji i jej zmiana na późniejszych etapach prac zazwyczaj niesie za sobą wysokie, dodatkowe koszty.

Całość komunikacji zazwyczaj przeprowadzana jest w aplikacji do zarządzania projektami jak Trello lub Asana, jednak etap projektowania wymaga dodatkowych środków technicznych, by przejść przez niego bezproblemowo.

Jak przekazywać uwagi do projektu?

Wyobraź sobie, że otrzymujesz pliki projektu od grafika i musisz dodać swoje uwagi. Najłatwiej byłoby usiąść razem przy komputerze i po prostu wskazać, które elementy są do zmiany, porozmawiać o nich i w efekcie zobaczyć jak wskazane fragmenty projektu ulegają zmianie. Trudno jednak wyobrazić sobie sytuację, w której klient musi przyjeżdżać do agencji i omawiać każdą podstronę z osobna na wszystkich etapach. Opisanie oczekiwanych zmian przez telefon lub w mailu również wydaje się trudne.

Dlatego też powstało narzędzie InVision. Pozwala ono umieścić pliki projektu, a następnie oddaje do naszej dyspozycji wygodny interfejs, dzięki któremu dodamy komentarze na projekcie przez kliknięcie, wymienimy spostrzeżenia i będziemy śledzić nanoszone zmiany.

Jak działa InVision?

Wszystkie uwagi na żywo otrzymują pozostali członkowie zespołu. Dodawać uwagi może dowolna liczba osób. Na bieżąco widzimy więc, które zmiany zostały wprowadzone, a które wymagają szerszego omówienia. Możemy również oznaczyć widoki jako zaakceptowane, odrzucone czy wymagające poprawy. To jednak nie wszystko. Otrzymując statyczny projekt, pewnie chciałbyś móc „przeklikać stronę” i zobaczyć, jak połączone są kolejne jej elementy. Dzięki InVision jest to możliwe. Designer może powiązać ze sobą kolejne pliki graficzne w taki sposób, że możliwe będzie przeklikanie strony tak, jak będzie ona działać po zakodowaniu. Jest to doskonały sposób na wyłapanie błędów, np. w początkowych makietach, a także przy badaniu użyteczności projektowanego rozwiązania, np. z respondentami.

Zaprojektowano również coś dla project managerów oraz deweloperów. Dla tych pierwszych przygotowano wygodny flow chart, na którym widzimy statusy poszczególnych widoków. Natomiast dla koderów udostępniono analizator plików graficznych, znacznie ułatwiający kodowanie widoków (zawiera m.in. podgląd wymiarów elementów, użytych fontów, efektów, propozycje gotowych linijek CSS itp.).

Jako graphic designerzy nie wyobrażamy sobie pracy przy jakimkolwiek projekcie graficznym bez wsparcia narzędzia, jakim jest InVision.

Wojciech Popiela
Wojciech Popiela
Project Manager i developer z ośmioletnim stażem. Doświadczenie zdobywał przy realizacji dużych projektów aplikacji internetowych. W TenseApp! czuwa nad jakością wdrożeń i rozwojem usługi jako członek zarządu.
Komentarze