theluckyreads

2023

Zakres prac

UI design

HTML / CSS

Javascript

Odwiedź stronę

theluckyreads.pl
Obrazek z sekcjami: najnowsze posty z Instagrama i rekomendowane książki

Sekcje: najnowsze posty z Instagrama i rekomendowane książki

Obrazek z widokiem mobilnym sekcji współpraca i karuzelą z animowanymi GIFami

Widok mobilny sekcji współpraca i karuzela z animowanymi GIFami

Przegląd projektu

Projekt strony one-page dla influencerki bookstagramowej (theluckyreads) powstał z potrzeby posiadania jednej przestrzeni ze wszystkimi linkami społecznościowymi, recenzjami, listą polecanych książek, logotypami współpracujących wydawnictw oraz kontaktem.

Cel projektu

Głównym zadaniem była responsywność i czytelność na różnych urządzeniach, z naciskiem na urządzenia mobilne (tematyka instagramowa). Część wizualna miała zostać utrzymana zarówno w vibe influencerki, jak i w jak najprostszej formie. Konieczne było wyróżnienie poszczególnych sekcji, tak aby użytkownik łatwo mógł odnaleźć, to co go interesuje.

Obrazek z przykładowymi personami i makietą contentową

Przykładowe persony i makieta contentowa

Obrazek z wizualizacją mapy strony

Wizualizacja mapy strony

UX

Poukładanie elementów oraz ustawienie kolejności sekcji było możliwe dzięki stworzeniu przykładowych person oraz makiet contentowych. Makieta pomaga skupić się na funkcjonalności oraz zdefiniować, jakie treści (np. nagłówki, teksty, obrazy, CTA) znajdą się w poszczególnych sekcjach. Udało się wypełnić moduły treściami, które są najważniejsze dla odwiedzających.

Przejrzysta mapa strony pozwala użytkownikowi łatwo i logicznie przejść między sekcjami, szybko odnajdywać potrzebne informacje oraz skutecznie grupować elementy. W efekcie została stworzona intuicyjna i wygodna nawigacja.

UI

Paleta kolorów oraz typografia zostały dopasowane do brandingu influencerki zachowując jej styl wizualny. Strona została oparta na 12-kolumnowej siatce, która pozwoliła na elastyczność układu poszczególnych sekcji oraz ich elementów. Tego typu siatka zapewniła harmonię i równowagę między elementami, co zwiększyło estetykę projektu.

Obrazek przedstawiający makietę z siatką 12-kolumnową

Makieta z siatką 12-kolumnową

Obrazek z widokiem desktopowym na Hero section

Widok desktopowy na Hero section

Obrazek z karuzelą z animowanymi GIFami oraz widokiem na footer

Karuzela z animowanymi GIFami oraz widok na stopkę

Pozostałe realizacje

Re-design strony na potrzeby kursu Digital Designer

Stradale Classics

Re-design strony na potrzeby kursu Digital Designer

Informacyjna strona typu one-page

Normobaria

Informacyjna strona typu one-page