Podczas nauki nowego zawodu przechodzę stale przez okresy „przed czymś” oraz „po czymś”. I zwykle łapię się za głowę, gdy wraca do mnie wspomnienie, jak to było w tym całym PRZED. Jeśli pamiętasz, jak było z twoimi projektami, zanim poznałeś moc tworzenia komponentów, wiesz dobrze, o czym mówię. Tym razem okazało się, że NIE-MA-ŻYCIA-BEZ-AUTO-LAYOUTU. Nie ma, nie ma, nie ma. Zanim go poznałam, był dla mnie jakimś takim za bardzo skomplikowanym cudakiem. Gdy zdecydowałam się na „bliższą relację”, zaczęłam „wrzucać” wszystko w auto layout i radować się z tego całego „wyrównania”. Boskie! Po prawdzie, ten wpis nie będzie w ogóle o auto layoucie, ale jeśli z niego nie korzystasz, a tekstu i tak nie przeczytasz, to zapamiętaj tylko ten jeden skrót… shift+A.

Dobrze, a o czym będzie mowa tutaj? Szósty kurs w domyśle miał być poświęcony Adobe XD oraz projektowaniu responsywnych stron internetowych. Mój start nauki zbiegł się z oficjalnym żegnaniem się z tą aplikacją. Dlatego zupełnie pomijam ten aspekt i przekazuję notatki z całej reszty. W gruncie rzeczy będzie to przede wszystkim powtórka tego, co już można było wyczytać z moich poprzednich tekstów. Przejdziesz przez fazę empatyzowania, po etap definiowania i ideacji, a skończysz na testowaniu i prototypowaniu. Poznasz też przebieg mojej pracy nad drugim projektem do portfolio. Jeśli chcesz od razu przejść do finalnych efektów, kliknij w ten tekst ?

PS Na tej stronie od Figmy dowiesz się, czym jest wspominany we wstępie auto layout i jak z niego korzystać.

? Spis treści:

1. Tydzień 1: Empatyzowanie z użytkownikami i definiowanie problemów
   • Wprowadzenie do Adobe XD
   • Empatyzowanie z użytkownikami
   • Definiowanie potrzeb użytkowników
   • Definiowanie problemu
2. Tydzień 2: Tworzenie rozwiązań dla problemu użytkownika
   • Przeprowadzenie audytu konkurencji
   • Tworzenie pomysłów projektowych
   • Planowanie architektury informacji
3. Tydzień 3: Tworzenie wireframe’ów
   • Papierowe wireframe’y
   • Planowanie responsywnych stron internetowych
   • Cyfrowe wireframe’y
   • Poprawki w wirefram’ach
4. Tydzień 4: Tworzenie i testowanie prototypów lo-fi
   • Tworzenie prototypów lo-fi
   • Zaplanowanie i przeprowadzenie testów użyteczności
   • Iteracja projektu na podstawie wyników badań
5. Tydzień 5: Tworzenie i testowanie prototypów hi-fi
   • Makiety – najlepsze praktyki
   • Design system – przypomnienie informacji
   • Makiety strony internetowej
   • Makiety dla mobilnej wersji strony
   • Dostępność stron internetowych
6. Tydzień 6: Dokumentacja projektów i szukanie pracy
   • Oddawanie projektu
   • Dodawanie projektu do portfolio
   • Szukanie pracy jako projektant UX
   • Tworzenie odpowiedniego CV

Tydzień 1: Empatyzowanie z użytkownikami i definiowanie problemów

Szósty kurs w ramach Google UX Design Professional Certificate zdążył się w ostatnich tygodniach dorobić nowej nazwy. Teraz znajdziesz go pod nazwą Build Dynamic User Interfaces (UI) for Websites. Wcześniej głównym bohaterem tytułu było Adobe XD. Google chciał zapoznać kursantów z dodatkowym narzędziem do projektowania stron i aplikacji, upatrując w tym wartość. Ostatecznie okazało się, że sam musiał się z tego wycofać. W kolejnym akapicie dowiesz się, dlaczego.

Wprowadzenie do Adobe XD

Na początek, czym w ogóle są responsywne strony internetowe? Responsywne strony pozwalają na automatyczną zmianę strony, w zależności od wielkości urządzenia.

Projektant UX, który tworzy taką stronę, musi się zastanowić, jak poszczególne elementy strony będą reagować na zmianę wielkości urządzenia. Google podkreśla, że warto mieć projekt takiej strony w swoim portfolio, gdyż świadczy to o większej świadomości projektowej i większym doświadczeniu.

Ok. A czymże jest to całe Adobe XD? Poniżej garść informacji od Google:

• Pozwala zaprojektować wireframe’y i prototypy dla cyfrowych stron internetowych lub aplikacji mobilnych.
• Przypomina Figmę, ale warto nauczyć się tego narzędzia na wypadek firmy, która preferuje to rozwiązanie.
• Warto rozwijać w sobie umiejętność adaptowania się – w tym pomaga uczenie się nowych narzędzi.
• Programy i usługi od Adobe dobrze ze sobą współpracują.
• Udostępnianie w Adobe XD jest bardzo proste.
• Narzędzie jest zaprojektowane tak, żeby można było współpracować przy projekcie.

Ważna informacja:
Adobe wykupiło Figmę, w związku z czym Adobe XD będzie powoli „umierać”. Pracownik Adobe napisał na początku sierpnia „Program Adobe XD nie jest już dostępny w sprzedaży jako pojedyncza aplikacja, ale nadal będzie obsługiwany przez obecnych użytkowników”.

Empatyzowanie z użytkownikami

Pierwszym etapem procesu projektowego jest empatyzowanie z użytkownikami. Empatia to umiejętność zrozumienia czyichś myśli lub uczuć w danej sytuacji.

Jednym ze sposobów na lepsze zrozumienie użytkowników, jest stworzenie mapy empatii. Mapa empatii to prosty wykres, który pozwala zebrać w jednym miejscu wszystkie informacje, jakie projektant zebrał na temat użytkowników.

Mapy empatii są istotne, bo pozwalają wejść w buty użytkownika i zrozumieć jego bolączki. Bolączki (pain points) to każdy problem w UX, który frustruje użytkownika i blokuje go przed zrobieniem tego, co potrzebuje.

Identyfikacja bolączek pomaga zdefiniować problemy, jakie ma rozwiązać dany produkt.

Focus on users and everything else will follow - mantra Google

Musisz zidentyfikować i zrozumieć potrzeby, doświadczenia i perspektywy użytkowników, dla których projektujesz. Jak to zrobić? Poniżej przypomnienie narzędzi, które wykorzystuje się w pierwszej fazie procesu projektowego (empatyzowanie):

