Un guide du développeur sur la conception Web pour les non-concepteurs

J'ai créé mon premier site Web dans le cadre d'un projet scolaire à l'âge de 14 ans. La tâche était simple: créer un site très basique comprenant du texte, des images et un tableau. Mon attitude habituelle à l'égard des projets scolaires était de les oublier complètement et de trouver plus tard une solution de dernière minute. Mais, cette fois, je suis devenu fou.

Depuis mon premier site Web, j'ai toujours donné la priorité à ce que les choses soient belles. Admettez-le ou non, les gens jugent les choses en fonction de leur apparence. Si ce que vous faites semble bon, comme si vous savez ce que vous faites, les gens vont lui faire plus confiance. C'est juste comme ça que ça se passe.

Au fil des années de réalisation de projets parallèles, j'ai de plus en plus mis l'accent sur le développement de mes compétences en conception plutôt que sur le perfectionnement de ma programmation. Vous voyez, être un algorithme d'écriture de monstrum vous mène juste si loin. Tout en poursuivant le rêve de démarrer un projet parallèle rentable, vous devrez effectuer de nombreux travaux différents. Être designer en fait partie. Tout comme les athlètes Cross-fit, les fondateurs solos doivent être bien équilibrés pour bien performer.

Un superbe design n'est pas nécessairement celui avec le plus de votes positifs Dribbble. C'est celui que vous ne remarquerez pas en premier lieu. C'est un équilibre parfait entre «ta grand-mère pourrait faire ça» et «wow, c'est vraiment bien». Le design peut être votre avantage concurrentiel ou le clou dans le cercueil.

Ce n'est pas une question de talent

Quand j'étais plus jeune, j'ai beaucoup joué à Minecraft. J'ai vu tous ces bâtiments impressionnants construits par les gens. Mais quand j'ai fait quelque chose, ça ressemblait à une boîte. Moche et sans style. Comment faire quelque chose de bien dans Minecraft, non?

Alors, j'ai trouvé un gars sur YouTube et construit une copie exacte de ce qu'il a construit. Quelques semaines plus tard, j'avais développé mon propre style et je pouvais construire par moi-même. Du coup, mes créations ne ressemblaient pas à de la merde. Heck, j'ai même gagné un concours de construction.

Le design est une compétence, et comme toute autre compétence, elle peut s'apprendre.

Choisir le bon outil pour le travail

En programmation, vous pouvez utiliser le Bloc-notes et écrire une application aussi bonne que si elle avait été écrite dans un IDE complet ... bien que votre vie puisse être assez misérable et cela prendra probablement beaucoup plus de temps. Dans le monde de la conception de sites Web, MS Paint prendrait le rôle de Bloc-notes, et comme Bloc-notes, peu de gens choisissent de créer avec lui… J'espère.

Les outils de conception les plus populaires pour le Web sont:

  • Sketch, un seul outil MacOS qui, similaire à React, semble être codé en dur dans chaque offre d'emploi. 99 $ / an.
  • Adobe XD, un outil multiplateforme gratuit à utiliser qui joue le rôle de Vue. Il a une communauté plus petite, mais il est très facile de commencer.
  • Adobe Photoshop, le couteau suisse pour toute tâche de conception connue de tous. Il a pris la place de ... vous l'avez deviné, jQuery. 9,99 $ / mois

Il n'y a presque aucune différence que vous utilisiez du code Sublime ou VS pour écrire des applications. Ou que vous utilisiez React ou Vue pour le frontend. C'est juste une question de préférence. Il en va de même pour les outils de conception, car chacun a ses avantages et ses inconvénients.

J'utilise Adobe XD. La raison principale pour moi est que c'est multiplateforme, donc je ne suis pas pris en otage par l'écosystème Apple. Il est également soutenu par Adobe, donc il sera là pendant un certain temps. La meilleure chose pour les nouveaux arrivants est que, depuis mai 2018, Adobe XD est gratuit à utiliser avec seulement quelques limitations (sur lesquelles il est peu probable que vous tombiez de toute façon).

Ajuster votre état d'esprit

Le plus grand défi à relever dans le monde de la conception Web pour moi était d'ajuster mon état d'esprit. J'avais l'habitude de créer le design pendant que je codais le site Web. Tout avait une commande. Le flux était de gauche à droite et de haut en bas. Le fait est que cette approche fait de vous un pire concepteur.

Les outils de conception sont chaotiques car ils vous obligent à concevoir comme chaque élément est positionné de manière absolue. Acceptez ce changement. Cela vous donnera la liberté de changer rapidement les choses et facilitera les expériences. Et cela est essentiel, car la conception est un processus continu. On s'attend à ce que vous changiez beaucoup les choses avant d'obtenir un excellent résultat.

Apprendre les outils

