1. DOSSIER de Conception
Séverine Clop
Campus 3 Multimédia
IESA - 2009
s’mash
M a gazi ne
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 & Ratio texte/image ..................................................... 15
Inspiration ............................................................................ 16
Orientation graphique ........................................................... 17
Maquette HOME : Ébauche ................................................... 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
créer un service nouveau grâce à l’apport des
développeurs qui pourront à loisir le formater
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
5. création du site
?
QUI parle à QUI
Tout le principe de ce site est d’offrir en avant
première, aux concepteurs web, les grandes
tendances du design actuel et les nouvelles
technologies de développement dans un
contexte où le Mash Up tend à s’imposer
comme la nouvelle norme.
L’équipe du e-magazine s’adresse à son
public de concepteurs web, développeurs
et autres graphistes. Ces 3 cibles participent
à l’enrichissemnt du contenu du site. On
peut donc dire que tout le monde à la parole.
L’information se fait de manière intéractive.
Le Concepteur web
L’Equipe Le Développeur
Le Graphiste
5
6. création du site
?
Étant donné la cible et ce que le En quelques mots...
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
Dernières vibes du web - Dev de Dev - Designement vôtre - Petites annonces pro Recherche Les Menus
Groupes - Membres - Blogs
Abonnement
Top In - Top Out - La tendance du mois - Rencontre avec... Flux RSS
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.
Catégories
Profils 7
8. chart book
LOGO
Menu principal :
Le Zoning
HOME
Le coup Rencontre
de coeur avec...
Menu
secondaire
Derniers Dernières
articles offres
postés d’emploi
8
9. chart book
LOGO
Titre article
Menu principal
Erat. Volupta tumsan henis alismolent wisi bla
Le Zoning
ACTU
TYPE :
Dev de Dev
:
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...
Titre article Menu
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
Menu principal
Professeur - Web Design/Multimedia
CDI aux GOBELINS (Paris, FRANCE)
Le Zoning
ACTU
TYPE :
Annonces Pro
:
Posté le 22 avril 2009
Consulter l’annonce
Professeur - Web Design/Multimedia
CDI aux GOBELINS (Paris, FRANCE)
Posté le 22 avril 2009
Consulter l’annonce Menu
secondaire
Professeur - Web Design/Multimedia
CDI aux GOBELINS (Paris, FRANCE)
Posté le 22 avril 2009
Consulter l’annonce
10
11. chart book
LOGO
A B C D E F
Menu principal
G H I J K ...
Le Zoning
RÉSEAUX
TYPE :
Groupes
Membres
:
Liste des membres Blogs
Azartroom
active 1 mois, 3 semaines ago
Azartroom Menu
active 1 mois, 3 semaines ago secondaire
Azartroom
active 1 mois, 3 semaines ago
11
12. chart book
LOGO
IN...vos coups de coeur
Menu principal
Le Zoning
:
Tout le monde en parle
TYPE :
In & Out
Erat. Volupta tumsan henis alismolent wisi bla facipit la aliquisl ulput
Vote autem do odolortinibh et, consequ ismolorperit wisit dionsequatum
quat.
Erat. Volupta tumsan henis alismolent wisi bla facipit la aliquisl ulput
Vote autem.
Erat. Volupta tumsan henis alismolent wisi bla facipit la aliquisl.
Vote Menu
secondaire
Erat. Volupta tumsan henis alismolent wisi bla facipit la aliquisl ulput
Vote autem do odolortinibh et, consequ ismolorperit wisit dionsequatum
quat.
Erat. Volupta tumsan henis alismolent wisi bla facipit la aliquisl ulput
Vote autem do odolortinibh et, consequ ismolorperit wisit dionsequatum
quat.
12
13. chart book
LOGO
La tendance du mois...
Menu principal
Le Zoning
:
Tout le monde en parle
TYPE :
Tendance du mois
Menu
Ullaoreetummy nit wis nonullum nit illaore facidunt alisl eui ea con volorem
secondaire
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
Rencontre avec...
Menu principal
Si Scott...
Le Zoning
:
Tout le monde en parle
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
14
Nom
15. chart book
Il est difficile d’éviter les scrolls 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 Ratio «Tendance du moi»,
équivalant à 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 vidéos
défiler la page pour visualiser l’intégralité du percutantes. Le texte doit
menu secondaire à droite de la page. soutenir l’image.
15
17. chart book
Une idée de LOGO Orientation graphique
s’mash
M a g az i n e
La TYPOGRAPHIE
Georgia : abcdefghijklmnopqrstuvwxyz
0 1 2 3 4 5 6 7 8 9 . / ? , + = ...
Capture it : abcdefghijklmnopqrstuvwxyz
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
M ag a z i n e
Maquette
HOME :
ACTU RÉSEAU SOCIAL TOUT LE MONDE EN PARLE S’INSCRIRE Ebauche...
Le Vintage dans la pub mexicaine... Rencontre avec...Si Scott Moteur de Recherche
S’abonner aux
Flux RSS des articles
Suivez la S’Mash actualité Ce site sera optimisé
pour tous les types de
navigateurs ( Firefox,
Tag Clouds
Internet Explorer, Opéra,
google graphisme logo Safari...) et adapté pour
métier magazine outils les écrans de smartphones
Derniers articles postés... Dernières offres d’emploi... et e-PC de manière à
collaboratifs photographie pouvoir être consulté
20-04-2009 Tendances logo 2009 Freelance Twitter Background Designer photoshop règles partout, à tout moment.
TinyVenue (anywhere)
20-04-2009 salaires 2008 du design
12-02-2009 Tendances webdesign 2009
Professor - Web Design/Multimedia
fanshawe college (london, onTario canada)
Article récents
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
08-04-2008 porTfolio logo mosaic sales soluTions (mississauga, on)
08-04-2008 porTfolio inTerneT Website Administrator Catégories
aViawesT (VicToria, bc)
aT
¾ webdesign
¾ outils collaboratifs
¾ référencement
18
19. fonctionnalités
?
Les règles sont 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 é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
