Do projektantów z miłością (list od programisty front-end)

Drodzy Projektanci,

Ten list szykuje się od lat. Niektóre z nich były dostarczane ustnie i pisemnie różnym projektantom przez długi czas.

Jednak zawsze bałem się opublikowania tego ze strachu, że wplątuje to w obecnego projektanta lub klienta, z którym pracuję. Zanim więc przejdę, chciałbym podkreślić, że nie jest to konkretna skarga, ale raczej szczegółowa lista 18 lat nieporozumień.

Pracowaliśmy razem przez prawie dwie dekady, a każdy plik PSD, który mi przesłałeś, ma (mniej więcej) te same problemy. Wybacz mi więc nieprzyzwoitość próbowania cię nauczyć twojej pracy.

Nie zakładam, że będę cię uczyć o grafice czy estetyce. Nie będę zagłębiał się w typografię, czytelność czy użycie spacji.

Zamiast tego chciałbym wyjaśnić, w jaki sposób owoce twojej pracy informują moją.

Przypominam, co jest wymagane do reprodukcji projektów jako stron internetowych w pikselach. Chciałbym opowiedzieć, w jaki sposób pliki projektowe będą wykorzystywane do dokumentacji i w jaki sposób tworzone obrazy określają używane technologie – aż do bardzo podstawowych poziomów skalowalności i wydajności.

Ponadto chciałbym pokazać, co można zrobić szybko i łatwo oraz co będzie generować narzuty, które wciągną całą produkcję w pełzanie.

A przede wszystkim chciałbym przypomnieć, że obraz , który teraz tworzysz, zostanie przekształcony w żywą istotę, która wchodzi w interakcje i reaguje, komunikuje się z tysiącami różnych osób, która musi ich uczyć i uczyć się od je w możliwie najłatwiejszy sposób. Zarówno dla niego, jak i dla nich.

Projektowanie do dokumentacji

Przede wszystkim przypominam, że pliki PSD, które produkujesz, to nie tylko źródło obrazów do zatwierdzenia przez klienta, to także dokumentacja techniczna i materiały źródłowe dla programistów. Dlatego prosimy, aby warstwy i grupy były uporządkowane, uporządkowane i nazwane .

Dodaj komentarz do swojego projektu. Utwórz osobny plik ze stosowanymi konwencjami lub zanotuj je w osobnej ukrytej warstwie.

Powiedz mi, jakich czcionek użyłeś do czego. Daj mi znać, jakich kolorów, odstępów i kontekstów użyć. Muszę wiedzieć.

Muszę również wiedzieć, co ekstrapolować, jeśli nie opracowano projektu dla określonej funkcji.

Myślę, że chcę powiedzieć: jeśli to możliwe, stwórz krótki przewodnik po stylu dla produktu, który projektujesz.

Dla nas obu, dodając standardowe bloki tekstowe – takie jak tytuły – dodaj za nimi prostokąt, aby wskazać odstępy wokół nich. To powinno umożliwić ci konsekwentne umieszczanie ich za każdym razem. Jeśli to za dużo pracy, przynajmniej wskaż, który przykład w dokumencie jest kanonem.

Nie potrafię powiedzieć, jak często uważam, że tytuły są umieszczane na oko, aby wizualnie pasowały do ​​pojedynczego wystąpienia, w którym są umieszczane, ale po zmierzeniu ujawniają, że każdy ma swój własny odstęp.

To samo dotyczy bloków treści. Jeśli masz listę różnych bloków treści, rozmieszczaj je konsekwentnie.

Powiem ci więcej w sekcji Projektowanie dla treści , ale nie zakładaj, że twoje tytuły będą zawsze w jednym wierszu, i nie używaj tych informacji w pliku.

Ciągle wpadam na te tytuły, które mają rozmiar czcionki 22px i wysokość linii 92px (oczywiście skopiuj i wklej z tytułu strony głównej). Wybrane ustawienia są istotne, nawet jeśli nie zmieniają wizualnie eksportowanego pliku.

Projektowanie dla technologii

Są dwie strony tego: co można zrobić i co jest odpowiednie dla medium.

Chociaż szybko zbliżamy się do punktu, w którym wszystko będzie technicznie możliwe do tworzenia stron internetowych (jeśli nic więcej, nadal mogę to rysować piksel po pikselu za pomocą płótna), wiele z tych rozwiązań nie jest gotowych do produkcji.

To, że znalazłeś przykład, w którym ktoś z powodzeniem połączył WebGL 3D z rozmyciem CSS i maskami filtrów dla strony demonstracyjnej, nie oznacza, że ​​możesz użyć tego jako pełnoekranowego panelu paralaksy w aplikacji jednostronicowej.

