Fermer

septembre 14, 2021

La puissance de l'esquisse au stylo et au papier


Résumé rapide ↬

Lors de la conception d'espaces numériques, il est naturel d'utiliser par défaut des outils de maquette numérique, mais cela supprime un monde de possibilités. Le dessin analogique peut libérer votre imagination et vous permettre de vous concentrer sur ce qui est le plus important au départ : les idées.

Besoin de concevoir quelque chose ? Il peut être tentant de commencer avec un outil informatique, par ex. un logiciel de wireframing comme Balsamiqou des outils de conception comme Photoshop ou Figma. Ceux-ci ont leur place, mais je recommanderais de prendre du recul et de commencer par l'humble stylo et le papier. notre imagination signifie que nous pouvons travailler sur plus d'idées et former une meilleure direction de conception plus rapidement que si nous commencions avec une solution informatique plus concrète.

Certes, je me bats moi-même avec cela à fois; alors que j'ai passé mon enfance avec un carnet de croquis perpétuellement à la main et obtenu un diplôme universitaire en arts, le carnet de croquis en papier a été brièvement oublié lorsque j'ai commencé ma carrière de concepteur de sites Web. Il m'a fallu des années pour m'embrouiller dans des concepts sans intérêt et avoir l'impression que je ne repoussais pas 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 big ou en qualité de designer. Tout le monde doit être un « concepteur » de temps en temps ; qu'il s'agisse de créer une page d'accueil personnelle rapide, une page de destination pour un nouveau projet open source ou de créer de jolies diapositives pour leur prochaine présentation.

Prenez une feuille de papier et un stylo, et c'est parti !

Pourquoi ? Commençons par le papier

