SlideShare une entreprise Scribd logo
1  sur  10
Télécharger pour lire hors ligne
tu as fais ceci
1
tu as fais ceci
2
puis ceci
3
4
Il te reste à faire cela
5
6
BRIEFING
TLT: LE DERNIER DÉLIVRABLE
Construis une expérience-utilisateur en ligne simple mais captivante,
grâce à un contenu bien construit et une écriture et composition de
qualités professionnelles.
• Publie sur http://dwm.re/tisse-la-toile
• Applique les principes de l'écriture pour le web (cfr cours d'ergonomie). Aide à la lecture rapide / en diagonale. Offre des points de fixation à
l'oeil, par l'utilisation d'une structure claire et de visuels qui accrochent le regard, interpellent le lecteur, lui donner envie d'arrêter de scanner
pour réellement explorer ton contenu.
• Termine par 3 suggestions de lecture à l’utilisateur. Ces 3 suggestions doivent renvoyer à d'autres articles de TLT.
• Rythme. Joue avec l'espace de l'écran et dispose ton contenu spatialement de manière à rythmer l'expérience. Gauche, droite. Haut, bas. ⅓, ⅔,
3/3. En diagonale? LMGTFY: "Robert Masson la cantatrice chauve".
• Tu dois y intégrer les 5 slides (tu peux les transformer par rapport à la présentation orale) en notant dans la description "MCD1" pour la
première image, "MCD2" pour la 2ème, ainsi de suite, ce qui me permettra de les reconnaitre. (balise "figcaption").
• Minimum 750 mots. (Pas de blabla pour autant). PAS DE JAVASCRIPT (sauf si ton MCD est jQuery, actionscript ou ecmascript). Pas d'animation
CSS3. Concentre-toi sur couleur, espace, typographie et visuels. C'est statique, et c'est bien.
• Deadline: 15 décembre 2014.
7
QUALITE PROFESSIONNELLE
TLT: LE DERNIER DÉLIVRABLE _ EVALUATION
une écriture et composition de qualités professionnelles
• orthographe: relis-toi, et fais toi relire.
• précision du vocabulaire
• registre du langage adapté
• rédaction adaptée au web
• rythme et composition
• structuration en titres/sous-titres
• html sémantique
• propreté et soin du moindre détail.
• Tu cites la source de CHAQUE visuel (image/vidéo/son/police de caractères/icône…) que tu publies.
8
STYLE PERSONNALISE
CONTRÔLER LE STYLE
A partir du 22 novembre, la template de ton article va changer, pour te
laisser la parole.
Tu pourras, via l'interface de Wordpress, injecter une feuille de style
hébergée sur ton espace personnel (ou quelque part en ligne), utiliser
des webfonts (max 2) et encoder dans la zone de contenu tout ce qui
doit être entre les balises <body></body>.
Cela te permettra, en utilisant wordpress en vue "HTML" de contrôler
plus finement l'aspect graphique de ton contenu.
9
CONÇOIS UNE EXPÉRIENCE-UTILISATEUR SIMPLE,
INTÉRESSANTE, PROFESSIONNELLE.
POUR T'AIGUILLER, ANALYSE LE TRAITEMENT VISUEL DES ARTICLES DU
JOURNAL DE GREG WOOD

HTTP://JOURNAL.GREGORYWOOD.CO.UK/
10

Contenu connexe

Similaire à 2 tid conception-projet-cours5-briefing-tlt-publication

Ecrire pour internet et les blogs
Ecrire pour internet et les blogsEcrire pour internet et les blogs
Ecrire pour internet et les blogsXavier Lambert
 
Pratique D Action Script 3 Version 0.1
Pratique D Action Script 3   Version 0.1Pratique D Action Script 3   Version 0.1
Pratique D Action Script 3 Version 0.1guest5cdd799
 
Organisation visuelle
Organisation visuelleOrganisation visuelle
Organisation visuellemsk10
 
Optimiser sa copie numérique - vade-mecum
Optimiser sa copie numérique - vade-mecumOptimiser sa copie numérique - vade-mecum
Optimiser sa copie numérique - vade-mecumAriane van der Veen
 
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?Idean France
 
