sketchbook - connor bryant porsche

32
Connor Bryant App Design Sketchbook Porsche

Upload: connor-bryant

Post on 01-May-2017

220 views

Category:

Documents


4 download

TRANSCRIPT

Page 1: Sketchbook - Connor Bryant Porsche

Connor Bryant App Design

Sketchbook Porsche

Page 2: Sketchbook - Connor Bryant Porsche

Contents Page Project Brief

Programme: BA/FD Graphic Design and Illustration Year/Stage: 2

Assignment Title: Design an Interactive Product Assessment Team:Andrew Way

Module Title: Interactive Design Module Code: FDGP202 Module Deadline Date:

28/01/2014 2.00pm

Assignment Number: Two Credit Rating: 20

Start Date: 25/11/2013 Feedback to Student Date: 19/02/2013

Assessor: Andrew Way/Kamal Gohil

Assessment Method: 100% coursework

Learning Outcomes:Ref Description

No1

No2

No3

No4

1. Demonstrate creativity through research, ideas and concepts and designs in relation to interactive development.2. Explore, utilise and integrate various hardware and software programmes to achieve a final digital product.3. Present work in an appropriate interactive format.Additionally, FD route students will be able to:4. Integrate selected aspects of the work into a developing portfolio designed for use within the workplace.

Module Aims: • To support narrative content through the development of storyboarding creation skills and techniques.• Develop an understanding of the technological application and integration of a combination of software and

hardware.• Develop an awareness of contemporary practitioners, styles andInteractive web based applications.

• To introduce time-based media management and editing skills.

Assignment Aims/Introduction:The module will cover the narrative elements in design and creation through paper-based design techniques. The development and understanding of combining and integrating various hardware and software programmes to create a digital interactive product.Through a programme of research, the module will develop the student’s knowledge and awareness of contemporary design within an interactive environment.Taught sessions will result in the acquisition of creative design and technical skills related to essential hardware and software used to construct a digital interactive product.

Indicative Assessment Grading Criteria:Please refer to the Indicative Grading Matrix held in the Programme Handbook.

Brief: Link to Learning Outcome

Within this module we will look at the various developments in visual design communication to a wide electronic media audience, and the use of ‘re-usable’ content. The internet and its ongoing developments in software and hardware have meant that the way designers communicate information to an audience is constantly changing. With the development of technology progressing at an ever-increasing rate the internet is now much easier for the user to interact with and obtain instant access to information.Mobile technology and hardware are now seen as the future of new media communication, with Apple and the iPhone/iPad dictating the race (at the moment). Google and Android have quickened the technological pace with the Android market and apps, building an ever-increasing following. With this emerging technology “off-line” is now becoming the new buzzword, as consumer demand moves application design to a different level.Within this project we will look at the jargon and technology that make up interactive media, where is technology heading, and we will begin to learn solutions utilizing various software to develop for these platforms.You will design and build an interactive product that communicates information on one of the following:1) Porsche cars. 2) Vivienne Westwood. 3) Plymouth Shopping Centre. 4) Prometheus movie.5) Plymouth College of Art. 6) The future of interactive technology.When developing your interactive product, consideration of target audience, trends in design/technology and your own career pathway should be researched and adopted into the development sketchbook to show and reflect how this has impacted on your own design strategy. Ongoing communication with lecturer is essential in allowing feedback to you in the progression of your designs and the content of the product.

No2/4

No1

No3

Student work required for this assignment

Your Final work must contain:• Research/sketchbook showing good/bad design examples on your chosen subject, and reasons why.• Research/ sketchbook showing the development of your own website/or interactive product designs.• Interactive pages and content that link together to create the product.• Your own design work as content for the site, in the form of photographs, text, etc.• Utilizing/integrating software: InDesign/Photoshop/ Illustrator/ Dreamweaver/ QuickTime/ Flash/ Video encoder/ Adobe Air/cloud based technology software and storage.• Final product will be shown in an individual presentation (6 mins) each the following week of the deadline day to lecturer from 2.00pm.

Reading / Resource List (Please refer to the Definitive Module Record [DMR]):Core Reading/Resources:Götz, V. (2002) Grids for the Internet and other digital media. Switzerland: AVA.Ilex.Hahn. J. (2010) Application Development: Strategies for Efficient Mobile Design and Delivery. Woodhead Publishing LtdKrisztian, G. & Schlempp-Ulker, N. (2006) Visualising ideas:from scribbles to storyboards.London: Thames & Hudson.Additional Reading/Resources:

