Co używać do UX design?

[Shaq]

Ostatnio pracuje ze znajomymi nad pewnym projektem i po krótkim czasie odczuliśmy pozytywne wpływy używania aplikacji do designu i prototypowania.

Zaznaczę, że jestem początkującym więc nie mam za dużo doświadczenia w tej kwestii

Dotychczas zerknąłem na 3:

1. Adobe XD - z wymienionych przeze mnie w mojej opinii najsłabszy. Aczkolwiek ma minimum tego co potrzeba. Jest darmowy na 1 usera.
2. Sketch - jest sexi, ma fajne wtyczki ale kosztuje 100$ (jest jeszcze zniżka 50% dla studentów), ma eksport do Reacta aczkolwiek nie wiem ile to warte jest.
3. Figma - podobne do Sketcha. Darmowa dla studentów. Ma chyba mniej wtyczek.

Dodatkowo z komponentów chciałem użyć gotowej paczki Eva Design i na złość do Figmy jest płatne a do Sketcha darmowe…

Co robić, jak żyć?
Jest tu ktoś doświadczony aby doradzić które narzędzie najlepiej się uczyć i co użyć do designu z gotowych komponentów (chyba, że mam od startu robić własne brzydkie prostokąty jako przyciski )

[_Kuba]

@pawelorzech się zna😅

[piotrek69]

@Shaq

Jest tu ktoś doświadczony aby doradzić które narzędzie najlepiej się uczyć

Myśle, ze ktoś się znajdzie…

[pawelorzech]

No witam, to chyba coś dla mnie. Zanim zacznę o Sketch vs Figma to powiem tylko, że Adobe XD nie nadaje się jeszcze do sensownej pracy. Po prostu. Nie ma takiego community i tak dalej, które pozwala Ci mocno rozwinąć skrzydła.

Sketch jest super, ale jest tylko na maka i to taki mocno singleplayer. Nie patrz na żadne exporty do reacta, bo to zwykle nie jest nic warte.

Ja właśnie teraz przechodzę ze Sketcha na Figmę. Całą firmą przechodzimy, bo można sporo zaoszczędzić, a możliwości są takie same, jak nie większe. Masz duże wsparcie community, są bardzo przydatne (czy też znane ze Sketcha) pluginy i biblioteki. Jeśli Eva Design jest płatne do Figmy, to jestem pewien, że możesz znaleźć dużo innych opcji, które będą darmowe.

To, co mocno wyróżnia Figmę to fakt, że oprócz multiplatformowości, masz dużo narzędzi w jednym i to wcale nie znaczy, że są gorszej jakości. Figma = Sketch + invision + proto + zeplin. A to duży plus, że nie musisz szukać dodatkowych narzędzi, które będą Ci potrzebne np. do developer handover.

Więc jeśli zaczynasz, jesteś początkujący i chcesz w coś wejść, a nie wiesz w co - wejdź w Figmę. To nie będzie zła inwestycja. A jak zmienisz za jakiś czas zdanie, poczujesz się ograniczony albo będziesz chciał po prostu czegoś nowego - to rzeczy, które nauczysz się w Figmie, będą użyteczne też w Sketchu (chociaż jest parę fundamentalnych różnic, ale zupełnie nic Ci teraz nie powiedzą, więc nie przejmuj się nimi).

[Autheable]

To ja może z innej beczki - od czego zacząć przygodę, jeśli chciałbym wejść głębiej w UX design?

Tak, wiem, pisałem tutaj kiedyś o programowaniu, ale po dłuższej przygodzie z Pythonem i próbą poskromienia Xcode doszedłem do wniosku, że programowanie to chyba nie dla mnie jest.

Od pewnego czasu coś tam poczytuję sobie o UX design. Na uczelni ostatnio miałem coś a’la lekkie wprowadzenie do tego zagadnienia i bardzo mnie zaciekawiło, a podejrzewam, że bariera wejścia, by coś zacząć tworzyć jest - przynajmniej tak mi się wydaje - dużo mniejsza, niż w “kodowaniu”.

[pawelorzech]

Ja już dostawałem takie pytania więc wklejam to, co kiedyś napisałem.

Mam lagi i nie umiem odpisywać na maile na czas. Ale…

Ja jestem samoukiem - wszystko co się nauczyłem, nauczyłem się “on the go”. Jest oczywiście parę książek, podcastów itd. Ale najwięcej nauczyłem się robiąc swoje rzeczy.

Przede wszystkim dużo daje jak załapiesz się gdzieś na UXowy staż - to jest super prosta droga do umiejętności. A jak jeszcze będzie tam ktoś, kto weźmie Cię pod skrzydła - to masz już w ogóle łatwiej.

