Unit 73: Web Animation for Interactive Media. Mobile Phone. Advertising Campaign. By Tatiana Filipe 1

Transcription

1 Unit 73: Web Animation for Interactive Media Mobile Phone Advertising Campaign By Tatiana Filipe 1

2 Contents Mobile Phone 3pg Jonathan Ive & Dieter Rams 4-6pg Apple Research 7pg Phone Studies 8pg Mood board 9pg Life Shot 10pg Banner Advertisement 19pg Banner Advertisement 20pg Pros and Cons 21pg Screen Shots 22pg My Banner Ads 23pg Evaluation 24pg Thumbnail sketches 11pg Phone Illustration 12pg Illustration Proses 13-14pg Final Poster 15-18pg 2

3 Mobile Phone 3

4 1. Dieter Rams was the inspiration for Ive s designs for Apple, as they can be very much alike. Rams commented that Apple is one of a handful of companies that follow Rams ten principals for good design 2. Ive s father was a silbersmith, who lectured at Middlesex University, Ive enjoyed going to his father s workshop during Christmas where there is nobody there and his father would help him make what ever he dreamed up. 3. During his high school years, he was passionate about cars which was for this interest that led him to be a designer in this later career. 4. Ive worked for an design agency called Tangerine, located in Hoxton Square, where he design different products such as a microwave ovens, toilets, drills and toothbrushes, however he was frustration in the position that he was as most of his work were rejected by Tangerine stating that it was too costly and looks too modern. 5. Apple was Tangerine s client, who Ive worked for, creating the PowerBook designs and from there, Apple tries to recruit him as a full-time employee for tow years without success. Jonathan Ive 5 interesting fact 4

5 Dieter Rams 3. 5 interesting fact 1. Rams is a industrial designer and was a chief designer for Braun from 1961 until While designing a product Rams asked himself is my design a good design? he created the ten principals for good design which are: Is innovative Makes a product useful Is aesthetic Makes a product understandable Is unobtrusive Is honest Is long-lasting Is thorough down to the last detail Is environmentally friendly Is as little design as possible He began his studies in architecture and interior decoration at Wiesbaden School of Art in A year later, he took a break from studying to gain practical experience and finish his carpentry apprenticeship, He then returned to Wiesbaden School of Art in 1948 and graduated. 4. He was influenced by the presence of his grandfather, a carpenter. Rams once explained his design approach in the phrase Weniger, aber besser which translates Less, but better 5. He was awarded the Kölner Klopfer prize by the students of the Cologne International School of Design and in 2009 awarded the great design prize in Australia. 5

6 Dieter Rams VS. Jonathan Ive 6

7 Apple Research Apple is an American multinational technology company headquarters in Cupertino, California, that designs, develops, and sells consumer electronics, computer software, and online services. Apple was founded by Steve Jobs, Steve Wozniak and Ronald Wayne in April 1, They started off by selling Apple i, a personal computer kit crafted by Wozniak. Sold as an assembled circuit board and lacked basic features such as a keyboard, monitor and case. 7

8 Phone Studies These are photos of my phone that I took for this project so I had something to work on. 8

9 Mood Board 9

10 Life Shots 10

11 Thumbnail sketches These are the sketches of ideas for the poster. I put one of then and finalise it, bring it to Illustrator then finished in Photoshop 11

12 Phone Illustration These are the illustration of a iphone that I did for this project. I used my own iphone as reference for this illustration then turn it to a 3D object in Illustrator. i use google and brandsoftheworld.com to fine the logo and the symbols use. 12

13 Illustration Proses Sketch Base Coulors Illustrator 13

14 Illustration Proses Base Coulors (Illustrator) Shading (Photoshop) 14

15 Final Posters I put the sketch into illustrator to put the basic shapes and colour to then bring in to Photoshop to add some shading and layer effects. Then I add the typography listen to the beat with iphone 4 and make it simple for the illustration to stand out more. The only difference between the sketch and the final illustration is that the text, it had iphone 6 since this is what the majority had but I change to iphone 4 since it was what I have at hand. 15

