Guide de conception Web pour les développeurs

L'auteur de l'article, dont nous publions la traduction aujourd'hui, dit avoir créé son premier site Internet à l'âge de 14 ans, sous la forme d'un projet scolaire. Il a ensuite eu une tâche simple: développer un site Web contenant du texte, des images et un tableau. Habituellement, il se rapportait aux projets d'école de cette façon: au début, il les oubliait, et quand la date limite arrivait, il les faisait au tout dernier moment. Cependant, cette fois, ce n'était pas du tout le cas. Il était particulièrement intéressé par l'apparence de son premier site. Puis, pour tout faire comme il se doit, il a fait de son mieux. L'auteur du document dit que, depuis ces temps anciens, il s'est efforcé de faire en sorte que ce qu'il fait soit aussi attrayant que possible. Ce désir est toujours vivant en lui. Ici, il veut partager des conseils sur la conception de pages Web.

La conception

Il peut être reconnu, il peut ne pas être reconnu, mais les gens jugent n'importe quoi par son apparence. Si ce que vous faites semble bon, alors les chances que votre projet gagne la confiance des autres augmentent, naturellement, si le mot «bon» peut décrire non seulement son apparence, mais aussi sa fonctionnalité.

Pendant de nombreuses années, j'ai créé mes propres projets et pendant ce temps, j'ai accordé de plus en plus d'attention au développement de mes capacités de conception, et pas seulement à l'amélioration de mes compétences en programmation. Le code est important, mais si vous voulez créer votre propre projet rentable, vous devez résoudre de nombreux problèmes, dont l'un est la conception. Un développeur isolé, pour réaliser quelque chose, doit se développer complètement.

Un bon design n'est pas quelque chose qui peut rassembler un tas de goûts sur Dribbble . C'est quelque chose qui n'est même pas remarqué au début. C'est un équilibre entre une simplicité totale et quelque chose qui est à couper le souffle. La conception peut être à la fois un avantage concurrentiel du projet et l'une des raisons de son échec.

Ce n'est pas une question de talent

Quand j'étais plus jeune, je jouais beaucoup à Minecraft. J'ai regardé la beauté que les autres créent, mais quand j'ai essayé de construire quelque chose de moi-même, tout s'est avéré ressembler à une boîte. Ni beauté ni style. Et comment pouvez-vous même faire quelque chose de beau dans Minecraft?

Ensuite, j'ai trouvé un blogueur vidéo sur YouTube et créé une copie de ce qu'il construisait. Après quelques semaines, j'ai formé mon propre style et je pouvais déjà créer quelque chose de moi-même. Soudain, mes créations ont cessé de ressembler à ce qui n'était pas clair. Que puis-je dire, j'ai même remporté un concours.

En fait, j'ai raconté cette histoire au fait que le design est une compétence et, comme dans le cas de toute autre compétence, le design peut être maîtrisé.

Sélection d'outils

En programmation, vous pouvez prendre un bloc-notes normal et l'utiliser pour écrire une application qui n'est en aucun cas inférieure à celle créée à l'aide d'un puissant IDE, bien que la programmation dans le bloc-notes ne soit pas la tâche la plus agréable, et le processus de développement prendra probablement beaucoup plus de temps qu'avec en utilisant les bons outils. Si nous parlons de conception Web, MS Paint peut jouer le rôle de Bloc-notes ici, et j'espère que, comme dans l'exemple avec le Bloc-notes et la programmation, très peu l'utiliseront pour résoudre des problèmes de conception.


Outils de conception Web populaires

Voici quelques outils de conception Web populaires:

• Sketch est un outil exclusivement pour MacOS. Si vous établissez un parallèle avec le monde de la programmation Web, ce sera quelque chose comme React for Design. On a le sentiment que la mention de Sketch est présente dans chaque poste vacant du designer. Cette chose coûte 99 $ par an.
• Adobe XD est un outil multiplateforme gratuit qui, poursuivant son analogie de programmation, est similaire à Vue. Autour d'Adobe XD, une communauté n'est pas aussi grande qu'autour de Sketch, mais maîtriser cet outil est très simple.
• Adobe Photoshop est quelque chose comme un couteau suisse dans le monde du design, que tout le monde connaît et qui peut être comparé à jQuery. Vous pouvez utiliser Adobe Photoshop pour 9,99 $ par mois.

Il n'y a pratiquement aucune différence si vous utilisez Sublime ou VS Code pour écrire du code. La même chose peut être dite quant à savoir si vous choisissez React ou Vue pour le développement de l'interface. C'est une question de goût. On peut en dire autant des outils de conception. Chacun d'eux a ses propres avantages et inconvénients.

