Jak podejść do projektowania dla programistów

Mimo że mogą pracować nad tymi samymi projektami i produktami, programiści i projektanci często pracują oddzielnie w silosach. Design jest często traktowany przez programistów jako rzecz drugorzędna, nieistotna w porównaniu z funkcjonalnością produktu.

Takie myślenie może być szkodliwe dla relacji programista-projektant. Brak podstawowej wiedzy na temat projektowania może powstrzymać programistów w ich karierze lub uniemożliwić im realizację projektów tylko dlatego, że nie mają projektanta na pokładzie.

Dlaczego programiści powinni uczyć się projektowania

Chociaż projektowanie i rozwój są często uważane za odrębne dyscypliny, istnieją ludzie, którzy opanowali obie te dziedziny. Nawet jeśli kogoś interesuje tylko bycie projektantem lub programistą – a nie obydwoma – warto poznać przynajmniej podstawy drugiej dyscypliny.

Istnieje kilka powodów, dla których programiści mogą chcieć uczyć się projektowania lub przynajmniej rozwijać podstawową wiedzę projektową.

Przede wszystkim małe zespoły mogą nie mieć dedykowanego projektanta. Co więcej, istnieją deweloperzy, którzy chcą zająć się projektami całkowicie na własną rękę, których nie stać na zatrudnienie projektanta (lub chcą wydać pieniądze gdzie indziej). Nauka projektowania własnych produktów, przynajmniej na tyle dobrze, aby przetrwać, dopóki nie zostanie zatrudniony projektant, jest nieocenionym zasobem.

Innym ważnym powodem, dla którego programiści uczą się projektowania, jest możliwość bardziej efektywnej współpracy z projektantami. Niesamowicie frustrujące dla projektanta jest przekazanie w pełni zaprojektowanego pliku strony internetowej lub aplikacji, co do której oczekuje się, że będzie perfekcyjnie dopracowany w gotowym produkcie, tylko po to, by stwierdzić, że ich projekt został znacząco zmieniony przez programistę go kodującego.

Jeśli programiści nie rozumieją podstaw projektowania, mogą przeoczyć drobne szczegóły, które sprawiają, że interfejs użytkownika jest szczególnie przyjazny dla użytkownika i niechcący sabotują wrażenia użytkownika projektu. Kiedy projektanci odsyłają mnóstwo poprawek, może to nadwerężyć relację programista-projektant, nie wspominając o spowolnieniu ukończenia projektu.

Aby poprawić relacje i pracę zespołową między interdyscyplinarnymi zespołami, programiści zrobiliby sobie przysługę, ucząc się patrzeć na projekty „oczami projektanta”, zamiast patrzeć na nie wyłącznie z perspektywy programistycznej — opanowanie tej umiejętności znacznie poprawi ich projekty.

Tworzenie sposobu myślenia projektowego

Zbyt często programiści uczący się projektowania zbytnio skupiają się na estetyce projektów, które lubią i chcą naśladować, a nie na podstawowych zasadach, które wspierają te projekty. Widzą takie rzeczy, jak kolor i rozmiar przycisku, konkretna czcionka lub sposób użycia obramowań, bez zrozumienia przyczyn tych wyborów.

Zaczynają natryskiwać farbę na ściany i dekorować przestrzeń, nie rozumiejąc celu przestrzeni, którą dekorują (lub nawet upewniając się, że takie rzeczy, jak prace hydrauliczne i elektryczne, są skończone), że tak powiem.

Ważne jest, aby zrozumieć i szanować zasady, na podstawie których projektanci podejmują decyzje, które podejmują. Każdy, kto dopiero zaczyna projektować, potrzebuje solidnego zrozumienia zasad i teorii, które składają się na dobry projekt — takich jak zasady Gestalt i podstawowa hierarchia wizualna — zanim po prostu zanurkują i zaczną wszędzie rozpylać farbę.

