Mon blog à moi

A quoi sert le Design Graphique sur un site web ?
Un design graphique réussi sur un site web entraîne quatre impacts positifs :
1 - identification du site,
2 - apparence professionnelle suscitant la confiance,
3 - amélioration du repérage des éléments de navigation,
4 - valeur ajoutée au contenu textuel.
En contrepartie, certaines outrances peuvent détruire ces acquis en amenant une perturbation de
la qualité de la consultation des pages. Tout est affaire d'équilibre.
Qu'entendre par « Design Graphique » :
Il ne faut surtout pas réduire à la présence d'illustrations le design graphique (ou design visuel)
d'un site web. Par « design graphique », il faut comprendre les éléments participant à l'impression
visuelle laissée par un site au sens large :
- gabarit général des pages,
- présence d'illustrations (statiques ou animées) au sein du gabarit des pages ou de leur contenu,
- design de la navigation (textuel, boutons ou icônes),
- distinction entre les zones de chaque page,
- couleurs de fond de page et de texte,
- choix des polices et des tailles de caractères,
- etc...
De plus, les principes conceptuels techniques généraux du site participent de son apparence générale
: emploi restreint ou généralisé de technologies d'animation pour le contenu ou la navigation,
ou au contraire prédominance du HTML, conduiront à définir des identités visuelles
radicalement différentes.
Le Design Graphique, source d'identification
Le premier rôle du design visuel est de permettre une parfaite identification du site sur lequel on
se trouve, et ce même si on n'y arrive pas par la page d'accueil. Par conséquent, le logo de l'émetteur
du site, sa marque, doivent être aisément repérables, en partie supérieure de la page. De
plus, Les choix de couleur et de composition de page devront permettre d'éviter toute confusion
entre l'apparence d'un site et celui de ses concurrents directs (identification « différentielle »). En
contrepartie, une galaxie de sites appartenant à un même univers (par exemple un réseau d'hôtels
indépendants mais affiliés au même réseau de vente) ont tout intérêt à unifier le « look and feel »
de leur site pour mettre en avant leurs avantages communs (identification par association).
Le Design Graphique, source de confiance :
Sous certaines conditions, un bon design visuel peut améliorer la confiance du visiteur dans
l'émetteur du site (toutes choses égales par ailleurs, cela ne suffit pas). Comment ? En prodiguant
un gabarit de page constant au travers des pages et une composition rigoureuse et précise de
celles ci. Un site dont la composition de page ferait trop « patchwork » ou souffrirait d'imprécisions
graves verrait son potentiel de diffusion de confiance sérieusement entamé : un site au look professionnel
véhiculera plus facilement une image professionnelle de la société qui l'édite.
Le Design Graphique, source d'ergonomie :
Ce point est essentiel : un bon design graphique doit permettre de repérer facilement les choix de
navigation offerts à l'internaute, et de distinguer clairement les zones dédiées au contenu des
zones "fonctionnelles" :
• navigation « contextuelle » (c'est à dire en rapport avec le contenu, par exemple les « liens associés
»)
• navigation structurelle (les liens qui seront invariants tout au long du site, qui servent de repère
permanent à l'internaute)
Trop de sites rendent difficile cette distinction par des mauvais choix de polices, de contraste entre
fond et texte, par un mauvais design des boutons, etc...
De plus, certains sites, en voulant « en mettre trop » sur chaque page, rendent la navigation peu
compréhensible et réduisent considérablement l'espace-écran dédié au contenu. Mettre en valeur
le contenu et simplifier la navigation suppose, au contraire, de s'en tenir à un nombre raisonnable
de zones fonctionnelles. Les pages ou les choix de navigation sont les plus nombreux doivent être
dédiées à cela (ex : yahoo et de nombreux portails) et dans ce cas, les choix de navigation deviennent
le contenu du site : la navigation devient alors très "contextuelle" et donc efficace. (cf veblog,
comment naviguent les internautes)
L'illustration peut souvent être un excellent complément de l'information textuelle : une bonne
image vaut mieux qu'un long discours.
Lorsque une photo, un schéma, un dessin, ou trois scènes de bande dessinée illustrent en un
coup d'oeil des concepts difficiles à décrire en mode textuel, alors le procédé vaut d'être employé.
Le coté obscur du Design Graphique : source de perturbation
Mal utilisé, le design graphique d'un site peut annihiler les bons côtés vus précédemment en détériorant
l'expérience utilisateur :
- perturbation par la fatigue : des choix de couleurs trop vives, des contrastes trop brutaux (caractères
verts sur fond rouge) ou au contraire trop mous (caractères marron clairs sur fond blanc «
cassé »), ou encore trop d'animations sur les pages vont engendrer une fatigue visuelle rapide de
l'internaute, qui ne sera pas ainsi incité à approfondir sa navigation sur le site. De plus, trop de richesse
colorimétrique finit par contrarier la lecture des pages.
la multiplication excessive des signaux ("bruit de fond visuel") : Trop d'images, spécialement trop
d'images animées, non directement reliées au contenu, réduisent les facultés de bien percevoir
les informations utiles. Des études dans lesquelles des caméras suivaient le mouvement des yeux
de l'internaute ont montré que celui ci recherche prioritairement le texte qui l'intéresse lorsqu'il arrive
sur une page. Aussi si ces renseignements textuels sont noyés au milieu d'autres signaux visuels,
l'internaute risque-t-il de ne pas les voir par effet de saturation.
Toutefois, Il convient de préciser que l'internaute développe assez vite des réflexes de défense
contre ces perturbations visuelles : la même étude a montré que celui ci ignore spontanément tout
ce qui s'apparente à une bannière de publicité (même si ce n'en est pas...) dans les pages qu'il visite.
Malgré tout, la présence d'images animées trop étroitement imbriquées dans le contenu
constitue une réelle barrière à la visibilité des informations.
Les images hors contenus doivent donc être limitées au maximum : l'identification, le look professionnel
des pages et la clarification entre zones décrites précédemment doivent s'opérer avec un
minimum de recours au graphisme. La sobriété est un facteur souvent déterminant de l'utilisabilité
d'un site, et donc de la qualité de l'expérience vécue par l'utilisateur.
Comme pour chaque élément de votre projet web, vous devez faire preuve de rigueur quant à l'intégration
des éléments de charte graphique dans votre site web. Pour chacun d'entre eux, vous
devrez vous poser les questions suivante :
Ce choix graphique contribue-t-il fortement à :
- identifier l'émetteur du site ?
- donner une apparence professionnelle au site ?
- clarifier les différentes zones de contenu et fonctionnelles des pages du site ?
- donner une place suffisante au contenu ?
- illustrer intelligemment le contenu ?
Et n'oubliez pas qu'une fois ces choix faits, seul un véritable test utilisateur (cf.veblog, pourquoi et
comment tester votre site) vous permettra de savoir s'ils ont été pertinents. Une conception excellente
sur le papier peut se révéler mauvaise vue de l'utilisateur, même si vous croyez avoir mis
tous les atouts méthodologiques de votre côté. Trouver le bon compromis entre apparence visuelle
et efficacité du design peut être une démarche nécessitant plusieurs tâtonnements avant de
parvenir à l'équilibre idéal.