J'utilise Adobe XD. La raison principale de ce choix est multiplateforme, par conséquent, comme je le ferais si je choisissais Sketch, je ne suis pas un otage de l'écosystème Apple. De plus, Adobe XD est pris en charge par Adobe, vous pouvez donc espérer que ce projet existera pendant très longtemps. Et il sera particulièrement agréable pour les débutants que depuis mai 2018, Adobe XD puisse être utilisé gratuitement, bien qu'avec certaines restrictions (bien qu'il soit peu probable qu'il interfère avec vous de toute façon).

A propos de la bonne humeur

Le principal problème que j'ai dû résoudre en entrant dans le monde du web design a été de développer la bonne attitude. Auparavant, j'étais engagé dans le processus de conception du site. Je pensais que tout devait être arrangé dans un certain ordre. Les éléments sont placés de gauche à droite et de haut en bas. Certes, une telle approche est un moyen sûr de devenir un terrible designer.

Les outils de conception vous font travailler comme si chaque élément avait un positionnement absolu. Après les constructions claires que l'on peut voir dans le code du programme, les constructions opérées par le concepteur peuvent sembler désorganisées et désordonnées. Mais cela doit être accepté. Cela donne la liberté, la possibilité de tout changer rapidement et d'expérimenter beaucoup. Et c'est peut-être le plus important, car la conception est un processus continu. Dans la conception, on s'attend complètement à ce qu'avant d'obtenir un excellent résultat, vous devrez souvent tout refaire beaucoup.

Outils d'apprentissage

Lors de l'écriture de code pour des pages Web, des éléments HTML sont utilisés, tels que div , span , champs de saisie de données, permettant au navigateur de les transformer en quelque chose qui peut être vu à l'écran. En travaillant avec des outils de conception, vous avez la possibilité de vous débarrasser de la médiation et d'utiliser directement des éléments visuels, tels que des formes géométriques ou des fragments de texte.

J'ai choisi les quatre outils de conception les plus utilisés, ce n'est pas tellement, vous ne pouvez donc pas passer trop de temps à développer ces outils. Il est préférable de consacrer du temps à la conception. Autrement dit, en comprenant rapidement les bases, vous pouvez immédiatement commencer à pratiquer. Parlons de ces outils en utilisant Adobe XD comme exemple.

▍Outil Rectangle - Rectangles

Un rectangle est la figure géométrique la plus utilisée dans la conception. Au fur et à mesure que vous concevez, vous vous retrouverez constamment à travailler avec eux. Considérez le rectangle comme s'il s'agissait d'un élément div HTML. Les rectangles sont utilisés dans la conception d'une variété d'éléments de page - des champs de texte aux conteneurs.


Rectangle

▍Tool Text - Étiquettes sur une seule ligne

À première vue, il semble que travailler avec des textes soit très simple. Cependant, il y a une caractéristique, qui consiste dans le fait que l'outil pour travailler avec des textes a deux modes de fonctionnement. L'un d'eux est conçu pour créer des inscriptions sur une seule ligne, le second - pour créer des blocs de test sur plusieurs lignes. Heureusement, malgré cette fonctionnalité, l'outil pour travailler avec des textes est facile à apprendre et à utiliser.

Dans le premier mode, conçu pour fonctionner avec des inscriptions sur une seule ligne, la taille du conteneur de texte est ajustée à la taille du texte qu'il contient. Ceci est similaire à la balise span , sauf que le texte dans un tel conteneur ne sera pas automatiquement encapsulé dans une nouvelle ligne, sauf si vous utilisez explicitement des sauts de ligne. La force de ce mode de fonctionnement est que la taille du conteneur s’ajuste automatiquement aux paramètres du texte qu’il contient.

Pour créer un fragment de texte sur une ligne, sélectionnez l'outil Texte dans la barre d'outils Adobe XD, cliquez à l'emplacement du texte et entrez-le. Il convient de considérer en règle générale que ce mode doit être utilisé pour les inscriptions sur une seule ligne, dont la largeur peut être sélectionnée automatiquement. Il s'agit d'en-têtes et d'étiquettes d'objets sur une seule ligne.


Outil Texte - étiquettes sur une seule ligne

▍Tool Text - gros morceaux de texte

Le deuxième mode de l'outil pour travailler avec du texte est utilisé pour former des conteneurs de texte d'une taille donnée, qui se comportent comme une balise p avec une largeur donnée, ou comme une balise p située dans une cellule de grille. La force de cet état est qu'il peut contrôler la taille du bloc de texte. Pour créer un fragment de texte, vous devez sélectionner l'outil Texte et sélectionner la zone que le fragment doit occuper. En fait, ce mode doit être utilisé pour les fragments de texte multilignes.


Outil Texte - Extraits de texte multilignes

▍ Outil de sélection - sélection d'objets

À l'aide de l'outil Sélectionner, les objets sont déplacés, redimensionnés et copiés. Dans la figure ci-dessous, vous pouvez voir les éléments auxiliaires de cet outil, à savoir les lignes roses qui aident à déterminer la distance entre les objets et les lignes bleues avec lesquelles il est pratique d'aligner les objets.


