Dziesięć najważniejszych zasad projektowania front-endu dla programistów

Naszym zadaniem jako programistów front-end jest w istocie przekształcanie projektów w rzeczywistość za pomocą kodu. Zrozumienie i bycie kompetentnym w projektowaniu jest ważnym elementem tego. Niestety, prawdziwe zrozumienie projektowania front-endu jest łatwiejsze do powiedzenia niż do zrobienia. Kodowanie i estetyczny projekt wymagają całkiem innych umiejętności. Z tego powodu niektórzy twórcy front-endu nie są tak biegli w aspekcie projektowania, jak powinni, w wyniku czego cierpi na tym ich praca.

Moim celem jest przedstawienie łatwych do przestrzegania zasad i koncepcji, od jednego dewelopera front-endu do drugiego, które pomogą ci przejść od początku do końca projektu bez zepsucia tego, nad czym twoi projektanci tak ciężko pracowali (lub być może nawet pozwalając na projektowanie własnych projektów z przyzwoitymi wynikami).

Oczywiście te zasady nie przeniosą Cię ze złego do wspaniałego w czasie potrzebnym na przeczytanie jednego artykułu, ale jeśli zastosujesz je do swojej pracy, powinny one mieć duże znaczenie.

Rób rzeczy w programie graficznym

Naprawdę rzadko zdarza się, aby ukończyć projekt i przejść od początku do końca, zachowując jednocześnie każdą estetyczną mutację w plikach projektowych. I niestety, projektanci nie zawsze są w pobliżu, aby szybko naprawić.

Dlatego w każdej pracy front-endowej zawsze przychodzi moment, w którym musisz wprowadzić pewne poprawki związane z estetyką. Niezależnie od tego, czy chodzi o zaznaczenie pola wyboru, które pojawia się po zaznaczeniu pola wyboru, czy o układ strony, który pominął PSD, front-enderzy często wykonują te pozornie drobne zadania. Oczywiście w idealnym świecie tak by nie było, ale jeszcze nie znalazłem idealnego świata, dlatego musimy być elastyczni.

W takich sytuacjach zawsze powinieneś używać programu graficznego do tworzenia makiet. Nie obchodzi mnie, które narzędzie wybierzesz: Photoshop, Illustrator, Fireworks, GIMP, cokolwiek. Po prostu nie próbuj projektować na podstawie swojego kodu. Poświęć chwilę na uruchomienie prawdziwego programu graficznego i zastanów się, jak powinien wyglądać, a następnie przejdź do kodu i spraw, aby to się stało. Możesz nie być ekspertem w projektowaniu, ale i tak uzyskasz lepsze wyniki.

Dopasuj projekt, nie próbuj go pokonać

Twoim zadaniem nie jest imponowanie tym, jak wyjątkowy jest twój znacznik wyboru; Twoim zadaniem jest dopasowanie go do reszty projektu.

Osoby bez dużego doświadczenia projektowego mogą łatwo pokusić się o pozostawienie śladu na projekcie z pozornie drobnymi szczegółami. Proszę zostawić to projektantom.

Zamiast pytać „Czy mój znacznik wyboru wygląda niesamowicie?” powinieneś zapytać: „Jak dobrze mój znacznik wyboru pasuje do projektu?”

Zawsze powinieneś skupiać się na pracy z projektem, a nie na próbie prześcignięcia go.

Typografia robi wielką różnicę

Zdziwiłbyś się, gdybyś wiedział, jak duży wpływ na ostateczny wygląd projektu ma typografia. Byłbyś równie zaskoczony, gdy dowiedziałbyś się, ile czasu poświęcają na to projektanci. To nie jest przedsięwzięcie typu „wybierz i idź”, wymaga to sporo czasu i wysiłku.

Jeśli znajdziesz się w sytuacji, w której faktycznie musisz wybrać typografię, powinieneś poświęcić na to przyzwoitą ilość czasu. Połącz się z Internetem i wyszukaj dobre pary czcionek. Poświęć kilka godzin na wypróbowanie tych par i upewnienie się, że otrzymasz najlepszą typografię do projektu.

Jeśli pracujesz z projektem, upewnij się, że postępujesz zgodnie z typografią wybraną przez projektanta. To nie tylko oznacza wybór czcionki. Zwróć uwagę na odstępy między wierszami, odstępy między literami i tak dalej. Nie zapominaj, jak ważne jest dopasowanie do typografii projektu.

