Rozpoczęcie pracy z UX Design in Sketch

Podkład dla nowych projektantów UX i studentów projektowania

W ciągu ostatnich dwóch lat pisaliśmy dużo o poradach Sketch w UX Power Tools i chciałem je uporządkować w taki sposób, aby pomógł projektantom, którzy dopiero zaczynają korzystać z UX.

Powinienem również wspomnieć, że nie będę debatować, które narzędzie jest najlepsze - założę się, że już zdałeś sobie sprawę, że Sketch jest najlepszy (na razie) i chcę wiedzieć, jak używać go jako projektanta UX

Podzieliłem nasze artykuły na 5 sekcji, które pokazują, jak myślę, że nowi projektanci przechodzą od początkującego do zaawansowania:

  • Wyciąganie pomysłów
  • Pierwsze kroki
  • Coraz szybciej
  • Coraz mądrzejszy
  • Pierwsze wizualne

Wydobywanie pomysłów

Projektowanie UX zaczyna się, zanim dotrzesz do narzędzi - zaczyna się w momencie, gdy zaczynasz myśleć o pomysłach (… tak naprawdę zaczyna się znacznie wcześniej od badań, ale ten artykuł powinien trwać krócej niż 20 minut).

Trzeba przyznać, że dość wcześnie wskakuję do narzędzi cyfrowych. Ale to głównie dlatego, że robię więcej w głowie i wspólnie szkicuję na tablicy z moim zespołem projektowym. Projektanci UX, którzy dopiero zaczynają, powinni naprawdę zachować niską wierność, badając przestrzeń problemów i popełniając błędy.

Gdy będziesz gotowy, aby dostać coś na ekranie, są dwa narzędzia, które moim zdaniem ułatwiają to naprawdę dobrze. Pierwszym z nich jest narzędzie InVision o nazwie Freehand, które sprawdziliśmy:

Drugim narzędziem ułatwiającym tę fazę projektowania jest zestaw bibliotek premium dla Sketch o nazwie Flowkit autorstwa Matta D. Smitha. To jest warte ceny 29 $.

Jest nie tylko świetny do tworzenia ramek w trybie lo-wierności, ale można go także wykorzystać na późniejszych etapach projektowania, gdy trzeba dokładnie odwzorować kluczowe przepływy pracy, aby przekazać swój projekt.

Pierwsze kroki

Zdecydowanie największą siłą Sketch for UX Design jest nacisk na to, aby rzeczy były powtarzalne i szybkie.

Wciąż dość niepokojące jest to, jak wielu projektantów Sketchów nie używa rzeczy tak prostych i wydajnych jak Style wspólne lub nowszych ulepszeń, takich jak Zagnieżdżone symbole. Zgaduję, że to dlatego, że projektanci się niecierpliwią i chcą po prostu coś wyciągnąć. Całkowicie to rozumiem.

Ale świetny projekt jest tak dobry, jak organizowany jest projektant. Podoba nam się metafora gotowania:

Lubimy też rozszerzać koncepcję arkuszy stylów z kodu na projekt (odkąd to napisaliśmy, systemy projektowe naprawdę eksplodowały na scenie, ale większość z tych technik jest nadal aktualna):

I na koniec święty Graal artykułów o tym, jak rozpocząć projekt w Sketch, który obejmuje to wszystko (aż do struktury folderów):

Dodatkowy artykuł o tym, jak odpowiednio konfigurować układy w Sketch:

Coraz szybciej

Ok, teraz, gdy wiesz, jak skutecznie rozpocząć projekt Sketch, czas zacząć działać szybciej dzięki temu narzędziu. Osobiście uważam, że to bardzo obraźliwe, gdy projektant nie używa żadnych skrótów podczas projektowania - to znaczy, że to naprawdę boli moją duszę. Nie bądź tym facetem / dziewczyną:

