Współpraca grafika (UX designera) i programisty

Sprawdź, czy kilka pikseli różnicy wpływa na estetykę designu, oraz czy UX to detale, czy ogólny wygląd.

Ostatnio na grupie dla grafików trafiłem na post Pauliny, która napisała:

na jakich wymiarach pracujecie projektując strony? (wymiary desktop)? 1280px szerokości i 600px fold? Mniejsze, większe? Jakiś margines dla rozciągającego się tła? Ostatnio jak wypuściłam kilka stron do programistów, to okazało się, że wyszły strasznie bycze, fonty jakieś ogromne i ogólnie masakra ????

Pisze ona, że po opracowaniu grafiki przez nią została ona przekazana programistom. Programiści wykonali stronę na jej bazie. Jednak strona wygląda inaczej niż projekt. Fonty są za duże i w ogóle efekt jest inny niż na grafice. To przypomniało mi pewną historię, która przytrafiła mi się wiele wiele lat temu. Ale zanim przejdziemy dalej szybka zagadka. Która z tych grafik jest ładniejsza? Prawa czy lewa?:

Otóż zajmowałem się wtedy m.in. tworzeniem landing page’y. Było to dosyć przyjemne zajęcie. Pociąć grafikę i ją wdrożyć. Prościzna. Aż trafiłem na pewnego specyficznego klienta. Nazwę go Piotrem. Otóż, Piotr przesłał naprawdę ładną grafikę do newslettera. Na tej bazie zacząłem pracę.

Pociąłem grafikę, wrąbałem pola tekstowe, przycisk, trochę ostylowałem CSS-em i voila gotowe. Wysyłam do klienta. A on mi pisze, że to nie jest to co na grafice. Otwieram projekt i mój “twór”. No faktycznie. Kolory inne, trochę poprzesuwane. Ale o co chodzi? Przecież to drobne różnice!!!

Ok. To jeszcze raz. Edycja. Przesuwam elementy, poprawiam kolory itp. Gotowe. Wysyłam do klienta. A ten znowu, że się nie zgadza. Wkurzyłem się. To już wyczerpało czasówkę na to zlecenie… Ale ok. Klient naszpan. Biorę jeszcze raz projekt i HTML. Ustawiam obok siebie. No coś tam jakby nie pasowało. Ok. Wkurzyłem się i nałożyłem na siebie projekt i HTML. Faktycznie. Tu piksel w lewo, tu w prawo. Tutaj czcionka (tak, font) ciut za duża. Ale to już takie detale. No nic, upierdliwy klient.

Czytaj podobne  Aktualne promocje na kursy programistyczne (do 23 czerwca) od 19,90 do 39,90 zł

No to już dostawiam te wszystkie elementy kropka w kropkę. Wybarwiam wszystkie elementy identycznie jak na grafice. Wysyłam do klienta…. Było jeszcze kilka podejść. Ostatecznie klient zaakceptował gdy wszystko było kropka w kropkę.

Zapłacił, załatwione. A u mnie trafił na listę najbardziej upierdliwych klientów. Po jakimś czasie trafiłem na te projekty szukając jakichś plików. Popatrzyłem sobie na moją pierwszą wersję i na ostateczną… i wtedy sobie uświadomiłem dlaczego Piotr chciał, żeby było 1:1. Otóż ten mój projekt co prawda różnił się kilkoma detalami, jakieś piksele i rozmiary czy kolory. Ale wtedy zobaczyłem jak paskudny był ten projekt, który wykonałem na początku!

Sobie uświadomiłem, że tak naprawdę piękno i estetyka nie nie jest czymś rozmytym, efektem przypadkowych elementów. To bardzo starannie zaplanowany zabieg wykonany z chirurgiczną precyzją. Projekt Piotra, który otrzymał od super grafika był tego przykładem. Tam żaden piksel, kolor nie był przypadkowy. To dokładnie skończone dzieło, które tylko przeniesione 1:1 oddawało jego estetykę. A ja swoim niedbalstwem i niechlujnością po prostu to zepsułem.

Także Piotr spadł z listy upierdliwych klientów. To było dawno temu. A do dzisiaj jestem wdzięczny Piotrowi, że miał cierpliwość by zwracać do mnie ten projekt. Ponieważ w ten sposób nauczyłem się, na czym polega programistyczne wdrożenie projektu graficznego i UX. Czasem tak jest i wcale mi nie szkoda kasy, którą straciłem nie mogąc brać w tym czasie za inne zlecenia, bo to zlecenie dało mi dużo więcej niż mogłem się spodziewać.

