Karisma Website

An ecommerce website selling furniture, crafted with a minimal brand aesthetic. “Karisma furniture, charismatic living”.

QUICK LINKS

Target User

Online shoppers who prefer the convenience of browsing and purchasing high-quality furniture through an intuitive e-commerce platform. They may be homeowners or renters who seek elegan designs for their living spaces.


Information architecture

This helped me visualize the overall structure of my website and identify the pages that need to be built. The header of the sitemap includes a search bar, account login, shopping cart, and a main menu with options for "Product," "About," "Contact," and "New" to provide easy navigation for customers.

information architecture

User flow

A main user flow has been developed to provide users with a clear path through the Karisma website, from discovering a product to deciding to purchase it.

user flow

DESIGN SYSTEM

Typography

I use two font families in this project: Poppins for body text and Italiana for display.

typography

Color

Teal #505b44 is the accent (brand) color. I also have neutral and semantic colors. Besides the solid colors, alpha colors helped make the interface more subtle in some cases.

color

Iconography

Meet my favorite set of simply beautiful open-source icons: the Feather Icons pack.

iconography

Components

My favorite approach in this realm is "Atomic Design." It begins with the smallest pieces—atoms—and expands into molecules, organisms, templates, and pages. In this project, however, I've only reached the organisms stage.

iconography

Others

Including elevation, spacing.

iconography

VISUALS

low fidelity wireframe

Overview

Pre-design

Design System

Visuals