Comment j’ai appris à voler comme un artiste en un mois et à concevoir et construire le site Web de ma nouvelle entreprise

# 4 - Quatrième mois de mon défi: 12 sujets à apprendre en 12 mois

Une photo que j'ai prise à Malaga (Espagne), la ville de Picasso, c'est un très beau tableau pour l'inspiration des couleurs

Vous vous demandez peut-être pourquoi j’ai appelé cet article «Comment j’ai appris à voler comme un artiste», en fait je n’ai pas appris à voler parce que je le savais déjà… je plaisante hehe . En fait, ce titre provient du livre Steal, interprété comme un artiste - Austin Kleon, que mon mentor m'a recommandé de lire.

“L'art c'est le vol.” - Pablo Picasso

Ce que je voulais au départ apprendre ce mois-ci, c’était des théories du design. Après avoir discuté avec mon mentor, elle m’a demandé de comprendre le sens des couleurs et de la typographie. Comme je voulais quelque chose de plus générique, elle m'a parlé de ce livre qui vous apprend de manière amusante à trouver l'inspiration, à garder la motivation, à définir le bon déroulement du travail de conception et à rester créatif et productif. Comme vous pouvez l’imaginer, je conserverai les théories des couleurs et la typographie pendant un autre mois d’apprentissage!

Je n'ai jamais vraiment étudié le design lui-même, je me considère comme un concepteur et développeur car j'ai appris en pratiquant et c'est la raison principale pour laquelle je veux en savoir plus sur les théories. J'ai peut-être le syndrome de l'imposteur et ce mois d'apprentissage est là pour l'arrêter!

J'ai commencé le défi le 6 juillet. Si vous lisez le précédent article du Learning Lab Challenge, où j'ai créé ma première application Web progressive, vous pouvez voir que je l'ai terminé le 13 juillet. Oui, je faisais un peu des deux entre ces dates et c’est mauvais. C’est principalement parce que je me suis engagé à créer le site Web de notre nouvelle société.

Préparation

  1. Trouver un mentor
    J'ai choisi Vera comme mon mentor. Elle était ma collègue dans ma société précédente et elle a beaucoup de talent.
  2. Définir la portée du sujet
    Comme décrit ci-dessous, je limiterai la portée de ce sujet au flux de travail de conception et à la recherche d'inspiration.
  3. Choisir une ressource d'apprentissage
    Ma principale ressource d'apprentissage sera ce livre: Steal Like An Artist - Austin Kleon.
  4. Définir un projet
    Comme je viens de démarrer une nouvelle entreprise, qui va fonctionner comme une agence web, je vais d'abord concevoir puis créer son site web. De plus, j'aimerais créer une liste de contrôle pour la conception Web que je pourrais utiliser dans tous mes projets.

Le cours / lecture

Voler comme un artiste d'Austin Kleon est un livre très court et facile à lire. C’est très drôle. Le livre est plein d’illustrations et de dessins, ce qui rend la lecture très intéressante. Chaque chapitre décrit un conseil ou un concept à appliquer dans votre vie ou votre travail.

Chacun de ces conseils concernait le flux de travail de conception, les piratages de conception ou la vie. J'ai pris note et essayer d'appliquer les plus précieux pour moi et c'était cool de voir que j'en appliquais déjà d'autres.

Flux de travail de conception

Austin Kleon n’a pas décrit un processus de conception, mais seulement un ensemble de conseils que j’ai compilés en tant que «conseils à inclure dans mon processus de conception».

Le premier et le meilleur conseil apporté par ce livre est de créer un fichier de balayage.
C’est essentiellement une collection d’art, de sites Web, de musique, de photos, d’art de rue, de tout ce qui vous fait ressentir quelque chose, tout ce que vous aimez ou tout ce que vous pourrez utiliser plus tard. La collection peut être physique, dans un ordinateur portable ou numérique, par exemple dans Pinterest, Google Keep, Google Drive, Evernote…
Chaque fois que vous devez démarrer un projet, vous pouvez accéder à ce fichier de balayage et sélectionner les ressources qui vous inspireront. C’est pourquoi il l’appelle fichier de balayage. Un peu comme l'amadou.