Outil de sélection

▍Tool Line - lignes

Parfois, les lignes sont très utiles, par exemple, pour séparer des éléments de page. Par conséquent, nous parlons ici de l'outil Ligne. D'un point de vue technique, vous pouvez utiliser l'outil Rectangle pour la même chose, mais que pouvez-vous faire, l'élément HTML div peut être utilisé pour implémenter n'importe quoi.


Outil Ligne

Design: recommandations et astuces

▍ Disposition

Dans le développement Web, la mise en page est généralement représentée par l'en-tête de la page, le menu, le contenu de la page et le pied de page. Tous ces éléments font partie de la disposition, mais la disposition elle-même est quelque chose de plus que la somme de ces parties. La mise en page est la façon dont les éléments sont organisés sur une page.

Par exemple, lorsque j'ai conçu la page d'informations pour Sidemail , j'ai placé uniformément les éléments à l'intérieur du conteneur. La figure suivante, dans sa partie inférieure, montre exactement cette option de conception, que je considère comme réussie, et dans la partie supérieure il y a une option infructueuse. En conséquence, ce qui s'est passé a été perçu, par rapport à une autre option, comme quelque chose de plus intégral, cette option semblait plus précise que celle que je considérais comme infructueuse.


Exemples de mise en page infructueuse et réussie

▍Couleurs

Lors du choix des couleurs pour votre prochain projet, soyez conscient d'un concept tel que la psychologie des couleurs . Pour trouver de bonnes combinaisons de couleurs basées sur la couleur primaire, vous pouvez utiliser le projet Paletton .

Pour créer une hiérarchie de page visuelle, utilisez des nuances de couleurs de premier plan et de texte. Lorsque vous utilisez un arrière-plan coloré, essayez les nuances de la couleur utilisée pour le texte.


Exemples de travail avec des couleurs et du texte

▍Typographie

Les polices utilisées pour les différentes étiquettes affectent fortement la perception des pages, alors faites attention à leur choix. En règle générale, les polices commerciales sont plus belles que celles trouvées sur Google Fonts, mais si vous débutez en tant que concepteur Web, vous ne devriez pas gaspiller d'argent pour acheter des polices. Même parmi ce qui se trouve sur Google Fonts, vous pouvez trouver d'excellentes options.

Afin de séparer visuellement des fragments de texte, j'utilise souvent la technique, qui consiste dans le fait que les textes des inscriptions sont réalisés en majuscules avec une distance accrue entre les caractères. Les textes en majuscules sont symétriques, ils semblent attrayants, cependant, ils sont plus difficiles à lire, alors ne vous laissez pas trop emporter avec eux.


Exemples de texte en majuscules

Conception de page d'accueil (ou d'atterrissage)

J'essaie toujours d'éviter la tentation de créer un design à la mode, puis d'y insérer ce que je veux communiquer à travers la page. Au lieu de cela, je souligne les avantages du projet (et non ses fonctionnalités), crée une histoire à partir d'eux et raconte cette histoire à l'aide d'une page visuellement attrayante.

Après avoir compris quelle histoire je veux raconter à travers la page, je commence généralement à chercher de l'inspiration. Une grande source d'inspiration pour moi est le projet land-book.com , qui est un vaste catalogue de superbes designs pour les designs de page de destination pour lesquels vous pouvez voter. Un autre projet où vous pouvez chercher de l'inspiration est interfaces.pro . Il vous permet de sélectionner des pages de certains types, par exemple, il peut s'agir de pages contenant des informations sur les prix, de pages 404 ou de pages contenant des informations sur des sites. Je regarde juste tout cela jusqu'à ce que j'arrive à trouver suffisamment de sites que j'aime, dont l'apparence des pages correspond à mes idées sur le style du projet que je fais.


Page de destination

Après avoir formé une idée générale de ce dont j'ai besoin, le moment est venu de résoudre la tâche difficile de tout rassembler. Malheureusement, il n'y a pas de moyen simple. Afin de créer quelque chose de bien, vous devez beaucoup expérimenter, en faisant cela jusqu'à ce que vous aimiez ce que vous obtenez.

Peut-être vous demandez-vous si cela est normal si le design qui vous convenait parfaitement il y a une semaine a soudainement commencé à vous sembler moins bon, mais peut-être complètement inacceptable. C'est tout à fait normal et, en fait, si vous ressentez de telles sensations, alors c'est même bon. Cela est dû au fait que vous grandissez, étudiez et devenez meilleur dans le domaine du design. En conséquence, ce qui semblait être une tâche décourageante hier ne semble pas si compliqué aujourd'hui. Gardez cela à l'esprit et vous ne vous sentirez pas comme un écureuil dans une roue.

