Charte graphique multimédia - Web

33 %
67 %
Information about Charte graphique multimédia - Web
Design

Published on February 4, 2014

Author: SophieRoyer

Source: slideshare.net

Université Franche-Comté A. Segault Charte graphique multimédia Web Sophie ROYER 2013/2014

Charte graphique multimédia -Web L’identification du site (logo, titre)

Charte graphique multimédia -Web La zone de navigation / menu Logo LamaH Menu de navigation gauche Menu de navigation haut Onglets espaces personnels Menu bas

Charte graphique multimédia -Web Menu de navigation haut Dans cette partie, on retrouve un menu latéral en haut de la page. Il comporte un accès direct et permanent à : - - L’accueil Annonces Origines Communauté Ils sont répartis par priorité et ordre d’importance quant à la navigation de l’utilisateur sur le site. L’élément le plus clair étant celui où l’utilisateur se trouve, ici : L’accueil. Au survol des différentes catégories du menu, une barre horizontale comme ci-dessous, viens glisser d’élément en élément. Au survol toujours, le sous-menu apparait horizontalement. Comme cidessous, l’élément le plus foncé étant celui survolé. Menu de navigation gauche Il se situe à gauche de la page de contenu. Et est présent comme un accompagnement au menu haut. il permet à l’utilisateur d’avoir rapidement accès aux annonces en passant par une action de tri. On y retrouve les principaux éléments du site de manière synthétique et en aperçu rapide comme par exemple, l’histoire du mois et les sélections de l’équipe. La sidebar comprend un fonctionnement général de parties et sous partie. En cas de sous partie, cela prendra l’apparence d’une liste retractable.

Charte graphique multimédia -Web Les typographies (titres, texte de labeur) Titre Les titres sont toujours directement sur le fond du contenu qui est blanc. Les titres sont donc toujours de la couleur : #634e42 Police et taille New Cicle 16px Aligné droite Style normal Texte de labeur Le texte de labeur contient toujours un conteneur coloré, autre que le blanc. Il sera majoritairement blanc #ffffff New Cicle Mais parfois pour distinguer des liens ou marquer une différence avec deux textes pourra être rose #d83a77 ou marron #634e42. New Cicle Police et taille New Cicle 12px Justifié New Cicle Style normal Texte Spécifique Police et taille Style Brannboll Fet 12px normal Ce texte est réservé à certains éléments, afin de bien les distinguer. Comme par exemple les noms des utilisateurs ayant posté des annonces dans l’aperçu de l’annonce. Cette typographique peut-être reprise pour d’autres éléments graphiques, comme la création des images spécifiant les « sélections de l’équipe » par exemple. Exemples

Charte graphique multimédia -Web Les liens (style, usage) Excepté cette barre indicative du fonctionnement du site, qui comprend 3 liens. L’ensemble des liens sur le site possède un fond rose (#d83a77) En effet j’ai voulu créer un site à l’usage très rapide et très simple. Sur ma palette de couleurs, le rose est celui qui ressort le plus. J’ai aimé le placer sur des zones importantes qui attirent l’œil et qui permettent à l’utilisateur de savoir très vite où il veut aller. Cas particulier Dans le cas ci-dessous, nous nous trouvons dans la partie « ils se sont adoptés » et il s’agit des aperçus des articles rédigés par les utilisateurs. Au survol de l’image à la souris, un aperçu du texte apparaitra et sera cliquable. A gauche : l’image au survol et à droite sans survol.

Charte graphique multimédia -Web Les formulaires Pour réaliser ce formulaire je me suis basé sur les critères étudiés précédemment en TP, dont par exemple le feedback immédiat avec l’affichage direct d’erreur ou de validation des données entrées. Dans la maquette cidessous, j’ai illustré différents cas d’utilisation possibles. Zones de saisie H 25px L max 317 px Fond #ffffff + ombre interne Texte New Cicle 12px Zones de saisie non sélectionnée Texte #bfa772 Zones de saisie sélectionnée Contour #634e42 2px Texte #634e42 Zones de saisie erreur Contour # e01335 2px

Charte graphique multimédia -Web Les éléments graphiques Icones Générales L’ensemble des icônes sont en aplat de couleur blanche. Ils sont simples pour faciliter la compréhension de l’utilisateur. Seul le lama comporte une touche de couleur : rose, car il s’agit de l’icône « mon compte » dédié à l’utilisateur. Il s’agit d’une catégorie spécifique et personnelle. Le rose le différencie du reste. Ils mesurent 28x28cm maximum. Icones Partage & Contact Ces icones sont spécifiques étant donné qu’il s’agit en fait des logos des sites de partages. J’ai uniquement pris soin de les adapter au style graphique de la page. Le seul icône ici est l’enveloppe, travaillé comme les autres en aplat de couleur blanche. J’ai souhaité intégrer un fond rond de couleur beige derrière ces icônes car il s’agit avant tout de bouton censé être rapide et facile d’utilisation MAIS AUSSI redirigeant l’utilisateur vers une autre page. Ils se différencient ainsi assez facilement de tout autre icônes/lien. Ils mesurent 30x30cm maximum. Puces Générable en css3, j’ai réalisé des puces très simples : des triangles vers le bas / sur le côté afin d’indiquer l’ouverture ou non du sujet. Et les listes à puces, comprennent des puces simples rondes de 3px Filets Sidebar : 272 px de large sur 1px de haut Filets Contenu : Les titres seront toujours accompagné d’une barre de soulignement équivalent à la largeur du contenu soit : 545 px de large sur 1 px de haut Filets Séparateur Menu/Contenu 860px de large sur 1 px de haut

Charte graphique multimédia -Web Les images / photos (style, usage) Les images et photographies ne doivent pas excéder un poids de 50 Ko pour alléger les temps de chargement des pages. Le logo est sur fond blanc et fait 140x140px et doit se trouver en haut à gauche de la page web. Le slogan est aligné à la moitié du logo. Image « L’histoire du mois » Cette image doit être rognée (ou mesurer) L 272x H 163 px Il s’agit d’une miniature servant d’aperçu pour l’originale pouvant mesurer n’importe quelle taille. On retrouve d’autres aperçus dans les catégories « annonces » et « ils se sont adoptés » L’aperçu est de taille L 176 x H 224 px Dans les aperçus des annonces sur la page d’accueil on retrouve une autre image : L 176 x H 161 Ci-dessous l’image du slider de la page d’accueil. Elle contient les dernières actualités du site. Elle possède un code graphique à elle-même puisqu’elle devra contenir obligatoirement un titre type « Sélection spéciale Rouquins » et devra être aux couleurs du site. Les polices appliquées sont les mêmes que pour l’ensemble du site, et l’utilisation de la police attribué au texte spécifique est de rigueur pour certains mots clés à mettre en avant : « Rouquins ».

Charte graphique multimédia -Web Le pied de page Il comporte la hiérarchie en termes de menu et de liens internes au site. J’ai repris les codes typographiques et graphiques avec les filets, la typo etc.

Charte graphique multimédia -Web La grille de composition En fonction des différentes résolutions, la taille du fond blanc de contenu change, mais les éléments internes eux ne changent pas. C’est pourquoi j’indiquerai par la suite uniquement les proportions autres que celles des éléments internes. Écrans d’une largeur de 1800px 1214 px 272 px 545 px 60px 534 px 35px 67px 175 px 280px 310px 10px 600px 10px 35px

Charte graphique multimédia -Web Écrans d’une largeur de 1000px 985 px 57 px 287 px 57 px 57 px

Charte graphique multimédia -Web Écrans d’une largeur de 600px Pour cette résolution, la sidebar disparait pour gagner de la place et faciliter l’utilisation de la page à l’utilisateur. 600 px 25 px 56 px 25 px

#634e42 presentations

Add a comment

Related presentations

My Music Magazine Pitch

My Music Magazine Pitch

October 30, 2014

music mag pitch

Questionaire charts

Questionaire charts

November 4, 2014

bk

Final research

Final research

November 5, 2014

final research

Cersaie 2014

Cersaie 2014

October 30, 2014

allestimento in cartone per il Cersaie 2014 alberi in cartone scultura in cartone

Quarta turma do workshop de Infografia, ministrado por Beatriz Blanco e Marcos Sin...

Related pages

Charte graphique — Wikipédia

La charte graphique dont la dénomination correcte est cahier des normes ... Exemple de contenu de charte graphique Internet/intranet ou multimédia ...
Read more

Charte graphique / Web design - Prestataires.com

Charte graphique / Web design. La charte graphique est un ... Exemple de contenu Charte graphique internet/intranet ou multimédia. La charte graphique ...
Read more

Charte graphique DecoFlash - EK-print-webdesign

Développement web et intégration multimédia. Accueil; ... Charte graphique ... Site internet & concept multimédia; Création webdesign et charte graphique;
Read more

GRAPHISTE PRINT & WEB - hakadesign - agence multimédia ...

hakadesign est un studio de création graphique multimédia. Nous répondons à 360° à vos besoins en communication visuelle : logo, charte graphique ...
Read more

Magelis - Communication, audit, création, conception ...

Plus qu'une web agency, Magelis est une agence en communication multimédia au service des entreprises, des collectivités territoriales, des institutions.
Read more

Web design Conception logo graphique designer conception ...

Web design Conception graphique web conception de charte graphique de site web design
Read more

pixels-et-compagnie, le site de Bernard Pourchet graphiste ...

etude, conception, realisation de site web et tout document graphique. modification et habillage de site existant, creation de charte graphique, identite ...
Read more

Webdesign Création de charte graphique de site internet ...

Webdesign Création graphique web conception de charte graphique de site webdesign creation ... E-commerce & Multimédia: Création Web: Sites dynamiques:
Read more

Web design et charte graphique | Tebourba | Tayara.tn

Une agence Web offre des services de Web design et charte graphique pour les particuliers et les PME, avec une équipe jeune et créative. • Une conception
Read more

Acrofish - Web agency Paris - Studio de création ...

Studio de création multimedia. Notre web agency Acrofish met à votre disposition sa ... CD carte, charte graphique, plaquette, carte de visite, ...
Read more