To powiedziawszy, często zdarza się, że nowi projektanci, bez względu na to, czy mają doświadczenie w rozwoju, czy nie, teoretycznie grzęzną w miejscu. Spędzają tyle czasu na uczeniu się i myśleniu o rzeczach, że nigdy nie stosują tego, czego się uczą.

Zarówno projektanci, jak i programiści mają tendencję do bycia perfekcjonistami. Ale wypychanie projektów, zanim będą doskonałe (ponieważ prawdopodobnie nigdy nie będą) jest ważne dla tego procesu. Szczególnie nowi projektanci muszą przezwyciężyć swoją niepewność, umieścić tam swoją pracę i uczyć się na otrzymanych informacjach zwrotnych.

Jednym z najlepszych sposobów, aby naprawdę nauczyć się projektowania, jest próba odtworzenia projektów innych. Rozróżnianie tego, co działa, a co nie, oraz zastanawianie się, dlaczego dany projekt jest atrakcyjny, to jedna z najcenniejszych umiejętności, jakich może nauczyć się nowy projektant lub programista. Nadanie unikalnego charakteru istniejącym projektom jest powszechne w branży (o czym świadczy funkcja „odbicia” Dribbble).

Projektowanie w przeglądarce

Wielu projektantów sprzeciwia się projektowaniu bezpośrednio w przeglądarce, ponieważ zazwyczaj oznacza to, że muszą swobodnie pisać przynajmniej podstawowy kod HTML i CSS. To jest dokładny powód, dla którego często jest to świetne rozwiązanie dla programistów zajmujących się projektowaniem — już teraz czują się komfortowo pisząc kod.

Istnieją narzędzia, które mogą pomóc w projektowaniu w przeglądarce i mogą ułatwić życie zarówno projektantom, jak i programistom. Proste wtyczki przeglądarki są dostępne do wszystkiego, od wybierania palet kolorów po eksplorację kodu CSS i HTML innej witryny.

Istnieją również bardziej złożone narzędzia, takie jak Figma, które działają jak w pełni funkcjonalne narzędzie do projektowania bezpośrednio w przeglądarce. Figma umożliwia projektantom współpracę, wysyłanie zasobów do interesariuszy (a nawet wprowadzanie zmian w treści i kopiach projektów) oraz umożliwia programistom dostęp do rzeczywistych projektów w czasie rzeczywistym. To świetna opcja dla projektantów-deweloperów, którzy chcą tworzyć projekty i systemy projektowania, które można skalować w czasie.

Webflow to kolejna opcja projektowania w przeglądarce, którą programiści mogą pokochać. Chociaż interfejs projektowania jest wizualny, eksportowany kod jest czystym, semantycznym kodem CSS i HTML, który docenią programiści (nie wszystkie narzędzia do projektowania wizualnego eksportują czysty kod). Webflow zawiera narzędzia do projektowania i układu, a także wbudowane narzędzia CMS i eCommerce, a także opcje hostingu.

Użycie koloru, typografii i układu

Zanim zagłębimy się w wizualne zasady dotyczące koloru, typografii i układu, ważne jest, aby porozmawiać o podstawowej użyteczności. Najbardziej estetyczny projekt na świecie jest bezużyteczny, jeśli nie nadaje się do użytku.

Jedną z najważniejszych zasad użyteczności jest idea spójności lub przewidywalności. Projekty powinny być na tyle przewidywalne, aby użytkownicy byli w stanie intuicyjnie zrozumieć, jak z nich korzystać. Na przykład niebieski, podkreślony tekst linków, które można kliknąć, menu nawigacyjne, które są kompletne i dobrze oznakowane itp. Odstępy między elementami, typografia i schemat kolorów również powinny być spójne.

Inne zasady użyteczności, które należy wziąć pod uwagę w każdym projekcie projektowym, obejmują takie rzeczy, jak zapobieganie błędom (i informacyjne komunikaty o błędach, gdy wystąpią błędy), znajomy język (używaj języka, do którego ludzie są przyzwyczajeni, zamiast „uroczych” lub kreatywnych alternatyw, które mogą być niejasne ), elastyczność i wydajność oraz łatwo dostępną pomoc. Nielsen Norman Group ma dodatkowe heurystyki użyteczności, o których również należy pamiętać.