Natomiast zakładając, że nie masz takiej możliwości, to nadal masz sporo wariantów.

Przede wszystkim warto czytać co tam się dzieje na Medium/Quora pod tagami UX. Nie przyjmować oczywiście wszystkiego za prawdę oświeconą, ale warto znać trendy i wiedzieć, o czym się mówi, chociażby po to, żeby wypracować swoje własne stanowisko.

Są też subreddity, na których warto się pojawić - jest ich dużo, jak wpiszesz “reddit UX” w Google, to wyskoczy przynajmniej parę, na których można zacząć szukać ciekawych informacji i rzeczy, którymi warto się zainteresować. Tutaj masz dobry wątek, do którego warto zajrzeć: https://www.reddit.com/r/userexperience/comments/77i338/where_to_get_started_for_learning_ux/.

To co moim zdaniem daje dużo wartości, to jest… rysowanie rzeczy od początku. Po swojemu. To nie dość, że pomaga Ci myśleć krytycznie, buduje też Twoje portfolio, którego pewno jeszcze nie masz. Weź aplikację, z której korzystasz. Popatrz na to co Cię denerwuje albo co zrobiłbyś inaczej. Nazwij te potrzeby - spełnienie ich jest teraz Twoim designerskim celem. Zrób sobie własną wersję tych rozwiązań. Może podziel się nią w internecie na blogu albo behance? Jakakolwiek publikacja swojej pracy to zawsze plus.

Wiem, że po prostu pokazałem Ci parę miejsc i musisz teraz sam więcej poszukać, ale myślę, że to już dobra podpowiedź. I pamiętaj, nie zrażaj się. Jak dasz ciała albo nie będziesz czegoś ogarniać - trudno. Wrócisz do tego kiedy indziej, może potrzeba do tego więcej umiejętności. Zdobędziesz je, wrócisz do tematu i okaże się, że wiesz co można wtedy zrobić.

Powodzenia

[luke-g]

Adobe XD jest tragiczny. Bardzo ciężko zarządza się biblioteką wspólnych komponentów. W przypadku uporządkowanych projektów, bardzo trudno jest tam zaprowadzić porządek, gdzie każdy z elementów przygotowanego UI będzie miał swoje miejsce w hierarchii.

Jest jeszcze jeden aspekt, który często bywa dyskwalifikujący - AdobeXD nie jest wolne od polityki Adobe, która polega na dość agresywnej monetyzacji. Narzędzie jest darmowe, ale tylko w ograniczonym zakresie. Większe projekty wymagają finansowania. Praktyka Adobe jest do tego stopnia niepokojąca, że nie da się w prosty sposób wyeksportować wszystkich prototypów np do Sketcha. Zaimportować ze Sketcha można, ale wyeksportować nie.

Żeby nie było o samych negatywach - Całkiem niegłupio robi się prototypy. Nie jest to idealne, ale na pewno bardziej zaawansowane animacje można wykonać niż w Sketch.

Sketch jak dla mnie nadal chyba najlepszy z całego zestawienia, głównie ze względu na przemyślany mocno sposób tworzenia symboli. W dużych aplikacjach, gdzie tych komponentów jest dziesiątki tysięcy to pozwala to narzędzie odnaleźć się we wszystkim.

Wokół Sketch funkcjonuje ogromne community, więc większość aplikacji do designu, grafiki, animacji etc będzie na pewno z nim współpracowało.

Jak dla mnie kolejnym aspektem przemawiającym na korzyść Sketch jest to, że pomimo dużych projektów działa on całkiem sprawnie na relatywnie słabym sprzęcie, głównie za sprawą rozsądnego wykorzystanie zasobów - grafika wektorowa to pure CPU i tutaj nie ma problemów, natomiast w przypadku grafiki rastrowej stosowane są fajne zabiegi poprawiające wydajność (np przy pinch to zoom) artboardy mają wyłączane czy też pogarszane tekstury. W efekcie czego pracuje się całkiem sprawnie nawet na słabym sprzęcie.

Figma. W zasadzie jest po środku. To co jest w niej mega fajne to, to że jest x-platformowa. Niestety jest GPU-intense, więc komputer będzie potrzebował dobrej grafiki. Sama aplikacja jest tak jak pisałem w środku - pomiędzy Sketch, a XD.

Żeby zacząć z designem polecam ściągnąć sobie raporty UXPina. Bardzo fajne czytadła o tym jak robić, jak nie robić. Jakie są trendy.
W dodatku koniecznie trzeba się zapoznać z materiałem prezentowanym przez Google na material.io czy z Design - Apple Developer
tam jest bardzo dużo o samym designie aplikacji oraz prostych paternach, o których zapominają często bardziej doświadczeni designerzy.