Lors du codage, vous utilisez des éléments HTML tels que les divs, les étendues et les entrées et laissez le navigateur les rendre dans quelque chose de visuel. Avec les outils de conception, vous avez le pouvoir de sauter les intermédiaires et d'utiliser directement des éléments visuels tels que des formes et du texte.

J'ai choisi les 4 outils de conception les plus utilisés pour que vous puissiez passer moins de temps à apprendre et plus de temps à concevoir. De cette façon, vous pouvez commencer à vous entraîner dès que possible. Ci-dessous, je vais vous montrer comment ils fonctionnent et comment les utiliser.

Outil Rectangle

Les rectangles sont la forme la plus universelle. Vous vous surprendrez à les utiliser tout le temps. Considérez-le comme un div. C'est utile pour toutes sortes de choses, de la création d'entrées de texte aux conteneurs.

Outil de texte (étiquette)

L'outil Texte, comme son titre l'indique, vous permet de créer du texte. Ce n'est pas si simple cependant, car l'outil de texte a deux états: un pour le texte sur une seule ligne et l'autre pour plusieurs paragraphes. Heureusement, ils sont extrêmement faciles à apprendre à utiliser correctement.

Le premier état est un conteneur de texte sur une seule ligne qui ajuste sa taille en fonction de la taille du texte. C'est similaire à a, à l'exception du fait qu'il ne s'enroulera que si vous faites un saut de ligne. L'avantage de cet état est qu'il ajuste automatiquement la taille de la zone de texte en fonction de la hauteur de la ligne et de la taille de la police.

Pour le créer, cliquez simplement avec l'outil Texte sélectionné et écrivez. En règle générale, utilisez cet état pour tout ce qui n'a pas besoin d'une largeur spécifique et est une seule ligne. Par exemple, des titres et des étiquettes sur une seule ligne.

Outil de texte (paragraphe)

Le deuxième état est un conteneur de texte avec une taille spécifique qui se comporte comme un

avec une largeur spécifique ou

à l'intérieur d'une colonne de grille. L'avantage de cet état est que vous pouvez contrôler la taille de la zone de texte. Pour créer un paragraphe, vous cliquez avec l'outil de texte sélectionné et maintenez pour créer une sélection. En règle générale, utilisez cet état pour les paragraphes et les titres sur plus d'une ligne.

Sélectionner l'outil

Déplacer, redimensionner, dupliquer. C'est l'outil pour cela. Ces lignes roses vous indiquent la distance des éléments environnants. Les lignes bleues vous aident à aligner correctement les éléments.

Outil de ligne

Parfois, une ligne est pratique pour séparer certaines parties du design. C'est pourquoi l'outil de ligne est ici. Vous pouvez techniquement utiliser des outils rectangle à la place, mais bon, donc le div peut être utilisé pour n'importe quoi.

Conseils et techniques de conception

Disposition

Dans le développement Web, une mise en page est le plus souvent décrite comme un en-tête, un menu, un contenu et un pied de page. Cela en fait partie, mais une mise en page est plus que cela. C'est littéralement la façon dont tous les éléments sont disposés.

Par exemple, lorsque je concevais les informations de projet pour Sidemail, j'ai réparti les éléments à l'intérieur d'une carte de manière uniforme, ce qui la rend plus complète et plus propre.

Couleurs

Pour vous aider à trouver la couleur parfaite pour votre prochain projet, pensez à garder à l'esprit la psychologie des couleurs (colorpsychology.org). Paletton est un outil utile pour trouver la combinaison de couleurs parfaite en fonction de votre couleur principale.

Utilisez des nuances de couleurs primaires et de couleurs de texte pour créer une hiérarchie visuelle. Essayez des nuances plus foncées ou plus claires pour votre texte lorsque vous utilisez un arrière-plan coloré.

Typographie

La police affecte en grande partie la marque de votre projet, alors choisissez judicieusement. Les polices Premium ont tendance à être plus belles que celles de Google Fonts, mais lorsque vous débutez, n'en achetez pas. Même sur Google Fonts, il y a des joyaux cachés.

Une astuce que j'utilise très souvent pour diviser visuellement du texte consiste à rendre les étiquettes en majuscules avec un espacement plus grand entre les lettres. Le texte en majuscules est symétrique et a l'air bien d'un point de vue visuel, mais n'en abusez pas car il est beaucoup plus difficile à lire.

