Kolejne 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!
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 poprzedniego lajwa. Więcej szczegółów odnośnie wysyłki projektów do wyzwania zamieściłam poniżej!
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: Wyszukiwanie w aplikacji mobilnej
Deadline: 26 maja 2019 (do końca dnia)
Format: aplikacja mobilna na Google Pixel (411×731)
Cel zadania: Prezentacja w jaki sposób działa wyszukiwanie informacji w aplikacji oraz jak pojawiają się wyniki tego wyszukiwania. Umiejscowienie wyszukiwarki jest w zasadzie dowolne. Zwróćcie jednak uwagę na platformę i możliwe przyzwyczajenia użytkowników do pewnych rozwiązań (Android). Zastosowanie 100% Material Design nie jest jednak wymagane.
Wyobraźcie sobie, że pracujecie właśnie nad projektem internetowego sklepu z ręcznie szytym obuwiem. To nieduża marka sprzedająca dość drogie produkty (jako referencję możecie zerknąć na modowe marki luksusowe). Grupa docelowa to (głównie) kobiety 30-40 lat, które nie mają problemu by wydać na akcesoria modowe po kilka lub kilkanaście tysięcy. Zazwyczaj interesują się modą, jeżdżą na koniec świata by robić sobie zdjęcia w drogich hotelach i przywiązują dużą wagę do wyglądu wszystkiego co ich otacza.
Projekt powinna cechować zatem elegancja, ale jednocześnie nowoczesność.
Obowiązkowe elementy: Nawigacja (dowolna forma) i wyszukiwarka. Do tego pokażcie wyniki wyszukiwania. Pokażcie co dzieje się po wpisaniu hasła kozaki i wyszukaniu tego hasła (powinna pojawić się pewnie jakaś lista wyszukanych produktów).
Zerknijcie na aplikacje sklepów internetowych i czym różnią się od mobilnych stron sklepów internetowych. Zbierzcie w pierwszej kolejności inspiracje, screeny, a dopiero później siadajcie do projektowania.
Na koniec sprawdźcie projekt na telefonie (nawet jeśli nie jest dokładnie tej rozdzielczości co projekt). To pomoże wam określić czy poszczególne elementy nie są zbyt małe lub zbyt duże. Czy teksty są czytelne, czy kolory odpowiednio wyraziste, a elementy interaktywne na tyle duże by łatwo trafić w nie palcem?
Obserwujcie, projektujcie i testujecie – powodzenia!
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! #2”. 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!
Nagranie ze spotkania na żywo
Link do nagrania na żywo możecie znaleźć tutaj: https://www.youtube.com/watch?v=0QB-oEsNwQU