A jeśli naprawdę chcesz iść naprzód, skonsultuj się z programistą przed przesłaniem projektu do zatwierdzenia. W przeciwnym razie trudno będzie skłonić klienta do zadośćuczynienia za mniej.

Jeśli jednak naprawdę chcesz przetestować krawędzie i chcesz wypróbować to dla zabawy, skontaktuj się ze mną prywatnie. Uwielbiam tworzyć takie rzeczy tak samo jak ty. Tylko nie umieszczaj tego w zabudżetowanym projekcie produkcyjnym.

Poza tymi rzeczami – poza testowaniem granic tego, co można zrobić, staraj się być wrażliwym i rozsądnym w odniesieniu do tego, co należy zrobić .

Nie jesteś grafikiem; Jesteś kimś więcej, jesteś projektantem.

Nie tylko projektujesz go tak, aby wyglądał w określony sposób, ale musisz także zaprojektować go tak, aby działał w określony sposób, komunikował się i zachowywał w określony sposób.

Idąc za frazesem znanym projektantom na całym świecie: po co dobrze wyglądające krzesło, jeśli nikt nie może na nim usiąść ?

Aby projekt był projektem , a nie obrazem, musisz uwzględnić w swoim projekcie szybkość ładowania, szybkość wykonania i łatwość użycia.

Postaraj się osiągnąć jak najwięcej tylko za pomocą HTML i CSS. Unikaj używania ładnie wyglądających funkcji dostępnych w programie Photoshop. Nie używaj blendowania! Nie używaj fałszywej pogrubienia i fałszywej kursywy.

O ile nie chcesz, aby element był obrazem, nie używaj w ogóle filtrów – innych niż najprostsze cienie.

Nie każ mi obliczać ani wybierać kolorów, ponieważ użyłeś wypełnień kolorami mieszanymi. Proszę nie fałszować przezroczystych obrazów za pomocą mieszania nakładek; Właściwie potrzebuję przezroczystego obrazu na stronie.

Jeśli używamy frameworka front-end, takiego jak Bootstrap, wiele z tych problemów zostanie już rozwiązanych, więc dowiedz się, jak to się robi i jak można je modyfikować. Nie idź, chcąc nie chcąc, projektując coś niezwiązanego.

Jeśli Twój projekt nie jest zgodny z tym, co robi framework, wdrożenie go nie jest wdrożeniem projektu. Zamiast tego kończymy selektywnie nadpisując framework, aby nie zakłócać naszego projektu, a następnie wdrażać go od zera. Obciążenie pracą podwaja się zamiast zmniejszać o połowę.

I na koniec, nie używaj więcej niż trzech czcionek – lub wariantów czcionek – w witrynie. Jeśli potrzebujesz sześciu różnych grubości, z których każda ma własne warianty regularne i kursywę, nie projektujesz już dla sieci.

Projektowanie pod kątem interaktywności

To jest ogromny. A ten list został pierwotnie napisany wyłącznie na ten temat. Naprawdę musisz znać i rozumieć wszystkie sposoby interakcji użytkowników i funkcji.

Zacznijmy od najprostszych rzeczy: linków.

Linki nie mają tylko dwóch stanów.

W nawigacji, którą otrzymuję, zawsze podajesz projekty linków i aktywny link (bieżąca strona).

W innych przypadkach zazwyczaj podajesz stany bazowe i stany najechania .

Jeśli chcesz być jak najmniej przyjazny dla użytkownika, powinieneś mieć różne projekty dla stanów bazowych, najechania i skupienia ( odwiedzone i aktywne są również przyjemne w UX). W przypadku nawigacji zarówno link, jak i link aktywny, mają wszystkie powyższe stany .

Aha, i nie waż się zmieniać układu linków między stanami (różna szerokość obramowania, dopełnienie itp.).

Podobnie, jeśli nie wygląda jak przycisk, nie ma tła. Okres. Dopełnienie wbudowanego elementu tekstowego to bałagan, a niewypełnione tła tekstowe nigdy się nie zdadzą.

Ponieważ zamierzamy używać tego na urządzeniach mobilnych, upewnij się, że między poszczególnymi interaktywnymi elementami jest wystarczająca ilość odstępów, a każdy hitbox jest wystarczająco duży. Myślę, że minimum 42px na każdej osi to norma.

Narysuj niewidoczny prostokąt lub ukrytą warstwę pokazującą hitboxy; upewnij się, że się nie nakładają, a interakcje użytkowników są jednoznaczne.

