Les coulisses d’un design

Par Douglas Bowman

Ceux qui ne sont ni designers ni artistes pourraient penser que les intéressés sont des prestidigitateurs, sortant de leur chapeau une création extraordinaire après l'autre. Le talent artistique et la créativité rendent certainement le résultat final plus beau, mais le design est généralement le résultat d'une méthode de travail. Chaque designer (ou groupe de designers) développe une méthode qui l'aide à résoudre des problèmes, puis améliore cette méthode au fil du temps. Bien qu'aucune personne ni aucun groupe n'aborde le même problème de la même manière, on constate souvent des similarités dans la démarche.

maquette finale pour le Jardin Zen CSSComme je l'ai mentionné dans mon blog relatif à ma proposition pour le Jardin Zen CSS, j'ai pensé qu'il serait intéressant de partager avec vous le cheminement que j'ai suivi pour créer le design nommé Golden Mean. Créer une page pour le Jardin ne ressemble pas à un projet de taille normale, et ne ressemble en rien à un contrat avec un client exigeant, soumis notamment à des pénalités légales (retard, modification imprévue, etc.). Mais arrivé à mi-chemin, j'ai remarqué que j'avais la même approche (à une échelle quelque peu réduite) que sur un plus gros projet. On peut la décrire, pour le Jardin, par les étapes suivantes :

La recherche : découvrir le projet

S'atteler à un projet de maquette sans s'interroger sur la tâche à accomplir peut vous donner l'impression de partir vite, mais vous n'irez pas loin. Chaque projet, quelle que soit sa taille, tire profit de la recherche et de la planification effectuées en amont. Le design n'est pas une exception. L'observation avant l'action, voilà le secret pour trouver plus facilement la bonne direction à suivre. Le temps passé sur cette phase est habituellement proportionnel à la taille et à la durée prévue du projet.

Pour le design du Jardin, j'ai commencé par étudier le contenu (textuel) de la page, schématisant dans ma tête la structure et la hiérarchie du document. J'ai agrégé les différentes parties en groupes logiques et assigné à chacun une priorité. J'ai aussi pensé au but de ce projet, ainsi qu'aux idées et aux concepts que Dave Shea essayait de transmettre quand il a créé le Jardin et qu'il l'a ouvert à d'autres contributeurs. Montrer qu'on maîtrise les CSS n'est pas le but du projet. En revanche, il veut montrer la beauté et la flexibilité des CSS quand les designers comprennent leur potentiel, et les utilisent comme outils capables de créer une page bien agencée, esthétique, mais qui reste accessible, structurée, et codée avec efficacité.

L'analyse de la concurrence

Un autre travail utile est d'étudier les idées pré-existantes déjà mises en place par vos pairs, vos mentors, vos héros et/ou vos concurrents. Analyser la concurrence, c'est identifier les forces et les faiblesses des designs qui existent déjà. Cela vous permet de trouver quelles niches n'ont pas encore été explorées, et quels problèmes n'ont pas encore été réglés. La capacité à étudier ce qu'ont décidé les autres face au même problème (ou à un problème du même ordre) vous donne un avantage intéressant : on apprend beaucoup de leurs réussites et de leurs échecs.

Quand j'ai enfin eu un peu de temps pour penser à ma propre maquette, j'avais l'avantage de pouvoir étudier les propositions qui existaient déjà dans le Jardin. J'ai étudié le concept et l'exécution de chaque design. J'ai admiré l'intelligence et la créativité de certains de ces designs. J'ai noté leurs points communs et leurs différences. J'ai cherché ce qui n'avait pas été fait.

L'exploration

Face à un problème sans limites créatives, j'aime commencer par établir une liste de mots, de sujets, de phrases pertinents. Un genre de libre association d'idées sur le projet en cours. J'en trouve des abstraits comme j'en trouve des concrets, des vagues comme des précis. En écrivant ces listes, j'essaie d'acquérir une perspective d'ensemble du problème que je veux résoudre, et de faire sortir, souvent, des idées supplémentaires, des concepts qui n'étaient pas évidents a priori. Mes listes pour le Jardin comprenaient des mots et des pensées liés au jardinage, aux plantes et aux fleurs qu'on trouve dans un jardin, aux qualités associées au zen, à la beauté et aux belles choses, et à des caractéristiques de maquette de page. J'ai aussi établi une liste de tous les éléments, ID et classes utilisés dans le HTML de Dave, dont certains n'apparaissent que subtilement dans le design final.

