Jak poprawić umiejętności projektowania interfejsu użytkownika / UX jako programista

Gdybyście zapytali mnie cztery lata temu, kiedy zostałem absolwentem CS, jaką ścieżkę kariery widziałem siebie, to prawdopodobnie powiedziałbym wam rozwój Java-back-end lub coś podobnego. Nigdy nie byłem kreatywny, w malarstwie spotykam się z płótnem, więc tak naprawdę nie zastanawiałem się nad ścieżką kariery obejmującą rozwój front-end i projektowanie.

Jak wszyscy wiemy, rzeczy się zmieniają. W trakcie mojej kariery coraz bardziej interesuję się rozwojem i projektowaniem interfejsu użytkownika. Miałem szczęście w swojej pracy zdobyć ekspozycję na rozwój front-end i pozwolono mi zainwestować czas w doskonalenie umiejętności niezbędnych do bycia programistą front-end.

W ciągu ostatnich 12 miesięcy starałem się pogłębić wiedzę na temat projektowania interfejsu użytkownika / UX, zarówno ze względu na osobiste zainteresowanie, jak i na to, aby móc być bardziej skutecznym podczas pracy z projektantami.

W tym poście chciałbym podzielić się zdobytymi przeze mnie lekcjami, zgromadzonymi przeze mnie zasobami i błędami, które popełniłem w nadziei, że inni programiści będą mogli uczyć się z mojej podróży.
Spis treści

To nie tylko talent

To nie tylko talent Patrz, myśl, kradnij Dowiedz się teorii Zbuduj coś Nie poddawaj się Zasoby Wniosek

Ten wydaje mi się teraz oczywisty, ale był czas, kiedy myślałem, że projektanci są czarodziejami, którzy urodzili się z możliwością tworzenia niesamowicie wyglądających aplikacji i stron internetowych.

Okazuje się, że nie są. Po prostu ciężko pracowali, aby udoskonalić swoje rzemiosło. W ten sam sposób, w jaki uczenie się kodu jest łatwiejsze dla niektórych ludzi, są ludzie, którzy będą mieli naturalny talent do projektowania, ale talent nie oznacza wiele bez ciężkiej pracy.

Projektowanie to coś, czego można się nauczyć. Nie popełniaj błędu, który popełniłem i odpisz sobie, ponieważ nie jesteś kreatywny w tradycyjnym sensie. Rozwiązywanie problemów programistycznych wymaga kreatywności; pomyśl o rozwiązywaniu problemów projektowych w ten sam sposób.

Patrz, myśl, kradnij

W ten sam sposób, w jaki czytanie dobrego kodu pomoże ci stać się lepszym programistą, uczenie się na podstawie tego, co stworzyli inni, pomoże ci stać się lepszym projektantem.

Następnym razem, gdy odwiedzisz stronę internetową lub skorzystasz z aplikacji, spójrz na nią i zastanów się, dlaczego wygląda i zachowuje się tak, jak wygląda. Dlaczego elementy są umieszczone tam, gdzie są? Dlaczego ten przycisk jest określonym kolorem? Dlaczego musisz wykonywać czynności w określonej kolejności?

Weźmy na przykład przycisk oklasków Medium. Dlaczego nie użyli przycisku „jak”, jak w przypadku każdej innej witryny społecznościowej? Moim zdaniem była to mądra decyzja projektowa, aby tego nie robić. Zamiast tego są w stanie wzmocnić ideę społeczności, która kieruje witryną, starannie projektując interakcję. Nadanie artykułu lub odpowiedzi pięćdziesięciu klaśnięć wymaga czasu dla użytkownika, ale pomaga im naprawdę połączyć się z treściami, które przegląda i osobą, która je stworzyła.

Strony takie jak Awwwards i Dribbble okazały się dla mnie bezcenne w ciągu ostatniego roku. Wiele projektów, które stworzyłem, zainspirowało twórców innych wielkich projektantów.
Dowiedz się teorii

Kiedy zacząłem tworzyć własne projekty, nie mogłem zrozumieć, dlaczego wyglądali i zachowywali się tak słabo. Przepływy były niewygodne, kolory niezgodne, a układy były niespójne.

Pomyślałem, że mogę po prostu wskoczyć i wykorzystać moją wiedzę na temat rozwoju wraz z moją podstawową wiedzą o tym, jak witryny powinny działać, jako użytkownik, i byłoby dobrze.

Byłem bardzo, bardzo źle. Skończyło się na tworzeniu projektów z punktu widzenia programistów, a nie teorii projektowania jako podstawy.

Deweloperzy wiedzą, jak działa strona, ale projektanci wiedzą, jak zachowuje się strona i jak się czuje. Istnieje duża luka, którą można wypełnić tylko poprzez zdobycie podstawy wiedzy projektowej.

Aby uzyskać podstawową wiedzę na temat teorii projektowania, najczęściej używałem Medium i Udemy. Możesz znaleźć linki do zasobów, których użyłem w sekcji poniżej.

Zbuduj coś

Każdy programista lub profesor CS powie Ci, że najlepszym sposobem, aby stać się lepszym programistą, jest pisanie kodu. Ta sama zasada dotyczy projektowania.

Nie ma znaczenia, co projektujesz, o ile się na tym uczysz. Traktuj to jako prawdziwy projekt: pomyśl o użytkownikach. Twórz makiety, makiety i prototypy. Iteruj na oryginalny projekt, aby go ulepszyć. Możesz korzystać z witryn takich jak Reddit, aby uzyskać informacje zwrotne na temat tego, co tworzysz.

Możesz nawet sparować go ze swoimi umiejętnościami rozwoju. Większość moich ostatnich projektów pobocznych była motywowana wspólnym dążeniem do ulepszenia zarówno mojego tworzenia stron internetowych, jak i umiejętności projektowania. Po zaprojektowaniu projektu możesz go rozwinąć i zobaczyć obie strony monety.

Oto kilka pomysłów na rozpoczęcie:

Zaprojektuj interakcję. Użyj inspiracji na przycisku oklasków Medium. Zaprojektuj aplikację dla swojej ulubionej organizacji charytatywnej. Pomyśl o różnych rodzajach użytkowników: potencjalnych, rzadkich i regularnych patronach. Zaprojektuj swoje CV. Pomyśl o kolorach, których używasz i co oznacza. Zastanów się, w jaki sposób Twoje CV zostanie użyte. Czy będzie po prostu oglądany na piargi n, czy zostanie wydrukowany? Jak to wpływa na projekt?

Projektowanie stron

Tworzenie stron internetowych,
tworzenie stron internetowych Siedlce
tworzenie stron internetowych Warszawa

Przeprojektuj istniejącą stronę internetową. Może to być twój lokalny dostawca transportu lub globalna marka. Porównaj swój projekt z oryginałem i pomyśl o różnicach z perspektywy użytkownika. Zaprojektuj coś fizycznego, na przykład nową metodę transportu, a może alternatywę dla czegoś prostego, jak widelec lub krzesło. Uważam, że myślenie o projektowaniu codziennych rzeczy jest naprawdę użytecznym sposobem na zdobycie umysłu, aby zaprojektować coś intuicyjnego.

Nie poddawaj się

Kiedy spoglądam wstecz na to, co stworzyłem rok temu, trudno nie skrzywdzić. Ale wszyscy zaczynają gdzieś. Warto zobaczyć postęp w tym, co tworzysz. Tak długo, jak uczysz się z tego, co robisz, twój czas jest dobrze spędzony.

Może pomóc śledzić to, czego nauczyłeś się w regularnych odstępach czasu. Każdego miesiąca spoglądam wstecz na niektóre rzeczy, nad którymi pracowałem i staram się czerpać z tego jak najwięcej. Nawet jeśli rozpoznajesz tylko niewielką część informacji, którą wybrałeś po przeczytaniu artykułu, wciąż jest postęp.

Zasoby

Poniżej znajduje się mały zbiór moich ulubionych narzędzi, artykułów i kursów. Możesz znaleźć o wiele więcej, których nie ma tutaj na liście i tutaj.
Przybory

Figma – Projektowanie i prototypowanie we współpracy.

FramerX – Podobny do Figmy, ale z dodanymi komponentami React i wykrywalnymi.

Chłodnice – Odkryj i generuj palety kolorów.

WebAIM Contrast Checker – Upewnij się, że twoje kolory są dostępne.

Archetype – edytor i typografia systemu typografii.

Wniosek

Mam nadzieję, że udało ci się coś zabrać z mojej podróży. Jeśli masz wskazówki projektowe lub zasoby, które pomogły ci się uczyć, chciałbym usłyszeć je w odpowiedziach.