Le pouvoir du dessin au stylo et au papier

Besoin de concevoir quelque chose? Il peut être tentant de commencer par un outil informatique, par exemple un logiciel de wireframing comme Balsamiq, ou des outils de conception comme Photoshop ou Figma. Ceux-ci ont leur place, mais je recommanderais de prendre du recul et de commencer avec l'humble stylo et papier.

Dessiner à la main peut sembler peu familier et inconfortable pour ceux qui ne se sentent pas enclins à l'art, mais la flexibilité des croquis à la main combinée à notre imagination signifie que nous pouvons travailler sur plus d'idées et former une meilleure direction de conception plus rapidement que si nous avions commencé. avec une solution informatique plus concrète.

Certes, je me bats avec moi-même parfois; alors que j'ai passé mon enfance avec un carnet de croquis perpétuellement à la main et que j'ai obtenu un diplôme universitaire en arts, le carnet de croquis papier a été brièvement oublié lorsque j'ai commencé ma carrière en conception de sites Web. Il m'a fallu des années pour m'embrouiller avec des concepts sans intérêt et avoir l'impression de ne pas repousser mes limites avant de réaliser à quel point la génération d'idées via des croquis physiques rapides pouvait être puissante.

Ce processus est recommandé même si nous ne concevons pas quelque chose de grand ou dans la capacité d'un concepteur. Tout le monde a besoin d'être un « designer » de temps en temps ; de la création d'une page d'accueil personnelle rapide, d'une page de destination pour un nouveau projet open source ou de la création de belles diapositives pour leur prochaine présentation.

Prenez une feuille de papier et un stylo, et commençons !

Pourquoi commencer avec du papier