Ecrire pour le web: comment, pourquoi?
Ecrire pour le web: comment, pourquoi?Ecrire pour le web: comment, pourquoi?
Ecrire pour le web: comment, pourquoi?Xavier Lambert
 
Faire du design par composant avec l'Atomic Design
Faire du design par composant avec l'Atomic DesignFaire du design par composant avec l'Atomic Design
Faire du design par composant avec l'Atomic DesignLoïc Vanderschooten
 
Css.more.or.less
Css.more.or.lessCss.more.or.less
Css.more.or.lessVISEO
 
Introduction au cours d'écriture numérique
Introduction au cours d'écriture numériqueIntroduction au cours d'écriture numérique
Introduction au cours d'écriture numériqueXavier Lambert
 
Responsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tousResponsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tousjwajsberg
 
Dessin de pages web 536
Dessin de pages web 536Dessin de pages web 536
Dessin de pages web 536quickredfox
 
Créer un journal scolaire avec Scribus
Créer un journal scolaire avec ScribusCréer un journal scolaire avec Scribus
Créer un journal scolaire avec ScribusNatacha DUBOIS
 
ATELIER PRATIQUE Web Redactionnel
ATELIER PRATIQUE Web RedactionnelATELIER PRATIQUE Web Redactionnel
ATELIER PRATIQUE Web RedactionnelTarn Tourisme
 
Introduction à la gestion de projet
Introduction à la gestion de projetIntroduction à la gestion de projet
Introduction à la gestion de projetlaureno
 
Guide auto-formation pour écrire pour le web~Learning Cube
Guide auto-formation pour écrire pour le web~Learning CubeGuide auto-formation pour écrire pour le web~Learning Cube
Guide auto-formation pour écrire pour le web~Learning CubeLaurent BOBY
 
582 agr-li - interface mobile - classe 1
582   agr-li - interface mobile - classe 1582   agr-li - interface mobile - classe 1
582 agr-li - interface mobile - classe 1Alexandre Paradis
 
MobiliTeaTime #14 : L'Atomic Design
MobiliTeaTime #14 : L'Atomic DesignMobiliTeaTime #14 : L'Atomic Design
MobiliTeaTime #14 : L'Atomic DesignUSERADGENTS
 

Similaire à 2 tid conception-projet-cours5-briefing-tlt-publication (20)

Ecrire pour internet et les blogs
Ecrire pour internet et les blogsEcrire pour internet et les blogs
Ecrire pour internet et les blogs
 
2 tid conception-projet-cours2
2 tid conception-projet-cours22 tid conception-projet-cours2
2 tid conception-projet-cours2
 
Le graphisme
Le graphismeLe graphisme
Le graphisme
 
Pratique D Action Script 3 Version 0.1
Pratique D Action Script 3   Version 0.1Pratique D Action Script 3   Version 0.1
Pratique D Action Script 3 Version 0.1
 
Organisation visuelle
Organisation visuelleOrganisation visuelle
Organisation visuelle
 
Optimiser sa copie numérique - vade-mecum
Optimiser sa copie numérique - vade-mecumOptimiser sa copie numérique - vade-mecum
Optimiser sa copie numérique - vade-mecum
 
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
 
Ecrire pour le web: comment, pourquoi?
Ecrire pour le web: comment, pourquoi?Ecrire pour le web: comment, pourquoi?
Ecrire pour le web: comment, pourquoi?
 
150 scripts pour flash as2
150 scripts pour flash as2150 scripts pour flash as2
150 scripts pour flash as2
 
Faire du design par composant avec l'Atomic Design
Faire du design par composant avec l'Atomic DesignFaire du design par composant avec l'Atomic Design
Faire du design par composant avec l'Atomic Design
 
Css.more.or.less
Css.more.or.lessCss.more.or.less
Css.more.or.less
 
Introduction au cours d'écriture numérique
Introduction au cours d'écriture numériqueIntroduction au cours d'écriture numérique
Introduction au cours d'écriture numérique
 
Responsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tousResponsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tous
 
Dessin de pages web 536
Dessin de pages web 536Dessin de pages web 536
Dessin de pages web 536
 
Créer un journal scolaire avec Scribus
Créer un journal scolaire avec ScribusCréer un journal scolaire avec Scribus
Créer un journal scolaire avec Scribus
 
