25
# # l’agence - l’équipe et ses valeurs Anne Jacquinot Axèle Fatôme ibaut Marquis Hamza Tei Selim Ammari Wajdi Abdoul passion générosité savoir-faire

Presentation MNIJ

Embed Size (px)

Citation preview

Page 1: Presentation MNIJ

Pôles de l’agence

Langage visuel

# #Pôle graphisme Pôle communication Pôle développement web

Pôles de l’agence

Langage visuel

# #Pôle graphisme Pôle communication Pôle développement web

Pôles de l’agence

Langage visuel

# #Pôle graphisme Pôle communication Pôle développement web

l’agence - l’équipe et ses valeurs

Anne Jacquinot

Axèle Fatôme

Thibaut Marquis

Hamza Tei

Selim Ammari

Wajdi Abdoul

passion générosité savoir-faire

Page 2: Presentation MNIJ

l’agence - son identité

a bbba ab b b b b deb

a

a

b

b

b

b

a

a

-><-

b

Agencement des élements

Logotype

Page 3: Presentation MNIJ

l’agence - son identité

les cartes de visitele site webhttp://agence-logic.site88.net/Logic/

la newsletter

Lettre d’information n°1Janvier 2013

#ACTUALITES

Aborpor moditat as aut exerci blaborum il minto magnita sperum as aspello rrovidemposa dissed untis molorae simus nit dem aute voluptatemod utemper natur?Haribus erio etur si ut desequi ut eum rest quam nem quae. Rem velesedias sinulpa runtur, tem re odipiciatem dolora nobisquibus atur mil ma dellanda porerro coribus untur ad ut expera aut a nos nem et et etur aut minctur? Quidus eaquidunt modicto mosam volupta nosam fuga. Ideruptatet laborro voluptatest, oditios necuptatus.Tum, voluptur ratiur sunt lique velectur?Equia dolupta conse plabor repraerum fugiat magnat et qui sunto odisciis ellatur, aspella qui re nobis a ipsunda a debisci umquam, quia nonseque voloren ditatius molorem autentur sus andi doles eos eatur sunt.Ut faccus rehene ex explis dolupta diorerro consequodit dolum rem qui quas dolorum estem sa aut aut

#

# SocialdesignjQuery & WordPress Plugins

The Nivo Slider has become the most popular image slider availble on the

web today. What started as a side project quickly became a huge suc-

cess, celebrating over 1 million down-loads in its first year. In addition to the jQuery plugin a WordPress plugin has

further boosted the success of the slider, making the Nivo Slider one of

the biggest premium plugins in the WordPress premium plugin market at

the moment.

# MinimalismWeb App

Sellwire is a new web app born out of a lack of good options for selling digi-

tal goods online. Sellwire aims to make selling digital goods as simple as

possible, literally upload a file and share a link, and takes care of the

complex e-commerce payment gate-ways and tracking stuff so that users can focus on making great products.

Now out of beta, Sellwire continues to grow and hopes to become a promi-

nent competitor in the ecommerce market.

# LightdesignWordPress Plugin

Often before you launch a site you want to get some real users in to test

the site without allowing access to the rest of the world, normally known as "closed beta" testing. This plugin was

built for startups who want to turn their WordPress site into a closed

beta site without touching any code. Closed Beta is a powerful plugin with

a built in user approval system and splash page customiser.

# LogicdesignWordPress Plugins

Showcase is a premium WordPress plugin and was created out of a frus-tration at the lack of good gallery functionality/plugins for WordPress at the moment. Showcase aims to redefine the "gallery" in WordPress by making the whole process of up-loading, ordering and editing your images as simple as it can be. Then it makes your gallery look stunning by automatically showing your gallery in a beautiful lightbox slideshow. Not to mention built-in features like dynamic image resizing and simple lightbox theme changing.

# InteractivityWeb App

WP Updates is a web app that allows WordPress premium theme and plugin authors to easily provide auto-matic updates for their themes & plugins. WP Updates provides a simple interface for managing ver-sions of themes/plugins without having to touch any code. Again this was an app built on top of processes and workflows that we already had created internally at Dev7studios and decided we should share it with the world.

# MobilityWeb App

