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

1. Concept Board
et pistes graphiques

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. 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. Concept board
Influences graphiques
 Images clés - sites de référence
 Influences print

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. 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. 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. 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. 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. 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. 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. Concept board
Collages graphiques
 Propositions d'assemblement couleur, formes,
etc

13. Exemples
Example 2. quot;collagesquot;

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. Pistes graphiques
http://www.slideshare.net/askrom/interaction-design

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/