Share
Nous passons une bonne partie de notre temps devant un moniteur. Nous avons probablement plusieurs ordinateurs, sans parler des iphones, des tablettes graphiques et de tous les autres diables ultra modernes qui envahissent nos bureaux. Nous faisons tous partie de la génération qui a besoin d'une souris pour feuilleter un album avec les photos de famille (adieu aux chers albums de famille avec les pages laissées en jaune) et Facebook pour envoyer des vœux d'anniversaire à un ami.. 20 exemples de superbes sites inspirés du "sketch" inclus!
Pourtant, au milieu de cette ère numérique, les meilleurs alliés d’un concepteur de sites Web sont des outils courants qui peuvent être achetés avec le changement sous les coussins de votre canapé. Je parle de faire du stylo, du crayon et du papier une partie du processus de création que d'autres concepteurs «non numériques» utilisent depuis des lustres: le dessin.
Dans cet article, nous allons traiter un argument qui préoccupera certainement beaucoup d'entre vous: nous verrons en fait comment l'esquisse peut nous aider à organiser les idées, à concevoir une mise en page efficace et - pourquoi pas - à donner une touche fraîche et originale à notre conception.
Imaginez ce scénario: Nous venons de terminer un briefing épuisant avec notre client et le moment est venu de réorganiser les idées. Nous connaissons les préférences et les besoins de nos clients. Sur cette base, nous devrions pouvoir définir la mise en page que nous devons concevoir. Le problème est la quantité d'informations que nous devons considérer! Nous avons défini que dans la page d'accueil, nous devions placer un curseur et un appel à l'action visible qui invite à un contact, les pages du site seront sept et nous devons également inclure les dernières nouvelles dans la page d'accueil, etc..
À ce stade, je vous assure que l’ouverture de Photoshop avec la prétention de créer une mise en page efficace est inutile; sans un plan pour ce que vous devez dessiner dans les détails, vous serez bloqué et obligé de concevoir essentiellement sans suffisamment de prévoyance pour prendre des décisions intelligentes. Cela signifie souvent plus de travail par la suite, en corrigeant ce qui aurait pu être fait correctement la première fois avec juste un peu de travail.
Esquisse offre quelque chose d'unique aux concepteurs Web? cela nous aide à organiser de grandes quantités d'informations en éléments gérables que nous pouvons concevoir autour.
Au lieu de cela, si vous avez la chance de pouvoir métaboliser des concepts et des idées dans un dessin, vous oublierez probablement quelque chose d'important, ce qui vous obligera à remettre la mise en page pour la deuxième fois. Et, vous savez probablement aussi qu'il existe des mises en page qui, même avec une petite modification, sont complètement modifiées et perdent leur efficacité communicative et esthétique? un résultat vraiment frustrant.
Quelques conseils sur la façon de procéder sans perdre la tête? Obtenez un stylo et du papier?
Cette première phase d’esquisse concerne l’élaboration de l’information de manière schématique et simple. Vous pensez probablement que toute cette rigueur et cette discipline n'ont rien à voir avec la créativité et l'imagination et vous voulez changer de décor? Ok, passons à l'étape suivante.
Nous avons dit que le croquis est un processus créatif, mais veulent ce que cela signifie dans la pratique?
Nous pouvons considérer le dessin comme un "pays intermédiaire". entre les informations en notre possession et la mise en page, nous finissons par planifier. Dans ce territoire hostile et magique, on trouve des couleurs, des polices de caractères, des boîtes, des idées, de l'inspiration, des textures, des images, des sensations, des doutes? et beaucoup plus. Inutile de dire qu'au milieu de tout cela, il est facile d'être confus et de trouver la bonne idée, une idée qui fonctionne et qui nous rend fiers d'être un designer..
Je pense qu'il n'y a rien de plus irritant que de se retrouver devant une feuille blanche, d'attendre l'inspiration supposée provenir de qui sait où et de finir par créer de très mauvaises mises en page (alors si vous êtes vraiment chanceux comme moi, vous ' Vous serez engagé avec un collègue qui profite au maximum de la situation pour vous dire que votre travail est nul, sans vous soucier d’adoucir la pilule pour qu’elle ne blesse pas votre sensibilité créative).
Un de mes carnets de croquis? nous reviendrons plus tard. Personnellement, j'ai passé des moments difficiles avec quelques clients: l'inspiration ne voulait pas venir et mes propositions graphiques me faisaient honte de moi. Je passais des heures à regarder les sites des galeries, me sentant encore plus déprimé car il semblait que tout le monde était capable de créer de belles mises en page. La seule personne qui n'a pas été en mesure d'assembler deux rectangles de manière agréable était moi. Dans mon cas, la facilité de la pression a été rendue facile à l'aide d'un crayon.
Donner le coup d'envoi à son processus créatif sur papier libère en fait votre imagination, vous permettant de travailler de manière plus spontanée et stimulante.
Surtout si le projet sur lequel vous travaillez est énorme et riche en détails techniques, compte tenu de tout cela, la première phase peut certainement être castrante pour le flux créatif, sans parler de la peur débilitante? D'échec? cela touche de nombreux designers: pris dans le besoin de faire vite et bien, nous restons souvent paralysés devant l'écran, incapables de réorganiser les idées et de les orienter dans la bonne direction..
Par conséquent, avant de commencer à travailler sur n'importe quel type de programme graphique, procurez-vous un stylo, du papier et? esquisser! Gribouillez, notez quelques idées, commencez à tracer une sorte de dessin abstrait pour vous familiariser et libérez ensuite votre intuition. Vous analyserez ensuite les idées, maintenant laissez-vous aller et évitez la logique et la rationalité, elles ne vous aideront pas dans cette phase.
Décrivez la mise en page, écrivez quelques notes, effacez tout, recommencez: pendant ce processus, votre esprit travaille rapidement et avec frénésie, alors notez tout avant que cette phase intuitive ne s'assombrisse! Vous découvrirez que donner une liberté totale à vos idées est agréable et relaxant, mais aussi utile..
La première idée sera rarement la bonne, préparez-vous à l'accepter. Sketching vous aide à vous débloquer et à saisir différentes opportunités graphiques qui pourraient vous convenir immédiatement et à la légère, mais cela ne signifie pas que vous ne commettez pas d'erreurs pendant cette phase. Le point positif est que même si vous commettez des erreurs au cours de cette phase, vous pouvez toujours déchirer la feuille, affûter le crayon et tout recommencer à zéro. Jeter une mise en page créée avec Photoshop simplement parce que vous vous êtes rendu compte que ce n’est pas la meilleure solution pour votre cas est sans doute démotivant.
Dans ce cas, je vous conseille de ne pas confondre l'esquisse avec la création de WireFrame: nous parlons de deux choses différentes, même si je vois une certaine confusion dans l'argument. Il y a quelques jours, un concepteur de sites Web m'a dit, citant ses mots exacts: ah, vous utilisez un stylo et du papier? Je fais tout en ligne? , mentionnant un site permettant de créer des maquettes avec une précision mathématique, avec un contrôle complet des couleurs et de la typographie.
Eh bien, ce n’est pas un croquis, c’est complètement autre chose. Cliquer avec la souris sur certains boutons pour faire apparaître des rectangles ne vous permet pas de donner forme à vos idées et de libérer votre flux créatif, essayez de le croire. Avec cette déclaration, je ne doute pas de l'utilité d'une bonne structure filaire, je veux simplement souligner les différences entre ces deux approches..
Rangez votre besoin de précision, règle et boussole! Dans cette phase, il n'y a pas de place pour l'ordre et la rigueur, alors ne limitez pas le flux créatif, ne vous bloquez pas sur les marges et les espaces, vous pourrez y penser plus tard. De la même manière, ne vous inquiétez pas si vous n'êtes pas particulièrement doué sur le plan artistique et que vos aptitudes manuelles vous permettent difficilement de tenir un crayon: le croquis sert à réorganiser les idées et non à former des artistes doués..
À cet égard, nous devons ajouter que même si le dessin est né comme un moyen d'expression libre de votre imagination et de votre créativité, mis à part vos capacités graphiques, cela ne veut pas dire que le dessin n'a pas non plus, d'une certaine manière, une valeur artistique. Voyons ensemble ce dont je parle.
La tendance de nombreux concepteurs Web à créer des croquis a donné le coup d'envoi à un véritable style graphique qui rappelle en quelque sorte l'aspect esthétique du dessin: nous avons des pinceaux qui miment sa spontanéité et sa légèreté, sans parler de centaines de polices de style écrit à la main trouvé sur le web. Grâce à ces ressources, créer une mise en page dans un style d'esquisse est assez facile, mais à part cela, les dessins qui utilisent ce style graphique ont généralement une touche d'originalité qui les rend attrayants et sortent du commun.
Le style d'esquisse, simplement parce qu'il est associé à une activité commune à de nombreuses créations, est souvent utilisé sur les sites de freelances ou d'agences de communication / design qui souhaitent transmettre ce concept de manière graphique. Quoi qu’il en soit, même la combinaison de certains éléments d’esquisse dans un graphique plus traditionnel peut donner une nouvelle perspective à des conceptions ordinaires..
Voyons comment certains sites ont utilisé ce style de manière efficace et originale et comment cela a influencé l'esthétique et l'efficacité de leurs mises en page..
http://www.kunalchhajer.com/ Le site du concepteur Web Kunal Chhajer reflète exactement le concept du style de croquis. Le graphisme est léger et agréable, il est enrichi de manière originale par des dessins qui rendent la mise en page unique. Le style est également rappelé lors de l’utilisation d’une police manuscrite dans le menu de navigation. Tous ces détails confèrent au design la créativité qu’un designer souhaite exprimer sur son site personnel..
http://www.creativewithak.com/ Dans le site Creative with a K, on utilise énormément de croquis et de griffonnages pour montrer clairement la "nature créative". du site. Dans ce cas, même la particularité de la mise en page, si atypique, rend le site spécial et insolite, même s’il est difficile à consulter.
http://www.lega-lega.com/ Le site Lega-Lega est un magasin en ligne de chemises aux imprimés un peu insolites et qui s'adresse définitivement à un marché jeune. L'ajout de quelques détails de croquis donne une coupe créative et perky au site.
http://beavory.com/ Beavory est le site / blog de Karen Mack, illustratrice israélienne. Le style de son site est délibérément basé sur un style qui rappelle sa nature créative de manière originale et prononcée. Chaque détail, de la structure de la mise en page basée sur les lignes irrégulières - comme si elles étaient dessinées avec un crayon feutre - vers les icônes du réseau social - trace complètement un style de croquis efficace.
http://bowtieperiod.com/ Bowtie est un studio numérique qui a décidé de se représenter de manière vraiment créative sur le Web. Les animations du site, ainsi que des dessins mignons et peu communs, rendent la présentation attrayante et fortement extravagante. Ils s'appellent eux-mêmes? Créatif? et, pour le prouver, ils utilisent des éléments dans le style d'esquisse.
http://www.makomako.cz/home/ La mise en page du groupe MakoMako est entièrement créée dans un style d'esquisse, de sorte que la même structure de la page est basée sur une feuille de papier avec des lignes irrégulières. sur les croquis et les polices manuscrites, un crayon. Un look curieux et très inhabituel pour un groupe.
http://stanthesnowman.com/ Maintenant que c'est presque l'été, beaucoup de son charme disparaît, mais l'efficacité graphique du site Stan le bonhomme de neige est toutefois hors de question. Dans ce cas, l'ajout d'images stylisées et d'une police calligraphique donne un style spontané à la mise en page, ludique et informel. Et il retrace le concept d'activité basé sur l'écriture de cartes de vœux.
http://www.greenawaypro.co.uk/ Le site du festival Greenaway Pro 2011 associe de manière particulière et attrayante le style de dessin et le style grunge, donnant à son agencement une empreinte vraiment originale. Dans ce cas également, le choix de ce style graphique particulier tend à exprimer un aspect informel, spontané et excentrique. Parfait pour un festival qui traite de musique et de surf, juste?
http://www.julianlaval.com/ Julian est un autre concepteur de sites Web indépendant qui, désireux de mettre en valeur ses compétences graphiques, a exploité le pouvoir de communication du croquis de manière vraiment créative. Bien sûr, ce n'est pas seulement cela qui rend son site spécial, mais même le caractère curieux et délibérément inhabituel de ses dessins. Comme beaucoup d’autres sites de ce style, les couleurs sont limitées à une échelle de gris pour rendre les illustrations plus réalistes..
https://www.littlecreatures.com.au/ Le site Little Creatures est entièrement conçu dans un style de croquis et grâce à la particularité de ses croquis, si peu remis à neuf, la page est si attrayante.
http://carnetordinaire.com/ Carnet Ordinaire est un site qui ressemble à un agenda, avec des notes de voyage, des annotations et des considérations personnelles. Compte tenu de la nature excentrique et intime du site, le style de croquis est celui qui convient le mieux: la mise en page est basée sur l'image d'un moleskine ouvert, renforcée par des croquis et des dessins stylisés. Même le fond est rendu plus original avec quelques dessins insérés dans l'opacité et par la présence d'un crayon, laissés avec désinvolture près de la moleskine.
http://www.wingcheng.com/ Le portfolio Wing Cheng est un exemple parfait de la nouvelle perspective que le style d’esquisse peut donner à une mise en page. La structure de la page est basée sur une moleskine entrouverte, à partir de laquelle les pages tombent. L'effet est rendu plus dramatique grâce aux ombres qui encadrent la conception et à l'utilisation de polices calligraphiques pour chaque contenu de la mise en page, des titres des projets à leur description. Mais la véritable particularité de ce site concerne l'exposition des projets, également dessinés au crayon de manière très créative..
http://www.kutztown.edu/acad/commdes/faculty/ L'université des communications et du design de Kutztown n'a pas pu trouver un meilleur moyen de s'adresser efficacement aux créatifs ou aux aspirants. La mise en page est certainement inhabituelle pour une réalité académique: le fond dans le style de la couleur de l’eau, la page basée sur une page d’un livre, les illustrations à la couleur de l’aquarelle, les polices particulières du menu de navigation? tous les détails originaux et certainement expressifs.
http://www.dannwhittakercreative.com/ Dann Whittaker sur son site montre un style graphique commun à de nombreux concepteurs de sites Web. Un look décontracté et spontané, basé sur une mise en page de livre et sur une utilisation cohérente des détails dans le style de croquis. Dans le complexe, la mise en page est très efficace et agréable esthétiquement.
http://www.chernobylheart.org.uk/ Dans le cas du site Chernobyl Heart, le style de croquis est utilisé pour souligner graphiquement le concept d’enfance: nous parlons ici d’enfants et nous le voyons à travers de petits croquis stylisés qui reproduisent leur façon de dessiner. Efficace et agréable.
http://demainjarrete.stpo.fr Le style de croquis est parfait pour présenter sur le web des bandes dessinées et des illustrations, de sorte que la mise en page représente de manière créative et visuelle la nature du site. Dans l'affaire Demain J'arrete, tout le site a un? Charbon de bois? style graphique, en partant du dégradé de l'arrière-plan jusqu'aux lignes irrégulières contenant la mise en page et le menu de navigation.
http://www.natureshop.co.nz/ L'ajout de quelques détails de croquis de manière apparemment décontractée peut conférer une touche créative particulière à un site minimal et essentiel. Le résultat, visible par exemple sur le site Nature Shop, est extrêmement agréable.
http://www.readytomarket.net/ L’agencement de Ready to Market montre comment le mélange d’un style moderne avec des détails stylisés et comiques peut donner un résultat nouveau et stimulant..
http://www.coucoushop.ch/ Le Cou Cou Shop est très agréable et agréable à voir. L'un des éléments les plus particuliers de la mise en page est sans aucun doute le pied de page, qui montre un paysage stylisé de la Suisse. Même le croquis du sac sous différents angles est un détail très original.
http://upsidedowntown.me/ Coloré, insolite et fantaisiste: le site du centre d’apprentissage Upside-Down Town investit énormément dans l’originalité du style de dessin. Chaque élément de la mise en page, en particulier dans l'en-tête, souligne l'efficacité visuelle des dessins, des croquis et des couleurs qui mettent en valeur de manière agréable et agréable le monde des enfants..
Nous avons vu comment le processus d'esquisse peut nous aider à traiter des idées de manière créative et en même temps, comment certaines esquisses peuvent donner une perspective différente et originale à nos mises en page. Lorsque vous commencez à travailler sur un nouveau projet de conception, prenez l'habitude de dessiner - et non seulement - cela peut s'avérer extrêmement utile également dans d'autres domaines, tels que la rédaction, et vous développerez avec le temps une flexibilité d'esprit qui deviendra utile dans votre travail. travail. Donc pour conclure: éteindre l'ordinateur et prendre du papier et un stylo!
Je termine de partager avec vous deux esquisses personnelles: une esquisse de mon portefeuille actuel et les premières idées que j'ai formulées pour cet article, lors d'un voyage en train vraiment ennuyeux..
Maintenant, à votre tour, je veux voir vos croquis!
Accentsconagua