21
DOSSIER de Conception s’mash Magazine Séverine Clop Campus 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é.

SMASH CONCEPTION DEFINITIF

Embed Size (px)

Citation preview

Page 1: SMASH CONCEPTION DEFINITIF

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

Page 2: SMASH CONCEPTION DEFINITIF

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

Page 3: SMASH CONCEPTION DEFINITIF

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.

Page 4: SMASH CONCEPTION DEFINITIF

4

création du site

La Concurrence?

Page 5: SMASH CONCEPTION DEFINITIF

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

Page 6: SMASH CONCEPTION DEFINITIF

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.

Page 7: SMASH CONCEPTION DEFINITIF

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

Page 8: SMASH CONCEPTION DEFINITIF

8

chart book

Le Zoning HOME:LOGO

Menu principal

Menu secondaire

Le coupde coeur

Rencontreavec...

Derniersarticlespostés

Dernièresoffres

d’emploi

Page 9: SMASH CONCEPTION DEFINITIF

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

Page 10: SMASH CONCEPTION DEFINITIF

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

Page 11: SMASH CONCEPTION DEFINITIF

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

Page 12: SMASH CONCEPTION DEFINITIF

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.

Page 13: SMASH CONCEPTION DEFINITIF

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

Page 14: SMASH CONCEPTION DEFINITIF

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

Page 15: SMASH CONCEPTION DEFINITIF

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.

Page 16: SMASH CONCEPTION DEFINITIF

16

chart book

Inspiration...

Page 17: SMASH CONCEPTION DEFINITIF

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

Page 18: SMASH CONCEPTION DEFINITIF

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

Page 19: SMASH CONCEPTION DEFINITIF

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

Page 20: SMASH CONCEPTION DEFINITIF

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

Page 21: SMASH CONCEPTION DEFINITIF

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?