Je garderais celui-ci dans mon fichier de balayage, la meilleure peinture de tous les temps

Le deuxième conseil le plus important est de copier et d'apprendre en copiant. Je dois souligner que vous n'êtes pas censé faire une copie émoussée sans y penser, ce qui s'appelle du plagiat, mais bien «faire de l'ingénierie inverse», dessiner le sens qui se cache derrière et la reconstruire avec votre propre compréhension. En outre, ils disent que la copie de l'un est le plagiat, la copie de nombreuses sources est la recherche. Ce qui est une façon très positive de voir les choses. C'est quelque chose qui semble évident, mais intéressant à connaître et à faire consciemment.

Une image trouvée dans «Voler comme un artiste» - Austin Kleon; il illustre le concept de voler comme un artiste

Le dernier conseil le plus important concernant le flux de travail de conception consiste à rester à l’écran et à conserver les technologies pour la version finale de votre conception. Il vaut mieux utiliser de vrais outils, comme le papier, et utiliser votre corps pour la partie créative du travail. Cela vous donne l'impression de créer et de fabriquer. C'est aussi quelque chose que je fais toujours dans mon processus de conception.

Design hacks

Ce que j’ai choisi comme conceptions de hacks sont des astuces qui vous aideront à faire un meilleur travail de conception mais ne font pas partie de votre flux de travail de conception. Vous n’avez pas à les faire chaque fois que vous avez un nouveau projet de conception.

Chaque artiste suit des mouvements et des influenceurs, chaque artiste a un mentor ou même des mentorés. Ils essaient en quelque sorte d'imiter, de copier et d'être aussi bons que les autres artistes qui les influencent. C’est quelque chose qui a toujours existé et qui s’applique à n’importe quel artiste. Pourquoi pas à vous? C'est pourquoi le livre suggère de trouver 3 artistes que vous aimez et de tout rechercher à leur sujet. Il peut s'agir de peintres, de designers, d'entrepreneurs, de musiciens et même de fabricants d'applications! Et si c’est possible, vous pouvez également trouver quels sont leurs influenceurs et créer un immense «arbre généalogique» d’influenceurs. En faisant cela, vous saurez tout sur vos influenceurs, mais aussi sur les leurs, et développerez réellement vos compétences. Par exemple, dans mon cas, j'ai mes applications favorites que je vérifie souvent pour voir comment elles fonctionnent: Airbnb, site Web, Google,…

Les poètes immatures imitent; les poètes mûrs volent; les mauvais poètes dégradent ce qu'ils prennent, et les bons poètes en font quelque chose de mieux, ou au moins quelque chose de différent. Le bon poète insère son vol dans un ensemble de sentiments uniques, totalement différents de ceux dont il était déchiré; le mauvais poète le jette dans quelque chose qui n'a pas de cohésion. Un bon poète emprunte généralement à des auteurs éloignés du temps, étrangers au langage ou aux intérêts divers. - T.S. Eliot

Une autre astuce suggérée par le livre est de commencer à produire des choses que vous aimez, à créer et, si possible, quotidiennement. Aussi, pour profiter du fait que vous êtes inconnu, vous êtes un débutant, personne ne vous jugera, vous pouvez échouer. Améliorez-vous et partagez toujours ce que vous produisez. C’est quelque chose que j’essaie mais ce n’est pas facile de le faire au quotidien. C’est la raison pour laquelle l’auteur suggère de garder un calendrier avec 365 cases à cocher que vous cochez tous les jours si vous produisez quelque chose, c’est un bon truc!

Enfin, il propose un hack très intelligent: créez un fichier contenant tous les bons commentaires que vous avez obtenus. Si un jour vous avez besoin de motivation, lisez-le, ça va donner un coup de pouce !

Conception de la vie

