When you get a call from a client that hosted an episode of MTV’s “Fear”, you take it. Just so happens, this client has a history of cool encounters with Hollywood and villainy. They soon will be rocking a newly designed custom website to showcase their brand.

The West Virginia Penitentiary was rocking an older static HTML website. Even worse, they couldn’t get a hold of the old designer. The site, much like the building, was becoming a ghost town (they host tons of paranormal tours and activities).

Even with an outdated website, the West Virginia Penitentiary had a huge following. Their Instagram account was filled with amazing photos. They had one of the larger followings in the Ohio Valley with Facebook Likes, and the reviews on Google and Yelp were great. I didn’t have to fix their online brand – just their decaying website.

Finding the Brand

It was pretty clear through questioning, the brand was two things: History and Mystery.

History

The West Virginia Penitentiary was around for a very long time. I remember taking a field trip to Moundsville, West Virginia in grade school and touring the facility. Right next door was a famous Native American burial mound (Grave Creek Mound) and our class made a day of it.

They talked about how Charles Manson wanted to be transported to the penitentiary (they had his hand-written notes), they showed us Sparky the Electric Chair, and even took us out and did a mock-hanging (with a dummy, of course). It was an interesting visit and these tours are pretty important to the day to day operation of the facility.

Mystery

The expansion of cable television shows over the years has created a big boom for paranormal interest. It seems like there is a different type of ghost hunting show on every network. What takes place in Hollywood also filters down to the Ohio Valley.

The West Virginia Penitentiary holds many different ghost hunting activities. They have a huge following that comes for Halloween. Some brave souls pay to stay overnight in the ‘haunted’ halls.

Branding Solution

Font and Typography

Typography was pretty important to the design. I remember the story of Charles Manson hand-writing a note. I thought of the creepy font used on “Unsolved Mysteries“. Maybe I could even use some classic typewriting font.

Most importantly, they had to be web-safe fonts. Thank you Google Fonts.

Colors and Style Guide

Although black and white images would work, something about sepia images made more sense. The bricks that make up the penitentiary are a tan and black mixture. It only made sense to use a tan as a base and find some complimentary colors.

Imagery and Style

Do you remember those old pictures that are all torn up on the edges? Some of them look like they were burnt. Sepia or Black and White. Yeah – that’s the look we are going for.

Mocking Up the Custom Website

Content Comes First – The Website Outline

After finding out what was important to the client, we had to figure out how we should structure the site. What pages need to go and what pages needed to stay? Luckily I found the XML Sitemap and started to work.

Paper, Pencil, and Wireframes

Since we are designing this site from scratch, it was time to draw out some concepts.

Photoshop and Mock-Ups

Although there are different tools to help mock-up a website, I chose to use my good friend Adobe Photoshop this time. I knew I was going to be using Bootstrap to make this custom website, so I downloaded a few free templates for all of their default website sizes.

Custom Development

One of the biggest questions came a bit earlier in the development process – should we use WordPress? So I asked these questions:

• Will you be updating this site regularly?
• Do you have someone on staff that understands HTML/PHP/SQL?
• Do you plan on hiring a web developer for updates?

Turns out – they need to update the page regularly. They do not have anyone on staff that codes. More importantly, they would like to keep a web developer off of their monthly budget.

The answer was WordPress.

Making a Custom Theme

Normally the CMS question really dictates the design. In this case, I was going to do all of the designing regardless. Using the style guides, I customized the CSS to fit the design we made on paper.

Bootstrap and Responsive Web Design

Bootstrap is a framework I learned a while back and it just saves so much time. One of the beauties of Bootstrap is that it factors in Mobile devices. Probably the main reason West Virginia Penitentiary called me was that their site was not mobile-friendly. What you saw on the desktop is what you saw on the mobile phone.

In terms of development, I had to make sure we fixed that problem. I am a believer in mobile-first design (create for mobile-first and customize towards desktop). Whether you are on a tablet, laptop, large desktop, or mobile phone – the custom website will adapt for the user.

Final Touches and Launch

I kept the client in the loop the entire process and reviewed the mock-ups, wireframes, and development website (running on the backend). There were no surprises and all of the changes were made during the process. The launch was rather easy.

Training and ‘How To’ Docs

Since a user on staff was going to make all of the updates, I made sure I walked through the basics of WordPress with them. Luckily, you can find tons of articles and online courses dealing with WordPress. I also made sure they had a simple booklet for basic changes.

Final Thoughts – Customized WordPress Website

I really love the process of taking a white piece of paper and turning it into a completed website design. Asking questions to find out the clients brand is very enjoyable. I like to think I am a Disney Imagineer (the employees who create the theme parks) and get to create these detailed designs. My favorite part of this entire design was the use of chainlink fence for the breadcrumbs. These little things make custom websites so much fun.