Communication Artifact- Bear Bones Systems

As a group project, we chose to revamp Bear Bones Systems LLC. We created and provided a new website, logo, instruction/sales brochure and a 30 second spot commercial. I was in charge of giving the website a make over . To provide a little background on the website the owner of this company is my uncle- a mechanical engineer. He built the website and just as you might guess, he had never built one before and so consequentially it is a bit choppy. But to be fair, I have never built a website either. The skills I was able to put on display came from the design principles I have learned over the last couple months and a guide provided by wix.com  The above image is the landing home page for the old website bear-bones.com. It is really plain and doesn't have much going on. If you scroll down it just has a gallery of pictures with little to no description.  As you scroll through the rest of the website, there is great information about the project, but its not appealing to the aspects of design and what Rutledge has to say. The goal is to redefine the relationship between the human, the vehicle, and the trailer. It's time for a make-over.

Welcome to the home landing page of the new redesigned website for Bear Bones Systems. In order to make this website flow with continuity I followed a group made style guide, the Bear Bones Systems is in the font of Cinzel. The "Bones" is in a black font with a white highlighted shadow, giving the image of bones "Bear Systems" is a 25% gray.

In order to keep design in the cross hairs I had to remember the vocabulary of design. It was very important to me that the website lined up and pointed the consumers eyes in a direction on the page to lead to the next thing. The reason for this was because the old site didn't do that at all. In fact, on the new website half way down on the landing page is a description on the left and sliding images on the right side panning through the product, creating motion through lines. Moving on to texture, the image on the front page has a black and white filter over it. This helps to define texture in not only the image itself, but every part of it from the asphalt to the tires. The picture also shows great figure/ground relationship. I used a 25% gray font to do all of the lettering on a black background except in the header and some areas with a 75% blue-gray. This helps to create more continuity as well as figure/ground relationship.

Above is another page of the old website that just doesn't follow the axioms of web design. It doesn't really follow the Gestalt principles either. Below is the the same section of the website, but with a lot less clutter. I followed the law of similarity matching it with the rest of the website also it is resembled in the products page where each drop in is placed together to achieve maximum understanding. The law of proximity was recognized throughout, but more importantly on the name of the company on the home page. I brought the lettering together on a vertical and horizontal aspect. The law of Pragnanz was a simple, yet appealing website that was smooth flowing. On a side note this trailer is a simplest form product as well. The law of closure is represented with the black background, trying to enclose and highlight the important words and images. Finally the law of continuity is throughout the website and other products because we used a style guide that everyone contributed too. The new website can be found at http://joshboggess44.wix.com/bearbones