Plateforme de portfolio dédiée aux étudiants et anciens de src pub bordeaux

Groupe front-office Flash / Flex
Vous reprendrez le design et le développement de la présentation des travaux et des profils. Contactez Anthony Bertossi pour le solliciter, s’il le souhaite, pour vous expliquer le travail réalisé.

Groupe back-office Flash / Flex
Vous reprendrez le design et le développement de la gestion des utilisateurs et des travaux. Contactez Anthony Bertossi pour le solliciter, s’il le souhaite, pour vous expliquer le travail réalisé.

Groupe application serveur PHP MySQL
Vous fournirez les services d’accès aux données, en lecture (pour le front) en écriture (pour le back). Vous mettrez au point des services (RSS, REST…) permettant l’intégration dans des applications tierces (blogs, facebook…)

Groupe hébergement / maintenance / juridique
Vous analyserez et préconiserez des solutions d’hébergement, que vous mettrez en place sous la direction de Philippe Métayer. Vous définirez les opérations de maintenances à effectuer, notamment relatives aux créations et au respect des droits d’auteur. Vous proposerez une organisation humaine réaliste et efficace.
Vous écrirez les documents juridiques du service (conditions d’utilisation, mentions légales).

Groupe marketing / interopérabilité
Vous bâtirez une stratégie de communication pour srckrea, servant à la fois l’intérêt général de la filière et l’intérêt particulier des étudiants et anciens. Vous vous attacherez à imaginer des outils simples à intégrer dans les divers média sociaux et plateformes de contenus (facebook, myspace, youtube, dailymotion, vimeo, typepad, blogger, wordpress, dotclear, twitter…).

Le design naît du rapport entre la forme et la fonction.

C’est une discipline vaste, nous allons explorer quelques aspects.

Print
Livres, affiches, flyers, annonces presses, magazines, journaux mais aussi packagings, plv (publicité sur le lieu de vente) cartonnées, papeterie, carte de visite, tout cela est du print.
Les logiciels usuels sont Photoshop, Illustrator et Indesign ou XPress.
Le format pdf, héritier du postscript (et créé aussi par Adobe, ils sont partout) est le format de transport le plus répandu.
On travaille les couleurs en CMJN, et en haute définition (300 dpi).

fr.wikipedia.org/wiki/Quadrichromie

fr.wikipedia.org/wiki/Point_par_pouce

Le terme graphic design est souvent lié au print.

en.wikipedia.org/wiki/Graphic_design

Quelques graphic designers :
Alexey Brodovitch
Neville Brody
David Carson
Stefan Sagmeister
Michal Batory

Motion design
Clips, génériques, films, le motion design c’est le design en mouvement !
On travaille en rvb, aux formats divers et variés de la vidéo.

fr.wikipedia.org/wiki/Rouge_vert_bleu

fr.wikipedia.org/wiki/Phase_Alternated_Line

fr.wikipedia.org/wiki/Haute_définition

Les logiciels sont ceux du graphic design, plus After Effects et des logiciels d’images de synthèse (3DS Max, Maya, Lightwave).

Quelques références :

www.renascent.nl/

www.nobrain.fr

Vimeo regorge de travail de motion design.

Sound design
Ce n’est pas de la composition de musique, mais plutôt de la création d’environnement sonore. La composition ou le choix de musique est directement lié, mais je ne sais pas si l’on peut vraiment parler de sound design : peut-être faudrait-il parler de production, ou de direction musicale.
Dans la galaxie Adobe, un petit logiciel est dédié : Soundbooth.
Tous les logiciels de Musique Assistée par Ordinateur – MAO – sont de bons outils pour le sound design : Pro Tools, Cubase, Logic, Live.

Brand design
Il s’agit du design de marque. Bien sûr, le logotype, mais aussi tout ce qui compose la marque, et qui est fixé dans la charte graphique : couleurs, empagements, photos / pictos / illustrations, typographies.
Le packaging est aussi une part du brand design.

Acteurs importants :

www.interbrand.com

www.carrenoir.com

www.dragonrouge.fr

www.brand-image.fr

