1. DOSSIER de Conception
Séverine Clop
Campus 3 Multimédia
IESA - 2009
s’mash
Magazine
S’MASH est un nouveau e-magazine dédié aux
concepteurs web..
Son objectif est clairement d’offrir en
avant-première les orientations de design et
de développement à une époque où le mash-up
s’impose comme la nouvelle norme.
Volontairement tendance, ce webzine reposera
sur une plateforme de media social, intégrant
en continu des flux RSS et des contributions des
membres de sa communauté.

2. SOMMAIRE
INTRODUCTION
Le MASHUP ........................................................................... 3
La Concurrence ..................................................................... 4
CRÉATION DU SITE
Qui parle à Qui ? ......................................................................5
La charte éditoriale ................................................................ 6
Les Menus ...............................................................................7
CHART BOOK
Le zoning ................................................................................ 8
Scroll & Ration texte/image ................................................... 15
Inspiration ............................................................................ 16
Orientation graphique ........................................................... 17
Maquette HOME : Ebauche ................................................... 18
FONCTIONNALITÉS
L’accessibilité ........................................................................ 19
Le référencement .................................................................. 21
2

3. INTRODUCTION
?
Un mashup - «mixage» en français - désigne Le mashup participe intimement au succès
une application Web qui combine du du Web 2.0 car il permet au producteur d’un
contenu en provenance de différents contenu de le proposer à la communauté des
Le «MASHUP» sites. Cette application permet ainsi de développeurs qui pourront à loisir le formater
créer un service nouveau grâce à l’apport des et le valoriser sous une autre forme. Le mashup
contenus de sites tiers. Ce nouveau service peut constitue donc une forme d’externalisation
éventuellement être à son tour enrichi de qui repose sur l’intelligence collective
contenus générés par les utilisateurs. des internautes et des développeurs.
3

4. création du site
?
La Concurrence
4

5. création du site
? Tout le principe de ce site est d’offrir en avant L’équipe du e-magazine s’adresse à son
première, aux concepteurs web, les grandes public de concepteurs web, développeurs
QUI parle à QUI tendances du design actuel et les nouvelles et autres graphistes. Ces 3 cibles participent
technologies de développement dans un à l’enrichissemnt du contenu du site. On
contexte où le Mash Up tend à s’imposer peut donc dire que tout le monde à la parole.
comme la nouvelle norme. L’information se fait de manière intéractive.
Le Concepteur web
Le Développeur
L’Equipe
5
Le Graphiste

6. création du site
?
En quelques mots...
Étant donné la cible et ce que le
magazine a l’intention de présenter,
l’impression générale doit être à la
hauteur de son contenu sans pour
autant. Ce que l’on souhaite c’est
La Charte informer les concepteurs web, leur
donner les bons outils, les bonnes
Editoriale orientations et par ce biais les
inciter à enrichir le site par leurs
expériences, leurs opinions, leurs
connaissances et leur talent.
6

7. création du site
LOGO
?
ACTU RÉSEAU SOCIAL TOUT LE MONDE EN PARLE S’INSCRIRE
Moteur de
Les Menus
Recherche
Dernières vibes du web - Dev de Dev - Designement vôtre - Petites annonces pro
Groupes - Membres - Blogs
Abonnement
Flux RSS
Top In - Top Out - La tendance du mois - Rencontre avec...
Au nombre de 2 :
Nuages de TAGS Un menu horizontale avec les 3
grandes rubriques du site : ACTU,
RÉSEAU SOCIAL et TOUT LE
MONDE EN PARLE.
Article récents
Un menu vertical avec les
CATÉGORIES que l’on peut
retrouver dans le site (graphique
et techniques), les ARTICLES
RÉCENTS et les PROFILS.
Cétégories
7
Profils

8. chart book
:
LOGO
Le Zoning
HOME
Menu principal
Le coup Rencontre
de coeur avec...
Menu
secondaire
Derniers Dernières
articles offres
postés d’emploi
8

9. chart book
:
LOGO
Le Zoning
ACTU
Menu principal
Titre article TYPE :
Dev de Dev
Erat. Volupta tumsan henis alismolent wisi bla Designement Vôtre
facipit la aliquisl ulput autem do odolortinibh et,
Dernières vibes...
consequ ismolorperit wisit dionsequatum quat.
IMAGE Ectem el euiscil dit nulputa tueriusto ex el ut iriusci
bla alismod te exerostrud minim quat vullum
doluptatum quat.
Vite la suite...
Menu
Titre article
secondaire
Erat. Volupta tumsan henis alismolent wisi bla
facipit la aliquisl ulput autem do odolortinibh et,
consequ ismolorperit wisit dionsequatum quat.
IMAGE Ectem el euiscil dit nulputa tueriusto ex el ut iriusci
bla alismod te exerostrud minim quat vullum
doluptatum quat.
Vite la suite...
9

