OUGD504 Brief 04 Augmented Design - Study Task

Produce a 'design board' that addresses the following audience, message, tone of voice.

Review similar campaigns, creative print advertising, locations, positioning, use of colour, type, language, photogaphy, etc. to communicate tone.

There's today many creative possibilities with print support. It could be great to connect new technologies and print for my ads.

☞ The Talking Ad (Reporter without borders) : it's a simple but amazing idea. You need only a smartphone and scan the QR code to acess the video. It works for medium supports (newspapers, magazines, books).

☞ The Test-Drive Ad (Volkswagen) : here's another print ad for smartphone. It turns like a game as we saw the qualities of the car.

☞ The Bookbook (Ikea) : a funny way to present a printed book like an Iphone ad.

Another Ikea idea, the Catalogue 2014 allows you to see a furniture like IRL in a room. You just need to place the catalogue where you want it to stand and watch the results on a smartphone or tablet.

☞ Layor Creator : it's an app which make a print support alive. A photo becomes a video, we can buy a thing we saw directly on the internet, etc. It made me thinking about Harry Potter newspapers.

☞ Other printed ads which use other effects :

OUGD503 Responsive Brief 01 Individual Practice - Feathr Submission

☞ I designed a wallpaper for the contest. I wanted to do some illustration for that in order to express myself. The peculiarity of my wallpaper is the 'false' repetition. We have the impression that the face is the same, but when we look twice, eye position changes. I called it 'Jean-Pierre', a french-fashioned name because of the style of my character and I want people to feel a direct connection with the wallpaper as Tom said : "it needs to say something". You can see my design on Feathr website.

My repetition

Maybe we can have a uncomfortable sensation that the character is following us but that's the point and I am content that I created this design. It's like to have the 'Joconde' at home, that has inspired me.

OUGD504 Brief 04 Augmented Design

This brief proposes to create print ads for the website that we created in Studio Brief 03. We need to consider how to communicate to the audience and the supports we use (cost, position, etc.).

Questions : what kind of message we want to communicate ? What language, tone of voice we'll use ? What's important to say about our website ?

OUGD504 Brief 03 A brief history of… - Study Task W3

☞ Simon proposed to us for this session to do some research to understand how the web design and new communication media work. I decided to focus on the phenomenon "Fakation."

Simon nous a proposé pour cette session de faire des recherches afin de comprendre le fonctionnement du web design et des nouveaux médias de communication. J'ai décidé de me concentrer sur le phénomène "Fakation".

✌ Definition : the word fakation comes from the contraction of fake and vacation and it refers to a viral phenomenon where people pretend to be on vacation by posting photomontages on social networks.

This trend highlights a number of questions :
- Why do people do that ?
- How much deception can go ?

Définition : le mot fakation vient de la contraction de fake (faux) et vacation (vacances) et il désigne un phénomène viral où des personnes font semblant d'être en vacances en postant des photomontages sur les réseaux sociaux.

Cette tendance met en avant plusieurs questions :
- Pourquoi les gens font-ils ça ?
- Jusqu'où la supercherie peut aller ?

The principle is very simple : take pictures and be integrated on a background of a paradise island for example, and post it on social networks. This is a parody of "real" fakation photos that our friends posting, mostly to make us jealous and envious. People have fun doing the photomontage and no matter if you are an amateur or not. Generally, a good fakation is detected by small details that shows the fraud : a poorly done trimming, apparent background or mouse cursor. There are even applications for smartphones that offers in few minutes a perfect fakation. Finally adding the hashtag #fakation on Facebook or Twitter for sharing photomontages.

Le principe est très simple : se prendre en photo et s'intégrer sur un fond d'un île paradisiaque par exemple et poster sur les réseaux sociaux. C'est une parodie des "vraies" photos de vacances que nos amis postent, la plupart du temps pour nous rendre jaloux et envieux. Les gens s'amusent à faire les photomontage et peu importe si on est amateur ou non. Généralement, un bon fakation se détecte par de petits détails qui montre l'imposture : un détourage mal fait, fond ou curseur de souris apparents. Il existe même des applications pour smartphones qui propose de faire en quelques minutes un fakation parfait. Enfin l'ajout du hashtag #fakation sur Facebook ou Twitter permet de partager les photomontages.

Fakation really poses the problem of identity and self-image on the internet. Our publications generally show the positive side of our personality and we control or erase anything that could compromise us. Social networks allow us to put ourselves on stage and sometimes act as a mask that hides the reality. That is why the fakation phenomenon is growing. However, we can ask how far this trend can go. That's what this Dutch artist wanted to test for her final project study. Zilla von den Born led to believe Facebook friends she was going for a trek in Asia for two months. The detail was very thorough : she has asked her family to participate, she did sessions tan, even watched the train schedules, created a Facebook profile for an imaginary friend... all illustrated with photo and video montages showing herself during her trip. The purpose of this experiment was to demonstrate that we should not be jealous on Facebook because most of the photos are photoshoped in some way or another. In the end, she felt alone because nobody wants to believe in her on social networks anymore.

