DOSSIER de Conception
s’mashM a g a z i n e
Séverine ClopCampus 3 Multimédia
IESA - 2009
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 ........................................................................... 3La Concurrence ..................................................................... 4
CRÉATION DU SITE
Qui parle à Qui ? ......................................................................5La charte éditoriale ................................................................ 6Les Menus ...............................................................................7
CHART BOOK
Le zoning ................................................................................ 8Scroll & Ratio texte/image ..................................................... 15Inspiration ............................................................................ 16Orientation graphique ........................................................... 17Maquette HOME : Ébauche ................................................... 18
FONCTIONNALITÉS
L’accessibilité ........................................................................ 19Le référencement .................................................................. 21
INTRODUCTION
3
Le «MASHUP»?Un mashup - «mixage» en français - désigne une application Web qui combine du contenu en provenance de différents sites. Cette application permet ainsi de créer un service nouveau grâce à l’apport des contenus de sites tiers. Ce nouveau service peut éventuellement être à son tour enrichi de contenus générés par les utilisateurs.
Le mashup participe intimement au succès du Web 2.0 car il permet au producteur d’un contenu de le proposer à la communauté des développeurs qui pourront à loisir le formater et le valoriser sous une autre forme. Le mashup constitue donc une forme d’externalisation qui repose sur l’intelligence collective des internautes et des développeurs.
4
création du site
La Concurrence?
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.
L’Equipe
Le Concepteur web
Le Développeur
Le Graphiste
6
création du site
La Charte Editoriale
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 informer les concepteurs web, leur donner les bons outils, les bonnes orientations et par ce biais les inciter à enrichir le site par leurs expériences, leurs opinions, leurs connaissances et leur talent.
7
création du site
Les Menus?Au nombre de 2 :Un menu horizontale avec les 3 grandes rubriques du site : ACTU, RÉSEAU SOCIAL et TOUT LE MONDE EN PARLE.
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.
LOGOACTU
Dernières vibes du web - Dev de Dev - Designement vôtre - Petites annonces pro
Groupes - Membres - Blogs
Top In - Top Out - La tendance du mois - Rencontre avec...
RÉSEAU SOCIAL S’INSCRIRETOUT LE MONDE EN PARLE
Moteur deRecherche
AbonnementFlux RSS
Nuages de TAGS
Article récents
Catégories
Profils
8
chart book
Le Zoning HOME:LOGO
Menu principal
Menu secondaire
Le coupde coeur
Rencontreavec...
Derniersarticlespostés
Dernièresoffres
d’emploi
9
chart book
Le Zoning ACTU:LOGO
IMAGE
IMAGE
Menu principal
Menu secondaire
Titre article TYPE :Dev de DevDesignement VôtreDernières vibes...
Titre article
Erat. Volupta tumsan henis alismolent wisi bla facipit la aliquisl ulput autem do odolortinibh et, consequ ismolorperit wisit dionsequatum quat. Ectem el euiscil dit nulputa tueriusto ex el ut iriusci bla alismod te exerostrud minim quat vullum doluptatum quat.
Vite la suite...
Erat. Volupta tumsan henis alismolent wisi bla facipit la aliquisl ulput autem do odolortinibh et, consequ ismolorperit wisit dionsequatum quat. Ectem el euiscil dit nulputa tueriusto ex el ut iriusci bla alismod te exerostrud minim quat vullum doluptatum quat.
Vite la suite...
10
chart book
Le Zoning ACTU:LOGO
Menu principal
Menu secondaire
Professeur - Web Design/MultimediaCDI aux GOBELINS (Paris, FRANCE)
Posté le 22 avril 2009
Consulter l’annonce
Professeur - Web Design/MultimediaCDI aux GOBELINS (Paris, FRANCE)
Posté le 22 avril 2009
Consulter l’annonce
Professeur - Web Design/MultimediaCDI aux GOBELINS (Paris, FRANCE)
Posté le 22 avril 2009
Consulter l’annonce
TYPE :Annonces Pro
11
chart book
Le Zoning RÉSEAUX:LOGO
...
Menu principal
Menu secondaire
TYPE :GroupesMembresBlogs
A B C D E F G H I J K
Liste des membres
Azartroomactive 1 mois, 3 semaines ago
Azartroomactive 1 mois, 3 semaines ago
Azartroomactive 1 mois, 3 semaines ago
12
chart book
Le Zoning Tout le monde en parle:LOGO
Menu principal
Menu secondaire
TYPE :In & Out
IN...vos coups de coeur
Vote
Vote
Vote
Vote
Vote
Erat. Volupta tumsan henis alismolent wisi bla facipit la aliquisl ulput autem do odolortinibh et, consequ ismolorperit wisit dionsequatum quat.
Erat. Volupta tumsan henis alismolent wisi bla facipit la aliquisl ulput autem.
Erat. Volupta tumsan henis alismolent wisi bla facipit la aliquisl.
Erat. Volupta tumsan henis alismolent wisi bla facipit la aliquisl ulput autem do odolortinibh et, consequ ismolorperit wisit dionsequatum quat.
Erat. Volupta tumsan henis alismolent wisi bla facipit la aliquisl ulput autem do odolortinibh et, consequ ismolorperit wisit dionsequatum quat.
13
chart book
Le Zoning Tout le monde en parle:LOGO
Menu principal
Laisser un commentaire
Nom
Menu secondaire
TYPE :Tendance du mois
La tendance du mois...
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
14
chart book
Le Zoning Tout le monde en parle:LOGO
Menu principal
Laisser un commentaire
Nom
Menu secondaire
TYPE :Tendance du mois
Rencontre avec...
Si Scott...
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
15
chart book
Scrolling or notScrolling
Ratiotexte / image? ?
Il est difficile d’éviter les scrolls dans l’élaboration de ce type de site. Le but étant de faciliter la lecture et l’accès à l’information, malgrés la longueur des pages. Nous appliquerons le principe du scroll équivalant à 3 écrans maximum et publierons les articles sur plusieurs pages.Tout le contenu principal de la home doit pouvoir être visible sans scroll ; on fera défiler la page pour visualiser l’intégralité du menu secondaire à droite de la page.
Ce site accordera beaucoup d’importance à l’image surtout dans les rubriques «Designement Vôtre», «Tendance du moi», «Rencontre avec...». Il est important d’attirer et de fidéliser les internautes par de beaux visuels et des vidéos percutantes. Le texte doit soutenir l’image.
16
chart book
Inspiration...
17
chart book
Orientation graphiqueUne idée de LOGO
La TYPOGRAPHIE
Les COULEURS
Georgia : Capture it :
a b c d e f g h i j k l m n o p q r s t u v w x y z0 1 2 3 4 5 6 7 8 9 . / ? , + = ...
a b c d e f g h i j k l m n o p q r s t u v w x y z0 1 2 3 4 5 6 7 8 9 . / ? , + = ...
s’mashM a g a z i n e
R : 202 V : 0 B : 93
R : 73 V : 186 B : 191
R : 151 V : 190 B : 13
R : 242 V : 148B : 0
chart book
MaquetteHOME : Ebauche...
s’mashM a g a z i n e
ACTU RÉSEAU SOCIAL S’INSCRIRETOUT LE MONDE EN PARLE
Moteur de Recherche
S’abonner aux
Flux RSS des articlesSuivez la S’Mash actualité
webdesign ¾outils collaboratifs ¾référencement ¾
Thomas: Tout est bon pour buzzer,...
Gaëtan: Désolé :-( le lien est «r...
google graphisme logo
métier magazine outils
collaboratifs photographie
photoshop règles
Tag Clouds
Article récents
Catégories
Le Vintage dans la pub mexicaine...
Derniers articles postés...
Rencontre avec...Si Scott
Dernières offres d’emploi...
20-04-2009 Tendances logo 200920-04-2009 salaires 2008 du design
12-02-2009 Tendances webdesign 200912-02-2009 ie sur plusieurs pc06-02-2009 emploi webdesigner
13-04-2008 porTfolio phoTo
08-04-2008 porTfolio logo
08-04-2008 porTfolio inTerneT
Freelance Twitter Background DesignerTinyVenue (anywhere)
Professor - Web Design/Multimediafanshawe college (london, onTario canada)
Professor - 3D Animationfanshawe college (london, onTario canada)
Web Designermosaic sales soluTions (mississauga, on)
Website AdministratoraT aViawesT (VicToria, bc)
Ce site sera optimisé pour tous les types de navigateurs ( Firefox, Internet Explorer, Opéra, Safari...) et adapté pour les écrans de smartphones et e-PC de manière à pouvoir être consulté partout, à tout moment.
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.
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. Â
L’accessibilité?
20
fonctionnalités
Cela rejoint les propos tenus au forum ParisWeb 2008 pour la qualité et l’accessibilité du webdesign…
A savoir :
proposer une alternative aux contenus visuels et auditifs (légende, sous-titrage, Â
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) Â
L’accessibilitéce qu’il faut appliquer...?
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 :
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 Â
Le référencement?