Upewnij się również, że używasz właściwych czcionek we właściwym miejscu. Jeśli projektant używa Georgia tylko do nagłówków i Open Sans do treści, nie powinieneś używać Georgia do treści i Open Sans do nagłówków. Typografia może łatwo tworzyć lub łamać estetykę. Poświęć wystarczająco dużo czasu, aby upewnić się, że pasujesz do typografii projektanta. To będzie dobrze spędzony czas.

Projekt front-endu nie toleruje wizji tunelu

Prawdopodobnie będziesz robił małe części całego projektu.

Przykładem, z którym korzystałem, jest zaznaczenie projektu, który zawiera niestandardowe pola wyboru, bez pokazywania ich zaznaczonych. Ważne jest, aby pamiętać, że części, które wykonujesz, są małymi częściami ogólnego projektu. Spraw, aby Twoje czeki były tak ważne, jak powinien wyglądać znacznik wyboru na stronie, nie więcej, nie mniej. Nie miej wizji tunelowej na temat swojej małej części i uczyń ją czymś, czym nie powinna być.

W rzeczywistości dobrą techniką jest zrobienie zrzutu ekranu programu do tej pory lub plików projektu i projektu w nim, w kontekście, w którym będzie używany. W ten sposób naprawdę zobaczysz, jak wpływa na inne elementy projektu na stronie i czy właściwie spełnia swoją rolę.

Relacje i hierarchia

Zwróć szczególną uwagę na to, jak projekt działa z hierarchią. Jak blisko są tytuły do ​​treści tekstu? Jak daleko są od tekstu nad nimi? W jaki sposób projektant wydaje się wskazywać, które elementy/tytuły/treści tekstu są powiązane, a które nie? Zwykle robią to, umieszczając razem powiązane treści w boksach, używając różnych białych znaków do wskazania relacji, używając podobnych lub kontrastujących kolorów, aby wskazać powiązane/niepowiązane treści i tak dalej.

Twoim zadaniem jest upewnienie się, że rozpoznajesz sposoby, w jakie projekt realizuje relacje i hierarchię oraz upewnienie się, że te koncepcje są odzwierciedlone w produkcie końcowym (w tym w przypadku treści, która nie została specjalnie zaprojektowana, i/lub treści dynamicznych). Jest to kolejny obszar (jak typografia), w którym warto poświęcić dodatkowy czas, aby upewnić się, że wykonujesz dobrą robotę.

Bądź wybredny w kwestii odstępów i wyrównania

To świetna wskazówka, aby ulepszyć swoje projekty i/lub lepiej wdrożyć projekty innych osób: Jeśli projekt wydaje się używać odstępów 20 jednostek, 40 jednostek itd., upewnij się, że każdy odstęp jest wielokrotnością 20 jednostek.

Jest to naprawdę prosty sposób dla kogoś, kto nie zwraca uwagi na estetykę, aby szybko dokonać znaczącej poprawy. Upewnij się, że elementy są wyrównane do piksela, a odstępy wokół każdej krawędzi każdego elementu są jak najbardziej jednolite. Tam, gdzie nie możesz tego zrobić (na przykład miejsca, w których potrzebujesz dodatkowej przestrzeni, aby wskazać hierarchię), uczyń je dokładnymi wielokrotnościami odstępów, których używasz w innym miejscu, na przykład dwa razy domyślnie, aby utworzyć pewną separację, trzy razy, aby utworzyć więcej , i tak dalej.

Wielu programistów osiąga to w przypadku określonej zawartości w plikach projektowych, ale jeśli chodzi o dodawanie/edycję zawartości lub implementowanie zawartości dynamicznej, odstępy mogą być wszędzie, ponieważ tak naprawdę nie rozumieli, co implementowali.

Postaraj się zrozumieć, w jaki sposób projektant wykorzystał odstępy i zastosuj te koncepcje w swojej kompilacji. I tak, poświęć na to czas. Gdy uznasz, że Twoja praca jest zakończona, wróć i zmierz odstępy, aby upewnić się, że wszystko jest wyrównane i jednolicie rozmieszczone tak bardzo, jak to możliwe, a następnie wypróbuj kod z wieloma różnymi treściami, aby upewnić się, że jest elastyczny .