Oceny użyteczności należy przeprowadzać w całym procesie projektowania i rozwoju, aby upewnić się, że produkt działa zgodnie z zamierzeniami zespołu projektowo-rozwojowego i że użytkownicy nie są zdezorientowani. Oceny heurystyczne obejmują porównanie listy wstępnie zdefiniowanych zasad projektowania, które produkt powinien przestrzegać, z rzeczywistym produktem, aby zobaczyć, gdzie występują odchylenia (a następnie naprawić te odchylenia).

Po dokładnym zrozumieniu użyteczności w odniesieniu do produktu, projektanci mogą przejść do bardziej wizualnych aspektów projektu.

Podstawowa teoria kolorów

Teoria koloru to jeden z najbardziej złożonych aspektów projektowania wizualnego. Niewielka zmiana odcieni może całkowicie zmienić wizualny i emocjonalny efekt koloru. To jeden z powodów, dla których wielu projektantów, którzy są w branży od lat, wciąż zmaga się z kolorem.

Chociaż na temat teorii kolorów napisano wiele książek, istnieje kilka bardzo podstawowych zasad, których projektanci-programiści mogą się nauczyć, aby zacząć. Połącz je z dowolnym z wielu dostępnych narzędzi do projektowania kolorów, a przyjemną paletę kolorów można stworzyć dość łatwo.

Po pierwsze, różnica między ciepłymi kolorami, chłodnymi kolorami i neutralnymi. Ciepłe kolory to czerwony, pomarańczowy i żółty. Ciepłe kolory będą generalnie żywe i energetyzujące. Fajne kolory to zielony, niebieski i fioletowy. Te kolory są zwykle spokojniejsze i relaksujące.

Neutralne to biały, czarny, szary, brązowy i beżowy. Dodanie bieli, czerni lub szarości do ciepłych lub chłodnych kolorów zmienia ich znaczenie i oddziaływanie. Biel rozjaśni kolory i ogólnie sprawi, że ich efekt będzie mniej intensywny lub bardziej pozytywny (na przykład fioletowy jest uważany za tajemniczy, królewski kolor, podczas gdy liliowy często kojarzy się z wiosną i szczęściem). Szary wycisza kolory i może zmniejszyć ich wpływ. Czarny przyciemnia kolory i może sprawić, że będą wyglądać bardziej konserwatywnie (należy wziąć pod uwagę inny wpływ koloru, takiego jak jasny niebieski i granatowy).

Gdy projektant ma podstawową wiedzę na temat znaczenia kolorów, może użyć narzędzi takich jak Coolors, Design Seeds lub Colormind, aby opracować ostateczną, skoordynowaną paletę dla swojego projektu.

Korzystanie z koloru HSL

Kiedy projektant myśli o kolorach internetowych, często myśli w kategoriach wartości szesnastkowych. Chociaż stało się to standardem branżowym w zakresie kolorów internetowych, programiści mogą uznać, że praca z wartościami kolorów HSL ma większy sens.

Dla większości ludzi (w tym projektantów) wartości szesnastkowe pozornie nie mają ze sobą korelacji. Dwa kolory, które wyglądają bardzo podobnie, mogą mieć zupełnie różne wartości szesnastkowe. Na przykład #68B4D4 i #92C8E0 są dość podobnymi odcieniami niebieskiego (jeden jest po prostu trochę jaśniejszy i jaśniejszy od drugiego), a jednak ich wartości szesnastkowe nie mają wyraźnej korelacji.