Fakation pose vraiment le problème de l'identité et de l'image de soi sur internet. Nos publications montent généralement le côté positif de notre personnalité et nous contrôlons ou effaçons tout ce qui peut nous compromettre. Les réseaux sociaux nous permettent de nous mettre en scène et agissent parfois comme un masque qui cache la réalité. C'est pour cela que le phénomène fakation prend de l'ampleur. Cependant on peut se demander jusqu'où cette tendance peut aller. C'est ce que cette artiste hollandaise a voulu tester dans son projet de fin d'étude. Zilla von den Born a fait croire à ses amis Facebook qu'elle partait pour un un trek en Asie pendant deux mois. Le détail a été très poussé : elle a demandé à sa famille de participer, fait des séances de bronzages, regardé les horaires de train, créé un profil Facebook d'une amie imaginaire… le tout illustré par des montages photo et vidéo la montrant durant son voyage. Le but de cette expérience était de démontrer qu'il ne faut pas être jaloux sur Facebook car la plupart des photos sont trafiquée d'une manière ou d'une autre. Au final, elle s'est sentie seule car plus personne ne veut la croire dans ses faits et gestes sur les réseaux sociaux.

In conclusion, the phenomenon fakation counterbalances in a fun way the proliferation of holiday photos on social networks.

En conclusion, le phénomène fakation contrebalance d'une façon amusante la prolifération des photos de vacances sur les réseaux sociaux.

See Zilla's project - See Before report

Digital Print Workshop

We've got a workshop about how to mange colours in commercial printed.

There're 3 way on commercial print : Offset Lithography, digital printing and screen printing (not really used).

Main colours modes : CMYK (subtractive colour) and RGB (additive colour). For the CMYK one, we need to think of colour as ink (printing process).

When you choose a brighter tint of one of global colours, you can see the percentage.

Spot color

Process colours

A process colour is printed using a combinaison of the four process inks : CMYK. By default, Illustrator creates new swatches as process colours.

Global Swatches

A global colour is automatically updated thoughout your artwork when you edit it. All spot colours are global ; however, process colours can be either global or local. You can identify global colour swatches by the global colour icon (when the panel is in list view) or a triangle in the lower corner (when the panel is in thumbnail view).

Spot colours

A spot colour is an ink that is used instead of, or in addition to, CMYK process inks. You can identify spot colour swatches by the spot colour icon (when the panel is in list view) or a dot in the lower corner (when the panel is in thumbnail view).

OUGD504 SB03 Seminar - Search Engine Optimisation

Search Engine Optimisation (SEO) uses algorithms to access the suitability and ranking of websites based on search terms. This is a way of making alterations to websites according to the criteria that search engines use when 'crawling' web content.

What factors ?
On-the-page :
- content
- HTML
- Architecture
Off-the-page :
- links
- trust
- social
- personal
Violations :
- irrelevant/weak content
- spam
- paid for links

Video by Google about SEO :

Task : additional research on SEO

The positioning of a site is generally good-considered if it's in the top 10 search engines.

The issues:
- Make a website visible in a sustainable way
- Capture qualified traffic from search engines
- Make a brand to users

Strategy:
- Define the terms which have the best correspondence with your website :
TOO SPECIFIC terms do not generate enough traffic
TOO GENERIC terms are not sufficiently qualified
- Accurately describe the page's content : choose a title that effectively communicate the topic of the page's content.
- Create unique title tags for each page
- Use brief but descriptive titles

Another video about common mistakes in SEO :

OUGD504 SB03 Seminar - User Experience Design

User Experience Design (or UXD) is a method that shows how users interact with a product/service. It's not just the way they use it. It is also the role that the product plays in the life of a person.

Must take into account the empathy, the affects of the client. That's why brand identity exists, it creates a direct link between us and the brand. We need to believe in the company to consider a product.

Dicussion : what products or services can you think of that have significant user experience concerns ? Particularly in contrast to competing products/services.

Facebook/Twitter
Firefox/Chrome/Safari/Internet Explorer
Ebay/Amazon
YouTube/Vimeo

Design for the wild : design to where it's supposed to be.

Garrett's model of UXD : abstract to concrete, the prupose is to know what and why is the content of the product, aesthetics, etc.

Task : consider Garett's model in relation to your website :

Strategy : to present videos in a different way, explain the meaning of viral videos with a text content.

Scope : its function is based on surprise. The interaction between user and interface needs to be easy to manipulate in order to see the more of videos.

Structure : links to random videos, search bar to tap key words to find specific subjects.

