Khoi Nguyen Design | Graphic Designer & Illustrator

DISCLAIMER:

TYPE

Web Design, UI/UX, Branding

DATE

Jan – Apr 2020

ROLE

Graphic Designer, Web Developer, Publisher

DELIVERABLES

1 completely coded & live e-commerce website.

During the first three months of 2020, I spent time building a pattern library using HTML, CSS, and some Javascript to be used for a fictional e-commerce site branded by me called inAn. This particular project case study demonstrates how the technical and logic-based element of coding blended beautifully with the creativity and stylization of graphic design and shows how I tackle these aspects together step-by-step.

inAn is an e-commerce website that sells artworks printed on a variety of print-on-demand media, similar to RedBubble or Etsy. For this project, we were able to decide what products our e-commerce website specializes in, so I chose to focus on one of my passions and also side hobby — art.

Exploration

Research was done on the market, competitors as well as personas and target audiences to get a general idea of the design direction. inAn's target audience is:

- middle-to-upper income household members or

- individuals aged 20–45 with an interest in home decor and/or renovations.

Style

Since inAn specializes in selling printed art products, I wanted viewers to be able to focus on them and not get distracted by the visual elements of the website. At the same time, however, I wanted inAn website to have a well-defined tone of voice, a distinct personality that creates a sense of identity and to not too formal-looking or UI-heavy. Thus, I opted for:

- a clean and minimal but

- fun and playful design with

- flat colours and simple layout & iconography

Inspiration Board

Colours

Colours play a big role in producing strong brand identity, and with the pre-defined tone of voice that I wanted to achieve, I decided on these light pastel colours for the branding of inAn:

Logo

A simple, square-format logo is chosen to represents the brand. I settled with simplicity and modernity that adheres to the brand guidelines; also, with a simpler design choice, the logo is more scalable.

Icons

To add to the overall clean and fun design, I made these lineart-style icons with rounded tips for a softer look:

Animations

An integral—and very, very fun—part of web design is transitions and animations. I decided to spice up the static website by adding some transition and animation bits onto simple interactions, like hovering, using CSS. Also, for experimental purposes, I wanted to try coding a toggle navigation on mobile screen sizes so I made it using some Javascript.

logo animation by Bounce.js

Sitemap

Final Website

The final product is a fully designed front-end level e-commerce website. Having incorporated pattern library into the process, some stable components like header, footer and navigation were only coded once, making the process incredibly convenient. I also utilized the code variables for design components like colour, type, shape fill & stroke etc. making the overall code extremely neat and highly readable.

I applied a consistent grid layout throughout the site with high responsiveness on both large and small devices; I also added appropriate — and also responsive — margins and paddings for a comfortable viewing experience.