Ecommerce website interface
Łukasz Kmieć
Like this project
Posted May 22, 2022
Wool clothing store. The project included designing the interface (UX/UI) for both desktop and mobile versions.
Likes
0
Views
36
Wool clothing store.
Project and scope
— Research
— UX / UI
— Design system
The project is based on a 12-column grid with a width of 1270 pixels. Columns with a width of 60 pixels and a 50-pixel gap between them ensure an appropriate amount of spacing between elements.
The font pair used in the project includes the commercial Gilroy and Lora available on Google Fonts. Gilroy is used for headings and buttons, while Lora is used as the content font.
Homepage
The home page distributes traffic throughout the store. We have two main categories highlighted - women and men and a link to the product collection. Below, there is a tile for current promotions which can be replaced with another one using the administration panel, e.g. directing to an article or any category. Thanks to navigation, we have access to the basket, wishlist and search engine at any time.
Index page
Products are displayed on a standard index with pagination. Fields can be expanded to narrow down the displayed results to products of a specific category, color, size, or price. In addition to the category division, products are also grouped into special collections.
Product page
The product page shows photos with descriptions and allows you to choose the color, size, and quantity of the product. If the product is out of stock, you can sign up for a notification to receive an email when the product is back in stock.
Bag
The product bag is built similarly to a wishlist, i.e. a collection of saved products that we do not want to forget about and to which we can quickly return later.
Register and login
Registration and login forms in desktop and mobile versions.
Other pages
The website contains several information pages for which special templates have been designed.
