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




             ?
QUI parle à QUI
                             Tout le principe de ce site est d’offrir ...
création du site




         ?
             Étant donné la cible et ce que le      En quelques mots...
             magaz...
création du site

LOGO



                                                                                                ...
chart book

LOGO

              Menu principal                        :
                                            Le Zon...
chart book

LOGO


 Titre article
                        Menu principal

                 Erat. Volupta tumsan henis alis...
chart book

LOGO

                          Menu principal
 Professeur - Web Design/Multimedia
 CDI aux GOBELINS (Paris, F...
chart book

LOGO


A   B   C    D       E      F
                              Menu principal
                            ...
chart book

LOGO


IN...vos coups de coeur
                                Menu principal
                                ...
chart book

LOGO


La tendance du mois...
                                    Menu principal
                             ...
chart book

LOGO


Rencontre avec...
                                    Menu principal


                                ...
chart book



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

             Inspiration




                             16
chart book

Une idée de LOGO                                            Orientation graphique

          s’mash
          ...
chart book

             s’mash
             M ag a z i n e
                                                              ...
fonctionnalités




             ?
                  Les règles sont encore plus simple avec la version WCAG 2.0, qui énon...
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
×

DOSSIER CONCEPTION SMASH UP

967 vues

Publié le

Publié dans : Design
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

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

Aucune remarque pour cette diapositive

DOSSIER CONCEPTION SMASH UP

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

×