• Na podstawie przeprowadzonych wywiadów stworzysz mapy empatii, które podkreślą to, co użytkownik lub grupa użytkowników mówi, robi, myśli i czuje.
• Stworzysz persony, czyli fikcyjnych użytkowników, których cele i cechy reprezentują potrzeby większej grupy użytkowników.
• Opracujesz historie użytkowników, czyli historie opowiedziane z unikalnej perspektywy danej osoby. Historie użytkowników składają się z trzech części: kto (typ użytkownika), co (pożądane działanie) i dlaczego (korzyść dla użytkownika).
• Zbudujesz mapy podróży użytkownika, które są wizualnymi reprezentacjami działań podejmowanych przez użytkownika, aby osiągnąć cel.

Dzięki powyższym narzędziom będziesz w stanie lepiej wczuć się w psychikę użytkownika i zrozumieć jego potrzeby. Na tej podstawie łatwiej będzie stworzyć tobie adekwatny produkt.

Wywiady z użytkownikami

Żeby przygotować się do wywiadów z użytkownikami (niezbędne do stworzenia mapy empatii), najpierw warto przeprowadzić research. Oto pytania, na których należy się skupić:

• Co musisz wiedzieć o użytkownikach i ich społeczności, aby zrozumieć ich doświadczenia?
• Jakie procesy, praktyki i emocje towarzyszą ludziom w związku z problemem, który próbujesz rozwiązać? Jak te rzeczy zmieniały się na przestrzeni czasu i dlaczego?
• Jakie problemy wciąż nie zostały rozwiązane przez użytkowników w związku z produktem, który projektujesz? Co rozwiązanie tych problemów dałoby użytkownikom i innym osobom?
• Jak produkt, który projektujesz, będzie funkcjonował w życiu użytkowników?

Jeśli chodzi o wywiady z użytkownikami, możesz na przykład zapytać o to ⤵️

• Czy możesz opisać ostatnie doświadczenie, w którym miałeś kontakt z podobnym produktem lub usługą? Jakie aspekty tego doświadczenia były pozytywne, a jakie obszary Twoim zdaniem można poprawić?
• Czy możesz przeprowadzić mnie przez kroki, które zwykle wykonujesz podczas korzystania z [kategoria produktów]? Czy podczas tego procesu napotykasz jakieś problemy lub wyzwania?
• Jakie są kluczowe czynniki, które wpływają na Twoją decyzję o wybraniu jednej [kategorii produktów] zamiast innej? Czy są jakieś szczególne cechy lub funkcjonalności, które są dla Ciebie priorytetem przy dokonywaniu wyboru?

Tworzenie persony

W ramach przypomnienia, persony to fikcyjni użytkownicy, których cele i cechy reprezentują potrzeby większej grupy użytkowników.

Każda stworzona persona reprezentuje grupę użytkowników o podobnych cechach, danych demograficznych i problemach, o których dowiedziałeś się z badań. Persony są niezbędnym elememtem procesu projektowego, ponieważ odzwierciedlają styl życia użytkowników i dają zespołowi projektowemu wyobrażenie na temat ich potrzeb i wyzwań.

Definiowanie potrzeb użytkowników

W tej części kursu Google poleca dwa narzędzia ➡️ historia użytkownika oraz mapa podróży użytkownika.

⬇️ Historia użytkownika ⬇️

Historia użytkownika to fikcyjna, jednozdaniowa historia, opowiedziana z perspektywy persony, która pomaga w podjęciu właściwych decyzji projektowych.

✅ Zalety tworzenia historii użytkownika:

• Pogłębia możliwość zrozumienia potrzeb użytkowników.
• Priorytetyzuje cele projektowe.
• Inspiruje do podejmowania empatycznych decyzji projektowych.
• Nadaje prezentacjom przed interesariuszami bardziej personalnego charakteru.

Historia użytkownika = Bohater + Cel + Konflikt

W moim wcześniejszym artykule podawałam już wzór, który pomoże stworzyć historię użytkownika ? Dla wygodny podaję go ponownie:

Jako [rodzaj użytkownika, who] chcę [rodzaj akcji, what], żeby [korzyści, why].

⬇️ Mapa podróży użytkownika ⬇️

Podróż użytkownika to seria doświadczeń, które spotykają użytkownika w czasie interakcji z produktem.

✅ Zalety zmapowania podróży użytkownika:

• Pomaga stworzyć ścieżkę przepływu użytkownika wolną od przeszkód.
• Redukuje wpływ błędów poznawczych projektanta.
• Podkreśla nowe bolączki użytkowników.
• Pomaga zidentyfikować przestrzenie do poprawy.

Definiowanie problemu

Po etapie empatyzacji z użytkownikiem przechodzimy do kolejnej części procesu projektowego, czyli do definiowania.

Podczas tego etapu będziesz definiować problem. Zdefiniowany problem to czytelny opis potrzeb użytkownika, które powinny zostać zaadresowane.

✅ Najlepsze praktyki podczas definiowania problemu:

• Język zorientowany na użytkownika.
• Problem jest wystarczająco szeroki i nie blokuje kreatywności.
• Problem jest wystarczająco wąski, żeby można go było rozwiązać za pomocą rozwiązania projektowego.

Jeżeli czytałeś moje poprzednie teksty z notatkami z kursu Google, to zapewne pamiętasz, że i w tym wypadku korzystasz z konkretnego wzoru. Jeśli nie pamiętasz, jak wygląda, poniżej przypomnienie ⤵️

[Użytkownik, Imię] jest [Charakterystyka użytkownika], który potrzebuje [Potrzeba użytkownika], ponieważ [Insight].

? W czym pomaga zdefiniowanie problemu?

• Pomaga ustalić cele projektowe.
• Pomaga zrozumieć ograniczenia, które blokują efektywne zaspokojenie swoich potrzeb.
• Pomaga zdefiniować oczekiwane rezultaty.
• Pomaga stworzyć wzorce sukcesu.

Tydzień 2: Tworzenie rozwiązań dla problemu użytkownika

Po procesie definiowania przychodzi czas na etap ideacji, czyli generowania szerokiego wachlarza pomysłów na dany temat, bez osądzania czy oceniania.

Mogę z pełnym przekonaniem napisać, że niezbędnym elementem tworzenia pomysłów na własną stronę internetową/produkt, jest weryfikacja tego, co robi konkurencja. Oczywiście w jakimś stopniu ma to wpływ na proces kreatywny. Bo ciężko się oderwać od tego, co się zobaczyło. Z drugiej jednak strony, jak wypełnić luki na rynku, gdy nie ma się wiedzy na temat tego, co robią inni?

Przeprowadzenie audytu konkurencji

Przed wygenerowaniem pomysłów na rozwiązania projektowe, warto przyjrzeć się konkurencji i na tej podstawie ocenić, czego brakuje na rynku. Audyt konkurencji to przegląd ich słabych i mocnych stron.

