New Bespoke WordPress website design for Manchester based Absolutely Flawless

- by Andrew Whittle

New Bespoke WordPress website design for Manchester based Absolutely Flawless

We have recently launched one of our favourite websites to date, www.absolutely-flawless.net.

Manchester based Absolutely Flawless is a selected team of professional make-up artists and hair stylists who create long lasting wedding day looks that brides love.

Their old website was built on the WordPress platform, however it was not mobile friendly and needed a complete re-design and build from the ground up. We met with Absolutely Flawless who had already set out a user journey through the new website and knew exactly what the new website needed to do. The content was re-structured and re-written along with new images.

Next we set about developing a HTML wireframe of the key areas of the website so we could identify any user experience (UX) issues early on in the website design. We coded this in HTML and made the wireframe mobile friendly too. Once we received approval of the wireframe we saved these files for later use.

We then moved onto the visual look and feel of the website based on the layout of the wireframe. We designed the key sections of the website using Sketch. Sketch is fast becoming the ‘Go To’ tool for user Interface (UI) design as it is fast and aimed squarely at UI designers.

Website visuals designed in Sketch

We uploaded the visuals to InVision so Absolutely Flawless could review the designs both on a desktop and an actual mobile phone. InVision is a great online tool for preparing visuals to present to a client because the client can see exactly how the site will look and work in a browser. Comments were added by Absolutely Flawless using InVision and the designs were refined until approved.

The next stage was to apply the designs to the wireframe code we created at the start of the project. We prefer to create wireframes in code from the start rather than flat static illustrations because they are closer to the end product and you can interact with a HTML based wireframe. Also the code is not wasted, it is reused in the final website. This stage is usually referred to as the website front-end build. We refined the designs and front-end build until Absolutely Flawless were happy with how the site was taking shape.

Once the front-end build was completed we then developed a bespoke WordPress template based on the front-end build, design and HTML/CSS/JS. We used Brackets to write all the code, whilst running CodeKit to convert our CSS into SCSS, which minifies the CSS code to improve website load times. Loading times are critical. Not only does Google rank a website higher, users benefit from improved performance. We also made sure that depending on what device a user is viewing the website on, they would only download images suitable for their device. So for example the header images come in four sizes, one for each main device such as a desktop, tablet or smartphone.

We then developed the new bespoke WordPress site and added the content that was supplied. The final stage was to refine the content and then onto final testing before launch.

The final website is one that we are extremely proud of and was a joy to work on. We continue to work with Absolutely Flawless and will be developing the website further going forward.

Here is what Absolutely Flawless had to say…

“I used Whittle Design for my new website www.absolutely-flawless.net and the results were amazing. They listened to what our needs were, and was very patience as it took us a while to get the content right. There is nothing Whittle Design cannot do when it comes to web design and would highly recommend them to do any website from a basic to a very complex website. They are now designing and building us a very complex bespoke booking system, which will save us time and money. Cannot thank you enough, 10 out of 10.”

Joanne Pearson

Absolutely Flawless

www.absolutely-flawless.net