Comme nous sommes toujours sur un ordinateur (et je pense que la plupart d'entre nous le sommes, de nos jours), parfois, il ne nous vient même pas à l'esprit de nous éloigner et d'essayer de concevoir quelque chose hors écran.

Les croquis sur papier peuvent sembler être uniquement associés aux arts visuels ou à la conception graphique (par exemple, le légendaire concepteur de logo Saul Bass est bien connu pour son plaidoyer en faveur du dessin), mais même les premières idées d'interfaces informatiques ont commencé avec du papier. Susan Kare, la créatrice des icônes de l'interface utilisateur graphique du Macintosh, a utilisé du papier quadrillé pour concevoir ses premières idées pour l'iconique premier pixel art.

La puissance des croquis sur papier réside dans le caractère éphémère des croquis et dans la façon dont ils semblent moins « réels » que tout ce que nous créons rapidement sur un ordinateur. Commencez à déplacer des mots et des boutons sur un écran d'ordinateur, et il est tentant de tomber dans une certaine direction et de ne jamais explorer d'autres chemins. Les croquis sur papier forcent notre imagination à combler les lacunes - bien plus rapidement que si nous ajoutions ces détails à une maquette informatique.

Nous voulons essayer beaucoup d'idées différentes lorsque nous travaillons sur un nouveau design. Bien que les premières idées puissent sembler assez bonnes, notre cinquième, septième ou dixième idée pourrait être encore meilleure . Travailler rapidement et librement nous aide à faire passer rapidement de nombreuses idées. Les idées circulent plus rapidement et nous pourrions nous surprendre avec ce qui apparaît sur la page lorsque nous travaillons sans restrictions.

Si vous n'êtes pas déjà familiarisé avec les outils de conception tels que Photoshop, Sketch ou Figma, il peut être écrasant de commencer et d'apprendre à utiliser un outil. Plutôt que de travailler sur de nombreuses idées, nous finissons par passer notre temps à déterminer quel bouton fait quoi.

Et des outils de wireframing comme Balsamiq ? Ils produisent des idées qui ressemblent à des croquis - des lignes sinueuses, des boîtes imparfaites - mais ils nous orientent toujours dans la direction de travailler sur une seule idée et de la jouer jusqu'à ce qu'elle soit parfaite plutôt que d'essayer d'abord de nombreuses idées différentes. Il est plus rapide de commencer avec un stylo et du papier . Les outils de wireframing peuvent être la prochaine étape du processus (plutôt que la première).

Les maquettes "sketchy" font également un meilleur travail pour exprimer le type de commentaires que nous recherchons lors de la présentation aux examinateurs. Une maquette trop parfaite au pixel près incitera souvent à se méfier des détails non pertinents, mais une esquisse approximative entraînera des conversations de niveau supérieur sur la mise en page.

Répétez-vous : lâche, rapide, n'a pas besoin d'être parfait

Nous avons tous vu ces croquis de "design" qui sont magnifiques et détaillés. Ce ne sont pas les standards pour vous mesurer. Ignore les. Nos croquis doivent être rapides sans trop de détails.

Nous utiliserons plutôt des lignes et des boîtes très rapides, en gardant nos croquis petits et rapides.

Nous pouvons utiliser ces petits croquis pour essayer plusieurs versions d'une mise en page de page d'accueil :

L'esquisse est utile pour à peu près n'importe quel type de tâche de conception : bulletins d'information, logos, présentations, widgets - tout ce dont vous avez besoin pour penser rapidement à de nombreuses idées visuelles. Par exemple, que diriez-vous d'explorer quelques idées pour une couverture d'ebook ?

Une bonne façon de commencer à pratiquer ce type de technique d'esquisse est de prendre un site Web existant et de procéder à l'ingénierie inverse de l'esquisse. Non seulement cela vous aide à vous familiariser avec l'acte de dessiner, mais vous commencez également à avoir une idée des différents modèles de conception.

Quelle que soit l'approche que vous adoptez, remplissez votre page d'idées ! Ne vous arrêtez pas même si vous tombez sur une idée qui vous passionne vraiment et avec laquelle vous voulez aller de l'avant. Lorsque vous remplissez une page, passez à la suivante. Explorez des idées alternatives juste au cas où vous trouveriez quelque chose que vous aimez plus.

Une fois que vous avez de nombreuses options, faites une pause pour laisser votre esprit se reposer, puis revenez pour encercler vos favoris, affiner et peut-être ensuite passer à la création d'une maquette. Vous aurez plus confiance dans la direction que vous choisissez puisque vous savez que vous avez essayé et rejeté de nombreuses autres idées.

Utilisez l'inspiration pour vous aider à dessiner et à générer des idées

Les croquis doivent aller de pair avec l'inspiration, alors ramenez cet ordinateur ! Alimentez votre propre processus de conception en recherchant d'autres conceptions et recherchez des détails qui, selon vous, fonctionneraient par vous-même.

Si vous ne savez pas par où commencer, cherchez l'inspiration dans des domaines liés à ce sur quoi vous travaillez. Pour une page d'accueil personnelle, il est bon de commencer à regarder les pages d'accueil de pairs dans votre secteur. Si vous êtes bloqué ou si vous souhaitez une inspiration plus générale, consultez ces ressources :

• Dribbble, qui est particulièrement utile pour rechercher des idées de conception d'éléments, comme un formulaire de connexion.
• SiteInspire, pour voir quelles sont les tendances actuelles du design moderne.
• Land-book, pour l'inspiration de la conception de la page de destination.
• Commerce Cream, pour l'inspiration de conception de sites Web de commerce électronique.
• Pttrns, pour l'inspiration de conception d'applications mobiles.

Au cours de vos recherches, notez les éléments que vous aimeriez intégrer à votre propre conception (et rappelez-vous de ne pas copier exactement !). Par exemple, une belle mise en page, une façon particulière dont l'inspiration associe le contenu aux images, un formulaire de contact qui semble particulièrement simple à utiliser. Essayer plusieurs idées de navigation différentes sur des croquis papier est beaucoup plus rapide que de créer des maquettes complètes ou de tout coder.

Au fur et à mesure que vous trouvez des éléments et des idées dont vous aimeriez vous souvenir, dessinez-les ! Continuez à ajouter des idées à votre feuille de croquis et remplissez votre page avec toutes vos idées potentielles. N'oubliez pas de travailler sur de nombreuses options et idées différentes pour commencer, puis d'affiner vos idées préférées par la suite.

N'oubliez pas de pratiquer !

Toute nouvelle compétence va sembler gênante les premières fois. C'est normal. Ne vous laissez pas décourager. Plus vous pratiquez votre dessin et utilisez cette compétence lors de la conception, plus cela vous semblera naturel.

Pour votre prochain projet de conception, rangez ce clavier et laissez libre cours à votre imagination et à votre créativité en commençant par des croquis au stylo et au papier.

Passons en revue ce que nous avons couvert :

• Les croquis sur papier sont le moyen le plus rapide d'explorer les options de conception.
  Nous pouvons faire beaucoup plus en moins de temps en nous éloignant de la souris.
• Utilisez l'inspiration lorsque vous dessinez pour stimuler la génération d'idées.
  Ne commencez pas avec une page blanche ; faites couler vos idées en regardant le travail de conception que vous aimeriez imiter.
• Faites plus de croquis et essayez plus d'idées que vous ne le pensez.
  Parfois, la cinquième idée peut sembler être une bonne direction, mais vous découvrirez ensuite qu'une idée ultérieure est encore meilleure.
• C'est en forgeant qu'on devient forgeron.
  Plus vous ferez de croquis, plus ça ira vite, plus ce sera facile et mieux vous vous améliorerez.

Vous avez d'autres sources d'inspiration ? A quoi ressemblent vos croquis ? J'aimerais avoir de vos nouvelles dans les commentaires!

Lectures complémentaires sur Smashing Magazine

• "Dessiner des images toute la journée", Alma Hoffmann
• « Croquis à la main : des choses que vous ne saviez pas que vos gribouillis pouvaient accomplir », Laura Busche
• "Comment créer une Porsche 911 avec Sketch", Nikola Lazarevic
• "Passer de Photoshop et Illustrator à Sketch : quelques conseils pour les concepteurs d'interface utilisateur", Lachezar Petkov
• « Brush Lettering : ça ne s'améliore qu'après l'entraînement », Alma Hoffmann
• "Illustration moderne du milieu du siècle : créer un livre de couverture avec Illustrator et InDesign", Manuela Langella
• "Esquisse en direct d'un parcours de visiteur de site pour créer un plan de site avec votre client", Matt Orley
• "Passer de Sketch à Figma : une étude de cas sur la migration des systèmes de conception", Buzz Usborne
• "Libérer le plein potentiel des symboles dans l'esquisse", Javier Cuello