Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Du concept board aux pistes graphiques

16,077 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/

×