Web Design Project

Date: October 2025 – December 2025

Project Type: Individual project

My Role: UX/UI Designer, Front-End Developer, Brand Designer

THE CHALLENGE

“How can a new streetwear brand stand out online while delivering a smooth, responsive shopping experience?
FITSEVERYDAY aims to solve this by merging custom apparel design with a fully developed e-commerce website — built, branded, and launched from scratch.”

Website Interface
brand Identity

About The Project

FITSEVERYDAY is a 14-week e-commerce web design project where I created a fully responsive clothing website from scratch. Inspired by the challenge of building a brand and storefront from the ground up, I designed the entire brand identity, from the logo and apparel graphics to the visual style of the website. The development process blended self-taught coding, AI assistance, YouTube tutorials, pre-built templates. Beyond design and development, I also handled the technical side: purchasing the domain, configuring the C-Panel, and managing the web hosting to successfully launch the live site. Everything was completed under the supervision of Professor Daniel Wong, allowing me to bring both creative direction and technical execution together. The result is a cohesive digital shopping experience that aligns seamlessly with the FITSEVERYDAY brand, casual, clean, and style-forward.

Young man with brown hair wearing a black hoodie with white text, sitting against a light background with shadows, on a website promoting new arrivals of casual clothing.

  • I built the FITSEVERYDAY website entirely from scratch using HTML and CSS, with some JavaScript for interactive features. I also handled domain registration, hosting, and CPanel setup to bring the site live.

  • I designed a clean, responsive layout that reflects the brand’s bold streetwear identity. Every page was crafted with usability in mind — from product displays to navigation — ensuring a smooth shopping experience across devices.

  • I created the FITSEVERYDAY brand identity, including the logo, typography, and visual tone. I also designed custom apparel mockups (hoodies, tees) and integrated them into the site to build a cohesive look and feel.

Black background with white text that says "FITS EVERYDAY".

Starting with some quick Figma sketches

Building the FITSEVERYDAY Brand Identity and Logo

Then I started developing the website alongside designing mockups for the clothing line.​​​​​​​

Black
Grey-black-logo
Grey-white-logo
blue-black-logo
blue-white-logo
cream-black-logo
white-black0logo
tshirt-black
tshirt-black-back
tshirt-blue
tshirt-blue
tshirt-light-blue
tshirt-brown
tshirt-brown-back
tshirt-grey-front
tshirt-grey-
unique-tshirt
unique-tshirt-back
tshirt-front
tshirt-back

To showcase the apparel in context, I used AI tools and websites to generate models wearing the hoodies and t-shirts I designed. These visuals helped bring the brand to life on the website and added extra value to the user experience.

While the AI-generated results weren’t always perfect, I retouched the images in Photoshop where needed, I intentionally left some minor imperfections, as the focus of the project was primarily on web design and branding.

Young man wearing a black hoodie with the text 'FITS EVERYDAY' sitting on a black stool against a light blue background.
A young man sitting on a black stool against a plain light blue background. He is wearing a gray hoodie with the text "FIT'S EVERYDAY" and beige cargo pants, with his left leg crossed over his right. He has a neutral expression and is looking at the
A young man sitting on a black stool against a plain light blue background. He is wearing a dark hoodie with white text that says 'FITS EVERYDAY,' beige cargo pants, and black sneakers with white soles.
Young woman with long brown hair wearing a black hoodie with white text that reads 'FITS EVERYDAY' and light blue jeans.
A young man with dark hair wearing a black hoodie with the text 'FITS EVERYDAY' sitting against a gray wall with shadows from a window.
A young man wearing a beige and pink striped T-shirt and navy blue pants, sitting against a plain light background.
A young man with dark skin and short hair sitting against a plain light gray background, looking directly at the camera with a neutral expression.
Person standing against a plain light background, wearing a white oversized T-shirt, black cargo pants, and brown shoes, looking down and touching the hem of the shirt.
A young man with a shaved head wearing a black T-shirt with bold white text that says 'FITS EVERYDAY' and olive green cargo pants, standing against a plain grey background.
A young person with a shaved head wearing a black t-shirt, olive cargo pants, and hiking boots against a plain grey background.
Young man with a buzz cut wearing a black T-shirt with small white print on the upper left and olive green cargo pants standing against a neutral background.
A young man with a shaved head wearing a loose white t-shirt, olive green cargo pants, and hiking shoes, standing against a plain gray background.

During the project, I found a modeling photo that matched the style of my brand.

I recreated it using Photoshop by editing and resizing the image to feature my own clothing design, incorporating it into the visual lineup of the collection.

A man sitting against a plain light background, wearing a beige t-shirt with the words 'FITS EVERYDAY' on the chest, and navy pants.
A young man sitting against a plain light gray background, wearing a beige T-shirt and dark pants, looking directly at the camera with a neutral expression.
A color-blocked T-shirt with horizontal bands of beige, white, and brown laid flat on a light background.
Color block T-shirt with beige, white, and brown horizontal sections, featuring small text that says 'FITS EVERYDAY' on the chest.
A man wearing a beige T-shirt with the text "FITS EVERYDAY" sitting against a plain background, advertising a summer sale with 20% off on new arrivals, and a "Shop Now" button.

FITSEVERYDAY website UI, showing how the design looks across different devices.

The homepage delivers a clear and engaging first impression. Bold typography, a focused CTA, and clean navigation make it easy for users to explore new arrivals and product categories without friction.

This section uses clear imagery and simple labels to guide users toward specific product types.

The centered layout and equal sizing create a balanced, scannable interface that encourages exploration without overwhelming the user.

This screen highlights a limited-time offer with strong visual hierarchy and a clear CTA. The layout keeps the user's focus on the discount message while smoothly guiding them into product exploration below. It's clean, direct, and conversion-focused.

The product grid is simple and scannable, with clear pricing, consistent layout, and a “Sale” tag that draws attention.

The footer provides quick access to key links and services, offering smooth navigation while reinforcing trust and usability.

Product Page – T-Shirts

This layout presents products with consistent spacing, clear pricing, and visual sale indicators, allowing for easy comparison. Category tabs at the top improve browsing efficiency and make filtering intuitive.

Product Page – Explore More (Hoodies)

The horizontal scroll in the “Explore More” section adds interactivity while encouraging deeper browsing. Paired with a sticky navigation bar and clean footer, the layout feels structured and user-friendly.

Add To Cart Experience

Hoodies Page

Mobile Interface - Responsive Design