Journals:Computer artsDigital creativityDigit Digital videoIDN magazine

On-line Resources:http://tv.adobe.com/http://www.youtube.com/http://www.digitalbackcountry.com/flashcatalyst/tutorial01/screencast/index.htmlhttp://www.tutorialized.com/tutorials/Dreamweaver/CSS/1http://ibuildapp.com/http://www.buzztouch.com/pages/http://appsmakerstore.com/login

Internal Moderation of Assignment Brief Signature Date

Name of Programme IM (Capitals):Name of Learning Skills IM (Capitals):

Brief1. Project Brief

Website research2-5. Good Website Design6-9. Bad Website Design

App research10-13. Good App Design14-15. Bad App design

Flash Turtorials16-23. Andys Workshops

Dreamweaver Tutorials24-27. Matt Workshop

Research28-31. Porsche Research

App Images32-40. App imagery

ArtBoards41-42. Illustrator Art

Flash Work43-50. App Design

Icons51. Icon Design

Information52-53. Why i did it?

Final Design54-59. App on Device.

Evaluation & bibliography60-61. Evaluation & bibliograph

Page 3: Sketchbook - Connor Bryant Porsche

Good Website DesignPorsche Website

I chose this website as my first example mainly because im going to be basing my app on prosche itself. Firstly i wanted to say my main reason for choosing this site as an example is mainly because it look proffesional but very simple at the same time. I like there use of imagery and text within there home page looks very simple but shows who they are and what they want to achieve. I want to try and use some of these same techniques in my work.

Here i have scrolled down the page to the next section where it has continued with the image and text technique. Nothing else other than an advert here and there its still very useful to me and stands out an awful lot. The images have a very good colour to them aswell and i like how the backgrounds are faded out asif your in the car itself.

Yet again i have scrolled down and it continues but adds in little icons for cars and there names. I have to say i really like this website and its design, i find it very proffesional, and i hope to incorporate the exact same feel into my work. Asif my app will be corrisponding to the website.

Bottom of the page and they have added videos in. Spaced and sized in different variations. Once again a very good look will definalty think about trying the same although an app doesnt cut the boundries of a website its much smaller.

Page 4: Sketchbook - Connor Bryant Porsche

Good Website DesignN9 Design

For my second and last website design i wanted to show a local business that really does take my eye for their simple but yet effective design N9 design. This is their home page now i don’t know whether it’s there advert or just my computer but i like the layout as you can see in the top right hand corner is there interactive menu layout very slick and professional. I like how the text lights up red when you highlight it.

This is the website design page from the sites portfolio i really like the layout of the images. Neat, tidy and well organized. No text to support the images just them there selves i like it.

This is the about us page for their information. Same layout interactive buttons in the text that will either take you on to further text or the web. Two images placed very well so that they work in correspondence to the text.

Here's the last page, it’s the contact page. Same useful layout but it also has the good look and interactivity which this site has throughout it.

Page 5: Sketchbook - Connor Bryant Porsche

Bad Website DesignLings’s Cars

Now i was searching the internet for some bad web designs and i came across this lings cars. This in my book is every single example of bad; it has a horrible background that takes your eye of the main text and point of the website. There’s way too much going on interactive buttons, boarders, images, motion it’s just crazy i didn’t nowhere to start when looking at this website.

Here i scrolled down a little bit and yet again its jam packed full of interactive buttons, boarders, text and motion etc. I also noticed how the text and fonts are just standard size and style very boring and not very creative. The imagery is also a little bit disturbing, you don’t know what to look at and you don’t know what button to press or where to navigate.

This is near the bottom of the page now i will say i had to scroll for a good 15 seconds to get to the bottom it’s that long. I found this image which is just beyond ridiculous? i mean who and why would you put this.

This is the bottom and for once i will say it’s not overcrowded and it makes sense a little bit, he’s got a slogan and an image of him saying it i would say that this is an improvement.

Page 6: Sketchbook - Connor Bryant Porsche

Bad Website DesignDesignzs 23