✅ Dlaczego audyt konkurencji jest przydatny?

• Pomaga zidentyfikować najważniejszych konkurentów.
• Pozwala przejrzeć, jakie oferują produkty.
• Możesz zrozumieć, jak konkurencja pozycjonuje się na rynku i jak o sobie mówi.
• Ocenisz, co konkurencja robi dobrze, a co mogłaby poprawić.

W audycie warto uwzględnić bezpośrednią i niebezpośrednią konkurencję. Bezpośrednia konkurencja koncentruje się na tej samej grupie odbiorców i oferuje podobne produkty. Niebezpośrednia z kolei albo skupia się na innej grupie, ale ma podobną ofertę, lub koncentruje się na tych samych odbiorcach, ale proponuje im inne produkty.

Google zaleca wykonanie poniższych kroków podczas tworzenia audytu konkurencji ⤵️

1. Określ cele.
2. Stwórz arkusz ze swoją konkurencją (na liście powinno być około 10 konkurentów, bezpośrednich i niebezpośrednich).
3. Wymień konkretne funkcje, które chcesz porównywać. Powinno być to dopasowane do twoich celów.
4. Sprawdź każdą firmę ze swojej listy.
5. Przeanalizuj wyniki.
6. Podsumuj wnioski w raporcie.

Tworzenie pomysłów projektowych

Na etapie tworzenia własnych pomysłów Google przypomina dwa ćwiczenia, które pozwolą otworzyć swoje głowy i wymyślić niespodziewane rozwiązania.

⬇️ How might we ⬇️

Ćwiczenie How Might We (HMW) pomaga przeformułować opis problemu w pytania, które skłaniają do wymyślenia pomysłów na rozwiązania projektowe.

• How (Jak?): analizowanie pomysłów
• Might (Możemy): Pomysły są możliwymi rozwiązaniami
• We (My): Wspólny wysiłek nad stworzeniem pomysłu

Sposoby na stworzenie fraz „How might we” od Stanford University:

• Wzmocnij dobro, np. Jak możemy stworzyć najbardziej ekscytujące miejsce do robienia zakupów online?
• Zmień status quo, np. Jak możemy sprowadzić przychodnię do użytkowników?
• Podziel punkt widzenia na kawałki, np. Jak możemy stworzyć system, który mierzy dostępność produktów?

Więcej wskazówek znajdziesz w pełnym tekście od Stanford University: How Might We questions.

Google poleca, żeby nie zatrzymywać się na jednym ćwiczeniu pozwalającym wygenerować porcję pomysłów. Stąd polecenie Szalonych Ósemek ?⤵️

⬇️ Crazy Eights ⬇️

Szalona ósemka to podstawowa metoda Design Sprint. Jest to szybkie szkicowanie, które wymaga od ludzi naszkicowania ośmiu różnych pomysłów w osiem minut. Celem jest wyjście poza pierwszy pomysł, często najmniej innowacyjny, i wygenerowanie szerokiej gamy rozwiązań danego problemu.

Przebieg ćwiczenia:

1. Każdy z uczestników ćwiczenia składa kartkę papieru A4 na 8 części.
2. Ustawia się minutnik na 8 minut.
3. Każda osoba indywidualnie wpisuje jeden pomysł w jednym prostokącie – aż wypełni całą kartkę.
4. Nie można przekroczyć założonego czasu.

Planowanie architektury informacji

Architektura informacji organizuje treści w taki sposób, żeby użytkownik wiedział, gdzie znajduje się w produkcie i gdzie szukać informacji, których potrzebuje.

Żeby stworzyć efektywną architekturę informacji, trzeba znać użytkowników, ich cele oraz zachowania.

? Dlaczego architektura informacji jest tak istotna?

• Organizuje i definiuje strukturę strony.
• Zapewnia wysoki poziom widoku na produkt.
• Pomaga interesariuszom ocenić projekt.
• Pomaga inżynierom zrozumieć, jak mają zorganizować dane.
• Pomaga rozwijać pomysły i wprowadzać kolejne iteracje.

Architektura informacji to plan działania, dzięki któremu użytkownicy mogą uzyskać wszystko, czego potrzebują z projektowanego produktu.

W ramach uzupełnienia informacji, Google poleca te dwa artykuły: The Beginner’s Guide to Information Architecture in UX oraz the basics of IA for designers.

Kiedy wyszukiwanie informacji staje się zbyt skomplikowane lub zbyt wolne, istnieje ryzyko, że ludzie po prostu je porzucą. A kiedy ludzie porzucą aplikację lub stronę internetową, trudniej będzie przyprowadzić ich z powrotem. Projektowanie architektury informacji ma uchronić przed taką sytuacją.

? Kognitywna psychologia, jako podstawa dla architektury informacji:

• Zasady Gestalt: dotyczą wizualnej percepcji obiektów, które pozostają w jakieś relacji z innymi obiektami. Są to takie zasady, jak zasada bliskości, kontynuacji, podobieństwa, symetrii. Więcej na ten temat przeczytasz na stronie Interaction Design Foundation.
• Modele mentalne: założenia, jakie mają w swojej głowie użytkownicy zanim wejdą w interakcję z produktem. Dla projektanta UX oznacza to stworzenie architektury informacji w taki sposób, żeby użytkownik znalazł odpowiedź na swoje pytanie tam, gdzie się tego spodziewa. Na stronie Nielsen Norman Group możesz znaleźć więcej informacji na temat modeli mentalnych.
• Ładunek kognitywny: to ilość energii, jaką wkłada użytkownik, podczas interakcji z produktem. Z perspektywy architektury informacji, ładunek kognitywny to ilość informacji, jakie użytkownik jest w stanie przeprocesować w danym momencie. Ogólna zasada jest taka, że zakres opcji i wyborów nigdy nie powinien być większy niż siedem.

Im więcej treści zawiera produkt, tym większa rola IA w procesie projektowania UX. Należy pamiętać, że zawartość i funkcjonalność produktu będzie rosła, dlatego sposób jego organizacji musi być łatwo skalowalny.

? Hierarchia i nawigacja:

• Hierarchia i nawigacja to dwa istotne elementy wpływające na IA. Pierwsza definiuje strukturę treści, druga określa sposób, w jaki użytkownicy będą się po niej poruszać.
• Aby stworzyć hierarchię, IA musi rozważyć, czego oczekuje użytkownik (na podstawie badań użytkowników), a także w jaki sposób firma chce pokazać informacje (na podstawie wymagań projektu).

Prawie niemożliwe jest stworzenie dobrego doświadczenia użytkownika bez solidnych podstaw architektury informacji. Dlatego każdy dobry projektant UX powinien być także kompetentnym architektem informacji.

Popularne struktury stron internetowych

Google omawia poniższe popularne struktury stron internetowych:

• Hierarchiczna: Jest to odgórne podejście do struktury, które rozpoczyna się od kategorii informacji najwyższego poziomu, zwanych poziomem nadrzędnym. Następnie treść jest zawężana do bardziej szczegółowych informacji, nazywanych poziomem podrzędnym. Struktura jest bardzo podobna do drzewa genealogicznego, na którym opierają się terminy na poziomie rodzica i dziecka.
• Sekwencyjna: Model sekwencyjny to struktura witryny internetowej, która prowadzi użytkowników krok po kroku przez proces.
• Macierzy: Model macierzowy to struktura, która pozwala użytkownikom podążać własną ścieżką, ponieważ treść jest powiązana na kilka różnych sposobów.
• Bazy danych: Model bazy danych to struktura witryny internetowej, która łączy bazę danych lub zorganizowany zbiór informacji z funkcją wyszukiwania. Dzięki zaawansowanym możliwościom filtrowania i wyszukiwania model bazy danych tworzy dynamiczne wrażenia w oparciu o wybory użytkownika.

✅ Zalety korzystania z gotowej struktury strony:

• Odpowiada na oczekiwania użytkowników.
• Poprawia nawigację.
• Jest przetestowana i efektywna.
• Tworzysz dzięki niej szybciej strony.

Mapa witryny

Google podkreśla, że powyższe jest niezbędnym elementem podczas tworzenia responsywnej strony internetowej. Mapa witryny to diagram strony lub aplikacji, który pokazuje, jakie są priorytety poszczególnych stron, z czym połączone i jakie posiadają etykiety. Jest to szczególnie ważne dla wszystkich użytkowników wchodzących w interakcję z witryną przy użyciu technologii wspomagających.

?️ Tworzenie mapy witryny krok po kroku:

1. Pomyśl o stronach, które są często wyszukiwanie w witrynach internetowych.
2. Przypomnij sobie wszystkie informacje, jakie znasz na temat użytkowników.
3. Zdecyduj, jaka ma być struktura strony.
4. Zacznij od strony głównej.
5. Nazwij główne kategorie treści.
6. Dodaj podkategorie.

Mapa witryny będzie wyglądać inaczej w zależności od rozmiaru witryny. Małe witryny (poniżej 100 stron) będą korzystać z płaskiej mapy witryny. Płaskie mapy witryn mają nie więcej niż cztery poziomy pionowe. W przypadku większych witryn zawierających 1000 lub więcej stron, masz do czynienia z głęboką mapą witryny, zawierającą co najmniej pięć poziomów pionowych.

? Dodatkowe linki od Google:

• How to create a UX Sitemap: a simple guideline od UX Collective
• Sitemaps and IA od Adobe XD
• Example sitemaps for websites od Adobe XD

Tydzień 3: Tworzenie wireframe’ów

W tej części kursu Google proponuje przyjrzeć się popularnym układom stron, co pomoże nakierować na to, na jaki sposób układania treści się zdecydować.

Papierowe wireframe’y

Popularne układy strony głównej

Projektując strony internetowe, kluczowe jest zorganizowanie elementów w sposób, który będzie prowadził użytkowników podczas poruszania się po każdej stronie. Poniżej znajdziesz przykłady, które były omówione podczas kursu Google:

• Pojedyncza kolumna: jedna kolumna dla treści strony. Na stronie znajduje się od góry nawigacja, potem są treści, a na dole jest stopka.
• Multi-kolumnowy układ strony: dwie lub więcej kolumn na treści. Na tego typu stronie warto zadbać o punkt centralny, która przyciągnie wzrok odbiorców.
• Pudełkowy układ strony: układ, który składa się z prostokątów lub kwadratów o różnej wielkości.
• Pojedynczy obraz: kieruje uwagę użytkownika na jeden obraz lub wideo, które w większości przypadków zajmują cały układ strony.
• Asymetryczny układ strony: posiada celowy brak balansu pomiędzy różnymi częściami strony.
• Układ w kształcie litery „F”: Główne informacje są ułożone na liniach bocznych i jednej linii pionowej. Często wykorzystywane dla wyszukiwarek.
• Układ w kształcie litery „Z”: użytkownicy skanują informacje od lewej do prawej, potem przechodzą wzrokiem po przekątnej do lewej strony i potem znowu na prawą.
• Siatka kart: zestaw kart, które są podglądem bardziej szczegółowych treści.
• Warstwowe ciasto: Wygląda jak warstwowe ciasto, z pojedynczymi rzędami lub warstwami ułożonymi jedna na drugiej. W każdym wierszu może znajdować się inna liczba kolumn i nie muszą one być spójne.

Google skłania do refleksji i pyta: dlaczego ludzie tak naprawdę odwiedzają strony internetowe? Jego zdaniem w większości przypadków głównym powodem każdej wizyty jest zadowolenie. Treść na stronie jest najważniejsza i każdy projektant chce ją zaprezentować w jak najbardziej użyteczny i intuicyjny sposób. Nic więc dziwnego, że wybór układu treści jest jedną z pierwszych rzeczy, które robią projektanci, gdy rozpoczynają nowy projekt.

Z artykułu od Adobe XD dowiesz się, jakie układy stron są wiecznie zielone i warte przyjrzenia im się bliżej ?

Podstawy wireframe’ów

Wireframe to zarys lub szkic produktu lub konkretnego ekranu. Składa się z linii, kształtów i minimalnej ilości tekstu. Pomaga projektantowi ustalić układ strony.

Google podkreśla, że należy korzystać ze standardów rynkowych podczas tworzenia wireframe’ów:

• Poziome linie oznaczają tekst.
• Kwadraty lub prostokąty z „iksem” w środku oznaczają obrazy lub ikony.
• Okręgi lub zaokrąglone prostokąty przedstawiają przyciski CTA.

Przed rozpoczęciem tworzenia wireframe’ów, wypisz na kartce wszystkie elementy, jakie powinny znaleźć się na danej stronie. Warto stworzyć co najmniej pięć szkieletów projektu danej strony, który przedstawi się pozostałym członkom zespołu. Po wykonaniu szkiców, dobrą praktyką jest oznaczenie gwiazdką każdego elementu, który uważamy za najbardziej wartościowy w danym projekcie. Po ich połączeniu powstanie wireframe złożony tylko z najlepszych pomysłów ?

Planowanie responsywnych stron internetowych

Responsywne projektowanie stron internetowych oznacza wprowadzanie zmian w wyglądzie lub układzie strony internetowej w zależności od urządzenia, na którym jest przeglądana oraz od rozmiaru ekranu. Projektant UX planujący stronę internetową musi rozważyć, jak elementy każdej strony będą wyglądać na ekranach o różnej wielkości.

? Dlaczego responsywność strony jest tak istotna?

