theluckyreads

2023

Services

UI design

HTML / CSS

Javascript

Visit website

theluckyreads.pl
Image showing sections: latest Instagram posts and recommended books

Sections: latest Instagram posts and recommended books

Image showing mobile view of collaborations and animated GIFs carousels

Mobile view of collaborations and animated GIFs carousels

Project overview

The one-page website project for the bookstagram influencer (theluckyreads) was created out of the need for a single space containing all social media links, reviews, a list of recommended books, logos of collaborating publishers, and contact information.

Goal

The main goal was responsiveness and readability on various devices, with a focus on mobile devices (Instagram theme). The visual part was to be kept in both the influencer's vibe and in the simplest form possible. It was necessary to highlight individual sections so that the user could easily find what is interesting to them.

Image showing example personas and content mockups

Example personas and content mockups

Image showing visualisation of the site map

Visualisation of the site map

UX

The arrangement of elements and the sequencing of sections was made possible by creating example personas and content mockups. The mockup helped focus on functionality and define which content (e.g., headings, texts, images, CTAs) would appear in each section. This allowed for the modules to be filled with content that is the most important to the visitors.

The clear site map allows users to easily and logically navigate between sections, quickly find the information they need, and effectively group elements. As a result, an intuitive and user-friendly navigation system was created.

UI

The color palette and typography were tailored to the influencer's branding, maintaining her visual style. The website was based on a 12-column grid, which allowed for flexibility in the layout of individual sections and their elements. This type of grid guarantees harmony and balance between the elements, enhancing the overall aesthetic of the design.

Image showing mockup with 12 column grid

Mockup with 12-column grid

Image showing hero section desktop view

Hero section desktop view

Image showing animated GIFs carousel and footer view

Animated GIFs carousel and footer view

Other works

Website redesign for the Digital Designer course

Stradale Classics

Website redesign for the Digital Designer course

Informational one-page website

Normobaria

Informational one-page website