[luke-g]

Jeszcze na koniec dodam tyle.
Oczywiście mogę podać książki jakie warto przeczytać. Pewnie też jestem w stanie podzielić się jakimiś zbiorami w granicy rozsądku.

Najważniejsze to natomiast skupić się na samym użytkowniku końcowym czy danej funkcjonalności, a nie na narzędziu, w którym będziemy robili projekt. Jeśli nie chodzi tutaj tworzenie UI, a zapeototypowanie aplikacji całościowo z naciskiem na UX to wystarczy kartka i długopis tak też często właśnie zaczyna się tworzenie apek. Nie tak dawno temu jeden z fajniejszych designów wraz z animacją, która była częścią dużej prezentacji na fintach fiestival zaprojektowałem w Keynote, więc narzędzie jest wtórne

[Autheable]

Podrzuć proszę jakieś książki warte przeczytania. Wolę spytać o pozycje niż googlowanie, ponieważ…
No właśnie, chociażby w psychologii, którą studiuję (5 rok, jednolite magisterskie) jest masa książek o tematyce np. Psychologii marketingu, ale tylko garstka warta jest poświęcenia dwóch-trzech dni na przestudiowanie książki od a do z.

[Shaq]

Będę wdzięczny za wszelkie podzielenie się materiałami i książkami, ewentualnie jeśli nie możesz to linki co i gdzie kupić.

Nie planuje kariery chyba ale naprawdę od kiedy zostałem zmuszony w pracy żeby być fullstackiem (z naciskiem na frontend) to czuje, że jara mnie design i interesuje mnie żeby to było dobre dla usera.

A po godzinach chce trzaskać projekty z kumplami więc chciałbym się tym zająć zamiast czekać aż ktoś przyjdzie to zrobić ponieważ jak napisałem sprawia mi to przyjemność (zresztą jak uczenie się nowych rzeczy).

Z material design jestem zaznajomiony od lat.
Na razie przyjąłem taktykę własnych komponentów tak jak poradził @pawelorzech
Zreszta widzę już jak Figma mnie wspomaga w budowaniu komponentów.

[datboi]

Widzę, że Adobe XD nie ma tu zbyt wielu fanów, jednak postaram się stanąć w jego obronie

Pracuję w UI/UX już od ładnych kilku lat i przeszedłem przez wszystkie narzędzia. Od jakiś 5 miesięcy pracuję już tylko w XD (przeszedłem z Figmy, wcześniej tylko Sketch). To w jakim tempie się ten program rozwija to jest totalny szok. Comiesięczne update, świetne community i cudowna współpraca z reszta CC. W ostatnich aktualizacjach doszła kolaboracja live (jak w figmie), auto animate prototypów i udostępnianie ich przez www (jak w principle) i naprawdę zarąbista obsługa komponentów - działają najbardziej intuicyjnie z całej wielkiej trójki programów do UI.

Jeżeli potrzebujesz zrobić szybko prosty prototyp z interakcjami, najszybciej zrobisz go właśnie w XD.

Tak naprawdę każdy z tych programów ma podobne możliwości, wszystkie są bardzo przystępne do nauki. Na koniec dnia i tak wybierzesz ten w którym pracuje Twój zespół.

[Shaq]

Gorzej jeśli to ja mam wybrać w czym będzie pracować zespół Figma mi się podoba aktualnie.

[pawelorzech]

Właściwie chciałbym to podbić z pytaniem, na które nie wiem czy ktoś będzie mieć sensowną odpowiedź. Może @luke-g pomoże jakoś. Otóż:

W aktualnej pracy chciałbym jednak pracować na maku, nie na Windowsie. Powodów mam parę: przede wszystkim Sketch, bo jednak wolałbym pracować na plikach lokalnie i chciałbym mieć wszystko pod kontrolą na githubie. Mogę pracować w Figmie, ale nie jestem do końca przekonany, że to najlepsza opcja. Do tego parę tooli jak Sip czy Iconjar… Generalnie trochę przywykłem do tego mac życia i ciężko mi się teraz na Windowise odnaleźć. Nie wiem czy widzicie też te Windowsowe fonty… No dobra, ale nie o tym.