Elementy formy są jeszcze gorsze.

Najczęstszym przypadkiem są przyciski opcji i pola wyboru. Standardowe są brzydkie! Więc projektujesz swój własny i dajesz mi stan sprawdzony i niesprawdzony, i uważasz się za skończonego.

Istnieje jednak cała wielowymiarowa tabela stanów dla pola wyboru i każdy powinien być wizualnie wskazany użytkownikowi.

Mamy następujące stany:

• Zaznaczone lub niezaznaczone
• Najedź czy nie
• Skup się czy nie
• Włączone lub wyłączone
• Błąd czy nie

Każdy z nich można łączyć z innymi.

Disabled zapobiega niektórym kombinacjom (najechanie kursorem i fokus są zwykle nieistotne, gdy są wyłączone), ale nie wszystkim (checked-disabled-error jest całkowicie prawidłowym i informacyjnym stanem pola wyboru). Mamy więc 16 włączonych i cztery wyłączone stany, co daje w sumie co najmniej 20 różnych stanów. Na przykład stany, które zwykle mi podajesz, to zaznaczone-nie-nie-włączone-nie-włączone i niezaznaczone-nie-nie-włączone-nie w tej konfiguracji.

Inne elementy formularza mogą nie mieć stanu zaznaczone-odznaczone, ale mogą być puste lub niepuste (pokazują tekst zastępczy). Mogą również mieć bardziej złożony stan informacyjny, dzięki czemu przypadek błędu lub braku może być tak złożony, jak neutralne ostrzeżenie-błąd-sukces.

Oprócz tego powinieneś mieć obowiązkowe lub opcjonalne wskaźniki wraz z jasno zdefiniowanym układem i projektem etykiet, pomocą wejściową i tekstem błędu.

A jeśli naprawdę chcesz być przyjazny dla użytkownika, potrzebujesz stanów nieskazitelnych, wskazujących, że użytkownik nigdy nie dostarczył danych lub dane są już przechowywane lub zostały zmienione, ale jeszcze nie zostały zapisane.

Mam na myśli to, że projektowanie pod kątem interaktywności jest trudne. A jeśli chcesz zmienić wygląd przycisków opcji, nie rób tego szybko z dwoma stanami.

Jeszcze jeden ostatni punkt dotyczący projektowania pod kątem interaktywności: zdecyduj, jak wygląda interakcja. Oznacza to, że zdecyduj, jakich konwencji będziesz używać dla elementów interaktywnych, i nie używaj ich na niczym innym.

Nie, nie możesz używać podstawowego koloru marki do wskazywania linków, zwłaszcza jeśli użyjesz tego samego rozwiązania do zaakcentowania ważnych treści!

Projektowanie dla treści

Idealny układ każdego elementu wypełniony treścią lipsum jest wystarczająco dobry, aby zaprezentować klientowi zdjęcie, aby uzyskać akceptację stylu wizualnego. Ale projektowanie treści ani się tam nie zaczyna, ani nie kończy.

Gdy już zorientujesz się, co chcesz zrobić z układem zawartości, pamiętaj, że pracujesz z zawartością dynamiczną. Istnieją dwa przypadki, które musisz sprawdzić dla każdego elementu treści:

• A jeśli jest go za dużo?
• A jeśli jest go za mało (lub całkowicie go brakuje)?

Sprawdź, co się stanie, jeśli tytuł jest śmiesznie krótki lub nietypowo długi. Jak powinien wyglądać blok treści, jeśli brakuje kluczowych elementów? A jeśli nie ma obrazu?

Jeśli nie ma treści dla sekcji strony, czy usuwamy całą sekcję – tytuł, kontener i wszystko – czy też zachowujemy tę sekcję i wyświetlamy coś w stylu: „Jeszcze nie ma artykułów, sprawdź później?” Jeszcze lepiej: „Czy chciałbyś otrzymać powiadomienie, gdy ta treść się pojawi? Zapisz się do naszego newslettera!”

Podejmuj decyzje! Następnie zaprojektuj te rzeczy!

Jeśli projektujesz kanał lub treści ładowane z zewnętrznego lub dynamicznego źródła, nie zapomnij uwzględnić wszystkich błędów i powiadomień. W rzeczywistości zaprojektuj zawartość meta powiadomienia strony, aby pokazać, jak wygląda globalnie, a następnie trzymaj się tych konwencji projektowych, aby powiadomić użytkownika, jeśli coś pójdzie nie tak.

