A chalkboard theme website

Charles Daniels - Monday, June 04, 2012

Chalkboard theme website image for blog postWe recently finished a website for The Pet Emporium of Ann Arbor, Michigan for which we created a functioning chalkboard theme.  There weren't many examples of a fully embraced chalkboard theme on-line so we decided to showcase how we pulled it off.  This post will detail some of the finer design points that helped us in keeping the theme universal throughout.  From the main page to the custom blog, it's all one big chalkboard.  It wasn't always easy, but hopefully our example can help others looking to do similar creations.

At the top of the page we set the tone by letting the navigation menu be chalkboards.  It let the visitor know right away what to expect from the rest of the site.  There is a hover animation for some movement.  We also used the same chalkboard texture at the footer to frame the rest of the page.  Several instances on the interior pages we came back to the chalkboard frame when we needed a visual clickable element.

Chalkboard navigational menu boxes

The key element to the page is really the background image chalkboard effect.  We created a repeating background and used transparent containers to let it show through for the rest of the site.  This gives everything the look and feel of being on top of the chalkboard.  You can also see that we kept the more visual elements off to the side of the page so that they would not interfere with the text in the middle of the page.

Background image for the chalkboard website

We then took their existing logo and used a brush effect in Photoshop to make it look like a chalk drawing.  We put a wood boarder around to frame it and make it stand out.  We used the same technique on the slider.  Put all of these visual elements together on the page and you have one gigantic chalkboard website.  We altered the text color to match the rest of the images.  Being that we kept the chalk drawings out of the middle of the background you are able to read the text easily.

Chalkboard logo for the website

We even created chalkboard based calls to action for the page.  The newsletter and Facebook buttons below have hover effects that create a chalk underline when moused over.

Facebook and newsletter chalkboard call to action images

In the interior pages we were able to keep the chalkboard effect by using a repeating dotted line background in the middle containers.  We used it to separate the friends and products page.  You can see the effect in use in the image below.

Background dotted line image

Lastly we modified a Wordpress theme to match the rest of the site.  We made the containers transparent and used the same background image to keep it universal throughout the page.  The final product is a completely chalkboard themed website from start to finish.  Everything from the home page, contact php page, and custom blog is all one large chalkboard.  You can see the custom blog image here:

Custom chalkboard blog image

We hope you have enjoyed this blog post on creating a chalkboard themed website.  It makes for a very graphic intensive website, but the visual appeal is quite stunning and unique.  It lends itself well to any site for a business that is fun and whimsical.  The SEO side of things can be challenging, but using good keyword research and on-page optimization served us well.  The site is not only visually nice to look it, but they also now rank #1 in Google for the search string 'pet store ann arbor michigan'.  Which was their most searched for relevant phrase.

If you have any questions or would like to share your chalkboard website ideas please leave us a comment below.  We look forward to hearing from you.

By Charles Daniels