WP Updates is a web app that allows WordPress premium theme and plugin authors to easily provide auto-matic updates for their themes & plugins. WP Updates provides a simple interface for managing ver-sions of themes/plugins without having to touch any code. Again this was an app built on top of processes and workflows that we already had created internally at Dev7studios and decided we should share it with the world.

# Logic has become the most popular image slider availble on the web today. What started as a side project quickly became a huge success, celebrating over 1 million downloads in its first year. In addition to the jQuery plugin a WordPress plugin has further boosted the success of the slider, making the Nivo Slider one of the biggest pre-mium plugins in the WordPress premium plugin market at the moment. Lorem ipsum.

Je m’inscris à la newsletter !

Équipe BlogCréations

E-mail : [email protected] rue des Ponts, 13480 PARIS

Équipe BlogCréations

E-mail : [email protected] rue des Ponts, 13480 PARIS

Équipe BlogCréations

E-mail : [email protected] rue des Ponts, 13480 PARIS

Équipe BlogCréations

E-mail : [email protected] rue des Ponts, 13480 PARIS

Pôle graphisme

The Nivo Slider has become the most popular image slider availble on the web today. What started as a side

project quickly became a huge suc-cess, celebrating over 1 million down-

loads in its first year.

Pôle communication

The Nivo Slider has become the most popular image slider availble on the web today. What started as a side

project quickly became a huge suc-cess, celebrating over 1 million down-

loads in its first year.

#

Pôle développement web

The Nivo Slider has become the most popular image slider availble on the web today. What started as a side

project quickly became a huge suc-cess, celebrating over 1 million down-

loads in its first year.

#

Effet en hover du coeur(et en clique sur smatphone)

la “banière” fait toute la largeur de la page

Effet en hover d’un lien(et en clique sur smatphone)

Anne JacquinotDirecteur artistique

[email protected]

Thibaut Marquisgraphiste web/print

[email protected]

Axèle Fâtomegraphiste web/print

[email protected]

Hamza TeiResponsable technique

[email protected]

Selim AmmariDéveloppeur/ Intégrateur

[email protected]

Wajdi AbdoulDéveloppeur/ Intégrateur

[email protected]

Anne JacquinotDirecteur artistique

[email protected]

Thibaut Marquisgraphiste web/print

[email protected]

Axèle Fâtomegraphiste web/print

[email protected]

Hamza TeiResponsable technique

[email protected]

Selim AmmariDéveloppeur/ Intégrateur

[email protected]

Wajdi AbdoulDéveloppeur/ Intégrateur

[email protected]

Page 4: Presentation MNIJ

le projet - le commanditaire

PORTRAIT

b Benjamin Racine

b musicien amateur

b doctorant en Philosophie

SON PROJET

b réalisation de l’album « The night »

b réalisation du court-métrage « The night »

Page 5: Presentation MNIJ

QUELLE EST LA PLACE D’UN SITE WEBDANS LA STRATÉGIE DE COMMUNICATIOND’UN ARTISTE ?

LES BESOINS

b déterminer un univers visuel

b faire connaître sa musique

le projet - les besoins et la problématique

Page 6: Presentation MNIJ

le projet - le benchmark

birdynamnam.com

Page 7: Presentation MNIJ

le projet - le benchmark

emilyloizeau.fr

Page 8: Presentation MNIJ

le projet - le benchmark

thetape.eu

Page 9: Presentation MNIJ

le projet - le S.W.O.T.

12 13

forces faiblesses

b universalité de la musique

b gratuité du fichier audio

b facilité de se différencier dans ce marché par rapport à la concurrence.

b style musical peu connu

b marketing limité

b mise en place d’un site internet avec un style graphique précis

b budjet limité

opportunités menaces

b attirer avec un nouveau style musical

b création d’une base de donnée client

b concurrence

b gratuit donc non rentable

swot

le messageLa musique de My Name is J (MNIJ) s’ancre dans une atmosphère musicale complexe, dans un esprit narratif voire onirique. Le compositeur nous em-mène dans une histoire, un épisode musical. Le message en lui meme est abs-trait car le public peut faire sa propre interpretation de la musique. Ce type de musique étant peu connu, il ya a donc aussi un message caché qui est l’in-novation. Le public est transporté dans un monde qui lui est complétement inconnu.

