C & S Scaffolding

In the early design stages it was identified that this project would best suit a one-page website approach, having all the important content on the home page with only a few branches off to single sections. We began with pencil and paper, sketching out our initial concepts and deciding on the necessary functionality to accompany the information being presented.

One idea that came out of our sketching phase was to have a static sidebar allowing users constant access to the important links and contact details. This means that users would not have to navigate the whole page in order to find vital information and sections.

Another area we had to tackle was how to make the one-page website dynamic and load in additional content in areas that have a bit more information. The projects section of the website would have numerous posts and we designed a method of allowing users to browse all the projects in a ‘card’ style with just basic information and images. Additional ‘cards’ could then be loaded in dynamically without refreshing the page. The user could then click on the individual project to be brought to a separate page to view the project in more detail along with a gallery of images.

We took our initial sketches into Adobe Xd in order to create a prototype of the website. This prototype would be a graphical representation of the finished product with limited functionality.

At this stage we created the different sections and components of the website. We could then do further designing and refinements with each element to get the look we were after.

As the website was extensively designed and prototyped in Adobe Xd it made the initial development stage of the project quick and simple. Time could then be spent focussing on the dynamic functionality of the projects section as well ironing out all the responsive breakpoints so the website would look good at any screen size.