• Zwiększa użyteczność.
• Stwarza dobre doświadczenie użytkownika.
• Zwiększa ruch z urządzeń mobilnych.
• Oszczędza czas i pieniądze.

Za kodem strony internetowej kryją się parametry zwane punktami przerwania. Punkty przerwania to wizualne ograniczenia określające, kiedy responsywny układ powinien się zmienić, aby prawidłowo dopasować wszystkie elementy i komponenty. Innymi słowy, jeśli dostosujesz kształt okna przeglądarki na swoim komputerze do pionowego prostokąta, witryna ostatecznie przejdzie do wersji mobilnej.

Podczas tworzenia responsywnej strony internetowej Google poleca zadawanie sobie poniższych pytań:

• Czy elementy na stronie muszą zmieniać lokalizację? Kiedy przechodzisz z dużego ekranu na mniejszy, które części projektu muszą pozostać nad zakładką? Które mogą przesuwać się w dół strony, do części widocznej po przewinięciu?
• Jak należy skalować obrazy? Czy są jakieś obrazy, np. obraz bohatera, które muszą pozostać duże na wszystkich rozmiarach ekranów?
• W jaki sposób dostosujesz elementy nawigacyjne strony w miarę zmiany rozmiaru ekranu, np. przejścia z górnego paska nawigacyjnego do menu hamburgera?

Dodatkową wiedzę znajdziesz w artykułach polecanych przez Google: Breakdown of responsive design od Interaction Design Foundation oraz 11 powerful examples of responsive web design od InVision.

Popularne elementy wykorzystywane w responsywnych stronach

Projektowanie responsywnej strony internetowej wymaga umiejętności skalowania elementów, aby jak najlepiej wykorzystać dostępną przestrzeń ekranu. Niektóre z nich będą musiały być zastąpione przez inne, w zależności od wielkości ekranu.

?️ Lista elementów, które przydadzą się podczas tworzenia responsywnych stron:

• Menu hamburgerowe: to rodzaj menu nawigacyjnego reprezentowanego przez ikonę z trzema poziomymi liniami.
  • Zazwyczaj menu hamburgerowe jest wyświetlane w lewym górnym rogu projektu witryny internetowej.
  • Menu hamburgerowe często pojawiają się w mobilnych wersjach stron internetowych, ponieważ wewnątrz listy można umieścić dużą ilość tekstu, co pozwala zachować czystość głównych stron projektu.
  • Innymi słowy, komputerowa wersja projektu witryny internetowej może mieć górny pasek nawigacyjny z tekstem wyświetlanym poziomo na ekranie, ale na ekranie telefonu komórkowego nie ma miejsca na ten tekst, więc zostanie on umieszczony w menu hamburgera.
• Karty: to zwarte powierzchnie zawierające treści i działania dotyczące jednego tematu lub tematu. Ten element projektu ma swoją nazwę, ponieważ każda karta przypomina tradycyjną kartę do gry o prostokątnym kształcie.
  • Ponieważ karty są kompaktowe, nie ma w nich miejsca na szczegóły. Oznacza to, że użycie kart w projektach może zachęcać użytkowników do interakcji, drażniąc treści, które użytkownik może chcieć kliknąć lub dotknąć.
  • Karty są również pomocne przy tworzeniu responsywnych projektów, ponieważ można je łatwo układać w przewidywalny sposób na różnych urządzeniach.
  • Każda karta może zawierać podobną ilość informacji, zarówno w wersji na komputery stacjonarne, jak i na urządzenia mobilne, ponieważ zawiera niewielką ilość treści.
  • Jednak projekty na komputery stacjonarne mogą zawierać pięć kolumn kart, podczas gdy projekty mobilne mogą zawierać tylko dwie kolumny kart.
• Karuzele: to przewijane źródła obrazów lub kart, które można przeglądać jednym kliknięciem, przeciągnięciem lub w pętli automatycznej.
  • Karuzele mogą wyglądać inaczej w zależności od rozmiaru urządzenia. Na przykład na komputerze stacjonarnym z dużym ekranem możesz wyświetlić podgląd wielu obrazów w karuzeli, jak pokazano na powyższym obrazku. W telefonie komórkowym z małym ekranem karuzelę można skondensować, aby jednocześnie wyświetlać tylko jeden obraz.
  • Ponadto obrazy w karuzeli można skalować w celu dopasowania do rozmiaru urządzenia. Na komputerach karuzele mogą być duże lub nawet zajmować całą stronę, tak jak zrobiłby to tradycyjny pokaz slajdów. Na urządzeniach mobilnych obrazy w karuzeli są mniejsze lub mogą nawet przybrać bardziej kompaktowy kształt, np. kwadrat zamiast prostokąta.
• Przycisk CTA: to interaktywny i atrakcyjny przycisk, który zachęca użytkowników do kliknięcia.
  • Przyciski CTA są używane na wszystkich rozmiarach ekranów w responsywnym stylu. Ale ich wygląd i funkcja zależą od każdego urządzenia. Na przykład przyciski CTA mogą zajmować więcej miejsca na urządzeniach mobilnych niż na komputerach stacjonarnych.
  • Przyciski CTA mogą być również bardziej interaktywne na urządzeniach mobilnych z ekranami dotykowymi, ponieważ umożliwiają wykonywanie bardziej zróżnicowanych gestów poza zwykłym kliknięciem.

? Uzupełnienie informacji:

• Responsive design techniques od Microsoft
• Five navigation patterns od UX Planet
• Deep dive into page design od Just in Mind.

Cyfrowe wireframe’y

Kiedy zdecydować, czy możesz zacząć projektować cyfrowe wireframe’y? Google sugeruje, że należy odpowiedzieć pozytywnie na te trzy pytania ⤵️

• Czy masz pomysł na układ strony?
• Czy uzyskałeś informację zwrotną na temat swoich papierowych wireframe’ów?
• Czy jesteś gotowy określić podstawowe wskazówki wizualne, takie jak rozmiar, tekst i typografia, lub inne elementy wizualne, takie jak treść lub obrazy?

Projektowanie pod kątem dostępności

Projektując pod kątem dostępności, tworzysz strony, które są dostępne dla wszystkich. Jakie aspekty warto uwzględnić?

? Inkluzywna strona zawiera:

• Nagłówki: wszyscy użytkownicy skorzystają na przejrzystym ułożeniu treści na stronie i wyróżnieniu każdej z sekcji za pomocą nagłówka. Pomaga to odczytać wizualną hierarchię poszczególnych elementów, a także jest lepiej odczytywane przez użytkowników korzystających z czytników ekranu.
• Punkty orientacyjne: wykorzystywane są do mapowania elementów w interfejsie. Pozwalają użytkownikom przenosić się efektywnie z jednej sekcji do kolejnej. Przykłady punktów orientacyjnych, to na przykład menu górne lub sekcja z wyszukiwaniem.
• Początkowe skupienie: Sposób, w jaki przyciągasz uwagę użytkownika, żeby pomóc mu ukończyć zadanie. Jeżeli na stronie będzie zbyt dużo informacji i nie będzie jasne, na czym się skupić, użytkownik najpewniej doświadczy kognitywnego przeładowania.

