VW Website presentation boards

_Background & Research Background

For my summer brief I researched into VW Campervans. I choose this subject because it was something that I liked and and history in. I also wanted to do some design work which was based around photography, both taking the photos myself and working with mainly image within a design. After doing my research, I found that there wasnâ&#x20AC;&#x2122;t alot of information about VW Campervans online, or a detailed history of them either. So I wanted to produce an outcome which was to inform the audience about VW campervans and the different range of vechiles based around them. This led me to more specific research and going to take the photos of the different models myself. In the end I produced a publication on the History of VW Transporters. This publication informed the readers about the 5 different generations of the transporters and each model within these generations. With a detailed history and imagery of each model it provided ample imformation about the campervans. For my website I wanted to carry the same idea through. When i was researching this subject I couldnâ&#x20AC;&#x2122;t find a good website with relevant information or imagery of the VW vehicles, so this is what I wanted to create. I wanted a simple design that informed the user about the 5 generations and each model within these generations. There will be an image and short but informed information about each model, this would provide any user a insight into the history of VW Transporters.

Research

The concept of my original idea was to have a scrolling across to the left website which would be some sort of interactive timeline, but i realised this was a bit ambitious, to say it was my first time ever creating a website. So i went for a more simpler route. Here are a some images which i found and used for my inspiration for creating my initial scamps for my website. I used this as inspiration because i liked the blocks of text and images used within the website design and how things within the page are split by using lines etc. They all seem a relitively simple design but maximise the use of the screen and engage the user into the website.

_Site Map

Homepage

T1

T2

T3

T4

T5

_Digital Mock Ups

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non augue enim. Suspendisse ipsum lorem, ultrices vel laoreet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non augue enim. Suspendisse ipsum lorem, ultrices vel laoreet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec

Homepage

Lorem ipsum dolor sit amet, consectetur

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non augue enim. Suspendisse ipsum lorem, ultrices vel laoreet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec

Lorem ipsum dolor sit amet, consectetur

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non augue enim. Suspendisse ipsum lorem, ultrices vel laoreet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec

VW T1 Page - Linked Page

_Digital Mock Ups On Screen

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non augue enim. Suspendisse ipsum lorem, ultrices vel laoreet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec

Lorem ipsum dolor sit amet, consectetur

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non augue enim. Suspendisse ipsum lorem, ultrices vel laoreet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec

_Wireframe Wire Frame Specification Font Family Logo & Buttons - Impact Body Text - Arial, Helvetica, Sans Serif

134px 714px

Colour Accent 1 - #25408E

214px

Accent 2 - #C7DCF0

36px

200px

122px

20px Lorem ipsum dolor sit amet, consectetur 326px

Lorem ipsum dolor sit amet, consectetur

Website Specification Size - 1024 x 768 Logo - 200 x 134 Main content area - 714 x 326 Bottom bar - 970 x 80 Buttons - 50 x 25 Thumbnail images - 214 x 122

Lorem ipsum dolor sit amet, consectetur

214px

60px

Lorem ipsum dolor sit amet, consectetur

170px Lorem ipsum dolor sit amet, consectetur 55px adipiscing elit. Donec non augue enim. Suspendisse ipsum lorem, ultrices vel 25px laoreet

Lorem ipsum dolor sit amet, consectetur

170px Lorem ipsum dolor sit amet, consectetur 55px adipiscing elit. Donec non augue enim. Suspendisse ipsum lorem, ultrices vel laoreet

50px 970px

Lorem ipsum dolor sit amet, consectetur

170px Lorem ipsum dolor sit amet, consectetur 55px adipiscing elit. Donec

80px

_Final Scamp

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non augue enim. Suspendisse ipsum lorem, ultrices vel laoreet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec

Lorem ipsum dolor sit amet, consectetur

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non augue enim. Suspendisse ipsum lorem, ultrices vel laoreet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec

Turn static files into dynamic content formats.

Create a flipbook