Opis projektu

ZaQanna zajmuje się sprzedażą ubrań z przesłaniem. Projekt polegał na stworzeniu w pełni customowego sklepu internetowego. Ważnym było aby potencjalny klient jak najwygodniej przemieszczał się po stronie oraz finalizował zakup. Wyjątkową cechą tej marki są włożone w nie pasje. Ubrania do czytania to jest hasło przewodnie ZaQanny. Właścicielka strony jest bardzo otwartą osobą i tworzy ubrania, które niosą za sobą przekaz “moda, która edukuje”.

Cel projektu

Książki i cytaty
Unikalne ubrania
Przejżysty przekaz

Moda, która edukuje. Cytaty z książek bądź z innych źródeł mają towarzyszyć ubraniom, które możemy kupić u ZaQanny. Tym samym ważnym jest aby były one prezentowane na stronie jako kluczowy element wizualny. Ubrania jakie możemy znaleźć w ofercie są pełne wyrazu, koloru oraz przekazu. Liczba ubrań jest również ograniczona, więc bazując na niewielkiej ilości zdjęcia raczej powinny być duże i dobrze wyeksponowane. Właścicielce zależy na silnym przekazie jej wartości. Edukacja, książki, teatr, wolność i swoboda. To są kluczowe cechy tego projektu i z nimi od samego początku musi zostać oznajmniony potencjalny klient.

Szczegóły projektu

Użyte narzędzia: Adobe XD, Photoshop, Ilustrator

Strona klienta: zaqanna.com

Tagi: UX, UI, Odzież, sklep

CASE STUDY / UIUX / 2021

Projekt strony internetowej

i logo dla marki odzieżowej

Wprowadzenie

ZaQanna zajmuje się sprzedażą ubrań za pomocą sklepu internetowego. Projekt polegał na stworzeniu sklepu internetowego wraz z checkoutem oraz kontem użytkownika. Ważnym było aby potencjalny klient jak najwygodniej przemieszczał się po stronie oraz finalizował zakup.

Wyjątkową cechą tej marki są włożone w nie pasje. Ubrania do czytania to jest hasło przewodnie ZaQanny. Właścicielka strony jest bardzo otwartą osobą i tworzy ubrania, które niosą za sobą przekaz “moda, która edukuje”.

Cele projektowe

Książki i cytaty

Unikalne ubrania

Ubrania jakie możemy znaleźć w ofercie są pełne wyrazu, koloru oraz przekazu. Liczba ubrań jest również ograniczona, więc bazując na niewielkiej ilości zdjęcia raczej powinny być duże i dobrze wyeksponowane.

Przejrzysty przekaz

Właścicielce zależy na silnym przekazie jej wartości. Edukacja, książki, teatr, wolność i swoboda. To są kluczowe cechy tego projektu i z nimi od samego początku musi zostać oznajmniony potencjalny klient.

Badania

W celu potwierdzenia postawionych hipotez przeanalizowano obecny rynek.

Biorąc pod uwagę zamysł połączenia książek i cytatów z marką odzieżową projekt strony musiał oddawać to co poprawne w sklepach odzieżowych, ale również przy tym nawiązując do wybranego tematu przewodniego. Duża liczba zdjęć, najlepiej jak najwyższej jakości. Zdjęcia przy mniejszej ilości asortymentu mogą być większe aby sprawić wrażenie, że jest ich więcej niż w rzeczywistości. Motyw kolorystyczny został pobrany z książek.

Ciemno niebieski jako kolor tuszu, oraz kremowy jako kolor papieru, strony. Na rynku nie ma witryny oferującej markę odzieżową o takiej tematyce. Raczej popularnym motywem jest duża ilość zdjęć oraz wygodna nawigacja i precyzyjna filtracja asortymentu. Przekaz w tego typu markach jest niezwykle ważny, ponieważ dzięki niemu dana odzież wyróżnia się na tle innych tworząc swój silnie ukierunkowany wizerunek.

Flow

Ważnym elementem tworzenia strony jest świadome projektowanie. Aby skrócić czas i poprawić doznania odwiedzającego w trakcie korzystania ze strony, została stworzona mapa poruszania po niej, która następnie w procesie eliminacji została uszczuplona do zminimalizowania potrzebnych kroków do wybranych funkcji.

Lo-fi makiety

Makiety pozwalają sprawdzić płynność wizualną serwisu oraz przetestować najlepsze rozwiązania i rozmieszczenie elementów. Pozwalają również uniknąć problemów z wyświetlaniem na telefonie lub tablecie.

Styl graficzny

W tym miejscu przedstawione zostaną założenia stylu graficznego. Pozwoli to przedstawić drogę procesów projektowych oraz wyjaśnić zastosowane rozwiązania.

Kolory

Użyte kolory zostały przetestowane pod kątem wystarczającego kontrastu, aby były widoczne na wszystkich wyświetlaczach.

Kolor kremowy został wybrany ze względu na mocne powiązanie z papierem oraz książkami. W języku francuskim “écru” oznacza nie wybielone, łącząc to z kreatywnością zamysłu strony i z jej założoną frywolnością, tworzy to dobre połączenie.

Kolor kremowy oraz pomarańczowy wywodzą się z jednej palety barw. Konsekwentnie kolorem akcentowym został odcień pomarańczowego. Jako mocniejszy kolor wybija się na tle innych informując o swojej wadze.

Wszystkie teksty na stronie są koloru ciemno niebieskiego. Podobnie jak tusz w piórach. Dodatkowo idealnie łączy się z pozostałymi kolorami.

Typografia

Playfair Display

Regular

Bardzo elegancki krój pisma jakim jest Playfair Display, tylko podkreśla wyjątkowość zamysłu na stronę. Wyglądający jak kaligraficzne dzieło pobudza zamysł książki, rzemieślniczej pracy oraz wyciąga design poza ramy szablonowości, tworząc coś bardziej kreatywnego.

Josefin Sans

Light Regular Semibold

Delikatny krój pisma taki jak Josefin Sans został wybrany jako kontrast do intensywnych nagłówków przy użyciu kroju pisma Special Elite. Glify są dość wyjątkowe, z ciekawymi rozwiązanami takimi jak zciętę “e” itp. a dodatkowo są przyjemne w czytaniu. Nadają projektowi troszkę bardziej zjawiskowego klimatu.

Wybrane elementy design systemu

Aby nakreślić wygląd strony oraz jej poszczególnych elementów a dodatkowo zachować konsekwentny styl, poniżej został przedstawiony skrócony design system.