Client: Student Project - Client Site
Project Type: Interface Programming
Software: HTML/CSS/JS, Figma, Adobe Illustrator, and Adobe Photoshop

SMALL KINE GIFT WEBSITE

In our ART249 and ART258 class, we got to choose our own website to contruct whether it be from existing ones or building from scratch. The website I chose was from an existing one that is from an existing store called "Small Kine Gift".

Small Kine Gift is a charming boutique in Kaimukī, Honolulu, offering a playful mix of locally inspired goods, design-forward items, and quirky novelties. They have a current website that is functional however, it doesn’t capture the essence of the store itself. The curated design is going against cleanliness and more so leaning to a maximalist aesthetic but also touching into practicality for UI purposes.

I started by compiling the moodboards and I went with 3 different directions until I settled with the final one. While doing that I also started collecting assets such as .pngs and other images that best represent the store itself to piece the prototype together with the help of illustrator for the graphics and Photoshop for the image resolutions.

I went over two rounds of wireframes; trying to find a concept that embodies 'Small Kine Gift' and so I was inspired with the previous moodboards as well as the use of analog items and decided on a folder-type navigation and a scroll up-and-down.

Style Tile A - Retro

This style tile is more inspired by polaroid cameras / digital cameras since all of their merchandise evokes a sense of nostalgia and familiarity as well as childhood.

Style Tile B - Earthy

This style tile is inspired by earth tones; leaning more onto the nature aesthetic and the greens that are involved in their current website.

Style Tile C - Scrapbook

This style tile is more of an extension from Style Tile A (Retro). The colors are more vivid yet cohesive to bring a ‘chaos’ feel to the interface. Also, sticking to one typeface since the site will solely rely most of analog characters.

Figma Prototyping

roundone

roundtwo

I did my initial prototyping in Figma and have trial and error with the UI design since my main feature was wanting to implement the folder-type design where if you click through it would scroll to its respective section.

With much decisions to make, I decided on merging Round One and Round Two which resulted into the current implemented interface, still using Figma for the final prototype before heading on to coding it.

Click the image below for the final Figma file!

figma prototype

Coding the Website

I realized that coding the website would be quite a challenge and that not everything in the Figma file would be the same as the coded site. So, I made sure to implement the imporant features such as the folder-style navigation and most of the styling in the site.

There are some features that are achievable and some that are not due to the short amount of time but regardless of those technicalities, it was a learning curve and a fun project to work on.

viewsite