Maîtriser la conception Web avec Adobe XD

1. Introduction: Bienvenue dans le monde étonnant du web design. Je suis Chris stérile. Acidifiez l'instructeur Adobe, et nous passerons aux principes de conception Web les plus importants qui vous aideront à créer des sites Web impressionnants. Typographie, théorie des couleurs, symétrie, contraste, alignement, mais aussi des choses comme le design réactif, les taux de conversion, les taux de rebond, etc. Ce cours est rempli de toutes les informations les plus récentes sur la conception web et est organisé en deux parties. Dans les cinq premiers, j'étais, va concevoir un site Web génial du début à la fin. Nous allons explorer le mémoire, comprendre les besoins du client et travailler sur la version de bureau. Et quand cela sera fait, nous couvrirons le design responsive. Je t'apprendrai tout ce que tu dois savoir avec ça. Enfin, dans la première moitié de ce cours préparera la conception pour le codage. Nous ne coderons pas la conception de soi parce que ce n'est pas nécessaire. Mais je vais vous montrer comment vous pouvez rendre les développeurs heureux. Et cela vous aidera beaucoup en comblant l'écart entre le côté UI UX sera site entièrement fonctionnel. Si vous comprenez comment parler aux codeurs, votre valeur en tant que design va beaucoup plus haut. Et dans la seconde moitié de ce cours, nous allons en apprendre davantage sur les principes de conception web. Je vais vous montrer beaucoup d'études de cas et d'exemples. Ainsi, vous pouvez vraiment obtenir leur sens de la taille des articles en fonction de leur importance. Tout ce que vous devez savoir sur la typographie, comment travailler avec la décision d'atteindre la symétrie, comment travailler avec les couleurs et obtenir un contraste gris plus beaucoup plus. Et en comprenant ces principes, vous pouvez concevoir n'importe quel site Web, pas de maths du style ou du client. A la fin de ce cours, vous aurez une pièce de portfolio fantastique, un design complet de site web avec une version mobile et le prototype interactif simple, mais aussi une compréhension approfondie de ce qui fait un design de site web. Bonjour. Il s'agit d'un cours qui vous enseigne la conception web pour des projets réels. Je vais vous apprendre comment vous pouvez prendre des entreprises en difficulté, reconcevoir ce site Web et les aider à vendre cinq fois plus. Il y a tellement d'autres choses à dire, mais s'il vous plaît, je suis excité d'y aller. Alors commençons. Je te verrai à la prochaine conférence. 2. Réponses rapides aux questions populaires: Bienvenue dans le monde incroyable du web design. Je suis Chris Baron. Je suis un instructeur Adobe certifié. Et ensemble, nous allons passer en revue quelques-uns des principes de conception Web les plus importants qui vous aideront à créer des sites Web impressionnants. Je parle de théorie des couleurs, de symétrie, de contraste, d'alignement, typographie, mais aussi de choses comme le design réactif, taux de conversion, les taux de rebond, et ainsi de suite. Avant de commencer, permettez-moi de répondre rapidement à quelques questions populaires. Le plus important, devons-nous coder nos projets ? Non, non, nous ne le faisons pas. Permettez-moi d'expliquer avec un exemple simple mais réel. Je suis donc propriétaire d'entreprise qui entends la Roumanie et j'ai un site e-commerce. Il vend une piscine saine. Maintenant, je faisais environ 5 000$ de ventes par mois et j'étais coincé. Je ne pouvais pas développer l'entreprise, peu importe combien j'investissais dans la publicité, je ne pouvais pas grandir. Ce que j'ai fait, c'est que j'ai redessiné le site et Adobe XD, j'ai engagé le codeur. Et avec le nouveau design, l'entreprise saute à 40000 dollars par mois. Tu l'as bien entendu ? De cinq à 40 000$ par mois, mois sur mois. J' ai donc créé une énorme valeur en utilisant Adobe XD, pas de codage. C' est l'un des nombreux exemples, il ne s'agit pas de combien d'argent gagne mon entreprise. Il s'agit de la façon dont vous n'avez pas besoin de coder pour créer de la valeur. Vous pouvez créer beaucoup de valeur pour n'importe quelle entreprise du monde entier, à travers vos créations réalisées dans Adobe XD. Ensuite, avez-vous besoin de connaître Adobe XD avant de suivre ce cours ? Non, tu ne le fais pas. Mais ce serait une bonne idée de regarder ma messe Adobe XD en classe, qui vous apprend tout ce que vous devez savoir à ce sujet. Toutes les techniques avancées, toutes les choses amusantes. Cela dit, ne vous inquiétez pas parce que je vais vous emmener étape par étape à travers tout le processus dans ce cours. Nous n'entrerons pas dans les techniques Adobe XD très avancées. Donc, vous serez en mesure de suivre avec facilité, ne sera rien de compliqué. C' est parce que vous verrez qu'une conception de site Web géniale, il s'agit plutôt de suivre certains principes de conception qui ne sont pas si difficiles à exécuter un Adobe XD. Ensuite, il y a deux parties principales à ce cours. Le premier est tout au sujet d'être actif, va d'abord concevoir un site Web, la version de bureau, puis le mobile. Il s'agit de travailler dans Adobe XD. Et cette partie va être amusante et je vais vous expliquer mes choix de design. Comme si tu étais juste à côté de moi à chaque étape de la façon dont je vais expliquer pourquoi je fais ce que je fais. Dans la deuxième partie, nous allons approfondir les principes et toute la théorie. La deuxième partie est la plus précieuse. Alors s'il vous plaît assurez-vous de faire de votre mieux pour y arriver. Si vous voulez passer à cette partie, c'est bien aussi. Mais laissez-moi le répéter encore. Si vous voulez les principes de conception que vous pouvez appliquer dans chacun de vos projets dans la deuxième partie du cours, si vous voulez concevoir quelque chose à partir de zéro, un site Web ou une version responsive et préparé pour codage. C' est la première partie. Bon, enfin, de quel ordinateur avez-vous besoin ? Tout ordinateur va bien, mais si vous êtes sous Windows, vous aurez besoin de Windows 10 ou supérieur. Adobe XD ne fonctionne pas sur Windows 7 ou Windows 8. Vous ne pouvez pas utiliser une tablette ou un iPad, ni l'audio ni le téléphone mobile. part cela, s'il vous plaît, demandez aux patients de travailler avec moi et nous concevrons des sites Web impressionnants en un rien de temps. 3. Conception de Web - Ce que vous devez savoir: Hé là, c'est Chris. Vous avez probablement votre propre idée de ce qu'un webdesigner est censé faire. Voici comment je vois les choses. Nous sommes donc sur la même page à l'avenir. En termes simples, un site Web est comme un bâtiment en ce sens qu'il a deux composantes majeures. Donc deux composants, il y a la fondation, le squelette, si vous voulez, qui est fait de béton, d' installation de barres d'armature, de plomberie, d'électricité, et toutes ces autres choses et toutes ces autres choses qui font jusqu'au cœur du bâtiment. À la fin de la première phase de la construction, vous pouvez vous attendre à avoir un bâtiment qui ressemble à ceci. Ce n'est donc pas tout à fait étonnant, mais c'est l'objectif de l'étape initiale. Est-ce que l'objectif, la deuxième composante majeure, encore une fois, en termes très simples, se concentre sur les regards, sur l'esthétique. Cela comprend les planchers de bois franc, le papier peint, les luminaires, les meubles et ainsi de suite. Cette partie rend le bâtiment habitable et utilisable. Une fois que tout ce travail est fait, les deux parties seulement sont considérées comme achevées. Les deux composants sont nécessaires, mais ils doivent être clairement séparés. Ils reculent un peu. Cette partie d'un bâtiment est réalisée par un certain type de travailleur possédant des compétences spécifiques en machines. Dans notre monde du web design, ces gars qui construisent les fondations, ils sont appelés codons ou ingénieurs logiciels, développeurs, programmeurs, quoi que vous vouliez les appeler, ils sont la même chose. Maintenant, ils ont géré leur partie du site en utilisant du code comme HTML, CSS, JavaScript, MySQL, PHP, et ainsi de suite. Ce cours ne vous apprendra pas côté papa la conception web. Au lieu de cela, nous allons nous concentrer sur l'esthétique. Du côté de la conception qui rend le site Web look et se sentir incroyable. Permettez-moi d'expliquer pourquoi je pense que c'est la meilleure façon d'y arriver. Tout d'abord, financièrement, mon expérience personnelle est un exemple clair que création de sites Web et Adobe XD, très lucratif. Comme vous le savez probablement, j'ai fait plus de 50 000$ en concevant des sites Web sur 99 designs.com. Juste la conception, vous pouvez en savoir plus sur ma carrière en tant que freelance sur les plateformes Official Blog. En bref, vous pouvez faire de l'argent en ne travaillant que de ce côté du projet. Donc ça m'amène à la seconde chose. Devenir un codeur de profession. Un bon codeur est beaucoup plus difficile, mais la récompense, je ne pense pas qu'il justifie là pour l'instant. C' est ma propre opinion, bien sûr, parce que pour certaines personnes, apprendre à coder peut venir naturellement. Mais quand j'étais au début de la vingtaine, j'ai eu la décision de prendre ce que je pouvais faire pour quitter mon emploi d' agent de vente porte-à-porte et gagner assez d'argent pour que je puisse quitter la maison de mes parents. Le temps était essentiel, et j'ai essayé de coder et je l'ai trouvé écrasant. Je l'ai trouvé extrêmement intimidant. Je savais que ça me prendrait beaucoup de temps pour gagner de l'argent avec le codage. Mais quand j'ai découvert que je peux concevoir des sites Web dans Adobe XD, Photoshop ou autre. Et cela peut m'apporter presque la même somme d'argent que le codage, mais avec une fraction du stress et de la difficulté. J' ai pensé que c'était la meilleure façon d'aller de l'avant. Je pensais que c'était la meilleure façon de procéder. Donc, pour résumer ce point, un concepteur peut commencer à gagner de l'argent beaucoup plus rapidement et avec moins de stress et d'effort par rapport à un code là-bas. La troisième et dernière chose que je veux voir est ce considéré comme un codeur expert absolu créé la fondation d'un site Web. code brillant, bien écrit, une excellente base. Il se charge rapidement sans aucune erreur, mais il ressemble à ceci. Va-t-il réussir ? Est-ce un excellent site web ? Non, bien sûr que non. La conception est essentielle à leur succès. Peu importe à quel point il est construit. Si ça a l'air terrible, je le répète. Peu importe à quel point il est codé. Si le design n'est pas attrayant. Les entreprises veulent de beaux sites Web parce que ces cellules plus, Il est aussi simple que cela. De superbes sites Web convertissent les visiteurs en clients payants. Ce sont eux qui lui permettent de continuer à utiliser des sites web actifs et attrayants, créer ou de casser une entreprise, surtout dans ce monde numérique dans lequel nous vivons. Il y a très peu d'exceptions. Bien sûr, il y a quelques exceptions où le design n'a pas d'importance, mais c'est une petite fraction, donc nous n'en parlerons pas. Eh bien, j'essaie de dire que la base du site, c'est-à-dire le code, le backend, la base de données, la fonctionnalité. Bien que ce soit super important, évidemment, n'est pas ce qui fait prospérer l'entreprise. Le look est beaucoup plus important et des termes plus appropriés. L' interface utilisateur et l'UX sont les clés d'un excellent site Web et d'une grande entreprise. Et c'est ce que nous allons apprendre dans ce cours. C' est sur ça que nous allons nous concentrer. Maintenant, vous pouvez penser à faire les deux côtés du projet, les murs en béton et la partie déclarative, non ? Conception et code. Mais pour moi, encore une fois, une chose totalement subjective, je ne pense pas que ce soit une option viable parce qu'ils n'ont que 24 heures dedans. Vous ne pouvez tout simplement pas être grand dans les deux choses en même temps à moins que vous ne travaillez vous-même jusqu'à la mort. Au lieu d'être médiocre à deux choses, je préférerais me concentrer sur le fait de devenir grand à une chose, non ? C' est comme ça que tu deviens un meilleur designer en faisant ça. Ils entrent tous les jours. Et c'est ce que font les codeurs aussi. Ils mettent le temps, jour après jour, jour après jour, tous les jours. C' est comme ça que tu deviens génial. Je pense que cette concentration sur une seule branche vous rendra plus heureux, mais cela mettra aussi plus d'argent dans votre poche. Enfin, vous devez savoir que la plupart des entreprises savent qu'il s'agit de deux emplois distincts pour deux personnes distinctes. Pas plus en 2005 où on s'attend à tout faire ? Non. Quelqu' un verse le béton, quelqu'un d'autre choisit le papier peint, quelqu'un conçoit, quelqu'un code. Si vous trouvez une entreprise qui veut à la fois la conception et codage réalisés par la même personne, passez simplement à l'étape. De toute évidence, les entreprises préféreraient qu'un seul homme fasse le travail des gens. Je comprends, mais ce n'est pas juste. Alors ne travaillez pas avec ces entreprises qui veulent profiter de vous, ne tombez pas à cette pression. C' est un piège. Crois-moi. OK, continuons avec le cours. 4. Comment sélectionner des calques comme un concepteur professionnel: Il est essentiel que nous sachions sélectionner des couches dans Adobe XD, car c'est l'une de ces compétences fondamentales qu'il faut savoir dans le livre de n'importe qui, il y a plusieurs façons de travailler. Je vais vous présenter deux options qui ne sont pas si géniales, mais elles sont faciles à retenir. Mais si vous ne vous souciez pas d'eux, passez à la troisième technique, ce que je recommande. Allons-y. S' il vous plaît ouvrir ce projet que vous avez joint au cours. Cliquez ici pour ouvrir votre panneau de couches au cas où vous n'auriez pas de dopant. Ok, La première façon de sélectionner les calques n'est pas celle que je recommande. Et c'est en utilisant le niveau de travée en couches. Si nous n'avons pas sélectionné le plan de travail, obtiendra son nom ici. Web 1920, un, double-cliquez dessus, et qui révélera ses couches et dossiers. Assez simple, disons que nous voulons sélectionner le pôle Nord en change de couleur, non ? On peut ouvrir tous les dossiers et le chercher. C' est beaucoup de temps. Heureusement pour ça. Il s'agit d'un petit projet avec seulement une poignée de couches et de dossiers. Donc, dans l'ensemble, ce n'est pas si difficile. Toujours sur la première méthode de sélection des couches, nous pourrions également utiliser la fonction de recherche. Si nous savons que nous cherchons le Get Started, nous pourrions taper ça. Mais bien sûr, c'est en supposant que le nom des couches est le même. Ce n'est pas une façon rapide le travail, ni si vous fiable. Juste à titre d'exemple, disons que nous recherchons la maison, le premier élément de menu dans la navigation, non ? Xd ne trouve rien. Et pourquoi c'est ça ? Parce que le calque est en fait appelé menu. Donc, pour résumer cette première technique, ne comptez pas sur l'utilisation du panneau Calques pour sélectionner rapidement les calques, mais vous devriez le savoir au cas où vous seriez bloqué. La deuxième façon de sélectionner un calque consiste à double-cliquer sur le canevas. C' est encore une fois, pas que recommandé, mais vous devriez le savoir aussi. Nous voulons sélectionner le calque de texte Démarrer, n'est-ce pas ? En supposant que tous les dossiers de fermé dans le panneau des calques, voici la procédure. Nous allons avec le texte et double-cliquez dessus. Cela ouvrira le dossier principal et nous aurons btn mis en évidence. Autrement dit, nous avons baissé un niveau, aurions-nous pas sélectionné le calque de texte. Double-cliquez à nouveau, et maintenant nous avons un bon départ. Le sélectionné, comme vous pouvez le voir ici. Fondamentalement, chaque double-clic vous emmène plus loin vers le bas. Le nombre de fois que vous devez effectuer cette action dépend de la profondeur de votre calque. Dans ce cas, get started est regroupé dans un seul dossier, BGN, et qui est inclus dans un groupe plus vaste appelé main. D' où pourquoi nous devons double-cliquer ici à nouveau, les situations les plus faciles. Par exemple, si nous double-cliquez, le menu principal, le sélectionnera immédiatement. Et c'est parce qu'il n'y a qu'un seul dossier, donc nous n'avons pas besoin de descendre d'un autre niveau. Donc, récapitons la deuxième méthode. Vous devez double-cliquer pour développer le dossier. S' il y a des dossiers à l'intérieur des dossiers, vous devez double-cliquer plusieurs fois. C' est pourquoi je ne suis pas un grand fan de cette méthode. Il ne fonctionne de temps en temps, mais dans l'ensemble, Voici la meilleure façon d'y parvenir. Laisse-moi te montrer la troisième voie. Celui que je recommande de contrôler le clic, en supposant que chaque dossier divulgué dans le panneau des calques. Et je veux sélectionner la mise en route. Je vais faire ça. Je maintiens la touche Ctrl et je vais sélectionner ça. C' est comme ça que nous l'avons, peu importe à quel point il est profond. Voici ce que nous devons faire dans cet exemple spécifique. Centré l'icône et les calques de texte ensemble sur ce rectangle. Pour ce faire, nous devons les rapprocher. Quelque chose comme ça, hein ? Ensuite, maintenez la touche Ctrl enfoncée et cliquez sur le groupe de valises. Nous avons tous les deux sélectionnés. Alors allons frapper le contrôle G. G du groupe. Voilà, tu y vas. Nous avons un nouveau dossier. La dernière étape consiste à sélectionner le rectangle orange avec ce nouveau groupe. Comme ça. Encore une fois, maintenez le contrôle sur la sélection multiple et utilisez maintenant cette icône. Cela les centrera horizontalement. S' il vous plaît jeter un coup d'œil sur le panneau des calques. Nous avons maintenant trois niveaux. Ce groupe est à l'intérieur de btn, c'est à l'intérieur du dossier principal. Si je clique n'importe où en dehors de notre tableau et que je vais essayer la méthode numéro 2, regardez combien de clics sont nécessaires. Double-cliquez deux fois, trois fois. Et c'est beaucoup de travail. Mais avec la méthode3, contrôlez le clic, eh bien, maintenez simplement le contrôle, saisissez-le. Et c'est ça. Comme vous pouvez le dire, c'est bien supérieur à ce que je recommande au quotidien, d' autant plus que nous n'utiliserons pas le panneau des calques si souvent. Je vous expliquerai pourquoi c'est le cas plus tard devant les tribunaux. C' est une capture bien sur le contrôle clic, disons que vous zoomez et que vous voulez contrôler cliquez sur le bref regard pour peut-être changer de couleur ou quoi que ce soit. Remarquez ce qui se passe. Vous en avez sélectionné une petite partie. Et c'est parce que la technique de clic de contrôle analyse tous les groupes. Cette icône n'est pas constituée d'un seul calque. Il a en fait trois éléments. Donc, si nous essayons de bouger, il ne repositionnera que ce petit morceau. Même avec n'importe quel changement de couleur ou redimensionnement. C' est donc le côté négatif du clic sur le contrôle, mais voici la solution, la touche Echap. Cela vous élève un niveau, et voilà. Vous avez maintenant tout le bref K sélectionné. Que se passe-t-il si vous voulez le dossier à la place ? Appuyez encore sur Évasion. Et voilà. Cela nécessite un peu de pratique. Ce n'est pas quelque chose qui est familier aux utilisateurs de Photoshop. Mais rappelez-vous juste, Contrôle, clic d'échappement, contrôle clic d'échappement. C' est ton nouveau mantra. C' est ta nouvelle habitude. Échappement contrôlé des jambes Gardez toujours un œil sur le panneau des calques lorsque vous faites cela. Donc vous savez combien de diamants vous devez frapper Escape. Ce sera des moments où vous devez taper deux ou même trois fois. Dans la prochaine conférence que nous allons pratiquer un peu plus. Ne vous inquiétez pas si vous n'avez pas encore le coup de bords. Essayez-le un peu, puis passez à l'exercice. Bonne sélection, contrôle, clic d'échappement, contrôle, clic d'échappement. 5. Exercice pour mettre votre sélection: Bonjour, bonjour. Nous devons développer la mémoire musculaire quand il s'agit de sélectionner couches dans Adobe XD n'est pas si difficile une fois que vous vous y habituez, mais vous avez besoin de pratiquer, surtout si vous êtes familier avec d'autres programmes de conception, photoshop, clin d'œil, clin d'œil. Maintenant, voici l'exercice. Vous avez ces éléments disposés sur la toile et je veux que vous changiez cette couleur, mais en tant que composants individuels, voici comment cela se passe. Commencez par le panier. Contrôle. Cliquez dessus et jetez un oeil à votre panneau Calques. Si vous n'avez pas de dopant, utilisez Contrôle Y ou cliquez ici. Maintenant, nous avons le chemin un sélectionné, et sur la base de ce rectangle, nous pouvons dire que nous l'avons sélectionné. En passant sur le côté droit de l'écran, nous voyons que nous avons un remplissage activé. Cliquez ici pour ouvrir le sélecteur de couleurs. Maintenant, vous pouvez choisir n'importe quelle couleur aléatoire ou vous pouvez utiliser mes suggestions du côté droit de la toile. Pour faire ça. Vous devez utiliser ce que je laisse tomber avec double. Déplacez maintenant votre curseur sur le rectangle orange et cliquez sur. Voilà, tu y vas. Ensuite, contrôlez le glyc, la poignée. Cette fois, je n'ouvrirai pas le sélecteur de couleurs. Au lieu de cela, je vais utiliser cette icône directement. Et juste comme ça, j'ai changé la couleur des poignées. Maintenant vous pouvez demander à Chris, comment se fait-il qu'on n'ait pas changé la poignée du plus grand sac ? Eh bien, jetons un coup d'oeil dans le panneau des calques. Ce sac plus petit est composé de deux composants, de deux éléments, voie trois, de la poignée actuellement sélectionnée, et de la trajectoire jusqu'à la base du sac. Et pendant que nous y sommes, changeons sa couleur pour cliquer sur l'outil pipette. Et fondamentalement c'est tout. En revenant au plus grand sac, il n'y a qu'un seul chemin. cette raison, nous pouvons séparer la poignée du reste. C' est ainsi que le créateur de cette icône a choisi de travailler. Je ne les ai pas fait moi-même en fait obtenu de flat icon.com. Maintenant, il n'y a pas une façon particulière de travailler qui soit jugée correcte. Il est vrai que si vous avez plus de chemins, vous avez plus de flexibilité. Mais il est aussi un peu plus difficile de sélectionner réellement la forme. Vous devez donc accepter le fait que vous rencontrerez des tas de scénarios différents en fonction des préférences de tout le monde. Passer à la forme suivante, contrôler, cliquer sur la jante extérieure et le rendre orange comme ça. Maintenant, pour le symbole à l'intérieur de ça, regarde ce qui se passe. C' est fait de trois chemins. Maintenez la touche de contrôle enfoncée et cliquez dessus dans le panneau des calques. Mais ne prends pas le bain cinq. La partie extérieure orange utilise-t-elle le compte-gouttes ? Et c'est ça. Si vous voulez m'impressionner, vous pouvez sélectionner ces deux cercles et les faire une autre couleur. Comme ça. Jouez avec eux. Je sais qu'il semble assez simple, mais c'est notre Jim, ces terrains d'entraînement autorisés où les cartes de vaccin et les liquides, mais tout a un point. C' est ainsi que vous gagnez en vitesse et en dextérité. Même si vous êtes le non-croyant. Croyez-moi, cela aide pour les calques de texte. Voilà ce que je veux faire. Nous allons les sélectionner plusieurs fois. Nous savons que si nous contrôle-cliquez sur cette ligne, va l'attraper. Si nous utilisons la même technique sur le second, désélectionnera le premier et attrapera celui-ci à la place. Nous sommes en train de sauter de haut en bas dans le panneau des calques. La sélection multiple dans le canevas. C' est assez simple. Après avoir saisi le premier calque, maintenez la touche Contrôle et Maj enfoncée, remarquez le panneau Calques. On est prêts à y aller. Je désélectionne et je recommencerai. Contrôle cliquez sur celui-ci, et maintenant Contrôle passer à cet autre. Et le troisième et le quatrième. Maintenant, on peut les rendre tous rouges ou quoi que ce soit. Passez aux grandes lignes de texte. Contrôle de la jambe et clic de changement de contrôle. Faites ces jaunes par exemple. Mais tu dois garder quelque chose à l'esprit. Laissez-moi vous montrer comment vous avez des problèmes. Tu pourrais faire ça. touche Maj enfoncée tout en cliquant sur l'autre calque, comme d'habitude, Tout en maintenant latouche Maj enfoncée tout en cliquant sur l'autre calque, comme d'habitude, vous maintenez la touche Maj enfoncée. L' erreur est que vous auriez dû maintenir le contrôle et le décalage. Mais apparemment, ça a fonctionné. Il a été sélectionné. Il y a un symbole étrange ici à côté de remplir, mais si vous cliquez dessus, le sélecteur de couleurs apparaît et il semble bien fonctionner. Le panneau des calques nous dit la vérité. Nous avons sélectionné un calque de texte et un groupe entier. Et avec le changement de couleur, nous éditons en fait l'étiquette supérieure ainsi que le compteur de caractères en bas à gauche, appuyez sur Control Z et sauvegarde. La méthode correcte pour sélectionner le calque est Control Shift. Cliquez sur. Ok, je suis sûr que tu l'as, mais sinon, rejoue-le, laisse-moi te montrer une dernière chose. Cette ligne. Vous sélectionnez ça et vous remarquez quelque chose d'étrange. n'y a pas de remplissage. C' est pourquoi il n'a pas été affecté par notre action précédente. Le remplissage est effectivement désactivé car cette couche est contrôlée à travers la carte cette section. C' est ainsi que vous pouvez ajuster cela. Vous pouvez le rendre plus épais en utilisant ce champ. Mais le vrai kicker est les contrôleurs de tiret et d'écart. Pour faire ce que vous pouvez vraiment faire quelque chose de cool. Dans la plupart des cas, vous n'utiliserez pas réellement ces fonctionnalités, mais il est bon de les connaître. Vous pouvez jouer avec eux à votre propre moment, mais n'oubliez pas d'utiliser Control Z lorsque vous en avez terminé. Je vous laisse finir ces changements de couleur, y compris le clavier. Je ne cherche pas quelque chose en particulier, mais je veux voir ton travail. S' il vous plaît prenez votre temps avec elle et montrez-moi votre design. N' oubliez pas de vous amuser avec elle et s'il vous plaît ne sautez pas avant sans le faire. Merci beaucoup. 6. Voici ce que les codeurs font dans nos conceptions: Bonjour, bonjour et bienvenue à cette conférence où je veux répondre à une question importante. Pourquoi les codels doivent-ils être conçus dans Adobe XD ? Comment les utilisent-ils ? Tout d'abord, ils n'ouvrent pas le fichier source. Et tu as entendu ça, non ? C' est tout à fait correct. Les codons n'ont pas besoin d'installer Adobe XD et de passer en revue votre conception. Ils ne touchent pas votre projet. C' est le chemin. Maintenant, c'est ce qui a désorienté certaines personnes. Si les codas n'exportent pas vers les graphiques, pourquoi le design est-il nécessaire de toute façon, tous ces boutons et calques de texte se font via code CSS et toutes les images provenant d'un serveur. Alors pourquoi gaspillons-nous notre temps en concevant des choses dans Adobe XD ? La réponse est simple. Le design agit comme un guide. C'est un plan. D' une certaine façon, vous aimeriez un architecte. Lorsque vous concevez un bâtiment, vous allez à des niveaux de détail extrêmes. C' est parce que toutes les personnes impliquées doivent approuver la conception. Le client de la ville en ce qui concerne les permis, mais aussi les constructeurs, l'entreprise de construction, n'est-ce pas ? Bien sûr. Ils savent qu'ils doivent verser du béton et installer de la plomberie, mais ils doivent savoir où exactement. Ils ont besoin de tout savoir dans les moindres détails. Et je parle de millimètres ici. C' est pourquoi notre conception est nécessaire. Le client peut vérifier le design et voir s'il répond à ses besoins et s'il représente sa marque. Les codons vérifient également s'ils peuvent construire cela. Il s'agit d'un plan directeur ou d'un plan qui doit être soigneusement examiné et discuté avant que tout code ne fonctionne. Sur la base de ce plan détaillé, le chef de projet peut dire aux codons quoi faire, dans quel ordre et dans quel but. Sans design, c'est comme appeler un tailleur et lui demander un costume. D' accord, en supposant que c'est un Taylor fantastique, peut-il commencer avec ce niveau d'information que tu veux juste un costume ? Savoir ? Évidemment, bien sûr que non. Il n'a pas assez d'informations. Et si vous dites que vous voulez un costume décontracté où un costume décontracté noir, vous savez quoi ? Allons le monter. Vous voulez un costume noir décontracté avec une facture slim fit. Et peut-être que vous avez dit que votre 510 pourrait qu'ils aimaient faire un excellent travail ? Non, pas vraiment. C' est parce qu'il n'a pas assez d'informations pour continuer. Tu dois le rencontrer. Il a besoin de faire des mesures précises de votre corps, vous montrer des tissus, vous montrer diverses options et choix et ainsi de suite, est tout ce processus. Backwater web design monde. Voici seulement deux exemples. Le client dit qu'il veut un gros titre, non ? Eh bien, qu'est-ce que ça veut dire grand ? Est-ce grand ou est-ce grand ? Eh bien, que diriez-vous de cette valeur ? Lorsque vous le comparez à cet autre morceau de texte, c'est en effet plus grand. Techniquement, c'est correct. Deuxième exemple, six produits sur la page d'accueil, non ? Disons que c'est ce qu'il veut. Mais voulez-vous que les images soient arrondies comme ça ? Ou tu veux qu'ils soient équarris comme si on l'avait ici ? Les détails sont extrêmement importants. Un grand design de site Web couvre absolument tout ce dont un codé a besoin. La taille de la police, le poids, le code de couleur, la ligne augmente. Donc, sur le hub des effets que différents états de fardeaux et des éléments de menu, le processus de paiement, fenêtres pop-up et ainsi de suite. Sans ces choses, les codons, nous devrons tout approximer. Et dans la plupart des cas, cela vous donnera un design médiocre au mieux. Dans certaines situations, vous obtiendrez un site Web horrible qui ne ressemble rien à ce que vous imaginez. La vérité est que les codels prennent toutes ces informations de la conception pendant le processus de remise, dont nous discuterons. Bref, ce n'est pas un gros titre. Ceci est en fait nouveau Nieto noir, 40 pixels affichés dans le code couleur à un 27, 49, qui est positionné dans le centre horizontal du projet, 40 pixels de l'en-tête. C' est ce que le codeur va prendre de vos conceptions. Chaque élément ici a beaucoup de propriétés et le processus de codage repose sur la recréation de ces valeurs dans le code de travail. Encore une fois, plus tard dans le cours, je vais tout vous montrer. Je vais vous montrer comment vous préparez tout pour le code. Mais voici les points essentiels encore une fois, les codons n'ont pas besoin de fichier de projet audio Adobe XD. Vous leur donnerez un lien qui contient tout ce dont ils ont besoin. Notre conception dans Adobe XD est extrêmement importante car elle montre tous les détails du projet. Une fois que le client a approuvé la conception, les codons peuvent enfin se mettre au travail, mais pas avant cela. 7. Exercice : Testez vos compétences et l'attention du détail: Bonjour et bienvenue à cet exercice où j'espère que vous passerez un bon moment. Vous avez deux tâches. La première consiste à organiser ces couches en un beau site Web. Eh bien, une partie d'un site web. Maintenant, comment tu fais ça, c'est à toi de décider. Ce qui est important, c'est que vous utilisez la technique de clic de contrôle que je vous ai montrée lors de la conférence précédente. Et tu veux t'assurer que ça a l'air sympa. Lorsque vous en avez terminé, exportez le design en PNG et téléchargez-le sur la plateforme afin que je puisse vous donner mes commentaires. Cela peut être fait de plusieurs façons. La façon la plus simple d'exporter est de cliquer sur le nom des tableaux d'art juste ici où il est dit toile. Et puis utilisez Control E. Maintenant, si vous ne voulez pas utiliser Control E, veuillez aller dans le menu principal. À partir de là, allez à l'exportation, puis utilisez l'exportation sélectionnée dans cette nouvelle fenêtre, choisissez PNG et un endroit pour l'enregistrer. Je vous suggère d'utiliser votre bureau. Organiser ce projet m'en dira un peu sur votre conception I. Mais la tâche numéro 2 en parlera beaucoup sur l'endroit où vous êtes et votre carrière. Voilà ce que je veux que tu fasses. J' ai fait intentionnellement trois erreurs. Eh bien, en créant ces éléments. Après avoir téléchargé le PNG, s'il vous plaît me dire dans un commentaire les trois erreurs que j'ai intentionnellement inclus. Maintenant, je me rends compte que pour certains d'entre vous, ça peut être incroyablement facile. Pour les autres n'étaient pas les problèmes peuvent être évidents, mais le troisième, qui pourrait être difficile à trouver, croyez-le ou non, être en mesure de repérer de petites erreurs est l'une des parties les plus importantes dans tout concepteur web l'ensemble de compétences. Encore une fois, le meilleur numéro 2, est de trouver trois erreurs, mais s'il vous plaît, ne sautez pas numéro un car cela pourrait vous aider à trouver les modifications. S' il vous plaît mettre en pause le cours et pourtant le travail, ne continuez pas avec lui parce que dans la prochaine conférence, je vais vous montrer la version complète. Et je vais vous montrer que nous avons des erreurs, mais ce n'est pas amusant comme ça. Alors s'il vous plaît, arrêtez maintenant. Essayez-le. Et si vous ne pouvez pas le faire pour une raison quelconque, s'il vous plaît garder la solution pour ne pas voir les erreurs. D' accord ? Une fois que vous avez terminé, continuez. 8. Résoudre l'exercice précédent: Hé là, c'est Chris. Bienvenue de retour. Avez-vous eu la chance de créer ce mini site Web et de repérer que V erreurs que j'ai inclus. Si ce n'est pas le cas, s'il vous plaît pause maintenant avait la touche Spacebar. Sinon, dans les prochaines secondes, je vais vous montrer le résultat et vous donner les réponses. S' il vous plaît Avertissement final. Ok, laissez-moi vous montrer les deux tâches terminées. La première est assez droite pour le web. C' est ainsi que votre design est censé ressembler, donner ou prendre, bien sûr. Et voici les points essentiels. Numéro un, tous ces éléments sont alignés à gauche. C' est vraiment important. Donc à gauche aligner tout, le logo, le titre, le corps du texte, et le bouton. C' est super important. numéro deux suivant, le logo et le menu principal sont centrés verticalement à l'intérieur de ce rectangle. Ok, enfin, numéro 3. L' écart sur la gauche correspond à l'écart sur le côté droit. Donc, la même quantité d'espace de chaque côté. J' utilise le logo pour mesurer la distance de ce côté en maintenant la touche de contrôle enfoncée, ces lignes roses apparaîtront et ce sont des guides intelligents. Ils me disent cette distance et Pexels ici, c'est 130. Donc 130 pixels. Je suis sur l'outil de déplacement, en passant, l'autre côté, je vais utiliser le menu principal comme point de référence. Et encore, j'en ai 130. La valeur elle-même n'est pas importante. Au lieu de cela, il est essentiel que vous ayez le même numéro de chaque côté. Donc, dans l'ensemble, c'est le design, mais qu'en est-il des erreurs ? La deuxième tâche, les trois erreurs, non ? Ok, Le premier est le fait que savoir plus n'est pas le centré verticalement à l'intérieur du bouton. Si vous effectuez un zoom avant à l'aide de la touche Contrôle et de votre souris défiler et vraiment vous concentrer sur elle. Je pense que vous pourriez repérer l'erreur. C' est un peu plus perceptible. Ok, maintenant je vais zoomer avec Control 1 pour pouvoir révéler la deuxième erreur. C' est la quantité d'espace dans ce paragraphe, mais n'est pas aussi évidente que la première erreur. Vous pouvez voir que ce n'est pas très agréable à regarder. En fait, c'est difficile à lire parce que le texte est trop condensé, trop compact, trop rapproché. Et c'est en fait un problème très commun chez les débutants, fois les concepteurs et les codons, que de laisser ce paramètre spécifique à son niveau par défaut. Et cela rend le texte difficile à lire. N' utilisez pas le niveau par défaut. On va en parler dans le cours. Encore une fois, ce n'est pas une énorme erreur. Mais c'est comme mettre du ketchup sur un bon morceau de steak. En général, vous ne faites pas ça. Maintenant, pour la dernière erreur, numéro 3, c'est un peu plus difficile à repérer. Je suppose que la plupart des gens l'oublieront. Le problème est avec le menu principal, la distance entre les deux derniers éléments n'est pas égale. Ce n'est pas pareil. En fait. C' est exactement deux liens spatiaux en deçà de toutes les autres. Voici comment vous pouvez le tester. Laisse-moi me concentrer là-dessus. Je vais activer le monde dactylographié en appuyant sur D. Maintenant, je vais cliquer ici. Tout en maintenant la touche Maj enfoncée, j'appuie plusieurs fois sur la touche fléchée droite afin de pouvoir compter le nombre d'espaces vides entre ces deux. Et c'est 1, 2, 3, 4, 5, 6, 7. Il y a donc un espace de sept espaces vides. Je ne t'ennuierai pas de vérifier toutes les autres. Au lieu de cela, je vais le faire, ce qui est beaucoup plus rapide. Je vais le copier avec Control C, cet espace vide ici. Vous n'avez pas à suivre, au fait, juste regarder et écouter. Ensuite, je vais sélectionner le prochain écart comme ça. Maintenant, quand je colle, s'il y a une certaine déférence, ce calque de texte devrait changer. Mais si je les colle, rien ne se passe, alors la distance est identique. Alors allons frapper le contrôle V et le tester. Et oui, il n'y a pas de changement. Faisons le suivant. Sélectionnez cet espace vide et basé sur Contrôle V. Encore une fois, aucune modification. Donc ça veut dire que c'est pareil. Maintenant pour le dernier. Oui, il a bougé. Avez-vous remarqué, sinon moins, compté manuellement ? Donc c'est 12345. Donc cinq places contre sept dans ces autres cas. Et avec ça, ce sont les trois erreurs que j'ai intentionnellement incluses. Vous n'avez pas les bons par lui-même, alors s'il vous plaît ne vous inquiétez pas à ce sujet. Laisse-le pour l'instant. Juste pour que je ne te laisse pas pendre. Voici la bonne version. Le corrigé donne l'avant et après afin que vous puissiez facilement les comparer. Vous remarquez les changements ? Maintenant, encore une fois, votre réaction à ces petites choses, ces petites imperfections est vraiment importante. Si vous ne pensez pas que ces petits détails sont importants dans la conception web, alors peut-être que ce ne sont pas les bonnes citations pour vous, et peut-être que le web design n'est pas pour vous. Et c'est parce que tout concepteur décent doit prêter une attention très particulière à son travail et exécuté correctement avec une précision parfaite de pixel. Plus d'informations sur ça un peu plus tard. Mais pour l'instant, j'aimerais entendre ce que vous pensez de ces erreurs. Pensez-vous qu'ils devraient être repérés et corrigés ? Quel était le design assez bon qu'il était avant. S' il vous plaît laissez-moi savoir dans la section commentaires, la section Q&R, ou sur le serveur Discord, si vous pouvez me trouver le plus souvent. Merci. 9. Les trois clés de devenir un grand concepteur de Web: Bienvenue dans cette conférence où je vais révéler les fondements du cours, les trois piliers d'un grand designer web. Voici ce qui suit dans cet ordre. Numéro un, pixel parfait numéro d'exécution pour comprendre les besoins du client. Et numéro 3, attention aux détails. Ce sont les choses que vous devez maîtriser si vous voulez vraiment gagner votre vie en tant que concepteur web. En fait, tout type de travail d'interface utilisateur repose sur ces trois composants. D' abord, laissez-moi les définir. Alors rappelez-vous l'exécution parfaite d'un pixel. C' est ce que nous venons d'expérimenter dans l'exercice précédent. Le texte et le fardeau ont été compensés. Il avait 29 pixels en haut et seulement 24 en bas. Dans la version correcte, l'espace est égal sur les deux axes, 27 pixels verticalement et 69 pixels horizontalement. L' écart de chaque côté de la conception correspond à nouveau à la distance auditive ici, encore une fois égal à l'alignement gauche de ces quatre couches. Parfait. C' est ainsi qu'un concepteur web fonctionne. La précision est la clé, alors que je ne vous suggère pas de devenir obsédé par chaque pixel, c'est la toute première chose que vous devez travailler et ensuite maîtriser. Un grand web designer scanne toujours avec des imperfections en termes d'exécution, votre esprit s'adaptera à cette nouvelle façon de penser. Si vous le pratiquez, je vais décrire mon processus et vous donner plein de conseils et de techniques dans un chapitre séparé. Mais sachez que je crée immédiatement des lignes imaginaires dans mon esprit quand je vois un design. abord, je cherche deux grandes lignes verticales qui ont dit la limite de la conception. C' est ce qu'on appelle la zone active et elle doit être réglée avec précision. Tout site décent aura des sites bien établis. Voyez comment tout est aligné correctement de chaque côté. C' est ce que vous voulez vérifier, mais ce n'est qu'une étape et l'espacement n'est pas tout. Le contraste de Paul est une autre chose. Voici quelques exemples. Dans mon livre. C'est une autre erreur d'exécution. La conception de n'a pas réussi à sélectionner les couleurs appropriées. Eh bien, en voici un autre qui est lié au contraste. La photo est beaucoup trop occupée pour qu'ils aient d'autres textes dessus. Ceux-ci peuvent aussi être appelés erreurs de débutant, mais j'aime mieux utiliser ma terminologie parce qu'elle est plus descriptive. Donc, pour résumer, le premier, le premier pilier d'un grand concepteur web, le fondement même est la capacité d'exécuter un design sans aucune erreur d'exécution. Cela implique une bonne compréhension de Photoshop, ce que votre programme de conception de choix. Si vous ne savez pas comment l'utiliser correctement, utilisez les guides, les guides intelligents, les grilles, les outils d'alignement, en regroupant les éléments entre eux, etc. Ensuite, vous ne pouvez pas continuer, c'est comme essayer de devenir un constructeur. Ce que vous ne savez pas tenir un marteau ou essayer de devenir un combattant, mais vous ne savez pas comment lancer un coup de poing. Vous ne devriez pas me demander conseil ou quelqu'un d'autre pour ce qui est de vos dessins, sauf si vous avez compris cela. Quand vous n'avez pas d'erreurs d'exécution, littéralement 0 erreurs. Ce n'est qu'alors que vous pouvez vous concentrer sur les deux autres piliers. Je sais que ça a l'air effrayant, mais si vous suivez mes cours, je vous ai montré que vous ne ferez aucune erreur notable. Numéro pour comprendre les besoins du client. Je vais garder ça court en vous montrant une affaire claire. Imaginez un client une fois un site web pour son centre de santé, n'est-ce pas ? Donc, cette entreprise a des entraîneurs personnels, équipement de gym, le studio de yoga ou crossbit là encore le bon travail ? Lequel des modèles suivants est le meilleur ? C' est celle-là ? Jetez un coup d'œil. La première impression est ce qui compte le plus. Et celle-là ? C' est mieux ? Je vais inclure les liens juste au cas 1. Je les ai explorés. Ok, enfin ce dernier. Alors je vais vous demander à nouveau quel design est le meilleur ? La question en soi est le problème. Tu n'es pas censé les juger en fonction de ton goût. Ce sont des vibrations radicalement différentes. Par exemple, celui-ci est totalement dur noyau. C' est pour les culturistes, pour les têtes de viande qui aiment claquer des poids. C' est sombre, sérieux et ça attirera certainement un certain groupe de personnes, 95 pour cent d'entre elles étant des hommes, probablement avec une expérience antérieure de Jim. Mais l'autre est le contraire. C' est comme si c'était invitant, c'était amusant, c'était amical et ça attirerait des gens, gens réguliers, hommes et femmes, qui n'étaient probablement jamais allés à la salle de gym auparavant. Ils peuvent être effrayés ou intimidés par exactement ces types de personnes dans l'autre design. Donc, ils veulent probablement éviter ce genre de gymnases. Autre, c'est spécialisé sur le yoga. Il est élégant et attrayant devrait, mais il attirera surtout les femmes qui sont à la recherche du studio de yoga haut de gamme. Il se convertira sûrement bien avec ce public cible. Mais les culturistes et les personnes irrégulières éviteraient probablement. Donc, vous voyez qu'il ne s'agit pas de ce que le design est le mieux. Maintenant, c'est de s'assurer que vous comprenez les besoins du client. C' est lui qui est censé vous dire son public cible. Ce que je fournit le site Web est censé avoir et ainsi de suite. Lorsque vous avez toutes ces informations, c' est seulement alors que vous pouvez commencer à juger différentes conceptions qui sont construites en fonction des besoins spécifiques du client. Encore une fois, nous avons tout un chapitre sur ce sujet, mais c'est l'idée en quelques mots. Enfin, le troisième et dernier pilier est l'attention au détail. Lorsque ces deux autres choses sont traitées, Il est temps d'élever le design en lui montrant beaucoup d'amour. Ce chemin est moins simple, mais permettez-moi de vous montrer quelques exemples. La différence entre ce type de conception et celui-ci est l'attention portée au détail accordée à chaque composant. Vous pouvez penser, Oh, ce sont les beaux graphismes, les illustrations, les polices et les icônes. Et oui, tu as raison. Celles-ci demandent du temps, de l'énergie et beaucoup d'efforts. Même si vous ne créez pas tout à partir de zéro. C' est la marque d'un designer qui veut créer quelque chose de spécial, autre chose. Une attention permanente aux détails est essentielle parce que tout doit fonctionner ensemble. Tout est en accord et il chante la même chanson. Chaque élément, chaque couleur, chaque police est soigneusement choisi pour surcharger tous les autres. Ce sont des sites de synergie qui n'ont pas accordé suffisamment d'attention aux détails. On aura l'air fade, ennuyeux, ou mieux, oubliables. Donc, lorsque vous présentez un site web qui aime la vie, mais qui est parfaitement exécuté et qui répond aux besoins du client. C' est peut-être six des sept sur 10. Bien, pas génial. Si vous voulez augmenter votre jeu, c'est le genre de chose que vous devez faire, travailler plus sur chaque chose. C' est le troisième pilier du succès en termes de web design. Et c'est en fait tout le cours. C' est ce que j'ai l'intention de vous enseigner et plusieurs chapitres en petits morceaux un à la fois. Je suis vraiment excité parce que j'ai adoré ce domaine et j' espère pouvoir partager ma passion avec vous de manière productive. Je sais que vous avez des questions, mais continuez à suivre le cours car tout se déroulera progressivement en temps voulu. 10. La question la plus importante lors du début à un nouveau projet: Bonjour et bienvenue à notre premier projet web design du début à la fin. Voici la tâche dont nous avons besoin pour reconcevoir ce site Web. C' est mes propres affaires. Le site cellules des collations saines dans mon propre pays, la Roumanie, voici la question la plus importante lors du démarrage d'un projet, en particulier une refonte. Quel est le but de l'entreprise ? Encore une fois, quel est le but de l'entreprise ? Si vous vous souvenez, c'est la deuxième clé pour devenir un grand designer web. Alors qu'est-ce que cette entreprise l'un des, quels sont ses objectifs dans ce cas, je suis heureux d'être à la fois le client et le concepteur afin que je puisse tout expliquer en détail. C' est pourquoi j'ai choisi ce projet. Mais vous devez commencer par cette question sans réponse. Tu ne peux pas avoir le travail. Vous pourriez l'améliorer en fonction de vos propres goûts et idées. Mais rappelez-vous le site de gym, plusieurs versions, tout beau temps. Si vous ne savez pas ce que le client veut, quels sont ses objectifs, alors tout est pour rien. C' est pourquoi vous ne devriez rien concevoir avant d'obtenir une réponse. Quel est le but de l'entreprise ? Qu' est-ce qu'il veut réaliser ? Et voici le processus. Ce site veut nous vendre des produits. C' est évident, non ? Mais allons plus loin. Qui est le public cible ? Des gens en Roumanie ? Parce qu'il n'est pas expédié à l'international. Ok, Cool. Mais tout le monde en Roumanie, c'est quelqu'un en particulier ? C' est pour les enfants ? Est-ce pour les gens qui veulent perdre du poids ? C' est pour les hommes qui ont travaillé ? Ce sont toutes des questions que vous devriez poser. Le client peut ne pas avoir de réponses à toutes ces questions, mais il peut les trouver via Google Analytics, par exemple, juste lui a demandé l'accès et vous aurez une meilleure idée des choses dans cette vidéo, je vais seulement se concentrer sur quelques choses. Si nous nous adressons au public, à la démographie, puis au genre, nous pouvons voir qu'environ 80 % des visiteurs sont des femmes. C' est extrêmement important pour une refonte. Si on vérifie l'âge, on va voir qu'on n'a pas affaire à un public plus jeune. Donc, nous n'avons pas besoin de quelque chose qui va être très moderne ou audacieux, excitant, avant-gardiste. Enfin, une dernière chose. Lorsque nous regardons les appareils du visiteur, nous pouvons voir que le mobile est 90% des visiteurs. Donc, la plupart des gens sont sur leurs téléphones. Mais une petite chose, ne sautez pas aux conclusions parce que bureau, alors qu'il est seulement 10 pour cent du trafic, il génère ce que le 5% du chiffre d'affaires, alors que donc 10 pour cent représente 45% de l'entreprise. C'est énorme. Faisons un résumé rapide. Nous avons affaire à un site Web qui vend des aliments sains aux femmes de 25 ans et plus, principalement sur leurs téléphones. Mais ceux qui utilisent l'ordinateur par beaucoup plus que ceux qui utilisent leurs téléphones. Ok, donc c'est la photo. Maintenant, jetons un coup d'oeil au site web existant. C' est la page d'accueil. Est-ce quelque chose qui attirera les femmes ? Rappelez-vous, 80 % de femmes, n'est-ce pas ? Analysons les choses et voyons ce que nous pouvons trouver et ce que nous pouvons améliorer. Sur cette base, nous allons planifier notre refonte. Les bords carrés, d'abord et avant tout, sont un peu masculins, non ? Cette ligne sombre et épaisse du menu des catégories est également nette et masculine. Le titre principal, eh bien, ce titre est ludique, mais il est un peu trop gros, un peu trop arrondi. Et je pense que c'est plus pour les enfants que pour les femmes. En ce qui concerne le fond, C'est une nuance assez froide de gris. Formulaire de la description. Eh bien, c'est une police serif. Ça n'a pas l'air mal, mais je ne vois pas que ça puisse être considéré comme attrayant pour les femmes non plus. Donc, juste comme ça, nous avons quelques points à faire. Ce design ne semble pas être fait pour les femmes. En fait, c'est plus envers les hommes. Alors arrêtons-nous un instant. Vous pouvez demander, Hey Chris, vous savez quoi, je n'ai aucune idée de ce que vous voyez un design féminin. Un design masculin. Comment peux-tu le dire ? Ok, un truc sûr. Laisse-moi éclaircir ça. Ouvrons Google Images et recherchons un déodorant pour les hommes. Et dans un autre onglet, s'il vous plaît ouvrir le déodorant pour les femmes. La différence est la nuit et le jour. designs qui sont faits pour les hommes sont durs, ils sont froids, ils ont des couleurs intenses et fortes. Contraste maximum. Les polices sont ciselées. Ils sont bien définis, Bolden, puissants. Mais d'autre part, les dessins faits pour les femmes sont beaucoup plus légers. Voyez combien il y a de blanc. Les couleurs sont également plus douces. On peut voir des couleurs pastel avec des couleurs très délavées, rien de trop intense. Nous avons des formes fluides, des courbes. Nous ne voyons pas beaucoup de lignes ou d'angles pointus. On voit un dégradé de fondu ici. Et on pourrait continuer à parler des différences. C' est ainsi que vous séparez ces deux styles de design, masculins et féminins. Retour à ce site web spécifique. Au mieux, on pourrait dire que c'est neutre. Ce n'est pas pour les hommes que pour les femmes. Quoi qu'il en soit, c'est un problème et c'est quelque chose que nous devons résoudre. Enfin, les produits sont assez chers. cette raison, nous devons inclure un peu de style et de luxe au design. faut que ça se sente haut de gamme, peu coûteux. Ne vous méprenez pas. Ce n'est pas haut de gamme, mais il n'y a pas de prix non plus. Dans cet esprit, nous pouvons conclure ce qui suit. refonte est nécessaire parce que le site Web n'attire pas le public cible, et ce sont les femmes dans la trentaine qui ont un pouvoir d'achat, nous devons nous assurer que nous concevons quelque chose de féminin et haut de gamme. Mais s'il vous plaît noter que nous ne voulons pas exclure les hommes. Donc nous ne ferons pas un site qui soit trop girly. Ce serait une erreur aussi parce que, encore une fois, le trafic est de 80 pour cent des femmes. Bien sûr. Mais nous voulons qu'il soit environ 60 pour cent féminin, peut-être 70 pour cent au maximum. Donc nous n'exagérerons pas avec la banque, les fleurs et tout ce qui n'est pas parce que l'entreprise veut vendre aux hommes aussi. Il ne veut pas les exclure. Mais le meilleur dans l'ensemble, la question la plus importante a répondu, nous comprenons maintenant l'objectif de cette entreprise et comment nous pouvons y répondre, comment nous pouvons aider l'entreprise. Être court, plus de bords tranchants, lignes épaisses ou d'éléments froids. Nous devons la rendre plus amicale et plus envers les femmes. Avec cela compris, nous pouvons continuer. 11. Comment rechercher/trouver l'inspiration pour votre projet: Bonjour, bonjour et bienvenue. Nous savons que nous devons redessiner ce site pour qu'il soit plus féminin et luxueux. L' étape suivante consiste à trouver de l'inspiration. Pour voir les conceptions qui correspondent à cette description. Trouver de l'inspiration prend beaucoup de temps. Vous devez regarder 2050, 100 sites Web jusqu'à ce que vous en trouviez deux ou trois qui ont du sens pour votre projet. J' ai déjà sélectionné trois sites qui peuvent nous aider dans notre refonte. Le premier est net jusqu'à ce qu'ils adoptent com, je ne suis pas sûr que ce soit la façon dont vous le prononcez, mais de toute façon, c'est un célèbre magasin en ligne qui vend des vêtements très chers. Si vous le regardez, vous ne trouverez rien de trop féminin DO, ou quoi que ce soit qui se distingue en termes de design. En fait, c'est assez simple et c'est intentionnel. Tue une question. Qui achète une robe de 2 000$ ou cent dix cents riches ? C' est assez évident. Mais voici la prochaine question. À quoi sont habitués les riches ? Comment leurs maisons ressemblent ? Sont-ils sombres et bondés ? Il y a beaucoup de lumière du soleil et de l'espace ouvert. Ils sont habitués au marbre et au granit électroménagers en acier inoxydable et ainsi de suite. C' est pourquoi les sites de luxe ont un certain look. Voici les quelques autres sites avec des vêtements très chers ainsi. Ils ont tous l'air à peu près pareils. Noir, gris et beaucoup et beaucoup de blanc. Polices simples, pas de couleur à parler, sauf pour les produits eux-mêmes. Vous n'aimez peut-être pas ces sites Web. Et je comprends ce point, mais c'est à ça que ressemble le luxe. Passons maintenant à un autre site Web. Cette fois, c'est quelque chose de mon propre pays et c'est lié à la nourriture. Ces gars vendent des Eclair fantastiques. Ces suites françaises sont évidemment belle balade. Mais regardez le design. Beaucoup de noir, beaucoup de blanc dans une pêche, rose ici et là. Juste un petit peu de douleur. C' est un design simple sans trop de décorations. Les produits des stars du spectacle, ils se démarquent et ils ont l'air incroyable. Notez qu'il n'y a pas beaucoup de texte non plus. C' est une police de fantaisie ici. Pas beaucoup d'ailleurs, mais vous pouvez le lire sans aucun problème. Et il a l'air bien sur ce fond blanc pur. Le dernier site qui m'a inspiré est Zyban.com. J' adore à quel point c'est propre. Si l'illustration est grande, mais jetez un oeil au menu principal aux lignes horizontales avec une faible opacité. Une icône cool pour la zone Logan qui l'aide à se démarquer comme 4. La principale chose que vous devez faire, c'est assez évident. Cliquez et, ou peut-être celui-ci évidemment, la couleur le fait se démarquer tellement parce que tout le reste est si facile sur l'œil. En descendant un peu, on voit la même chose qu'avec la Révolution française. Cela rend le rectangle blanc look fantastique. J' adore ça. Et l'ombre douce ici est excellente aussi. Cela fait ressortir cette zone. Bien sûr qu'ils illustrations, je vais aussi bien, mais ce n'est pas quelque chose que j'ai l'intention d'utiliser. Enfin, à la fin de la conception, le pied de page est blanc pur. Les polices sont belles et petites. Les titres de montré dans cette belle couleur. C' est élégant, c'est haut de gamme, c'est féminin. C' est magnifique. Maintenant, ces cinq minutes pour vous présenter. Mais j'ai passé au moins une heure à chercher ces sites. Ne vous précipitez pas. Vous devez trouver ce moins deux sites Web pour l'inspiration, mais pas plus de quatre ou cinq. Il en était de même de la conclusion ici. Eh bien, je sais que je vais utiliser beaucoup de blanc, une belle couleur rose pour l'arrière-plan, quelque chose de très doux, une police de fantaisie, mais dans une dose minimale, pas trop de ça. De belles photos de produits comme dans la Révolution Française. Et la couleur forte pour les boutons. Probablement noir pur pour le menu principal ou l'en-tête. Un simple blanc ou peut-être un simple noir plus loin, tous les casquettes avec les menus principaux ou les boutons. Ce sont toutes des idées. Je peux les faire tous, ou peut-être juste une poignée d'entre eux. Mais j'ai un bon point de départ. C' est ce que l'inspiration vous donne. Ça vous donne une direction. Nous ne voulons pas copier un dessin même si nous avons trouvé un site Web qui a vendu exactement le même produit, non, nous ne voulons pas voler un dessin. Mais en utilisant du noir pur, c'est très bien. Utilisation d'une couleur rose clair pour l'arrière-plan. Encore une fois, c'est très bien. Ce n'est pas voler. Vous devez vous assurer de faire une séparation claire entre l'inspiration dans le vol de quelque chose. Mais encore une fois, s'il vous plaît ne vous précipitez pas. Trouvez de l'inspiration avant de vous rendre au travail. 12. Configurer la partie la plus importante de la mise en page: Bonjour, bonjour. Commençons dans Adobe XD en créant un nouveau projet web, 1920 d'ici 1080. Sachez qu'il y aura des changements très souvent. Il est mis à jour toutes les deux semaines. Donc, si votre interface est un peu différente, s'il vous plaît ne vous inquiétez pas, vous pouvez toujours suivre. Maintenant, ce que je veux que vous fassiez est de cliquer sur cette icône en bas à gauche qui ouvre le panneau des calques. Si vous ne le trouvez pas, vous pouvez également utiliser le raccourci clavier Y. Donc, c'est Control Y, qui l'ouvre ou le ferme. Ok, ensuite, nous devons mettre en place ou zone active, la partie la plus importante de la mise en page. La zone active est l'endroit où nous devons ajouter tout notre contenu. Je vous recommande toujours d'utiliser 1200 pixels pour cela. Bien. L' outil rectangle, le second de la liste, raccourcis clavier sont ou comme dans le rectangle, cliquez et faites glisser n'importe quelle forme sur le côté droit. Ce panneau de propriétés nous dira tout ce dont nous avons besoin sur n'importe quelle couche sélectionnée. Donc, parce que le rectangle est actuellement sélectionné, nous avons toutes sortes d'informations sur sa largeur, hauteur, sa couleur, et ainsi de suite. Tout dans cette partie de l'écran, nous le voulons 1200 pixels de large. S' il vous plaît cliquer ici w pour la largeur et tapez ce nombre. La hauteur n'a vraiment pas beaucoup d'importance parce que nous allons la changer plus tard. Suivant change de couleur en cliquant ici à côté de remplir. En ce moment, c'est blanc, donc c'est un peu difficile à voir. Mon conseil est que vous choisissez n'importe quelle nuance de gris et lorsque vous êtes heureux, appuyez simplement sur la touche Échap pour fermer ce panneau. Ok, encore une chose avec ce rectangle. S' il vous plaît le centrer horizontalement. Ceci est fait en utilisant cette icône ici. Et je pense que l'icône elle-même raconte très bien l'histoire. Donc, si vous voulez déplacer la forme en haut de l'écran, nous l'utiliserons. Des trucs gris. Si on veut l'aligner à gauche, c'est celui-là. Mon conseil, n'hésitez pas à jouer avec eux. Ils sont faciles à comprendre une fois que vous les avez testés. Ok, je vais le centrer à nouveau pour qu'on puisse installer notre zone active. Maintenant s'il vous plaît cliquez ici et obtenez l'outil Sélectionner ou l'outil Déplacer si vous venez de Photoshop est le premier de la liste, la touche de raccourci VI. Ok. Maintenant, s'il vous plaît déplacer sur le bord de la toile et vous devriez voir ce symbole. S' il vous plaît jeter un oeil au curseur, voir les changements importants. Maintenant, cliquez et faites glisser. C' est ce qu'on appelle le guide, cette ligne verticale. Ceci est un guide et cela nous aidera à tout positionner correctement. Faites-la glisser pour qu'elle touche le bord gauche de cette forme , puis faites-en glisser une autre depuis le côté pour le bord droit. Maintenant, il peut y avoir une situation où vous ne pourrez pas le faire. Laissez-moi vous montrer cette situation. Je désactive mes guides pour vous montrer comment vous pouvez le réparer. Donc maintenant, rien ne se passe quand je passe sur cette partie, pas vrai ? Si c'est le cas sur votre alors s'il vous plaît aller dans le menu supérieur pour voir. À partir de là, accédez à Guides, puis choisissez Afficher tous les guides. Maintenant, lorsque vous vous déplacez vers le bord, vous êtes la courbe de sorte que le tir change et vous pouvez suivre le long. Ok, revenons-y. C' est notre zone active et c'est la chose la plus importante dans cette mise en page. Et voici pourquoi. Tous les sites Web ont une certaine zone active où tout le contenu est placé. Par exemple, voici le New York Times. Vous pouvez voir une ligne très bien définie de chaque côté. Et jetons un coup d'oeil à un autre, cnn.com, juste un exemple aléatoire. Encore une fois, vous trouverez la même chose. Il y a une ligne verticale claire de chaque côté. Pour être juste, dans ces deux cas, la zone active est plus large que 1200 pixels. Et c'est surtout parce que ces sites contiennent beaucoup d'informations. Mais mon conseil, je vous recommande fortement d'utiliser seulement 1200 pixels. Et c'est parce que la deuxième résolution d'écran la plus utilisée est 1366 par 768. Et cela signifie simplement que les personnes sur des ordinateurs portables qui utilisent cette résolution inférieure peuvent voir tout le contenu sans aucun problème. Si vous utilisez 1200 sur le web, vous trouverez des sites qui sont très larges, même 1600 pixels de large, peut-être même plus, ou le très étroit, comme 960. Mais encore une fois, mon conseil est que vous utilisez toujours 12,8 pixels. Qu' est-ce que la zone active et 1924, la largeur totale de la toile. Et avec ça, continuons. 13. Créer le bar supérieur: Bonjour et bienvenue. La barre supérieure est la partie supérieure du design qui se trouve juste au-dessus du menu principal et du logo. Il ne se trouve pas sur tous les sites Web, mais c'est un excellent moyen de montrer un numéro de téléphone, quelques icônes de médias sociaux, une adresse ou l'horaire de localisation. Avant de travailler, s'il vous plaît, faites-le ça. Tout d'abord, regardez la vidéo sans travailler le long. Il suffit de regarder et de voir ce qui se passe. Lorsque vous arrivez à la fin de la vidéo, rembobinez dès le début, ouvrez Adobe XD et travaillez avec moi en faisant une pause aussi souvent que nécessaire. C' est la meilleure façon de profiter du cours et d'en tirer le meilleur parti. Encore une fois, s'il vous plaît regarder la vidéo 2 fois et travailler avec moi sur votre deuxième visionnage. Merci beaucoup. Commençons donc par augmenter la largeur de ce rectangle à 1920 et le centrer. Rappelez-vous, nous devons rester dans ces deux guides, ces deux lignes verticales. Mais cela s'applique au contenu réel avec ne pas placer quelque chose d'important en dehors de ces guides. Donc, il est normal d'avoir un rectangle si large. Ensuite, je vais faire un peu de copier-coller, donnant du contenu de l'ancien site Web. Vous pouvez utiliser la traduction automatique de Google pour mieux comprendre le contenu. Il suffit de faire une recherche rapide sur Google ou d'utiliser le texte que vous voulez. Mon conseil est que vous utilisiez trois couches de textes différentes. Donc c'est assez important, trois différents. Maintenant, nous savons que nous voulons utiliser un menu noir pur similaire à ces sites de mode haut de gamme. Mais la question est, utilisons-nous ce noir avec la barre supérieure ou le menu principal qui va être placé sous cet élément. Pour vous aider à en décider, nous devons définir notre taille. Les barres supérieures sont généralement très petites, n'importe où de 20 pixels à environ 50. Alors faisons ça. Veuillez sélectionner le rectangle et changer sa hauteur à 40. L' étape suivante consiste à le rendre noir pur et à désactiver sa bordure grise. Pour ce faire, décochez cette case. Ok, des trucs géniaux pour le calque de texte. Faites-les au moins blanc pur. Le bon moment avec ça. Tu n'as pas à te précipiter. Quand c'est fait. Veuillez sélectionner les quatre éléments en faisant glisser la grande boîte comme celle-ci. Assurez-vous que le premier outil sélectionné dans le panneau Calques vous indiquera si vous les avez tous obtenus. Ok, enfin centré les verticalement en utilisant ce bouton, aligner le milieu ag verticalement. J' ai adoré le raccourci clavier, il est de les déplacer, mais pour l'instant, je vais utiliser cette icône. Ok, nous avons fait un progrès décent, mais je veux que vous ajoutiez des icônes pour chaque élément. Trouver de grandes icônes sur le web est en fait un peu difficile pour deux raisons. Numéro 1, les meilleures sortes d'icônes n'est pas gratuit. Et c'est plat icon.com et cela nécessite un abonnement. Ce n'est pas si cher, mais ce n'est pas qu'elle soit là. Je suis désolé de vous dire qu'il n'y a pas de site web similaire totalement gratuit. C' est donc une partie du problème. Le deuxième problème est que vous devez être très patient lors de la sélection des icônes. Tout d'abord, vous ne devriez jamais mélanger des icônes de différents ensembles avec des styles différents. Mon conseil est que vous vous concentrez ici sur le côté gauche et choisissez des packs dans cette liste déroulante. Maintenant, recherchez les médias sociaux et vous verrez des tas de packs dans toutes sortes de styles. Mais s'il vous plaît sachez que certains ont seulement peut-être 16 icônes sont ceux peuvent avoir 48. Et c'est le problème parce que si vous commencez à combiner une icône de ce dos avec une autre de ce sac, va avoir l'air vraiment mauvais, va être horrible. Encore une fois, s'il vous plaît, ne mélangez pas les icônes de différents ensembles lorsque vous aimez un pack, mais il n'a pas toutes les icônes dont vous avez besoin. Eh bien, vous devez juste continuer à chercher un autre pack qui a toutes vos icônes. Dans ce cas, je ne veux pas de couleurs parce que le blanc aura l'air plus élégant et raffiné. Je vais utiliser ce filtre du côté gauche pour chercher le remplissage noir comme on. Et voici le dos que j'ai sélectionné. Après avoir cherché pendant un certain temps, je vais télécharger trois icônes en tant que SVG pendant que je travaille en arrière-plan. Laissez-moi vous expliquer ce que cela signifie. Garnissage noir. Donc, le noir fait référence au fait qu'il n'y a pas de couleur dans l'icône et que vous pouvez la changer vous-même dans Adobe XD pour n'importe quelle couleur. Donc il n'a pas besoin de rester noir. Cela signifie simplement qu'il n'a pas de couleur appliquée à elle. Rempli signifie qu'il est complètement solide. Et c'est parce qu'il existe un autre style appelé contour, où les icônes sont faites à partir d'un trait ou de la bordure avec ce que vous voulez l'appeler. Ceux-ci ont tendance à paraître un peu mieux, mais à la très petite taille, ils ont l'air floue. Donc, mon conseil est que vous n'utilisez jamais d'icônes de contour pour les très petites tailles, c'est-à-dire sous les Pexels. Ok, maintenant j'ai toutes les icônes téléchargées et ils ont ensuite ce format spécial appelé SVG. Svg signifie Scalable Vector Format. Comme VJ est beaucoup mieux que PNG parce que les icônes auront fière allure peu importe comment vous les redimensionnez. Vous pouvez les rendre aussi gros que vous voulez et ils seront toujours un grand. Un autre avantage que VJ vous permet de changer la couleur comme ça, voir à quel point c'est facile. C' est pourquoi vous devez toujours utiliser les icônes SVG dans Adobe XD. Les encodeurs l'aimaient aussi, donc tout est bon. Ok, lorsque vous redimensionnez les icônes, veuillez faire ce qui suit. Numéro 1, sélectionnez les trois d'entre eux parce que nous voulons qu'ils aient la même taille. Numéro deux, veuillez désactiver cette fonctionnalité appelée Responsive Resize. Alors éteignez-le. Enfin trois, s'il vous plaît cliquer ici sur cette icône de verrouillage, car la barre supérieure est si petite, seulement 40 pixels. Je vais faire ces icônes 26 d'ici 2006. C' est petit. Oui, mais ces icônes sont très connues, donc les gens comprendront sûrement ce qu'elles sont. S' il vous plaît faites-les blanc et déplacez-les au-dessus de la barre supérieure. Mon conseil, c'est que tu bouges tous les trois en même temps parce que c'est plus facile de travailler ainsi. Ok, Enfin, nous devons travailler avec précision. Maintenez la touche de contrôle enfoncée, utilisez le défilement de la souris et zoomez. Cliquez sur l'icône WhatsApp pour le sélectionner et faites-le glisser près du guide de gauche. C' est comme ça que vous le prononcez ? WhatsApp. WhatsApp. Quoi qu'il en soit, assurez-vous qu'il le touche. Vous aurez l'impression qu'un aimant vous attire. C' est tout à fait normal. Vous le sentirez, comment ça vous pousse là-bas. OK, ensuite, cliquez sur le calque de texte et déplacez-le à 10 pixels de l'icône. Je vais zoomer de près pour que vous puissiez voir la mesure apparaître. C' est ce grand numéro ici. On veut dix pixels. Ok, enfin, faites glisser une boîte et sélectionnez les trois éléments. Le rectangle, l'icône et le calque de texte. Maintenant centré les verticalement. C' est ce que nous devons faire deux fois de plus. Je vais maintenir Contrôle et zoomer un peu à travers le défilement de ma souris. Assurez-vous que Instagram touche le bon côté. Vous pouvez toujours utiliser vos touches fléchées sur votre clavier pour déplacer n'importe quel calque d'un pixel vous assurera évidemment qu'il est sélectionné. Puis les pixels ici aussi. Ok, une dernière fois avec Facebook. Et puis nous avons encore une chose sur le côté, l'espace entre Facebook et Instagram. Maintenant, je pense que la meilleure façon de le faire est de 40 pixels. Mais voici la partie importante. Cliquez sur le calque de texte pour le sélectionner. Assez simple, non ? Pour sélectionner également l'icône. S' il vous plaît maintenez Maj, cliquez dessus, et nous y allons. Vous les avez tous les deux sélectionnés en même temps. Laissez 40 pixels entre eux. Et avant que nous finissions, assurez-vous de les sélectionner tous, absolument tous, et de les centrer verticalement. Ok, c'est une étape très importante, alors s'il vous plaît ne sautez pas ça. Lorsque vous avez terminé, veuillez utiliser le contrôle 1 ou simplement zoomer manuellement et vérifier la barre supérieure. Bon travail. Je suis très content de ça. Prenons une petite pause et nous continuerons dans une seconde. 14. Comment choisir les polices de caractères pour votre projet: Bonjour et bienvenue. La question est, comment pouvons-nous choisir des polices géniales pour nos designs ? Nous avons essentiellement deux choix principaux, à savoir Google Fonts ou Adobe polices. La plupart des gens préfèrent Google Fonts parce qu'il est très facile de le faire fonctionner. Je vais rapidement vous montrer comment vous pouvez installer une famille de polices. Cliquez dessus, puis vous aurez ce bouton de téléchargement juste ici qui vous obtiendra une archive zip qui doit être extrait. Vous trouverez le dossier qui contient un ou plusieurs fichiers en fonction du nombre de styles de la police. En passant, au cas où vous n'avez qu'un style, vous devriez probablement l'éviter. Mon conseil est que vous téléchargez des polices qui ont au moins trois styles différents. Et par styles, je veux dire juste léger, régulier, audacieux, italique et ainsi de suite. Ok, une fois que l'archive est extraite, il suffit de copier ces fichiers dans les polices C Windows avec la seconde, puis vous pouvez les utiliser dans Adobe XD. Sur un Mac, vous pouvez double-cliquer sur les fichiers et la police d'installation de tête. Une fois cela fait, rappelez-vous simplement son nom afin que vous puissiez le rechercher dans Adobe XD. Donc, bref, c'est les polices Google, mais il y a aussi des polices Adobe. Choisissez Parcourir les polices, et vous obtiendrez une mise en page très similaire à ce que nous venons de voir sur Google. Vous avez toutes sortes de filtres. Vous pouvez changer les balises d'exemple, mais aussi sa taille, son tableau gracieux ici, assurez-vous juste que vous prenez vraiment le temps de l'explorer. Maintenant, la plus grande différence est qu'Adobe Fonts nécessite un abonnement Adobe valide. J' ai un abonnement Creative Cloud, donc j'ai accès à toutes ces polices. Quand je veux en utiliser un, je clique simplement dessus et à l'intérieur de sa page, je vais nous donner qui activent les polices. Vous pouvez potentiellement faire défiler vers le bas et activer certains styles. Mais la plupart du temps, je les veux tous. Mais Google Fonts et les polices Adobe. Ce n'est pas vraiment la partie importante, les enfants, que vous devez considérer lors du choix d'une police pour votre prochain projet. Retournons à Google une seconde. Donc leur liste est triée par les plus populaires, les polices les plus populaires en ce moment, roboto est toujours au sommet, mais est-ce un bon choix pour votre projet ? Et je vais dire non. Mais qu'en est-il de Open Sans ? Encore une fois, je ne pense pas si tard. Oh, non. Alors pourquoi c'est ça ? Et la réponse est parce qu'ils sont à blâmer les deux simples. Ces polices de caractères sont très populaires car elles sont polyvalentes. Ils peuvent être utilisés dans n'importe quel projet, quel que soit le sujet. Ils sont comme un T-shirt blanc, simple, basique, rien de spécial. J' aime le regarder de cette façon. Ces choix sont très similaires à Arial. Alors louche, Roboto, Open Sans, ils sont très semblables à Platon. Comme vous le savez probablement. Ariel est, encore une fois, simple, standard et ennuyeux. La plupart des non-concepteurs ne seront pas en mesure de faire la différence entre l'antenne et le Leto ou l'Open Sans. Encore une fois, je ne parle pas de designers, bien sûr, je parle du client ou des visiteurs du site Web. Donc, mon conseil est que vous restez loin de ces types de polices qui sont ennuyeuses et qu'elles n'ont aucune personnalité. D' un autre côté, ne cherchez pas non plus de polices extrêmes. Par exemple, celui-ci est un cas clair. Il a beaucoup trop de personnalité. Django, tu ne veux pas que ça soit bien. Leto est un T-shirt uni, alors Django est un t-shirt néon, non ? Tout le monde le saura, mais pas beaucoup de gens apprécient vraiment les T-shirts au néon, pas vrai ? Donc, votre travail en tant que concepteur est de trouver le médium heureux, une police qui s'adapte très bien, qui a au moins trois styles. C' est équilibré. Ce qui veut dire que ce n'est pas ennuyeux, mais ce n'est pas trop extrême non plus. Et évidemment, cela prend du temps. Trouver la bonne police prend du temps. Ne vous précipitez pas. Donnez-vous assez de temps pour jouer avec différents choix. Maintenant, de mon côté, personnellement, Montserrat était un de mes rouges payants. Mais c'est aussi un lien très large. Ça prend beaucoup de place. n'est donc pas pour tous les projets. Oswald est trop masculin, mais c'est aussi un peu condensé. Les lettres sont poussées ensemble, donc, il est préférable d'utiliser dans les titres, mais rien de plus. Encore une fois, je vous conseille de commencer par une police de caractères, tout ce que vous voulez, puis après avoir terminé la page d'accueil, vous pouvez essayer les mots. Mais dans l'ensemble, ne mettez pas beaucoup de pression sur vous. Vous n'avez pas à faire le choix parfait dès le début. Tu peux toujours changer d'avis. En plus, je vais te raconter mon secret en tant que designer web. J' adore certaines polices et je les utilise encore et encore pour des tas de projets. J' utilisais beaucoup Montserrat, mais après le moment, je suis passé à un autre appelé sable mouvant. Récemment, je suis tombé amoureux de Poppins, et c'est ce que j'utilise pour presque tous les projets. Maintenant, juste pour être clair, évidemment, vous devriez choisir votre police en fonction des besoins du projet, mais ne pensez pas que vous avez besoin de trouver quelque chose de spécial pour chaque travail. Assurez-vous que la face de type a du sens. Encore une fois, si c'est un site convivial qui est fait pour les enfants, vous avez besoin cependant, par exemple, peut être un excellent choix, mais un Roboto Condensed ne sera pas. Et c'est parce que c'est beaucoup trop grave. S' il s'agit d'un site de nouvelles, vous ne pouvez pas utiliser Django parce que c'est trop drôle et que les sites de nouvelles devraient être sobres et professionnels. Donc, le plat à emporter est que vous devez essayer différentes polices de caractères après les pages d'accueil faites et choisir celui qui semble le mieux. Pour l'instant, pour ce projet, je suis confiant que je vais aller avec Poppins pour la plupart des calques de texte. Encore une fois, pourquoi Poppins ? Parce que c'est très similaire à ce que ces sites de passion utilisent. Et je pense que ça correspond à la description. C' est un peu masculin, surtout dans toutes les casquettes, mais on peut l'équilibrer avec des couleurs douces et des formes arrondies. Et parce qu'ils sont le site Eclair avait une police de fantaisie pour le titre. J' ai décidé de chercher celui sur Adobe Fonts. Et après un certain temps, c'est celui que j'ai choisi est appelé EDS marché principal script. Un peu bizarre. Et c'est charmant parce qu'il est élégant, mais vous pouvez toujours le lire. C' est surdimensionné, mais ce n'est pas prétentieux. Donc, dans l'ensemble, je pense que c'est un bon pari. Faisons une pause rapide. Mais rappelez-vous, lorsque vous faites votre propre version, essayez vos propres polices de caractères. Pour l'instant, utilisez simplement ceux que j'ai choisis pour la réplique parfaite. 15. Comment choisir de belles couleurs: Hé là, nous allons parler de la couleur et comment vous devriez travailler avec elle un peu plus tard dans le cours, dans la partie des principes. Mais je veux vous donner quelques conseils dès le début en utilisant notre projet comme guide. Nous savons que nous voulons un peu de noir dans notre design, donc il aura l'air élégant que haut de gamme, comme ces sites de mode, n'est-ce pas ? Mais qu'y a-t-il d'autre ? Eh bien, nous devons considérer les couleurs des marques d'abord et avant tout, c'est absolument essentiel. Nous pouvons voir que dans toutes les étiquettes et sur le site web existant, nous pouvons trouver de l'orange, du bleu foncé et un peu de jaune à très petites doses. A cause de ça, on en utilisera sûrement quelques-uns, non ? Nous ne pouvons pas utiliser le violet ou le vert parce qu'il ne correspondrait pas au logo, aux étiquettes et à tous les autres motifs. Pensez-y. La société a probablement des bannières, des dépliants, des cartes de visite, des brochures et autres. Tu dois garder ça à l'esprit. Revenir soumettre ces boutons rouges, regardez si bien avec tout ce blanc. Donc mon idée est d'utiliser la même chose, mais avec de l'orange. Et pour rendre le design un peu plus féminin, je dis que nous devrions utiliser un rose très clair. On peut copier ce truc à partir du zip. Et je pense que c'est très bien tant qu'on ne copie rien d'autre, surtout un élément majeur. Maintenant, pour obtenir un code couleur, il y a deux façons de le faire. Vous pouvez prendre un écran d'impression et le faire glisser dans Adobe XD. Une fois que vous avez le fichier là, vous pouvez utiliser l'outil pipette seul. Donc, le compte-gouttes est très standard. C' est une façon de travailler, mais je préfère l'autre, ce qui est un peu plus compliqué, mais je pense que ça a un grand avantage. Pour faire l'élément inspecter. On peut obtenir le code de couleur exact. Alors laissez-moi aller à mon navigateur et je vais faire un clic droit au-dessus du fond rose. Cette partie va apparaître et nous devrions voir la couleur de fond ici. Et en effet ici c'est son Fc, F8, F7. Pas besoin de s'en souvenir parce que nous pouvons simplement copier coller ça. Voilà ce que je veux que tu fasses. Veuillez effectuer un zoom arrière, maintenez la touche Ctrl enfoncée et utilisez le défilement de votre souris. Ou comme alternative, vous pouvez utiliser l'outil de zoom juste ici. Par défaut, il est défini pour zoomer et vous pouvez indiquer ours le cas en regardant ce symbole plus. Mais si vous maintenez la touche Alt ou Option enfoncée sur le Mac, vous allez maintenant effectuer un zoom arrière. Écoutez, ce qui compte le plus, c'est que vous reveniez à l'outil Sélectionner. C' est l'une des choses les plus importantes d'Adobe XD. Chaque fois que vous utilisez, revenez à l'outil Sélectionner, n'est-ce pas ? Donc, cliquez sur le nom des tableaux de bord, qui est probablement appelé quelque chose comme web 1920 tiret un. Et à partir de là, vous verrez que vous avez une option de remplissage sur le côté droit. Cliquez dessus, puis vous pouvez coller le code couleur. Encore une fois, c'est FC, F8, F7. Mais cela ne fonctionnera que si vous avez sélectionné le tableau d'art. Si je désélectionne, notez qu'il n'y a pas d'option pour ajouter une couleur. Ok, alors faisons un résumé rapide. Nous allons utiliser beaucoup de blanc parce que c'est ce que les gens riches ont l'habitude de faire, et cela rendra le site plus agréable. Nous allons utiliser un peu de noir pour ce sentiment luxueux, pour ce sentiment haut de gamme. Orange sera la couleur d'action, et nous l'utiliserons dans de petits éléments comme les boutons et les icônes. Un rose très clair pour le fond principal, sorte qu'il aura l'air féminin. Et si nécessaire, peut-être une nuance de bleu foncé. Avant de terminer, je veux vous montrer une excellente façon de travailler dans Adobe XD. Jusqu' à présent, nous avons utilisé le panneau des calques sur le côté gauche, mais la plupart du temps, nous allons réellement utiliser le panneau des actifs. Ceci est disponible ici en bas à gauche de l'écran, juste au-dessus du panneau des calques. Lorsque vous cliquez dessus, non seulement il est bleu, mais vous verrez également la mention Ressources de document en haut. Donc c'est comme ça que tu le sais. Ceci est actif. Les actifs signifient simplement des ressources. Voilà ce que je veux que tu fasses. Cliquez sur n'importe quel calque de texte. Je veux que nous changeons cette couleur à cette orange du site existant. Le code couleur est FF Trois voir 0000. Et je le connais par cœur parce que c'est ma société et j'ai conçu beaucoup de choses avec ce code couleur. Appuyez sur Entrée ou Échapper pour le fermer. Vient ensuite la magie. On a déjà trois couleurs ici, noir, orange et rose, non ? Sauvegardons les en cliquant ici sur ce symbole plus à côté des couleurs. Nous pourrions le faire un à la fois, sélectionner le calque de texte, cliquer sur le symbole plus, et là vous allez. Mais je veux faire toutes les couleurs en un seul clic. C' est pourquoi je vais utiliser Undo control Z. OK, alors je vais sélectionner le plan de travail en cliquant ici. Maintenant, utilisez le symbole plus et nous obtenons quatre couleurs. Blanc pur, cette orange forte, noir pur, et cette banque de pêche. Magnifique. Maintenant, pourquoi est-ce utile cependant ? Parce que nous pouvons sélectionner le calque de texte, cliquez sur blanc, et cela va changer rapidement. Plus besoin d'aller à l'option de remplissage en bas à droite. Donc, c'est fondamentalement beaucoup plus rapide et cela fonctionne avec plusieurs couches. Donc ça va nous rendre la vie beaucoup plus facile. Essayez-le et voyez comment vous faites. Mais rappelez-vous, vous pouvez également ajouter des couleurs une par une ou toutes à la fois en sélectionnant simplement le tableau d'art. Et si vous voulez supprimer l'un d'entre eux, cliquez avec le bouton droit de la souris et vous aurez cette option. Ok, essayez-le alors. Je te vois dans une seconde. 16. Organiser le bar supérieur: Salut, bienvenue, un bref résumé. Nous avons donc décidé de notre schéma de couleurs, la bonne chose pour le fond, beaucoup de blanc, un peu d'urine noire là-bas, et orange pour nos boutons aussi. Les polices de caractères, Poppins seront le choix principal plus un script fantaisie pour le titre principal. Pour terminer l'élément précédent, veuillez sélectionner tous les calques de texte. Ceci est fait en maintenant le décalage. Utilisez le champ du panneau Propriétés et commencez à taper Poppins. Vous n'avez pas besoin d'écrire le tout car XD vous donnera des suggestions au fur et à mesure que vous tapez. Gardez-le régulier 12 pixels, ce qui est un peu petit, je sais. Et si ce modèle est vous, 13 fonctionnera aussi. Ensuite, je vais tout sélectionner et je vais les centrer une fois de plus. Et je ferai n'importe quel point union juste au cas où il y aurait quelque chose que je dois faire ici. Rien de majeur, juste s'assurer que tout est en bonne place. D' accord ? Lorsque tout est fait, sélectionnez toutes les couches et utilisez le contrôle G pour les regrouper. Donc, c'est Control G. Revenez au panneau des calques pour voir ce dossier. Juste au cas où tu n'aimes pas les raccourcis clavier. Laissez-moi faire un clic droit et dégrouper. Voici donc à quoi votre panneau de calques devrait ressembler. Pour organiser ces couches dans un dossier. Sélectionnez tous ces éléments, puis cliquez avec le bouton droit de la souris dans cette liste, choisissez groupe. Et c'est ça. Sachez que, parce que vous créez un groupe, la méthode de sélection est désormais différente. Donc, si vous voulez sélectionner l'une de ces couches de texte, vous pouvez simplement cliquer dessus. Non, ça ne marchera pas parce que tu vas sélectionner le dossier. Ce que vous devez faire, c'est ce que je vous ai montré au début du cours. Vous devez contrôler le clic. Et maintenant, vous avez cette couche sélectionnée. Donc encore une fois, quand quelque chose est groupé et que vous voulez sélectionner cela, mon conseil est que vous contrôlez clic. Et si vous contrôlez cliquez sur l'icône par exemple, et vous choisissez juste une petite partie de celui-ci. Par exemple, sur l'icône Instagram, vous pouvez voir que j'ai sélectionné seulement la partie centrale de celui-ci ou une petite partie de celui-ci, juste appuyer sur Escape. Et maintenant tu peux déplacer tout le Dang. Tant que tu te souviendras de trois choses, tu seras super. Donc, numéro 1, contrôle glisser pour sélectionner. Numéro 2, s'était échappé pour monter un niveau. Et nous utilisons Control Z lorsque vous faites une erreur. Et maintenant la barre supérieure est tout mis en place et nous pouvons continuer avec la tête là, qui est la zone qui contient le logo, le menu principal et ainsi de suite. Je te vois dans une seconde. 17. Créer la structure de l'en-tête: Travaillons sur l'en-tête. Commencez par n'importe quel rectangle aléatoire et ne vous inquiétez pas de la taille car nous allons utiliser le panneau des propriétés. Maintenant pour la largeur. Nous savons que ce devrait être 1920 parce que les toiles avec maintenant, pourriez-vous essayer 1200 ? Bien sûr. Mais 99 pour cent du temps, ça ne sera pas aussi bon. Plus large est généralement mieux dans la conception web. Pour la hauteur, nous savons que la barre supérieure mesure 40 pixels. Les en-têtes ont généralement entre 50 et 150 pixels de hauteur, selon la quantité d'informations que vous souhaitez inclure. Ici, nous n'avons pas beaucoup, donc nous pouvons nous en tenir à une valeur inférieure. Je suggère AD double la taille de la barre supérieure. En le doublant, il aura l'air un peu plus agréable. Ok, s'il vous plaît amenez-le à côté de l'en-tête et centrez-le horizontalement. Si vous ne l'avez pas encore fait, désactivez le trait et commençons à ajouter les éléments. Vous avez le logo attaché, en passant, il est dans un format PNG afin que vous puissiez le faire glisser dans. Et quand cela se produit, s'il vous plaît ne le laissez pas tomber au-dessus du rectangle blanc. Si vous faites ça, c'est ce qui va se passer et ce n'est évidemment pas correct. Alors faites-le glisser n'importe où ailleurs sur la toile. Comme alternative, vous avez aussi le vecteur, le fichier que vous devez ouvrir avec Control O. Cela aura l'air un peu mieux. Ce serait plus agréable, plus croustillant, moins floue. Mais évidemment, cela nécessitera un peu plus de travail. Donc, si c'est trop compliqué, il suffit d'utiliser le PNG lors du redimensionnement inactif pour maintenir la touche Maj ou mieux encore, avait l'icône de verrouillage du panneau Propriétés. En termes de taille, plus petit est généralement mieux. La plupart des débutants utilisent des tailles énormes parce qu'ils pensent que cela va améliorer la conception, que cela va le rendre meilleur, mais cela fait le contraire. Encore une fois, plus petit est mieux que le design web car il semble plus élégant que raffiné. Ici, une largeur d'environ 150 pixels devrait être correcte. Et les guides vont maintenant commencer à montrer cette valeur. Nous devons laisser la ligne cela bien sûr. Et nous devons centré verticalement à, avec angle direct. On va faire ça tout le temps. Alors s'il vous plaît essayez de vous habituer à ces outils. Ils sont absolument essentiels. Ok, Ensuite, nous devrons faire du travail manuel. Je vais copier coller le menu principal, mais sachez que lorsque vous les ajoutez dans XD, vous pouvez les obtenir dans une liste verticale de sortes. Ce n'est pas un problème. Il suffit d'utiliser le backspace, supprimer les touches pour les aligner rapidement. Mon conseil est de vous en tenir à un seul calque de texte 0. Et si vous utilisez Google Translate, veuillez résoudre tous les problèmes. Par exemple, au lieu de la maison comme un élément de menu principal, Google Translate m'a donné la maison. Assurez-vous donc de faire attention à ces types d'erreurs, même si l'anglais n'est pas votre langue maternelle, consultez d'autres sites Web et vous serez bien car encore une fois, la maison n'a aucun sens. Maintenant, la grande chose ici est d'essayer de travailler aussi vite que possible. Bien sûr, avec le temps, plus vous travaillez, plus vite vous deviendrez. Ok, c'est ça. Vous devriez vous retrouver avec un calque de texte comme celui-ci, mais la distance entre les éléments n'est pas correcte. Voilà ce que je vous suggère de faire. Effectuez un zoom avant si nécessaire, puis double-cliquez pour modifier le calque de texte. Entre les deux premiers éléments, appuyez plusieurs fois sur la touche de barre d'espace. Tu n'as pas à compter parce que voici ce qui va se passer ensuite. Sélectionnez l'espace vide que vous venez de placer et copiez-le avec Contrôle C. Maintenant, passez à l'espace suivant et collez-le avec Contrôle V. Répétez le processus jusqu'à ce que vous ayez terminé. C' est ainsi que j'aime configurer mes menus principaux dans Adobe XD, que vous ne savez jamais vraiment combien d'espaces vides à laisser jusqu'à ce que vous voyez votre premier essai ici. Eh bien, je ne suis pas vraiment content de ça, donc je pense que je vais ajouter deux espaces de plus pour chaque écart. Cette fois, je vais compter parce que je ne veux pas copier coller à nouveau, juste deux onglets pour chaque paire, et nous serons prêts à partir. Avant de faire une pause, voici un dernier tour. Disons que vous voulez compter le nombre d'espaces vides, non ? Juste pour vérifier, commencez par passer en mode édition. Voir le curseur. Ok, c'est juste ici à côté de l'E. Maintenant maintenez Maj et appuyez sur la touche fléchée droite et comptez chaque DAP. C' est 1, 2, 3, 4, 5, 6, 7, 8, 9, 10. Donc ça fait 10 espaces vides. C' est ce qui me semble bon dans ce cas. Appuyez sur Échap si vous ne l'avez pas déjà fait ou cliquez ailleurs pour quitter le mode Édition. Ok, deux autres articles ici, connectez-vous et inscrivez-vous. Ils doivent être placés sur le côté droit dans deux couches de texte distinctes. C' est parce qu'on devrait les traiter différemment. Plus sur ça en une seconde. Ok, ça termine cette conférence. Nous avons encore quelques choses à gérer, mais au moins nous avons nos éléments en place. Restez à l'écoute. 18. Fixer un style pour le header: Bonjour, bonjour. Commençons à styliser notre design, mais laissez-moi vous montrer une chose rapide. Dites que le menu n'est pas au-dessus du rectangle blanc comme nous l'avons ici. Dis que c'est beaucoup plus bas, non ? Vous savez, vous voulez utiliser la commande Alignement pour tout centrer. Mais voici ce qui va se passer. Le rectangle se déplacera également. C' est ce à quoi vous devez vous habituer. Le rectangle se déplace et il n'y a aucun moyen de contourner cela. Ce que vous devez faire, c'est le remettre en place. Et si vous voulez vous assurer que vous ne le déplacez pas vers les côtés par erreur, maintenez simplement la touche Maj enfoncée. Laisse-moi te le montrer encore. Sauver. Nous voulons déplacer l'objet enregistré plus vers la droite. D' accord. Si on ne fait pas attention, on pourrait le déplacer vers le haut ou vers le bas et ce n'est évidemment pas correct. Nous pourrions potentiellement zoomer et y prêter une attention particulière. Mais voici ce que je propose. Maintenez la touche Maj enfoncée. Remarquez comment il se déplace seulement horizontalement. Et c'est ainsi que vous pouvez travailler rapidement, mais avec précision. Ok, revenons-y. En termes de style, plupart des sites de mode utilisent toutes les majuscules pour le menu principal. Je suggère que nous fassions la même chose. Sélectionnez donc les trois calques de texte et utilisez cette option ici. Et voilà. Ensuite, nous voulons un peu de poids trop humide pour qu'il attire notre attention. Ce n'est pas vraiment normal, alors voici mon conseil. Rendons-le audacieux. Maintenant, ça a l'air beaucoup mieux, mais c'est un peu trop petit pour mes jours. Maintenant, c'est objectif, mais voici ce que je propose. Augmentons la taille à 13 pixels. Lorsque vous faites votre propre version, assurez-vous de changer la taille en fonction de l'apparence de la police. Vous devez choisir une autre police de caractères. Et c'est parce que dans certains cas, 13 pixels, il peut être vraiment petit. Dans d'autres cas, ils sont doyen peut être super gros, surtout quand vous activez toutes les majuscules. Donc, vous devez vraiment vous assurer que la taille est appropriée pour cette police spécifique. Ensuite, prenez l'outil rectangle et dessinez une forme aléatoire au-dessus du calque de registre. Ils peuvent regarder le panneau Calques et vous verrez que le rectangle sera probablement en haut du panneau. Ça veut dire que ça va couvrir le texte. On pourrait le traîner comme ça. Mais laissez-moi annuler le contrôle Z pour vous montrer comment je travaille réellement. J' aime maintenir la touche Ctrl enfoncée et utiliser les touches de support de mon clavier. La gauche déplace le calque vers le bas. Juste comme ça. Comme vous pouvez le voir, ça continue de baisser. Et la clé du support carré droit le déplace vers le haut. Maintenant, je sais que vous n'aimez peut-être pas les raccourcis clavier, mais la plupart du temps, nous aurons le panneau des actifs sur la gauche. Et à ce stade, Adobe XD ne vous permet pas d'avoir les deux en même temps. Je sais que ce n'est pas génial, mais peut-être qu'à l'avenir on aura les deux panneaux en même temps. D' accord. Retour à l'onglet Ressources. Je vais cliquer sur la couleur orange et je vais m'assurer que la forme est sous le texte. Ok, nous devons désactiver la bordure et une fois que c'est fait, s'il vous plaît agrandir la couche de texte. C' est pourquoi j'aime l'habitude dans mon panneau d'actifs. C' est en fait très utile avec ne pas avoir de bords carrés. Nous voulons le design féminin. Alors faisons cela pour la largeur et la hauteur aller avec une AD par 40, 180. Nous avons donc un peu d'espace vide de chaque côté. Et c'est exactement ce que vous devriez faire dans chaque cas. Et 40, parce que le fardeau attire votre attention telle qu'elle est. On n'a pas besoin de le rendre trop grand. Maintenant encore, ensuite, arrondissez ses coins en utilisant ce champ dans le panneau des propriétés, à droite, 20. Et ça va le rendre agréable et arrondi. OK, s'il vous plaît sélectionner le texte avec le mouton et les Etats-Unis, les commandes d'alignement. Lorsque vous êtes prêt, déplacez-le sur le côté droit. Encore une fois, les commandes d'alignement sont incroyablement utiles, alors veuillez prendre l'habitude de les utiliser. Ok, quand vous le déplacez sur le côté droit, vous devriez sentir qu'il s'accroche au guide. Veuillez ne pas laisser un ou deux pixels vides. Ce serait une vraie honte. Enfin, sélectionnez tous les éléments de l'en-tête et utilisez la commande align middle. Ok, super mot. Jusqu' à présent. Avec le temps, vous commencerez à utiliser de plus en plus ces techniques. Par exemple, repositionnez le calque de texte de connexion en maintenant la touche Maj enfoncée à 30 pixels du bouton d'enregistrement. Donc c'est 30 pixels. Dans cet endroit, Zyban avait la belle icône qui montrait l'importance de l'élément. Maintenant, j'ai mis l'enregistrement en pause et j'en ai trouvé un sur flat icon.com. C' est là. Comme toujours, faites des choses lorsque vous redimensionnez, désactivez ce commutateur, puis cliquez sur le verrou. En ce qui concerne la taille, les icônes d'en haut, nous sommes 26 pixels. Donc, utilisons la même valeur ici. La hauteur n'est pas parfaite, mais c'est très bien. Si nous avons 30 pixels entre ces deux auront besoin, alors les pixels entre l'icône et le calque de texte. Pourquoi dix pixels ? Parce qu'on doit montrer qu'ils vont ensemble. C' est une chose assez subtile, mais c'est important. D' accord ? Maintenant, pour la distance entre le menu principal et la connexion, 30 fois 2 est 60. Alors allons-y avec ça. N' ayez pas peur d'appuyer sur les touches fléchées de votre clavier une fois que vous voyez la valeur actuelle, surtout lorsque vous voulez fusionner, unisez-les par 12 pixels. Et avec ça, faisons une pause rapide. 19. Attention aux détails de l'entête: Bienvenue dans notre design. Vous pourriez penser que tout cela est réglé, mais je veux aborder deux choses qui sont assez subtiles mais importantes. Tout d'abord, la nuance de fond de rose, c'est sympa, non ? Mais fournit-il assez de contraste ? Autrement dit, est-ce que ces rectangles blancs se distinguent assez ? Je pense que ce n'est pas le cas. Donc, nous devons faire quelque chose. Dans la carrière de n'importe quel designer, vous êtes obligé d'avoir ce problème. Et fondamentalement, vous avez trois options. Numéro un, vous pouvez choisir une nuance de rose plus foncée. Le problème avec cela est que ce n'est plus une couleur de fond douce. Ça commence à attirer votre attention et ce n'est pas juste. Ça s'appelle le fond pour une raison. Si vous regardez le design existant, vous verrez une nuance de gris qui est un peu trop forte et c'est pourquoi les champs de conception froids. Donc, c'est l'option numéro 1, augmentez le contraste en changeant la couleur. Le deuxième choix consiste à ajouter l'ombre portée. Cette option est activée à partir de cet emplacement dans le panneau des propriétés. Lorsque vous ajoutez l'ombre, assurez-vous qu'elle est vraiment douce. Vous pouvez ajuster l'opacité en cliquant ici. Essayez une valeur faible, comme 10 pour cent, mais désélectionnez afin que vous puissiez vraiment voir à quoi cela ressemble. Maintenant, la question est, c'est sympa ? La chose est, si nous utilisons une ombre ici, devra l'utiliser partout sur chaque rectangle blanc. C' est pour ça que nous y passons tant de temps. Ce n'est pas une décision unique pour le seul point. En fait, il définira le style pour l'ensemble du design. Alors pense vraiment à ça. Enfin, voici le troisième et dernier choix. Abandonner le. Dans ce cas, j'aime échantillonner la couleur de fond , puis chercher la teinte légèrement plus foncée. Considérant que nous voulons le design agréable et élégant. La première option, un fond plus sombre. C' est par la fenêtre. On ne peut pas faire ça. C' est donc entre le numéro 2, une ombre, ce qui est le zip qu'il utilise, et le numéro trois, un trait. Je vais aller avec la dernière option. Et après le, beaucoup de réglage fin, j'ai fini avec le code de couleur suivant. Il doit être très doux. C' est F5, facile, dB. C' est subtil, mais vous pouvez toujours voir est là. Veuillez l'ajouter au panneau Actifs en utilisant ce symbole plus. On aurait pu utiliser la nuance de gris. Mais pourquoi ne pas rester dans cette région rose est plus en phase avec les couleurs que nous utilisons déjà. Ok, c'était le premier article sur ma liste en termes d'attention aux détails. C' était un sujet important parce qu'il nous donnera une orientation, un style que nous pouvons suivre pour le reste du projet. La deuxième chose que je veux discuter est à peu près de la même chose. Nous devons parler du menu principal. Et il indique, comme vous le savez probablement, que la plupart des menus vous montrent où vous êtes. Dans ce cas, nous sommes sur la page d'accueil, mais parce que le menu est tout noir, ce n'est pas évident. Certains sites Web utilisent une couleur délavée, comme un gris clair pour montrer que vous êtes là. Et pendant que je suis un grand fan de ça dans ce cas, je pense que je vais aller avec l'orange. Cela a des implications majeures parce que la question suivante est, lorsque vous passez la souris sur l'élément de menu, quelle couleur sera-t-elle ? Encore orange, peut-être une autre couleur. Donc c'est quelque chose que nous devons décider. Nous n'avons pas à le faire maintenant, mais c'est quelque chose à garder à l'esprit en ce moment. Permettez-moi d'ajouter un rectangle sous l'élément d'accueil qui dit en outre que c'est là que nous sommes. Je pense que 90 pixels est assez large, donc il ne va pas dans l'élément de menu suivant. Hauteur, trois pixels, je pense que c'est très bien. Veuillez garder à l'esprit que pour les lignes, nous n'utilisons pas le champ de hauteur. Au lieu de cela, nous utilisons celui-ci ici un peu plus bas. Et c'est parce qu'il est aligné de sorte qu'il n'a pas de remplissage. Donc, si vous cliquez sur orange dans le panneau Actifs, rien ne va se passer. C' est intentionnel. C'est exact. Au lieu de cela, vous devez cliquer avec le bouton droit de la souris, puis choisir Appliquer la couleur de bordure. Maintenant, il y a la question, comment on envoie le rouge à la maison ? Considérant qu'il s'agit d'un seul calque de texte qui est vraiment large. Eh bien, voici le travail le plus facile. un zoom avant et ajoutez le rectangle qui est aussi large que ce mot. Ceci est évidemment centré. Maintenant, prenez l'outil de ligne et utilisez la commande Alignement. Il y a de bonnes chances qu'ils bougent tous les deux, mais il y a un autre problème, il suffit de le repositionner, et c'est ça. Ok, des trucs géniaux. Lorsque vous avez terminé, supprimez simplement le rectangle et je suis heureux avant de terminer cette leçon, je veux vous montrer un bug. Cela pourrait être corrigé dans la prochaine mise à jour d'Adobe XD, mais je pense que vous devriez savoir à ce sujet et que ce n'est pas de votre faute, vous ne faites rien de mal. Par exemple, sélectionnons le dernier mot de ce blog de calque. Dites que nous voulons le rendre orange, ok, pas un problème, nous allons cliquer ici et donc ce droit. Maintenant, regarde ce qui se passe. Peu importe si vous cliquez ailleurs ou si vous appuyez sur la touche Échap, rien ne se passe. Vous ne pouvez même pas zoomer ou zoomer. C' est comme si le programme se figeait. La seule façon de le corriger est de sélectionner un autre monde en cliquant ici. Maintenant, tout est de retour à la normale. C' est un bug étrange, mais je voulais que tu saches que ce n'est pas ta faute au cas où ça t'arriverait. Et avec ça, faisons une petite pause. 20. Créer un grand territoire de héros: Bonjour et bienvenue. La zone des héros est cette partie du design qui est censé attirer votre attention et vous garder sur le site Web. Il devrait être simple mais frappant et mémorable. Comment vous gérez la cachette. Oui, nous aimons faire briller le projet ou il tombera à plat. Permettez-moi de commencer à copier-coller le contenu de l'ancien site Web. Le titre se traduit en quelque chose comme si ce n'était pas un désert. C' est le petit déjeuner parfait même si nous changeons constamment. Donc tu devrais garder ça à l'esprit. La description doit être placée sur trois lignes. Maintenant, alors que j'ai tout centré et fait quelques modifications ici et là, voici pourquoi le texte est si important. Le titre principal va être montré dans cette police de caractères de script, marché principal EDS, c'était son nom. S' il vous plaît être généreux avec la taille. Je pense à environ 50 pixels. Si vous ne trouvez pas cette police exacte, veuillez rechercher une alternative. Maintenant, l'idée derrière ce titre est que le produit ressemble à un désert, mais c'est en fait un substitut de repas. Tu es censé manger un pot de 300 grammes et c'est ça, rien d'autre. Donc c'est essentiel parce qu'en tant que désert, c'est cher et c'est trop de produit, 300 grammes, non ? Mais en tant que repas principal, cela a du sens à la fois en termes d'emballage de son poids, mais aussi en termes de prix. Quant à la description, cela vous en dit un peu plus sur l'entreprise. Pas de sucre, pas de produits en plastique faits à la main, livraison rapide et ainsi de suite. Ceux-ci sont appelés USP, points de vente uniques. Usb. C' est ce qui nous distingue des autres entreprises. N' utilisez pas de textes comme ça. Tu ne vas pas avoir l'air si gentil. Maintenant, ce que la plupart des débutants font, c'est qu'ils utilisent Lorem Ipsum, qui est également connu sous le nom de texte fictif avec du faux texte ou des textes latins. Si vous faites ça, le client, évidemment, il ne sera pas aussi excité quand vous lui montrerez votre travail. Il est vrai que trouver ce type de texte est en fait assez difficile. C' est pourquoi les entreprises embauchent des rédacteurs. Copier signifie simplement écrivains de texte. Ils écrivent le texte. Donc les auteurs de copies, s'il vous plaît ne confondez pas les rédacteurs avec le copyright, ce qui est quelque chose de totalement différent. Mais revenons au point, il est toujours préférable d'avoir du texte réel dans votre zone de héros, copie réelle. Si le client n'a rien que vous pouvez utiliser, s'il vous plaît prendre quelque chose de l'un de leurs principaux concurrents, il suffit de le traiter. Bien sûr, vous devrez dire au client que vous avez pris ce texte d' un autre site Web et qu'il doit trouver quelque chose d'original. Mais il est très important que vous n'utilisiez pas Lorem Ipsum, quatre parties clés de votre design. Imaginez le site Nike, mais au lieu de le faire, il dit Lorem ipsum dolor évidemment n'a pas le même impact, non ? D' accord. Maintenant, pour les distances, laissez 25 pixels entre le titre et la tête là. Et puis pixels entre ces deux calques de texte. Oh, j'ai failli oublier. Veuillez sélectionner tous les calques de l'en-tête et les regrouper avec le contrôle G. Vous pouvez activer le panneau Calques pour vérifier que tout va bien. À partir de maintenant, vous devriez avoir deux dossiers et deux calques de texte de la zone de héros. Au fait, laisse-moi te dire une autre chose. Je voudrais laisser plus d'espace vide ici, pas seulement 25, mais vous devez toujours penser à l'objectif de la page était l'objectif. Ici, le site veut vendre ses produits. C' est pourquoi il est important que nous montrions les produits autant que possible dans le plus haut possible. Donc, cela signifie que nous ne pouvons pas étendre cette partie avec d'autres choses comme une vidéo ou plus de textes d'illustrations. La plupart des visiteurs voudront voir les produits sans défiler. C' est ce que l'entreprise veut aussi. Espérons que l'un de ces produits attirera votre attention et vous cliquerez dessus. Une photo du produit réel est bien meilleure que n'importe quel calque de texte, peu importe la façon dont vous le stylisez. C' est pourquoi nous devons tout garder aussi compact que possible. Et avec cela, nous pouvons passer aux catégories. Restez à l'écoute. 21. Redesign le menu de catégories: Bienvenue à notre projet. Le menu des anciennes catégories n'était rien de spécial. C' était viril avec cette ligne épaisse et pas si excitant du point de vue visuel. Tu pourrais le manquer si tu n'étais pas si soucieuse de tous. Nous devons donc faire quelque chose d'un peu plus intéressant et plus accrocheur. Commençons par copier-coller les éléments et supprimer le numéro à côté de chaque catégorie. Parce que je suis à la fois le client et le designer. Je suis d'accord pour le faire. En général, vous ne devriez pas supprimer ces choses sans avoir la permission du client ou une autre façon de les regarder. Vous pouvez les supprimer, mais si vous recevez de mauvais commentaires à ce sujet, s'il vous plaît ne soyez pas contrarié. D' accord. Prenez votre temps avec elle et assurez-vous de mettre suffisamment d'espace vide entre chacun. Pendant que je fais ça, nous devons nous assurer de comprendre comment le styliser. Maintenant, devrions-nous utiliser le traitement de tous les bouchons comme un bourbon, le menu principal ? Est-ce qu'on le fait de la même taille, plus petite ou plus grande ? Pour obtenir une réponse, nous devons d'abord demander autre chose, ce qui est plus important. Le menu principal ou ce menu de catégories. Vous pourriez être enclin à dire le menu principal, le méthanol. C' est pour ça que ça s'appelle Main, non ? Mais en fait, les catégories attirent plus de collègues pour la simple raison qu'ils contrôlent les produits présentés. Pensez-y. Que veut l'entreprise ? La même question encore et encore, non ? Voulez-vous envoyer les visiteurs pour voir le blog ou la page de contact ? Que diriez-vous de la liste des magasins partenaires ou de la presse que l'entreprise a reçue ? Non, bien sûr que non. Cela peut être intéressant, mais l'entreprise veut en fait vendre directement aux consommateurs. C' est le modèle d'affaires. Alors, comment peux-tu faire acheter quelque chose à un visiteur ? D' abord, tu dois lui montrer un produit. C' est là que les catégories entrent en jeu. Une autre chose à considérer est que le menu des catégories n'a pas besoin d'une actualisation. Donc, quand vous changez de catégories, c'est vraiment passé. Si vous utilisez le menu Produits d'en haut, cela prend plus de temps car il s'agit d'un menu déroulant et son globalement plus lent. Bref, qu'est-ce que cela signifie ? Le menu principal est en majuscules. Ils sont Dean, audacieux montreront les catégories dans toutes les majuscules, 16, gras. Je sais que j'aurais pu gagner deux minutes et juste te dire la valeur 16. Mais pourquoi nous le faisons est incroyablement important. On ne fait pas de choix juste en fonction de son apparence, n'est-ce pas ? Quoi qu'il en soit meilleur, nous devons y réfléchir et nous assurer vraiment que nous aidons l'entreprise à atteindre ses objectifs. Ensuite, je veux le mettre en évidence encore plus en utilisant un rectangle. Ceux-ci ajoutent un à la canevas n'importe quelle taille et assurez-vous de le placer sous le calque de texte. Rappelez-vous, la touche Ctrl Carré Crochet pour déplacer un calque vers le haut ou vers le bas dans le panneau Calques. Ok, pour la taille, compte tenu de la largeur du calque de texte, Allons avec 550 par 50. Ce n'est que les points de départ, alors n'y pensez pas trop à travers le panneau des actifs. S' il vous plaît appliquer la bordure rose, puis arrondir en y ajoutant une valeur élevée. En passant, la valeur maximale est 25, et c'est parce que la hauteur est 50, 25 en haut, 25 en bas. Donc 50 au total. Mais au cas où tu mettrais quoi que ce soit 100 ici sera la même chose. Donc, pas de soucis à ce sujet. Il va sans dire que vous devez envoyer que les deux éléments sur le canevas, mais aussi centré le texte à l'intérieur de la forme. Si vous me demandez quelle est la chose la plus importante en tant que débutant à penser que c'est la vitesse. Tant que tu es rapide, tu es sur la bonne voie. Cela signifie que vous devez être à l'aise dans Adobe XD. Mais comme il n'y a que quelques techniques à maîtriser, je suis sûr que vous allez devenir plus rapide et plus rapide que vous pratiquez. Ok, maintenant, suivant sur ma liste, Montrons quelle catégorie est actuellement active et c'est l'avoine. Mettez en surbrillance et utilisez le panneau d'actifs pour cela. Souviens-toi du bug dont je t'ai parlé. D' accord. Lorsque cela est fait, ajoutons la ligne au bas du mot. Cela dépend vraiment de ce que vous avez fait ci-dessus. Je pense que nous avons fait la ligne de 90 pixels de large. Je pense que c'est un peu trop pour être honnête. Faisons AD, mais nous garderons la hauteur de trois pixels. Ce que je vais faire, c'est que je vais réduire celui en haut aussi, juste pour que dans le clair, encore une fois, cohérence compte pour moi. Je vais accélérer ça car il n'y a rien de spécial à ce sujet. Je vais utiliser un rectangle pour le centrer. Et cela va être que nous aurions pu potentiellement utiliser la même quantité d'espaces vides auparavant dans le menu principal. Mais je pense que c'est un de ces endroits où je suis d'accord pour juste l'approcher. Ce que j'aime faire est de m'assurer que le texte est centré et d'ajuster la quantité d'espace vide. Étant donné que le texte est centré, cela signifie que l'alignement ne sera pas supprimé. Maintenant, d'accord ? J' ai oublié une petite chose. Au lieu de jus moins mettre la limonade parce que je pense que c'est plus approprié. Las, je pense que ça devrait être de l'avoine au lieu de l'ancienne, mais laissez-moi vérifier et nous verrons ce qu'on peut faire dans la prochaine vidéo. Ces petits détails ou surtout pour les propriétaires d'entreprise en tant que concepteur web, vous ne devriez pas vraiment faire ces changements à moins que vous soyez invité à le faire. Oui, ça va être un vrai projet, il va être mis en œuvre. Je préfère donc que nous utilisions le terme réel. Il y a un dernier détail. Je voudrais ajouter un séparateur vertical entre chaque élément de menu. Utilisez encore une fois l'outil de ligne et maintenez-le sous 20 pixels. Faites-le la même chose, couleur, et utilisez un rectangle pour le centrer correctement. Vous pouvez demander pourquoi on le fait ? Ce n'est pas obligatoire. Ne vous méprenez pas. Mais cela aide à apporter plus de structure au menu. Ou le public n'est pas si jeune. Nous devons donc nous assurer que tout est aussi clair que possible. Ok, avec ce petit détail, l'élément catégories ressemblera plus à un menu. Ok, jetons un coup d'oeil supplémentaire et quand vous êtes heureux, sélectionné tous et lit de groupe. Je n'ai pas regroupé les deux couches de texte d'en haut parce que cela ne nous aide vraiment en aucune façon. Je suis vraiment content de nos progrès et je suis très excité de voir votre propre version de ce menu. Réfléchissez vraiment à ce qui rend quelque chose de différent. Cherchez l'inspiration et montrez-moi ce que vous avez 0 avant que nous finissions, je pense que nous avons oublié de styliser le lien de la description. Oui, on a tout gâché. Veuillez le rendre orange pour montrer qu'il s'agit d'un lien et le rendre en gras pour qu'il se démarque. Ne jamais jouer avec la taille cependant, ce serait une grosse erreur d'exécution dans mon livre. Vous ne pouvez jouer avec la couleur et le poids, rien d'autre. Et comme ça, nous avons un design moderne et féminin qui se distingue. Des trucs gris. 22. Comment afficher tous les détails de produits dans une grille: Bonjour et bienvenue. Nous allons ensuite concevoir la grille des produits. Mais tout d'abord, permettez-moi de corriger cette erreur d'orthographe. Je pense que l'ODS est une bien meilleure description. Et en parlant de descriptions, nous pensons que nous devrions légèrement augmenter la taille de celui-ci ici de 13 pixels à 14 pixels. Juste une petite chose, mais je pense que c'est logique. Quand fait alors, augmentons la distance à 25 pixels encore une fois. Donc c'est la même chose en haut et en bas. Maintenant, pour aller de l'avant, c'est la partie la plus difficile de cette refonte, le diplôme de produit. Je veux dire, c'est la partie essentielle parce que c'est là que les ventes se font. Si nous ne parvenons pas à tout arranger d'une manière claire, cela va nuire à l'entreprise. Gardez à l'esprit que les ventes ont été de 40 000€ à 1,40 mille € par mois. C' est environ 50 000$. Avec une grande refonte, nous pouvons augmenter ce nombre de beaucoup, mais nous pouvons également réduire les ventes. La pression est donc immense. Commençons par des maths. Nous allons garder la lecture existante avec trois colonnes à ceux-là. Rien d'or aussi spécial, rien de trop exotique, non ? Nous ne voulons pas de la refonte folle. Si nous avons trois colonnes, ça veut dire que nous aurons deux lacunes, non ? Quelle est l'ampleur de ces lacunes ? B, 20 ou 30 pixels est ce que je recommande. C' est ce que j'utilise dans la plupart de mes projets. Dans ce cas, allons-y avec 30. Maintenant. Il y a d fois 2 est 60. Cela signifie que nous avons 1200 pixels, la zone active moins 60, et c'est 1140 divisé par trois colonnes, soit 380 par colonne. Donc, fondamentalement, c'est la largeur d'un produit. Ok, ajoutez un rectangle et utilisons le panneau Propriétés pour ajuster cela. Donc, la largeur, encore une fois, 380. Et pour la hauteur, allons-y avec un rapport un-à-un. Donc 380. Nous pourrions ajuster la hauteur plus tard en fonction de la façon dont le design va ressembler. Mais pour l'instant, ça devrait être bien. S' il vous plaît appliquer la planche sur le rose. Maintenant, la question est, est-ce qu'on garde les bords carrés ? Et c'est parce que nous avons vu que c'est assez populaire sur les sites de passion. Mais dans ce cas, je suggère qu'on les arrondisse. Maintenant, cinq pixels ne suffit pas pour la nuit qu'ils de cette taille pourrait alors fonctionner, mais c'est encore trop subtil à mon goût. Vous pouvez à peine voir. Donc 15 semble comme ça. Le problème avec une valeur plus élevée est, je pense que va sembler bizarre. Et plus que cela va manger dans le contenu réel. Maintenant encore une fois, placez ce 25 pixels loin des catégories et liste étoile copie collant tout le contenu réel. Je vais utiliser les textes de l'ancien site. Alors s'il vous plaît, restez avec moi pendant que je colle tout. Comme je l'ai dit au début, €40 mille par mois, c'est environ $50 mille. Maintenant, dans le grand plan des choses, ce n'est pas beaucoup d'argent. Ce n'est pas une affaire énorme, croyez-le ou non. Je connais des tas d'entreprises qui font bien plus que cela. Mais vous pouvez vous demander pourquoi est-ce pertinent ? Parce que vous devez comprendre la valeur de votre refonte. Dis que nous allons facturer 2 000$ pour tout le projet, non ? Stop et versions mobiles, ok, plus de préparer tout pour le codage, peut-être même un prototype interactif. Le code pour cette refonte va être vraiment pas cher parce que c'est principalement CSS fonctionne jusqu'à présent. Donc le codage ne va pas être quelque chose de spécial. Mais disons que c'est un autre 2000, non ? Même si je sais que le prix sera probablement d'environ 200$ à 250$. Mais gardons les choses simples. Au total, 4 000$ au total pour la refonte. Cela peut sembler cher pour certaines personnes, mais pensez à ce qui suit. Disons que nous augmentons les ventes mensuelles de 10 pour cent, non ? De 50 000$ à 55 000$. Donc c'est un supplément de 5 000$ par mois. Donc, en un mois, la société récupère son argent plus un profit. En un an, c'est un chiffre d'affaires supplémentaire de 60 000$. Donc, pour 1000$ redesign est fondamentalement rien. C' est un très petit prix à payer. Et encore une fois, je connais certaines entreprises qui font 200 000 par mois. Mais voilà le truc. Même si vous n'augmentez pas les ventes de 10 pour cent, peut-être que vous ferez 5 pour cent, n'est-ce pas ? Dans le cas de cette affaire, c'est encore un supplément de 30 000$ par mois. Mais encore une fois, peut-être que votre design n'est que légèrement meilleur que l'ancien. Ok, 2,5% d'amélioration des ventes. C' est encore $15.000.1, 515 k. C'est le pouvoir que vous avez en tant que designer. Et ils ont en fait un ami qui est en train de redessiner un site pour l'entreprise qui a des ventes annuelles de plus de 100 millions d'années cependant. C' est donc plus de 8 millions d'euros par mois, soit environ 10 millions de dollars par mois. Bien qu'il soit vrai que la plupart de ces revenus proviennent des magasins physiques réels et ce n'est pas exclusif. La vente en ligne est toujours une opportunité incroyable. C' est donc ce que vous devez considérer quand vous évaluez votre travail. Quelle valeur pouvez-vous apporter en fonction du chiffre d'affaires actuel ? Ok, pour l'instant, déplacons certains de ces vers le bas et ajoutons un deuxième rectangle qui tiendra notre photo. Voilà ce que je veux. Sélectionnez le rectangle principal et utilisez le contrôle du D comme en double. Il semble que rien ne s'est passé, mais change de couleur à n'importe quel gris aléatoire. Lorsque vous avez fait cela, désactivez la bordure et ajustons sa hauteur. C' est un point où vous devez considérer les photos de l'entreprise. Sont-ils grands et alors sont-ils courts et larges ? Sur cette base, vous devez ajuster cette forme. Dans ce cas, je suis à la fois le propriétaire et le concepteur, donc je peux faire ce qu'ils veulent. 250 devrait être très bien pour la hauteur. Maintenant, le rayon de 15 coins est totalement votre top Cabo, mais pas en bas. Ce serait une grosse erreur. Cliquez ici pour modifier la moitié inférieure. Lorsque vous cliquez sur les deux derniers champs, vous saurez si vous êtes au bon endroit car cette partie s'allume. C' est donc la coordonnée qui s'ajustaient de façon récurrente en bas à droite et celle-ci en bas à gauche. Ok, des trucs géniaux. Nous avons maintenant le squelette et maintenant le voyage commence. Prenons un moment et nous continuerons dans une seconde. 23. Voici comment vous trouvez la meilleure mise en page de la grille de produits: Bonjour et bienvenue. Avant de travailler sur la grille des produits, j'espère que vous comprenez à quel point c'est essentiel. On parle de milliers et de dizaines de milliers de dollars. Avec cette pression sur nous, nous devons nous assurer de créer la meilleure grille de produits que nous pouvons. Mais comment pouvons-nous être sûrs d'avoir fait de notre mieux ? Eh bien, voici mon conseil. Voici la meilleure façon de créer une grille impressionnante de produits, va créer des tas d'options, appelées comme vous voulez les appeler itérations de variance, options, quel que soit le concept, ce qui est important. Voilà le truc. Est-ce que nous montrons ce titre sous la photo ou au-dessus ? Est-ce qu'on a envoyé une lecture ou on laisse la ligne que les banques ? Utilisons-nous deux boutons pour ajouter au panier ou afficher les détails ou simplement du texte ? Il y a plein de questions comme celles-ci et vous ne pouvez pas avoir réponse à moins que vous ne conceviez toutes vos idées. C' est ainsi que vous parvenez à obtenir la meilleure mise en page possible. Vous créez toutes les versions que vous pouvez. Quand après l'autre, vous décidez de dupliquer le plan de travail et vous essayez une autre idée et une autre, et une autre. Et c'est parce que c'est une chose de l'imaginer. Et c'est une autre conception du CDA côte à côte avec une autre option. C' est ainsi que vous pouvez être sûr que vous avez fait de votre mieux. Dans mon esprit, j'aimerais ajouter des icônes pour les calories de poids dans le prix, mais cette base semble plutôt serrée. Ok, on pourrait augmenter la carte, mais ça va pousser la deuxième rangée vers le bas. Ça va aller ? Donc aucune idée à moins qu'on ne le voie. On pourrait réduire la partie photo. Mais encore une fois, les produits seront-ils beaux si nous le faisons ? Donc, il est vraiment important de ne pas être paresseux à ce sujet, même si vous êtes satisfait de la première version, rappelez-vous n'est qu'une option. Et si le client veut te voir une autre idée, il vaut mieux lui dire, Hey, tu sais quoi, j'ai déjà essayé que voici le design. Je ne pense pas que ça marche. Mais si vous n'y mettez pas assez d'efforts et que vous créez une version et c'est tout. Tu ne lui donnes pas de ton mieux. Donc, mon conseil est que vous faites toujours un excellent travail, même si l'argent est assez faible. n'y a qu'une seule façon de s'améliorer, c'est de devenir plus rapide et d'apprendre de vos erreurs. En devenant pasteur, vous allez concevoir dix grilles au lieu de deux ou trois. En concevant 10, voyez ce qui fonctionne et ce qui ne fonctionne pas. Donc, la prochaine fois, vous aurez une situation similaire. Non seulement vous aurez cette expérience, mais vous aurez aussi une certaine vitesse. Et cela étant dit, commençons à faire quelques options. Je vais vous montrer probablement deux ou trois, mais faites de votre mieux pour en trouver quelques-uns. Utilisez l'inspiration. N' utilisez pas votre imagination. Regardez autour de vous et voyez ce que d'autres grands sites Web font et appliquez-le ici. Mais s'il vous plaît essayez de ne pas supprimer trop d'éléments lorsque vous n'avez qu'une entreprise de titre. Bien sûr, c'est assez facile. Mais quand il y a tant d'informations, c'est là que les choses deviennent difficiles. Ok, allons travailler. 24. Créez la première version de la carte de produit: Bonjour et bienvenue. Pour la première version de la fiche produit, Faisons ceci. L' étape initiale consiste à sélectionner tous ces éléments et à les regrouper, contrôler G. Ce n'est pas obligatoire, mais je préfère le faire. Maintenant, nous allons nous concentrer ici en haut à droite du panneau des propriétés et cliquez sur Répéter la grille. Vous remarquerez qu'il y a une ligne verte pointillée plus ces deux poignées. Prenez celui sur la droite et élargi. Nous voulons les éléments au total, mais vous remarquerez que le dernier ne touche pas le bon côté. Maintenant, le problème qui est attendu, déplacez votre souris entre l'écart et vous obtiendrez cette ligne rose. Cliquez, faites glisser et déplacez-le vers la droite pour augmenter l'espace 230. Zoom avant si nécessaire, juste pour s'assurer que vous obtenez 30, parce que c'est exactement ce que nous avons calculé. Rappelez-vous que nous avons dit 30 fois 2 est 60, 1200 moins 60 est 1140 divisé par 3, c'est la TVA. D' accord ? Faites la même chose verticalement et vous devrez augmenter la taille de la toile. Mais cela se fait facilement en sélectionnant le tableau d'art et en faisant glisser le bas de la poignée du milieu inférieure. Très bien, une grille de répétition aussi utile parce que nous pouvons glisser et déposer notre contenu et il va remplir les six cartes. J' ai préparé les dossiers et vous les avez joints. Prenez les 64 ceux et faites-les glisser sur la carte grise. Il est important que vous soyez au-dessus de la carte et que vous voyez ce surlignement bleu. Répétez la même procédure pour les titres, le prix, etc. C' est l'un des plus grands avantages par rapport à Photoshop en montrant différents produits avec des titres différents, que le design semble réel et il y a de bonnes chances que le client l'aime plus par rapport à un design où le même produit obtient montré six fois. n'y a pas de discussion, c'est beaucoup mieux. Oh, au fait, les fichiers texte, ils n'ont rien de spécial à l'intérieur. Juste un titre par rangée, rien d'autre. Ok, donc c'est la puissance de la grille de répétition. Oh désolé, j'ai oublié d'ajouter le poids pour chaque produit. Maintenant, le problème cependant, faites glisser une copie du prix en maintenant la touche Alt enfoncée. Il n'est pas nécessaire de modifier le contenu car nous allons faire glisser et déposer un autre fichier texte, mais vous pouvez le modifier manuellement pour ne pas être confus. Mais voici une autre chose. Déplaçons un peu le titre vers le bas. Et comme vous pouvez le voir, tous font la même chose. C' est pourquoi il est préférable de concevoir avec une grille de répétition activée. C' est une chose de voir un produit, c'est une autre de voir six produits différents. Ok, pour la première version, essayons ceci, quelque chose de assez basique. Centré le titre et l'afficher en caractères gras de 18 pixels Poppins. Assurez-vous de sélectionner le titre avec le rectangle blanc, puis utilisez la commande Alignement. Lire. Les choses sont très occupées ici, mais on va régler ça. Je pense que nous plaçons le prix à gauche et les deux actions à côté. Donc quelque chose dans ce sens. Fondamentalement, le titre est seul sur une ligne. Ensuite, les calories de pondération de chaque côté sur la deuxième ligne. Et enfin le dernier divisé en trois détails de prix. Et enfin chariot. Maintenant, en termes d'importance, ce titre est roi, avec Ajouter au panier et afficher les détails. Le poids et le Calvi n'ont pas tant d'importance minimale. Alors montrons-les dans Poppins 13, régulier, qui est fondamentalement du texte corporel. C' est juste un peu plus petit que ce que nous avons utilisé dans l'idée de halo pour la description. Là, nous avons porté ce chiffre à 14. Ok, de bonnes choses. Déplacé les 20 pixels du bord de la carte. Évidemment des deux côtés. Cet espace vide ici est appelé rembourrage. Et c'est incroyablement important parce que si vous ne laissez pas assez d'espace pour respirer, tout le design va se sentir désagréable. Ça va se sentir occupé et encombré. Maintenant, nous allons gérer les deux appels à l'action. Je suggère que nous ajoutons un fardeau qui touche le bas de la carte pour la taille. Je pense à 40 pixels pour la hauteur. Et en ce qui concerne la largeur, je pense que 1 tiers, vous devriez aussi être très bien sur la couleur. Nous devons penser à ce qui est le plus important. Afficher les détails ou ajouter au panier. Je pense que le second, parce que nous voulons nous assurer que l'utilisateur peut faire un achat aussi rapidement que possible. Alors rendons-le orange et désactivez évidemment la bordure. Et une autre chose que nous ne pouvons pas laisser AT au carré, donc s'il vous plaît cliquer ici et changer le rayon du coin inférieur droit le 15. De cette façon, ce sera intéressant, mais il conviendra également à la carte pour le calque de texte. Allez avec Poppins, 13, semi-gras, blanc pur. Ok, s'il vous plaît centrer à la fois horizontalement et verticalement. Ils pourraient prendre le temps avec ça. Ne vous précipitez pas à nouveau, vous devriez travailler sur votre deuxième visionnage. Maintenant, le problème est avec le deuxième bouton. Est-ce qu'on fait noir étaient une autre couleur. Le manque est peut-être un peu trop masculin. C' est juste à côté d'orange. Donc ça peut sembler intéressant. Il n'y a qu'une seule façon de le savoir, alors faisons-le. Pendant que je gère cela, je veux vous dire pourquoi j'hésite à introduire une autre couleur dans ce design. Supposons que nous allons chercher la belle nuance de bleu. Eh bien, ça doit apparaître dans tout le design. Et je ne suis pas sûr que ce soit la bonne décision. Je préférerais avoir l'orange comme les seules couleurs d'action pour qu'il se démarque vraiment. Ok, changez le prix à Poppins 18 gras et assurez-vous qu'il est centré avec les calques de texte à l'intérieur des fardeaux. Vous devriez également vous rappeler de laisser 20 pixels sur le côté gauche de celui-ci pour faire de bons progrès. Mais pour vous dire la vérité, je ne suis pas vraiment excité par cette première version, mais pas de soucis. C' est juste R la première fois. Ce qui est important, c'est le fait que nous avons tous les éléments mis en place et que nous pouvons facilement changer les choses. Oh, vérifiez le titre. Vous devriez laisser dix pixels de la photo. Nous sommes à peu près terminés, mais s'il vous plaît n'oubliez pas la note. C' est un élément important pour le visiteur. Sur la base de la note, il peut faire un achat avec plus de compétence. Voici ce que je suggère, un rectangle blanc qui est vraiment arrondi. Dites 130 pixels, pas de trait, parce que toutes les photos sont assez colorées. Assurez-vous que l'ordre dans le panneau Calques est correct, sinon vous ne le verrez pas correctement. Le texte à l'intérieur doit être très petit. Donc Poppins 12 semi-gras est mon choix. Bold pourrait fonctionner aussi, mais c'est totalement à vous de décider. Et n'oublions pas l'étoile. Je vais utiliser l'icône plate pour cela, mais je vais mettre l'enregistrement en pause parce qu'il n'y a rien de spécial qui se passe. Cherche juste la belle étoile. Et voici le mien. Je vais le faire glisser et je le redimensionnerai. Merci 16 pixels devrait être très bien. L' idée est que ce n'est qu'un petit détail. Si nous voulions qu'il se distingue, nous utiliserions probablement cinq étoiles. Mais je pense que cela couvrirait une grande partie de la photo et ce n'est pas idéal. D' accord. Pour le code couleur. Allons avec l'IED, DD 07. C' est un autre code couleur de ma marque, donc je le connais par cœur. Maintenant, voici la dernière chose à laquelle vous devez prêter attention. Bien sûr, centré l'étoile et le texte ligne médulla. Des trucs faciles. Ensuite, laissez cinq pixels entre les deux. Encore une fois, facile. Mais voilà le truc. Nous voulons maintenant, cela centré à l'intérieur du rectangle. Sélectionnez les deux éléments avec la touche Maj et regroupez-les. Voyez comment la surbrillance a changé. Laissez-moi annuler le contrôle Z. Donc les deux sont sélectionnés et maintenant je vais les regrouper. Ok, super. Ensuite, je vais également sélectionner le rectangle blanc en utilisant la touche Maj afin d'avoir deux choses sélectionnées. Vous pouvez activer le panneau Calques pour voir ce qui se passe. Donc le groupe avec l'étoile et le calque de texte, c'est une chose. Et voici le rectangle. Super. Utilisez maintenant les outils d'alignement. Et c'est alors, félicitations. Mon conseil est que vous regroupez ces deux aussi parce que nous voulons placer cet élément 20 pixels du haut et 20 pixels du bord. Et avec ça, nous avons fini avec la première version, renommer le groupe, et nous pouvons commencer à penser à la prochaine version. Je te vois dans une minute. 25. La deuxième version de la carte de produit: Hé, on a fait notre première version, non ? Mais je ne suis pas très content de ça. Et je pense que tu ressens la même chose. Les femmes noires n'ont pas l'air de race. Donc, avant de descendre avec le reste de la conception, sélectionnons ce plan de travail et appuyez sur Contrôle D pour en faire une copie. Contrôle D comme en double. Je pense qu'on peut faire mieux. Ok, une des choses que je voudrais tester est de laisser aligner le titre, Contrôle, cliquez dessus et changeons son orientation pour aligner à gauche. S' il vous plaît assurez-vous que nous avons 20 pixels à partir du bord. Vous pouvez maintenir la touche Alt enfoncée et déplacer votre souris là-bas et vous obtiendrez la mesure. Une autre suggestion est que nous réduisons ce calque de texte parce que je pense que nous déplacons le poids du produit au-dessus des calories. Fondamentalement, l'idée est d'avoir le titre sur deux lignes et sur le côté droit, le poids et les calories. Faites de votre mieux pour zoomer et aligner ceux-ci. S' il vous plaît prenez votre temps avec. Tu dois avoir de la patience avec eux. Et quand tu auras fini, je pense que nous pouvons déplacer tous les calques de textes un peu bas parce que nous avons un peu plus de marge de respiration ici. Je pense que ça va être mieux. Maintenant, vous pourriez vous demander, si les titres sont très longs ? Que se passe-t-il alors ? Eh bien, la chose la plus simple est de couper le titre. C' est assez facile à faire du point de vue du codage et cela ne change pas l'apparence du produit. Donc, utilisez juste point, point, point à la fin. Maintenant. Bien sûr, nous pourrions demander au codeur d'ajuster la taille de la police afin que le titre entier corresponde. Mais j'ai trouvé que ça n'a pas l'air aussi agréable. Donc, en général, point, point, point est un excellent moyen d'y arriver. D' accord ? C'est déjà un peu mieux, mais nous devons gérer le fardeau spécifiquement voir détails parce que c'est celui que je n'aime pas. Voilà la situation. Ce n'est pas l'action principale. Donc, je suggère de supprimer son rectangle et de rendre le texte orange. De cette façon, les gens seront plus enclins à cliquer sur Ajouter au panier. La question est, devrions-nous centrer cette couche de texte avec la carte ? Alors, qu'est-ce qu'on distribue ça avec le prix et le rectangle ? Eh bien, dans ce cas, je pense que la deuxième option est plus logique. Mais il y a une autre chose à considérer. J' aime dire cohérent dans mes conceptions. C' est l'une des façons de s'assurer que ça a l'air mieux. Connectez-vous et créez un compte sont tous dans toutes les majuscules. Maintenant, les catégories sont les mêmes. Donc je pense qu'on fait la même chose ici. Mais comme d'habitude, essayez-le et voyez à quoi ça ressemble. Le seul problème majeur est le fait que le prix est en quelque sorte proche du bas de la carte et que nous ne pouvons pas l'augmenter sans provoquer un désalignement. Avec ces trois couches. Vous avez la ligne horizontale droite imaginale passant par le milieu de ces calques. Si vous bougez l'un d'entre eux, soit vers le haut, soit vers le bas, c'est une grosse erreur. Le week-end le plus important est peut-être d'augmenter légèrement la taille du bouton Ajouter au panier. C' est 40 en ce moment, peut-être 44, mais c'est tout. On ne peut pas trop prolonger ça parce que ça va avoir l'air bizarre. Mais voici une idée qui va marcher. Allons en bas vers le coin supérieur gauche. Sélectionnez le premier champ dans le panneau Propriétés et placez 15 pixels. Eh bien, ce n'est pas un style très commun. Je pense que cela semble intéressant et ce n'est pas difficile à coder. Je pense toujours à cette partie aussi. En réduisant les coûts, vous rendrez le client plus heureux et plus confortable. Ok, c'est la deuxième version de la page d'accueil. La grille est bien meilleure. Je suis beaucoup plus heureux que le premier. n'y a aucun doute, mais je pense qu'on peut lui donner une autre version, une autre itération. Cette fois, j'aimerais voir une icône au lieu d'ajouter au panier. Ça devrait nous donner un look plus propre. Mais il n'y a qu'une seule façon de le savoir en le faisant. Alors arrêtons-nous et je te verrai dans un instant. 26. La troisième version de la carte de produit: Bonjour, bonjour. Voyons ce qu'on peut faire cette fois-ci. Je pense que nous pouvons essayer une icône au lieu d'un calque de texte qui dit Ajouter au panier. Il s'agit d'une variation sur l'ancienne version du site Web où il y avait une approche similaire. Et c'est parce que parfois vous n'avez pas besoin d'un tout nouveau design, totalement différent. Seulement un léger ajustement. Ok, essayons-le. Sélectionnez le plan de travail et, évidemment, faites une copie. Maintenant, le leader Ajouter au panier textes dans fire up flat icon.com pour rechercher une belle icône. Dans l'ancienne version, c'était un chariot de panier. Je pense qu'on utilise un panier cette fois autour d'un panier de poche. Je ne vous ferai pas attendre, donc je vais éditer l'enregistrement. Hills aurais-je choisi ? Je vais le rendre plus petit, 26 par 26 pour être précis et blanc. Encore une fois, souvenez-vous de ces deux choses. Désactivé la fonctionnalité responsive et avait l'icône de verrouillage, le plus à l'intérieur qui envoie vraiment le bon message ajouter au panier. Cela devrait être assez intuitif pour la plupart des gens, y compris le public de ce site. la foule est jeune, plus vous pouvez être sûr de ce genre de choses. Le problème avec cette conception est que le fardeau est beaucoup trop large. Bien sûr, nous pourrions essayer de garder le texte aussi bien sans chose qui est beaucoup trop dans mon livre, cette zone ne devrait pas rivaliser pour l'attention avec la photo. Mais parce qu'il est si large et qu'il a une icône, eh bien, il attire votre œil immédiatement. Voilà ce que je suggère. Sélectionnez la forme et l'éperonner, faites-en un cercle, 50 par 50 pixels. C' est un élément de conception très commun si vous avez une expérience avec les applications mobiles. Donc applications Android ou iOS, C'est un look classique, facile à comprendre. Mais encore une fois, c'est à l'intérieur de l'application mobile. Ce public aimera-t-il ? Nous pouvons trouver à faire Google Analytics, mais c'est à ce sujet. Quoi qu'il en soit, continuons avec notre travail. On a ce bouton, mais on ne peut pas le laisser ici, autant plus que le rayon du coin ne correspond pas. Je dis qu'on la place ici juste sur le bord. Comme d'habitude, 20 pixels du côté droit. Avec elle est assez grande taille 50 par 50. Et le fait qu'il soit orange, je pense qu'il devrait attirer assez d'attention. Ok, le classement des étoiles d'en haut rend la voiture un peu trop lourde. Du côté droit, il y a trop de choses ici. Donc, pour l'équilibrer, déplacez-le sur le côté gauche, en miroir que le bouton de la carte. En passant, il est parfois très difficile de voir la mesure qui apparaît en rose en cas de doute. Bien sûr, vous pouvez vraiment zoomer, mais vous pouvez aussi le faire. Faites toucher l'élément sur le bord. Ensuite, maintenez la touche Maj enfoncée et appuyez sur la touche fléchée vers la droite. Ça va vous donner 20 pixels. Rappelez-vous donc qu'une touche correspond à un pixel, mais si vous maintenez la touche Maj aussi, une touche correspond à 10 pixels. retour, le blanc sur blanc ne fonctionne pas bien, alors activons une bordure. Il y a quelque chose à dire à propos de risquer obtenir que de le laisser tel qu'il était. Mais je préfère rester du côté sûr. D' accord. On fait de bons progrès, mais la partie inférieure, c'est un gâchis, donne ce que je pense. Les détails de la vue d'action secondaire doivent être sur le bord droit. Le prix devrait rester sur la gauche parce que cela semble naturel. Nous lisons de gauche à droite, à côté du prix, nous devrions montrer le poids du produit. Parce que je pense encore, ça semble juste. Tu dois savoir ce que tu achètes. Et à côté de ça, le nombre de calories. Maintenant, cela nécessite un peu de montage, mais je vais vite aller au mouillé pour que vous n'ayez pas à m'attendre. Veuillez noter que dans une grille de répétition, lorsque vous avez ajouté la position, taille ou la couleur d'un objet, toutes les cartes sont mises à jour. Mais lorsque vous modifiez le contenu à l'intérieur, le texte réel qui affecte uniquement cette carte particulière. Donc c'est quelque chose à retenir. Quoi qu'il en soit, on est presque là. Il ne reste qu'un peu d'ajustement de l'espacement 0. Et pour un look plus équilibré, je pense que nous pouvons centrer le titre dans les deux sens sur la carte, mais aussi comme un calque de texte. N' hésitez pas à le déplacer un peu vers le bas. Maintenant, voilà le truc. Ceci est juste une autre version de la grille. Nous pouvons toujours ajuster davantage ou trouver de nouvelles idées. Ce qui compte, c'est que vous travaillez avec environ 80 à 90 % d'attention aux détails. Tu veux de la vitesse ? Oui. Mais vous voulez aussi vérifier si cela est viable ou non. Cela signifie donc que vous devez configurer les bords correctement. Vous avez besoin de mesurer les choses dans la ligne, tout, mais pas 100% exactement correct ? D' un autre côté, si vous êtes bâclé et que vous ne faites rien de tout ça, vous regardez le design et vous penserez, Hmm, quelque chose se sent mal. C' est peut-être votre manque d'attention aux détails. Encore une fois, l'idée est que lorsque vous concevez la variation, donnez-lui un coup juste en l'exécutant assez correctement. Ok, disons juste que nous avons fini. Je vais frapper le symbole de jeu en haut à droite de l'écran afin que nous puissions rapidement parcourir les conceptions. J' utiliserai mon clavier, ça fera des touches pour ça. Ok, le premier va bien. Mais évidemment, le bouton noir est un peu moche, pas d'autre façon. Le prochain design avec ce fardeau fantaisie, Il est intéressant, facile à utiliser, et il ne semble pas bondé en aucune façon. Le dernier est plus moderne, plus avant-gardiste. Mais je pense que c'est risqué. se peut que certaines personnes ne comprennent pas ce bouton Ajouter au panier. Toi et moi ? C' est évident, bien sûr. Comment as-tu pu ne pas le voir, non ? Mais rappelez-vous le public cible. Ne présume pas que les gens vont s'en sortir. Vous devez le rendre aussi simple que possible. Donc même ma grand-mère peut gérer sans maux de tête. Avec cela à l'esprit, une chose, le deuxième design semble être la meilleure option en tant que concepteur, je préfère le troisième, peut-être 60 pour cent sur le 40 pour cent. La deuxième ligne est proche. Mais pour aller de l'avant, nous allons continuer avec la deuxième conception. Et avec ça, il est temps de passer à autre chose. J' attends avec impatience votre propre version. C' est la partie la plus importante, donc je suis vraiment curieux. 27. Comment concevoir une section de FAQ propre et moderne: Bonjour et bienvenue. La section suivante devrait être assez droite pour le mot. Nous recherchons une section FAQ propre et moderne. Foire aux questions. Commençons par un titre, mais n'oubliez pas de travailler sur le deuxième plan de travail. Vous pouvez le déplacer sur le côté juste au cas où vous vouliez mieux organiser le projet. Ok, le titre devrait être centré et nous ne voulons pas de cette police de script fantaisie. Il n'y a pas besoin de cela. Ce serait trop. Donc Poppins bot sera 26, devrait être bon. Maintenant, il y a beaucoup de copier-coller, mais commençons par le premier. Pour la mise en forme. Allons-y avec Poppins, semi-gras, 16 pixels. C' est assez petit, donc il ne rivalise pas avec le titre pour l'attention. Mais assez grand pour qu'il se démarque. Nous allons le garder en noir, mais s'il vous plaît aligner à gauche. Maintenant, d'accord, pour le corps du texte que je veux utiliser régulièrement. C' est un standard donné comme ce que devrait être la taille 14 pixels. D' accord ? Veuillez vous assurer que le calque de texte est suffisamment large. Je dirais environ 500 pixels. Et c'est parce que nous voulons l'approche à deux colonnes avec un écart décent au milieu. Considérant que nous avons affaire à une zone active de 1200. C' est d'où vient les 500 pixels. La plupart des sections FAQ ont un contrôleur. C' est un fardeau qui est utilisé pour étendre ou réduire la réponse. Dans notre cas, la première question devrait déjà être ouverte, donc nous aurons besoin du symbole moins. Vous pouvez utiliser l'icône plate .com et rechercher le symbole moins qui se trouve à l'intérieur du cercle. Ou bien sûr, vous pouvez le faire vous-même car c'est un travail si facile. Pour une raison quelconque, j'ai adoré ce cadran dans les icônes des médias sociaux, mais aussi dans d'autres icônes aussi. Les cercles sont dans le style en ce moment. Ok, la forme devrait être 26 par 26. Assez petit. Si vous ne trouvez pas une icône assez vite, vous pourriez faire la vôtre exactement comme je viens de le mentionner. Par exemple, le moins peut être une ligne simple, deux pixels d'épaisseur, puis 12 pixels environ. En termes de web, ce qui importe beaucoup, c'est la façon dont vous regroupez tout ensemble. abord, les deux formes d'un élément, donc c'est un groupe. Ensuite, l'icône doit être alignée sur le titre, et il s'agit d'un autre groupe. Enfin, la description doit être placée à environ 10 pixels du titre. En parlant du titre, je pense qu'on a oublié cet espace. Nous voulons n'importe où de 30 à 50 pixels. Et à peu près la même chose entre la première question et le titre. Tant que vous n'exagérez pas avec ces valeurs, vous devriez avoir un beau design. Je vais accélérer les choses. Faites juste attention à la distance entre les questions. C' est l'une de ces raisons pour lesquelles un groupe, le titre avec l'icône. Inutile de dire que nous avons besoin du symbole plus au lieu d'un moins pour tous les autres. Comme je travaille en arrière-plan, Considérons d'autres approches, variations en ce moment. Pourrions-nous rendre toutes les questions non ouvertes orange, ce soit le titre ou l'icône ou peut-être les deux. Eh bien, oui, ça pourrait potentiellement marcher, mais ça serait beaucoup d'orange, non ? Explongeons une autre idée. Pourrions-nous utiliser une carte pour chaque question, pour chaque titre ? Eh bien, oui, mais encore une fois, nous en aurions besoin pour chaque question, pas pour la colonne elle-même. Et dans cette situation, nous aurions besoin de plus d'espace entre chaque élément. Je n'exclut pas get Je ne dis pas non, mais je ne pense pas que ça apporte beaucoup à la table. En plus, c'est beaucoup plus de travail. Et le regard ne sera pas plus que ça à crier. Il y a quelque chose à dire sur l'importance de ce domaine. Faible priorité, non ? cette raison, il est préférable de le montrer sans arrière-plan. En passant, au cas où vous voulez augmenter le tableau d'art aller à au moins 2000 pixels, ce qui est encore en fait sur le petit côté. De nos jours, je préfère les pages plus courtes simplement parce que la vitesse est un facteur important, fois en termes de ventes mais aussi pour le référencement, l'optimisation des moteurs de recherche. C' est pourquoi je n'aime pas ajouter beaucoup d'illustrations, d'icônes et de dessins. Bien sûr, mes dessins ne seront pas aussi beaux que ceux que vous trouverez sur Dribble. Mais d'un autre côté, très peu de designs que vous voyez sur ces types de sites Web sont jamais codés. Et si jamais il est codé, le budget est d'au moins 20 000$. Ok, voici notre design et j'en suis vraiment content. Nous aurions pu ajouter quelques questions dans la deuxième colonne, mais je ne pense pas que ce soit la bonne approche. Je sais que vous voulez équilibrer les choses, mais que se passe-t-il si vous fermez la première, la première question que ce que nous aurions pour les questions de gauche et six questions de droite. Pas cool. Donc encore une fois, je suis très heureux avec elle car elle est agréable, propre et moderne. 28. Créer un formulaire de newsletter: Bonjour et bienvenue à cette conférence où nous allons créer un formulaire d'inscription à la newsletter. Ceci est généralement placé juste au-dessus du pied de page, ou parfois il se trouve à l'intérieur du pied de page. Nous voulons que des designs propres et féminins. Commençons donc avec un rectangle arrondi. J' ai essayé différents paramètres pendant notre pause et j'ai trouvé que les valeurs suivantes fonctionnent le mieux. 780 par 80. D' accord, s'il vous plaît, centrez sur la toile et augmentez le rayon de coin à sa valeur maximale. Quand ce sera fait, nous appliquerons la bordure rose. Fondamentalement, cela est en ligne avec le menu des catégories d'en haut. C' est ce que je voulais dire quand j'ai dit que nous devrions rester cohérents dans notre conception. Si nous avons décidé que le rayon de coin maximum est le chemin à parcourir, alors gardez-le absolument partout. Maintenant, d'accord ? Maintenant, il est vrai que, que le bouton de voiture ne suit pas, mais c'est là que l'expérience entre en jeu. Parfois, vous devez plier les règles pour une meilleure conception. Je sais que c'est un peu compliqué, mais à mesure que vous gagnez de plus en plus d'expérience, vous apprenez à connaître ces exceptions, qui concerne l'espacement, ce que les pixels devraient être très bien. J' adore le fait qu'Adobe XD vous aide à faire correspondre vos espacements, trucs gris pour le texte, Écrivons quelque chose comme découvrir notre histoire. Poppins Gras 16 pixels dans toutes les majuscules. Encore une fois, chaque fois que possible, s'il vous plaît ne pas utiliser Lorem Ipsum n'est pas un excellent look. Placez-le n'importe où sur le côté gauche, juste en dessous. Allons avec une petite entreprise avec de grands rêves. Il est peu probable que ce soit le texte final, mais c'est un début décent. J' ai montré ça et Poppins pour Dean régulier. Je vous suggère également de regrouper ces deux couches car cela vous sera utile lorsque nous utiliserons les outils d'alignement. Ok, maintenant, je veux les centrer pour que la bataille couvre cet espace. Idéalement, j'aimerais avoir les balises finales ici afin que je puisse travailler avec plus de précision. Mais en tant que concepteur web, vous devez savoir que ces choses prennent du temps à trouver une grande copie. Ne vous attendez donc pas à ce que votre client les ait à ce stade de la conception. Ok, reviens à mouiller. Assurez-vous d'avoir la même quantité d'espace en haut et en bas pour le champ dans lequel vous tapez votre adresse e-mail. Allons-y avec deux AD par 40. Maintenant, j'ai personnellement essayé beaucoup de styles différents au fil des ans, c'est ce que je propose. Complétez les coins d'abord et avant tout parce que nous avons besoin que le champ corresponde à l'arrière-plan, désactivez le trait et ouvrez le sélecteur de couleurs. Je connais un code hexadécimal par cœur parce que j'ai utilisé autant de fois sur fond blanc. Et c'est F3, F3, F3. C' est un gris clair qui fonctionne bien dans notre cas. En effet, je suis content de ça. Gardez à l'esprit aucun coup, aucune autre décoration. Ok, à l'intérieur, nous ajouterons notre main. Par conséquent, sont généralement montrés dans un gris très délavé. Mais je ne pense pas que ce soit possible ici, alors on va le garder noir. Saisissez votre adresse e-mail. Poppins, 12 pixels réguliers. On doit tout arranger. Mais d'abord, nous avons besoin du bouton d'appel à l'action. Veuillez copier le bouton de registre à partir de l'en-tête. C' est pourquoi je voulais que le champ ait une hauteur de 40 pixels. L' arrière-plan est beaucoup plus grand. Mais pour la meilleure chance, vous aurez charge devrait toujours correspondre au champ, en particulier dans cette mise en page horizontale. Alors gardez ça à l'esprit. Vous pouvez utiliser cette information dans n'importe quel projet. Maintenant, parce que le fardeau est la moitié de la hauteur, cela signifie que nous aurons 20 pixels sur trois côtés, le bas et le côté droit. Ok, des trucs géniaux. Encore une fois, la gauche où nous avons notre texte n'est pas aussi précise, mais c'est bien pour le moment. Maintenant, pendant que je gère tout, laissez-moi vous en dire un peu plus sur ce formulaire. Pourrions-nous faire quelque chose de plus féminin ? Oui, peut-être. Mais la plupart des galeries de design qui montrent belles formes sont généralement plus grandes et elles ont besoin d'un peu de codage. Ce que nous avons conçu ici, c'est littéralement minutes. Cela dit, rappelez-vous que je suis à la fois un designer et le propriétaire d'entreprise dans ce cas, je me soucie de combien d'argent cela va me coûter. Mais si vous voulez m'impressionner avec une newsletter plus chic pour eux, s'il vous plaît allez-y et soyez créatif. Ok, quand tout est boutonné, voici le design. N' oubliez pas de tout regrouper. Ce formulaire, mais aussi la FAQ ci-dessus. Je pense que j'ai oublié de le mentionner dans la conférence précédente. Et avec ça, faisons une petite pause. 29. Comment concevoir un beau pied de pied: Bonjour et bienvenue. Concevons un beau pied de page. Cela va prendre du temps et de la patience. Alors s'il vous plaît, ne vous précipitez pas. Commencez par le rectangle 1920. C' est à peu près, oh, disons 4000 pixels de haut. Veuillez le centrer sur la toile et, comme d'habitude, désactiver sa bordure. Il y a une grande décision ici. Devrions-nous le rendre blanc, ce qui sera plus facile sur les yeux et plus féminin ? Ou allons-nous pour le noir, qui semble un peu plus froid mais plus haut de gamme, plus luxueux. Est-ce que la décision, comme avec une grille de produits, exécutera toutes les idées. Et on verra ce qu'il y a quand on les verra sur le Canvas. Commencez par les titres de chaque section. Pour l'instant, on va aller avec la version blanche. Poppins 16, semi-gras dans tous les casquettes. Je sais que nous utilisons ce traitement pour le menu principal, mais l'idée ici est de séparer le titre des éléments de menu réels. S' il vous plaît à gauche aligner le premier avec le guide gauche et laisser environ 50 pixels du haut, donner ou prendre. Bien sûr, le milieu devrait être centré sur le Canvas. Et le dernier, eh bien, nous verrons à ce sujet. Pour l'instant. Copiez les calques de texte maintenant. Ok, maintenant, ils devraient être montrés dans Poppins 13, semi gras et orange. Et c'est parce que ce sont tous des liens. Pour moi, l'utilisation de tous les bouchons en grandes quantités est par la fenêtre. Donc, même si le menu principal est affiché dans toutes les majuscules, je n'utiliserai pas toutes les majuscules ici dans le pied de page. Ce serait bien trop. Maintenant porte, laissez environ 20 pixels vides entre eux et le titre. Mais la chose la plus importante ici dans le pied de page est la hauteur de la ligne. il vous plaît augmenter jusqu'à 30 pixels, peut-être même plus. Et voici la chose que la plupart des designers semblaient ne pas savoir. En tant que propriétaire d'entreprise, vous devez publier certains liens, comme les termes et conditions de la politique de confidentialité, et beaucoup d'autres choses qui sont requises par la loi. Chaque pays est leur ami et vous ne connaissez peut-être pas toutes les lois. Mais ce qui est important est que vous donnez au client une place pour le, toutes ces informations avec certains designers font est qu'ils créent un mini pied de page. La ligne de dessin, ils ajoutent l'avis de copyright, et c'est ça d'un point de vue fonctionnel, ce n'est pas cool. Moins de ce que je sais que la plupart des agences de référencement voulaient ces longueurs. Maintenant, peu importe ce que vous ressentez à ce sujet, je pense à la nourriture qu'ils devraient avoir au moins trois colonnes et qu'il devrait avoir au moins 250 pixels de hauteur. Ok, pour la colonne du milieu, voyons ce qu'il y a. Je veux ajouter, une présentation pour les influenceurs et une autre pour les propriétaires d'entreprise, une présentation PDF. Maintenant, ce devraient être des boutons. Commençons donc par un simple rectangle. 300 par 50 devrait être de bonne taille, un peu plus grand que nos appels réguliers à l'action. Mais c'est parce que je veux une grande étiquette. Tout d'abord, désactivez la bordure et arrondissez les coins et évidemment la rendre orange. Il a la particularité. J' espère que vous vous êtes habitué au panneau des actifs. Si vous venez de Photoshop, je sais qu'il est un peu difficile de ne pas avoir le panneau des calques visible en tout temps. Mais après un certain temps, vous vous y habituez. Ok, voici le label pour les influenceurs qui font la promotion des Overs. C' est un prononcé au fait. Cela doit être centré et aligné en haut avec les colonnes du côté gauche. Ok, et voici un petit détail. Il y a un lien Dropbox derrière ce bouton. Et comme il s'agit d'un fichier PDF hébergé sur Dropbox, cela signifie que je peux facilement ajuster sans avoir à modifier le lien. Je sais que cela ressemble à une petite chose, mais compte tenu de la plate-forme sur laquelle ce site est construit, ce travail a beaucoup de sens. Ok, dupliquez le fardeau. Et pensons au style. Une situation délicate ici, un bouton noir n'est pas une bonne idée. Nous l'avons vu dans la liste des produits. La marque qui a une nuance de bleu, mais ce n'est pas une belle. Pour l'instant, je vais prendre le risque de trouver une nouvelle couleur par moi-même. Considérant que cela va plus loin, cela devrait être d'accord avec la plupart des clients. Oh, au fait, laissez 20 pixels entre les deux fardeaux. On a beaucoup de place ici, donc il n'y a pas besoin de les regrouper ensemble. Ok, passons aux coordonnées que j'ai préparé mon bloc-notes. Cette colonne doit être montrée dans Poppins, leur doyen régulier. Ce sont des textes simples, donc pas besoin d'être plus grand ou gras ou toute autre couleur. Je pense que c'est l'une des plus grandes erreurs que les débutants font souvent. Les superdimensionner leurs calques de textes. Tout est énorme, doit être élégant et raffiné. Le x qui dépasse 16 pixels n'a généralement pas l'air bien. Et voici une autre chose. Pendant que je travaille en arrière-plan. Voyez à quel point cela a l'air agréable et équilibré. On aurait pu placer, travailler ensemble du bon côté. Mais alors, nous aurions perdu une partie de cet équilibre. Souviens-toi, nous avons le contrôle total. Alors agissons comme ça. Pour le texte à droite, Poppins 13, semi-gras et en orange. Cela doit être juste la ligne pour qu'il corresponde à notre guide. Au fait, avez-vous remarqué à quel point ces guides nous ont aidés ? Sans eux, nos vies auraient été beaucoup plus difficiles. Le pied de page est un bon endroit pour ajouter de la créativité. Assurez-vous simplement que c'est quelque chose qui ne prendra pas beaucoup de temps en termes de coûts de développement. Les choses vont très bien. Mais je veux ajouter quelque chose que j'ai divisé qui va à travers la zone active. C' est quelque chose que je fais depuis quelques années et je pense que cela fonctionne très bien dans presque toutes les situations. La ligne devrait être d'un pixel alors. Et dans ce cas, je pense que nous allons utiliser le ping que nous avons utilisé absolument partout. Maintenant, ok, pour la distance, assurez-vous d'utiliser la même quantité que ci-dessus. Donc, si vous êtes allé pour les 50 pixels là-bas, 50 va fonctionner ici aussi. Ok, Cool. Maintenant, enfin, de chaque côté, je vais ajouter un peu de texte. L' avis de droit d'auteur, qui a fait le dessin et ainsi de suite. Ce n'est pas obligatoire, mais c'est un autre endroit pour les longueurs. Et nous allons montrer ceux-ci et Poppins 12 pixels réguliers. Donc ça n'attirera pas votre attention. Et après la mort, alors la page d'accueil est terminée. Bien sûr, nous devons tout regrouper et couper l'espace excédentaire par le bas. Ce sont tous les détails qui s'additionnent, alors s'il vous plaît ne vous précipitez pas. Je sais que vous êtes pressé de finir et de passer à la version mobile, mais prenons notre temps avec. Avant de terminer, j'ai remarqué que certaines personnes se sont plaintes de la qualité des PNG qui sortent d' Adobe XD à partir de ce qu'elles gèrent les conceptions de stand exportées, car les PDF semblent plus nets, beaucoup mieux que les PNG. Encore une fois, il y a de très bonnes chances que vous n'ayez pas ce problème. Mais son mieux que vous savez à ce sujet, Adobe XD est mis à jour très souvent et qui vient à la fois positifs et négatifs. Ok, finissons dans la prochaine conférence. 30. Variation finale et réflexions sur la page de la page d'accueil: Bonjour et bienvenue à la dernière leçon sur la page d'accueil. Je vais en créer une copie et je vais rapidement changer le schéma de couleurs pour le plus loin du blanc au noir. Maintenant, eh bien, j'ai géré ça. Permettez-moi de vous dire mon impression de la conception globale. Je pense que c'est plus féminin que l'ancien design. Pas de question à ce sujet. Ce tocar boutons semble être un meilleur choix par rapport à une icône. L' ancienne fonctionnalité Nikon, cependant, pour être juste, je connais très bien mes analyses. Mon taux de conversion était de 4 à 5 % au cours des trois derniers mois. Maintenant, vous pouvez trouver ça étrange. Si le taux de conversion est si élevé, la moyenne de l'industrie est de 2 %. Au fait. Pourquoi le risquer avec une refonte ? Eh bien, je veux le tester. Je veux voir si je peux aller plus haut, mais aussi présenter mes produits d'une meilleure façon. Et si vous tenez compte du coût, cela va très probablement me causer 200$ en termes de codage. Et c'est une très petite quantité parce que je n'ai pas introduit de changements majeurs. Tout ce que nous avons conçu peut être fait à travers du code CSS pur. C' est pourquoi le coût est si bas, et c'est pourquoi, fondamentalement, c'est gratuit. Si cela fonctionne mieux que fantastique, si ce n'est pas le cas, je peux facilement revenir. De plus, je n'utiliserai pas une grande entreprise de développement. Au lieu de cela, j'utiliserai un pigiste pour réduire le coût. Nous avons déjà une bonne relation, donc c'est gagnant-gagnant. Ok, après tout est dit et fait, voici le pied de page noir. Maintenant joué le design, utilisez l'option Play en haut à droite et aller et en arrière. C' est vraiment délicat. Je ne sais pas vraiment quel est le meilleur. Mais je suis John juste un peu plus à la version légère. Peut-être que c'est 55 contre 45. Donc c'est vraiment, très proche entre eux. Je ne suis pas sûr. Quoi qu'il en soit, lorsque vous effectuez un zoom arrière et que vous voyez l'ensemble du design, nous pouvons voir que le pied de page noir est lié à la barre supérieure noire. La plupart des entreprises de mode utilisent également ce style, barre supérieure noire et pied de page noir. Mais ça peut être un peu trop dur pour la plupart des femmes et pour ce que j'essaie de faire ici. Considérant que AT pense que je vais rester avec une version blanche. Oui. D'accord. Allons avec la version blanche. Je suis vraiment curieux de ce que vous allez créer, mais je veux prendre un moment et vous rappeler, s'il vous plaît ne comptez pas sur votre imagination. Vous n'avez pas passé en revue les principes de conception. Alors s'il vous plaît n'essayez pas de créer quelque chose de ce monde. Cherchez de bonnes idées et mettez-les en œuvre. Mais s'il vous plaît, n'utilisez pas votre imagination. Ok, je te verrai après la pause. Nous avons la page produit, la poignée, puis la version mobile pour les deux pages. Merci. 31. Analyser comment nous pouvons améliorer la page de produits: Salut, voici Chris, bienvenue à notre projet. Dans cette refonte, notre objectif principal est de rendre l'ensemble plus féminin et haut de gamme. Et je suis très heureux de le dire. Merci, nous avons réussi à le faire avec cette conception de page d'accueil. Maintenant, la question est, comment pouvons-nous améliorer la page produit ? Eh bien, pour la version de bureau, je pense que nous ne ferons pas grand-chose. Et c'est parce que la modification de police sera probablement la plus grande édition. La structure est bien. Mais autrement dit, je ne vois aucun moyen de l'améliorer. Je l'ai lu il y a quelques mois. Cela dit, je pense que nous pouvons faire un peu de travail au sommet où ces icônes des médias sociaux n'aident pas autant. Plus que cela, je pense que la plus grande différence va être faite sur la version mobile de cette page. Et c'est parce que 90% du trafic du site provient des téléphones mobiles. Il y a beaucoup à faire là-bas, mais nous devons d'abord nous occuper de la version de bureau. Sans elle, nous pouvons créer la version responsive. En ce qui concerne le reste du projet. Contactez-nous, la page de paiement. Elles sont géniales comme elles sont. Je ne risquerais pas de changer quoi que ce soit parce qu'ils fonctionnent bien comme ils sont. Heureux d'être honnête, j'ai apporté plusieurs changements au processus de paiement assez récemment, donc il y a peu que je puisse faire pour le rendre encore meilleur. Je suis toujours en train de recueillir de nouvelles informations auprès de Google Analytics afin de suivre les logiciels. Mais encore une fois, le fait est que nous ne concevons pas ces pages. Mieux vaut dire qu'on ne les redessinera pas. Avec ça. Compris. Faisons une copie de la page d'accueil, celle avec le pied de page blanc, et s'il vous plaît supprimer tout le contenu au milieu. Donc, fondamentalement, nous allons être laissés avec une partie supérieure et inférieure de cette conception. Nous devrions également changer le menu principal. Nous ne sommes plus sur la page d'accueil. Au lieu de cela, nous passons aux produits. Rendez cet élément de menu orange et repositionnez la ligne en dessous. Ok, la page produit est importante dans le sens où elle contient beaucoup d'informations, comment nous la structurons est clé. C' est là que les ventes sont faites ou perdues. Nous devons être clairs sur ce que nous devons présenter, quelle manière et dans quel ordre. Il y a beaucoup à décompresser ici, mais s'il vous plaît soyez patient et attendez la version mobile où nous allons entrer dans beaucoup de détails. Pour l'instant, prenons une étape par étape. Nous allons faire une pause et ensuite nous allons continuer avec la version de bureau, qui devrait être faite en quelques minutes, probablement quatre ou cinq vidéos au maximum. Allons-y. 32. Configurer la mise en page de la partie supérieure de la page de produit: Bonjour et bienvenue. Les listes configurent tout en ajoutant un rectangle de 1200 pixels de large. Quant à la hauteur, allons-y avec 300 pour l'instant. Les prochaines étapes sont le classique. Ils devraient être à 100% dans votre mémoire. Centrez d'abord et avant tout, puis activé la couleur de bordure qui pense pour le rayon de coin, qui est 15 pixels. Enfin, pour cette position, j'ai pensé à utiliser 10 pixels pour le garder aussi compact que possible, mais je pense que cela va sembler bondé. Donc 20 jours. La galerie qui est actuellement sur le côté gauche, je pense que c'est les positions classiques, donc je ne vais pas la changer. Je vais le garder tel qu'il est. Ce que je veux changer, c'est l'espace vide autour de ça. Je ne pense pas vraiment que ce soit nécessaire. Alors faisons ça. Dupliquons ce rectangle et redimensionnons-le. Change la couleur, bien sûr, à n'importe quel gris aléatoire. Et pensons à la taille. Il se termine par votre expérience a besoin d'entrer en jeu. Pensez à ce que nous avons fait sur la page d'accueil et si possible, respectez ce rapport d'aspect. Et c'est parce que vous ne voulez pas la photo courte et large sur une page. Ensuite, vous allez en carré un sur la deuxième page, directement sur la page de détails du produit. Ça n'aurait pas beaucoup de sens. Maintenant, si nous regardons notre grille, je vais la photo était 380 pixels de large et 250 de haut. Commençons par ça. Et en fonction de la façon dont notre contenu va s'adapter, agrandir, ou peut-être en faire 300 ou tout ce qui est nécessaire. Ok, donc c'est 250. Maintenant, n'oublions pas les coordonnées arrondies. Évidemment, le côté droit devrait être carré. Alors prenez un moment et gérez ça. J' ai vu un bon nombre de modèles où cette partie est juste ignorée et c'est une erreur d'exécution claire. S' il te plaît, ne fais pas ça. Donc, cela devrait être 15, 0, 0. Au fait, j'expérimente constamment mon design étiqueté. Ne soyez donc pas surpris si le site web en direct a un design d'étiquette totalement différent. Ok, des trucs gris. Passons au titre. Copiez coller cela et pensons à la taille. La FAQ sur la page d'accueil a été montré dans Poppins 26 bot serait. Je suggère qu'on utilise la même chose ici ? C'est notre H1. En passant, sachez que nous pourrions potentiellement ajouter ce style ici dans le panneau d'actifs, puis l'appliquer de la même manière que nous avons appliqué les couleurs d'en haut. Pour les grands projets, j'utiliserais probablement des composants ce que mes boutons, l'en-tête, et ainsi de suite. C' est parce que si je veux mettre à jour quelque chose, les composants me permettraient de tout éditer en une seule fois. Cela dit, bien que ces fonctionnalités m'aient aidée à travailler plus vite que les coins coupés, je préférerais le prendre plus lentement et vous montrer tout pas à pas, l'ancienne méthode. Je veux juste que vous sachiez que XD a plein de trucs de fête, plein de façons de rendre votre travail plus rapide. S' il vous plaît voir ma masse de classe XD si vous êtes intéressé par cela. Retour aux feuilles mouillées, feuilles, 50 pixels entre le titre et la photo, et probablement 50 des deux premiers. Maintenant, c'est beaucoup, mais nous allons ajouter la chapelure ensuite. Breadcrumbs sont utiles à la fois en termes de référencement, mais ils aident également à guider l'utilisateur. Cela montre où vous êtes sur le site Web. C' est quelque chose de assez vieux, mais il est toujours utilisé de nos jours. Poppins réguliers 11 pixels. Mais les deux premiers éléments devraient être des liens. Cela signifie qu'ils devraient être semi-gras et orange. En passant, sur la page d'accueil pour la description principale, avons-nous utilisé gras ou demi-bol pour le lien ? Je ne suis pas sûr, mais en considérant avec l'utilisation semi gras ici et c'est ce que nous avons fait pour l'avenir. Je pense que nous devrions le mettre à jour, car encore une fois, la cohérence est très importante. Très bien, tout va bien. Continuons en ajustant les espacements ici, 20 en haut et entre eux. Eh bien, je ne suis pas vraiment sûr. Allons avec seulement quelques pixels parce que nous avons plein de choses à ajouter. Prenons la note du produit rouge et amenons-la ici. S' il vous plaît rappelez-vous que nous avons tout regroupé donc nous devons contrôler le noir. Et puis nous pourrions devoir appuyer sur la touche Escape quelques niveaux parce que évidemment nous avons un groupe à l'intérieur du groupe. Donc encore une fois, prenez votre temps avec elle et si possible, utilisez le panneau des calques. Ok, quand vous aurez fini de positionner, il faudra appliquer le tableau rose. Maintenant, la question est : devrions-nous le laisser comme il s'agit d'une étoile ? Qu' est-ce qu'on prolonge ça ? Et je dis que nous l'agrandissons parce que cela ne rompt pas la cohérence. C' est le même design sous une forme légèrement différente qui est basé sur son environnement. Maintenant, ça va prendre un peu d'aller-retour, mais il n'y a rien de spécial. Rappelez-vous juste de garder la même distance entre les étoiles et bien sûr, centré les verticalement. Et tu sais quoi ? Lorsque vous avez terminé, veuillez ajouter cette couleur jaune au panneau Actifs si vous ne l'avez pas déjà fait, cela pourrait être utile plus tard. La question est : Pourrions-nous placer cet élément ailleurs ? Eh bien, j'adorerais te voir essayer. Permettez-moi de vous dire que vous ne devriez pas le placer à droite du titre parce que certains titres sont évidemment plus longs et d'autres plus courts. Ce que tu pourrais faire, c'est essayer de le placer à droite de la chapelure. Mais je ne suis pas sûr que ça marcherait trop bien. Au-dessus de la photo AT pense que c'est un dur non. Donc, pour résumer, je n'ai pas de meilleure idée pour l'instant, donc je vais la laisser telle qu'elle est. Ok, prenons une petite pause et nous continuerons dans un instant. 33. Comment organiser de nombreux informations dans la page du produit: Bienvenue à notre projet. Nous avons quelques éléments ici, mais il y a beaucoup à ajouter. Voici la chose dans le site existant. Il y a un extrait ici qui dit toujours la même chose. Sans sucre ajouté, sans emballage en plastique. Les travaux, c'est ça ? Parce que je suis le client. Je sais quelle est la raison derrière ça. L' idée est que les gens sur le chat en direct continuaient à poser les mêmes questions encore et encore. Livrons-nous dans l'ADC ? Ok, et NCBI ? Et la réponse était toujours la même. Nous livrons tout le pays. Suivant. Contient-il du lait de capot ? Non, c'est monumental parce qu'on a toujours eu ces questions. Je les ai ajoutés ici. Mais je pense qu'il y a un meilleur moyen de montrer ce genre d'information. Utilisons une coche. J' en ai déjà un de flat icon.com. Tout ce que nous avons à faire est de le redimensionner à 16 pixels ou de penser et de le rendre noir. A gauche, alignez-le avec tous les autres éléments, et je vais le décomposer. Tout d'abord, s'il vous plaît noter combien il est important que nous alignons tout correctement. C' est comme si nous avions des lignes verticales qui traversent tout le design. C' est en fait une vraie banque et ça s'appelle la grille. Je n'utilise pas vraiment de grille et je ne peux plus dire que j'ai recommandé parce que, vous savez, pour les débutants, cela vous éloigne de la conception réelle pour les utilisateurs avancés. Eh bien, vous avez déjà ces lignes, ces lignes verticales dans votre esprit pendant que vous travaillez. Ok, revenons au texte, Utilisons les deux habitués. Et je vous suggère de regrouper ces deux-là pour qu'on puisse les distribuer facilement. Lorsque vous créez des groupes, il est beaucoup plus facile de les distribuer. Au départ, je voulais seulement trois articles, mais parce que cette zone est si large, je vais aller avec le sexe. Bon, revenez à la couleur des coches. Nous pourrions utiliser le vert parce que c'est comme cela qu'ils voient généralement qu'ils écrivent une coche verte. Le vert implique que tout va bien, d'accord ? Et vous pourriez être tenté d'utiliser du vert et de dire quelque chose comme, hé Chris, vous savez, le vert est frais. Tout est sur la nature, est dans cette nourriture saine, tout au sujet de cette alimentation saine est égal au vert ? Oui, vous auriez raison. Mais les principes qui sous-tendent notre conception, notre essentiel, avons-nous du vert ailleurs ? Non. Est-ce qu'il correspond au schéma de couleurs actuel ? Non. Devrions-nous modifier le schéma de couleurs pour le rendre adapté ? Eh bien ? Non, pas vraiment. Je veux dire, nous ne pouvons pas vraiment changer cette orange puisque ce sont les marques qui veulent dire couleur, pas plus que nous ne pouvons changer tout le noir que nous avons utilisé. Ok, alors tu pourrais dire, faisons-le orange. Le repos sera plus agréable comme ça. Eh bien, oui, peut-être que ça va être plus agréable. Mais y a-t-il une action ici ? Non, tu ne peux pas les récupérer. Mais plus que ça, la chose la plus importante est que ça aura un bouton Ajouter au panier ici, non ? Devinez quelle couleur ça va être ? Orange, bien sûr, avec environ le contrôleur de quantité. Yap, probablement orange aussi. cette raison, nous ne voulons pas de compétition. Nous avons une photo sur la gauche qui défilera automatiquement et il y aura beaucoup de couleur ici. Las, on a de la chapelure et des étoiles. C' est la raison pour laquelle nous voulons garder les choses simples. Retour au design. Il est assez clair que cette hauteur ne va pas marcher. Augmentez-le à 280. Sélectionnez les deux formes et insérez cette nouvelle valeur. Nous la cultivons peu à peu afin que nous ne modifions pas trop le rapport d'aspect de la photo. Ok, Maintenant, copions le fardeau de l'en-tête et placez-le près du bord inférieur droit pour rester cohérent. Je garderai la même taille, pour être juste. Ce ne serait pas une grosse affaire si nous utilisons le bouton de taille différente. Je veux dire, même SSID là, ce bouton plus petit pour l'en-tête et le plus grand pour l'appel à l'action de la zone du héros. Ok, voilà un tour soigné. Supposons que vous voulez ajuster ces six coches, mais il est difficile de les sélectionner. Même si nous les avons en groupes. Vous pouvez cliquer sur le rectangle blanc sur le rectangle de base et utiliser Control L. Avec le L signifie la serrure. Maintenant, vous pouvez les sélectionner et les déplacer. Des trucs faciles. C' est lourd, peut déplacer des tas de choses sans détruire votre mise en page. Lorsque vous avez terminé, utilisez Control L encore une fois, ou cliquez sur cette icône pour le déverrouiller. mort de Gray. est l'heure d'une pause rapide et on finira ça. 34. Comment ajouter de petits détails qui font la différence: Bonjour, bonjour. Je veux m'assurer que nous prenons notre temps avec cette refonte et que nous faisons un excellent travail. J' ai cherché une icône pour la galerie pour montrer à l'utilisateur qu'il peut l'agrandir, rendre blanc pur, et la redimensionner à 16 x 16 pixels. Je ne sais pas si ça va être assez visible pour toutes les photos, mais je vais prendre le risque. Je ne suis pas un grand fan de l'ajout de bordures ou même des ombres sur ces types d'éléments. Parce que je contrôle directement toutes les photos. Je vais m'assurer que je vais toujours avoir un fond sombre pour la position à 20 pixels du bord est totalement bien. Donc, c'est ce que le bon côté, un petit détail, mais cela aidera à la fois l'utilisateur et le développeur quand il arrivera à travailler. Pour l'autre côté, je veux les données de ligne qui montrent le nombre de photos disponibles. Utilisez l'outil Ellipse pour que huit pixels par huit devrait être assez bon. Le premier devrait être rendu orange pour indiquer qu'il s'agit de la position actuelle. Alors que les autres, peut-être trois ou quatre, peuvent être blancs. Ok, de bonnes choses. Lorsque vous avez terminé avec cela, veuillez les regrouper et placer ce groupe 20 pixels à partir des bords gauche et inférieur. Des trucs classiques. Voilà le truc. Nous n'aurions pas pu ajouter, l'état actif du menu principal. Tous ces petits détails s'additionnent, et je vous encourage à aller plus loin. Cela vaut 5% d'effort supplémentaire pour la conception de 20 pour cent meilleure. Vos clients aimeraient le design plus. Le développeur vous appréciera plus. Et vous savez quoi, même si cela n'arrive pas, c'est toujours une entrée pour votre portefeuille. Donc, vous devez vraiment mettre les choses en perspective. Ok, on en a fini avec cette partie. Nous allons gérer la quantité. Nous utiliserons les mêmes symboles plus et moins de la page d'accueil de la section FAQ. Copiez-les et voyons ce qu'on peut faire avec eux. Je vais utiliser le contrôle Shift click parce que le deuxième élément est dans un groupe, donc expédié seul ne ferait pas la piste. D' accord. Prenez votre temps avec elle, en les sélectionnant. Et c'est pourquoi j'ai dit au début du cours que vous devriez le regarder deux fois. Une fois pour comprendre ce qui se passe, et une seconde fois pour travailler parce que la base est assez élevée. Ok, s'il vous plaît, faites-les tous les deux orange et redimensionnons à 32 x 32 pixels. Maintenant, vous pourriez poser des questions sur ces changements. Pourquoi ne pas rester cohérent, non ? Avec changer à la fois la couleur et la taille ? Eh bien, bien que ceux-ci ressemblent, ils remplissent une fonction très différente. Pour vous dire la vérité, nous aurions pu remplacer les symboles FAQ par des flèches. Donc ce ne serait pas une question à ce sujet. Mais c'est la raison pour laquelle nous appliquons un style différent. Ceux-ci ont une fonction totalement différente par rapport à la section FAQ. Donc, parce que c'est une chose différente, c'est pourquoi nous appliquons un style différent. Juste au cas où l'arrière-plan causerait des problèmes pour vous. N' oubliez pas que vous pouvez le verrouiller entre ces deux éléments. Je vous suggère de laisser ce que les Pexels aussi pour le texte entre eux. Eh bien, je pense que Poppins 26 régulier. J' utiliserais audacieux parce que c'est peut-être un peu mieux, mais je pense que c'est un peu trop gros pour être honnête. Même le titre semble un peu trop épais. Je pense à le changer en semi-gras, mais nous pourrions expérimenter avec ça plus tard. S' il vous plaît regrouper ces trois quand vous avez terminé. Pour le prix, ajoutons-le. Dans mon pays, la Roumanie, C'est une chose courante de voir le poids du produit juste à côté du coût. Nous utilisons beaucoup l'euro, mais nous avons toujours notre propre monnaie. Ok, Pour le formatage 22 pixels, semi-gras pour la première partie. Puis 14 pixels réguliers pour le poids réel. C' est là que les choses deviennent intéressantes. On a beaucoup d'espace vide ici. Nous devons nous assurer que tous ces articles sont tous sur la même ligne, bien sûr. Mais voici ce que je propose et c'est un grand changement après avoir ajouté le produit au panier. Nous allons avoir un fardeau ici qui vous amène à la page de paiement. Laisse-moi gérer ça en faisant une copie de ce bouton. Cette idée est venue à moi et avec l'exécution bonne parce que c'est comme ça que vous devriez penser. Ça devrait marcher. Si vous avez une idée, voyez à quoi ça ressemble. Maintenant, je pense que nous allons utiliser le même bleu que dans le pied là-bas. Pourquoi est-ce une grosse affaire ? Ce bouton ? Eh bien, dans la vierge existante, l'icône du panier n'est affichée que dans l'en-tête. En fait, nous ne l'avons même pas inclus ici parce que je pense qu'il n' apparaît que sur l'ancien site Web lorsque vous ajoutez le produit à votre panier. Maintenant sera sûrement inclus dans la version mobile cependant. Quoi qu'il en soit, revenant à ce fardeau, au lieu d'ajouter un autre rectangle sous l'en-tête, je pense que cette solution est un peu meilleure. Ce bouton bleu ici. Je l'ai également vu sur plusieurs sites Web. Donc je pense que c'est une bonne idée. Dans l'ensemble, c'est ce que je propose pour la page de détails du produit. Eh bien, la partie supérieure de toute façon, il y a encore plus à faire, mais c'était la partie la plus essentielle. Les domaines en dessous de nos façons année et il est juste une question de, de styliser certaines polices. Qu' en pensez-vous ? Vous en êtes satisfait ? Encore une fois, je meurs d'envie de voir ce que tu trouves. 35. Comment traiter de grandes quantités de texte: Bienvenue à notre projet. La partie supérieure est faite et je suis assez heureux avec elle. Allons vers le bas et nous allons créer les deux colonnes. Voici les mathématiques, 1200 pixels avec un écart de 20 pixels. Donc c'est 1180. Je pense à 330 pour la barre latérale et le reste pour la colonne principale. Et c'est 850. Ok, prends l'outil rectangle et mettons-nous au travail. Donc 850 par, disons mille, mille pixels pour la hauteur h devrait suffire. S' il vous plaît aligner cela à gauche avec le guide et arrondir les coins à 15 pixels. En passant, l'unité de mesure n'est pas affichée ici dans Adobe XD parce que tout est en pixels. Adobe XD est uniquement destiné aux produits numériques. Dans Photoshop, vous pouvez évidemment imprimer vos dessins afin d'avoir plus d'unités de mesure à choisir. S' il vous plaît, appliquez le trait rose et définissons le titre sur ce travail. Ok, laisse-moi parler de la hiérarchie, de la version ultra-courte. Le titre principal est montré dans Poppins 26 ball, non ? Est le titre secondaire aussi important, ne l'est évidemment pas. Alors nous ne pouvons pas utiliser la même taille que nous avons besoin de la plus petite. Mais comment petit bois 24 et travailler ? Non, parce que ce serait trop similaire pour la personne moyenne. Les titres pourraient être les mêmes entre 2006 et 2004. C' est fondamentalement la même chose. C' est pourquoi nous allons passer avec 22, parce que c'est clairement différent, c'est clairement plus petit. Et c'est la hiérarchie en un mot. Placez-le 30 pixels à partir des bords supérieur et gauche alors qu'ils sont DNR 20. Ce que nous utilisons pour l'écart, parce que nous avons beaucoup de place ici et ce serait dommage de ne pas rendre le design aéré. OK pour le corps du texte, c'est évidemment super important. Basé le premier paragraphe et moins vérifier la mise en forme. Je suggère 14 pixels comme nous l'avons utilisé avant, régulier et pour la hauteur de ligne, 23, laisser environ 10 pixels entre le texte et le titre. Ça devrait suffire. J' ai aussi une vidéo ici qui doit être montrée. J' ai donc préparé la capture d'écran que vous pouvez faire glisser. Gardez à l'esprit, ce n'est pas une bonne idée de faire des vidéos publiées centre commercial. La mise en page ne semble pas fonctionner si bien lorsque vous divisez cette section en quelques parties. Par exemple, la vidéo à gauche et le texte à droite. Vous pourriez potentiellement rendre les moyens vidéo plus petits, et cela peut fonctionner mieux, mais je préfère cette disposition pleine largeur. Je pense que ça a l'air mieux. D' accord, accélérons ça parce qu'on a encore beaucoup de choses. La poignée. Pour le reste du corps des textes, nous devons nous assurer d'inclure le lien et un autre titre. Si vous êtes familier avec HTML, le titre principal du haut est considéré comme le H1. Le titre 22 pixel est H2, et nous avons besoin d'un H3 aussi. Je suggère Poppins 18 semi-gras. L' idée est que vous comprenez cette importance simplement en les regardant. Il ne devrait pas y avoir de confusion sur ce qui est le plus important. Ok, au fait, vous devriez augmenter la base, les rectangle 1 mille pixels à environ 1300 environ. Assurez-vous simplement de laisser un espace de 20 pixels du pied de page. Vous pourriez également avoir besoin d'ajuster notre planche, mais prenez votre temps avec elle. Ce n'est rien de compliqué. Tant que vous êtes à l'aise avec le défilement du contrôle et appuyez sur la barre d'espace pour vous déplacer, vous devriez aller bien. Inutile de dire, s'il vous plaît utiliser les deux mains en tout temps. C' est évidemment critique. D' accord. Et avec ça, faisons une pause rapide et nous continuerons dans un instant. Merci. 36. Créer la barre de notes: Hé là, bienvenue. Prenons l'outil rectangle et commençons à travailler pour la barre latérale. Nous avons déjà dit que la largeur de cet élément doit être 330. La hauteur, eh bien, environ 500 pixels pour commencer, devrait être bonne, arrondie et appliquer la bordure. Comme toujours, je voulais une conférence spéciale sur la barre latérale parce que cela peut confondre certaines personnes. Commencez par un titre qui dit ingrédients. Cela devrait être défini dans Poppins, 13, semi gras tous les casquettes. Ce sera sur H4. Ils ont dit 20 pixels du bord. Et c'est là que les choses commencent à changer par rapport à la colonne de gauche. En descendant les ingrédients réels, Poppins 13, régulier avec la hauteur de ligne de 21. Mais à gauche, nous utilisons 14 pixels avec une hauteur de ligne de 23. Alors pourquoi coiffons-nous obtenir différemment ? On ne rompt pas la cohérence ? Devrions-nous maintenir notre style ? Vous avez raison. Nous devrions maintenir notre style, par exemple, en termes de comment un lien comme étant montré. Ou si nous appliquons un traitement All caps sur un seul bouton, nous devrions l'appliquer partout. Mais ici, il se passe quelque chose d'autre. Encore une fois, tout est question de hiérarchie ou d'importance. Voilà ce qui se passe. La plupart des gens se décideront si l'acheteur hoche la tête de cet élément au sommet. Quelques-uns pourraient regarder ici à gauche et seulement une poignée de personnes regarderont la barre latérale. Je sais que vous n'êtes peut-être pas d'accord avec cette déclaration, mais c'est tout à fait bien. Vous êtes peut-être l'une de ces personnes qui regardent la table nutritionnelle d'abord et avant tout. Bien sûr. Je comprends. Ce ne sont pas des exceptions. Mais la plupart des gens scannent la page et il est très probable que Dale se comporte comme je l'ai décrit. Parce que c'est une priorité faible, nous devons montrer cela aux choix de conception Web. C' est pourquoi le texte est plus petit. C' est pourquoi il n'y a pas un plus grand rembourrage comme de l'autre côté. Mais la largeur elle-même, seulement 330 pixels, devrait vous indiquer que votre espace est limité et que vous ne devriez pas exagérer avec votre rembourrage. Je vais continuer à travailler. Mais voici une chose dont vous devriez vraiment être conscient. Dans le tableau réel. Vous devez augmenter la hauteur de la ligne de beaucoup. Si le texte est régulier de 13 pixels, passez avec au moins 30 pour la hauteur de la ligne. D' un autre côté, si vous envisagez d'utiliser 40 ou même plus que cela, vous pourriez avoir besoin de la division là pour chaque rangée. Si vous voulez le design moderne, vous devriez garder les lignes au minimum. Donc pas de séparateurs. J' aime ajouter deux lignes pour la tête de la table, mais c'est à peu près ça. Lorsque vous commencez à inclure des lignes pour chaque ligne B à la ligne solide ou à la ligne pointillée, la conception commence à s'encombrer. Moins de décoration est la voie à suivre dans les sites web d'aujourd'hui. Dans le passé, quelque part en 2010 vieux. Nous avons donc adoré ajouter toutes sortes de détails. Burdens en particulier avait tant d'effets brillants, effets 3D, d'ombres et de biseaux et toutes sortes de choses. Ça ne fait pas de toi un designer. Tu ne devrais pas avoir peur de garder ça simple. Certaines choses que nous sommes les mieux sous cette forme la plus simple. Pensez à cette table comme un tee-shirt blanc. Gardez-le bien et propre. Celui, une jolie veste, des stylos qui vous vont bien, et ensuite vous aurez une belle tenue. Mais ce que les débutants ont tendance à faire, c'est qu'ils veulent que chaque élément soit effacé. Mais si chaque élément a beaucoup de détails, votre tenue va sembler désordonnée, va être de crier. Pour cette raison, n'exagérez pas avec les autres paquets. Ok, c'est une table nutritionnelle bizarre. Une idée pour la variation de prêt est de montrer le nombre de calories d'une manière plus grande police, peut-être avec les glucides, les protéines et les graisses. C' est une façon d'y arriver. Vous pouvez également avoir un bouton qui change la table par 100 grammes ou le pour le pot entier. Cela peut être intéressant aussi, mais je vais vous laisser ça parce que je veux déplacer ce mot avec un design réactif. Merci de rester avec moi jusqu'à ce point. Je te verrai dans un instant. 37. La première clé de devenir un grand concepteur de Web: Bienvenue dans la première partie de ce qui rend un web designer génial. Et c'est une exécution parfaite en pixel. Pour rappel rapide, c'est la base de tout concepteur d'interface utilisateur et vous ne devriez pas aller de l'avant sauf si vous êtes compétent que ce département. Permettez-moi de vous montrer rapidement ce qui est ce que vous pouvez attendre de ce cours. Voici ce que j'appelle des erreurs d'exécution. contraste approprié avec un format de texte étant des composants surdimensionnés, éléments qui ne correspondent pas à un espacement inapproprié pour les choix de police, manque de cohérence, des fautes d'orthographe ou des fautes de frappe, des combinaisons de couleurs inférieures, des photos incorrectes, des mises en page non standard manque de symétrie et d'équilibre, plus quelques autres. Maintenant, je sais que c'est le lot qu'ils sont à nouveau, mais nous aurons plein d'exemples qui éclaireront tout. En ce moment, il est extrêmement important que vous compreniez que ceux-ci sont essentiels. Vous devez ignorer ces deux autres piliers. Nous ne parlerons pas de créer beaux designs et Phil pourra les exécuter correctement. La précision est la clé et toutes ces erreurs peuvent être évitées en étant en mesure de les reconnaître. Il aura aussi quelques exercices ici et là. Mais la clé à emporter ici est pour vous de prendre notes mentales et de réaliser que ce sont les graves erreurs. En étant en mesure de les repérer, vous améliorerez considérablement vos projets. Le but de cette section est de vous mettre dans cet état d'esprit où vous pouvez repérer les erreurs mineures avec facilité, son entraînement glutamine pour rechercher des choses spécifiques. Alors mettons-nous au travail. 38. Meilleurs paramètres de un projet de conception Web: Bonjour et bienvenue à cette conférence où nous parlerons de ce que je considère comme les meilleurs paramètres pour le projet de design web. Maintenant gardez à l'esprit que rien n'est écrit dans la pierre. Ceci est un guide basé sur mon expérience. Alors s'il vous plaît gardez cela à l'esprit. Et jamais demandé pour les mesures comme, Chris était la meilleure taille pour le menu principal. Et le titre ? Celles-ci n'existent pas. Mais voici ce que vous devez savoir. Pour la hauteur minimale, 1200 pixels est une bonne règle de base. La hauteur maximale, je dirais pas plus de 8 mille pixels parce que vous voulez rarement que les gens défilent autant. Pour la largeur totale, je vous suggère d'utiliser 1920, rien d'autre. Quant à la zone active, je considère 1200 pixels comme le meilleur choix de loin pour la grande majorité des projets. Maintenant, c'est l'amour et les chiffres, mais laissez-moi vous expliquer. Donc voici une autre planche qui est 1920 d'ici 1080. Cette taille est ce qu'on appelle Full HD et est la résolution de bureau la plus populaire au monde. Cela signifie que si vous travaillez à cela et que vous regardez le design à 100% niveau de zoom, vous aurez à voir le projet pour faire vos yeux des visiteurs. C' est incroyablement important. Vous devez analyser votre conception en tant qu'utilisateur final. Tu ne veux pas le voir à son meilleur côté. C' est pourquoi je ne suis pas fan de zoomer et de concevoir comme ça pendant des heures et des heures. Je pense que vous avez vu que lorsque je travaille, j'utilise constamment Control 1 pour revenir au niveau de zoom de 100%. Pourquoi je fais ça si souvent ? Parce que c'est ainsi que les visiteurs vont voir votre projet à 100%. Personne n'effectue un zoom avant et récupère tous les détails minuscules que vous avez inclus. S' ils ne sont pas visibles à 100%, alors c'est une erreur. Le fait est que vous n'avez pas conçu de sites Web pour leurs tireurs d'élite. Alors gardez ça à l'esprit. Ok, Maintenant, vous pouvez voir Full HD sans fil. Le plus populaire, est loin d'être la majorité. Il y a d'autres tailles d'écran ici, en particulier en raison de l'utilisation d'un ordinateur portable. Donc les revenus que derm zone active, cette zone entre ces deux lignes verticales est appelée la zone active. C' est l'endroit où nous mettons tout notre contenu. Permettez-moi d'expliquer pourquoi le cas d'une capture d'écran du site de copains payants. Comme vous pouvez le voir, rien de important ne passe sur ces guides. Tout le contenu est ici dans cet espace particulier. Et encore une fois, c'est à cause de ces autres tailles d'écran. Par exemple, 1366 par 768, une résolution très populaire pour les ordinateurs portables. Parce que la largeur est beaucoup plus faible, les côtés sont coupés, mais ce n'est pas un problème puisque la partie critique cette année, cette partie de l'image peut être cachée sans perdre quoi que ce soit d'important. Ce n'est pas un contenu qui est obligatoire n'est pas quelque chose de vraiment important. C' est mort à des fins décoratives, et c'est tout. C' est pourquoi la mise en page du contenu en 1200 pixels est un bon choix. Écran avec 1366 vous montrera tout le contenu tout en vous donnant un peu d'espace de chaque côté. Maintenant, vous connaissez probablement toutes ces choses de la première partie du cours. Mais permettez-moi de répondre à d'autres questions. Pouvez-vous utiliser d'autres valeurs supérieures à 1200 pixels pour l'actif à ouais, Non, pas vraiment. Je ne le recommande pas. Maintenant. Bien sûr. Vous pouvez trouver certains sites Web qui utilisent 1400, 1600 serait encore plus, mais ce sont les exceptions, peu et loin entre les deux. Maintenant, pouvez-vous aller en dessous de 1200 ? Bien sûr. Bien sûr, onze cents, cent, dix cents. Ce sont tous des choix décents. 960 était très populaire système de grille en 2010 environ, mais il est vraiment obsolète maintenant. Le principal problème est d'avoir un design nanofil, il n'a pas l'air aussi impressionnant, n' est pas aussi beau. Le fait est que, même si en dehors de ces guides, nous n'avons rien d'important, rien d'essentiel. Le look global plus large est plus agréable à l'œil. Et les clients sont généralement plus que impressionnés par un aperçu plus large. Mais encore une fois, pas plus de 1920. Maintenant, explorons le côté différent d'un projet de design web. Il pensait que les composants les plus communs d'un site Web. Numéro un, l'en-tête, c'est la partie supérieure du site Web qui contient généralement le logo, le menu principal, et les quelques boutons pour l'enregistrement de l'utilisateur, peut-être un panier d'achat ou des actions similaires. Dans l'en-tête. Vous pouvez également trouver un numéro de téléphone ou une adresse ou des icônes de médias sociaux, mais ceux-ci sont généralement placés au-dessus dans la barre supérieure. Le deuxième composant est la barre supérieure ici que vous pouvez trouver le numéro de téléphone et d'adresse icônes de médias sociaux et des choses comme ceci. C' est généralement très court et ça ne se distingue pas vraiment. Le composant suivant, le numéro 3, est la zone des héros. Ceci est généralement considéré comme la partie la plus importante d'un site Web, où le nom Hello Ed. Oui, c'est le Superman, si tu veux. Vous pouvez vous attendre ici à trouver le titre, sous-titre ou la description. Un ou plusieurs fardeaux de forme. Parfois, une vidéo peut être comme un arrière-plan, mais généralement une grande photo qui prend toute la largeur. Maintenant, le but de la zone de héros est d'attirer l'attention de l'utilisateur et de le faire. Mais pour l'action humaine, que ce soit par quelque chose, inscrivez le formulaire ou quoi que ce soit de cette nature. Ensuite, immédiatement en dessous, nous avons un sous-en-tête avec le gin. Ce terme n'est pas aussi populaire que les autres, mais il décrit la position de l'élément à l'intérieur du site SOB il cependant. Donc, sous la zone du héros, typiquement ce composant continue l'idée de la zone du héros et il l'élargit, il donne plus de détails à ce sujet. Maintenant, le prochain gros composant est le contenu réel, où vous pouvez vous attendre à trouver plein de choses comme des témoignages, des FAQ, des galeries, des formulaires, des extraits de journaux, diverses choses de toutes sortes. Donc, fondamentalement, nous appelons juste cette partie de la zone de contenu. Donc fondamentalement tout ce que je viens de décrire, vous pouvez le placer sous ce parapluie, le contenu. Et enfin au bas du site, vous pouvez vous attendre à trouver le pied là-bas. Vous pouvez le trouver dans un format minute, comme vous le voyez ici, dont je ne suis pas un grand fan. Je ne recommande pas ce type de format. C' est propre, décoration minimale et assez courte. Mais la plupart des gens préfèrent les moyennes à grandes. Cela est dû au fait que la plupart des entreprises ont besoin d'une place pour les différentes longueurs telles que la politique de confidentialité, informations juridiques, les informations de l'entreprise, et ainsi de suite. Donc, en conclusion, les composants d'un site Web sont la tête de la barre supérieure, la zone de héros, la zone de subito, mais encore une fois, c'est un peu facultatif, une zone de contenu qui peut accueillir de nombreux forums, et enfin, un pied de page. Et avec ça, nous avons terminé cette conférence. Je te verrai dans un instant. 39. Étude de cas : mises en page non standard: Bienvenue à cette conférence où nous allons parler de certains dessins que j'ai reçus sur ce terrain de la part de ma communauté d'étudiants. Tous les exemples suivants ont une exécution erronée commune. Les concepteurs n'ont pas utilisé de mise en page standard. Voyons ce qui est quoi. Ce site de robot jouet nous montre une mise en page très maladroite qui est censée être créative. n'y a pas d'en-tête, c'est-à-dire la section supérieure qui contient le logo et le menu principal. Eh bien, en fait, il n'y a pas de menu principal à parler. Nous pouvons voir qu'il s'agit d'un magasin, mais il n'y a pas de composant de carte d'achat, ni de bouton de connexion ou d'enregistrement se déplaçant vers le bas. n'y a pas de photon et pour être plus précis, pas de liens sur l'entreprise, le processus d'expédition, les termes juridiques, etc. C' est un design qui ne suit pas la mise en page standard parce que la pensée créative qu'elle était créatrice. En fait, il s'agit d'une erreur d'exécution nette due au fait que la structure standard d'un site Web n'a pas été utilisée. Passons au quart de poker. Ici ne sont pas réellement zoomés. Non, ici, le concepteur a utilisé la mauvaise taille de toile. Je vais ouvrir cela jusqu'à Alt Control C. Et nous pouvons voir la largeur totale du projet est de 800 pixels. C' est incorrect. Dans la conférence précédente, nous avons décidé de deux choix pour la largeur totale. J' ai fait 1600. Quoi, 1920 ? C' est pour toute la réflexion. C' est ce que la zone active, nous nous sommes installés, 1200 pixels. Ici, la valeur est beaucoup, beaucoup plus faible. Le designer ne s'est pas rendu compte qu'il avait un énorme problème. Probablement parce qu'il a dit que son niveau de zoom à quelque chose comme 200 pour cent a montré à ce niveau, les choses semblent beaucoup plus raisonnables. Vous pensez que c'est assez décent, mais votre design doit avoir fière allure, ce niveau de zoom à 100%, parce que c'est ainsi que vos utilisateurs vont le voir. Voici une autre conception avec la zone de contenu n'a aucun sens. C' est totalement non standard. Et si vous vous grattez la tête à ce sujet et vous ne pouvez pas dire pourquoi le cas Voici une question très simple qui éclairera tout en cas de doute, suffit de vous poser ce qui suit. Ai-je vu ce design sur un grand site Web grand public ? Maintenant, soyez conscient, organiser le contenu de cette façon, à gauche, à droite, à gauche est assez populaire. Vous verrez que dans des tas d'endroits, mais pas lorsque vous créez ces boîtes et que vous laissez tout cet espace vide à côté d'elles, est-ce que cela a du sens ? Donc encore une fois, vous vous demandez simplement si vous avez vu quelque chose de très similaire sur un grand site web bien connu, danseur, ils devraient toujours l'être, oui. Ça ne veut pas dire que vous volez ou copiez. C' est être intelligent. Passons à un autre à propos de l'en-tête. Eh bien, ça n'a pas l'air si génial. Avez-vous vu quelque chose de similaire sur un site web populaire ? Oui, beaucoup. Mais ce n'est pas un problème ici. Vous pouvez sauter le pistolet et pointer vers la largeur. En effet, il s'agit d'un autre site web, mais 1200 largeur totale est encore quelque peu raisonnable. Quant à la zone active, c'est environ cent dix cents pixels, ces valeurs sont alors ce que je recommande, mais nous allons toujours dans une plage décente. Le problème réel est avec la taille. Regarde la taille de ce type. C' est un monstre. Si vous faites une vérification rapide, vous verrez que nous avons affaire à près de 85, 100 pixels. C' est beaucoup trop à mon goût. Beaucoup de pages de vente gimmicky ont recours à cette approche. Une seule page d'un kilomètre de long qui est plein de contenu. Certains clients préfèrent même qu'ils vendent leur alimentation, construisent des suppléments ou partout où c'est un produit stupide qu'ils veulent promouvoir. Mais la plupart des gens détestent les sites Web très longs. D' où pourquoi il s'agit d'une erreur d'exécution. Jetons juste un coup d'oeil ici dans le sous-en-tête avec région. Cette zone est quoi, 600 pixels de haut. Et pour quoi, il n'est pas aussi espacé pour trois icônes et un peu de textes, 600 pixels. Encore une fois, c'est les mains vers le bas et l'erreur d'exécution. Passons à un autre ici que tu n'aimes peut-être pas. C' est un look sombre et toutes ces photos. Mais le vrai coupable est la mise en page non standard. Même si tout le reste a été parfaitement exécuté en utilisant cette mise en page étrange, le design est compromis. Les gens s'attendent à certaines choses dans certains endroits. Dans ce cas, le menu principal doit être en haut à droite de l'écran. C' est donc le plus gros problème avec ce design particulier. Enfin, j'en ai une de plus pour toi qui est un peu plus controversée. Ici, la conception et a les composants que j'ai déjà présentés comme étant standard. La tête du guérisseur Wadia disparaissent si la zone et le contenu le pied de page eux quoi pas. Mais la façon dont tout est mis en place est déroutante et difficile à suivre. Bien que cela puisse être impressionnant pour un certain type de personne, ce design est trop compliqué en raison toutes ces formes dans les photos qui créent le look boueux et occupé. Vous ne serez jamais vraiment partagé avec quelque chose gagne et si une autre partie commence. Encore une fois pour être créatif, la mise en page standard n'a pas été suivie dans mon livre. C' est une erreur d'exécution et en tant que telle, ce site Web obtiendrait la nourriture sur 10 en ce qui me concerne. Dans l'ensemble, ce sont les quelques exemples de ce qu'il faut éviter tout simplement de commencer. Alors s'il vous plaît restez à l'écoute. 40. Exercice : créer une mise en page de site Web standard: Bienvenue dans cet exercice où je veux vous exposer le défi. Voilà la tâche. Je veux que vous créez une mise en page de site Web standard en utilisant deux choses, des rectangles et des calques de texte. Si vous connaissez le terme, j'aimerais que vous créiez un filaire. Je ne veux pas que quelque chose soit fait au hasard. Au lieu de cela, je veux que vous utilisiez PayPal, son site Web comme point de référence. Vous avez également une capture d'écran jointe au cours juste au cas où ils ont mis à jour la version live. Voilà ce que je cherche. Pour commencer, je veux que vous créiez un nouveau projet de taille appropriée, à fois en termes de hauteur et de largeur. Ensuite, je veux que vous définissiez la zone active. Enfin, le plus important, j'aimerais voir comment vous gérez avec dimensionner vos éléments. Par exemple, si le rectangle qui définit la tête de boeuf 100 pixels ou les 150 pixels de haut. Et le logo ? Est-ce que ça va être que les pixels sur 130 pixels ? C' est pour ça que je veux que tu fasses cet exercice. Cela soulèvera beaucoup de questions qui vont sûrement vous aider dans votre parcours de conception web, n'est-ce pas ? S' il vous plaît arriver au travail et télécharger votre conception en PNG ou JPEG dans la section commentaire. Montrez-moi que vous êtes engagé dans les tribunaux et que vous voulez vraiment apprendre. Même si vous ne pensez pas que c'est dur ou très utile, faites-le pour moi s'il vous plaît. Merci et j'attends avec impatience. 41. Comment dimensionner vos éléments Web: Bienvenue dans cette conférence où je veux parler de dimensionnement des éléments de votre site Web correctement. Disons que vous travaillez sur un titre pour la zone de halo. Donc un peu de textes qui sont censés être assez volumineux. Certains de mes élèves m'ont demandé quelle taille ils devraient utiliser. Il semble être une question décente, non ? Après cependant, vous devriez vous attendre à ce que ce soit un type de guide sur la façon de dimensionner les choses correctement. Que ce soit un titre, un fardeau devant le yen Helliwell, ainsi de suite. Pour illustrer pourquoi cette question n'a aucun sens. Voici nos deux calques de texte avec le même contenu qui ont la même taille de police exacte pour les pixels. Oui, ils sont de la même taille, mais différentes polices occupent un espace différent pour diverses raisons, c'est normal. En tant que telle, la question vague, Chris, quelle taille de police dois-je utiliser pour leur titre ? Ça n'a aucun sens. Si vous utilisez cette police de caractères, je dirais environ 100 pixels. Si vous utilisez cet autre, celui que je recommanderais peut-être 40 pixels. Tout dépend d'une charge de facteurs. C' était ma longue façon de dire qu'il n'y a pas de guide de taille définitif. Mais après plus de 10 ans d'expérience dans ce domaine, j'ai réussi à rassembler quelques astuces pour vous aider. abord, en termes de topographie, Google Fonts est excellent car il vous permet de voir un grand nombre de polices d'un seul coup d'œil. Parce que le contrôleur de taille est si évident, vous pouvez voir comment différentes polices de caractères occupaient leurs boîtes respectives. Par exemple, Montserrat est clairement étiré. Donc, si l'espace est limité, ce n'est peut-être pas un bon choix. D' autre part, le Waldo condensé est clairement tomber plus compact comme il est allé. Son nom l'indique. En ce qui concerne les polices, il s'agit d'une autre source fantastique disponible pour l'abonné Creative Cloud. Polices Adobe. Encore une fois, cela est gratuit à utiliser uniquement si vous payez des frais mensuels pour le Photoshop, par exemple, le paquet photo. Ici, de ce côté de l'écran, vous trouverez une ventilation intéressante. Cela peut également être utile si vous n'êtes pas sûr de votre taille. Mais faisons ressortir les gros canons, la façon infaillible de dimensionnement et les éléments correctement, peu importe ce qu'ils sont. Il s'agit de comparer votre conception à des sites Web traditionnels. Rien de fantaisie, mais c'est pourquoi c'est une technique si fiable. Voici comment vous devriez le faire. La première étape consiste à installer un type d'extension de navigateur qui vous permet de créer rapidement la capture d'écran. Firefox en a un intégré. Donc, tout ce que j'ai à faire est de cliquer sur cette icône et de choisir, prendre une capture d'écran. Était génial, est que je suis donné le choix entre capturer la partie visible. Donc, sans faire défiler vers le bas juste ce qui est vu ici ou obtenir la page entière, il ya une extension similaire pour Chrome. Je suis sûr que vous allez gérer l'installé. C' est assez simple. D' accord. Alors visitez n'importe quel site décent qui est assez bien connu et prenez une capture d'écran. Je vais utiliser le côté PayPal encore une fois. La capture d'écran va être enregistrée sur mon bureau, qui est mon emplacement préféré, car une fois que j'ai fini avec le projet, je peux tout supprimer rapidement, n'est-ce pas ? C' est quelque chose soumis sur cette citation par un de mes étudiants. Ce bouton scènes, grand, bulbeux, le comparer à payer le site de copains. Faites glisser la capture d'écran à l'intérieur. Et c'est quand vous placez un correctement en utilisant les outils d'alignement Lisa, juste son opacité. Nous voulons voir les deux dessins en même temps qui couraient 50%. Vous devriez être en mesure de voir les deux projets. Remarquez la différence énorme. Dans le cas où cela n'est pas clair. L' enregistrement overdub, les fichiers sont attachés aux accords, sorte que vous pouvez le faire vous-même. Jouez avec différents niveaux de capacité. Et je vous suggère fortement de déplacer l'un des dessins jusqu'à ce que les boutons se chevauchent. Cela montrera clairement que le jour, si vous êtes le dimensionnement est éteint ou non, à peu près il est environ 630 par 120, donner ou prendre. Encore une fois, l'idée est d'obtenir une estimation approximative. Vous n'avez vraiment pas besoin d'être précis avec elle parce que vous êtes à la recherche du numéro de ballpark après avoir ces chiffres à l'esprit, 630 sur 120 mesurer l'abondance. Choquant, c'est 330 par 50. Donc, ce bouton rouge est environ deux fois la taille. Ça doit apporter des alarmes dans votre tête, puis 20 pour cent plus gros, c'est bien. D' accord. Disons 30 pour cent plus gros, mais deux fois plus gros. C' est ridicule. Et cette technique peut être appliquée absolument partout pour eux devant nous aux photons, des boutons aux icônes, aux calques de texte de toute sorte. il vous plaît essayer par vous-même et voir comment vous gérez. Mais se souvenir est essentiel. Vous avez un moyen rapide d'enregistrer une capture d'écran à partir de votre navigateur. Faites-moi savoir comment vous faites dans la section commentaires sur cet accord. Amuse-toi bien avec ça. 42. Ma formule pour un texte parfait: Bienvenue dans cette conférence où je veux partager ma formule pour les calques de textes parfaits, spécifiquement pour les paragraphes ou ce que j'aime appeler le corps du texte. Ici, nous avons la partie supérieure d'un site web. Nous pouvons voir que ce mur de texte est désagréable à regarder. Est littéralement un bloc de texte qui semble, mais aussi inaccessible. Vous ne voudriez pas lire une telle chose même si elle contenait des informations très importantes. Talons mon 12 punch qui fera de toute couche de texte une note inférieure. Numéro un, la hauteur de la ligne fait l'espace vertical entre chaque ligne de texte. C' est absolument critique, mais c'est l'une des erreurs les plus courantes dans la conception web. On peut le voir ici. C' est officiellement appelé prêt, mais je préfère la hauteur de ligne parce qu'il y a le théorème CSS et c'est plus descriptif. Ok, pour l'instant, c'est automatique, ce qui veut dire que ça a l'air horrible. Ce que vous voulez faire est de mettre dans une valeur spécifique, et c'est la taille de la police, fois 1,5. C' est ça. C' est la première partie de la formule pour le corps parfait du texte. La hauteur de la ligne est égale à la taille de la police multipliée par 1,5. Dans notre cas, c'est 20 fois 1,5. Donc 30. Mettons ça dedans. Remarquez la différence que cela fait. En donnant à chaque rôle plus de marge de respiration, le texte devient beaucoup plus agréable. Eh bien, passons à la deuxième partie de la formule, en la formatant. Maintenant, le théorème peut ne pas vous dire grand-chose, mais voici ce que cela signifie. A, divisez-le en paragraphes. Soyez vérifier sa longueur, c, vérifier son alignement. La première partie est très simple. Vous ne devriez jamais avoir plus de trois à quatre lignes de texte pour chaque paragraphe. Trouvez le point de rupture naturel. Par exemple, ici, et appuyez sur Entrée jusqu'à ce que vous obteniez un écart. C' est ce que tu cherches. Tout d'un coup, ça semble beaucoup mieux. Veuillez noter que le passage à une nouvelle ligne ne suffit pas. Donc, ici, c'est une erreur dans mon livre. Non, ce que tu veux en fait, c'est une ligne vide comme ça, n'est-ce pas ? En ce qui concerne les points B et C, la longueur et l'alignement. Voici ce que vous devez surveiller. La longueur signifie que vous devez définir un point de rupture si la ligne représente au moins 40 % de la largeur de l'ensemble du calque de texte. Ça a l'air compliqué, mais laissez-moi vous montrer à quel point c'est facile. Je vais supprimer cet écart et je vais le faire. Voir cet arrêt complet ici. Je vais mettre mon point de rupture juste là. Maintenant, c'est une erreur d'exécution. Ce seul mot ne justifie pas une ligne entière. Il n'a pas l'air bien, et ce n'est pas une utilisation optimale de l'espace. Ce que vous devez faire est de vous assurer que le point de rupture est n'importe où de cet endroit en avant vers la droite. Malheureusement, je n'ai aucune explication logique. Ça a juste l'air mieux comme ça. Toujours sur le point B, vérifiez sa longueur. Vous ne devriez jamais rendre nos paragraphes extrêmement larges. Dans notre cas, c'est le modèle de 1200 pixels. Votre corps prend ne devrait jamais passer toute la largeur. C' est moche et difficile à lire. Il semble avec beaucoup plus enclins à lire des textes qui est une largeur spécifique, signifie autour de cette taille. Donc, la conclusion est d'avoir toujours un point de couche PECS modérément large C, l'alignement. Dans la plupart des situations, laisser le texte de ligne est la meilleure façon de procéder. Certains concepteurs débutants ont tendance à utiliser le centre du texte de ligne parce qu'ils pensent qu'il semble mieux. Mais croyez-moi, il y a très peu de cas où cela a du sens. Vous pourriez dire que c'est l'un d'eux. Mais dans les projets du monde réel, le côté droit de la conception est facilement laissé. Même si c'était le cas, si vous commencez à utiliser le centre du texte de ligne, vous devez dire cohérent et l'utiliser tout au long de votre projet. Et c'est une douleur et ce n'est pas du tout idéal. Alors laissez le texte de ligne il est. Faisons un résumé rapide. Pour améliorer l'apparence des calques de texte de paragraphe. Vous devez numéro 1, définir la hauteur de la ligne en multipliant la taille de la police par 1,5. Donc 16 pixels, cela nécessite 24. Les pixels pour la hauteur de la ligne, 18 serait 27, mais je préfère le reste à 28, 20 pixels que la hauteur de la ligne et ainsi de suite. Et puis numéro pour le diviser en plusieurs paragraphes. Vérifiez que la dernière ligne est décemment longue. Assurez-vous que le calque de texte global n'est pas trop large et qu'il a quitté la gamme. Avant de partir, sachez au moins l'importance de la hauteur de la ligne ne peut pas être sous-estimée. La plupart des clients utilisent le terme encombré par occupé lorsqu'ils voient des calques de texte qui sont laissés à automatique. D' un autre côté, aller pour quelque chose comme T2x n'est pas non plus agréable à regarder. La motivation est la clé ici. Tu veux juste juste, pas trop serré, pas trop lâche. S' il y a une chose qui donne votre manque d'expérience, ça va le faire, l'un ou l'autre de ces extrêmes. Les textes corporels doivent être simples et élégants. Laissez-le respirer et cela vous aidera énormément. Juste comme une note de côté rapide, j'utilise ce modèle comme exemple. Mais en général, le corps du texte se trouve sous la légion subito. C' était plus un bronzage, donc c'est pour ça que je l'ai utilisé. Je ne mettrais jamais deux paragraphes de texte dans la région du milieu, et je ne recommanderais jamais une telle chose. Mais encore une fois, c'était plus pratique. Ok, c'est tout pour l'instant. Continuons. 43. Étude de cas : calques de texte: Hé, là, passons par quelques exemples de textes, des couches de différentes sortes pour que vous puissiez mieux comprendre ce qui est du travail. Commençons par ce design sombre et sombre. Bien qu'il y ait beaucoup à dire sur diverses décisions que je ne suis pas d'accord. Je veux me concentrer sur la section À propos de nous. Ici. C'est à peu près parfaitement exécuté. Le titre est grand et imposant sans être dominant. Le corps du texte est adapté en taille avec, mais il est également découpé en plusieurs paragraphes. Bien sûr que nous pouvons voir qu'il y a des mots errants ici et là. Celles-ci auraient dû être corrigées. Mais c'est pour ça que j'ai dit que c'était à peu près parfait. Encore dans l'ensemble, c'est un corps de textes qui a été bien exécuté. Mais passons à un autre. Ici. La taille est le problème. Non seulement il est trop étroit, mais il est aussi trop grand. Le truc, c'est que si tu coupais ça ici, alors je n'aurais aucun problème avec ça. Ces lignes de texte seraient considérées comme une brève description pour chaque service. Mais en l'état actuel en ajoutant un deuxième paragraphe, tout le solde est jeté. C' est désagréable de regarder vivre seul lire. Donc c'est une erreur dans mon livre. Maintenant, la grande. Mais si vous visez les dix, ce genre de chose déduira le 0,5. Voyons un autre exemple à travers cette conception. J' espère que vous pouvez voir pourquoi j'ai été si catégorique à laisser une ligne vide pour chaque paragraphe. Toute cette partie se sent bloquée et non raffinée. Vous pouvez voir la taille de la police et la hauteur de la ligne hotspot sur le titre est également génial. J' aime l'appel à l'action à, qui est défini dans une autre couleur et en gras. Mais ce texte doit être divisé en plusieurs paragraphes, au moins trois en ce qui me concerne. Passons à un autre exemple. En passant, tous ces éléments sont tirés de la discussion discorde avec des étudiants de différents niveaux d'expérience. Ok, ici je veux me concentrer sur la section blog. Bien que les majuscules conviennent bien pour les titres courts comme ce titre par exemple, ce que vous voyez ci-dessous est une erreur claire. Cette transformation en majuscules s'applique tant au titre de l'article que à la description. Cela rend difficile à lire et votre premier instinct est de l'éviter. C' est pourquoi tant de clients disent quelque chose comme, je ne sais pas, le design ne se sent pas bien. Ils ne peuvent pas articuler ces petits problèmes. Mais croyez-moi, c'est ce genre de choses qui s'additionnent et composent ce sentiment. Donc, pour le débat, il est bon d'utiliser toutes les majuscules pour les titres courts. Par exemple, un site web très populaire, web designer depot.com utilise ce traitement de texte pour certains articles. Remarquez le mot clé ici. Quelques articles. Comme vous pouvez le voir, c'est assez court. n'y a que quelques mots, donc vous pouvez facilement le comprendre. Même ici, où nous avons trois lignes de textes similaires au blog, les choses sont acceptables parce qu'il s'agit d'une date. Donc, la chose que vous allez lire est populaire nouvelle design de la semaine, courte et douce. Remarquez ces autres, les deux ont un formatage irrégulier. Alors mon conseil, restez simple. N' essayez pas d'être trop créatif avec vos calques de textes car dans la plupart des cas, cela complique probablement les choses sans résultat positif. Au contraire, vous pouvez faire plus de mal que de bien. Si simple, c'est toujours mieux. Passer à la conception du site Web d'un cabinet d'avocats. Ici, nous pouvons voir ce corps de texte est décemment large et est divisé en paragraphes. La hauteur de la ligne, alors qu'elle ne semble pas être exactement 1,5 fois la taille de la police. C' est toujours assez décent. En passant, 1.5 est un point de référence. Vous pouvez utiliser aussi peu que 1.3 en fonction des caractéristiques de vos polices. Mais pour revenir à cette conception, le problème est ici avec sa taille. C' est beaucoup trop gros pour le sous-en-tête avec le gin. Ceci est basé qui n'est pas bien utilisé. Le corps des textes devrait généralement être d'environ 16 à 22 pixels. Ici. Je suis tout à fait sûr que c'est près de 30, probablement 26 ou 28, encore une fois, en fonction de la police utilisée. Mais le fait est que c'est beaucoup trop grand. Je vous ai montré comment dimensionner correctement les éléments dans une conférence précédente. Visitez le site Web grand public, prenez une capture d'écran et chevauchez-la avec votre design. Si vous êtes l'élément est 50 pour cent plus grand ou quelque chose comme ça, vous avez foiré. Si vous avez déjà été sur cette citation, alors vous m'avez vu parler à quelqu'un. Vous m'avez probablement entendu critiquer leur hauteur de ligne à cause de cela, certains designers ont tendance à surcompenser. Par exemple, ce design ici, ce que nous faisons est totalement soufflé. Les champs de texte lâches, étirés. Et parce que nous avons cet autre chemin ici, qui a une bonne quantité de hauteur de ligne. Cela ne fait qu'empirer les choses. Ouais, tu as bien entendu ? Parce qu'un élément est bien trié et qu'un autre ne l'est pas, l'ensemble du design semble pire. J' aurais préféré que cette partie soit étendue à, bien que évidemment la situation idéale serait un multijoueur d'un point cinq à avoir été utilisé. Mais en gardant vos yeux ici, cette zone active est de 1200 pixels de large car le texte s'étend sur toute la largeur. C' est une erreur d'exécution. Ce bloc semble équilibré car il ne doit être des lignes et la dernière ligne est presque aussi large que les deux autres. Mais pourtant, ce n'est pas idéal pour la plupart des projets, pour la plupart des clients. Si vous avez trop de texte, le client doit le repenser et le réduire. Avec ces exemples à l'esprit, j'espère que vous avez mieux que mes directives précédentes. Il y a beaucoup d'autres choses à dire, alors s'il vous plaît n'arrêtez pas de regarder. L' ensemble du cours est une étude massive qui se déroule progressivement. Si vous vous arrêtez avant la fin, vous n'aurez pas l'image complète. Ou pire encore, vous risquez de l'avoir tordu. Alors continuons. 44. Contraste de couleurs: Bienvenue à cette conférence où je veux parler de couleur, en particulier de contraste de couleur, idée de talons. Nous avons ce modèle familier qui est attaché à cette conférence. L' arrière-plan est actuellement noir. Et à cause de cela, nous pouvons tout voir parfaitement, le texte blanc, mais aussi le bouton vert. Il s'agit d'un contraste maximal. C' est ce que vous voulez dans tous les cas. Mais cela ne signifie pas que vous devez utiliser le blanc sur le noir ou le noir sur le blanc. Ce serait bien trop limité, évidemment. Au lieu de cela, vous devez comprendre ce qu'est le contraste. La définition est limpide. contraste est l'état d'être étonnamment différent. Quelque chose d'autre. Donc étonnamment différent, si nous le faisons blanc, le contraste descend à 0. Pour ces calques de texte, le bouton est toujours haut de gamme. Nous pouvons le voir clairement, mais que diriez-vous de l'en-tête ? Est-ce approprié ? La réponse est un non résonnant, ce n'est pas correct. Dans mon livre, et c'est ce dont je veux parler. Quand il s'agit de choisir les couleurs, vous devez toujours vous efforcer d'obtenir le maximum de contraste. Cette partie, bien que vous puissiez la lire assez bien, elle n'est pas esthétique à regarder car elle est loin, proche du contraste maximal. Que diriez-vous si je fais de ce fond le gris très clair ? Est-ce que ça va ? La plupart des designers sont bizarres. Ce n'est pas adéquat, mais ils ne réalisent pas que le contraste devrait avoir un ou deux réglages, maximum ou très proche du maximum. Parce qu'ils ne pensent pas en ces termes. J' ai vu d'innombrables designs avec ce type de contraste de couleur. C' est une erreur d'exécution très claire car le principe de contraste, si étonnamment différent, n'est pas appliqué. Oui, vous pouvez lire le texte. Oui. Certaines pièces ont un contraste maximal, mais pas tout. En tant que tel, c'est un échec. Cela se produit surtout avec les boutons. Remarquez cette belle nuance de vert que j'utilise. Les clients veulent généralement des fardeaux brillants qui se démarquent. cette raison, les concepteurs inexpérimentés ont tendance à faire ce qui suit. Ils vont tout le chemin ici dans le territoire des néons où le fardeau semble horrible. Le texte blanc se perd dans cette base de bouton lumineux. Et puis le problème se développe dans le politicien en ajoutant des coups ou des ombres à boule creuse. Laissez-moi vous montrer ce que je veux dire par là. C' est assez commun, croyez-le ou non, le concepteur, le senti quelque chose était hors qui a des éléments sont assez intelligibles. Et puis il a eu recours à toutes sortes de solutions compliquées plutôt que de simplifier les choses. Ces coups et ombres sont de la colle adhésive. Auriez-vous MacGyver ? Mais la conception web moderne nécessite une touche fine. Votre objectif est de créer un beau site web, pas d'embellir un design avec des tonnes d'effets. En un sens, c'est comme une chemise. La plupart des clients veulent la chemise blanche simple, croustillante et faite sur mesure rien en criant à ce sujet, mais il a l'air superbe. Lorsque vous giflez ces couleurs et ces effets, vous en faites une chemise hawaïenne contrefaite et évitez de lui. Ce n'est pas ce que les gens veulent. D' accord ? Je suis sûr que vous avez compris le problème. Quelle est la solution ? En fait, c'est plus facile que vous ne le pensez. Couleurs saturées de cette partie du sélecteur de couleurs. Il suffit de regarder le design. Est-ce que cette direction vers un contraste maximal ? Alors tu es bon d'y aller. C' était génial qu'une fois que vous avez identifié votre place dans le sélecteur de couleurs, vous pouvez vous déplacer de haut en bas de cette zone et vous obtiendrez toujours des résultats fantastiques. Ensuite, donne cela ne change que la teinte. La luminosité et la saturation restent les mêmes. Cela signifie donc que vous pouvez expérimenter avec différents schémas de couleurs sans gâcher votre niveau de contraste. Donc c'est ce que vous cherchez. C' est ce que je recommande en ce qui concerne le contraste des couleurs. Tenez-vous à ce domaine particulier et vous serez prêt à y aller. Continuons. 45. Étude de cas: Couleurs - Partie 1: Bonjour, bonjour. Parlons des schémas de couleurs dans la conception web moderne en analysant quelques exemples. Commençons les choses avec un design au néon qui fera fondre votre visage. C' est totalement exagéré et vous n'avez pas besoin d'explication pour cela. Permet toujours d'ouvrir le sélecteur de couleurs et de voir avec ce code de couleur nous place. Comme prévu. On est en haut à droite. Extrêmement saturé, sûr, mais aussi incroyablement lumineux. Vous pouvez voir qu'on est à 99 pour cent. Le truc, c'est que je suis un grand fan de ces types de couleurs. Ce sont un élément de base de la conception web, mais seulement s'ils sont utilisés à petites doses et évidemment pas si lumineux. Par exemple, un bouton d'appel à l'action pourrait rocher ce code hexadécimal particulier ou quelque chose autour de cette zone. Mais encore une fois, pas un énorme rectangle solide. En ce qui concerne les couches de textes, eh bien, c'est évidemment hors de question. Typiquement, la plupart des calques de textes doivent être blancs si ils sont assis sur un fond coloré avec une nuance de gris très sombre. Je n'utiliserais jamais non plus 00, ce qui est 100% noir. Au lieu de cela, je préfère n'importe quoi de cette région. J' ai tendance à utiliser 33, 3 dans la plupart des cas parce qu'il atteint cet équilibre d' être lisible sans être dur ou pointu. Est-ce que le problème avec le noir pur, d'ailleurs, il semble totalement non raffiné, surtout en grandes quantités, couches de texte IE. Dans l'ensemble, c'est un avertissement. Devrait utiliser des couleurs saturées vives, mais pas pour les grands éléments. Et si vous allez dans cette voie, descendez de ce côté du sélecteur de couleurs, ce sera beaucoup mieux. Maintenant, passons au revers de la pièce. Le premier, bleu comme un moyen, celui-là est ennuyeux comme l'enfer. J' adore le sélecteur de couleurs parce qu'il nous raconte l'histoire. Regarde si on est totalement hors de la base. Mais laisse-moi dire ça d'une autre façon. Si vous allez utiliser ces types de couleurs, vous vous sabotez avec cette couleur fade, délavée et déprimante comme arrière-plan, même si le reste du design est sur le point, vous n'obtiendrez pas plus de six de 10 dans mon livre. Chaque couleur a une humeur qui lui est associée, une certaine ambiance avec l'atmosphère. Je ne peux pas imaginer quel type d'entreprise ou le client serait heureux avec quelque chose comme ça. Cela détruit à lui seul votre travail. Voici pourquoi n'importe quelle autre couleur ne fonctionnera pas bien. Voyez cette orange. Je suis personnellement un grand fan de cela et je l'utilise dans beaucoup de projets. Mais couplé avec ces autres couleurs n'a vraiment aucun sens. Parlons du contraste pour consulter le menu principal avec l'élément A propos ou ce titre. Pourquoi nous, encore une fois, alors que nous pouvons les lire, c'est très loin d'un contraste maximal. Vous pourriez demander si c'est bien d'utiliser du blanc pur. Et la réponse n'est pas certain code de couleur. Il suffit d'encadrer UN. Ecoute, si j'essaie d'utiliser du blanc, il se perd. Ce n'est pas une bonne quantité de contraste. Mais le problème, c'est que si on opte pour le code de couleur très sombre, même cela ne fait pas l'affaire. Je veux vous donner un autre exemple de la façon dont la couleur peut avoir un impact considérable sur votre travail. Le jaune est très limitant. Il est rare de voir du texte blanc au-dessus d'un rectangle jaune massif. Et c'est parce qu'il n'y a qu'une poignée de nuances qui fonctionnent réellement. cette raison, la plupart des entreprises préfèrent utiliser du texte noir. Donc, un contraste inversé, que je ne recommande généralement pas. Et ces quelques entreprises qui utilisent le jaune dans la marque ont des codes de couleur très distinctifs, qui sont faciles à repérer. Donc, soit vous, volez un code couleur à DHL ou au Hertz. Qu' est-ce que vous essayez et le globe oculaire et vous finirez sûrement avec une quantité douteuse de contraste. L' essentiel est que certains codes de couleur sont presque impossibles à utiliser. Si vous ne suivez pas mes conseils et vous en tenez à cette partie du sélecteur de couleurs. Peu importe si vous exécutez tout se passe correctement. Votre design va toujours craquer. Je voudrais terminer la première partie avec quelque chose qui a affligé le concepteur depuis le début des temps. Eh bien, au moins le début du web design. S' il vous plaît ne pas. Je le répète, ne basez pas votre jeu de couleurs sur le logo du client. C' est un exemple très clair d'un logo moche et désuet qui ne devrait pas être utilisé comme point de référence. Si votre client a des couleurs dans son image de marque des années 1980, s'il vous plaît faites-vous une faveur et venez avec un schéma de couleurs frais et moderne. Les logos peuvent être cachés, ils peuvent être remaniés ces options. Mais si vous créez un design horrible juste parce qu'il correspond au logo, alors vous avez pris le mauvais chemin. Alors je vais le répéter. Ne basez pas votre jeu de couleurs sur le logo du client. Si vous m'envoyez un design avec cette erreur et essayez de le justifier, je pense que je vais probablement mes chaussures ou quelque chose. D' accord. C' est la fin de la première partie. Donnez-moi une seconde et nous continuerons. 46. Étude de cas : Couleurs - Partie 2: Bienvenue de retour. Nous commencerons fort avec ce bel exemple. C' est le type de contraste que j'attends avec impatience dans un design de site web moderne. Il s'agit d'une photo qui a un effet de superposition de couleur sur elle. Probablement réglé autour de 70 à 80 pour cent parce que l'opacité est si élevée que le texte brille à travers. C' est facile à lire, mais c'est aussi esthétique, qui est tout à fait ce que nous voulons. Le corps du texte est également beau. Il a la bonne taille de police et la bonne hauteur de ligne. Je voudrais le voir sur trois lignes, ce qui signifie que la couche de texte devrait être plus large, mais c'est toujours un bon exemple. En descendant, encore une fois, c'est ce que le contraste maximal signifie pour moi. Parce que les couleurs sont si intenses, le texte blanc semble fabuleux. J' adore ça. Il y a des erreurs d'exécution ici et là. Les icônes des médias sociaux doivent être définies dans le même style. Les titres ici devraient être un gris très clair et ainsi de suite. Mais dans l'ensemble, c'est un design solide qui peut facilement être amélioré en moins de dix minutes. Mais maintenant, passons de côté. Voici un design qui ne suit pas mes directives pour cela. Vous ne devriez jamais les textes sous-jacents dans un design de site Web moderne. Cela semble très désuet. Peut-être quand même un mot fort. Je pourrais penser à quelques cas où cela serait approprié. Mais quand je donne des conseils, IP photo parler à 90 pour cent de mon public. Donc, en bref, aucun soulignement d'aucune sorte. Ensuite, vous n'ajoutez jamais l'ombre portée à un calque de texte qui se trouve à l'intérieur du fardeau. Ça a l'air horrible. Vous pouvez voir le même traitement ici. Nous venons de parler du jaune et de comment il est très difficile de l'utiliser sans copier littéralement un code hexadécimal de DHL ou d'une autre société Jan. Ici, le concepteur, la forêt lui-même dans une mauvaise situation avec cette nuance de jaune. Personne n'a demandé ce schéma de couleurs. Il a probablement vu le logo et s'en est inspiré. Je parie que vous avez de l'argent. Personne n'a demandé ce schéma de couleurs particulier. Il a probablement vu le logo et a obtenu Inspire, ce qui est un péché mortel. En ce qui me concerne. En descendant, nous pouvons voir une autre grave erreur d'exécution ira très loin du contraste maximal. Ce gris clair est impossible à travailler. Tu ne peux pas devenir blanc pur. Tu ne peux pas devenir gris foncé. À peu près tout ce que vous faites aura l'air bizarre. Dans ce cas, le designer n'a pas eu une touche fine. Donc ça n'a sûrement pas aidé. Ces ombres portées et coups sont terribles. C' est une situation où on va de mauvais en pire. Chaque décision de conception erronée se complique. Une autre chose que j'appelle ces rectangles de base, ils agissent comme une base pour votre contenu. Aller pour la couleur unie n'est jamais une bonne idée. Et soulager ou on utilise le mot jamais. Mais encore une fois, je me sens très fortement à propos de ces choses. Dans 90 pour cent des cas, le rectangle de base doit être blanc ou d'une qualité très, très légère. Et quand je dis la lumière, je parle de quelque chose comme ça. Même je ne pouvais pas faire de cette couleur particulière le travail. C' est juste une mauvaise position pour commencer. Le problème de contraste persiste avec ce formulaire et ces calques de texte. C' est le ruban adhésif et la colle dont je parlais il y a quelques conférences. Au lieu de nettoyer tout ce gâchis, la conception de a choisi de le fixer avec des bâtons et de la superglue. Le résultat se sent pas cher et désuet. J' aimerais passer à la prochaine conception parce que les erreurs ne sont pas toujours aussi évidentes. Par exemple, obtenir vos coupons est un problème dans mon livre, une erreur d'exécution, sans aucun doute à ce sujet. L' ensemble du design doit être féminin, léger, hostile. Le texte noir n'a pas de place fait sur le noir dit, puis la ligne pointillée. De plus, si vous voulez utiliser ce type d'effet, faites le rectangle un peu plus large afin de ne pas voir ces bits supplémentaires sur le côté. Déplaçant vers le bas. Le prix n'a pas non plus de bon contraste. Noir sur violet est terrible. Si tu veux une règle, c'est ça. Toujours utiliser du blanc pur sur des arrière-plans colorés. Pas jaune, pas vert néon, accord ou toute autre couleur vive. Le blanc pur est toujours idéal pour les boutons, étiquettes, rubans, ou tout autre élément de design similaire. Et pendant que nous sommes là, remarquez le coup bleu autour de ces rectangles. C' est parce que l'arrière-plan est assez sombre. Si le concepteur avait utilisé la superposition de couleur, il n'aurait pas eu ce problème. Ainsi, comme vous pouvez le voir, un problème en crée cinq autres. Passons à une erreur classique que je déteste. Jetez un oeil à ce fardeau et titre si le contraste n'est pas proche du maximum. Mais pouvez-vous comprendre pourquoi le designer a choisi ces nuances particulières de vert et de rouge ? Des idées ? Oh, le logo des courts, écoutez, cette nuance de vert est horrible. C'est un mauvais choix. Poutine est simple. Ils peuvent regarder le sélecteur de couleurs et vous verrez un niveau de saturation inférieur à 70 pour cent ou l'autre. La façon dont le sport, c'est trop loin vers la gauche. Mon conseil est que vous soyez inspiré par ce que font les plus grandes entreprises du monde. Je ne dis pas que vous devriez copier les codes de couleur, mais vous ne verrez pas beaucoup d'entreprises à succès utiliser ce vert laid dans l'identité visuelle. Ça ne marche pas. Ensuite, le contraste souffre sur tous les fronts, la tête doit être blanche pure. Même chose pour le rectangle des menus principaux, ce bouton aurait dû être rempli. Sans oublier qu'il est beaucoup trop petit pour l'action principale dans la zone des héros. Déplacer le long de la section de fil, lire sur le noir est absolument terrible. C' est pourquoi j'ai dit que le blanc est le seul moyen d'y aller. Ici, il est à nouveau dans ce forum, horrible. Et puis vendre au web design juste à cause de ce principe qui n'a pas été suivi. Je ne m'attarderai plus dessus. Les courbes que j'ai l'impression que je suis en colère et que je veux rester positif. J' aime vraiment le web design, le faire, l'enseigner. Et je pense que la plupart de ces problèmes sont facilement évités. Bien sûr, il y a avec le fixe, mais cette seule chose aurait pu faire la différence énorme. Ok, enfin, ce dernier design est un cas où la superposition colorée n'est tout simplement pas assez forte. Nous avons commencé avec ce design qui avait que Dieu juste contraste blanc et violet. C' était frappant, mémorable, beau avec ici. Ce n'est pas le cas. La zone de héros est ceux-ci assurer qu'ils auraient pu être mieux. Mais regardez ici. Tout d'abord, vert fluo sur rose. Ce n'est pas vraiment idéal. C' est pourquoi j'ai dit que vous ne devriez utiliser le blanc que sur n'importe quel fond coloré à cause de ces situations. Quant à la superposition, C'est simple, ce n'est pas assez fort. Cela aurait pu être un bon design, mais malheureusement, quelques choix en termes de couleur l'ont vraiment réduit. Globalement. C' est mon point de vue sur les couleurs. Vous savez, ils peuvent faire ou casser votre design. Mon conseil est d'être intelligent et de ne pas vous enfoncer. N' utilisez pas le logo comme point de référence et assurez-vous de toujours opter pour le contraste maximal. Mais quand je dis Max, s'il te plaît, ne va pas chercher la racine de néon. C' est horrible aussi. Et n'utilisez jamais d'autres couleurs de texte sauf le blanc quand il s'agit de colorier l'arrière-plan. Donc c'est mon conseil. Bonne chance. 47. Comment aligner des éléments de la zone de héros: Bienvenue dans cette conférence où je veux parler de l'alignement correct des choses dans Photoshop. Cela se résume à savoir ce qui doit être fait et être de savoir comment le faire. Ce discours sur la première partie. Dans ce design. Nous pouvons voir que les outils d'alignement n'ont pas été utilisés. Comment puis-je le dire ? Eh bien, parce que ce n'est pas un projet de couche, l'outil Singe est mon meilleur ami. Maintenant, dans la zone des héros, on peut voir qu'il y a une énorme différence entre cette partie ici et cette partie ici. Donc c'est un cadeau mort. C' est un mauvais alignement et c'est une erreur d'exécution claire. En progressant vers le haut, il y a un manque d'équilibre et de symétrie en raison des icônes des médias sociaux. Mais même si nous les ignorons, le logo n'est pas aligné sur ce rectangle. C' est en fait décalé vers le bas. Passons à une autre affaire. Ici, ces quelques éléments doivent être considérés comme un seul élément. En tant que tel, cela doit être centré verticalement dans l'idée de halo, ce qui signifie ce rectangle. Parce que ça ne s'est pas produit. Nous obtenons cet énorme écart qui jette tout. Personnellement, je peux sentir que quelque chose ne va pas, même si je vois le design de l'autre côté de la pièce. C' est ce que ne pas aligner les choses vous fait. Cela crée un sentiment instinct que quelque chose ne va pas. Et comme je l'ai déjà dit, les clients ne savent pas vraiment comment articuler ces choses. Ils ne savent pas comment vous dire ce qui ne va pas. Ils n'ont tout simplement pas la formation nécessaire pour signaler ces erreurs, mais ils savent que quelque chose n'est pas exécuté correctement. Ok, en descendant, voici un autre cas où nous voyons un écart assez important ne reflète pas en haut de la galerie. C' est dommage parce que cette partie aurait pu être quelque chose de spécial. En l'état actuel, ces imperfections mineures le rendent rugueux sur les bords. La chose la plus importante est que cela prend environ cinq secondes pour corriger, c'est vraiment si facile. Oh, et juste quelques pixels vers le bas, on peut voir un autre cas où ces éléments sont décalés vers le haut. Vous n'avez pas besoin d'être obsessionnel compulsif pour pouvoir repérer ces choses. Non pas que vous ayez un problème pour la seule chose, tout aligné correctement. C' est juste l'une de ces choses fondamentales sur lesquelles tout grand site Web est construit. Maintenant, nous allons salir les mains avec B, sachant comment aligner les choses. Et en passant par les techniques, je vais vous montrer d'autres cas. Voici un modèle familier. La première chose que nous devons faire est l'essentiel absolu. Nous devons utiliser la technique de clic Control Shift pour sélectionner plusieurs couches et établir la ligne verticale imaginaire gauche. C' est aligner les choses quand un, et nous avons parlé de la mise en place de la zone active avant. Ensuite, n'importe quel bouton vous oblige à sélectionner ces deux couches et à utiliser une ligne des centres horizontaux et verticaux. Encore une fois, c'est très basique. Maintenant, c'est là que ça devient délicat. Nous avons compris que ces trois éléments forment un seul élément et qu'il doit être centré verticalement dans la zone du halo. La proximité est énorme. La quantité d'espace que vous laissez entre les objets est incroyablement importante. Headline a un petit écart ici en haut et un écart logique ici. Ensuite, cela signifie que ce titre fait plus partie de l'en-tête que de la zone du héros. Et ce n'est pas correct. Il ne semble pas être lié à ceux-ci sont les deux oui, il ne siège sur ce rectangle que nous appelons la zone de héros. Mais parce que c'est si loin, c'est soit un élément indépendant, soit il fait partie de l'en-tête. Aucun de ces éléments n'est correct. Maintenant, la même chose si on bouge ces deux-là, mais on appuie sur le bouton vers le bas. Encore une fois, il ne s'agit plus d'une seule unité. Au lieu de cela, nous avons à cet élément ici composé de deux couches de textes et celui-ci ici, encore une fois, c'est tout à cause de la proximité. Pour rester simple, les objets qui vont ensemble doivent être proches les uns des autres. Cela ne signifie pas que vous devez foule les choses, mais vous devez être conscient de l'espacement et de sa signification. Voici comment vous le faites dans Adobe XD. Maintenez la touche Alt enfoncée et voyez la distance du titre et du fardeau. C' est simple, rien de majeur. Mais pour les calques de texte qui ont un cadre de sélection, vous devez vous assurer qu'il n'y a pas d'espace excédentaire. Comme vous pouvez le voir, cela nous donne la mauvaise mesure. Et vous avez deux options pour le réparer. Soit le psy, la boîte de délimitation comme ça, ce qui ne sera probablement pas parfait, mais c'est quand même une tentative décente. Ou à partir du panneau Propriétés, vous pouvez le modifier sur tout l'Ohio. C' est cette icône ici. Maintenant, vous pouvez vous assurer que ces lacunes sont identiques. Cela va vraiment m'aider, va faire un design beaucoup mieux. Maintenant, la valeur n'a pas vraiment d'importance. Vous pouvez utiliser 20, 40, 60 pixels, peu importe. Mais s'il vous plaît assurez-vous que c'est égal. Et dire que vous utilisez 14 entre, eh bien, puis l'écart ici en haut et en bas, qui doit être beaucoup plus grand que 40. Voici la meilleure façon d'y arriver. Vous sélectionnez ces trois éléments comme ça. Vérifiez le panneau Calques pour vous en assurer. Ensuite, vous les regroupez avec le contrôle G. Maintenant, voici l'important. Cette tête est semi-transparente. Le rectangle réel va jusqu'au haut. Donc, si vous sélectionnez ce nouveau groupe et l'arrière-plan principal et que vous les alignez, eh bien, ce n'est évidemment pas correct. Vous pouvez facilement le repérer. Voyez combien d'espace vide nous avons en bas par rapport au haut. Il est clair que c'est maintenant juste. Au lieu de cela, vous devez le faire. Vous sélectionnez uniquement la colle qui contient ces trois éléments. Et vous maintenez tout, et vous mesurez la distance entre le groupe et le bas du rectangle. Et maintenant du groupe au rectangle, de l'en-tête. Et maintenant, vous pouvez utiliser les touches fléchées pour déplacer le groupe vers le haut ou vers le bas selon vos besoins. Vous pouvez également utiliser le décalage ici, bien sûr, le P, le processus l'a mesuré jusqu'à ce qu'il soit centré verticalement. C' est la bonne façon de travailler votre temps avec elle et assurez-vous que vous comprenez à quel point c'est important. Et avant de finir, je veux insister sur quelque chose d'incroyablement important. J' ai vu cette erreur quand 1000 fois. Si vous avez une avance occupée sur l'arrière-plan, vous ne devez pas déplacer ce groupe en fonction de cette image. Je me fiche si c'est une ligne d'horizon de la ville comme Catherine Wilson chaque fois que vous ne bougez pas ça pour que l'utilisateur puisse voir l'image. Si le contenu ne fonctionne pas avec cette image, vous modifiez l'image. Vous n'enfreignez pas la règle d'alignement simplement parce que vous aimez cette photo. 48. 3 règles pour les icônes de conception Web: Bienvenue dans cette conférence où nous parlerons de l'utilisation des icônes dans la conception web. La première chose que vous devez savoir est que les icônes viennent dans toutes les formes et tailles. Ici, nous avons deux icônes remplies de tons au bas de la conception. En outre, nous avons des icônes de champ monochromatiques pour les médias sociaux. Juste au-dessus de cette partie de la newsletter que nous voyons, cette belle icône multicolore. Et quelque part au milieu du design, nous avons ces icônes complexes qui seraient également considérées comme les illustrations. Le fait est qu'ils viennent dans toutes les formes, couleurs et tailles. Comme vous le savez probablement déjà, laissez icon.com est l'endroit quand il s'agit d'icônes. Ils ont une qualité inégalée, mais ils ont aussi une énorme bibliothèque. L' inconvénient est que vous devez payer pour eux. Mais ce n'est pas de ça que je veux parler. Au lieu de cela, je veux que vous preniez le temps et appreniez à utiliser ces filtres. Supposons que vous cherchiez l'icône en forme d'étoile, saisissez-la et voyez ce que vous obtenez. Initialement, vous obtiendrez toutes sortes de styles, mais ensuite vous devez utiliser ce filtre de couleur et affiner davantage vos résultats. Il est essentiel que vous preniez le temps de naviguer et simplement explorer l'icône plate. Par exemple, une fois que vous cliquez sur une icône, vous devez faire défiler vers le bas et voir le pack entier. Celle-là, juste là. Par exemple, dans ce cas, nous avons 380 icônes au total. Ceci est essentiel parce que la règle numéro un en ce qui concerne les icônes est qu'elles doivent correspondre. C' est une énorme erreur d'exécution de mélanger et de faire correspondre les icônes pour les différents ensembles. Laissez-moi vous montrer ce que je veux dire. Remarquez ces trois dans cette zone. Le premier est brillant et 3D. Eh bien, ce sont, les deux sont simples et bidimensionnelles. Et juste un peu plus haut, vous trouverez une différence encore plus grande. Ce camion et cette boîte sont étiquetés comme des icônes remplies sur Cloud icon.com. Eh bien, ces autres sont linéaires, ce qui signifie que la base sur les traits, différents endroits peuvent avoir des étiquettes différentes. Mais puisque l'icône de drapeau est un tel joueur grand public dans le monde de la conception web moderne, utilisera leur système de nommage. Pour revenir à la règle numéro un, ne jamais mélanger et faire correspondre les icônes de différents ensembles. Le camion par rapport au dossier bref est nuit et jour. Bien sûr. Mais remarquez les icônes de l'artisanat et résidentiel par rapport à toutes les autres comme le piano ou la machinerie lourde. Même si ce sont les deux icônes linéaires que dans un style différent. Ceux-ci ont un aspect beaucoup plus épais. En tant que tel, même si les remplis n'étaient pas l'humeur, ce ne serait toujours pas un bel ensemble d'icônes. Mais passons à un bon exemple. Ces icônes linéaires de magnifiques sur le dessus de cette forme irrégulière orange. C' est le genre de chose que vous devriez viser. Et si nous faisons défiler jusqu'à l'en-tête, verra un ensemble de quatre icônes de médias sociaux qui sont également petits sur le rempli que dans le même style. Ils ont une taille appropriée. Donc c'est ce que tu cherches. Comme note de côté, Instagram est un peu différent des trois autres, mais c'est vraiment inévitable. Retour à la règle numéro 1. J' insiste là-dessus puisque c'est le plus important. Sur l'icône de rabat, vous pouvez bien sûr, rechercher un pack d'icônes. Cela vous rend la vie beaucoup plus facile. Par exemple, pour mes cours en ligne, je peux rechercher quelque chose comme l'apprentissage. Cela me donnera probablement un ensemble d'icônes qui conviendront à mon projet. Et parce que je peux voir le nombre d'icônes dans chaque dos, cela rend les choses beaucoup plus rapides, moins. Notez combien de styles vous pouvez choisir. Encore une fois, il est essentiellement rempli par des packs d'icônes complexes ou linéaires. Mais il y a tellement de nuances pour eux. Par exemple, j'aime celui-ci est la bonne épaisseur dy contre de complexe et bien fait. Il y a des kilomètres d'avance sur celui-ci, par exemple. Maintenant, vous pouvez demander à Chris, si j'ai besoin de ces icônes et que je trouve le pack qui n'en a que huit. Eh bien, fait en fait la situation la plus courante. Vous devez simplement faire de votre mieux et trouver deux autres icônes qui sont faites dans un style similaire. Pour les icônes monochromatiques, c'est un peu plus facile, surtout si nous parlons de ruines remplies. Mais pour rester court, il n'y a pas de moyen facile de s'en sortir. Vous passerez un temps extravagant à chercher le dos parfait avec une icône correspondant au pack existant. C' est comme ça. La deuxième règle, s'il vous plaît toujours utiliser SVG dans les PNG Adobe XD. La raison est simple. Svg signifie Scalable Vector Graphic. Évolutif signifie que vous pouvez changer sa taille et qu'il restera net et net. C' est la meilleure situation, fois pour nous en tant que concepteurs mais aussi pour les développeurs. Maintenant, lorsque vous redimensionnez les talons d'icône SVG que vous devez faire, vous désactivez d' abord la fonction de redimensionnement responsive. C' est de ce côté-ci, juste là. Super. Deuxièmement, cliquez sur l'icône de verrouillage. Maintenant, vous pouvez le redimensionner en plaçant n'importe quelle valeur dans ce champ ou dans celui-ci. Si vous ne voulez pas faire cela, maintenez simplement la touche Maj pendant que vous redimensionnez. Mais je vous suggère fortement d'utiliser la première option. Donc, encore une fois, vous avez désactivé responsive resize et vous cliquez sur l'icône de verrouillage. Enfin, règle numéro 3, taille de chaque icône de manière appropriée. Ce n'est pas lié au pourboire que je viens de vous donner. Au lieu de cela, pensez aux icônes qui viennent dans toutes les formes et tailles. Voici un exemple. Le premier est presque quadrillé. C' est en fait à 56 par 2, 56 selon le panneau des propriétés, c'est idéal, mais à partir du même pack. Comme vous pouvez le voir, les choses sont là aussi. Mais en se concentrant sur celui-ci, cela signifie que nous pouvons le réduire pour dire 90 par 91, quelle que soit la valeur sans aucun problème. La suivante est de 190 par 2 56. Quoi maintenant ? C' est une règle 3. Tout en ayant l'icône de chaîne pressée, ce qui signifie que le rapport d'aspect sera conservé seulement changé plus la valeur est élevée. Dans notre cas, c'est la hauteur. Je vais mettre 90 pixels. Et une fois que je me suis engagé, la largeur changera automatiquement à, dans ce cas, c'est 67 pixels, mais nous ne nous en soucions vraiment pas. Nous avons ignoré plus la valeur est faible. Même chose avec cette dernière icône. C' est assez large et court. Encore une fois, nous ne modifierons que plus la valeur est grande. C' est la bonne façon de redimensionner les icônes. Vous devez imaginer les placer à l'intérieur du carré de 90 x 90 pixels. Une seule valeur va toucher ses bords, soit la largeur, soit la hauteur. Toute autre façon de redimensionner n'est pas idéale dans mon livre. Et ce sont mes trois règles concernant les icônes dans le web design. Ne pas mélanger et faire correspondre, utiliser le bon format, utiliser la technique de rétrécissement appropriée, et puis évidemment il y a eu le quatrième. Merci. 49. Étude de cas : Équilibre visuel: Bienvenue à cette conférence où nous allons parler de quelque chose d'assez étrange, équilibre visuel. Tout design doit être juste quand vous le regardez et il devrait inspirer un bon sentiment. J' ai écrit une autre conférence sur ce sujet appelée symétrie, espacement approprié et espaces blancs. C' est toujours très valable, mais je veux vous montrer quelques exemples. Voici donc un en-tête équilibré dans mon livre. Nous avons des icônes de médias sociaux à gauche, un logo au milieu et le numéro de téléphone à droite. En dessous, nous avons un menu principal qui centre aligné. Je ne pense pas que ce soit 10 sur 10. C' est le genre d'équilibre que je cherche. D' un autre côté, jetez un oeil à cette partie supérieure ici. Pour moi, ce design semble être penché vers la droite. Je le perçois comme étant plus lourd de ce côté, fois à cause de ces articles ici, mais aussi à cause de cette fille. La gauche se sent vide. ai l'impression que je ne peux pas vraiment fonder mon expérience sur certains principes de conception. Je suis presque sûr que c'est bien documenté. Au lieu de cela, je peux vous dire que mon instinct me dit que c'est penché vers la droite, comme si c'était la Tour de Pise. Et mon plus grand regret est que ce problème est si facile à corriger. Il suffit de placer un autre article sur le côté gauche. On divise ça en deux éléments. C' est aussi facile que ça. C' est ainsi que vous atteignez l'équilibre. Jetons un coup d'oeil au pied de page, où encore une fois, l'équilibre visuel est essentiel. Ici, nous avons cet espace vide sur la gauche. Ça me dérange vraiment. En tant que concepteur, vous avez le contrôle total. Vous auriez pu ajouter plus d'informations sur cette colonne, ou vous auriez pu diviser cette navigation en deux parties. Retournons à un autre design où, encore une fois, ce n'est pas vraiment merveilleux, mais il est équilibré. Pour les colonnes, bien distribuées, même quantité d'éléments dans chacune. Ceci est globalement mieux que mon livre, ou autrement dit, moins mauvais que l'autre design. Nous avons déjà vu ce projet. Les icônes des médias sociaux créent une nouvelle ligne. C' est ce que 95 pour cent vide. Ces minuscules icônes ne méritaient pas tout cet espace. Au lieu de cela, la zone de recherche aurait pu être complètement supprimée, ou si elle était obligatoire, elle aurait pu être étendue lorsque l'utilisateur a cliqué dessus. Avec cette pièce supplémentaire, le concepteur aurait pu les placer dans la même rangée que le menu principal. Si vous me demandez, j'utiliserais probablement des icônes monochromatiques, toutes de même forme, probablement des cercles, et je ne les placerais pas ici entre le logo et le menu principal. Et c'est ainsi que j'obtiendrais un équilibre visuel avec une seule rangée. En déplaçant un peu vers le bas, nous obtenons un autre cas d'une colonne lourde dans une colonne très légère. Ce n'est pas le TOC, ce n'est pas moi qui explose les choses hors de proportion. Lorsque le client vous donne du contenu, vous devez travailler votre magie et trouver quelque chose fois fonctionnel et esthétique. C' est si facile de se cacher derrière des excuses comme mais crête, C'est tout le contenu que j'ai reçu. Bien sûr. Mais c'était votre décision de le coiffer de cette façon. Il y a beaucoup d'options. C' est juste une question de porter assez sur votre travail et de savoir que l'équilibre est essentiel. Cela ne veut pas dire que tout doit être parfaitement symétrique. Par exemple, ces quatre colonnes sont correctes dans mon livre. Bien sûr, le dernier mot aurait pu être soulevé, mais dans l'ensemble, même s'il y a une inclinaison claire, cela semble décent et mon livre, nous lisons de gauche à droite et nous avons certaines attentes sur la façon dont les choses sont supposées à tracer. Ici encore, c'est une tentative décente, n' est pas si mal. Je suis en fait plus dérangé par le fait que ces couches de textes ne sont pas alignées en haut. Eh bien. Ces trois sont évidemment identiques. Eh bien, l'autre se casse. Pourtant, l'effet global est beaucoup plus acceptable que ce que nous venons de voir dans la partie supérieure de la conception. Ok, passer à autre chose. Voici un autre cas qui me brise totalement le cœur parce que je reçois totalement avec le concepteur était penser que le client a ce logo inconfortable qui est une douleur à travailler avec. C' est trop grand. Si vous le réduisez, il ne sera pas lisible. Craignant que le client ne soit pas content d'avoir un petit logo. Le concepteur a choisi de surdimensionner l'en-tête. Une fois cette décision prise, des erreurs de toutes sortes ont commencé à envahir. Le fait est que, même si vous avez ajouté diverses choses ici, comme un menu secondaire ou des icônes de médias sociaux, cela aurait toujours été une erreur dans mon livre, laissant l'équilibre de côté. C' est parce qu'un designer intelligent doit faire des choix difficiles et prendre position. Dans ce cas, j'aurais laissé tomber l'icône et j'aurais gardé le titre ou vice versa. J' aurais pu garder le symbole. De toute façon, l'en-tête n'aurait plus à être aussi grand. Maintenant, je comprends que tu ne peux pas jouer avec la marque des gens pour te faciliter la vie. Vous pouvez diviser le logo Coca-Cola sur deux lignes simplement parce qu'il convient mieux à votre design. Mais le fait est que tous vos clients ne sont pas des géants d'entreprise qui ont un guide de style ou qu'ils sont profondément intégrés à la marque qui doit être maintenue à tout prix. En fait, la plupart des clients accepteront diverses modifications tant que le résultat final est nettement meilleur. Mais c'est un sujet pour un autre jour. Pour résumer cette conférence, équilibrez votre design autant que possible. Utilisez vos éléments à bon escient et créez un look équilibré à travers la symétrie. Regardez cette conférence. J' ai dit que le début, c'est avec la voix de Mark. Mark étant un acteur de voix que j'ai utilisé dans le passé. Ne sois pas choqué quand tu n'entends pas mon accent roumain aussi. Merci. 50. Pensées sur la première clé de la conception de Web: J' espère que tu as beaucoup appris à travers ces conférences. Je trouve que le web design est une méthode de patients et de précision. Les erreurs de carburant, meilleure est la conception. Les gens ont cette idée fausse que vous devez être créatif pour faire de grands sites Web. La vérité, c'est que tu dois suivre une recette et que tout gâteau que tu vas cuisiner sera au moins la moitié du synthé. Si vous mesurez soigneusement les choses et suivez toutes les étapes, choses vont mal quand vous pensez que vous savez mieux. Et à mesure que vous faites de moins en moins d'erreurs, votre qualité va augmenter. Certaines techniques deviendront une habitude et vous serez plus rapide et plus rapide. Avec la vitesse et l'expérience, vous gagnerez en liberté et vous pourrez commencer à expérimenter. Tu devrais toujours apprendre à marcher avant qu'ils n'essayent de courir quelque chose. C' est le problème le plus commun avec les débutants. Ils s'inquiètent tant des polices qu'ils devraient utiliser ou du web dont ils s'inspirent, des icônes qu'ils devraient utiliser et d'autres. Quand en fait, ils devraient se concentrer sur l'utilisation de la hauteur de ligne correcte pour les calques de texte aura une bonne quantité de contraste, mais être cohérent dans les conceptions, avoir suffisamment de salle de lecture, atteindre la symétrie, déséquilibre , et ainsi de suite. Donc j'espère que ces erreurs d'exécution sont maintenant très claires dans votre tête et que vous pourrez les repérer à un kilomètre de là pour être en mesure de vous améliorer. il vous plaît, rejoignez le chat discord et consultez la chaîne appelée la vue mon travail. Ici, il y a beaucoup de gens publient leurs designs afin d'obtenir des commentaires. S' il vous plaît carillon et faites-leur savoir où ils ont mal tourné. Vous n'avez pas besoin d'être un expert pour repérer la plupart des erreurs, même s'il s'agit de vos premiers cours de conception web, s'il vous plaît impliquez-vous. En formant votre œil pour repérer ces erreurs d'exécution, vous obtiendrez beaucoup mieux. Il s'agit de fournir des commentaires constructifs. Et plus vous le faites, plus votre esprit s'adaptera à cette nouvelle façon de penser. Et avec ça, j'espère que je ne verrai aucune erreur d'exécution dans votre travail. Merci beaucoup et continuons. 51. La deuxième clé de devenir un grand concepteur Web: Bonjour et bienvenue dans le deuxième pilier de la conception web, la compréhension des besoins du client. Avant de continuer, j'espère que vous avez vu mes conférences sur l'exécution parfaite des pixels. Et comment fonctionne la fondation de tout concepteur web sérieux ? Si vous n'avez pas fait vos devoirs, veuillez aller regarder ces vidéos avant de continuer. Voilà l'idée. Une fois que vous avez éliminé les erreurs d'exécution, il est temps pour vous de regarder la conception à travers une autre lentille, particulier aux yeux de votre client. Pour moi, c'est quelque chose qui a complètement changé mes compétences en tant que designer. Une fois que je me suis mis à la place du client, c'est comme si j'avais la révélation. Tout mon processus décisionnel a été modifié pour le mieux simplement parce que j'ai compris que chaque élément devait avoir une raison d'y être. Vous allez soit aider le client, soit vous vous amusez simplement dans Photoshop. C' est aussi simple que ça. Dans les conférences suivantes, je vais partager tout ce que j'ai appris au cours des nombreuses années en tant que designer, mais aussi en tant que propriétaire d'entreprise. En étant dans les deux camps, j'ai envie d'avoir un aperçu précieux et je veux le partager avec vous afin que vous puissiez devenir meilleur dans votre métier. Eh bien, le premier pilier du web design est très pratique et pratique. Ce que vous allez entendre, c'est ma propre expérience. Ce seront surtout des études de cas dans des histoires. S' il vous plaît soyez prêt à moins de travail pratique. ensemble, la partie suivante est subjective et vous pourriez ne pas être d'accord avec certains de mes points. C' est très bien. Sachez juste que tout ce que je dis vient d'un bon endroit et que j'essaie de vous aider à devenir un meilleur web designer. Si vous avez une opinion différente sur un certain sujet, c'est tout à fait bien. Donc, avec cela étant dit, allons y entrer. 52. Quel est le point de le site web ?: La première chose que vous devez vous demander lorsque vous lancez un nouveau projet est, quel est le but de l'entreprise ? C' est parce qu'un site Web est un outil, c'est un moyen d'atteindre une fin. Pour illustrer mon point de vue, voici un dessin soumis sur Discord. Si nous allons rapidement à la largeur, nous pouvons voir que c'est assez correct. Ce n'est pas génial, mais ce n'est pas si mal non plus. D' un autre côté, jetez un oeil à l'autre. Laissant tous les éléments de conception de côté comme les polices, les couleurs, l'espacement, les photos, etc. Pourquoi ces kilomètres sont séparés ? Eh bien, ça a un but. Le site est destiné à une chose spécifique, à vendre ce supplément de lit. À cette fin, nous avons un titre très clair. Certains USB ou les points de vente uniques, un joli bouton, mais aussi ces graphiques qui fournissent des informations supplémentaires sur cette entreprise. En tant que visiteurs, nous comprenons ce que nous devons faire. Nous pouvons acheter ce supplément pour tous les animaux de compagnie, et nous devrions le faire pour ces raisons. Revenons à la conception initiale. Ici. Supposons qu'avec les propriétaires d'entreprise, j'ai en fait quelques-uns des miens. Maintenant, quel est l'intérêt de ce site ? Que dois-je faire ? Ça dit « Commencez », mais qu'est-ce que ça veut dire ? Laissons lire, nous prenons votre entreprise au niveau supérieur, puis quelques Lorem Ipsum générique. Je suis très confus. Quels services vendent-ils ? Est-ce le marketing, les ressources humaines, la gestion des médias sociaux. C' est incroyablement vague en elle pourrait être littéralement n'importe quoi. C' est ça le problème. C' est pourquoi ce type de design, laissant de côté tous les choix de conception, ne sera pas bien accueilli par le client. C' est une erreur classique pour débutant. Le designer se concentre tellement sur l'esthétique qu'il perd la trace du point. Un site web doit avoir une précision chirurgicale. Tout propriétaire d'entreprise a besoin d'un fusil de sniper, ne va frapper des clients très spécifiques. Les gens ne se rendraient pas compte que l'approche des fusils de chasse n'est pas une bonne idée. Vous ne voulez pas vous répandre dans toutes sortes de groupes de personnes. Sachez que vous voulez répondre à votre public cible. Il y a beaucoup à dire sur ce sujet, mais je veux le répéter. Les entreprises ont besoin de sites Web avec un message très clair et un public cible bien défini. C' est pour les gens avec des animaux de compagnie. Celui-ci est pour tout le monde, ce qui signifie personne. Jetons un coup d'oeil à un autre exemple. Ici. Nous supposons qu'il s'agit d'un bureau d'avocats, mais encore une fois, nous n'avons aucune idée du type de services qu'ils offrent. Il y a les avocats du divorce qui citent les avocats de la défense. Oh, tant d'autres. Même si j'avais besoin d'aide juridique, je ne serais pas en mesure de les choisir parce que je n'ai aucune idée de ce qu'il s'agit. Mais jetons un coup d'oeil à celui-ci. Le drap de lit parfait fait pour vous. C' est clair comme le jour, nous savons ce qu'ils vendent. Le titre est sur le point. La photo obtient le point à travers ces points de vente m'a aidé à prendre ma décision. Et l'action est double. Soit acheter, ce qui en savoir plus. C' est parfait. Le design peut ne pas être étonnant, mais ce concepteur comprend ce que l'entreprise veut. Ventes. Jetons un coup d'oeil à un autre exemple. Nous fournissons la conception et le développement Web de qualité. Fantastique. Mais voyez, c'est agréable à regarder et c'est ce que les débutants hors. Ils pourraient penser que cette belle illustration est la raison pour laquelle ce type de design obtient quatre ou cinq démarrages sur 99 modèles. Mais ce n'est pas le cas, est le fait que le concepteur a compris le point de l'entreprise. Et donc de vendre un service qu'ils fournissent. Quel service ? Conception et développement Web. Mais aller sur un autre site Web à la planète sociale, pouvez-vous comprendre quel est l'intérêt de ce design ? Amener les gens et les organisations à l'état de santé optimal. Mais encore une fois, est-ce un service médical, un spot, le yoga centré, une sorte de gym. C' est pourquoi cela est condamné dès le début, laissant tout le reste de côté comme les polices, les couleurs, le schéma, l'espacement dans n'importe quoi. Ça n'a pas d'importance. Sans comprendre les besoins du client, vous n'avez aucune idée de ce qu'il faut construire. Prenons une petite pause et nous continuerons. 53. L'utilisateur et le propriétaire d'entreprise: Il y a deux côtés pour avoir l'histoire. Il y a le propriétaire de l'entreprise qui veut diriger une entreprise et le visiteur, ce que l'utilisateur qui cherche à faire un achat de sorte. Pour bien comprendre ce problème, explorons les deux côtés. Le premier sera un utilisateur régulier. Donc client, disons que je suis à la recherche d'une agence de design web pour la nouvelle entreprise commerciale. Je vais mettre ce terme et j'ouvrirai les meilleurs résultats de recherche, surtout à partir de la première page, bien sûr. Ensuite, après avoir ouvert 45, je les traverserai rapidement pour que je puisse affiner les choses. Peut-être que je veux une agence de ma ville avec quelqu'un qui fait également le référencement ou les campagnes publicitaires Facebook. Peut-être quelqu'un qui se spécialise dans les sites e-commerce avec une entreprise qui offre chat en direct afin qu'ils puissent rapidement répondre à mes questions. J' ai également un budget limité d'environ 1500$. J' aimerais voir quelques prix si possible, mais aussi d'autres designs qu'ils ont faits. Celui-ci est très sombre et morne. Ce n'est pas une bonne impression, alors je vais la fermer. L' autre est aussi assez sombre, sombre et trop simple à mon goût. C' est sorti. Celui-ci est frappant à regarder. Je vais garder celui-là. L' autre. C'est trop orange et je n'aime pas l'orange, donc non, celui-ci est un peu ennuyeux, mais je veux un beau site web. Le se démarque. Si leur site Web est ennuyeux, alors comment peuvent-ils créer quelque chose de génial pour moi ? Donc c'est sorti. Celle-ci semble avoir été faite en 2005, beaucoup trop dépassée pour mes jours. Et parler mis à jour. Jetez un oeil à celui-là. Absolument horrible. Ils disent qu'ils sont en affaires depuis 2008. Eh bien, il montre juste comme ça dans la méthode de secondes jusqu'à complètement vérifié certaines entreprises de ma liste. Ils m'ont perdu en tant que client. Ils ont perdu mes 1500$. Mais si j'avais un budget de 50, 10 000$ ? Pouvez-vous imaginer la douleur ? Et pourquoi en ai-je exclu certains ? des raisons stupides, bien sûr, par exemple, je n'aime pas l'orange, mais aussi pour les graves comme le design semblait obsolète. Mes patients en tant que client sont inexistants. Mon enfant crie en arrière-plan, je suis en retard pour le travail. Quelque chose brûle sur le poêle, et j'ai 0 temps pour prendre cette décision importante. Mon instinct est ce qui me motive mon instinct. J' ai quelques idées sur ce dont j'ai besoin et je cherche ces réponses. Si vous ne me montrez pas de numéro de téléphone, je sors. Pas de chat en direct, pas de liste de services sur, et ainsi de suite. Vous pourriez supposer que je suis incroyablement dur en tant que client, mais c'est la personnalité d'un client typique. Il y a tellement de sites Web qui offrent la même chose que je n'ai pas de patients. C' est le monde dans lequel nous vivons. Et cela s'applique à tout. Que vous vouliez acheter un grille-pain, une maison plus élevée, le cabinet d'avocats, un plombier, choisirait un dentiste. Le monde du consommateur est incroyablement vaste. J' ai un nombre illimité de choix. Si je n'aime pas ton logo, ton jeu de couleurs, ou quoi que ce soit d'autre, tu es sorti dans deux secondes. clients peuvent être considérés comme des mannequins Victoria Secret et des propriétaires d'entreprise les ont approchés lors de la fête. mannequins n'ont pas de patients parce qu'ils savent qu'il y a une ligne autour du bloc qui meurt d'envie de leur parler. Votre site ne me donne pas ce que je veux en deux secondes, je suis sorti pour toujours. Je dirais que c'est peut-être moins de 10 % de chance que je revienne. Encore une fois. Cela peut sembler ridicule. Peut-être que tu n'aimes pas ma métaphore, mais je crois que c'est comme ça que ça marche. Changons de côté cependant. Nous sommes le propriétaire de l'un de ces sites Web. On a payé les factures, on a essayé de faire croître l'entreprise. Nous faisons de notre mieux pour offrir des services de haute qualité. Nous n'avons pas assez de gens dans nos équipes alors que le site Web n'a pas l'air si génial, le personnel existant pousse fort pour terminer les projets précédents, donc ils n'ont pas le temps de redessiner avec essayer de plaire aux glandes que nous avons obtenus jusqu'à présent. Et après ça, on pourra peut-être faire un remaniement. On veut probablement plus d'affaires. Donc, nous allons utiliser des annonces, annonces Google, des annonces Facebook, vous faites des lits. Chaque clic va nous coûter de l'argent, l'argent sérieux parce qu'il y a tellement de concurrence pour chaque client potentiel que nous pourrions payer jusqu'à 50$. Oui. Tu l'as bien entendu ? Pour le visiteur qui vient sur notre site Web et quitte en 1,5 seconde, nous pourrions passer un paquet. cette raison, nous devons être très prudents avec d'autres fonds, mais aussi avec notre regard. Nous voulons cibler les personnes qui s'intéressent réellement aux services de conception web. Si nous attirons des gens qui recherchent d'autres choses comme les annonces SEO ou Facebook, et nous ne leur offrons pas de jeter de l'argent par la fenêtre. Donc c'est B qu'on doit forcer les gens à rester. Le taux de rebond est un terme qui est utilisé pour décrire le nombre de personnes qui quittent immédiatement un site Web à la revisite. Si nous avons un taux de rebond élevé, disons 80 à 90 pour cent, cela signifie gaspiller de l'argent. Littéralement, cela signifie que sur dix personnes qui viennent sur notre site, huit ou neuf partent sans même faire défiler, en cliquant une fois. Et ces 10 personnes sont payées, soit un dollar, ce que 200$ est encore de l'argent à la porte. Alors, que pouvons-nous faire en tant que propriétaire d'entreprise pour s'assurer que les gens restent là ? Tout d'abord, nous devons cibler le bon public. Si notre point d'ajout obtient les gens qui sont à la recherche tondeuses à gazon et nous les présentons avec d'autres services de conception web. Évidemment, ils partent, c'est clair comme le jour. Mais la deuxième chose est que nous devons faire une grande première impression. Rappelez-vous ce site en tant que client, nous l'avons immédiatement vérifié. On n'a pas aimé ça. Donc, nous, en tant que propriétaire d'entreprise, nous avons besoin d'une silhouette magnifique mais qui montre avec grand dans ce que nous faisons. Nos services de conception web sont de premier ordre. Nous avons des prix fantastiques et un grand retournement. Mais bien sûr, si l'autre agence le dit, nous devons donc trouver notre propre torsion et rendre notre site mémorable. Maintenant, je pourrais continuer, mais c'est le tourment d'un propriétaire d'entreprise. C' est pour ça que j'ai dit que tu avais besoin du fusil de sniper. Lorsque vous utilisez des annonces pour attirer des visiteurs sur votre site Web, vous avez besoin de précision. Vous ne voulez pas de gros morceaux de gens qui sont à la recherche de tondeuses à gazon, de taches, résultats ou de plummets, qui va vous coûter des seaux d'argent sans les nouveaux résultats. Et puis pour les utilisateurs clés qui s'intéressent aux services de conception web, nous devons faire une première impression fabuleuse. Et c'est le conflit entre l'utilisateur et le propriétaire de l'entreprise. Le visiteur est un type de pré Madonna, un top model qui a un nombre apparemment infinie de choix. Et d'un autre côté, le propriétaire de l'entreprise doit faire une première impression incroyable en quelques secondes, sinon il ne gagnera pas d'argent. Avec cela à l'esprit, un autre coup d'œil à ce site Web. Est-ce que cela rendrait l'entrepreneur heureux ? Cela l'aidera-t-il à atteindre ses objectifs ? Non, bien sûr que non. Et c'est pourquoi vous, en tant que designer, devez comprendre les besoins du client. 54. Analytics dans la conception de Web: Je suis à un endroit dans ma vie où je suis étonné de voir comment être entrepreneur fait de moi un meilleur designer web. Voici pourquoi dans les affaires, particulier dans le commerce électronique Analytics, est tout. Je ne parle pas de Google Analytics bien que ce soit une grande partie de celui-ci. Il s'agit de mesurer les choses et de prendre des décisions basées sur les statistiques. La clé, je vais la répéter. Les décisions relatives à la conception doivent être prises sur la base de statistiques. C' est important de deux points de vue. Numéro un, il vous apprend à mieux concevoir pour les sites de formation. Il vous aide à comprendre les besoins du client. Parlons de la seconde. Voici ce qui arrive le plus souvent qu'autrement. Vous terminez le projet, vous avez livré le design, il est mis en œuvre. Mais une fois qu'il est en direct, le client demande les changements. Pourquoi c'est ça ? Il a peut-être approuvé la conception il y a quelques jours. Qu' est-ce qui l'a fait changer d'avis ? Et l'analyse ? Il a vu certaines statistiques qui lui ont dit qu'il y a un problème avec votre design n'est pas qu'il s'est réveillé mauvaise humeur ou que sa femme n'aimait pas le schéma de couleurs ? Eh bien, bien sûr. Vous pourriez penser que bougie quelques caisses comme ça, c'est vrai. Mais la plupart du temps, le propriétaire de l'entreprise a vu métrique qui indiquait le problème. La chose est dans Photoshop ou Adobe XD, tout peut paraître bien. Vous êtes peut-être heureux. Le client et son équipe peuvent être heureux. Mais l'utilisateur final aura le dernier mot. Un site Web doit effectuer, pas sur les regards et faire une impression. Un site Web est un outil qui doit fonctionner entre certains paramètres. Vous faites de votre mieux, mais c'est juste une estimation instruite si votre design va fonctionner ou non. Que ce soit pour vendre ou convertir. Et je le répète. Lorsque vous concevez un site Web, vous faites une estimation éclairée, un pari, si vous voulez, sur la façon dont il fonctionnera. Parfois, vous vous trompez, ou dans la plupart des cas, il y a place à l'amélioration. Ainsi, l'idée est simple. Le client souhaite des modifications une fois le projet terminé car certaines statistiques indiquent qu'une modification, une modification est nécessaire. Passons à la première partie, comment l'analyse vous aide à concevoir un meilleur site Web. Cela va éclaircir les choses tout de suite. Voici un exemple. J' ai engagé une agence de publicité pour diffuser des annonces Facebook pour mon entreprise. Ils ont mis en place une campagne où l'objectif était d'amener les gens à ajouter le produit dans leur panier. Assez simple, non ? Sur cette base, nous pourrions prendre diverses décisions. Will en fait environ $80 ont été dépensés. Les résultats ont été choquants. 367 ajoute au panier une seule conversion. Ceci est désastreux et il montre que la conception actuelle de la carte est inférieure à la moyenne. J' ai effectivement enquêté sur le problème et le coût d'expédition n'était pas clair à cause de cela, les gens abandonnent leur panier. J' ai perdu des ventes. Sur la base de cette observation, j'ai remanié et les choses ont été améliorées. Allons à un autre exemple. J' ai lancé une campagne publicitaire sur le trafic via la même agence et mon taux de rebond était incroyablement élevé. Parfois, il pic que 85 pour cent. En bref, cela signifiait que huit personnes sur 10 ont quitté leur site Web sans rien faire. Pas tant qu'un clic. Plus que cela signifie que j'ai amené huit personnes sur mon site pour rien, mais à un coût important. J' ai payé pour eux. Ainsi, environ 70 à 80 pour cent de mon budget a été jeté par la fenêtre. Littéralement gaspillé. Tout cela parce que la page d'accueil n'a pas montré immédiatement ce que je vendais après la refonte. Cela incluait un meilleur titre, sous-titre et un bon plus de contenu qui a changé pour le mieux. Je ne dis pas que le titre peut vous amener de 0 à 100, mais toute légère amélioration est très appréciée dans les affaires, que ce soit 50 pour cent ou 50 pour cent. Un autre, j'ai continué à travailler sur la version de bureau de mon site jour après jour après une conversation avec quelqu'un avec plus d'expérience dans le commerce électronique, j'ai finalement regardé la panne du trafic. Plus de 90 pour cent de mes visiteurs provenaient du mobile. Cela signifiait que tous mes efforts étaient quelque peu vains. Je ne travaillais pas sur la version mobile, juste sur le bureau. C' était une erreur majeure. Globalement. Ce n'était pas pour rien parce que le chiffre d'affaires était divisé 72 pour cent mobile et 27 pour cent ordinateur de bureau. me dit que les visiteurs de bureau génèrent des revenus plus élevés que la moyenne, même s'ils ne représentent que 9% du trafic. C' est de l'analytique. Et peu importe l'outil que vous utilisez ou le client. C' est des annonces Facebook, les annonces Google étaient dur jar, opt-in monstre ou autre. L' idée est que tout ce que vous concevez doit être testé. Il produira certains nombres et en fonction d'eux, vous apportez des modifications. C' est un processus sans fin. Pour nous en tant que concepteurs web, nous devons nous assurer de comprendre que c'est ce qui est nécessaire dans l'économie d'aujourd'hui. Mon conseil est de facturer un prix fixe pour le projet, puis de mettre en place un tarif horaire pour tous les petits changements et modifications qui viendront inévitablement. Un site Web n'est pas une chose statique. Comme un plancher de bois franc que vous installez et que vous utilisez tous les jours. Même si c'est cher. C' est un outil qui doit être constamment étalonné pour pouvoir fonctionner au mieux. Les propriétaires d'entreprises par le dramatiquement, certains sont extrêmement instruits, n'ont aucune idée. Mais vous, en tant que concepteur web sérieux, devez comprendre la puissance de l'analytique et que vos décisions de conception doivent être prises en charge par des statistiques. Si vous concevez le meilleur site Web, tout est pour rien. Si les gens ne font pas d'achats. Et sur cette note, chaque entreprise a certains indicateurs de performance clés. Pour la somme, c'est le temps passé sur place, le nombre de nouveaux comptes créés, le nombre de commandes, le nombre de produits vendus, la variété des produits vendus, le montant total en dollars le nombre de pages visitées dans ainsi de suite. Chaque entreprise est différente pour vous, cela ne signifie qu'une seule chose. Plus de travail dans un bon moyen d'obtenir mieux à ce jeu d'analyse. Demandez au client des informations. Demandez-lui de partager les statistiques avec vous. Et vous serez choqué de voir comment, après avoir changé, par exemple, la taille d'un fardeau pour un érudit, comment cela peut à lui seul augmenter les ventes de 20%. Pensez à ça. C' est ce qu'un web designer moderne fait. Et après un certain temps, vous gagnez toute cette expérience. Et quand il s'agit de votre prochain projet, vous savez déjà que vous allez bouton CTA devrait dire Ajouter au panier au lieu de maintenant. Et c'est mieux d'avoir 260 pixels de large. Mais pas plus que ça. C' est ce que vous devriez apporter à la table. Expériences passées basées sur des analyses, basées sur des informations. Mais rappelez-vous, c'est juste une supposition instruite est ce que vous avez de mieux. Analytics, mon ami, c'est la clé du web design. 55. Modèles et créateurs de sites Web - La mort du concepteur de sites Web ?: Bienvenue à cette conférence où je veux parler de la mort potentielle du concepteur web. Voici le scénario. Certaines personnes hésitent à spéculer ou à s'inquiéter du fait que vous et moi sommes obsolètes. Que les concepteurs Web sont la race destinée à mourir en raison des modèles et des constructeurs de sites Web. Je ne te laisserai pas pendre. Je suis tout à fait en désaccord. Et pas dans la façon dont les fabricants de voitures à essence ne croient pas aux voitures électriques. Ou comment certaines personnes voient encore le changement climatique n'est pas réel. Je sais que je joue les deux côtés sur celui-ci. Voici comment je sais que nos services seront toujours nécessaires pour au moins dix ans de plus au minimum, WP Bakery page builder. Avez-vous entendu parler de cette connexion ? Que diriez-vous de l'élément ou du curseur, de l'évolution ? Si ceux-ci ne sonnent pas une cloche, je suis sûr que vous avez entendu la forêt de thème, qui est l'incroyablement populaire stocké pour les modèles WordPress. Je suis en fait un grand fan moi-même et j'ai acheté plusieurs thèmes comme les sept. La proposition de valeur est immense pour trente-neuf dollars de donc vous obtenez un sur Dieu la quantité de fonctionnalités. Je ne pourrai pas les présenter parce qu'on sera là toute la journée. Mais notez, c'est un prix incroyable et je ne suis pas affilié à eux, je n'ai rien à gagner de cette promotion. Maintenant, cette chose, comme presque tous les meilleurs best-sellers, vous donne un générateur de page, qui est soi-disant très facile à utiliser. n'y a pas de codage en jeu. Vous récupérez simplement un élément d'une liste, vous le faites glisser en place, puis vous ajoutez votre contenu. Jetez un oeil à ce site Web. C' est pour mon cours Photoshop roumain, et toute cette chose est construite sur des thèmes WordPress et des plug-ins. Je ne suis pas sûr de ce que tu ressens, mais j'en suis plutôt content. Il a utilisé mes objectifs, il fonctionne facilement bien. Et à la fin de la journée, c'est ce que les métaux pour moi en tant que propriétaire d'entreprise, c'est la première ligne que le public verrait. Maintenant, regardons le backend. Voir cette colonne d'entrées d'image unique. C' est ce truc juste ici. Le contenu est évidemment celui-ci ici. Après avoir fait défiler un peu vers le bas, nous obtenons un bloc CTA, un bloc d'appel à l'action, où je pousse l'étudiant à acheter les tribunaux. C' est ce groupe ici. Un peu plus bas que ça. Nous avons une galerie et sur et on va, laissez-moi aller jusqu'au bas et cliquez sur ce symbole plus. C' est la partie vraiment incroyable. Voici le nombre d'éléments que vous pouvez inclure. Pratiquement à peu près tout ce que vous pouvez penser. Des curseurs aux lecteurs vidéo, en passant par Google Maps, les onglets , les listes, etc. On peut passer des âges sur cette partie seule. Et après avoir sélectionné un, vous pouvez définir le titre, le personnaliser de toute façon, modifier sa conception. Et puis lorsque vous passez pour dire un autre module, vous avez d'autres paramètres et fonctionnalités. Et tout ce que vous voyez ici peut être repositionné avec ceux-ci. Je les ai déplacés comme tu veux. Vous pouvez également modifier la façon dont la ligne est fractionnée. Voir toutes ces options. Ceux-ci vous permettent de concevoir pratiquement tout ce que vous voulez. Tout ça pour quoi, 40$. Moins de support, bien que limité de la part des développeurs, un accès à un forum rempli de réponses aux questions. Tout cela semble qu'il n'a pas de sens d'embaucher un designer, un développeur, et de payer quoi alors 2100 fois plus. Ça semble illogique. Alors pourquoi n'ai-je pas peur de mourir ? C' est clairement un adversaire digne. Pas de question à ce sujet. Eh bien, la réponse est simple. Je l'ai utilisé. En fait, j'ai beaucoup utilisé ce constructeur de site Web. Et j'ai aussi acheté certains des thèmes les plus populaires sur les forêts d'équipe. J' ai également essayé les sites Web préconstruits, les modèles en un clic, où tout ce que vous avez à faire est d'échanger le contenu factice, qui sont UN fait est, c'est un travail acharné. C' est pour ça que je sais qu'on ne sera pas au chômage. Ecoute, je suis designer, mais je suis aussi entrepreneur. Et j'en suis un depuis 78 ans maintenant. Dans mon studio de design Android, j'avais une équipe de plus de 20 personnes. J' ai dû courir au quotidien. Maintenant, j'ai une startup d'aliments sains qui veut changer la façon dont les gens dirigent ce bureau. Dans le passé, j'ai eu quelques boulangeries, mais aussi quelques magasins de commerce électronique, certains sites similaires à Groupon. Tout au long de ma carrière, savez-vous ce qui me manquait le plus ? C'était de l'argent. Il était temps. Le temps est ce qui me tue. Le temps est ce qui ne me permet pas de produire plus de contenu, plus de qualités pour vous. Le temps est ce qui me garde humble. J' ai des idées d'affaires fantastiques cachées, perturbatrices qui peuvent éventuellement me faire un paquet, mais je n'ai pas le temps de les exécuter correctement. En tant que propriétaire d'entreprise, je jongle constamment plusieurs tâches. Et si vous n'êtes pas à l'aise sous pression, c'est comme si vous vous noyez, le stress est une immense responsabilité. Je ne cherche pas à économiser de l'argent, je cherche à grandir, à développer, à embaucher de nouvelles personnes qui peuvent accélérer les choses. Je ne cherche pas à tout faire moi-même. Dans certains cas, je suis obligé de le faire, mais je préfère abandonner le contrôle, être libre de faire d'autres choses. En fin de compte, que je construise une entreprise totalement nouvelle ou que je dirige une entreprise, je n'ai pas le temps de faire tout ce travail fastidieux. Et mes amis qui sont aussi entreprenueurs que la même chose. Je ne suis pas un cas isolé. Je sais que l'utilisation du générateur de page, c'est fastidieux parce que je l'ai fait. J' ai passé une tonne de temps à utiliser ce constructeur et similaires juste parce que je voulais un, le résultat pour être parfait exactement comment je l'imaginais. Et B, je ne voulais pas apprendre à coder, je ne voulais pas non plus embaucher un codeur parce que je les ai largement utilisés. Je sais que la grande majorité des propriétaires d'entreprise ne les toucheront pas. Ils pourraient les acheter. Ils pourraient comprendre comment acheter un plan d'hébergement, mettre en place une base de données installée WordPress, installé l'équipe et peut-être juste peut-être installer un modèle pré-construit. Mais ils n'auront pas les patients ni les compétences nécessaires pour jouer avec toutes ces choses. Absolument. Chaque chose que vous voyez ici a été peaufinée , modifiée et ajustée au moins dix fois. La quantité de paramètres est hors des graphiques. Est-ce que je veux leur grille de maçonnerie ou une ruine standard ? Afficher toutes les images. Utiliserait la pagination avec environ le chargement paresseux. Mais qu'est-ce que le chargement paresseux, en passant, combien de grilles par rangée cela affectera-t-il ma vitesse de chargement ? Que diriez-vous d'une lacune ? Essayons cinq, puis dix, puis 25, c'était mieux. Je vais faire des images optimisées. Et une galerie d'images ? Que diriez-vous des images de la galerie Tim, quel billet de galerie thématique était la différence ? C' est comme ça que j'ai perdu soir après soir. Comment mes yeux sont devenus rouges. Et tu sais quoi ? En fin de compte, je suis encore plus élevé le développeur un codeur. Ouais, je n'avais toujours pas assez de flexibilité pour que les développeurs aient encore à faire toutes sortes d'édits, CSS, JavaScript, se connecter à chaque PHP et des tonnes d'autres choses que je ne vais pas entrer dans le front end. Ce lecteur vidéo est personnalisé. Ces deux boutons ou personnalisés, le menu CQI en bas est fait par lui aussi. Et ainsi de suite. Le tableau de comparaison a été conçu par moi dans la boutique photo, entre autres choses. Donc, la conclusion tirée depuis longtemps est que ces bâtiments sont grands. Ils sont puissants, mais ils ont besoin d'une tonne de temps et de compétences décentes. Et en plus, il y a une deuxième raison pour laquelle nous ne mourrons pas en tant que concepteurs web. Et c'est H&M. J'ai la chance d'acheter des chemises sur mesure qui sont faites pour mon type de corps. J' y vais, je me mets et j'ai mes chemises, vestes et costumes. Croyez-le ou non, je suis assez chic dans la vraie vie, où pourquoi vous me voyez toujours dans une chemise dans les vidéos d'introduction. C' est mon style. Maintenant, je paie 50 à 100 fois plus que ce que je paie chez H&M. Parce que je veux de la qualité. Une fois quelque chose adapté à mes besoins. Vous pouvez sûrement penser que je suis un snob, mais c'est comme ça que la plupart des gens travaillent avec leurs entreprises. Une entreprise, c'est ton bébé. Vous l'aimez de tout votre cœur, vous le construisez et vous voulez qu'il soit fait d'une certaine manière, à votre façon. Donc, le fait que H&M existe et qu'ils fournissent des vêtements abordables de qualité assez décente ne m'affecte pas et cela ne vous affecte pas. Il y a un marché pour tout le monde. Est-ce que nos propriétaires d'entreprise qui n'ont aucun problème passer des centaines d'heures à jouer avec un constructeur de page. Mais ces personnes étaient néanmoins le public cible. On n'a pas perdu d'affaires. C' est pour ça qu'on ne mourra pas. Les constructeurs de pages exigent beaucoup de temps et la plupart des propriétaires d'entreprise n'ont pas ce luxe et cette barre oblique, ou ils n'ont pas les compétences techniques nécessaires pour le retirer. Deuxièmement, les options les moins chères seront toujours autour. Nous offrons le service premium et, à ce titre, nous ne sommes pas touchés par les chemises de 10$. Quand on vend 300$, ceux qui sont mon point de vue. 56. Étude de cas : 4 versions de le même site Web de même site Web: Hé là, bienvenue à cette conférence où je veux que nous analysions pour les versions du même site. Ils sont tous tirés de 99 modèles. La plate-forme qui relie les propriétaires d'entreprise et les concepteurs font des concours. Fondamentalement un client, à la fois le mémoire qui contient ses exigences et le prix en espèces. Et puis les designers du monde entier se mettent au travail et créent des entrées en fonction des besoins du client. Seul le gagnant reçoit la totalité de l'argent. Bien que les concepteurs partent et D remis, c'est un environnement hardcore où vous devez travailler dur, mais vous devez être intelligent à ce sujet. Pour l'essentiel, c'est que le meilleur design ne gagne pas. Au lieu de cela, les pixels glande préférée. C' est une énorme distinction. Je vais le répéter. Le client ne choisit pas la meilleure entrée du point de vue de la conception. Au lieu de cela, il choisit celui qui correspond à sa vision. En ne comprenant pas ce point, beaucoup de designers perdent leur temps et leur énergie sur 99 designs. J' ai vu de bonnes entrées SIG rejetées simplement parce que le concepteur n'a pas lu assez bien le mémoire. Eh bien, l'entrée a été magnifiquement exécutée. Ce n'était pas ce que le client voulait pour son entreprise à travers ces quatre dessins. J' espère pouvoir vous orienter dans la bonne direction. Je n'ai pas le mémoire, mais comme vous êtes sur le point de le voir, n'en a pas besoin. Je pense que je peux inverser les besoins des glandes en analysant les dessins et la façon dont il les a marqués. Au fait, merci à Dean Conway, un de mes élèves sur cet accord pour m'avoir donné ces dessins, n'est-ce pas ? C' est ce qui a été choisi comme gagnant. Celui-ci a quatre étoiles. Ce 13. Enfin, deux étoiles sur cinq. Donc c'est le pire. À première vue, vous conviendrez peut-être que celui-ci a l'air mieux, mais est-ce vraiment la raison pour laquelle le client l'a choisi ? Je pense que cela en fait partie, mais il y a d'autres facteurs en jeu. La première chose que je remarque est que ces deux entrées qui ont été mal notées et se basent autour de photos de personnes, celui-ci en particulier a beaucoup d'images. J' en ai compté dix au total. Et la seule partie du site Web qui ne repose pas sur les personnes est la section Services. Prenant un pas en arrière par rapport à sa cote deux étoiles, je donnerais probablement sept ou huit de ce designer. Après tout, c'est assez bien exécuté. J' aime le fait que les images ne sont pas photos de stock génériques que vous avez vu chaque design unique. Les icônes sont assez détaillées et elles ont l'air bien. Bien sûr, pas fantastique, mais il y a plus que la descente. Cette personne est bien découpée de sa section et qui montre une attention aux détails. L' entreprise est une société comptable pour les petites entreprises. En tant que tel, une touche humaine est généralement un bon ajustement. Ils veulent sembler terre-à-terre. Ils veulent faire appel aux entrepreneurs qui ne font que commencer. Et en montrant beaucoup de photos, cela les rend plus accessibles. Donc, comme vous pouvez le voir lorsqu'il est sorti de son contexte, c'est un beau site Web qui obtient une bonne évaluation pour moi, mais il ne reçoit que deux étoiles, a décidé qu'un a trois étoiles. Un peu la même approche, mais cette fois c'est un peu plus raffiné. Il a plus évasé, plus de présence pour faire cette section ici. Mais aussi au sous-en-tête avec région où nous voyons le même traitement avec la personne sortant des limites de cet élément. Encore deux redémarrages. La préparation s'est concentrée uniquement sur les illustrations, pas de gens dont on peut parler. En guise de note, même si cela a obtenu un score élevé pour les cinq étoiles, ce design et a toujours fini avec 0$. Donc, c'est sans valeur fondamentalement. Enfin, le gagnant est un mélange de graphiques personnalisés et de photos. Nous avons ce joli graphique isométrique et la zone des héros. Mais ensuite, nous obtenons une touche humaine à cette photo. Ensuite, quelques icônes étonnantes qui sont probablement prises à partir de points com pré-emballés, même que la zone de héros, par la manière. Mais alors c'est contrebalancé avec cette photo. Enfin, une autre zone élégante à cette tablette et tableau de prix. Alors, dans l'ensemble, quel est le plat à emporter ? Le client avait la vision certaine à l'esprit où la technologie rencontre les gens. Si l'entreprise était une personne, il ne voulait pas être un comptable de 55 ans, concentré sur l'ancienne façon de faire les choses. C' est ainsi qu'il a perçu ces deux conceptions comme étant standard. Ils l'ont fait, ils représentaient l'ancienne façon de faire les choses, et ils étaient très similaires à la dette site Web existant. Il est probable que ses concurrents balançaient un regard similaire. Donc, au lieu de cela, le client, je pense, voulait être plus moderne, plus high-tech, pas tellement qu'il voulait être un jeune de 20 ans avec une phase qui lui est due et qui sonne dans le nez. Mais les 30 ans, l'ODE avec cette redevance cachée sous sa chemise boutonnée avec la dernière Ultrabook à ses côtés et son café préféré. C' est ce que représente le gagnant. Il dégage une certaine ambiance. Oui. Et comptable pour faire ces deux photos. Mais 2020 comptable avec un logiciel de pointe puissant, avec des tableaux de bord et des interfaces élégantes, des processus optimisés, la nouvelle façon de faire des affaires. Mais encore une fois, remarquez que le deuxième se concentre trop sur la haute technologie. Ça fait froid. Faites tout ce bleu est sur les États-Unis et les nuances sont beaucoup trop sombres. Ce n'est pas assez, même lorsqu'il est associé à cet orange vif, design semble sérieux pour l'entreprise, mais d'une manière où il est formé pour être jeune et branché aussi. Il y a une année d'affrontement. D' un côté, vous avez ceux-ci seraient des lignes, des cercles et des graphiques personnalisés. l'autre côté, vous avez des murs de texte, nuances désagréables de bleu et des graphismes personnalisés à la recherche générique. C' est une bataille qui provoque du bruit, des frictions. C' est un design qui ne parle pas le même langage au vent à faire est confus. Il ne sait pas ce qu'il veut dire. C' est comme un blazer d'affaires avec des tongs en short. Du point de vue de la conception, cette fausse entrée de données est pire que ces deux autres. Mais le client a vu ce qu'il aimait. Il a vu le blazer, il a vu le short, il a vu le potentiel. C' est pour ça que ça a quatre étoiles. Objectivement, ce mur de texte est une erreur d'exécution claire. La taille de la police est beaucoup trop petite et la hauteur de la ligne est abîmée, au moins est divisée en paragraphes, mais c'est toujours une erreur importante. Quant à la zone des héros, le titre est absurde. C' est la moindre quantité de travail que vous pourriez retirer. Je ne suis pas sûr qu'il ait pu faire pire. C' est exactement ce dont ma citation dit parler. Mais ne nous laissons pas détourner. Cette partie n'est pas bien exécutée. Les boutons en savoir plus semblent avoir été volés à un autre endroit. Ils semblent de faible qualité et pixélisés. Habituellement, cela se produit lorsque vous utilisez l'outil de sélection sur un autre conçu pour voler quelque chose ? Je ne sais pas si c'est le cas, mais dans tous les cas, ça a l'air un peu bizarre. Cette partie ici, trop féminine, et ça n'a aucun sens. Qu' est-ce que ces éléments en forme d'œuf sont censés faire pour moi ? n'y a pas d'appel à l'action. Les espaces mal utilisés, cela n'a aucun sens. Quant à ces tables, elles sont tout aussi horribles. Ça aurait dû être des rectangles blancs. Tout ce bleu assombrit l'ambiance de façon spectaculaire. C' est trop grave, même pour une entreprise comptable. Tout cela dans beaucoup plus encore, il a obtenu des stars Ford allant au design gagnant. Cette illustration a sûrement eu un impact. Mais remarquez l'appel à l'action quand ici et un autre ici. Un score parfait pour ça. Notez, la grande quantité d'espace négatif. Cela aide à transmettre une bonne ambiance ouverte. La première impression est fantastique. Il est à égalité avec la dernière entrée, qui a d'ailleurs le symbole intégré dans la couverture des ordinateurs portables. C' est une belle touche. Notez également que la zone du héros est décemment dimensionnée. Celui-ci est beaucoup trop grand sans servir aucun but. Les mots audacieux n'ont pas beaucoup de sens, donc c'est un peu distrayant. Je n'aime pas non plus l'utilisation d'un trait d'union ici. Mais en laissant cela de côté, vous pourriez soutenir que ce quatrième design est aussi impactant que le premier. Mais parce que le client voulait être dépeint comme un avant-gardiste, celui-ci a cliqué avec lui. Pour l'appel secondaire à la couche d'action, la vidéo est bien intégrée, mais c'est là que les bonnes nouvelles s'arrêtent. La rédaction est modeste. En ligne. Les services, la comptabilité, la comptabilité avec un N grand dipôle, ils écrivent la zone des héros. Ensuite, remarquez comment nous avons écrit ici. C' est une autre erreur. Ces éléments ne sont pas alignés à gauche non plus. Si nous faisons glisser un guide verra que le concepteur n'a pas utilisé la commande left align. Cette zone n'a aucun sens non plus. Nous avons deux sous-titres et pas vital qui est placé sur deux lignes. C' est une erreur d'exécution activée en ce qui me concerne, ne me lancez même pas sur le mur du texte. De plus, le bouton plus About Us est extrêmement étrange d'être placé dans une telle position, d'une telle manière. Je doute qu'il soit mis en œuvre de cette façon. Que va-t-il se passer si la largeur de l'écran va être significativement plus grande. Maintenant, je pourrais continuer, mais le plat à emporter est ce que j'ai commencé cette conférence sur 99 dessins. Le meilleur design ne gagne pas toujours. Au lieu de cela, le client choisit celui qui répond à ses besoins. Et cette entrée va vous montrer que vous pouvez vous en sortir avec une tonne d'erreurs. Si vous choisissez les bonnes cases. Dans ce cours, nous nous concentrons sur faire les choses correctement ? Aucun client sérieux n'acceptera tous ces problèmes, surtout si nous parlons de milliers de dollars. Mais 99 designs est un autre type d'animal où vous devez avoir une approche différente. C' est pourquoi je dois des cours de design web. Celui-ci se concentre sur la création de sites Web magnifiques et efficaces. Ça, celui-là se concentre sur la victoire. Comme vous venez de le voir, ce sont deux objectifs différents. Enfin, je veux que vous vous concentriez sur le designer qui a créé cette entrée deux étoiles. Comment pensez-vous qu'il se sent après avoir vu ce design gagnant ? Clairement, il est contrarié. Mais il y a deux façons de le faire. Vous pouvez penser 99 designs est une plate-forme terrible, fera un client idiot et slash ou que le concours de conception était un canular. Ou vous pouvez apprendre de vos erreurs et adopter une autre approche à l'avenir. Par exemple, si cela avait deux étoiles, j'aurais immédiatement créé une entrée basée sur l'illustration. Si papa avait redémarré, j'aurais compris que je me réchauffais. Tout est au sujet du mémoire et de la rétroaction des clients. S' il n'écrit rien, au moins vous pouvez voir de son cœur ce qu'il aime. Ce concepteur n'a pas réussi à trouver ce que le client voulait. Un site web moderne avec des éléments de haute technologie. Et sur cette note, merci cette tablette, aider ce concepteur quand ce concours, je suis assez sûr que cette tablette contient une capture d'écran aléatoire. Ils peuvent de Dribble ou quoi que ce soit. Et je doute fortement que cela a été fourni par le client ou ils peuvent à partir de son site Web existant. Je pense qu'ils n'ont même pas ce logiciel, mais je croyais fermement que cela a aidé à conclure l'accord. Et avec ça, nous avons terminé cette conférence. J' espère que cela vous a aidé à comprendre pourquoi la conception de sites Web impressionnants ne suffit pas et pourquoi il est essentiel que vous compreniez ce que le client veut. Bonne chance. 57. Mise en page de pages de page d'adresse électronique en ligne: Bienvenue dans cette étude de cas où nous parlerons des besoins du client. Il s'agit d'un site e-commerce qui vend des produits physiques, particulier de la limonade, de la farine d'avoine, de la clé, un pudding, et ainsi de suite. Comme vous le savez probablement déjà, c'est ma propre entreprise à Bucarest, en Roumanie. Je vais tout décomposer pour que tu comprennes quel est le raisonnement derrière ça. Gardez à l'esprit, je parlerai à la fois en tant que concepteur web mais aussi en tant qu'entrepreneur. Alors commençons. La première chose que je veux de ce site est de générer des ventes. C' est parce qu'il s'agit d'un site de commerce électronique. Vous pouvez acheter ces produits sur le site Web et les faire livrer à votre porte en moins de deux heures. ne s'agit pas d'un site de présentation qui vous indique l'emplacement de certains magasins physiques. C' est une chose importante qui dicte une certaine mise en page. Ok, les ventes, pour les obtenir, il faut montrer les produits. C' est la première étape. C' est près de 30 à l'heure actuelle. donc prendre une décision. Comment devraient-elles être aménagées ? Ce que vous voyez ici est une approche à trois colonnes avec des onglets. Mais pourquoi pas quatre ou cinq colonnes de large ? Ne pas les énumérer tous sur la page d'accueil. Eh bien, les produits sont accrocheurs, del frappant. Ils ont des couleurs différentes et simplement jeter un coup d'œil sur eux montre une belle variété. Parce que les produits sont le visuel. Ils ont besoin d'une bonne quantité d'espace. Les photos doivent être grandes. Considérant que ce sont les six produits les plus au moins par catégorie, c'est le maximum. Une grille de trois colonnes et deux rangées est idéale. En fait, j'ai essayé la mise en page de quatre colonnes à 1, mais je n'ai pas aimé ça. C' est pour les cas où j'aurais huit produits. Mais encore une fois, le maximum en ce moment est de sept et est maintenant vraiment nécessaire. Les onglets sont aussi une bonne idée car ils prennent le centre de la scène. Ensuite, immédiatement après le sous-titre, il est peu probable que quelqu'un va les manquer. Donc, dans l'ensemble, la première chose qui doit être triée un site e-commerce est de montrer la variété des produits de manière efficace. Les produits eux-mêmes, nous sommes beaucoup vers cette décision et les chiffres. Si ceux-ci étaient plus moches, plus simples, nous aurions pu utiliser un autre type de mise en page, peut-être une liste avec un petit avatar pour le, chaque produit. Si le magasin avait des milliers de produits, l' une des mises en page les plus populaires est celle-ci. Nous voyons une liste d'éléments couplés avec quelques icônes assez belles. Notez que pas rempli par la façon, mais linéaire, ce qui est un choix intelligent car il fait la zone de conception. Quoi qu'il en soit, en revenant à la structure, personne ne dit que ces produits sont laids ou peu attrayants. Mais comme il y en a tellement, une liste textuelle est nécessaire. Retour à notre design. Le titre et le sous-titre sont incontournables. Les onglets sont utilisés pour naviguer rapidement dans le catalogue de produits. Parlons du produit dans cette liste. Lorsque les gens regardent autour de nous, notre objectif en tant que concepteurs web est de leur donner suffisamment d'informations pour qu'ils puissent faire un achat. Pas trop peu, car alors le site ne semblera pas crédible et facile à utiliser. Pas trop d'informations car il peut submerger l'utilisateur. Ainsi, la mise en page se présente comme suit. Qu' est-ce qui est absolument obligatoire ? C' est la question qui devrait être en tête. Quels sont les éléments essentiels dans une liste ? Évidemment, la photo, puisque cela va jouer sur les appétits des gens, parce que c'est affaire alimentaire. Ensuite, le titre du produit afin que vous puissiez comprendre ce qu'il est. Se déplaçant le long. Nous avons besoin d'une preuve sociale, une façon d'établir la crédibilité. Voilà les points de vue. Dans ce cas, nous voyons un vote basé sur le pourcentage et le nombre de votes. Ok, c'est bon. Ensuite, le prix et la quantité. Enfin, deux appels à l'action. Dans l'ensemble, il n'y a qu'une chose supplémentaire dans cette liste, le nombre de calories qui est inclus parce qu'il fait partie des valeurs de la marque. Transparence et décisions éclairées. L' affaire n'est pas seulement au sujet des régimes alimentaires et des calories faibles, c'est de faire des choix intelligents et de manger, n'est-ce pas ? Donc, cette petite ligne fait beaucoup en termes d'emballage d'un message en seulement quelques caractères. Que le message soit transmis de manière efficace ou non. C' est à la hauteur du reste du contenu que l'année prochaine ou la FAQ en bas. Mais dans l'ensemble, c'est nécessaire et c'est une belle touche. Donc, la conclusion est qu'il n'y a pas de graisse, il n'y a rien de plus dans cette liste. Nous aurions pu ajouter une brève description, mais cela aurait rendu la liste plus occupée et plus grande. Chaque article est déjà assez grand, donc c'est hors de question. Nous pourrions montrer les ingrédients pour chaque saveur, mais le titre vous indique déjà les faits saillants. Dans l'ensemble, c'est là où il doit être. Vous voyez le produit, vous lisez à ce sujet, vous voyez combien il est probable par d'autres personnes, est le prix, combien de quantité vous allez obtenir. Donc, c'est assez pour continuer. Parlons de ces boutons. Pourquoi deux ? Eh bien, l'icône du panier est un moyen d' ajouter rapidement des produits à votre panier sans se déplacer d'avant en arrière. Cela créerait des frictions. Voici le flux sans lui. Choisissez un produit, attendez que la page se charge. Puis ajouté à votre carte. Ensuite, revenez à la page d'accueil, déplacez vers un certain onglet, cliquez sur un produit, puis ajouté à votre panier. Considérant que la commande minimale est pour les travaux, c'est un tracas, c'est la friction. Ainsi, c'est un choix très intelligent. Ce petit bouton a vraiment beaucoup de sens. C' est vrai que l'icône aurait dû avoir un symbole plus la semaine prochaine. Mais nous parlerons de ce qui peut être amélioré à un autre moment dans les tribunaux. Le bouton orange est un appel à l'action qui indique Afficher les détails. Le bouton est assez grand et il est coloré Hammond quand idée spécifique dans votre esprit. Si c'est orange, vous pouvez cliquer dessus. En parlant de la mise en page, vous pouvez supposer que le bouton bleu Ajouter au panier devrait être plus grand. Mais c'est trop agressif. Nous voulons que les gens fassent des achats, mais nous ne devrions pas supposer que la plupart des visiteurs utiliseront ce bouton. Ceci est en fait pour déterminer les clients qui connaissent déjà les produits. Le fait est que la plupart des gens voudront probablement en savoir plus sur les produits avant de faire un achat. Les entreprises, alors qu'elles aiment les clients de retour, elles doivent d'abord obtenir les nouveaux utilisateurs. En tant que tel, cette barre oblique 80, 20 détails de vue fractionnée ajouter au panier. Fais du sens. Prenons une courte pause et nous continuerons notre analyse. 58. Détails de produits de commerce électronique: Bienvenue de retour. Cliquez sur un produit afin que nous puissions voir ce qui est quoi. Ici, l'utilisateur exprime son intérêt pour un produit, donc nous avons dû lui obtenir des informations supplémentaires. La première chose pour moi, c'est la galerie de produits. Cela doit tourner automatiquement pour attirer l'attention de l'utilisateur. Il doit être assez grand pour qu'il ait un impact. Donc, ce devrait être la première chose que l'installation. Ensuite, évidemment un grand titre, la preuve sociale et l'extrait d'information. Le truc, c'est que certaines personnes ne veulent pas lire le court roman. C' est de la nourriture, c'est un dessert. Bien sûr, vous voudrez peut-être en savoir plus à ce sujet, mais trois lignes de texte devraient suffire à une partie importante du public. Puis l'orange entre en jeu comme la couleur d'action. La page d'accueil a montré que si elle est orange, vous pouvez cliquer dessus. Eh bien, ici, nous avons le contrôleur de quantité et ajouter au bouton panier. Ceux-ci sont en haut de la mise en page afin que vous ne puissiez pas les manquer. Si nous nous concentrons sur les rectangles blancs qui composent la page, nous pouvons voir qu'il y en a trois. Ce n'est pas par accident. C' est la transmission subliminale de l'idée qu'il y a différents domaines avec des degrés d'importance variables. C' est pleine largeur et il contient de l'orange, super important. Cet autre assez large avec quelques onglets, importance moyenne. Enfin, il y a une colonne étroite, une importance minimale. Un peu basé sur le modèle Z, qui indique que l'utilisateur scanne la page pour les points d'intérêt, et il ne la prend pas réellement du haut vers le bas. Voici un article intéressant à ce sujet. L' idée est que vous regardez rapidement les parties clés de la conception et la façon dont vos yeux se déplacent composent la lettre Z. Certains disent que le point final devrait être un bouton d'appel à l'action. Eh bien, si nous prenons la tête en considération sûr. Les fournitures, le logo, la connexion, informations enregistrées sur le produit à travers la galerie et le texte. Enfin que pour le bouton Panier. Mais si vous appliquez le motif Z sur ces trois colonnes, le dernier point serait cette zone d'information étroite, qui n'est pas du tout important. C' est pourquoi j'ai dit que c'est lâchement basé sur le modèle Z. Parlons de ces onglets pour le premier contient des informations supplémentaires sur un produit pour ceux qui veulent vraiment plonger en profondeur. Le deuxième onglet contient toutes les informations nutritionnelles, ce qui est un élément important qui reflète l'information Kelvin de la page d'accueil. Enfin, les vues pour une preuve sociale, la mise en page est brisée environ 75, 25 pour cent en raison de bloc pleine largeur serait maladroit. Nous aurions pu ajouter l'information nutritionnelle sur le côté sous les vues ci-dessous, c'est vrai, mais encore une fois, le système d'onglets mesure c'est vrai, mais encore une fois, la page d'accueil. Néanmoins, c'est toujours une bonne alternative à garder à l'esprit pour une autre fois. Se déplacer vers le haut, la chapelure, y a-t-il les fins de référencement complet ? Et c'est ce que les icônes des médias sociaux, ceux-ci sont utilisés pour partager ce produit sur Facebook, Twitter, ou par e-mail. Ce type de domaine d'action est assez daté. Vous penseriez que peu de gens l'utiliseraient, mais les produits attirent un public plus âgé, principalement des femmes âgées de 35 à 45 ans. En tant que tels, ces boutons de partage ne semblent pas aussi ridicules compte tenu du public cible. De plus, du point de vue de la conception, ils équilibrent cette zone qui serait autrement de 20. Encore une fois, il s'agit de comprendre les besoins du client. Le public cible a besoin de ces boutons. Le public cible utiliserait effectivement ces boutons. Ensuite, lorsque vous ajoutez le produit à votre carte, nous recevons une notification en bas de l'écran, qui s'adresse principalement aux utilisateurs mobiles. Et j'ai fait un choix assez difficile d'inclure cette barre jaune immédiatement sous la zone des héros. Ainsi pour montrer la carte actuelle. Voilà le scoop. Si je ne l'ai pas ajouté, alors nous aurions eu besoin d'une fenêtre contextuelle qui aurait demandé à l'utilisateur s'il veut continuer ses achats, aller à la caisse. Cela fragmenterait l'expérience de l'utilisateur. Il le diviserait en petits morceaux. Rappelez-vous que c'est au moins quatre à cinq emplois. Je sais en fait que la plupart des audits contiennent au moins 10 produits. Donc ce type de pop-up serait un peu frustrant. Mon approche est à peu près sûre. Le panier est toujours présent en haut à droite, pas à côté du menu principal, mais toujours dans une zone où l'utilisateur s'attend à le trouver. Atteindre ceci est un bon compromis. C' est à propos de cette page, passons à la caisse. 59. Paiement de commerce électronique: Bienvenue ici encore. Parlons du processus de paiement. Si vous n'êtes pas connecté, vous devriez toujours pouvoir voir les produits que vous avez ajoutés à votre panier. Voici le résumé de la commande ici. Sur le côté gauche, nous avons quelques mots sur le processus de livraison et une grande barre oblique de connexion enregistrer le bouton. En passant, c'est une refonte complète. L' ancienne version ne fonctionnait pas bien selon mes analyses. C' est donc la nouvelle version améliorée. J' attends toujours que cette tâche arrive, mais après quelques jours, il semble que cela apporte un peu plus de ventes. Remarquez quelque chose d'important ici. Le bouton Passer la commande s'affiche, mais il n'est pas actif. D' où, cette couleur grise. Je veux montrer ce bouton pour que l'utilisateur sache où le trouver. J' affiche également un message à l'intérieur disant, S'il vous plaît remplir toutes vos informations. Une autre chose qui n'est pas montrée est le coût d'expédition. Évidemment, il n'y a pas d'adresse de livraison, sorte que les informations ne devraient pas être affichées. Enregistrez ce compte Paik et nous verrons ce qu'il y a de mot. D' abord, j'ai pris la décision de compter. Ce sont les étapes. Je veux qu'ils soient montrés en tout temps. Guidez l'utilisateur tout au long du processus en rendant ces deux autres parties inactives. Nous voyons que les coordonnées sont manquantes, ce qui signifie le nom et le numéro de téléphone. Nous avons un gros bouton ici qui vous aide à remplir cette information. La partie importante est l'adresse car les frais d'expédition sont calculés en fonction de votre ville. Encore une fois, nous avons un bouton qui ouvre un dialogue qui vous permet d'ajouter une adresse n'est pas idéal, qu'il ya une étape intermédiaire. Mais encore une fois, ils vont encore travailler à faire sur le site Web. Je vais rapidement remplir ces informations avec des choses aléatoires pour que vous puissiez voir ce qui est quoi. Fondamentalement, après avoir ajouté vos coordonnées, vous déverrouillez l'étape 23. Le mode de livraison est basé sur votre ville à l'étape 1. Et si votre pouce l'arrêt du livre capital, alors vous devez les méthodes de livraison, livraison ultra-rapide ou la norme. Ceux-ci ont des prix différents en fonction de votre sélection, le ordonné certains des changements est extrêmement important. Le résumé reste visible car vous pouvez voir le coût total ici. Donc, cette mise en page avec deux colonnes devrait fournir à l'utilisateur une transparence supplémentaire. Auparavant, ils étaient tous empilés les uns sur les autres, ce qui signifiait que l'utilisateur devait constamment faire défiler vers le haut et vers le bas. C' est une friction supplémentaire qui amène les gens à abandonner. Encore une fois, comprendre les besoins du client. En ce qui concerne la livraison très rapide, la société donne à l'utilisateur une option de calendrier qui a ordonné d' arriver à une certaine heure pour ce calendrier était nécessaire. Cela vous montre les dates de livraison disponibles pour faire ce cercle vert. Une fois que vous sélectionnez le jour, vous obtenez également une liste déroulante qui vous donne la possibilité de sélectionner une heure. Ce calendrier est aussi une bouée de sauvetage quand il s'agit de vacances et cas où le temps ne nous permet pas d'effectuer des livraisons, n'est-ce pas ? Dans le cas où l'utilisateur change sa ville, qui livrent, les méthodes sont différentes. Vous n'obtenez qu'une seule option et le coût est également beaucoup plus élevé. Encore une fois, cela est montré sur le côté droit. Le prix va jusqu'à 30, ce qui est un peu d'information critique. C' était un point difficile dans le passé parce que le coût le plus élevé était indiqué par défaut. Même si vous êtes qualifié pour une livraison ultra-rapide, ce qui est beaucoup moins cher, l'ancien design a montré le coût le plus élevé par défaut. C' était une erreur de codage, mais cela a quand même bouleversé beaucoup de gens. Par conséquent, pourquoi cette refonte a dû être faite. Comme vous pouvez le voir, tout est de faire l'usage de heureux. Le guidage est venu avec une touche fine vers le but final. Lorsque ces autres ici sur la Place Order sont constamment montrés afin de minimiser la situation. S' il clique sur le bouton, puis une flèche qui s'affiche qui garantit un certain type de rétroaction négative. Au fort. Lorsque vous passez une commande, vous vous attendez à une page de confirmation, un message de réussite de tout type. Quand vous êtes rencontré avec un ajout, un froncement des sourcils va inévitablement apparaître sur votre visage. Considérant que vous devez respecter une commande minimale, choisissez un mode de paiement et ainsi de suite. Cela signifierait qu'un utilisateur devrait cliquer sur trois fois et obtenir une erreur. Ce serait une expérience frustrante. Donc, en montrant simplement toutes les modifications immédiatement, cela peut améliorer son expérience. Évidemment, le mot-clé ici est peut-être un pari. Il peut abandonner s'il voit tout ce rouge. Mais c'est quelque chose sur lequel j'aime parier. Je pense que c'est une meilleure approche. En ce moment, passons à l'affaire où toutes les conditions sont remplies. Le bouton devient orange, et maintenant vous pouvez passer une commande. Ce changement du bouton de la grande orange est extrêmement important. Mon livre, un clic vient de se produire dans l'esprit de l'utilisateur. Il sait maintenant qu'il est libre de dire que chaque fois qu'il en a envie. C' est un peu important de commentaires qui aide l'utilisateur à se sentir en contrôle. Et il est plus susceptible de passer une commande en recevant ce signal visuel. C' est le processus de paiement en un mot, il s'agit de rendre les choses aussi simples que possible. La clarté est le mot clé ici. Ne vous attendez pas à ce que les gens fassent quoi que ce soit pour suivre une approche de haut en bas, pour tout lire. Supposons que l'utilisateur n'a pratiquement aucune expérience dans les achats en ligne. C' est comme il est facile de faire tout ce processus. Même le champ Détails de la commande est maintenant affiché par défaut. Auparavant, vous deviez cliquer sur un bouton et qui a invité la popup avec ce champ. Le plan est de réduire le nombre de clics inutiles, car cela signifie plus de ventes. C' est ce que je veux dire par comprendre les besoins du client. C' est le commerce électronique. Ce site est tout au sujet de la vente. Votre travail n'est pas d'ajouter de jolis fardeaux. Spruce avec des illustrations, des couleurs frappantes, des schémas, etc. Maintenant, d'abord et avant tout, vous devez vous assurer que l'expérience d'achat globale est sans effort. Que même une grand-mère de 80 ans peut facilement aller à la largeur. Ou les choix de conception doivent être faits à cette fin, vers la vente. Par exemple, regardez ce bouton radio. L' actif est orange, l'inactif est gris. Regardez le bouton Passer une commande inactif, ou comment un calque de texte plus petit sous les options de livraison ? Ceci est important car cela aide l'utilisateur à se concentrer sur ce qui est critique et ce qui est agréable à savoir. Remarquez les rectangles individuels ou comment les titres ont tous le traitement de toutes les capsules appliqué. Voyez comment le gris de ce champ est différent de la couleur d'arrière-plan. Toutes ces choses sont de minuscules détails qui aident l'utilisateur à faire un achat. Vous commencez par l'objectif des ventes de sites Web et ensuite vous travaillez votre chemin vers le retour. C' est pourquoi il y a peu ou pas de décoration, surtout sur la page d'accueil ou sur la page de détails du produit. Les photos sont le live, le lumineux et coloré. Le reste du design doit être maîtrisé. Donc ça ne deviendra pas un concours de cris entre ces éléments. L' interface devrait laisser briller les produits. Il ne devrait pas rivaliser pour l'attention. Comme recherche, il n'y a pas d'illustrations folles ou toutes sortes de détails de conception saupoudré partout. J' aimerais les ajouter, oui. Mais ce n'est qu'après avoir pris soin des fondamentaux. C' est l'état d'esprit que vous devez prendre. Tout dépend des besoins du client, des besoins des entreprises. Faire des ventes. En tant que concepteur, vous êtes embauché pour les aider à y parvenir. Vous utilisez le guide de style de la marque. Vous exprimez votre créativité. Mais il ne s'agit pas de faire un site Web impressionnant, ne s'agit pas d'ajouter une pièce centrale pour avoir un portefeuille, c'est de savoir comment le site va mettre pour eux une fois qu'il sera en direct. Et si les analyses montrent qu'il y a place à améliorer, vous devez prendre le temps d'apporter des changements. Merci de vous accorder. 60. Pourquoi ne pas le pixel de sites Web: Hey, là, je pense que certains de mes étudiants pourraient voir imperfections dans mes propres sites Web et penser, hmm, si fou, un si bon designer web, pourquoi ses sites Web ne sont pas dix sur dix ? C' est une question légitime. Mais ça ne s'applique pas, juste mes projets. Voyons ce qui rend les sites Web en panne. Voici la page du panier. Quand vous n'êtes pas inscrit. Remarquez comment le photon est juste en train de flotter. Erreur de coupe claire. Lorsque vous visitez le produit, vous verrez les lignes verticales. N' ai pas de sens. Le logo est décalé était le ditto gauche pour le contenu du premier onglet. Il n'est pas aligné avec le logo. Pensez au logo. Cette colonne étroite montre une colonne gigantesque, ce qui a du sens. Ensuite, nous avons une hauteur de ligne différente ici par rapport à ici. L' écart entre le chariot et le rectangle de base est beaucoup trop grand et les problèmes ne cessent de s'empiler. Pourquoi ces choses se passent ? Pourquoi les choses sont-elles décomposées à gauche et à droite ? Le design que je peux vous assurer était parfait au pixel. Voulez-vous que je décale ce logo dans Photoshop ou utilise une hauteur de ligne différente pour deux zones différentes de la même page ? Bien sûr que non. J' apprécie que vous me donniez le bénéfice du doute au fait. Donc, si mon PSD était parfait au pixel, pourquoi la version live est-elle remplie de toutes sortes de problèmes, de priorités faciles. En d'autres termes, la société de codage n'a pas fait un excellent travail. Et moi, en tant que designer et propriétaire d'entreprise, avons choisi d'ignorer ces problèmes. Et je l'ai fait parce que ce serait d'autres questions prioritaires plus pressantes. Par exemple, les gens abandonnaient leurs cartes en raison des frais d'expédition. Comme je l'ai dit précédemment, le site a montré le coût le plus élevé par défaut que lorsque l'utilisation de ajouté son adresse réelle était le prix mis à jour. Mais d'ici là, 90% des utilisateurs ont déjà abandonné. Cela signifiait des pertes de ventes. Ça voulait dire de l'argent par la fenêtre. Et comparaison, ces lignes verticales pâle en comparaison. Personne ne se soucie si l'espace est trop grand et ainsi de suite. Ceux-ci n'ont pas une priorité plus élevée parce que les gens n'abandonnent pas ces ordres à cause d'eux. C' est la même chose partout dans le monde. Cela n'est pas spécifique à mon site Web ou aux codons que j'ai embauchés. Les entreprises de gauche et de droite choisissent d'ignorer certaines questions de petit niveau parce qu'il y a plus ou des questions de gènes. Nous avons un dicton en Roumanie qui se traduit à peu près par la maison est en feu. La vieille femme se peigne les cheveux. Fondamentalement, si l'entreprise perd de l'argent parce que la liste déroulante de la ville ne fonctionne pas correctement, et les gens peuvent passer leurs commandes. Personne ne se soucie de la hauteur de la ligne. Réglage. Il semble ridicule quand passer une commande est impossible en raison d'un bug. Et c'est la clé ici. Les insectes apparaissent tout le temps. Par exemple, j'ai choisi de changer la famille de polices en une police serif. cette raison, la taille de cet extrait n'était plus viable. Il était beaucoup trop petit et il avait une mauvaise lisibilité. Le codeur a ajusté la taille, mais alors la hauteur de la ligne n'était pas correcte. Il l'a corrigé en fonction de mes instructions, mais il n'a pas appliqué la même valeur à tous les autres calques de textes. Ainsi, comme vous pouvez le voir, un petit changement entraîne une cascade de modifications. Et comme je l'ai déjà dit, un site web est une chose vivante, un outil qui a constamment besoin de calibrage pour bien fonctionner. Les modifications sont inévitables. Mais avec ces modifications viennent des bogues et des problèmes de fonctionnalité. Et je vous gamine ne pas changer la couleur d'un bouton faire briser le site Intel, le CSS peut ne pas charger correctement plus. La mise en page peut radicalement changer. Le panier peut ne pas fonctionner. Tout cela à cause d'un changement de couleur. Oui. Je sais que ça a l'air ridicule. Mais ceux qui sont au courant peuvent le confirmer. Plusieurs branches, plusieurs personnes travaillant sur le même projet, n'utilisant pas le serveur intermédiaire ou le mode sandbox, vous le nommez. Il y a plein de raisons pour lesquelles cela arrive de temps en temps. C' est honteux que ça le fasse, mais ça arrive. Les entreprises de codage font de leur mieux, mais elles accordent toujours la priorité à leur travail. Vous voyez, au début, tout le monde est d'accord que la fonctionnalité doit être résolue. Si vous ne pouvez pas cliquer physiquement sur un fardeau pour passer une commande, tout est pour rien. n'y a pas de discussion à ce sujet qui doit être corrigé en premier. Mais alors nous arrivons à parler du pied de page flottant ou du logo surdimensionné. Les sociétés de codage détestent ce type de travail parce qu'il n'y a pas d'argent dedans et battent leurs codons préfèrent les projets complexes qui nécessitent une approche A12Z. Ce qu'ils ont énuméré jusqu'à présent en termes de problèmes sur mon site Web, prend quelques heures de leur temps, si peu ou pas d'argent pour eux. Encode détestent ce type de travail parce qu'ils sentent qu'il est en dessous d'eux. Je spécule, bien sûr, il y a d'autres raisons, mais c'est en plus du but. Pour ces raisons, j'ai engagé le freelancer pour m'aider à vous trouver sur le concepteur simplement parce que cette grande société de codage a fait tout le backend de la base de données, toutes les fonctionnalités avec me charger autour de 40 à 50$ l'heure. Le pigiste ne demande que la fraction de cette somme. Mais cela pose également des problèmes car ils doivent travailler ensemble la moitié pour maintenir le code source sur GitHub. Ils doivent étiqueter leurs modifications et s'assurer, lorsqu'ils valident les modifications, qu'ils ne cassent pas le site Web pour quelque raison que ce soit. C' est un acte d'équilibre serré. La leçon n'est pas la science des fusées, mais une mauvaise communication, différents styles, différents styles de codage, différents fuseaux horaires, et un tas d'autres raisons entraînent des problèmes. C' est un problème sensible parce que la société de codage n'aime pas le pigiste. Et le Freelancer veut faire plus de travail sur le site en fonction de sa propre expérience, vision, sans parler de son compte bancaire. Je pourrais continuer, mais laissez-moi résumer. En quelques mots. Les sites Web sont remplis de diverses erreurs de conception parce que les entreprises de codage ne se soucient pas des conceptions parfaites de pixels, alors les codeurs n'aiment pas ce type de travail n'est pas lucratif pour eux d'un point de vue financier. Et quand vous trouverez l'étrange compagnie de codage que les enfants à propos de ces problèmes de conception, ils coûteront un bras et une jambe. Et le client ne sera pas content de ça. Et même si tout est parfait à 1, disons, fois que la société de codage a terminé les projets et remis les clés proverbiales au client, les changements sont inévitables. Nous avons parlé de cela il ya quelques conférences, n' est pas que le client change d'avis au hasard est due à l'analyse. Et comme je l'ai dit, les modifications font apparaître des bugs. bogues doivent être priorisés en fonction de leur importance. petits détails de conception sont toujours laissés sur le côté et le cycle continue et continue. Et c'est pourquoi la plupart des sites Web ne sont pas parfaits, même le mien. 61. Page de pose et site Web: Bonjour et bienvenue. Commençons un nouveau chapitre en analysant les besoins du client. Pour faire une lentille différente. Nous comprenons que la plupart des entreprises veulent que leurs sites Web fonctionnent, et c'est pourquoi nous devons parler des pages de destination. Comme vous êtes sur le point de le voir, ce sont un animal complètement différent. Et vous devez comprendre que si vous voulez rendre vos clients heureux, pages de destination ont un objectif spécifique qui peut prendre plusieurs formes, mais les deux plus populaires sont de capturer les informations de l'utilisateur, dans la plupart des cas, son email adresse. C' est souvent ce qu'on appelle la génération de leads, ou l'autre succursale se concentre sur le fait que le client effectue un achat. Maintenant, pour mieux comprendre les différences entre un site Web standard et la page d'accueil, Jetons un coup d'oeil à Uber, la société de transport qui a considérablement évolué au fil des ans. Lorsque nous naviguons là-bas, le site principal, nous voyons beaucoup de choses. Gagner de l'argent en tant que chauffeur, écrire une nouvelle planche, en tant que client, donner de la nourriture à votre porte, plus un tas d'autres choses. Nous pouvons explorer la présence mondiale ou leur engagement en matière de sécurité. Nous avons diverses choses à explorer pour en savoir plus sur eux, lire leurs dernières nouvelles et autres. Il s'agit d'un site web classique. fonction de vos intérêts en tant qu'utilisateur, vous pouvez choisir une avenue et l'explorer. L' entreprise doit présenter toutes ces informations parce qu'elle ne sait pas ce que nous recherchons en tant que visiteurs. Ainsi, l'approche standard a une présentation générale avec des points d'intérêt multiples. Bien sûr. Nous pouvons voir que l'inscription à la conduite est poussée vers l'avant par rapport à toutes les autres choses. Mais tu ne l'appellerais pas le seul objectif de cette page, n'est-ce pas ? Revient la page de destination. Remarquez la différence. Devenir pilote est maintenant la star de la page. Chaque élément, chaque calque de texte, chaque bouton est sur le fait que vous devenez un pilote. Rien d'autre, pas de bruit, rien qui puisse vous distraire du seul et unique but de la page. Généralement, les pages de destination sont utilisées en combinaison avec une campagne publicitaire. Vous pouvez voir des bannières sur le web sur la conduite pour Uber. Et quand vous cliquez dessus, vous serez amené ici. L' idée est qu'en cliquant sur une annonce qui fait la promotion que vous conduisez pour eux, vous exprimez votre intérêt pour cet objectif. Que maintenant ces choses vers le bas de façon spectaculaire. Le site sait maintenant à quel type d'utilisateur il traite. Amener une telle personne à un site Web général n'est pas idéal car il peut être confondu ou distrait par toutes ces autres choses. Ainsi, une page de destination est en ordre. Rappelez-vous, lorsque vous traitez avec un utilisateur, l'entreprise et le concepteur web en question doivent créer une expérience. Comme en tant que grand-mère étrangère de 80 ans, vous ne devriez rien supposer. Vous ne devriez pas penser, oh, eh bien, même sur le site général, il est encore assez facile de trouver l'inscription comme un conducteur de fardeau. Ce n'est pas une façon productive d'aborder le design web moderne. Comme je l'ai déjà dit, vous devez supposer que l'utilisateur est un top model et que le site est un gars qui la frappe dessus. Vous devez faire une impression fabuleuse en deux secondes à plat. Si la première impression n'est pas juste, c'est tout. Tu as perdu cette chance. Tu as perdu ce client. C' est vraiment noir ou blanc ? Un site Web inactif convertit, ou il ne le fait pas, bien sûr, les degrés de performance lat. Mais votre état d'esprit devrait être basé sur cette approche de la gorge coupée. Pour revenir à la page de destination, l'objectif principal de faire inscrire les utilisateurs en tant que conducteur est divisé en petits morceaux. Par la suite, chaque domaine a pour objectif d'inciter l'utilisateur à prendre une décision, le remplissant spécifiquement pour lui. À cette fin, il y a beaucoup de choses que nous pouvons observer. Tout d'abord, remarquez qu'il n'y a pas beaucoup de texte ici. Nous avons une mise en page à trois colonnes et chaque section veut aborder de façon concise certains points. Ceux-ci sont appelés USP, points de vente uniques. Fondamentalement, les utilisateurs veulent le résumé très bref, définir votre propre calendrier, gagner de l'argent sur vos échéances, et ainsi de suite. Les entreprises comptent sur ces points pour obtenir des résultats parce que la vérité est personne ne lit réellement tout sur la page. Au lieu de cela, nous devons, en tant que concepteurs, créer plusieurs sections qui abordent plusieurs problèmes potentiels ou points de douleur. Dans cette partie, le message est séduisant, faire de l'argent quand vous voulez. C' est un gros crochet. Ces trois titres roulent à la maison. Ce sont toutes les choses que je veux. Le désir est formé. Je résonne avec ces choses que je voulais, mais je ne sais pas ce qu'il y a en tant qu'utilisateur, je suis branché en ce moment. Eh bien, voici la section suivante, Getting Started, qui est parfait pour une personne amassée, quelqu'un qui est déclenché par un coup de pouce temporaire. Cela me dit exactement ce que je dois faire. Et ne saurais-tu pas, ce n'est que trois étapes simples. Aller à l'avant. En voici un autre là. Oui, spécifiquement pour ma Région, la Roumanie. Cela me fait me sentir en sécurité dans la chaussure de ce repas, avoir un soutien constant. Ça me rassure que je suis entre de bonnes mains, magnifiquement fait. Ensuite, nous avons une section sur l'application dédiée qui est conçue pour le pilote. Cela renforce encore l'idée que les choses sont très faciles à utiliser. Enfin, une section FAQ très nécessaire et le grand appel à l'action. passant, en général, nous parlons de la CTA ou de l'appel à l'action et non pas d'un fardeau parce que cette action peut prendre plusieurs formes. Il peut s'agir d'un champ de numéro de téléphone, d'un formulaire qui prend un calque comme celui-ci, d'une icône ou bien sûr d'un fardeau. Les concepteurs de sites web préfèrent donc utiliser le terme CTA pour cette raison. Dans l'ensemble, nous pouvons résumer la différence entre une page de destination et le site Web standard par les objectifs. Une page de destination a un seul objectif, et pour cette raison, l'ensemble du contenu est construit autour de son exécution. Un site Web standard a généralement une approche plus large avec plusieurs sections qui pointent dans des directions différentes. Par exemple, dans mon site de farine d'avoine, je peux vouloir vendre de la farine d'avoine, bien sûr. Mais je veux aussi promouvoir mon blog, ma newsletter, je les médias sociaux, ma chaîne de magasins physiques, la section d'embauche du site et ainsi de suite. Toutes ces choses, je pourrais en fait faire plus de ventes. C' est donc un peu une balle courbe, une approche de vente indirecte. Dans l'ensemble, un site Web standard est un must car il répond à de nombreux besoins. Mais lorsque vous voulez vous concentrer à 100% sur une chose spécifique, vous utilisez une page de destination. Tout au long de cette section, je vais vous montrer beaucoup d'exemples. Nous allons passer par plusieurs études de cas et vous verrez ce qui vaut la peine. Pour l'instant. Faisons une courte pause. 62. Études de cas : Les besoins du client: Bienvenue de retour. Je veux expliquer ce que je veux dire par les besoins du client. Une autre façon de le regarder est de penser à l'ambiance des designs, quel message il envoie dans son ensemble. Nous commencerons par M. Porter, l' un des magasins de luxe les plus connus au monde. Typique pour les marques haut de gamme, nous voyons une abondance de décoration blanche et minimale. De fortes doses de noir ici et ils sont tous le traitement des bouchons est également assez populaire et est généralement couplé avec une police serif intéressante. Le design semble intemporel et ces types de sites ne font pas beaucoup de remaniés au fil des ans. Quand nous passons à n'importe quelle catégorie, disons les vêtements, nous obtenons la même chose, une décoration minimale. Tout cela n'est pas par hasard. Les marques de luxe sont conçues de telle sorte que vous payez alors 20 fois plus pour la même qualité. Ils le font en associant certains sentiments à leur marque. Alors voici le scoop. Les gens qui achètent $8 mille vestes en cuir sont habitués à certaines choses. Leurs appartements sont généralement modernes, remplis de marbre blanc, hauts plafonds et de vastes espaces ouverts. Je suis un grand fan de l'émission Million Dollar Listing New York. Et j'ai regardé chacun de leurs 98 épisodes depuis 2012. luxe signifie pas d'encombrement, beaucoup de blanc, beaucoup de lumière. Quand il y a une pièce décorative, disons une peinture, c'est une pièce qui se distingue vraiment. Je suis passionné par les montres à la plupart des pièces autour de dix à 20$ mille sont vraiment le simple. luxe peut se résumer dans un trottoir. Les montres bon marché, trop bas de gamme sont généralement compliquées et désordonnées. Plus vous montez, plus le look est raffiné et la complexité de 70 à 100 K revient. Maintenant, je te dis toutes ces choses. Donc, vous pouvez penser à qui est ce site Web. Ce n'est pas pour 99 % du public, c'est pour les gens qui dépensent quatre à cinq chiffres chaque fois qu'ils magasinent. Ainsi, lorsque vous concevez un site Web pour cette audience, vous devez savoir ce qu'ils apprécient, ce qu'ils sont entourés chaque jour. Ainsi, vous pouvez imiter ces choses et les intégrer dans votre travail. C' est pourquoi nous obtenons tellement de blanc et beaucoup d'espace négatif, ce qui signifie un espace qui n'est pas utilisé. C' est comme ça que les départements ont l'air. Remarquez le petit titre et le sous-titre. C' est parce que la plupart des marques de luxe ont de très petites étiquettes. Ils crient rarement en disant Lauren. Et quand vous voyez une pièce qui présente le logo dans une taille généreuse, c'est généralement un article moins cher. Maintenant, en faisant toutes ces recherches, voici comment vous obtenez de facturer 10 000$ et plus pour le seul site Web. Même si vous ne facturez pas un quart de cela, vous devez tout de même mettre l'effort pour rendre le client heureux. Alors, changeons ça. Jetez un coup d'œil à ce site Web. Pour qui est-ce que c'est ? Est-ce pour le même public que M. Porter ? Évidemment pas. Cela s'adresse clairement aux enfants et aux très jeunes. Qu' est-ce qu'ils apprécient ? Des couleurs vives, de gros titres audacieux de décorations, grands boutons qui sont un peu éblouis avec toutes sortes d'effets. Chaque composant ici est destiné aux enfants et il est très bien exécuté. Mais, euh, je dois insister sur ça. Ce n'est pas le meilleur site que M. Porter. C' est ce que les débutants ne réalisent pas que vous comparez des pommes aux canapés. Ils ne sont pas dans le même parc. n'y a pas de comparaison à faire parce que les besoins des clients sont très différents. Si vous pouvez être impressionné par le niveau de détail dans le site de cet enfant. Mais encore une fois, ça ne veut pas dire que c'est mieux. Sur l'analyse vous dira ce que la conception fonctionne mieux pour ce client spécifique. Passons à la conception suivante. Bien sûr, C'est de la même niche, ce qui obtient le même public plus ou moins. En tant que tel, vous pouvez comparer ces deux. Vous pouvez le décomposer et analyser chaque bouton, chaque illustration et ainsi de suite. C' est une note importante, donc je vais le répéter. Bien que nous soyons évidemment attirés par tous ces beaux détails dans les illustrations, la pire chose que nous puissions faire est d'apporter cette approche au projet de M. Portal. Cela va sûrement vous mettre dans beaucoup d'ennuis. C' est pourquoi vous m'entendrez dire plusieurs fois que même les designs fantastiques sont rejetés par les clients. Habituellement, cela arrive quand on ne se concentre pas sur leurs besoins. Au lieu de cela, vous pensez à votre portefeuille. Vous vous concentrez sur l'expérimentation de nouvelles techniques, de nouveaux looks. C' est le problème. Jetons un coup d'oeil à un autre site web. Cette fois, c'est quelque chose en russe, mais d'une manière c'est mieux parce que nous pouvons nous concentrer sur cette ambiance. Le vert est un choix très solide parce que c'est lié à l'alimentation. Il a l'air frais. Plus que ça. C'est de la nourriture saine. Les clients s'attendent à cette ambiance et ils en résonnent. Ils seront attirés par ça plus que ça. Notez que le reste de la conception tourne autour du blanc et du gris. Cela envoie un message que c'est un peu haut de gamme. Encore une fois, je suis en fait un client de glandes alimentaires saines, et celles-ci sont assez coûteuses. En tant que tel, le site doit montrer que ces icônes linéaires, ce petit menu principal, ces belles images accompagnées de quelques lignes de texte. Elles sont toutes construites autour du public cible. Le propriétaire de ce site veut évidemment attirer un certain groupe de personnes. En tant que designer, vous devez apprendre à connaître ce que les végétaliens, les végétariens, les radians de basket-ball aiment, et intégrer ces choses dans votre design. Encore une fois, il ne s'agit pas de vous, mais des besoins de votre client. Le dernier exemple est une application, mais c'est en fait une conception de tableau de bord. Remarquez à quel point il est élégant et propre. Tout va bien et bien. Mais la clé ici est de concevoir quelque chose pour une utilisation intense. En tant que concepteur, vous devez réaliser que l'indicateur de performance clé le plus probable est probablement le temps passé à l'intérieur de l'application. Autrement dit, le client de cette application va faire plus d'argent si les utilisateurs passent plus de temps à l'utiliser. Comment peux-tu faire ça ? Eh bien, nous allons plein de choses. Nous parlons du point de vue du design pur. Ça doit être facile pour les yeux. Vous devez réduire la fatigue oculaire en choisissant de belles couleurs douces. éclaboussures de couleur doivent être insérées avec soin et modération. Pour cela, c'est un écart d'apprentissage, qui signifie que la situation va être inévitable par la cuisson dans un sens de calme à travers le schéma de couleurs, l'espace négatif, et un tas d'autres choses. Tu aiderais l'entreprise à réussir. C' est une chose de visiter rebelle et de réaliser que le design doit être élégant et propre. C' est une autre chose de savoir pourquoi c'est le cas. C' est ce qui va te faire te démarquer en tant que designer. C' est ce qui vous fera gagner l'appréciation de vos clients en faisant le kilomètre supplémentaire et en vous concentrant sur les besoins du client. Bonne chance. 63. Génération de plomb dans les pages de landing pages: Bienvenue de retour. Je voulais vous montrer une belle page de destination afin que vous puissiez mieux comprendre ce qui est ce que Zyban.com fait une belle première impression. C' est propre, professionnel, mais magnifique dans sa simplicité. Nous avons beaucoup à apprendre de cela, fois du point de vue du design mais aussi en tant que page de destination. D' abord et avant tout, concentrez-vous sur le titre. C' est le principal USP, le point de vente unique. C' est ce qui rend le site Web ou le service spécial. C' est ce qui les distingue. Une meilleure façon de développer votre entreprise créative. Pour moi en tant que créateur de contenu, cela me fait avancer, il capte mon attention. C' est primordial de l'étape fondamentale qui est un must dans n'importe quelle page de destination. En choisissant une magnifique police serif présentée dans une nuance brune intéressante, les gestionnaires de concepteurs pour faire ressortir la copie. Et si cela avait été démontré dans des zones , l'impact aurait été minime. Donc, il y a le premier plat à emporter. Excellent style de texte est magnifiquement égal à un USP efficace. Ce titre fantastique. Si ce mot pour dire que nous sommes différents que mieux, ça aurait été horrible. Ou si cela devait dire Zyban pour votre entreprise ou même pour votre entreprise créative, encore une fois, ce ne serait pas idéal, ça tomberait à plat. Au lieu de cela, la meilleure façon de développer votre entreprise a beaucoup de sens derrière elle. Cela implique qu'il s'agit d'une approche plus intelligente. Cela résonne avec moi en tant que propriétaire d'entreprise que ces gars pourraient avoir une meilleure solution, que ce que j'utilise déjà comme la puissance d'un morceau de copie bien écrit combiné avec un designer expérimenté qui sait comment le mettre en valeur. Parce que encore une fois, ce n'est pas noir, ce n'est pas l'amour gris. C' est une belle nuance de brun. Donc, dans l'ensemble, l'idée est vous ne devriez jamais sauter le titre principal de votre conception. Si vous allez utiliser Lorem ipsum ou quelque chose comme le meilleur service, votre design va souffrir beaucoup. Si le client ne vous fournit pas un excellent contenu que vous pouvez coiffer en conséquence, faites quelques recherches et trouvez quelque chose par vous-même. Maintenant, je sais que c'est quelque chose en dehors de la portée du DOD en tant que concepteurs web. Et j'ai dit que le million de fois dans ce cours. Mais vous pouvez vous inspirer de divers endroits et utiliser quelque chose comme espace réservé. Ensuite, votre client, vous avez eu un titre spirituel est en fait tiré d'un autre endroit. Et qu'il doit trouver quelque chose de son propre chef. Mais ne le répète pas, ne manquez pas cette occasion. N' utilisez pas Lorem Ipsum. Toujours sur le côté design. Remarquez comment le titre est plus grand que le sous-titre, mais pas humungeux. Ceci est bien proportionné. C' est ce que tu veux. Surdimensionner, ça n'aurait pas de sens. Bien sûr que ça n'a pas l'air si mal. Mais l'approche à deux lignes est plus agréable à l'œil. En revenant à l'aspect de la page de destination, remarquez l'inscription. C' est ce qu'on appelle la génération de plomb. Et je veux expliquer pourquoi beaucoup de pages de destination vont pour cette approche. Vous penseriez que la vente serait l'objectif principal des pages de destination. Mais voilà ce qui se passe. Il y a longtemps, les entreprises ont découvert que si l'utilisateur passe un peu de temps à utiliser leur service, Il est susceptible d'être accro. Grâce à l'analyse. Beaucoup d'entreprises ont trouvé un point de basculement. J' ai en fait beaucoup lu sur le sujet, mais pour garder ce bref, je vais jeter quelques exemples aléatoires. Mais non, c'est très bien documenté et je vais fournir des titres de livres au cas où vous vouliez vraiment y plonger. Voici quelques exemples. Si un nouvel utilisateur Facebook ajoute huit amis à son réseau, il va devenir un utilisateur actif. C' était vraiment au début. Donc, de nos jours, ça ne s'applique vraiment pas autant. Mais c'était un point critique sur Spotify. Si vous aimez 10 chansons, vous êtes très susceptible de devenir membre premium sur Netflix. Si vous commencez un essai gratuit, vous êtes extrêmement susceptible de continuer à utiliser ce service payant. Le raisonnement derrière tous ces exemples est un peu complexe lorsque vous plongez vraiment dans ces exemples. Mais il y a quelques raisons logiques qui sont faciles à obtenir lorsque vous vous inscrivez à l'essai. Tout essai pour parler, vous mettez habituellement dans votre carte de crédit. Ce n'est pas le cas ici, mais dans la plupart des situations, c'est nécessaire. Après 30 jours, vous l'oubliez, vous êtes chargé. Et puis il y a deux possibilités. R, vous ne réalisez pas que vous êtes facturé parce que vous l'avez complètement oublié et que vous n'avez pas de système de notification en place avec votre banque. Ça arrive plus que ce qu'on aimerait penser. Même j'ai payé pour le fixe fixe pendant environ deux ans avant finalement creuser profondément dans ma facture et je me suis rendu compte de l'erreur. Donc c'est la première possibilité. Vous oubliez simplement les paiements mensuels. Et b, la deuxième option, vous utilisez réellement le service et vous voyez sa valeur. C' est pourquoi beaucoup de pages de prêt ne vous poussent pas à faire un achat. Si je suis autorisé à cette métaphore. C' est un peu comme sortir ensemble. Alors que vous voudrez peut-être coucher avec cette personne dès le départ, sortir agressif et crier ça ne vous donnera pas de bons résultats. Au lieu de ça, tu sors, tu prends un verre, tu apprends à connaître le point Bunsen. Et cette approche est beaucoup plus susceptible de vous donner ce que vous voulez. Vous voyez, l'objectif final est le même, mais l'approche fait une grande différence. Donner votre adresse e-mail ne semble pas être une grande décision. n'y a aucun risque de prendre un verre avec quelqu'un dans un lieu public. Même chose. C' est sûr si tu n'aimes pas ça, lève-toi et pars. Mais après le début de l'essai et que vous avez réellement exploré le service, vous pouvez vous rendre compte que c'est exactement ce que vous cherchez, ou du moins le fait que le service vous apporte une certaine valeur, même si ce n'est pas un parfait match. Dans l'ensemble, c'est pourquoi les pages de destination ne vous poussent pas toujours à faire un achat. Ils préfèrent l'approche moins menaçante. Ils préfèrent le jeu un peu plus long parce qu'ils savent qu'ils ont plus de chances de réussir de cette façon. Une façon encore plus simple de regarder la génération de plomb est la suivante. Faites le premier pas, passer les gens par la porte. Faites-les jeter un oeil à votre menu, faites-leur goûter vos produits. Toute interaction est une victoire. Tout type d'engagement est un succès. Retour sur le côté design. Remarquez le bouton Démarrer, pas de biseau et de gaufrage, pas d'ombre intérieure, ombre portée, connaître motif, superposition, pas de dégradé, pas de look 3D rien. Il s'agit d'un design web moderne. Tous ces détails ne sont pas nécessaires. L' impact global de cette approche est plus important. L' illustration est laissée à briller, et cette touche de couleur est exactement ce qui est nécessaire pour attirer l'œil de l'utilisateur. y a aucune chance que vous ne verrez pas ce bouton. Il est conçu de telle sorte qu'il est impossible de le manquer. Déplacer le long des zones suivantes à partir de la page de destination vous aide à prendre votre décision. Le martelé dans l'idée que le service fournit de la valeur. Remarquez comment plus de ventes est joliment souligné, trucs gris. Il n'y a pas beaucoup de textes. Tout est court et doux. C' est pour que vous soyez à l'aise de passer à travers elle. Comme nous faisons défiler vers le bas, remarquez comment la tête de ce fixe. C' est une technique courante qui permet la page de destination de ne pas être remplie avec beaucoup d'appels à l'action. Au lieu de cela, le bouton Démarrer reste visible à tout moment. Dans l'ensemble, il s'agit d'une belle page de destination qui a tout son contenu pointé dans une seule direction, ce qui vous fait entrer votre adresse e-mail pour commencer l'essai gratuit. Une page de destination est la correspondance parfaite car elle fournit de la clarté. Si vous regardez les meilleurs canaux de vente, vous allez voir d'autres services, chacun avec sa propre page dédiée. Cela élimine tout bruit. Toutes ces autres choses auraient été combinées en une seule page Web standard. Il aurait été encombré, surpeuplé, et le taux de conversion aurait chuté. Et c'est un fait, un fait bien documenté. Globalement. C' est exhibit.com, une excellente page de destination. En passant, c'est dans la nature des pages de destination de changer constamment. Si vous visitez ce site Web et que ce n'est plus le même que celui montré dans cette vidéo. Ne soyez pas surpris. Les pages de destination ont constamment changé il look, basé sur l'analyse et la barre oblique ou les campagnes publicitaires qui vont avec eux. Prenons une courte pause et nous continuerons dans un instant. 64. Pourquoi les pages de landing ont une mauvaise réputation: Hé, je pense que c'est important que je m'adresse à l'éléphant dans la pièce. Les pages de destination ont une mauvaise réputation, en particulier parmi les concepteurs web. C' est parce que les conceptions suivantes que je suis sur le point de vous montrer sont ce à quoi plupart des gens pensent quand vous mentionnez la page de destination ici, celle-ci pour un webinaire. n'y a pas de logo, ce qui est assez étrange, et pas de navigation, ce qui est commun. Un gigantesque titre et la photo de ce monsieur juste en dessous, nous avons le CTA. Le design semble non raffiné avec ces gros titres et des couleurs fortes. Déplaçant un peu vers le bas, ce formulaire est exactement ce que vous avez tendance à vous voir sur les pages de destination. Charge de but, texte noir, beaucoup de coches et une forme frappante. Le design est rempli de revendications en gras et vous pouvez faire défiler 500 pixels sans voir un autre appel à l'action. Voyons voir un autre design cette fois pour le supplément de perte de poids. Remarquez l'absence d'une structure traditionnelle. n'y a pas d'en-tête ou de zone de héros. Au lieu de cela, le design ressemble à un dépliant. Cta est très visible. Ce formulaire ne peut pas être manqué. Ensuite, papa chose est bondé, extrêmement occupé et encore, non raffiné. Remarquez la photo des produits, elle est vide. C' est pour une raison et on y reviendra dans une minute. Typique pour les pages de destination, nous obtenons beaucoup de badges, garantie de remboursement comme vu à la télévision et ainsi de suite. Encore une fois, les revendications audacieuses comme la dernière percée brûle les graisses, tout naturel et ainsi de suite. Le corps du texte est énorme, rond, deux fois la taille d'un site Web standard. Tout est encombré et regroupé ensemble, mais le design est extrêmement long. C' est encore une fois, typique pour les pages de destination. C' est la norme où un site Web régulier s'arrête à environ six à huit mille pixels. Les pages de destination peuvent avoir une longueur de 20000 pixels. Oui, je sais que c'est ridicule, mais c'est le jeu. Des CD, des femmes attrayantes, encore une fois, une base de pages d'atterrissage. Passons à un autre design. Ce sont tous des dessins tirés de 99 designs.com et ceux-ci sont très récents. Ce sont pouce 2020. C' est un supplément qui va aider votre système digestif. Excusez la faible qualité, mais 99 modèles limitent la taille d'un dessin. C' est pourquoi certains concepteurs téléchargent cette version plus petite de ce travail. C' est pour ça que nous ne pouvons pas voir tous les détails. Ici, nous avons une tonne de textes, des coches brillantes, et le stock de très longues pages pour ces médecins est un must. arrimage des prix est également assez fréquent dans les pages de destination. Je dirais qu'environ 70 pour cent d'entre eux présentaient une sorte de rabais massif. Cette conception fonctionne de la même manière que la page d'atterrissage des oiseaux de zoo. Il montre le produit. Ensuite, il présente la maladie. Comment vous en souffrez réellement, et comment il est préférable de le traiter aussi vite que possible. Les dangers de cette maladie sont une incitation majeure. Dans Uber ce cas, nous voulions plus d'argent et un horaire flexible. C'était le crochet. C' est chéri, c'est du plaisir. Une des deux façons de vendre. Ici, nous voyons la douleur slash peur. La deuxième façon de vendre. D' après ce que j'ai lu, il semble bien motivé par deux choses, comme je l'ai dit, une, le plaisir et l'évitement de la douleur. Uber repose évidemment sur le plaisir et la page d'atterrissage. Les suppléments vont généralement pour éviter la douleur et c'est fait en vous effrayant. Les quatre dangers de la diverticulite. Après que le problème est présenté l'extrêmement tolérablement nous sommes montrés une solution. Ensuite, il fonctionne exactement comme un Uber cette affaire. On se fait hyper. Nous sommes prêts à passer à l'action, mais nous ne sommes pas sûrs de la prochaine étape. La même chose ici. On a peur de vouloir éviter la maladie. Quelle est la prochaine ? Eh bien, voici la solution et voici comment l'acheter. Il fonctionne en quatre étapes simples. Maintenant, pour faciliter votre esprit, les ingrédients sont présentés. Personne ne lit cette section, mais il est rassurant de noter que la science présentée. Voici le titre, tous les effets naturels et secondaires gratuits. C' est tout ce qui compte. Et en continuant vers le bas, les histoires de réussite sont un must. Je dirais qu'au moins 80 pour cent des pages de destination présentent une section de témoignage généreuse. Sauter à la fin. Nous arrivons à éviter la douleur en faisant un achat rapide. Ici, il est presque toujours le cas que si vous achetez plus, vous obtiendrez une bien meilleure affaire. Quelque chose comme vous payez 20 à 30 pour cent de plus et vous obtenez 100% de produit en plus. Encore une fois, c'est typique. Maintenant, je vais continuer à vous montrer d'autres pages de destination en arrière-plan. Mais voici pourquoi ils ont une si mauvaise réputation. Je ne parle pas de ceux-ci en particulier vous rappeler et parler des pages de destination en général, ils ont tendance à promouvoir des produits gimmicky. Que ce soit la perte de poids, un type d'appareil sexuel, un projet de loi qui augmente votre libido et le Bolding, croissance ou l'extension d'une partie de votre corps, cultiver des biens vendus, des cristaux dans n'importe quel. La plupart de ces produits ont un point d'interrogation à côté d'eux. Pour certaines personnes, ces produits sont des escroqueries tout de suite. Maintenant, je peux dire si ces affirmations audacieuses sont vraies ou non. Mais non, c'est la principale raison pour laquelle les pages de destination ont une mauvaise réputation. Pour chaque belle page de destination pour une sieste, leur entreprise ou entreprise sérieuse. Il y a au moins dix autres pages de destination pour un traitement New Age, des factures, des herbes, des cristaux, et tout ce qui n'est pas pour le meurtre, même si les pages de destination promouvant une réunion de toutes sortes. C' est généralement pour le schéma pyramidal de la convention de terre plate. Huiles essentielles ou commercialisation à plusieurs niveaux. Par leur nombre, ces pages l'emportaient de loin sur les pages de destination sérieuses et bien conçues. C' est donc la première raison et c'est logique. La deuxième raison est plus dans notre ligue, la plupart des pages de destination semblaient avoir été conçues en 2005. Au mieux, ils ont l'air modestes. Eh bien, il y a des exceptions, je dirais que 60 à 70 pour cent des pages de destination qui promeuvent les produits fantaisistes semblent terribles, absolument horribles, bondées, criées, agressives. Ce sont les mots-clés. Vous voudrez peut-être retrousser vos manches et faire un meilleur travail avec votre prochain client. Mais vous serez surpris. C' est le look que les clients veulent. C' est pourquoi j'ai inclus cette discussion dans le deuxième pilier de la conception web, la compréhension des besoins du client. Voir ces produits ont un public cible très clair. Je ne veux vraiment insulter personne. Un merci. Notez qu'il s'agit d'une certaine partie du public qui n'est pas si bien informé, crédules et naïfs peut-être passé un certain âge avec une pensée critique moins qu'idéale. Compte tenu de ce public, ils semblent résonner avec de grandes revendications audacieuses, avec des gros titres, des appels à l'action, beaucoup de textes et toutes les autres choses que j'ai mentionnées il y a quelques secondes. C' est pourquoi nos clients veulent ces designs, parce que le public cible résonne vraiment avec eux. De plus, il y a un art ces pages de destination tellement que le produit n'a pas d'importance. Je vais le répéter. Ces pages de destination fonctionnent si bien que le produit n'a pas d'importance. Ce sont toutes les mathématiques. Je suis sûr que vous avez entendu parler de l'entonnoir des ventes. Je ne vais pas entrer dans les détails parce que ce serait en dehors du cadre de ce cours. Mais sachez que les gens expérimentés dans ce domaine ont mis une certaine somme d'argent dans les annonces Facebook. Un certain type d'utilisateur entre dans cette page de destination, et évidemment d'un groupe de personnes, un certain pourcentage achète le produit, quel qu'il soit. La ligne de fond est en noir, tant que vous le faites correctement. Comme vous pouvez le voir, des étapes denses et claires, c'est un plan très solide que la page de destination doit suivre. En fin de compte, le taux de conversion compense les coûts de publicité. Et généralement, si bien fait, le propriétaire du site Web fait un bundle. Évidemment, c'est encore difficile qu'il faut encore une compétence. Mais cet agitation fonctionne vraiment, et c'est pourquoi le produit de perte de poids est laissé vide. Il peut être n'importe quoi, il peut être n'importe quel ingrédient. La marque n'a pas d'importance, l'efficacité n'a pas d'importance. Tout est sur la façon dont les pages d'atterrissage ont été construites et le design n'est pas quelque chose que vous et moi allons apprécier. C' est parce que nous ne sommes pas le public cible. L' épine dorsale de la page de destination est construite sur ces étapes claires de l'entonnoir. Et c'est tout ce qui compte. Avec un droit d'auteur décent, vous pouvez devenir riche rapidement. Et cela a été le cas depuis des années. Même dans le monde numérique d'aujourd'hui, où tout le monde a accès à des informations illimitées, les pages de destination de ce genre sont toujours bonnes. Encore une fois, pour être parfaitement clair, je ne dis pas que toutes les pages de destination sont basées sur des escroqueries. Loin de là. Il suffit de répondre à la raison pour laquelle ils ont une mauvaise réputation. Pour résumer, la principale raison pour laquelle les pages de destination sont peu savoureuses est qu'elles ont tendance à promouvoir des produits gimmicky. Et la deuxième raison est qu'ils ont l'air assez mauvais. Et en tant que tel, nous ne pouvons pas vraiment grandir en tant que designers pour les faire. Le côté lumineux est que ces clients que de payer bien, en particulier les clients qui ont une expérience antérieure dans ce domaine. Vous pouvez vous attendre à une seule page de destination pour apporter votre tour 2500$. C' est à vous de décider si vous voulez vous spécialiser dans ce domaine ou non. C' est une compétence et c'est vraiment dur gagné. Mais maintenant, vous avez toutes les informations pour prendre une décision. 65. Page de landing page de produits numérique: Bienvenue dans cette conférence où je veux décomposer une page de destination des produits numériques. C' est ma propre plateforme d'e-learning que j'ai construite pour mon cours Photoshop roumain. C' est une excellente façon de comprendre les besoins du client parce que je suis le client. C' est si facile de commencer du mauvais pied. Par conséquent, pourquoi nous devons parler des besoins du client. L' essentiel ici est que, bien que le long assez connu sur diverses plateformes d'e-learning à travers le monde, en Roumanie, personne ne sait qui je suis. Cela signifie que le contenu du cours est moins important. Je me présente correctement. Pour cette raison, un lecteur vidéo est inordre. Non seulement ce transmetteur une grande quantité d'informations d'une manière efficace, mais les gens peuvent voir mon visage. C' est essentiel pour établir la confiance. Il y a le raisonnement derrière le joueur. Le titre et le sous-titre sont également un must. Bien que mes compétences en rédaction ne soient pas étonnantes, ce que vous verrez ici est une version traduite de Google. Alors s'il vous plaît gardez cela à l'esprit. Le site original est évidemment en roumain parce que c'est pour le public roumain. Ensuite, nous avons un autre point critique concernant les besoins du client. En tant que créateur de contenu, si vous Google mon nom, vous trouverez sûrement mon tribunal dit sur diverses autres plateformes, certains d'entre eux sont fortement réduits. Cela représente un défi sérieux. Comment puis-je vendre mes accords pour n'importe quel prix, disons 299, s'il est trouvé sur une autre plate-forme pour 2999. La solution est cet appel à la zone d'action. Nous avons des boutons individuels, un pour le cours d'anglais standard et un autre pour le cours de roumain premium. Je suis très fier de cette solution. Auparavant, j'ai dépensé beaucoup d'argent sur la publicité, mais de petits signaux viendront dans la pièce. Après avoir examiné toutes les analyses, j'ai découvert que les gens cherchaient mon nom sur Google. Ils ont trouvé mes profils sur d'autres plateformes de conception, et ils y restent. Fondamentalement, au lieu d'acheter les appels à partir de ma plate-forme où je reçois tout l'argent, gens l'ont acheté à un autre endroit, généralement à un rabais important. Maintenant, ces fardeaux seuls ne suffiraient pas. Après tout, la différence de prix est substantielle. Je demande quelque chose comme cinq fois plus d'argent pour la version roumaine du cours. Je demande environ 80$ pour les tribunaux, au fait, juste pour que vous ayez un numéro de ballpark. Maintenant, comment puis-je justifier cela de manière efficace ? Parce que toujours la différence de prix est encore significative. Eh bien, j'ai ajouté cette partie qui dit, quelle est la différence ? Lorsque vous cliquez dessus, vous allez descendre à ce tableau de comparaison que j'ai conçu à partir de zéro. Ici, vous arrivez à voir ce qui est quoi d'une manière très claire. De plus, au-dessus, vous avez quelques lignes de texte. Précisez davantage pourquoi il est préférable d'acheter cette version du cours. Fondamentalement, en un mot, vous avez un accès direct à moi pendant que sur d'autres plateformes, ce n'est pas le cas. Ce sont évidemment d'autres avantages aussi, mais c'est en plus le but de cette conférence. Pour récapituler, la première chose est de me présenter, pas le cours. La deuxième chose est de s'assurer que les gens comprennent la valeur de cette plate-forme par rapport à toutes les autres. Maintenant, en ce qui concerne la première partie de ma présentation, badges sont un excellent moyen de transmettre beaucoup informations d'une manière esthétique. Ce sont toutes des icônes de lab icon.com. J' ai un abonnement mort et je l'utilise tout le temps. Dans cette section en un coup d'œil, vous pouvez apprendre que je suis un expert et instructeur certifié Photoshop. Je suis un prof best-seller avec plus de 180 000 étudiants du monde entier. Je suis allé plus de 50 000$ à quatre magasins et ainsi de suite. C' est un choix de design intelligent. Ces badges m'ont énormément aidé. Le contenu à gauche, eh bien, c'est beaucoup. Il est divisé en plusieurs paragraphes. Ces points indiquent à l'utilisateur ce qu'il va apprendre à ce cours. C' est une longue liste pour impliquer qu'il y a beaucoup de contenu. Après tout ce que je suivis avec un appel clair à l'action qui dit, commencer le cours, pas maintenant, pas faire un achat. La meilleure façon de concevoir des appels à l'action est de regarder les plus grands acteurs du marché. Encore une fois, comprendre les besoins du client. Utilisez leur approche, utilisé l'approche des grands joueurs. Personne ne possède ces choses comme commencer, donc il n'y a aucun problème à les ajouter à vos propres designs. Notez le cours secondaire, la version anglaise n'est pas affichée ici. Je préfère privilégier la version roumaine, celle de cette plateforme. Fondamentalement, si vous cliquez sur l'autre, vous êtes amené à une autre plate-forme. Je ne veux pas que cela arrive, mais si mes visiteurs finissent inévitablement sur un autre site, au moins je devrais être celui qui les envoie vers le lien de référence mondial. C' est le processus de pensée derrière ces boutons. Ensuite, quelque chose d'un peu plus évident. J' ai une section de galerie pour ceux qui sont des gens visuels. Ceci est très nécessaire car il décale tout ce texte d'en haut. Fondamentalement, vous voulez répondre à tout le monde, à ceux qui veulent regarder une vidéo, à ceux qui préfèrent lire. Et enfin, ceux qui préfèrent passer à travers le contenu et s'arrêter à ce qui attire leur attention, les gens visuels, non ? La prochaine zone est basée sur la nécessité de ce cours. Je mets en évidence certains mots clés car il s'agit d'une technique de page de destination courante. Des choses comme votre propre rythme, bien payé. Ils peuvent choisir vos projets un accès illimité, n'importe quelle version Photoshop, aucun talent ou créativité requis, et ainsi de suite. Ceux-ci sont un peu dans la même région que je zoologique oiseaux approche miel avec horaire flexible et gagner plus d'argent. Je le serai, je ne suis pas aussi concis qu'ils le sont, surtout parce que je n'ai pas cette reconnaissance de marque. A cause de ça, je dois travailler plus dur. Après le tableau de comparaison, j'ai un peu plus de contenu que l'agence de publicité a écrit pour moi. Honnêtement, je n'en suis pas trop sûr, mais je l'ai gardé dans un autre appel à l'action assez standard. Et puis une section sur certaines ressources premium qui sont donnés comme un bonus pour ceux qui s'inscrivent. C' est une incitation à acheter le cours. Ce n'est pas une grosse affaire, mais ça aide. Un autre élément clé est ce diplôme, le certificat que vous obtenez à la fin du cours. Certaines personnes, c'est un must. D' où pourquoi il est inclus. Vers la fin, j'ai un groupe social de certains de mes étudiants. Les témoignages sont énormes dans la plupart des pages de destination, et celui-ci n'est pas différent. Enfin, quelques autres statistiques clés présentées aux y contre, une section FAQ, la section blog au cas où vous voulez en savoir plus sur moi. Et l'appel hoché la tête à l'action. Ceci est ma page de destination créée par un générateur de glisser-déposer appelé page boulangerie, qui a été inclus dans une équipe que j'ai acheté à partir de la forêt d'équipe, un thème WordPress. Cela a été fortement édité par un codeur expérimenté et j'étais tellement heureux de son travail que j'ai inclus son nom et son lien ici. Ça a pris beaucoup de temps. C' était un effort majeur de ma part. Et même avec elle-même qui sont encore diverses choses qui sont sur tout à fait à la hauteur de ma norme. Par exemple, ces lignes verticales d'un pixel. Mais l'équipe WordPress avait certaines limites difficiles à surmonter. Quoi qu'il en soit, à la fin, le plat à emporter est que le contenu du cours occupe la deuxième place. L' objectif des pages pour gagner la confiance des utilisateurs. J' ai fait cette vidéo en haut ou les badges de la section sous-en-têtes. Ensuite, pour empêcher mes utilisateurs d'acheter mes devis à partir d'une autre plate-forme, appelée cannibalisation. Au fait, j'ai choisi d'inclure deux appels à l'action et le tableau de comparaison. J' ai alterné entre TextContent et images. J' ai mis en évidence certains mots clés en utilisant la méthode du miel. J' ai donné une incitation à acheter le cours et à présenter quelques preuves sociales. Cette page de destination a assez bien fonctionné et grâce à un raffinement constant, je suis sûr qu'il va faire mieux. Parlant de l'améliorer. C' est une autre partie importante des pages de destination. Parlons de ça dans une seconde. 66. Pages de préparation aux pages de test A/B: Bienvenue à une conférence importante. Destin, tu es le travail acide quelques fois et je le répète. Un site web doit évoluer en permanence. Tu n'aurais jamais fini ton travail. Et je parle à la fois en tant que propriétaire d'entreprise et en tant que designer web. Pour vraiment comprendre de quoi je parle, nous allons utiliser un site appelé bon UI.org. Je n'ai aucune affiliation était avec eux en passant, en fait un de mes étudiants a posté ce lien sur mon serveur Discord, où en passant, vous êtes plus que bienvenus à rejoindre. Parlons donc des tests. Vous avez peut-être entendu parler de tests AB. Eh bien, ici, c'est dans une situation très simple. Netflix veut que plus de gens s'inscrivent pour le procès. C' est logique d'y parvenir. Ils ont essayé diverses choses, mais dans ce cas précis, ils ont utilisé un fardeau comme un appel à l'action et comme un formulaire basé sur un e-mail. Le reste de la conception est identique, sauf pour ce petit changement. Vous pouvez voir près de la fin de la conception pour ajouter à la PV de l'essai, particulier de Décembre à Février. Il semble que la forme soit un meilleur choix. Maintenant, cela peut ne pas sembler une grosse affaire, mais c'est une énorme trouvaille avec des implications sérieuses. Si Netflix a vu cela obtient de meilleurs résultats. Il y a de bonnes chances qui peuvent également s'appliquer à nos sites Web. Si cela amène plus de gens à commencer l'essai, cela signifie que c'est bon pour l'entreprise. Cela signifie que les propriétaires du site Web que nous allons être plus heureux, même une amélioration de 23 pour cent est significative. Mais imaginez si l'augmentation est de 10 pour cent, tout cela à partir d'un changement très simple, le coût de la modification est minime. L' équipe de développement peut facilement faire ce changement en très peu de temps. C' est ce que les entreprises aiment. Améliorations qui sont bon marché et faciles à mettre en œuvre, qu'ils améliorent leurs résultats financiers, l'argent, c'est tout ce qui compte. C' est la raison numéro un pour faire des tests AB. Cela seul peut apporter à Netflix quelques millions de dollars supplémentaires par an. Et encore une fois, vous pouvez apprendre de cela et améliorer les performances des sites Web de vos clients aussi. Mais remontons un peu. En tant que concepteur web, ils ne devraient pas exécuter personnellement les tests AB à moins que ce ne soit votre propre entreprise. Un test AB est une chose sérieuse, et la plupart des entreprises ont des équipes internes dédiées qui se concentrent sur ce genre de choses 24 heures sur 24. C' est parce que ce n'est pas aussi facile que de changer une paire de chaussettes. Il y a des règles strictes et des gréeurs. Vous avez besoin de certaines compétences et connaissances. Vous devez coordonner vos efforts avec l'équipe de développement qui doit mettre en œuvre les changements. Vous devez parler aux services marketing afin qu'ils puissent adapter leurs annonces. Vous avez besoin d'une version de contrôle, d'une taille d'échantillon assez grande et d'une tonne d'autres choses. C' est un genre énorme, où ça nous laisse ? Eh bien, en fait, c'est assez simple. On devrait suivre les grands garçons. Ce qu'ils font, nous devrions imiter. Maintenant, ça a l'air d'une chose louche à faire. Dans un monde idéal, chaque entreprise aurait une équipe dédiée. Cela exécuterait des tests AB 24 heures sur 24. Le fait est que c'est extrêmement cher, tant en termes de personnel que pour le service lui-même. livraison de plusieurs versions du même site Web se fait généralement par l'intermédiaire d'un service tiers. Ils sont très chers. Vous avez Google Optimize, qui est gratuit. Mais dans l'ensemble, le point est, ce n'est pas faisable. Donc, ce que tu fais c'est que tu cherches des modèles. Si vous voyez plusieurs exemples où le formulaire augmente le nombre de conversions, alors par tous les moyens, implémentez cela dans vos propres conceptions. Le problème est que ce type d'information est gardé secret. Le raisonnement est simple. Ceux-ci peuvent changer radicalement une entreprise en ligne. C' est pourquoi il est peu probable que vous trouverez beaucoup d'études de cas gratuitement. Même de bonnes charges d'assurance-chômage, l'argent sérieux pour toute la base de connaissances. Le plat à emporter est que lorsque vous voyez quelque chose qui est testé maintes et maintes fois, utilisez le gagnant dans tous vos designs. Par exemple, le tableau des prix semble être un gagnant très clair dans la plupart des situations. C' est le genre de chose dont je vais sûrement faire une note mentale, et je vais rester loin de l'autre. Donc encore une fois, c'est une chose très simple qui peut faire une énorme différence ou jeter un oeil à ces boutons basés sur les traits. Il semble que ceux remplis fonctionnent généralement mieux. Jetez un oeil à la boîte à emporter. Nous savons que cette histoire de boutons comme net négatif basé sur ce modèle de base de preuves. Donc, lors de la réservation a couru cette expérience n'est pas surprenant qu'elle a finalement été rejetée. Une réplication prévisible. Grâce à ces informations, vous pouvez mieux concevoir les sites Web pour vos clients. Ces choses ne sont évidemment pas écrites dans la pierre. Mais si plusieurs tests montrent un résultat clair, alors les chances sont que c'était le mieux. Pour être clair. Cette ressource n'est pas commune. C' est comme de l'or frappant. Apprendre des erreurs des autres est énorme. Je peux vous dire qu'après la mise en œuvre de certaines de ces choses sur mes propres sites Web overs, j'ai eu cette nette amélioration des ventes. Le fait est que je ne pouvais pas exécuter les tests AB parce que je n'avais pas les ressources pour eux. Exactement ce que j'ai dit au début. Mais j'ai simplement changé le design et ils ont regardé le nombre de ventes et ils ont augmenté. C'est le truc. Il est facile et bon marché de mettre en œuvre les conceptions. Il est difficile d'obtenir les informations des tests AB est difficile et coûteux d'exécuter réellement les tests AB. Mais l'implémentation elle-même, c'est facile d'un bouton basé sur un trait à un bouton rempli. C' est fait en quelques secondes. Maintenant, en remontant, eh bien, ce n'est pas exactement scientifique ou précis à 100%. En regardant certains chiffres jour après jour, vous apprenez à savoir quand quelque chose se passe. Il est très probable que vos clients feront de même. Ils ne seront pas en mesure de diffuser plusieurs versions de ce site Web en même temps. Mais il est probable qu'ils modifient la conception et vérifient les données tous les jours. Sur la base des tests empiriques, vous pouvez améliorer les performances du site Web sans systèmes complexes ou équipes de développement de logiciels coûteux. En conclusion, nous, en tant que concepteurs, créons parfois un site web basé sur ce qui semble bon, basé sur le guide de style de l'entreprise ou sur les besoins du client. Mais Analytics reste roi et les statistiques devraient régner en maître. C' est pourquoi un site Web devrait constamment évoluer et vous ou le client ne devriez jamais tomber amoureux d'un certain design, si possible, tester l'enfer hors de celui-ci en se basant sur des preuves trouvées sur une bonne interface utilisateur ou d'autres endroits. Bonne chance avec ça. 67. Étude de cas : analyse de page d'accueil: Hé, là. Dans ce clip, je vais parler de ma page de prêt et ensuite de mes objectifs en tant que propriétaire d'entreprise. Cela vous aidera à mieux comprendre l'esprit d'un client ou d'un entrepreneur. Vous verrez comment chaque détail de la page est là pour une seule raison. Et c'est le coup de pouce des ventes. C' est important parce que chaque jour, je vois des designers se concentrer bien le côté design, mais ils n'ont pas réalisé qu'ils ne répondent pas aux besoins du client. Ils jettent juste des trucs autour. Je tiens également à souligner la différence entre un site Web et la page de destination. Alors que sur un site Web régulier, vous avez un tas de choses que vous pouvez faire. La page de destination est construite avec un seul but spécifique à l'esprit. Dans ce cas, que la vente être averti, il s'agit d'une vidéo assez longue sur la niche de conception web. Si vous n'êtes pas intéressé, il suffit de l'ignorer. Allons-y et vous verrez ce qui est, ce qui met la balle au point du projet. Il s'agit d'une page de destination pour le cours Photoshop. L' objectif principal est d'obtenir des ventes pour ce produit numérique. C' est assez évident. Ce qui n'est pas si évident, c'est le fait que c'est une tâche difficile parce qu'il y a d'innombrables vidéos YouTube qui sont totalement gratuites, B, qui sont moins chers, le tribunal dit là-bas, voir le prix peut sembler élevé à certains les gens. Alors, comment aborderiez-vous un tel projet ? Je pense que nos deux principales avenues, quand se concentrer sur mon expertise en tant que professeur ou se concentrer sur les besoins de l'étudiant. Vers le point numéro un, vous penseriez que si je montre que je suis un instructeur certifié Adobe et expert Photoshop avec plus de 24 000 commentaires et 200 000 étudiants, cela établirait la crédibilité. Cela ferait confiance aux gens et, par conséquent, ils pourraient être plus susceptibles d'acheter le cours. Mais je n'ai pas choisi cette voie. Et voici pourquoi. Le taux de rebond est cette mesure, ce nombre qui nous indique combien de personnes quittent immédiatement un site Web en y entrant. Une norme de l'industrie, et la plupart des gens au courant l'ont constamment surveillé. Les gens quittent immédiatement un site Web pour plusieurs raisons. Mais l'un des plus grands est une inadéquation entre les attentes des visiteurs et le contenu affiché. Si vous êtes à la recherche du cours Photoshop et que vous voyez une grande image d'un gars au hasard qui se vante de son expertise a des chiffres qui ne répondent pas à vos besoins. Au lieu de cela, il y a de fortes chances que ça puisse vous bouleverser. Dans la niche de la page de destination, vous devez vous assurer que vous vous concentrez au laser sur les visiteurs, veut perdre du poids pour mieux dormir, faire plus d'argent pour obtenir une date, et ainsi de suite. L' expertise entre en jeu à un moment ultérieur du terrain de vente. Quelles méthodes d'abord et avant tout, est d'attirer l'attention du visiteur et de le garder intéressé. Je vais le répéter. Ce qui compte le plus, c'est d'attirer l'attention du visiteur et de le garder intéressé. Si vous parvenez à l'engager, les chances d'une vente augmentent. Ok, avec cela étant dit, regardez cet en-tête. C' est minuscule selon les normes de n'importe qui. Et c'est parce que les visiteurs devraient se concentrer ici et cette zone centrale, le menu de navigation, est aussi minime qu'il arrive à la maison à propos de moi contact, qui sont obligatoires en ce qui me concerne. Une telle page puis enregistré et se connecter à nouveau, très besoin d'un pixel grand diviseur. Et c'est l'en-tête. Pas d'images, pas de biseau, pas d'ombre intérieure, rien d'aussi propre que ça. Ainsi, le visiteur est attiré ici. C' est là que votre rédaction doit être sur le point. La rédaction est essentielle dans une page de destination. Ça dit, devenez un designer. Ce n'est pas apprendre Photoshop qui peut fonctionner, mais les objectifs des gens sont et formulés de cette façon. Tu ne veux pas avoir un nouveau matelas. Tu veux mieux dormir pour qu'on se sente mieux. Tu veux être bien reposé. Ensuite, le terme masse de verre est là pour dire C'est un programme premium. Enfin, des spectacles débutants, c'est le seul programme de formation dont vous aurez jamais besoin. Tout est englobant. Chaque mot ici a du sens. C' est un grand titre. Il n'y a pas de graisse. Tu ne peux rien couper. Non. Pourriez-vous y ajouter beaucoup de choses de manière productive ? Court, puissant, efficace. Donc, c'est en soi l'une des raisons pour lesquelles vous ne devriez jamais utiliser Lorem Ipsum sur les pages de destination. Ce titre à lui seul prend beaucoup de temps à fabriquer. Mais passons au sous-titre. Il dit appris Photoshop, la conception web, conception d'applications mobiles, la conception graphique et bien plus encore. Cela indique qu'il y a une tonne de contenu, mais ce sont aussi des mots à la mode, des mots clés. Si vous cherchez, disons, web design, cette ligne ici vous rassure que vous êtes au bon endroit. Cela minimise le taux de rebond. Elle continue. Adi a été enseigné par un instructeur certifié Adobe Photoshop. C' est un USP, un point de vente unique. La durée du cours et les références des instructeurs sont des arguments solides en faveur du cours. Donc encore une fois, tout ce que vous voyez ici qui vise à minimiser le taux de rebond vous sur les personnes clés intéressées. Dernière ligne, accès illimité pour apprendre à votre propre rythme. C' est puissant encore une fois, un accès illimité. Donc tu n'as pas à te précipiter sur le web. Il vous dit également que le cours n'est pas une chose de streaming unique. Ensuite, il vous rassure en disant que vous pouvez apprendre à votre propre rythme. C' est parce qu'il y a un groupe important de personnes dans n'importe quel domaine qui est intimidé par l'apprentissage d'une nouvelle chose. Peu importe qu'il s'agisse d'apprendre à danser, de jouer de la guitare ou d'apprendre un nouveau programme, ils n'ont pas confiance en leur capacité à récupérer rapidement de l'information. En tant que telle, cette phrase, apprendre à votre propre rythme, est très puissante. Tout ça, et nous avons seulement traversé quoi, 5% de ce design. Ok, Aller à l'avant, les caractéristiques du cours sont quelque chose qui est venu avec la plate-forme que j'utilise. Donc ce n'était pas mon premier choix. J' ai dû l'utiliser ici pour des raisons techniques. Il pourrait être utile pour les personnes qui sont intéressés par des nombres plus de 100 conférences à deux heures, tous les niveaux de difficulté inclus et ainsi de suite. Mais ce n'est pas le meilleur domaine dans ce design. Vient ensuite la vidéo. L' aperçu est un peu faible qualité en raison divers plugins qui m'ont aidé à augmenter la vitesse des pages, ce qui est un facteur critique dans la vente de choses en ligne. Les charges fascinées le mieux. Mais la vignette est frappante. Il dispose de couleurs audacieuses et il a ce message ici. Apprenez auprès d'un instructeur certifié. En descendant, nous avons une série de titres appris à créer 51 cours, l'argent, gagner de la confiance, contenu unique. Ce sont là les manchettes bien conçues qui sont destinées à parler à divers individus. Apprenez à créer pour votre emploi, pour votre entreprise, pour vous, repose sur la carte du développement personnel. C' est quelque chose pour les gens qui veulent élever leur vie qui veulent le changement, qui veulent grandir peut-être. Mais je ne pousse pas trop cette carte parce que je ne veux pas promettre la lune ou le cours Photoshop qui change la vie. Vendre agressivement est toujours contre-productif. Au lieu de cela, ce que je fais c'est que j'utilise cette section pour me séparer, vidéos YouTube, les cours moins chers, même le mien en fait. Et le prix apparemment élevé, difficulté progressive est d'abord démontré parce que encore une fois, les gens manquent de confiance et de foi en eux-mêmes. Ils craignent qu'ils luttent. Donc c'est la première chose que je dois aborder. Une autre partie de cela est le fait que lorsque vous regardez une vidéo YouTube, c'est hors contexte, ou bien sûr est tellement plus logique. Vous obtenez de A à Z sur une vidéo YouTube, vous ne savez pas ce qui se passe ensuite. Instant tenu par chat en direct est l'une des raisons pour lesquelles le cours est tarifé en tant que tel. Et c'est encore une fois, une autre raison pour laquelle c'est beaucoup mieux que les moins chers, parce que vous avez accès à un professionnel qualifié. Réponses immédiatement. Un accès illimité et le nombre d' heures vous indiquent que c'est la seule chose dont vous aurez besoin. Apprendre en faisant vous dit que vous n'avez pas à mémoriser des choses. Les gens détestent les écoles pour une raison. Apprendre aux activités semble plus amusant et agréable. Et nous en avons deux autres ici, mais continuons. La section suivante est encore une fois, un grand argument en faveur de l'achat de ce cours. Tout d'abord, c'est un parcours complet de 0 à héros, cinq parcours en un. Ensuite, vous obtenez cette vidéo ici qui vous montre tout ce que vous allez créer. C' est une meilleure utilisation de l'espace plutôt que de montrer 100 miniatures qui sont beaucoup trop petites, cela aidera également le site Web à se charger plus rapidement. Ensuite, vous avez une liste de contrôle et tout le monde est obligé de trouver quelque chose qui vous intéresse. Enfin, quelques statistiques clés pour ces penseurs logiques qui ne prennent pas de décisions avec leurs sentiments. En parlant de ça, voici la fin de la page. Pour moins de 5$ l'heure pour la meilleure formation Photoshop avec instantané via le chat en direct d'un instructeur certifié Adobe. Cela traduit ce prix apparemment élevé en quelque chose qui est plus relatable, juste 5$ l'heure. C' est un acier. Remonter vers le haut. Cette zone est utilisée pour demander à l'utilisateur d'agir. Vous voulez rendre l'ensemble du processus aussi facile que possible. Ne le forcez pas à faire défiler la sauvegarde, saupoudré le bouton d'appel à l'action dans les endroits clés. La prochaine chose, c'est que la preuve sociale est une grosse affaire. Les gens ont besoin de voir que ce cours fonctionne. C' est pourquoi j'ai inclus ce texte région lourde. Les gens seront évidemment découragés. Lisez-le, mais ce n'est pas le but. Le titre, le sous-titre et toutes les étoiles sont ce qui compte. Nous vivons dans un monde où les gens lisent le titre d' une nouvelle sur Facebook ou autre et le répandent, même s'ils n'ont pas lu l'article, nous n'avons pas assez de temps. Donc, le simple fait que nous voyons un mur de preuves est suffisant pour nous. Donc encore une fois, même si cela peut sembler une erreur, que c'est trop lourd de texte, cela a du sens. En continuant, nous avons un autre domaine de USB, des points de vente uniques. Ces points vous aident à justifier l'achat du cours plutôt que de regarder vidéos YouTube aléatoires de diverses personnes achetaient un cours bon marché lorsque vous n'obtenez aucune aide réelle. Ensuite, ces badges sont pour les personnes qui aimaient numériser rapidement une page. Tout cela est très nécessaire et je pense que si j'avais une liberté totale, je les placerais probablement en haut de la page au lieu de toutes ces morts. Par exemple, l'accès instantané est réservé aux personnes qui détestent attendre. C' est une incitation majeure à l'acheter et a commencé. Comme vous pouvez le voir, la page de destination doit parler à des tas de personnes avec des comportements complètement différents. Certaines personnes veulent prendre aussi bas, autres veulent maintenant, certaines personnes ont peur de ne pas être assez créatives, ou peut-être qu'elles ne seront pas en mesure de travailler, et ainsi de suite. Vous avez les rassurés tous ces gens. Enfin, une section FAQ est très nécessaire, mais cinq à six questions devraient être le maximum. Plus que cela et ça commence à se sentir accablant. Maintenant, remontons. Remarquez la simplicité de la page. Nous avons une police fantastique en quelques poids sur un fond blanc pur. Nous avons un très facile sur l'œil bleu pour quelques sections. Mais partout où vous regardez, tout est impeccable. La couleur est utilisée pour attirer l'attention, soit pour amener un visiteur à cliquer sur la vidéo YouTube, soit pour acheter le cours. C' est ça. Et avec cette simplicité, ces icônes prennent vraiment vie. J' ai passé très longtemps à trouver ceux qui correspondent, mais ils brillent vraiment avec tous ces espaces autour d'eux. L' ensemble du design repose sur la symétrie, sur un sentiment de vide et une grande typographie. Je ne peux pas dire que j'en suis parfaitement amoureuse, mais je pense qu'elle répond à mes objectifs en tant que propriétaire d'entreprise. En parallèle, dans la section À propos de moi, l'accent est mis sur mon expertise, mais aussi sur mon histoire de vie. Si tu veux apprendre à me connaître, c'est l'endroit pour ça. C' est une lecture assez longue, mais je n'avais pas eu le temps de créer une vidéo YouTube pour la placer en haut de la page. regardant un dernier coup d'oeil à la conception, ma question à vous est, comment créer une telle page si un client venait à vous avec ce mémoire pour vendre des cours Photoshop à trois chiffres, comment concevoir ce débarquement page ? Comme je l'ai dit, vous auriez pu vous concentrer sur l'expérience de l'instructeur au sommet ou sur les projets inclus dans le cours. Vous auriez pu montrer le programme, mais tous ces choix sont obtenus leur sous-optimal. Par exemple, regardez la table des matières. C' est ginormal. Cela aurait mangé beaucoup d'espace de pression. Et si vous n'en incluez que la petite partie, les gens pourraient penser qu'il n'y a pas beaucoup de contenu dans le cours. Mais je dois dire que je ne suis pas content d'une chose. C' est le fait qu'il n'est pas extrêmement évident que vous obtenez un chat en direct pour l'aide immédiate. C' est l'un des plus gros points de vente et je ne suis pas sûr que ce design le montre assez. simple fait de pouvoir parler à un expert en temps réel est extrêmement précieux. Encore une fois, la question est, comment créer une page de destination pour ce type de projet ? Montrez-moi votre design dans la section commentaires ou sur cet accord. Amuse-toi bien avec ça. 68. Pensation finale des besoins du client: Hé, là. À la fin du deuxième pilier de la conception web, je veux faire un bref aperçu. La principale chose à retenir est que vous créez un site Web basé sur les besoins de votre client n'est pas pour vous. Ce n'est pas à propos de ce que vous aimez, ce que vous pensez utiliser le mieux ce client. Parfois, vous avez besoin d'une page de destination au lieu d'un site Web régulier. Parfois, vous pourriez être forcé d'en créer un moche pour un produit gimmicky. Parfois, vous serez hors de votre zone de confort. C' est à toi de fixer tes normes et de décider ce que tu veux faire. Vous êtes libre de rejeter les projets ne traverseront pas une certaine ligne. Par exemple, prenez ce concepteur de logo. Il se spécialise dans un certain regard. Il le fait très bien. Il va parfois un peu en dehors de cette ambiance vintage, mais la plupart d'entre eux suivent le même style. Tu peux le faire aussi. Si vous êtes seulement intéressé par la conception de belles pages de destination, comme celles-ci de l'atterrissage vers l'avant, vous êtes sûr, allez-y. C' est ce que j'aime dans le design web. Vous pouvez vous spécialiser dans les pages de destination de la technologie et c'est tout. Rien d'autre. Ou vous pouvez essayer d'être polyvalent, du dentiste aux blogs, aux cabinets d'avocats, au commerce électronique, aux pages de destination et ainsi de suite. Soit écouter ce que le client veut, qui est ce que je recommande au moins au début pour les 340 premières années. Ou concentrez-vous sur un seul style et soyez avant-gardiste à ce sujet. n'y a rien de mal. Et être le gars incontournable pour les pages d'atterrissage sur le pont ou n'importe quel créneau que vous choisissez, il peut être plus difficile de commencer. Spécialisons a ses avantages. Revenir aux besoins du client. Quand je passe en revue un design d'un de mes étudiants, je me concentre toujours sur le premier pilier du web design. Je regarde l'exécution et j'inspecte le design pour les erreurs. S' il n'y a aucun problème avec la taille des éléments d'espacement, contraste, la disposition de la hauteur de ligne, et ainsi de suite. Le site Web est très probablement six sur dix au minimum. Ensuite, je passe à d'autres choses plus fines comme le choix de la police, couleurs, l'espace négatif, les graphiques personnalisés, etc. Et si cela est fait correctement, le projet peut obtenir un score de huit ou 8,5. Ce que les débutants ne réalisent pas, c'est que seul le client peut vous donner un neuf ou un 10 parce qu'il est la pointe de la pyramide. Une autre chose que vous ne savez peut-être pas est que l'un de ces modèles peut obtenir une note très faible. N' importe lequel de ces superbes designs, qu'il s'agisse d'une page de destination ou d'un site Web standard, peut être rejeté par un client. Peu importe s'il s'agit d'un projet indépendant ou d'un projet direct à un. Ce n'est pas parce que c'est beau et bien exécuté que le client va être heureux. Je vais le dire encore une fois juste parce que c'est beau et bien exécuté ne signifie pas que le client va être heureux compte tenu de cet exemple dans le passé et je vais l'utiliser à nouveau. Si vous concevez un site web pour la salle de gym, vous devez savoir ce que le client veut. Est-ce un bodybuilding, hardcore Gm, un gymnase CrossFit, et des vitaux. Jim, disons la boxe ou MMA, une salle de gym pour les femmes avec des cours de yoga et une ambiance optimiste. Vous pouvez concevoir votre doute de cœur, mais un seul de ces choix est le bon pour votre client. Il est le seul à pouvoir vous guider. Donc, si vous me montrez un design magnifique, je dirai probablement que c'est beau, mais cela ne veut pas dire que le client va l'adorer. Vous devez vous assurer que vous comprenez sa vision. Tu dois lui donner ce qu'il veut. Imaginez que vous êtes le chef d'un restaurant et que vous aimez l'ail, les frites. Eh bien, c'est peut-être votre nourriture préférée. Vous pouvez le servir à tous vos clients. Vous devez prendre ces commandes et même si vous n'êtes pas d'accord avec elles, vous devez livrer. Alors assurez-vous de séparer ce qui a l'air génial par rapport à ce que le client veut. Ne vous méprenez pas. Je ne dis pas que tu ne devrais pas demander de commentaires à moi ou à quelqu'un d'autre. Je dis que nos opinions n'ont pas d'importance après un certain point. Si vous êtes conçu comme un sept ou un huit, la seule personne que vous devriez écouter est le client. C' est le seul qui compte après ça, Mark. Je suis tout pour la créativité et la création de beaux sites Web, mais tout est pour rien. Si vous ne pouvez pas livrer ce que le client veut. Et avec cela, nous avons conclu le deuxième pilier du web design. J' espère que vous savez ce que vous avez à faire. Et c'est pour garder vos oreilles ouvertes dans ce domaine. Peu importe à quel point vos designs sont géniaux s'ils ne sont pas en phase avec les souhaits de l'entreprise, écoutez votre client et faites attention. C' est la clé. Merci. 69. La troisième clé pour devenir un grand concepteur de Web: Bienvenue dans le troisième pilier du web design. Attention aux détails. Nous allons passer en revue plusieurs études de cas et je vais les décomposer afin que vous puissiez mieux comprendre ce qu'est cette section. Le problème est que l'attention aux détails est nuancée. C' est subtil à l'œil non entraîné, c'est invisible. À titre d'exemple simple, pensez à la couleur de vos calques de texte. Tu pourrais utiliser du noir pur, 000, 000, 000, n'est-ce pas ? Ce que vous pourriez aller pour quelque chose comme faire aussi, ce qui est un peu plus doux et plus facile à l'œil. Encore plus que cela, vous pourriez opter pour un code de couleur qui a un peu plus connu à mouiller, disons peut-être avec un peu de brun dedans. Pour moi, il s'agit d'une décision de conception importante. La plupart des gens, cela ne semble pas pertinent. Il ressemble à la même chose, vaut la peine que certains disent. Mais de grandes conceptions de grande, cause de toutes ces petites choses qui additionnent. Et c'est la clé ici. Ce n'est pas une seule chose. Disons que changer la couleur de vos polices, cela va améliorer radicalement votre design. Non, c'est alors 2050 petites choses qui s'accumulent et ensemble ils deviennent incroyablement puissants en parlant de l'augmentation à deux chiffres des ventes. Individuellement, ils semblent triviaux sans le reste d'entre eux. Toutes les choses dont je vais parler semblent être une perte de temps. C' est comme les ingrédients d'un gâteau. Qui diable s'excite pour la fleur ? Ou le sucre pur, est quand vous les mélangez ensemble application qu'une recette bien triée dans certaines proportions. C' est là que tu as quelque chose de génial. Retour à la conception web. Lorsque vous comptez sur l'attention aux détails, l'ensemble du site va peler raffiné et boutonné, va bien couler du début à la fin. Et c'est l'objectif de cette section. Mais revenons un peu parce que nous ne pouvons pas parler d'attention aux détails sans UX. Vous trouverez que la grande partie de cette section sera consacrée à UX, mais tout est pratique. Écoute, je vais expliquer toute la pensée UI UX dans la prochaine conférence. Mais je veux partager mes propres réflexions sur ce sujet. Comme vous, je voulais en savoir plus sur UX parce qu'il était largement connu que c'est l'une des clés d'une carrière réussie dans le design web. J' ai commencé à regarder des cours et j'ai été choqué par le niveau de complexité. Écoute, UX n'est pas quelque chose que tu apprends en une journée. C' est une bête qui mérite le respect. Dévore des livres, des cours et des séminaires qui vont vraiment dans ce genre de choses. Vous pouvez trouver des choses comme des tests de convivialité. Ils vont risquer des évaluations, des conceptions de faible et haute fidélité, des groupes de discussion, l'architecture d'information de persona puis beaucoup, bien plus encore. Ceux-ci feront tourner votre tête. Être un concepteur UX est parfois différent d'être un concepteur web. Maintenant, est-ce que tout cela est nécessaire ? D' une certaine façon ? Oui, définitivement. Vous ne pouvez pas vraiment compresser des années d'apprentissage en quelques conférences. En fin de compte, c'est un champ distinct, mais je peux vous fournir un cours de crash avec les informations dont vous avez besoin pour vous lever et courir d'une manière que j'aime penser que c'est ma spécialité pour trouver toutes sortes de trucs, des conseils et des techniques qui produisent de bons résultats solides sans avoir à passer des années à maîtriser ce domaine. Ok, ça ne te donnera pas un parfait 10 sur 10. Mais vous pouvez encore sérieusement améliorer votre conception. C' est donc mon objectif dans cette section, un cours intensif en UX et une attention aux détails. Mettons-nous au travail en commençant par les bases. 70. Qu'est-: Parlons des bases et de la façon dont je les vois. Ui signifie l'interface utilisateur. Ui est un fardeau conçu et Photoshop. Ux est synonyme d'expérience utilisateur. C' est ainsi que le bouton fonctionne et comment l'utilisateur est censé l'utiliser pour atteindre un objectif. Maintenant, un bon UX signifie simplement une bonne expérience utilisateur. Dans la vraie vie, l'exemple le plus commun est la bouteille de ketchup. La version en verre de Heinz adorait fantastique. C' était génial, UI, visuellement magnifique. Enlever le ketchup. Maintenant, Paine, en gros tu n'as pas de ketchup ou tout le ketchup. C' est une expérience horrible. Plus que cela, la grande interface utilisateur ne pouvait pas compenser le mauvais UX. Autrement dit, peu importe à quel point la conception de la bouteille était une fonction bactérienne I0, obtenir le ketchup hors de celui-ci n'a pas été rempli. Pour revenir à la conception web, cela signifie que vous pouvez concevoir un projet kick-ass dans Photoshop uniquement pour voir les utilisateurs en difficulté. Pensez à un bouton qui n'a pas de survol ou d'état pressé, vous cliquez dessus et rien ne se passe. Vous cliquez plusieurs fois en dehors de l'illustration. Et après 1015 secondes, finalement pris à une autre page. C' est horrible. Ux c'est une mauvaise expérience. Peu importe à quel point le fardeau est agréable ou le site Web Intel d'ailleurs, parce que l'utilisateur est tout simplement énervé. Écoute, dans la vraie vie, on peut penser à des talons hauts. Est-ce que les dieux du sport, ceux-ci mènent Fantastique ? Est-ce que la définition de grande interface utilisateur, magnifique, magnifique à regarder. Tout le monde apprécie leur chance. Mais la marche et les talons hauts toute la journée, d'après ce que je comprends, c'est une douleur majeure. C' est un énorme malaise. Cette suspension SportsCar incroyablement dure qui frappe les dents chaque fois que vous frappez une petite bosse sur la route. Pas de stockage pour parler, gaz, guzzler, entretien élevé, et ainsi de suite. Et ces deux cas, nous pouvons faire des compromis. Nous acceptons toutes les mauvaises choses qui leur sont associées pour diverses raisons que je ne vais pas entrer dans. Mais en tant que concepteurs web, nous n'avons pas à faire supporter des difficultés lors de la navigation autour de nos utilisateurs. Vous devez vous rappeler que les utilisateurs sont des supermodèles et la portée d'attention et les patients sont extrêmement limités. Ne pensez pas qu'ils accepteront une mauvaise expérience utilisateur simplement parce qu'ils veulent le produit ou le service de votre site Web. Sachez, il y a 100 autres sites Web qui sont offerts la même chose. Maintenant, pour rester simple, pensez-y comme ça. n'y a pas de compromis dans la conception web. Soit vous pensez à l'expérience de l'utilisateur et vous l'améliorez constamment, soit vous négligez cela. Et vous créez des designs qui ne sont destinés qu'à la publication en ligne sur Dribbble ou Behance pour les goûts. Il est assez courant de voir de magnifiques designs sur ces plates-formes qui ne sortent jamais de Photoshop, Adobe XD ou tout autre programme. Pourquoi c'est ça ? Parce qu'ils ne sont pas réalistes. Ils sont complètement fictifs, comme la vie de nombreux influenceurs et célébrités. Quand vous voyez un design de chute de mâchoire, je parie qu'il y a 90 pour cent de chances qu'il ne les fasse pas implémenter dans un vrai site Web de travail. Cela a parce que c'est 100% UI, 0% UX. Et si ce n'est pas le cas, ça ne ressemblera tout simplement pas. D' une certaine façon. C' est comme ces concepts futuristes que vous voyez dans les salons de voitures. Quand Mercedes veut faire les nouvelles, ils créent le plus grand concept auquel ils peuvent penser avec des chaises pivotantes et des LED à l'intérieur des roues et autres. Mais quand la voiture réelle frappe la route, il ressemble à une classe C légèrement améliorée. revenant à la conception web, ces superbes designs sont abaissés parce que toutes les autres entreprises n'ont pas le budget de 50 à 100 K pour passer par l'ensemble du processus à partir d'un étourdi ? Oui, 50 à 100 000$ pour un site web. Les choses deviennent incroyablement coûteuses lorsque vous embauchez une équipe de conception, une équipe UX, des mots de code, des rédacteurs et des chefs de projet. C' est une autre raison pour laquelle j'ai préféré vous emmener sur un cours de crash concernant UX, la plupart de vos clients vous paieraient probablement quelques 100 ou quelques milliers de dollars. Vous avez toujours besoin de compétences UX décentes. Et c'est ce que j'ai l'intention de t'apprendre. Jusqu' aux concepts de richesse pour des projets réels. Pour résumer, l'interface utilisateur est à propos de l'apparence du site Web, de son esthétique. Ux concerne le fonctionnement du site, la façon dont les visiteurs l'utilisent pour atteindre un objectif. Je ne vous apprendrai pas tout, mais je vais vous montrer des moyens très solides pour améliorer la conception de votre site Web. Continuons notre discussion dans la prochaine conférence. 71. Le meilleur exemple de UX bons UX et de l'attention aux détails: Hé, là. Dans la prochaine conférence, je veux vous montrer divers exemples de mon propre site Web ou pire ligne de points. La raison pour laquelle je me concentre là-dessus est que j'ai accès à ses analyses. La chose à emporter est qu'après avoir implémenté une liste d'environ 25 modifications, j'ai réussi à doubler mes ventes mensuelles. Ouais, tu as entendu ça, non ? Doublé de 5000 à 10000 dollars par mois. Eh bien, il y en a, n'est pas si impressionnant pour la nouvelle startup qui est juste d'attraper la vitesse. Je suis très content de notre trajectoire. Et je voulais que tu saches que ce n'est pas de 100 à 200$ ou quelque chose de ridicule comme ça. Ok, Voici l'ancienne version du site dans Chrome qui est installé sur mon propre ordinateur. D' où pourquoi l'URL dit localhost. Et voici le courant, celui en direct dans Firefox. Commençons par le plus grand changement. Le meilleur exemple de bon UX que je peux penser, disons que vous voulez acheter deux crêpes, deux saveurs de farine d'avoine lorsque la limonade et quand Q0 mettent une commande typique. Ça semble assez simple, non ? Les crêpes sont ici et moi, Chris, stérile, nous sommes assez intelligents pour ajouter cette icône à travers laquelle vous pouvez ajouter le produit directement à votre carte. Vous n'avez donc pas à entrer chaque produit et cliquer sur Ajouter au panier, puis revenir en arrière et répéter le processus pour l'autre produit. Intelligent, non ? J' ai deux crêpes dans mon panier. En passant, la vitesse est incroyablement rapide parce que comme je l'ai dit, c'est une copie locale du site. Maintenant, ajoutons le repas de noeud. Remarquez ce qui vient de se passer. On vient d'être ramené à l'onglet crêpes. Nous devons cliquer sur la farine d'avoine encore une fois pour continuer à magasiner. Là, ça va encore. Peut-être que c'est un bug lié à cette catégorie. Éliminons le sac, boum, crêpes. Et enfin une moquette. Oh, tu veux les concerts du groupe ? C' est une expérience de magasinage horrible. C' est mauvais. Ux point vide. Permettez-moi de vous montrer la version mise à jour qui est le meilleur exemple de bon UX. Eh bien au moins la meilleure amélioration, boom, boom, boom, boom. Et boum. Dans la version mise à jour, cet onglet ne saute plus. En fait, la page ne s'actualise pas du tout. Si nous revenons à l'ancienne version, jetez-la. Poignardez ce que l'icône Actualiser en haut du navigateur. Notez la version de travail Actualiser. C' était en fait assez lent, ce qui était encore plus bouleversant. Mais dans la version mise à jour, ce n'est plus le cas. De plus, nous obtenons un message qui apparaît en bas de la page indiquant que le produit a été ajouté au panier. L' icône dispose également d'un plus à l'intérieur, sorte qu'il transmet ce que fait ce bouton. Mais tous ces détails fins peuvent être discutés que le point latent, clairement c'est une meilleure expérience utilisateur, mains vers le bas. Mais ce dont je voulais parler dans cette conférence, c'est comment j'ai fini avec cette horrible version. Moi un Photoshop et structurel spécialisé dans la conception web. Eh bien, prenons ça pas à pas. D' abord, je n'ai pas codé un site web. J' utilise la grande société de codage de Roumanie, très respectée avec une grande équipe de codes. Bien sûr, j'ai créé un beau design dans Photoshop, pixel parfait, et j'ai également fait un prototype interactif dans Adobe XD. J' étais un client de rêve pour eux. Le problème est que je n'ai pas mentionné que la page ne devrait pas être actualisée après que l'article a été ajouté au panier. Je ne pouvais pas dire que le Photoshop, pas mes prototypes interactifs. Pour te dire la vérité, je n'y ai même pas pensé. Pourquoi je le ferais ? Je me suis concentré sur le côté design, l'interface utilisateur, mais aussi sur des choses comme le processus de paiement, simplifiant le processus d'inscription, rendant plus facile pour l'utilisateur d'ajouter son adresse, le bouton Ajouter au panier sur la page d'accueil. Ce sont toutes des tâches liées à l'UX. Donc ce n'est pas comme si je m'en fichais ou que j'étais ignorante. Non. Au lieu de cela, ce qui s'est passé, c'est les codeurs que nous ne sommes pas gérés correctement, ils ne se souciaient pas assez du résultat. Ils n'ont pas eu l'attention aux détails pour ça. Leur tâche était de mettre en œuvre mon design, de le faire fonctionner. Pouvez-vous ajouter le produit à votre panier ? Oui. Affaire classée. D' une certaine façon, c'est comme donner à un ordinateur cette tâche pour mettre fin à toutes les maladies sur Terre. L' IA tue toute l'humanité. Est-ce qu'elle a terminé la tâche avec succès ? Oui, il l'a fait d'une manière inattendue avec de graves répercussions leçon, il est facile de blâmer les codeurs. En fait, ces gentils gars, et je ne veux offenser personne. Mais dans cette situation, c'est sur eux. Le problème, c'est que c'est discutable. À la fin de la conférence, j'aimerais connaître vos commentaires deux, mais continuons. La prochaine chose est que je leur ai habilement demandé de créer une option dans mon panneau d'administration à travers laquelle je pourrais choisir quel onglet serait actif par défaut. Le raisonnement est solide. Je veux peut-être faire la promotion de mes crêpes cette semaine, mais la semaine prochaine, c'est peut-être la clé, mettre celle après ça, ma limonade et ainsi de suite. Fondamentalement, je voulais contrôler ce que l'utilisateur voit à mon panneau d'administration. Eh bien, l'onglet par défaut est défini sur les crêpes. Une fois que l'utilisateur passe à un nouvel onglet et dispose du bouton Ajouter au panier, l'onglet par défaut passe en action. Évidemment, quand je leur ai demandé ce contrôleur, je n'ai pas supposé que ça arriverait. C' est stupéfiant d'esprit. C' est ma faute ? Encore une fois, c'est très discutable. La plupart d'entre vous diraient non. Et vous savez, à la fin de la journée, j'ai fait de mon mieux. J' ai créé le design dans Photoshop, pixel parfait. J' ai fait un prototype interactif que quatre-vingt-dix-neuf points neuf pour cent des clients ne font pas. Je les aide dans le processus de transfert. J' ai aidé à passer les tests. Je ne m'attendais pas à ce résultat parce qu'il est déraisonnable de supposer que je, en tant que client ou concepteur, sais quelle est la meilleure pratique en termes d'onglets sur la page d'accueil et comment ce processus d'ajout d'un article au panier devrait fonctionner. C' est une technique de codage et ils devraient le savoir. Seulement quand un freelancer est venu dans l'image, j'ai découvert que la grande entreprise aurait dû utiliser JavaScript pour là pour panier fonctionnalité de l'Indien. Je ferai de mon mieux pour déclarer que son nom a coulé. Ça a fait du bon travail. Il a suivi mes instructions et avec son aide, j'ai réussi à doubler mes ventes. Bien sûr, il n'y a pas de rafraîchissement Ajouter au panier. Deng n'était qu'une partie de l'équation, mais c'était l'une des plus grandes améliorations. Maintenant, vous pouvez demander pourquoi la société de codage ne l'a pas corrigé ? Eh bien, ils facturent environ 50$ l'heure avec le pigiste. Les frais sont inférieurs à la moitié de ce montant. Je jette des nombres aléatoires, au fait, ce ne sont pas des prix réels à l'heure. Mais le fait que ce n'était pas un bug clair, une erreur de leur part en termes de fonctionnalité. C' est un peu difficile de, comme la société de codage pour faire plus de travail, attribuer le code à mon projet quatre heures de plus, mais ne pas me facturer d'une certaine façon. Dans ce cas, c'est comme ne pas être accueilli au restaurant. Au lieu de cela, on vous demande un point vide. La réservation est souvent courtoisie de saluer quelqu'un quand il vient à la porte. Mais s'ils ne le font pas, est-ce une raison assez forte pour se plaindre ? Encore une fois, la société de codage a fait son travail sur le plan technique. Ils ont mis en place le site. Ce n'était pas ce que je m'attendais. Mais est-ce de leur faute si j'ai certaines normes ? Où est-ce que ça finit ? À quoi, 00:00 suis-je trop demander ? Et à quel moment ne se soucient-ils pas du résultat ? En fin de compte, c'est le meilleur exemple d' attention aux détails et d'UX médiocres que je peux penser. J' attends avec impatience votre opinion idéalement sur le chat de discorde. Merci. 72. Améliorez le processus de paiement pour double ventes: Bienvenue à notre projet. Voici comment j'améliore le processus de paiement et j'ai doublé mes ventes mensuelles. Dans l'ancienne version, lorsque vous avez cliqué sur l'icône du panier, vous êtes envoyé ici. Gardez à l'esprit que nous ne sommes pas connectés. En haut à gauche, vous avez montré le contenu de votre carte. Sur le côté droit, vous aviez une zone d'information assez importante sur l'entreprise, des choses comme ce que nous croyons en nos ingrédients et ainsi de suite. Et enfin, en bas à gauche, deux choses, les informations de livraison et un bouton qui dit, s'il vous plaît vous connecter ou vous inscrire. Eh bien, ce n'était pas horrible. Ce n'était pas si génial non plus. Jetons un coup d'oeil à la version mise à jour. La note rapide sur la méthode de livraison est ici et l'appel à l'action est clair comme le jour, vous n'avez pas à faire défiler ou déplacer votre regard est juste là. C' est la chose la plus importante de la page. Quant au contenu du panier, celui-ci a été déplacé sur la colonne de droite. Vous verrez pourquoi c'est le cas dans une minute. Le bouton qui indique généralement passer commande est affiché en tout temps, mais pour le moment, il est gris et non cliquable parce que nous ne sommes pas connectés. Le texte dit quelque chose dans le sens de, s'il vous plaît remplir toutes vos informations. Les différences entre ces deux éléments sont minimes mais assez importantes. La colonne d'information était une source de distraction. Lorsque l'utilisateur veut passer une commande, vous devez le rendre aussi court que possible, rendre la caisse une brise courte et douce. Quant à la mise en page elle-même, l'enregistrement ou la connexion est l'action la plus importante sur la page. Augmenter ce bouton est la bonne chose à faire. C' est donc que lorsque vous vous connectez, c'est là que les changements les plus importants ont eu lieu. Dans l'ancienne version, vous aviez ce qui suit. Tous vos produits alignés ici. Fondamentalement, une commande contient au moins 34 produits. Autrement dit, cette zone est souvent assez vaste. Cela pousse tout le contenu ici. Le bouton Placer l'ordre, le fardeau de lancement nucléaire rouge qui fait que tout se passe n'est nulle part à voir. C' est tout le chemin en bas. Gardez à l'esprit que j'enregistre à 2560 d'ici 1440, ce qui signifie que je peux voir plus du site par rapport à un add-on utilisateur standard 1920 d'ici 1080. Full HD est la norme du tout. Mais même je ne peux pas le voir parce que ce bouton n'est pas évident. Cela crée beaucoup de confusion. Pour ajouter du carburant à la flamme. La plupart des utilisateurs ne savaient pas ce qu'ils devaient faire. Peut-être que ça vous semble évident. Si vous adoptez une approche de haut en bas, vous pouvez voir qu'il y a un bas ici. Cela dit les coordonnées. Veuillez ajouter vos coordonnées. En dessous de ça. C' est l'adresse de livraison. Veuillez ajouter vos coordonnées. jour de livraison suivant, s'il vous plaît choisir que vous avez livré le jour et ainsi de suite. Maintenant, encore une fois, ça ne semble pas si mal. Mais si vous suivez le cours jusqu'à présent, vous vous êtes peut-être souvenu que j'avais quelque chose comme 300 annonces à panier avec un seul paiement réussi. De toute évidence, c'était un problème. Voici comment j'améliore la caisse. Tout d'abord, j'ai créé trois zones distinctes. Ceux-ci ont leurs propres rectangles blancs, ainsi qu'un nombre qui détermine cet ordre. Si cela n'était pas assez clair, soit restreint l'accès aux sections à l'entrée. C' est pourquoi tout est lavé. Vous ne pouvez pas cliquer sur quoi que ce soit parce que nous n'avons pas vos informations. Est-ce que l'utilisateur doit se concentrer sur cette zone. Ici, il y a deux grands boutons orange qui se démarquent. Ils disent ajouter des infos. Sur le côté gauche, le côté vous montre quelques choses marquées en rouge, votre nom, votre numéro de téléphone et votre adresse. C' est pour vous montrer que ces choses manquent. Cliquez sur le premier bouton, pop-up apparaît, entrez votre nom et votre numéro de téléphone. Et c'est à propos de ça. Maintenant, vous pouvez continuer votre voyage. J' ai pris la décision de changer la couleur des boutons en bleu. Ce texte est également différent. Maintenant, il dit modifier cela pour dire à l'utilisateur que tout est bon. Adresse du lendemain. Parce que encore une fois, il n'y avait rien d'autre qu'il puisse cliquer sur. Cette approche étape par étape, presque infaillible. Maintenant, à titre indicatif, fonction de la région, de la ville et de l'adresse sélectionnées , mon système calcule automatiquement les frais d'expédition. De plus, bien que j'ai plusieurs options d'expédition en fonction de l'adresse du client, seules certaines sont disponibles. Pour comprendre pourquoi c'est révolutionnaire, nous devons regarder l'ancienne version. Ici. En tant qu'utilisateur nouvellement inscrit, le système vous indiquera les coûts de livraison maximaux. Évidemment, ce n'était pas idéal. Pour une raison quelconque, le côté a montré par défaut ou le coût qui est trois fois plus élevé que le standard. Imaginez 30$ au lieu de 10$. C' est une grande différence. Cette chose seule a fait beaucoup de gens abandonner leur commande. Maintenant, assuré si vous avez traversé les étapes, abord vous mettez votre nom et numéro de téléphone, puis vous ajoutez votre adresse, ce qui nécessite un clic supplémentaire pour la absolument aucune bonne raison. Puis yap, après tout cela, vous obtiendrez un prix précis. Le prix changerait. Mais les utilisateurs sont les supermodèles. Ils n'ont pas le temps de comprendre les choses. Ils ne veulent pas penser ou remplir formulaires dans l'espoir que peut-être le prix va changer, va baisser. Mais revenons à la version mise à jour. Après avoir dit mon adresse, le site Web va se rafraîchir et me montrer ce que nous pouvons voir clairement les deux autres sections,les deux sont maintenant actives parce que l'ordre de vos actions en ce les deux sont maintenant actives parce que moment n'est pas vraiment de la matière. Dans la section 3, vous choisissez la façon dont vous voulez payer soit en espèces, ce qui entraîne un supplément, soit à une carte de crédit. Ces icônes, bien qu'elles ne semblent pas, elles sont fantastiques. Ils construisent la confiance. Ils ont montré le nom d'une carte de crédit très populaire opérée en Roumanie. Dans l'ancienne version, ce n'était pas le cas. Vous pouvez trouver des articles sur ce sujet, mais en bref, montrer ces icônes est incroyablement important. Dans l'ancienne version, vous aurez les options étaient en fait cachées derrière la liste déroulante. Donc, l'utilisateur a dû travailler un peu plus pour accéder à cette information. Bien qu'un clic ne puisse pas être considéré comme un travail acharné, c'est toujours un inconvénient, exactement comme la nouvelle adresse apparaît où vous deviez cliquer sur le bouton avant de voir le formulaire. Ne mettez pas ces barrages routiers. En fait, vous en tant que concepteur et je suis sûr que vous n'allez pas les concevoir, mais vous devez garder la société de codage en échec. Les utilisateurs n'apprécient pas le frottement supplémentaire. Continuant sur cette voie. C' était un endroit dans l'ancien design où vous pouviez laisser quelques notes. Dans l'ancienne version, vous deviez cliquer ici et cela a invité la fenêtre contextuelle. Dans la nouvelle version, le champ est déjà affiché. Ce n'est pas obligatoire, mais vous savez, vous pouvez l'utiliser si nécessaire. La main est également utile. Il dit quelque chose dans le sens de n'importe quoi à noter au sujet de l'ordre. Enfin, tous les autres sont sous la place de ce fardeau. Cela vous indique si vous n'avez pas utilisé de méthode de paiement ou si la commande minimale n'a pas été respectée en les regroupant sur le côté droit, l'utilisateur apprend que c'est l'endroit où il doit vérifier. Une autre approche consiste à montrer les erreurs en ligne, c'est-à-dire à côté de cette zone. Si le paiement n'est pas sélectionné, nous pourrions l'afficher ici. Mais j'ai délibérément choisi de tout placer ici parce que l'utilisateur sait qu'il s'agit du bouton Lancer. C' est écrit ordre de place. Si la couleur grise ne vous indique pas que quelque chose ne va pas, ce message devrait être le testament concernant la bonne colonne. C' est toujours en vue. Le montant total peut changer en fonction de vos choix. Il y a une option de livraison qui coûte dix, un autre qui est 15. Mais aussi un troisième qui fait 30. Au fait, est la monnaie ici en Roumanie. Qu' il y a un supplément au cas où vous vouliez payer en espèces. En montrant tout ici, vous pouvez clairement voir votre total à tout moment. Transparence, confiance, c'est important, vous savez ce qui se passe en tout temps. Et si vous changez vos quantités, encore une fois, le total est juste ici. Dans l'ancienne version, ce n'était pas le cas. Vous deviez constamment faire défiler et vérifier le total chaque fois que vous avez choisi quelque chose, que ce soit le mode de paiement de la date de livraison, ou vous avez ajusté votre quantité. C' était frustrant comme l'enfer. C' est UX. C' est le processus par lequel vous pensez à votre expérience utilisateur et vous l'améliorez. Je savais que quelque chose ne allait pas sur la base de cette campagne publicitaire Facebook, mais aussi pour le chat en direct et les appels téléphoniques que j'ai reçus. Les gens luttaient. Eh bien, il était facile de les rejeter pour ne pas avoir le cerveau pour faire fonctionner l'ordinateur correctement ou lire une page Web. Je me suis humilié, il a regardé leurs commentaires et j'ai essayé d'améliorer mon design. C' est important que tu écoutes. y avait pas d'ego. Je l'ai laissé à la porte. Ce qui est important, c'est que j'ai trouvé des points précis dans le processus de paiement et que j'ai essayé de les réparer. Jusqu' à présent, mes ventes ont doublé. Et même ainsi, il y a encore plus de place à l'amélioration. Mais c'est une histoire pour une autre fois. 73. Améliorez la version mobile à la double double ventes: Bienvenue dans une autre partie de ma liste d'Aedes à travers laquelle j'ai réussi à doubler mes ventes. Cette fois, nous nous concentrons sur la version mobile de la page d'accueil. Alors que j'ai une application Android, une grande partie de mon public visite mon site Web pour le faire là, les téléphones, un étonnant 85% des visiteurs utilisent un appareil mobile. La plupart d'entre eux proviennent de publicités Facebook et Instagram, surtout parce que c'est moins cher. Mais c'est une autre histoire. Pour voir le site Web et le mode mobile, ou vous devez faire est d'ouvrir la console du navigateur. Vous pouvez le faire en appuyant sur F2 L sur votre clavier. Vous pouvez également cliquer avec le bouton droit de la souris, appuyer sur Inspecter à partir de la nouvelle fenêtre qui s'affiche. Recherchez cette icône. Comme dans les vidéos précédentes, Firefox montre la nouvelle version, Chrome, l'ancienne. Voici à quoi ressemblait le site il y a quelques semaines quand vous n'aviez rien dans votre panier, vous avez à peine vu la moitié d'une crêpe. Pas idéal par aucun moyen. Ce texte, la tasse, un bon 40% de l'écran immobilier. C' était horrible. Et si l'utilisateur arrête le défilement, il ne verrait que l'onglet par défaut, dans ce cas, la catégorie crêpes. Évidemment, vous pouvez faire défiler la sauvegarde et changer les catégories, mais l'approche entière était difficile. Bon de voir tous mes produits que vous avez dû parcourir sérieusement autour. Nous parlons de minutes d'exploration. Mais comme nous le savons maintenant, les utilisateurs n'ont pas ce type de patients. En plus de cela, tout est beaucoup trop tendu dans ce design. Alors que chaque élément nécessite une quantité décente de salle de respiration, c'est beaucoup trop arriver à voir un seul produit et quel tiers, c'est maintenant génial. Donc c'est l'ancien design. Voyons le nouveau. C' est beaucoup plus comme ça. Eh bien, nous avons encore une assez grande quantité de texte. Vous pouvez voir près de quatre produits. Je serai à cette deuxième rangée est complètement visible. Vous pouvez encore voir une grande partie de ces images, ce qui est suffisant pour capter votre attention. C' est beaucoup plus comme ça avec un seul défilement, vous obtenez de voir le contenu d'une catégorie. Et parce que le défilement est si court, vous n'avez aucun problème à trouver cette liste déroulante. Si je suis honnête, j'aurais préféré la liste déroulante des catégories fixes. Mais peut-être qu'il y aura la version 3. On verra, eh bien, je jette constamment le mot important. Je crois vraiment que c'était un changement de jeu. Les utilisateurs ont connu radicalement tourner pour le mieux. Sans oublier qu'en combinaison avec cette fonction JavaScript ajouter au panier, il est maintenant beaucoup plus facile de remplir votre carte. En parlant de ça, Jetons un coup d'oeil à l'ancien site. Lorsque la barre jaune devient visible, vous ne voyez plus aucun produit quel qu'il soit. Juste un peu de ce cercle gris. C' est ainsi que le design a été codé. Techniquement, oui, il est réactif. Mais les codeurs ont-ils fait du bon travail ? Loin de là. Dans la version mise à jour, j'ai décidé d'écraser la barre jaune tous ensemble. C' est parce que l'en-tête est fixe et l'icône du panier doit être placée à côté du menu hamburger. Cela a beaucoup plus de sens. Regardez-le de loin. Tous ces changements semblent si basiques. C' est du bon sens. Mais c'est ce qui se passe pendant le processus de codage. C' est pourquoi la plupart des projets nécessitent un gestionnaire, quelqu'un d'expérience capable de superviser l'équipe de codeurs. Et d'un autre côté, quelqu'un qui peut demander à l'équipe de conception de combler certaines lacunes. À la fin de la journée, vous allez probablement travailler toute seule. Et il est peu probable que vous ayez affaire à un chef de projet lorsque vous travaillez sur des projets dont le budget est inférieur à 3000 dollars. Le meilleur conseil que je peux vous donner est de faire beaucoup d'études et d'élever votre jeu UX. N' oubliez pas que ce beau design ne vaut rien si les visiteurs ont eu du mal à l'utiliser. Et bien que vous ferez toujours de votre mieux, le client doit lancer le site Web et revenir avec certaines analyses et modifications subséquentes. Bien que je sois heureux que mes ventes aient doublé, je pense toujours qu'il y a de la place à l'amélioration. Mes prochains changements peuvent-ils aggraver les choses ? Bref, ça peut arriver. Être trop zélé est une chose à 100%. Mais si vous avez peur des tests, vous ne ferez jamais de progrès. Cela étant dit, j'espère que vous aurez une meilleure société de codage. Ensuite, parlons de l'attention aux détails dans la conférence suivante. 74. 7 modifications de site Web qui montrent le détail: Bienvenue sur le parcours. Je veux aller avec diverses choses que j'ai améliorées sur mon site Web et ce sont tous de petits détails. C' est ce que je veux dire par attention aux détails. Tout d'abord, la chose la plus évidente, l'icône Ajouter au panier. Alors que l'ancien avait l'air encombrant, il m'a frappé que certaines personnes pourraient supposer que vous allez cliquer dessus et que vous allez être amené à l'écran du panier. Après tout, c'est ce qui se passe lorsque vous cliquez ici. Donc j'ai pensé que ça devait être éclairé. Et ils ont adoré ces petits réglages parce qu'ils prennent littéralement quelques minutes à mettre en œuvre, mais l'expérience globale dans l'utilisation du site Web augmente. Donc c'est le numéro un. Numéro deux, j'ai décidé de faire pleinement usage de ce bien immobilier. Bien que le cercle soit beau, ce n'est pas une utilisation efficace de l'espace. Au début, j'étais vraiment fier de mon site web minimaliste et ces cercles ont ajouté un peu quelque chose de différent. Je pourrais discuter pour eux toute la journée, mais la nouvelle version montre une expérience de navigation beaucoup améliorée. Vous pouvez voir plus de produits. Et avec cette augmentation de l'immobilier de l'écran, j'ai décidé d'ajouter divers graphiques. Donc, dans l'ensemble, il s'agit d'une netlist et ce sont des points de vente uniques USP. Ils disent des choses comme pas de sucre, pas de ODS bouilli, chocolat belge et ainsi de suite. Donc, un petit choix de design qui a fait une grande différence. Continuer, numéro trois, un peu controversé. J' ai changé ma police de corps. Au lieu du nouveau Nieto. J' ai opté pour le nodal appelé Zillow dalle. Le raisonnement derrière lui est simple. Les polices de caractères Serif ont tendance à mieux paraître sur les téléphones mobiles. Fondamentalement à cause de cette statistique substantielle, 85 de mes visiteurs utilisent des téléphones mobiles. J' ai décidé d'améliorer leur expérience de lecture à la police West serif. Fondamentalement, tous ces petits détails qui sont ajoutés à une police serif rendent le mot plus facile à repérer, plus distinctif. Comme vous le savez probablement, nous ne lisons pas le mot lettre par lettre. Nous le scannons et en fonction de sa forme, nous avons compris ce que c'est. Maintenant, encore une fois, ce n'est pas sûr à 100%, n' est pas une science difficile, mais il y a des raisons sérieuses de croire que les polices de serif sont plus faciles à lire. Ainsi, le changement. Numéro quatre, j'ai détruit le système de languettes de l'intérieur du produit. Voilà le scoop. Un énorme magasin de commerce électronique ici en Roumanie utilise ces onglets. Mais la façon dont ils fonctionnent est que vous cliquez dessus et vous allez faire défiler vers le bas jusqu'à une certaine section. Pour des raisons techniques, je n'ai pas pu obtenir ce défilement sur mon site Web. Donc, j'ai fini avec des onglets réguliers. problème est que j'ai continué à obtenir les mêmes questions encore et encore sur les frais d'expédition, comment le produit doit être stocké, quelle température, date d'expiration, informations nutritionnelles, et ainsi de suite sur les travaux. Ils ont tous été affichés dans des onglets séparés. Mon processus initial de pensée était de limiter la quantité d' informations afin que l'utilisateur ne soit pas submergé. Eh bien, ça n'a pas fonctionné si bien. Dans la version mise à jour cependant, je supprime la colonne de droite qui contient des informations générales sur la société. Et j'ai déplacé la table nutritionnelle ici. En outre, j'ai ajouté les commentaires sous la description générale. Donc, pour faire quelques rouleaux, vous pourriez facilement les atteindre. Numéro cinq, j'ai choisi de mettre en évidence un avis spécifique pour chaque produit. Dans la plupart des cas, les gens donnent un pouce vers le haut ou un pouce vers le bas. Ils peuvent écrire quelques mots, mais c'est à peu près. cette raison, la plupart des critiques sont insignifiantes que pas vraiment utile. Et la preuve sociale est énorme. C' est pourquoi j'ai demandé à mes développeurs d'ajouter deux champs de texte pour chaque produit. Je pourrais alors rechercher les meilleurs commentaires pour le produit et les montrer d'une manière différente. Eh bien, c'est toujours en cours. Je suis à la recherche des influences avec le poids très bien connu qui peuvent fournir le devis pour chaque produit. Numéro 7, un petit, mais encore une fois, énorme. J' ai changé la question du chat en direct avant qu'ils ne disent quelque chose comme, je suis là. Maintenant, il est dit : Vous avez une question ? Bien que cela ne semble pas beaucoup, cela a réussi à augmenter le nombre de conversations. Et plus de conversations signifient généralement plus de ventes. Et ça a changé l'appel. Mais deux secondes, au fait, le service que j'utilise s'appelle Chandra. J' ai passé beaucoup de temps à trouver le bon pour mes affaires, ne pense pas que celui-là soit assez bien. Maintenant, dans l'ensemble, ce sont quelques-unes des petites choses que j'ai faites pour améliorer mon design. Individuellement Ils ne semblent pas importants. Mais quand vous les ajoutez tous ensemble, vous obtenez une meilleure expérience d'achat. Et à la fin de la journée, c'est ce qui compte. Le plus. 75. Mise à jour de la page produit mobile: Bienvenue à une autre conférence sur la façon dont j'ai amélioré mon site Web. La version mobile de la page d'accueil était essentielle pour réduire le nombre de rebonds, c'est-à-dire les personnes qui ont vu le site et ont immédiatement quitté le site. L' étape suivante est d'avoir une excellente page produit. Ainsi, ceux qui ont manifesté les petits intérêts peuvent obtenir l'information dont ils ont besoin pour prendre une décision. Dans l'ancienne version, tout est tombé en vrac. Jetez un oeil à cet espace vide en haut. Ça n'a aucun sens. Ou cette bague invisible qui entoure la section de la galerie. L' espacement était partout et même plus que cela, certaines choses ont été mises de l'avant et du centre, même si elles n'avaient aucun sens. Par exemple, ces chapelures dans la version de bureau, bien sûr, ils vont bien, mais ici smack au milieu de la page, totalement inutile. Quant aux icônes des médias sociaux, elles ne vous envoient pas vers nos profils. Au lieu de cela, ils sont utilisés pour partager cette page avec vos amis. Encore une fois, eh bien, cela ne peut pas faire de mal dans la version de bureau. Ici. C' est dans le chemin que le titre, il est coupé. Donc tu ne sais pas vraiment ce qui vaut. Se déplacer vers le bas le sélecteur de quantité est sous-barre, Mettons-le comme ça. Et ces trois onglets, eh bien, il y a payer les États-Unis. C' est vraiment déroutant même pour moi. Maintenant, honnêtement, c'est un design de conseil. Vous n'avez pas besoin de dix ans d'expérience en UX pour comprendre que ce n'est pas idéal. La vérité, c'est que vous vous concentrez sur les grandes choses et ensuite vous faites votre chemin vers le bas. Après le lancement du site, je savais que ce n'était pas parfait. J' ai donc mis de côté une somme d'argent pour ces petites choses qui devaient être triées. Je n'ai pas été surpris par le fait qu'il y avait des problèmes. J' ai été pris au dépourvu par le nombre de problèmes que j'ai découverts. Oh. Et quand tu as ajouté le produit, vrai flic, si tu as cligné, tu ne savais pas ce qui s'est passé. La page s'actualise et c'est tout. n'y a aucune indication si ce bouton fonctionne et comment vous êtes censé procéder. Donc, dans l'ensemble, une tonne de problèmes que je ne m'attendais pas vraiment. Le nombre d'entre eux était absolument ginormal et devient la nouvelle vierge. D' abord et avant tout, j'ai occupé l'espace efficacement. La Galilée est beaucoup plus grande que quand on ne se sent pas à l'étroit. Les avis de produits sont plus petits mais encore très visibles. De plus, vous obtenez beaucoup d'informations sans avoir à faire défiler. Et dans la plupart des cas, vous voyez réellement le bouton Ajouter au panier sans avoir à faire défiler 1 bit. J' ai récemment ajouté cette balise dans le titre, et cela fait bien que les choses hors. Mais dans la plupart des situations, le bouton est visible. Lorsque vous descendez, vous êtes rencontré avec une très grande page. C' est vrai. Mais il est facile à utiliser. Eh bien, ce n'est pas parfait. Je pense toujours que c'est des kilomètres d'avance sur la version initiale. Et c'est là que la police serif brille vraiment. J' ai passé beaucoup de temps à jouer avec la hauteur de la ligne afin que les champs de texte soient aérés et faciles à lire. Je pense que j'ai fait du bon travail. Et à la fin de la journée, je suis heureux d'avoir réussi à l'accomplir. Bien que j'aurais pu le rendre un peu plus grand, je pense que la plupart des gens vont écrémer à travers et ils vont chercher des choses clés comme la date d'expiration, avis ou les informations nutritionnelles. En remontant, le contrôleur de quantité est tout en une ligne. J' ai dû réduire cette information sur la taille de la portion, mais tout coule bien. Et quand vous cliquez sur le bouton, vous obtenez quelque chose appelé un toast. Un avis rapide qui vous dit que tout va bien. J' aurais préféré un type d'avis qui concentre votre attention sur la tête de deux. Mais ce sont des pas de bébé. Dans l'ensemble, comparer ces deux conceptions est la nuit et le jour. Ils ne pouvaient pas être plus différents. La façon dont j'ai accompli toutes ces modifications était de constamment parler au codeur et de faire des sessions de partage d'écran. Je pense que c'est un sujet en soi. Alors disons ça dans la prochaine conférence. 76. Faire des sessions 1-1 avec un codeur: Bienvenue à cette conférence où je veux parler du processus d'amélioration d'un site web. Au cours de ces dernières vidéos, vous avez vu comment j'ai totalement transformé mon site web et ensuite mon entreprise. Comment cela se passe-t-il ? Eh bien, d'abord, nous devons séparer le type de travail qui est fait. Imaginez que vous vouliez rénover la maison. Il y a des trucs cosmétiques comme changer la couleur des murs, ajouter de nouveaux meubles et déplacer des choses. Et puis il y a des travaux structurels comme enlever un mur pour créer un espace ouvert. C' est la même chose avec les sites web. Par exemple, la version mobile de la page produit est beaucoup plus compacte. C' est fait via CSS. Il s'agit de peaufiner les paddings, les marges, tailles de police et diverses autres choses. Son code existant que vous ajustez là où quelques lignes que vous ajoutez. Mais dans l'ensemble, c'est purement cosmétique. Sous le même parapluie, nous pouvons ajouter la nouvelle police serif, le traitement du texte en surbrillance , l'icône Ajouter au panier, etc. D' autre part, ajouter deux lignes de texte pour chaque produit qui est structurel. Cela nécessite un type d'approche différent. Eh bien, il semble ridicule li facile d'ajouter deux champs de texte par produit. Ceci est en fait mieux fait par l'entreprise qui a construit le site Web. Le freelancer hésitait à entrer et à la changer parce que la base de données est structurée d'une certaine manière. A noter que l'ensemble du code des sites Web est écrit dans une langue universelle avec des commentaires écrits en anglais. Même ainsi, c'est comme utiliser la douche de quelqu'un d'autre. Bien sûr que vous avez une douche la maison la plus récente à mais vous l'avez choisie, vous savez comment l'utiliser dans la douche de quelqu'un d'autre, bien que les principes soient les mêmes. Vous pouvez être surpris par telle ou telle difficulté n'est pas vraiment la question ici. Il s'agit plutôt d'avoir à changer de vitesse. Idéalement, vous faites le travail structurel. L' équipe fait ses valises et s'en va. Ensuite, l'équipe cosmétique entre en jeu. C' est la situation idéale. Mais cela nécessite une bonne vue d'ensemble de l'ensemble du processus. Et il y a des chances que vous n'ayez pas l'expérience pour cela. Pas de soucis. Tant que vous êtes prêt pour l'illustration, tout ira bien. Honnêtement, c'est le meilleur conseil que je peux vous donner. De mauvaises choses arrivent tout le temps. façon dont vous réagissez est la seule chose sous votre contrôle. En revenant à la conception web, j'ai engagé l'a coulé, le freelancer indien pour m'aider avec toutes les extrémités lâches que j'ai repérées. Nous avons parlé sur Skype et il a mis en place un serveur local. C' est parfois appelé mode de mise en scène ou de bac à sable. Peu importe le nom, l'idée est de travailler sur une copie. Si quelque chose ne va pas, le site Web ne sera pas en panne pour les clients payants. À l'observateur de l'équipe ou à n'importe quel bureau. Il a constamment apporté des changements à partir de mon ordinateur. C' était un processus qui prenait beaucoup de temps. J' utiliserais l'outil d'inspection et j' écrirais moi-même du CSS pour me rapprocher de ce que je veux. Je partageais mon écran et lui montrais ce que je voulais dire par plus grande hauteur de ligne. Lorsque mes connaissances CSS étaient trop limitées, j'ai fait une capture d'écran rapide et j'ai édité l'image dans Photoshop. Brique par brique, tâche par tâche. On a travaillé jusqu'à ce qu'on ait fini. Après une trentaine de modifications, nous poussons le code sur la version live du site Web. Les grandes sociétés de codage ont supervisé la poussée. C' est même si on ne travaillait que sur des trucs cosmétiques. Pour quelque raison que ce soit, les choses s'effondrent tout le temps sans raison apparente. C' est pourquoi il est préférable d'avoir un certain type de supervision. Après mes changements étaient en vie, la société de codage a fait leur travail à spécifiquement à titre d'exemple, ils ont inséré cette revue en surbrillance. Note. Je ne leur ai pas demandé un système pour lequel je sélectionnerais un examen existant et singulet out. Notez que ce serait plus cher, plus compliqué. Au lieu de cela, j'ai demandé deux champs de texte par produit qui, s'ils étaient laissés vides, n'apparaîtraient pas. Je l'ai fait parce que je pensais que les nouveaux produits n'auraient pas d'avis et je ne voulais pas d'une section MD. J' ai appris de mes erreurs passées et je m'attends à ce que le pire. Comme note de côté, ces champs ont été insérés dans le back-end car ces pages de produit ne sont pas statiques. Autrement dit, si j'ai 20 produits, vous ne trouverez pas 20 fichiers sur le serveur. Un pour chaque produit que je voudrais entrer et y ajouter quelque chose. Plus précisément ces champs, non, place ces pages sont générées à partir du backend. On va se rapprocher du codage des choses en ce moment. Et je ne veux pas expliquer quelque chose, je ne me comprends pas complètement. Le fait est que je voulais que ça soit bien fait. L' Indien a coulé il aurait pu faire quelque chose comme une solution temporaire, mais je voulais utiliser les meilleures pratiques et avoir une base solide. D' où la raison pour laquelle j'ai dû utiliser la grande société de holding. Une fois qu'ils ont terminé leur rôle, le pigiste est à nouveau entré en jeu dans le partage d'écran. Nous avons stylé ces deux calques de texte à mon cœur. Gardez à l'esprit que l'ensemble de ce processus a pris environ quatre à cinq semaines, principalement parce que toutes les parties concernées étaient occupées. En fait, je suis le directeur général de l'entreprise, donc j'ai beaucoup de choses à faire en ce qui concerne la gestion réelle de l'entreprise, la tenue d'entretiens, l'embauche de personnes, le paiement, les procédures d' assises, le contrôle de la qualité, et ainsi de suite. La société Vicodin avait des projets d'une valeur de quatre puis de cinq chiffres. Pourquoi auraient-ils détourné un de leurs codeurs pour sauter sur mon petit projet pour le couple maigre de 100$ ? Quant au pigiste, par nature, il saute de projet en projet, mais évidemment il préfère les plus grands qui paient mieux. Bref, ce n'est pas une situation idéale pour qui que ce soit. Mais tant que vous savez ce que vous voulez et que vous préparez la liste à l'avance. Les appels via le microphone et le partage d'écran doivent être courts et doux. Au total, au cours de ces dernières semaines, je pense que nous avons passé environ 30 heures à travailler et à parler les uns avec les autres. J' espère que toutes ces informations ont été utiles et maintenant vous avez une meilleure idée de ce qui se passe dans les coulisses. Si vous avez des questions, je suis toujours sur ce cours, alors faites-le moi savoir. 77. Que faire ensuite ?: Félicitations, vous avez réussi à arriver à la fin. J' espère que ce cours était ce que vous attendiez et plus encore. L' étape suivante consiste à poursuivre votre parcours d'apprentissage et à pratiquer autant que possible. D' un autre côté, devenir un grand designer est aussi une question de chiffres. Tu ne peux pas t'attendre à travailler et maintenant ça, mais on peut être super. Vous devez mettre le temps et peu importe le projet sur lequel vous choisissez de travailler. Assurez-vous juste de continuer à travailler. Merci et je vous verrai dans le prochain cours.