Brand and Web Design : créer un langage visuel à partir de zéro

1. Introduction: Bonjour, comment ça va ? Je m'appelle Tariq Usama, designer visuel et mon directeur de Barcelone. Je travaille principalement sur des projets numériques et interactifs ainsi que sur le design de marque. Je pensais que c'était ce qu'on pourrait faire aujourd'hui. Si vous êtes étudiant, vous vous demandez peut-être à qui est la classe orientée ? Je ne dirais pas que c'est pour les débutants. Je vais couvrir beaucoup de contenu et je ne pourrai pas tout couvrir en profondeur. Il s'adresse davantage aux jeunes professionnels du design et aux directeurs artistiques qui sont prêts à s'inspirer de nouvelles astuces et inspirations. En ce qui concerne le logiciel, j'utiliserai principalement Photoshop, Illustrator et après effets car nous allons aussi bien animer le logo. Je vous recommande d'avoir votre Adobe CC prêt. Ouais, à quoi vous attendre d'ici la fin de la classe, vous devriez probablement être en mesure de créer votre propre logo géométrique, sera le faire au-dessus de notre grille. En même temps, vous devriez obtenir un tas de nouvelles idées sur la façon d'aborder un projet web en utilisant des technologies web modernes comme WebGL. Laissez-moi parler du client avec qui je vais travailler. Leur nom est Paid Toys. C' est une marque naturelle de Barcelone et ils dessinent ce genre de gars. Vous voyez, ils ont un tas de designs qu'ils créent sur un logiciel 3D. L' objectif est qu'ils veulent les vendre afin que les clients puissent réellement les personnaliser afin qu'ils les vendent vierges comme celui-ci. Ensuite, le client devrait être en mesure de les peindre comme il le souhaite. Tout comme cet exemple. Ou même cet autre type ici. C' est un projet assez cool donc j'espère que vous ressentez la même chose et que vous êtes prêt à me rejoindre dans ce cours. Allons-y. 2. Logo | Direction artistique et croquis: Commençons ces leçons. Je vais commencer par le logo. Tout d'abord, je vous recommande de parler à votre client de ce qu'il a en tête. C' est extrêmement important. Vous ne voulez pas commencer à concevoir quelque chose qui pourrait finir par être brillant, mais cela n'a rien à voir avec ce qu'il ou elle a en tête. C' est donc une première étape importante. Je l'ai déjà fait. La seule exigence était que le logo semble en quelque sorte japonais. C' est au Japon que le mot des mouvements [inaudibles] a commencé, donc c'est le lien qu'il voulait. C' était un dossier assez ouvert pour moi, ce que j'ai beaucoup aimé. J' ai donc rassemblé quelques idées sur Mood Board que je vais discuter en ce moment. Laisse-moi te montrer le tableau d'humeur que j'ai déjà montré au client. Ce que j'essaie de faire ici, c'est de créer un logo qui a l'air japonais. Ça ressemble presque au kanji japonais. C' est là que j'utiliserai ces formes géométriques et cette couleur, je parle du rouge ici, qui vient du drapeau japonais. Ça va presque tout de suite t'emmener au Japon. L' idée vient en fait du logo unique. Ce que j'aime ici, c'est qu'il est façonné dans un carré, ressemblant presque à une étiquette et c'est quelque chose que je pense que je devrais pouvoir reproduire sur le nouveau design. Peu d'autres choses que j'ai aimé de ces images, par exemple, celle-ci, les bords tranchants et combien il est minime il le rend très moderne à mon avis. Ensuite, nous verrons quelques pièces flatteuses ici. Celui-ci en haut à gauche, j'aime beaucoup parce qu'il est encore très lisible. Celui de droite n'est pas tellement et c'est quelque chose que nous devons être extrêmement prudents sur nos logos car ce n'est pas un morceau de lettrage et ce sera notre marque, donc il doit être super fiable. Hey, donc je commençais à esquisser comment ce logo pouvait ressembler. J' utilise un bloc-notes de vérification, qui est très pratique pour que je puisse déjà utiliser une grille sur mon croquis. J' utilise aussi un marqueur au lieu d'un crayon, donc vous pouvez voir ce que je conçois. C' est super rude, je vais le refaire pour que tu comprennes mon idée. Fondamentalement, ce que je veux faire est d'utiliser les lettres de paie le p, le e et le i et de les placer dans un carré pour le faire ressembler à un kanji japonais. Je vais commencer, vraiment rude. Juste avec le P, quelque chose comme ça. Je ne vais pas fermer le P pour l'instant. Tu verras pourquoi plus tard. Je vais utiliser cet espace sous le P pour placer les deux autres caractères. Ce serait le E et le I à son côté droit. Maintenant, laissez-moi finir ce P. Plus ou moins c'est l'idée que je parlais de générer ce carré qui ressemble à un kanji de loin. Nous avons déjà notre logo. Probablement je le ferai plus tard lors de la numérisation, mais nous devrons écrire ce qui est permis à cette marque. Quelque chose comme, ce sont des jouets juste en dessous. Oui, je pense que ça marchera. Laisse-moi retourner à mon ordinateur. [inaudibles] les gars. 3. Numériser et variations du logo |, numériser et variations du logo: Numérisons ce logo, je le ferai dans Illustrator alors créons un nouveau document. Par exemple, 600 par 600 tout ce que vous vous sentez à l'aise de travailler avec, qui devrait être RGB. Je vais l'ouvrir. Voici ce que nous devrions probablement faire en premier, c'est d'aller aux préférences, aux guides et à la grille, et de configurer votre grille, afin que vous puissiez y accrocher et créer le logo géométrique dont nous avons parlé. Je mets en moi une ligne de grille tous les 100 pixels avec des subdivisions de huit qui devraient probablement fonctionner pour vous aussi. Je vais cliquer sur « On » et puis cela doit être affiché, donc montrer la grille, vous pouvez utiliser des raccourcis pour cela, je recommande d'apprendre les raccourcis autant que possible. Ensuite, vous devez aller à la vue accrocher à la grille. C' est très important, donc quelle que soit la forme que vous dessineriez s'accroche à travers votre grille, comme ceux-là. Voyez ce que je veux dire. Nous avons le document tout mis en place, nous pouvons commencer à reproduire l'esquisse avec elle il y a un moment. Je vais recommencer avec B. Comme ça et on peut aller pour le E, donc plus ou moins, ce sera ce qu'on a fait avant. Les choses s'avèrent trop larges, trop d'espacement ici donc je vais juste tirer vers le bas. Ça a déjà l'air sympa, tout à fait comme ça. Peut-être que c'est trop horizontal, quelque chose comme ça, je pense que ça va marcher plus bien. Bien, donc nous avons déjà créé l'Î.-P.-É., le P-E-I. Maintenant, comme je l'ai déjà mentionné pendant le tableau d'ambiance, ce serait bien de le placer à l'intérieur d'une étiquette, donc je vais dessiner un carré autour d'elle, quelque chose comme ça que je vais couper et coller à l'arrière de celle-ci. Je vais changer les couleurs de l'Î.-P.-É. Quelque chose comme ça, alors maintenant c'est intégré. Je pense que j'ai probablement besoin de plus d'espace entre les personnages et le bord de l'étiquette. Quelque chose comme ça devrait marcher. Je vais faire de la place ici en bas pour placer les jouets d'art comme nous l'avons fait avant. Je vais taper Art Toys ici. Vous pouvez choisir n'importe quel type que vous aimez, je pense que je vais aller pour le [inaudible]. Peut-être la GT America que j'ai beaucoup de poids, donc je peux voir ce qui fonctionne le mieux. Je pense que l'audace étendu serait génial pour cela. Je vais ouvrir le suivi. Quelque chose comme ça peut-être, je pense que ça devrait. Peut-être que vous pouvez le travailler avec moins de suivi afin qu'il s'adapte sur les grilles. Dis quelque chose comme ça. Je pense que ça marche. Puis en pensant à la couleur, nous avons mentionné avant le rouge, donc je vais tourner ce rouge, j'ai sélectionné nuance de rouge il y a un certain temps. Voyez si je peux le retirer. Il n'est plus là. Eh bien, ça ne dérange pas. Je vais juste utiliser un rouge comme juste pour l'exercice. Je fais ça assez vite. Je vais travailler sur le rectangle secondaire ci-dessous pour le choix, donc je vais copier, coller sur celui-ci. Celui-ci, je vais faire noir alors le choix de l'art à l'intérieur doit être blanc. Ça commence à avoir l'air d'aller quelque part. J' ai trop d'espace juste en dessous des caractères, donc je vais corriger cela. Je pense que j'ai trop d'espace sur les bords. Quoi qu'il en soit, alors peut-être que je devrais, bien joué. Je vais étendre le type parce que je pense que cela fonctionne déjà. Maintenant, je vais me concentrer sur la fixation de l'espacement comme ceci. Je pense que c'est notre logo. Peut-être qu'il me semble un peu plat, alors je vais essayer de le placer dans une ombre plate juste derrière le P-E-I et voir ce qui se passe. Vous retirez l'accord pour utiliser l'outil Plume quelque chose comme ceci, pour créer la forme. Maintenant, je le tire vers le bas ou j'espère que je l'ai fait bien je pense. Laisse-moi travailler sur le rouge d'abord pour qu'il fasse un peu plus sombre. Quelque chose comme ça va marcher. Maintenant, je sélectionne les deux formes et au-delà ci-dessous, donc, je pense qu'il pourrait même être légèrement plus sombre, quelque chose comme ça commence à ressembler à un joli logo. Permettez-moi de l'ajuster un peu, mais je pense qu' avec cela nous sommes bien d'aller à la prochaine partie de la leçon. Maintenant que nous avons cette première approche de notre logo, il y a quelques choses que nous devons prendre en considération, quelques variantes de celui-ci. Comment cela va-t-il se comporter pour l'impression, pour en ligne ? Comment cela ne fonctionnera-t-il que pour une encre positive, négative, forcer plus de formats comme beaucoup de choses à prendre en considération quand il s'agit de branding. De nos jours aussi, nous voyons de plus en plus d'identités dynamiques qui font partie d'un système, même réactives, ce qui le rend un peu plus complexe, mais certainement beaucoup de plaisir. Je vais en récupérer une partie maintenant. Je vais nettoyer un peu ce logo pour qu'il soit en fait prêt pour l'impression. Tout d'abord, je vais le convertir en CMJN. Je peux le faire à partir du mode couleur du document de fichier , couleur CMJN, bon, donc ce serait une première étape essentielle. Alors ce que je vais faire, j'ai ces caractères P-E-I qui sont en fait composés de plusieurs rectangles. Je veux que ce soit juste un, donc je vais l'unir en utilisant le Pathfinder. Alors je ne veux pas que ces deux couleurs rouges collent l'une à l'autre, donc je vais copier celle-ci, je vais diviser ce rouge, donc nous avons juste cette forme et je vais la coller à nouveau. Maintenant, nous avons deux rouges isolés. Je vais faire la même chose avec ce gars ici, que je vais diviser ici à nouveau en utilisant le Pathfinder et ensuite je vais juste ramasser le logo de la paie et le mettre sur le dessus. Je vais le couper et le coller à l'avant et ensuite je vais faire la même chose avec cette forme ici, je vais le diviser comme ça, voir. Maintenant, ce logo est prêt pour l'impression. Laissez-moi maintenant aborder quelques-unes des variations de logo que j'ai fait quatre choix de paiement. C' est le logo que vous avez déjà vu, c'est le logo par défaut, et c'est celui que j'encourage le client à utiliser autant qu'il le peut. Mais bien sûr, si vous voulez utiliser celui-ci sur un fond très sombre, peut-être que vous allez perdre cette boîte noire ici. Vous voudrez peut-être utiliser quelque chose comme ça, c'est le logo négatif sur une encre. Tout serait moins besoin de travailler dans une encre, je dirais à la fois positif et négatif. Vous voudrez peut-être donner à votre client la flexibilité d'utiliser le logo dans plusieurs applications. Peut-être qu'il veut l'utiliser comme filigrane, c'est quelque chose qui pourrait vraiment mieux fonctionner. Logo pourrait également fonctionner pour les petits formats, comme sur avatar social est une simulation de comment son Instagram pourrait être. Dans ce cas, nous perdrons le choix de l'art en dessous du salaire, juste parce qu'il va devenir beaucoup trop petit pour être lisible sur la chronologie Instagram, donc c'est quelque chose à prendre en considération aussi. Pour la fin, que je vais couvrir dans la prochaine leçon, nous pourrions même animer ce logo pour lui donner comme juste plus de richesse. C' est ce que je vais couvrir sur la prochaine leçon. Reste avec moi. 4. Astuces d'animation de logo |: Bien, alors animons ce logo. Je suis toujours dans Illustrator. Ce que je vais faire en premier, c'est préparer le fichier pour l'animation. Je fais de l'animation dans After Effects. Vous verrez que cela se produira dans un peu. Tout d'abord, je voulais que ces caractères soient séparés individuellement en différentes couches, c'est ce que vous voyez ici. J' ai tous les p sous une couleur, j'ai tous les e sous une autre couleur. Voyez si j'en retire une partie. Cela vous permettra d'avoir plus de polyvalence lorsque vous sautez dans After Effects pour animer. Faisons-le. Je déménage dans After Effects. Je vais télécharger le fichier que nous venons de voir ici. Vous pouvez le télécharger en tant que composition, ce devrait être mieux dans ce cas, alors laissez-moi y entrer. Ici, vous pouvez voir toutes les couches. Vous voulez maintenant convertir tous ces calques Illustrator en calques de forme. Cela vous donnera plus de polyvalence pour animer. Vous allez pouvoir utiliser des plug-ins dont je parlerai plus tard. Si vous faites réellement cet onglet, vous devriez être en mesure de placer dans certains traits, gradients, donc c'est en fait un must ici. Comment je vais les convertir en calques de forme ? Je les sélectionne tous, je fais un clic droit, puis vous allez à Créer, Créer des formes à partir d'un calque vectoriel. Vous voyez, toutes ces couches sont dupliquées. Maintenant, ce que je vais faire est de me débarrasser des anciennes couches d'illustrateur comme ça. Je les efface, donc j'ai la même chose, mais comme des couches de forme. Ensuite, c'est probablement un peu trop petit. Ce 100 pour cent est la résolution que je travaillais sur Illustrator, donc je pense que je me sentirai plus à l'aise si je le fais en double taille. Pour ce faire, pour que toutes les couches se développent en même temps, je vais utiliser un nouvel objet. Je vais aller à Calque, Nouveau, Nouvel objet. Tu vois, c'est juste arrivé au sommet. Ensuite, je vais sélectionner tous les calques, et je vais utiliser cette spirale ici et la conduire pour que je puisse le parent au nouvel objet juste comme ça. Maintenant, je devrais être capable de transformer toutes ces couches à 200 pour cent au total. Exactement, juste comme ça. Maintenant, je vais juste ouvrir le cadre, je pense que je vais utiliser les 1920 et 1080, donc format convivial vidéo, couleur de fond blanc comme ça. C' est ainsi que cela est configuré pour démarrer l'animation. J' ai déjà animé ce logo. Je vais juste passer très rapidement en revue comment j'ai fait cela et quelle était l'idée derrière elle. Fondamentalement, je voulais juste que ça passe de 0 à 100. Ensuite, je voulais que ce personnage apparaisse et cette tuile inférieure avec l'Art Toys rebondissant jusqu'à la fin. Je vais le jouer une seconde pour toi. Ça ressemblera à ça. Tu vois ? Bien sûr, ça ne s'est pas produit tout de suite. J' ai essayé plusieurs itérations, donc je pense que vous devriez faire la même chose. Je voulais que ce soit très rapide, qu'il arrive dans les trois secondes maximum, donc je suis assez content du résultat. Je n'ai pas assez de temps pour tout faire, mais je peux vous donner quelques conseils qui pourraient être utiles. L' un d'eux, c'est juste très simple. Il s'agit d'utiliser des couleurs auxquelles appartient chaque calque. C' est juste très pratique et c'est très visuel, donc ça rend l'animation beaucoup plus facile. C' est quelque chose que j'ai fait ici avec toutes ces couleurs. Ensuite, je vais parler d'un super plug-in. Ça s'appelle le Mt. Mograph Motion_2, votre ailier d'animation. Fondamentalement, ce qu'il vous permet de faire, je vais le mettre dans le menu, c' est de travailler sur le is-ing, le is-in, is-out, de sorte que vous n'avez pas à utiliser la valeur par défaut After Effects, mais que vous pouvez réellement travailler sur quelque chose de plus élaboré. Je ne l'utilise pas depuis si longtemps, mais j'en suis déjà amoureuse. Par exemple, ici sur le texte sur cette tuile noire, je l'ai utilisé comme is-in et is-out, mais aussi je pense que j'ai utilisé cette excite ou sauter. Je ne me souviens pas pour le moment, mais essaye-le. Il vous permet d'obtenir plus de richesse et de détails dans l'animation. Peut-être que je peux juste saisir cette composition et je vais la précomposer, parce que maintenant il a juste l'air d'entrer, mais j'aimerais qu'elle sorte aussi. Bien sûr, vous n'avez pas besoin de tout animer à nouveau. Une bonne chose serait de le précomposer, donc nous allons appeler ceci IN et ensuite le dupliquer Control-C, Control-V. Je vais renommer ça, je vais appeler ça. Je vais faire cette composition au lieu de trois secondes, six. Je vais juste le faire glisser jusqu'à la fin. Maintenant, ce que vous devrez faire est de cliquer avec le bouton droit sur la composition OUT, aller dans Time et juste Time Inverse Calque. Je pense que ça devrait marcher. Voyons comment ça marche. Spot sur. Nous l'avons maintenant à venir et à sortir avec très peu d'efforts. Enfin, je voulais parler du mouvement du corps. Il s'agit d'une extension After Effects qui vous permettra essentiellement d'exporter votre animation dans un format web comme une animation SVG. Vous pouvez le trouver sous cette URL. Je l'utilise beaucoup et je le recommande vraiment si vous animez des choses qui finiront sur le web. Pour revenir à notre projet, je pensais que nous pourrions utiliser cette animation de logo comme un préchargeur de trois secondes. Nous voulons que ce ne soit pas lourd, donc c'est bon pour la performance et ce corps bouge, ça va nous permettre de le faire. Comment allons-nous l'utiliser ? La première étape serait de rendre cette toile plus petite, probablement parce qu'elle est beaucoup trop grande. Voyons comment ça marche. Ça devrait déjà être mieux. Je vais ouvrir le corps en mouvement que vous pouvez trouver sur Fenêtre, Extensions, Body Moving. Ici, c'est, voir s'il se charge. Notre composition, c'est déjà celle sélectionnée, qui est le préchargeur. Ici, vous pouvez choisir vos paramètres. Dans ce cas, il suffit d'avoir une démo. Tout ce que je veux est un HTML pour vous montrer à quoi cela ressemblera en ligne. Si vous travaillez avec des balises, vous pouvez également cliquer sur Glyphes ou tout autre paramètre. Mais dans ce cas, cela devrait suffire. Je vais cliquer sur « Safe ». Assurez-vous que vous avez le lecteur, je l'ai déjà eu, et c'est le dossier de destination. Ces fichiers finiront réellement sur mon bureau. Je vais cliquer sur « Rendu ». C' est super rapide. Déjà fait. Laisse-moi aller sur mon bureau voir si on les trouve. Ils sont là. C' est le demo.html et le data.json. Je vais maintenant ouvrir cette démo pour vous. Ce logo sur lequel nous avons travaillé, c'est déjà du code, donc nous pourrions l'utiliser tout de suite. Il a un préchargeur, bien sûr il est plus petit. C' est ainsi que le mouvement du corps fonctionne. J' espère que tu essaies. 5. Direction artistique interactive Web |: Bien. Commençons par la deuxième partie de cette leçon, qui se concentrera principalement sur le web design. Ici, ce que nous voulons faire est de créer un tout nouveau langage visuel à partir de zéro. PEI Toys, c'est une nouvelle marque, donc ils n'ont rien en ce qui concerne la typographie, la couleur, la mise en page, donc nous aurons une totale liberté de créer cela et nous allons le faire en utilisant le web, principalement la conception pour ordinateur de bureau. Je n'ai pas le temps, j'ai peur de concevoir pour mobile en ce moment. Mais bien sûr, il y a quelques pensées que vous devriez déjà avoir en considération sur votre flux de conception pour l'ensemble responsive. Cette communication visuelle devrait fonctionner pour le web, mais en même temps, elle pourrait fonctionner pour un nouveau catalogue ou pour certains messages sur les réseaux sociaux ou pour certains postes fixes. Alors commençons avec ce web et peut-être que lors de notre deuxième phase, nous pouvons même être en mesure de concevoir plus de choses. Je voudrais également parler des possibilités créatives que ce projet nous apporte. Les jouets ont été conçus sur Cinema 4D, qui est un logiciel 3D. Donc, nous avons la masse en trois morceaux. Chaque jouet est composé de trois pièces que nous pouvons exporter en tant qu'OBJ ou tout autre format que nous pouvons implémenter dans un navigateur web. Nous allons le faire en utilisant WebGL, qui est une bibliothèque JavaScript qui vous permet de créer et d'implémenter des graphiques 3D dans votre navigateur. Alors commençons avec quelques exercices de direction. C' est ainsi que je commencerais habituellement mon processus. La façon dont je commencerais un projet comme celui-ci est avec un document vierge que je commencerais à remplir avec toutes les idées, design visuel UX, typographie, idées interactives, quelques références. Je commencerais à le structurer et cela finira par être une présentation que je pourrais montrer à mon client. Voici donc ce document que j'ai déjà rempli et plus vieux un peu. Nous pouvons très rapidement passer en revue une partie. Tout d'abord, j'ai essayé de structurer le site Web et à quoi cela ressemblerait dans le menu. Nous aurons donc six pages, y compris la page d'accueil. Le deuxième sera les jouets. Le troisième serait les jouets d'artistes, que nous appellerons collections et ensuite nous aurons la galerie amusante où l'utilisateur sera en mesure soumettre les jouets qu'ils ont personnalisés. Ensuite, nous avons la page à propos et la page de contact. Peut-être pourrions-nous jeter un oeil à certaines des idées créatives que j'ai pour ce web. Sur l'atterrissage, par exemple, ce qui devrait être un atterrissage dynamique afin que le client puisse continuer à mettre à jour l'image si une nouvelle collection arrive, par exemple. Nous pouvons avoir un h1 qui pourrait être interactif et nous pourrions utiliser une police variable pour cela. Je vais juste montrer un exemple de ce que je veux dire. C' est donc une police variable interactive. Tu vois si je vais de gauche à droite, ça change la forme. Dans mon cas, je pense que cela changerait le poids, donc il passerait de la lumière au noir, très probablement. Je pense que ça devrait être amusant. À un moment donné sur la page d'accueil, je pense que ça va être assez cool puisque ceux-ci ont été conçus en 3D pour exporter la séquence PNG afin que nous puissions confirmer avec un défilement. J' ai juste une référence pour cela je pense que ça va être beaucoup plus facile à comprendre. Il va juste ajouter une certaine richesse à ce site. Vous voyez, je fais défiler vers le bas, c'est probablement une séquence PNG et surtout cette partie, j'aime que vous continuez à faire défiler mais les pages sont coincées et vous le voyez juste changer. Bien sûr, cela devrait être 60 images par seconde et nous devons voir si les développeurs, si c'est viable ou non en termes de performances. Peut-être devrais-je sauter à la page du produit, qui sera l'endroit où afficher les jouets principaux, les jouets vierges, les jouets qui n'ont pas encore été personnalisés par des artistes. Donc, ici, ce que nous allons faire est d'utiliser WebGL puisque ces jouets ont été créés en 3D et chaque jouet aura ces trois pièces dont je parlais. Nous serons en mesure, en tant qu'utilisateur, de faire tourner ces jouets autour de 360 et de passer d'un jouet à un jouet en utilisant quelques belles transitions. J' ai quelques idées ici qui pourraient vraiment fonctionner aussi bien. Laisse-moi ouvrir. Ce serait pour la transition du jouet, que j'aime bien que c'est assez transparent comme ces références, nous n'avons pas besoin du jouet pour disparaître du côté supérieur de la page ou de l'un des deux côtés. Cela peut arriver comme parfaitement dans le cadre, juste comme ça. Je pense que ça va être plutôt cool. Ensuite, nous pourrions ajouter quelques effets. C' est cette page super refroidie. Juste quelques effets, effet caméra sur les jouets, juste quelques effets interactifs pour y ajouter de la richesse. Même lors de la transition du jouet au jouet, nous pourrions utiliser quelques pépins. Je regardais ce photomosh.com qui est super cool. C' est bien une plate-forme basée sur WebGL. Donc ici, je peux choisir une image juste comme un exemple et je peux les données mosh de plusieurs façons. Voir celui-ci par exemple, j'aime bien. Peut-être que cela pourrait être un début pour notre transition, vous pouvez vraiment la modifier comme c'est mieux. C' est bien sûr quelque chose que nous allons clouer avec les développeurs à la fin du processus. Mais c'est bien avant de commencer la phase de développement qu'ils savent déjà ce que je voudrais faire. Alors peut-être que je peux parler un peu typographie puisque je pense que cette page en aura. J' ai créé, eh bien, ce n'est pas encore un [inaudible], c'est plutôt un dossier de choses que j'aime. Je pensais à un h1 utilisant des caractéristiques typographiques condensées assez faibles comme celles-ci ou même plus comme celles-ci. L' autre est probablement un peu trop extrême. J' aime aussi cet effet de détresse, cette texture à l'intérieur de la typographie. Donc je pense que ça va vraiment marcher pour les titres. C' est ce que je voulais dire avec les polices variables avec le poids croissant. Alors pour le reste de la topographie, et bien pas pour la copie corporelle, mais j'aurai quelques petits sous-titres. J' ai regardé quelques références où ces petits sous-titres sont réellement étalés, comme ici sur le côté gauche. Ils sont vraiment étalés les uns des autres ou même ici comme avoir ces petits types et juste quelques HUD répartis sur toute la page. J' aime ça. Je pense que cela leur donne l'avantage technologique dont nous avons besoin pour ce projet. Même quelque chose comme ça, une petite typographie dans ces petits détails qui la rendent juste un peu plus audacieuse. Même ici. J'ai recueilli ces documents aussi. Même celui-là, j'aime bien qu'une partie de la typographie soit à l'envers. J' aime aussi le rose comme l'une de mes couleurs primaires. On verra ça plus tard. Ici, il y a autre chose qui vaut la peine de vérifier ? Oui, peut-être sur la page des collections, je pense que ce sera en fait un défilement horizontal juste avec tous les jouets de collaboration. Peut-être en utilisant la souris, nous ferions un zoom, ce n'est en fait pas zoomer, mais vous voyez ce que je veux dire. Nous pourrions zoomer sur le jouet pour que vous puissiez voir plus de détails. En fait, votre souris se transformerait en loupe. Je pense que ce serait plutôt cool. J' ai aussi quelques références d'animation ici. Voyez comment ces produits arrivent. J' aime qu'ils ne viennent pas tout d'un coup, mais ils le font consécutivement. C' est plutôt sympa. Ok les gars, passons à autre chose. Les gars, je voulais juste faire un point sur UX. Je ne couvrirai pas cette phase dans cette leçon, mais il est extrêmement important qu'avant de commencer par la conception visuelle, vous signez un document UX, également appelé document d'architecture d'information. Vous devez le signer avec un client avant commencer par le reste afin que la structure soit très claire. Cela vous fera gagner du temps plus tard, et c'est la meilleure façon de rester productif. 6. Configurer votre document: Bien, donc je vais commencer avec le design. Je le ferai sur Photoshop si vous vous sentez plus à l'aise avec Sketch ou Adobe XD, Figma, n'importe lequel d'entre eux va de l'avant. Le logiciel ne devrait en aucun cas être un handicap. Je vais créer un nouveau document que j'appellerai la page d'accueil. Faites-en un document web, donc c'est déjà un tableau d'art. J' utilise généralement ces médias web résolution, qui est 1440 fois 900. Le fond, il suffit de le rendre un peu gris, juste comme ça. C' est notre tableau d'art. Si vous n'avez pas beaucoup de mémoire RAM sur votre ordinateur portable, peut-être que vous pouvez travailler sans tableaux d'art et juste en faire un tableau d'art si vous avez besoin à la toute fin, cela devrait être possible. Tout d'abord, je dirais de créer quelques lignes directrices. Je commencerais généralement par [inaudible] aka 12 colonnes grille. C' est un classique et cela devrait fonctionner assez bien pour la conception web, et n'importe quelle résolution. Je vais commencer par ça et voir à quoi ça ressemble. Ces nouvelles propriétés de mise en page de guide sur Photoshop sont excellentes parce que vous avez juste besoin d'introduire les numéros ici et il est créé automatiquement. Peut-être, j'utiliserai ces 24 colonnes, et ce serait la ligne de base, qui dans ce cas est faite de 10 pixels. Pour les mobiles, cela pourrait changer à un peu moins, peut-être que je pense que huit pixels serait génial, mais pour le bureau, je suis bon d'aller avec ça. Maintenant que nous avons le document mis en place, je vais travailler très rapidement sur le shell, ces éléments communs à toutes les pages. Ce sera notre menu, que je placerai sur le côté gauche dans ce cas, puis nous aurons un appel à l'action à la boutique et je vais bouton. Concentrez-vous d'abord sur le menu, appelons ce shell, à l'intérieur du shell, appelons ce menu. Nous avons déjà ce fond blanc et je vais tirer le logo d'Illustrator. Faisons 60 pixels de largeur qu'il s'adapte à cette mise en page. Je vais le coller comme un objet intelligent. Oui, bien. Ensuite, je voudrais hamburger menu ici au milieu. J' ai déjà préparé cet atout, donc nous ne sommes pas coincés dans les bases. Donnons un nom à ces fichiers pour que plus tard, nous n'ayons pas à les parcourir. Je vais au menu, bien. Au bas de cette navigation de gauche, je vais utiliser les langues. Dans ce cas, ils seront des langues libres. Je vais utiliser l'outil de type qui les rendra noirs, quelque chose comme ça en fait. C' est déjà sur la police de caractères que je voulais donc c'est génial. J' utiliserai le tissu mono, et ensuite j'aurai besoin de ça en anglais, espagnol et catalan, oui, juste comme ça. Placez-le ici, et disons que l'anglais pourrait être notre langue par défaut, ce qui pourrait être sélectionné. Nous avons déjà cette navigation de gauche qui, je pense, semble, peut-être un peu trop à l'étroit. Je vais en fait le rendre légèrement plus grand. Si maintenant c'est 60 pixels de largeur, oui, je vais le faire peut-être 72 dans cette largeur. Alors placez-les hors de notre guide ici. Je peux réparer ça pour qu'il soit aligné au milieu. Celle-ci, elle est plus grande. Faisons en 72 pixels de largeur comme ça. Ouais, ça a l'air mieux. Je pense que nous avons déjà notre navigation de gauche ici. Comme vous l'avez vu, j'ai enfreint certaines règles. Je viens de mettre dans une grille que je viens de briser. Cela arrive parfois, n'ayez pas peur d'être d'enfreindre les règles. Les guides sont là pour vous aider. D'accord. 7. Dégrader de conception Web ||en |: Tous les bons gars. Donc, comme vous pouvez le voir, magique rarement arrivé, dans ce document. J' ai la plupart des pages déjà conçues. Laissez-moi faire une petite percée et nous pouvons analyser chaque page. Je vais commencer avec une page d'accueil, quelques-unes des idées derrière cette page que j'ai déjà décrites précédemment sur ce document d'inspiration. Donc, fondamentalement, ce que vous voyez ici est la navigation de gauche que vous connaissez déjà, et ce sera l'atterrissage. Nous allons donc avoir un atterrissage dynamique, où le client va pouvoir changer cette image à tout moment pour une autre. Donc, cela pourrait même se transformer en un curseur, et ensuite nous aurons quelques, des éléments communs comme celui-ci. Faites-le vous-même, des jouets, qui seront variables et interactives comme nous l'avons vu auparavant. J' ai d'autres ainsi un timbre de qualité, que je peux vous montrer ici dans un peu plus de détails. Juste pour ajouter un peu plus d'artisanat à cette page d'accueil, et quelques autres éléments ici qui seront communs à l'ensemble du site, Jagadish the shop now button, qui sera un lien externe vers une page Shopify, où vous sera en mesure d'acheter tous les jouets, puis nous aurons la part sur le vol stationnaire, les icônes sociales apparaîtront. Donc, c'est essentiellement l'atterrissage. Laissez-moi aller à une autre page, oui, c'est le menu, lorsque vous cliquez sur le menu hamburger, ce menu s'affichera, et ici vous pouvez naviguer sur le site. Nous avons donc ces cinq catégories que nous avons décrites précédemment, et l'idée ici est que je suis en train d'héberger l'une de ces catégories. L' image sur le côté droit pourrait changer ainsi que les couleurs. Peut-être ici, c'est un bon endroit pour commencer à parler de typographie, j'utilise ce condensé semi-volt sans-serif pour les titres, ce que j'ai vraiment aimé. Ensuite, j'utiliserai ces monospace pour la petite copie, pas pour la copie corporelle, mais pour les sous-titres. Quand il s'agit de couleur, j'ai introduit ce rose. J' ai fait en fait une palette de trois couleurs, que nous pouvons voir sur la page suivante, qui est celle-ci. Je voudrais donc associer chacun des personnages à notre couleur. Donc, par exemple, ce type Hubert, pourrait venir sur la couleur verte, ce type appelé Western, pourrait venir sur le rose et le pointilleux, il appartiendra à celui orange. C' est la page avec cette frite avant, où les personnages seront en 3D, sorte que l'utilisateur sera en mesure de les faire tourner dans 360, et en utilisant votre souris, vous serez en mesure de passer d'un personnage à un personnage. En passant, je viens de réaliser que probablement besoin de quelques indicateurs d'interface utilisateur, donc vous réalisez combien de caractères vous faites défiler. Bien, alors passons à travers une autre page. Oui, c'est la page des collaborations, donc l'artiste sera cette page. Donc, ce sera un rouleau horizontal, imaginez juste une énorme bande de jouets qui naviguera de droite à gauche sur le défilement. Dans cet espace, il y aura plusieurs collections que vous serez en mesure d'atteindre plus rapidement en utilisant cet indicateur ci-dessus. Ouais, donc la page ci-dessus, il aura en fait un look plus éditorial magazine. Donc, je vais d'abord présenter ce qui est payé jouets ont sorti. Sur le défilement, je pense que ce personnage sera en fait une séquence PNG, donc nous pouvons le faire tourner autour. Je pense que ça devrait être amusant. Comme vous pouvez le voir, j'ai introduit une autre typographie ici pour la copie corporelle. Habituellement, je n'utilise pas plus de deux typographies, mais c'est quelque chose que vous pouvez faire si vous vous sentez à l'aise avec. Donc n'ayez pas peur d'utiliser plus de trois typographies, dans ce cas, j'ai utilisé un san-serif bien optimisé pour le web, et je justifie le texte juste parce que j'aime la mise en page, comme vous pouvez le voir, est [inaudible] au moment. Voyons donc ce qui se passe avec les textes réels. Donc, une fois que nous avons introduit les jouets payants, nous pouvons simplement décrire, qu'il est en fait composé de trois pièces. Ceux que vous voyez ici dans cette image pourraient être un GIF animé, dépliant les trois pièces, et ceci, il suffit de copier décrivant la section. Ça ferait partie de la même section, juste quelque chose de amusant, je pensais qu'on pourrait faire quelque chose, peu de Max Schott avec ces deux gars qui ont l'air assez mauvais cul. Donc je pense que c'est amusant. Mélangez-les parce que vous pouvez réellement mélanger vos jouets qui devraient être assez cool et pour finir, nous allons nous concentrer un peu plus sur le processus sur la façon dont les jouets sont produits. Je voudrais donc les expliquer en cinq étapes sur cette mise en page. Juste très peu d'informations les gens ne lisent pas vraiment beaucoup, et peut-être que nous pouvons améliorer cela, et un planer l'une de ces images qui pourrait être une boucle vidéo animée. Peut-être deux ou deux secondes. Ensuite, nous allons parler de l'emballage. Cette image n'appartient pas aux jouets payants est juste une référence. Donc le client sait comment nous pourrions réellement afficher ça. Il y a donc la direction de la photographie, et enfin, nous allons parler brièvement de Robert, qui est l'artisan, le gars derrière les jouets. Donc je pense que nous pouvons avoir trois formes libres ici en fonction de la raison pour laquelle vous aimeriez atteindre les jouets payants, futur message général pourrait être celui-ci. Mais peut-être une fois que vous devenez un artiste, vous cliquez ici et un autre formulaire apparaîtra, où vous pouvez réellement taper dans votre portfolio. Même chose avec si vous vouliez soumettre votre finale, peut-être qu'il y a même un bouton, sorte que vous pouvez réellement le télécharger et le soumettre. Ensuite, votre fichier ira directement au client. Bien, donc c'est tout pour cette leçon, à la prochaine. 8. Conseils de production et conclusion: Les gars, maintenant que nous avons nos conceptions pour bureau, nous devrions probablement commencer à penser au reste du flux réactif. Je commencerais généralement avec mobile et après cette tablette. Il est bon que vous vous asseyez avec vos développeurs le plus tôt possible dans le processus afin que vous puissiez commencer à parler des idées que vous avez en tête. J' appelle ça un coup d'envoi de développement. Je pense que c'est extrêmement important pour que vous communiquiez vos idées aussi bien quand il s'agit d'animations, animations de défilement, il pourrait s'agir de transitions basées. Après tous les projets web est un projet collaboratif. Vous devez essayer d'aider vos développeurs autant que vous le pouvez. Soyez super bien rangé avec votre fichier, la façon dont vous les nommez, la façon dont vous nommez vos actifs, la façon dont vous les regroupez, la façon dont vous fournissez des dossiers avec des SVG, avec des images optimisées pour de bonnes performances, etc. Il y a aussi quelques conseils que je voudrais vous donner sur la production. Certains plugins que j'utilise réellement moi-même ou Photoshop ou pour esquisser comme Zeppelin ou Avocode. C' est génial parce que le développeur peut inspecter vos fichiers et être plus précis avec la façon dont ils implémentent la conception front-end. Vous pouvez même faire des guides de style en fait en utilisant Zeppelin qui je pense que c'est beaucoup d'un gain de temps. Vous pouvez mettre dans ce guide de style de couleur, le guide de style de topographie. C' est quelque chose que le développeur aimerait certainement savoir de vous. C' est ça de moi. C' était mon cours, j'espère que vous l'avez apprécié. Je suis très impatient de voir ce que vous avez conçu, j'espère que vous êtes prêt à le partager. Je me rendrai disponible et j'essaierai de répondre à vos commentaires et de vous aider autant que possible.