Web design
Le gros morceau de notre travail ensemble !
Tout ce qui finit sur le web, ou au sens plus large, sur un écran interactif, est un peu du web design. On pourrait d’ailleurs dire interactive design. Cela recouvre un certain nombre de métiers en évolution : designer d’interactions, ergonome, directeur artistique (da) interactif, flash designer, etc.
Tout est bien résumé dans les livres blancs des designers interactifs :

www.designersinteractifs.org

Voir aussi

fr.wikipedia.org/wiki/Web_design

Les outils logiciels privilégiés peuvent être Photoshop ou Illustrator, selon les cas et les préférences personnelles du designer.

Les outils méthodologiques sont :
le zoning (structuration de l’espace sans choix graphiques)
le storyboard (roughs papiers des pages ou de l’histoire)
la maquette (réalisation graphique des pages)

La question de l’empagement est constante : il s’agit de la stratégie de positionnement des éléments lors du redimensionnement du navigateur.

Quelques références…
www.thefwa.com (ce qui se fait de mieux en full flash dans le monde)

Probablement les 3 meilleures agences françaises…

www.duke-interactive.com/

www.megalos.net/

www.soleilnoir.net/

Les mastodontes…

www.digitas.fr/

www.fullsix.fr/

www.mrmworldwide.fr/

www.nurun.com/

fr.wikipedia.org/wiki/Image_vectorielle

fr.wikipedia.org/wiki/Bitmap

Photoshop est particulièrement efficace pour la retouche photo.
Illustrator est indispensable pour la création de logos.
Les 2 sont adaptés pour le design web.

Indesign (équivalent Adobe de Quark XPress) est un logiciel de mise en page. Cela sert à produire des documents qui s’impriment : livres, affiches, annonces presse, etc.

After Effects est un logiciel de compositing vidéo, une sorte de photoshop en mouvement. Il permet de fabriquer des images qui bougent.

Premiere est un logiciel de montage, mais vous utiliserez final cut, pour lequel vous êtes formés.

Flash est un logiciel d’animation web, qui peut faire quantité d’autres choses.

Flex est un environnement et un framework de développement d’applications web.

Pour se former à tous ces logiciels :

tv.adobe.com/

Un paradigme est une façon de penser quelque chose, une représentation du monde. fr.wikipedia.org/wiki/Paradigme

Voilà les principaux paradigmes dont nous allons nous servir.

Marketing

C’est une vision du monde qui vise à vendre. Tout peut se considérer comme un produit, qui est distribué par des canaux, vendu à un certain prix, et doté d’une image construite notamment par la communication. Selon ces 4 critères, les consommateurs – nous – allons choisir un produit plutôt qu’un autre. Pour une entreprise, on peut donc influer sur 4 paramètres, cad positionner le prix (plus cher ou moins cher que les concurrents), le produit (de meilleure ou moins bonne qualité, avec des bénéfices fonctionnels différents), la distribution (vendu partout ou à très peu d’endroits) et la communication (mettre en avant telle idée, telle valeur, telle ambiance).

www.mercator-publicitor.fr

fr.wikipedia.org/wiki/Marketing

Le concept de marque est indissociable. Une marque est une entité identifiable. Elle s’appuie sur des valeurs, occupe un territoire, utilise un positionnement, et fixe ses codes de communication dans une charte.

Information et savoir

L’idée n’est pas de vendre mais de comprendre. Les informations sont des données reliées entre elles. Elles ont une source et un degré de chaleur (chaud signifiant actuel / rapide, froid signifiant permanent / lent). La manière de les organiser peut s’appeler structure ou architecture de l’information.

fr.wikipedia.org/wiki/Savoir

fr.wikipedia.org/wiki/Information

Sociologie & psychologie

L’humain – en tant qu’individu et en tant que groupe – est le point de départ et le point d’arrivée de tout ce que nous abordons. Les informations viennent d’humains et sont reçues par d’autres humains. Le marketing est fait par des humains, pour vendre à d’autres humains. Il paraît donc assez logique de chercher à comprendre comment nous fonctionnons en tant que personnes, et en tant que membres d’un groupe. Je recommande chaleureusement la lecture de Pierre Bourdieu, notamment « La Noblesse d’Etat » et « La distinction ». Ainsi chaque personne est dotée dans des proportions très variables de capital social, de capital culturel et de capital économique. Il existe aussi, pour les institutions, un capital symbolique. Les champs qui structurent les différentes couches de notre société peuvent être lus suivant ces 3 types.