Ce livre contient également beaucoup de réaménagements de la vie: comment vous améliorer et améliorer votre vie pour rester en bonne santé et continuer à bien travailler! Certains d’entre eux semblent très basiques et évidents mais j’en ai remarqué deux qui sont assez intéressants.

Restez entouré de talents, car selon Jim Rohn - «Vous êtes toujours la moyenne des 5 personnes avec lesquelles vous passez le plus de temps.». Donc, votre salaire, votre niveau, votre productivité sont la moyenne de ces 5. C'est une déclaration très puissante, alors selon ce que vous voulez, trouvez les bonnes personnes avec qui travailler, et ne pensez pas seulement à la proximité physique, cela peut: travailler à distance aussi.

Connectez-vous tous les jours dans un cahier (ou un ordinateur virtuel) et répondez à la question suivante: quelle est la meilleure chose qui soit arrivée aujourd'hui? cela vous aidera à vous souvenir de ce que vous avez fait chaque jour et vous aidera également à vous concentrer sur les meilleures choses pour garder la positivité et la motivation.

Comment j'ai créé mon fichier de balayage

D'après tous les conseils donnés dans ce livre, j'ai trouvé le «processus de copie» en créant le fichier de balayage et en l'utilisant à chaque fois que vous avez besoin du plus intéressant (en prenant également différentes parties d'un projet et en comprenant pourquoi).

C'est pourquoi je vais décrire comment j'ai créé mon fichier de balayage:

  1. J'ai créé un cahier sous Evernote appelé Inspiration.
  2. Depuis que j'ai lancé mon projet de site Web d'agence Web, je me suis tourné vers différentes sources pour remplir ce fichier de balayage (Dribbble, Awwwards, Recherche Google).
  3. J'y ai cherché les mots clés «agence», «portefeuille», «agence minimaliste» (minimaliste parce que j'aime les sites Web minimalistes)
  4. Chaque fois que je trouvais un dessin qui me plaisait, je l’ajoutais à Evernote en le collant par collage ou en utilisant l’extension Evernote Clipper. Ensuite, j'ai ajouté les balises pour savoir pourquoi j'avais ajouté cela dans un fichier de balayage, par exemple: Agence, Web, Mobile, Couleurs, Dégradé, Animations, Typographie.
  5. J'ai également ajouté mes sites favoris avec un bon design comme Airbnb, Spotify, Apple Music.
  6. Pour terminer, je garde juste à l’esprit que chaque fois que je trouve quelque chose de beau au lieu de l’oublier, je le mets dans Evernote, ou je prends une photo et je la pose ici.
  7. Maintenant, mon fichier Swipe est ouvert chaque fois que je commence un nouveau projet et je peux l'utiliser ou répéter les étapes précédentes pour le remplir avant de l'utiliser. De plus, j'ai quelques photos de musées dans Google photos que j'ai prises avant d'avoir ce fichier, je peux aussi utiliser la recherche pour les trouver comme source d'inspiration.

Si vous n’avez pas de fichier balayé, je vous recommande vivement de le créer dès que vous démarrez un nouveau projet.

Voyons maintenant comment améliorer mon flux de travail de conception Web en utilisant ce fichier de balayage.

La liste de contrôle de conception

