Je suis arrivé à la conception assez tard et j’ai dû apprendre mes leçons à la dure. Néanmoins, j’ai réussi à créer quelque chose que les gens aiment regarder et qu’ils trouvent agréable à utiliser. Voici donc cinq choses importantes que j’ai apprises, qui ne feront pas automatiquement de vous un designer, mais qui m’ont aidé à améliorer considérablement mon travail.
1. NE PAS PRENDRE DE DÉCISIONS
J’ai lu une histoire qui explique pourquoi les produits Apple sont si simples. L’hypothèse était que Steve Jobs était terrifié à l’idée de faire les mauvais choix. Il a éliminé autant de choses que possible dans les produits Apple où il devait prendre des décisions.
C’est ce qui m’a inspiré dans la rédaction de Draft. Tout se bat pour être à la page. Je n’ajoute pas une ligne, une couleur ou une barre de navigation fantaisiste parce que je pense que ça ferait bien. Il FAUT que ce soit là. Si j’introduis une ligne, c’est parce qu’elle sépare deux choses. Sans elle, vous seriez confus.
Trop de gens ajoutent des éléments pour des raisons purement esthétiques. C’est bien si vous avez confiance en vos capacités. Je n’ai pas confiance. Je suis terrifié à l’idée de faire le mauvais choix. Alors je me donne le moins de choix possible.
Ne mettez rien sur la page à moins que cela n’ait de l’utilité.
Vous aurez toujours besoin d’un serveur dédié pour votre entreprise. C’est important aujourd’hui dans un monde hyper connecté.
2. FAITES L’ALIGNEMENT DES CHOSES.
Les gens remarquent des éléments qui ne sont pas bien alignés. Souvent, le résultat semble désordonné ou désordonné.
J’ai inventé cet exercice pour m’apprendre à reconnaître et à créer des pages harmonieusement alignées :
Prenez un site ou une page web, qui n’est pas le vôtre, et modifiez l’alignement des éléments. Voici un exemple que j’ai créé en poussant des choses sur la page du Basecamp de 37signal.
Vous pouvez discuter de celui que vous préférez. Certains collègues ont aimé le mien. Mais le but de l’exercice était de me faire prendre conscience de la manière dont les éléments peuvent être alignés et de leur impact.
Aujourd’hui, je passe beaucoup de temps à expérimenter l’alignement. Récemment, j’ai fait un test séparé de la page d’accueil de Draft :
Les gens l’aimaient déjà et elle s’est bien convertie. Mais j’ai tout centré :
Mon taux de conversion s’est amélioré de 10 %. Comme beaucoup de tests fractionnés, je ne peux pas définir pourquoi l’un est meilleur que l’autre, et des changements comme celui-ci pourraient avoir des conséquences différentes pour vous. Mais quelque chose d’aussi simple que l’alignement a amélioré la façon dont mon travail est perçu et le nombre de personnes qui utilisent mon logiciel.
3. RENDRE LE TEXTE LISIBLE
Peu importe la beauté de votre page, si je ne peux pas lire le texte, je clique sur le bouton « Retour » et je ne reviens jamais. Ne vous préoccupez de rien d’autre tant que vous n’avez pas rendu votre site facile à lire :
Apprenez à dessiner dans les pages de votre site. Il est de taille modulable pour que votre travail se lise correctement sur des machines de différentes résolutions.
Une taille de police de 12px était facile à lire il y a 10 ans, mais pour les moniteurs haute résolution, il faut quelque chose de plus grand : 1em ou plus.
Un texte lisible nécessite un contraste. Les concepteurs sont formés à considérer le texte comme un élément rectangulaire foncé sur un fond plus clair (ou parfois inversé). Le gris sur gris ne fonctionnera pas.
Pensez à la longueur et à l’espacement des lignes. Par exemple, comment est formaté votre livre préféré ? Il n’y a probablement pas plus de 50 à 75 caractères par ligne de corps de texte. Il est difficile pour l’œil de trouver la ligne suivante si la longueur de la ligne est trop importante. De même, il est difficile pour l’œil de repérer la ligne suivante si les lignes sont trop rapprochées. Un espacement de 150 % de la taille de la police est une règle empirique pour un espacement confortable des lignes.
Lorsque les clés de la lisibilité vous sembleront logiques, commencez à explorer la grande variété de choix de polices disponibles auprès de services comme Google Web Fonts. Vous n’avez pas besoin de vous en tenir aux valeurs par défaut d’Arial, d’Helvetica ou de Times New Roman, que tout le monde utilise.
N’oubliez pas mon premier point, qui s’applique également aux choix de polices : Ne prenez pas de décisions. Si vous le pouvez, choisissez une seule police pour tout. Si vous le devez, choisissez deux polices contrastées : une pour les titres, une pour le corps du texte. Choisir une face avec ou sans empattement est la façon la plus évidente d’assurer le contraste typographique. Dans Draft, je voulais une police à largeur fixe pour l’écriture, j’ai donc choisi « source-code-pro », mais les titres avaient l’air ridicule. Un beau contraste était ma police préférée pour les titres : Futura.
4. CHOISISSEZ LES COULEURS AVEC SOIN OU RESPECTEZ LES RÈGLES
Si vous n’êtes pas formé à la théorie des couleurs, vous aurez besoin d’aide pour choisir votre palette de couleurs. Mon conseil : Ne vous fiez pas à vos propres goûts pour choisir les couleurs. Pour Draft, je savais que la palette de couleurs pouvait être une décision déterminante, j’ai donc choisi une triade basée sur une règle systématique simple. Une palette de couleurs en triade utilise trois couleurs équidistantes sur la roue des couleurs – elles peuvent être reliées en dessinant un triangle équilatéral.
J’ai trouvé un bleu que j’aimais et quelques nuances de gris. J’ai trouvé. Comme j’avais besoin de quelques couleurs supplémentaires pour aider à signifier d’autres choses dans mon application, comme des notifications de réussite ou des messages d’erreur, je me suis tourné vers un outil de couleur merveilleux, Kuler, j’ai choisi la règle de couleur Triad, j’ai défini mes deux gris et bleu que j’avais déjà, puis j’ai utilisé la contrainte de la règle pour trouver un rouge et un vert.
Prenez ensuite un bon hébergement Web : https://evok.com/fr/hebergement-site-internet/