Skeleton : when you are on a video page, there are links to other videos, a homepage with a selection, an about page and and a top videos page.

Sensory Design : equiity between video/text content, soft design with geometric and simple forms.

UXD Methods :

1° User research : real life user reasearch - goals of particular user groups, attitudes and behaviours

2° Personas : there are documents that describe a user type based on research

3° Content Strategy : based on user research, persona docs as well as the overall brand/project. What is the necessary content ? Hierarchy ? What content reflects brand identity ?

4° Site maps/Task flows/User journeys :

5° Wireframes :

6° A/B Testing : method of testing a variation of a system against the existing

Task : try to apply persona to your own website.

'I want to see viral videos because I'm bored.'

Key goals :

- want to be diverted

- have no precise objectives

- curious to learn new stuffs

Behaviour :

- looking for video websites

- don't want to search for a long time

- ok if someone/something choose videos in my place

Must :

- communicate in an interaction way with user to make him/her wanting to go further on the website

Not must :

- getting boring the user more than he's already

In conclusion, it's important to know precisely how the user interacts with your product/website to correspond with his needs.

OUGD503 Responsive Brief 01 Individual Practice - D&AD Vice Brief

☞ Among the various projects proposed by D&AD, I was challenged by the VICE one . The purpose of this project is to create a 10-15 second video to introduce the 'Rule Britannia' series. Here is the brief :

Parmi les différents projets proposés par D&AD, j'ai été interpelée par celui de VICE. Le but de ce projet est de créer un vidéo de 10-15 secondes pour introduire les documentaires de la série 'Rule Britannia'. Voici le brief :

Opening as it exists now / Le générique tel qu'il existe maintenant :

The challenge isn't to be based on the very identity of England (anthem, flag), but to create an unique identity of the series, that is to say reflect honest, unpredictable and sensational characters presented in documentaries.

What I like about this brief is to do as a French girl communication through English medium. This is also an opportunity for me to test my skills as a videographer and animator and improve my knowledge on these points. In addition to the work of video, it will be interesting to look at the 'Rule Britannia' logo (is it will still or motion ?).

Le challenge est de ne plus se baser sur l'identité-même de l'Angleterre (hymne, drapeau) mais de créer une identité propre à la série, c'est-à-dire refléter le caractère sensationnel, honnête et imprévisible des personnages présents dans les documentaires.

Ce qu'il me plaît dans ce brief, c'est de pouvoir en tant que française d'essayer de communiquer à travers un média anglais. C'est aussi l'occasion pour moi de tester mes savoir-faire de vidéaste et d'animatrice et de m'améliorer mes connaissances sur ces points-là. De plus, en plus de faire le travail de vidéo, il sera intéressant de se pencher sur le logo 'Rule Britannia' (est-ce qu'il sera fixe ou animé ?).

OUGD503 Responsive Brief 01 Individual Practice - Feathr Brief

This brief consists in turning wallpaper into Art. Tom Pukko came to present the concept of Feathr. Artists, designers, illustrators create their own wallpaper and submit them on the site. People can comment and vote for their favorite one.

Tom gave us some advice for leading us for our creations. It's necessary to considers customers : they want something they love on their walls.

There's 8 important points to follow :

- Tell a story and have a concept : the wallpaper needs to interact with people.

- Be the talking point in the room : when we're get in, the wallpaper is the first thing we see.

- Think about scale and concept : we can play with scales and space.

- Play with layer and depth : the wallpaper is a 2D support but we can consider our work in 3D.

- Subversion
- What's your repeat ? : the wallpaper is a repeat work, we need to ask : "how to organize the repetition to dynamize my wall ?"
- Colors : sometime different colors can change a element in the wallpaper.
- Vary with the repeat : size/color

Submission date : 31st December 2014

I really like this kind of project because I could express my personality and create wallpaper which will be different and original. 

OUGD504 Brief 03 A brief history of… - Development

☞ After defining the purposes of my site, I began to develop the layout of the different parts.

Après avoir défini les principes de mon site, j'ai commencé à élaborer la mise en page des différentes parties.

Homepage : the eye is animated (iris follows the cursor) / l'oeil au centre est animé (l'iris suit le curseur de la souris)

 Video Page

Video Selection

About

I wanted to make a simple template for my site because the written and video content are the most important. Adding other elements seemed inappropriate because it would disturb the video content.

Je voulais faire un thème simple pour mon site car les contenus écrit et vidéo sont le plus important. L'ajout d'autres éléments m'a semblé inapproprié car il viendrait perturber le contenu vidéo.

Junk flowchart has changed a bit and now looks like this diagram / La hiérarchie de Junk a un peu changé et ressemble à ce schéma désormais :

☞ One of studio tasks was to summarize the Web Style : logo, colors, fonts, buttons and their interaction with the cursor, grids... All important information gathered on a page.