Les croquis

croquis préliminairesUne fois que j'ai épuisé toutes les idées, j'ai commencé à dessiner des croquis sur un bloc de papier. Les croquis peuvent être de la taille d'un timbre, comme mesurer une dizaine de centimètres en largeur et/ou hauteur. Pensez aux gribouillis que vous pourriez voir sur une nappe en papier. Les croquis servent à capturer les idées de base de la composition de la page, comme l'emplacement de l'en-tête de page, la structure des colonnes, l'alignement des textes, sans être tenté de rentrer dans les détails si tôt dans le projet. Leur vitesse d'exécution vous permet une itération rapide. Vous n'aimez pas ce que vous avez fait en trente secondes ? Recommencez un dessin juste à côté. Pour rester général, il est mieux de commencer par de petits dessins. Ensuite, agrandissez-les progressivement au fur et à mesure que vous devez définir les détails.

La typographie

saisie d'écrans de différentes jeux de policesUne fois que j'ai eu quelques modèles de composition qui me plaisaient, j'ai commencé à réfléchir aux polices, à la forme des lettres. Pour moi la typographie est un élément crucial pour définir le niveau de formalité d'un design. Ce qu'évoquent des typographies différentes est subliminal pour la plupart des gens, mais un designer fera tout son possible pour que l'effet des différentes polices vienne asseoir l'esprit du design. La façon la plus facile de voir quel effet est associé à quelle police a été pour ce projet de créer un fichier Illustrator et d'écrire CSS Zen Garden et The Beauty of CSS Design de plusieurs manières. J'avais une idée de ce que je voulais obtenir. De plus, je suis assez familier avec de nombreuses polices. Mais je voulais explorer toutes les possibilités. Je voulais quelque chose qui caractériserait le design intelligent. Quelque chose d'amusant, ou d'unique, qui s'articulerait avec les idées que je commençais à avoir.

saisie d'écran de la police MorpheusJ'ai choisi la police finale (Morpheus) pour ses très belles lettres. Les M et N sont très différents, les A et les U font des arches gothiques, les K et les R ont un jambage unique, les S et les d minuscules entre autres ressemblent tellement à des nombres, le point du i minuscule est un diamant décoratif qui rend plus gracieuses les rondeurs des D, O et Q. En plus de mon affinité avec la forme des lettres, le style médiéval prononcé du titre contrastait parfaitement avec la modernité du sans-serif utilisé pour les mots-clés des sous-titres en Helvetica.

Les images

Il n'est pas nécessaire d'avoir recours aux images pour un design. En fait, certains des plus beaux designs n'utilisent que de la typographie. Cependant, une photographie ou une illustration soigneusement sélectionnée peut avoir un impact énorme dans un design, en lui donnant une dimension, une implication, et un niveau de compréhension plus profond qu'un simple paragraphe d'introduction.

image utilisée pour la base du graphisme, © 2003 par Lee PettetL'étape suivante a consisté à rechercher une image qui servirait autant de fondation à la texture de fond que de support visuel pour le contenu. La liste que j'avais établie précédemment dans la phase d'exploration me donnait une direction à suivre et faisait surgir de nouvelles idées. Après avoir fouillé dans mes propres cartons et dans des ressources externes d'images libres de droits, j'ai sélectionné différentes images qui comportaient déjà un peu de l'effet de couches que je voulais sur ma page. J'ai opté pour une image de marguerite (© 2003 par Lee Pettet) retouchée comme base graphique pour le Jardin.

