Source：rudysbarbershop.com ↗ Checked 2026.10.30
Editor's note
What this site does
A barbershop chain that overlaps a pick-your-state booking card on its opening video and runs services, products and hiring from one page.
Conversion
Notes
What you see
The first screen is a video of haircuts in the shop with one line: "Encouraging freedom of expression for 30 years". A paper-textured card overlaps the bottom edge of the video with "Book an appointment", tabs for Oregon, Washington and Georgia, and a location picker.
The header has only three links — Book now, Products, Careers — plus the cart. Below the booking card come a restock notice for the house matte pomade, three services (haircuts, colour, extras), the line "Walk-ins are welcome, but booking is best!", a product grid with prices, and a closing band with "Our story" and "Join our team".
What to take from it
A salon with several locations does not need visitors to find a store list first. Letting them pick a region right under the opening image takes them straight to booking.
The service descriptions say what is included — every haircut comes with a shampoo, a mini scalp massage and a hot towel — and colour starts with a free consultation. Saying that walk-ins are welcome but booking is better keeps both doors open while nudging people towards an appointment.
Typography
Typefaces
| Element | Desktop size / weight | Desktop line height | Mobile size / weight |
|---|---|---|---|
| h1 | 25px / 500 | 1.20 | 25px / 500 |
| h2 | 56px / 900 | 1.00 | 40px / 900 |
| h3 | 20px / 900 | 1.20 | 20px / 900 |
| Body (p) | 16px / 400 | 1.30 | 16px / 400 |
| Button | 16px / 900 | 1.00 | 16px / 900 |
Measured values (desktop 1440px, mobile 375px, 2026.10.30). The most frequent setting for each element is shown. Sites that use h1 for a logo or small label will show a small h1.
Download
Download the wireframe
This structure, as a wireframe you can edit in Figma
The page structure above, rebuilt from DevNJ's wireframe parts. It contains none of the original site's copy, images or code.
Using it in Figma
- Download the SVG.
- Drag and drop the file onto a Figma canvas.
- It opens with one layer group per section — start by reordering sections or replacing the copy.
Text comes in as text layers (set in Noto Sans JP).
Screenshots are shown at reduced size as quotations supporting the commentary. All rights in the design, copy and images belong to Rudy's Barbershop and their respective owners. The wireframes are not copies of the original site; they rebuild its structure from DevNJ's parts. Owners or designers who would like this entry removed or corrected can contact us; we respond within two business days. Featured on: Httpster