Od czasu napisania tego artykułu pojawiło się około półtora miliona nowych narzędzi i wtyczek, ale prawdę mówiąc, najlepsi towarzysze Sketcha tak naprawdę się nie zmienili (moim zdaniem Nudg.it jest teraz obsługiwany w Sketch, Anima nadal jest przydatny, mimo że niektóre z nich zostały wprowadzone do funkcji układu Sketch):

Porady i wskazówki

Jon Moore przekazał swoją mądrość użytkownikom mocy w kilku artykułach, które oszołomią ich prostotą i mocą:

Coraz mądrzejszy

Wiesz, jak skonfigurować projekt, nauczyłeś się przyspieszać dzięki Sketch, a teraz nadszedł czas, aby zastosować to wszystko do projektowania UX.

Jak powiedziałem wcześniej, Sketch jest idealny do projektowania UX, ponieważ ułatwia powtarzanie, spójność i modułowość. Oto kilka przykładów inteligentnego tworzenia elementów interfejsu użytkownika w programie Sketch (wszystkie one są dostarczane z gratisami:):

Wydajne zarządzanie ikonami i grafiką

W następnej sekcji omówimy stronę wizualną UX, ale zajmowanie się grafiką często wykracza poza sterownię projektanta UX. Zamiast martwić się tworzeniem ikon, lepiej spostrzeż się, jak ich używasz:

Zagnieżdżone symbole mogą faktycznie zautomatyzować całkiem sporo:

Na koniec byłbym niedoceniony, gdybym nie wskazał na największy postęp Sketch'a w ciągu ostatnich 12 miesięcy - Biblioteki:

Pierwsze wizualne

Jakby tego wszystkiego było mało, projektanci UX mają dziś znacznie wyższy standard, jeśli chodzi o projektowanie wizualne.

Kiedy zaczynałem projektowanie UX, miałem trudności z zapoznaniem się z „materiałami”, które musiałem zaprojektować: proporcjami, rozmiarami czcionek, gramaturą, kontrastem kolorów itp.

Aby być lepszym, zacząłem od kopiowania istniejących produktów, dzięki czemu mogłem poczuć, jak powstał interfejs użytkownika.

Omówiliśmy ten ostatni rok i udostępniamy linki do kilku popularnych produktów odtworzonych w Sketch (chociaż niektóre z nich zostały przeprojektowane):

Stamtąd możesz naprawdę zacząć używać małych technik, aby dodać odrobinę stylu swoim projektom:

Ale nie zapominaj, że dokładne przykładowe dane są tak samo ważne dla projektowania wizualnego, jak same elementy wizualne:

* nigdy nie napisaliśmy części 2

Wreszcie, w pewnym momencie swojej kariery, będziesz musiał zaprojektować pulpit nawigacyjny i często jest to jeden z największych koszmarów dla projektanta UX. Osobiście uważam, że pulpity nawigacyjne przynoszą marginalną wartość do stołu, więc wolę nie spędzać dni na poprawianiu wykresów:

To było niesamowite 18 miesięcy pomagając społeczności projektantów za pomocą UX Power Tools. I chociaż Szkic z pewnością nie jest jedynym narzędziem, które projektant powinien mieć w swoim arsenale, jest z pewnością najmocniejszy. Mam nadzieję, że ten dodatek pomoże tym z was, którzy dopiero rozpoczynają karierę w UX, lub którzy przechodzą na Sketch do pracy projektowej.

Jeśli interesuje Cię waniliowy system projektowania, który idealnie nadaje się do rozpoczynania nowych projektów, z przyjemnością sprawdzimy te, które zbudowaliśmy. Zaoszczędzą ci tysiące godzin projektowania:

Kiedy nie zbieram artykułów Sketch na Medium, pracuję nad narzędziami do projektowania Sketch w UX Power Tools, aby uczynić cię lepszym, bardziej wydajnym projektantem.

Śledź UX Power Tools na Twitterze
Obserwuj mnie na Twitterze