J'ai créé cette liste de contrôle de conception de site Web en fonction de ce que je fais habituellement, de quelques recherches supplémentaires, de ce que j'ai appris grâce à ce livre, ainsi que du projet de site Web de mon entreprise. J'ai essayé de le rendre aussi générique que possible.

  • Définir l'architecture des informations de votre application / site web (contenu pur)
  • Recueillir l'inspiration (Dribbble, Awwwards et sites favoris)
  • Faites glisser votre fichier pour faire une liste des 7 meilleurs
  • Concevoir des structures filaires (sur papier)
  • Recueillir des commentaires
  • Concevez le site Web en niveaux de gris (vous pouvez utiliser votre outil de création préféré)
  • Recueillir des commentaires
  • Sélectionnez 2 polices
  • Concevoir le logo
  • Définir la palette de couleurs (elle devrait correspondre au logo)
  • Améliorez votre conception en appliquant les polices, les couleurs et le logo.
  • Recueillir des commentaires
  • Définissez les animations à implémenter (vous pouvez les concevoir si elles sont complexes à l'aide d'un logiciel, sinon gardez-les simplement à l'esprit ou dessinez-les sur papier)

Vous pouvez également le trouver dans sa dernière version dans mon référentiel GitHub: https://github.com/sandoche/Webdesign-checklist

La raison pour laquelle j'ai décidé de concevoir d'abord en niveaux de gris est de me concentrer davantage sur l'espacement et sur la mise en page plutôt que sur les couleurs. Pour en savoir plus à ce sujet, rendez-vous sur: https://medium.springboard.com/a-designers-guide- to-selection-colors-for-your-product-9944756838d4

Redéfinissons mon portefeuille

Ma nouvelle société sera composée de deux marques: l'agence Snitco et l'organisateur de l'événement, Sconférenciers. Et nous avons décidé de commencer avec la marque Snitco. C’est là que je vais me concentrer ici.

Notre marque Snitco fournira différents services dans 3 catégories: Ateliers de créativité, Communication, Développement et Conception.

Nous n’avons rien construit, donc nous partons de 0!

Définir le contenu

Nous avons commencé par définir le contenu de manière hiérarchique. Je le fais toujours maintenant lors de la création d'une nouvelle application ou d'un site Web.

Voici à quoi ça ressemblait: https://github.com/sandoche/Snitco-information-architecture-example (désolé, j'ai fait mon architecture en français)

À la fin, l'architecture évolue et vous la modifiez pour l'adapter parfaitement au design.

En gros, il s’agissait de 5 sections: en-tête avec proposition de valeur unique, les projets, les services, l’équipe et enfin le pied de page.

Remplir le fichier de balayage et sélectionner l'inspiration

L'étape suivante consiste à renseigner mon fichier de balayage Evernote à l'aide des mots clés Agence, Web, Mobile, Couleurs, Dégradé, Animations, Typographie, principalement à l'aide de Dribbble et Awwwards.

Voici à quoi ressemble mon fichier de balayage dans Evernote

Une fois que j’ai senti que j’avais collecté suffisamment de données, j’ai fait la liste suivante:

  • https://dribbble.com/shots/3272390-HBK-Creative-Agency
  • https://dribbble.com/shots/3638273-Creative-Design-Agency-Website/attachments/812598
  • https://appico.com/ (animations, minimalisme)
  • https://bitesizeinc.com/home (animations, formes)
  • https://www.spotify.com/fr/ (couleurs, typographie)
  • http://wearecocoon.co.uk/ (minimaliste)
  • http://www.size.agency/ (contenu simple)
  • http://www.revstudio.pl/ (minimaliste, simple)
  • https://www.packwire.com/ (animations, couleurs)
  • https://revolut.com/ (simple, typographie)

À partir de cette liste, j'ai demandé à mon équipe de voter pour leur favori (ceux en gras) et de me dire pourquoi. J'ai utilisé ces informations pour utiliser ce qui fonctionne bien dans les différentes conceptions et construire la maquette en niveaux de gris.

La maquette en niveaux de gris

J'utilise Adobe Xd (beta), qui est gratuit, pour créer ma maquette. J'ai vraiment essayé de garder le style minimaliste, mais j'ai aussi essayé de définir certaines animations pour avoir un effet «wow» comme le reste de l'équipe le souhaitait.

Donc, les différents éléments que j'ai repris de la précédente liste de conception:

  • la grande en-tête avec la proposition de valeur unique en gras
  • le fond plat
  • les espaces blancs dans la deuxième partie avec les cartes pour décrire chaque projet
  • la liste des services affichée très simplement, très clairement
  • une animation qui apparaît
  • un coeur qui souffle

J'ai essayé de combiner ces différents éléments de manière très harmonieuse, en plus d'en construire d'autres qui nous aident à créer notre propre identité. Aussi, je voulais utiliser seulement 2 polices et quelques tailles de polices pour le rendre plus simple.

La première maquette en niveaux de gris dans Adobe Xd

J'ai aussi utilisé cette maquette pour essayer différentes combinaisons de polices et finalement deux Heebo et Noto mono.

Essayer des couleurs

Afin de trouver les couleurs, j'ai essayé différentes ressources pour la palette de couleurs:

  • www.colorlisa.com - Palette de couleurs extraite d'œuvres d'art
  • https://color.adobe.com/ - Adobe color CC, avec beaucoup de palette, vous pouvez simplement utiliser la recherche et tapez un mot clé
  • http://colorhunt.co - Chasse de couleur, semblable au précédent, mais avec des palettes plus à la mode
  • http://www.rehabcenter.marketing/tintui/index.html - La palette la plus célèbre, conception des matériaux, Pantone, Twitter, couleurs de l'interface utilisateur à plat

J'ai joué avec eux, j'ai fini avec le suivant.

Six combinaisons de couleurs différentes.

Après avoir discuté avec mon mentor, Vera et mon équipe, nous avons décidé d’utiliser le modèle Violet pour Snitco et peut-être un modèle plus rouge pour l’autre marque Sconférenciers.

À partir de là, j'ai créé une palette et une courte directive de conception.

Créer un logo

Pour créer le logo, j'ai d'abord pris un papier et essayé de jouer avec les lettres de Snitco. De plus, j'ai décidé de mettre un point à la fin de «Snitco» dans le cadre de la marque pour la rendre nette, précise et élégante. C'est pourquoi j'ai aussi joué avec le "."

Oui… c’est un gâchis

J'en ai ensuite fait quelques uns avec l'ordinateur.

Quelques logos alternatifs, nous avons fini par choisir le dernier

Nous avons fini avec celui-ci après avoir discuté avec l'équipe. Ce qui est composé des deux pièces de l’espace négatif que vous trouvez en “S”, tournées et déplacées pour en faire deux ailes.

Tada le logo final

Conception finale

Maintenant, j'ai les couleurs et le logo, j'ai tout mis ensemble et j'ai réajusté les espaces et les tailles, voici ce que j'ai finalement obtenu.

J'ai également créé les illustrations en fonction du contenu de nos projets pour chaque petite carte.

la mise en oeuvre

Une fois la conception validée par l'équipe et mon mentor, j'ai recherché la meilleure solution technique pour la mettre en œuvre. J'ai décidé de choisir Jekyll avec un plugin d'internalisation pour l'avoir en français et en anglais.

J'ai séparé les préoccupations: contenu, html, style, javascript pour le rendre aussi indépendant que possible.

Le résultat final

Voici le résultat final : http://snit.co

N'hésitez pas à jeter un coup d'œil, et tous les commentaires sont les bienvenus!

Une capture d'écran de la version finale en ligne

Retour sur ce mois d'apprentissage

Qu'est-ce qui s'est bien passé

  • La lecture
  • Application de la lecture
  • Le processus de conception
  • Coopération avec mon équipe pour créer une identité qui nous convient à tous
  • Communication avec le mentor
  • Timing - terminé le 25 juillet
  • Utilisation d'Adobe Xd
  • Le fichier de balayage est incroyable
  • Je suis très fier de ce résultat final

Quoi améliorer

  • J'ai commencé ce sujet en terminant le précédent
  • Je m'attendais à un peu plus d'en savoir plus sur le design lui-même que sur le processus ou sur l'inspiration
  • J'aurais peut-être aussi pu apprendre la théorie des couleurs ce mois-ci, mais le livre sur la couleur a mis du temps à arriver

Si vous avez aimé cet article, cliquez sur le bouton clap ci-dessous à quelques reprises pour montrer votre soutien! En outre, n'hésitez pas à commenter et à donner tout type de commentaires. N'oubliez pas de me suivre!

Vous voulez voir plus d'articles comme celui-ci? Soutiens moi sur Patreon