The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
A fashion storefront needs to show the outfit and make its individual pieces easy to find.
For FORM, I paired a warm, editorial lookbook with clearly grouped product names, prices, and size choices.
Cream surfaces, charcoal typography, and consistent product cards connect the homepage with the desktop and mobile screen concepts.
One useful design principle from this project: give campaign imagery and shopping details their own readable zones. The collection can have a strong visual presence while the next product decision stays clear.
Explore the complete design case study:
https://contra.com/p/rNPRqooQ-form-fashion-e-commerce-website-design
When exploring a clothing collection, what helps you most: a styled outfit or an individual product grid?
great job
Thanks so much, Hassam! Really appreciate you taking the time to check it out.
Thank you so much, Ibad! That means a lot. Making it easy to find the right piece was exactly what I was aiming for, so I am glad that came through.
Thanks a lot, Saif! Appreciate the kind words.
Great work and an amazing experience! I really like how you’ve presented the website. Everything looks clean, well-organized, and super easy to navigate and shop.
Thanks so much, Muhammad. I am glad the presentation landed that way, because keeping it clean and easy to navigate was the whole point. A storefront can look good and still lose people if the path to a product feels like work. Did browsing the collections or moving from an outfit to a single product feel easier to you?
Love the editorial look.
Thank you, Vansita. That editorial feeling was exactly what I wanted the lookbook to carry, calm and confident rather than busy. I tried to let the photography set the mood and keep the shopping details quiet until someone wants them. Was there a particular image or section...
Amazing work
Thank you, Anayatul. I really appreciate you stopping by and taking a look. Is there a part of the storefront that stood out to you most, the lookbook or the product cards?
amazing!!
Thanks a lot, Sahil. Really appreciate the enthusiasm. Was there a section of the storefront that caught your eye first?
Thank you, Nexux Lab. Really appreciate you taking a look. Did anything in the storefront stand out to you most?
Showing prices and size choices right on the grouped product names is a smart call for fashion, it saves shoppers a click. The cream and charcoal pairing keeps the lookbook feeling editorial.
Thanks, Vineet, you picked up on exactly the detail I was hoping someone would notice. Putting price and size on the grouped name was about removing the one extra click that usually loses a shopper who is still deciding. And the cream and charcoal pairing was deliberate, it...
Clearly grouped names, prices and sizes is the part most fashion stores get wrong. The cream and charcoal combo keeps the lookbook warm without hurting readability.
Thanks, Senad. You are right, that grouping is where a lot of fashion stores make shopping harder than it needs to be. I wanted the cream and charcoal pairing to keep the lookbook warm but still easy to read, so the details never fight the imagery. Did the grouped names feel...
Adorable
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
A little throwback to one of our favorite collaborations with Lion Pose! 🧡
We worked with the founders to bring their vision to life through core brand identity, logo, and packaging design, creating a bold, playful visual language that feels fresh in the skincare space.
So lovely to see Lion Pose grow from its early days to the shelves of Sephora, with our packaging work recognized at the 2024 Dieline Awards!
Nice work
Designers, which direction would you go with: photography or illustration?
83 voted
69%
37 voted
31%
120 votes
Closed
I'll prefer photos, specially talking about organizations in your page, human faces and real scenarios can have a better effect in this case.
I bet you’ve NEVER seen button hover effects quite like these. And honestly, this time, I COOKED!
I went into this wanting to build a portfolio website. Somewhere along the way, it became so good that I’m genuinely considering making it my MAIN portfolio.
The scroll. The transitions. The interactions. But especially the button hover effects. Every little detail makes the experience feel alive, and I’ve probably spent more time hovering over these buttons than I’d like to admit.
But this wasn't just about making something that looks good. I wanted to build something that actually works for me.
THE BRANDING: I built the entire experience around my existing Sup* identity, keeping the personality intact while giving it a website that feels distinctly mine. From the visual language to the interactions, I wanted every part of the experience to feel intentional rather than like another template with a name slapped on it.
THE EXPERIENCE: As a designer, I obsess over the little things. The way an element responds when you hover over it. How scrolling feels. How one section transitions into the next. And how all of it comes together into an experience that feels cohesive.
The button interactions were easily one of my favourite parts to work on. But don't just take my word for it. Go try them yourself.
And yes, I designed a mobile-specific menu experience too. Please don't skip that part!
THE AUTOMATION: A portfolio shouldn't just display your work. It should help you get work.
One of my biggest goals was to turn this website into a funnel that brings potential clients directly to my Contra profile. I wanted to make it easier for people to discover my work, get in touch, and take the next step.
So, I built in form automation that delivers incoming submissions straight to my email and the website's admin side. No manually checking submissions across different places. The enquiries come to me, giving me a more direct way to keep track of potential opportunities.
It's a small but meaningful workflow that makes the website more than just a pretty front end.
THE STORY BEHIND THE BUILD - I've always wanted a portfolio website that properly showcases my work, personality, and approach to design. And once I found Contra, I realised I had the perfect opportunity to do more than just build a portfolio.
I could create a funnel that showcases my work and helps bring potential clients directly to my Contra profile.
When the @Base44 x @Contra HQ contest came along, it felt like the perfect excuse to bring that idea to life finally.
And the best part? This was my FIRST time trying @Base44. (Process video in the comments)
I've never had to type so little to get something this good. The recommendations were surprisingly on point, and instead of constantly fighting the tool to get what I had in mind, I could focus on what matters most to me: the experience, the details, and making the final product feel right.
As someone who genuinely enjoys pushing interfaces beyond the expected, that was a pretty exciting experience.
Because building something that looks good is one thing. Building something that looks good, feels good, works behind the scenes, and has an actual purpose? That's where the fun begins.
And Base44 made getting there ridiculously enjoyable.
This one's for the Base44 x Contra contest, and I might've accidentally built my new favourite portfolio in the process.
A couple of things I want you to try:
1. Hover over the buttons. Like Seriously.
2. Experience the mobile-specific menu.
3. Check out the custom favicon. Yes, that's me. 😉
Live website: https://supreet.base44.app/
Built around my Sup* identity. Designed to showcase my work. Automated to capture enquiries. Created to turn visitors into potential clients.
Now, please go hover over those buttons. You'll understand.
Base 44 Usage Proof:
