Great Bearded Reef [Case Study]
It is not often I do work for friends. I have found that they don’t always make the best clients… but the project I did for Josh Willis proved that wrong. He was not only a great client, but he was willing to let me –and the other guys working on the project– have nearly complete creative freedom. I find that artist’s do their best work when they are set free (this is at least true for me!). This site has been awesome to have in my portfolio and has gotten a ton of exposure. We had about 15k in the first month and the site has been featured on Bestweb and a few other design galleries!
The Concept
Our initial idea was going to make a simple one page website that was more a type of portfolio of who josh was. I had seen a rising number of one-page websites with some fun java scripts to enhance the user experience. Josh had some photography he had done and I was just going to base the site off that. I wanted to do this because it would be fast and easy to maintain. It wasn’t until Josh came up with the name of “The Great Bearded Reef” that the island concept came to me.
The initial concept of the page being a window into the ocean came to me on a Saturday and it hit me like a ton of bricks. I knew that this was the angle I needed to make this site successful. Each section of the site was going to be a different level and depth in the ocean. Each level would also feature something different about Josh and the Great Barrier Reef.
One of the other key players within this project was Dino Henderson. Dino is an illustrator that Josh knew and convinced to pour some time into the project. His initial sketches of Josh were the inspiration behind Josh being in the striped swimsuit and his side kick sea monkey. More on his role later.
The Background
The site is extremely tall and I knew the background needed to be able to handle that. It is basically just a simple repeating image on the x-axis. The gradient fades into the body color. Pretty simple, standard website technique there. Nothing fancy.
The Illustrations
In my opinion the only reason the site has gotten the kind of traffic and exposure it got in the last month and a half is because of the illustrations that Dino did. He spent countless hours fine tuning and tweaking them so that they had the right feel and personality. Much of the illustrations were a collaborative effort, although Dino is the one who had the goods to make them happen! It is pretty obvious that they took the site and the concept to a level that previously would not have been attainable.
The Menu
This menu is what most people kind of flipped out about. And in reality I knew it had to be the most crucial and part of the site. The entire purpose of the site was to drive traffic to Josh’s profile on the Island Reef Job website. So making sure the menu was the most prominent feature was important. It had to be present in every section of the site, not only because it was how you controlled the navigation, but because the “vote now” button was my call to action that I needed people to follow through on.
I was able keep the menu at the top of the browser, regardless of where you were on the page through very simple CSS. Setting both the menu and the vote now section inside a wrapper allowed me to set that div with a “position: fixed; top: 0;” That was it. It was really that simple. One thing you need to keep in mind when using this position setting is that the z-index will come into play. Z-index is how you layer items on a web page. Making sure the z-index is set high enough for the menu to be on top of everything else on the page is important.
Sorry, Comments are currently 404'd
Subscribe to Thoughts RSS.