Letha

An e-commerce website for a leather shoe company called ‘Letha’ (concept).

Picture of the project

OVERVIEW

Project scope: 2 weeks

Project type: Course assignment (FEU1)

Role: Developer and designer

Tasks: Logo design, website design, Develop

Tools: Adobe XD, Adobe Illustrator, HTML/CSS, Bootstrap

Letha was a school project to make the layout and design for an e-commerce shoe website.

Letha was a school project!


THE TASK

The task for this project was to create an e-commerce website for a leather shoe company called ‘Letha’. The company emphasizes that their shoes are handcrafted and that the leather they use is organic and sustainably made. Letha has a target audience of affluent and trendy 20 and 30 somethings.

PROCESS

To make this project, I had to start it of by creating the design of the website, and then develop it. The steps I did were as follows:

  1. Design - Colors, icons, layout and prototype
  2. Development
  3. Result

1. Design


COLORS

The colors for Letha was thought to be light, with the feeling of leather, thus the light brown and brown color.

Picture of the colors

ICONS AND ILLUSTRATIONS

Font Awesome icons were used in this project, so I did not create any of them myself. The logo was created by me.

Picture of icons

LAYOUT AND PROTOTYPE

I started the task by making a prototype of the website using Adobe XD. I tried to make it look as clean as I could, without making it seem boring. I designed eight different pages with seven unique designs.

Picture of Layout and Prototype

2. Development


CODE

TFor this project, I used Bootstrap 4 for the layout. This is a good framework that makes it easy to prototype the site with fast results. I quickly understood that this task was possible to do according to my design.

On desktop, I have used one modal-image for displaying the product. On mobile. this is replaced with a carousel you can click through yourself.

Picture of example of the code

3. Result


CHECK OUT THE FINAL RESULT!

Picture of the home screen

That´s it! Thank you for reading.