S'mash Laure Barthaud

1,059 views
1,006 views

Published on

Published in: Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,059
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

S'mash Laure Barthaud

  1. 1. Site consacré aux concepteurs du web Laure Barthaud Campus Multimédia 3 1
  2. 2. Sommaire I. Présentation du projet Qu’est que qu’un mash’up ?........................................4-5 Identification de l’émetteur et son logo..........................6 La cible : qui parle à qui comment et pourquoi..................7 Impression générale que l’on veut donner (cohérence image/message/secteur)...............................8 Fonctionnalités.....................................................9 II.La concurrence La nature des concurrents.......................................... Les atmosphères, ce qui se fait.............................10-21 III.La charte graphique & Éditoriale Le zoning (maquettes fonctionnelles).....................23-27 Les menus navigation ...................................... 27-28 Choix Éditorial Accéssibilité Référencement ...............29 La maquette ambiance.....................................30-31 2
  3. 3. I.Présentation 3
  4. 4. Nuage de Tag Un mash’up ? Nuage de mots définissants un mash’up Plug-in arborescence Mash’up Web Branchage Nouvelle norme Liens Ouvert Réseau Toile transmsmettre Relation Contact viral Equipe Mash’up Couche Buzz Log Social Contenu Humain Article Forum Offre Flux Blog Simplicité Média Texte Communauté Infos Vidéo Liberté Rss Continue Tendance 4
  5. 5. Un mash’up ? C’est quoi un mash’up ? nouvelle norme) auparavant et dont le développement leur couterait beaucoup de temps. Dans le cas de site Web, le principe d’un mashup est Bref plus de clients en dépensant le mini- Un mash’up n’est pas un «machin» ;) donc d’agréger du contenu provenant d’autres mum d’argent. s’est assez proche du verbe «mâcher» sites, afin de créer un site nouveau. De plus les mashups présentent pour la Mash vient de l’Anglais et signifie : communauté web un potentiel d’innovation «purée, écrasé, mic-mac, méli mélo». C’est le cas de Google, de Yahoo!, de Ama- important grâce à la fusion de multiples ser- le mash’up mache toutes les informations qui zon, de eBay, ou de FedEx (qui permet à un vices Internet. sortent sur tous sites web et reprend toutes commerçant de présenter sur son propre web ces informations ciblées pour le mettre sur l’état d’avancement d’une livraison qu’il a En effet ils offrent la possibilité de livrer des son site. Le site regroupe toutes ces informa- sous-traitée au logisticien), leur intérêt étant applications Web rapidement, à un faible tions en un seul site. Cela évite d’aller cher- d’inciter les développeurs à répandre et à coût et avec des composants réutilisables. cher à droite et à gaucheson information et diffuser leur contenu. En effet, malgrès les nombreux points posi- donc perdre du temps. tifs les mashu’up présentent des problèmes Les Avantages et inconvénients du mash’up de sécurité en ce qui concerne cette techno- Nous parlons donc d’application composite. logie.» Je fais du mash’up, re reprend la définition Les mash’ups ont leurs points négatifs et ne que donne wikipédia : Une application qui serait mal codée, dont le sont pas forcément aimé de tous. code serait éronné pourrait nuire au mash’up Les mashups présentent un potentiel d’innovation «Une application composite combine du qui reprendrait celle -ci. De même que pour important grâce à la fusion de multiples services contenu ou du service provenant de plusieurs les virus qui pourraient prendre contrôle Internet. Ils offrent en outre la possibilité de applications plus ou moins hétérogènes. des machines des internautes à travers le livrer des applications Web rapidement, à un On parle de mashup dans le cadre d’une super- mash’up. faible coût et avec des composants réutilisables. position de deux images provenant de sources différentes, superposition de données visuel- Les mash’up les plus connus sont : Les avantages sont assez clairs en ce qui les et sonores différentes par exemple dans le concerne les fournisseurs d’API : but de créer une expérience nouvelle. Leurs API permettent au plus grand nombre Facebook, Amazone, Twitter, Google, Gmail, (Je fais un aparté, la tendance du web est de diffuser leurs contenus en l’adaptant à des Yahoo, MSN Hotmail, Youtube, Myspace, au mash’up, le mash’up s’impose comme une besoins qu’ils n’auraient jamais pu identifier Linked-in, Viadeo, Flickr.... 5
  6. 6. Identification de l’emetteur Identification de l’émetteur Le Logo Pistes graphiques du logo : S’mach est un nouveau e-magazine dédié Le nom de ce magazine n’est pas né par Smash aux concépteurs web. hazard , «S’mash « est tiré de mash’up (il S’mash Son objectif est clairement d’offrir en garde la même structure, le même radical S’mash avant première les orientations de design «mash» ). S’mash et de développement. Mash vient de l’Anglais et signifie : S’mash Smash S’mash se doit être proche de sa communauté. «purée, écrasé, mic-mac, méli mélo» De plus, les internautes sont de moins en moins La nouvelle tendance de réseau sociaux S’mash fidèle à un site. Ils sont d’autant plus exigeants permet à l’internaute de recevoir toutes S’Mash sur S’mash étant donné que le web est leur mé- nouvelles informations en quelques se- S’mash tiers. condes. S’mash Il doit être simple d’utilisation, attrayant De plus, et connait tout sur tout le monde graphiquement et le trie de ses informations vu qu’il est lié à la communauté du site. doivent être judicieux. Il faut donc un logo imposant, amusant, attirant. Il peut contenir des liaisons au niveau des lettres ce qui permettrait de renforcer sa signification de connectivité, sa surveillance sur les autres sites. Logo retenu version blanc et noir 6
  7. 7. Identification de l’emetteur Qui parle à qui ? pourquoi et comment ? S’mash offre en avant première les Donc s’ils ont a bien compris le fonctionnement orientations de design et de développement. d’un mash’up toute la communauté ainsi que l’équipe font fonctionner le site. Les dernières vibes du web seront écrites par l’équipe du site. Soit le ton donnait est Soit on pourrait dire que tout le monde parle professionnel mais en même temps humain, à tout le monde. branché, tendance peu être Geek :) Mais l’information et les applications étant ciblés concernent, en fait, le public de EH oui ce sont les passionnés aimant leur S’mash : métiers qui représentent la communauté de S’mash - Les personnes travaillant dans la chaine graphique ( concepteur rédacteur, graphiste, développeurs etc ...). 7
  8. 8. Identification de l’emetteur Quelle impression générale veut-on donner ? (Cohérence du message, avec l’image de la société, de son secteur ?) La tendance est à la communication, voyeurisme, Ce public de professionnel est critique puisque au buzz, à la viralité, aux dernières nouveautés travaillant dans ce secteur du web veulent une qualité à peine sorties déja connues une secondes plus technologique ainsi qu’une bonne ergonomie. tard par des millions de personnes. Il doit s’attisfaire leur exigeance et soif d’information et de contact. S’mash se veut tendance, professionnel, technologique, Ce webzine reposera sur une plateforme de média innovant, accueillant, naturel et essentiellement social, intégrant en continu des flux Rss et des humain avec une simplicité d’utilisation et une contributions des membres de la communauté. légereté au niveau de l’application. 8
  9. 9. Fonctionnalités Arborescence Identification & Inscription Réseau social Accueil Les couches Aggrégation mécanique & Humaine Articles rédigés par l’équipe Dév de Dév Dernières vibes du web Petites annonces Professionnelles Designement votre Les Rubriques MashActus Actus Dev Les designs Déposer Les langages Les sites 2.0 Trouver Newsmash Les Tutoriaux Tendances du web smashbuzz 9
  10. 10. II.Concurrence 10
  11. 11. La concurrence Les blogs et mash’up façon e-magazine Auwwwergne.com Toujours une construction en 3 colonnes. Le contenu éditorial du site est vrai- ment attrayant Aaaliens. Fubiz (Actualités Arts) Démocrates Mise en page structurée You tube (vidéos) Auwwergne Aaaliens.com s’affiche vraiment comme une Les couleurs reprennent bien le ton donné nouveauté dans le domaine du mash’up. par le site : L’Auwwwergne (auvergne) Sa mise en page peut déstabiliser, néanmois Nuances de verts rappellant la couleur elle reste organisée. des paturages. 11
  12. 12. La concurrence Toujours une construction en 3 colonnes. La navigation est assez simple. Le graphisme y est très interessant et fait main. Le ton du site bien explicite : Le blog de Tom. Le côté pâte humaine ressort. Sobriété. Les blocs s’enchainent les uns à la suite des autres. 12
  13. 13. La concurrence Les Moteurs de recherches+boites mails G-mail Yahoo 13
  14. 14. La concurrence Les Moteurs de recherches + boites mails + Réseau social Msn & Hotmail Interface agréable, personnalisable, illustrée, Navigation horizontale. Contenu en 3 colonnes. 14
  15. 15. La concurrence Facebook Toujours une construction en 3 colonnes. La navigation un peu fouillie. Nous avons du mal à nous y retrouver. Le site se décompose en 2 parties, un accés générales aux nouveautés, applications, les messages de tous les photos et vidéos postées par la communauté. Et l’autre partie est personnelles, c’est un profil interractif où les gens peuvent y laisser un messa- ge, regarder nos photos vidéos et participer à nos application Facebook manque cruellement de personnalité et d’identité. Il a un aspect froid et un peu re- buttant. Il n’y a pas de cohérence entre le message et l’image de la société. 15
  16. 16. Concurrence Les services E-bay Google map 16
  17. 17. La concurrence Peuplade Les services Amazon You tube la banque vidéos de toutes les plateformes communautaires avec Dailymotion You tube 17
  18. 18. La concurrence Linked-in plateforme communautaire pour les professionnels Toujours une construction en 3 colonnes. La mise en avant du profil est interessante. La navigation est assez simple. Myspace (profession- nel dans la musique) Interface modifia- bles grâce aux CSS 18
  19. 19. La concurrence Toujours une construction en 3 colonnes. Netlog réseau social, permettant comme facebook d’accéder à des applications, rester en rela- tions avec ses amis,etc.. Le graphisme, mise en page sont très agréables. Le côté interface personnalisa- ble l’est encore plus :) Toujours une construction en 3 colonnes. Aaaliens.com s’affiche vraiment comme une nouveauté dans le domaine du mash’up. Sa mise en page peut déstabiliser, néanmois elle reste organisée. 19
  20. 20. La concurrence Twitter Réseau social Regroupant l’information de divers sites grâce aux flux Rss Il propose une interface personnalisable comme beaucoup de mash’up. J’ai représenté par des flèches les échanges de contenu côté communautaire Twitter est construit avec 3 blocs : Un header, un bloc centre regroupant le contenu du site avec une colonne à droite présentant le menu et applications. Puis un footer. 20
  21. 21. III.Charte Graphique 21
  22. 22. Zoning.Accuei l Accueil + couches identification Logo Header Couches Menu Réseau social Dernières vibes Les reseaux du web sociaux reliés Dév de dév Designement votre Aggrégation Petites Les nouveaux annonces mécanique professionnelles membres & humain Les articles rédigés par Les nouvelles l’équipe qui font applications référence aux rubriques du site Footer Les derniers messages et nouveautés des internautes 22
  23. 23. Zoning.Dév de Dév Dév de Dév identification Logo Header Couches Menu Commentaires des internautes Dernières vibes sur dév de dev du web Dév de dév Les forums News de dév Les langages dév Les Tutaux Modules Languages de dév Designement Les nouvelles votre Tutoriaux / templates applications Petites annonces pour les dév professionnelles Modules de dév Footer Les derniers messages et Articles concernant les nouveautés des internautes nouveautés pour les Dév développeurs ou interressés par le développement 23
  24. 24. Zoning.Peti tes annonces Professionnelles Les petites annonces professionnelles identification Logo Header Couches Menu DEPOSER REPONDRE Je recherche une annonce Dernières vibes du web Je poste une annonce Dév de dév Designement Archives des ARCHIVE votre Année mois annonces par mois Petites Année mois et par année annonces professionnelles Réseau sociaux MES LIENS Interview d’un professionnel qui a réussi à trouver grâce à S’mash etc Picto flux RSS pour recevoir un mail dès qu’il y a des annonces interressantes sur la toile Footer Les derniers messages et nouveautés des internautes 24
  25. 25. Zoning.Derni ères vibes du web Dernières vibes du web identification Logo Header Couches Menu TIRE DEPOSER REPONDRE Les derniers messages et Pseudo profes Dernières nouveautés des internautes vibes du web sur les nouvelles. Pseudo Age TITRE News A la une ARCHIVE Archives Année mois Archives des articles du web Poster une new par date et année Dév de dév TITRE Année mois Designement votre TITRE Petites Réseau sociaux annonces MES LIENS professionnelles La UNE d’une Picto flux RSS pour recevoir un information du web importante mail dès qu’il y a des nouveau- tés Footer Colonne articles 25
  26. 26. Zoning.Dési gnement votre Designement votre identification Logo Header Couches Menu Les sites web DEPOSER REPONDRE Les derniers messages et Pseudo profes nouveautés des internautes Dernières vibes du web sur la partie graphique et Pseudo Age Tutoriaux Dév de dév design ARCHIVE Designement Nouvelles technologies Année mois Archives thèmes et ou nouveautés, votre astuces, tutoriaux et site web, Les sites Motion design Animation New techno Année mois animation, vidéos... Tutoriaux Vidéos Vidéos Réseau sociaux Petites annonces MES LIENS Interview d’un professionnel professionnelles dans le design ou graphisme / ou actu Picto flux RSS pour recevoir un mail dès qu’il y a des annonces interressantes sur la toile Footer Les grandes rubriques classées par : - Sites web classés par thème/nature, par technologie, couleur ou encore domaine d’activité - Nouvelles technologies - tutoriaux - Vidéos 26
  27. 27. La navigation.menu 2 Styles de menu : horizontal et vertical Menu vertical Dernières vibes Dernières vibes Dernières vibes du web du web du web News Dév de dév Dév de dév A la une Archives Languages de dév Designement votre Poster une new Tuto de dév Modules de dév Petites Dév de dév annonces Designement votre Languages de dév professionnelles Tuto de dév Petites Modules de dév annonces Designement votre Menu de base professionnelles Les sites Fonctionnement de la navigation New techno Le menu dans un premier temps est Tutoriaux replié. Menu dont une rubrique est dépliée Vidéos Lorsque l’on clique sur une rubrique Animation Motion qui nous interresse on aà la rubrique en question qui se déplie laissant apparai- Petites tre les sous rubriques annonces Le troisième menu montre toutes les professionnelles rubrique déplié permettant de voir la place qu’il prend Rechercher Déposer Extension du menu pour une éventuelle évolution : Le menu s’agrandierait en hauteur. On pourrait y ajouter des pictos Menu entièrement déplié 27
  28. 28. La navigation.menu Menu horizontal Dév de dév Designement Dernières Petites annonces votre vibes du web professionnelles Rechercher Languages de dév Les sites Déposer News New techno Tuto de dév Repondre A la une Tutoriaux Modules de dév Vidéos Archives Poster une new Animation Motion Dév de dév Designement Dernières Petites annonces votre vibes du web professionnelles Extension du menu pour une éventuelle évolution. Rechercher News Languages de dév Les sites Déposer New techno A la une Tuto de dév Repondre Tutoriaux Archives Modules de dév Le menu s’agrandierait en hau- Vidéos Poster une new teur. Animation Motion Le sous rubriques peuvent être apparentes. Autres Autres Autres Autres On pourrait y ajouter des pictos vibes du web Rechercher News Languages de dév Les sites Déposer New techno A la une Tuto de dév Repondre Tutoriaux Archives Modules de dév Vidéos Poster une new Animation Motion 28
  29. 29. titre Définition des circuits de navigation = création des menus (choix techno et positionnement ) Les applications composites de présentation Nous avons 3 couches : constituent le type le plus connu, dont le meilleur exemple est donné par les nombreuses applications - Articles rédigés par l’équipe Google Maps. - Aggrégation mécanique & Humain Elles combinent des éléments provenant de sour- - Réseau social ces multiples en masquant ce fait derrière une interface graphique unifiée simple. Les rubrique sont à inclure dans la partie des articles Choix technologiques : Html, Ajax, Php, l’objet rédigés par l’équipe. XMLHttpRequest, RSS... Et les principales rubriques : -Dernières vibes du web -Dév de Dév -Designement votre -Petites annonces professionnelles. 29
  30. 30. Choix technologiques : Html, Ajax, Php, l’objet Un partie vidéo pourra apparaitre selon les Définition des circuits de navigation = créa- XMLHttpRequest, RSS... articles, l’information en rapport avec les tion des menus (choix techno et positionne- rubriques du site et des couches. ment ) Charte éditoriale et graphique & pertinance des choix construction / topographie de la page d’ac- Choix de la palette de couleurs = charte gra- cueil + page types : Nous avons 3 couches : phique - Articles rédigés par l’équipe On pourrait définir deux axes : - Aggrégation mécanique & Humain Ratio texte / image - Réseau social Le premier axe : 65% texte et 35% d’image/iconographie Et les principales rubriques : Un axe technologique, on affiche notre gout, site épuré peu être un peu minimaliste mais -Dernières vibes du web scroll or not scroll un peu sophistiqué. -Dév de Dév Noir, gris, blanc, et pourquoi pas des couleurs -Designement votre Il y aura inévitablement scroll comme dans tous fashy en titre ? -Petites annonces professionnelles. les mash’up mais il ne faut pas que la page fasse 1km de hauteur et de largeur Le deuxième axe serait le contrepied du Voir Arborescence premier Choix iconographiques Plûtot illustratif ou naturel, proche de la Les applications composites de présentation nature et de l’humain. constituent le type le plus connu, dont le Frais, tendances, colorés, matières, illustrer, Branchage reliants toutes l’information et meilleur exemple est donné par les nombreu- pour attirer l’oeil. applications. ses applications Google Maps. Elles combinent des éléments provenant de sources multiples en masquant ce fait derrière une interface Insertion vidéo ? animation graphique unifiée simple. 30
  31. 31. La maquette.Atmosphère Mr DUPONT Marc connecté Mash’up de conception web Articles écrits par l’équipe Réseau social Aggrégation S’mash DERNIERS ARTICLES DE BLOG Pecha kucha Inscription - Se connecter est Our body interdit un site dédié aux 25 avr. 2009 - 10:33Gegout concepteur Identifiant : Mot de passe : du web............. Vernissage «Entre-Deux» - Exposition de Christine Jean validez 24 avr. 2009 - 14:56Area Dernières vibes du web Galerie Vos contacts FESTIV’ART 2009, c’est parti ! Dév de dév Les soirées PechaKucha sont conçues comme 24 avr. 2009 - 14:26Bureau un format de présentation qui permet chaque Des Arts HEC mois à 10 designers de présenter leur travail frederique Bertin Designement votre Voir aussi sur : en public. PechaKucha, qui signifie en japonais « le bruit de la conversation », est fondée Elektra 10 FESTIVAL Petites annonces sur un format original : chaque designer INTERNATIONNAL ARTS professionnelles présente 20 images, chacune projetée pendant NUMERIQUES 1er au 10 Ad del duis et 20 secondes, soit 6 minutes 40 secondes de mai 2009 présentation. Chaque présentation permet 20 avr. 2009 - 10:38Elektra d’explorer un ou plusieurs projets à travers son Montreal Lorem ipsum processus de création. DERNIERS MESSAGES http://www.pechakuchaparis.com/ Newsletter Michel Palette numérique Inscrivez-vous à la nesletter pour 25 avr. 2009 - 19:33Gegout tout savoir sur les nouveautés ! Vernissage Rambuteau Galerie Phenix Applications Sandrine 25 avr. 2009 - 21:00Gegout Remise des prix HEC Musée Géricault Elisa 25 avr. 2009 - Salon des Ats Numériques Aurillac Vos Flux RSS sur : Palette pour artiste numérique. Cela se voit au premier coup d’œil, cet outil s’adresse aux artistes. C’est donc une palette de couleurs Contactez-nous À propos Plan du site Haut de page Le plus simple serait que tout se fasse le plus simplement possible (Rick Hunter) 31

×