Composite 1 Assignment – Barber Shop

Early last week, we were given an assignment to complete a 5 page mock website that comprised of all the skills and lessons we have learned up to this point in our program.

Primarily we would need to use HTML, CSS and our knowledge with Photoshop and Illustrator to plan and build a website for a topic of our choice. I decided to go with a more practical route of re-designing an existing website of a small business in town. At first I debated either to do a Tattoo Shop or a Barber Shop but in the end I finally decided to go with a Barber Shop in which the original one is as follows:

https://goo.gl/j3L700

Seeing as this website had not been updated in quite some time, I decided to re-design and develop a new one for this assignment. Mind you, the original owners of this website and business are unaware that I had recreated their website, hence my inclusion of the copyright information at the bottom of the footer.

Before we even began to write any code, a major aspect was to create a Wireframe and Mockup which would be used as a guide line when actually coding the website.

As such I had create both in Illustrator using Photoshop to optimize the images for Web. You can see my work below.

Framework

Mock Up

Besides the images on the Chair page, I had gathered all the other images from a royalty free website for hi-res stock photos called Unsplash.

Once I completed this and had it approved, I was ready to make this website a reality.

Beginning with our standard HTML Skeleton and CSS page reset, I set out to create the general layout of the pages which you had seen in the mock examples above. Once this was complete, I decided that since all the pages have the same Header and Footer layout, I would convert them into PHP files, thus allowing me to make adjustments to the Header and Footer more efficiently through one PHP page as opposed to adjusting it on each page as HTML files.

Now that I had the basic layout of the website in grasp, I would need to create each individual content of the page. To make some of the content more exciting I decided to add in a jQuery Slider on the landing page that would fade in 3 images every 2 seconds which I learned through a lesson that I had read online. That being said I also included a jQuery plugin for the image gallery in the Footer which would allow you to browse through past cuts that the barbers would have made if this website was made for real. Most of the pages had a pretty standard layout however I did include a Google Maps locator on the Book an Appointment page as well as creating a Appointment Form in case people would like to book an Appointment in advance online with them. Creating a form was a vital component for this assignment and this was a perfect scenario to create one.

With everything now in place, I still had to make this website responsive for different sizes and layouts.

While it was not necessarily a difficult task, I was by far the most time-consuming. Even with a basic layout like this, there was much to consider and I spent a considerable amount of time debugging and making sure each page fit appropriately on every screen width from over 2500px to as small as 320px. Alas, I did decide to include one more jQuery plugin for this, which of course was for the Navigation bar. After much testing and consideration, I decided that once the width was lower than 942px, I would have the Nav Li’s be put into a Hamburger Menu which you can click to show the links to each page.

All in all, this was a very practical website that I learned much about with. Using a combined knowledge of HTML, CSS (Responsive Web Design), Javascript, jQuery (Plug-ins), PHP, Adobe Illustrator and Photoshop this is what I was able to accomplish in the week timeframe that we were given to complete this Project.

You can see the live version here:

https://goo.gl/CDafja

Thanks for reading! 🙂

– Mike

The Beginnings of a Masterpiece….

mrbean

More often than not, you’ll visit a website for it’s eye-catching visuals such as an image gallery, a cool video, a visually pleasing colour scheme and/or overall easy layout.

Sometimes even, you’ll just come to enjoy a quick snippet or meme for your own amusement, such as the one above. In any case, what most people don’t realize is that they are actually contributing to the overall psychology of website traffic and behaviour that humans are a part of, i.e. visually pleasing images, colours and layouts. We all have certain looks and styles we identify with and this all matters of course as much as the Development cycle does when creating a website or application for your clients.

Design is as much important as functionality – in fact, before most Developers begin to touch any code for a website or application, a visual aid (or wireframe, mockup, etc.) is created for them to go by and refer to when moving forward and coding up the whole project. Hence, why the Graphic Designers, Illustrators, and UI/UX Designers are needed here the most. They have the eye for enticing and appealing imagery, colours and layouts needed to keep visitors on the page as long as possible and have them keep coming back. Of course, that is not to say that you can’t be both a Designer and Developer but normally on larger-scaled projects you would be relegated to one role focus and have someone else (or other team) deal with the other roles exclusively.

As a Designer, you are taking much into account when creating a mockup for the developer or development team. As mentioned above they need to take into account colour schemes, font-types, layouts, dimensions, logos, banners, galleries, nav bars and other matters as well when putting this together. Generally the client will know the look they are going for but more often than not, they won’t know everything 100%, which is why the Designer steps in to guide them to what they are striving for with examples. They may go through some sample mockups to which the client would review and finally approve the look they are going for and in turn the Development team would finally receive the approved look to begin putting the pieces all together. This, in a nutshell, is referred to as Branding. We’ll touch base later on how important branding is to a company or individual.

The Scoop

In the end, it’s in yours and your client’s best interest to have an easy to navigate website that is visually pleasing for your visitors with hi-res images and a distinguishable look that appeals to them and is recognizable with their brand.

Why and how do we hi-res images and content? We’ll get more into that later on, but for now, here’s a gallery of some sample websites that take all our aforementioned Web Design factors and apply them masterfully in their own way a to give them a professional, up-to-date look for their brand:

I Look Good!

Thanks for reading!!

– Mike