Research on adverts

http://www.youtube.com/watch?v=nvHLOIYiDV0

Critical Mass: Pitch Fuzz
The add is aiming to awaken the taste senses of the person to desire the cocktail. Beautifully shot with particularly distinctive sounds, the video can make one crave that sweet champagne cocktail. I like the instructive hand-crafted chalk lettering, that appears to be blended into the environment.

https://vimeo.com/76053731

Nike: Human Printing Press
Nike are know to make cool ads. There is nothing cooler for a graphic designer than an ad that revolves around ‘manual’ printing process. The concept is quite strong on it’s own and thereference to a printer machine is quite well presented.

http://www.youtube.com/watch?v=Dn02tMxj4Ss

Withings: Beautiful naked stop-motion
Really nice use of stop-motion animation! Really well executed ad!

http://www.youtube.com/watch?v=qWWQb6vIGlI

Club Orange Ron Burgundy TV Advert
Kind of stupid but short and on point. I guess that it is Anchorman 2 related it is supposed to be that way. Might work even without the sound as a digital poster.

http://www.youtube.com/watch?v=ePONSGuXjQU

http://www.youtube.com/watch?v=UZOA2Z-fZes

http://www.youtube.com/watch?v=ljDMz2DdJ-o

Jack & Jones: Made From Cool
Brilliant campaign. The concept is very clear and execution is superb. And also having Chrisopher Walken make the clothes is a great visualization of the slogan.

http://www.youtube.com/watch?v=M7FIvfx5J10

Volvo Trucks: The Epic Split feat. Van Damme
Became quite viral and spawned a fair share of imitations and mockery, yet the ad is quite well executed and clear when it comes to pure advertising. What many don’t know is that it is just another execution of a running campaign that features various stunts of different professionals. Here’s another one, much reminding me of the stuff we see in films such as Fast and Furious: http://www.youtube.com/watch?v=1zXwOoeGzys

http://www.youtube.com/watch?v=ExRg8m38rug

Coca-Cola: Grandpa
It seems that Coca-Cola are always able to come up with a great concept for an ad. This one in particular I found quite interesting as it shows the change that technological development has brought into the modern age, although our habits and pleasures stayed the same. Very well executed ad.

http://www.youtube.com/watch?v=Vtz4qL4-hNE

Coca-Cola Zero: Unlock The 007 in You
Another great one from Coca-Cola, setting a James Bond scenario into a real life situation where the characters are humming the theme song from the film, making the ad a short musical.

Research for digital posters

Digital posters allow for exploration of another dimension: time. This is great for making accent on particular parts of a poster or creating a whole scenario. It also allows use of footage, which is great.

The Dark Knight Rises

This poster by Hungarian illustrator and designer Juhász Márk, is a great example for many reasons. First it is very dynamic in a subtle and clear way. The short animation summarises the content of the movie. It also uses the medium very cleverly. The animation is short enough to make the desired point fast enough to be clear to a passing person.

Here’s the original poster for comparison. Again a very nice execution but rather relying on the actual aestethics of the character and atmosphere. This helps the poster be more dynamic and engaging. The main elements are: the main character, the logo of the film and the background.

Lots of films use this approach to visualising their posters. Here’s the same composition as the Dark Knight, but a completely different theme: characters, background and film logo.

Even though it is an expected approach, the Iron Man 3 poster looks quite exciting.

http://www.superheroscreen.com/work/digital-posters/title/ This digital poster for the Transport for London Underground informs us in a very clear and in an ‘on-brand’ manner of the proper use and dangers of the escalators. Positioning of these posters is crucial as they usually can be seen while using the escalators.

http://www.superheroscreen.com/work/digital-posters/super/ This poster is a good example of using animated graphics to create dynamic and eye-catching content.

http://www.superheroscreen.com/work/digital-posters/the-elder-scrolls-v-skyrim-digital-posters/ A great poster that features in-game cinematics of the game Skyrim. THe feel and excitement of the game is directly displayed as it is the strongest component of the product.

Series of beautiful animated typographic posters by Simi Zeko

http://www.pencilscoop.com/2013/10/75-best-creative-animated-gifs-for-your-inspiration/ this is a wonderful resource of motion graphics ideas that can be used on the digital poster.

A nice poster I’ve encountered in Westfield, Stratford.

https://vimeo.com/53089256 beautiful motion graphics by Kostya Shun.

https://vimeo.com/41146470 Oleg Burinsky does fantastic compositions in motion.

https://vimeo.com/35548625 Fantastic presentation of digital content that features combinations of mediums and different technology, such as motion graphics, 3D, green screen, touch, motion capture etc.

https://vimeo.com/68155368 very nice digital advertising featuring animation and motion graphics by Daniel Oeffinger, New York)