10. chart book
:
LOGO
Le Zoning
ACTU
Menu principal
Professeur - Web Design/Multimedia TYPE :
Annonces Pro
CDI aux GOBELINS (Paris, FRANCE)
Posté le 22 avril 2009
Consulter l’annonce
Professeur - Web Design/Multimedia
CDI aux GOBELINS (Paris, FRANCE)
Posté le 22 avril 2009
Menu
Consulter l’annonce
secondaire
Professeur - Web Design/Multimedia
CDI aux GOBELINS (Paris, FRANCE)
Posté le 22 avril 2009
Consulter l’annonce
10

11. chart book
:
LOGO
Le Zoning
RÉSEAUX
Menu principal
... TYPE :
A B C D E F G H I J K
Groupes
Membres
Liste des membres Blogs
Azartroom
active 1 mois, 3 semaines ago
Menu
Azartroom
secondaire
active 1 mois, 3 semaines ago
Azartroom
active 1 mois, 3 semaines ago
11

12. chart book
:
LOGO
Le Zoning
Menu principal Tout le monde en parle
IN...vos coups de coeur TYPE :
In & Out
Erat. Volupta tumsan henis alismolent wisi bla facipit la aliquisl ulput
autem do odolortinibh et, consequ ismolorperit wisit dionsequatum
Vote
quat.
Erat. Volupta tumsan henis alismolent wisi bla facipit la aliquisl ulput
autem.
Vote
Erat. Volupta tumsan henis alismolent wisi bla facipit la aliquisl.
Menu
Vote
secondaire
Erat. Volupta tumsan henis alismolent wisi bla facipit la aliquisl ulput
autem do odolortinibh et, consequ ismolorperit wisit dionsequatum
Vote
quat.
Erat. Volupta tumsan henis alismolent wisi bla facipit la aliquisl ulput
autem do odolortinibh et, consequ ismolorperit wisit dionsequatum
Vote
quat.
12

13. chart book
:
LOGO
Le Zoning
Menu principal Tout le monde en parle
La tendance du mois...
TYPE :
Tendance du mois
Menu
secondaire
Ullaoreetummy nit wis nonullum nit illaore facidunt alisl eui ea con volorem
veniam il dip ex exercin esequis nos nulputat. Nonsenibh et am estie commolo
rtissi.
Unt nos ad dion hent nisl in vercil ullamco reetuer cillaoreet eugiatie tat ut nos
augait esequat lorerci tatie facilit, commolorting ex exero enisi tatem ea facidui
tatie venis nonsequip eugiatie faccum zzrit, siscip er ip enis ad tionum
Laisser un commentaire
Nom
13

14. chart book
:
LOGO
Le Zoning
Menu principal Tout le monde en parle
Rencontre avec...
TYPE :
Si Scott... Tendance du mois
Menu
secondaire
Ullaoreetummy nit wis nonullum nit illaore facidunt alisl eui ea con volorem
veniam il dip ex exercin esequis nos nulputat. Nonsenibh et am estie commolo
rtissi.
Unt nos ad dion hent nisl in vercil ullamco reetuer cillaoreet eugiatie tat ut nos
augait esequat lorerci tatie facilit, commolorting ex exero enisi tatem ea facidui
tatie venis nonsequip eugiatie faccum zzrit, siscip er ip enis ad tionum
Laisser un commentaire
14
Nom

15. chart book
Il est difficile d’éviter les scroll dans Ce site accordera beaucoup
l’élaboration de ce type de site. Le but d’importance à l’image
? ?
étant de faciliter la lecture et l’accès à surtout dans les rubriques
l’information, malgrés la longueur des pages. «Designement Vôtre»,
Nous appliquerons le principe du scroll «Tendance du moi»,
Ratio
équivalent à 3 écrans maximum et «Rencontre avec...». Il est
Scrolling or not texte / image
publierons les articles sur plusieurs pages. important d’attirer et de
Scrolling Tout le contenu principal de la home doit fidéliser les internautes par
pouvoir être visible sans scroll ; on fera de beaux visuels et des videos
défiler la page pour visualiser l’intégralité du percutantes. Le texte doit
menu secondaire à droite de la page. soutenir l’image.
15

