The Buy & Build website is a recent project for one of Get Found Fast’s clients. They were looking to get a website refresh for their current design, which can be seen here as well as some added functionality.

WordPress Mockup Process

For the mockup design, we decided to follow our usual structure (this time avoiding the use of sliders) and create a first fold that emphasized the client’s products, namely, his granite and cabinet products.

The client was also big on auctions, which we advertised through the slider on the old site. With the mockup we decided to use a “ticker” element to roll the auction information across the page. We also added several footer links with icons, a horizontal contact form and a wide horizontal image banner to break up the amount of content present.

On top of the homepage design, we also created several other mockup designs for a product listing page, the actual product page, and the subpage. Those can be seen below.

WordPress Website Design Process

buy and build homepageThe design process for this one was a bit troublesome. We had decided to add a bit of flair to the design by creating animated SVG lines as a hover effect on the four main images featured in the first fold. Adapting these for mobile devices was slightly difficult but we managed to do it.

The ticker converted easily as well as the parallax image banner and the hover states for the bottom links. The other pages followed suite, save for the product page which we specifically designed to allow the client to edit. This involved custom building the backend for the product page using Advanced Custom Fields and incorporating Colorbox into the product gallery. This was a fun process through and through and though it was difficult to initially get the lightbox gallery to work the way we wanted (as in popping up a lightbox gallery of images that were not seen on the page), we eventually succeeded in building this out as desired.

Conclusion & Optimization Report

Unfortunately, we have yet to finalize and optimize the site for launch as we’re waiting on the client, but this project was, in my mind, a good solid test for how we approach using scripts (Colorbox) and incorporate them in with other plugins (Advanced Custom Fields). The unique design added a bit of difficulty into the mobile optimization process, but we were able to overcome that.

We have since launched the new buy and build website and it ended up with a pretty decent GTmetrix report:

GTmetrix-report-buyandbuild.net-20180216T072551-8MuRMrym

« | »