Landing Pages

Barber Shop Webpage Design

Back in 2019, I was primarily designing websites for construction and real estate companies. Wanting to improve my UI/UX skills in Adobe XD, I created this online bag shop as a portfolio project. Before this, I had been designing websites in Photoshop, but I wanted to transition to Adobe XD for better workflow and prototyping capabilities.

Tools & Approach in 2019

Tool Used: Adobe XD

Typography: Roboto

Design Style: Clean and structured layout with a focus on product presentation

Inspiration: E-commerce best practices and fashion-related web stores

Strengths of This Design

Even though it was an early-stage project, this design had a few strong points:

  • Well-structured layout with clear sections for hero, about, products, blogs, and a newsletter subscription
  • Consistent spacing and alignment for a clean and readable UI
  • Monochrome hero image creating a premium feel
  • Easy-to-read typography with Roboto

Areas for Improvement

Looking back, there are several areas that need refinement:

Typography Refinement: While Roboto is a solid font choice, I now experiment with more unique typography pairings to create better hierarchy and visual interest.

Better UI Details: Spacing, button styling, and interactive elements could be improved for a more polished look.

Modern Trends & Microinteractions: The design lacks subtle animations and hover effects that could enhance user experience.

Better Product Highlighting: The product section is functional but could have more engaging visuals, such as lifestyle images or product zoom effects.

How My Design Approach Has Changed

Since 2019, my design workflow has evolved significantly:

Stronger UX focus: I now conduct more research before starting a project to ensure the best user experience.

Better understanding of UI principles: Improved use of whitespace, typography, and modern design trends.

More interactive and responsive designs: I now incorporate animations, transitions, and better mobile-first approaches.

Using multiple tools: In addition to Adobe XD, I also work with Figma and Affinity tools for various design needs.

Plans for Redesigning This Project

I plan to redesign this e-commerce UI to reflect my current skills and approach. Here’s what I aim to improve:

  • More engaging product displays with lifestyle images and better product details
  • Better typography pairings for improved readability and branding
  • Enhanced user interactions with hover effects and smoother transitions
  • More balanced spacing and a modern UI feel

 

This project was a milestone in my design journey. While it had its strengths, it also highlighted areas where I needed to grow. Seeing how much I’ve improved over the years motivates me to keep refining my skills and staying updated with UI/UX trends. A redesign is coming soon! Stay tuned.

See our other portfolio

Other portfolio

BILHOME – Real Estate Landing Page Design

Landing Pages

HydraGlow – Smart Water Bottle Landing Page Design

Landing Pages

From Problem to Solution: Creating Arebos DE’s Return Portal

Landing Pages