Here is my second website choice for bad design. It does its purpose i give you that. But i feel as if this website had been slapped together within an hour. The text is horrible and the placement of a few things is out of place. I don’t like how the headlines are highlighted in red and the interactive buttons are just underlined.

Here i have scrolled down and it’s basically the same thing. There are Lots of interactive buttons everywhere and misplacement of a few things. Don’t get me wrong i know it serves its purpose and just looks ordinary, but in design i always feel as if you should step it up a bar and create something unique.

This is the portfolio page. Now i don’t know if this is his work or as he’s stated there templates. I’m confused at why you’d have other peoples templates in your portfolio. But once again the only problem i have is on the left the side bar has way to much text and interactive placement.

This is just a standard survey page. But in my eyes i don’t see the creativity it feels as if he’s just plonked a simple design in or a standard template and left it at that no creativity.

Page 7: Sketchbook - Connor Bryant Porsche

Xbox One AppGood App Design

For my first app design i wanted to show you the Xbox one. It’s one of my favourites also being i like playing games, I like how simple it looks but with a good font style. It’s very modern and as I’m showing easy to operate, when I’m going through my Xbox one the buttons and pictures work flawlessly and it’s all linked up very well.

As you can see it’s mainly the same layout but just a different menu option (TV & movies) one of my favourite options as you can watch live TV from your actual TV settings on your Xbox and obviously they have a movie store where you can directly download and pay for any movie you want.

This is the tablet & phone application. Simple to use same layout and its very well presented. Interactivity is very well done as well i haven’t encountered any faults yet. It’s got all the simple uses your achievements, Home, Friends and etc. I would ideally like to try and create my app in this simple but well organised sense.

Page 8: Sketchbook - Connor Bryant Porsche

Xbox One AppGood App Design

For my second app i wanted to choose another favourite Blink box. I have this on my nexus 7 this is the opening screen when starting up the app. I love it professional well placed, aligned and good use of fonts and text. It has a

nice background gradient that gives it a nice shadow to go with the effect of loading up.

This is what you see after starting up the app. Very good layout of buttons, drop down menus so that you can go to different areas of the app and also a search button if there’s something specific you want to find.

Then on the far right there’s a person icon which is your profile, when clicked on goes to your details and films you own.

You can scroll to the left and you’ll find more films. I like the function of scrolling across it’s what makes an app so fascinating. Also the range and size variants of all the videos and genres. I really like how they have added in literally everything that you get on the website and phone app. Its just like being on the main site but on your

tablet instead i find it very useful to use and will carry on using it in the enar future.

Here is the page that i was going on about. The profile page where your bought videos and other media are stored for your use at a later date.

Page 9: Sketchbook - Connor Bryant Porsche

Facebook AppBad App Design

From what ive been reading online and reviews, this app has been heavily slated. I also agree that it in my opinion is a very bad app. It used to lack support for messaging, chat and even photo-viewing it still has

problems. The app also provides no way to edit a profile, delete a wall post or tag a photo.

From personal experiences and seeing people write about it, this app is a very badly designed interactive app. Whenever you go to like a status or tag a friend in a photo it won’t let you do any of these things instead it’ll

direct you straight back to the home page? Where you don’t want to be.

Here these images are just to show what the layout of Facebook app is like, I would say it serves its purpose just like the site and mobile app does. The one thing i don’t like is how i get the feeling that everything is just jam packed into one space. There’s a lot going on at one point, then nothing going on at another point. For its

functionality it just seems pointless.

Just another example of layout and drop down menu actions. Overall i would class this app as bad design, mainly for the reason that no improvment has even tried to be made on its behalf.

Page 10: Sketchbook - Connor Bryant Porsche

Andy workshopFlash Tutorials

In Andy’s workshop he showed us how to make a simple desktop app. First off we had to make our home page the centre to our new app. So i chose to just go with my name and a few boxes and lines to make the layout of the

page stand out a little bit.

Second we added in our first button which was going to be our gallery page. I added in between the line and top box.

We then linked up the button to it was interactive and when you tested the swf file it would link to the next page which was the gallery page. We then made a simple movie clip of images so that when you click next a new

image would slide along.

Now after we learnt the basics and how to put our buttons and actions together we had to add in another 3 buttons which linked up to another three pages. We had to make them interactive so when you tested it on the

