Artykuły, Opinie i Wywiady
komentarze 4

Jak pracować z programistami?

Rozpoczynamy cykl krótkich artykułów, w których będziemy użalać się nad swoim marnym losem twórców projektów webowych (ale nie tylko). Będziemy opisywali w jaki sposób radzimy sobie z realizacją poszczególnych projektów oraz dzielili się rozwiązaniami wszelkich problemów jakie napotykaliśmy podczas projektowania i developmentu. Pokażemy kulisy powstawania projektów graficznych, od briefu, przez wstępne szkice, niewykorzystane/odrzucone wersje, aż po ostateczny feedback od klienta.

Na początek wypunktowaliśmy kilka krótkich porad dotyczących jednej z najważniejszych części naszej pracy – Jak nie zwariować w jednym pomieszczeniu z developerem.

Kim jest dev?

Projektując strony internetowe, aplikacje czy innego rodzaju „rzeczy” do sieci, każdy grafik skazany jest na łaskę developera – enigmatycznego człowieka, o którym krążą różne pogłoski. Ponoć niektórzy z nich nie widzieli światła dziennego od kilku lat, inni nie zmieniali flanelowej koszuli przez ostatni sezon, a nawet słyszano o takich, którzy żywią się za pomocą fotosyntezy światła z monitora, popijając krew grafików, którzy mieli jakieś uwagi.

Po części to tylko plotki. Programiści to ludzie z krwi i kości, obracający się w tym samym środowisku, lubiący podobne rzeczy – zwyczajnie są specjalistami w swojej dziedzinie, cenią sobie dokładność i skrupulatne planowanie każdego projektu, który zostaje im powierzony.

To co projektanci muszą zrozumieć już na samym początku współpracy to to, że proces „powstawania rzeczy” w grafice i programowaniu nie jest symetryczny – nie możemy oczekiwać, że zmiana w projekcie zajmie programiście tyle czasu ile my (graficy) potrzebujemy na wprowadzenie poprawki w layoucie (chociaż często tak bywa).

Na co należy zwracać uwagę i o czym pamiętać podczas współpracy z developerami? Oto lista wg. nas najważniejszych punktów, które ułatwią życie obu stronom.

1. Rozmawiaj z programistą tym samym językiem

Największym wyzwaniem jest wypracowanie wspólnego języka i nomenklatury, która pozwoli uniknąć niepotrzebnych nieporozumień. Usability, sass, less, compass, bootstrapowe gridy, RWD, break pointy, Wysiwig, generic header, hover, margin, padding, hex, etc. etc. Jeśli programista mówi do Ciebie coś czego nie rozumiesz, a Ty tylko kiwasz głową, to nie wróży dobrze. Nie zakładaj, że wszystko da się zaprogramować – owszem, da się – ale często jest to zwyczajnie nieopłacalne i zbyt czasochłonne. Lepiej dla obu stron będzie jeśli przed zaprojektowaniem kolejnego super designerskiego rozwiązania skonsultujesz jego wykonalność.

2. Diabeł tkwi w szczegółach

Przekazując gotowy projekt developerowi musisz uważać na to co mówisz, bo nawet zwykły slideshow może okazać się gwoździem do trumny dla Waszych dobrych relacji. Wyrażaj się maksymalnie precyzyjnie i weź pod uwagę wszystkie możliwości – czy ma się skalować, jeśli tak to w jaki sposób, jak ma wyglądać tytuł slajdu jeśli będzie dłuższy niż przewidziana na niego przestrzeń, jak ma cropować się zdjęcie wewnątrz boxu jeśli będzie za duże/nieproporcjonalne, etc.

Jest wystarczająco wiele czynników, żeby wizje grafika i programisty były zupełnie inne, dlatego w Waszym wspólnym interesie jest wypracowanie wspólnego alfabetu i sposobu weryfikacji projektu z tym co zostanie zaimplementowane.

3. Programista nie jest Twoim wrogiem!

Nie lubimy kiedy ktoś wtrąca się do naszych dzieł – wystarczy, że klienci narzucają nam swoje genialne pomysły, które musimy realizować z uśmiechem na twarzy i bólem w sercu. Kiedy pojawia się dodatkowy czynnik – stres – stajemy się niemili dla otoczenia. W końcu co taki programista może wiedzieć o dizajnie!

Z naszego doświadczenia stwierdzamy, że może. Nawet bardzo dużo. Korzystaj z wiedzy i porad developera. To nic, że nosi klapki Kubota. Przełknij dumę. Bardzo często rozmowa na temat projektu, spojrzenie z perspektywy programisty i rewizja proponowanych rozwiązań pozwoli zaoszczędzić naprawdę dużo czasu, łez i potu.

4. Śledź najnowsze trendy i buduj z „dobrych klocków”

Nic tak nie pomaga w stworzeniu nowoczesnego i modnego projektu, jak śledzenie nowinek na temat projektowania. Jednak sama wiedza na temat najnowszych trendów w designie to tylko połowa sukcesu. Pamiętaj, że programista każdą twoją zachciankę musi spełnić i wiedza na temat „Co mogę wykorzystać w projekcie aby zaoszczędzić czas” jest dla całego zespołu niesamowicie cenna. Zawsze warto zweryfikować swój pomysł z już istniejącymi rozwiązaniami. Z pomocą przychodzą strony takie jak unheap.com gdzie znajdziemy gotowe do zastosowania skrypty, które z powodzeniem można zaadoptować do Twojego projektu.

5. Informuj na bieżąco o zmianach w projekcie

Przypuśćmy, że stanie się nieszczęście i klient wpadnie na kolejny genialny pomysł, i nie chodzi tutaj tylko o powiększenie logo. Mówimy o sytuacjach kiedy projekt otrzyma nagłego zwrotu o 180 stopni. Pamiętaj drogi dizajnerze – zawsze (zawsze!) rozpocznij poprawki od rozmowy z programistą. Wprowadzenie zmian w projekcie i przekazanie go, bez większych wyjaśnień, potrafi być bardzo denerwujące i doprowadzi niejednego człowieka do pasji. Poświęć czas na dokładne opisanie zmian jakie muszą być wprowadzone, poproś o fachową opinię na ich temat i rozpocznij pracę z czystym sumieniem.

6. Trzymaj porządek w projektach

Każdy projektuje tak jak lubi. Tysiące warstw bez nazw, nie jest niczym obcym, jednak osoba, która musi później znaleźć ten jeden malutki element i wyciąć na stronę, może poświęcić na to dużo czasu. Należy pamiętać o segregacji i opisach – nic tak nie przyśpiesza pracy jak dokładna dokumentacja z krojami pisma, kolorami, założeniami RWD, itp.. Może również pomóc developerowi w znalezieniu lepszych rozwiązań, np. zamiast grafiki wstawić kod emulujący wygląd.

Jeżeli postanowisz samemu wycinać grafiki, ustal z developerem zasady nazewnictwa plików graficznych. Oto przykład z naszego podwórka:

– nazwy plików wyłącznie po angielsku

banner.png  |  header.png  |  logo.png

– człony nazw oddzielone myślnikiem

upper-menu.png

– stany buttonów i ikon oddzielanie podkreśleniem

login.png  |  login_hover.png  |  login_active.png

– kolejność słów w nazwie pliku – najpierw nazwa obiektu, później rodzaj np.

arrow-left.png  |  arrow-right.png

Ten sposób nazewnictwa pomoże również Tobie w szybkim wprowadzeniu poprawek bezpośrednio na pliki.

7. Dziel się wiedzą i trzymaj rękę na pulsie

Zazwyczaj projekt graficzny jest wynikiem wielkiej batalii, gdzie orężem są uwagi od klienta i argumenty projektanta. Kiedy ta nierówna walka się kończy, grafik staje przed kolejnym wyzwaniem jakim jest kontrola zgodności projektu i produktu (strony, aplikacji).

Nie ma opcji, żeby wśród dziesiątek podstron, nagłówków przenieść cały projekt pixel w pixel (z każdym kolejnym projektem jesteśmy blisko perfekcji, ale o tym w kolejnym wpisie). Skrupulatność grafika ma swoje granice, dlatego bardzo ważnym elementem współpracy jest stopniowe edukowanie programistów, o podstawach kompozycji, typografii, teorii barw i hierarchii wizualnej – oczywiście bez wgłębiania się w szczegóły, bo zostaniemy wyśmiani 🙂 To przychodzi z czasem, a efekty w postaci unikania zbędnych pytań pt. Dlaczego tu jest tak, a nie inaczej? są bezcenne.

8. Zaufaj developerowi

Zaufanie to podstawa w każdym związku. Nie osiągniesz nic pięknego będąc sceptycznym na czyjeś propozycje. Jeżeli programista poinformuje Cię, że dane rozwiązanie będzie idealne dla Twojego projektu – zaufaj mu. Oczywiście może się mylić, może nie widzieć większego obrazu, ale miej na uwadze, że jego intencje są dobre i rujnowanie twojej pracy nie jest w jego interesie. Rzecz jasna, zaufania nie można zbudować w jeden dzień, potrzeba na to czasu, jednak czasem należy posłuchać się specjalisty w innej dziedzinie i dopilnować, że projekt w końcowej fazie, zadowoli klienta, programistę i Ciebie.

programista

Podsumowanie

Powyższe porady powstały na podstawie naszych doświadczeń i problemów jakie napotkaliśmy podczas współpracy z zespołem programistów. Niestety specyfika projektów informatycznych, gdzie każdy case wymaga innego podejścia lub zastosowania nowej technologii powoduje, że model współpracy cały czas ulega zmianie. Poznaj styl pracy i „język” swojego developera. Dyskutuj jak najwięcej – o rozwiązaniach, nowych technologiach, trendach. Jak znajdziesz coś ładnego w sieci (ciekawe animacje w CSS, nietypowo skalującą się stronę) koniecznie podziel się tym ze swoim dev’em. Te wszystkie małe rzeczy wniosą Wasze wspólne realizacje na zupełnie nowy poziom.

  • MrStaniszewski

    Świetny artykuł! Sama prawda!

  • Kasia Świderska

    Dodam jeszcze jeden punkt: Grafiku, nie wymądrzaj się na tematy, o których coś słyszałeś i coś tam Ci się wydaje. Bo nic tak nie psuje współpracy jak na pytanie „Jak to ma się skalować?” grafik odpowiada „Użyjcie do tego LESSA, bo to takie fajne narzędzie do responsywności”…

  • Projektuję sporo, mam doświadczenie 2 letnie niby ale nigdy nie spotkałem się z takimi problemami …

  • Świetny tekst i sama prawda! Tak lekko napisać o programowaniu to naprawdę sztuka. Do wszystkich punktów można dać na końcu: i bądź super precyzyjny. 🙂