Idź Pan w UI! #7 – strona produktu

projektowanie UI w sklepie

Więcej czasu, więcej rozkminek – po wakacyjnej przerwie wracamy do interfejsowych wyzwań w lekko odświeżonej formie (w dodatku partnerem serii został eduweb.pl!). Najważniejsza zmiana to czas realizacji – dochodziły mnie słuchy, że tydzień na wykonanie zadania to zdecydowanie za mało. Zgodnie z tą sugestią zmieniłam częstotliwość pojawiania się nowych zadań, na raz w miesiącu – raz w miesiącu odbędzie się więc stream podsumowujący zadanie, po którym pojawi się treść kolejnego.

Również nastąpi mała zmiana w samym streamowaniu – w związku z tym, że coraz więcej osób chętnych jest do wzięcia udziału w zabawie, nie będę w stanie skomentować i szeroko omówić każdego nadesłanego projektu (tak, jak robiłam to do tej pory). Będę więc omawiać najczęściej popełniane błędy lub pokazywać dobre praktyki – wszystko to, na przykładzie właśnie waszych projektów. No dobra, ale zobaczcie co tym razem dla Was przygotowałam!

O co chodzi w wyzwaniu?

Możecie wykorzystać zadanie 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 (podany poniżej). Ja 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 poprzednie lajwy. 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: Personalizacja produktu w sklepie
Deadline: 29 września 2019 (do końca dnia)
Format: strona internetowa na szerokość 1920 px
Cel zadania: W klasycznych Daily UI Challenge widzę często projekty widoku produktu w sklepie internetowym. I nie ma co ukrywać – często są zjawiskowe. Ale poza wizualną warstwą w takim sklepie ważna jest przede wszystkim ekspozycja produktu i łatwość użycia podstawowych funkcji. A tych taki prosty sklep potrafi mieć całkiem sporo. Niestety w wielu wyzwaniach ilość danych, które trzeba przedstawić ucieka. Serwuję Wam więc widok produktów z całkiem sporą ilością danych do zaprezentowania. No to zobaczcie co jest do wrzucenia.

Obowiązkowe elementy:

  1. Nazwa modelu (Buty damskie Originals Delta 80L)
  2. Cena w promocji: 239,40 zł (stara cena: 399,60 zł)
  3. Ocena użytkowników (4,5 na 5) – 60 opinii zostało zebranych
  4. Zdjęcie główne + dodatkowych 9 zdjęć
  5. Dostępne kolory: 16/20 (możecie podstawić tu dowolne odcienie)
  6. Dostępne rozmiary (36,37,38,39,40,41,42,43,44)
  7. Dodaj do koszyka
  8. Dodaj do ulubionych (wishlista)
  9. Szczegóły produktu: Pozwól, by każdy krok był okazją do ponownego zdefiniowania świata w butach Originals Delta 80L. Połączenie barw nadaje butom świeży wygląd, a udoskonalona amortyzacja umożliwia ci odbycie wygodnej podróży inspirowanej nowym milenium oraz światową sceną sportu.
  10. Cechy produktu: (Standardowy krój, Model sznurowany, Cholewka ze skóry gruboziarnistej, Dzielona, gumowa podeszwa)
  11. Produkty, które mogą Ci się spodobać (prezentacja kilku produktów z tej samej kategorii).

Całość powinna być osadzona w ramach sklepu internetowego. Wrzućcie więc przykładową stopkę i nawigację składającą się z logo, linków do stron (mężczyźni, kobiety, dzieci, kolekcje) i wyszukiwarki. Dodajcie też okruszki (breadcrumbs): Strona główna – Originals – Buty. Trochę tego jest!

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! #7”. 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 (jak wspomniałam na początku), ż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!

Zapis live streama

Zobacz też