Complexité

Deux manières traditionnelles d’envisager la connaissance sont les approches réductionniste et holistique. L’idée réductionniste est de comprendre le fonctionnement de chaque petite chose pour en déduire le fonctionnement de l’ensemble (par exemple, démonter une horloge pour étudier chaque pièce et leurs relations). L’idée holistique (ou holiste) essaie d’expliquer le fonctionnement d’une chose par sa relation aux autres, à l’ensemble (par exemple, l’étude d’un écosystème).

La pensée complexe (Edgar Morin, Joël de Rosnay) dépasse ce clivage, en acceptant le fait que, dans la plupart des systèmes réels, on ne peut comprendre parfaitement ni le tout, ni la partie, parce que tout est en mouvement et en interaction. En navigant de manière agile entre les différents niveaux d’un domaine (micro vs macro notamment), on repère des motifs, des noyaux, des liens. De plus, des phénomènes peuvent émerger spontanément, sans explication ni causalité intelligible. Il s’agit d’accepter nos limites, et de tenter de créer des liens de sens et de forme entre les domaines.

La pensée complexe est particulièrement adaptée à l’Internet, du fait du volume et de la vitesse phénoménale de production d’information.

Sémiotique

Il s’agit de comprendre comment les signes transmettent le sens. Tout est signe : une image, un mot, une couleur, un son, une intonation… Les signes construisent en nous des représentations : du monde, des gens, des marques. Nous allons utiliser les outils sémiotiques de 2 façons. En lecture, pour comprendre une marque, une création publicitaire, le design d’un site, un film, un clip. En écriture, pour assembler de manière pertinente des signes créant le sens ou le territoire que nous souhaitons.

A lire : Saussure, Barthes, Eco, Baudrillard…

fr.wikipedia.org/wiki/Sémiotique

Paradigmes de programmation

Il existe un certain nombre de manières de voir le développement logiciel. J’évoquerai plus particulièrement la Programmation Orientée Objet dans un autre article.

en.wikipedia.org/wiki/Programming_paradigm

J’essaie d’aborder avec vous pendant deux ans un certain nombre de domaines interconnectés, et de clarifier les liens qui les relient. Certains des thèmes abordés sont des manières de penser – des paradigmes – (sémiotique, marketing, programmation orientée objet…), certains sont des concepts fondamentaux (information, marque), d’autres sont des outils intellectuels (territoire de marque, zoning, storyboard…) ou logiciels (photoshop, after effects, flex…). Il me semblait nécessaire de poser tout cela par écrit.

Basic (à faire par tous)
didacticiel_still_life.zip

Advanced (si vous voulez)
didacticiel_textures.zip

Pour cela, mes interventions sont divisées en 2 axes :
- Eléments de sémiologie appliquée au design graphique
- Technologies de l’information
Deux interventions avec Frédéric Bruneaux concernent la vidéo (l’image de synthèse et le compositing), et ne s’inscrivent pas exactement dans ces deux axes.

Introduction à la direction artistique
Objectifs
- Comprendre le métier de directeur (trice) artistique
- Verbaliser une création graphique

Contenu
- définition
- étapes de travail (brief, pistes, planches de tendance/de sensibilité/rough, maquettes)
- typographie (de la calligraphie à l’ordinateur)
- logotype et charte graphique
- notion de code couleur
- image photographique, illustration
- mise en page et rapport au media
- distingo DA/maquette
- Travaux pratiques : présentation orale de créations déjà réalisées

Eléments de sémiologie appliquée au design graphique : l’image
Objectifs
- Exercer un vocabulaire de l’image et de son sens
- Poser quelques repères photographiques
- Aborder Photoshop

