1. l’agence - l’équipe et ses valeurs
Pôles de l’agence
Pôles de l’agence
Pôle graphisme
Pôles de l’agence
# # # #
# #
Pôle communication
Wajdi
Pôle graphisme Abdoul
Anne graphisme
Pôle Jacquinot
Pôle développement web
Axèle Fatôme
Pôle communication
Thibaut Marquis
Pôle communication
Hamza Tei
Pôle développement web
Selim Ammari
Langage visuel
angage visuel
Langage visuel
passion
générosité
savoir-faire
Pôle développement web

2. l’agence - son identité
Agencement des élements
b
a
b
a
b
<a
->
b
a
b
b
Logotype
e
b
a
b
b
a
b
b
b
d
b
a
b

3. l’agence - son identité
#
la “banière” fait toute la largeur de la page
Équipe
Créations
Blog
# 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 premium plugins in the WordPress
premium plugin market at the
moment. Lorem ipsum.
Je m’inscris à la newsletter !
#
Lettre d’information n°1
Janvier 2013
Wajdi Abdoul
Développeur/ Intégrateur
selim@logic.fr
ACTUALITES
Aborpor moditat as aut
exerci blaborum il minto
magnita sperum as aspello
rrovidemposa dissed untis
molorae simus nit dem aute
voluptatemod utemper na
tur?
Haribus erio etur si ut dese
qui ut eum rest quam nem
quae. Rem velesedias sinul
pa 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 volupta
test, oditios necuptatus.
Tum, voluptur ratiur sunt li
que velectur?
Equia dolupta conse plabor
repraerum fugiat magnat
et qui sunto odisciis ellatur,
aspella qui re nobis a ipsun
da a debisci umquam, quia
nonseque voloren ditatius
molorem autentur sus andi
doles eos eatur sunt.
Ut faccus rehene ex explis
dolupta diorerro consequo
dit dolum rem qui quas dolo
rum estem sa aut aut
Wajdi Abdoul
Développeur/ Intégrateur
selim@logic.fr
Effet en hover du coeur
(et en clique sur smatphone)
Selim Ammari
Développeur/ Intégrateur
selim@logic.fr
Selim Ammari
Développeur/ Intégrateur
selim@logic.fr
Effet en hover d’un lien
(et en clique sur smatphone)
Hamza Tei
Responsable technique
hamza@logic.fr
Hamza Tei
Responsable technique
hamza@logic.fr
E-mail : logic@gmail.com
25 rue des Ponts, 13480 PARIS
Axèle Fâtome
graphiste web/print
axele@logic.fr
Axèle Fâtome
graphiste web/print
le site web
http://agence-logic.site88.net/Logic/
la newsletter
les cartes de visite
axele@logic.fr
Thibaut Marquis
graphiste web/print
thibaut@logic.fr

4. 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 »

5. le projet - les besoins et la problématique
Les besoins
b déterminer un univers visuel
b faire connaître sa musique
QUELLE EST LA PLACE D’UN SITE WEB
DANS LA STRATÉGIE DE COMMUNICATION
D’UN ARTISTE ?

6. le projet - le benchmark
birdynamnam.com

7. le projet - le benchmark
emilyloizeau.fr

8. le projet - le benchmark
thetape.eu

9. le projet - le S.W.O.T.
launch film
I - Accuptur am
swot
II - Tibus ex eume
III - Nequunt fugiae vendite
IV - Ut velestium imendanda
V - Corecte qui blati
forces
faiblesses
VI - Que pe quo corisimet
VII - Que pe quo corisimet
Get album free
b universalité de la musique
b style musical peu connu
b gratuité du fichier audio
b marketing limité
b facilité de se différencier
dans ce marché par rapport
à la concurrence.
b mise en place d’un site internet
avec un style graphique précis
b budjet limité
opportunités
b attirer avec un nouveau
style musical
b création d’une base
de donnée client
menaces
b concurrence
b gratuit donc non rentable
le message
La musique de My Name is J (MNIJ) s’ancre dans une atmosphère musicale
complexe, dans un esprit narratif voire onirique. Le compositeur nous emmène dans une histoire, un épisode musical. Le message en lui meme est abs-
Info

10. le projet - la cible
La cible
Principale
- jeunes actifs de 15-35 ans
- culture générale
- arts
- curiosité
- région de Nancy
La cible
secondaire
- personnes actives ou
non de 15-45 ans
- culture générale
- arts
- public non-averti

11. la communication - la stratégie
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

12. le graphisme - l’univers musical
b atmosphère musicale complexe
b Trip-hop
b esprit narratif

13. le graphisme - ses références artistiques
b le Minimalisme
b Kandinsky
b le Suprématisme
b le Vorticisme
b le Futurisme

14. le graphisme - le moodboard
moodboard - Abstraction géométrique
nuitée
mouvements lumineux nocturne
logotypes géométriques
paysage urbain
éléments identitaires abstraits
formes déclinées
logotype génératif
mise en abîme
dédales géométriques
abstractions, libre interprétation
submergement émotionnel
géométrie dans l’espace
mise en relief
3 dimensions