▍ Conclusions et recommandations

• Une sélection rigoureuse des polices est l'une de ces petites choses qui distinguent le bon design du mauvais.
• Les images sont importantes. Essayez d'utiliser des illustrations ou des photographies appropriées sur vos pages, au moins en petites quantités.
• Construisez une hiérarchie visuelle des éléments en utilisant des nuances de couleurs. Il ne suffit pas d'utiliser seulement quelques couleurs, dont l'une est la principale et la seconde est la couleur du texte.
• N'utilisez pas de récipients trop larges. Une largeur de 1 100 pixels est généralement suffisante.
• L'espace vide entre les éléments est un élément de conception important.
• L'histoire que raconte la page Web doit être basée sur les mérites du projet et non sur ses caractéristiques fonctionnelles.
• Si vous pensez que vos idées sont épuisées, cherchez l'inspiration dans d'autres projets.

Conception d'applications Web (ou panneau de contrôle)

Comme dans le cas de la conception de la page de destination, lors de la création d'une application Web, vous n'avez pas besoin de saisir immédiatement la disposition des éléments sur la page. La situation considérée diffère de la précédente en ce sens que vous ne racontez pas l'histoire au visiteur. Cette fois, vous créez un outil, et votre objectif principal est de le rendre pratique. Prenez un morceau de papier et un crayon et dessinez un plan de travail pour votre application. Pensez à ce dont cela dépend, comment faciliter le travail avec cette application.

Si nécessaire, faites quelques croquis ou mises en page. Explorez la conception de projets concurrents, réfléchissez à ce qui leur manque. Peut-être que vous décidez de faire quelque chose qu’ils n’ont pas, et cela peut devenir l’avantage compétitif de votre projet. Gardez à l'esprit que parfois, avant de dessiner des mises en page et de définir des options de conception, vous devez vous donner le temps de réfléchir.

Le meilleur conseil qui ne soit pas lié aux caractéristiques spécifiques des différents projets que je peux donner ici est de choisir une mise en page appropriée. En règle générale, les applications Web utilisent deux approches pour les mises en page. Le choix de l'un ou l'autre dépend des objectifs de l'application. Nous parlons de conteneurs d'une largeur fixe et de conteneurs flexibles qui remplissent tout l'écran.


Application Web

▍ Conteneurs à largeur fixe

Je préfère utiliser des conteneurs de largeur fixe, car il est plus facile pour l'utilisateur de se concentrer sur une zone limitée, car pour voir ce qui se trouve dans cette zone, vous n'avez pas besoin de mouvements oculaires inutiles. En outre, les applications qui utilisent des conteneurs fixes sont généralement plus soignées et les nouveaux utilisateurs de ces applications sont plus faciles à naviguer. Il convient de noter que de telles applications, en raison de la largeur limitée des conteneurs, sont plus difficiles à concevoir.

Voici quelques exemples d'applications Web qui utilisent des conteneurs fixes: Twitter , Buffer , DigitalOcean , Netlify , GitHub .

▍ Conteneurs flexibles

Les conteneurs flexibles sont parfaits pour les projets Web tels que les chats, les applications de feuille de calcul ou avec de grandes quantités d'informations présentées dans d'autres formats. En règle générale, lors de la conception de telles applications, il est important de placer autant de données que possible sur l'écran. L'inconvénient des conteneurs flexibles est le fait que la grande quantité de données affichées à l'écran peut dérouter l'utilisateur.

Exemples d'applications utilisant des conteneurs flexibles: Slack , Intercom , Hotjar , Google Sheets , Trello , Spotify .

▍ Conclusions et recommandations

• Choisir les bons conteneurs pour le contenu de l'application est important pour deux raisons. Tout d'abord, la mise en page dépendra de cela. Deuxièmement, pour passer à des conteneurs d'autres types, un travail sérieux sera nécessaire. Chaque projet est unique et nécessite des solutions uniques, alors n'ayez pas peur d'expérimenter.
• Efforcez-vous de la simplicité.
• Utilisez des polices dont les étiquettes sont faciles à lire.
• Lors de la sortie de grandes quantités de données, utilisez une hiérarchie visuelle.
• Analysez les décisions des concurrents et, en trouvant des failles, ne les laissez pas apparaître dans votre projet, ou, sur la base d'une telle analyse, dotez votre projet d'opportunités qui deviendront ses avantages compétitifs.

Résumé

Un développeur habitué à travailler avec du code plutôt qu'avec des images visuelles peut avoir du mal à passer à la vague du design. Mais le design est quelque chose que vous pouvez tout à fait apprendre. N'oubliez pas que le design peut être un avantage concurrentiel de votre projet, alors faites attention et créez des sites attrayants, pratiques et agréables à travailler.

Chers lecteurs! Pensez-vous qu'un seul programmeur peut obtenir de bons résultats de conception?