Art of Stone

Wibble Web Design & Development

Client

Art of Stone


Project Type

Design

Timeline

1 Week


Design Tools

Adobe XD Adobe Photoshop

—   Overview

During my time as a front end developer and designer, I redesigned a website for a stonemasonry company based in Northern Ireland, creating a design concept, for both desktop and mobile, which were then used to develop the website, along with fresh new branding.

—   The Problem


The client required a redesign of their website which, at the time, didn’t have a cohesive brand. They wanted a new website design with fresh branding to complement their work, while also showcasing their services and images of the type of work they’ve done in the past in a visually appealing way.

—   The Solution


The client wanted to showcase their stone masonry work online and allow users to view them and get in touch. The client did not have any particular requirements or preferences regarding the style. They just wanted something more up-to-date than their current website.

I conducted competitive analysis and researched various stonemasonry websites and how they presented their work. Although all different in their own way, one common theme was the simplicity of their websites and a minimalist style so that the photographs were emphasised.

After this, I created a high-fidelity concept of how the pages would look, on both desktop and mobile, using Adobe XD, as well as outlining the user flow through a prototype that the client could interact with.

Once the designs were approved by the client, they were then used to develop the website.


View Website    
stone masonry work

—   Branding

Colours

The client had no set logo or branding at the time of creating the concepts so I had to also create a new branding scheme.

For the colour scheme, I took inspiration from photos that the client had provided of their stone masonry work. From this, I leaned towards neutral earthy tones.

    Gold (#B5AB75)

    Light Gold (#BCBAAA)

    Dark Grey (#464646)

    Grey (#AEAEAE)

    Light Grey (#F5F5F5)

    White (#FFFFFF)

Typography

headings and body typography
snippets of web concept designs
snippets of mobile concept designs