? Stosowanie zasad Gestalt:

• Zasady Gestalt opisują to, jak ludzie łączą podobne do siebie obiekty, zauważają wzorce lub upraszczają skomplikowane obrazy, kiedy na coś patrzą.
• Zasada podobieństwa: Elementy, które wyglądają podobnie, traktowane są jako takie, które posiadają te same funkcje.
• Zasada bliskości: Obiekty, które są bliżej siebie uznawane są za powiązane ze sobą, niż te, które są bardziej oddalone.
• Zasada wspólnego obszaru: Elementy, które są umiejscowione w tym samym obszarze uznawane są za jedną grupę.

Zwieńczeniem trzeciego tygodnia nauki było stworzenie wireframe’ów prezentujących wersję strony na komputerze oraz wersję mobilną. Tak się prezentuje mój projekt ⤵️

Tydzień 4: Tworzenie i testowanie prototypów lo-fi

Po przygotowaniu wireframe’ów, czas na stworzenie prototypu produktu, który pozwoli użytkownikowi przejść przez całą ścieżkę użytkownika ? Jeśli nie wiesz lub nie pamiętasz, czym jest jest prototyp, spieszę z wyjaśnieniem od Google ⤵️

Prototyp to wczesny model produktu, który prezentuje jego funkcjonalność.

Tworzenie prototypów lo-fi

Prototypy dzieli się na dwa typy ➡️ low-fidelity oraz high-fidelity. Co kryję się pod tymi nazwami?

• Prototyp lo-fi: prosta, interaktywna struktura, która daje podstawową wiedzę na temat tego, jak będzie działał produkt.
• Prototyp hi-fi: dopracowany, interaktywny model strony, który pokazuje, jak produkt będzie docelowo wyglądał (uwzględnia takie elementy, jak kolorystyka, typografia, zdjęcia czy animowane przejścia).

Czwarty tydzień nauki w całości poświęcony jest pierwszemu typowi prototypów.

Choć wizualnie wireframe’y i prototypy wyglądają tak samo, to różnią się tym, że w prototypie wszystkie wireframe’y są połączone, pokazując, jak działa produkt.

Poniżej znajdziesz linki, dzięki którym możesz przeklikać się przez mój prototyp:

➡️ Prototyp lo-fi – wersja na komputer

➡️ Prototyp lo-fi – wersja na mobile

Zaplanowanie i przeprowadzenie testów użyteczności

O testach użyteczności była mowa w moich poprzednich tekstach, do których możesz wrócić za pośrednictwem tej zakładki: https://digitaldigger.pl/tematy/ux-ui/

Poniżej znajdziesz szybkie przypomnienie najważniejszych informacji przekazywanych przez Google ⤵️

1. Przygotowanie do badania:
   • Na tym etapie tworzysz plan swojego badania, w którym uwzględniasz takie informacje, jak: tło projektu, cele badania, pytania badawcze, KPI, metodologia, uczestnicy oraz skrypt.
   • W filmie od Nielsen Norman Group znajdziesz dodatkowe wskazówki na temat tego, jak stworzyć plan badania.
2. Przeprowadzenie testów użyteczności:
   • Testy użyteczności to metoda badawcza, która pozwala sprawdzić, jak łatwo użytkownik jest w stanie ukończyć zadanie w produkcie.
   • Dzielą się na dwa typy: moderowane i niemoderowane.
   • Testy użyteczności powinno się przeprowadzać przy każdej kolejnej iteracji produktu, żeby zweryfikować efektywność podjętych decyzji projektowych. Możesz je zrealizować na każdym etapie procesu projektowego.
   • Im później zaczniesz korzystać z testów użyteczności, tym droższe będą zmiany, jakie trzeba będzie wprowadzić do gotowego produktu. Z tego względu testy użyteczności warto rozpocząć już na etapie prototypów lo-fi.
   • 5 do 8 uczestników badania to wystarczająca liczba, żeby uzyskać satysfakcjonujące rezultaty badania.
   • Checklista od Nielsen Norman Group, dzięki której przygotujesz się do badań użyteczności.
3. Redukowanie wpływu błędów poznawczych:
   • Błąd poznawczy to posiadanie przekonania na temat kogoś lub czegoś na podstawie ograniczonych informacji. Wszyscy ludzie na nie „chorują” ?
   • Identyfikacja możliwych błędów poznawczych pozwala zredukować ich wpływ.
   • Kilka z najbardziej popularnych błędów poznawczych: ukryte uprzedzenia (założenia i stereotypy, które mamy na jakiś temat i z których nie zdajemy sobie sprawy), efekt pozycji szeregowej (najczęściej pamiętamy to, co na początku i na końcu), efekt życzliwości (zgadzamy się z tymi, których lubimy, żeby uniknąć nieprzyjemnej konfrontacji), efekt społecznych oczekiwań (tendencja do odpowiadania na pytania tak, jak ktoś naszym zdaniem tego oczekuje).
   • Sposoby na redukcję wpływu błędów poznawczych: zidentyfikowanie i przyznanie się do własnych błędów poznawczych, znajdź uczestników badania z reprezentatywnej próbki, zaplanuj uprzednio kryteria badawcze, przemyśl dobrze sposób sformułowania pytań, pozwól uczestnikom badania na wyrażenie siebie w sposób swobodny i zgodny z nimi samymi, bądź świadomy swojej mowy ciała.
4. Analizowanie i syntetyzowanie wyników badań:
   • W analizowaniu i syntetyzowaniu wyników chodzi o to, aby przełożyć swoje obserwacje na możliwe do wykorzystania w praktyce insighty.
   • Insight to obserwacja, która pomaga tobie zrozumieć użytkownika i jego potrzeby z nowej perspektywy.
   • Żeby zmienić dane w insighty, należy przejść przez te 4 kroki: zbierz wszystkie dane w jednym miejscu, uporządkuj dane, zidentyfikuj główne motywy w danych, sformułuj insighty w oparciu o dane.
   • Dobry insight pozwala na dokonanie bezpośredniej akcji i poprawę produktu.

Iteracja projektu na podstawie wyników badań

Po utworzeniu listy insightów na podstawie badań przychodzi czas na iterację lub zmianę oryginalnego projektu. Celem jest poprawa komfortu użytkowania produktu w oparciu o wygenerowane spostrzeżenia.

? 3 wskazówki od Google:

1. Stwórz kopię swoich pierwotnych wireframe’ów i wklej ją poniżej.
2. Każdą wersję odpowiednio oznacz, żebyś mógł łatwo śledzić zmiany w projekcie.
3. Wszelkie zmiany w projekcie wprowadzaj na podstawie danych z badań.

Obserwuj, testuj, iteruj, ucz się – takie wskazówki od Dana Normana wyłapiesz z poniższego filmu ⤵️

Tydzień 5: Tworzenie i testowanie prototypów hi-fi

Makiety – najlepsze praktyki

Makieta to statyczny projekt hi-fi, który pokazuje, jak będzie wyglądał docelowy produkt. Nie jest klikalna ani interaktywna.

To zupełnie w porządku, żeby docelowe elementy umieścić w inny sposób, niż zaplanowałeś w wireframe’ach.

? Elementy, które należy uwzględnić w makiecie produktu:

• Kolorystyka
• Typografia
• Ikonografia
• Układ strony
• Eksponowanie zawartości komponentów za pomocą: linii, obrysu, wypełnienia, cieni

?️ Wizualne zasady projektowe:

• Zasada podkreślenia
• Zasada hierarchii
• Zasada skali
• Zasada proporcji
• Zasada jedności
• Zasada różnorodności
• Wyjaśnienie zasad na stronie Toptal

Design system – przypomnienie informacji

Design system to zestaw elementów wielokrotnego użytku oraz wytycznych, które pozwalają zespołom zaprojektować i rozwinąć produkt za pomocą określonych z góry standardów. Design system jest super i rób go! Lub korzystaj, jeśli masz szczęście znaleźć się w organizacji, która już go stworzyła.

? Najpopularniejsze elementy pojawiające się w design systemach:

• Komponenty
• Kolorystyka
• Ikonografia
• Układ strony
• Teksty
• Animacje
• Poziomy
• Typografia
• Ilustracje

? Z czego składa się design system?

• Style wizualne: określenie stylów dla kolorystyki, typografii oraz ikonografii
• Wytyczne: znajdziesz tutaj zasady projektowe, wytyczne redakcyjne oraz implementacyjne
• Komponenty UI: elementy i funkcje interfejsu, które są stałe dla całej marki
• Wspierający kod dla programista: dzięki temu programiści mogą poprawnie zaprogramować dany element

✅ Zalety korzystania z design systemu:

• Zapewnia spójność (korzyść dla projektantów oraz użytkowników)
• Wzmacnia identyfikację marki
• Pozwala tworzyć skalowalne projekty
• Oszczędza czas i pieniądze i zwiększa efektywność

Makiety strony internetowej

Makiety dla mobilnej wersji strony

Zdaniem Google jednym z największych wyzwań w projektowaniu responsywnych stron internetowych jest znalezienie miejsca na całą treść na ekranach o różnych rozmiarach.

Projektując witrynę internetową dostosowaną do rozmiaru ekranu telefonu komórkowego, musisz nadać priorytet treściom, a jednocześnie ułatwić nawigację. W tym celu możesz skorzystać z:

• Ukrytych menu nawigacyjnych (linki nawigacyjne umieszczone są pod ikoną).
• Menu hamburgerowe to rodzaj menu nawigacyjnego reprezentowanego przez ikonę z trzema liniami. Menu wyświetla listę linków do opcji nawigacji w witrynie lub aplikacji.
• Zazwyczaj menu hamburgerów jest wyświetlane w lewym górnym rogu witryny, więc menu przesuwa się z lewej strony ekranu.
• Menu hamburgerowe są bardzo szeroko stosowane w projektach mobilnych i dobrze rozpoznawalne przez użytkowników.

Dostępność stron internetowych

Kolejna rzecz, o której należy pamiętać, to że powinno się projektować z uwzględnieniem Wytycznych dotyczących dostępności treści internetowych (WCAG). Wyjaśniają one, w jaki sposób uczynić treści internetowe bardziej dostępnymi dla osób niepełnosprawnych.

Jak sprawić, żeby zaprojektowane strony internetowe były bardziej dostępne?

• Dodawanie adnotacji: Adnotacje to znaczniki umieszczane obok interaktywnych elementów interfejsu użytkownika, np. przycisków wezwań do działania na stronie.
• Hierarchiczne nagłówki: Dzięki nim technologie wspierające będą po kolei przechodzić od poszczególnych elementów, według ich ważności.
• Korzystanie z etykiet: Etykiety lub werbalizacje czytnika ekranu dodają opisowy język do interaktywnych elementów interfejsu użytkownika na stronie internetowej. Dzięki etykiecie nie ma wątpliwości co do przeznaczenia przycisku, menu lub pola wyboru. Na przykład etykieta może brzmieć: „Kiedy użytkownik kliknie pole wyboru, wybierz element”. Sprawdź dodatkowe przykłady etykiet, które czytnik ekranu powinien przeczytać na głos dla każdego przycisku na obrazku poniżej.

? Uzupełnienie wiedzy polecane przez Google:

• An introduction to Accessible Rich Internet Applications (ARIA) od WebAIM
• WebAIM contrast and color requirements
• designing with accessibility in mind od Google Material Design
• The A11Y Project, czyli kolekcja źródeł zebranych przez projektantów, która ułatwi tworzenie dostępnych produktów

Tydzień 6: Dokumentacja projektów i szukanie pracy

Oddawanie projektu

Front i back-endowcy są kluczowi, jeśli chodzi o przeniesienie wizji projektanta UX.

• Front-end developer: piszą cały kod dla interfejsu użytkownika, w oparciu o specyfikacje przekazane przez projektanta UX.
• Back-end developer: piszą kod architektury witryny oraz przechowywania lub odzyskiwania danych w oparciu o mapę witryny i funkcjonalność UX.

Jako projektant UX będziesz pracować z każdym z powyższych programistów. To im przekażesz swój skończony projekt.

Kiedy wiadomo, że projekt jest gotowy? Oto kilka pytań od Google, na które należy odpowiedzieć twierdząco:

• Czy projekt odzwierciedla rzeczywiste doświadczenie użytkownika?
• Czy wszystkie zastępcze materiały zostały zamienione na finalne?
• Czy użytkownicy są w stanie wejść w interakcję z produktem bez pomocy z zewnątrz?

Google podkreśla, że nie ma jednego właściwego sposobu współpracy z programistami. Wszystko zależy od zespołu i rodzaju pracy, jaki preferują. Najważniejsze, to otwarta i efektywna komunikacja.

Dodawanie projektu do portfolio

Co zawierają w sobie case study, czyli prezentacje podsumowujące skończony projekt?

• Cel projektu
• Twoja rola w projekcie
• Informacja na temat grupy docelowej
• Proces, za którym podążał zespół podczas pracy
• Wyniki przeprowadzanych badań
• Szkice i wireframe’y
• Efekt końcowy
• Kluczowe wyzwania
• Wnioski wyciągnięte na podstawie całego procesu