Jeśli nie wiesz, co robisz, rób mniej

Nie należę do osób, które uważają, że każdy projekt powinien wykorzystywać minimalistyczny design, ale jeśli nie masz pewności co do swoich projektów i musisz coś dodać, to mniej znaczy więcej.

Projektant zadbał o główne rzeczy; wystarczy zrobić drobne wypełniacze. Jeśli nie jesteś zbyt dobry w projektowaniu, dobrym pomysłem jest zrobienie jak najmniejszej ilości, aby ten element zadziałał. W ten sposób wprowadzasz mniej własnego projektu do pracy projektanta i wpływasz na niego w jak najmniejszym stopniu.

Niech praca projektanta zajmie centralne miejsce, a twoja praca z tyłu.

Czas robi z nas głupców

Zdradzę Ci pewien sekret projektantów: 90 procent (lub więcej) tego, co faktycznie zapisali na papierze lub na płótnie w Photoshopie, nie jest takie wspaniałe.

Odrzucają znacznie więcej, niż kiedykolwiek widzisz. Często potrzeba wielu poprawek i majstrowania przy projekcie, aby doprowadzić go do punktu, w którym nawet facet z sąsiedniego boksu mógł zobaczyć swoją pracę, nie mówiąc już o rzeczywistym kliencie. Zwykle nie przechodzi się od czystego płótna do dobrego projektu w jednym kroku; pomiędzy nimi jest kilka iteracji. Ludzie rzadko wykonują dobrą pracę, dopóki nie zrozumieją tego i nie pozwolą na to w swoim procesie.

Więc jak to zaimplementujesz? Jedną z ważnych metod jest poświęcenie czasu między wersjami. Pracuj, aż będzie wyglądać jak coś, co lubisz, a następnie odłóż. Daj mu kilka godzin (jeszcze lepiej zostawić go na noc), a następnie otwórz go ponownie i spójrz. Zdziwisz się, jak inaczej wygląda ze świeżymi oczami. Szybko wybierzesz obszary wymagające poprawy. Będą tak jasne, że będziesz się zastanawiać, jak je przegapiłeś.

W rzeczywistości jeden z lepszych projektantów, jakich znam, posunął się do tego pomysłu znacznie dalej. Zaczął od stworzenia trzech różnych projektów. Potem czekał co najmniej 24 godziny, patrzył na nie ponownie, wyrzucał je wszystkie i zaczynał od zera od czwartego. Następnie pozwalał na dzień między każdą iteracją, ponieważ robiło się coraz lepiej. Dopiero gdy otworzył go pewnego ranka i był całkowicie szczęśliwy, a przynajmniej tak blisko, jak projektant kiedykolwiek jest całkowicie szczęśliwy, wysłałby go klientowi. To był proces, którego używał do każdego projektu, który tworzył i bardzo mu to służyło.

Nie oczekuję, że zajdziesz tak daleko, ale podkreśla to, jak pomocny może być czas bez „oglądania projektu”. Jest to integralna część procesu projektowania i może wprowadzać ulepszenia w skokach i granicach.

Piksele mają znaczenie

Powinieneś zrobić wszystko, co w Twojej mocy, aby dopasować oryginalny projekt w gotowym programie, aż do ostatniego piksela.

W niektórych dziedzinach nie możesz być doskonały. Na przykład, twoja kontrola nad odstępami między literami może nie być tak dokładna, jak projektanta, a cień CSS może nie pasować dokładnie do tego z Photoshopa, ale nadal powinieneś próbować zbliżyć się tak blisko, jak to możliwe. W wielu aspektach projektu naprawdę można uzyskać idealną precyzję w pikselach. Może to mieć duży wpływ na efekt końcowy. Jeden piksel tu i tam nie wydaje się dużo, ale sumuje się i wpływa na ogólną estetykę znacznie bardziej, niż mogłoby się wydawać. Więc miej na to oko.

Istnieje wiele [narzędzi], które pomagają porównywać oryginalne projekty z wynikami końcowymi lub możesz po prostu zrobić zrzuty ekranu i wkleić je do pliku projektu, aby jak najdokładniej porównać każdy element. Po prostu połóż zrzut ekranu na projekcie i spraw, aby był półprzezroczysty, abyś mógł zobaczyć różnice. Wtedy wiesz, jak wiele trzeba dokonać korekty, aby to było na miejscu.

