Un blog qui parle de webdesign, graphisme, méthodologie ...
ARTICLES TROUVES
Article(s) de août 2008 :
Textures
La texture d’une surface nous renseigne sur sa nature et ses caractéristiques physiques. Nous savons ainsi reconnaître par son aspect, une surface douce, granuleuse ou piquante. En design, les textures peuvent de façon similaire nous communiquer des informations. Par exemple, une photographie traitée avec une texture « vintage » permet au designer de faire référence à une époque ancienne.
Les caractéristiques d’une texture nous donne des informations à la fois sur sa nature physique (sensation au touché) mais aussi son apparence visuelle. Par exemple, on sait par expérience qu’une surface lisse sera douce au touché et brillante à la lumière.
En design, une texture est à la fois physique et virtuelle. Lorsqu’un webdesigner utilise une texture dans une création, le spectateur ne peut pas la toucher physiquement mais sa représentation visuelle produit chez lui un effet qui lui permet de ressentir virtuellement ses caractéristiques physiques.
Une texture ajoute du détail dans l’image et donne une idée de la nature globale d’une surface. Le designer peut utiliser ces textures pour donner plus de réalité, pour transmettre une humeur, renforcer un point de vue ou communiquer du sens à une surface.
En design, les textures peuvent se révéler par un jeu de juxtaposition et de contraste. En plaçant par exemple une texture douce à coté d’une texture épineuse, le designer amplifie les propriétés formelles de chacune de ces textures.
www.scoutingforgirls.co.uk
www.ernesthemingwaycollection.com
Les textures sont un outil de séduction qui permettent au designer de retenir l’attention du spectateur.
Motifs
L’utilisation des motifs dans la création date de plusieurs siècles. On les rencontre dans les ornementations de l’architecture Grecques, Musulmane, l’art Aborigène, l’art Africain bien avant l’an 0 de notre calendrier Chrétien. Les techniques pour reproduire un motif se retrouvent également dans toutes les cultures à travers le monde. C’est donc une technique ancienne partagée par toute l’humanité. Les motifs ont été repris et partagés par de nombreuses cultures qui s’en sont inspirés pour créer leur propres motifs. Ainsi les motifs ont évolué au grès des modes et des époques, se propageant de lieux en lieux donnant aujourd’hui une variété de modèles importante.
En design, les motifs ont un rôle décoratif. Ils peuvent habiller une large surface monochrome. Les motifs par leur délicatesse et leur abondance peuvent refléter l’opulence d’un lieu et la richesse des propriétaires. Le motif peut être utilisé pour recouvrir une large surface (papier peint par exemple) ou une surface plus restreinte (frise). En webdesign, les motifs sont souvent utilisés pour habiller un arrière plan (page, cadres …). Ils peuvent renforcer l’atmosphère mis en place par le design ou renforcer le message véhiculé par la tonalité du site. Certains motifs peuvent également être utilisés pour véhiculer une identité culturelle.
www.carnivaleduvin.com
www.dreijahre.org
Les motifs se construisent à partir de points, de lignes, de rayures, de grilles pour aboutir à des combinaisons infinies de design. Les designer partent d’un dessin unitaire qu’ils répètent à l’infini selon une grille spécifique. Ce dessin unitaire peut être composé d’une forme géométrique simple, d’un dessin abstrait, d’un dessin figuratif ou d’une forme organique. Les combinaisons sont infinies.
Source :
- Ouvrage : “Graphic design, the new basics – Ellen Lupton, Jennifer Cole Phillips »
Introduction
Le point, la ligne et le plan sont les fondations du langage graphique. Ils constituent les éléments de construction de base de tout design. A partir d’une interaction entre ces éléments simples, les designers peuvent créer des textures, des motifs, des images, des diagrammes et des caractères typographiques.
L’impression par exemple utilisent encore la juxtaposition de points pour représenter des images, des effets de lumière, d’ombre et de volume. Les logiciels de traitement d’images bitmap fonctionnent sur un principe de juxtaposition de points appelés pixels. Que l’on travaille sur un logiciel bitmap ou vectoriel, les outils de base sont des outils nous permettant de tracer des points, des lignes et des surfaces de différentes formes.
Le point
Le point est l’élément graphique le plus élémentaire. Il est représenté par son abscisse et son ordonnée dans un système en deux dimensions. Il marque donc une position dans l’espace. Graphiquement, le point est une marque ponctuelle sur un plan. Ce point peut être une marque insignifiante où un puissant centre d’attraction. Il peut être perçu comme un trou, un percement ou un délicat confetti. A travers sa forme, sa position et son rapport avec son environnement, le point exprime sa propre identité ou se fond dans la foule.
Une série de points peut former une ligne. Une accumulation de points se transforme en plan, en forme, en motif, en texture. Une accumulation de points de tailles variables créer un dégradé de gris.
Un point placé dans un espace, selon sa position, peut exprimer l’équilibre, l’infinie, la symétrie, l’ordre ou le déséquilibre.
En typographie le point est le signe de la fin. Il marque par exemple la fin d’une phrase ou la fin d’une lettre.
La ligne
Une ligne peut être vue comme une juxtaposition de points, la connexion entre deux points distants ou le chemin d’un point en mouvement. La ligne se caractérise par une longueur, une direction et une forme mais ne possède pas de largeur. Une ligne peut être perçue comme une marque positive ou un creux négatif.
Les lignes apparaissent aux frontières des objets et là ou deux plans se rencontrent. Sur un plan graphique, les lignes existent en différentes longueurs, épaisseurs et textures. Elles peuvent être droites ou courbes, continues ou discontinues. Lorsqu’une ligne possède une certaine épaisseur elle devient une bande, une surface. Les lignes permettent la description de surfaces, de volumes et de textures.
Les lignes selon leurs formes et leurs assemblages peuvent traduire différents sentiments comme le cahot, la plénitude, la sensualité, la rigueur …
En typographie, la ligne intervient dans l’alignement des caractères, des mots, des paragraphes et dans la mise en page des textes (marges, colonnes …)
Le plan
Le plan est une surface qui s’étant sur deux dimensions : sa hauteur et sa largeur. Un plan peut être perçu comme le chemin d’une ligne en mouvement, une ligne avec une épaisseur, une ligne close qui devient une forme. Les formes ne sont d’ailleurs que des plans délimités par des bordures.
Un plan peut être parallèle à la surface de l’image ou oblique semblant s’éloigner dans l’espace. Il est solide ou perforé, lisse ou texturé, opaque ou transparent.
La juxtaposition de plusieurs plans pour former un objet peu donner l’illusion qu’il flotte dans un espace en trois dimensions. La feuille de papier ou l’écran n’a pas de réelle profondeur mais le volume peut être représenté sur ces supports grâce aux surfaces et aux règles de la perspective.
En typographie, un paragraphe de texte peu être vue comme une surface construite de points et de lignes de caractères. Une surface de texte peut être dense ou légère, douce ou rude selon les paramètres choisies pour l’interlignage, le choix de la police (sa taille, sa fonte, sa graisse …). Selon le type d’alignement, vous obtiendrez différentes formes « typographique ».
Symbolisme
La forme, c’est à dire le choix et la manière d’agencer les éléments (lignes, formes, valeurs, couleurs, matière) dans une création, a une influence directe sur le fond, c’est à dire sur ce qui est exprimé.
Ligne horizontale
La ligne droite suggère la précision, la rigueur. Lorsqu’elle est horizontale elle devient l’horizon, suggère le repos, la stabilité, l’immobilité, le silence, la mort.
Sur le plan dynamique les lignes horizontales nous renvoient au calme des plans d’eau, à l’homme couché, au repos, à l’immobilité.
Ligne verticale
La verticale renforce le caractère rigoureux de la ligne droite, elle suggère la droiture, l’élévation, la force, la raideur, le manque de souplesse, l’obstacle,la barrière, l’austérité.
Sur le plan dynamique les verticales suggèrent davantage de tension, la stabilité, la résistance, la rigidité, l’homme debout, l’arbre partant à la conquête de l’espace…
Ligne diagonale
L’oblique est instable, suggère la chute, le mouvement.
Sur le plan dynamique, l’oblique descendante nous suggère le mouvement, l’instabilité, la chute et une énergie négative alors que l’oblique montante nous suggère le mouvement, le dynamisme, le progrès, une énergie positive…
Ligne courbe, cercle
La souplesse, la fluidité, le mouvement, la féminité, la douceur, la tendresse. Elle nous renvoie à l’élément eau.
Ligne brisée, triangle
Les changements brusques de direction suggèrent l’énergie, l’électricité, l’éclair, la vitesse. Les angles vifs et acérés la brutalité, la violence, le danger, ils piquent et coupent. Elle nous renvoie à l’élément feu.
Ligne horizontale et verticale, carré
Horizontales et verticales nous suggèrent la stabilité et la force, un sentiment de construction durable est renforcé par l’angle droit qui nous suggère la rigueur, la précision. Elle nous renvoie à l’élément terre.
Ligne souple
Une ligne souple et légère, suggère un mouvement incertain, indécis, tout en douceur. Elle nous renvoie à l’élément air.
Lorsque la ligne est hésitante, tremblante. Elle manque de tension et parait avoir été tracée par une main malhabile.
Lorsque les courbes sont tendues et sans accidents dus à une quelconque hésitation. Elles donnent une sensation de plénitude, d’assurance et de certitude.
Ligne composite
Ligne composite avec une prédominance de courbes, un mélange de rondeurs et d’angles vifs. Elle a quelque chose de végétal ou d’organique.
Application dans l’art
Les figures élémentaires que sont le point, la ligne, le plan et les formes ont été largement exploités par de nombreux artistes. Les travaux des peintres Sonia Delauney, Pablo Picasso, Hokuzaï, Matisse, Paul Klee, Vassily Kandinsky, par exemple, sont particulièrement représentatifs.
Application en webdesign
Exemple de webdesign se basant sur l’utilisation des lignes et des formes :
http://www.suit-men.com
http://www.tnt.be
Conclusion
Le point, la ligne et le plan sont à la base de toutes constructions graphiques car ces éléments nous permettent d’élaborer dans des variations infinies des formes, des textures, des motifs, des volumes jusqu’aux représentations les plus complexes.
Ces éléments peuvent être utilisés comme des leviers de communication pour exprimer différentes sensations qui vous aiderons à faire passer votre message.
Sources :
- Ouvrage « Graphic design, the new basics – Ellen Lupton, Jennifer Cole Phillips
Le Mood board est un prototype utilisé pour donner une idée du ton et de l’ambiance d’une création. On l’utilise dans plusieurs métiers de création comme la décoration d’intérieur, la mode, le paysagisme mais aussi le webdesign.
Introduction
La partie design est une étape délicate à gérer dans le processus de création d’un site web car le client est toujours impatient de voir le résultat visuel de son futur site. Or, cette partie du processus réclame de nombreuses étapes de recherche, de tâtonnement, d’essais, d’ajustement avant d’arriver à un résultat aboutit et définitif.
Le client, ne connaissant par forcément les étapes du processus de création, aura tendance à croire que ce que vous lui montrez correspond à l’image du design finalisé. Il portera alors son attention sur des détails plutôt que d’évaluer et de réfléchir sur le concept général.
C’est donc au graphiste d’expliquer au client les points sur lesquels il est important de se focaliser. Pour lui faciliter la tâche, il est judicieux d’utiliser des documents de travail qui se concentrent davantage sur le fond que sur la forme. Parmi ces documents de travail, nous avons déjà parlé des zoning et des wireframe. Un autre document de travail dans le même esprit se trouve être le panneau d’humeur.
Qu’est ce qu’un panneau d’humeur
Un panneau d’humeur est le regroupement d’un ensemble d’éléments sélectionnés (images, couleurs, textures, typographies, textes, objets …) juxtaposés les uns à côté des autres comme on le ferait pour un collage, afin d’établir une ambiance, une atmosphère, un concept, une humeur, une expression, un ton, un ressentit, un style, sans avoir besoin de réaliser une création graphique aboutit et organisée.
Pour réaliser ce panneau, vous utiliserez généralement des coupures de magazines, de journaux, d’affiches, des photographies, des textes, des objets … Cela peut également être des ébauches faites rapidement à l’ordinateur, des palettes de couleurs, des morceaux de papier peints, des emballages, bref tout ce qui pourrait évoquer l’ambiance que vous voulez créer pour votre maquette graphique.
Pour un webdesign, votre panneau d’humeur peut également présenter une ébauche de l’aspect des boutons, des formulaires, des cadres de contenus, de la typographie des différents niveaux hiérarchiques, des icônes, du traitement des images …
Le tout doit vous aider à mettre en place l’aspect général et l’atmosphère du futur design. La démarche est assez similaire à celle que l’on utilise en dessin ou l’ébauche, le tâtonnement puis la construction précèdent l’affinement des détails et la finalisation du concept.
Exemple de panneau d’humeur :
Photographie de Maria Grzesiak sous licence CC
Utilité du panneau d’humeur
Le panneau d’humeur peut avoir plusieurs avantages :
Séparer le fond de la forme
Le panneau d’humeur étant un regroupement d’éléments, sans cohérence logique de mise en page, le client peut difficilement imaginer l’aspect final de son site à partir de ce genre de support. Cela vous permet de capter toute son attention sur le concept et non sur des détails qui sont pour vous sans importance à cette étape du processus.
Lorsque vous avez à faire à un groupe de décisionnaires, la validation du design peut s’avérer encore plus compliqué. En effet, si chacun exprime ses préférences personnelles, vous n’arriverez jamais à satisfaire tout le monde. Le panneau d’humeur ne présentant que le concept, il est plus facile de concentrer les réflexions sur le coeur du problème et éviter ainsi que chacun s’épanche sur ses propres goûts.
Impliquer davantage de personnes dans le processus
Le panneau d’humeur étant facile à comprendre et à réaliser, sans besoin de compétences graphiques ou informatiques particulières, vous pouvez impliquer plus de personnes pour vous aider à construire le panneau.
Gagner du temps
Les panneaux d’humeur sont rapides à mettre en place car facile à réaliser. Le designer à souvent tendance à vouloir peaufiner les détails avant même que le concept soit validé. Avec le panneau d’humeur, vous réalisez un prototype, vous n’avez donc pas besoin de perdre du temps dans les détails. Si le client souhaite modifier le concept, vous pouvez facilement et rapidement adapter et modifier le panneau.
Avec le panneau d’humeur, vous évitez également la perte de temps dans la prise en compte de considérations superflues.
Structurer votre processus créatif
Le panneau d’humeur permet de réfléchir en amont sur le design sans se perdre dans les détails. Il permet de libérer ses idées sans toucher à l’ordinateur et de les soumettre au client rapidement.
Une fois cette étape accomplie, vous avez une fois pour toute, toutes les orientations graphiques dont vous avez besoin pour créer votre design. Vous pouvez alors vous concentrer sur la mise en page et la communication graphique.
Différents types de panneau d’humeur
Le panneau d’humeur d’inspiration
Vous pouvez utiliser un panneau d’humeur pour regrouper un certain nombre d’éléments qui vous servira de référence d’inspiration. Il s’agit ici de réunir des idées intéressantes que vous auriez put trouver dans votre environnement (affiche publicitaire, photographie, journaux …) pour vous en inspirer par la suite dans vos créations.
Le panneau d’humeur tonalité
Le panneau d’humeur tonalité est plus précis et plus cohérent que le panneau d’humeur d’inspiration. Il rassemble des éléments qui groupés ensemble donnent une idée de la tonalité que vous souhaitez mettre en place dans le futur design.
La présentation de ces panneaux d’humeur peuvent être plus ou moins structurée : juxtaposition de type collage ou modèle de présentation des différents types d’éléments.
Pour voir un exemple de panneau d’humeur structuré, allez faire un tour sur blog « 404 creative » et lisez l’article « Website Mood Boards: A Successful Precursor to Visual Prototyping« . En fin d’article, vous trouverez des copies d’écran de panneau d’humeur structuré destinés à présenter des idées pour des design web.
Conclusion
Un webdesigner va utiliser un panneau d’humeur pour évoquer un concept, un ressentit et donner le ton du futur design.
Cette étape correspond au prototypage du design c’est à dire à la phase de recherche. L’absence de création aboutit vous permet de garder l’attention du client sur l’idée général du concept plutôt que sur des détails.
L’objectif est d’obtenir du client un maximum de validation sur la piste créative à suivre avec une idée assez précise du résultat, avant de passer à la phase de production qui est la plus couteuse en temps de réalisation.
En impliquant le client dans la phase de création, vous lui procurerez une certaine satisfaction. De plus, au moment de valider la maquette finale, il sera plus difficile pour lui de renier des idées auxquels il aura lui même participé.
Note du 17.10.2008 : Je viens de découvrir un article richement illustré sur le concept board plus aboutit que celui que je viens de vous présenter. Il s’agit de l’article « Le concept board webdesign » écrit par Frédéric Kalfon – Directeur de création chez SQLI Agency dont je vous recommande vivement la lecture.
Sources :
– Article du blog Life Clever : 5 reasons to design with mood boards
– Article du blog Viget :Getting Moody: A Look at Inspiration and Style in Early Design Techniques
– Article du blog 404 Créative : Website Mood Boards: A Successful Precursor to Visual Prototyping