Case study powinno być przedstawione w zwięzły i angażujący sposób. Powinno przekazać ono rekruterom dokładnie to, czego chcą się dowiedzieć. Tak szybko, jak to możliwe. Musi również być przyjemne dla oka i łatwe w skanowaniu.

Case study pomoże tobie pokazać rekruterom:

• Twoją wiedzę projektową
• Potwierdzenie, że umiesz pracować zespołowo
• Twoją umiejętność przeprowadzenia pomysłu od początku do końca

Szukanie pracy jako projektant UX

Google proponuje następujący podział specjalistów UX z uwagi na różną odpowiedzialność:

1. Generalista: Projektant UX z szerokim zakresem odpowiedzialności
2. Specjalista: Projektant UX, który wszedł głębiej w jedną dziedzinę UX
   • Interaction designer: Skupia się na zaprojektowaniu doświadczenia z produktem i sposobu, w jaki będzie działał
   • Visual designer: Skupia się na tym, jak produkt lub technologia wyglądają
   • Motion designer: Rozważa to, jakie wrażenie będzie robić przemieszczanie się po aplikacji i jak zaprojektować gładkie przejścia pomiędzy ekranami.
3. Inne specjalizacje:
   • Product designer: zwykle zajmuje się zarówno projektowaniem wizualnym, jak i interaktywnym i jest odpowiedzialny za ustalenie, w jaki sposób cały produkt składa się w całość.

Dodatkowo Google podpowiada, gdzie można szukać swoich pierwszych ofert pracy:

1. Strony z ofertami pracy:
   • Jobs on Google Search
   • Indeed
   • Glassdoor
   • ZipRecruiter
   • Dribbble
   • Design Gigs for Good
2. Możliwości networkingowe:
   • LinkedIn
   • Konferencje
   • Targi pracy

Tworzenie odpowiedniego CV

Jako projektant UX powinieneś zwrócić szczególną uwagę na to, jak wygląda twoje cv i czy jest przejrzyste. Google zaznacza, że do układu swojego CV powinieneś podchodzić z taką samą uwagą skupioną na użytkowniku, jak do wszystkiego innego, co projektujesz. Powinieneś przemyśleć wiele poznanych już przez ciebie aspektów projektowania (hierarchia, siatka, kolor i negatywna przestrzeń) i zastosować je w swoim CV. Pamiętaj, że masz przyciągnąć uwagę widza i wyróżnić się z tłumu. Tworzenie CV to także doskonała okazja do zaprezentowania swojej marki osobistej. Możesz to zrobić, dołączając oryginalne logo, kilka wyrazistych kolorów lub ciekawy krój pisma.

Google proponuje, żeby uwzględnić następującą strukturę CV:

• Informacje kontaktowe
• Edukacja
• Doświadczenie zawodowe
• Umiejętności, z podziałem na nadrzędne kategorie
• Czasem można też dodać informacje na temat otrzymanych nagród lub hobby, ale nie są wymagane

? Wskazówki od Google dotyczące tworzenia CV oraz portfolio dla osób, które szukają swojej pierwszej pracy w danym zawodzie:

• CV powinno zmieścić się na jednej stronie.
• Powinien być dostępny link do portfolio.
• Dodatkowo warto uwzględnić linki do profesjonalnych stron networkingowych.
• Należy stworzyć różne wersje CV w zależności od rodzaju pracy – dopasuj CV do danej oferty pracy
• Używaj w CV słów kluczowych, które pojawiają się w danej ofercie pracy, żeby podkreślić, że jesteś adekwatnym kandydatem.
• Celem CV jest pokazanie, co ciebie wyróżnia od innych kandydatów.
• Wyróżnij umiejętności liderskie i możliwości zdobywania doświadczenia w tym obszarze.
• Pokaż, kim jesteś – daj się poznać rekruterom.
• Możesz korzystać z szablonów, ale znajdź sposób na to, żeby jakoś wyróżnić swoje CV.
• Zaprezentuj, w jaki sposób myślisz o problemach i ich rozwiązywaniu.
• Wyróżnij w portfolio, co zrobiłeś samodzielnie.
• Nie do końca ważny jest opis stanowiska, a wpływ jaki się miało w danej pracy i co udało się osiągnąć.
• Nie opowiadaj o wszystkim, co robiłeś w danej pracy, tylko skup się na tym, co ma znaczenie pod kątem stanowiska, na które aplikujesz.

? Na koniec solidna porcja dodatkowych linków polecanych przez Google:

• Przykład CV, w którym są dwie czytelne kolumny oraz nagłówek: Googler and entry-level UX designer Yang’s resume.
• Przykład wykorzystania akcentu kolorystycznego w CV: Shabi features in her resume.
• Korzystanie z własnego logo: Wenni’s resume on bestfolios.
• Sposób korzystania z wizualnej hierarchii, dzięki której łatwiej przeskanować CV: Sanat uses typography strategically on their resume.
• Przykład wykorzystania w CV dwóch różnych krojów pisma: UX designer Emanuel.
• Kolekcja dzięsięciu inspirujących CV: 10 Amazing Designer Resumes that Passed Google’s Bar.
• Wskazówki, jak stworzyć CV, jeżeli aplikuje się do Google: Create Your Resume for Google: Tips & Advice.
• Artykuł wyjaśniający, jak stworzyć CV w Adobe InDesign: Create a professional resume in Adobe InDesign.
• Poteżna baza szablonów CV do wykorzystania w Adobe InDesign: The 100 InDesign resume templates you need.
• Jeżeli chcesz stworzyć swoje CV w Figmie, przyda się tobie ten artykuł: Design Exercise: Design Your CV — Learn with Figma.

Home By My Own – mój drugi projekt do portfolio

Dwa miesiące zeszły mi na naukę i realizację ćwiczeń praktycznych. Nie na full time. To było jakieś 90 h rozciągnięte w czasie. Ostatecznie powstał projekt, który ma pomóc domowym majsterkowiczom wyszukiwać pomocne tutoriale DIY. To wariacja na temat sposobu wyszukiwania treści. Bo dobra wyszukiwarka jawiła mi się jako główna rzecz, której osoby z mojej grupy potrzebują. I której brakuje na rynku. A, że to dopiero mój drugi projekt w życiu, to nie tylko podejrzewam, ale również wiem, że jeszcze sporo jest w nim do przepracowania. Niemniej, bez wstydu wychodzi właśnie na światło dzienne ?

➡️ Prototypy hi-fi: desktop oraz mobile

Jednocześnie jestem już prawie na finiszu nauki w ramach Google UX Design Professional Certificate. Ukończyłam 6 kursów i został mi ostatni ? Wypatruj efektów za kolejne +/- 2 miesiące ? ?