Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Design Web

No description
by

Franck Bonnard

on 24 September 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Design Web

Design
1. Concevoir l'arborescence comme un arbregénéalogique
2. Homogénéiser la granularité des rubriques de même niveau
3. Eviter à tout prix les contenus dupliqués
4. Ne pas viser trop large
5. Ne pas viser trop profond non plu
6. Equilibrer la largeur et la profondeur del'arborescence
7. Associer une page à chaque niveau de l'arborescence
8. Refléter l'arborescence dans l'URL des pages
Étapes d'un projet web
Qui est cette entreprise ?
Que fait-elle ?
Quelle est sa philosophie ?
Quel est l’objectif du site ?
Quelle est la cible ?
Quel message dois-je faire passer ?
L’objectif du site est le suivant : le client souhaite pouvoir présenter aux visiteurs son entreprise, son activité et qu’est-ce que ses thés ont de spécial. Suite à cela il souhaite que les clients potentiels le contactent via son site ou viennent directement dans une de ses 6 boutiques en France.
La cible est telle que le client la présente : l’activité de l’entreprise Real Tea est orienté vers les passionnés et les
Le message que le site doit faire passer : puisant son origine dans la longue tradition des maîtres de thé chinois, l’entreprise vend un thé de qualité unique et qu’on ne trouve nul part ailleurs. Véritables amoureux du thé, si vous venez
dans leur boutique vous pourrez également déguster et recevoir des conseils sur la dégustation du thé.
Composition Web
Il faut donc pour commencer que le design soit en concordance avec l’image de la marque et le message qu’elle souhaite faire passer. Il faut ensuite hiérarchiser les informations de façon à mettre en avant celles qui sont primordiales et de guider le visiteur à travers la page d’accueil.
Etape 1 : Première étape : Déterminer vos objectifs
Vous désirez un site Internet pour :
Faire la promotion de votre entreprise?
Acquérir de nouveaux clients?
Diffuser de l'information générale?
Étape 2 : Cibler votre public
Qui désirez-vous atteindre avec votre site Web?
des clients potentiels?
des fournisseurs?
Étape 3 : Définir votre budget pour la réalisation et la mise à jour du site Internet
En plus des frais de conception et de réalisation, il faut prévoir les frais pour votre nom dedomaine ainsi que d'hébergement de votre site Internet. Si nécessaire, prévoir également desfrais pour les mises à jour.
Étape 4 : élaborer l'arborescence (architecture) de votre site
Étape 5 : Trouver une identité Web
Visitez quelques sites Internet et établissez une liste de ceux qui, à vos yeux, se sontdémarqués. Faites de même avec ceux qui vous ont laissé une mauvaise impression. Legraphisme ainsi que la navigation dans votre site sont vos atouts majeurs pour vous distinguerde la concurrence. N'oubliez pas... la majorité de vos visiteurs se rendent sur votre site Internetpour se faire une opinion de votre entreprise, certains visiteurs prennent même une décision à cemoment.
Étape 6 : Rédiger vos textes et préparer le contenu
Soyez bref et concis. Prenez exemple sur votre propre comportement lorsque vous naviguez sur le web. Les Internautes ne sont pas patients et désirent obtenir de l'information pertinente et rapide d'accès.
HEADER
Il ne doit pas être d’une hauteur trop importante pour laisser visible au maximum le reste de la page sans que les internautes aient besoin de descendre dans la page à l’aide de l’ascenseur. Ainsi en arrivant sur la page, l’internaute a directement sous les yeux toutes les informations importantes.
Le logo de l’entreprise : le mettre en valeur au maximum sans pour autant exagérer sa taille. > Un slogan : le slogan doit définir au maximum l’activité de l’entre­prise tout en étant vendeur. Il est très important car c’est la première chose que va lire l’internaute, le slogan doit donc être évocateur et persuasif. > Un visuel : celui-ci aussi est très important. C’est lui qui va donner le ton à l’ensemble du template. Le visuel peut être abstrait ou figuratif, quoique dans la plupart du temps il est conseillé d’avoir un visuel illustrant l’entreprise mais en restant un peu vague. C’est lui qui va donner le véritable aspect professionnel au tem­plate. Un mauvais visuel gâchera l’ensemble du template.
ESSAYER D’Y FAIRE FIGURER :
LE MENU PRINCIPAL
Le menu principal est quelquefois placé au-dessus du bandeau. Je vous le déconseille fortement pour des raisons d’ergonomie. Lorsqu’une page est un peu longue, si le menu est trop en hauteur, l’internaute devra remonter beaucoup plus la page pour y accéder, ce qui n’est pas ergonomique. Lorsque vous réalisez le menu, pensez de faire figurer les trois états principaux des liens : le lien non survolé, le lien au survol et le lien actif. Si certains états sont les mêmes, pensez à le préciser. Il faut également éviter les titres de rubriques à rallonge dans le menu.
LE CHAMP DE RECHERCHE
Si le commanditaire le souhaite, le champ de recherche est souvent placé à droite du menu principal, dans le bandeau ou dans la partie droite du template.
LA ZONE DE CONTENU
La zone de contenu est la zone réservée à l’ensemble du contenu du site. La page d’accueil est l’élément le plus important dans le référencement. Il ne faut donc pas hésiter à y mettre un nombre conséquent de contenu, même si celle-ci sera un peu haute. Toujours sur la page d’accueil, il est conseillé d’y faire figurer les principales offres de la société. Cela se fait souvent au travers de trois ou quatre cases alignées horizontalement. Ne pas omettre d’inclure dans chaque offre un lien menant à la page concernée. Il ne faut pas oublier de montrer dans la zone de contenu les différents éléments que le prestataire est susceptible d’avoir besoin pour l’édition de la page : l’aspect des titres, de niveau un et de niveau deux (H1 et H2); l’aspect des puces au travers d’une liste; l’aspect des images dans le contenu (bords arrondies ? Contours ? Ombrages ? …) et l’aspect des liens dans le contenu et leurs différents états (non survolé, au survol, déjà cliqué)
COLONNES DE GAUCHE ET DE DROITE
Les colonnes sont conseillées pour deux raisons :
elles permettent d’y insérer d’autres types de contenus et elles permettent de diminuer la largeur de la zone de contenu. Les écrans sont de plus en plus larges et il n’est pas agréable de lire des lignes trop longues. Les colonnes permettent de résoudre ce problème tout en ayant un template d’une largeur conséquente. Deux colonnes ne sont pas forcément nécessaires, une seule peut suffire. Tout dépend de vos intentions.
le rappel du menu principal avec les sous-menu visibles dans la rubrique où l’on se trouve (toujours dans la colonne de gauche). > Les actualités : très souvent dans la colonne de droite. > Des offres quelconques. > Très important, un bloc de Call to Action : c’est un bloc affordant attirant l’attention de l’internaute afin de l’inciter à cliquer. Généralement se sont des blocs du type « Nous contacter » ou « Devis gratuit ». > Un rappel des coordonnées de l’entreprise
LE FOOTER
Dans le footer il est conseillé de faire figurer les liens vers les rubriques suivantes : > Accueil > Plan du site (le plan du site était avant très utile pour le référencement. Maintenant il l’est moins mais il peut être également utile pour l’internaute pour naviguer d’une autre façon).
> Mentions légales (les mentions légales sont obligatoires sur tout site Internet, aussi petit qu’il peut être.) > Contact
> Ne pas hésiter à mettre également un lien vers votre société ou votre site personnel. C’est vivement conseillé pour le référencement et pour gagner d’autres clients !
Principes inhérents de lecture iconique
La Gestalt est une science qui étudie les phénomènes liés à la lecture que font les humains des images. Sans le savoir, nous en avons parlé depuis le tout début de cette formation et, bien que les notions soient souvent excessivement complexes, nous allons fréquemment nous référer à ses grands principes.
Mécanique de la lecture
L'humain lit naturellement de gauche à droite et de haut en bas, parcourant les documents des yeux selon un trajet en forme de «Z». Cela est vrai même pour les cultures qui écrivent de bas en haut ou de droite à gauche. Le cerveau cherche le début des choses à partir du coin supérieur gauche et l'oeil, paresseux, glisse naturellement sur la diagonale descendante vers le coin inférieur droit.
Lecture par sauts et zones d'intérêt
L'oeil cherche tout d'abord une zone d'intérêt (élément captant l'attention) puis, ayant été captivé, cherche en périphérie d'autres zones d'intérêt. Le regard passera ainsi d'une zone d'intérêt à l'autre. C'est en gérant les zones d'intérêt et l'espace négatif qu'il nous sera possible de guider la lecture.
L'oeil paresseux
On dit que l'oeil est paresseux, c'est-à-dire que s'il ne trouve pas de zone d'intérêt, le regard coulera naturellement sur la diagonale descendante jusqu'à quitter le cadre. C'est ce phénomène qui fait que nous tournons machinalement les page d'un magazine sans s'arrêter puisque rien n'accroche notre regard. Outre les zones d'intérêt, les lignes dominantes de la composition (comme les lignes de perspectives) peuvent permettre de guider le regard du lecteur.
Le phénomène de rétention
Comme l'oeil paresseux laisse le regard couler hors du cadre à défaut de zones d'intérêt, il est nécessaire de bloquer la chute hors du cadre à l'aide d'un élément qui freinera ce glissement naturel. L'on pourra aussi créer un cycle de manière à ce que le regard revienne à son point de départ afin de garder le lecteur aussi longtemps que possible dans la composition.
Objectifs premiers du designer
Lorsque nous créer une composition, il y a donc trois buts principaux à atteindre par le choix et le positionnement des éléments dans le cadre:
Capter l'attention (centre d'intérêt)
Il faut tout d'abord attirer l'attention du lecteur par différents moyens que nous explorerons. Si on n'attire pas l'attention, personne ne s'attardera au message de notre communication.
Susciter de l'intérêt
Par différentes techniques, il faudra créer des zones d'intérêt et les positionner de manière àinciter la lecture en la facilitant.
Favoriser le phénomène de rétention
Il faut enfin tout mettre en oeuvre afin de conserver l'attention du lecteur le plus longtemps.
La composition picturale
La composition picturale consiste à positionner stratégiquement les éléments formels d'une communication visuelle en fonction de la Gestalt afin d'atteindre nos objectifs de communication. Plusieurs règles vous aideront à atteindre ces objectifs et certaines sont des incontournables.
La règle des tiers
La règle des tiers est issue du fait que l'être humain perçois comme esthétique (agréable à l'oeil) les compostions asymétriques basée sur un rapport approximatif de un tiers / deux tiers. Cette découverte est redevable à Fibonacci qui a établi le nombre d'or aussi nommé la divine proportion (1202). Cette règle qui échappe aux sciences connues a servi à construire les plus grands et les plus impressionnants temples et on s'est rapidement rendu compte que l'on retrouve cette règle appliquée dans l'architecture de la nature.
Ces lignes imaginaires (lignes de force) sont utilisées comme guides dans le positionnement des éléments d'une composition. Les éléments positionnés sur une de ces lignes auront plus d'importance que ceux qui ne le sont pas.On positionnera l'horizon sur une ou l'autre des lignes horizontales en accordant plus d'espace là où se trouve l'action. On positionnera aussi généralement les yeux d'un personnage sur la ligne supérieure.
On nomme l'intersection de ces lignes les points de force. Ils déterminent lesm positions les plus puissantes d'une composition. C'est normalement sur un de ces points de force que seront concentrés l'élément important de la communication.
On peut aussi ajouter des lignes centrales verticale et horizontale permettant de déterminer le centre mathématique de la composition.
Dans l'exemple ci-dessus, une seule ouverture est disponible dans le cadre (un bout ce ciel) menant à un centre d'intérêt chargé de capter l'attention (visage d'Echo). Les lignes de l'oeuvre forcent le regard vers le coin inférieur droit et plus particulièrement Echo qui regarde vers Narcisse selon la diagonale descendante. Un cycle est ici créer alors que Narcisse se regarde se regarder. En fin, des éléments sur la droite (branches et roches) empêchent le regard de glisser hors du cadre.
Ci-dessus, le premier centre d'intérêt, Echo, est située à l'écart de la ligne de force, à proximité de la bordure du cadre. Cela fait en sorte que sa puissance dans la composition est modeste. Elle est tournée vers le centre de l'oeuvre et regarde dans l'axe de la diagonale descendante, ce que le lecteur fait aussi, naturellement. Ce personnage sert donc d'abord à capter l'attention, puis à diriger le regard du lecteur. Le second centre d'intérêt, Narcisse épris de son propre reflet, positionné sur un point de force, apparaît clairement comme l'élément le plus important de la composition. Il s'agit du point focal, là où le regard du lecteur est guidé.Vous remarquerez que les autres éléments sont utilisés pour établir le contexte afin d'éviter la confusion. En outre, tous les éléments servent à guider le regard vers le point focal. J'attire votre attention sur l'angle des troncs d'arbres, tous orientés vers Narcisse, de même que les herbes en avant-plan. Même l'espace vide, devant Echo, a la forme d'un triangle pointant vers Narcisse.
Principe de subordination
Chacun des éléments étant en relations à l'intérieur d'une composition, le principe de subordination établit unordre hiérarchique entre-eux. On compte trois niveaux de subordination:
Prédominant:
Élément de la composition qui a le plus d'importance. Il se situe généralement en avant plan et possède une position de force. Il est presque en point focal.
Dominant:
Subordonné:
Élément de la composition important sans être prédominant qui sert au prédominant, par exemple, en y guidant le regard du lecteur. Il est généralement situé en plan médian.
Élément le moins important de la composition servant très souvent à établir le contexte. Il se trouve généralement en arrière-plan.
Dans la photographie ci-contre, la jeune fille (et le poney) est éléments pré dominant, la femme qui la regarde constitue l’élément secondaire (dominant) et les autres gens et les autres animaux dans le décor sont des subordonnées. Si l'on analyse la photographie en tenant compte de la loi des tiers, il apparait évident que la jeune fille, positionnée sur la première ligne de force verticale, est le sujet, éléments principal de la composition. Le poney, bien que faisant partie du groupe pré dominant, est e carte de la ligne de force vers la bordure du cadre. Il en va de me me de la femme, en retrait, près de la bordure (à droite). La femme est subordonnée à la jeune fille qu'elle regarde et assure ainsi que le regard ne coule pas hors de l'image. Les autres éléments ne servent ici qu’à nous placer en contexte sans déranger la lecture de l'image.
L’enseignement du Design a commence en Allemagne dans les annees 1920 a l’ecole Bauhaus. En Amerique, le design est apparu apres la 2e guerre mondiale. On peut dire que le design est une discipline relativement jeune.
La composition consiste en l'organisation méthodique des éléments d'une composition dans la production d'une communication visuelle destinée à transmettre un message et d'atteindre certains objectifs. Cette organisation
des éléments formels doivent obéir à certains principes de base qui assureront, jusqu'à un certain point, l'efficacité de vos résultats et doit tendre vers l'unité, l'équilibre et l'harmonie.
Le centre d'intérêt
Une composition peut être organisée autour d'un centre d'intérêt, un élément principal qui attire l'attention par sa position, sa forme, sa couleur ou son contraste. Le centre d'intérêt peut se situer sur les lignes verticales et horizontales, en plein centre d'un des neufs carreaux formés par les lignes de force ou sur un point de force. Il peut aussi se situer en bordure intérieur du
cadre (un centimètre de la bordure). Le centre d'intérêt peut se situer sur tous les croisements de toutes ces lignes.
Le rappel
Le rappel est un élément identique a celui du centre d'intérêt, mais de forme, de couleur ou de tonalité affaiblie qui sert à compléter, à prolonger ou à intensifier l'idée, l'action ou la situation.
Le schéma
Le schéma d'une composition consiste en sa structure simplifiée illustrant la mise en place des éléments à l'aide de formes simples variées (rectangle, triangle, ellipse ou typographie.
L'équilibre
L’équilibre d'une composition, c'est la disposition d'e le ments dans un design en fonction de leur poids visuel. Dans une composition, l'équilibre est basé sur le principe fondamental de compensation des masses, soit par rapport aux axes de symétrie centraux, soit par rapport au centre d'intérêt. L'équilibre de la composition s'obtient par la compensation des formes, des couleurs, des ombres et des lumières. Le déséquilibre d'une composition est possible pour peu qu'il soit intentionnel et bien marqué. La composition peut être symétrique ou asymétrique, elle peut être en pleine page (les éléments sont dans le format), tangente (les éléments sont tangents aux bords), en débordement (les éléments sortent du format, coupés par les bords).
Equilibre symetrique (equilibre formel)
Le rythme
Rythme régulier:
Rythme fluide:
La répétition d'éléments identiques, la succession de plusieurs rappels du centre d'intérêt peut créer un rythme dynamisant la composition. Le rythme naît de la répétition d'éléments identiques mais aussi de l'alternance d'éléments dissemblables (formes, couleurs, tonalités). Le rythme peut être qualifié de régulier, de fluide ou de progressif.
Donne une direction au mouvement (souvent plus organique).
Les intervalles entre les elements (souvent leséléments eux- mêmes) sont similaires en taille ou en longueur.
Un rythme progressif affiche une séquence de formes au travers une progression d’étapes.
L'harmonie
On atteint l'harmonie, dans une composition picturale, par un rapport esthétique dominant et récessif des formes, des lignes, des couleurs ou des tonalités. Ce rapport peut être de 2/3 - 1/3 (deux tiers de tons foncés / un tiers de tons clairs pour une ambiance d'ombre par exemple, etc.) Il peut être complémentaire (dominante de tons foncés et juste un point lumineux, pour une ambiance nocturne par exemple,etc.)
L'unité
La composition doit avoir une unité graphique, picturale, formelle et linéaire. Tous les éléments doivent être lié entre eux dans un objectif communicationnel ou esthétique. Pour une composition riche l'unité se fera dans la variété des formes, des éléments, des couleurs, etc. Unité ne veut pas dire uniformité. Il faudra y ajouter de la variété.Le concept d’unité réside dans la relation entre la composition et les différentes parties qui la composent. Elle vise a créer une composition globale a l'aide de plusieurs éléments. L'unité cherche donc à lier entre eux des éléments afin de créer un tout. Sans unité , tout ce que vous avez, c'est plusieurs éléments sur un plan, sans organisation, ne produisant pas de sens. L'unité repose sur plusieurs phénomènes de la Gestalt dont nous vous présentons ici les plus usités en design graphique.
Complétion:
Réflexe du cerveau qui tend a combler le vide quand il perçoit des manques dans une forme ou un objet. Dans les exemples, nous comblons compulsivement le vide pour créer les formes dans notre esprit.
Continuité :
Le concept de continuité veut que lorsque l’on commence a regarder dans une direction, on continue de le faire jusqu’a ce que quelque chose d'autre de plus important attire votre attention. La perspective (lignes directionnelles prédominantes) servent a guider le regard du spectateur dans une direction donnée. En outre, la direction du regard des éléments humains ou animaux dans la composition peut avoir un effet similaire.
Dans la photographie ci-dessus, l'oeil suit naturellement la diagonale descendante, mais le regard est capte par le couple et évite que le regard glisse hors du cadre.
Simplicité :
Devant un problème visuel le cerveau cherche toujours la solution la plus simple parce que le monde est visuellement si complexe qu’il est impossible d’en extraire toute l’information sans une simplification préalable. Lorsque l'on observe une composition, le cerveau a tendance a ordonner les éléments afin de simplifier et de clarifier leur lecture. Cette simplification s’effectue en regroupant les entités qui présentent des caractéristiques communes. Le concept de simplicité nous permet d'assembler des éléments identiques pour créer une unité . Par exemple, une surface compose e de carrés identiques, sera perçue par notre cerveau comme une surface ''globale'' et non comme une multitude de petits carrés.
Proximité :
Le cerveau tend a regrouper les e le ments place s les uns pre s des autres pourformer un ensemble cohe rent. Ces e le ments sont ainsi perc us comme ayant unrapport entre eux. Ils forment alors dans notre esprit des sous- ensembles qui seconjuguent comme un tout.
Alignement :
Bien que de centrer les contenus soit parfois un procéde efficace, il est le plus souvent la marque d'un graphiste novice. Il est important d'apprendre a bien aligner les contenus textuels permettant de créer des composition dynamiques,attrayantes et efficaces. Un mauvais alignement donne une impression de travail bâclé et désorganisé . Étaler trop d'éléments peut avoir un effet similaire. Il est cependant acceptable de briser l'alignement lorsque c'est pour créer un effet spécifique comme pour créer une tension visuelle ou pour attirer l'attention sur une région particulière d'une composition. L'alignement permet, entre autre chose, de lier des éléments entre-eux. Par exemple, un lecteur comprendra que deux texte possédant le me me alignement et les me mes marges sont liés. Il en va de me me de textes possédant un retrait similaire. Un bon alignement est inapparent. La plupart des gens ne se rendent pas compte de l'alignement utilise si le travail est bien effectue . Ils sentent toute foisl orsque quelque chose cloche.
Alignement horizontal :
Dans ce type d'alignement, les marges de gauche et de droite sont égales (exactement ou visuellement). Il peut être appliqué sur toute la largeur d'une page ou a l'intérieur de colonnes. Cela n'implique pas nécessairement que les contenus soient centrés. Le texte peut être justifie a gauche et pas a droite. Dans ce cas, il faut faire attention a la quantité d'espace a la fin des lignes afin de ne pas déséquilibrer la composition.
Alignement vertical :
Dans l'alignement vertical, les marges supérieure et inférieures sont égales (exactement ou visuellement). Ce type d'alignement peut s'appliquer a une page entière ou a une portion seulement des contenus.
Alignement des bordures :
Ce type d'alignement nécessite que vous aligniez les contenus par rapport à leurs bordures (gauche, droite, haut ou bas).
Alignement par le centre :
L'alignement par le centre peut e tre applique verticalement, horizontalement ou les deux.
Alignement optique :
On a recours a ce type d'alignement quand les éléments d'une composition donnent l'impression que l'alignement exact est fausse. Dans un tel cas, l'on fausse volontairement l'alignement a fin de donner une impression d'alignement correct.
Similarité :
La similarité repose sur trois aspects des éléments : la forme, la dimension et la couleur. Le cerveau a tendance a regrouper les éléments se ressemblant. Par exemple, si tous les éléments d’une composition sont à égales distances, le regroupement se fera sur la ressemblance de forme, de couleurs, de texture, de taille, etc.
Superposition:
La proximité la plus forte pouvant être atteinte dans une composition consiste en la superposition des éléments. Particulièrement lorsque deux éléments d'une même couleur sont superposés, ils semblent se fondre pour ne former qu'un seule élément de forme plus complexe. Lorsque deux éléments de couleurs différentes sont superposées, une illusion de profondeur réduite est produite. Des éléments qui se touchent constitue la seconde proximité la plus forte dans une composition.
Centre visuel :
Il y a équilibre symétrique (ou formel) lorsque le poids d’une composition se répartit uniformément autour d’un axe central, vertical ou horizontal. Les mêmes éléments sont disposés identiquement des deux côtés de l’axe (effet de miroir). Quand la symétrie est appliquée avec des formes similaires sans etre identiques, on parle de symétrie approximative. Il est aussi possible de créer une composition symétrique autour d’un point central. On parle alors de symétrie radiale.
Le centre visuel d'une composition est positionne légèrement plus haut et a droite que le centre réel. C’est vers la que tends naturellement a être le point focal d'une composition (foyer).
Contraste (ou opposition) :
Le contraste est lié a la notion de tension dynamique et l’opposition au degré de conflit existant entre les éléments visuels d’une composition. Le concept de contraste s'exprime par lui-même. Les designs efficaces possèdent généralement un contraste suffisant entre les éléments de manière à ce que ceux-ci se de marquent et se distinguent. Il devrait être utilisé pour renforcer la hiérarchie des éléments. Dans certains cas, le contraste est volontairement minimal afin que les éléments se mélangent les uns aux autres. La méthode la plus commune permettant de ge ne rer du contraste est d'utiliser les tons et les teintes. Mais on peut aussi obtenir du contraste par l'utilisation de styles (par exemple avec la typographie), de textures, de formes, etc.
Espaces positif et négatif :
L’espace positif et négatif se rapportent a la juxtaposition de formes et d’un plan dans une composition. Les objets dans la composition représentent l’espace positif tandis que l’environnement de ces objets constitue l’espace négatif. Dans l'image ci-dessous, la plage noir dans la portion de droite représente l'espace négatif de la composition de gauche alors que le sujet et le sol représentent l'espace positif.
Aux lignes de force s'ajoutent les diagonales que l'on nomme descendante et ascendante. La descendante s'étire du coin supérieur gauche au coin inférieur droit alors que l'ascendante s'étire du coin inférieur gauche au coin supérieur droit. Les diagonales servent souvent de vecteurs dynamiques ou elle peuvent délimiter deux zones distinctes de la composition.
Dans la photographie ci-dessus, l’oeil suit la direction du pont a partir de la gauche puis terminant la lecture a l'extrême droite. Comme il n’y a aucun élément prédominant pour capter le regard, l'oeil glissera généralement hors du cadre.
Rythme progressif
Méthodes et principes du design (Gestalt)
LE FOOTER
4 & 5 : COLONNES DE GAUCHE ET DE DROITE
Les colonnes sont conseillées pour deux raisons : elles permettent d’y insérer d’autres types de contenus et elles permettent de diminuer la largeur de la zone de contenu. Les écrans sont de plus en plus larges et il n’est pas agréable de lire des lignes trop longues. Les colonnes permettent de résoudre ce problème tout en ayant un template d’une largeur conséquente. Deux colonnes ne sont pas forcément nécessaires, une seule peut suffire. Tout dépend de vos intentions.
Dans les colonnes est souvent intégré : > le rappel du menu principal avec les sous-menu visibles dans la rubrique où l’on se trouve (toujours dans la colonne de gauche). > Les actualités : très souvent dans la colonne de droite. > Des offres quelconques. > Très important, un bloc de Call to Action : c’est un bloc affordant attirant l’attention de l’internaute afin de l’inciter à cliquer. Généralement se sont des blocs du type « Nous contacter » ou « Devis gratuit ». > Un rappel des coordonnées de l’entreprise
La communication
La technique
L'art
Les affaires
Le style
Les communications
Les bases de la communication
Objectifs communicationnels
Le style est ce qui marque une oeuvre de la personnalité de son créateur. C,est ce qui fait que l'on peutreconnaître un artiste dans ce qu'il produit. Il s'agit d'une notion de prime abord difficile à cerner, mais que vousavez déjà commercé de développer à votre insu.Nous verrons bientôt comment il est possible et aisé de laisser émerger son style propre dans le cadre d'untravail créatif. Cela réside bien sûr dans votre unicité et nous apprendrons à développer ce qui nous démarqueet comment se distinguer authentiquement.Il existe, en design graphique, au delà de 100 000 styles et genres différents (Bauhaus, École Suisse, École deParis, Urban Grunge, Strech pixel, Brush, C4D, TAG, comic book, vintage, etc.)Le médium et les outils qui le caractérisent ont aussi une influence sur le style. On n'arrivera pas à créer lemême style à l'aquarelle qu'à la plume. De même, la gestion des éléments à l'intérieur d'une composition auraune influence considérable sur le style final: épuré, chargé, minimaliste, abstrait, réaliste, surréaliste,impressionniste, etc.
• Informer
• Vendre un produit ou un service
• Produire ou entretenir une image de marque
• Changer des comportements
Mécanismes communicationnels
Médium:
Canal:
Un canal de communication est un médium de transmission d'information. Il relie le destinateurau destinataire. Alors que le médium définit la façon (écrit, oral, images) de transmettre lacommunication, le canal, lui, définit le support (Journal, affiche, publicité télé, pamphlet, etc.).
Un médium est un moyen de diffusion naturel (langage, écriture, affiche) ou technique (radio,télévision, cinéma, internet) qui permet la communication d'un émetteur vers un ou desrécepteurs. Par médias de masse, on entend une diffusion à grande échelle qui permet derejoindre rapidement un grand bassin de population dans un espace plutôt étendu.
Les couleurs
Noir
Le bon: Noir est synonyme d’autorité et de pouvoir. C’est l’absence de couleurpuisqu’il les absorbe toutes. Il est perçu comme sophistiqué et se marie bien auxcouleurs pales et saturées en design web. Lorsque bien utilisé, le noir donnera une profondeur à votre site.Le mauvais: Dans bien des cultures, le noir est associé à la mort, la peur et le négatif.Combiné avec du rouge ou du orange, il peut donner une impression de lourdeur etd’agressivité.Conclusion: Le noir est une couleur élégante et puissante qui doit être utiliséejudicieusement afin de ne pas communiquer de message négatif.
Blanc
Brun
Le bon: Brun signifie stabilité, fiabilité et confiance. Il est associé aux choses organiques et naturelles. Il donne un sens d’ordre aux designs. Le brun sert très biencomme fond puisqu’il est subtil. Il est relié à l’automne ainsi qu’à la loyauté. Le mauvais: Trop de brun est ennuyeux. Plusieurs tons de bruns sont aussi perçuscomme manquant de personnalité. C’est pourquoi cette couleur devrait être utiliséeavec d’autres et non seule.Conclusion: Brun est une couleur qui se mariera bien à d’autres teintes, sans quoiseul il sera terne.Vert
Vert
Le bon: Le vert symbolise la croissance, la stabilité, le calme et la nature. Ses tonsles plus pales sont énergiques et vivants. Les verts les plus sombres représententl’argent et les banques. Les sites web qui utilisent beaucoup de vert sont souventreliés à la santé, l’environnement ou à la croissance. Dans les jeux et les graphiques,vert se traduit par le bien-être.Le mauvais: Bien que la plupart des verts soient perçus comme étant positifs, lestons foncés peuvent être associés à l’avarice. Vert-jaune rime aussi avec maladie etdiscorde.Conclusion: Vert est en général une couleur paisible qui signifie le développement, lasanté et la nature. Évitez les vert-gris et les vert-jaune en quantités excessivespuisqu’ils ont une connotation maladive.
Rouge
Le bon: Rouge est une couleur puissante normalement associée à l’énergie, la vie etle pouvoir. Elle est dynamique et on dit qu’elle peut rendre enthousiaste et qu’elleaugmente la pression sanguine ainsi que le rythme cardiaque. Elle représentel’amour et la passion. Le rouge attirera l’attention de vos visiteurs; il est doncimportant d’utiliser ses tons les plus vifs avec modération et raison.Le mauvais: Cette couleur est aussi synonyme de colère et d’urgence; trop de rougepeut créer des sentiments d’agressivité ou de stress. Dans plusieurs cultures le rougeest associé au sang, à la corruption et au mal. Dans les jeux et barres de statut, lerouge signifie le danger.Conclusion: Gardez en tête que le rouge est une couleur forte; essayez ainsi de ladésaturer si vous comptez l’utiliser comme couleur principale. En quantité excessive,le rouge peut rendre vos visiteurs inconfortables.
Jaune
Violet
Le bon: Le violet est associé au luxueux, à la spiritualité et à la créativité. C’est lacouleur du mystère et de la magie. Elle est considérée parfois comme une couleurféminine. Le violet paraîtra bien sur un site web qui n’a pas peur d’être original etextravagant. Il est aussi souvent apprécié des enfants.Le mauvais: Les tons de violets plus sombres évoquent la tristesse et la nostalgie. Leviolet n’est pas une couleur très sérieuse et devrait être utilisée en quantitéscalculées lorsqu’elle cible une audience majoritairement masculine.Conclusion: Le violet est une couleur riche qui est populaire avec les femmes et lesplus jeunes. Ses tons les plus foncés devraient être combinés à des couleursvibrantes pour éviter de transmettre de la tristesse.
Orange
Bleu
Le bon: Bleu est synonyme de stabilité, calme, confiance et foi. Parce qu’il est considéré bénéfique et positif, on le retrouve dans beaucoup de sites web. Associéavec la mer et le ciel, c’est une couleur masculine qui, dans ses tons les plus foncés,est utilisée pour représenter le pouvoir et le sérieux.Le mauvais: Bleu est extrêmement populaire et commun; prenez par exemple lessites de médias sociaux (comme Facebook, Twitter, LinkedIn…) qui l’utilisent touscomme couleur principale. Si vous désirez être originaux, peut-être que bleu nedevrait pas être votre premier choix.
Vous croiserez rarement sur internet des sites web monochromes; la plupart utilisentune palette contenant de 2 à 4 couleurs principales. Un bon design web utilise lescouleurs judicieusement afin de créer une hiérarchie visuelle. Alors que certainsdesigners décident de “jouer safe” en utilisant des tons neutres et des combinaisonspeu variées, d’autres auront de l’audace et tenteront d’associer plusieurs teintessaturées, obtenant comme résultat des sites dynamiques et provocateurs.Cependant, le plus de couleur on utilise, le plus difficile il devient de balancer ledesign, faites donc attention. Considérez le contenu que vous aurez sur votre siteweb et, plus important encore, le but de ce dernier. Un site web créé pour un jeunepublic ne devrait pas être brun et blanc, et un design ciblant une clientèleprofessionnelle travaillant dans les finances ne devrait pas ressembler à un arc-enciel.Marier les couleurs est un art. Combiner les teintes n’est pas évident pour tous etc’est pourquoi il existe des sites conçus pour vous aider à choisir les bonnes couleurspour votre site web, logo ou autre matériel promotionnel.
https://kuler.adobe.comhttp
http://colorschemedesigner.com
Design web
La transposition Web
C'est ce que l'on appelle aussi le principe de métaphore et cela consiste à recréer un objet concret et familier dans l'apparence de l'interface. On peut imaginer par exemple qu'un site sur l'immobilier se présente graphiquement comme un immeuble, avec des portes pour accéder aux différentes sections du site. Mais la métaphore est souvent plus abstraite.
L'interface
Il y a dans une interface un sens ou les éléments ont un objet et une action, action par l'objet ou sur celui-ci. Ainsi on peut définir l'interface d'un site dès le départ, avec un objet et ses actions, avec l'enchaînement des actions, et par là même optimiser l'interface par une meilleure vision des relations entre les objets.
L'exposition
Les possibilités du site doivent apparaître facilement et entièrement au visiteur. Tous les visiteurs n'ont pas les mêmes faclités et certains préféreront par exemple les icônes, d'autre les textes. Mais quel que soit le mode visuel choisi, l'accès au contenu doit être simple, complet et rapide.
La cohérence
Un site est cohérent lorsqu’il fonctionne de la même façon dans toutes ses parties. Par exemple si on fait apparaître des bulles explicatives sur une page, on doit faire de même sur toutes les autres pages.
La visibilité
Quand on entre dans une partie du site qui nécessite un comportement particulier, cela s'accompagne aussi d'un changement dans l'apparence. Et inversement, si l'apparence change, cela doit être parce que quelque chose change dans l'utilisation de la page.
Capter l'attention
Certains éléments sont plus importants et doivent être mis en relief, tandis que les autres seront placés en retrait. Le meilleur moyen d'attirer l'attention, c'est une image ou un objet animé. Associer une animation à un service dès lors que celui-ci est activé par l'action de l'utilisateur ou pour diriger sa navigation, est une bonne chose. Les animations sont réalisées avec un éditeur de fichiers au format GIF ou en Flash.
La simplicité et la sécurité
On dit d'un site qu'il est sûr si l'on peut éviter qu'une fausse manoeuvre ne conduise à quelque chose de définitif, ne serait-ce qu'à obliger à remplir à nouveau un long formulaire! Cela va de pair avec la simplicité dans l'accès aux fonctions du site.
Les aides à l'utilisateur
Le visiteur d'un site a besoin d'aide parce que chaque site peut avoir son fonctionnement propre et parce qu’on aborde rarement celui-ci par la page d'accueil mais souvent grâce à un moteur de recherche qui amène sur une page interne.
Il faut que l'utilisateur:
- Sache où il est.- Sache ce que le site lui propose d'essentiel, dans chaque page.- Comment parvenir aux services qui peuvent l'intéresser.- Et comment les utiliser.
Règle du contexte unique
Un bon moyen de simplifier l'utilisation d'une interface, c'est de limiter une page à un contexte, un service unique. Par exemple si l'on doit remplir un formulaire, toute la page doit être dédiée à cette seule opération. Si l'on doit choisir entre deux options, seules ces deux options doivent apparaître à l'utilisateur.Cela ne signifie pas que l'on ne doive par regrouper plusieurs formulaires sur une page, cependant ils doivent être clairement distincts de sorte que l'on puisse remplir l'un sans considérer les autres. Placer un formulaire dans une lightbox est un moyen d'améliorer à la fois l'ergonomie et l'esthétique du site.
Les raccourcis
Comme sur un traitement de texte où l'on peut passer des commandes à partir d'un menu tandis qu'une fois habitué au logiciel, on peut le faire plus rapidement avec des touches de raccourci, l'interface du site peut proposer des accès plus courts pour les utilisateurs usuels.
Le coté esthétique
L'esthétique d'un site contribue à sa crédibilité autant qu'à sa popularité. Les visiteurs supposent naturellement qu'un site au design soigné aura un contenu tout aussi étudié, et au contraire, un site mal conçu fait craindre un contenu douteux.
Gabarit
Le web design réclame des compétences variées : en programmation, en ergonomie et en interactivité, ainsi qu'une bonne connaissance des contraintes techniques liées à ce domaine : diversité des terminaux web et de leurs affichages, accessibilité, spécificités des différents langages et processus, portabilité, respect des recommandations du W3C. Le webdesign d'un site se présente en premier temps sous forme de maquette fonctionnelle avec des spécifications techniques : ergonomie, charte graphique, identité visuelle, marketing, interactivité. Cette phase est liée avec le webmarketing d'un projet web.La construction d'un site et l'organisation des pages en elles-mêmes peuvent largement contribuer au succès d'un site Web, autant et quelque fois plus que le contenu. Le design doit être fondé sur des principes de base simples, quoique plus exigeants pour un site du Web 2.0 doté d'une interface élaborée.La première étape dans la conception d'un site passe par la définition de l'utilisateur auquel il s'adresse, tandis que la dernière consistera à laisser le site entre les mains d'un néophyte et à l'observer. Ses erreurs et difficultés à atteindre ce qu'il cherche sont le meilleur test du design. Entre ces deux étapes, un bon site Web est construit en prenant en compte quelques règles incontournables.
Avant de prendre une photographie, il faut examiner avec attention l'image à travers l'objectif. La règle des tiers s'applique autant aux photos horizontales que verticales. Divisez l'image en trois parties égales, en hauteur et en largeur. L'intersection de ces lignes détermine les quatre points forts de la photo. La composition d'une photo basée sur ces éléments sera équilibrée. On tâchera toujours de placer les lignes de force, l'horizon (en haut ou en bas), ou les yeux d'une personne (le plus souvent au tiers supérieur). De même, on placera sur un point fort l'élément principal (le sujet) de l'image. Une fois cette règle maîtrisée, il ne reste qu'à l'oublier et à laisser place à la créativité !
Lignes et points de force
Le cadre
Le cadre aura une influence sur la dynamique d'une composition. La dynamique, c'est l'impression de mouvement des éléments d'une composition. Chaque cadre possède sa propre dynamique. Un cadre horizontal (orientation paysage) a tendance à adoucir les forme tandis que le cadre vertical crée une dynamique plus énergique voire agressive. Le cadre carré, quant à lui, force le regard vers le centre.Pour Fibonacci, tous les formats et tous les positionnements doivent tendre vers le nombre d'or afin d'être esthétiquement corrects. L'expression arithmétique de cette proportion divine est de 1.618. On nome formes dorées les formes qui respectent ce rapport. Ainsi, pour obtenir un rectangle d'or, il faudra que sa longueur divisée par sa largeur soit égale à 1.618. Pour obtenir un cadre d'or, il faut donc multiplier la largeur par 1.618. Bien sûr, des mesures approximatives sont tout à fait suffisantes (exemple, le format 8x10 exprime bien ce rapport).
La règle des tiers repose sur ce rapport en faisant passer des lignes guides sur des points de la surface du cadre obtenu par calcul. De manière plus simple, nous divisons le cadre en neuf portions égales à l'aide de deux lignes verticales et de deux lignes horizontales situées aux tiers de la largeur et de la longueur. Ces lignes
TENDANCES
Si certains peuvent encore utiliserIllustrator, je vous recommandePhotoshop à tout pointde vue pour la réalisation devos templates. Pensez à bienorganiser votre fichier en renommantchaque calque et enles triant dans des groupes etdes sous-groupes de calques.Ceci dans le but de mieuxvous retrouver. Mais surtoutcar vous serez amené à devoirdonner votre fichier source àvotre client. Rien de plus désagréableque de devoir passerune heure à réorganiser parfaitementson fichier au derniermoment ! Pensez égalementà enregistrer régulièrement aufur et à mesure votre fichierPhotoshop dans de nouvellesversions. Ceci pour garderune trace du travail effectuéet pour ne rien perdre. Il arrivefréquemment que le clientdemande de revenir à uneversion antérieure.
Logiciels
Le template type qui a été exposé n’est pas ce qu’il y a de plus original, bien évidemment. C’est une structure type qui est tout de même bien souvent utilisé pour les sites traditionnels. Il possède une structure ergonomique, pratique, conventionnelle et facile à mettre en place. Ceci dit, il n’est pas pour autant le révélateur d’une tendance actuelle. Depuis l’arrivée du Web 2.0, la mode est davantage tournée vers la simplicité. Des éléments graphiques sobres allant vers l’essentiel. Moins de superflu. Fini les publicités et les boutons clignotants partout telle une guirlande de noël. Les rectangles aux bords tranchants s’arrondissent, les contrastes forts deviennent pastels et les éléments multiples s’assemblent pour une meilleur lisibilité.
Pour réfléchir et tenter de connaître le webdesign de demain, il ne faut pas chercher des tendances graphiques mais bien leurs supports. Demain, ce n’est pas le design qui va être révolutionné, mais les supports permettant d’avoir accès à l’information. Ce sont ces nouveaux supports qui vont changer du tout au tout et par conséquent l’ergonomie et la structure des éléments graphiques devront s’y adapter. La souris et le clavier d’ordinateur commencent à disparaître. Le tout tactile s’impose doucement. Une fois la souris et le clavier disparu, certains éléments sur un site Web ne seront peut être plus nécessaires. Lorsque l’internaute utilisera uniquement ses doigts pour naviguer, l’ergonomie des boutons devra être revu. Ici nous parlons d’un futur très proche. En regardant plus loin, les supports seront multiples. On pourra accéder à l’information par tous les supports. Les livres interactifs, les cartes de crédits, nos montres, notre bureau ou table à manger et même de simples feuilles de papiers vont être des supports menant à l’information. Aujourd’hui, nous créons pour les sites importants un design spécifique pour l’ordinateur et un second pour les téléphones portables. Mais lorsqu’il n’y aura plus de limites de supports, devra-t-on créer autant de design. Le plus simple sera de créer un design s’adaptant à tout les supports. En allant encore plus loin, si l’internaute a besoin uniquement de sa voix, d’un clignement de l’oeil gauche ou d’une simple pensée pour engendrer une action, le design devra alors être pensé différemment. Il ne faut donc pas parler de nouvelles tendances mais plus directement de nouveaux supports et de nouveaux outils.
Comme vous pouvez le constater, nous retrouvons la composition en Z évoquée plus haut. Alors oui, on n'est pas obligé d'avoir des compos en Z tracées à la règles  Trêve de plaisanterie on voit que la composition guide l'oeil vers le bas de l'affiche (partie faible je vous le rappelle) afin de nous faire terminer la lecture sur la phrase d'accroche et le produit et que l'impact soit optimum.
Des tests scientifiques ont démontré que tous les individus d’une même culture ont le même cheminement visuel. Donc lorsque l’on découvre une photo, nous avons une structure perceptive commune.
Il va falloir se servir de cette connaissance du mécanisme du regard pour attirer le spectateur de sa photo vers le sujet principal, bref le diriger vers le message important. L’œil a en fait un champ de vision nette très étroit, il va donc balayer la surface d’une image d’un mouvement continu extrêmement rapide (ce qui donne l’impression de percevoir l’image nette dans sa totalité).
L’œil n’a pas une méthode d’exploration de l’image unique, il est attiré par un certain nombre d’éléments.
Bien sûr, comme nous l’avons vu précédemment, il est attiré par les points forts de l’image.
Le regard s’attarde aussi sur les zones compliquées de l’image et se dirigera plus facilement vers la forme la plus grande ou la plus proche, il a aussi tendance à s’orienter vers le centre de l’image.
D’autres caractéristiques de certaines régions d’une photo (la netteté, la régularité, le premier plan, les couleurs chaudes…) peuvent également diriger le regard.
Le balayage de l’œil se fait dans le sens de l’habitude culturelle. Pour les Occidentaux, habitués à lire de gauche à droite, il aura donc tendance à aller de gauche à droite et de haut en bas.
Un dernier élément attire l’œil, il s’agit de l’apparence humaine.