swf file it would all link up like clockwork.

Page 11: Sketchbook - Connor Bryant Porsche

Andy workshopFlash Tutorials

We then had to go through the publishing settings and add a certificate and language etc. to the desktop app. Then we had to publish it out so it would be in a packaged state as you can see above in the image highlighted.

When double clicked the package would install onto your desktop as seen above and it has your icon and app name underneath it.

When thats also double clicked on itll load your app up. It will be fully linked up with all the buttons active and all the pages live on your desktop. (All of my buttons above and pages worked perfectly there where no

problems).

Just for an example here is my first page the gallery page. It has my movie clip gallery on it and a video of Jessie j price tag. Then as you can see above that my other buttons live on this page to which also crosses over to the

next page and so forth. I also made the Connors app interactive so when clicked on it would take you back to the home page.

Page 12: Sketchbook - Connor Bryant Porsche

Andy workshop Pintch and ZoomFlash Tutorials

In this tutorial we got taught how to add the pinch and zoom technique into our document. So we’d be able to pinch and zoom as if where on a mobile device.

This was the code we where meant to add in to our document. It will enable me to pinch and zoom whilst testing on the swf.

Here is my swf file live for testing as you can see on the left of the image is the mobile gesture menu. Which lets you enable the pinch and zoom action onto your document.

So as you can see on the left of the image i have enabled the pinch and zoom function. Then to the right i pressed on one part of the image and then the other side and pull, it zoomed in onto my square.

Page 13: Sketchbook - Connor Bryant Porsche

Andy workshop SlideFlash Tutorials

With the slide function we started off with the already made android swipe template that is currently on flash. Then we had to go into the movie clip which was the swipe gallery and add in another page

to the document as you can see mines on the left of it the green box.

Here is the code snippet that we had to add into the document. Then set each code snippet to swipe across to the next slide.

When testing the swf file like the last workshop i had to open up the mobile gestures menu and then select swipe.

Then when you click and swipe to the left it goes to the next slide.

Page 14: Sketchbook - Connor Bryant Porsche

Matt WorkshopDreamweaver Tutorials

Above are some of the few screen shots in which matt showed us how to start coding for our own website. But this one was for a pre-selected template he had made; he showed us how to start off

positioning off buttons and how to style them so when you go onto your browser there in the place you want them to be.

Im really glad that we had the chance to correspond with matt. Mainly because i have never really done any dreamweaver work in my life, but ive always wanted to. Now thanks to this workshop i can

code up a basic and good looking website within a few hours.

Page 15: Sketchbook - Connor Bryant Porsche

Above on the top was my first off finished site, before we got asked to go onto stage 2 and add in the extra content.

Matt WorkshopDreamweaver Tutorials

This was the furthest that i got to finishing on my style sheet i did a good amount of work got my website with all the extra content, but when i went to add in more and extra pages my document

went bust. Matt spoke a little to fast for my liking i would have prefered it if he did it in short sections and gave people time to do what he had asked but overall i found this workshop very usefull.

Page 16: Sketchbook - Connor Bryant Porsche

PorscheResearch

Porsche Automobil Holding SE, usually shortened to Porsche is a German holding company with investments in the automotive industry.

Porsche SE is headquartered in Zuffenhausen, a city district of Stuttgart, Baden-Württemberg and is owned by the Piëch and Porsche families. In July 2012, it was announced that Volkswagen AG was taking over the Porsche automotive company completely, which bears the same name, but is only a subsidiary of Porsche SE. In June 2013, Qatar Holdings, through the Qatar Investment Authority, sold its 10% holding back to the founding family, giving them 100% control.

Porsche owns 50.73% of the voting rights in Volkswagen AG.

The company was founded in Stuttgart as Dr. Ing. h.c. F. Porsche GmbH in 1931 by Ferdinand Porsche (1875–1951),his son-in-law Anton Piëch (1894–1952).

Founded: 1931

Porsche SE is the owner of Dr. Ing. h.c. F. Porsche AG (Porsche AG), and in June 2007 became a holding company for its stake in Porsche Zwischenholding GmbH (50.1%) (which in turn holds 100% of Porsche AG) and Volkswagen AG

(50.7%).

In August 2009, Porsche SE and Volkswagen AG reached an agreement that the two companies would merge in 2011, to form an "Integrated Automotive Group".