Une des tâches du studio consistait à résumer le style de notre site : le logo, les couleurs, les polices utilisées, les boutons et leur interaction avec le curseur, grilles… Toutes les informations importantes réunies sur une page.

OUGD504 Brief 03 A brief history of… - Roughs

☞ What is the purpose of my website ?

- Watching viral videos in a different way
- A text content explains why this kind of videos exists, how to think about it
- The text content will be a philosophy presentation of the videos but in an offbeat humorous tone
- Target audience : young audience (around 18-25 years) who are interested in pop culture, new media technologies, etc.

Quel est le but de mon site? 
- Regarder des vidéos virales d'une manière différente 
- Un texte explique pourquoi ce genre de vidéos existe, que penser d'elles 
- Le texte présentera les vidéos de manière à la fois philosophique et humoristique
- Cible : jeune public (environ 18-25 ans) qui sont intéressés par la culture pop, les nouvelles technologies de communication, etc.

Flowchart :

Then I thought about possible layout for the site / J'ai ensuite réfléchi à des mise en pages possibles pour le site :

Homepage#1 : the purpose of this page is to get a video randomly and present it in a funny way. I thought about an animation of an eye that follows the mouse cursor, and when you click on that eye that lead to a random page.

Le but de cette page est d'arriver sur une vidéo de façon aléatoire et de présenter ça de manière ludique. J'en pensé à une animation d'un oeil qui suivrait le curseur de la souris, et quand on clique sur cet oeil ça mènerait sur une page au hasard.

Homepage#2 : it shows the idea #1 but more determined, the mood is asked in order to find the best video that match with it. The scrolling page shows the various proposals, like this website.

Ça reprend l'idée #1 mais en plus déterminé, on demande à l'utilisateur son humeur pour l'amener à des vidéos qui lui correspondent. La page se déroule fait apparaître les différentes propositions, à l'exemple de ce site web.

System layout for presenting a video : the layout is simple with the title, video and associated text. I have to see more structure for links to other videos (and page selection of videos).

La mise en page reste simple avec le titre, la vidéo et le texte associé. Il faut que je voie encore la structure pour les liens vers les autres vidéos (et la page de sélection de vidéos).

Video selection#1 : I didn't want to make the system list as you can see on other video sites like YouTube or Dailymotion, but it is difficult to present a large number of videos without falling into a screen printing too "busy". The idea of ​​the following proposition is to cut the page into 4 parts and you can scroll each band. This system can be applied to tablet format.

Je ne voulais pas reprendre le système de liste qu'on peut voir sur les autres sites de vidéo comme YouTube ou Dailymotion mais il est compliqué de présenter un nombre important de vidéos sans tomber dans une impression d'écran trop "occupé". L'idée de la proposition suivante est de couper la page en 4 et de pouvoir faire glisser chaque bande. Ce système peut être intéressant appliqué au format tablette.

Other systems with the same idea :

☞ Logo think : I looked for a name for my site, I was thinking about a word like "Cataract" an eye disease because viral videos can hurt the eye by stupid content. But finally I opted for "Junk" like junk food, junk mail, etc. and this fits to the concept pretty well. The baseline can be for example : "eating wtf videos" in order to explain the purpose of the site.

J'ai cherché un nom pour mon site, j'ai pensé à un mot comme "cataracte" (une maladie de l'œil parce que les vidéos virales peuvent heurter l'œil par le contenu stupide). Mais finalement j'ai opté pour "Junk" comme junk food, junk mail, etc. Cela correspond plutôt bien au concept. La baseline peut être par exemple: "eating wtf videos" afin d'expliquer le but du site.

OUGD503 Responsive Brief 01 Individual Practice - Starpack project

☞ My goal for the competition is to find projects around the packaging, motion design and visual identity. These are areas where I want to improve my skills. 

I really like the idea of student contests because I've never had the opportunity to participate in this kind of competition yet. 

The first project I've found is on Starpack site and it's entitled Grow your own herb culanary kit. 

Mon objectif pour les concours est de trouver des projets autour du packaging, du motion design et d'identité visuelle. Ce sont des domaines où je souhaite améliorer mes compétences.

L'idée des concours étudiants ma plaît beaucoup car je n'ai pas encore eu l'occasion de participer à ce genre de compétition.

Le premier projet que j'ai trouvé se trouve sur le site de Starpack et s'intitule Grow your own culanary herb kit (Kit pour faire pousser ses herbes culinaires).

Here's the brief / Voici le brief :

I chose this project because the subject motivates me and is a good challenge : there are many parameters to consider (multiple objects in one, materials, packaging life during and after use).

J'ai choisi ce projet car le sujet me motive et représente un bon challenge : il y a de nombreux paramètres à considérer (plusieurs objets en un, matériaux, la vie du packaging pendant et après utilisation).