S'mash Laure Barthaud
Transcript of S'mash Laure Barthaud
1
Site consacré aux concepteurs du web
Laure Barthaud Campus Multimédia 3
Sommaire
2
I. Présentation du projetQu’est que qu’un mash’up ?........................................4-5Identification de l’émetteur et son logo..........................6La cible : qui parle à qui comment et pourquoi..................7Impression générale que l’on veut donner (cohérence image/message/secteur)...............................8Fonctionnalités.....................................................9
II.La concurrenceLa nature des concurrents..........................................Les atmosphères, ce qui se fait.............................10-21
III.La charte graphique & ÉditorialeLe zoning (maquettes fonctionnelles).....................23-27Les menus navigation ...................................... 27-28Choix Éditorial Accéssibilité Référencement ...............29La maquette ambiance.....................................30-31
I.Présentation
3
Un mash’up ?
4
Mash’up
Nouvelle norme
Social
Média
Réseau
Buzzviral
transmsmettre
InfosContinueRss
Flux
CommunautéLiberté
Humain
ContactToile
Webarborescence
Liens
Couche
Branchage
Plug-in
Log
Relation
Tendance
SimplicitéArticle
Equipe
Contenu
VidéoTexte
Blog
Ouvert
Forum Offre
Mash’up
Nuage de Tag
Nuage de mots définissants un mash’up
Un mash’up ?
5
C’est quoi un mash’up ? Un mash’up n’est pas un «machin» ;) s’est assez proche du verbe «mâcher»Mash vient de l’Anglais et signifie : «purée, écrasé, mic-mac, méli mélo».le mash’up mache toutes les informations qui sortent sur tous sites web et reprend toutes ces informations ciblées pour le mettre sur son site. Le site regroupe toutes ces informa-tions en un seul site. Cela évite d’aller cher-cher à droite et à gaucheson information et donc perdre du temps.
Nous parlons donc d’application composite. Je fais du mash’up, re reprend la définition que donne wikipédia :
«Une application composite combine du contenu ou du service provenant de plusieurs applications plus ou moins hétérogènes.On parle de mashup dans le cadre d’une super-position de deux images provenant de sources différentes, superposition de données visuel-les et sonores différentes par exemple dans le but de créer une expérience nouvelle. (Je fais un aparté, la tendance du web est au mash’up, le mash’up s’impose comme une
nouvelle norme)
Dans le cas de site Web, le principe d’un mashup est donc d’agréger du contenu provenant d’autres sites, afin de créer un site nouveau.
C’est le cas de Google, de Yahoo!, de Ama-zon, 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.
Les Avantages et inconvénients du mash’up
Les mash’ups ont leurs points négatifs et ne sont pas forcément aimé de tous.Les mashups présentent un potentiel d’innovation important grâce à la fusion de multiples services Internet. Ils offrent en outre la possibilité de livrer des applications Web rapidement, à un faible coût et avec des composants réutilisables.
Les avantages sont assez clairs en ce qui concerne les fournisseurs d’API :Leurs API permettent au plus grand nombre de diffuser leurs contenus en l’adaptant à des besoins qu’ils n’auraient jamais pu identifier
auparavant et dont le développement leur couterait beaucoup de temps.Bref plus de clients en dépensant le mini-mum d’argent.De plus les mashups présentent pour la communauté web un potentiel d’innovation important grâce à la fusion de multiples ser-vices Internet.
En effet ils offrent la possibilité de livrer des applications Web rapidement, à un faible coût et avec des composants réutilisables.En effet, malgrès les nombreux points posi-tifs les mashu’up présentent des problèmes de sécurité en ce qui concerne cette techno-logie.»
Une application qui serait mal codée, dont le code serait éronné pourrait nuire au mash’up qui reprendrait celle -ci. De même que pour les virus qui pourraient prendre contrôle des machines des internautes à travers le mash’up.
Les mash’up les plus connus sont :
Facebook, Amazone, Twitter, Google, Gmail, Yahoo, MSN Hotmail, Youtube, Myspace, Linked-in, Viadeo, Flickr....
Identification de l’emetteur
6
Identification de l’émetteur
S’mach est un nouveau e-magazine dédié aux concépteurs web.Son objectif est clairement d’offrir en avant première les orientations de design et de développement.
S’mash se doit être proche de sa communauté.De plus, les internautes sont de moins en moins fidèle à un site. Ils sont d’autant plus exigeants sur S’mash étant donné que le web est leur mé-tiers.
Il doit être simple d’utilisation, attrayant graphiquement et le trie de ses informations doivent être judicieux.
Le Logo
Le nom de ce magazine n’est pas né par hazard , «S’mash « est tiré de mash’up (il garde la même structure, le même radical «mash» ).
Mash vient de l’Anglais et signifie : «purée, écrasé, mic-mac, méli mélo» La nouvelle tendance de réseau sociaux permet à l’internaute de recevoir toutes nouvelles informations en quelques se-condes.
De plus, et connait tout sur tout le monde vu qu’il est lié à la communauté du site.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.
Pistes graphiques du logo :
S’mashSmash
S’MashS’mash
S’mashS’mashS’mash
S’mashS’mash
Smash
Logo retenu version blanc et noir
Identification de l’emetteur
7
Qui parle à qui ?pourquoi et comment ?
Donc s’ils ont a bien compris le fonctionnement d’un mash’up toute la communauté ainsi que l’équipe font fonctionner le site.
Soit on pourrait dire que tout le monde parle à tout le monde. Mais l’information et les applications étant ciblés concernent, en fait, le public de S’mash :
- Les personnes travaillant dans la chaine graphique ( concepteur rédacteur, graphiste, développeurs etc ...).
S’mash offre en avant première les orientations de design et de développement. Les dernières vibes du web seront écrites par l’équipe du site. Soit le ton donnait est professionnel mais en même temps humain, branché, tendance peu être Geek :) EH oui ce sont les passionnés aimant leur métiers qui représentent la communauté de S’mash
Identification de l’emetteur
8
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, au buzz, à la viralité, aux dernières nouveautésà peine sorties déja connues une secondes plus tard par des millions de personnes.
S’mash se veut tendance, professionnel, technologique, innovant, accueillant, naturel et essentiellement humain avec une simplicité d’utilisation et une légereté au niveau de l’application.
Ce public de professionnel est critique puisque travaillant dans ce secteur du web veulent une qualité technologique ainsi qu’une bonne ergonomie. Il doit s’attisfaire leur exigeance et soif d’information et de contact.Ce webzine reposera sur une plateforme de média social, intégrant en continu des flux Rss et des contributions des membres de la communauté.
Fonctionnalités
9
Arborescence
AccueilRéseau social
Aggrégation mécanique & Humaine
Articles rédigés par l’équipe
Les couchesLes Rubriques
Dév de Dév Designement votre Petites annonces ProfessionnellesDernières vibes du web
Les langages Les sites 2.0 Trouver
Actus DevMashActus
Newsmash
smashbuzz
Les designs Déposer
Les Tutoriaux Tendances du web
Identification & Inscription
II.Concurrence
10
La concurrence
11
Aaaliens.
Fubiz (Actualités Arts)
DémocratesMise en page structurée
You tube (vidéos)
Auwwergne
Les blogs et mash’up façon e-magazine
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.
Toujours une construction en 3 colonnes.Auwwwergne.comLe contenu éditorial du site est vrai-ment attrayant
Les couleurs reprennent bien le ton donné par le site : L’Auwwwergne (auvergne)Nuances de verts rappellant la couleur des paturages.
La concurrence
12
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.
La concurrence
13
Yahoo
G-mail
Les Moteurs de recherches+boites mails
La concurrence
14
Msn & HotmailInterface agréable,personnalisable,illustrée,Navigation horizontale.Contenu en 3 colonnes.
Les Moteurs de recherches + boites mails + Réseau social
La concurrence
15
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é.
Concurrence
16
E-bay
Les services
Google map
La concurrence
17
Amazon
Peuplade
You tube
You tube la banque vidéos de toutes les plateformes communautaires avec Dailymotion
Les services
La concurrence
18
Toujours une construction en 3 colonnes.La mise en avant du profil est interessante.La navigation est assez simple.
Linked-in plateforme communautaire pour les professionnels
Myspace (profession-neldans la musique)Interface modifia-bles grâce aux CSS
La concurrence
19
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.
Toujours une construction en 3 colonnes.
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 :)
La concurrence
20
TwitterRéseau socialRegroupant 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.
III.Charte Graphique
21
Zoning.Accueil
22
Logo
Menu
Les articles rédigés par l’équipe qui font référence aux rubriques du site
Aggrégation mécanique
&humain
Réseau social
Couches
Les derniers messages et nouveautés des internautes
Les nouveaux membres
Les reseauxsociaux reliés
Les nouvellesapplications
Footer
Header
identification
Accueil + couches
Dernières vibesdu web
Dév de dév
Designement votre
Petites annoncesprofessionnelles
Zoning.Dév de Dév
23
Logo
Menu
Articles concernant les nouveautés pour les Dév
Couches
Les derniers messages et nouveautés des internautesdéveloppeurs ou interressés par le développement
Les forumsdév
Commentaires des internautes sur dév de dev
Les nouvellesapplicationspour les dév
Footer
Header
identification
News de dév
Languages de dév
Tutoriaux / templates
Modules de dév
Dernières vibesdu web
Dév de dév
Designement votre
Petites annoncesprofessionnelles
Dév de Dév
Les langagesLes TutauxModules
Zoning.Petites annonces Professionnelles
24
Logo
Menu
Interview d’un professionnelqui a réussi à trouver grâce à S’mash etc
Couches
Je rechercheune annonceJe posteune annonce
Les derniers messages et nouveautés des internautes
Archives desannonces par moiset par année
Réseau sociaux
Picto flux RSS pour recevoir un mail dès qu’il y a des annonces interressantes sur la toileFooter
Header
identification
Dernières vibesdu web
Dév de dévDesignement votre
Petites annoncesprofessionnelles
Les petites annonces professionnelles
Année mois
ARCHIVE
DEPOSER REPONDRE
MES LIENS
Année mois
Zoning.Dernières vibes du web
25
Logo
Menu
La UNE d’uneinformation du web importante
Couches
Les derniers messages et nouveautés des internautes sur les nouvelles.
Archives des articles du webpar date et année
Réseau sociaux
Colonne articles
Picto flux RSS pour recevoir un mail dès qu’il y a des nouveau-tésFooter
Header
identification
TIRE
TITRE
TITRE
TITRE
Dernières vibes du web
Année mois
Pseudo profes
ARCHIVE
DEPOSER REPONDRE
MES LIENS
Année mois
Pseudo Age
Dernières vibes du web
Dév de dév
NewsA la uneArchivesPoster une new
Designement votre
Petites annoncesprofessionnelles
Zoning.Désignement votre
26
Logo
Menu
Interview d’un professionneldans le design ou graphisme / ou actu
Couches
Les derniers messages et nouveautés des internautes sur la partie graphique et design
Archives thèmes et ou nouveautés, astuces, tutoriaux et site web, animation, vidéos...
Réseau sociaux
Picto flux RSS pour recevoir un mail dès qu’il y a des annonces interressantes sur la toileFooter
Header
identification
Les sites web
Tutoriaux
Nouvelles technologies
Motion design Animation
Vidéos
Designement votre
Année mois
Pseudo profes
ARCHIVE
DEPOSER REPONDRE
MES LIENS
Année mois
Pseudo Age
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
Dernières vibesdu web
Dév de dév
Designement votre
Petites annoncesprofessionnelles
Les sitesNew technoTutoriauxVidéos
La navigation.menu
27
2 Styles de menu : horizontal et verticalMenu vertical
Dernières vibes du web
Dernières vibes du web
Dernières vibes du web
Dév de dév
Dév de dév
Dév de dévNews
Languages de dév
Languages de dév
Les sites
A la une
Tuto de dév
Tuto de dév
New techno
Archives
Modules de dév
Modules de dév
TutoriauxVidéosAnimation Motion
RechercherDéposer
Poster une newDesignement votre
Designement votre
Designement votrePetites annoncesprofessionnelles
Petites annoncesprofessionnelles
Petites annoncesprofessionnelles
Fonctionnement de la navigationLe menu dans un premier temps est replié.Lorsque l’on clique sur une rubrique qui nous interresse on aà la rubrique en question qui se déplie laissant apparai-tre les sous rubriquesLe troisième menu montre toutes les rubrique déplié permettant de voir la place qu’il prend
Extension du menupour une éventuelle évolution :Le menu s’agrandierait en hauteur.On pourrait y ajouter des pictos
Menu dont une rubrique est dépliée
Menu de base
Menu entièrement déplié
La navigation.menu
28
Menu horizontal
Dernières vibes du web
Dernières vibes du web
Autres vibes du web
Dév de dév
Dév de dév
Autres
News
News
News
Languages de dév
Languages de dév
Languages de dév
Les sites
Les sites
Les sites
A la une
A la une
A la une
Tuto de dév
Tuto de dév
Tuto de dév
New techno
New techno
New techno
Archives
Archives
Archives
Modules de dév
Modules de dév
Modules de dév
Tutoriaux
Tutoriaux
Tutoriaux
Vidéos
Vidéos
Vidéos
Animation Motion
Animation Motion
Animation Motion
Rechercher
Rechercher
Rechercher
Déposer
Déposer
Déposer
Repondre
Repondre
Repondre
Poster une new
Poster une new
Poster une new
Designement votre
Designement votre
Autres
Petites annoncesprofessionnelles
Petites annoncesprofessionnelles
Autres
Extension du menupour une éventuelle évolution.
Le menu s’agrandierait en hau-teur.Le sous rubriques peuvent être apparentes.On pourrait y ajouter des pictos
titre
29
Définition des circuits de navigation = création des menus (choix techno et positionnement )
Nous avons 3 couches :
- Articles rédigés par l’équipe- Aggrégation mécanique & Humain- Réseau social
Les rubrique sont à inclure dans la partie des articles rédigés par l’équipe.
Et les principales rubriques :
-Dernières vibes du web-Dév de Dév-Designement votre-Petites annonces professionnelles.
Les applications composites de présentation constituent le type le plus connu, dont le meilleur exemple est donné par les nombreuses applications Google Maps. Elles combinent des éléments provenant de sour-ces multiples en masquant ce fait derrière une interface graphique unifiée simple.Choix technologiques : Html, Ajax, Php, l’objet XMLHttpRequest, RSS...
30
Définition des circuits de navigation = créa-tion des menus (choix techno et positionne-ment )
Nous avons 3 couches :
- Articles rédigés par l’équipe- Aggrégation mécanique & Humain- Réseau social
Et les principales rubriques :
-Dernières vibes du web-Dév de Dév-Designement votre-Petites annonces professionnelles.
Voir Arborescence
Les applications composites de présentation constituent le type le plus connu, dont le meilleur exemple est donné par les nombreu-ses applications Google Maps. Elles combinent des éléments provenant de sources multiples en masquant ce fait derrière une interface graphique unifiée simple.
Choix technologiques : Html, Ajax, Php, l’objet XMLHttpRequest, RSS...
Charte éditoriale et graphique & pertinance des choixconstruction / topographie de la page d’ac-cueil + page types :
Ratio texte / image
65% texte et 35% d’image/iconographie
scroll or not scroll
Il y aura inévitablement scroll comme dans tous les mash’up mais il ne faut pas que la page fasse 1km de hauteur et de largeur
Choix iconographiques
Frais, tendances, colorés, matières, illustrer, pour attirer l’oeil.
Insertion vidéo ? animation
Un partie vidéo pourra apparaitre selon les articles, l’information en rapport avec les rubriques du site et des couches.
Choix de la palette de couleurs = charte gra-phique
On pourrait définir deux axes :
Le premier axe :
Un axe technologique, on affiche notre gout, site épuré peu être un peu minimaliste mais un peu sophistiqué.Noir, gris, blanc, et pourquoi pas des couleurs fashy en titre ?
Le deuxième axe serait le contrepied du premierPlûtot illustratif ou naturel, proche de la nature et de l’humain.Branchage reliants toutes l’information et applications.
La maquette.Atmosphère
31
Mash’up de conception web
Inscription - Se connecter
Voir aussi sur :
Newsletter
Vos contacts
Applications
Vos Flux RSS sur :
Réseau socialAggrégationArticles écrits par l’équipe
Mr DUPONT Marc connecté
Ad del duis et
Lorem ipsum
DERNIERS ARTICLES DE BLOG
Our body interdit 25 avr. 2009 - 10:33Gegout
Vernissage «Entre-Deux» - Exposition de Christine Jean 24 avr. 2009 - 14:56Area Galerie
FESTIV’ART 2009, c’est parti ! 24 avr. 2009 - 14:26BureauDes Arts HECfrederique Bertin
Elektra 10 FESTIVAL INTERNATIONNAL ARTS NUMERIQUES 1er au 10 mai 2009 20 avr. 2009 - 10:38Elektra Montreal
DERNIERS MESSAGES
Michel25 avr. 2009 - 19:33GegoutVernissage Rambuteau Galerie Phenix
Sandrine25 avr. 2009 - 21:00GegoutRemise des prix HECMusée Géricault
Elisa25 avr. 2009 - Salon des Ats NumériquesAurillac
Inscrivez-vous à la nesletter pour tout savoir sur les nouveautés !
Identifiant :
Mot de passe :
Les soirées PechaKucha sont conçues comme un format de présentation qui permet chaque mois à 10 designers de présenter leur travail en public. PechaKucha, qui signifie en japonais « le bruit de la conversation », est fondée sur un format original : chaque designer présente 20 images, chacune projetée pendant 20 secondes, soit 6 minutes 40 secondes de présentation. Chaque présentation permet d’explorer un ou plusieurs projets à travers son processus de création.
http://www.pechakuchaparis.com/
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
Pecha kucha
Palette numérique
Dernières vibes du web
Dév de dév
Designement votre
Petites annonces professionnelles
validez
Contactez-nous À propos Plan du site Haut de page
Le plus simple serait que tout se fasse le plus simplement possible (Rick Hunter)
S’mash est un site dédié aux concepteur du web.............