I - Accuptur am

II - Tibus ex eume

III - Nequunt fugiae vendite

IV - Ut velestium imendanda

V - Corecte qui blati

VI - Que pe quo corisimet

VII - Que pe quo corisimet

Get album free

The night (Film)

launch film

Lorem ipsum dolor sit amet vir,capsum turi la facha mina.

Info

launch trailer

my name is j.

I - Accuptur am

II - Tibus ex eume

III - Nequunt fugiae vendite

IV - Ut velestium imendanda

V - Corecte qui blati

VI - Que pe quo corisimet

VII - Que pe quo corisimet

Get album free

The night (Film)

launch film

Lorem ipsum dolor sit amet vir,capsum turi la facha mina.

Info

launch trailer

my name is j.

LOREM IPSUM DOLORLorem ipsum dolor sit amet, consectetur adipiscing elit. In dui tellus, tincidunt in scelerisque eu, aliquet mattis tellus. Vivamus tincidunt vehicula justo ac viverra. Ut suscipit nisi non lorem sodales id euismod purus auctor. Quisque vitae mauris odio. Integer condimentum erat sit amet justo commodo vel interdum odio elementum... lire l’article

LOREM IPSUM DOLORLorem ipsum dolor sit amet, consectetur adipiscing elit. In dui tellus, tincidunt in scelerisque eu, aliquet mattis tellus. Vivamus tincidunt vehicula justo ac viverra. Ut suscipit nisi non lorem sodales id euismod purus auctor. Quisque vitae mauris odio. Integer condimentum erat sit amet justo commodo vel interdum odio elementum... lire l’article

LOREM IPSUM DOLORLorem ipsum dolor sit amet, consectetur adipiscing elit. In dui tellus, tincidunt in scelerisque eu, aliquet mattis tellus. Vivamus tincidunt vehicula justo ac viverra. Ut suscipit nisi non lorem sodales id euismod purus auctor. Quisque vitae mauris odio. Integer condimentum erat sit amet justo commodo vel interdum odio elementum... lire l’article

LOREM IPSUM DOLORLorem ipsum dolor sit amet, consectetur adipiscing elit. In dui tellus, tincidunt in scelerisque eu, aliquet mattis tellus. Vivamus tincidunt vehicula justo ac viverra. Ut suscipit nisi non lorem sodales id euismod purus auctor. Quisque vitae mauris odio. Integer condimentum erat sit amet justo commodo vel interdum odio elementum... lire l’article

my name is j.

MaQuette écran d’accueil et blog

Page 10: Presentation MNIJ

LA CIBLEPRINCIPALE

- jeunes actifs de 15-35 ans- culture générale- arts- curiosité- région de Nancy

le projet - la cible

LA CIBLESECONDAIRE

- personnes actives ou non de 15-45 ans

- culture générale- arts- public non-averti

Page 11: Presentation MNIJ

b création d’une identité visuelle

b création d’un site web

b réalisation de communiqués de presse

b campagne d’affichage urbain et distribution de flyers

la communication - la stratégie

Page 12: Presentation MNIJ

le graphisme - l’univers musical

b atmosphère musicale complexe

b Trip-hop

b esprit narratif

Page 13: Presentation MNIJ

le graphisme - ses références artistiques

b le Minimalismeb Kandinsky

b le Vorticismeb le Futurisme

b le Suprématisme

Page 14: Presentation MNIJ

moodboard - Abstraction géométrique

formes déclinées

logotypes géométriques

géométrie dans l’espace

nuitée

mise en abîme

logotype génératif

éléments identitaires abstraits

mise en relief

3 dimensions

mouvements lumineux nocturne

dédales géométriques

paysage urbain

abstractions, libre interprétation

submergement émotionnel

le graphisme - le moodboard

Page 15: Presentation MNIJ

moodboards - jeu d’abstraction / cartographie

photographieexpérimentée

semi-figurationd’éléments urbains

topographie

vibration sonore

narration

le graphisme - le moodboard

Page 16: Presentation MNIJ

logotype - pistes graphiques

Piste 1 Piste 2

Piste 4

Piste 3

