Exercice IESA 2009

1. S'mash // Cahier de tendances S'mash ? S'mash est un nouveau e-magazine, offrant aux acteurs du web les dernières orientations en matières de design et de développement. Pour se faire, il s'appuiera sur la nouvelle norme en termes de diffusion d'information : le mash-up

2. Introduction..................................................................................... 1 Partie 1 : Conception Pourquoi & Comment ?..................................................................... 3 Quelle impression donner ?.............................................................. 6 Circuit de navigation........................................................................ 7 Partie 2 : Charte éditoriale et graphique Zoning ........................................................................................... 8 Construction .................................................................................. 12 La concurrence ...............................................................................14

3. Qui parle à qui ? S'mash est un e-magazine créé par des professionnels et passionnés du web pour des professionnels et passionnés du web. Cette catégorie inclus donc 2 profils différents : les graphistes, artistiques et les développeurs, techniques. Pourquoi ? Le web se résume à une synergie de ressources à la fois techniques et créatives. La capacité de ces 2 profils à travailler ensemble peut donc générer des découvertes pouvant devenir une norme pour l'ensemble de la profession. S'mash veut donc à la fois révéler les dernières tendances mais aussi en être l'instigateur en réunissant les talents de la conception web en un seul « lieu ». Il y aura également une phase « plus classique » de « communication interne » entre membres d'un profil (diffusion de tutoriels pour les graphistes, partage de fichiers sources pour les développeurs...) Comment ? La plateforme reposera sur une diffusion de l'information « mixte » en se basant sur le mashup. Il y aura donc 3 « types de sources » : les articles de l'équipe, les agrégations mécaniques et humaines et le réseau social. S'mash // Pourquoi & Comment ?

4. Mais, le mashup, c'est quoi ? Dans le cas de site Web, le principe d'un mashup est d'agréger du contenu provenant d'autres sites, afin de créer un site nouveau. Pour ce faire, on utilise le plus souvent l'objet XMLHttpRequest, RSS, AJAX du côté client, et les API (ou les Services Web) des sites dont on mixe le contenu. De plus en plus d'éditeurs de contenu proposent gratuitement des API, afin d'encourager la communauté des développeurs à créer des mashup utilisant leur contenu. Les applications composites se basent sur la programmation événementielle. C'est le cas de Google, de Yahoo!, de Amazon, de eBay, ou de FedEx (qui permet à un commerçant de présenter sur son propre web l'état d'avancement d'une livraison qu'il a sous-traitée au logisticien), leur intérêt étant d'inciter les développeurs à répandre et à diffuser leur contenu. S'mash // Pourquoi & Comment ?

5. Quelle mashup pour S'mash? Actuellement, les applications composites apparaissent sous quatre formes générales qui concernent la présentation, les données, le grand public et enfin l'entreprise. Une application relative aux données mélange des données provenant de différentes sources, par exemple en combinant plusieurs flux RSS ou Services Web pour créer un résultat final présenté ou non sous forme graphique. Dans le cas où il n'y a pas d'interface graphique le résultat peut être par exemple réinjecté dans un système tiers toujours via Services Web. Le déclenchement du Mashup de donné peut se faire par un appel d'un Service Web exposé par l'Application composite elle-même. C'est donc le mashup concernant S'mash. S'mash // Pourquoi & Comment ?

6. Quelle ambiance graphique ? La charte graphique doit être tendance, innovante. Il faudra éviter l'aspect « bling-bling » et tape à l'oeil pour se tourner vers une charte simple et claire mettant en avant le contenu échangé entre pros, qui est la base conceptuelle du site. Ce même contenu, qui est parfois constitué, des agrégations de contenu extérieur, doit être intégré sans dénaturer l'aspect général du site. Cet ensemble doit pouvoir séduire les différents publics qui seront amenés à utiliser le site (les graphistes adeptes de l'image et les développeurs prônant la simplicité au service de l'efficacité). Tout ceci permettant de souligner que l'aspect pluridisciplinaire du web est traité dans le site et qu'il s'adresse donc à tout les professionnels d'Internet. Adopter une charte « tout en longueur », se développant sur l'ensemble de la page, quelque soit la résolution de l'écran utilisateur, semble le choix le plus judicieux car c'est la tendance du moment. S'mash // Quelle impression donner ?

7. Home/Dernière vibes du web S'mash // Circuits de navigation Dèv de dèv Designement votre Petites annonces Designement votre Langage Tutos et partage Gallerie Tutos et partage ... ... ... ... ... ... ... ... ... ... ... ... Graphiste cherche Dèv Dèv cherche Graphiste Graphiste cherche Dèv Chercher une offre Deposer une annonce

