7670.jpg

Oren Shalev

logo white.png

Barbershop with an old school flavor & new school twist

Mockup - Macbook Pro ^.png
Website design with vintage & hipster motifs for a barber shop.
The site includes the impressive portfolio of Oren's works.
UX / UI Web Design 
Mobile Responsive Design
Logo design
2019
Holon Institute of Technology
About_
Made At_
Creative Field_
Year_
אורן-שליו-אתר-פרוטפוליו-סופי_01.png
noun_barber chair_.png

About

Product UX

noun_scissors and combs_.png

Style Guide

noun_spray_.png
noun_mirror_.png

UI Screens

noun_barber chair_.png

About

About the project

As part of "interface design" class at my college we were asked to design a website for a service provider, the website must be responsive to mobile as well. 

I chose my personal hair stylist, who only has a Facebook page that has not been active for a long time, and needed a little upgrade and kick-off for his barber shop.

Challenge

My main goal was to get a foothold into  the digital world for the barbershop, keeping in mind the customers who are looking for information and can find it on an impressive website.

Second, Oren has gained lots of experience and customers over the years, so I wanted to find a place for the impressive portfolio of work that Oren has accumulated.

Solution

I started by designing an all fresh&new look with vintage & hipster motifs.

In my opinion a service provider's site should not include a lot of pages and information, the customer actually gets a glimpse into the world of the service provider and should make a decision within seconds if it suits him.


Therefore, i decided to design a one page website, where all the different categories can be found on the main page- The customer just needs to scroll down and be impressed by all the information immediately.
That main page includes details of all the services offered, products for sale, book an appointment, price list, contact details and above all the impressive portfolio of Oren's works.

noun_scissors and combs_.png

Product UX

oren brush.png
 
 
wireframes.png

Wireframes

Artboard – 18@2x.png
הורדה.png

Made in invisionapp

Artboard – 25@2x.png

Site Map

Artboard – 12@2x.png
noun_spray_.png

Style Guide

Colors

#3A1818

#975C04

#E0C4A4

#6E512F

#C79251

#F3EADD

Typography

Artboard – 9@2x.png
Artboard – 10@2x.png
Artboard – 11@2x.png
 

Logotype

Free Brand Square Business Cards Mockup
Artboard – 13@2x.png
Artboard – 13@2x.png
Artboard – 13@2x.png
Artboard – 13@2x.png
Artboard – 13@2x.png

Elegant

Exclusive

Clean

Relevance

Quality

noun_mirror_.png

UI Screens

Main Site Sections

Services

The page shows all  the full range of services offered by  the barber shop. 
hover over the selected service and the box will flip over and the info will be revealed

Artboard – 14@2x.png
Artboard – 17@2x.png

Social Network

The page gives the viewers a peek at the super hot Instagram page
which include all the current and up-to-date haircuts.

Artboard – 15@2x.png
Artboard – 16@2x.png
Artboard – 20@2x.png

Full Responsive

float ipad.png
floating-iphone.gif
Artboard – 19@2x.png

Full Website Home Page

Artboard – 231@2x.png
Artboard – 24@2x.png
 
2534964_edited.jpg

Up Next:

More Sweets