16 Final Posters This was one of the thumbnail idea that I sketched out. The phone was done in Illustrator and made it into a 3D object then was brought up in Photoshop where I added some brush effect to look like these some magic fairy dust then added some small stars/sparkles, I added the type magic at your fingertips since it fit with the over all theme. 16

17 Final Posters Another sketched idea that I did, this one is very simple, I took the idea from other phone poster that have this kind of background. The phone and the background was done in illustrator then was brought in to Photoshop to add the finishing touches like the text and the shadow of the phone. However I m not really pleased with this one since is very simple and not a lot is going on. 17

18 Final Posters This one used one of the life style shot that we took. I place it into Photoshop and edit it, making it brighter and add some sort of colour to it. I used the type capture your best moment since it fits what is going on in the photograph, however I don t believe the front that was used fits in. Everything was done in Photoshop, the only thing that wasn t done on Photoshop was the phone which was done in Illustrator. 18

19 Banner Advertisement 19

20 Banner advertisement Different banner ads What is an Banner Ad? It is a form of advertising on the WWW (World Wide Web), these kinds of ad mostly contains an animation that sometimes can be interactive, link to a page that has been sponsored, videos and other stuff. But it not only on the WWW that banner ads exists you can find them on the side of the bus, inside of the tube, posters and newspapers, these banner ads are refereed as print advertising. Static: Static ads offers no movement or interaction for the user, it mostly contains hyper-links to advertiser s website with sill images and texts Animated: Animated other then Static, it has movement. Depending on the design, the whole ads can be animated of just a part of it be animated and the other half can be Static. Interactive: Interactive ads have average of tool and games for the user s to entertain them which can lead them to the advertiser s site or the predation that ad is taking place. Video ads: it plays a short video which can play automatically or it can be the user-activated, some can allow the user to have control over it like the volume, fast-forward and/ or rewind but there is other where you have no control. Expanding ads: expanding ads increase their size once a moused over or click on, they varies from start off by being Static image ad then expand and change to an interactive video 20

21 Pros and Cons Pros: They are inexpensive compared to newspaper placement or TV spots. It instant gratification so your costumer can see the ad and if you are selling your products online then they can shop and buy without leaving the house. They are easy to make even for beginners in the design industry, it is easily to put together and meet the requirements and successfully attracts visitor attention. It is easy to fix up some errors, in the print and TV advertising would, it take some time to change, adjust, update and/or fixing some errors in the advert, online advertising allows you to quickly do the adjustments that you need to do. Cons: Too much ads come up on your scene and most of the time you can t control it. It is the lower pay in banner advertising. You get a smaller cut because you are not selling the space directly. Not knowing what type of ads is going to be put in your space. Although you can usually count on it not being of an adult only nature, occasionally you might get one that can be a problem. 21

22 Screen shots Banner advertisement These are screen shots of ads that I found, some of them pop up during my research on Banner Advertisement. Theses are to show the variation of different banner adds in shape, sizes, typography, colours and the over all layout of it. 22

23 My Banner Ads Here are the 3 banner ads that I have created for this project. They where done in Edge Animate, these are just scene shots of them 23

24 Evaluation What went well? Posters I had a lot of fun doing this project, specially doing the phone illustration and turning it into a 3D object I use the Illustration and Photoshop to do the phone illustration and the final posters. I did experiment the final posters in Photoshop to see different kind of effects would work with the posters like the fairy dusts or fixing the light, making it warmer. I did 3 posters that are mostly illustration which was bring into Photoshop to place everything together and add the texts when the last poster was mainly done in Photoshop. Animation Doing the banner ads animation was a bit challenging but I did enjoy making them and it was fun see the end result. What could be improve? I do believe the my banner ads and some of my posters look a little plane and I think if I have spent more time into them then they would look better. Sometime that can be improve is my time management since i do feel like that I m slowing myself down and not getting things done on time and not look rushed. 24