To nie jest tak, że grafik sobie coś zrobi. Że UX designer coś sobie zrobi. A naszym zadaniem, jako programistów, jest “jako tako” wdrożenie makiet. Profesjonaliści poświęcają godziny na odpowiednie pozycjonowanie elementów, na dobór rozmiarów, czcionek, kolorów. Każdy element pasuje do innych i jest jak piramida z kart. Przesuniesz jeden piksel, a wszystko się rozleci jak właśnie taki domek z kart.

Czytaj podobne  Toster nerda miałby 25 przycisków

Myślę, że dzisiaj w ogóle jest większa świadomość estetyki projektów i może to już nie jest tak aktualne jak kiedyś. Może każdy programista to wie. Ale naprawdę, każdy piksel ma znaczenie. Jeśli szanujesz pracę grafika, UX designera (powinieneś/aś!) to przenoś projekt piksel w piksel.

Też przy okazji tej rozprawy chciałem zwrócić uwagę, jak grafik może pomóc w pracy programisty, który koduje design. Czasem, jak we wpisie Pauliny, efekt nie zawsze jest doskonały. I tutaj może być kilka powodów. Oczywiście może być niefrasobliwość. Ale też nie zawsze.

Rada, które mam dla grafików, jeśli pojawiają się problemy zobacz jak projekt wyświetla się na monitorze programisty. Wydaje się trywialne, ale są różne ekrany, czasem wypalone, przeskalowane błędnie, źle skalibrowane. Programista może po prostu widzieć co innego niż Ty. Może być też tak, że program, którego programista używa do oglądania grafik i makiet przekłamuje.

Natomiast dla programistów mam radę, by dążyli do 100% zgodności z projektami od grafików i designerów. Mam tutaj na myśli nie “wygląda tak samo”, ale pikselowej precyzji. Nawet jeśli użytkownik nie będzie widział tych pikselowych błędów, to i tak będzie je odczuwał, jako brak estetyki. I tutaj nie ma tłumaczenia, że nie było widać. można zrobić sobie zawsze zrzut ekranu i nałożyć projekt na to co wykonaliśmy. Wtedy widać każdą różnicę jak na tacy.

Ps. Grafika z lewej jest ładniejsza, bo została zaprojektowana przez designera. Prawa grafika powstała w ten sposób, że pozmieniałem nieznacznie kolory, nachylenia, fonty, rozmiary i pozycje elementów. Niby drobna różnica, jak jak wpływa na estetykę!

Czytaj podobne  Aktualna promocja: zestaw kurs + ebook programistyczny za 40 zł

A to kilka ebooków, które polecam osobom zainteresowanym UX i designem. Są w promocji -60% do niedzieli:

Badanie UX. Praktyczne techniki projektowania bezkonkurencyjnych produktów (UX Research: Practical Techniques for Designing Better Products), Brad Nunnally, David Farkas, 216 stron.
Nie każ mi myśleć! O życiowym podejściu do funkcjonalności stron internetowych. Wydanie III (Don’t Make Me Think, Revisited: A Common Sense Approach to Web Usability (3rd Edition)), Steve Krug, 216 stron.
Projektowanie witryn internetowych User eXperience. Smashing Magazine (Smashing UX Design: Foundations for Designing Online User Experiences), Jesmond Allen, James Chudley, 456 stron.
100 rzeczy, które każdy projektant powinien wiedzieć o potencjalnych klientach (100 Things Every Designer Needs to Know About People (Voices That Matter)), Susan Weinschenk, 244 stron.

Więcej informacji

Zapisz się na newsletter, aby nie przegapić kolejnych akcji: https://polishwords.com.pl/blog/newsletter-dla-programistow/

Przeczytaj też

Aktualności dla subskrybentów Przegląd aktualnych promocji dla programistów dla subskrybentów newslettera. Do końca dnia ebook Sieci komputerowe. Najczęstsze problemy ...
10 fiszek do nauki programowania w Pythonie Uczysz się programowania w Pythonie? Pobierz te 10 fiszek, które ułatwią Ci zapamiętanie funkcji wbudowanych* w Pythona! Programowanie potrafi ...
10 fiszek dla osób uczących się JavaScriptu We wpisie znajdziesz 10 fiszek dla programistów, którzy uczą się JavaScriptu.   Chcesz więcej? Zapisz się na newslet...
Jak nauczyć się programowania od zera? Wiele osób pyta, jak nauczyć się programowania od zera. Z tego wpisu dowiesz się, jak to zrobić. Programuję od 20 lat. Dzielę się doświadczeniami moim...
Najtrudniejsze zadanie dla programistów, które wyd... Co jest najtrudniejszym zadaniem programistycznym, które dla innych wydaje się proste? Przeczytaj i dowiedz się, dlaczego uważam, że to jest programow...
Napisano w Programowanie