ATELIER PRATIQUE Web Redactionnel
ATELIER PRATIQUE Web RedactionnelATELIER PRATIQUE Web Redactionnel
ATELIER PRATIQUE Web Redactionnel
 
Introduction à la gestion de projet
Introduction à la gestion de projetIntroduction à la gestion de projet
Introduction à la gestion de projet
 
Guide auto-formation pour écrire pour le web~Learning Cube
Guide auto-formation pour écrire pour le web~Learning CubeGuide auto-formation pour écrire pour le web~Learning Cube
Guide auto-formation pour écrire pour le web~Learning Cube
 
582 agr-li - interface mobile - classe 1
582   agr-li - interface mobile - classe 1582   agr-li - interface mobile - classe 1
582 agr-li - interface mobile - classe 1
 
MobiliTeaTime #14 : L'Atomic Design
MobiliTeaTime #14 : L'Atomic DesignMobiliTeaTime #14 : L'Atomic Design
MobiliTeaTime #14 : L'Atomic Design
 

2 tid conception-projet-cours5-briefing-tlt-publication

  • 1. tu as fais ceci 1
  • 2. tu as fais ceci 2
  • 4. 4
  • 5. Il te reste à faire cela 5
  • 6. 6
  • 7. BRIEFING TLT: LE DERNIER DÉLIVRABLE Construis une expérience-utilisateur en ligne simple mais captivante, grâce à un contenu bien construit et une écriture et composition de qualités professionnelles. • Publie sur http://dwm.re/tisse-la-toile • Applique les principes de l'écriture pour le web (cfr cours d'ergonomie). Aide à la lecture rapide / en diagonale. Offre des points de fixation à l'oeil, par l'utilisation d'une structure claire et de visuels qui accrochent le regard, interpellent le lecteur, lui donner envie d'arrêter de scanner pour réellement explorer ton contenu. • Termine par 3 suggestions de lecture à l’utilisateur. Ces 3 suggestions doivent renvoyer à d'autres articles de TLT. • Rythme. Joue avec l'espace de l'écran et dispose ton contenu spatialement de manière à rythmer l'expérience. Gauche, droite. Haut, bas. ⅓, ⅔, 3/3. En diagonale? LMGTFY: "Robert Masson la cantatrice chauve". • Tu dois y intégrer les 5 slides (tu peux les transformer par rapport à la présentation orale) en notant dans la description "MCD1" pour la première image, "MCD2" pour la 2ème, ainsi de suite, ce qui me permettra de les reconnaitre. (balise "figcaption"). • Minimum 750 mots. (Pas de blabla pour autant). PAS DE JAVASCRIPT (sauf si ton MCD est jQuery, actionscript ou ecmascript). Pas d'animation CSS3. Concentre-toi sur couleur, espace, typographie et visuels. C'est statique, et c'est bien. • Deadline: 15 décembre 2014. 7
  • 8. QUALITE PROFESSIONNELLE TLT: LE DERNIER DÉLIVRABLE _ EVALUATION une écriture et composition de qualités professionnelles • orthographe: relis-toi, et fais toi relire. • précision du vocabulaire • registre du langage adapté • rédaction adaptée au web • rythme et composition • structuration en titres/sous-titres • html sémantique • propreté et soin du moindre détail. • Tu cites la source de CHAQUE visuel (image/vidéo/son/police de caractères/icône…) que tu publies. 8
  • 9. STYLE PERSONNALISE CONTRÔLER LE STYLE A partir du 22 novembre, la template de ton article va changer, pour te laisser la parole. Tu pourras, via l'interface de Wordpress, injecter une feuille de style hébergée sur ton espace personnel (ou quelque part en ligne), utiliser des webfonts (max 2) et encoder dans la zone de contenu tout ce qui doit être entre les balises <body></body>. Cela te permettra, en utilisant wordpress en vue "HTML" de contrôler plus finement l'aspect graphique de ton contenu. 9
  • 10. CONÇOIS UNE EXPÉRIENCE-UTILISATEUR SIMPLE, INTÉRESSANTE, PROFESSIONNELLE. POUR T'AIGUILLER, ANALYSE LE TRAITEMENT VISUEL DES ARTICLES DU JOURNAL DE GREG WOOD
 HTTP://JOURNAL.GREGORYWOOD.CO.UK/ 10