Project Description

One of the projects for my information design course involved the redesigning and developing a terribly made website we encountered. The website I decided to redesign was the website for a hair salon known as Hairtell Salon.

Process

Organization and Planning

To facilitate the design and development process, there was lots of organization and planning needed. I commenced with simple sketches which I turned into wirframes and interactive mockups using Axure RP. While doing this, I considered existing flaws and searched for ways to remove those flaws.

Initial Development

Commencing the code, I began translating what I designed in the wireframes into code. After completing the core HTML and CSS elements, I then stylzed the design with extensive CSS. Although the website looked complete and nice on my personal computer, I soon realized that a different look was being presented on other devices and browsers.

Responsive Design Implemented

To remedy the problems encountered in the initial development, I began researching responsive design techniques. After learning more aboout responsive design, I was able to implement it in the website. This was also followed by a newer design language I chose to implement. Overall, these two components made the website look muchmore complete.

Problems and Successes

The primary problem I encountered while developing the website was the struggle with responsive design. I soon however, learned about media queries and how to design with a grid system in mind. This helped me to make the design responsive and that had overall solved many of the paintpoints of the website. The original website that I was fixing had many flaws. It lacked a clear hierarchy, a nice modern design, and it did not have any responsiveness. I was successful in solving all those design problems, and overall it resulted in a successful website which also was a key project that aided in my learning responsive design.

Live Demo

A short animation navigating through the hairtell salon website. Alternatively, you can view the live site here.