Otrzymać odpowiedź

Trudno o „oko do projektowania”. Jeszcze trudniej zrobić to samemu. Powinieneś zasięgnąć opinii innych, aby naprawdę zobaczyć, jak możesz wprowadzić ulepszenia.

Nie sugeruję, żebyś chwycił sąsiada i poprosił o radę, mam na myśli, że powinieneś skonsultować się z prawdziwymi projektantami i pozwolić im skrytykować twoją pracę i zaproponować sugestie.

To wymaga trochę odwagi, ale ostatecznie jest to jedna z najpotężniejszych rzeczy, które możesz zrobić, aby ulepszyć projekt w krótkim okresie i poprawić swój poziom umiejętności na dłuższą metę.

Nawet jeśli wszystko, co musisz dostroić, to prosty znacznik wyboru, jest wiele osób chętnych do pomocy. Niezależnie od tego, czy jest to przyjaciel projektanta, czy forum internetowe, znajdź wykwalifikowanych ludzi i uzyskaj ich opinie.

Może to zabrzmieć czasochłonnie i może powodować tarcia między tobą a twoimi projektantami, ale w dużym schemacie rzeczy warto. Dobrzy programiści front-end polegają na cennych informacjach od projektantów, nawet jeśli nie lubią tego słuchać.

Dlatego tak ważne jest budowanie i utrzymywanie konstruktywnych relacji z projektantami. Wszyscy jedziecie na tym samym wózku, więc aby uzyskać jak najlepsze wyniki, musisz współpracować i komunikować się na każdym kroku. Inwestycja w budowanie więzi z twoimi projektantami jest tego warta, ponieważ pomoże każdemu wykonać lepszą pracę i wykonać wszystko na czas.

Wniosek

Podsumowując, oto krótka lista porad projektowych dla programistów front-end:

• Projekt w programie graficznym. Nie projektuj na podstawie kodu, nawet małych rzeczy.
• Dopasuj projekt. Bądź świadomy oryginalnego projektu i nie próbuj go ulepszać, po prostu go dopasuj.
• Typografia jest ogromna. Czas, który poświęcasz na upewnienie się, że jest to właściwe, powinien odzwierciedlać jego znaczenie.
• Unikaj widzenia w tunelu. Upewnij się, że Twoje dodatki wyróżniają się tylko tak bardzo, jak powinny. Nie są ważniejsze tylko dlatego, że je zaprojektowałeś.
• Relacje i hierarchia: Zrozum, jak działają w projekcie, aby móc je właściwie wdrożyć.
• Białe znaki i wyrównanie są ważne. Spraw, aby były dokładne co do piksela i równomiernie we wszystkim, co dodasz.
• Jeśli nie masz pewności co do swoich umiejętności, postaraj się, aby Twoje dodatki były tak minimalistyczne, jak to tylko możliwe.
• Poświęć trochę czasu między powtórkami. Wróć później, aby zobaczyć swój projekt ze świeżymi oczami.
• Wszędzie, gdzie to możliwe, ważna jest perfekcyjna implementacja co do piksela.
• Być odważnym. Poszukaj doświadczonych projektantów, którzy ocenią Twoją pracę.

Nie każdy front-end developer będzie fantastycznym projektantem, ale każdy front-end dev powinien być przynajmniej kompetentny w zakresie projektowania.

Musisz wystarczająco zrozumieć koncepcje projektowe, aby zidentyfikować, co się dzieje i odpowiednio zastosować projekt do produktu końcowego. Czasami można uniknąć ślepego kopiowania, jeśli masz dokładnego projektanta (i jeśli jesteś wystarczająco zorientowany na szczegóły, aby naprawdę skopiować to piksel po pikselu).

Jednak, aby duże projekty błyszczały w wielu odmianach treści, potrzebujesz zrozumienia tego, co dzieje się w głowie projektanta. Nie wystarczy tylko zobaczyć, jak wygląda projekt, musisz wiedzieć, dlaczego wygląda tak, jak wygląda , i w ten sposób możesz pamiętać o ograniczeniach technicznych i estetycznych, które wpłyną na twoją pracę.

Tak więc, nawet jako programista front-end, część twojego regularnego samodoskonalenia powinna zawsze obejmować uczenie się więcej o projektowaniu.