Du concept board aux pistes graphiques

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

http://www.ecrivons.com/cdc/concept_board.pdf

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

http://www.chromazone-imaging.co.uk/

http://tutorialblog.org/category/color/

http://threeleggedlegs.com/repertoire/havaianas/

http://fondation.cartier.com/

http://www.puig.com/

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

http://www.colourlovers.com/

http://www.colourlovers.com/blog/2008/01/25/organizing-bookshelves-by-color/

http://www.stuffandnonsense.co.uk/archives/creating_colour_palettes.html

http://arnonel.com/web-design/2007/chosing-color-and-color-schemes-ultimate-resource-list/

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

http://www.shutterstock.com/cat.mhtml?searchterm=silver&anyorall=all&search_cat=3&search_group=all&orient=all&photographer_name=&searchtermx=&color=

http://tutorialblog.org/free-photoshop-brushes/

http://www.zimenko.kiev.ua/

http://www.burstlabs.com/

http://nofatclips.com/20070505motley/Motley%20Bird%20-%20Lovebirds.mp4

http://www.webdesignerwall.com/tutorials/design-watercolor-effect-menu/

http://photoshopcontest.com/tutorials/26/displacement-water.html

http://drawcaliber.com/

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

http://www.aqa-d.se/ny/pstips/specfx/3d_effect/index.htm

http://www.tutorialized.com/view/tutorial/Andy-Warhol-Photo-Effect/8881

http://www.tutorialized.com/view/tutorial/Old-school-retro-effects/31839

http://www.liquidsquidstudios.com/reflect.html

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

http://brandsoftheworld.com/categories/

http://go2web2net0.web131.discountasp.net/

http://yugushare.blogspot.com/2007/12/kick-ass-creative-logos-trilogy-final.html

http://www.flashmint.com/show-template-1982.html

http://www.cirquedusoleil.com/CirqueDuSoleil/en/casting/default.htm

http://www.myoats.com/mostliked.aspx

http://www.2advanced.com/

http://www.beam.tv/beamreels/reel_player.php?jqbvsptxVy&resize=1

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

http://www.urbanfonts.com/

http://www.fawnt.com/

http://www.myfonts.com/WhatTheFont/

http://speckyboy.com/2007/12/30/top-10-web-safe-blogging-fonts/

http://www.typeneu.com/

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

http://cssglobe.com/lab/imagelink/

http://www.ohmyflash.com/?gclid=CJG3oPjWk5ECFQK8aAodmEigOw

http://www.txeff.com/#/list/null/bestrated/all/

http://kesakoweb.wordpress.com/category/boite-a-outils/page/2/

http://kesakoweb.wordpress.com/2008/01/20/effet-lightbox/

Concept board

Collages graphiques

Propositions d'assemblement couleur, formes, etc

Exemples

Example 2. "collages"

http://www.sqliagency.com/blogs/ecreativegarden/index.php?2007/04/10/34-ce-qui-se-concoit-bien-senonce-bien

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/

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/

http://www.strangefruits.nl/

http://bestwebgallery.com/

http://www.flashmint.com/

http://www.csselite.com/

http://stylizedweb.com/2008/01/18/all-those-web-galleries/

http://commandshift3.com/

Du concept board aux pistes graphiques

Technology

Transcript of Du concept board aux pistes graphiques