Piste 5

logotype - ébauches

logotype - pistes graphiques

Piste 1 Piste 2

Piste 4

Piste 3

Piste 5

logotype - pistes graphiques et développement

Piste 1 (logo évolutif)

Piste 2

Piste 3

Piste 3 Piste 4

my name is J

logotype - pistes graphiques et développement

Piste 1 (logo évolutif)

Piste 2

Piste 3

Piste 3 Piste 4

my name is J

logotype - pistes graphiques et développement

Piste 1 (logo évolutif)

Piste 2

Piste 3

Piste 3 Piste 4

my name is J

logotype - pistes graphiques et développement

Piste 1 (logo évolutif)

Piste 2

Piste 3

Piste 3 Piste 4

my name is J

MY NAME IS J

MY NAME IS Jthe night

the night

le graphisme - les recherches de logotypes

Page 17: Presentation MNIJ

déclinaison infiniedu symbole

Les parties textuelles et visuelles peuvent s’utiliser séparément, en fonction du support choisit.

Pour le web, on préconisera l’usage seule de la typographie et le symbole servira de support à

des expérimentations interactives.

utilisation du logotype.

taille minimum du symbole100px / 15mm taille minimum du nom10pt

composé enBoton medium italic

taille minimum200px

deux présentations possibles du logotype

MYNAMEIS J.

MYNAMEIS J.

my name is j.

my name is j.

déclinaisons du symbole pour utilisations

experimantales (voir page précédente).

utilisation du logotype.

le graphisme - l’identité visuelle

Page 18: Presentation MNIJ

la pochette de l’album "The night" l’affiche promotionnelle la newsletter

MYNAMEIS J.

ACTUALITÉSÉVENEMENTS / NEWS / INFOS

Vbi curarum abiectis ponderibus aliis tamquam nodum et codicem difficillimum Caesarem convellere nisu valido cogitabat, eique deliberanti cum proximis clandestinis conloquiis et nocturnis qua vi, quibusve commentis id fieret, antequameffundendis rebus pertinacius incumberet confidentia, acciri mollioribus scriptis per simulationem tractatus publici nimis urgentis eundem placuerat Gallum, ut auxilio destitutus sine ullo interiret obstaculo.

Fuerit toto in consulatu sine provincia, cui fuerit, antequam designatus est, decreta provincia. Sortietur an non? Nam et non sortiri absurdum est, et, quod sortitus sis, non habere. Proficiscetur paludatus? Quo? Quo pervenire ante certam diem non licebit. ianuario, Februario, provinciam non habebit; Kalendis ei denique Martiis nascetur repente provincia.

NEWS

En savoir plus >>>

En savoir plus >>>

ÉVENEMENTS

www.mynameisj.com

le graphisme - exemples d’application

Page 19: Presentation MNIJ

la conception - le zoning

par défaut : teaser (ou chapitre séléctionné)

Marge d’ajustement

Limites de l’écran du visiteur

Mouvement lié à une action de l’utilisateur

Marge d’ajustement

I - Accuptur am

II - Tibus ex eume

III - Nequunt fugiae vendite

IV - Ut velestium imendanda

V - Corecte qui blati

VI - Que pe quo corisimet

VII - Que pe quo corisimet

Get album free

The night (Film)

launch film

Lorem ipsum dolor sit amet vir,capsum turi la facha mina.

Info

LOREM IPSUM DOLORLorem ipsum dolor sit amet, consectetur adipiscing elit. In dui tellus, tincidunt in scelerisque eu, aliquet mattis tellus. Vivamus tincidunt vehicula justo ac viverra. Ut suscipit nisi non lorem sodales id euismod purus auctor. Quisque vitae mauris odio. Integer condimentum erat sit amet justo commodo vel interdum odio elementum... lire l’article

LOREM IPSUM DOLORLorem ipsum dolor sit amet, consectetur adipiscing elit. In dui tellus, tincidunt in scelerisque eu, aliquet mattis tellus. Vivamus tincidunt vehicula justo ac viverra. Ut suscipit nisi non lorem sodales id euismod purus auctor. Quisque vitae mauris odio. Integer condimentum erat sit amet justo commodo vel interdum odio elementum... lire l’article