8. HEADER (logo + menu + identification+ moteur de recherche) S'mash // Zoning – Home/Dernière vibes You're the web (Mélange de mise en avant de contenu dèv et graphiste) News & Udpates du web (Mélange de news de l'équipe et de RSS) On the screen (Mise en avant d'un site web innovant) Dernières offres Twitter Delicious Bookmark Web face (photos des internautes) Nuage de Tags

9. HEADER (logo + menu + identification+ moteur de recherche) Sous navigation Revue de dèv (Mise en avant de contenu proposé par les internautes « dèv », classé par langages ) News & Udpates de dèv (Mélange de news de l'équipe et de RSS) Mise en avant d'un tuto de dèv Graphiste recherche dèv Derniers dèvs inscrits (photos des internautes) S'mash // Zoning - Dèv Blogmark de dèv (possibilité de proposer un blog)

10. HEADER (logo + menu + identification+ moteur de recherche) Sous navigation Revue de graphiste (Mise en avant de contenu proposé par les internautes « dèvs », classé par langages ) News & Udpates de graphiste (Mélange de news de l'équipe et de RSS) Mise en avant d'un tuto de graphiste Dèv recherche graphiste Derniers graphistes inscrits (photos des internautes) Blogmark de graphiste (possibilité de proposer un blog) S'mash // Zoning - Graphiste

11. HEADER (logo + menu + identification+ moteur de recherche) Offres de dèv Dèv recherche graphiste Offres via d'autres sites (flux RSS/ widget/mashup) Graphiste recherche dèv S'mash // Zoning - Offres Offres pour graphistes

12. Positionnement du menu Pour rester en accord avec une charte graphique se voulant actuelle, la navigation sera placé de manière horizontale, en haut, contenu dans le header. Ratio texte/image Dans la rubrique « dèv », l'image ne doit pas envahir la page. Elle doit illustrer l'information et non pas la polluer (ratio texte/image : 70/30). Elle sera bien sur plus présente dans la partie « graphiste » qui se veut la rubrique des tendances du « web de l'image »(ratio texte/image :50/50). Scroll or not scroll Le scroll sera inévitable face à une telle profusion de contenue. Cependant, cela ne généra en aucun cas la lecture de l'information qui est très facilement distinguable via un système de rubriquage. Choix iconographique En cohérence avec la charte graphique qui se veut simple mais tendance, l'iconographie se voudra également simple, très symbolique et très légère pour ne pas prendre le dessus sur l'information. S'mash // Construction

13. Insertion vidéo Il seras indispensable, afin de coller à l'image « tendance » recherchée, d'inclure de la vidéo qui s'impose de plus en plus sur le web. Notamment en terme de tutoriels, mais aussi afin de présenter des productions tels que le motion design ou intégrer des contenus de web-tv. Choix de la palette de couleur Pour coller aux dernières tendances, le site adoptera une palette de couleur « habituelle » du web 2.0. Le fond sera donc basé sur un gris foncé, les contenus dèv et ingénieurs seront distingués par des codes couleurs respectifs : bleu et rouge, couleurs à la fois opposées mais qui se marrie parfaitement dans un design de projet web... tout comme les compétences d'un graphiste et d'un développeur. L'information sera contenu dans des cadres blanc avec une écriture gris foncé, clairement lisible, les liens reprenant les codes couleurs de la rubrique concernée. S'mash // Construction

14. Sites existants A ce jour, S'mash fait office de précurseur en réunissant les divers tendance du web, à la fois techniques et créative, en un seul web-zine. Il existe cependant de très bon exemples à suivre dans des domaines bien particuliers. Fubiz et Trendsnow , par exemple, sont les références en matières de tendance graphique et de design. Ils adoptent une charte graphique efficace, reflétant parfaitement le sujet traité. Ils permettent également le téléchargement de podcast et l'envoi d'articles qui sont publiés après modération. Cependant le mashup n'est pas très utilisé et la structure reste basé sur un système de blog assez classique. De manière communautaire, le site Kob-one est très intéressant pour sa manière efficace de mettre en relation les membres de la communautés (notamment pour les offres de missions) et de mettre en avant les créations de chacun. Il omet cependant d'informer les internautes quant à l'actualité du design. En termes de site sur le développement, un exemple comme flash-dev est très intéressant sur le point de vue d'échange de contenus et de partage de fichier source avec un système de notation par les utilisateurs. S'mash // La concurrence