Audi R8 Project

Responsive-showcase-presentation2For our New Media Tools class our first project was to create a website design for the car Audi R8. I had a lot of fun with this project, thinking of ways to design a web layout that is both visually appealing and intuitive was an interesting process. Before starting anything I did some research in car companies websites. I noticed that most of them keep the main page simplistic only having a main image and embedded video with a navigation bar on the left.


The main content and functionality that I thought were most important are Navigation bars, search bars, social networking and links. I also thought that the audience who is looking at the Audi R8 are mostly older men so i thought the colour layout would be best in black and dark colours. I figured that someone who goes on a car site is most interested in the specifications in the automobile. Another aspect i thought was important was a news and review feed, I thought that if someone is interested in buying a car they would most importantly look into reviews and press about the automobile. Another popular and essential thing that almost all companies have are social networking services such as twitter, facebook, etc.

After doing some research and gathering all the information and resources that i needed to start a website, I started on making the top and left navigation bars. I thought the top navigation bar should be gray because Audi’s current website is mostly made up of grayish gradients that thought that was their theme colour and style for their company. For the navigation options i followed what the current Audi website has and also included a search bar and signup/ log in links. For the side navigation i thought putting it within the main site image would be more dynamic visual look and better overall composition. For the side navigation bar I put links for the all the important information that is needed for an automobile. I also thought it would be cool if the main image changes when the user mouses over the different categories in the menu.

After getting the top parts done, i started thinking of ways laying out the content on the lower half on the design. I was originally going to place images in row, across the page but i later thought putting them on the right panel in a zig-zag formation would create a more interesting composition. for the left panel I thought it would be good to have a news/reviews feed that people can read up on when they are researching the car. For the lower left part I had some trouble thinking of ways to fill up the empty space. After looking at some websites for ideas, i thought it would be okay to put more links for the most important and popular links about the car. The most annoying and frustrating part was getting the body of text to perfectly match with each other. I had trouble fitting all the text and displaying so there’s no hyphens while its still readable.

For the copy content of the design, i wasn’t happy with the look of the layout. I made the text align to the right or left depending on the position of the images and placed subheadings for each text box. I also put borders around the images so they stand out more from the background. For the footer part of the design i placed links to social networking services that a company would have and placed links to disclaimers, copyright, etc. at the bottom.

After finishing the overall design, i made a second version with a different colour scheme. The current Audi website has a colour layout that mostly consist grays and white. After changing the colour scheme I decided that the current images didn’t fit well with the new colour scheme. I changed the images and was much more satisfied with the new composition.

Final Designs: