DOSSIER de Conception
                                                                          Séverine Clop
            ...
SOMMAIRE

INTRODUCTION
Le MASHUP ........................................................................... 3
La Concurre...
INTRODUCTION




         ?
               Un mashup - «mixage» en français - désigne         Le mashup participe intimeme...
création du site




                                ?
                   La Concurrence




                             ...
création du site




             ?               Tout le principe de ce site est d’offrir en avant   L’équipe du e-magazi...
création du site




         ?
                                                    En quelques mots...
             Étant...
création du site

LOGO



                                                                                                ...
chart book


                                                    :
LOGO
                                            Le Zon...
chart book


                                                                                                        :
LOG...
chart book


                                                                                      :
LOGO
                ...
chart book


                                                                                     :
LOGO
                 ...
chart book


                                                                                                             ...
chart book


                                                                                                             ...
chart book


                                                                                                             ...
chart book



                   Il est difficile d’éviter les scroll dans                          Ce site accordera beau...
...
chart book

             Inspiration




                             16
chart book

Une idée de LOGO                                            Orientation graphique

          s’mash
          ...
chart book

             s’mash                                                                                           ...
fonctionnalités




             ?
                  Les règles sont même encore plus simple avec la version WCAG 2.0, qui...
fonctionnalités




                        ?
                             Cela rejoint les propos tenus au forum ParisWeb...
fonctionnalités


                   La base de connaissances SEO Infographics, du groupe Elliance, nous apporte




     ...
Prochain SlideShare
Chargement dans…5
×

SMASH-CONCEPTION-SeverineClop

485 vues

Publié le

0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
485
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
8
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

SMASH-CONCEPTION-SeverineClop

  1. 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. 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. 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. 4. création du site ? La Concurrence 4
  5. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 16. ... chart book Inspiration 16
  17. 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. 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. 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. 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. 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

×