Concept Board
et pistes graphiques
Objectifs

   Définir les premiers éléments graphiques qui
    conduiront à construire l'identité visuelle du
    site
 ...
Concept board
Résumé de la ligne éditoriale

     Ton, ambiance, style du site
     Profil général du public cible
    ...
Concept board
Influences graphiques

     Images clés - sites de référence
     Influences print
Concept board
Palettes des couleurs : utilisation

     Traduire une ambiance
     Donner un repère visuel (menu)




  ...
Concept board
Palettes des couleurs : ressources

     Site collaboratif : colourlovers (aparté : article)
     Palettes...
Concept board
Page textures et formes

     Aquarelle ? Acier ? Glossy ? Epuré ? 3D ?
      Transparent ?
     Arrondies...
Concept board
Traitement des photos

     Contour : découpées, ombrées, cadre noir
     Traitement graphique (aplats cou...
Concept board
Iconographies, illustrations

     Style des icônes +logo (glossy, perspective,
      épurées...)
     Tra...
Concept board
Page typo

 Typo titre/rubrique

 Typo texte général




                       urbanfont, fawnt
           ...
Concept board
Effets - transitions

      Redimensionnement dynamique ?
      Jeux sur l'opacité, la transparence ?
   ...
Concept board
Collages graphiques

     Propositions d'assemblement couleur, formes,
      etc
Exemples




           Example 2. quot;collagesquot;
Pistes graphiques
En fonction du « chemin de fer » des pages (cf.
  analyse fonctionnelle)

     Template page d'accueil
...
Pistes graphiques




              http://www.slideshare.net/askrom/interaction-design
Références
   http://www.strangefruits.nl/
   http://bestwebgallery.com/
   http://www.flashmint.com/
   http://www.cs...
Prochain SlideShare
Chargement dans…5
×

Du concept board aux pistes graphiques

15 769 vues

Publié le

Quelques éléments graphiques à considérer dans un concept board : couleurs, textures, traitement des photos, typographie, effets de transition, etc...

Publié dans : Technologie
0 commentaire
6 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
15 769
Sur SlideShare
0
Issues des intégrations
0
Intégrations
139
Actions
Partages
0
Téléchargements
170
Commentaires
0
J’aime
6
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Du concept board aux pistes graphiques

  1. 1. Concept Board et pistes graphiques
  2. 2. Objectifs  Définir les premiers éléments graphiques qui conduiront à construire l'identité visuelle du site  Recevoir un feedback de la part de l'ensemble de l'équipe pour mieux orienter les recherches concernant les futures pistes graphiques
  3. 3. Concept board Résumé de la ligne éditoriale  Ton, ambiance, style du site  Profil général du public cible  Qualification verbale : des couleurs, des formes, des textures, de la typo concept board
  4. 4. Concept board Influences graphiques  Images clés - sites de référence  Influences print
  5. 5. Concept board Palettes des couleurs : utilisation  Traduire une ambiance  Donner un repère visuel (menu) pop/funky : Colored feet sites web catégorisés par couleurs sobre :fondation cartier chromazone elegant: puig
  6. 6. Concept board Palettes des couleurs : ressources  Site collaboratif : colourlovers (aparté : article)  Palettes à partir des couleurs d'une illustration, d'un site 0% 25% 50% 75% 100% Color ressources Creating color palettes
  7. 7. Concept board Page textures et formes  Aquarelle ? Acier ? Glossy ? Epuré ? 3D ? Transparent ?  Arrondies ? Funkies ? Cartoon ? Rectiligne ? lovebirds shutterstock : catégorie texture tutoriel effet aquarelle photoshop brushes tutoriel reflet d'eau intro zimenko texture_fond_ecran transparence : burstlabs
  8. 8. Concept board Traitement des photos  Contour : découpées, ombrées, cadre noir  Traitement graphique (aplats couleurs, sépia, flou...) 3D photo effect andy warhol retro effect reflet d'image
  9. 9. Concept board Iconographies, illustrations  Style des icônes +logo (glossy, perspective, épurées...)  Traitement des traits : pointillés, curvilignes, etc..  Illustrations d'accompagnement : mise en perspective, reflet, 2D/3D... cirque du soleil: traits brands of the world partage d'illustrations logos web2.0 image de fond : 2advanced 36 creative logos rythm of lines design box
  10. 10. Concept board Page typo Typo titre/rubrique Typo texte général urbanfont, fawnt what the font top 10 web safe blogging font http://www.typeneu.com/
  11. 11. Concept board Effets - transitions  Redimensionnement dynamique ?  Jeux sur l'opacité, la transparence ?  Effets rollover ?  Effets typo ? => cohérence graphique : statique et dynamique coverflow et lightbox gallerie photo- oh my flash http://cssglobe.com/lab/imagelink/ Effet texte
  12. 12. Concept board Collages graphiques  Propositions d'assemblement couleur, formes, etc
  13. 13. Exemples Example 2. quot;collagesquot;
  14. 14. Pistes graphiques En fonction du « chemin de fer » des pages (cf. analyse fonctionnelle)  Template page d'accueil  Template page de contenu  Transition entre les pages : mini-storyboards exemple pistes graphiques page d'accueil
  15. 15. Pistes graphiques http://www.slideshare.net/askrom/interaction-design
  16. 16. Références  http://www.strangefruits.nl/  http://bestwebgallery.com/  http://www.flashmint.com/  http://www.csselite.com/  Liste de galeries web  http://commandshift3.com/

×