LOREM IPSUM DOLORLorem ipsum dolor sit amet, consectetur adipiscing elit. In dui tellus, tincidunt in scelerisque eu, aliquet mattis tellus. Vivamus tincidunt vehicula justo ac viverra. Ut suscipit nisi non lorem sodales id euismod purus auctor. Quisque vitae mauris odio. Integer condimentum erat sit amet justo commodo vel interdum odio elementum... lire l’article

LOREM IPSUM DOLORLorem ipsum dolor sit amet, consectetur adipiscing elit. In dui tellus, tincidunt in scelerisque eu, aliquet mattis tellus. Vivamus tincidunt vehicula justo ac viverra. Ut suscipit nisi non lorem sodales id euismod purus auctor. Quisque vitae mauris odio. Integer condimentum erat sit amet justo commodo vel interdum odio elementum... lire l’article

Noms des chansons de l’album correspondantaux chapitres du film.

Liens vers la page Album(contenant une description plus précise du projet etpermettant de téléchargerl’album).

Liens FB/youtube(ouvrant une lightbox)

Titre du film Logo (en transparence pendant la lecturede la vidéo)

Courte déscription dufonctionnement du lecteur.

Barre de progression du filmet réglage du volume sonore.

Prévisualisation du chapitre (avec une image de l’extrait) en hover sur l’un des titre.

En scroll, la partie blog vient se placer au dessus du lecteur (et du bandeau)-> effet parallax.

Le logo reste fixe (il reste par dessus la partie blog) et prend une couleur sombrede manière à ce qu’il reste toujours visible.

(le design du blog est provisoire)

Lorsque l’utilisateur n’estpas en hover sur l’un deschapitre, le bouton playpermet de lancer la vidéo depuis le début (avec une image du film en fond).

(à redimensionner de manière à toujours avoir la vidéo en plein écran)

La fleche indiquant la présence du bandeau change de sens lorsque celui-ciapparait ou disparait et le logo en haut à droite de la vidéo suit le bandeau lorsque celui-ci est en mouvement.

Lorsque l’utilisateur ne bouge pas sa souris, le bouton play ou pause ainsi que les liens de réseaux sociaux, disparaissent progressivement.

SIGN UP FOR EMAILS SUBSCRIBE

FACEBOOK

Mentions légales et créditsBlablablablabla - 2013

VIMEO YOUTUBE BANDCAMP

MUSIC FILM NEWS CONTACT SITEMAP

Lire plus d’articles ->

À la fin du teaser ou lorsque l’utilisateur place sa souris à gauche du lecteur,le bandeau glisse vers la droite et devient visible.

Lorsque l’utilisateur lance un extrait vidée et/ou qu’il place sa souris en dehorsdu bandeau, celui-ci disparait à nouveau en glissant vers la gauche. Il laisse placeau film ou à l’extrait choisi. Lorsque l’utilisateur a fini de visionner un extrait,les chapitres s’enchainent sans interruption (dans l’ordre chronologique du film).

ZONING FINALSITE WEB MNIJ.

Page 20: Presentation MNIJ

la conception - le site web

page d’accueil

SIGN UP FOR EMAILS SUBSCRIBE

FACEBOOK

Mentions légales et créditsBlablablablabla - 2013

VIMEO YOUTUBE BANDCAMP

MUSIC FILM NEWS CONTACT SITEMAP

more news

LOREM IPSUM DOLORLorem ipsum dolor sit amet, consectetur adipiscing elit. In dui tellus, tincidunt in scelerisque eu, aliquet mattis tellus.

Vivamus tincidunt vehicula justo ac viverra. Ut suscipit nisi non lorem sodales id euismod purus auctor. Quisque vitae mauris odio. Integer condimentum erat sit amet justo commodo vel interdum odio elemen-tum...

Ut suscipit nisi sit amet, consectetur adipiscing elit. In dui tellus, tincidunt in scelerisque eu, aliquet mattis tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dui tellus, tincidunt. Vivamus tincidunt vehicula justo ac viverra.

Read more . . .

LOREM IPSUM DOLORLorem ipsum dolor sit amet, consectetur adipiscing elit. In dui tellus, tincidunt in scelerisque eu, aliquet mattis tellus.

