View
14.589
Download
2
Category
Preview:
DESCRIPTION
Quelques éléments graphiques à considérer dans un concept board : couleurs, textures, traitement des photos, typographie, effets de transition, etc...
Citation preview
Concept Boardet pistes graphiques
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
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
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)
chromazonesites web catégorisés par couleurspop/funky : Colored feet
sobre :fondation cartierelegant: puig
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%
Creating color palettesColor ressources
Concept board
Page textures et formes
Aquarelle ? Acier ? Glossy ? Epuré ? 3D ? Transparent ?
Arrondies ? Funkies ? Cartoon ? Rectiligne ?
shutterstock : catégorie texturephotoshop brushesintro zimenkotransparence : burstlabs
lovebirdstutoriel effet aquarelletutoriel reflet d'eautexture_fond_ecran
Concept board
Traitement des photos
Contour : découpées, ombrées, cadre noir Traitement graphique (aplats couleurs, sépia,
flou...)
3D photo effectandy warholretro effectreflet d'image
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...
brands of the worldlogos web2.036 creative logosdesign box
cirque du soleil: traitspartage d'illustrationsimage de fond : 2advancedrythm of lines
Concept board
Page typo
urbanfont, fawnt what the font
top 10 web safe blogging fontshttp://www.typeneu.com/
Typo titre/rubrique
Typo texte général
Concept board
Effets - transitions
Redimensionnement dynamique ? Jeux sur l'opacité, la transparence ? Effets rollover ? Effets typo ?
http://cssglobe.com/lab/imagelink/
=> cohérence graphique : statique et dynamique
gallerie photo- oh my flashEffet texte
coverflow et lightbox
Concept board
Collages graphiques
Propositions d'assemblement couleur, formes, etc
Exemples
Example 2. "collages"
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
Pistes graphiques
http://www.slideshare.net/askrom/interaction-design-style-part-1-of-5/
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/
Recommended