Navigation

Navigation

Project header

Consistency at scale: Creating the Lithos UI Kit

Consistency at scale: Creating the Lithos UI Kit

Consistency at scale:

Creating the Lithos UI Kit

Lithos is a hand-crafted high-end jewelry brand from Greece. They wanted to go international through web3 NFT selling. Buy a hand crafted piece, get it as a 3D NFT which you can later trade. A simple concept. Unlike monkey pictures costing you a fortune which you lose after less than a month, this project seemed more genuine, giving you actual value.

Project type

UI design

Landing Page

3D

Timeline

November 2023 - December 2023

Mobile phone screens for the landing page, in cyberpunk style

Click to zoom

Click to zoom

Mobile phone screens for the landing page, in cyberpunk style

Click to zoom

Mobile first

When designing the user interface, the mobile view first in mind. As most of people today consume digital media through their mobile screens. The differences between the desktop and mobile view are minimal. In that way the design is responsive and the transitions are seamless.

Desktop screens for the landing page, in cyberpunk style

Click to zoom

Click to zoom

Desktop screens for the landing page, in cyberpunk style

Click to zoom

Desktop

The obstacle while creating this project was cyber modernism. Creating an experience through the user interface that contains: a techy look, high-end jewelry and a note of elegance. A pretty daunting task at first glance, but the project and fun that I had while creating it begs the differ. With the brief in mind, I came up with this user interface which the client loved. It was just the perfect match and balance of functionality and aesthetics. 

Project color scheme
Project color scheme
Project typography

Click to zoom

Click to zoom

Project typography

Click to zoom

Color scheme and typography

A limited color palette of blue and yellow helped in giving a pop to the whole interface. The yellow stands out pretty bright and is easily readable and accessible to many groups of people with and without visual impairments.

Page components and UI elements for landing page

Click to zoom

Click to zoom

Page components and UI elements for landing page

Click to zoom

Page components and elements for landing page UI

Click to zoom

Click to zoom

Page components and elements for landing page UI

Click to zoom

Custom made icons

Click to zoom

Click to zoom

Custom made icons

Click to zoom

Landing page components in 3D

Click to zoom

Click to zoom

Landing page components in 3D

Click to zoom

UI components

All of the blocks/ boxes were crafted in the same style, yet adequate changes were made to certain boxes in regards to their function. Probably the most important part in this project was to have the right balance of functionality and aesthetic. One should never outweigh the other when it comes to user interface design.