Brief
Beats & Cuts is a one-of-a- kind concept barbershop in Dubai, influenced by street and hip-hop culture with a focus on the artistry of barbering.
They wanted a website to reflect their brand, list their services and barbers, and also prompt potential clients to contact them. The site has a minimal theme using the brand’s color palette, with images that highlight the atmosphere of the shop and it’s hip-hop/urban flair. Embedded in the site are multiple ways to contact the barbershop to book appointments, from a Whatsapp chat button to links to Fresha, an online booking system for barbershops.
Services
Web Design & Development, UI/UX Design
Home page
The hero section has a looping video promo of the barbershop which shows the atmosphere and hip-hop vibe. It also has a tagline and brief intro about the shop. The header has links to all the pages as well as a “Book Online” button to a third-party booking app.
The next section goes into more detail about the barbershop and the services they offer, including a link to the “Services” page. There is also an image that has a slight offset when scrolling to give it a parallax effect.
There is a stylized background of a clipper, along with text that scrolls horizontally as the user scrolls down the page. The image is fixed in place to give a parallax effect.
This section gives an intro to their barbers on staff and what they offer, including a link to the “Barbers” page. There is an image gallery on a metro grid, showcasing some of their barbers as well as the ambience and décor of the shop.
At the end of the page is a section that details the highly-positive reviews of the shop, as well a call-to-action to book an appointment on the Fresha app. This is followed by the footer, which has the navigation links of the site as well as the address, contact information, and social media accounts.
Services page
The services page lists all their available services, including the price as well as the approximate time each service takes. They are separate into three categories, as clickable tabs to create a more organized structure. On the right-side is a link to the Fresha page of the shop, and the section is “stickied” so it remains visible as the user scrolls down the list of services.
Note: Image is a preview and cut off for space, not all services are shown.
Barbers page
The Barbers page lists the barbers working at the shop, including a brief bio and a link to their social media. The images are initially monochrome, and transition to full-color when the user hovers over them.
Note: Image is a preview and cut off for space, not all barbers are shown.
This section has a scrolling gallery of the barbers working on their craft. The user can scroll manually by clicking-and-dragging, and the images are also on an automatic timer. There is a box in front of the images with a call-to-action to contact them/book an appointment.
Contact page
The top section of the Contact page is split into three colums: The full address of the shop, the contact information, and links to book an appointment.
The bottom section is an interactive map (Google Maps) pinning the location of the shop.