This is one of my first WordPress website projects I completed while working at Get Found Fast. The mockup process for this was fairly lengthy and we ended up creating three different mockup. In the end, we took concepts and designs from each mockup and combined them into one final product for the client.

WordPress Mock-up Process

With smaller website projects like this (5-10) page, we usually keep the mockups singular during the design process, but we decided to try a different approach with our process structure and created three separate mockups pictured below:

We met with the client and went over the justifications of the design hierarchy. To clarify, we had to explain to him why certain elements in the design were arranged they were they were. Initially, he was happy with each mockup, but we could tell there was a bit of confusion present. To resolve this issue we decided to make one final mockup with concepts and elements from the other three mockups and the client agreed that this was a good idea.

WordPress Website Design Process

clc commercial home page mockup

Designing the finalized mock-up was fairly simple. The client had reinforced the importance of branding with the website, more specifically the semi-transparent “swoosh” located in the middle of the content.

For the theme, we ended up using the Understrap WordPress theme. The reason we chose this particular theme was because it combined a WordPress framework with a bootstrap grid. This made making the site mobile friendly a lot easier and a lot more efficient.

The most complex function fo the site is the testimonials slider. We used the BxSlider Script instead of adding a plugin and impacting the performance of the website to build the slider, which was an interesting learning experience but helped reinforce the necessity of avoiding plugins when using WordPress. The rest of the website was pretty simple in terms of function.

Conclusion & Optimization Report

The design process in this WordPress website design was interesting. I was, at the time, very used to providing multiple mockups to clients, however, after experiencing what I assumed was confusion on the part of the client when he was presented with the designs, I realized that offering too many mockups muddied the water, so to speak.

Keeping the website at peak performance was also important. At the time, we hadn’t really developed a system of managing performance in terms of what type of caching system to use or whether to optimize images using a plugin or doing them individually. We also made it a point to avoid using plugins with this build, choosing to incorporate scripts into the functions.php file. After all was said and done, we ended with a pretty favorable optimization report:

GTmetrix-report-www.clccommercialroofing.com-20180123T095209-DgikKee3

« | »