Maximus Hair Studio

sketch icon photoshop icon illustrator icon github icon html icon css icon wordpress icon sass icon jquery icon

A five page website for a local hair salon looking to expand their business with a new location and new website. I worked in a team of 4 for this project, and worked with gulp.js, SASS and Github to streamline our workflow. We communicated with the client frequently and collaborated effectively to create a well-functioning and modern responsive WordPress website. In this project, I worked extensively on both design and development, including registering all Custom Post Types and Taxonomies, building interactive scripts such as the hamburger menu and accordion FAQ, and more.

View live

Process

Planning

The client particularly wanted the website to include a gallery page with photos of past work, a FAQ to answer questions about specialty perms, as well as areas of the website that convey that the salon is welcoming of everyone and pets.

Maximus Hair Studio Website Site Map
Sitemap created from initial information architecture

Design

We had two styles for the client to choose. Since the salon and the logo had a bit of a retro feel, we envisioned the website to infuse modern and retro together to reflect the atmosphere of the salon. We also created a version in a trendy, clean and minimalistic style. The clients chose the latter version.

Maximus Hair Studio Mockup Retro
Mockup retro version
Maximus Hair Studio Mockup Modern
Mockup modern version

Development

This was byfar the largest project I had been involved in, and building a WordPress custom theme was the most obvious choice for a number of reasons: Though a small site, the sheer volume of content, from the list of services to gallery images, would greatly benefit from the organization of a CMS; the client would be able to control the content and edit anything on the front-end if necessary.

Here is an example of one of the more interesting things that I coded for the project:

Accordion FAQ Section

Show code
			
	// --------JAVASCRIPT/JQUERY CODE----------

		jQuery(function ($) {

		var $question = $('.question');
		var $answer = $('.answer');

		$question.click(function(){

			// Hide all answers
			$answer.slideUp();

			// Check if this answer is already open
			if($(this).hasClass('open')){
				// If already open, remove 'open' class and hide answer
				$(this).removeClass('open')
				       .next($answer).slideUp();
			// If it is not open...
			}else{
				// Remove 'open' class from all other questions
				$question.removeClass('open');
				// Open this answer and add 'open' class
				$(this).addClass('open')
				       .next($answer).slideDown();
					   
			}
		});

	});
			
		

Final Website

Andrew's Portfolio Mobile
Andrew's Portfolio Tablet
Andrew's Portfolio Desktop
View live ‹ Back to projects