Contenu
- Du mot à l’image, de l’image au mot
- Couleur, émotion, sens
- Photoshop, outil essentiel de la création infographique
- Notion de bitmap et vecteur, calque, couches, modes de couleur
- Rapport à l’imprimé, rapport à l’écran vidéo et informatique, dpi
- Usages en retouche et en webdesign
- Travaux pratiques

Eléments de sémiologie appliquée au design graphique : la typographie
Objectifs
- Voir le dessin typographique
- Poser quelques repères typographiques
- Comprendre un logotype
- Aborder Illustrator
Contenu
- Anatomie de la lettre
- Histoire, classifications, code typo
- Etudes de fontes
- Logotype et charte graphique
- Etudes de logos
- Illustrator
- Travaux pratiques

Eléments de sémiologie appliquée au design graphique : la page
Objectifs
- Comprendre la page et son fonctionnement
- Poser des repères de mise en page web et print
- Aborder Indesign

Contenu
- histoire de l’édition,
- chaîne graphique et ouverture sur le pluri-media (pdf, xml),
- Indesign
- Travaux pratiques

Technologies de l’information : des besoins aux solutions, méthode(s)
Objectifs
- Acquérir des méthodes d’analyse et de fonctionnement
- Découvrir diverses technologies et leurs usages possibles

Contenu
- Un projet web ou multimedia : besoins, objectifs, cibles, fonctionnalités, scénarisation, design graphique, solutions techniques
- Outils de base : recommandation, arborescence, maquettes, ordre du jour / compte-rendu, rétro-planning
- Présentation du web : notions fondamentales, technologies (client / serveur)
- Travaux pratiques : définition d’objectifs, de cibles, brainstorming et scénarisation

Technologies de l’information : développement
Objectifs
- Acquérir des bases opérationnelles en développement
- Comprendre la notion de Recherche et Développement
Cette intervention s’appuie sur le langage PHP, mais les concepts évoqués sont indépendants du langage. Les étudiants doivent pouvoir changer de langage en cas de besoin.

Contenu
- Organiser son développement
- R&D : pourquoi, comment
- Syntaxe de base
- Variables, tableaux, expressions, fonctions
- Structures de contrôle
- Programmation Orientée Objet
- Travaux pratiques

Technologies de l’information : bases de données relationnelles
Objectifs
- Comprendre la notion de bases de données
- Concevoir un modèle de données efficace
- Mettre en œuvre une application avec base de données
Cette intervention utilise MySQL et Visio, mais les concepts évoqués sont autonomes.
Contenu
- Base de données relationnelles : Structured Query Language
- Le modèle de données, la redondance, l’intégrité et la normalisation (Visio)
- MySQL et PHP
- Travaux pratiques

Technologies de l’information : interactivité, mouvement
Objectifs
- Comprendre la notion d’interactivité
- Aborder Flash et Director

Contenu
- Présentation des 2 logiciels en parallèle
- Présentation d’un cas concret de conception d’application multimedia complexe
- Travaux pratiques

Vidéo : l’image de synthèse, elabTV
Objectif
- Initiation à l’image de synthèse

Contenu
- notions essentielles de l’image de synthèse
- comparatif des outils phares
- présentation de 3DSMax
- travaux pratiques.

Vidéo : le compositing, elabTV
Objectif
- Présentation du compositing
- 2 outils de compositing importants
- Rapports entre image de synthèse et vidéo

Contenu
- Introduction au compositing
- Abord de Combustion en synergie avec 3ds Max pour le trucage
- Abord d’After Effects en synergie avec Photoshop pour l’habillage
- Travaux pratiques

Repères culturels
Recherche personnelle de repères culturels. Recherche historique de personnalités de la musique, sculpture, peinture, littérature, théâtre, poésie, architecture, idée politique, philosophique, typographie, et du cinéma.

Projets
Tous ces projets correspondent à des problèmatiques classiques, presque des archétypes.
Un outil web simple : album photo en ligne
Une fonction d’intranet collaboratif : l’agenda partagé
Une fonction d’intranet collaboratif : l’annuaire partagé
Un minisite produit
Un système de vente en ligne
Un re-design de site vitrine
Un site de petites annonces
Un cd-rom de présentation produit
Un DVD vidéo de présentation
Un site dédié enfants

