Successfully reported this slideshow.

Du concept board aux pistes graphiques

15,995 views

Published on

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

Published in: Technology
  • Be the first to comment

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/

×