Le secteur de la Communication Visuelle regroupe une foultitude de métiers spécifiques malgré les points communs que beaucoup partagent. Le développement de l’Industrie Multimédia a provoqué un développement considérable de la communication visuelle.

Les métiers de la Communication Visuelle :

• Le directeur artistique est chargé de contrôler l’ensemble de la conception graphique du message publicitaire. Il donne les directives aux roughmen, graphistes, illustrateurs, maquettistes, photographes. Il travaille dans la presse où il choisit la maquette du journal ; dans l’édition où il choisit la ligne graphique ; à la télévision, il sélectionne les décors ; dans la publicité, il travaille avec le concepteur-rédacteur qui écrit le message. La profession étant très convoitée, il faut compter des années d’expérience et des heures de travail...
  
  
  





• Le graphiste est un professionnel de la communication qui conçoit des solutions de communication visuelle. Il travaille sur le sens des messages à l'aide des formes graphiques qu'il utilise sur tout type de supports (CD, livre, logos, affiches...).
  Ses connaissances reposent sur la typographie, l'usage des signes et des images, l'art de la mise en page. Le graphiste peut s'exprimer dans le domaine de l'imprimé (édition), de l'interactivité (web, multimédia), de l'illustration ou de l'animation.
  
  Ne pas confondre le graphiste avec l'infographiste.
  
  
  
  
• L’infographiste est une personne qui maitrise le travail de l'image (2D, 3D, logiciels PAO, web, etc.). C'est un spécialiste de l'image et de l'informatique. Il peut finaliser le travail du graphiste à l'aide de l'outil informatique. Il est exécutant dans la plupart des cas.