Si vous placez une personne dans un décor, le regard va forcément se porter en premier sur le personnage.

Encore plus précisément, c’est le visage qui attire le plus. De même, dans un visage, c’est le regard qui a le plus d’importance.
Enfin, le balayage horizontal explique pourquoi une photographie avec des dominantes horizontales sera reposante pour l’œil (évoque le calme, la profondeur et permet d'élargir l'image) alors que des dominantes verticales seront fatigantes pour l'oeil.
Le bon: Orange, une combinaison de jaune et de rouge, est une couleur chaude eténergique associée avec la chance et la joie. Elle est synonyme de créativité et destimulation, bien que pas aussi agressive que le rouge. Orange est utilisé en designpour surligner des éléments importants et plait de façon générale à un public plusjeune.Le mauvais: Les oranges foncés peuvent communiquer la tromperie et la méfiance.Utilisé en trop grande quantité, il pourrait miner le sérieux de vos designs.Conclusion: Le orange stimule et entraîne la créativité mais il peut aussi être perçucomme insouciant.
Le bon: Synonyme d’optimisme, le jaune est énergique et spontané. Il est associé àla joie et attire les regards; c’est pourquoi on l’utilise pour surligner des parties importantes d’un design et/ou de son contenu. Jaune est aussi reconnu pour encourager la communication.Le mauvais: Puisqu’il est instable, le jaune peut être perçu comme enfantin et nedevrait ainsi pas être utilisé pour la vente d’items prestigieux ou dispendieux. Lesvoitures jaunes, par exemple, sont des autos de sport associées à la vitesse et àl’imprudence. Trop de jaune n’est pas rassurant.Conclusion: Jaune est la couleur du Bonheur et de l’énergie. Utilisez-la pour attirerl’attention ou pour alléger l’atmosphère. Gardez en tête que seul, le jaune n’est pasune couleur très sérieuse.
Le bon: Blanc évoque la pureté, la bonté et la simplicité. Il est populaire dans ledesign minimaliste puisqu’il est spacieux. Blanc est perçu comme propre et organisé. C’est la couleur d’une page par défaut et il match toutes les couleurs.Le mauvais: Trop de blanc peut donner l’impression qu’un site web est vide et froide. Cette teinte est aussi associée à la stérilité. Conclusion: Le blanc est une teinte qui peut être utilisée avec n’importe quoi. Ellepossède une connotation positive mais trop de cette dernière peut laisser à vosvisiteurs une impression de vide.
La question des couleurs n’en est pas une facile. À moins que vous ayez une couleurfavorite que vous voulez absolument l’utiliser sur votre site web, logo ou matérielpromotionnel, vous vous demanderez sans doute quelle teinte représente le mieuxvotre entreprise ou projet, et comment les autres percevront votre site. Rouge est-iltrop agressif, bleu trop commun, vert trop zen, noir trop négatif ou blanc trop doux?Cet article explique comment les designers sélectionnent les couleurs et jettera unregard sur les couleurs principales du spectre pour ensuite les analyser afin que vouspuissiez mieux comprendre vos choix.
La couleur bleue nous rappele constament les éléments sportifs
Lorsque nous créer une composition, il y a donc trois buts principaux à atteindre par le choix et le positionnement des éléments dans le cadre:
La composition picturale consiste à positionner stratégiquement les éléments formels d'une communication visuelle en fonction de la Gestalt afin d'atteindre nos objectifs communicationnels. Plusieurs règles vous aiderontà atteindre ces objectifs et certaines sont des incontournables.
Le design consiste à communiquer un message ou à exprimer une idée, un concept, d'une certaine façon avec un certain style. Cette définition implique quatre axes que nous allons explorer tout au long de ce cours, quatre fonctions du designer.
Le Design permet de présenter l’information plus clairement.
→ économie de temps pour lerécepteur, plus de gens peuvent comprendre un message
→ capter l’attention du récepteur
Une des fonctions du designer, et c'est probablement la plus importante, est celle de communicateur. La fonction première du designer est de communiquer un message. Il faudra donc connaître la mécanique des communications afin de communiquer aussi efficacement que possible. Nous prêtons notre talent et notre savoir à une clientèle qui désire parler à leurs publics. Il faudra apprendre à concevoir des messages adaptés destinés à des publics en fonction desobjectifs du client. Pour y arriver, il est nécessaire d'analyse le mandat et les différents environnement afin de produire la solution optimale à une problématique.
Une autre des fonctions du designer est celle de technicien. En effet, afin de pouvoir réaliser les différentes communications, il nous faut mettre en pratique différentes techniques(infographiques, rédactionnelles, etc.) en fonctions du contexte, des médiums, etc.
Outre les aspects communicationnels et techniques, notre travail s'inspire grandement de l'art. Il faudra être en mesure d'apprendre à créer des oeuvres originales sachant répondre à différents objectifs en fonction de contextes divers.
Ce qui différencie les infographistes des artistes en général, c'est que notre art se met au service des affaires, des entreprises. Nos oeuvres ont pour but d'inciter à l'acte d'achat, à informer ou à changer des comportements. Il sera donc nécessaires de développer une approche commerciale en s'intéressant tout particulièrement au marketing.
Quatre fonctions du designer.
L'activité communicationnelle consiste en l'émission d'un message d'un émetteur (destinateur) vers un récepteur (destinataire).
Le destinateur est l'émetteur du message. C'est celui qui parle. Bien que la tâche d'exprimer le message nous revienne, nous le faisons au nom de quelqu'un d'autre (d'une entreprise, par exemple) derrière qui nous nous effaçons. Nous sommes anonymes et, même lorsque nous utilisons des portes-parole, c'est notre client qui demeure le destinateur réel.
Le destinataire est non seulement le récepteur de la communication, mais il est celui à qui est destiné la communication. Cela signifie que la communication lui est adaptée.
Chaque communication, chaque message qui est émis possède un but qui est lié aux intentions du destinateur. Les intentions du destinataires peuvent variées et sont souvent multiples. Nous les divisons en objectifs principaux (ce qui nous importe le plus dans la conception d'une communication) et en objectifs secondaires àcourt, moyen et long terme (ce qui aura une influence sur nos choix).
Dans la communication, un destinataire possède donc des objectifs qu'il compte atteindre en émettant une communication à l'intention de destinataires. La communication portant le message sera diffusé via un médium dont on nomme canal le support. Selon le médium et le canal choisis, le message sera produit d'une certaine manière (coder) pour être décodé par le destinataire.
Codage et décodage:
Tous les messages que nous produisons doivent être codés. En effet, un message est quelque chose d'abstrait, de conceptuel, d'intangible. Si nous choisissons de produire une affiche, on choisira différent éléments (images, textes, couleurs) afin de se faire comprendre. Il s'agit là du codage. Lorsque nous transmettons notre communication au destinataire, ce dernier perçoit les codes, il les décode et comprend alors le message ou, à tout le moins, un message.
Effets pervers:
On nomme effet pervers tout effet indésiré qui a pour résultat la distorsion du message, sa mauvaise compréhension, mésinterprétation, etc. Ces effets se produisent entre le codage et le décodage du message et peuvent altérer considérablement la compréhension du message et donc mettre en péril l'atteinte des objectifs communicationnels. Par exemple, si l'on produit en français une communication destinées à des Islandais, le message ne sera pas compris. De la même manière, si l'on utilise des termes ambiguës ou si on a recours à de l'ironie, le message peut être mal interprété et choquer le destinateur plutôt que de lui plaire.
Adaptation des messages
La production d'un message efficace demande beaucoup de travail et ce n'est pas une tâche aisée. En effet, puisque le destinataire est distant et seul face à la communication, il est impossible de constater si le message a été bien compris et il est, bien sûr, impossible de rectifier le tir. La communication interpersonnelle, de bouche à oreille, en face à face, est incontestablement la forme decommunication la plus efficace. Si vous dites quelques chose à quelqu'un, vous pouvez voir ses réactions, interpréter son langage non-verbal, réagir à ses interrogations et vous assurer que le message a correctement été compris. Cela est impossible avec une communication dans les médias de masse (publicité télé ou dans unmagazine, par exemple). C'est la raison pour laquelle nous devons prendre toutes les précautions nécessaires de manière à minimiser les possibilités d'effets pervers. Nous aurons donc recours à différentes méthodes en respectant diverses étapes dans le développement des communications que l'on se verra confiées.
Définir le destinateur
À la façon d'un acteur qui se prépare à jouer un rôle, nous devons suffisamment bien connaître notre client (le destinateur) afin de prendre la parole pour lui et à sa place. Il faudra rassembler le plus d'information possible sur le destinateurs:
• Qui est-il?• Comment veut-il être perçu?• Comment est-il perçu• Quel est son contexte (concurrence, position dans le marché, etc.)?• Quels sont ses objectifs principaux et secondaires?• Quel matériel promotionnel est ou a été utilisé, etc.
Définir le destinataire:
Lorsque nous savons qui est notre client (le destinateur) et que nous connaissons ses objectifs, il faut apprendre à connaître ceux à qui il s'adresse, le ou les publics-cibles (le destinataire).
Public-cible: Groupe d'individus faisant partie d'un segment spécifique d'une population quel'on cible directement en les considérant comme étant des clients potentiels.
Population ciblée:Groupe d'individus qui reçoit la communication et au sein duquel on visera dessegments spécifiques.Pu
Publics non-concernés:Groupe d'individus qui ne se sent pas (ou n'est pas) concerné par la thématiqued'une communication.
Publics latents:Groupe d'individus concerné par la thématique d'une communication mais quil'ignore encore.
Publics avertis:Groupe d'individus concerné par la thématique d'une communication et qui en estconscient.
Publics actifs:Groupe d'individus concerné par la thématique d'une communication, qui en estconscient et qui s'organise pour passer à l'action.
Il faudra d'abord identifier le ou les publics-cibles que nous analyserons selon différents critères. Nous chercherons des points communs entre les différents publics que nous ciblons sur lesquels pourront reposer les assises de notre projet communicationnel.
Critères d'analyse des publics:
Socio-culturels
Les individus comprennent les communications en fonction de références quileurs sont spécifiques. La culture générale, la nationalité, la religion, la morale,etc. sont autant de facteurs qu'il faut garder à l'esprit lors de la conception d'unecommunication. Par exemple, nous ne communiquerons pas un message de lamême manière s'il s'adresse à de jeunes hommes dans la vingtaine habitant unegrande ville qu'à des vétérans de la deuxième Guerre mondiale d'un village éloigné.
Socio-économiques
La façon de considérer les choses, de se faire des opinions et les échelles devaleurs des individus sont inévitablement influencés par des critères socioéconomiques.Les individus, selon qu'ils soient issus d'un milieu aristocratique oude la classe ouvrière auront des échelles de valeurs fort différentes, des prioritésdiamétralement opposées. Il sera donc nécessaire de considérer cet aspect despublics dans le cadre du développement d'une communication adaptée.
Psychologiques et comportementaux
Ces critères sont fort variés selon les segments de marchés abordés, selon leproduit ou le message dont on fait la promotion. Il s'agit ici de déterminer lapsychologie générale du public, d'en définir l'individu type et le prototype.Par exemple, dans le cas d'une communication destinée à un groupe d'individusen grève ou en lockout depuis plusieurs mois, il y a fort à parier que la frustrationest grande et que l'agressivité peut aisément être déclenchée. Dans un tel cas,on évitera sans doute un ton autoritaire au profit d'une attitude bienveillante voirematernelle.
Accessibilité à la communication
Il faut toujours considérer ce critère dès le départ. Si vous produisez une communication et que les publics auquel elle s'adresse n'y ont pas accès, vos efforts ne produiront aucun résultat, peu importe la qualité de votre travail. Par exemple, si l'on fait la promotion d'un produit de grand luxe et que l'on choisit de produire une affiche destinée à l'affichage dans le métro, il y a fort à parier que très peu des individus des publics ciblés aient accès à la communication, la très grande majorité ne voyageant pas en métro mais plutôt en voiture ou en taxi.
Pertinence du médium et du canal de communication
Le choix du médium et du canal influencera certainement la production de vos communication. Il faudra choisir le médium et le canal en fonction des objectifs communicationnels et des publics visés pour ensuite vous adapter à ses spécificités, à ses règles et à ses contraintes.
Types de médias
Médium écrit
Médias de masse:
Médias électroniques
Quotidiens, journaux de quartiers, journaux étudiants et syndicaux, médiasécrits ethniques, pamphlets et circulaires, etc.
Télévision, cinéma, radio, presse, affichage et internet (dans une certainemesure).
Radio et télévision privée, ethniques, étudiantes et communautaires. Sitesinternet de petite portée.
Types de canaux
Les médias se décomposent en canaux, ce sont eux qui diffusent la communication, ce sont par eux que les publics reçoivent le message:
• Les chaînes de télévision (et les émissions spécifiques)
• Les journaux, magazines, mensuels, etc.
• Les stations de radio (et les émissions spécifiques)
• Les formats ou les réseaux d’affichage
• Les sites Internet• Les films ou les salles
Les canaux peuvent être de trois ordres que nous choisirons en fonctions des objectifs communicationnels que nous nous sommes fixés:
Canal populaire• Canal officiel• Canal rassurant
Directionnalité des communications
La communication, telle qu'on l'a vu jusqu'à présent consiste en une communication unidirectionnelle, c'est-àdireque le message quitte le destinateur, voyage par un canal de communication et la communication trouve sacomplétion dans la réception dudit message par le destinataire. Il manque à ce schéma de la communication lanotion de rétroaction.
Rétroaction
La rétroaction consiste en la réaction du destinateur à la réception et à la compréhension dumessage. Lors de communications interpersonnelles, la rétroaction est immédiate: on voit ou onentend la réaction du destinataires même lorsqu’elle est involontaire. Or, la communicationmédiatique ne permet pas cette rétroaction immédiate.Nous pouvons bien entendu considéré comme rétroaction indirecte l'atteinte des objectifscommunicationnels. Par exemple, si notre but est de vendre plus d'un produit dont nous faisonsla promotion, le fait que les ventes augmentent considérablement le lendemain de la diffusiondu message constitue une rétroaction.Mais, la notion de rétroaction est plus marquée et l'établissement de communicationsbidirectionnelles génère très généralement des résultats supérieurs.
Par exemple, on pourra produire une publicité dans les journaux et demander de présenter uncoupons en magasin pour obtenir un rabais. Ou encore, on permettra à l'utilisateur d'un serviced'un site internet de communiquer avec le destinateur.On pourrait aussi, plutôt que de tenter de vendre un produit ou un service, faire la promotiond'une estimation gratuite en fournissant un numéro de téléphone. Le destinataire, lorsqu'il placel'appel, adopte une position subalterne, puisqu'il devient le demandant, alors que lereprésentant téléphonique est en position de force et adaptera son offre aux réactions du destinataire.
Stratégies communicationnelles
Pour atteindre nos objectifs communicationnels, il faut réfléchir, trouver une façon de faire qui va donnerplus de force à notre intervention. Comme au échecs, nous tenterons de de préparer les coups à venir,d'anticiper les publics et leurs comportements. Il existe plusieurs stratégie communicationnelles, maiselles se trouvent normalement n'être que des déclinaisons des quatre stratégies que nous allonsaborder ici.
Les lois de l'imitation
Gabriel Tarde (Les lois de l'imitation), a montré que les individus s'imitent. Ainsi, en donnantl'impression que plusieurs autres individus ou que la majorité adopte une opinion, un service ouun produit, on convainc aisément les autres de faire de même.
La propagande
La propagande consiste en une stratégie utilisée pour changer la perception d'événements, depersonnes (propagande politique, propagande militaire). C'est l'art de propager à grandeéchelle des informations, vraies ou fausses, mais avec un indéniable parti-pris.La propagande se base sur la théorie du réflexe conditionné de Pavlov. Le chercheur avaitutilisé un chien dans son expérience qu'il nourrissait tout de suite après avoir sonné une cloche.Après un certain temps de conditionnement, au seul son de la cloche, le chien salivait. De làdécoule aussi l'effet placebo des médicaments.Ainsi, la propagande postule qu'à tout stimulus, un individu conditionné aura des réactionsprévisibles. Cela semble un peu simple (ça l'est), mais la publicité utilise énormément cettestratégie de communication en l'alliant, parfois, à d'autres. On constate cette stratégie, entreautres, lors des campagnes électorales.La propagande implique la récurrence de la communication. Il faut, en effet, que lacommunication soit répétée aussi souvent et dans autant de lieux que possible afin deconditionner les publics. Les messages dénotent toujours un clair parti-pris et les informationslivrées ne sont pas nécessairement vraies. On n'hésite généralement pas même à dénigrer laconcurrence.Les techniques de propagande moderne exploitent les connaissances accumulées enpsychologie et en communication. Elles se concentrent sur la manipulation des émotions audétriment des facultés de raisonnement et de jugement.
Usages et gratifications
Cette théorie voit les médias comme beaucoup moins puissants qu'on ne l'imaginait d'abord etpostule que les individus choisissent leurs médias en fonction de leurs besoins propres.Ainsi, un individu acceptera un médium voire une communication dans la mesure où ce médiumest apte à satisfaire ses besoins et ses désirs ou s'il l'aide à atteindre ses objectifs. Il devientalors nécessaire de s'interroger sur les motivations des individus, des publics, mais aussi sur cequ'il peut y avoir de gratifiant et de satisfaisant dans les contenus communicationnels.Les principales gratifications recherchées par les destinataires des communications sont l'autoappréciationde ses compétences, l'interaction sociale, l'émotion, l'évasion et le développementéducatif. Leurs principaux besoins, quant à eux, sont la sécurité, l'appartenance, la beauté, lerêve, la reconnaissance, l'estime de soi.Il faut donc trouver ici moyen de satisfaire les besoins et les attentes des publics auxquels ons'adresse (ou à tout le moins leur procurer quelques services ou amusements), ce qui impliquede les connaître, d'analyser aussi précisément que possibles les publics ciblés.
Théorie des deux étages
La théorie des deux étages met à profit la force des relations interpersonnelles plutôt que laforce seule des médias. Ainsi, plutôt que d'adresser une communication à une grandegénéralité d'individus, on sélectionne un public-cible bien précis composé de ce que l'on nommeleaders d'opinion.
Leader d'opinion:
Le leader d'opinion est un individu qui est considéré comme unesorte d'expert ou du moins dont l'opinion compte, en ce qui a trait àun thème particulier dans ses environnements. Ainsi, on comptetous, dans nos environnements, des gens à qui on s'informera àpropos des ordinateurs, de la cuisine, de la littérature, etc. Ce sonteux, les leaders d'opinion.
Dans ce modèle, le message est donc émis aux leaders d'opinion qui l'adaptent pour chacundes individus auquel il transmettra le message. Le leader sert à la fois à transmettre et àadapter le message.Ce modèle, bien qu'il nécessite une excellente analyse des publics ciblés, assure que lemessage sera correctement compris et permet de généré un message plus spécialisé en ceque le public ciblé possède déjà une certaine connaissance de la thématique ou de laproblématique dont il est question et qu'ils sont de plus grands consommateurs de médias demasse.
Communication
Le rose est un rouge plus doux, moins violent. C'est le côté sucré du rouge. C'est labarbe-à-papa, le chewing gum et les bébés (spécialement les filles).Alors que le rouge suscite les passions et l'action, des études démontrent qu'une grandequantité de rose peut créer de la faiblesse physique chez les gens.Dans certaines cultures, comme en Amérique, le rose est l'apanage des petites filles. Lerose, pour les hommes, revient et repart à la mode cycliquement. La plupart des gensattribut le rose aux femmes.Le rose (comme le rouge) dénote l'amour, mais d'une manière plus romantique. Il peutsuggérer l'amusement et la tendresse (rose pastel). Plusieurs tons de rose et de mauvepâle (et d'autres pastels) utilisés conjointement renforcent la nature douce et délicate durose. On peut y ajouter de la force en utilisant des tons plus foncés de rose, de mauveou de bourgogne.Tous les tons de roses deviennent sophistiqués combinés à du noir, du gris ou des àtons de bleu foncé. Vert moyen ou foncé combiné au rose fonctionne aussi très bien.
Rose :
Les couleurs chaudes nous dynamisent, nous lancent dans l'action. La chaleur d'un rouge, d'un jaune ou d'un orange peut créer de l'excitation comme de l'angoisse. Elle peuvent exprimer le plus parfait optimisme comme la plus forte violence. Les tonsneutres du noir et du brun possèdent aussi les attributs des couleurs chaudes. Dans la nature, les couleurs chaudes représentent le changement comme celui des saisons ou les éruptions volcaniques.On peut alléger l'impact des couleurs chaudes à l'aide de couleur froides ou neutres ouen utilisant les teintes plus lumineuse du spectre comme le rose, le jaune pâle ou lepêche.Les couleurs chaude paraissent plus grosse que les couleurs froides. Un orange aurafacilement plus de poids qu'un bleu s'ils sont appliqués en quantité égale. Elles ont aussitendance à sembler paraître en avant-plan contrairement aux couleurs froides.
Symbolisme des couleurs chaudes :
Parent du jaune (ainsi que de l'orange et du brun), or est la couleur des richesses et desextravagances. Il possède plusieurs des attributs du jaune et il peut être tout autantlumineux et joyeux que sombre et traditionnel.Parce que l'or est un métal précieux, la couleur or est associée à la fortune, à laprospérité, à la grandeur et même à l'excès.On peut utiliser une touche d'encre métallique or pour ajouter une touche spéciale à unprojet. C'est une couleur qui attire le regard lorsqu'elle est lumineuse alors que les tonsplus foncés créent de la richesse et de la chaleur.C'est une bonne idée d'ajouter une lueur or à une palette de terre (orange, vert et brun,par exemple) et son utilisation double la richesse d'un bourgogne ou d'un mauve.
Or :
Lignes directrices
Une fois que l’on a compris le fonctionnement de l’oeil et le balayage qu’il exécute, on en déduit comment attirer l’oeil vers l’endroit qui nous intéresse. Pour cela, on va contrôler les lignes directrices d’une image. Les lignes directrices sont définies par la direction des différents éléments
Une multitude de lignes directrices nous emmènent au centre de l'image
On va obtenir une image avec un rythme statique si les lignes directrices dominantes sont horizontales ou verticales.
Si les lignes directrices dominantes sont obliques (parallèles ou non), on obtient un rythme dynamique. Briser les lignes obliques entraîne une sensation de rupture, une instabilité.
On peut enfin obtenir un rythme pyramidal si les lignes directrices encadrent le sujet dans un triangle.
Horizontal ou vertical ?
C'est la première décision à prendre lorsque l'on cadre un sujet. D'une façon générale, une image paraît mieux équilibrée, plus stable si elle est placée en largeur car ce cadrage correspond à une vision humaine. En effet nos yeux balayent l'espace de gauche à droite, d'où cette impression !Il faut noter également que la prise en main des boîtiers est horizontale.
Cadrage horizontal
On appelle le cadrage horizontal, le format « paysage ». Il est vrai qu'il convient tout à fait à la prise de vue d'une scène générale (paysage, groupe de personnes) et toutes les actions qui se déroulent sur la largeur (course de voiture par exemple).
On appelle le cadrage vertical, le format « portrait ». En effet, il convient particulièrement aux prises de vue de portraits ou de sujets ou d'actions se déroulant dans la hauteur (escalade par exemple).
Cadrage vertical
Les formes
Le carré est symétrique et donc donne une impression de calme et de stabilité. Cependant, il vaut mieux l’accompagner d'une autre source.
La diagonale descendante accélère le mouvement du regard et donne une certaine impression d’insécurité.
Il faut placer correctement les formes élémentaires dans une image. Ce placement va donner un certain impact à la photographie. Pour qu’une forme ressorte, il faut qu’elle se détache du fond de l’image. Voilà quelques formes élémentaires et l’impression qu’elles donnent :
Le cercle symbolise l’infini, la douceur, l’harmonie, il donne donc l’impression d’un équilibre parfait
Le rectangle horizontal évoque une atmosphère paisible, le repos mais il peut également donner l’impression de lourdeur et de froideur.
Le rectangle vertical exprime la puissance, la force et la solidarité. Il peut aussi servir à dramatiser une composition.
Les masses et leur équilibre
- la dimension des masses
- les distances qui les séparent
- les densités de gris ou les couleurs de ces masses.
- le placement des masses les unes par rapport aux autres.
Pour compenser ces masses entre elles, on peut jouer sur:
Il faut retenir qu'une masse de grande surface monopolise l'attention au détriment des masses plus petite. Son impact est donc plus important.
Le centre de l'image n'est pas un point fort et il convient donc de ne jamais y placer le sujet principal. Cette erreur est souvent faite par le débutant qui n'est pas non plus aidé par le collimateur autofocus centré qui l'influence.
Les angles forts.
Dissymétrie: dynamisme, mouvement
Symétrie: calme, statisme
Les proportions ou le Nombre d'Or 0,618
Ces angles forts doivent permettre notamment de guider le regard de l'observateur vers un point fort de l'image.
Combinaison
Les formes sont très variées et il convient de les placer correctement dans l'image afin de leur donner un impact important. Pour mettre en valeur une forme, il faut qu'elle se détache du fond de l'image. Comme nous l'avons vu précédemment, les formes simples sont remarquées en premier par l'œil puis viennent les formes vivantes auxquelles nous sommes habitués (homme, animal...) puis enfin les formes originales construites sans logique apparente qui font travailler l'imaginaire. Voici quelques exemples de formes et l'impression qu'elles donnent:
Formes significations
Le triangle repose sur une base large et cela induit une notion d'équilibre. De par sa forme qui s'effile vers le haut (vers le ciel), il induit également la spiritualité, l'harmonie, le lâché prise. Le triangle est également le symbole de la flèche inspirant la notion de direction, de détermination, de pénétration.
En reposant sur sa pointe, le triangle n'est pas stable. Il induit donc la notion de danger, d'insécurité, d'instabilité, il dirige également le regard vers le bas induisant un effet de vertige, de malaise.
Les lignes dynamiques d'un dessin peuvent donc être organisées en figure élémentaires simples et ces figures induisent des informations, des sentiments, des atmosphères qui concourent à renforcer votre composition et votre mise en scène. Encore une fois, tout ceci sert à mettre dans l'image tout ce qui ne peut être dessiné afin de faciliter la lecture de l'image. Bref ! Avec tous les outils abordés dans cette section, vous voyez qu'on peut dire énormément de choses en sachant comment composer son image. Si au début on réfléchit beaucoup à comment faire quoi et avec quelle technique, on finit par acquérir des automatismes, une logique de conception, bref ! Un sens de la mise en scène.
Pour assurer l'équilibre de l'image, il faut compenser les masses entre elles.
Les sujets vus dans le cours d'hier feront l'objet de l'examen de ce soir. Une petite révision de Photoshop est conseillé. L'accent est mis sur les concepts et non sur le desing comme tel.Vous avez droit à vos notes écrites.
Exemple de composition symétrique
Exemple de composition selon la loi du nombre d'or
Pratiquement, pour trouver la section dorée il faut multiplier la largeur de l'image par 0,618 ainsi que la longueur. A partir des quatre coins, vers la droite comme vers la gauche. On obtient ainsi deux points sur chaque côté. En les reliant avec les points du côté opposé on obtient un découpage de l'image, la section au centre s'appelle la section dorée, et les points d'intersection des points dorés.
La diagonale ascendante est une forme harmonieuse qui donne une impression de calme et d’équilibre (une base solide). C’est aussi une forme de spiritualité (elle pointe vers le ciel).
La photographie
Programmation
Full transcript