Podstawowe informacje dla przyszłych designerek: jak powinno wyglądać portfolio, dobre praktyki i przydatne źródła wiedzy. "Girls in IT" to cykl spotkań dla kobiet organizowanych przez Monterail, wrocławski software house, które mają przybliżyć im pracę w firmie technologicznej od kuchni i pomóc podjąć właściwą decyzję na temat kariery zawodowej.

1. Jak zacząć?
Projektantka UI / UX

2. O czym opowiemy?
● Czym zajmuje się projektantka?
● Jak przygotować się do roli projektanta?
● Jak rozwijać swoje umiejętności w praktyce?
● Jak zbudować portfolio?

3. Czym się zajmuje?
Projektantka w software house.

4. ● ,,Nadaje kształt” pomysłom i potrzebom biznesowym klienta
○ uczestniczy / prowadzi warsztaty, zbiera wymagania, funkcjonalności
● Uczestniczy w powstawaniu produktu od pomysłu po wdrożenie i testy
● Współpracuje z całym zespołem PM, Front-end, Back-end, QA
● PROJEKTUJE
Co robi?

5. Co projektuje?
Projektantka w software house.

6. Strukturę aplikacji
Architekturę informacji
● mapa strony
● ścieżki
użytkowników

7. Interfejs aplikacji
Interakcje
● makiety
● interaktywne
prototypy

8. Branding i język
wizualny aplikacji
● elementy
identyfikacji
wizualnej
● projekty graficzne
widoków
● UI kit
● animacja

9. Kto co projektuje?
● Nikt nie jest dobry we wszystkim
● Praca zespołowa
● Wiele specjalizacji/ról:
○ Product designer, UX designer, UI designer, Motion designer...

10. Jak się przygotować?
Chcę być projektantką!

11. Zdobywaj wiedzę
● Ucz się: studiuj, rób kursy, bierz udział w warsztatach
● Czytaj książki, blogi, artykuły: bądź na bieżąco
● Szlifuj angielski: czytaj artykuły, słuchaj podcastów
● Poznawaj i testuj istniejące aplikacje i platformy: zakładaj konta i klikaj
● Poznawaj wzorce projektowe: aplikacje desktopowe i mobilne
● Bierz udział w lokalnych wydarzeniach: UX Wrocław, WUD Wrocław, itp

12. ● Zawsze potrzebne: papier i ołówek / tablica i mazak / kolorowe karteczki
● Do rysowania diagramów / map stron: Draw.io, Lucidchart
● Do prototypowania: Axure, Balsamiq, Sketch + Invision
● Do projektowania języka wizualnego: Sketch (Mac), Adobe Photoshop, Figma
● Do projektowania interakcji i animacji: Principle (Mac), Adobe After Effects
Poznawaj narzędzia

13. Projektuj
● Projektuj: praktyka czyni mistrza
● Nie czekaj aż przeczytasz wszystko, poznasz narzędzia
● Wyznaczaj sobie zróżnicowane zadania a dowiesz się co interesuje Cię najbardziej
● Mądrze wykorzystuj dostępne zasoby: bazy zdjęć i ikon, UI kit’y

14. Zaczynam projektować.
Jakie zadania wybrać?

15. Przerysuj istniejący
interfejs
W trakcie poznajemy,
zauważamy i rozumiemy
architekturę aplikacji,
wszystkie elementy,
detale, stany;
obserwujemy jak 'żyje'
aplikacja.

16. Zaprojektuj element
interfejsu
● search
● kalendarz
● dodawanie zdjęcia
● tworzenie postu

17. Przeprojektuj istniejącą
aplikację
Takie podejście otwiera
dyskusję z potencjalnym
klientem czy
pracodawcą.

18. Wymyśl i zaprojektuj
prostą aplikację
Dobra aplikacja to
aplikacja która żyje.

19. Redesign aplikacji
mobilnej Happy Cow
Przykładowa realizacja:

20. Obecny
wygląd aplikacji

21. Cele zadania:
1. Usprawnienie nawigacji, wyszukiwania i prezentacji wyników
2. Odświeżenie strony wizualnej aplikacji
3. Wzbogacenie aplikacji o animacje

22. 1.
Zastosowanie dolnej
nawigacji
Zmiana sposobu
wyszukiwania
i filtrowania
Poprawa czytelności
listy wyników
i strony produktu

23. 2.
Odświeżenie strony
wizualnej aplikacji UI
● uproszczona, linearna
wersję logo
● nowa typografia poprawia
czytelność treści
● rozbudowana paleta,
‘call to action’ bardziej
intuicyjne
● nowe ikony

24. 3.
Prezentacja interakcji
i animacji
● animacje podążają
i podkreślają drogę
użytkownika

25. Pokaż swoje umiejętności!
Jak przygotować
portfolio?

26. Pokaż jak myślisz, pokaż swoje
umiejętności
● Dostosuj portfolio do wymagań stanowiska na jakie aplikujesz; aplikacje (desktop/mobile), platformy
e-commerce, strony internetowe, makiety, interakcje, animacje
● Ogranicz liczbę projektów w portfolio, skup się na jakości, max 5
● Zadbaj o różnorodność: branding, pakiet ikon-do pobrania, redesign istniejącej, rwd, mobile, mikrointerakcja
● Udostępniaj swoje projekty w sieci, na grupach dyskusyjnych, platformach projektowych;
rozmawiaj

27. Czy są pytania?

28. Dziękujemy!

29. Baza wiedzy

30. Kursy, wykłady, tutoriale online:
● Coursera
● Linda.com
● TEDx
● Sketch & Sketchcasts
● Principle
● Axure

31. Serwisy:
● Web field manual
● UX design weekly
● A book apart
● UX design
● Sidebar
● Designer news
● A list apart
● Nngroup
● Usability geek
● UX planet

32. Design guidelines & use cases
● Material design
● Heurystyki
● Opisy guidelines dla poszczególnych aplikacji
● iOS
● Onboarding
● Mobile flows

33. Narzędzia:
● Draw.io
● Lucidchart
● Axure
● Balsamiq
● Sketch
● Invision
● Adobe
● Figma
● Principle
● Framer

34. Inspiracje:
● Behance
● Dribbble
● UI movement
● One page love
● Product hunt
● Medium

35. Wydarzenia:
● UX Wrocław
● Dribbble WroMeetup
● Sketch x Wrocław
● WUD Wrocław
● UX Poland
● WUD Silesia
● WUD Kraków
● Women in technology