• 
  Né des nouvelles technologies de l'information, le métier d'infographiste pourrait se définir au sens strict comme "graphiste en informatique". Pourtant il n'a pas forcément besoin d'être créatif contrairement au graphiste.
  
  
  
  

• Le web designer a pour mission la conceptions d'interfaces web : l’architecture interactionnelle, l’organisation des pages, l’arborescence et la navigation d’un site web. Il s’agit d’une phase essentielle dans la conception d'un site web. La conception d'un design web tient compte des contraintes spécifiques du support Internet en termes d'ergonomie, d’utilisabilité et d’accessibilité.
  Le web design réclame donc des compétences variées : en programmation, en ergonomie et en interactivité, ainsi qu'une bonne connaissances des contraintes techniques liées à ce domaine : respect des recommandations W3C, accessibilité, portabilité.

• Le design d'un site se présente sous forme de maquette fonctionnelle et de spécifications techniques. Celles-ci sont ensuite transformées, avec la maquette graphique, en lignes de code et images afin de s’afficher dans un navigateur web.
  
  
  

• Le maquettiste s’occupe de la mise en scène, en équilibrant le texte et l’image afin de bien communiquer le message.
  
  
  

• Le roughman transcrit l’effet visuel d’une campagne sur des boards ou planches à dessin avec des croquis afin de proposer un projet au client. Si l’agence est sélectionnée par ce dernier, le créatif se sert du travail « en rough « pour dessiner la campagne. Il travaille en indépendant ou comme salarié.
  
  
  

• L’illustrateur crée une image ou un dessin pour éclairer une idée. Il travaille dans la presse, la publicité, le design, l’édition, et, la plupart du temps en free-lance. Il se spécialise sur un sujet ou un style. Il est difficile de vivre du métier d’illustrateur, c’est pourquoi il est très polyvalent .
  
  
  

• L’animateur 3D est, avec le développement des images de synthèses, un métier en plein développement. Cet animateur-infographiste part d’un squelette sur écran et non d’un dessin, qu’il anime ensuite en programmant l’ordinateur, puis qu’il décore. Il travaille dans l’animation, la publicité, les séries, les longs métrages. Il s’agit d’un métier nouveau et bien rémunéré.

• 
  
  
• L’animateur de dessins animés met en mouvement des personnages et des objets pour les insérer dans un dessin animé.

• Le métier de développeur programmeur consiste à développer et programmer des applications informatiques, c'est à dire transformer un besoin d'une clientèle en solution informatique et ce dans un langage informatique qu'il choisit.
  Ce métier d'analyste-programmeur demande des connaissances techniques spécifiques en développement informatique, en particulier en programmation objet et en génie logiciel. La connaissance de la modélisation UML est généralement nécessaire.

Il maîtrise plusieurs langages de programmation tels que le Java et son environnement, le Framework .NET ou encore le C. Sa maîtrise de la langue anglaise est très très importante car tous les manuels informatiques sur la programmation sont en anglais, et les gens qu'il pourrait cotoyer dans le milieu parlent également anglais.


Le journaliste

Les risques de santé...

Source : Wikipedia, monsitegratuit.com

Quelques règles typographiques pour rappel
Les règles de typographie sont simplifiées sur Internet : accentuation, ponctuation, espaces,
casse. Adopter un code typographique présente l'avantage d'uniformiser le rendu
écrit et de crédibiliser le contenu en garantissant un confort de lecture à l'internaute.

1. La police

- Police avec empattements (exemple : Times new roman,…)
- Police sans empattement (exemple : Arial,…)

2. La mise en valeur du texte

1. Au départ du document, l’on saisit le texte au kilomètre sans mise en forme.
2. Ensuite on met en valeur des mots, des paragraphes en se posant bien la question de la force du message que je désire faire passer.

• Comment s’y prend-t-on ?

- Gras

- Italique : dans le corps d’un texte, les italiques sont utilisés dans les cas suivants :

• Titre d’une oeuvre (l’Avare) ;
• Titre d’une publication, journal, périodique, etc. (Média) ;
• Les mots étrangers (Windows) ;
• Les dédicaces (À mon directeur préféré) ;
• Les notes de musique (mais non les signes d’altération) (do) (si b) sauf #.
  
  L’usage fait également qu’on utilise les Italiques pour mettre en évidence un paragraphe, une remarque.

- Souligné : Le souligné n’est jamais utilisé autant sur un périodique papier que sur un périodique numérique. Sur le web le souligné peut-être apparenté à un lien hypertexte.

- La couleur : Pourquoi en utiliser ? Que va-t-elle m’apporter ? Va-t-elle vraiment mettre en valeur le message que je désire faire passer ?


3. MAJUSCULE ou minuscule

Les mots en majuscule entrainent une monotonie au niveau de la lecture. En français, la majuscule s’utilise dans les conditions suivantes :

- Premier mot d’une phrase (ou d’un vers) ;
- Début d’une citation, d’un dicton, d’une devise, d’un aphorisme ;
- Noms propres, prénoms, surnoms, pseudonymes, patronymes ;
- Noms de marques et de modèles de marque ;
- Noms des villes, pays, lieux-dits, peuples et habitants des régions ;
- Noms des partis politiques et ordres civils, militaires et religieux ;
- Noms historiques ;
- Noms des monuments publics ;
- Noms des sociétés, établissements, etc.
- Les sigles ;
- Les titres d’ouvrages ;
- Les points cardinaux (s’ils désignent une région).

On n’utilisera pas les majuscules pour :

- Les noms des mois (janvier, thermidor) ;
- Les noms des jours (lundi, mercredi) ;
- Les titres et qualités des chefs d’état ou de gouvernement (le premier ministre) ;
- Les déterminatifs et adjectifs (la Légion d’honneur, la Cour suprême).

Contrairement à un usage répandu, la majuscule est inutile après :

- Les deux-points ;
- Un point d’interrogation ou d’exclamation qui ne termine pas la phrase.

4. La ponctuation

La ponctuation des signes simples et doubles :

Les signes simples sont :

la virgule ,
le point .
les points de suspension ...

La règle est : "signe simple, espace simple" ; l'espace se trouve après le signe.

Les signes doubles sont :

le point-virgule ;
les deux-points :
le point d'exclamation !
le point d'interrogation ?

La règle est : "signe double, espace double" (une espace avant, une espace après).

Néanmoins, sur Internet, mieux vaut ne pas intégrer d’espace pour éviter le retour à la ligne d’un élément isolé.
Autre solution : ajouter une espace insécable en HTML représentée par &nbsp ;
La ponctuation des parenthèses, guillemets, crochets, accolades
Laisser des espaces à l'extérieur, mais pas à l'intérieur.
2 exceptions :
il n’y a pas d'espace entre la parenthèse finale et la ponctuation simple qui suit
pour les guillemets à la française « », appliquer la règle des signes doubles, soit des espaces
avant et après sauf s'ils sont suivis d'une ponctuation simple
Quelle ponctuation pour les listes à puces et à numéros ?
Pour les listes, il faut laisser une espace entre le tiret et le mot qui suit ; pour terminer une liste, 2
solutions sont possibles avec une préférence pour la seconde:
1) pas de virgule à la fin de chaque élément de la liste, ni de point à la fin :
ligne 1
ligne 2
2) un point-virgule à la fin de chaque élément de la liste, un point à la fin :
ligne 1 ;
ligne 2. 

5. Les images

Pensez bien à diminuer votre image avant de l’utiliser sur un diaporama ou un article numérique.
Le fait de la diminuer sur votre support (un article par exemple) n’allège pas le poids de celle-ci.
Résolution de l’image : 72 dpi
Taille : Suivant votre besoin. La taille d’un acran est de 800x600 pixels en moyenne
Extention
GIF : Adapté pour des dessins comportant peu de couleur
JPEG : Adapté pour les photos
PNG : Adapté pour les photos, gère en plus la transparence

Le débutant


Salutations,

Je suis Billal Adel BELKACEM. J'ai 2 prénoms, certains utilisent l'un, d'autres l'autre, donc aucune différence pour moi.

J'habite à Tremblay-en-France en Seine Saint-Denis, ce qui me coûte environ une heure de trajet chaque matin et soir pour me rendre de chez moi au CNA-CEFAG et inversement. En parlant du CNA justement, je commence une nouvelle formation dans le web. Originaire d'une formation Marketing en cursus scolaire puis de Graphisme lors d'une précédente formation au CNA. L'apprentissage du web peut s'avérer être un bon complément au graphisme, pour promouvoir mes travaux personnels "online" .
Les connaissances en Design précédemment acquises forment indéniablement un plus dans la création d'un site.

J'aime le café, fumer et dormir. Je n'aime pas les réveils (fatalement difficiles)

Je pense que c'est tout pour le moment.