Więc chciałbym maka. Natomiast rozważam JAKI mak. Najgorsze, że przez te dziadowskie klawiatury rozważam dwie opcje: albo 16" albo 13" air. Nie wiem czy potrzebuję aż takiej mocy jaką daje 16", z drugiej strony - 13" to mały ekran (nawet jakby miał być obok monitora zewnętrznego) oraz obawiam się, że NAWET ten podbity i7 będzie się ksztusił przy plikach Sketchowych, przeglądarce i - prawdopodobnie - maszynie wirtualnej z Windowsem (gierki anyone?). 16" ma też mimo wszystko jakąś kartę graficzną, więc do ewentualnego grania w produkcje 11bits mógłbym ją wykorzystać… Ale dalej mam komputer z Windowsem, który pewno ze mną zostanie.

No więc, moje pytanie jest następujące: czy Air 13" ma w ogóle ręce i nogi, czy nawet sobie nie zawracać tym głowy i po prostu 16"?

[msstefan]

MacMini?

[pawelorzech]

Właśnie bardzo chcę, żeby był mobilny. Stacjonarny komputer już mam.

[luke-g]

Hej, może uda mi się coś podpowiedzieć…

MacBook Air to naprawdę fajna maszyna, szczególnie teraz w odsłonie z procesorem quad core. Pomimo thermal throttling do zadań przy mniejszych projektach UX-owych procesor będzie na pewno wystarczający. Na pewno ogromnym atutem tego komputera jest bardzo wydajna karta graficzna Iris, która taką grafikę z Maca Mini bije na głowę.

Nie wiem jakie teraz realizujesz projekty, ale… obawiałbym się uruchamiania projektów, kto®e będą bardziej doładowane. Praca może nie być zbyt przyjemna jeśli np będziesz miał duże pliki, Rozbudowany design system, wiele obiektów itd.

U siebie mam taki plik ze starej pracy, gdzie mam 15000 artbordów. Wszystko jest ładnie poukładane i naprawdę nieźle zarządzone, ale… zabija komputer. Wiadomo, takie projekty super często raczej się nie zdarzają, natomiast jest to pewnego rodzaju killer dla komputera i mój osobisty Geekbench

Rozmiarem ekranu bardzo bym się nie przejmował bo faktycznie zarówno w biurze jak i domu będziesz mógł wyposażyć się w monitor zewnętrzny. Z perspektywy posiadającego 15-tkę nadal uważam, że ten komputer nie nadaje się do pracy na kanapie. Po wielu latach korzystania z 15-cali, wiem, że teraz do szczęścia potrzebowałbym czegoś lekkiego, najlepiej nawet ciut mniejszego niż 13 cali (taki iPad Pro 11 z możliwością odpalenia Xcode byłby super… czekam na MB 12-cali w nowej odsłonie).

To natomiast co mnie bardziej martwi to maszyna wirtualna… wspomniałeś, że chcesz mieć odpaloną wirtualkę. Tutaj już podzespoły MBA mogą okazać się za słabe… na pewno komputer będzie mocno się grzał. Poza tym 16GB RAM zacznie Cię bardzo szybko ograniczać. Osobiście, uważam, że 16GB to już za mało do bardziej wymagającej pracy.

Ja teraz mając 64GB RAM potrafię wejść na SWAP ~20GB.

Także chyba niestety nie ma złotego środka. Jeśli nie designujesz potwornie wielkich rzeczy to MBA powinien bardzo dobrze sobie poradzić, natomiast maszyna wirtualna raczej powinna być uruchamiana sporadycznie, aniżeli codziennie. Wówczas będzie git - na pewno cenowo wyjdzie to bardzo rozsądnie, nawet w porównaniu z konkurencją na Windows.

Jeśli natomiast chcesz mieć komputer, który przejmie funkcję komputera podstawowego, a przy tym faktycznie będzie bardzo obciążany i chcesz korzystać z wirtualnej maszyny codziennie to rozwiązania masz dwa. Poczekaj na premierę MBP 13/14 i kup komputer z 32GB RAM lub jeśli masz potrzebę zakupu teraz komputera to weź 16-tkę.

Alternatywnie, 16-tkę będziesz mógł sprzedać i zaakceptować stratę lub w najgorszym wypadku za rok wymienić 16-tkę na nową 13/14.