Consectetur adipiscing elit nisi non lorem sodales id euismod purus auctor. Quisque vitae mauris odio. Integer condimentum erat sit amet justo commodo vel interdum odio elementum...

Read more . . .

LOREM IPSUM DOLORLorem ipsum dolor sit amet, consectetur adipiscing elit. In dui tellus, tincidunt in scelerisque eu, aliquet mattis tellus.

Consectetur adipiscing elit nisi non lorem sodales id euismod purus auctor. Quisque vitae mauris odio. Integer condimentum erat sit amet justo commodo vel interdum odio elementum...

Read more . . .

LOREM IPSUM DOLOR

Ut suscipit nisi sit amet, consectetur adipiscing elit. In dui tellus, tincidunt in sceler-isque eu, aliquet mattis tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dui tellus, tincidunt. Vivamus tincidunt vehicula justo ac viverra.

Read more . . .

LATEST NEWSMYNAMEIS J.

scroll it

MYNAMEIS J.

Page 21: Presentation MNIJ

la conception - Le site web

SIGN UP FOR EMAILS SUBSCRIBE

FACEBOOK

Mentions légales et crédits : Blablablablabla - 2013

VIMEO YOUTUBE BANDCAMP

MUSIC FILM NEWS CONTACT SITEMAP

Nec sane haec sola pernicies orientem diversis cladibus adfligebat. Namque et Isauri, quibus est usitatum saepe pacari saepeque inopinis excursibus cuncta miscere, ex latrociniis occultis et raris, alente inpunitate adulescentem in peius audaciam ad bella gravia proruperunt, diu quidem perduelles spiritus inrequietis motibus erigentes, hac tamen indignitate perciti vehementer, ut iactitabant, quod eorum capiti quidam consortes apud Iconium Pisidiae oppidum in amphitheatrali spectaculo feris praedatricibus.

NAMQUE ET ISAURI

download the night for free here.

MYNAMEIS J.

CONTACT MUSIC FILM

plateforme d’écoute et de téléchargement

Page 22: Presentation MNIJ

la conception - Le site web

page de lecture du court-métrage

SIGN UP FOR EMAILS SUBSCRIBE

FACEBOOK VIMEO YOUTUBE BANDCAMP

MUSIC FILM NEWS CONTACT SITEMAP

Nec sane haec sola pernicies orientem diversis cladibus adfligebat. Namque et Isauri, quibus est usitatum saepe pacari saepeque inopinis excursibus cuncta miscere, ex latrociniis occultis et raris, alente inpunitate adulescentem in peius audaciam ad bella gravia proruperunt, diu quidem perduelles spiritus inrequietis motibus erigentes, hac tamen indignitate perciti vehementer, ut iactitabant, quod eorum capiti quidam consortes apud Iconium Pisidiae oppidum in amphitheatrali spectaculo feris praedatricibus.

DIU QUIDEM PERDUELLES Praedatricibus obiecti sunt praeter morem. Nec sane haec sola pernicies orientem diversis cladibus adfligebat. Namque et Isauri, quibus est usitatum saepe pacari saepeque inopinis excursibus cuncta miscere, ex latrociniis occultis et raris, alente inpunitate adulescentem in peius audaciam ad bella gravia proruperunt, diu quidem perduelles spiritus inrequietis motibus erigentes, hac tamen indignitate perciti vehementer, ut iactitabant, quod eorum capiti quidam consortes apud Iconium Pisidiae oppidum in amphitheatrali spectaculo feris praedatricibus obiecti sunt praeter morem.

NAMQUE ET ISAURI

MUSIC CONTACTFILM

MYNAMEIS J.

gallery

Page 23: Presentation MNIJ

les aspects techniques - les choix

BESOINS

b publicationb administration

AvANTAGES

b gratuitéb simplicitéb personnalisationb communauté importante

Page 24: Presentation MNIJ

ACCESSIBILITÉ& COMPATIBILITÉ

b HTML 5 & CSS 3

b Javascript (jQuery)

b responsive design

b API YouTube

b Vimeo

les aspects techniques - les choix

Page 25: Presentation MNIJ

www.mynameisj.com

les aspects techniques - démonstration