16. ...
chart book
Inspiration
16

17. chart book
Une idée de LOGO Orientation graphique
s’mash
Magazine
La TYPOGRAPHIE
Georgia : abcdefghijklmnopqrstuvwxyz
0 1 2 3 4 5 6 7 8 9 . / ? , + = ...
: abcdefghijklmnopqrstuvwxyz
Capture it
0 1 2 3 4 5 6 7 8 9 . / ? , + = ...
Les COULEURS
R : 202 R : 73 R : 151 R : 242
V:0 V : 186 V : 190 V : 148
B : 93 B : 191 B : 13 B:0
17

18. chart book
s’mash Maquette
Magazine
HOME :
Ebauche...
ACTU RÉSEAU SOCIAL TOUT LE MONDE EN PARLE S’INSCRIRE
Moteur de Recherche
Le Vintage dans la pub mexicaine... Rencontre avec...Si Scott
S’abonner aux
Flux RSS des articles
Ce site sera optimisé
Suivez la S’Mash actualité
pour tous les types de
navigateurs ( Firefox,
Tag Clouds
Internet Explorer, Opéra,
Safari...) et adapté pour les
graphisme
google logo
écrans de smartphones et
métier magazine outils
e-PC de manière à pouvoir
Derniers articles postés... Dernières offres d’emploi...
photographie
collaboratifs
être consulté partout à tout
règles moment.
photoshop
Freelance Twitter Background Designer
20-04-2009 Tendances logo 2009
TinyVenue (anywhere)
20-04-2009 salaires 2008 du design
Article récents
Professor - Web Design/Multimedia
12-02-2009 Tendances webdesign 2009 fanshawe college (london, onTario canada)
12-02-2009 ie sur plusieurs pc Professor - 3D Animation Thomas: Tout est bon pour buzzer,...
06-02-2009 emploi webdesigner fanshawe college (london, onTario canada)
Gaëtan: Désolé :-( le lien est «r...
13-04-2008 porTfolio phoTo Web Designer
mosaic sales soluTions (mississauga, on)
08-04-2008 porTfolio logo
Cétégories
Website Administrator
08-04-2008 porTfolio inTerneT
aViawesT (VicToria, bc)
aT
18
¾ webdesign
¾ outils collaboratifs
¾ référencement

19. fonctionnalités
?
Les règles sont même encore plus simple avec la version WCAG 2.0, qui énoncent les règles en
matière d’accessibilité recommandées par le W3C, et qui a clarifié la précédente édition.
L’objectif est simple : assurer la diffusion de ces bonnes pratiques et faciliter leur mise en
place.
L’accessibilité Pour cela la principale évolution est la réduction des règles au nombre de 4 :
S’assurer que le contenu Web est perceptible par tout internaute.
Â
S’assurer que le contenu Web est utilisable par tout internaute.
Â
S’assurer que le contenu Web est compréhensible par tous.
Â
S’assurer de la robustesse du contenu.
Â
19

20. fonctionnalités
?
Cela rejoint les propos tenus au forum ParisWeb 2008 pour la qualité et l’accessibilité du
webdesign…
A savoir :
L’accessibilité Â proposer une alternative aux contenus visuels et auditifs (légende, sous-titrage,
ce qu’il faut appliquer... audio-description)
 bien utiliser le contraste des couleurs (cohérence du background image et couleur)
 assurer la lisibilité du contenu sans souris (touches du clavier)
 mettre en place des fonctions d’aide à la saisie
 optimiser sa compatibilité avec les technologies d’aide fonctionnelle (lecteur d’écran)
20

21. fonctionnalités
La base de connaissances SEO Infographics, du groupe Elliance, nous apporte
?
toujours d’excellentes représentations graphiques des procédés et méthodes en matière de
référencement. Le dernier graphique (ci-dessous) énonce 6 règles de bases pour optimiser
un article dans une démarche SEO (Search Engine Optimization).
Voici les régles à suivre :
Le référencement Inclure le titre de l’article dans une balise <H1>
Â
Utilisez des mots clés dans les noms de fichiers (voir ce précédent article)
Â
Utilisez des mots clés dans le premier paragraphe
Â
Poster votre article sur votre propre site (logique, mais l’article peut être
Â
destiné pour un autre site, ou blog)
 Attendre que Google indexe cette page
 Proposer votre article sur d’autres sites
21