Réalisation trimestrielle d’un compte Rendu sur les principales

1. Cahier de tendances Juin 2007 Magicmaman.com - Ludovic Trimbach Réalisation trimestrielle d’un compte Rendu sur les principales mouvances du Web en matière de design et d’ergonomie.

2. Juin 2007 Problématiques Préambule Le Web : Vitrine du tout et de son contraire De plus, nombreux sont les sites de marques dont une ou plusieurs couleurs participe à elle seule à l’identité même de la marque et est alors indissociable de cette dernière (Leclerc, Carrefour, Yves rocher, Vert Baudet, etc. … C’est alors plus dans le traitement des images, l’ergonomie de la page, la structure du site et le Rich Media qu’il faut rechercher une tendance quelconque. La difficulté à définir précisément un cahier de tendances pour le Web réside dans le fait que ce dernier dispose de codes qui lui sont propresAinsi la palette de couleurs utilisée, la structure du site, la dynamique des formes ou la typographie déterminées lors de la conception d’un site dépendront fréquemment de l’ambiance désirée, du message que l’on souhaite véhiculer mais également de la cible que l’on désire toucher. • Symbolique des couleurs • De ce fait, nous trouverons inévitablement multitude de choix chromatiques différents sur le Web sans obligatoirement savoir ce qui figurera le Web des mois à venir. • De manière générale : • Le blanc évoquera la pureté, la sobriété. Il symbolise l’innocence, l’unité et la neutralité. Le noir, l’or et l’argent, le luxe, l’élégance, la modernité, la richesse et le raffinement. Le rouge, la chaleur, le dynamisme, la passion, la force, la puissance, mais également le danger et l’interdiction. Le bleu, le calme, la sérénité, la paix, la détente et la relaxation. Le vert, la nature, le repos, l’équilibre et l’espérance. • Dénicher les sites prescripteurs • Éviter les pièges lors de la sélection des sites Web. Pour cela, il conviendra de se pencher en priorité sur des sites qui ne soient ni trop institutionnels, ni trop rigides, mais au contraire sensibles aux phénomènes de mode, réactifs et enclins aux changements ponctuels, tels que certains sites évènementiels de marques, des sites de prêt-à-porter, des sites pour ados ou des sites dont le graphisme et le design est le principal objet. Les secteurs de l’automobile et des nouvelles technologies sont également de bons prescripteurs de tendances.

3. Juin 2007 Méthodologie Préambule • Benchmarking de nombreux sites Web variés • Ciblage de sites pertinents, sensibles aux modes et nouvelles tendances, tels que les sites évènementiels, sites de constructeurs automobile, de nouvelles technologies, les grandes enseignes ciblant les jeunes, sans oublier les sites consacrés au design et au graphisme ( dont certains de leurs concepteurs font office de prescripteur de mode. • Consultation de sites Web d’actualité sur le design • Afin de se tenir informéde l’actualité du Web en matière de Web design certes, mais également de développement et d’application multimédia, de connectivité qui peuvent comme nous le verrons plus après influencer l’apparence du Web de demain. (ex : haut débit, Windows VISTA, widgets, Apple, etc.… ). Utile également pour recueillir l’avis des experts du design. • Recoupement des informations et Sélection des tendances significatives • Afin de vérifier qu'une information, une tendance, n’est pas un phénomène de niche, mais constitue bien une réelle évolution probante. • Analyse thématique

4. Juin 2007 Mise en page & Ergonomie 1 / 2 • La construction visuelle des pages est un élément crucial dans la perception d’un site Web par l’Internaute. De cette construction, découlera le niveau de navigabilité, de lisibilité et d’interactivité de chaque site . C’est également cette hiérarchisation de l’information qui participera à notre première impression lors de la première visite d’un site Web. • Deux démarches se détachent singulièrement, l’une visant à structurer de manière rigoureuse l’information, elle est plus attendue et prévisible. L’autre, plus artistique, proposant un cheminement plus complexe relève d’une véritable envie de faire évoluer le net et de faire bénéficier l’internaute de tous les médias dès lors accessibles grâce au haut débit. • I –Ordre rigueur et alignement • Tendance très « Web 2.0 », approche très technologique de la conception Web, cette construction se caractérise par la parcellisation de la page en plusieurs zones bien distinctes, facilement identifiables par l’internaute. • Très fréquemment ont retrouve : • Une large zone identitaire idéalement située en haut de page et bien • délimitée du reste du contenu. • Une navigation simple • La limitation du nombre de colonnes à 3 au maximum • Des espaces thématiques de couleur • Des zones de repos visuel • Un alignement des différents éléments graphiques • Un design épuré

5. http://www.skoda.fr/nouvellefabia/index.html Navigation par style personnel ou Instants préférés. Juin 2007 Mise en page & Ergonomie 2 / 2 • Par cette tendance, on cherche à simplifier, voire baliser le parcours de l’internaute, le rendre plus intuitif et ne pas surcharger l’œil au combien sollicité par La profusion de sites sur le Web et donc utiliser des standards pour guider presque inconsciemment le visiteur. II –Le désordre organisé A contrario, on trouvera également des sites Web, conçus de manière plus élaborée moins intuitive, certes, plus déroutante, mais témoignant sans conteste d’une démarche plus artistique et plus créative. Lapage Web est alors envisagée dans son intégralité, sa globalité, permettant ainsi une plus grande immersion dans le site. Les formes sont généralement plus douces, plus rondes, la navigation éparse sur la page, apparemment moins ordonnées, laissant plus libre le parcours visuel et le cheminement de l’internaute. Ici, photographie, vidéo, illustration, Motifs, trames et animations sont étroitement mêlés, permettant une grande immersion ainsi qu'une forte sensation de mouvement grâce a des formes détaillées, légères et volatiles.

6. Des couleurs neutres inspirées des matières premières : • terre, pierres, rochers, sable, ocres, marrons, argile) • Accents orientaux, couleurs épicées. (Couleurs chaudes – • rouges et oranges • Avec toutefois une forte influence du tout vert : • le « Seeing green » ou écologiquement correct. Juin 2007 La couleur 1 / 6 • La couleur est très certainement le plus efficient des vecteurs pour un produit, une marque ou des idées. Associée à des formes adéquates il permet de construire harmonieusement l’atmosphère d’un site. • 2 courants principaux se détachent actuellement sur la toile : • L’utilisation du noir, du blanc et de couleurs neutres avec parfois une couleur supplémentaire généralement vive pour donner de la profondeur à l’ensemble et donner le focus à un ou plusieurs éléments de la page. • L’explosion de couleurs vives ou acidulées qui dynamisent le site, stimule l’utilisateur et fluidifie la navigation • Parallèlement à ces deux constructions chromatiques, on observe également une forte montée en puissance des verts sous toutes leurs formes. • I –Tendance générale sous-jacente • d’après le CMG ( Color marketing group ), association internationale de designer, la plus forte tendance en matière de couleur pour l’année 2007 sera guidée par l’intérêt croissant pour la nature et la prise de conscience des problèmes liés a l’environnement. • Des bleus et Des verts inspirés de la nature, souvent frais et légers. Mais de plus en plus exagérés, intensifiés comme sublimés. Sublimation par la lumière et omniprésence des verts sur l’intégralité des pages. La référence à la nature est ici accentuée par la macro image d’une feuille. http://www.sqliagency.com/blogs/ecreativegarden/index.php Blog consacré au design et au Rich Media

7. http://www.coca-cola.com/template1/index.jsp?locale=fr_FR La célèbre boisson Juin 2007 La couleur 2 / 6 II -Des teintes vives et acidulées. Quelles soient utilisées seules pour donner un aspect « clean », moderne et technologique ou mixées sous différents tons pour donner un aspect plus dynamique,branché, presque « sonore », les couleurs « Stabilo » ont de plus en plus de succès sur la toile. Utilisation d’un rose acidulé pour donner encore plus de dynamisme à Une forme animée en 3D. On notera également la présence de nombreux Effets : Blur, relief, ombres et lumières ainsi que le recours à une police de Caractère assez grosse, le choix étant fait de ne pas surcharger la page par le texte et de ménager de large zones vides. welldone.com : Site Web consacré au graphisme Et au Web design

8. http://www.samsung.com/fr/lifestyle : Navigation par style personnel ou Instants préférés. Juin 2007 La couleur 3 / 6 Même remarques pour les couleurs vives, mais plus classiques, utilisées ici de manière plus subtile, en jouant sur des formes et les différentes nuances d’une teinte. Vives ambiances chromatiques, la couleur S’étend ici a toute la page. Chaque instant, Chaque style correspondant à une couleur Jeu sur les différentes nuances, tons. Accentué par des formes, motifs.

9. Apple depuis toujours à privilégier les couleurs sobres avec fréquemment en focus, une image plein écran, de gros titres, très peu de texte afin de ménager des zones de repos visuel et de riches effets artistiques (reflets, ombres, effets 3D, etc. Juin 2007 La couleur 4 / 6 http://www.apple.com : NTIC III - Neutralité et sobriété Il s’agit là d’une autre grande tendance du Web 2.0. Simplicité, rigueur et clarté. Si comme nous l’avons vu précédemment cela passe bien évidemment par une navigation classique et facilement identifiable, des zones de repos visuel, etc.…, l’effet est accentué par l’utilisation de couleurs neutres telles que le blanc, le noir et toutes les nuances qui les composent. Cette neutralité permet de magnifier la photo et de mettre le focus sur les éléments importants d’une page. Cette neutralité permet à la fois de mettre en valeur l’image et par l’utilisation d’une couleur vive Un ou plusieurs éléments de la page logo, marque ou navigation. http://www.simplebits.com: Web design studio Massachusetts, USA http://store.nike.com Sport wear

10. Juin 2007 La couleur 5 / 6 III – Déclinaisons et nuances Il n’est pas rare de trouver sur le Web actuellement un subtil mélange des deux tendances précédemment évoquées : une ou deux couleurs franches et acidulées, sur fond noir ou blanc permettent de donner de la profondeur, de porter le focus sur les éléments importants du site sans pour autant surcharger l’œil. On obtient alors un design simple mais efficacepermettant notamment l'utilisation d'une taille de police très importante dans le titre ( autre tendance avérée ) sans atténuer la lecture de l'ensemble. Focus sur le produit mis en valeur par un fond noir, la lumière, la 3D et l’utilisation de la couleur jaune sous la forme de motifs et de lueurs. La désignation de l’article s’affiche en grands caractères, les infos sous forme d’icônes et de pictos, le descriptif se résume en un succinct paragraphe afin de ne pas distraire l’œil du visiteur de l’essentiel : le portable. L’assemblage de ces éléments participent à la construction d’un site sobre, moderne et chic. Effet « branché » assuré ! http://www.samsung.fr Mini site Flash pour un portable http://www.computerarts.co.uk Version On-line du magazine du même nom

11. http://www.faithless.coca-cola.com Sodas Juin 2007 La couleur 6 / 6 Immuablement le même principe : des contenus très aérés, une ou plusieurs couleurs sur fond neutre avec ici, de l’animation en flash et de l’interactivité car c’est l’internaute qui décore la bouteille à l’aide de sa souris. • Traitement graphique de la police • Fond noir et / ou Blanc • Réelle intégration de la photo • Effet « Halo » rose fluo + rappel dans • la navigation http://www.stonewall.co.za/ NTIC

12. http://www.apple.com : NTIC Juin 2007 Le Traitement graphique 1 / 7 • Si les éléments précédemment évoqués pouvaient connaître des approches différentes pour les mois à venir, le traitement graphique au contraire semble de manière beaucoup plus homogène se diriger vers un aspect beaucoup plus travaillé, brossé, ou le sens du détail et la dimension artistique prennent toute leur valeur. • Un mot d’odre, la mise en valeur de l’image et de la photo. • I – La photographie et l’image • Force est de constater une « émancipation » de l’image sur le web. Le niveau d’équipement (plus grande résolution des écrans, démocratisation de l’accès haut débit, flash player et quicktime présents sur la majorité des postes) contribue à cet essor, offre de nouvelles opportunités et permet des expérimentations nouvelles en matière de Web design. Cette tendance permet de renforcer l’univers de la marque, d’exprimer par l’émotion ce que le texte ne permet pas du premier coup d’œil. Fini donc les sites aux bandeaux visuels étroits ainsi que les pages aux contenus textuels denses : on laisse place à l’imaginaire, aux valeurs émotionnelles de la marque et on n’hésite pas à afficher le site avec une image full screen. • www.acura.com • www.hondakorea.co.kr • www.shopcomposition.com • Ce principe ne se limite pas uniquement aux seuls sites événementiels, aux sites de luxe, aux marques de vêtement • www.dior.com, www.adidas.com • il s’étend aussi aux sites corporate • www.agf.fr, www.psa.fr, www.publicisgroupe.com/site http://www.oxboworld.com/fr Marque de vêtements http://www.psa-peugeot-citroen.com/fr Constructeur auto • www.nike.com • www.hm.com/fr

13. http://www.ricardomarques.com Web designer Juin 2007 Le Traitement graphique 2 / 7 • II – Motifs, formes et trames. • Par ailleurs, on assiste fréquemment à une mise en scène de la photographie, avec intégration, montage photo, effets de découpage, réelle création artistique, l’idée étant de repousser la frontière entre l’illustration, le virtuel et la photographie. Chaque détail à son importance, la construction visuelle est complexe, les associations parfois hasardeuses (rayures et pois) et les textures, motifs, reflets, dégradés et effets 3D récurrents. • Les éléments illustratifs sont divers et variés, souvent discrets, parfois outranciers, mais toujours très détaillées et soignés, ils participent à l’ambiance générale des sites Web et englobent la photographie dans une composition originale. Points tendances : • montage Photo – illustration • utilisation de motifs, trames, ombres et reflets • dégradés • Couleurs vives • Taille importante des polices de titre

14. http://www.evian.de Eau minérale - Allemagne Juin 2007 Le Traitement graphique 3 / 7 III – Le Rich media Intégration de plus en plus fréquente d’animations en Flash et de vidéos dans la contenu de la page Web, non pas comme des éléments isolés, rajoutés, mais comme partie intégrante de la création visuelle. celles-ci interagissent souvent avec le décor ou permettent de diminuer l’effet statique d’une page et de rendre le Web interactif et vivant. Un fond relativement neutre, afin de mettre en valeur Les différents éléments visuels intégrés, les animations Flash et les vidéos. Éléments photographiques associés À des formes et des motifs pour créer Une ambiance visuelle particulière.

15. Juin 2007 Le Traitement graphique 4 / 7 • Navigation virtuelle en 3D par pièce. • Au-delà de la dimension esthétique, il s’agit aussi d’une expérience • Intuitive et interactive, que l’on voit apparaître avec l’image animée en full screen ou la navigation en 3D  : • www.isseymiyake.co.jp • www.vodafonejourney.com http://www.ikea.com/ms/en_GB/sylo_2_eu_na/ Meubles en kit • De nouvelles perspectives avec la vidéo pourraient permettre de s’immerger dans un lieu et, pour le coup, créer une expérience du Virtuel interactive. • www.cruisecentury.com • www.mgmgrand.com/ • ww.vivezenbleu.com • www.ikea.com)

16. Juin 2007 Le Traitement graphique 5 / 7 http://www.soleilnoir.fr Web agency • IV – Les textures, les effets et l’iconographie • L’utilisation des icônes est depuis toujours très présente sur le Web, des textures également, mais celles-ci se font de plus en plus détaillées et soignées. Ce constat semble se confirmer notamment sous l’influence de vista, du succès des designs de type « Apple », et de l’accumulation d’avatars et smileys en tous genres (MSN, jeux et sites en ligne, etc.…), toujours très sobres et travaillés dans les détails. • Travail sur les détails, les reflets, les effets « gloss », les dégradés et la lumière et les effets 3D. (logos ou mascottes de site, boutons, onglets, liens, puces, etc. …) • + UTILISATION DES MACARONS également aux couleurs vives • Effets de biseautage • Effets de « gloss » • Reflets • Reliefs • Ombres • Arrondis • effets 3D Effets biseautage Effets de « gloss » Reflets Reliefs Ombres Arrondis effets 3D http://www.marieclaire.com/ Mensuel féminin

17. Juin 2007 Le Traitement graphique 6 / 7 http://www.enhancedlabs.com/ Studio de création graphique • + multitude d’icônes et mode des widgets inspirés • notamment du pixel art et de l’univers graphique d’Apple. • Effets 3D, Gloss, réflexion, etc.…. : frais et rafraîchissant Icônes haute définition avec de grandes nuances de couleurs et un niveau de détail élevé permettant de recréer des Univers complexes dans un petit format. http://widgets.yahoo.com/ Applications Widgets pour PC/Mac

18. Juin 2007 Le Traitement graphique 7 / 7 • V – La typographie • De plus en plus la police se veut graphique, participant pleinement à l’atmosphère visuelle et à la construction de l’image. • Dans une utilisation classique, on notera une Généralisation de l’utilisation d’une police de caractère assez grosse pour les titres. • Plus spécifiquement et d’après Cameron Moll, Directeur du design interactif chez LDS Church (USA) Lucida Grande va continuer à se faire une place dans les pages web et on devrait voir de plus en plus de titres en Helvetica / Arial. • Également prévisible, la montée des polices à empattement et le jeu de polices issu de Windows Vista. Éléments photographiques associés À des formes et des motifs pour créer Une ambiance visuelle particulière. http://www.samsung.com/fr/microsites/jeuf300/ Mensuel féminin

19. Juin 2007 Conclusion • I – En bref • Couleurs vives et acidulées • Couleurs neutres • Couleurs de la nature + prédominance du vert • Large bandeau identitaire • 3 colonnes max pour la page • Centrage de la page sur l’écran • Images et photos en full screen • Travail sur les formes, motifs et trames • Effets riches avec dégradés, 3D, reflets, reliefs et ombrages • Forte Iconisation • Macarons • Police de titre plus grande, logo Bold • Police a empattement et jeu de police Vista • Ménagement de larges zones de repos visuel • Il s’agit juste d’un état des lieux à un moment précis. • Bien évidemment il ne s’agit pas de faire du Gaultier, du Dior ou • du Channel, mais simplement d’utiliser des techniques qui vont • devenir de plus en plus présentes sur le net. • Toutes les tendances ne sont pas forcément souhaitables • Ou applicables telles quelles aux sites de Magicmaman, mais elles • peuvent constituer un point de départ à la réflexion sur la création de • nouveaux graphismes.