Elab
elab – entreprise
Mise en place du site elab destiné aux professionnels
elab – projet
Mise en place du site elab destiné à l’orientation des futurs étudiants
elab – réseau (suivi de parcours)
Mise en place de l’outil de suivi de parcours des anciens, avec gestion des profils par les anciens eux-mêmes
elab – réseau (bourse d’emploi)
Mise en place d’un forum de discussion centré sur l’emploi, pour les étudiants et les anciens
Obselab : dossiers et revues de presse
Mise en place d’un système de saisie et de présentation des revues de presse et des dossiers thématiques de Pub et SRC
Elab TV
Ecriture et réalisation d’une chaîne de télévision.

1a – Introduction à la direction artistique
Objectifs
- Comprendre le métier de directeur (-trice) artistique
- Verbaliser une création graphique
Contenu
- définition
- étapes de travail (brief, pistes, planches de tendance/de sensibilité/rough, maquettes)
- typographie (de la calligraphie à l’ordinateur)
- logotype et charte graphique
- notion de code couleur
- image photographique, illustration
- mise en page et rapport au media
- distingo DA/maquette
- Travaux pratiques : présentation orale de créations déjà réalisées

2a – Image, typographie : recherche préparatoire
Objectifs
- Préparer les 2 interventions suivantes
Contenu
- Choisir une image et une maquette
- Ecrire un bref paragraphe présentation, contexte, justification du choix
- Présenter le choix et le texte à la promotion

2a – Eléments de sémiologie appliquée au design graphique : l’image
Objectifs
- Exercer un vocabulaire de l’image et de son sens
- Poser quelques repères photographiques
- Aborder Photoshop
Contenu
- Du mot à l’image, de l’image au mot
- Couleur, émotion, sens
- Photoshop, outil essentiel de la création infographique
- Notion de bitmap et vecteur, calque, couches, modes de couleur
- Rapport à l’imprimé, rapport à l’écran vidéo et informatique, dpi
- Usages en retouche et en webdesign
- Travaux pratiques

2a – Eléments de sémiologie appliquée au design graphique : la typographie
Objectifs
- Voir le dessin typographique
- Poser quelques repères typographiques
- Comprendre un logotype
- Aborder Illustrator
Contenu
- Anatomie de la lettre
- Histoire, classifications, code typo
- Etudes de fontes
- Logotype et charte graphique
- Etudes de logos
- Illustrator
- Travaux pratiques

2a – 1 marque pour 1 autre : travaux pratiques de direction artistique
Par binôme, réaliser une création pour une marque, en utilisant tous les codes de communication d’une autre marque, hors du secteur de la première. Les deux marques sont tirées au hasard. Il faudra donc adapter les choix photos, le discours, les couleurs, le logo (à la manière des détournements du générique Culture Pub).

2a – Marque de tendance : travaux pratiques de direction artistique
Par bi/trinôme, créer une marque emblématique d’une des tendances isolées par Jean-Pierre Cantorné :
SPIRITUALITE : Nous sommes en quête de sens.
FEMINITE : La femme est reine, et les formes rondes, les couleurs tendres et les héros doux et infantiles nous font craquer. On préfère Di Caprio à Stallone.
SAGESSE : Nous valorisons le savoir des grands-parents.
ECOLOGIE : C’est bon pour soi et c’est bon pour l’environnement.
« JEUNISME » : Les valeurs de la jeunesse sont en hausse. On loue l’enthousiasme, l’humour, l’optimisme, l’esprit jeune.
CORPS : Ce qui est bon à l’intérieur se voit à l’extérieur.
COCOONING : On se réfugie dans la maison.
SOI : Chacun a l’impression que ce qu’on lui offre est complètement et uniquement pour lui. « Parce qu’on le vaut bien ».
PASSE ET AVENIR : On se réfugie dans le passé en soulignant les racines des marques, on rêve de l’avenir. On refuse le présent et le mot « moderne » est complètement démodé.
(Source : membres.lycos.fr/yannga/Lestendancesdefond.html)