Unikaj przycisków o stałej szerokości i bloków tekstu o stałej wysokości. A jeśli nie powiedziałem tego wcześniej, jeśli myślisz, że zawsze będzie to jedna linijka tekstu, to się mylisz! Teraz sprawdź, jak najlepiej zrobić to wielowierszowo.

Upewnij się, że ta sama treść ma tę samą strukturę.

Jeśli ten sam tytuł jest widoczny w wielu miejscach, nie pogrubiaj jednego słowa w jednym przypadku, a drugiego w innym miejscu!

W rzeczywistości staraj się całkowicie unikać struktur formatowania w tytułach. Podobnie, nie łam tekstu ręcznie w jednym miejscu, ale złam go inaczej w innym. W rzeczywistości nie łam ręcznie tekstu!

Te rzeczy mogą sprawić, że Twój projekt będzie lepszy, ale pamiętaj, że treść najprawdopodobniej zostanie wprowadzona przez CMS, a osoba, która ją wprowadzi, może nie zobaczyć, jak wygląda, dopóki nie zostanie opublikowana, lub może nawet nie mieć narzędzi do ręcznego zerwania lub sformatować tekst.

Projektuj z tymi samymi ograniczeniami, co ostateczna treść – kontenery tekstowe o stałej szerokości i automatyczne zawijanie słów. Jeśli tak wygląda brzydko, projekt nie jest dobry.

Projektowanie pod kątem responsywności

Ostatnio bardzo się to posunęło. Przynajmniej w tych przypadkach, w których faktycznie zaprojektowano telefon komórkowy. Coraz częściej pozwalamy bootstrapowi to rozgryźć i nakładamy plastry na pęknięcia.

Niezależnie od tego istnieje kilka prostych zasad, które musisz znać.

Po pierwsze, warianty mobilne i stacjonarne nie są osobnymi stronami. Wiem, że to wiesz. Są po prostu reflow tej samej strony.

Mówiąc prościej, jest to to samo, co praca z tekstem wyrównanym do lewej. Zdanie nie zmienia kolejności słów lub liter tylko dlatego, że umieściłeś je w mniejszym pojemniku.

Ponadto grupy treści powinny być udostępniane we wszystkich układach. Podczas dodawania kolumn upewnij się, że podziały kolumn są spójne.

Ponadto konwencje powinny mieć tę samą strukturę dla różnych wersji strony. Oznacza to, że jeśli dwa elementy wyglądają identycznie na komputerze, powinny być również identyczne na urządzeniach mobilnych.

Aha, a jeśli chcesz paralaksy, uprzejmie zapewnij obraz, który jest wystarczająco duży, aby się poruszać. Jeśli dopasujesz lub przytniesz zdjęcie tak, aby wyglądało jak w pliku, który pokazujesz klientowi, to nie mam czym się poruszać.

Projektowanie wyjątków

Oczywiście zawsze możliwe są wyjątki. Ponadto są niezbędne, aby produkt wyglądał atrakcyjnie i efektownie. Jednak nie dodawaj ich w pierwszym przejściu, pudełko po pudełku.

Jeśli odkryjesz, że rozwiązujesz ten sam problem projektowy w kółko, to nie zadziała, zwłaszcza jeśli wybierzesz inne rozwiązanie w każdym przypadku.

Po wykonaniu wszystkich powyższych czynności powinieneś otrzymać wydajny, stabilny i spójny (choć nieco nudny) projekt. Teraz nadszedł czas, aby urozmaicić. Patrząc na stronę jako całość, porozmawiaj z klientem, aby zidentyfikować strzały – elementy, które zapewnią mu najwyższy zwrot z każdej zainwestowanej złotówki.

Pracujemy razem od lat, a nasi klienci zawsze byli zadowoleni z efektu końcowego.

Oczywiście wskoczę w to, jeśli przegapisz kilka z tych punktów, a gdy użycie złożonego projektu jest uzasadnione, w razie potrzeby zajmę się pisaniem logiki renderowania w JavaScript.

W razie potrzeby wkroczę i uzasadnię dodatkową pracę klientowi. Heck, od wieków projektuję formy i interaktywność na podstawie otrzymanych projektów, więc nie będzie to problemem.

Mam tylko nadzieję, że po przeczytaniu tego artykułu będziesz pamiętać o niektórych z tych wskazówek podczas następnej współpracy. Mam nadzieję, że będą informować o Twojej pracy i udzielać wskazówek, gdy nie wiesz, co robić. Chciałbym, żebyś zrozumiał, że nasz związek jest dla mnie ważny i że nie napisałem tego po to, by cię zranić, ale po to, by nasz związek był lepszy.

Z miłością,

Twój programista front-end