During December 2009, Porsche SE lost control of Porsche Zwischenholding GmbH, which as a result is now a joint venture between Porsche SE and Volkswagen AG. As of 5 July 2012, Volkswagen is to acquire the 50.1 percent in

Porsche's capital that it doesn't already hold from holding company Porsche SE for €4.46 billion plus one Volkswagen share.

Page 17: Sketchbook - Connor Bryant Porsche

Research Porsche Britian

Porsche Britian is the only recognized and offical porsche club based in the UK. In 2005 they signed a Contract of Co-operation with both Porsche AG and the sole importers Porsche Cars Great Britain. That enabled them to have very

close ties with the factory and importer whilst retaining our independence.

There are vibrant and exciting Regional activities, run by nearly 31 volunteer Regional Organisers.

I chose to include Porsche Britian into my Document because i will be using this site as an events and sports page in my app. Mainly because obviosly i want to base this in birtian and i wanted to have mainly events that where going to be

around this area and region of the world. I did think about using the main headquaters but it didnt really fit what i wanted to show within my app.

Founded: 1961

Calender

Heres the calender that i chose to use for my app events & sport page

Page 18: Sketchbook - Connor Bryant Porsche

Research (Images for App)Models

Model Series 911Targa 4s

I will be using this image as one of my model buttons

Model Series 911Cayenne GTS

I will be using this image as one of my model buttons

Model Series 911Macan S

I will be using this image as one of my model buttons

Model Series 911Boxster

I will be using this image as one of my model buttons

Throughout the next few pages i will be showing the series of images i will be using in my app. (mostly found on google images, and certain websites).

Porsche 911 Series

911 Turbo 911 Turbo S Cabriolet

911 Turbo S 911 Carerra S

911 Carerra Cabriolet 911 Carerra

Page 19: Sketchbook - Connor Bryant Porsche

Porsche 911 Series

911 Carerra 4 911 Targa 4

911 Anniversary E 911 Targa

They are the images that im going to use in my 911 Series specs page.

Research (Images for App)Macan Series

Model Macan SeriesMacan

I will be using this image as one of my model buttons

Model Macan SeriesMacan Diesel

I will be using this image as one of my model buttons

Model Macan SeriesMacan S

I will be using this image as one of my model buttons

These are the images that im going to use in my Macan series specs page.

Page 20: Sketchbook - Connor Bryant Porsche

Boxster SeriesResearch (Images for App)

Model Boxster SeriesBoxster

I will be using this image as one of my model buttons

Model Boxster SeriesBoxster S

I will be using this image as one of my model buttons

Cayenne Series

911 Cayenne GTS 911 Cayenne Turbo S

911 Cayenne 911 Cayenne Diesel

911 Cayenne Hybrid

Page 21: Sketchbook - Connor Bryant Porsche