Comme nous sommes toujours sur un ordinateur (et je pense que la plupart d'entre nous le sont, 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.

Le dessin sur papier peut ressembler à quelque chose uniquement associé à l'art visuel ou à la conception graphique (par exemple, le légendaire créateur 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 papier. Susan Kare, la conceptrice des icônes de l'interface utilisateur graphique du Macintosh, a utilisé du papier millimétré pour concevoir ses premières idées pour l'emblématique pixel art des débuts . 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 esquisses papier forcent notre imagination à combler les lacunes — bien plus rapidement que si nous ajoutions ces détails à une maquette informatique.

Esquisse papier

( Grand aperçu)

mockup

Esquisse sur papier versus maquette rapide. Notez que la maquette ressemble naturellement plus à une solution finie et qu'il est tentant de rendre toutes les marges, le remplissage et les bordures précis – quelque chose dont nous ne devrions pas nous inquiéter avant plus tard. Le papier nous permet d'ignorer ces détails. (Voir PDF)

Nous voulons essayer de nombreuses idées différentes lorsque nous travaillons sur un nouveau design. Alors que les premières idées peuvent sembler assez bonnes, notre cinquième, septième ou dixième idée pourrait être encore meilleure . Travailler vite et en vrac nous aide à passer rapidement à travers de nombreuses idées. Les idées circulent plus rapidement et nous pourrions nous surprendre par 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 PhotoshopSketch ou Figmail peut être difficile de commencer et de se familiariser avec 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 ondulées, des boîtes imparfaites – mais ils nous orientent toujours dans la direction de travailler sur une seule idée et de jouer avec elle 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 réviseurs. Une maquette trop parfaite au pixel près incitera souvent à s'interroger sur des détails non pertinents, mais un croquis approximatif entraînera des conversations de niveau supérieur sur la mise en page.

Plus après le saut ! Continuez à lire ci-dessous ↓

Répétez pour vous-même : lâche, rapide, ne doit pas être parfait

Nous avons tous vu ces croquis « designer » qui ont l'air magnifique et détaillé. Ce n'est pas la norme par rapport à laquelle vous mesurer. Ignore les. Nos croquis devraient être rapides sans trop de détails. ( Grand aperçu)

Au lieu de cela, nous utiliserons des lignes et des boîtes très rapides, en gardant nos croquis petits et rapides.

Éléments de base d'un croquis simple et rapide. J'aime utiliser des lignes ondulées pour le titre, directement pour le contenu, des cases avec un « x » traversant pour les images et ombrées pour les boutons. N'hésitez pas à copier mon style ou à créer votre propre langue vernaculaire !

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

Plusieurs versions d'une mise en page d'accueil.

Plusieurs versions d'un mise en page de la page d'accueil. ( Grand aperçu)

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 où vous devez travailler pour penser rapidement à de nombreuses idées visuelles. Par exemple, que diriez-vous d'explorer quelques idées pour une couverture de livre électronique ?

idées de mise en page de couverture de livre

Ici, nous devons utiliser des zones ombrées pour nous aider avec des idées de mise en page de couverture de livre, mais les croquis sont toujours rapides et lâche. ( Grand aperçu)

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

Technique d'esquisse. Un bon moyen de mettre en pratique vos compétences en esquisse et d'entraîner votre cerveau à reconnaître vos éléments d'esquisse en tant qu'objets de site Web. ( Grand aperçu)

Quelle que soit votre approche, remplissez votre page d'idées ! Ne vous arrêtez pas même si vous avez 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 d'autres idées juste au cas où vous trouveriez quelque chose que vous aimez davantage.

Une fois que vous avez plusieurs options, faites une pause pour laisser votre esprit se reposer, puis revenez pour encercler vos favoris, affiner, et peut-être ensuite passer à la réalisation d'une maquette. Vous aurez plus de 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

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 de l'inspiration dans des domaines liés à ce que vous êtes. travaille sur. Pour une page d'accueil personnelle, il est bon de commencer à regarder les pages d'accueil de pairs de votre secteur. Si vous êtes bloqué ou si vous voulez une inspiration plus générale, consultez ces ressources :

  • Dribbblequi est particulièrement utile pour rechercher des idées de conception d'éléments, comme un formulaire de connexion.
  • SiteInspirepour voir quelles sont les tendances actuelles du design moderne.
  • Land-bookpour l'inspiration de conception de page de destination.
  • Commerce Creampour l'inspiration de conception de sites Web de commerce électronique.
  • Pttrnspour l'inspiration de conception d'applications mobiles.

croquis et maquette de l'auteur

Inspiration (de Dribbble). Mes croquis, puis ma maquette. Vous pouvez voir comment j'ai été inspiré par la mise en page et la typographie, mais chaque détail est différent. La création de vos maquettes à partir d'une inspiration esquissée vous aidera également à éviter de copier textuellement d'autres conceptions. ( Grand aperçu) (Voir PDF)

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 jolie mise en page, une manière particulière que l'inspiration associe contenu et images, un formulaire de contact qui semble particulièrement simple d'utilisation. 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.

Lorsque vous trouvez des éléments et des idées dont vous aimeriez vous souvenir, esquissez-les ! Continuez à ajouter des idées à votre feuille de croquis et remplissez votre page avec toutes vos idées potentielles. N'oubliez pas, travaillez sur de nombreuses options et idées différentes pour commencer, et affinez vos idées préférées par la suite. C'est normal. Ne vous laissez pas décourager. Plus vous pratiquez vos croquis 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 sur 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' re-esquisser pour stimuler la génération d'idées.
    Ne commencez pas avec une page blanche ; faites circuler 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 une bonne direction, mais alors vous' Je découvrirai qu'une idée ultérieure est encore meilleure.
  • La ​​pratique rend parfait.
    Plus vous faites de croquis, plus cela ira vite, plus cela vous semblera facile et mieux vous vous améliorerez.

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

Autres lectures sur Smashing Magazine

Smashing Editorial" width="35" height="46" loading="lazy" decoding="async(fb, vf , yk, il)




Source link