DISCLAIMER: THIS IS A SCHOOL PROJECT. ALL MATERIALS, INCLUDING FINAL PRODUCT MOCKUPS ARE FICTIONAL.
Web Design, UI/UX, Branding
Jan – Apr 2020
Graphic Designer, Web Developer, Publisher
1 completely coded & live e-commerce website.
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.
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.
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
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:
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.
To add to the overall clean and fun design, I made these lineart-style icons with rounded tips for a softer look:
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.
A fun, bright and modern homepage with product displays and featured artists, as well as events card and newsletter subscription.
Product List & Product Details.
Checkout & Cart