Jednak ich wartości HSL pokazują, jak blisko są ze sobą powiązane: #68B4D4 staje się HSL (198, 58%, 62%), a #92C8E0 staje się HSL (198, 56%, 73%). Pierwsza liczba w sekwencji (w tym przypadku 198) wskazuje na konkretny odcień. Druga liczba to procent nasycenia (jak jasny lub żywy jest kolor). Trzecia liczba to procent jasności (lub dodanej bieli) koloru.

Ponieważ korelacje między wartościami kolorów są tak łatwo widoczne w przypadku HSL i szesnastkowego, programiści często uważają, że manipulowanie kolorami za pomocą kodu z HSL jest znacznie łatwiejsze.

Zasady typografii

Typografia to kolejny obszar, który może potykać się nawet o doświadczonych projektantów. Ale podobnie jak teoria kolorów, istnieje kilka świetnych narzędzi, które mogą pomóc.

Hierarchia typograficzna jest jedną z pierwszych rzeczy, których projektant-programista powinien się nauczyć. Relacja między różnymi elementami typu w projekcie ma kluczowe znaczenie dla zwiększenia użyteczności tego projektu.

Projekt powinien mieć przynajmniej trzy poziomy hierarchii typograficznej: tytuły, podtytuły i czcionki treści. Tytuł powinien być najbardziej widoczny wizualnie, następne powinny być napisy, a następnie czcionka treści, która powinna być bardzo czytelna.

Wielu nowych projektantów zbytnio skupia się na rozmiarze czcionki podczas tworzenia swojej hierarchii, a za mało na stylu czcionki . Czasami zamiast zwiększania tytułu znacznie większego niż podtytuł, na przykład tytuł może być pogrubiony lub pisany wielką literą, podczas gdy podtytuł jest pozostawiony w pisowni i normalnej wadze. Kolor może być również użyty do rozróżnienia między napisami a tytułami oraz między tymi elementami a tekstem głównym.

Łączenie różnych czcionek może również zmylić wielu projektantów, a mimo to jest to powszechny sposób tworzenia wizualnej hierarchii. Obejmują one wybór czcionek uzupełniających (przeciwieństwa często przyciągają, ale do pewnego stopnia należy określić, jak dobrze łączą się czcionki, na podstawie przeczucia, które jest doskonalone z biegiem czasu), wybór odpowiednich czcionek (nie używaj Comic Sans w dokumencie prawnym, na przykład na przykład lub wyświetlaną czcionkę dla typu ciała, która nie będzie czytelna w mniejszych rozmiarach) i tworzenie kontrastu między krojami pisma (nie używaj dwóch, które są bardzo podobne).

Innym prostym sposobem łączenia czcionek jest wybieranie czcionek z dużych rodzin czcionek. Istnieją nawet rodziny, które zawierają wersje wyświetlania, szeryfowe i bezszeryfowe, które dobrze ze sobą współpracują (takie jak Pani Okap i Pani Okap, Fedra lub Museo i Museo Sans). To może być najłatwiejszy sposób na rozpoczęcie eksperymentowania z łączeniem czcionek, ponieważ są one zaprojektowane tak, aby dobrze razem wyglądały.

Podczas pracy z większymi hierarchiami typograficznymi (takimi jak dodawanie w H1, H2, H3, H4 itp.) ważne jest, aby kierować się pewnym powodem w skali typograficznej. Na początek jedną z możliwych skal jest ciąg Fibonacciego, chociaż istnieją inne ustalone skale typograficzne.

Jedna wspólna skala, która jest używana zarówno w typografii (i ogólnie w układach projektowych) składa się z 4, 8, 16, 24, 36, 48, 72, 108 itd. Liczby te można łączyć na różne sposoby, aby stworzyć projekt o przyjemnym wyglądzie proporcje (na przykład czcionka 24 piksele w połączeniu z linią o wysokości 36 pikseli).

Podstawowe zasady układu

Od początku istnienia sieci istnieją pewne wzorce układu, które pojawiły się jako „standardy”. Przykłady obejmują główną nawigację u góry, lewy lub prawy pasek boczny z dodatkowymi informacjami lub opcjami nawigacji oraz zawartość treści zajmującą pozostałą część miejsca.

