Programowanie w pewnym punkcie łączy się z designem i od jakości tego połączenia w dużym stopniu zależy końcowy efekt. Nawet jeżeli designerzy i programiści zrobią "swoją robotę" a w tym punkcie coś zawiedzie, praca jednych i drugich idzie na marne. O czym więc należy pamiętać?
Zawsze gdy wchodzę w interakcję z innym obszarem, staram się dobrze zrozumieć szerszy kontekst i popatrzeć na sytuację, w której się znajduję
z wielu różnych perspektyw - detali oraz ogółu. Pomaga w tym m.in.: odwracanie założeń (tzw. inwersja), otwartość (tzw. radical open-mindedness) oraz wspomniana perspektywa (tutaj pomaga dystans do sytuacji oraz siebie samego).
Dlaczego to jest ważne? Ponieważ umiejętne spojrzenie na temat
z perspektywy ogółu oraz detali, pozwala podejmować lepsze decyzje
i dochodzić do znacznie lepszych i często prostszych rozwiązań.
Odłóżmy jednak psychologiczne narzędzia na bok i skupmy się na konkretnych rzeczach na temat designu, o których dobrze abyś wiedział jako programista. Jeżeli chcesz dowiedzieć się więcej na temat wspomnianych wyżej narzędzi, polecam Ci: stronę z konceptami Jima Collinsa, książkę Principles ~Ray Dalio oraz listę Mental Models.
To lecimy 🚀
#1 Spójność
To jedna z ważniejszych zasad designu. Być może oczywista ale tutaj chodzi o zachowanie spójności nawet pozornie nieistotnych detali, które łatwo pominąć. Dobrym przykładem są marginesy czy palety kolorów. Nawet najmniejsze różnice długości czy odcieni mogą być nawet niezauważone gołym okiem, ale z pewnością znasz uczucie gdy patrzysz na jakiś interfejs
i po prostu "czujesz", że coś tutaj jest nie tak.
Narzędziami które Ci w tym pomogą jest chociażby Tailwind CSS, który jasno narzuca utility-classes, które określają konkretne wartości dla marginesów czy kolorów.
Jako programista po prostu zwracaj uwagę na pewne reguły, które uwzględnił designer. Np. konkretne komponenty - tytuły, przyciski, akapity - będą posiadać te same parametry. Oczywiście zakładając tylko, że designer "zrobił swoją robotę" dobrze.
#2 Typografia
Jeżeli jest jeden element designu, który ma największy wpływ na odbiór całości, to z pewnością będzie to typografia. To jak wyglądają fonty, jaki mają rozmiar, interlinię (odstępy pomiędzy wierszami) czy kontrast, ma ogromny wpływ na doświadczenia użytkownika.
Ile razy zdarzyło Ci się wyjść z bloga, bo szerokość akapitu była za duża lub wykorzystany font po prostu "raził" w oczy?
Dodatkowo typografia odgrywa ogromną rolę w utrzymaniu uwagi użytkownika i zwracaniu jej na określone elementy, co z kolei ma wpływ na poziom konwersji, która leży w interesie marketingowców (a tak na prawdę leży w interesie nas wszystkich, łącznie z klientami).
Zatem w pracy z typografią uwzględnij wspomnianą wyżej spójność oraz zadbaj o to aby rozmiary fontu, szerokości wiersza czy odstępy między liniami, były ustawione tak jak na projekcie. Efekt końcowy z pewnością będzie tutaj zauważony.
#3 Interakcje
Bardzo często zdarza się, że w projekcie interfejsu nie zostają uwzględnione style interakcji, np.: animacje czy informacje zwrotne (chociażby walidacja formularza). Czasem jest też tak, że zostają one uwzględnione ale finalnie nie są implementowane ze względu na brak czasu.
Ostatecznie jednak kluczowe jest to abyś jako programista zadbał przynajmniej o niezbędne minimum. Np. "spinner" informujący
o wysyłaniu formularza czy bardziej konkretne informacje o wystąpionych błędach są rzeczami, na które warto poświęcić czas.
Tutaj warto kierować się pytaniami z perspektywy użytkownika: czy wiem co się właśnie dzieje/stało? oraz jakie emocje wywołało u mnie wykonanie tej akcji?
To czego chcemy tutaj uniknąć to zdezorientowanie oraz frustracja.
Warto też podkreślić, że z projektowanie interakcji to nie do końca zadanie programisty i warto zwracać się z tym do designerów, którzy zwykle mają szerszą wizję interfejsu.
#4 Kontrast
Kontrast często kojarzony jest wyłącznie z kolorem, co nie stanowi pełnego obrazu. Określa się nim po prostu poziom różnicy pomiędzy zestawionymi ze sobą elementami. Zatem o kontraście może stanowić np. grubość fontu lub jego wielkość.
Dlaczego to jest ważne? Ponieważ odgrywa rolę w skupieniu uwagi użytkownika, co z kolei przekłada na szereg różnych rzeczy - od łatwiejszej nawigacji po wyższe konwersje. Inaczej mówiąc kontrast pozwala kształtować pewną ścieżkę akcji a wyróżniające się elementy to drogowskazy kierujące użytkownika do realizacji konkretnego zadania.
W pracy z kontrastem pamiętaj o tej perspektywie "prowadzenia" użytkownika. Z tego powodu jeżeli np. aktywacja jakiegoś pola sprawia, że inne zostają "przyciemnione", to pamiętaj że nie dzieje się to bez przyczyny.
Generalnie rozumienie tego "dlaczego" coś jest takie a nie inne, da Ci też więcej energii do tego aby poświęcić więcej czasu na dopracowanie detali. Inaczej pracuje się nad rzeczą o której masz przekonanie że "nie ma sensu" a inaczej nad tą, której rozumiesz cel.
#5 Wzorce
Podobnie jak w programowaniu, w designie występują różnego rodzaju wzorce projektowe czy nawet "języki projektowania" czy "design systems", które ściśle określają to w jaki sposób mają wyglądać konkretne elementy oraz w którym miejscu mają się znaleźć.
Jest to istotne z punktu widzenia nie tylko estetyki ale też użyteczności. Np. przycisk znajdujący się po prawej stronie wysyła formularz albo "odkliknięcie" modala zamyka go bez konieczności wciskania krzyżyka (co trudno uwzględnić na projekcie graficznym!)
W każdym razie na temat wzorców możesz dowiedzieć się więcej np. na uxchecklist lub po prostu przeglądając dokumentację Material Design.
Podsumowanie
Wymienione przeze mnie obszary z pewnością nie wyczerpują tego tematu. Natomiast myślę, że udało się przekazać odpowiednio szeroki kontekst.
Na koniec dnia chciałbym abyś zrozumiał że:
- jakość połączenia designu i programowania jest krytycznie ważna
w efekcie końcowym - design kieruje się zasadami, które funkcjonują nie bez przyczyny
- podczas wdrażania projektu graficznego współpracuj z designerem
- pamiętaj o tym, że detale odgrywają tutaj znaczenie - podobnie jak
w programowaniu.
Mam nadzieję, że powyższy wpis nauczył Cię czegoś nowego i/lub pokazał nową perspektywę, która pomoże Ci w pracy. Dziękuję za poświęcony czas!