Research (Car models For Specs

Carara CabrioletI will be using this image as one of my model

buttons

Targa 4I will be using this image as one of my model

buttons

Targa 4sI will be using this image as one of my model

buttons

911 TurboI will be using this image as one of my model

buttons

Turbo CabrioletI will be using this image as one of my model

buttons

Turbo SI will be using this image as one of my model

buttons

Carerra CabrioletI will be using this image as one of my model

buttons

Macan S DieselI will be using this image as one of my model

buttons

Macan TurboI will be using this image as one of my model

buttons

BoxsterI will be using this image as one of my model

buttons

Boxster SI will be using this image as one of my model

buttons

Cayenne DieselI will be using this image as one of my model

buttons

Page 22: Sketchbook - Connor Bryant Porsche

Research (Car models For Specs

Cayenne Platinum EditionI will be using this image as one of my model

buttons

Cayenne SI will be using this image as one of my model

buttons

Cayenne TurboI will be using this image as one of my model

buttons

Cayenne GTSI will be using this image as one of my model

buttons

Cayenne Hybrid

I will be using this image as one of my model buttons

Carrera SI will be using this image as one of my model

buttons

There are a few more that i will be adding to my document

App Design (Illustrator Art boards

Above is my illustrator art board of my final app design pages. There is the home page along with the about me and models page. I chose to go for the simple but proffesional look. Making the layout

perfectly neat and the images near enough like the ones from the website. I want to make the buttons interactive so that when you press them theyll turn red then lead you to the selected page of your

choice.

Above is a few more of the pages i have chosen to design. These are the model pages in which each picture will have a model car of the chosen design with all of its specs and techniqual specs. I want

to make the buttons interactive so that when you press them the image will go greyscale and the text red as part of a flowing design. I want it all to match all the way throughtout my whole app.

Page 23: Sketchbook - Connor Bryant Porsche

Here is my last art board page. On the far left is the last of my 4 model routes, and on the right is what the specs pages will look like themselves. Like i said just above on the previous page i want my design to be a flowing and stable app, everything must link up perfectly and nothing must be different in any

way at all.

They are my finished Art Boards..... Now to go onto the main Design.

App Design

Right to start with i copied the top bar of my art board onto flash. Now i needed to make this menu bar active so i made all the text static and then converted them into buttons. I gave them easy and

noticable instance names and then left it at that. It was time to go on and include my images.

Now as i said a minute agoi had to add in the pages images. So i just copied them over from illustrator, i then had to convert these into buttons to so that when you click on the desired car it would take you

to the series. But most important i wanted to make the first image the larger one a movie clip.

Page 24: Sketchbook - Connor Bryant Porsche

So i started by converting the image to a movie clip, and then adding in some text to the images . I then jumped inside the movie clip and added those three circles underneath so each time you cross over to the next image itll be red to show you which one your on. I then also added arrows to the side so that

you can navigate that way aswell.

So after i got the movie clip running with code and the buttons all functional so i can direct myself to the right pages i added in the latest news section in which there are images. There will then in place be text in which will direct you to the coded webpage and show you the

latest news. I also want to throughout the whole document make the logo a button so you can direct straight back here.

As you can see to the right i added in the text. Also i coded it up so that it will direct you to the chosen web pages. It was a very easy process and worked perfectly. NOTE: bearing in mind that all my

instance names are the same but with a different letter after each one to make them different so that i can travel around perfectly.

Now it was time to move onto my about page. All i did which was very simple was pull over from illustrator my design. I then had to code up page 1s buttons to page 2s so i could test it on my swf file

and it worked perfectly.

Page 25: Sketchbook - Connor Bryant Porsche

Same process copied over design. Then i coded page 1 & 2s buttons to link up to this page aswell, i also linked up the images on page one so that when you click one of them itll direct you to the chosen

models page.

Same with this page

Same process illustraor design in, Then had to code up the buttons to work. But this was the tricky part after coding up the next 3 model pages, each one of these images had to be coded up to a seperate

specs page per each picture and had to have running buttons.

Same with this page

Page 26: Sketchbook - Connor Bryant Porsche

So like i said i had to link those images up so they would connect to a page that looked exactly like this. It would show a picture of the car model show its size underneath, then have its specs underneath that

and another button that connected to an adjacent page that showed you more in depth specs.

Which this page was made for. When you click the all technical specs button it would take you to this page and show you more in-depth details. I had to do this for over 25 different cars it took me a very

long time and alot of patience but it pulled off and it works.

This was my events page. Even though it was part of my original menu bar, this was one of the last buttons that i started working on. Mainly because i couldnt find any information on events and

sporting events that where taking place. Until i found a group called Porsche Britian, so i decided to use them in my app as an example.

This is the second events page as part of a calender. The left page was january to july and the right page covered the rest. Now on the left i made a little back button so when you click it itll take you back to the previous page and i also made to buttons one for the events page on the website and a second in the top right that would take

you to the main site.

Page 27: Sketchbook - Connor Bryant Porsche

My last page was the videos. As you can see above i dragged in the illustrator design, and then i just coded it up so that each image would take you to a page full of its designs videos (Mainly the latest

models and how there interior and exterior looked).

This is what the video series pages looked like. I tried to make the play bar with a fullscreen option, but everytime i would press the fullscreen button it would just glitch out on my app and mess up. So i went

with the simple play thats all bar. Also theres a back button so i can go back to each page.

App Design (Icon Design)

I had to make 3 sizes this is the 72x72px one. As you can see its just a simple background of a checkered colour (Black and red) with a drop shadow in the corner for effect. (Just to confirm that the

icon worked perfectly).

42x42px

28x28px

That was my app finished, i just needed to add in a icon so when installed you can click on it.

Page 28: Sketchbook - Connor Bryant Porsche

What its about

Why I did my app

The reason to why i did my app was so that it could act as a counterpart to the website. I’ve looked all over the play store and my iPhone app store and there are no Porsche apps that act like the website but on tablet form.

So i wanted to make an app that would tell you the latest models, what they are and how they came about, also mainly there specs. I also included an events and sports page which basically shows you what’s going on in

Britain on the Porsche front.

It’s a website called Porsche Britain; it basically shows you where and when an event is going to happen and what it called. So i copied parts of their calendar into my app and added links. One of the hardest things i

wanted to do was also to show the exterior and interior design of the new cars on a video page, which i also got round to adding in official release videos and one running off road video to show people what the cars are

really like. This was the main aim of my Tablet app and i think it went very well to plan.

Each page function?

Home Page:

The home page will act as the centre and start of my app. It has the latest news function and the newest cars of last year (Targa, 911 series, Boxster best sports car of the year etc.).

About Porsche:

It’s as simple as it sounds its basically just a page on Porsche and its strategy for the year nothing fancy just a little bit of text

Models:Models page will act as a backdrop to the main thing. Each button (there are 4 altogether) will lead onto a

series of Porsche’s new cars, which will then lead onto their specs and full technical specs.

Events & sports:

This was a hard one but basically i found a group on the web called Porsche Britain. Their main goal is to make a calendar of the latest and upcoming events of 2014. So i took some of this information and put it

into a calendar on this page. Then put some links into the full website.

Videos:

Videos of my chosen cars i have done specs on.

Page 29: Sketchbook - Connor Bryant Porsche

On nexus 7Final App

Icon on my Nexus 7, fully installed app. The about page on my app.

My home page Models Page

Page 30: Sketchbook - Connor Bryant Porsche

Final App

911 Series Page Boxster Series page

Macan Series Page Cayenne Series Page

Page 31: Sketchbook - Connor Bryant Porsche

Final App

That is my Full working app installed onto my nexus 7

Events and sports Page 1

Events and sports Page 2

Videos Page

Page 32: Sketchbook - Connor Bryant Porsche

EvaluationPorsche

BibliographyPorsche

Overall I think that my final design had worked out better than predicted. I like how my aim to make my app as in depth as i could on the subject matter has worked out, it’s a

massive advantage. For example i wanted to do all the latest models of Porsche but at the same time tell you the audience what the specs where and what they are really all about.

I also like how my app seemed to all link up perfectly i had no trouble trying to make it better or worst it fitted the build perfectly, and that was down to my art board planning

beforehand on illustrator. Now some bad aspects that I’m kind off disappointed about are that i wanted to make my app zoom compatible so that when you want to zoom in on a

certain part of a page it would do it without any fuss but by the time i decided that i wanted to do it i was already half way through.

Also i wanted to make my video page and the video content on it full screen compatible but every time i seemed to try and add that feature in when testing my app on the device

the full screen button would take you to another video and then when zoomed out leave an embedded image of the video on the background of each page. So i went with leaving it as a

simple play and stop motion which i also think worked out with its advantages as well.

With my overall design i wanted to use colours that related to Porsche like Grey, Red etc. I found this out by scouting there website and just pondering at what colours they used the most. My design interface was really simple i just wanted it to look professional and simple

at the same time, but to also attract the viewer’s eye and i think my layout worked very well I’m happy with it.

Im happy with the way i handled my time keeping over Christmas and managed to slot everything i wanted to achieve within a good timescale. I also think the content and

materials i used for my app where very appropriate and matched my aims very well. My final solution (App) is as stable as it could be I’ve tested it over one hundred times and

made sure that every aspect of it is working, which has made me a very happy man.

Next time i would ideally like to have some more time, so that i can delve into flash a little bit more and add some more exciting new features into a app of my making. Such as zoom, Swipe, Full screen etc. Even maybe play around with Dreamweaver a lot more and see if i

can produce a much more detailed finish.

http://www.porsche.com/uk/

http://www.porscheclubgb.com/

http://www.porscheclubgb.com/Events/EventsDirector.aspxFor my event Calender

http://www.youtube.com/For my Videos

Thank you for viewing my InDesign file