Idź Pan w UI! #1 – formularz rejestracyjny - grafika, projektowanie, UX design

Czas na pierwsze zadanie z cyklu Idź Pan w UI! Będę raz na jakiś czas wrzucać tu prosty projekt z zakresu UI (ale wymagający również przemyślenia pewnych zagadnień, nie tylko odtwarzania obrazków). Dzisiaj zaczniemy jednak od podstaw.

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 cykl ćwiczeń Logo Brief. Tam co miesiąc również przeprowadzamy taki Live! 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: Formularz rejestracyjny

Deadline: 12 maja 2019 (do końca dnia)

Format: Projekt na stronę internetową (1366×768)

Cel zadania: Celem zadania jest zaprojektowanie widoku, który będzie składał się głównie z formularza rejestracji. Ma to być dokładnie formularz rejestracyjny na landing page, który pozwala na dołączenie do wirtualnej biblioteki wydawnictwa sprzedającego książki o IT i biznesie.

Oczywiście oprócz formularza na stronie powinno pojawić się logo i nawigacja, mała stopka informacyjna i tekst wstępu. Dokładny zakres informacji, które muszą się pojawić znajdziecie niżej.

Głównymi odbiorcami tej strony są osoby, które wchodzą w branżę IT, interesują się biznesem lub chcą rozwijać swoje firmy, które działają już od jakiegoś czasu. To w zdecydowanej większości mężczyźni, w wieku 30-40 lat. Konkurencyjną usługą jest np. biblioteka O’Reilly Media. Serwis działa wyłącznie w języku polskim.

Obowiązkowe elementy: Logo w tej chwili możecie zamarkować jakimś prostokątem, a w nawigacji powinny znaleźć się zakładki: Wydawnictwo, Oferta, Zostań autorem, Kontakt.

Linki i dodatkowe informacje, które powinny znaleźć się na stronie: Regulamin serwisu, Zniżki edukacyjne, Polityka prywatności, a także linki do serwisów społecznościowych (Facebook, Instagram, LinkedIn, YouTube).

Najważniejszym elementem jest oczywiście formularz rejestracyjny. Informacje, które chcemy zebrać od użytkowników na tym etapie to: imię, nazwisko, e-mail i hasło (powinno składać się z conajmniej 6 znaków i składać się z minimum jednej cyfry i jednego znaku specjalnego). W przypadku klienta firmowego zbieramy jeszcze nazwę firmy i ilość pracowników (przedziały to 1-5,6-15, 16-50, 51+). Wszystkie pola są polami obowiązkowymi.

Dodatkowo użytkownicy muszą udzielić zgody na przetwarzanie danych osobowych (np. Wyrażam zgodę na przetwarzanie moich danych osobowych zgodnie z ustawą o ochronie danych osobowych w jakimś celu. Jestem poinformowany, że przysługuje mi prawo dostępu do swoich danych.). Mogą też dołączyć przy okazji do newslettera (np. Wyrażam zgodę na przesyłanie na mój adres e-mail informacji o nowościach, promocjach i produktach pochodzących od Wydawnictwo Media. Wiem, że w każdej chwili mogę wycofać tę zgodę.).

Roboczy tekst wstępu: Dołącz do największej bazy książek poświęconych biznesowi w IT. Zarejestruj się i skorzystaj z darmowego tygodnia próbnego.

Dodatkowe elementy, czyli jak wycisnąć więcej z wyzwania?

W podstawowej wersji zadania trzeba wykonać po prostu projekt ekranu z widokiem formularza. Ale w codziennej pracy bardzo rzadko nasza praca ogranicza się właśnie do jednego ekranu. Jeśli chcecie wyciągnąć więcej z ćwiczeń, zaprojektujcie również wszystkie możliwe stany tego formularza – jak zachowuje się element po kliknięciu, jak wygląda walidacja, gdy użytkownik źle coś uzupełni. Z jednego ekranu można wyciągnąć całkiem sporo, a potem ciekawie pokazać to w portfolio!

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

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! #1”. 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.

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 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. 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!