Site consacré aux concepteurs du web
Laure Barthaud Campus Multimédia 3 1

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

I.Présentation
3

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

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

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

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

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

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

II.Concurrence
10

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

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

La concurrence
Les Moteurs de recherches+boites mails
G-mail
Yahoo
13

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

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

Concurrence
Les services
E-bay Google map
16

La concurrence
Peuplade
Les services
Amazon
You tube la banque vidéos de toutes les plateformes
communautaires avec Dailymotion
You tube
17

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

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

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

III.Charte Graphique
21

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

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

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

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

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

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

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

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

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

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