Co do Windowsa… to szanuję ogromnie Twoje zaparcie do chęci eksperymentowania. Serio jestem zawsze pod wrażeniem jak zamiast wybrać coś co znasz i dobrze Ci z tym to świadomie trochę sobie robisz pod górkę wybierając nowe. Nie jesteś konformistą, a to jest niesłychanie ważna cecha designera… Orzech… “The Nut - Poszukiwacz zaginionego experience” :D. Natomiast ciekawy byłem jak długo Twoje serce designera i estety wytrzyma na Windowsie. Co chwilę tam robią jakiś uplift graficzny, a pod spodem nadal jest 95-ty rok w fontach w oknach, mechanice działania itd. Dla mnie ten system jest jak Notepad… niby służy do tego samego co Notes, ale Courier New powoduje u mnie drgawki i przypominają mi się brzydkie blokowiska, ludzie w futrach z norek i polonezy na ulicach a to może dlatego, że już wtedy ta czcionka nawiedzała mnie za młodu w Windowsie 3.1 i ot taki flashback mam zawsze jak na nią patrzę Jak dla mnie dramat, także nie wiem jak Ty możesz chcieć na tym pracować

Edit. TL;DR

1. Potrzebujesz teraz i zadania nie będą gigantyczne - MBA sobie świetnie poradzi, ale nie bierz i7. Weź i5
2. Potrzebujesz teraz i zadania będą mocno obciążające + wirtualna codziennie - MBP 16
3. Możesz poczekać 2 mc - to czekaj niezależnie czy skłaniasz się do MBA czy MBP16. Wyjdzie MBP13/14 i może być dobry kąskiem
4. Kupujesz teraz MBP16, a jak wyjdzie MBP13/14 to bez dopłaty, ale wiadomo, że z poniesioną stratą wymieniasz po roku MBP16 na nowy MBP13/14

[luke-g]

wracając do samego designu. Korzystam naprzemian ze wszystkiego bo też klienci pracują ze swoimi jakimiś wybranymi środowiskami, które integrują się z czymś… w każdym razie wszystko ekstra, ale Sketch jest dla mnie nadal najlepszy do samego designu. Do prototypowania niestety… z ciężkim sercem, ale muszę przyznam, że - przepraszam za słowo - skurwiły XD jest najlepszy. Nienawidzę tego softu jak nie wiem co, ale prototypy w głupi, bo głupi sposób, ale można zrobić całkiem sensowne, a to niestety przekłada się na jego popularność.

Klienci, którzy są świadomi procesu projektowego chcą mieć szybko prototyp i sprawdzić go podczas badań ze swoimi klientami, a ten soft to umożliwia w dość rozbudowany sposób. Oczywiście nie ma tam zaawansowanych animacji ani przejść, ale nie wymyślono jeszcze lepszej rzeczy.

Co do wersjonowania… jeśli tylko nie jest to chmura i możesz mieć gita to wybierz gita. Ja wszystko wersjonuję na gitcie co jest do wersjonowania i jest rozbudowane. Lubię terminalem przełączać się między ranchami bo to jest dla mnie naturalne, natomiast może tak być, że preferuję to narzędzie gdyż tak czy inaczej używam gita przy kodowaniu, więc dla mnie to tak naprawdę optymalizacja

[pawelorzech]

Wielkie dzięki za rozbudowana odpowiedz. Jeszcze nie wiem co wybiorę - zobaczymy tez jaka będzie odpowiedz z góry, ale chyba wolałbym iść w stronę 16 mimo wszystko…

[luke-g]

16 jest rozwiązaniem na pewno bardziej racjonalnym, aczkolwiek z Twojego posta wywnioskowałem, że zależałoby Ci raczej na mniejszym rozmiarze komputera. Może źle to odczytałem, natomiast faktycznie jest tak, że 16-tka da więcej mocy.

Co do MBP 16 to uważam, że jak na potrzeby designera rozsądnie byłoby brać i7, 32GB RAM, lepszą grafikę 5500 z 4GB RAM za 14499. Nadal to jest od groma siana, ale jest to raczej rozsądny konfig. Ten i7 ciut gorzej wypada w testach niż i7 w moim Miniaku, ale to nadal bardzo potężny procesor i nie ma sensu na razie kupować nic lepszego.

Jeśli budżet nie stanowi problemu to warto brać też i7 ale w towarzystwie 64GB RAM dopiero w drugiej kolejności robić upgrade do i9.

[luke-g]

ahh żeby natomiast wsadzić nieco kijek w szprychy i MBP 16 to jest 14.5k. MBA to 7.5k. W zasadzie z ekonomicznego punktu widzenia bardziej opłaci się kupić rok po roku MBA niż MBP 16 na 2 lata. Jeśli kupujesz komputer na 4 lata, a obstawiam, że tak będzie to jeszcze bardziej ta różnica będzie widoczna. MBA nie spadnie cenowo o 50% na przestrzeni 2 lat, a MBP 16 raczej na pewno, jak nie o 60-65%
Wartość MBP 15 2017, który mam jeszcze na stanie w chwili zakupu to >15k, a teraz coś koło 6-5.5k