15. photographie
expérimentée
semi-figuration
le graphisme - le moodboard
d’éléments urbains
topo
vibr

16. my name is J
Piste 2
my le graphisme - les recherches de logotypes
name is J
Piste 2
Piste 2
logotype - pistes graphiques et développement
Piste 3
Piste 3
Piste 4
logotype - pistes graphiques
my name is J
Piste 3
logotype - ébauches
Piste 2
Piste 1
(logo évolutif)
Piste 1
(logo évolutif)
Piste 3
Piste 1
Piste 1
(logo évolutif)
Piste 4
Piste 2
MY NAME IS J
Piste 3
Piste 4
the night
Piste 3
Piste 4
Piste 3
MY NAME IS J
the night
Piste 3
Piste 4
Piste 1
Piste 2
Piste 5

17. le graphisme - l’identité visuelle
composé en
Boton medium
MY
NAME
IS J.
déclinaisons du symbole pour utilisations
experimantales (voir page précédente).
deux présentations possibles
du logotype
utilisation du logotype.
my name is j.
my name is j.
MY
NAME
IS J.
déclinaison infinie
du symbole
taille minimum
200px
taille minimum d
100px / 15mm
taille minimum d
10pt

18. le graphisme - exemples d’application
MY
NAME
IS J.
ACTUALITÉS
ÉVENEMENTS / NEWS / INFOS
NEWS
Vbi curarum abiectis ponderibus aliis tamquam nodum et
codicem difficillimum Caesarem convellere nisu valido cogi
tabat, eique deliberanti cum proximis clandestinis conloquiis
et nocturnis qua vi, quibusve commentis id fieret, antequam
effundendis rebus pertinacius incumberet confidentia, acciri
mollioribus scriptis per simulationem tractatus publici nimis
urgentis eundem placuerat Gallum, ut auxilio destitutus sine
ullo interiret obstaculo.
En savoir plus
ÉVENEMENTS
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 habe
bit; Kalendis ei denique Martiis nascetur repente provincia.
En savoir plus
www.mynameisj.com
la pochette de l’album The night
l’affiche promotionnelle
la newsletter

19. la conception - le zoning
ZONING FINAL
SITE WEB MNIJ.
Marge d’ajustement
Titre du film
The night (Film)
Courte déscription du
fonctionnement du lecteur.
Lorem ipsum dolor sit amet vir,
capsum turi la facha mina.
Prévisualisation du chapitre
(avec une image de l’extrait)
en hover sur l’un des titre.
Lorsque l’utilisateur n’est
pas en hover sur l’un des
chapitre, le bouton play
permet de lancer la vidéo
depuis le début (avec une
image du film en fond).
(en transparence
pendant la lecture
de la vidéo)
Liens FB/youtube
(ouvrant une lightbox)
launch film
par défaut : teaser
(ou chapitre séléctionné)
Barre de progression du film
et réglage du volume sonore.
Noms des chansons
de l’album correspondant
aux chapitres du film.
Logo
I - Accuptur am
II - Tibus ex eume
III - Nequunt fugiae vendite
(à redimensionner de manière à
toujours avoir la vidéo en plein écran)
IV - Ut velestium imendanda
V - Corecte qui blati
VI - Que pe quo corisimet
Liens vers la page Album
(contenant une description
plus précise du projet et
permettant de télécharger
l’album).
VII - Que pe quo corisimet
Get album free
Info
Marge d’ajustement

20. la conception - le site web
MY
NAME
IS J.
scroll it
MY
NAME
IS J.
LATEST NEWS
LOREM IPSUM DOLOR
Lorem 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...
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 DOLOR
Lorem 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 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 DOLOR
Lorem 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 . . .
more news
SIGN UP FOR EMAILS
SUBSCRIBE
FACEBOOK
MUSIC
VIMEO
FILM
YOUTUBE
NEWS
CONTACT
BANDCAMP
Mentions légales et crédits
Blablablablabla - 2013
page d’accueil
SITEMAP

21. la conception - Le site web
MUSIC
CONTACT
FILM
MY
NAME
IS J.
download the night for free here.
NAMQUE ET ISAURI
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.
SIGN UP FOR EMAILS
SUBSCRIBE
FACEBOOK
MUSIC
VIMEO
FILM
NEWS
YOUTUBE
CONTACT
SITEMAP
BANDCAMP
Mentions légales et crédits : Blablablablabla - 2013
plateforme d’écoute et de téléchargement

22. la conception - Le site web
FILM
MUSIC
CONTACT
MY
NAME
IS J.
gallery
NAMQUE ET ISAURI
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.
SIGN UP FOR EMAILS
SUBSCRIBE
FACEBOOK
MUSIC
VIMEO
FILM
YOUTUBE
NEWS
CONTACT
SITEMAP
BANDCAMP
page de lecture du court-métrage

23. les aspects techniques - les choix
besoins
b publication
b administration
avantages
b gratuité
b simplicité
b personnalisation
b communauté importante

24. les aspects techniques - les choix
Accessibilité
Compatibilité
b HTML 5 CSS 3
b Javascript (jQuery)
b responsive design
b API YouTube
b Vimeo

25. les aspects techniques - démonstration
www.mynameisj.com