Programowanie i WWW

5 rzeczy, które programista musi wiedzieć o designie

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…

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!

Lista linków z Newslettera:

Książka o UI dla programistów i nie tylko



Refactoring UI to niesamowity e-book zawierający bardzo konkretną wiedzę na temat dobrych praktyk projektowania interfejsów. To wiedza którą powinien mieć każdy front-end developer.

Jak podejmować lepsze decyzje?



Mental Models to narzędzia które często wykorzystuję we wszystkich obszarach mojego życia. Są to zasady usprawniające proces myślenia oraz podejmowania decyzji.

Notatka czy grafowa baza danych?



RoamResearch to Workflowy rozszerzone o funkcje łączenia ze sobą notatek. Świetnie sprawdza się do organizowania i powiązywania ze sobą różnych zagadnień.

Co gdyby Notion i Typeform mieli dziecko?



Tally.so to połączenie dwóch popularnych narzędzi: Notion oraz Typeform. Dodatkowa zaleta? W bardzo dużym stopniu Tally jest bezpłatne.

Dobre źródło ebooków o UI/UX



Rzadko zdarza się że materiały marketingowe firmy są aż tak dobre. W przypadku UXPin opracowane przez nich e-booki zawierają wiele bardzo praktycznej wiedzy i są dostępne za darmo.

UDOSTĘPNIJ ARTYKUŁ:

Powiązane artykuły

Programowanie i WWW

Jak mądrze wybrać stack technologiczny do projektu?

Rozpoczynasz nowy projekt i jesteś odpowiedzialny za jego dalszy rozwój. Przed Tobą decyzje dotyczące technologii, frameworków i narzędzi. Jak wybrać mądrze i czy to w ogóle możliwe?…

Programowanie i WWW

Proste rozwiązania

Proste rozwiązania stają się oczywiste w chwili gdy je zobaczymy. Dlaczego zwykle są poza naszym zasięgiem i co możemy z tym zrobić? Jak zobaczyć to, czego nie…

Programowanie i WWW

5 nieoczywistych narzędzi programisty w 2021 roku

Pozostań na bieżąco!

Już nigdy nie przegapisz ważnych informacji, promocji oraz nowych kursów. Zapisz się na newsletter już teraz!

Zapisując się do newslettera akceptujesz naszą politykę prywatności