10 concepts de conception que chaque développeur Web doit connaître
Au cours des dernières années, j'ai donné un atelier sur les bases du design visuel destiné aux développeurs. Comme pour la plupart des choses sur le Web, j'ai trouvé un niveau diversifié de connaissances en conception et d'intérêt de la part des étudiants qui ont suivi mon atelier, ainsi que des développeurs avec lesquels j'ai travaillé.
Cette liste est destinée à être une liste restreinte des concepts que j'aimerais que les développeurs avec lesquels je travaille comprennent le design. Il vise à orienter les développeurs dans la bonne direction en tant qu'introduction à la réflexion et à la communication sur le design.
01. Le design n'est pas seulement visuel
Le design n'est pas seulement la façade; c'est la personnalité en dessous. Pour une raison quelconque, la conception est stigmatisée comme étant uniquement la partie visuelle du site Web. Cela ne pourrait pas être plus faux ou mal compris. Le design est l'expérience complète depuis le moment où les utilisateurs entrent sur votre site jusqu'à bien après leur départ.
Le design est le «comment» et «pourquoi» les gens veulent utiliser le site; la vitesse à laquelle le site se charge; l'interaction entre survoler, cliquer et toucher; et le rythme auquel vous proposez de nouvelles fonctionnalités et de nouveaux contenus. Tous ces concepts comprennent la conception.
Parce que le design est plus que des aspects visuels et affecte toute l'expérience, chaque personne sur un projet est un concepteur. Tout membre de l'équipe qui souhaite découvrir comment l'utilisateur interagit avec le site est un concepteur. Le frontend, le backend et la gestion de projet devraient tous penser à la conception.
02. Soyez centré sur l'utilisateur
Les utilisateurs sont primordiaux et doivent toujours être au premier plan de chaque décision concernant votre site ou votre application. Les conceptions doivent permettre à vos utilisateurs d'atteindre leurs objectifs avec rapidité, efficacité et, surtout, plaisir.
Dans mon atelier, je demande aux étudiants de créer un dossier de conception initial après avoir choisi un projet sur lequel travailler. Bien que je leur donne des directives simples à suivre, pour la plupart, elles sont axées sur l'utilisateur: qui sont-ils, que font-ils sur votre site et quel est le sentiment que vous voulez qu'ils ressentent lorsqu'ils visitent ainsi que quand ils partent?
Bien que cela fonctionne bien pour les petits projets de l'atelier, lorsqu'il s'agit de projets plus importants, vous devriez penser à cette fondation à plus grande échelle. Les concepteurs utilisent des personas, des narrations et plus encore pour indiquer qui sont les utilisateurs du site et ce qu'ils veulent faire sur le site. Plongez-vous dans ces directives quelle que soit la forme qu'elles prennent pour votre projet et utilisez-les pour influencer toutes vos décisions de conception.
Le concepteur ne devrait pas avoir à assumer toute l'expérience utilisateur; les concepteurs devraient simplement le diriger. L'expérience doit plutôt être partagée par toute l'équipe (s'il en existe une). Dans de nombreux cas, je me suis appuyé sur des développeurs pour m'aider à trouver le meilleur moyen de créer la meilleure expérience utilisateur. Non seulement ils connaissent mieux leurs limites, mais ils ont également une idée plus claire de toutes les possibilités.
03. Le design est en détail
Les détails sont capables de rendre un «bon» design «génial». Le souci du détail dans une expérience utilisateur peut faire la différence entre un utilisateur satisfait et un utilisateur ennuyé. Avoir la bonne nuance de bleu ou enrouler le lien autour d'un texte particulier est vraiment important. Le problème avec les détails est qu'il est facile de s'y prendre. Se concentrer trop tôt sur les détails n'est pas nécessaire et peut ralentir le processus. Il est important de savoir quand se concentrer sur des détails spécifiques ou quand il est avantageux de visualiser une image entière et plus grande.
04. Lors de la conception, dessinez souvent
Les avantages de esquisser les expériences utilisateur sommes bien documenté . L'esquisse vous aide à réfléchir au contenu, à la hiérarchie et au flux entre autres aspects. Les croquis sont bon marché, faciles à faire et très rapides. Vous devriez être en mesure de créer une nouvelle idée toutes les trente secondes. L'esquisse est également l'un des meilleurs moyens de communiquer des idées sur la mise en page, l'expérience utilisateur et le flux d'utilisateurs pour un site.
Mon premier professeur d'université a ancré cela en moi quand j'étais étudiant. Elle ne nous laisserait pas utiliser l'ordinateur avant de voir des pages sur des pages de croquis. Les jeunes designers ont tendance à lésiner sur les croquis ou à les omettre complètement. Je vois encore de nombreux designers passer trop tôt de croquis à une conception plus fidèle sans avoir d'abord exploré toutes les solutions possibles.
La meilleure partie du dessin est que tout le monde peut le faire. Tout le monde sait dessiner des cases, des lignes gribouillées et des flèches. Ce sont les outils de base dont vous avez besoin pour commencer à concevoir - c'est vraiment aussi simple que cela. Nous ne recherchons pas d'œuvres d'art inestimables et vous n'avez certainement pas besoin d'un diplôme d'art sophistiqué. Vous avez juste besoin de pouvoir communiquer clairement vos croquis et le processus de réflexion qui les sous-tend.
05. Utiliser un espace blanc
Cela semble être le concept le plus difficile à saisir pour les développeurs: le plus grand avantage d'avoir la bonne quantité d'espace blanc est de donner une pause à l'utilisateur. Les pauses sont importantes pour le traitement des informations, en particulier lorsqu'il y a beaucoup à traiter. C'est pourquoi nous avons des paragraphes et des phrases au lieu d'un seul long bloc de texte en cours d'exécution.
La clé est de s'assurer que l'espace blanc a une relation avec d'autres objets sur la page, y compris l'autre espace. Si vous avez une seule colonne d'espace blanc, assurez-vous qu'il y a une autre colonne d'espace blanc autour pour l'équilibrer.
Pour l'espace vertical, utilisez simplement des fractions de la taille de la police du corps. J'ai tendance à garder les choses simples et à utiliser une échelle de 0,25, mais il y a plusieurs autres échelles que vous pouvez utiliser . Par exemple, si la taille de la police du corps est 16px (1em): 4, 8, 12, 16, 20, 24, 28, 32, 40, 48. Cela permet de choisir les tailles de police en déplaçant simplement vers le haut et le bas de l'échelle lorsque je veulent un type plus grand ou plus petit.
06. Les grilles ne sont pas que des frameworks CSS
Fou, non? Les grilles ont d'abord trouvé leur place dans la conception dans ce qu'on appelle maintenant Style typographique international .
Une grille doit être utilisée pour:
- Créer des relations entre les objets
- Fournir un système de base pour l'alignement visuel
- Aide à créer un rythme horizontal et vertical
- Aide à créer l'équilibre optique
Tous ces concepts fonctionnent ensemble pour vous permettre au mieux de créer un meilleur système visuel pour vos utilisateurs. La grille que vous choisissez affecte l'unité de la conception; choisir une grille en fonction de celle qui est la plus simple à mettre en œuvre ne sera pas nécessairement le meilleur choix de conception pour votre contenu et vos utilisateurs. En fin de compte, ce n'est encore qu'un outil et ne sera aussi bon que la personne qui l'utilise.
07. Quand tout est accentué, rien ne
C'est comme avoir une conversation avec un groupe de personnes qui vous crient tous simultanément de faire des choses différentes. Un seul élément doit mettre l'accent sur la page: le plus important. Mettre l'accent sur un seul élément et avoir une hiérarchie claire fournit un flux pour les lecteurs et devrait les orienter dans la direction souhaitée.
08. Gardez un dossier d'inspiration
Gardez une galerie de toutes les choses qui vous inspirent visuellement. Il peut s'agir de photos, de vidéos, d'affiches, de tee-shirts et de sites Web; tout ce qui peut susciter des idées pour une solution au problème de conception particulier auquel vous êtes confronté.
Non seulement cela agit comme un point de référence, mais cela vous oblige également à constamment regarder et évaluer le design. Le processus simple de sélection des pièces de conception et de les enregistrer dans un dossier vous oblige à utiliser ces muscles d'analyse de conception.
09. Le design est une question de résolution de problèmes
Vous devez aborder la conception comme un ensemble de problèmes nécessitant des solutions. Tout sur la page doit avoir une raison d'être là et résoudre un problème spécifique pour l'utilisateur ou la conception. J'ai tendance à supprimer des fonctionnalités de l'ensemble de fonctionnalités jusqu'à ce que le problème que je résolve devienne très apparent.
Parfois, il nous est difficile d'exposer les problèmes plutôt que de sauter à une solution. Travailler à l'envers aide vraiment à cela. Lorsque vous décidez si quelque chose doit être rouge, par exemple, arrêtez-vous et pensez aux raisons pour lesquelles vous le vouliez en premier lieu. Demandez-vous: qu'est-ce que j'essaie de réaliser en le rendant rouge? Quel a été mon processus de pensée? Vous pouvez revenir là où vous avez commencé, mais vous comprendrez mieux pourquoi et ce que vous faites.
10. Savoir parler et critiquer le design
Un moyen sûr d'ennuyer un concepteur est de lui dire qu'un bloc rouge doit être bleu, qu'un morceau de texte doit être déplacé ou d'agrandir le logo. Je pense que vous avez l'idée.
La meilleure façon de donner une rétroaction constructive est d'attirer l'attention sur les problèmes de conception. Ayez des preuves basées sur les utilisateurs, le flux du site, les objectifs de conception et les principes visuels pour prendre en charge les problèmes que vous voyez avec la conception. Cela confirme alors votre opinion sur ce qui devrait changer et fournit une base solide pour ce qu'est le succès pour l'utilisateur ainsi que pour la conception.
Ensuite, j'espère que le concepteur travaillera avec vous pour trouver une solution au problème. Ceci est votre occasion de suggérer une résolution; ne demandez pas d'agrandir le logo.
Ressources et atelier
Si vous avez trouvé cela intéressant, n'hésitez pas à consulter mon conception pour les ressources des développeurs et concevoir des parcours d'apprentissage . J'aimerais aussi vous voir dans l'un ou l'autre version en ligne ou au version face à face de l'atelier.
Mots: Kyle Fiedler
Kyle Fiedler est un concepteur chez thinkbot, aidant à créer des Rails et des applications iOS. Il conçoit et développe, sous une forme ou une autre, depuis le boom (et l'effondrement) du point-com et ne s'est pas arrêté depuis.
Cet article a été initialement publié dans magazine net numéro 244.
Aimait ça? Lisez-les!
- Utile cartographie mentale outils pour les concepteurs
- Le guide du designer sur le Nombre d'or
- Conseils de pro pour le parfait mise en page du site Web
Vous avez un bon conseil de conception? Partagez-le dans les commentaires!