Depuis longtemps, j'aime l'idée de faire des couches de texte les unes sur les autres pour apporter de la texture et du sens au design. J'aime combiner le texte et l'image, pour créer des variations subtiles de couleurs et de teintes (pour l'histoire, voyez dans mon CV : 01, 02, 03). Comme pour mes autres créations, j'ai construit la typographie du Jardin progressivement, au travers d'une série d'additions, de soustractions, et de manipulations.

La composition

J'ai tendance à confiner l'image dans une région particulière de la page, ou à la réserver à un but spécifique. Je pense qu'abuser de photographies ou d'illustrations peut surcharger un design et le rendre confus, ce qui obscurcit l'intention du message. J'aime travailler avec cet élément de design qu'est le contraste quand je crée une composition visuelle. Ce contraste s'exprime tant dans l'usage de l'image dans la composition que dans l'image elle-même. Intégrer efficacement une thématique visuelle dans un design demande d'être très conscient des équilibres et des tensions en jeu. Des zones compactes de mouvement et d'activité, contrebalancées par des espaces où l'oeil se repose.

mise en page presque définitiveAvec mes quelques croquis et mes premiers choix de typograhie et d'images, j'ai commencé à monter des compositions plus développées. En jonglant d'Illustrator à Photoshop, en important des morceaux de l'un à l'autre, le design purement graphique s'approchait de la fin. Quand je travaille sans HTML et CSS, je me concentre sur la construction du langage et des lignes de force de la page, je trouve les proportions, largeurs et hauteurs, gouttières et espaces blancs, je spécifie les polices complémentaires, je choisis les tailles relatives des polices, leur interlignage, et comment appliquer la couleur pour appuyer mon propos à la fois en force et en subtilité.

L'exécution

J'ai déjà parlé de certains de mes problèmes quand j'ai écrit les CSS de ce design du Jardin (voir ma brève à ce sujet pour les détails). J'ai d'abord écrit les CSS qui définissaient la structure globale, les fonds principaux et les grandes régions de la page. Les groupes d'éléments se positionnaient à leur place. Puis j'ai appliqué le détail nécessaire à chaque élément, de haut en bas dans la page.

Pendant que j'écrivais la feuille de styles et que je la testais dans plusieurs navigateurs, le design a légèrement changé. J'ai dû sacrifier certains détails. J'en ai grandement amélioré certains autres. L'addition d'une trame de fond à gauche et à droite de l'image principale est le résultat positif du fait que je ne pouvais pas positionner l'en-tête de la page comme je l'imaginais à l'origine. L'alignement vertical n'a pas été définitif tant que chaque colonne n'était pas positionnée sur la page. (les colonnes de gauche et de droite étaient à l'origine à des hauteurs différentes).

Ces changements étaient possibles parce qu'en tant que designer et auteur de la feuille de styles, je pouvais décider au pied levé de ce qui devait être conservé, de ce qui pouvait être bousculé, et, surtout, de ma marge de manoeuvre au fur et à mesure que je codais. Cette unité de pensée en phase finale de réalisation met bien en évidence la nécessité pour le designer et l'intégrateur de collaborer le plus étroitement possible, s'ils ne sont pas déjà une seule et même personne.

Pour aller plus loin

Je me suis arrêté là pour ma proposition du Jardin Zen CSS, mais le travail de design est un processus en mouvement perpétuel. Ce résumé n'est pas exhaustif. On peut imaginer aussi plus de retours au designer, de plus longs circuits d'approbation, des tests utilisateurs. Le résultat n'en est pas toujours prévisible, ne vous attendez pas à une précision d'horloger. En tout cas, à moins qu'un designer ne travaille pour un illusioniste, le design n'est certainement pas un effet d'optique... De temps en temps, peut-être, un tour de passe-passe...

Fiche technique

À propos de l'auteur

Fondateur et manager de Stopdesign, Douglas Bowman est un spécialiste du design simple, propre, et tourné vers l’avenir. Il repousse en permanence les limites du possible en matière d’utilisation des standards web. Douglas a été le grand architecte de la fameuse refonte de Wired News en 2003, mais il promet de ne pas se reposer sur ces lauriers pendant trop longtemps.

Articles du même auteur

Articles similaires

Voici la liste des dix articles les plus récents en rapport avec cet article :

Tous niveaux

Design

© 2001-2016 Pompage Magazine et les auteurs originaux - Hébergé chez Nursit.com ! - RSS / ATOM - About this site