Conception d'une page d'accueil (ou d'une landing page)

J'essaie toujours d'éviter la tentation de concevoir des éléments à la mode et d'y insérer mon message. Au contraire, je propose des avantages (pas des fonctionnalités), je les mets dans une histoire et je raconte cette histoire sur une page visuellement attrayante.

Après avoir établi ce que je veux dire, je cherche généralement de l'inspiration. Une excellente ressource pour cela est land-book.com, un vaste répertoire de superbes pages de destination sur lesquelles les gens peuvent voter. Interfaces.pro est une autre grande page avec de l'inspiration de conception, où vous pouvez filtrer par catégories comme la tarification, 404 ou à propos de nous. Je viens de parcourir jusqu'à ce que je trouve suffisamment de sites que j'aime et correspondent à mon style souhaité.

Le plus dur est de tout mettre ensemble. Malheureusement, il n'y a pas de raccourci. Vous devez simplement répéter beaucoup jusqu'à ce que vous obteniez un résultat qui vous satisfait.

Vous vous demandez peut-être s'il est normal qu'un design dont vous étiez complètement satisfait il y a une semaine ne se sente soudain pas assez bien ou même moche aujourd'hui. La réponse est que c'est parfaitement normal et en fait une bonne chose. C'est essentiellement parce que vous grandissez, apprenez et devenez meilleur. Le défi d'hier n'est pas si difficile aujourd'hui. Gardez cela à l'esprit pour ne pas rester coincé dans une course de rats.

À emporter:

  • Une police de caractères unique fait une énorme différence
  • Les graphiques sont très importants, essayez d'utiliser au moins quelques illustrations ou images
  • Obtenez une bonne importance visuelle en utilisant plusieurs nuances de couleurs. Le texte et les couleurs primaires ne suffisent pas.
  • N'utilisez pas de conteneurs trop larges - environ 1100 px est assez large
  • Embrassez l'espace négatif
  • Parlez d'avantages, pas de fonctionnalités
  • Cherchez de l'inspiration autour de vous si vous êtes coincé

Conception d'une application Web (ou d'un tableau de bord)

Comme pour la conception d'une page de destination, ne vous lancez pas directement dans la conception. Cette fois, vous n'essayez pas de raconter une histoire. Au lieu de cela, l'objectif est la facilité d'utilisation. Prenez un stylo et du papier et planifiez le fonctionnement de votre application, ce qui devrait dépendre de quoi et comment naviguer facilement.

Faites des croquis ou des cadres en fil de fer si nécessaire. Effectuez une inspection appropriée de la conception des concurrents pour voir par vous-même ce qui manque et peut être amélioré, voire même transformé en un avantage concurrentiel. Parfois, il vaut mieux faire une pause avant de faire des plans sur papier et de concevoir.

Le meilleur conseil que je puisse donner qui ne soit pas spécifique à un cas d'utilisation est de choisir une mise en page appropriée. En règle générale, toutes les applications Web utilisent deux mises en page différentes en fonction de l'objectif de l'application: un conteneur de largeur fixe ou un conteneur de fluide qui remplit tout votre écran.

Conteneur fixe

Je préfère le conteneur fixe, car il est beaucoup plus facile de se concentrer sur une zone restreinte car il empêche les mouvements oculaires inutiles. Les applications de conteneurs fixes ont également tendance à être plus propres et moins encombrantes pour les nouveaux utilisateurs. Cependant, en raison de la plus petite largeur, les applications de conteneurs fixes sont plus difficiles à concevoir.

Exemples: Twitter, Buffer, DigitalOcean, Netlify, GitHub

Conteneur de fluide

Les applications de conteneurs de fluides conviennent parfaitement aux applications de chat, aux applications de feuille de calcul et à d'autres applications où plus de choses sur un écran sont essentielles. Mais sachez que beaucoup de données sur un écran peuvent devenir écrasantes.

Exemples: Slack, Intercom, Hotjar, Google Sheets, Trello, Spotify

Il est important de choisir le bon conteneur, car toute la mise en page de votre page en dépendra et le modifier par la suite demande beaucoup de travail. Chaque projet est unique et appelle des solutions uniques, alors n'ayez pas peur d'expérimenter!

À emporter:

  • Rester simple
  • Utilisez une police de caractères lisible
  • Utilisez la hiérarchie visuelle lors de l'affichage de nombreuses données
  • Tirez parti des mauvais choix de conception des concurrents

Emballer

N'oubliez pas que le design peut être votre avantage concurrentiel - alors utilisez-le et créez quelque chose d'extraordinaire.

Lancez votre parcours de conception en obtenant un modèle Adobe XD que j'ai créé pour la page de destination de mon dernier projet. Abonnez-vous simplement à ma toute nouvelle liste de diffusion et elle arrivera dans votre boîte aux lettres.

De plus, vous serez le premier à être informé de mon prochain article où je partagerai 69 jours de progrès que j'ai réalisés sur Sidemail - un projet SaaS sur lequel je travaille. Cela comprendra des éléments tels que le nombre d'abonnés, les visites sur le site, les dépenses et les brouillons de conception. Cela devrait aller de soi, mais je vous garantis absolument aucun spam. Je n'ai même pas le temps pour cette merde.

Mes DM Twitter sont ouverts, donc si vous êtes coincé dans la création de vos créations ou si vous avez d'autres questions, n'hésitez pas à me contacter.