Idź Pan w UI! #3 – profil użytkownika - grafika, projektowanie, UX design

Trzecie zadanie z cyklu Idź Pan w UI! Jeżeli nie wiecie o co chodzi – czytajcie. Jak znacie już formułę, przescrollujcie prosto do treści, bo czeka na was nowe wyzwanie! Dzisiaj znowu aplikacja mobilna, ale za to jaka! Jeżeli nie braliście udziału w poprzednim zadaniu lub nie widzieliście lajwa to zachęcam do zerknięcia (możecie znaleźć tam kilka wskazówek do tego zadania). A tym, którzy za appkami nie przepadają obiecuję, że w kolejnym zadaniu wrócimy do desktopu!

Jak to działa?

Możecie wykorzystać to jako inspirację do nowego projektu do portfolio, formę ćwiczenia lub wziąć udział w wyzwaniu, zrealizować zadanie i wysłać je do mnie w określonym terminie. Ja w kolejnym tygodniu przygotowuję Live Stream na kanale YouTube, gdzie omawiam nadesłane projekty – czyli robimy sobie spotkanie w formie korekty. Jeżeli jesteście ciekawi jak wyglądają takie spotkania online – zerknijcie na dotychczasowe lajwy dostępne na kanale.

Bądź na bieżąco

Żeby być na bieżąco z zadaniami i informacjami o Live Streamach, najwygodniej dopisać się do newslettera, bo dzięki temu, prosto na maila dostaniecie każdą informację. Można po prostu śledzić bloga albo moje kanały na portalach społecznościowych, ale algorytmy bywają okrutne i jest szansa, że nie zawsze wyświetlą się wam powiadomienia o nowym zadaniu. Newsletter ten problem eliminuje.

Treść zadania

Temat: Profil użytkownika z edycją

Deadline: 9 czerwca 2019 (do końca dnia)

Touchpoint: aplikacja mobilna na Google Pixel (411×731)

Cel zadania: Stworzenie profilu użytkownika w mobilnej aplikacji poświęconej wspólnym aktywnościom (można umówić się do kina albo pograć razem w kosza). Profil użytkownika jest dodatkową funkcją, która pozwala użytkownikom nawiązywać kontakt między sobą i w przyszłości będzie wzbogacany o więcej funkcji. Na razie potrzebny jest ich podstawowy zakres wymieniony poniżej.

Zadanie wskazuje na aplikację Androidową, jak ostatnio, więc to dobra okazja do nauczenia się pracy w Material Design. Jego użycie nie jest jednak obowiązkowe.

Aplikacja dedykowana jest młodym osobom z dużych miast (19-35), które spędzają czas w miejscach, gdzie nie mają zbyt wielu znajomych (studia, nowa praca). Aplikacja pozwala znaleźć towarzystwo do wspólnych aktywności.

Obowiązkowe elementy: W pierwszej kolejności trzeba zająć się profilem użytkownika. Obowiązkowe elementy to: zdjęcie profilowe, pseudonim, linki do portali (Instagram, YouTube, facebook), skrócony opis w formie wstępu (do 320 znaków), ilość powiązań (kontaktów – w formie liczby), dodatkowy opis (można dodać więcej tekstu, ale powinien pojawić się raczej gdzieś niżej, niewiele osób go uzupełnia). Chcemy też pokazać dodatkowe zdjęcia – jest jedno profilowe, ale można wrzucić ich do pięciu w ramach jednego profilu. Ważną funkcją będzie możliwość zaproszenia osoby do kontaktów i możliwość wysłania wiadomości.

Trzeba przemyśleć również kwestię edycji danych. Przyjmijmy, że można zmienić wszystkie informacje poza pseudonimem, który wybiera się raz podczas rejestracji w aplikacji. Chciałabym zobaczyć edycję opisów tekstowych – jak sobie ją wyobrażacie?

Niepotrzebne jest pokazywanie wszystkich ścieżek edycji każdego elementu, pokażcie proszę za to pełną ścieżkę zmiany tekstu opisów.

Artykuły, które mogą się przydać:

Material Design https://material.io/design/introduction/
Device Metrics, czyli wielkości, siatki i inne https://material.io/tools/devices/
programy do UI (również te darmowe) https://zebza.net/5-programow-do-ui-web-designu/
gridy/siatki https://zebza.net/gridy-czyli-siatki-w-projektowaniu/
inspiracje, gdzie ich szukać: https://zebza.net/inspiracje-ui-designera/
cykl video o procesie projektowania stron https://www.youtube.com/watch?v=0kXe_OsfiFY&list=PLKFvCI-qd3Ru-S0jRz7B0Fskig2Z1heIj

Jak wziąć udział w wyzwaniu?

Po prostu zrealizujcie zadanie i wyślijcie projekt na zebzowego maila: byzebza@gmail.com* w tytule wiadomości wpisując „Idź Pan w UI! #3”. Nazwa pliku, który do mnie wysyłacie powinna zachować ten wzór: “Imię_Pierwsza litera nazwiska_numer projektu”, czyli w moim przypadku byłoby to np. Natalia_B_1.png. Nienazwane projekty nie będą brane do live streama!

Jeżeli wysyłacie kilka wizualizacji (np. kilka ekranów) – określcie numerami w jakiej kolejności powinnam je oglądać i prezentować – to znacznie ułatwi mi też późniejsze streamowanie.

Zastrzegam, że przy dużej ilości zgłoszeń nie będę w stanie pokazać dokładnie każdego projektu.

Zwróćcie uwagę na format pliku – przyjmuję jedynie projekty dostarczone w formatach .jpg i .png, .gif lub w formie linku do prototypu – to znów ułatwienie dla mnie, a mniejsze ryzyko, że przez różnorodność formatów pominę któryś z waszych projektów.

? Stworzyłam też kurs o UI

A jeśli interesuje was zagadnienie komponentów UI to zachęcam do wzięcia udziału w kursie dla Eduweb, który stworzyłam całkiem niedawno – opowiadam w nim o najpopularniejszych komponentach interfejsu graficznego!

* Przesyłając swoje projekty na maila wyrażacie zgodę na przetwarzanie swoich danych osobowych, w celu realizacji zadania domowego. Dzięki temu będę mogła się z Wami skontaktować, dopytać o szczegóły projektu i ustalić jak wiele informacji mogę podać o Was w czasie lajwa (możecie też występować incognito). Jednocześnie macie prawo dostępu do treści swoich danych oraz ich poprawiania, wycofania zgody na ich przetwarzanie w każdym czasie, jak również, że podanie tych danych było dobrowolne. Ot tyle tych nudnych formalności!