Czwarte 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! 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).
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: Filtrowanie listy produktów w sklepie
Deadline: 23 czerwca 2019 (do końca dnia)
Format: Projekt strony internetowej na szerokość ekranu 1366 px
Cel zadania: Pamiętacie sklep, do którego robiliśmy aplikację mobilną? Chodziło o wyszukiwanie w aplikacji. Teraz przyszedł czas na filtrowanie. To pozornie prosty element do obsłużenia, ale potrafi sprawić kilka problemów. Zanim zaczniecie projektować, pamiętajcie o tym żeby przejrzeć 10-20 różnych sklepów i zobaczyć jak działają różne filtry.
Przypomnę wam co pisałam przy okazji aplikacji. 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ść.
Zerknijcie też na lajwa podsumowującego drugie zadanie. Możecie znaleźć tam trochę wskazówek do tego jak myśleć o nowym zadaniu.
Obowiązkowe elementy: Buty są podzielone na Damskie, Męskie, Dziecięce. Są dostępne różne ich kategorie, tu przykład dla damskich (Botki, Czółenka, Klapki, Kozaki, Półbuty, Sandały, Trzewiki). Można je filtrować wg: rozmiaru (od 35-42), koloru (tu możecie pokazać dowolną gamę z jakiegoś sklepu), ceny (od 80-1299 zł), typu (całoroczne, jesienne, letnie, wiosenne, zimowe), rodzaju obcasa (koturna, obcas, platforma, szpilka, słupek), wysokości obcasa (0-4,4-8,8-10, ponad 10), materiału (Bawełna, Satyna, Skóra, Skóra ekologiczna, Sztruks, Tworzywo sztuczne).
Najważniejszy jest widok filtrów i pokazanie czym różni się widok przed i po filtrowaniu. Jeżeli w projekcie znajdzie się coś zwijanego, ukrytego, to fajnie by było to również pokazać.
Logo i główna nawigacja mogą być robocze i można wstawić tam cokolwiek, co będzie pasowało do projektu. Pamiętajcie jednak, że przy publikacji swojego projektu w portfolio, musicie mieć pewność, że nie łamiecie praw innych osób!
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! #4”. 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!
