1013-Barbershop

1013 Barbershop

Category

UI/UX Design

Roles

HTML/CSS Scripting & Rebranding

Programs

Adobe Photoshop, Illustrator,
Visual Studio Code

How can a website for men’s hair services reflect its identity without falling for masculine clichés?

1013 Barbershop is a small business website that struggles to communicate to new clients its service specializations, how to book an appointment, and cancellation policy. The Home, About, and Services pages are redesigned to acquaint new users with this information.

Investigation

Reorganization of the client's website, prioritizing user flow

Since these services are specifically men’s hair, identifying the audience and their preferences centered on identifying familiar tropes in barber websites. These sites often reference the traditional tools and techniques used in barber shops, like shaving cream, razors, and clippers. The designs of these sites reference a rugged and classy type of masculinity, one that I knew should also be reference in my site. While I wanted the overall energy to be masculine, I also wanted to push for some design choices that would subvert the superficial qualities of manhood.

Process

To reflect a slight deviation from traditional masculinity, I balanced bold, san-serif typography with moments of calligraphic bliss. This balance between both styles embodies some femininity but still reflects the ideals of tradition that most barber shops indulge in representing. The color palette was chosen to capture the range of natural hair colors, which was informed by my barber’s strict avoidance of working with hair dyes. This color palette also references the way calligraphic letters represent strands of hair. Lastly, the services page received a major reorganization, allowing users to understand the differences between their options through categorization and placement.
Hover states specific to the page's color scheme