10 concepts de conception que chaque développeur web a besoin de savoir, BLOQ Creative
Kyle Fiedler présente dix concepts et pratiques de conception de base que chaque développeur doit connaître et comprendre.
Au cours des dernières années, j'ai enseigné un atelier sur les bases de la conception visuelle destinées aux développeurs. Comme avec la plupart des choses sur le web, j'ai trouvé un niveau diversifié de connaissances de la conception et de l'intérêt des deux étudiants qui ont pris mon atelier, ainsi que des développeurs que j'ai travaillé.
Cette liste est destinée à être une liste restreinte des concepts que je voudrais les développeurs que je travaille à comprendre au sujet de la conception. Il est destiné à orienter les développeurs dans la bonne direction en guise d'introduction à la réflexion et la communication sur la conception.
01. Le design est non seulement visuelle
02. Soyez centrée sur l'utilisateur
Le concepteur ne devrait pas avoir à assumer toute l'expérience de l'utilisateur; les concepteurs devraient simplement conduire. L'expérience devrait plutôt être partagée par l'ensemble de l'équipe (le cas échéant). Il y a beaucoup de cas où je comptais sur les développeurs ai pour me aider à trouver la meilleure façon de créer la plus grande expérience utilisateur. Non seulement ils savent mieux leurs limites, ils ont aussi une idée plus précise de toutes les possibilités.
03. Le design est en détail
04. Lors de la conception, croquis souvent
Sketches vous permettent d'itérer sur des idées rapidement et économiser beaucoup de temps à expérimenter dans le code ou mockups
Mon premier professeur d'université bien ancrée cela en moi quand j'étais étudiant. Elle ne serait pas nous laisser utiliser l'ordinateur jusqu'à ce qu'elle a vu des pages et des pages de croquis. Les jeunes designers ont tendance à lésiner sur les croquis ou les omettre tout à fait. Je vois encore beaucoup de concepteurs transition trop tôt de croquis à une conception de haute fidélité sans d'abord examiner toutes les solutions possibles.
La meilleure partie est que l'esquisse tout le monde peut le faire. Tout le monde sait comment dessiner des boîtes, des lignes et des flèches squiggled. Ce sont les outils fondamentaux dont vous avez besoin pour commencer à concevoir - il est vraiment simple. Nous ne sommes pas à la recherche de pièces d'une valeur inestimable d'œuvres d'art, et vous ne avez certainement pas besoin d'un diplôme d'art de fantaisie. Vous avez juste besoin d'être en mesure de communiquer clairement vos croquis et le processus de pensée derrière eux.
05. Utilisez l'espace blanc
Il semble être le concept le plus dur pour les développeurs à saisir: le plus grand avantage d'avoir la bonne quantité d'espace blanc donne à l'utilisateur une pause. Les pauses sont importantes pour le traitement des informations, surtout quand il y a une bonne quantité à traiter. Il est la raison pour laquelle 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 faire en sorte 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 de l'espace blanc, assurez-vous qu'il ya une autre colonne unique de l'espace blanc autour de l'équilibrer.
Pour l'espace vertical, il suffit d'utiliser des fractions de la taille de la police du corps. J'ai tendance à garder les choses simples et utiliser une échelle de .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 la taille des polices en déplaçant simplement haut et en bas de l'échelle que je veulent de type plus ou moins.
Apple utilise l'espace blanc très bien pour mettre en évidence et mettre en valeur ses produits
06. Grids ne sont pas seulement des cadres CSS
Fou, non? Grids d'abord trouvé d'importance dans la conception de ce qui est maintenant appelé style typographique international.
Une grille doit être utilisé pour:
- Créer des relations entre les objets
- Fournir un système de base pour l'alignement visuel
- Contribuer à créer un rythme horizontal et vertical
- Contribuer à créer l'équilibre optique
Tous ces concepts travaillent ensemble pour mieux vous permettre de créer un meilleur système visuel pour vos utilisateurs. La grille vous choisissez affecte l'unité de la conception; le choix d'une grille en fonction de ce qui est plus facile à mettre en œuvre ne sera pas nécessairement le meilleur choix de design pour votre contenu et les utilisateurs. En fin de compte, il est encore juste un outil et ne sera aussi bon que la personne maniant il.
Ne pensez pas seulement d'une grille en tant que cadre de CSS. Il est un outil de conception qui doit être utilisé dans un but
07. Quand tout a l'accent, rien ne
Il est comme avoir une conversation avec un groupe de personnes qui sont tous à vous en même temps hurlent à faire des choses différentes. Un seul élément devrait avoir l'accent sur la page: le plus important. En donnant la priorité à un seul élément et ayant une hiérarchie claire fournit des flux pour les lecteurs et doit les diriger dans la direction souhaitée.
08. Gardez un dossier d'inspiration
Non seulement cet acte comme point de référence, il vous oblige aussi à être constamment à la recherche et l'évaluation de la conception. Le simple fait de choisir des morceaux de conception et de les enregistrer dans un dossier de forces vous d'utiliser ces muscles d'analyse de conception.
Gardez une galerie d'inspiration. À partir de photos à tees, pouvant faire référence à des photos, des dessins ou toute autre chose pourrait aider à susciter une idée pour vos propres conceptions
09. Le design est tout au sujet de la résolution de problèmes
Vous devez aborder la conception comme un ensemble de problèmes qui nécessitent des solutions. Tout sur la page doit avoir une raison d'être là et être résoudre un problème spécifique pour l'utilisateur ou le design. J'ai tendance à supprimer des fonctionnalités du jeu de fonction jusqu'à ce que le problème que je résoudre devient très apparente.
10. Savoir parler et la conception de la critique
Un moyen sûr d'importuner un designer est de leur dire qu'un bloc rouge doit être bleue, qui doit être déplacé un morceau de texte sur, ou pour rendre le logo plus. Je pense que vous avez l'idée.
Puis, je l'espère, le concepteur travaillera avec vous pour former une solution au problème. Ceci est votre chance de proposer une résolution; Ne demandez pas à faire le logo plus.
Ressources et atelier
Si vous avez trouvé cela intéressant, ne hésitez pas à consulter ma conception des ressources des développeurs et des pistes d'apprentissage de la conception. J'aimerais aussi vous voir soit dans la version en ligne ou à la version face-à-face de l'atelier.
Mots: Kyle Fiedler
Kyle Fiedler est un concepteur à thoughtbot, aidant à construire des applications Rails et iOS. Il a été la conception et le développement, sous une certaine forme, depuis le boom dot-com (et le buste) et n'a pas cessé depuis.
Cet article a paru dans le numéro 244 du magazine net.