Chociaż istnieją wyraźne odstępstwa od tego podstawowego układu (nie górna nawigacja, brak paska bocznego, dwa paski boczne itp.), często jest to dość bezpieczny zakład podczas tworzenia nowego układu. Odejście od tego podstawowego wzorca powinno być dokonywane tylko celowo, zwłaszcza przez nowych i niedoświadczonych projektantów-deweloperów.

Stworzenie przewidywalnego projektu — co zwykle oznacza spójny — ma duży wpływ na użyteczność produktu. Odbieganie od tego, czego oczekuje użytkownik podczas korzystania z produktu, powinno być wykonywane tylko wtedy, gdy wzrost użyteczności jest większy niż straty.

Lepiej nie używać 72-pikselowych pogrubionych niebieskich tytułów na jednej stronie, a 36-pikselowych czerwonych tytułów na drugiej dla tego samego rodzaju treści — ponieważ spójność układu jest kluczowa. Podobnie odstęp (dopełnienie) między tytułem a tekstem głównym, który ma 36 pikseli w jednej sekcji, a następnie 32 piksele w drugiej, spowoduje niespójność wizualną. Chociaż dana osoba może nie od razu zrozumieć, dlaczego różnica jest wstrząsająca, poczuje to.

Podobnie jak w przypadku wspomnianej powyżej skali typograficznej, rozmieszczenie elementów w skali 4, 8, 16, 24, 36, 48, 72 lub 108 pikseli stworzy wizualnie przyjemny projekt. Dobrym pomysłem jest wykorzystanie wystarczającej przestrzeni między elementami, danie im miejsca na oddech; nowi projektanci często unikają białych przestrzeni i mogą skończyć z projektami, które wyglądają na zagracone i przytłaczające.

Niektórzy mogą kwestionować, dlaczego skala jest tak rozłożona. Dlaczego między dwiema pierwszymi liczbami jest różnica tylko 4 pikseli, a między dwiema ostatnimi różnica wynosi 36 pikseli? Powód jest prosty: przy małych skalach, wzrost o 4 piksele jest łatwy do zidentyfikowania (8 pikseli jest dwa razy większe niż 4, co można łatwo zauważyć). Ale przy większych liczbach różnica między 72 pikselami a 76 pikselami nie jest łatwo widoczna. Większe różnice są łatwiejsze do zauważenia wraz ze wzrostem rozmiarów.

Spójne odstępy to jeden z powodów, dla których podejście do projektowania oparte na siatce stało się tak popularne. Rozpoczęcie od siatki (zazwyczaj 12-, 16- lub 24-kolumnowej) daje projektantom ramy pracy, w których wszystko będzie spójne. Wbudowane rynny między kolumnami pomagają również zapewnić, że różne elementy projektu i zawartość w nich mają trochę miejsca do wytchnienia.

Wniosek

Zarówno projektanci, jak i programiści powinni skupić się na poszerzaniu swoich umiejętności, aby rozwijać swoją karierę. Czas, który programiści spędzą na nauce podstawowych zasad projektowania, zaoszczędzi czas w przyszłości podczas pracy z projektantami lub tworzenia własnych produktów.

Zrozumienie podstawowych zasad projektowania — zasad użyteczności, teorii kolorów, typografii, układu i UX — również poprawi rozwój programistów . Kiedy programiści mogą zrozumieć, dlaczego projektanci dokonują wyborów, mogą lepiej współpracować z projektantami, aby tworzyć naprawdę znakomite produkty.

Dalsza lektura na blogu Toptal Design:

• Zasady projektowania i ich znaczenie
• Ile kodowania powinni wiedzieć projektanci?
• Spektrum możliwości: Przewodnik po kolorach Go-To UI
• Popraw swój UX dzięki zasadom udanego projektowania interakcji
• Podstawy projektowania — przewodnik po hierarchii wizualnej (z infografiką)