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


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


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


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é.

Facebook

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.



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


Dév de dév

Designement votre


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


Dév de dévDesignement votre


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


Dév de dév

NewsA la uneArchivesPoster une new

Designement votre


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


Dév de dév

Designement votre


Les sitesNew technoTutoriauxVidéos

La navigation.menu

27

2 Styles de menu : horizontal et verticalMenu vertical




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



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



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



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


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.............

s'mash laure barthaud

Business