inAn — Art E-commerce Website

Integration of Web Development and Graphic Design.

DISCLAIMER: THIS IS A SCHOOL PROJECT. ALL MATERIALS, INCLUDING FINAL PRODUCT MOCKUPS ARE FICTIONAL.
TYPE
Web Design, UI/UX, Branding
DATE
Jan – Apr 2020
ROLE
Graphic Designer, Web Developer, Publisher
DELIVERABLES
1 completely coded & live e-commerce website with:
  • Homepage
  • Products list
  • Product detail
  • Cart & Checkout
  • Bulk Sales & Orders
​​​​​​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.
scroll down for live site, or keep reading the case study
good read guaranteed :)
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.
display of inAn's logo
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.
homepage banner animation
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.
Homepage
A fun, bright and modern homepage with product displays and featured artists, as well as events card and newsletter subscription.
click to view in fullscreen
Products Page
Product List & Product Details.
Checkout & Cart
Thank you for viewing my project!
If you're interested in more case studies, click below, or check out my personal works!

View similar work

Back to Top