Graber Cabinets Web Development Case Study
Graber Cabinets is an established manufacturer and installer of custom cabinets as well as providing computer controlled cutting and flat packs based on plans provided by their customer. The existing website was a single page with basic information about the business. The goal of this project is to create a new logo and website and grow the business.
Empowered Marketing was selected for this project based on a review of his work and interviews by phone and in person.
The Logo Design Process
First the new logo was created using an iterative process starting with a few logo concepts and color schemes based on input from the client. After submitting some conceptual logos the client indicated that they wanted to feature a cabinet or cabinets in the logo. After several concepts were rejected it became clear that the logo should be less representational and more creative or conceptual. Then end result features a stylized “GC” and the name of the business. The stylized “GC” initially represented cabinet doors but evolved to suggest a corner of a cabinet. The black bar which was present in some of the earliest logo concepts represents a counter top. In the horizontal version of the logo the black bar was omitted to keep the white space around the text. Keep your eyes out on the east side of Cattlemen north of Webber.. Their new sign will be up soon.
Web Development Process
After interviewing the owners about what they like a few mockups were created using InDesign for the general look and feel. Based on the preferred mockup the home page and main page layouts were developed. One feature that was important was a prominent logo which was accomplished by dropping it down or “hanging” the logo over the navigation bar and preventing it from scaling down on smaller screens except when the screen size is too small to accommodate the full size logo. To avoid the cliche of having 3 icons or 3 photos below the slider we added text overlaying the slider to encourage users to click to one of the main pages of the website. Extra effort included making sure that the website loads smaller images on smaller screens for the large background image and correcting problems with the Safari web browser not rendering things the same way as Chrome and Firefox. We also added the text to a “wood panel” on the sub pages using code to add the page slug automatically. With a little CSS (styling of elements) we made it look as if this text was carved into the wood. The most time consuming part of building a site with a custom layout is testing and writing the CSS for various screen sizes.
Page Speed Goals
As part of all of our web design projects page speed is a top consideration – it is good for users and good for SEO. To develop a website that loads fast we consider the theme, plugins, design elements and decisions, image swapping based on screen size and image compression. Our goal is to have a minimum GTMetrix Page Speed score of “A” and a minimum “YSlow” score of “B.” The result is a blazing fast site coming at 0.8seconds.
As an experiment with Soliloquy slider we tried adding several slideshows to a single page to see if it was possible to have so many and still have reasonable page speed. While a portfolio page isn’t expected to perform as well as a home page it is still important that it load fast. To obtain a respectable result we had to manually optimize the images which resulted in very good score for a page with dozens of large images on it.
By choosing a framework like BloxTheme we were able to design a custom site with few limitations and still have the flexibility of choose the best in class plugins for features like the sliders, forms and mobile friendly menu. This approach results in a website that is stable long term and also easy to edit and manage because no “page builders” were used to accomplish our goals. Within the first few weeks we received unsolicited positive feedback on this website from other design professionals.
I welcome your questions about this website.