https://vimeo.com/40770307 beautiful Volvo Concept presentation. Some details here.

‘Moodi’ presentation test 3

I have added the cursor that will point to where actions happen.  There are some timing issues, but well on the way of fixing them.

Pointer clicking

Pointer

Click

I have made the icons ‘clickable’ in order to help clarify the content.

The sharing options and animations have been clearly presented, but I am rethinking that part a little bit. I am thinking of adding a demo of recording a 5 second video and sharing it, rather than just doing the photo. Or may be using one of them to preview the way the delete button works?

Overall I am quite happy with the way the project is moving.

I still have to fix the boring and static beginning…

‘Moodi’ presentation test 2

I’ve done some improvements on the presentation. I have introduced a new icon since the footage requires it. I am testing how the app would work with many people in the frame. Footage looks good. The music works with the footage and the concept. I am rethinking the flashing type at the beginning.

I have added a new mood: smoking. It is not technically a mood, yet it is supposed to say ‘in a mood for a smoke’. This is important for a very particular part of the presentation.

Smoking

‘Moodi’ presentation test 1

Testing the way the presentation of ‘Moodi’ might look and feel. These are initial tests. All of the elements are likely to be changed in the process.

The reality augmentation works fine as the combination of footage and graphics fits together as the graphics are supposed to contrast and visualize the information they carry.

After reviewing few options on the soundtrack I have stumbled upon a track I have produced in 2006 and it just fits perfectly into the presentation. This will also fulfill another criteria that I am striving for: have the whole app and presentation be my own work. Here’s a link to the track: https://soundcloud.com/muzikbg/moodi

I have also prepared some graphics that I might need.

Information stamp

Moodi icon

Moodi logo

add share button

Delete button

Share to Facebook button

Share to Google+ button

Play Video button

Record button

Share button

Share to Twitter button

video recording number 1

video recording number 2

video recording number 3

video recording number 4

video recording number 5

Switch camera button

Moodi photo/video frame

iPhone frame

Presentation ideas

Start by introducing the mood icons on various backgrounds starting with 4 common ones that last longer and then rattle throughout the rest by speeding up. This should accomplish revealing some of the essentials of the app. They need to be enough to make sense of the idea.

A transition from full screen into a landscape iPhone and the app in action with live footage. The explanation of the navigation might be through a cursor.

Rethinking the navigation and the share screen.

New navigation

I have gotten rid of the button in the top-left corner as there is no reason for it. The app is either on or off and does not need ‘main menu’ to be used. I have redesigned the ‘change camera’ icon, so it is more balanced. I have also made the ‘record’ button a bit thicker. I have changed the shadows to 30% black and 7 pixels in distance with no blur. This is valid for the ones in the share screen as well. Some might say that it looks plain or empty, yet they need to understand that it is about the content rather than the app itself. The record button for example has a hole so that a maximum space of the frame is visible.

Share Screen

On the share screen there are a few more changes although it might not seem like it. I have balanced the icons. The ‘delete’ icon sits better now, more stable. The share icon and the options have been retouched and placed differently as a rainbow. The ‘add sharing account’ button is underneath the ‘share’ icon for convenience as that option never changes place. The rest just align proportionally. I have also cleaned the background from the pattern. The solid colour works better.

Navigation update

Moodi navigation 02

Share screen

Share options

The share screen is rather branded, featuring a pattern of the logo in the background. The icons follow the branding style and feel of the logo and mood icons. Holding on the share icon opens up options for sharing. Also the snap can be reviewed and deleted (by pressing the basket icon on top. I have also added a feature that stamps the location and date of the photo/video.

Testing icons in on a footage

Testing the way graphics work with the video. I have added a white background under the graphic, that has a little bit of feather so it can blend nicely with the video. I guess that the colour of this additional graphic background will depend on the colour of the graphic and the natural light of the video.
The footage itself has a filter that serves to boost the feeling of the atmosphere.

Mood visualization

These are the original drawings of the moods I intend to use. I will use these graphics as instances to create animated gifs and use them in AfterEffects as mood visualisations. These might change meaning in the future depending on the presentation purposes.

mood icon for ‘angry’

mood icon for ‘cheerful’

mood icon for ‘confused’

mood icon for ‘cool’

mood icon for ‘upset’

mood icon for ‘thinking’

mood icon for ‘stressed’

mood icon for ‘smart’

mood icon for ‘tired’

mood icon for ‘romantic’

mood icon for ‘rich’

mood icon for ‘sad’

mood icon for ‘peaceful’

mood icon for ‘lucky’

mood icon for ‘lonely’

mood icon for ‘happy’

mood icon for ‘dizzy’

mood icon for ‘painful’

I think that the icons came out nice. They are understandable and distinguishable enough. The animation really improves the overall feeling of the icons, it complements and supports the concept.