Création de sites web à partir de zéro dans Adobe Xd

1. Introduction du cours: Lorsque vous concevez un site Web, il est plus important qu'il convertit que d'avoir un design tendance parce que le site Web est là pour vendre un service ou un produit, donc vous devez concevoir avec cela à l'esprit. Savoir comment structurer une page pour une conversion élevée est vraiment important car cela vous rend plus précieux pour le client et plus désirable en tant que concepteur. L' utilisation d'Adobe X'd créé vous donne des possibilités illimitées car il est basé sur le facteur de plateforme Cross gratuit , et il a des mises à jour régulières. Salut là. Mon nom est Alex, et dans ce cours, vous apprendrez les secrets du bon design. Bref. Qu' est-ce qui fait de la bonne page de destination ? Comment créer des pages de destination qui convertissent comment appliquer ces principes pour planifier, dessiner et créer un cadre métallique. J' avais des images, des icônes et des ombres pour créer le design qui annonce mouvement et transitions pour créer prototypes. Partagez le travail avec vos clients pour obtenir des commentaires et enfin, comment exporter vos ressources pour les développeurs. Ce cours s'adresse aux personnes ayant peu ou pas d'expérience dans le design de leur ux car dans discours, vous apprenez tout ce que vous devez savoir pour devenir designer UX. Ah, j'espère que vous êtes prêt à apprendre Adobe X D et le monde incroyable de notre design et je vous verrai en classe 2. Aperçu du cours: ici et bienvenue au cours. m'appelle Alex, et dans cette vidéo, je veux couvrir rapidement ce que nous allons couvrir dans ce cours. Donc, au début du cours, nous allons recevoir le logo de notre client et nous allons prendre les pieds, recevoir des informations de base, et je vais leur poser quelques questions cruciales qui vont nous aider à structurer et créer le meilleur design possible pour ce projet particulier. Donc, comment nous allons faire cela, nous allons utiliser le mémoire de conception, et vous allez obtenir ce modèle de bref de conception vide, que vous pouvez utiliser et remplir avec tous vos futurs projets. Et nous allons poser la bonne question à nos clients. Et quand nous recueillons toutes ces informations, alors nous allons les pieds, nous inspirer et créer un tableau d'humeur de base avec les images pertinentes avec les couleurs pertinentes sur ce projet. Après cela, nous allons passer à la section de charpente de fil de remorquage, et nous allons les orteils, créer des cadres de fil de base en utilisant simplement un stylo et du papier, et nous allons structurer nos cadres de fil en utilisant une page d'atterrissage techniques que j'ai expliquées en profondeur dans le discours. Donc, une fois que nous ne le faisons pas, nous allons avancer et créer fondamentalement ce que nous dessinons ici à l'intérieur d'Adobe X'd et nous allons placer ces éléments dans différents endroits, en utilisant la logique derrière le descriptif et derrière ce projet en particulier. Ensuite, nous allons passer à l'image à l'ombre de différentes icônes et de différentes choses qui vont rendre ce design pop, qui va rendre ce design attrayant pour les visiteurs potentiels et les clients potentiels hors cette affaire. Et quand nous avons fini avec cela, nous allons créer un guide de style, qui va être utile pour leurs développeurs car il y aura en mesure de voir toutes les différentes couleurs. Nous avons utilisé tous les fonds différents, différentes icônes, différents boutons, ombres et ainsi de suite, et cela va être extrêmement utile pour eux plus tard, quand ils commenceront à développer et ce site Web et faire c'est la vie. Et après toutes ces choses allaient se déplacer sur le mode de prototypage des orteils et nous allons inclure des animations différentes et des transitions différentes. Pour vraiment donner vie à ce design et expliquer au client comment tout cela va fonctionner, parce que lorsque vous envoyez le statique conçu au client, il n'est pas nécessaire qu'il comprenne votre logique et la pensée derrière cette conception . C' est vraiment un joli ajout si vous pouvez créer une sorte d'animation et si vous pouvez leur montrer parce que de cette façon ils vont être capables de comprendre votre logique et tout ce impliqué dans ce projet, et ils seront en mesure pour ensuite vous donner une rétroaction appropriée s'ils en sont satisfaits ou non, puis simplement à l'intérieur d'Adobe X'd, vous serez en mesure de changer tout cet orteil, de le mettre à jour et de le renvoyer au client pour une révision. Et ils pourront vous donner des commentaires sur ces révisions en temps réel. Alors, soyez impatient de vous voir dans le cours. J' espère vraiment que vous en tirerez une certaine valeur, et j'ai hâte de partager avec vous toutes ces informations dont je viens de parler. Alors je te verrai dans le cours. 3. Le résumé: dans cette vidéo, je vais le parcourir à travers le dossier de conception. Je vais expliquer qui est le client, ce qu'ils ont besoin de ce projet, ainsi que ce que nous allons chercher quand nous commencerons à concevoir et à planifier. Donc, sans plus tarder, commençons. Donc, sur la gauche, vous verrez le bref de conception, qui est rempli de bref de conception, qui est que j'ai interviewé. Client. Je pose toutes les questions et j'ai créé ce document de conception alors que sur la droite vous avez le modèle vide que vous pouvez utiliser pour tous vos futurs clients. Donc, si je zoome un peu plus près, vous pouvez voir ce que consiste cette note de design. Donc, tous ces éléments, vous pouvez l'ajouter. Vous pouvez double-cliquer sur le texte et vous pouvez l'ajouter Texte. Vous pouvez modifier la couleur de ces icônes. Vous pouvez modifier les espacements si vous le souhaitez. Vous pouvez supprimer des parties entières de ce modèle de bref de conception et enfin, juste ici en bas. Vous pouvez voir la chronologie et vous pouvez la supprimer si vous n'en avez pas besoin, mais laisser entrer rapidement et vous montrer notre mémoire de conception. C' est donc un hôtel de charme hédonistes. C' est donc un petit hôtel dans l'île de Mykonos, qui est en Grèce. Et le 12 octobre est la date limite pour la fin du projet. Et ici, vous pouvez voir le profil de l'entreprise. Ils sont donc une petite entreprise de Mykonos, en Grèce, et ont un petit hôtel boutique sur l'île. Ils ont six employés et cherchent à se développer pour s'occuper de la grande saison. Et ils ne le feront pas en employant quatre personnes de plus et en retournant à six lorsque la saison est terminée, ce qui signifie qu'à la haute saison, il y a vraiment beaucoup de travail à faire. C' est pour ça qu'ils ont besoin de plus de gens. Et c'est important juste pour comprendre la taille de l'entreprise afin que vous puissiez garder cela dans votre esprit lorsque vous commencez à concevoir. Leur potentiel principal est de belles vues et un beau jardin, qu'ils ont parfait pour les mariages et les petites fêtes, mais aussi de petites couvertures d'entreprise et de réunions. Ils préparent leur propre nourriture mais sous-traitent les gâteaux et l'alcool à des partenaires extérieurs, car ils ne produisent pas leur vin, ce qui est une chose en Grèce et dans la douceur, beaucoup de petits hôtels boutique ont dit cela comme l'U. S. B, qui est leur principal point de vente. Ils veulent donc que vous veniez y découvrir leur vin fait main. Mais cette entreprise ne l'a pas et elle ne produit pas son propre vin, donc elle l'externalise auprès de partenaires externes. Ils ont un petit parking, mais quand ils organisent des événements plus importants, ils louent la cour à proximité de leur voisin voisin, qui n'est qu'une herbe, et ils y stationnent les véhicules. Ils envisagent d'ajouter un autre étage au cours des prochaines années pour accroître leur capacité. Ils veulent donc agrandir l'hôtel afin qu'ils puissent accueillir encore plus de personnes et avoir encore plus de chambres à l'intérieur du projet de l'hôtel ou de vous. Alors, qu'est-ce qu'ils ont besoin de nous ? En tant que concepteur, ils ont besoin de la conception du site Web, commençant par la page d'accueil pour attirer plus de prospects et les éloigner de grande réservation Rex . sites Web orteils leur propre site Web pour collecter des paiements plus importants et garder les clients à long terme parce qu'ils sont à la recherche d'orteils, attirer des vacances répétées chaque année et construire l'avocat basé sur le client. Il reviendra année après année parce qu'ils n'ont pas les budgets nécessaires pour faire les grandes campagnes de marketing chaque année, mais ils préféreraient que les sorciers existants reviennent année après année. Ce que tout cela signifie, c'est qu'ils ont des accords de réservation. Même, comme n'importe quel autre hôtel dans le monde ne serait réserver des sites Web tels que la réservation dot com, Expedia et les autres joueurs de l'industrie. Mais le problème, c'est qu'ils vous ont aligné contre votre concurrence. Donc vraiment, il y a beaucoup plus de chances que vous manquiez certaines de ces pistes. Ils partiront à votre compétition s'ils ont de plus belles images. S' ils ont de meilleures offres. Certains de ces gars mettent à jour des offres sur une base quotidienne. Donc, si vous dirigez un petit hôtel boutique comme ces gars, il est probable que vous n'ayez pas beaucoup de temps pour mettre à jour vos offres sur tous ces sites Web . Certains sites Web le font automatiquement, mais d'autres ne le font pas. Donc, vous devez vous assurer que vous avez une personne dévouée embauchée pour le faire sur une base quotidienne et plus de sites Web que vous avez votre hôtel offert sur le plus de travail il y a pour eux, et vous devez les payer sur une base mensuelle même hors saison, parce que vous voulez attirer les gens qui réservent pour l'année prochaine et la saison suivante, toute la saison et toute l'année, d'ailleurs. C' est pourquoi ils veulent garder la base de clients existants essentiellement, et ils veulent qu'ils reviennent année après année afin qu'ils n'aient pas à dépenser de gros budgets marketing pour les promotions et le marketing sur les médias sociaux, les campagnes et les vidéos, etc. parce qu'ils ont déjà une base de clients d'avocats, qui est prêt à revenir année après année, à monter à leur hôtel et à y rester ensuite. Nous avons des buts et des objectifs. Donc ce qu'ils veulent et ce qu'ils ont besoin de cette conception. Ils veulent plus de conversion de la part de leurs clients existants. Ils ont trouvé que leur taux de rebond est trop élevé parce que les gens ne défilent pas au-delà de l'image du héros et veulent qu'il descende et explore la page. Plus objectif principal est de créer une page de destination qui gardera les visiteurs engagés et les faire défiler vers le bas pour laisser leur e-mail pour explorer un peu plus ce qu'ils ont offre orteil dans cet hôtel afin qu'ils puissent leur envoyer du matériel promotionnel et éviter les grands sites Web de réservation afin qu'ils puissent percevoir à nouveau des revenus. Nous essayons d'éviter les grands sites de réservation parce qu'ils veulent garder plus de revenus de leurs propres et d'éviter ces commissions affiliées ainsi que la concurrence d' autres hôtels. Qui est leur public cible ? Donc, les gens d'âge moyen à la recherche d'un lieu de mariage, les petites entreprises à la recherche d'une conférence Lorsque vous les personnes âgées à la recherche d'un hôtel calme pour passer leurs vacances afin que vous ne voyez pas de jeunes gens ici, vous ne voyez pas d'enfants ici. Bien sûr, les familles sont les bienvenues, mais quand elles amènent leurs propres enfants et pas seulement les envoient seuls, parce que ces gens veulent garder l'ambiance calme de l'hôtel et ils veulent clients de rester heureux et de garder le calme parce qu'il est vraiment à la charge des clients de se détendre et non Ce n'est pas une sorte de fête quand vous afin qu'ils veulent garder cette lingette dans. Comme vous pouvez le voir l'âge. Où est de 35 à 65 sexe, 40% hommes, 60% femmes. C' est parce que si vous êtes à la recherche de mariage quand vous, il y a de plus grandes chances que les femmes sont à la recherche de ces lieux parce que généralement les femmes sont ceux qui planifient les lieux de mariage et les détails de mariage. Les petites entreprises à la recherche de conférence quand vous à nouveau Ils ont une personne dédiée à la recherche de ces types hors lors de l'utilisation, et ils sont généralement des femmes parce que les femmes traitent généralement de ces types hors tâches mieux que les hommes. Tous les gens encore une fois les femmes sont là un peu plus que les hommes parce que les femmes aiment explorer un peu plus et voir et planifier à l'avance où ils veulent aller avec leur mari et avec leur pays de résidence familial. Parce que l'hôtel est assez cher Europe de l'Ouest et les États-Unis, parce qu'ils veulent cibler ces publics. Les pays anglophones sont préférés par le client, mais si rien ne fera Fondamentalement ville hors résidents. Ces villes principales au large des pays occidentaux. Si longtemps, le doublement de New York entre en jeu parce qu'ils ont vu AH, grand nombre d'Européens du Nord arrivant dans leur hôtel il y a des années et, bien sûr, les propriétaires de lieux de travail ou d'entreprises parisiennes ou les travailleurs plus vendeurs. Donc 60 enfants, 60 k par an et plus les habitudes de consommation des médias, 60% instagram, 30% YouTube et 10% Facebook. Donc, ces gens passaient la plupart de leur temps sur Instagram à regarder des vidéos YouTube, et ils sont moins sur Facebook que sur ces autres réseaux sociaux. Et enfin, nous avons des habitudes quotidiennes. Donc, ils sont occupés. Les individus vous aideront à dévoiler le mode de vie orienté. Donc une fois de plus, ils ne veulent pas que les orteils y vont partie. Ils ne veulent pas y aller pour se saouler ou prendre de la drogue ou quelque chose comme ça. Ils veulent y aller pour se détendre et orteils. Oubliez leur travail. Oubliez leur vie, pour la durée de leurs vacances. Ensuite, nous avons conçu l'exigence, donc ils ont besoin ah conception de site Web colonne de retrait. Excellent système. C' est ce dont les développeurs ont besoin pour les dimensions et les résolutions des ressources américaines. Pour commencer, nous avons besoin de 1920 pixels, blancs et réactifs. Toby a conçu plus tard, si convenu, parce que nous n'avons toujours pas d'accord avec le client sur le responsive. Ils veulent le voir. Ils veulent voir à quoi cela ressemble parce que la majorité de ces gens viennent des appareils mobiles. Ils ont donc cela à l'esprit. Mais ils veulent voir le design, quoi il ressemble d'abord sur le site Web et sur l'ordinateur de bureau et après. S' ils aiment ça, ils le veulent. Ils veulent que nous concevions un responsive pour les formats de fichiers plus tard mobiles. Nous avons Adobe X'd comme fichier de projet, et les actifs doivent également être exportés dans SPG. Un excès de vitesse G pour les images nécessite une palette de couleurs. Ils veulent que nous créons une palette de couleurs, qui va être vraiment neutre et vraiment voir et orienté hôtel si vraiment minime. Vraiment beaux et propres éléments d'image, Toby inclus. Nous allons utiliser des images gratuites jusqu'à ce que leur photographe finisse de retoucher et nous fournisse leurs images finales. Et enfin, nous avons des documents de copie associés, donc ils seront livrés une copie finale. Mais les espaces réservés doivent être inclus à la place. Donc, au lieu de grands paragraphes, qui sont de la viande personnalisée, nous allons inclure du texte ipsum chaud à la place, jusqu'à ce qu'ils aient livré la copie finale. Remorquez-nous. Et enfin, nous avons le budget et le calendrier. Le budget est donc divisé en trois parties, même que le projet lui-même. Donc 2400 pour l'exploration, la planification, la conception de la page de destination et la préparation. C' est la première partie de ce projet. 3600 pour la conception complète du site Web et la création du réactif 50% à l'avance après la livraison des actifs . Donc vous pourriez penser où est la troisième partie ? Eh bien, la troisième partie sera la conception ou pour les pages de médias sociaux, la conception pour les appareils mobiles, si possible, et si nécessaire. Et vous allez fournir des vidéos plus tard parce que nous allons faire du montage vidéo de base pour eux. Et, bien sûr, cela n'est pas inclus dans ce cours. Mais je veux le mentionner de toute façon, parce que c'est la partie de ce projet après tout. Donc, ici, nous l'avons décomposé. Donc, pour la première partie du projet, donc l'explosion, la planification, la conception de la page de destination et la préparation hors cours comprennent la préparation pour d'autres pages. Parce que nous allons créer un guide de style, nous allons créer une couleur. Nous allons créer des fonds et des combinaisons de fonds. Donc, un de sorte que ce que la préparation est la préparation pour d'autres pages qui vont être conçus dans une deuxième étape de ce projet. Donc la planification est de cinq jours. Très recherches trois jours. La recherche d'audience est trois jours de conception, quatre jours de présentation, deux jours de révision, cinq jours et la livraison. Donc la durée totale de ce projet pour la première partie est de 22 jours. Donc ce que je veux dire par là, c'est de planifier donc nous allons faire un peu de planification de base. Nous allons donc nous présenter au marché hôtelier. Nous allons nous présenter à l'endroit. Alors, où est la douceur ? Pour quoi est-il célèbre ? Nous voulons connaître la culture locale. Nous voulons connaître les propriétaires eux-mêmes, la société. C' est donc notre recherche sur la planification. Nous allons donc faire des recherches sur le concours. Nous voulons savoir qui ils sont. Nous voulons savoir ce qu'ils utilisent leurs propositions de vente uniques. Donc nous, la paix. Nous voulons connaître leur emplacement. Donc, nous voulons connaître l'emplacement de toute l'île, ce que les gens peuvent faire là-bas. Et nous voulons connaître l'emplacement des concurrents aussi, parce que nous voulons voir à quelle distance ils sont de notre hôtel et de notre client, et nous voulons voir ce qu'ils offrent. Alors peut-être que nous pouvons suggérer quelque chose au client afin qu'il puisse inclure cela dans son offre également. Ensuite, nous avons des recherches d'audience, et vous pouvez le faire de différentes manières. Par exemple, vous pouvez contacter différentes petites entreprises et leur demander si vous souhaitez venir ici. Si vous voulez venir ici, qu'aimeriez-vous voir ? Qu' est-ce que tu voudrais faire ? Quel genre d'offre auriez-vous pour que nous puissions ? Non, ce que ces gens veulent de l'offre. Ce que ces gens veulent de l'hôtel lui-même. Quel genre de repas ont-ils ? Alors ont-ils Donc, par exemple, des repas plus petits. Ils ont des repas plus gros ? Ils mangent tous ensemble ? Aiment-ils le style buffet ? Ou aient-ils voir un serveur ? Il est là tout le temps. Donc, ce genre de choses. Si vous connaissez quelqu'un qui se marie, vous pouvez leur demander parce que c'est le public cible pour cet hôtel est bien et vous pouvez leur demander . Que souhaitez-vous de cet endroit ? Que voulez-vous pour votre mariage et faire la recherche d'audience dans ce que nous avons spécifié ici. Donc, si vous pouvez trouver l'une de ces personnes et les contacter, alors vous pouvez faire votre recherche d'audience correctement. Et vous pouvez également savoir quel genre de couleurs de ces gens aiment Quel genre hors styles de conception Pouvez-vous incorporer ainsi de suite ? Parce que tout est bien et bien si tu l'es. Si votre dernier projet, par exemple, incluait des INT Grady et quelques belles illustrations, des textures modernes et quelque chose comme ça, c'est tout. On est vraiment gentils. Mais peut-être que ces gens ne s'intéressent pas à ce genre de style et à ce genre de design. Vous devez donc garder cela en considération, et vous devez concevoir pour ce public particulier. Donc, ils se sentent à la maison et ils ont le taux de bombes plus petit que les personnes précédentes qui ont visité ce site, parce que c'est notre objectif principal. Ensuite, nous avons du design, donc nous allons concevoir tout cela dans quatre jours. Donc, en gros, on va le dessiner sur papier. Nous allons créer des cadres métalliques et contacter le client, lui poser quelques questions supplémentaires sur le chemin et enfin créer un design que vous allez envoyer au client en utilisant notre présentation. Nous allons donc les présenter et nous avons passé deux jours sur les révisions de présentation. Ils vont prendre environ cinq jours. Parfois, cela peut être un jour, donc fondamentalement juste une religion ou aucune religion du tout, et parfois cela peut être plus long, alors gardez cela en considération. Si vous avez un délai serré pour votre projet. Et enfin, nous avons la livraison. Donc, fondamentalement, prend 1 à 2 jours si le projet est plus grand. Mais parce que celui-ci est plus petit, il ne peut prendre que 30 minutes ou une heure pour tout exporter et se préparer et envoyé à vos clients et à leurs développeurs. Donc, en gros, c'est notre mémoire de conception. Cette vidéo a duré un peu plus longtemps, mais je veux partager avec vous tout ce dont nous avons parlé avec le client. Vous pouvez donc savoir quelles questions poser à vos clients afin de mieux comprendre ce dont ils ont besoin, ce qu'ils veulent, ce qu'ils ne savaient pas qu'ils ont besoin ou ce qu'ils veulent. Et vous pouvez leur suggérer tout ça. Et votre objectif pour cela est de fournir la plus haute qualité possible hors de l'orteil design, rendre votre client heureux et de les faire revenir. Ainsi, par exemple, dans notre cas, s'ils veulent créer une application mobile ou créer des affiches ou n'importe quelle affiche, vous pouvez garder le bonheur, et vous pouvez avoir le retour client de retour vers vous pour le prochain projet qu'ils pourraient avoir et vous pouvez également apprendre et comprendre leur public cible et ce que vous pouvez faire pour leur apporter le plus de valeur et de les garder sur cette page le plus longtemps dans les prochains vidéos allaient orteil combattre leur analyse et de voir essentiellement ce que les concurrents hors de cet hôtel ont orteil offrent sur leurs sites Web afin que nous puissions mieux comprendre. Ainsi, par exemple, palettes de couleurs, ils utilisent des images à l'aide des titres. Ils utilisent des colliers inférieurs, placements et ainsi de suite pour que nous puissions nous familiariser nous-mêmes, car avant d'entrer dans le processus de conception de ce projet particulier, alors je vous verrai là-bas. 4. Analisys 1: dans ces vidéos. Nous voulons parler de la compétition pour notre hôtel. Donc 1er 1 est carbone AKI Hôtel en Afghanistan. Aziz, vous pouvez voir cette barre d'arrêt pour la navigation juste ici. À mon avis, il devrait avoir plus d'espace. Il devrait avoir plus de clarté parce que sur cette image bleu foncé, par exemple, vous pouvez voir qu'ils ont livre maintenant. Bouton. Il est bleu sur bleu, et il n'est pas facilement irritable. Ici aussi, les textes sur Lee disent dans le coeur de faire cette ville. Mais qu'est-ce qui est dans le cœur de la douceur vers le bas ? Que pouvons-nous faire dans cet hôtel ? Donc toutes ces informations devraient être affichées ici en haut, parce que si vous n'aimez pas ces informations, vous allez juste rebondir et quitter ce site Web et augmenter le taux de rebond. Et c'est ce que nous voulons éliminer pour notre site Web. En outre, ils ont juste à des images et ces flèches sont gentils avec une sorte de forme bizarre, et vous ne sauriez pas s'il y a des flèches si vous n'avez pas cliqué dessus. De plus, le blanc sur blanc ne fonctionne pas si bien, donc toutes ces choses doivent être considérées. En outre, ils ont une liste déroulante juste ici sur l'hébergement. Et comme vous pouvez le voir sur le vol stationnaire, il change de couleur en bleu. Donc, une fois de plus, nous avons le bleu sur le bleu. Ce n'est pas facile à lire. Ils ont ce menu de langue juste ici. Mais ils ont juste l'anglais en Grèce. Nous pourrions vouloir une position des orteils un peu meilleure dans le design artistique. Donc, en passant, ils ont la réservation en ligne juste ici, ce qui est agréable, mais à mon avis, il devrait combiner un peu plus d'informations ici. Donc, vous avez juste des chambres et il aussi des chambres. D' accord. Je veux une chambre. Mais lequel ? Vous n'avez aucune de ces informations. S' il fait froid, vous pouvez voir toutes ces différentes pièces. Mais quelle pièce ? A. Ma réservation. Juste ici. Donc, à mon avis, ils devraient mettre ça ici. Aussi des adultes. 1234 Mais si je veux amener mes enfants ne peuvent pas amener mes enfants dans cet hôtel. Et aussi, ce livre maintenant ne ressemble pas vraiment à ce livre maintenant ainsi que ce livre maintenant. Vous pouvez donc envisager la hiérarchie et utiliser les mêmes boutons à certains endroits et différents boutons à d'autres endroits. Donc, en continuant vers le bas, nous avons sur nous, qui est sans image et pourquoi nous choisir ? Donc, je les mettrais dans leurs différentes sections séparées parce que c'est vraiment tout groupé. Si je fais défiler juste un peu vers le bas dans cette zone, vous avez beaucoup de texte hors texte. En outre, ce texte est beaucoup plus petit que ce texte. Les espacements sont un peu désactivés donc vous pouvez voir cette base juste ici. C' est juste ici et ceux-ci sont un peu différents. Donc, vraiment, nous devrions changer tout ce que nous voyons ici pour notre site Web et améliorer l'espacement et l'utilisation des espaces blancs afin que les visiteurs et les clients potentiels puissent lire et numériser un peu mieux qu'ici. En ce qui concerne l'organisation hors des pages de destination pour les éléments de la page de destination, nous allons en parler dans la section suivante intitulée Page de destination Another me, où nous allons entrer en détail sur ce que vous devez inclure à l'intérieur de votre pages d'atterrissage, peu importe ce que vous nichez dans. Mais dans cette section et dans les prochaines vidéos, nous voulons juste parler des principaux concurrents de notre hôtel. Ce qu'ils font et quelles erreurs devrions-nous éviter lorsque nous commençons à concevoir notre site Web. Donc, en déplaçant un peu vers le bas, vous pouvez voir une chambre juste ici. Mais une fois de plus, nous voulons en savoir plus sur ces chambres et nous n'avons pas d'images hors des chambres. Donc, par exemple, vous avez des fleurs juste ici. Mais pourquoi ? Pourquoi peux-tu me montrer à quoi ressemble la pièce ici ? En outre, nous avons une salle économique. Qu' est-ce qu'une salle économique ? Peut-être sur le vol stationnaire au lieu de cette image. Zoom. Nous pouvons avoir un peu plus d'informations sur la pièce elle-même afin que nous puissions savoir quelle est la salle économique, parce que vous pourriez savoir ce que c'est. Mais moi, en tant que visiteur, fais certainement pas. Et je ne veux pas perdre mon temps simplement à cliquer dans toutes ces pièces. Nous devrions avoir des informations de base pour chacune de ces pièces juste ici sur la page d'accueil afin que nous puissions savoir si nous voulons cette chambre ou non. Donc, comme vous pouvez le voir, ils ont sept chambres différentes juste ici. Donc, si vous voulez investir votre temps pour en savoir plus sur chacune de ces salles, vous devez aller à sept pages différentes au lieu d'apprendre juste la majorité des informations ici à partir de la page d'accueil. Alors peut-être à la place, hors de ce bel effet de zoom image. Peut-être que si vous avez des textes ici, ci-dessous et par exemple, gammes de prix. Donc, cette chambre va de ce prix à ce prix, elle peut accueillir autant de personnes. Il a autant de lits, n'a pas de salle de bain, ne partage pas une salle de bain avec une autre chambre. Est-il facilement accessible ? Fauteuil roulant orteil, par exemple. Il n'y a pas d'aire de jeux ou quelque chose comme ça. Donc toutes ces informations, à mon avis, devraient être juste ici sur la page d'accueil avant que vous puissiez cliquer, puis aller explorer parce que je n'ai pas beaucoup de temps. Et comme vous pouvez le voir, il y a beaucoup de hors-compétition sur l'offre. Donc, si je n'aime pas ce que je vois une fois de plus, je vais partir et augmenter le taux de rebond que nous voulons orteil un plus bas pour notre client . Maintenant, vous pouvez voir ici, ils ont vivre Ah, maison loin de l'expérience à la maison, ce qui est génial. Mais qu'est-ce que cela a à voir avec toutes ces images ? il ne raconte aucune histoire que nous avons besoin de connaître. Il ne nous donne plus de détails sur cet hôtel et ces chambres. Pourquoi as-tu mis ça ici ? Ça ne sert à rien d'autre que peut-être une source d'inspiration. Mais si vous choisissez de l'inspirer, pourquoi ne pas mettre l'image de votre hôtel derrière lui pour que nous puissions nous inspirer avec votre hôtel ? Parce que nous sommes là pour réserver votre hôtel. Si je veux lire quelques citations, je vais aller sur Instagram ou Pinterest et chercher de l'inspiration. Il y a des citations. Je suis ici pour réserver un hôtel, alors donne-moi les images de l'hôtel. Ensuite, nous avons quelques critiques et commentaires sont belles choses à avoir. Mais peut-être que vous pouvez inclure quelques images ici pour nous incorporer une fois de plus dans votre hôtel afin que nous puissions voir hôtel plus haut. On dirait de ne pas simplement mettre quelques mots aléatoires et vous pouvez voir un logo Trip Advisor juste ici . Mais si vous ne connaissez pas Trip Advisor, vous vous demanderez ce que c'est. Alors peut-être mettre une image juste ici en arrière-plan, ou mettre l'image d'un côté puis un commentaire de l'autre côté pour que nous puissions savoir que c'est pour votre hôtel. Ensuite, nous avons une carte et ce qui est bon. Mais encore une fois, il n'a pas de formulaire de contact. Il a juste les coordonnées et l'emplacement. Et si je clique sur l'emplacement, il me montrera l'emplacement juste ici. Mais pourquoi ? Encore une fois, pourquoi ? Pourquoi l'as-tu mis là ? Donc ensuite, nous avons souscrire et ce qui est bon, mais ce n'est pas vraiment important. Et vous pourriez vouloir inclure ah, en bas juste ici pour inciter les gens à s'abonner à votre newsletter. Et enfin, nous avons une photo juste ici, qui est juste un pied de page de base sans plus d'informations. Donc, par exemple, si je veux vous contacter si cela me manque, alors mais qu'est-ce que c'est ? Juste ici ? Tout ce que vous avez, c'est des coordonnées et des coordonnées cartographiques. Et si vous ne savez pas ce qu'ils sont, quoi ils servent, vous pourriez simplement sauter cette partie complètement. Maintenant, c'est que vous pouvez voir ho conçu, et c'est vraiment agréable qu'ils se promènent eux-mêmes. Mais ça n'apporte pas de bien à cet hôtel. Enfin, nous nous sommes tombés ici au fond qui est aussi beau orteil ont, mais pas de cette façon. Et vous pouvez penser à supprimer certaines informations de Heather et à les mettre dans la photo, en particulier les informations qui ne sont pas vraiment importantes pour le Toby d'en-tête à l'intérieur de la navigation. Donc c'est tout pour le premier hôtel. Dans la vidéo suivante, on va analyser le deuxième hôtel. Alors nous voulons tourner. Et quand nous l'avons fait, nous allons passer à la section anatomie de la page de destination du cours. Et je vais vous expliquer quels éléments devriez-vous inclure à l'intérieur de vos pages de destination. Comment devriez-vous structurer votre copie et ainsi de suite ? Je te vois dans la prochaine vidéo. 5. Analisys 2: Ensuite, nous avons un hôtel, Nicholas, qui est essentiellement utilisé. La mise en page similaire est le site précédent, mais ils n'ont pas du tout de texte ici. Donc, si vous atterrissez pour la première fois sur ce site, vous pourriez vouloir vous demander ce que c'est. C' est donc leur troisième diapositive où ils écrivent Ah hôtel suivi le soleil dans la douceur si grande. Mais nous avons atterri sur cette diapositive, qui est complètement vide et nous ne savons pas ce que c'est. Donc, si on ne légère pas, on ne sait pas ce qu'on cherche. En outre, ils ont caché cette navigation juste ici à l'intérieur du menu Décembre. Et cette couleur jaune se distingue vraiment comme un très fort et attaque vos sens fondamentalement. Donc je n'aime pas vraiment ça. Ils devraient utiliser quelque chose d'un peu plus sombre. Peut-être mettre un peu de superposition sur l'image afin que vous ne deviez pas aveugle chaque fois que vous visitez l' e-mail. Désolé, le menu. Je vais le fermer. Et comme vous pouvez le voir, ils utilisent cette couleur tout au long de leur site Web. Cette information ici est bonne parce qu'ils l'ont mise en haut. Mais je pense qu'ils devraient organiser un peu différent et un peu mieux et ne pas avoir tout cet espace vide et utiliser juste pour le livre. Maintenant bouton suivant, Nous déplaçons vers le bas et vous pouvez voir qu'ils ont belle prise hôtel design à l'île Meekness , Grèce, Grèce, ce qui est génial. Mais l'organisation de ces sections n'est pas vraiment si bien. Alors encore une fois, ce que vous m'offrez en tant que visiteur, m' offrez-vous des chambres exclusives ? Vous m'offrez une expérience de vin et de dîner pour ne m'offrir qu'une chambre ? Ou avez-vous votre propre restaurant ? C' est un café que je peux voir ici ? Ou s'agit-il d'un restaurant dédié aux visiteurs de l'hôtel ? C' est la piscine intérieure ou extérieure ? Que pouvez-vous m'expliquer en un coup d'œil pour que je puisse prendre ma décision, favoriser et prendre ma décision mieux pour moi ? En outre, ces boutons de lecture plus ne sont tout simplement pas lisibles. Et vous pouvez voir que ce texte est vraiment assez petit et pas si lisible. n'y a pas de gros titres, donc je ne sais pas ce que je respire et si ça fait défiler vers le bas, tout ce que vous pouvez voir ce sont ces images et vous pourriez ignorer ce message important qu'ils pourraient avoir pour vous de lire. Donc tu ne sais pas ? C' est la pièce principale ? C' est la deuxième pièce ? Ok, vous avez un logement et des bonbons. Mais si je le change ici, vous avez des chambres et des bonbons. D' accord, mais ces images ressemblent vraiment. Peut-être devriez-vous consacrer toute la section de votre page de destination. Deux chambres et deux suites et orteil. Expliquez-moi leurs différences. Peut-être pour mettre des prix pour que je sache. Quelle est la différence entre les chambres et les suites ? Puis-je y amener mes enfants ? Y a-t-il une entrée accessible aux fauteuils roulants ou non ? Ai-je reçu mon propre parking ? Aucune de ces informations n'est là. Et toutes ces informations sont très importantes lorsque vous prenez votre décision parce que vous allez passer vos vacances dans cette chambre. Donc 10, 14 jours, 7 jours, ça n'a pas d'importance. Même si c'est juste un jour que vous allez dépenser votre argent et votre temps à vivre dans cet espace essentiellement et que vous ne savez pas ce que c'est, vous avez vous remorquer aussi. Il est ensuite aller dans chaque page de la pièce et explorer un peu plus loin là-bas. Donc c'est juste une perte de temps. Je veux savoir tout ce que je peux tout ce dont j'ai besoin sur cette première page. Donc, sur cette page de destination, avant que je consacre mon temps et plus tard sur mon argent orteil cet hôtel. Ensuite, si vous faites défiler vers le bas, nous avons un livre d'or. Et encore une fois, j'ai vraiment ennuyé par cette couleur jaune et vous pouvez voir toutes ces diapositives de la même façon. Donc, cette image diapositive la même que celle-ci. Témoignages ici. Donc, il peut être vraiment ennuyeux orteil. Comprendre lequel est ce qui se déplace. Ça bouge. Donc, vous ne pouvez pas consacrer votre attention à une section particulière de cette page de destination à la fois parce que vous voudrez peut-être lire ceci, mais cela continue de bouger. Donc votre vue se déplace d'ici à ici, puis d'ici à ici. Et vous ne pouvez pas vraiment vous concentrer sur une section particulière de ce site. Et tout continue de bouger. Et vous ne pouvez pas le lire correctement parce que je suis sur mon ordinateur. Si je mets ma souris ici, ça devrait cesser de bouger. Mais comme vous pouvez le voir, voici mon curseur de souris et il continue à bouger continue à bouger, et je ne peux tout simplement pas lire tout ce que je pourrais vouloir lire ceci. C' est un peu plus long, mais ça m'a fui et je n'ai pas réussi à le lire. Donc je suis maintenant un peu ennuyeux. Je vais faire défiler vers le bas et vous pouvez voir dans cette section qu'ils ont des installations et goûter la Méditerranée. Alors, ce qui est agréable, mais des installations pour quoi ? Alors, c'est un restaurant ? Ok, c' est dit petit déjeuner près de la piscine. Donc, ne devriez-vous pas juste restaurant juste ici au lieu des installations. Et peut-être que vous pouvez mettre des plats ici, votre cuisine locale à l'intérieur. Ensuite, vous avez une piscine. Mais quel genre de piscine ? On voit juste un gars ici s'amuser ? Mais je ne vois pas de piscine ici. Peut-être que je veux voir d'autres images en un coup d'œil juste ici. Je ne veux pas aller à la paye dédiée juste pour voir à quoi ressemble le simple. Je veux le voir ici sur la page d'accueil avant de prendre ma décision. Donc, cela en lire plus ? C' est vraiment redondant, à mon avis. Alors, ici, ça dit des cocktails brillants. Mais pourquoi ? Je peux prendre des cocktails au restaurant, non ? Pourquoi avez-vous une légère dédiée pour cela. Ça n'a vraiment aucun sens pour moi. Et ensuite, nous avons des goûts de la Méditerranée. Vous avez donc trois toboggans pour la nourriture et la boisson, et une toboggan pour la piscine. Pourquoi pouvez-vous séparer ça en deux sections ? Donc, par exemple, nous avons un restaurant et puis vous pouvez expliquer ces trois choses à l'intérieur là-bas et ensuite avoir une section dédiée pour la piscine. Si c'est votre principal point de vente de cet hôtel donc vraiment n'a aucun sens pour moi. Mais c'est ce que nous allons explorer ces vidéos. C' est ce que nous essayons de réaliser est de comprendre comment les concurrents font leurs sites Web, à notre avis, ce qu'ils font mal et ce que nous pouvons essayer d'améliorer sur notre site Web pour notre hôtel et pour augmenter les conversions et réduire le taux de rebond parce que nous avons évité ces erreurs. Nous voulons donc guider nos visiteurs à travers toute l'expérience à travers toute la page de destination jusqu'à ce qu'ils prennent leur décision avant qu'ils ne quittent notre page de destination. Ensuite, on a des nouvelles, donc on a des nouvelles ici. À mon avis, cette section n'a pas vraiment sa place sur la page d'accueil de l'hôtel. Mais vraiment, c'est à eux des activités. Pourquoi les activités se déroulent ici ? Si je viens à Mykonos, je veux savoir ce que je peux faire sur la douceur. Je ne veux pas faire défiler tout le chemin vers le bas sur cette page juste pour voir ce que je peux faire là-bas. C' est vraiment gentil et bien de me montrer votre restaurant dans votre sondage. Mais si je viens là-bas, que puis-je faire ? C' est pourquoi les activités sont tout le long ici ? Pourquoi ils ne sont pas au sommet. Il est vraiment au-delà de moi et aussi des activités A. Donc, vous pouvez voir cette section a ce paragraphe, qui n'est pas vraiment facile à lire, et le texte est beaucoup trop petit. Il est blanc sur blanc sur une sorte de fond crème. C' est vraiment ne lit pas très bien. Ces images n'expliquent pas grand-chose. À mon avis, cela devrait être un peu plus de vie en eux. Mais c'est au photographe qui les a emmenés et à ces gens qui ont lu l' hôtel. Plus de boutons ne sont pas vraiment facilement lisibles à travers toute la page de destination et un vote à elle. Un peu différemment. Inscrivez-vous à la newsletter. Comme vous pouvez le voir, c'est vraiment bizarre. Le texte est bien sur la gauche. Cette boîte est juste ici au milieu. Et ces icônes de médias sociaux sont ici. Pourquoi ils sont là. On a juste besoin de s'inscrire à la newsletter. Il devrait être propre, simple d'attirer l'attention. Pourquoi les icônes des médias sociaux sont ici ? Ils ne devraient pas être là parce que nous les avons ici. Et parce qu'il s'agit d'une navigation défilante. Si je fais défiler ici, vous pouvez voir qu'on les a ici et ici. Alors pourquoi ? Pourquoi gaspiller cet espace quand vous pouvez utiliser cet espace. Ah, beaucoup mieux d'inclure les informations qui comptent vraiment sur ce site. Ensuite, nous avons quelques belles images ici. Mais une fois de plus, ils ne nous racontent aucune histoire. On peut voir un type près de la piscine et ces gens couchés sur le soleil. Mais où sont ceux-là ? C' est à l'intérieur de l'hôtel ? Est-ce à l'extérieur des locaux de l'hôtel ? Où est ça ? C' est près de la piscine ? Parce que ça ne lui ressemble pas. C' est la plage ? Alors donnez-nous un peu de contexte. Expliquez-nous parce que nous sommes là pour la première fois. Nous ne connaissons pas votre hôtel. Nous ne savons pas si nous voulons rester dans votre hôtel pour nos vacances. Alors essayez de nous persuader plus avec plus d'informations, ce qui est pertinent. Remorquez-nous. Et enfin, nous avons un pied de page, qui est meilleur que sur ce premier exemple que je vous ai montré. Mais toujours pas si génial, parce qu'ils manquent quelques informations principales ici. , Par exemple, je souhaiterais peut-être vous envoyer rapidement un e-mail. Comment puis-je faire ça ? Y a-t-il des e-mails sur lesquels je peux cliquer ? Oui, c'est juste là. Mais si je n'ai pas mes clients mis en place la majorité des gens qui ne le font pas, ils ne savent pas comment s'installer. Vous ne pouvez pas envoyer ces personnes par e-mail. Peut-être que tu veux un orteil. Envoyez-leur une question sur Ok. J' aime cette pièce, par exemple, et j'aime ces activités, alors vous voudrez peut-être leur demander. Combien coûte une équitation dans Mykonos ? Si je reste 10 jours dans ta chambre, comment peux-tu faire ça ? Vous devez les appeler par téléphone et vous devez les envoyer ici. Mais vous devez sélectionner cet e-mail. Copiez c'est, vous pouvez voir qu'il sélectionne la chose entière. Ce n'est vraiment pas si utile pour vos visiteurs potentiels. Vous devez donc avoir votre page de destination mieux structurée afin qu'ils puissent avoir les informations dont ils ont le plus besoin en un coup d'œil sans quitter votre page de destination sans passer par plusieurs pages juste pour qu'ils puissent obtenir ce l'information dont ils ont besoin. Alors c'est tout. Pour ce deuxième exemple, dans la vidéo suivante et finale, je vais vous montrer l'exemple de tortue, qui est beaucoup mieux que ces deux-là mais manque encore beaucoup d'informations, ce qui, à mon avis, devrait être inclus en premier lieu, donc je vais vous y voir. 6. Analisys 3: en vidéo perturbée et finale. Nous allons orteil Analyser Porto Mykonos Hôtel et vous pouvez voir qu'ils ont fait un peu différemment et un peu mieux que ces autres sites d'hôtel que je vous ai montré. Mais il y a encore beaucoup de choses qui ne vont pas avec ce site à mon avis et certaines choses que nous allons éviter lorsque nous commencerons à concevoir et à planifier notre site Web. Donc, juste ici en haut, à l'intérieur de la navigation. Comme vous pouvez le voir, tout est un peu encombré. J' aime comment ils font cela parce que quelle que soit l'image qu'ils incluent ici, cette navigation va travailler orteils. Mais il a encore beaucoup dans pour beaucoup d'informations qui ne sont pas nécessaires à mon avis. Donc, vous avez une galerie juste ici. Pourquoi le restaurant et le bar ? Pourquoi les installations Ok ? Mais pourquoi ? Comme ce livre bouton en ligne n'est pas vraiment proéminent dans les stands juste ici. Aussi, pourquoi avez-vous votre logo comme ici ? Parce qu'il mange juste autant d'informations du reste du site Web. Pourquoi ne pas simplement le mettre à l'intérieur de la navigation pour que vous puissiez libérer cet espace. Ils ont des textos, non ? ici dans l'image du héros. Mais comme vous pouvez le voir, ce n'est vraiment pas facile à lire. Et ça ne nous dit pas grand-chose. Alors peut-être qu'on veut savoir des informations sur Puis-je y amener mes enfants ? Vous avez un parking ? Quel est ce genre d'hôtel ? Donc, par exemple, si j'y vais avec ma famille, que je me mêlerai à des gens d'affaires ou à d'autres familles, ou serai-je là avec ma famille ? Alors apportez-moi toutes les informations dont je pourrais avoir besoin ici sur la page d'accueil et à l'intérieur de l' image du héros. Et à l'intérieur de cette première diapositive, si vous avez un curseur ou peut-être inclure une vidéo juste ici montrant votre hôtel me montrant qui y séjourne et toutes ces informations. Comme vous pouvez le voir, aucun de ces trois sites Web ne le fait. Ils n'ont pas de vidéos ici en haut. Ils ont juste ces images statiques. Nous ne racontons pas d'histoire et ne nous donnons pas de détails importants dont nous pourrions avoir besoin. Donc, comme vous pouvez le voir, il m'écrit juste pauvre. Fermez l'idéal. Mon Mick. Honnête hôtel de ville. Super. Mais qu'en est-il de ces deux-là ? Je viens d'en trouver trois sur cet hôtel idéal Coniston. Pourquoi votre vôtre est-il meilleur que ces deux-là ? Donne-moi juste quelques informations. Montre-moi. Persuadez-moi de réserver en ligne ici sur votre site web. Si vous faites défiler vers le bas, j'aime cela parce qu'ils donnent juste à l'utilisateur quelques informations supplémentaires. Mais c'est vraiment dire défiler vers le bas juste ici au lieu de juste mettre l'icône. J' aime mieux l'icône parce qu'elle est plus propre. Mais une recherche a montré que lorsque vous mettez le défilement vers le bas, les gens savent vraiment ce qu'ils doivent faire. Si vous êtes designer, vous saurez instantanément ce que vous devez faire. Mais la majorité des gens ne le font pas. Peut-être que certains cliqueront sur cette flèche ici. Et si vous n'avez pas de lien inclus à l'intérieur comme ils le font, les gens cliquent ici et partent parce qu'ils ne savent pas quoi faire. Mais heureusement, ils ont inclus. Donc, si je clique sur le lien cybernétique juste ici, cela me conduira à l'écran suivant. Comme vous pouvez le voir ici, ils ont un peu d'introduction pour eux-mêmes. Mais pourquoi mettre cette petite image quand vous avez ces belles grandes images juste ici ? Pourquoi le mettre ici ? Pourquoi n'as-tu pas inclus de vidéo ? Il suffit de payer quelqu'un pour créer une belle vidéo. Mettez-le ici. Fais une belle, grande, lettres audacieuses et belle et grande rubrique audacieuse m'expliquant ce que tu es, qui tu es. Es-tu pour moi ou pas ? Et peut-être inclut un appel à l'action différent et pas celui-ci. Parce que, comme vous pouvez le voir, cette taxe ne lit pas si bien contre cette couleur, peut-être que vous devriez envisager d'inclure cette couleur peut-être quelques nuances plus sombres de cette couleur pour le texte, peut-être même quelques des textes plus sombres. Par exemple, cette couleur juste pour que votre bouton contraint un peu plus agréable ou si ce livre en ligne blanc sur la couleur de l'acier ne supporte pas tout ce que bien. Mais encore une fois, je vais mettre une autre section ici pour expliquer un peu mieux qui nous sommes, ce que nous faisons et quelle valeur pouvons-nous vous apporter en tant que visiteur ? Ensuite, ils ont un futur logement. Donc, comme vous pouvez le voir encore une fois, ils ne nous donnent aucune information sur les chambres. Vous devez cliquer sur l'image que vous devez aller à l'intérieur du bout de la page, en savoir plus sur chaque chambre. Mais ils ne vous donnent aucune information ici sur la page d'accueil sur les chambres qu' ils ont à offrir, ce qui, je pense, est une occasion perdue pour tous ces sites. Et nous allons changer cela lorsque nous avons commencé à concevoir notre site Web plus tard. Et comme vous pouvez le voir, ils n'ont que ces deux chambres. Donc ils ont cette flèche juste ici qui ne fait rien, c'est que vous pouvez voir que je clique dessus ne fait rien. Peut-être que nous pouvons cliquer dessus, mais cela nous prend en haut. Ça crée de la frustration. Comme vous pouvez le voir, il y a une autre pièce. Mais si je n'ai pas vu cette flèche comme vous pouvez voir un clic dessus. Mais rien ne se passe. Alors pourquoi il est là ? Pourquoi ? Pourquoi ne pas créer. Si vous avez quatre chambres, pourquoi n'aimez-vous pas ce premier site ? Mais un peu différemment, bien sûr, et créer pour une image différente. Pourquoi utilisez-vous cette mise en page sans le saroso ? Si quelqu'un regarde cela depuis son appareil mobile, il pourrait ne pas être en mesure de le lire et de le voir. Et ils pensent peut-être que vous n'avez que deux chambres à l'intérieur de votre hôtel, alors vous déplacez sur les points forts de l'hôtel . Pourquoi c'est là ? Pourquoi ce n'est pas juste ici au sommet ? Pourquoi ? J' ai dû faire défiler vers le bas juste pour voir ces faits saillants aussi, Qu'est-ce que c'est ? Ciara ? Qu' est-ce que c'est ? En savoir plus sur quoi ? Magnifique vue Grande accessible aux personnes à mobilité réduite. Pourquoi tout ça n'est pas au sommet ? famille ? Pas d'aboyer amical sait pourquoi ? Pourquoi n'avez-vous pas cette information incroyablement importante ici ? Que se passe-t-il si je suis arrivé en bus et que je vais au centre-ville ? Comment puis-je me rendre à votre hôtel ? Et si j'y arrive en voiture ? Puis-je laisser ma voiture n'importe où ? Dois-je payer pour un parking extérieur ? Avez-vous votre propre parking ? Donc, toutes ces informations devraient être incluses sur la page d'accueil afin que les gens puissent le savoir instantanément. Ok, c'est pour moi ou ce n'est pas pour moi. Je vais partir sans perdre mon temps sur ce site. Mais comme vous pouvez le voir, aucune de ces informations ne se trouve dans l'un de ces sites Web. Et enfin, si je fais défiler tout le chemin vers le bas, vous pouvez voir les Juifs pour deux galeries, donc je ne peux pas les revoir d'ici. Je dois aller à l'intérieur des pages dédiées à ces galeries. Donc, une fois ne peut pas manquer l'occasion. Et cette flèche ici, ce qu'elle fait si je clique dessus, ça m'amène au sommet. Super. Mais si je clique sur cette flèche, ça m'amène au sommet. Donc ça fait la même chose. Pourquoi cette flèche est là ? Donc, par exemple, imaginez que quelqu'un veut cliquer ici. Mais par hasard, ils cliquent sur cette zone juste ici, donc crée juste de la frustration. Pourquoi il est là ? Pourquoi inclure tous ces éléments sans importance à l'intérieur de votre page ? Et c'est ce que nous allons analyser et parler dans la prochaine section du cours. Citation page de destination, pas me dire où je vais. Toe marche à travers l'ensemble du processus de la page de destination sur lequel sont les éléments importants éléments pour éviter quels éléments inclure ce qui est la structure de la page de destination parfaite et ainsi de suite. Mais pour terminer cette vidéo, comme vous pouvez le voir juste ici avant qu'ils aient abonné. Mais encore une fois, vraiment une petite boîte. Alors pourquoi mettre cette petite boîte ici sans visite de bouton ? notre hôtel soeur. Super. Mais pourquoi est-ce si important ? Juste ici ? Ils veulent partir. Ils veulent que je quitte ce site et que je me rende sur ce site. Je ne veux pas que je fasse une réservation sur ce site. Mais sur ce site, donc crée juste de la confusion. Pourquoi est-il là n'a pas besoin d'être là. Vous pouvez voir ici Ils ont des informations de contact, téléphone et e-mail, ce qui est un peu plus agréable que ces autres sites Web. Mais pourquoi ne pas inclure le simple formulaire de contact simple et agréable avec une carte à côté de lui pour que je sache comment puis-je vous contacter ? Peut-être que je veux vous interroger sur le prix de la chambre. Donc, une fois de plus, si vous n'avez pas de client de messagerie connecté à votre navigateur, vous devez sélectionner l'ensemble de cette copie de contact, puis aller à votre client de messagerie et écrire votre e-mail là. Ce n'est vraiment pas si simple à faire. Et cela prend beaucoup de temps pour que ces visiteurs potentiels le fassent. Enfin, nous avons juste ici au pied de page toutes ces informations une fois de plus, qui a conçu le site Nice qu'ils ont leur Mais pourquoi ? Et enfin tout cela ici pour les pages de médias sociaux et le partage et quelqu'un, mais à mon avis, n'est vraiment pas tout conçu si bien et devrait être mis en page un peu plus agréable et un peu mieux d'une manière un peu plus logique pour nettoyer toute cette navigation et de mettre d'autres éléments à l'intérieur du pied de page juste ici. Donc c'est tout pour la section d'analyse des concurrents dans la section suivante du cours, A ZAY a dit, Nous allons commencer avec l'atterrissage Pékin, pas pour moi. Et nous allons parler de ce qui est une page de destination, pourquoi la conversion compte sur la structure de la page de destination de beauté, ce qu'il faut considérer à supprimer et donc je vais vous y voir. 7. Qu'est-ce qu'une page d'accueil: est généralement la première page de la page d'accueil de votre site Web, et il s'agit de la première page sur laquelle vos visiteurs atterrissent Vous pouvez donc imaginer s'ils vous recherchent sur Google et cliquez sur le lien pour rechercher la page d' accueil. Ou la page de destination est la première page du site Web qu'ils visiteront et le but des pages de destination pour expliquer dans les plus brefs délais ce qu'est votre site Web, ceque vous offrez des pages de destination pour expliquer dans les plus brefs délais ce qu'est votre site Web, ce et qui bénéficiera de votre offre, car vous pouvez imaginez que la majorité des gens qui viennent sur notre site Web ne savent pas de quoi il s'agit. Je ne sais pas ce que vous offrez. ne savez pas ce qu'est votre produit ou service, vous devez donc les expliquer sur la page de destination de la manière la plus courte possible et de la manière la plus concise et la plus claire possible ce que vous offrez, comment ils bénéficieront de votre service ou de votre produit, parce que s'ils ne l'obtiennent pas, ils partiront. Tout le but du site est de vendre ce que vous offrez donc soit un produit soit un service et la page de destination est votre vendeur, sorte que vous pouvez imaginer un vendeur qui va là-bas et vendre soit le produit soit le service qui est votre ont généralement 3 à 5 secondes lorsque les gens atterrissent sur votre page avant de partir. Il faut donc les persuader de rester et de faire défiler vers le bas. Parce que vous pouvez entasser autant d'informations dans votre zone d'en-tête et au-dessus du pli parce que majorité de vos informations seront désactivées. Les informations que vous mettez en haut seront de la plus haute qualité possible et la plus grande conversion possible en termes de off, expliquant à vos prospects potentiels ce que vous êtes et ce que vous leur offrez leurs conseils et techniques développées par de grandes agences qui peuvent vous aider à y parvenir en structurant votre page de destination de la bonne manière, en utilisant les bons éléments, ce qui signifie que vous allez accrocher votre potentiel, euh, leads, et les clients de la zone des héros. Une fois qu'ils sont accrochés, ils vont commencer à défiler vers le bas, et lorsque le défilement vers le bas, vous devez structurer cette information de telle sorte qu'ils comprendront en un coup d'œil ce que vous offrez, car soyons conscients que le numéro est de lire l'information que vous fournissez. Ils sont en train de scanner le site pour trouver les informations dont ils ont besoin. Vous devez donc structurer cette information de telle sorte que, lorsqu'ils défilent vers le bas et scannent votre site Web, ils comprennent immédiatement ce qu'il s'agit, ce que vous leur offrez et comment ils bénéficieront de tout ce que vous êtes. leur offrant. Nous allons discuter de tous ces points dans cette section hors du cours. Et dans la prochaine vidéo, je vais vous montrer ce qu'est une conversion et pourquoi cela compte pour vos clients, alors je vous verrai là-bas. 8. Pourquoi la conversion est importante: pourquoi la conversion compte la conversion sur le site Web est simplement tourner l'argent de l'offre lorsqu'il s'agit d'un service ou d'un produit. Donc, par exemple, si vous vendez des chaussures, conversion est avec quand quelqu'un vous paie de l'argent pour ces chaussures via votre site Web, ce qui est une bonne conversion dépend de votre produit ou service, combien coûteuse c'est, quel point c'est précieux et s'il est démontré au bon client. Donc, par exemple, si vous vendez quelque chose qui est dans un très petit créneau, vous le pouvez. Vous ne pouvez pas vous attendre à votre conversion Toby High, car il n'y a tout simplement pas assez de personnes dans ce créneau pour vendre une quantité suffisante. Donc, soit hors de votre produit ou service pour satisfaire le taux de conversion que vous aviez en tête . Alors gardez ça à l'esprit quand vous commencez quelque chose. Ainsi, lorsque vous commencez à travailler sur un site Web pour l'inclinaison, par exemple, vous devez comprendre la taille du créneau dans lequel les clients essaient de vendre leur service ou ils sont garés. Par conséquent, vous pouvez savoir à quel point le taux de conversion vous pouvez atteindre avec votre page de destination, car il n'y a aucun point de départ pour tester sans cesse. Si la niche est tout simplement trop petite. Un bon taux de conversion dépend vraiment de votre niche de l'industrie, mais vous ne voulez pas seulement une cellule, mais être rentable et avoir de l'argent à épargner en bas de la ligne. C' est pour ça que je dis que tu as remorqué. Explorez ce créneau, voyez à quel point il est grand et voyez le bourdonnement de la possibilité de vendre à l'intérieur de ce créneau. Et assurez-vous simplement que votre recherche Google pour de bonnes conversions dans votre secteur. Si vos clients ne les connaissent pas et essaient d'atteindre ces objectifs en testant votre page de destination, parce que dans la plupart des cas, les clients se concentrent uniquement sur le produit, ils ne se concentrent pas trop sur la recherche, croyez-le ou non. Donc, quand vous commencerez à vendre sur le site, ils s'attendront à des choses magiques de votre part. Mais si vous ne faites pas vos recherches, quand vous ne leur montrez pas le potentiel de ce créneau dans lequel ils se trouvent s'ils n'ont pas fait recherches sur le créneau, alors vous passerez votre temps inutilement à tester et à itérer votre atterrissage page, mais ne réalisant rien parce qu'il n'y a tout simplement pas assez de gens là-bas pour acheter. En outre, vous devez rechercher ce créneau afin de savoir comment cibler et comment structurer les informations sur votre page de destination. Et c'est de ça que nous allons parler ensuite. Fonctionne sur la beauté parce qu'il n'y a tout simplement pas assez de place pour, par exemple, Grady INT ou de belles images à la recherche dans toutes les niches du monde. Il y a tout simplement de l'espace pour ces choses dans certaines niches et pas assez d'espace pour d'autres, et nous allons en parler dans la prochaine vidéo. 9. Fonction sur la beauté: dans cette vidéo, nous allons parler de la fonction plutôt que de la beauté et de la raison pour laquelle il est important de se concentrer sur la fonction hors de la page d'accueil plutôt que sur sa beauté. Bien sûr, il est important de se concentrer sur le design et de le rendre agréable à l'œil pour les visiteurs, mais il est beaucoup plus important de se concentrer sur la fonctionnalité hors de la page. Je vais donc vous montrer quelques exemples très connus dans le monde en ligne. Et je vais parcourir certains d'entre eux juste pour vous montrer ce qu'est une bonne page de destination dans une bonne structure de page de destination. Donc, nous voici, dans le premier exemple de Shopify pique, et vous pouvez voir immédiatement ce qu'il ne vend en ligne avec Shopify. Donc, vous savez que dans la 1ère 2ème vous atterrissez sur ce site ce qu'il peut vous offrir, vous pouvez voir le logo juste ici. Vous pouvez voir ce que vous pouvez voir. Plus de 100 000 entreprises à travers le monde font confiance à cette entreprise, sorte que vous pouvez savoir que cette entreprise est bien connue. Si vous venez d'en entendre parler pour la première fois et tout de suite, vous pouvez voir que vous pouvez entrer votre adresse e-mail. Commencez l'essai gratuit et vous pouvez voir ici sans grand cri nécessaire pour cela dans leur arbre d'essai gratuit. Donc, ils vous montrent déjà leurs actifs les plus importants de leur entreprise. Ainsi, vous pouvez commencer gratuitement. Vous pouvez commencer tout de suite. 800 000 personnes font déjà affaire avec nous. Vous pouvez vendre en ligne avec Shopify tout dans les premières secondes de votre atterrissage sur cette page. Ensuite, vous pouvez voir l'image juste ici. Donc tu le sais. OK, donc c'est pour les sites Web ainsi que pour les appareils mobiles. Ok, Cool. Je peux voir certains produits ici afin de savoir immédiatement ce que je peux vendre avec Shopify juste à titre d'exemple. Et ici, vous pouvez voir les fonctionnalités les plus importantes qu'ils offrent sur leur site Web. Vous pouvez voir ici les gens qui utilisent déjà leur service peuvent voir qui les utilise et ici, témoignages des clients et encore une fois, appeler à l'action bouton. Nous commencerions l'essai gratuit pour que vous puissiez voir qu'il n'y a pas de Grady INT il n'y a pas de milieux sauvages. n'y a pas d'images flashy là-bas. Aucune radio de fond ne joue juste. Ralentir votre tête en bas. Tout est extrêmement simple. Tout est extrêmement simple. Cela se fait par le biais de plusieurs mois de tests et d'intégrations, d'enquêtes auprès des clients et ainsi suite. Mais comme vous pouvez le voir, ce site n'est pas particulièrement beau, mais il est fonctionnel et de là. Le point principal de la page d'atterrissage est de le rendre fonctionnel orteil. Faites-le fonctionner pour votre entreprise, pas seulement pour votre entreprise, mais aussi pour vos clients, car quand ils atterrissent ici, ils doivent le savoir instantanément. Qu' est-ce qu'ils peuvent faire sur votre site Web et comment cela peut les aider ? Parce que c'est la chose la plus importante avant tout, est comment cela peut m'aider en tant que visiteur en visitant votre site Web. C' est donc le point principal de la page de destination. Ensuite, nous avons Airbnb et vous pouvez voir que c'est un peu différent de Shopify. Mais vous pouvez voir ici le point principal sur le site gagner de l'argent en tant qu'hôte Airbnb. Donc tu le sais. OK, donc j'ai une maison. Je peux le louer et gagner de l'argent, et juste ici instantanément, vous avez une question et vous avez une réponse et vous avez deux gros boutons rouges d'appel à l'action avec quelques prix pour vous inciter à commencer. Et fondamentalement tout ce que vous voyez ici. Vous avez déjà été accro en tant que visiteur de visiter ce site Web et de commencer à utiliser leurs services parce que c'est la chose la plus importante. Comme je l'explique. Comme je l'ai dit, pour attirer l'attention des visiteurs potentiels et pour les amener à lire plus, vous n' avez pas besoin d'en lire plus. Tout est juste ici. Mais si vous voulez en voir plus, vous êtes déjà intéressé. Et vous voyez l'image ici racontant l'histoire. Donc, tout est là où il doit être. Donc, si vous faites défiler vers le bas, vous pouvez voir un peu plus d'informations. Maintenant, ils expliquent leurs services. Vous avez le témoignage juste ici. Tu vois qu'on t'a couvert. Ils vous convainquent en disant qu'on vous a recouvré. Nous allons vous aider à chaque étape afin que vous puissiez voir ici comment les paiements sont effectués . Simple. Comment peuvent-ils vous payer pour qu'on ait encore un témoignage ici. Donc ici, ils ont des données. Alors combien d'hôtes ? Il y a des séjours moyens et ainsi de suite à propos de Airbnb. Alors à propos d'eux Qui sont-ils ? Vos questions ont répondu. Donc, une fois de plus, ils répondent à vos questions toutes sur cette page, et vous pouvez en savoir plus ici, et vous avez une fois de plus commencer bouton ici. Donc tout est vraiment simple. Encore une fois, il n'y a pas d'éléments fous sur cette page. n'y a pas de transitions. Ils ne sont même pas un seul curseur. Comme vous pouvez le voir, toutes ces images sont fixes. Comme vous pouvez le voir, il n'y a pas une seule vidéo. n'y a rien sur cette page, mais c'est vraiment salut convertir la page, et cela fonctionne des merveilles pour leur entreprise. C' est pourquoi ils l'utilisent, parce que c' est efficace et je ne peux pas assez faire confiance à cela. chose la plus importante dans la conception de site Web est que le site Web soit efficace afin qu'il convertisse mieux pour vos clients, sorte qu'il leur apporte plus de prospects et plus de clients pour leur entreprise. Ensuite, nous avons cette année, donc nous diriger est fondamentalement ah, logiciel et un outil pour les entreprises basées sur la vidéo. Donc, vous pouvez imaginer YouTube mais pour les entreprises, et vous pouvez voir ici ce qu'ils font. Donc nous avons cette femme avec la caméra pour qu'on le sache tout de suite. Ok, c'est à propos de la vidéo que vous pouvez voir la vidéo juste ici. Commencez. Journalisation, Regarder des vidéos. Donc, toutes ces actions Coulter sont ici vraiment simples et faciles à naviguer dans le menu juste ici en haut. Et ici, vous pouvez voir ce qu'ils peuvent faire pour vous afin qu'ils puissent héberger vos vidéos. Ils peuvent. Vous pouvez créer de nouvelles vidéos rapidement et de plus en plus sur leurs compétences. Donc, ils ont en profondeur des guides de faire du marketing ici. Vous pouvez voir certains clients ici. Alors qui étaient-ils ? Leurs clients dans le passé. Et vous pouvez voir ici quelques vidéos sur comment pouvez-vous commencer et c'est tout. C' est très simple. C' est vraiment presque basique d'une certaine façon. Mais tout ce dont vous avez besoin pour commencer est juste ici. Tout est vraiment simple. Vous pouvez facilement naviguer à travers tout afin que vous puissiez voir toutes les informations dont vous avez besoin ici sur la page d'accueil sans avoir besoin d'aller orteils Toutes les pages externes pour le moment . Juste pour que vous puissiez en apprendre un peu plus sur cette entreprise. Ensuite, nous avons pleuré et vous pouvez voir ce qu'ils font ici. Brisez la barrière froide construisez de meilleurs sites Web d'entreprise plus rapidement sans codage, et vous pouvez commencer tout de suite. Vous pouvez voir leurs clients ici. Vous pouvez voir à quoi ressemblent certains de leurs sites Web et certains des éléments et juste ici ils expliquent ce que vous pouvez faire dans de belles animations. Donc c'est le genre de rupture avec la règle et ça a l'air vraiment sympa et là, y compris quelques vidéos ici. Mais une fois de plus, vous ne pouvez pas voir des ingrédients fous, Toute vidéo de fond ralentissant votre site Web vers le bas toutes les transitions agressives et l' animation agressive . Tout est si simple. Tout est si clair que vous pouvez facilement lire ce texte dans ces milieux. Vous pouvez voir ces images ici. Donc, dans chaque section, tout est bien expliqué pour concéder à l'intérieur de la section réelle pour un concepteur pour semble s et e commerce pour l'interaction. Vous pouvez voir ce type de dimanche ce qu'il vit en utilisant l'arme et comment il en est satisfait. Vous pouvez voir ici le lancement. Alors, comment pouvez-vous lancer ce site et une fois de plus de la célèbre société ? Cet eventbrite est vraiment une grande entreprise, et ce gars explique à quel point il en est satisfait. Une fois de plus, on a quoi ? Pourquoi ? Et les avantages potentiels pour vous en tant que nouvel utilisateur de ce service. Ensuite, nous avons grandi. Encore une fois, la même chose ici. Vous pouvez voir comment cela ressemble à ce que c'est, ce qu'il peut faire pour vous et comment vous pouvez en profiter dans une seule section, n' est-ce pas ? Belle et grande sur le fond blanc. Ainsi, vous pouvez facilement le voir facilement. Scannez-le. Et ici, ils ont la ressource est et ce qu'ils peuvent faire pour vous. Et encore une fois, vous avez les clients précédents ici ainsi que agréable. Gros commencer en bas. Donc, une fois de plus, vous l'avez ici et vous l'avez ici pour que vous puissiez voir qu'il n'y a pas d' informations supplémentaires . Par exemple, comment puis-je compiler mon rhume ? Comment puis-je exporter mes images ? Comment puis-je faire ça ? Comment peut-on et faire ça ? Tout est à l'intérieur du site. Mais les informations les plus importantes sont ici sur la page d'accueil afin que vous puissiez commencer et en apprendre plus tard quand vous avez besoin d'en savoir plus. Et enfin, nous avons des tests utilisateur afin que vous puissiez avoir de bonnes expériences client et ils commencent avec humain à l'intérieur. Donc, cet outil est pour les tests utilisateur, et vous pouvez voir qu'ils utilisent des éléments vraiment frais, propres et modernes juste ici en arrière-plan. Vous pouvez voir quelques actions Coulter ici. N' importe qui pour frapper ici pour le cacher. Vous pouvez voir que la navigation est vraiment agréable et claire. Vous pouvez voir ces dépliants. Comme c'est gentil tôt. Ils sont aménagés. Vous pouvez voir quelques appels à des actions. Juste ici. Tout est expliqué ici. Alors quoi ? Nous faisons un peu plus sur ce que nous faisons, et vous pouvez nous essayer. Et nous avons trois boutons de direction appelés. Juste ici. Vous pouvez voir la démo et vous pouvez regarder la vidéo hors service. Vous pouvez voir les clients précédents comment cela fonctionne. Voici le problème que vous, en tant que visiteur, pourriez avoir. Et voici la solution à votre problème. Et ici, ils ont tous leurs avantages. Donc, si vous voulez une solution à votre problème, voici les avantages qui vous aideront à résoudre votre problème et à développer votre entreprise encore plus. Qui sont les partenaires de ces affaires ici. Nous avons de beaux témoignages pour cette affaire. Vous pouvez en apprendre plus et en avoir plus. La ressource est et vous pouvez voir que ce bas nous suit alors que nous défilons vers le bas. Et une fois de plus, vous avez une demande d'essai juste ici. Et vous pouvez voir cette photo a toutes une information pertinente qui ne sont pas inclus. Aperçu de ces pages de destination ou faites défiler vers le bas. Mais si vous voulez en savoir plus sur l'un de ces détails, vous pouvez le trouver ici chez le père parce que c'est ce qu'est Fuller. J' espère que vous apprécierez ces exemples et j'espère que vous avez eu ce que j'essayais de vous dire. Le design est vraiment important et nous, en tant que designers, essayons de faire avancer nos idées vers les clients. Mais vous devez le comprendre quand il s'agit d'un site Web, en particulier les pages de destination. La conversion est ce qui compte et expliquer les informations que vous avez à expliquer de la manière la plus courte possible, tout en gardant la navigation très simple et facile pour vos utilisateurs et de comprendre ce que vous essayez de transmettre à et ce que vous essayez de leur expliquer. Donc, dans la prochaine vidéo, je vais parler de certains éléments de structure de page de destination comment vous devriez structurer vos pages de destination Et quels sont les meilleurs éléments à utiliser lors de la structuration de vos pages de destination sauce vous là-bas. 10. Structure de page d'accueil: dans cette vidéo, nous allons parler de la structure de la page de destination et des éléments que vous devez utiliser lorsque vous structurez votre page de destination. Donc, les premières choses d'abord, vous pouvez commencer par le titre et le titre est leur orteil. Expliquez votre service ou votre offre. Et le slogan est là pour expliquer ce que vous ne pouvez pas mettre à l'intérieur du titre. Donc c'est pour attirer leur attention. Ceci a pour but d'expliquer davantage l'attention derrière votre produit ou service et d'appeler à l'action. Y a-t-il pour conclure le marché ? Donc, comme vous l'avez vu dans la vidéo précédente dans les exemples que je vous ai montrés, les gens mettent l'appel à l'action juste ici dans la zone de navigation. Mais vous pouvez le mettre ici, par exemple. Vous pouvez le mettre juste ici au milieu. C' est vraiment à vous et à la mise en page de votre page. Habituellement, il y a une image accompagnée du titre et du slogan. Si vous vous souvenez de l'exemple d'Airbnb que je vous ai montré, ils utilisent la même image pour une entreprise, ce qu'ils disent ici dans le titre et le slogan. plus en plus de gens préfèrent mettre une vidéo ici, donc soit sur un site, soit en dessous ou derrière. Mais la vidéo est là parce qu'il peut expliquer des informations que vous avez à expliquer beaucoup mieux et puis simplement une image Donc la vidéo peut être hors d'un produit ou un service ou des gens expliquant le produit ou service client de commande expliquant que à leur clients potentiels. Et c'est pourquoi la vidéo est beaucoup plus efficace, parce que les gens regardent plus de vidéos que simplement regarder des images en dessous de cela. Nos principaux avantages pour vous, pour vous en tant que visiteur pour la première fois sur ce site Web. Alors, quels avantages pouvons-nous vous offrir en tant que visiteur qui peuvent améliorer votre vie, votre entreprise ou tout ce que vous offrez pour les servir ? Suivant ? Nous avons des preuves sociales, qui sont là pour prouver ce que vous dites dans les sections ci-dessus. Donc, vous devez prouver que dans le formulaire hors vidéo témoignage vidéo fondamentalement hors de vos clients précédents disant comment vous êtes bon votre produit ou service est, ou une citation de votre client précédent, et ceci est ici juste pour appliquer la l'intention d'attirer le client ou le client potentiel vers votre produit ou un service. Ensuite, vous devez expliquer le problème qu'ils peuvent avoir et la solution que vous offrez et le problème, Par exemple, le problème, Par exemple, dans notre cas et dans le cas de notre client, il trouve où vous êtes va rester dans la douceur, c'est donc le problème. Et la solution que nous offrons est notre hôtel de charme, car ainsi et ainsi de suite, cela va aider à résoudre votre problème. C' est bien si tu as une preuve sociale de plus juste là-dedans. Mais si tu n'en as qu'un ici, c'est bien parce que c'est à toi de décider. Votre mise en page Nietzsche et l'industrie ou le client est dans le nombre de preuves sociales que vous allez inclure, parce que parfois trop de preuves sociales ne se convertissent pas si bien, donc vous devez en inclure au moins une. Mais si vous le pouvez, c'est bien si vous pouvez inclure beaucoup plus, car cela peut vraiment aider à convertir leur potentiel potentiel potentiel en remorquage. Client Suivant. Lorsque vous avez expliqué leur problème, expliquez votre solution. Prouvez que vous pouvez résoudre le problème qu'ils pourraient avoir. Il est important que vous montrez vos fonctionnalités, sorte que les fonctionnalités que vous offrez qui consultent leur problème et être la solution pour leur problème suivant, nous avons argument de clôture. Donc, avec cet argument final, il peut s'agir d'une déclaration. Ça peut être une autre preuve. Donc, par exemple, dans notre cas, il peut être une bonne vue sur les plages et de beaux prix pleurnicher, dîner, expérience quelque chose comme ça juste pour fermer cette vente et de fermer cet argument afin qu'ils vous choisir à la fin de la journée. Ensuite, nous avons un formulaire qui est soit un formulaire de commande ou un formulaire de contact afin que les gens puissent facilement vous contacter . Par exemple, dans notre cas, nous voulons qu'ils réservent via notre page de destination. Nous avons donc un formulaire agréable, simple, facile à suivre, facile à suivre, facile à utiliser. Ils peuvent remplir et nous contacter afin qu'ils puissent réserver leur séjour dans notre hôtel. Et enfin, nous avons appelé à l'action, qui peut être à l'intérieur de cette forme ou sur le côté. Comme si c'était juste ici. Et l'appel à l'action est de les convertir enfin de ah perspective potentielle en remorquage. Un client, quand enfin est expliqué dans les vidéos précédentes dans le déjà vous hors des pages de destination les plus étonnantes là-bas est le dossier et le dossier est vraiment important parce que toutes les informations que vous n'avez pas besoin d'être juste ici sur la page d'accueil va aller à l'intérieur du père juste ici. Et s'ils ont besoin d'informations qu'ils ne peuvent trouver ici, ils peuvent la trouver ici. Donc vous pouvez imaginer, peut-être qu'ils veulent en savoir plus sur. Vous avez un coffre-fort dans la chambre ? Ils ont peut-être des objets de valeur, comme de l'or, de l'argent ou un ordinateur portable ou quelque chose comme ça, et ils veulent le laisser dans le coffre. Vous ne mettrez pas cette information ici parce que ce n'est pas trop pertinent, Mais vous pouvez le mettre à l'intérieur du pied où vous pouvez créer, par exemple, section F A Q où vous avez toutes les questions les plus importantes qu'ils pourraient entendre a répondu pour eux afin qu'ils puissent cliquer juste là, puis en savoir plus sur ces informations à cette page F A Q spécifique. Pas sur cette page de destination, car une fois de plus les pages de destination là pour vendre le service ou un produit que vous offrez et répondu aux questions les plus importantes. Et pour toutes les autres questions qu'ils pourraient avoir F une section Q est leur formulaire de contact. Est-il peut y avoir chat en direct est leurs pages de médias sociaux. Y a-t-il tellement d'autres façons de vous contacter et d'en apprendre davantage avant qu'ils ne deviennent votre client ou votre client ? Dans la prochaine vidéo, je vais vous montrer ce que vous pouvez considérer lors de la conception des pages de destination pour vos clients, pour une meilleure optimisation et une meilleure conversion, donc je vous y retrouverai. 11. Quoi prendre en compte: voici quelques choses que vous devriez considérer lors de la création d'une page de destination. Donc, les utilisateurs structurés pour les humains parce que les humains sont ceux qui regardent et lisent à travers votre page de destination. Donc, ne jetez pas quelques éléments à la page pour la rendre agréable. Rends-le structuré. Donc, lorsque les utilisateurs lisent votre page de destination pour qu'ils comprennent ce que vous offrez, ce que vous essayez de leur dire ce que vous essayez de leur montrer afin qu'ils aiment regarder votre page de destination. Donc, ce n'est pas seulement une belle apparence. design est plus sur la structure, alors menez-les à travers l'ensemble du processus, toute la pensée derrière la page de destination afin qu'ils comprennent. Et ce qui est le plus important, c'est de mieux convertir quand il y a une bonne structure là-bas . Donc, où que vous ayez le texte, rendre agréable, lisible, rendre propre sur les arrière-plans. Peu importe ce que vous avez des images, faites-les des images. Vous essayez de raconter une histoire avec pas seulement quelques images aléatoires comme un vous a montré au début de ce cours, alors faites les images se démarquer. Si vous avez une vidéo, assurez-vous qu'elle raconte l'histoire de la section de la page d'accueil qu'ils visitent actuellement, pas seulement une vidéo aléatoire. Ainsi, par exemple, si vous parlez d'avantages, assurez-vous que si vous avez une vidéo, la vidéo porte sur les avantages, pas sur l'entreprise, pas sur le produit et ainsi de suite. C' est fini, mais en particulier pour les avantages que vous essayez de leur dire. Alors promenez-les à travers toute la structure et le rendre ainsi pour les humains, pas seulement jeter quelques éléments A aléatoirement sur la page. Je pense que vous devez considérer est la vitesse de chargement parce que les navigateurs Web, en particulier Google, et être l'amour de la vitesse de chargement. Donc, les éléments les plus inutiles que vous pouvez vous débarrasser de se débarrasser parce que cela améliorera la vitesse de maintien. Utilisez également des téléphones Web parce que les armes sont optimisées pour les images d'utilisation Web, qui sont optimisées. Et c'est le prochain point que j'essaie de vous dire, c'est l'optimisation de l'image. Si vous n'avez pas besoin d'utiliser d'énormes images, ne les utilisez pas même si vous utilisez dans, assurez-vous de les optimiser avant de les jeter dans le design, puis plus tard ou de les envoyer aux développeurs parce que si les images sont optimisé, il va charger le site plus rapidement, et Google et d'autres moteurs de recherche vous aimeront pour cela parce que les gens avec des connexions Internet plus lentes vont charger le site beaucoup plus rapidement, obtenir les informations dont ils ont besoin beaucoup plus rapidement que si les images ne sont pas optimisées et elles attendent simplement qu'elles se chargent pour toujours. Et ils vont quitter votre site web éventuellement. Ensuite, nous avons appelé à des boutons d'action. Donc, comme nous l'expliquons dans ceci et dans la section précédente, appel à l'action, les boutons sont vraiment importants. Alors assurez-vous de les placer aux bons endroits. Et je vais vous montrer que quand nous avons commencé à concevoir notre site Web et vous pouvez revenir en arrière et voir les bons exemples que je vous ai montrés plus tôt afin que vous puissiez voir qu'ils n'ont pas comme 20 matraques russes froides différentes. Ils en ont deux ou trois, mais ils les positionnent des endroits stratégiques de l'industrie. Alors, quand les gens visitent le site Web, ils savent quoi faire et ils savent quand et où prendre des mesures et enfin vérifier la ressource fournie est ainsi à la fin. Hors du cours, vous pouvez voir la vidéo sur les liens et la ressource est dans ce cours et en elle. Je vais vous montrer d'autres lectures sur les pages de destination. A propos d'une bonne ressource est quand vous pouvez en apprendre encore plus si vous voulez sur la conversion, sur les différents éléments que vous pouvez mettre sur les pages de destination sur de bons exemples et ainsi de suite jusqu' à présent. Et vous pouvez également télécharger cela dans les fichiers du projet et dans le rapide pour le discours, afin que vous puissiez l'explorer plus loin si vous le souhaitez. Dans la section suivante du cours, nous allons commencer par le processus de conception. Nous allons faire de la planification, de l' inspiration,des inspiration, tableaux d' humeur, des croquis et ainsi de suite. Donc, nous allons enfin commencer à concevoir notre site web et je vais y voir. 12. La planification: Parlons maintenant de la planification de notre projet. Nous allons commencer par la navigation, puis passer à la section héros. Et comme je l'ai expliqué dans les vidéos précédentes dans la section précédente de ce cours, vous allez structurer nos boutons d'appel à l'action en conséquence. Alors peut-être que nous en mettrons un dans la section « héros » juste pour que nous puissions déclencher action tout de suite. Ensuite, en bas de la page, nous allons passer aux principales caractéristiques, et vous allez expliquer comment notre hôtel est meilleur que le reste des hôtels de la région . Ce que nous pouvons leur offrir ensuite. Nous allons continuer avec le témoignage et expliquer du point de vue d'un client ce qu'il a vécu et dur. Ils ont aimé séjourner dans notre hôtel, et après cela va l'offre principale. Donc vous essayez de les persuader après le témoignage, passer à l'offre principale. Ensuite, nous avons des golfeurs de soutien qui sont là juste pour soutenir notre offre principale, et je vais expliquer qu'une fois que nous commençons à concevoir et une fois que nous commençons à encadrer le fil suivant nous avons des activités qui sont là juste pour soutenir le principal et offre de soutien donc l' offre principale est là pour les attirer. Les offres de soutien sont là pour les persuader, et si les offres de soutien échouent, des activités sont là. Ainsi, plus les activités sont amusantes pour nos visiteurs, plus il y a de chances pour eux d'être convertis et de venir séjourner dans notre hôtel. Et après cela, nous avons le formulaire de réservation Richards là évidemment pour les faire réserver, rester dans notre hôtel. Et enfin, nous avons le formulaire de newsletter, qui est là s'ils sont intéressés. Mais alors ils ne vont pas réserver dès maintenant pour attraper leur adresse e-mail afin que nous puissions commencer à leur envoyer des e-mails promotionnels et les attirer pour réserver un séjour avec nous comme ça parce que peut-être quelqu'un visite notre page d'hôtel en dehors de la saison. Peut-être qu'ils veulent venir et rester dans 6 à 9 mois ou quelque chose comme ça. Donc formulaire de newsletter est là juste pour les garder intéressés, les garder au chaud et frais pour notre hôtel, et continuer à leur rappeler de réserver et de certaines réductions, par exemple, et d'autres choses comme ça. Enfin, en bas, nous avons un pied de page qui, comme expliqué précédemment, va contenir toutes les informations nécessaires, qui ne sont pas incluses sur la page de destination elle-même afin qu'ils puissent cliquer sur les liens dans le pied de page et accéder à ces informations dans la vidéo suivante. Nous allons passer à l'inspiration, et je vais vous montrer comment vous pouvez vous inspirer en utilisant différents exemples d' Internet que nous allons voir Est-ce que ce sont des canettes et peut-être dribble et peut-être regarder quelques images juste pour que nous puissions - Enlever l'idée ? Comment Page peut ressembler, donc je te verrai là-bas. 13. Inspiration: dans cette vidéo. Je veux vous montrer quelques pages d'inspiration que j'ai trouvées à la fois sur les balises dribble ainsi que quelques images qui aideront à servir le but hors, nous inspirant pour les couleurs et pour l'imagerie. Parce que nous allons utiliser des images gratuites pour ce projet. Et plus tard, quand le photographe sera prêt avec ses images, ils vont nous l'envoyer. Et nous allons inclure cela dans le fichier de livraison final lorsque nous envoyons ces fichiers au client. Mais maintenant nous allons commencer et juste trouvé ces modèles aléatoires et je veux vous montrer celui-ci est appelé Tripping to and Travel Agency Template. Mais je veux vous montrer que ces cartes sont vraiment comme comment elles sont disposées là vraiment simple. Ils sont vraiment faciles à scanner, vraiment faciles à comprendre. Vous pouvez juste ici à eux à vos favoris si vous voulez, mais j'aime vraiment comment ces commentaires sont montrés, comment ils sont vraiment propre maison, nombreux tours, par exemple, là en Australie juste ici. J' aime vraiment ça une fois, donc ils sont vraiment propres, simples, faciles à comprendre. Facile à lire. Vous pouvez vraiment voir ici fondamentalement Ils ont juste ajouté les drapeaux et il apparaît vraiment sur la page juste ici. Vous pouvez voir comment ils sont structurés, donc c'est vraiment facile à comprendre. C' est vraiment facile à numériser, et ils vont vraiment bien avec ces ombres d'arrière-plan sur fond blanc, et je pense que ça le fera. Il aura vraiment l'air bien dans notre conception. Ensuite, je vais passer à cette flèche de réservation de vol de la compagnie aérienne vous êtes le modèle x et je vais passer à un peu vers le bas et vous pouvez voir ici. J' aime vraiment comment ces gros textes vont à l'encontre des images. Peut-être, peut-être mettre un joli, subtil superposition de couleur ici et avec quelques icônes. Ça se passe vraiment bien avec ça. Ecoute, si je fais défiler tout le chemin vers le bas, tu peux voir à quoi ça ressemble. Nous avons donc des animations très agréables et subtiles, et comme vous pouvez le voir, c'est vraiment propre. Simple. Ils utilisent des couleurs neutres, et le texte est vraiment bien lisible, bien espacé uniformément placé sur la page. J' aime vraiment comment ça ressemble. Et comme vous pouvez le voir à partir de ces modèles d'animation, il est vraiment facile de naviguer. Il est vraiment facile de cliquer et, comme vous pouvez le voir, l'espace blanc est là, ah, grand. Ensuite, nous avons cette réservation com, un concept de refonte, et pour celui-ci, j'aime vraiment cette page. Ainsi, par exemple, lorsque vous voulez réserver, vous pouvez voir à quoi cela ressemble. Et c'est vraiment facile et simple, et j'aime vraiment ces cartes ici, et nous pouvons peut-être utiliser un type de conception similaire pour nos offres de soutien. Donc, par exemple, ce qu'ils peuvent faire à Mykonos une fois qu'ils restent dans notre hôtel, j'aime vraiment comment ils ressemblent, et nous pouvons vraiment les montrer et, par exemple, à l'endroit afin qu'ils puissent cliquez sur s'ils effectuent une recherche sur l'ordinateur de bureau ou utilisent leurs appareils mobiles. Donc téléphone mobile ou tablette, ils peuvent alors cliquer sur cet emplacement et voir où l'emplacement est adjacent à l'hôtel afin qu'ils puissent vraiment comprendre à quel point il est et combien il est cher ou pas cher. Et vous pouvez voir le désordre, par exemple. J' aime vraiment comment il semble qu'il est vraiment uniformément espacé, a toutes les informations importantes là-bas, et vous pouvez voir qu'il évolue bien sur le téléphone mobile ainsi. Et enfin, nous avons dribble. Donc, si je clique sur celui-ci, par exemple, j'aime vraiment ce dernier aspect givré vraiment comme comment tout est propre, facilement espacé. J' aime cette ombre d'arrière-plan sur ces boutons que ça va avoir l'air agréable et propre et ils se démarquent vraiment sur la page. Si je fais défiler un peu vers le bas, par exemple, sur celui-ci, c'est celui que nous venons de regarder, et vous pouvez voir l'animation juste ici. À quoi ça ressemble, donc c'est un orteil vraiment propre. Trouvez vos emplacements, et une fois que vous le faites, vous pouvez voir qu'il est vraiment facile à lire. Il est vraiment facile pour le spectateur de trouver l'information dont il a besoin, et il peut cliquer sur tout ce dont il a besoin sur la page. Et si je clique sur celui-ci, par exemple, vous pouvez voir exactement la même chose. C' est vraiment facile à lire sur la page. Comme vous pouvez le voir, vous pouvez vraiment facilement écorcher ce que tout est, et il a vraiment l'air agréable et propre. Et enfin, je veux vous montrer quelques images d'une éclaboussure parce que l'hôtel est au bord de la mer et vous pouvez trouver une inspiration pour les couleurs, par exemple, dans ces images, sorte que vous pouvez clairement voir beaucoup d'acier. Ah, beaucoup a soufflé beaucoup de vert dans les arbres. Peut-être mettre un peu de grâce pour le béton, par exemple. Et vous pouvez vraiment voir ex surtout ici, parce que c'est en Grèce, vous pouvez voir ces couleurs bleues et ces couleurs blanches, par exemple, de ce vert. Cela va très bien avec nos projets. Donc ces images sont juste là pour notre inspiration. Nous allons les utiliser dans notre projet, et je vais vous donner toutes les images pour que vous puissiez les utiliser lorsque vous commencez à concevoir vous-même dans les fichiers d'exercices pratiques. Et je vais vous montrer la structure du fichier d'entraînement quand nous aurons la conception d'une partie de ce cours. Donc c'est fondamentalement tout pour l'inspiration. La partie est, vous pouvez voir que nous n'allons pas utiliser spécifiquement n'importe quel élément que vous avez vu dans ces exemples. Je voulais juste vous montrer comment quand vous espacez ces éléments sur le fond blanc , c'est vraiment facile à lire, et vous pouvez facilement naviguer entre les sections et vous pouvez clairement trouver ce que vous êtes chercher quand il suffit d'inclure un peu plus d'informations dans, plutôt qu'une seule image avec du texte dessus, comme je vous l'ai montré dans la compétition. Exemple. Vidéos Dans la prochaine vidéo, nous allons commencer à concevoir nos planches d'humeur, et nous allons nous inspirer pour les couleurs potentielles, la topographie potentielle. Et je vais vous montrer à quoi ressemble leur logo pour l'instant parce qu'ils disent qu'ils vont changer à l'avenir. Mais pour l'instant, nous devons y faire face, et je vais vous montrer comment vont tous ces éléments quand vous créez un tableau d'ambiance, donc je vous y verrai. 14. Tableau d'humeur: Commençons à concevoir notre planche d'humeur tout pour sauter à la ressource est titulaire. C' est ce que nous avons pour l'instant, mais ce sera beaucoup plus de ressources à la fin des scores. Donc, je vais simplement sauter et ouvrir ce fichier de logo. Il suffit de l'ouvrir dans adobe Eggs D Et une fois qu'il est ouvert, je peux l'agrandir comme ça et je peux rapidement sauter ici à l'outil du monde de l'art et peut-être créer ce 1920 par 10 80. N' entendez pas tout à fait taper la planche d'humeur parce que nous voulons créer rapidement une planche d'humeur. Je peux utiliser l'outil rectangle et dessiner deux rectangles. Donc peut-être quelque chose comme ça peut être oui, et ensuite utilisé la répétition grand avenir. Dessinez simplement pour pleurer comme ça et deux de plus que comme alors peut-être je peux augmenter dans l' espace entre eux peut-être encore quelque chose comme ça, Ou peut-être même les dessiner un peu plus près, puis frapper sur le grand groupe et ensuite agrandir tous . Donc, par exemple, comme si peut-être les réduire mais désactiver le redimensionnement réactif afin qu'ils puissent mettre à l'échelle comme si contrôle g pour les regrouper comme ceci, les aligner, puis simplement faire un clic droit et sur le groupe. Ou vous pouvez déplacer le contrôle G ou le commandant de décalage si vous êtes sur un Mac et ce seront nos images, et je vais simplement inclure quelques images maintenant, vous pouvez le faire avec la répétition. Excellente fonction, et c'est plus facile de cette façon. Mais je n'ai vraiment pas d'importance pour moi, parce que parfois j'aime faire les choses de cette façon ou de cette façon, donc vous pouvez inclure beaucoup de toutes ces images à la fois. Une fois que vous avez créé la grille de répétition, dessinez simplement. Placez ces images à l'intérieur de violer grand, et il va peupler. Mais parfois, vous voulez le faire comme ça parce que si vous dessinez une seule image et que vous voulez voir à quoi cela ressemble dans l'une de ces cases, il est repeuplé. Entièrement. Répétez, génial. Et puis vous devez aller un 2ème 13141 Donc, il est vraiment à vous de décider comment vous voulez orteil créer vos images, mais ce n'est vraiment pas important. Cependant, vous pouvez les créer. Et si vous pensez que certains d'entre eux ne sont pas positionnés correctement, par exemple, celui-ci, vous pouvez toujours double-cliquer et vous pouvez le mettre à l'échelle, par exemple, si vous voulez, sorte que vous pouvez le repositionner comme Donc, nous allons disons maintenant, créons nos couleurs. Donc je vais faire la même chose. Il répète très bien. Peut-être en créer six comme ça. Ensuite, je peux augmenter l'espacement à quelque part ici, peut-être sur la grille de groupe. Donc c'est fondamentalement tout pour nos couleurs. Et peut-être qu'on peut commencer par le poignet sombre. J' aime faire ça. Alors peut-être que c'est notre sculler plus sombre. Peut-être que ce peut être pour nos boutons d'appel à l'action. Peut-être que nous pouvons sélectionner, puis un peu une couleur plus claire. Ou peut-être qu'on peut même choisir celui-là. J' aime comment ça ressemble avec d'abord. Supprimons les frontières de tous parce que je les trouve ennuyeux. Peut-être que nous pouvons sélectionner cette couleur bleue, par exemple. Ça a l'air bien. Alors peut-être que nous pouvons choisir cette couleur concrète comme elle. Peut-être qu'on peut utiliser celui-là. Et enfin, pour celui-ci, choisissons ceci. Peut-être qu'on peut les changer pour que ça puisse être ceci et que ça pourrait être notre couleur concrète. Donc peut-être que, non, c'est trop sombre. Peut-être quelque part par ici. Ouais, j'aime comment ça ressemble. Donc, fondamentalement, c'est comme ça que vous approchez vos couleurs. Ce sont une fois de plus simplement pour vous inspirer et voir avec quel genre de couleurs vous travaillez avec est vous pouvez voir que nous avons cette couleur crème ici dans cette puissance étoile. Ce blanc n'est pas complètement blanc, mais c'est aussi une sorte de crème. Vous avez toutes ces textures brunes. Comme vous pouvez le voir, rochers ne sont pas tous blancs, et le ciel est joliment beau et bleu juste ici. Vous pouvez donc vraiment jouer avec ces couleurs et explorer autant que vous le souhaitez. Alors allons de l'avant et contrôlons. Voir avec ce contrôle de logo. Nous avons juste ici pour une raison quelconque, il n'a pas goût et logo entier, alors nous allons choisir le contrôle. G contrôle C. Sois juste ici. Donc, je les regroupe avec le contrôle G et maintenant je l'ai badigeonné avec le contrôle. Nous, comme vous pouvez le voir, c'est leur logo. Ce n'est rien de spécial, et ils ont dit qu'ils allaient aux pieds. Redessinez-le une fois que nous avons créé notre site Web. Et maintenant, enfin, incluons un peu de texte. Donc, j'ai compressé e clic Quelque part ici, peut-être que nous pouvons utiliser ceci est dans le titre Nous semblons contrôler un Peut-être que je peux l'augmenter à, par exemple, 48. Donc c'est vraiment gentil et grand. Peut-être pourrions-nous utiliser le sens ouvert. C' est facile à lire. Peut-être que nous pouvons utiliser un boulon supplémentaire. Non, il fait trop sombre. Peut être audacieux. Ouais, comme ça ressemble. Et peut-être que nous pouvons positionner, genre, afin de contrôler de sorte que vous pouvez faire une place de copie. C' est peut-être quelque chose comme ici. Peut-être que vous pouvez utiliser 18 ou peut-être même 20. Ok, nous allons utiliser un standard, et vous pouvez cliquer ici pour le convertir à partir du texte de zone de pointe X, et ensuite vous pouvez faire glisser notre zone que vous voulez inclure Donc, par exemple, quelque part ici est bon, et puis avec elle sélectionnée, vous pouvez venir à la prise dans la colonne vertébrale, et vous pouvez utiliser beaucoup de cadeaux et de blogs. Si vous ne l'avez pas installé, vous pouvez simplement cliquer ici et rechercher ici pour l'ipsum à long terme. Lorsque vous le trouvez, vous pouvez simplement appuyer sur ce bouton installé et il va installer, et une fois que vous le faites, vous pouvez ensuite cliquer dessus. Cliquez sur sentir les frissons de texte d'espace réservé, qui sont sur vous voulez cliquer sur insérer du texte et il va insérer ce texte d'espace réservé dans la zone que vous avez sélectionnée. Si vous pensez que c'est trop grand, vous condamnez l'expérimentation et voyez comment différentes tailles fonctionnent dans ce texte de paragraphe . Mais je pense que ça a l'air bien, et peut-être que nous pouvons sélectionner cette couleur pour les gros titres. Il fait trop sombre, mais nous pourrons jouer avec elle plus tard une fois que nous commencerons à explorer nos couleurs et concevoir notre site Web. Mais c'est fondamentalement tout. Vous pouvez inclure d'autres trucs ici. Ainsi, par exemple, des photos de l'hôtel, des photos réelles de l'hôtel, vous pouvez les placer là. Vous pouvez mettre des images des activités et ainsi de suite sur un logiciel. Mais c'est juste pour nous afin que nous puissions avoir un aperçu ou comment tout va fonctionner sur la page. Peut-être que nous pouvons créer un bouton solide faire qui sera rapidement à la ligne d'outil rectangle comme ceci. Donc peut-être qu'on peut utiliser je ne sais pas, 25 avec 60 quoi que ce soit qui a l'air bien et parce qu'on peut taper cinq ou non, va utiliser cinq ici. Enlève la bordure. Utilisons cette couleur de sensation, par exemple. Peut-être que nous pouvons utiliser huit juste pour obtenir un peu plus autour des boutons de contrôle D sur ce paragraphe, tourner le texte du point d'orteil et ensuite simplement le déplacer vers le bas. Je vais écrire, par exemple, lire plus. Mettez-le au milieu. Comme si, positionnez-le à l'intérieur de notre bouton, comme si sélectionnez. L' histoire peut frapper ces deux-là pour qu'il soit parfaitement au centre. Voyez ce que c'est ici. Et pour lire plus de texte, nous pouvons le convertir en blanc, donc il suffit de cliquer ici. Et si vous zoomez, vous pouvez clairement voir que c'est le bouton. Toute présomption beaucoup plus proche. Vous pouvez le lire clairement, donc cette couleur fonctionne déjà assez bien. Peut-être qu'on peut même choisir celui-là. Voyez comment ça marche. Mais je l'aime un peu mieux, donc c'est fondamentalement tout pour ce mouvement ou ce processus. Comme je l'ai dit, vous pouvez aller en profondeur avec. Vous pouvez inclure autant d'éléments que vous le souhaitez. Vous pouvez inclure quelques éléments que vous voulez, car c'est essentiellement juste pour votre exploration personnelle, sorte que vous pouvez voir quels éléments fonctionnent bien dans la page. Ce qui ne va pas bien avec les autres couleurs, par exemple, vous pouvez explorer différentes polices de caractères et savoir quel texte fonctionne bien. Mais parce que c'est une police gratuite que nous utilisions. Donc, il est ouvert sens, et vous pouvez le trouver sur les téléphones Google ainsi que les polices adobe et notre lien les afin que vous puissiez les télécharger dans un fichier vraiment pdf. Dans la ressource est la vidéo à la fin des scores, sorte que vous pouvez en apprendre plus sur ceux que vous pouvez télécharger autant de téléphones est. Vous voulez un explorateur, bien sûr, et vous pouvez suivre ces images si vous voulez un explorateur avec différentes nuances, différentes positions de ces images. Ainsi, par exemple, vous pouvez retourner certains d'entre eux et ainsi de suite et ainsi de suite. Mais ce mouvement ou les processus juste pour vous afin que vous puissiez aller mieux. Voyez comment votre projet va ressembler une fois que vous commencez à le concevoir. Et ça va vraiment couper votre chemise de travail. Parce que lorsque vous avez terminé cette petite planche et vous pouvez simplement cliquer ici, appuyez sur le contrôle E. Et avec nous exporter son solde élu, vous pouvez sélectionner ici. Huit une. pdf PNG pour Jay Peak et vous pouvez l'exporter toe, qui sont l'emplacement que vous voulez et ensuite réellement l'envoyer pour répondre int afin qu'ils puissent passer dessus et voir. Ok, j'aime cette couleur. Je n'aime pas cette couleur. Ça marche. Ça ne marche pas. Changeons. Les fentes de jour incluent cela. Et juste dans ce processus d'embarquement d'humeur, vous pouvez réduire votre travail plus tard quand vient le temps des révisions. Parce que vous obtenez les bonnes couleurs pour la première fois. Et puis vous pouvez vraiment augmenter la vitesse à laquelle vous travaillez sur ce projet plus tard , quand il s'agit de temps pour les révisions. Donc c'est tout pour cette vidéo. Dans la prochaine vidéo, nous allons commencer par le croquis, et je vais vous montrer comment vous pouvez esquisser quelques idées que vous avez juste sur le papier avant de commencer à travailler sur les cadres métalliques. Donc, je te verrai là-bas 15. Croquis: dans cette vidéo. Je veux parler de croquis parce que la capture est importante dans le processus de conception parce qu' elle vous donne la liberté que vous pouvez utiliser lorsque vous commencez à esquisser sur papier parce que vous pouvez facilement jeter le papier, jeter, recommencer, inclure quelques éléments différents. Essayez quelques idées. Voyez ce qui fonctionne, ce qui ne fonctionne pas avec votre mise en page. Et puis vous pouvez essayer les idées que vous avez sur le papier à l'intérieur du b x D. Donc ici, je dessine simplement des éléments sur la page, et je vais vous montrer ce que j'ai trouvé. Laisse-moi zoomer un peu plus près. Vous pouvez voir ici en haut. Nous avons une navigation simple et simple, facile à utiliser, et nous allons utiliser le menu déroulant juste ici, par exemple, pour les offres ou pour la salle afin qu'ils puissent facilement naviguer à partir d'ici. On verra une fois qu'on commencera à encadrer les fils. Ensuite, nous avons appelé à l'action en bas, ce qui était vraiment clair, agréable et grand pour qu'ils puissent réserver leur état à partir d'ici. dessous de cela, nous avons l'image du héros et la zone du héros. Nous avons un bon appel de sous-titres de gros titres à Action Button et Hero Image et nous allons voir à quoi ressemblera cette image de héros et comment nous allons l'intégrer dans notre conception une fois que nous commencerons à concevoir. Mais c'est vraiment important de tout expliquer ici. Donc, ils n'ont pas à chercher d'autres informations quand ils atterrissent sur ah page d'accueil parce que tout est expliqué ici. Ci-dessous, nous avons les principales caractéristiques de l'hôtel. Alors peut-être qu'on va expliquer l'endroit où tout ça des années et je vais parler avec le client orteil, prendre quelques caractéristiques principales que nous allons mettre ici. Donc, cela est juste accroché pour faire défiler vers le bas et pour en savoir plus sur notre hôtel ci-dessous que nous allons avoir le témoignage du client précédent qui va orteils. Dites à tout le monde combien ils étaient ravis de rester à cet endroit et nous allons mettre le livre maintenant, appelez à Action Button juste ici pour qu'ils puissent réserver ici. dessous de cela, nous avons fait l'offre, qui sont les chambres, fondamentalement. Donc, nous allons mettre les chambres et mettre quelques informations de base ici, et nous allons en avoir appris plus afin qu'ils puissent en apprendre plus sur un type particulier de pièces quand ils cliquent juste là, et cela les mènera à la page de la salle plus tard. Mais c'est juste pour leur montrer quelles chambres ils sont, afin qu'ils puissent choisir la pièce qu'ils veulent et en apprendre plus directement sur la page d' accueil. dessous de cela, nous allons avoir d'autres fonctionnalités de l'hôtel. Donc, nous allons expliquer, par exemple, dans leur cour, que nous allons expliquer aux terroristes ce qu'ils ont. Nous allons expliquer le restaurant et quelqu'un, mais ce sont des caractéristiques de soutien à la caractéristique principale et l'offre principale, qui sont les chambres, parce que quand ils ont choisi les chambres, c'est ce qu'ils vont obtenir, en fonction de la pièce qu'ils obtiennent. Évidemment en dessous de cela, nous avons des activités à proximité. Comme vous pouvez le voir, je n'ai pas dessiné ça parce que je manquais d'espace. Mais c'est quelque chose que j'avais à l'esprit quand je concevais ce dessin quand je dessinais sur Le papier est que je vais inclure des offres principales ainsi qu'une offre de soutien. Donc, s'ils ne sont pas rejoints par les chambres, ils peuvent voir ici ce qu'ils obtiennent avec chacune des pièces, par exemple. Et cela pourrait influencer leur opinion de rester dans cet hôtel ci-dessous que nous avons des activités à proximité . Donc, s'ils ne sont pas persuadés par les chambres qui soutiennent les offres, ils ont des activités à proximité, afin qu'ils puissent en apprendre davantage sur ces activités. Et je vais inclure certains éléments dans la conception, comme je vous l'ai montré sur les exemples de balises, par exemple. On va voir à quelle distance il est de l'hôtel. Ils vont être en mesure de naviguer directement à partir de leur ordinateur juste pour voir à quelle distance il est et la gamme de prix pour cette offre particulière, par exemple. Et nous allons avoir cela comme un curseur et il est allé pouvoir l'utiliser et juste voir nom de l' activité un texte de base, peut-être ce qu'ils peuvent faire et juste ici, belle grande image, qui va être un curseur fondamentalement afin qu'ils puissent glisser vers la gauche et la droite et voir différentes activités en dessous de cela. Nous allons avoir le formulaire de réservation qui va écrire, par exemple, économiser jusqu'à 40% lorsque vous réservez avec nous. Ensuite, nous avons un texte de soutien et un appel à Action Button, et ce formulaire de réservation de contact va contenir toutes les informations pertinentes qu'ils vont entrer s'ils veulent réserver leur séjour dans cet hôtel. Et enfin, on va s'inscrire à la newsletter. Donc, comme expliqué dans les vidéos précédentes, s'ils ne veulent pas réserver maintenant, Donc, par exemple, c'est la fin de la saison. Ils viennent d'atterrir sur ce site en décembre. Ils veulent aller à leurs vacances en juin, par exemple, donc c'est vraiment beaucoup trop loin pour eux de réserver. Ils vont simplement laisser leur adresse e-mail juste ici dans l'inscription à la newsletter , et nous allons les envoyer. Les courriels promotionnels allaient leur envoyer des histoires, par exemple, juste pour les intéresser. Je les garde accroché pour cet hôtel afin qu'ils puissent réserver quand ils ont besoin de réserver et enfin au bas, nous allons inclure une photo et un dossier va inclure toutes les informations pertinentes qui ne sont pas inclus dans la page de destination elle-même. Ainsi, lorsqu'ils veulent en savoir plus sur chacun de ces composants, ils peuvent s'y rendre et y trouver toutes ces informations. Enfin, nous allons inclure des icônes de médias sociaux. Par exemple, nous allons inclure un numéro de téléphone, adresse e-mail, le contact de prise s'ils n'ont pas utilisé le livre avec nous pour et tous les autres liens pertinents , Donc c'est fondamentalement tout. Pour la pièce de dessin, vous pouvez être spécifique comme vous le souhaitez ou aussi rugueux que vous le souhaitez. Avec cette partie, vous ne partagez généralement pas cela avec votre client. Ceci est fondamentalement juste pour vous-même afin que vous puissiez avoir une structure de base que vous pouvez ensuite importer et commencer à travailler à l'intérieur d'Adobe X'd. C' est donc vraiment un processus important, une étape importante dans le processus de conception, parce que vous pouvez vraiment explorer différentes idées et mettre différentes choses dans le papier et juste travailler vraiment pour voir ce qui fonctionne, ce qui fonctionne pas, puis incluez tout cela à l'intérieur de votre processus de cadrage de fil. Dans la prochaine partie du cours, nous allons commencer par le cadrage de fil, et nous allons tourner ces croquis dans les cadres de remorquage vraiment haute fidélité et plus tard dans les conceptions de remorquage, que nous allons partager avec notre client. Donc, je te verrai là-bas 16. Préparation de fichiers: dans cette partie du cours, nous allons commencer à concevoir nos cadres métalliques, mais avant de le faire, nous devons organiser un peu notre dossier de projet. Donc, je vais inclure tous les différents fichiers que je vous ai déjà montrés et les futurs que nous allons créer pendant les partitions afin qu'ils soient tous situés dans un seul fichier de sorte que si à un moment quelconque vous avez besoin de copier quelque chose, vous devez regarder quelque chose en arrière pour référence. Vous devez créer quelque chose de nouveau et le comparer à quelque chose que vous avez créé avant de pouvoir tout faire dans un fichier parce qu'Adobe X'd est incroyable quand vient le temps de créer des fichiers volumineux et de les envoyer aux clients parce qu'ils ont vraiment fait leur magie avec optimisation. Et vous pouvez vraiment envoyer des fichiers volumineux avec une petite taille de fichier à vos clients. Donc, sans plus tarder, vous vous souviendrez de ce tableau d'ambiance que j'ai créé dans la partie précédente hors du parcours, et nous avons le logo que le client nous a envoyé. Je vais minimiser cela et sauter dans notre ressource est Père, qui, bien sûr, vous allez obtenir tellement juste ici. Nous avons un projet, c'est ce fichier que je vous ai déjà montré. Je suis allé de l'avant juste ici. Économiseurs et enregistré mon ordinateur nommé Project, et vous allez recevoir ce fichier de projet à la fin du cours lorsque vous téléchargez les fichiers. Mais il va contenir tout ce que nous créons pendant ce cours. Donc, je vais orteil inclure le slip de conception à l'intérieur. Donc, je vais double-cliquer sur le dossier du design. Il va se charger, et je vais simplement copier celui-ci, qui est le dossier de conception de terrain ? Parce que si vous vous souvenez de la courte vidéo de conception, vous avez le modèle vide, que vous pouvez utiliser pour vos projets. Et nous avons ce modèle rempli que nous allons utiliser pour ce projet. Donc contrôle. vois, quand tu choisis cette naissance d'art, je vais sauter ici. Zoom arrière un peu, appuyez sur le contrôle V, et il va coller les orteils juste ici. Ensuite, je vais faire la même chose, mais avec un cadre métallique. Donc, laissez-moi rapidement sortir ceci, orteil mon autre écran, sauter dans ce fichier, et je vais simplement glisser et déposer le pied juste ici sur la page afin que nous puissions référencer cet ami de fil que nous avons créé pendant le la création part du discours. Ensuite, nous allons créer dans nos ports, donc je vais cliquer ici. Il dit sont pauvres Larry King a frappé un sur votre clavier et je vais simplement faire défiler l'orteil Web et cliquez sur 1920 et il va orteil inclure tout à l'intérieur. Donc tout simplement aller orteil les séparer parce qu'il voit cela comme sur notre port. Quand ce n'est pas le cas, c'est juste une image simple. Donc je vais me positionner ici, et je vais déplacer ça ici. Je vais double-cliquer ici. Et j'ai été cadre métallique parce que ça va être notre cadre métallique et nous allons le concevoir à partir de zéro. Et quand nous avons fini avec le cadre métallique, nous allons utiliser ces éléments à l'intérieur de notre conception. Mais je vais vous montrer que quand nous y arriverons plus tard, sont simplement aller orteil cliquez dessus et l'étendre vers le bas et vous allez voir cette ligne pointillée . Et cette ligne démarrée est fondamentalement le pli, donc tout ici sera au-dessus du pli. Tout ici sera en dessous de la valeur par défaut. Et bien sûr, vous pouvez configurer cela comme vous le souhaitez. Si vous pensez que le pli va être vers le haut ou vers le bas, si vous créez pour plusieurs appareils et ainsi de suite dans la vidéo suivante, nous allons commencer à concevoir nos cadres métalliques et je vous y verrai. 17. Créer Wireframe 1: à droite. Alors commençons par créer notre cadre métallique et la première chose que nous allons faire quand reprendre ici. Vous pouvez sélectionner notre pièce en cliquant simplement sur son nom. Cliquez ici. C' est écrit Layout. Sur les colonnes, vous allez avoir 12 colonnes, mais sur le caniveau, c'était le pied. Entrez 40. Appuyez sur Entrée et vous pouvez voir qu'il ajuste automatiquement toutes ces autres vallées, ce qui est très bien. Donc, nous allons simplement zoomer un peu plus près. Et dans beaucoup de cas, lorsque vous commencez à concevoir, vous ne pouvez pas voir les éléments parce que hors du script, alors il suffit de cliquer ici où il est dit mise en page, grande couleur de colonne, cliquez dessus et simplement abaissez l'opacité de ces lignes à quelque part ici pour que vous puissiez toujours les voir. Mais vous pouvez voir ce que vous concevez ici en haut de sorte que vous pouvez cliquer sur votre port et vous pouvez cliquer ici dans le rectangle parce que nous allons créer la navigation . Donc, ce que nous allons faire est d'appeler ça jamais biggie comme ainsi parce que j'aime toujours le nom des orteils mes couches parce que c'est ah plus facile pour les développeurs plus tard, et c'est plus facile pour moi si j'ai besoin de trouver quelque chose un peu plus tard et je dois le changer. Donc nous allons lui donner une hauteur de 1 50 et positionner le bout du haut comme si nous allons enlever la bordure un peu plus tard. Mais gardons-le pour l'instant afin que nous puissions concevoir ce que nous devons concevoir à l'intérieur de cela maintenant . Donc, il saute juste ici et sélectionnez un logo, alors cliquez dessus pour contrôler le saut de mer juste ici à l'intérieur du contrôle jamais BG nous et assurez-vous qu'il est dans le dossier tel qu'il est. Assurez-vous de cliquer ici pour désactiver les contraintes pour le redimensionnement responsive, car si vous les laissez, cela vous donnera un peu bizarre comme vous pouvez le voir ici. Il suffit donc de l'éteindre si vous voulez le réduire uniformément. Donc, en cliquant sur l'un des coins maintenez la touche Maj pour réduire sa taille à quelque part ici. Assurez-vous de l'accrocher à la grille que nous venons de créer, et vous pouvez sélectionner les deux en maintenant le contrôle et simplement les déplacer au milieu comme ça et il va s'accrocher au milieu de cet arrière-plan de navigation, comme vous pouvez le voir ici . Donc c'est notre esprit local. Maintenant, nous allons créer du texte, et nous devons commencer par une pièce afin que vous puissiez simplement cliquer ici en tapant le marié et je vais choisir une couleur quelque chose comme ça. Peut-être que juste un grand basique n'a vraiment pas d'importance. Mais nous allons utiliser quelque chose comme 707070 Juste sympa. Gris de base, simple, changements propres à 24. Assurez-vous qu'il est régulier comme il est, et vous pouvez faire de même. Supposez-le comme si sélectionnez-les les deux. Frappez juste ici au milieu et maintenant, parce que je veux que cet orteil de la pièce s'effondre pour qu'il y ait une liste déroulante. Mais créons ça un peu plus tard. Commençons par créer ces autres éléments dans notre navigation afin qu'il puisse frapper le contrôle. De pour dupliquer problème pourrait déplacer la réservation longue et taper parce que nous voulons que les gens puissent réserver leur chambre à partir d'ici. Sélectionnez les deux, assurez-vous qu'ils sont laissés une ligne, donc lorsque vous tapez, ils vont de gauche à droite. Sélectionnez ce contrôle dupliqué sur ce type étant à propos de nous et une fois de plus contrôler D. Et pour celui-ci, nous allons taper en contact parce que nous voulons nous assurer que les gens peuvent nous contacter et qu'ils sont en mesure de nous contacter directement à partir d'ici. S' ils ont des questions pour nous. Ensuite, je vais créer ah, flag placeholder parce que nous allons placer un drapeau juste ici pour que les gens puissent choisir langues s'ils le souhaitent parce que c'est en Grèce. Peut-être qu'ils veulent créer un site en langue grecque ainsi que l'anglais, peut-être un français ou peut-être l'allemand, selon l'origine de leurs clients et les résistants. Donc je vais lui donner 40 Wits 30 comme alors assurez-vous que vous le nommez flanc et assurez-vous que vous le centrez comme tous ceux de l'autre. Assurez-vous que la position juste ci-dessous et dupliquez le contact. Commandez rapidement certains d'entre eux, donc les chambres devraient être juste à côté du logo. Donc juste en dessous dans le panneau des couches juste ici la réservation devrait venir à côté de nous devrait venir ensuite. Le contact est ici. Drapeau est ici, alors nous allons dupliquer le contact pour le déplacer jusqu'ici parce que ce sera notre texte de bouton, parce que nous allons placer un bouton juste ici, donc il suffit de double-cliquer sur son orteil. Un changement il taper dans le livre maintenant comme ainsi, et assurez-vous que cela va dans leur centre, donc il est aligné au centre. Ensuite, nous allons créer un bouton, et pour cela, allons choisir un outil rectangle tapant à 91 dont 75 et juste ici taper 10 parce que nous voulons créer autour des coins, assurez-vous de le déplacer vers le bas. DoubleClick, BT et BG court pour fond inférieur et nous allons le déplacer. Donc, une ligne à la grande droite ici et sélectionnez les deux. Assurez-vous qu'ils sont alignés au centre comme les prothèses dentaires. Réservez maintenant bouton texte BG et positionnez-le comme ainsi parce qu'il placera ce texte au milieu. Maintenant, ce que nous pouvons faire est de lui donner une couleur si vous voulez, alors sélectionnez-la et nous pouvons aller ici et peut-être choisir cette couleur pour que vous puissiez cliquer dessus comme si j'aime à quoi ça ressemble, et vous pouvez enlever la bordure, cliquez sur le texte, donnez-lui une couleur blanche comme ça et maintenant ce que vous pouvez faire est de revenir à notre panneau d'actifs. Mais il est dit que les couleurs cliquent ici. Il vous donnera un clic de couleur blanche sur le texte. Il vous donnera ce clic de couleur sur ce texte et il vous donnera la couleur du texte que nous avons utilisé pour ce texte ici. Alors que plus tard, quand vous voulez changer les couleurs globalement, Alors imaginez que nous allons créer vraiment longue page de destination. Si vous voulez changer globalement la couleur de ce texte, vous pouvez le faire en changeant simplement la couleur juste ici au lieu d'aller un par un puis de les changer tous séparément. Alors maintenant que nous pouvons le faire, je veux ajouter une flèche vers le bas pour que les gens puissent cliquer dessus et cela leur donnera différentes options. J' ai donc déjà créé une flèche vers le bas pour gagner du temps, et vous allez la recevoir un peu plus tard. Donc, ce que vous conduisez vous est simplement de le positionner au centre, revenir au panneau des calques, le positionner jusqu'au drapeau, et nous pouvons aller de l'avant et de regrouper ce livre Maintenant bouton Donc contrôler G pour le grouper et l'appeler un livre No Bt et, par exemple, et vous pouvez nommer vos couches différemment. J' aime le faire de cette façon parce que la majorité des développeurs créent des lignes de fond de thèse toute façon, donc je pense que c'est plus facile pour eux. Quand je fais ça, assurez-vous que c'est au centre. Ensuite, assurez-vous de le sélectionner, et ce que nous voulons est de le positionner. Par exemple, 70 pixels vers la gauche. À partir de ce bouton maintenez maj et flèche gauche. voulez sélectionner 1234567 comme alors vous pouvez sélectionner cette position d'espace réservé de drapeau 20 pixels comme alors puis choisissez ce contact et l'aligner parfaitement avec ce vol, comme si 1234567 et faire la même chose pour le reste d'entre eux, de sorte que vous pouvez sélectionnez-les tous et vous pouvez voir où il est 71 un pixel vers la droite. Vous pouvez maintenir, déplacer et sélectionner ou supprimer certains d'entre eux afin que vous puissiez voir que nous en avons deux ici. Je peux cliquer sur Maj clic sur la réservation, et il va de la sélectionner Donc ce que nous avons besoin pour les chambres est que nous allons utiliser cette même flèche, donc contrôle de pour le dupliquer. Et vous pouvez maintenir la flèche Maj et la flèche gauche et le déplacer jusqu'ici. Zoomez un peu plus près et vous pouvez le positionner juste ici jusqu'à ce qu'il s'accroche comme vous l'avez vu avec du texte . Donc 1234567 Et on va placer des chambres. 20 pixels orteils à gauche. Alors 12 Et voilà. Vous avez créé votre navigation. Donc maintenant, ce que je vais faire est de sélectionner toutes ces couches, les classer un peu mieux. Quelque chose que je n'ai pas fait. Tout est là. Donc, une dernière chose est d'enlever la bordure de la navigation. Donc, nous allons sélectionner tous les enfants contrôle G. Ne cliquez pas ici dans le dossier tapant jamais centre. Et voilà. Vous avez créé votre navigation. Donc, dans la prochaine vidéo, je vais aller aux pieds, vous montrer comment vous pouvez créer une image de héros et nous allons passer à partir de là 18. Créer Wireframe 2: Donc, nous allons maintenant commencer et l'image de héros du créateur. Donc, une fois de plus, sélectionnez un rectangle, faites-le glisser ici et donnons-le. Retirez la bordure et donnons-lui un peu de couleur afin que vous puissiez utiliser, par exemple, E c E C E C présentateur, et nous allons utiliser cette couleur pour toutes nos images afin que vous puissiez supprimer le grain et voir à quoi cela ressemble sur la page. Et vous pouvez ramener le grand en arrière quand vous voulez commencer à concevoir. Donnons-lui une certaine hauteur de 900% et l'esprit est 1920 0 désolé, je l'ai fait pour l'ensemble du tableau d'art. Il suffit donc de sélectionner ce rectangle et de lui donner 900 pour la hauteur. Comme vous pouvez le voir ici tout le décalage et le déplacer jusqu'à ce qu'il se rencontre, qui ne l'aime jamais ici. Positionnez-le un peu en arrière et nous allons lui donner un nom hors héros BG. Et il est important de nommer vos couches non seulement pour les développeurs, mais aussi pour vous-même , car plus tard, car plus tard, lorsque nous aurons l'animation des orteils dans ce prototype pour le client, nous avons besoin des mêmes noms de calque pour le fonction animée automatique orteil fonctionne correctement. C' est pourquoi il est vraiment important de réduire votre travail. Et dès que vous concevez quelque chose, commencez à le superposer. Commencez à le nommer de sorte qu'il soit plus facile pour vous plus tard, quand vient le temps d'animer afin que vous puissiez le faire facilement lorsque vous avez des noms de calque dès le début, puis revenez à elle et imaginez simplement que vous avez, pour 200 nos ports, et vous devez renommer toutes les couches à l'intérieur de ces 200 ports. Donc ça prend beaucoup de temps, et il est vraiment important que tu nommes Louis tes couches au fur et à mesure que tu avances. Je sais que beaucoup de designers n'aiment pas faire ça, et ils ignorent cette partie. Mais à l'intérieur des oeufs d'adobe, surtout quand vous voulez en animer une partie en utilisant la fonction d'animation automatique, il est vraiment important de le faire parce que sinon cela ne fonctionnera tout simplement pas. Donc, nous allons revenir en arrière, et aussi j'ai créé cette icône pour la plaque dans le contrôle de bouton, voir, parce que ce sera notre vidéo de fond de héros. Ainsi, par exemple, il va commencer à jouer automatiquement ou les gens peuvent cliquer ici, et il va sauter en mode plein écran et commencer à lire la vidéo pour dans cet hôtel Sonesta. Créons un peu de texte et je peux sauter ici au jamais cliquer ici. Contrôle. Voyez pour que je puisse frapper ici. Contrôle. Nous dupliquons cette couche. Déplacez-le comme ça, et vous pouvez sauter dans son panneau d'actifs et cliquer sur les styles de caractères parce que les dettes sont le premier style de personnage et vous pouvez également sauter dans le livre. Maintenant, frappez juste ici. Créez ce second style de personnage parce que nous allons utiliser différents styles de personnage tout au long de cette conception. Il est donc très important que vous les ayez sauvegardés en tant qu'actifs, car c'est vraiment facile, puis de revenir en arrière, apporter quelques modifications, et cela va créer des changements globalement. Donc, par exemple, si vous voulez lui donner une plus grande taille, il le fera. Ou si vous voulez changer les couleurs, il le fera facilement, Alors cliquez dessus. Assurez-vous qu'il est au centre. Double-cliquez ici, tapant bienvenue à, et il a essayé ici de le positionner dans la position centrale en été et ici Control D. Nous allons taper dans London East Boutique Hotel parce que c'est le nom de notre hôtel contrôle de dupliquer ce vers le bas et les pluies de type. Par exemple, votre maison loin de chez vous, deux morts mensonges pour celui-ci. Nous allons le changer et nous allons simplement le changer ici pour jouer à l'affichage équitable. Cliquez ici. Vous allez lui donner la taille de 70 et nous allons le changer en italique gras juste pour donner un peu d'intérêt à entendre, parce que j'ai déjà parlé avec le client et ils aiment l'idée d'avoir différents téléphones pour les titres comme nous sommes pour le texte. Donc c'est ce que nous allons faire en ce moment, et donnons aussi une couleur différente. Donc, pour cela, nous allons utiliser 55555% et si je clique ici orteil, supprimer le grand, vous pouvez voir à quoi cela ressemble, donc il se trouve de la page juste un peu mieux qu'il ne l'a fait avant. Donc, nous allons bien ramener la disposition des orteils propre ou je peux le laisser comme ainsi parce que tout est fondamentalement au centre pour cette partie. Donc, laissons-le tel quel, Alors nous allons juste espacer tout ce texte un peu mieux. Donc, si je zoome un peu plus près, maintenez ma touche Maj jusqu'à ce qu'elle s'enclenche juste ici. Je vais encore tenir ma touche de changement de vitesse. Notre para 1234 en fait 40 pixels vers le haut. Faites la même chose pour celui-ci comme ça, puis décalez. 1234 Comme vous pouvez le voir, c'est exactement la même chose. Mais pour celui-là, gardons-le à 80 ans. Alors donnons-le double. Sélectionnez-les tous. Mais d' abord, commandez-les. Alors bienvenue à sera au top boutique hôtel Herren. Ce texte est au dernier quart de travail, donc j'ai parlé. Tous contrôlent G Select Hero BG en utilisant la touche de contrôle et les positionnent simplement comme ça et qui les mettra en place au milieu pour cette image de héros sur le groupe tous d' entre eux. Et c'est simplement les regrouper tous ensemble. Contrôle G L Cliquez ici. Appelez ça héros comme ça, et c'est tout pour notre image de héros. Donc, je vous verrai dans la prochaine vidéo quand nous allons commencer à concevoir la section qui ira juste au-dessous de notre image de héros, et cela expliquera fondamentalement un peu plus sur notre hôtel. Donc, quand ils atterrissent, ils ont cette navigation simple et agréable. Ils ont cette belle, simple Heather avec la vidéo qu'ils peuvent jouer. Mais en dessous, ils ont plus sur notre hôtel et sur nous des informations. Fondamentalement, juste un coup d'oeil pour qu'ils puissent obtenir le Nord un peu mieux sur les choses qui n'étaient pas dans cette courte vidéo, donc je vais vous voir là-bas. 19. Créer Wireframe 3: Donc, ce que nous allons faire maintenant est de sélectionner ceci et je vais utiliser ce texte ainsi que contrôle de texte de decks pour le dupliquer et simplement cliquer et faire glisser à l'extérieur de ce dossier . Retirez-le vers le bas, maintenez le décalage et le bas, flèche. Ou vous pouvez simplement cacher ceci et le déplacer comme ça. Et ce qu'on veut, c'est l'aligner ici. Maintenez Maj et déplacez-le vers le bas. 100 pixels. Du savon. 123456789 10. Et comme vous pouvez le voir, il a déplacé 10 100 pixels vers le bas parce que nous voulons lui donner un peu d'espace juste ici. Et comme vous pouvez le voir, vous pouvez même augmenter la taille du héros juste ici jusqu'au pli. Mais le pli n'est pas pertinent, essentiellement parce que les gens regardent ce site Web sur différents appareils. Donc il suffit de prendre l'iPad, par exemple, je parie a beaucoup de variations différentes. Même que l'iPhone et pour ne pas mentionner nos téléphones Android. Sans parler de quelques ordinateurs portables différents. Donc, si vous regardez, si vous regardez ce site Web sur ordinateur portable, qui a un écran de 13 pouces, il aura l'air un peu différent que si vous regardez un écran de 15 pouces, un écran 17 pouces et ainsi de suite. Jusqu' à présent, ce pliage s'adapte vraiment à différentes tailles d'écran, alors gardez cela à l'esprit. Donc, lorsque vous lui donnez un peu d'espace blanc juste ici, il s'adaptera facilement à différentes tailles d'écran. Alors passons à autre chose, et je vais commencer par créer un cercle. Donc je vais créer un cercle juste ici. Il suffit de l'appeler Cercle One, par exemple, et de lui donner 1 50 avec 1 50 et je vais ramener mon grand retour Sadullah cliquez ici, tapant cliquez sur la mise en page et ce que je veux est de le déplacer, peut-être 80. Donc 12345678 de la ligne de fond de ce texte ou peut-être même 100. Alors donnons-lui 100 pour avoir la même distance d'ici à ici, ainsi que d'ici à ici. Donc c'est notre cercle un Control D. Nous allons créer un cercle, aussi. suffit de cliquer ici, et il va le placer dans le contrôle central D et créer le cercle numéro trois et maintenez le décalage et le positionner ici donc Ce que nous voulons est de le positionner parce que nous avons 12 colonnes dans notre grille. On veut chaque cercle Toby au centre de ces quatre. Donc ce premier cercle va être au centre de ces quatre. Deuxième un de ces quatre et 3e 1 de ce pour l'instant. Pour ce faire, il suffit de sélectionner un rectangle dessiné au quatrième. Vous pouvez zoomer un peu plus près et vous pouvez voir qu'il va de celui-ci. Donc 1234 finit sur celui-ci et vous pouvez simplement sélectionner cercle rectangle un clic juste ici , et il placera le cercle au milieu comme ça, parce que vous pouvez le faire avec des guides. Mais j'ai trouvé cela beaucoup plus facile parce que, comme vous pouvez le voir, c'est vraiment simple. Sélectionnez Slicker. Trois endroits juste ici. Cliquez ici, Lil mange. Et que tu as fini. Donc, j'ai trouvé beaucoup plus simple de faire les choses de cette façon, Ensuite, pour simplement aller de l'avant et créer quelque chose de différents guides pour ce processus. Parce qu'un zay a dit que je trouvais ça beaucoup plus facile que ça. Alors maintenant, ce que nous pouvons faire est de cliquer ici Controler deal. Dupliquer cela sur des positions comme si 12 peut-être même quatre pour lui donner un bon contrôle de frappeur de positions comme si contrôlé le similaire. Donc, sur ce 1er 1, appelons-le lit King size comme ça, et ce que nous pouvons faire est de le positionner au milieu comme ça et assurez-vous qu'il est boulon et assurez-vous que c'est cette couleur plus foncée. Donc nous ne l'avons pas défini comme ici pour que vous puissiez le sélectionner. Cliquez ici et c'est cette couleur foncée. Cliquez dessus, et il appliquera ces couleurs plus foncées, et vous pouvez faire la même chose pour ceux-ci. Alors appuyez ici et assurez-vous que c'est boulon et enfin cliquez dessus et créez un nouveau style de personnage parce que nous n'avions pas ce style de personnage avant. Double-cliquez ici. Tapez la nourriture incluse, comme donc assurez-vous qu'il est dans le centre et un rapide juste ici et taper l'accès à la plage parce qu'ils vont avoir un accès direct à la plage depuis cet hôtel. Donc, comme je l'ai dit, ne sont que quelques-uns de nos principaux futurs, et May Fincher est hors de notre hôtel, donc fondamentalement, quand ils atterrissent, ils peuvent regarder la vidéo et en apprendre plus sur la façon dont l'hôtel regarde, quoi ressemble le personnel, Où est-il situé ? Juste quelques-unes des principales caractéristiques et qui vont vendre dans cet hôtel se terminant par simplement cliquez sur livre. Maintenant, s'ils en sont satisfaits, ou sinon, comme la majorité des gens ne le seront pas, ils vont simplement faire défiler vers le bas et en apprendre plus sur notre hôtel. Donc, ce que nous pouvons faire ensuite, c'est cliquer ici, revenir au panneau des calques pour voir où nous sommes contrôlés en profondeur, et nous allons le déplacer ici et dans le même. Donc 1234 faisant 40. Et ce que je veux faire maintenant est de cliquer sur le texte de la zone et il va créer le texte de la zone à partir de ce texte, texte, et ce que je veux, c'est que vous pouvez simplement le déplacer comme ça et vous assurer que c'est l'esprit de ces trois colonnes, et vous pouvez déplacez-le vers le centre, comme nous l'avons fait avec ce texte. Assurez-vous qu'il est quelque part ici et que vous pouvez sauter aux branchements. Cliquez sur le Seigneur de Some rempli de texte d'espace réservé, cliquez sur insérer du texte, et encore une fois, si vous n'avez pas ce plug in, vous pouvez cliquer ici dans le plus cliquez ici, tapez dans Londres ipsum, et il vous montrera que Blufgan simplement cliquez sur installer et vous pouvez faire la même chose. Ce que je viens de faire, donnons-le. Je pense que quelque chose comme ça fonctionne bien. Comme je l'ai dit, c'est au milieu. Contrôlez Andi pour le dupliquer, et vous pouvez cliquer ici pour le positionner au milieu, contrôlé encore une fois et assurez-vous qu'il est au centre avec ceux-ci. Et enfin, revenons dans notre panneau de calques. Alors passons en commande quelques uns. Donc d'abord, nous avons cercle veulent juste en dessous, euh, votre maison loin de la maison donc il ira juste ici. Maintenant, Comme je l'ai dit, c'est le peu ennuyeux, mais c'est vraiment important bit toe Ordre ces couches, donc nous avons de la nourriture. Inclus est le 2ème 1 comme ça et ont un accès à la plage cercle et dis texte juste ici. Et enfin, vous pouvez les regrouper séparément, mais je vais juste les regrouper comme ça, donc contrôler g pour les regrouper en tapant sur nous parce que cela va être à propos de nous section et plus tard nous commençons à concevoir et nous allons inclure quelques icônes différentes ici dans ces cercles. Mais comme vous pouvez le voir pour l'instant, nous avons des choses qui évoluent assez bien. Comme vous pouvez le voir, nous avons cette mise en page agréable, propre et cohérente pour l'instant. Et plus tard dans la prochaine vidéo, nous allons inclure un témoignage, et je vais le placer juste ici, donc je te verrai là-bas. 20. Créer Wireframe 4: Eh bien, c'est maintenant sauter et créer ce témoignage. Donc, je vais cliquer ici. Et ce dont nous avons besoin, c'est ce texte. Donc, je vais ouvrir cet hédoniste et sélectionner cet autre texte ainsi Contrôle de les dupliquer. Déplace-le ici. Ensuite, déplacez-le juste en dessous et vous pouvez maintenir le décalage ou simplement le cacher et le déplacer vers le bas en position à quelque part ici. Et ce que nous voulons, c'est le positionner quelque part par ici. Maintenant, Maintenant, je veux que Teoh choisisse cette image. Donc, contrôlez le déplacer comme ça et puis positionnez-le simplement comme ça. Et puis vous pouvez le déplacer comme ceci parce que je veux créer une couleur d'arrière-plan plus tard. On commence à concevoir parce que je veux. Ce système a seulement pris Pop parce que je veux garder leur attention. Je veux qu'ils continuent de lire ça parce qu'ils s'ennuieront peut-être quand ils arriveront à cette section. Mais quand ils arrivent à cette section parce qu'il a cette touche de couleur, il gardera leur intérêt et il les gardera à lire. Et nous allons avoir l'image juste ici de la personne qui a dit ce témoignage alors commençons à concevoir ça. Donc 100 comme vous pouvez le voir, cela nous donne le même espacement qu'il est d'ici. Alors jugeons ça et positionnons-le. Peut-être 12345678 Ou tout simplement lui donner 100. Alors gardons tout cela cohérent. Choisissez ceci. Fais-le de la gauche. Donc ça va écrire,par exemple, par exemple, Jenny de Londres, comme ça et ce que nous voulons, c'est créer un bouton d'appel à l'action ici aussi, parce qu'ils veulent peut-être réserver à partir d'ici. Nous allons donc déplacer ce bouton d'appel à l'action tout au long de cette conception. Donc simplement sélectionné le contrôle D et vous pouvez avec, comme, ce appelé décalage vers C'est quelque part par ici. Et quand vous le voyez, vous pouvez le sélectionner à partir d'ici et simplement le dessiner juste ici juste au-dessus de zéro BG afin que vous puissiez réellement le voir. Et ce que nous voulons aussi, c'est de créer une citation afin de contrôler la position de cette façon et pour celle-ci, nous voulons la garder en italique. Et nous voulons créer 36 par exemple, et en sautant tout de suite créé des styles de personnages à partir de lui et je vais tout simplement orteils. Choisissez cette citation dans l'exemple que j'avais déjà créé. Donc, comme vous pouvez le voir, c'est simplement une belle citation de cette personne disant à quel point il était merveilleux de rester dans cet endroit . Alors donnons-lui un peu d'espacement. 1234 Même chose que pour le reste de notre design. 1234 Et bouge toujours comme ça Et enfin, créons notre image. Nous allons donc choisir notre image pour aller de gauche à droite. J' ai enlevé la frontière. Ce que nous voulons pour les dimensions sont 800 poids 500 et vous pouvez cliquer ici. On va leur donner un rayon de 10 et 10, parce que c'est un haut, non ? C' est un haut en bas, non ? Et comme vous pouvez le voir, si vous reprenez un peu plus près, ces bords sont droits et ceux-ci sont autour d'elle parce que nous voulons les garder droits parce qu'ils sont bordés de ce bord gauche de notre image. Donc ce que nous voulons maintenant, c'est d'organiser ça un peu mieux pour pouvoir regrouper tout ce contrôle G. Et nous pouvons l'utiliser comme témoignage. Beachy comme ça et ça va être notre image de témoignage. Donc, comme ça et ça va être notre texte. Donc ce que je veux faire, c'est les placer au centre d'ici. Donc, ce que nous pouvons faire est de créer un autre rectangle jusqu'à ce qu'il s'aligne avec cela. Avec cela, le bord inférieur aussi bien. Et ce que je veux, c'est positionner mon image, alors sélectionnez-les les deux. Cliquez ici. Il placera l'image au centre de ce rectangle et fera de même pour le texte et le bas comme ceci. Ensuite, retirez le rectangle et là vous allez. Maintenant, ce que je veux, c'est de les aligner un peu mieux. Double-cliquez sur votre port d'art et cliquez ici sur la grille de mise en page. Donc ce que je veux, c'est de les positionner tous sur le bord gauche de six. Une fois de plus, nous en avons 12 et ce sera sur le bord gauche de six. Donc première colonne, 2e 3e 4e 5e et puis six. Donc celui-ci, fondamentalement, jusqu'à ce qu'ils cliquent sur le bord gauche de celui-ci, nous en aurons un au centre qui sera vide et puis cette image va remplir le reste de l'espace. Donc, il va orteil look agréable, simple, propre, incompatible avec le reste de notre design. Et je pense vraiment que ça a l'air propre et facile à lire. Donc je vais orteil unde groupe ceci et je vais les sélectionner tous. C' est le premier. Voyons si nous commandons tout correctement. Nous avons sélectionné tous les contrôle G et appelé ce témoignage comme si maintenant que nous avons créé que ce que nous pouvons faire est de déplacer la section des chambres parce que c'est la section la plus importante et cette section va orteil essentiellement vendre ce site pour manger les visiteurs. Donc, dans la prochaine vidéo, nous allons sauter et créer une section de chambres juste ici où nous allons explorer les différentes pièces et ce qu'elles offrent. Quand les gens arrivent à cette section quand ils défilent vers le bas. Alors je te verrai là-bas. 21. Créer Wireframe 5: ce n'est pas sauter dans et créer des chambres offrent. Alors cliquez ici et je vais choisir ces deux patrouilles D pour les dupliquer, les déplacer et simplement maintenir le décalage et les positionner en arrière. Mais sélectionnez-les comme ça et assurez-vous qu'ils sont 100 mêmes comme tous les autres. Et ici, nous allons écrire pour explorer nos chambres parce que la mort va être notre offre principale. Cliquez ici. Chambres confortables pour l'application de test Alexe parce que, comme ils l'ont dit, copie est vraiment importante et cela va expliquer un peu plus loin parce qu'ils savent déjà qu'ils veulent venir vacances aux pieds à cet endroit. Mais si vous écrivez beaucoup plus et expliquez beaucoup plus s'il sera gravé dans ce cerveau un peu plus quand vous leur dites ce qu'ils veulent vraiment de cet endroit. Donc maintenant, nous allons commencer à créer nos images, alors utilisez un rectangle. Mais avant qu'on ne le fasse, ne choisis pas ici. Cliquez sur. Super ! Parce que nous allons avoir besoin sont super et nous allons simplement dessiner un orteil rectangle sentir quatre sur ces et nous allons orteil, Déplacer ici et appeler ça une pièce un parce que ça va être une pièce Une image et 5 24 avec est très bien et 302 Utilisons cela pour la hauteur. Maintenant, ce que nous allons utiliser ici est 10 sur 10 points parce que nous allons avoir un rayon de coin supérieur gauche et supérieur droit Toby autour d'elle, et nous ne voulons pas utiliser la bordure. Mais nous voulons utiliser la couleur afin qu'elle soit utilisée cette couleur et parce que nous ne l'avons pas créée, sélectionnons cela comme ça et cliquez simplement ici. Orteil. Sélectionnez cette couleur, qui est la couleur de nos images. Et si je clique ici est que vous pouvez voir facile, vous voyez donc il a sélectionné correctement. C' est fermé parce qu'on n'en a plus besoin. Cliquez ici. Et comme je l'ai dit, suffit de cliquer sur la couleur, et il apportera la touche de couleur orteil, qui sont objet que vous voulez. Donc, si je cache la mise en page, vous pouvez le voir sélectionné correctement, donc une fois de plus inclure la mise en page, parce que nous allons en avoir besoin et déplacer ce Toby 100. Et si vous ne pouvez pas voir la flèche vers le bas donc shift. 123456789 10. Donc, encore une fois, nous avons la même distance d'ici à ici. Comme dans tous ces autres exemples. Alors appuyez sur le contrôle d Appelez cette pièce, aussi, et positionnez-la au milieu comme si le contrôle. De a appelé cette salle trois Hold shift et flèche droite et vous pouvez le mettre en place comme ça . Et comme vous pouvez le voir, il nous donne exactement la même distance de 40 pixels entre ces images. Donc, si je n'aime pas ici, cacher notre mise en page, vous pouvez voir que nous avons un bel espacement entre chaque image afin que les gens ne puissent pas cliquer accidentellement sur l'une ou l'autre. Donc, ce que nous voulons maintenant est de créer du texte si contrôlé D sur cette position juste en dessous pièce numéro un comme, alors assurez-vous qu'il va de gauche à droite. Positionnez-le ainsi et assurez-vous que ce sont les premières choses en premier. Il a utilisé 36$ par semaine et appelle cette chambre classique. Mais assurez-vous que c'est un régulier, puis créez simplement un autre style de personnage ici. Donc celui-ci est italique, et celui-ci est régulier. Alors sautez ici et assurez-vous qu'il est à 40 pixels d'ici. 1234 Contrôle de répliqué une fois de plus, et vous pouvez utiliser celui-ci pour être 24 mais régulier. Donc celui-ci et nous allons écrire des orteils, à partir de 24$ par nuit. Donc cette chambre va coûter autant par nuit. Ainsi, comme nous l'expliquons dans les exemples de l'analyse de la concurrence, il est vraiment important que vous créiez de la valeur et que vous créiez de l'intérêt pour votre design. Ainsi, lorsque les gens explorent ces pièces, ils peuvent immédiatement savoir s'ils peuvent se le permettre ou non. Donc, ils peuvent le savoir d'ici parce que quand ils verront ce prix, s'ils sont hors de leur budget, ils quitteront simplement ce site Web et ne passeront plus de temps. Ils ne seront pas furieux parce qu'ils savent qu'ils n'ont pas les moyens de le faire et qu'ils vont tout simplement passer à autre chose. Mais s'ils peuvent se le permettre , ils continueront à lire. Et tous ces éléments en haut servent que nous les persuadons. Donc, même s'ils n'ont pas le budget, ils sont toujours intéressés par tous ces éléments et toutes les informations qu'ils ont déjà. Alors peut-être que ça va emprunter l'argent. Peut-être qu'ils vont, je ne sais pas, unir leurs forces, et peut-être que deux ou trois d'entre eux iront dans la même pièce et partageront simplement les coûts cette pièce. Alors bougeons un peu pour le bas. Donc, ce que nous voulons est de créer des fonctionnalités ici pour que chaque chambre ait des caractéristiques différentes en fonction du budget et de la pièce que vous avez choisie. Donc tout simplement contrôlé. En effet, et je vais le déplacer vers le bas 40 pixels une fois de plus. Donc ça va être 20 parce que c'est proche. 1234 Ça va être 40. Appelons ces lits comme ce contrôle de. Nous allons le dupliquer, il suffit de le déplacer une fois ou peut-être même deux fois, et donne un espace agréable et en tapant un. Donc on va lui donner une couleur différente. Alors passons de quelque chose comme C cinq c cinq c cinq percenter. Joli. Super. Si adulte cliquez ici en hauteur, les colonnes que vous pouvez voir. C' est beau, une simple couleur grise comme ça. Donc, si un nœud de saut cliquez ici orteil, ramène ma mise en page. Ce que je veux faire est de dupliquer ceux-ci, alors contrôlez le ou vous pouvez simplement les tenir, tenir et les dupliquer comme ça. Maintenez la touche Maj sur, comme si peut-être 20 pixels. Je pense que c'est bien. Donc, nous allons utiliser ce raccourci une fois de plus comme ça. Alors, comme ça, comme ça et ce que nous voulons, c'est avoir six caractéristiques différentes. Alors créons un de plus. Donc, s'ils veulent en savoir plus sur cette salle, ils peuvent simplement cliquer ici et aller pour en savoir plus. Alors créons ça aussi. Alors donnons ce 40 l cliquez ici. Ils ne peuvent pas apprendre plus de contrôle. R. Pour sélectionner le texte et cliquez simplement ici orteil. Soulignez-le parce que ce sera notre lien. Et nous allons changer la couleur de ce lien pour décolorer afin qu'ils puissent le savoir. S' ils veulent en savoir plus. Ils peuvent simplement cliquer juste là, et il les mènera à la page dédiée pour cette salle classique. C' est pourquoi je continue de dire qu'il est vraiment important de créer de l'intérêt et d'être honnête afin que vous ne perdiez pas le temps des gens pour qu'ils puissent le savoir en un coup d'œil. S' ils peuvent se le permettre, ce que chaque chambre a, et s'ils veulent vraiment en savoir plus, ils peuvent cliquer sur l'orteil du bouton, aller et en apprendre plus et ensuite réserver la chambre sur cette page particulière, qui être une page dédiée à cette pièce particulière. Mais s'ils aiment ça, et s'ils aiment ce qu'ils voient ici, ils peuvent cliquer sur le livre. Maintenant, ils peuvent aller ici. Cliquez sur Réserver maintenant, et il y aura quelques autres boutons d'appel à l'action ci-dessous lorsque nous les avons conçus . Donc, sélectionnons-les et modifions certaines de ces informations. Donc ça va être vue sur la plage et ça va se passer ? Aucun. Alors disons-le. Choisissez déplacer celui-ci. Donc non, et comme nous l'avons fait, nous allons comme ça, alors assurez-vous qu'il est doublé comme du savon sur ce qui va être dit Terrace et encore une fois faire la même chose. 12 et ça va prendre. Tu sais, ça va être WiFi et ce pittoresque très oui, comme ça. Ça va être climatisé comme ça. Cachez-le plus Ce Oui, comme ça. Donc, comme je l'ai dit, ce ne sont que des caractéristiques principales. Et s'ils veulent plus de fonctionnalités, ils vont aller à l'intérieur de la page particulière, puis s'informer et voir plus d' images pour cette pièce particulière et ce qu'elle a à offrir. Et ça va écrire les orteils. Oui. Maintenant, nous devons les regrouper. Alors localisez les lits, localisez un, et vous pouvez les déplacer, comme ça jusqu'aux sommets de juste en dessous du prix de départ. Comme cette vue sur la plage. Et pas les bouger comme cette terrasse et pas sûr juste en dessous entre vous et pas Y cinq. Oui, il ira en dessous de la terrasse. Donc ici, climatisation va passer en dessous du WiFi et oui et parking et oui, ils vont être juste ici. Et enfin, nous avons besoin de ça. En savoir plus. Alors déplacez-le tout le chemin vers le bas et vous pouvez simplement maintenir, déplacer, cliquer ici et sélectionner. En savoir plus aussi. Contrôlez G pour les regrouper. Et peut-être que nous pouvons appeler ces fonctionnalités comme ça. Et maintenant, ce que nous pouvons faire est de sélectionner tout ce contrôle De et nous pouvons tenir notre touche Maj pour les déplacer, pour entendre la position et comme ainsi et les déplacer tous. Donc, tout ce qui a sélectionné juste en dessous de la pièce à parce qu'une pièce pour avoir ces caractéristiques font la même chose. Alors contrôlez le mouvement. Tout ça en dessous de la chambre trois, Hold shift comme ça, comme vous pouvez le voir, il s'enclenche en position et ça va être une chambre familiale. Alors sélectionnez cette chambre familiale de haricot à partir de, et il sera un peu plus cher et il sera 36$ par nuit et ce sera la chambre la plus chère. Donc chambre Grand Lux et ça commencera à partir de 48$ par nuit comme ça. Et, bien sûr, avec des fonctionnalités disant, comme avec toutes les autres choses dans la vie, fondamentalement, vous avez une terrasse va être oui pour cet exemple dans cette salle, tout cela est va l'écrire. Oui. Et pour ce dernier, nous avons une vue sur la plage. Donc, comme vous pouvez le voir Ah, celui-ci n'a pas autant de fonctionnalités. Celui-ci en a plus, et celui-ci en a le plus. Donc, au fur et à mesure que le prix augmente, les contrats à terme progressent aussi. Donc, ce que nous devons enfin entrer ici, c'est parce que cela va avoir deux lits et cela va avoir quatre lits parce que c'est le plus grand, comme ça et enfin, créons un beau fond simple. Donc, nous allons utiliser rectangle dessiner un rectangle comme ça et ce que nous voulons est de donner des dimensions 20. C' est très bien. Et 6 21 Allons avec ça. Et ce que nous voulons, c'est lui donner une adresse autour de lui. Donc ici va être tente juste ici. 10. Donc l'adresse du fond va être autour d'elle. Et pour ces images, les bords supérieurs vont être mis à la terre. Donc ce que nous pouvons appeler ceci est une chambre un BG tellement plus avec juste en dessous d'une chambre une caractéristiques et juste à peu près la chambre deux comme ça. Donc chambre 1, BG et nous pouvons le positionner orteil comme ça, et nous pouvons sélectionner tout ce texte et plus, qui peut-être 20 pixels vers la gauche. Beaucoup d'abord sélectionner plus vieux, donc comme ça, et il continue d'ouvrir cela sans raison apparente. Mais vous pouvez le déplacer comme ceci et assurez-vous juste que vous êtes à 20 pixels de ce bord gauche. Donc 12 avec votre quart de travail sélectionné, et c'est fondamentalement tout parce que lorsque les gens choisissent dans cette pièce est leur donnera un beau fond d'ombre portée. Donc je peux dupliquer que BG Control sur D a appelé une chambre à B. J. Faisons-le avec cette position centrale juste en dessous de la chambre deux caractéristiques et tout comme ça. Ensuite, sélectionnez toutes ces fonctionnalités sur ce texte, maintenez la touche Maj, et puis vous pouvez le positionner, euh, Toby comme celui-ci. Décalez donc 12 pour déplacer 20 pixels d'ici. Ou tu peux aller 40 si tu veux. Et sélectionnons-les tous et donnons-leur 40 ainsi et faisons la même chose pour celui-ci. Donc 1234 Et enfin, sélectionnez cette pièce pour être contrôlée par G. Citation profonde de trois B, Jim comme ça, positionnez-le tout le chemin et en bas juste au-dessous de ces futures et positionnez-le jusqu'à ce qu'il se réunisse ici. Donc, je rencontre une légère erreur, mais passons simplement de les changer donc ça va être une chambre trois. Comme ça et maintenant Enfin, regrouperons tous. Alors contrôlez G. Appelez cette salle trois, appelez , cette pièce, et enfin appelez cette pièce une parce que ce sera beaucoup plus simple plus tard quand nous commencerons toute réunion. Donc si je n'aime pas ici, cache notre grille, tu peux voir à quoi ça ressemble. Donc tout est beau et propre. Je n'aime pas vraiment comment ça ressemble ici parce que ça a montré la frontière juste ici en haut. Je ne m'inquiète pas, car lorsque vous incluez l'image, vous pouvez mettre l'ombre portée juste en dessous de l'image. Et vous pouvez fondamentalement le savoir et le cacher fondamentalement pour qu'il n'apparaisse pas et vous pouvez même cacher et ensuite simplement le montrer en cliquant. Alors faisons ça pour l'instant. Donc chambre BG sélectionner tous. Donc celui-ci les appelait tous et simplifiait la frontière. Et nous allons inclure la frontière plus tard, quand nous commencerons à concevoir et une dernière chose groupe de paillettes, tous contrôlent G et tapant des pièces comme ça et c'est tout pour les chambres. Dans la section suivante, on va sauter. Et si je vais à mon cadre métallique, vous pouvez voir que nous venons de créer ces chambres, et c'est notre offre principale, et nous avons des activités à proximité. Mais entre eux, nous allons inclure des offres secondaires et des fonctionnalités secondaires où nous allons explorer et expliquer au spectateur pourquoi l'hôtel est génial, pourquoi il devrait le choisir et quelques fonctionnalités supplémentaires. Il a, comme le jardin de la piscine et le parking, donc je vous verrai dans la vidéo suivante. 22. Créer Wireframe 6: ne commençons pas et conçu ces fonctionnalités supplémentaires. Mais avant qu'on ne touche la commande de contrôle s pour dire notre projet. Et comme vous pouvez le voir, nous n'avons plus d'espace ici en bas. Si simple. Cliquez sur votre port et vous pouvez étendre cela autant que vous le souhaitez afin que vous puissiez avoir cet espace supplémentaire pour la conception. Donc, ce que nous voulons orteil inclure maintenant sont quelques fonctionnalités supplémentaires. Donc, par des fonctionnalités supplémentaires, comme vous pouvez le voir, c'est notre offre principale. Donc, les chambres et ils peuvent explorer ces chambres. Et en dessous, nous voulons les persuader un peu plus et leur montrer à quel point notre hôtel est grand et d'inclure quelques fonctionnalités supplémentaires de celui-ci à l'intérieur. Commençons donc par l'image, et elle aura exactement les mêmes dimensions et cette image afin que vous puissiez contrôler De a déplacée, puis positionnez-la juste ici dans l'espace. Sautez dans les arrestations, cliquez sur le panneau ici parce que c'est la couleur de notre image. Et puis ce qu'on peut faire est d'aller ici, puis de maintenir le décalage et de le déplacer. 100 pixels vers le bas. Donc même liquide tout est éteint. Ces autres. Donc ce que nous voulons ensuite, c'est de le déplacer vers le bas. Et ça va être notre image de piscine parce que ce sera notre premier film. Sautez dans les chambres, contrôle de, dupliquez ce texte et faites-le glisser au-dessus, puis déplacez-le simplement vers le bas. Positionnez ici aussi. Je n'aime pas inclure la grande position de mise en page les deux font qu'ils ont laissé une ligne. Et cela va orteil droit dans la piscine privée parce que certaines personnes veulent vraiment l'appât des orteils dans une piscine qui est inclus dans l'hôtel. Une houle par, en dehors de la plage. Alors positionnez-le orteil ici. Et si vous vous souvenez, nous lui avons donné exactement les mêmes paramètres ici. Donc, le texte va orteil contient six colonnes, une sera vide, puis le reste sera rempli par l'image. Donc, si vous pouvez voir ici, on fait exactement la même chose, fondamentalement. Donc je zoomais un peu plus près. La position est un peu mieux, et je vais simplement faire un double clic sur mes autres fichiers et copié du texte que j'ai déjà créé pour elle. Comme vous pouvez le voir ici. Donc, ce que vous voulez enfin est de regrouper ces deux afin de contrôler le type G dans le texte comme si sélectionnez l'image et cliquez ici pour le positionner au milieu. Maintenant, avec ceux qui ont sélectionné le contrôle de touche G publiquement crié ici et taper pool parce que ce sera un de nos fonctionnalités contrôlent la pour dupliquer l'ensemble du dossier. Maj entier, déplacez-le vers le bas et jusqu'à ce que vous ayez 100 comme vous pouvez le voir ici, donc 100 est sélectionné. Maintenant, ce que vous voulez, c'est faire pivoter ces deux-là. Donc, cela va être jardin comme ça et ce que nous voulons est de déplacer le texte en haut, déplacer l' image en bas et ce que nous voulons est de déplacer la décision de l'image orteil et de le retourner comme ceci et de déplacer le texte à ce bord et à cet orteil. Faites-en une ligne avec cette colonne juste ici sur la gauche. Donc, comme vous pouvez le voir, il ira de gauche à droite, puis enfin à gauche dans notre troisième section. Donc, pour celui-ci, ce que nous voulons est d'appeler beau jardin, comme vous pouvez le voir et même comme je l'ai fait avec l'exemple précédent, je vais copier et coller le texte déjà créé et avec le jardin terminé Contrôle D , puis vous pouvez simplement le déplacer vers le bas. Ou c'est encore plus rapide de le faire de cette façon. Donc il suffit de dupliquer ce 1er 1 Assurez-vous que ses 100 assurez-vous qu'il est tout le chemin vers le bas et appelez celui-ci un parking privé parce qu'il est vraiment important pour certaines personnes qu'ils ont un parking privé. Donc, au lieu de la piscine privée appelée ce parking privé et même comme un fait avec ces deux, je vais simplement texte basé déjà créé pour elle. Et maintenant, comme vous pouvez le voir, nous avons ces trois très belles sections. Si adulte, nous pouvons cacher la grande mise en page. Comme vous pouvez le voir quand ils descendent, ils peuvent vraiment explorer. Donc, à partir du haut, ils ont cette très belle navigation simple. Ils peuvent passer à l'image du héros, s'ils peuvent en apprendre plus sur l'hôtel. Ensuite, ils descendent un peu, et ils explorent un peu plus de fonctionnalités supplémentaires de cet hôtel. Ils ont lu un beau grand témoignage avec la personne disant à quel point ils sont heureux de l'hôtel. Nous pouvons voir les différentes chambres qu'ils ont des orteils offrent. Donc, à partir du moins cher ici, jusqu'au plus cher ici. Si vous n'êtes pas persuadé, passons un peu vers le bas afin que vous puissiez explorer un peu plus de fonctionnalités que cet hôtel a à offrir. Et puis enfin, dessous de cela, nous allons créer une section supplémentaire qui va tout droit dans ce qu'il faut faire quand à Nicholas. Alors peut-être qu'il est important orteil, bien sûr, Persuade les orteils acheter une chambre et de rester dans cet hôtel. Mais ce qu'ils peuvent réellement faire à Mykonos pour que vous puissiez les aider à atteindre et cette décision en leur montrant simplement différentes activités qu'ils peuvent faire une fois en douceur. Nous allons donc concevoir ça dans la prochaine vidéo. 23. Créer Wireframe 7: Donc, ne sommes pas conçus. La prochaine section de la vérité va être nommée par les activités. Et si nous zoomons un peu plus près ici, vous pouvez voir les chambres et les offres secondaires que nous venons de créer. Dans la vidéo précédente, vous pouvez voir des activités à proximité, ce qui va aider à les persuader de réserver les chambres dans cet hôtel. Donc, comment nous pouvons faire cela est simplement sélectionner ce texte contrôlé profond. Donc, fondamentalement, comme vous pouvez le voir, je fais exactement la même chose avec chacune de ces sections parce qu'il contient exactement les mêmes éléments que tous les autres. Donc c'est plus avec un peu vers le bas quelque part ici jusqu'à ce qu'il se rencontre, et vous pouvez même maintenir Shift et le déplacer vers le bas jusqu'à ce qu'il soit à 100. Donc ST comme tous les autres. Donc, cela va écrire dans ce qui est à faire dans la douceur. Et nous allons simplement citer, battu celui-ci et basé le dos orteil ici et ce Texas va orteil juste ici, juste quelques activités à proximité que vous pouvez vous aider à profiter de la douceur plus et nous allons déplacer cela vers le bas ici et ce que nous veut est de créer une image qui va descendre ici. Alors arrêtez vite, incluez notre grand dos. Et nous allons créer un rectangle d'ici à ici. Nous allons enlever la bordure, lui donner une couleur pour l'image. Donc dire comme nous l'avons fait, tout le reste est des exemples. Déplacez 100 comme ça et ça va faire 600 en hauteur comme ça. Alors maintenant, déplace-le ici. Ça va être l'image pour l'instant. Et dupliquons ce texte et Mulet et vers le bas. Pour une raison quelconque, il continue à sélectionner les calques. Je ne veux pas qu'il sélectionne les orteils, mais ce ne sont qu'une partie de la boîte. Ce sera X'd, mais tu apprends à travailler avec les orteils pendant que tu avances. Donc, pour celui-ci, je vais créer un texte dis. Je vais les orteils, fais la ligne gauche comme ça. Et la première attraction sera Dallas, qui est cette ville ancienne impressionnante située près de Nicolas. Donc 1234 faire 40 contrôle de et a déplacé ce bas en bas comme ça. Alors je les ai juste changés. 1234 et on va faire ça 24 comme ça. Alors assurez-vous qu'il est à 40 comme il est en ce moment. Et encore une fois, je vais simplement copier et coller le texte déjà créé pour cela. Comme vous pouvez le voir ici. Alors, ce qu'il nous faut maintenant ? Parce que ça va être un curseur. Nous allons avoir besoin de créer deux flèches différentes afin flèche gauche et droite afin que les gens puissent faire défiler vers le bas et voir entre ces attractions ce qu'ils aiment le plus, et peut-être être persuadés un peu plus de rester à cet endroit. Alors commençons par créer un cercle et zoomer un peu plus près quelque chose comme ça, et peut-être lui donner 92 semaines. 92. Appuyez sur, entrez saut, donnez-lui la même couleur. Ou peut-être qu'on peut lui donner cette couleur. Ça n'a vraiment pas d'importance. Retirez la bordure et assurez-vous qu'elle est quelque part ici. Et donnons à celui-ci la position « Let's position « ici pour l'instant. Sautez en vue et appelez ce cercle comme ça, et maintenant nous allons devoir affiner l'icône. Il en a déjà créé un pour mon exemple. Je vais le baser sur les orteils ici, donc je vais cliquer sur les orteils et le coller et nous allons le positionner au centre. Alors sélectionnez-les tous les deux. Frappez ici, frappez ici et je vais le rendre blanc. Alors venez ici, faites-le blanc et ça va être notre flèche gauche. Donc, contrôlez g pour les regrouper et appelez simplement Flèche gauche comme ceci. plomb de contrôle obligeait plus celui-ci à droite, comme ça. Et ça va être un écrivain de et l'ouvrir et l'appeler comme ça et ensuite il suffit de le retourner comme ça. Je vais le positionner ici, mec. Déplacez celui qui m'a déjà vu, ou peut-être même 80 comme ça. Je pense que ça a l'air bien, mais peut-être que nous pouvons le mettre en position pour que nous l'ayons. Je viens de découvrir de l'espace entre le canapé, double vite et cache ça. Vous pouvez voir à quoi ça ressemble, mais je ne pense pas que ce soit vraiment une bonne idée de les avoir comme ça. Donc, nous allons simplement utiliser la même couleur que nous l'avons fait pour nos images. Donc cette couleur oui, et pour les flèches. Oui, gardons-les comme ça pour l'instant. Nous allons changer l'ensemble des voitures et des styles. Lorsque nous commençons à concevoir, sélectionnez le contrôle de texte G, puis simplement avec ce groupe sélectionné. Sélectionnez ces flèches et cliquez ici, car cela va vous assurer que tout est au centre sur ce groupe et simplement tout sélectionner. Contrôle G. Et nous allons appeler ça ce qu'il faut faire en douceur ou vous pouvez appeler ça des activités ou tout ce que vous voulez. Faisons ça parce que ça va être sympa et simple avec des noms courts, comme avec tous nos autres éléments. Donc, comme vous pouvez le voir, nous avons créé cela et maintenant nous arrivons à la partie la plus importante, notre formulaire de réservation, et c'est ce que nous allons concevoir dans la prochaine vidéo, donc je vous verrai là-bas. 24. Créer Wireframe 8: Maintenant, il est temps de concevoir notre formulaire de réservation. Et si nous zoomons un peu plus près, orteils notre cadre métallique, vous pouvez voir ce livre. Votre séjour avec nous est juste ici au sommet. Nous avons du texte sur la gauche avec un bouton d'appel à l'action. Mais nous allons réellement déplacer cet appel au bouton Action juste ici vers la droite, car il est juste plus logique qu'il soit sous la forme. Et ça va être notre formulaire de réservation. Alors concevons ça. Je vais orteil sélectionner ce fond et orteil. Entrez différents joueurs spécifiques. Vous pouvez maintenir le contrôle et cliquer, et il va cliquer directement orteil ce lien plutôt que sourde orteil rapide, ouvrir le dossier, puis double rapide pour sélectionner cette couche différente. Donc, je vais le déplacer tout le chemin vers le bas comme ça, vais le sélectionner, maintenir la touche Maj pour le déplacer, puis simplement le sélectionner d'ici et le déplacer 100. Donc, comme vous pouvez le voir, nous avons exactement le même espacement pour tous. Maintenant, ce que nous voulons faire n'est pas rapide ici, et nous voulons l'appeler simplement réserver Bijie comme ceci parce que nous voulons savoir pour différents milieux ce qu'ils sont sur la page. Ouvrez donc les activités, sélectionnez-les pour les contrôler en profondeur, déplacez-les et positionnez-les simplement vers le bas. Alors sélectionnez ces deux et positionnez-les vers le bas comme si déplacé en dessous de l'orteil catholique. Inclure le grand dos, parce que nous allons en avoir besoin pour l'instant. Ligne de gauche. Cette ligne de gauche parce que le Texas va être sur la gauche. Et nous allons tous les positionner pour entendre celui-ci aussi, quand déplacer cela un peu vers le bas et ici va écrire un livre votre état avec nous. Et quand c'est un état, je vais le déplacer un peu parce que nous voulons garder exactement la même disposition que nous l'avons fait dans chacun d'eux. Donc 51 vide et puis 6 40 formulaire et de ne pas perdre plus de temps simplement aller copier le texte déjà créé. Et comme vous pouvez le voir, c'est promotionnel, donc ça leur dit exactement ce que voulait le client. Alors remplissez le formulaire pour réserver votre séjour avec nous, et vous pouvez économiser jusqu'à 30% sur le prix. Si vous réservez directement sur notre site Web plutôt que sur les services de réservation en ligne, parce que c'est le point principal, c'est ce qu'ils voulaient pour nous de créer est pour eux remorquer, éviter les services de réservation et réserver directement via ce site Web. Alors positionnons-le 40. Donc, comme ça jusqu'à ce qu'ils se rencontrent jusqu'ici. 1234 vers le bas. Et nous voulons aussi créer deux copies supplémentaires. Donc, sélectionnez celui-ci tient décalage et puis simplement déplacer vers le bas et juste ici, aller à taper Appelez-nous et nous allons orteil basé dans le nombre et juste deuxième donc plus avec 20. Si vous vous souvenez, nous avons fait exactement la même chose avec l'exemple précédent. Donc, nous allons simplement basé sur le numéro de téléphone ici va être bleu parce qu'il va être cliquable. S' ils veulent appeler directement à partir d'ici, ou s'ils utilisent leur téléphone mobile dinging. Il suffit de cliquer ici pour provoquer directement. Donc, nous allons dupliquer les clés pour les déplacer vers le bas 40 aussi, comme ça va être des e-mails comme ça, et positionnons cet orteil droit. Donc, jusqu'à ce qu'ils rencontrent 12 et je vais les orteils sauter en avant et copier et coller leur adresse e-mail. Ce n'est pas directement leur e-mail. Ils vont le changer quand ils créent ce site Web et le faire vivre afin qu' ils puissent créer un email dédié pour ce site Web. Donc, nous allons rapidement commander ce texte comme Donc ça va être ici. Ceci ici et vous pouvez regrouper tout et appuyer sur le contrôle G et l'appeler texte comme ça. Et ce que nous voulons faire maintenant, c'est le placer au milieu comme ça, et maintenant nous voulons créer un formulaire de réservation qui ira juste ici à droite. Donc, pour le formulaire de réservation, allons rapidement utiliser ce contrôle de texte D parce que nous allons en avoir besoin à quelques endroits et simplement avec vous ici. Les premières choses d'abord. Créons le type de pièce parce que c'est la première chose que nous devons créer. Assurez-vous que c'est à six heures. Donc 123456 Alors assurez-vous qu'il s'enclenche à bout ce bord gauche de cette colonne. Positionnez-le ici, contrôlez de, faites un duplicata de celui-ci, puis déplacez-le simplement vers le bas. Et ce que nous voulons écrire dans son classique, et ce dont nous avons aussi besoin, c'est un champ où ce texte va réellement aller. Donc, nous allons créer un rectangle ou vous pouvez utiliser ce bouton. Sautons à l'intérieur et trouve-le. Ici, c'est. Alors, réservez maintenant bouton. Vous pouvez le copier de ce témoignage aussi contrôler pour le dupliquer et ensuite simplement le déplacer jusqu'ici parce que ce sera, ah, ah, beaucoup plus facile de le faire de cette façon. Il suffit donc de le positionner en place à partir d'ici. Donc 1234 alors nous n'avons pas besoin de ce texte de chambre classique, et cela va être notre type de chambre ou simplement l'appeler une chambre et en vue. Nous allons changer cette couleur pour cette couleur, donc c'est fondamentalement la même couleur de ce texte. Assurez-vous qu'il est sorti de la ligne. Positionnez le bord gauche de l'orteil 1234 et assurez-vous qu'il a la bordure. Et pour la couleur du champ, nous allons utiliser le blanc, mais pas pour le texte, mais plutôt pour la plage si blanche comme ça, et ce que nous voulons aussi est de renommer la presse d'entrée, entrer parce que c'est va être notre contribution et nous n'allons pas nous en servir. Donc je ne sais pas pourquoi il est élu et ça. Alors, changeons-le rapidement à cela. Donc, il a exactement le même style que nous voulons. Donc 1234 et nous voulons créer une bordure pour cette entrée. Et une dernière chose étendue à ce bord jusqu'à ici jusqu'à ce qu'il se rencontre. Parce que nous voulons qu'il reste six pour ce grand, et nous allons en créer deux en dessous et un gros en dessous de la dette. Donc grand va être six plus petits vont être trois. Et enfin, Big One aura six ans aussi. Donc ici, nous allons avoir besoin d'une flèche parce que c'est la flèche qu'ils vont utiliser pour pointer et descendre et ouvrir les pieds et explorer différentes options. Donc, une fois de plus, je vais utiliser sur la flèche que j'ai déjà créée. Positionnez-le ici comme ça 1234 Et si vous voulez savoir comment créer un étroit, je vais vous le montrer aussi. Je suis allé directement ici, par exemple. Vous pouvez utiliser le mental et vous pouvez cliquer sur maintenir le décalage, assurez-vous qu'il est à 45 degrés et tout le décalage une fois de plus, comme si frapper l'échappement. Et pour la bordure, vous pouvez augmenter la taille 25 par exemple. Vous pouvez cliquer ici, et vous pouvez faire pivoter la forme entière afin de la sélectionner quelque part ici comme ça. Et vous pouvez simplement déplacer complètement et tourner. Et voilà. C' est ta flèche. Ou si vous ne voulez pas que ce soit cela, pourquoi avez-vous simplement pu cliquer ici et l'abaisser à ici ? Peut-être que vous pouvez aussi réduire la taille ici, et vous pouvez également jouer avec ces valeurs ici. Donc, c'est comme ça que vous pouvez créer un étroit. Mais je voulais accélérer un peu le processus et inclure ceux déjà créés. Donc, nous allons localiser. C' est juste ici, et le type de chambre est devenu orteil. Laissez-le à l'intérieur comme ça, et assurez-vous que c'est à 41. Donc, comme vous pouvez le voir, ce n'est pas le cas. 1234 Maintenant, c'est à 40 ans. Alors ramène le contrôle D et on va aux pieds. Déplacez celui-ci vers le bas. Donc 1234 plus avec juste en dessous, cela va vérifier comme ça. Et je vais double-cliquer ici. Tapez, enregistrez comme ça et nous n'avons pas besoin de flèche vers le bas. Nous sommes allés le supprimer et l'entrée va être réduite à trois. Donc comme ça. Donc, comme je l'ai dit, cela va avoir six colonnes de large. Cela va être trois colonnes de large et enfin là où il est dit livre. Maintenant, nous allons soupirer des mois de douleur, date et enfin année comme ça et ce dont nous avons besoin est aussi un chèque. Donc, contrôlez D et vous pouvez le déplacer comme ceci jusqu'à ce qu'il rencontre la fin de nos colonnes. Comme ça, positionnez vers le bas et vous pouvez taper. Consultez ici et vous pouvez changer le nom du dossier à vérifier également. Comme ça Et enfin, cette information va être exactement la même. Et pour ce dernier, contrôlez le et vous pouvez le déplacer comme avec tous ces autres. Positionnez ceci vers le bas et cela va être des invités et changez ceci pour écrire des invités comme ça parce que nous avons besoin d'eux pour choisir le nombre d'invités qu'ils veulent avec eux. Donc, par exemple, quelqu'un vient seul. Quelqu' un vient à cinq personnes. Quelqu' un vient avec son partenaire, des gens qui ont des enfants et ainsi de suite. Il est donc très important pour eux de choisir cela, car certains types de chambres ne peuvent pas accueillir autant de personnes et certaines chambres peuvent le faire. Ainsi, par exemple, les personnes travaillant dans cet hôtel peuvent entrer en contact avec vous avec les informations que vous allez leur donner lors de votre livre. Donc, quand vous quikbook maintenant et il va vous emmener à la page spécifique où vous allez payer où vous allez entrer vos informations personnelles. Mais c'est juste pour eux de savoir combien de personnes viennent avec vous, donc ils n'ont pas besoin de combien de lits vous pourriez avoir besoin, combien de salles de bains et ainsi de suite, et surtout si vous venez avec plus de voitures afin qu'ils puissent savoir combien places de stationnement qu'ils peuvent vous laisser pour vous et vos visiteurs. Donc une chose violente nous avons besoin d'un bouton juste ici, donc encore une fois, nous allons faire la même chose. Sautez dans le témoignage, choisissez le fond, contrôlez le mouvement juste à l'extérieur du dossier comme si et enfin juste déplacé ce bouton tout le chemin vers le bas de l'orteil ici et positionnez-le juste un peu d'invités. Et ce que nous voulons, c'est d'en donner 40, ainsi dire, comme pour tous les autres. Mais déplacez-le ici Et ce que je veux faire maintenant est de groupe tous si contrôlé G appelé ce formulaire comme ça et sélectionnez BG de réservation avec ce coup au milieu afin que vous puissiez le positionner au milieu comme ça et enfin les regrouper ensemble et appeler ce formulaire de réservation . Appuyez sur, entrez ou retournez. Et c'est tout. Si je supprime nos colonnes, vous pouvez voir à quoi cela ressemble. Donc c'est vraiment facile, vraiment simple. Cela dit ce qu'il est censé dire, et ils peuvent simplement appeler l'hôtel. Ils peuvent envoyer un e-mail à l'hôtel s'ils ont des questions à ce stade, ils peuvent simplement entrer leurs informations de base hit book maintenant, et il les emmènera à la page de réservation, qui va ensuite entrer. Prenez les informations personnelles, les informations de carte de crédit et solo. C' est donc la prochaine partie lorsque cette page est terminée avec les clients. Mais nous concevons cette page sur Lee parce que c'est la page la plus importante pour eux parce que plus tard sur la ligne, quand nous avons conçu d'autres pages, il va orteils ont fondamentalement exactement le même style, beaucoup sur les mêmes éléments parce que nous allons les pieds, créer un système de conception qu'ils vont utiliser plus tard quand ils commenceront à concevoir d'autres pages. Et nous allons rester en contact avec le développeur plus tard. Donc, s'ils ont besoin de quelques changements, nous pouvons facilement sauter dans nos oeufs le projet et faire ces changements et leur envoyer facilement. Quand violer est frappé contrôle s. Et dans la vidéo suivante, nous allons finir sur le processus de cadrage de fil. Nous allons créer un formulaire de newsletter d'abonnement et un pied juste ci-dessous. Donc, je te verrai là-bas 25. Créer Wireframe 9: Non. Finissons notre processus de cadrage et incluons un formulaire d'inscription à la newsletter ainsi que le pied de page. Désolé d'avoir sauté ici. Zoomant un peu plus près. Vous pouvez voir que nous, euh, attirons. Inscrivez-vous à notre newsletter Où le formulaire et le pied de page Juste en dessous, homme. Comme ils l'ont dit à plusieurs reprises tout au long de ce cours, toutes les informations pertinentes qui ne sont pas cruciales, devraient aller dans le pour. Donc, double-cliquez sur votre tableau d'art étendu tout le chemin vers le bas. Donc, ce que nous voulons inclure, c'est un bulletin d'information. Inscrivez-vous ici pour que je puisse sélectionner ces mois. Tellement sélectionné contrôle profond. Donc fondamentalement la même chose que nous avons fait pour le reste du discours. Simplement appelé « shift ». Déplacez-le ici, puis positionnez-le 100 comme avec tous les autres. S' il ne clique pas 123456789 10 pour leur faire 100 films tout le long. Et ce que nous voulons cela pour écrire ISS inscrivez-vous à la newsletter et en dessous de la dette rapidement. Copiez ce qu'il a écrit comme ça. Alors pour entendre donc inscrivez-vous et recevez des nouvelles et des mises à jour sur nos réductions et offres. Et ce que nous voulons est de sélectionner ces deux pour que vous puissiez sauter à l'intérieur, frapper le formulaire, et vous allez vous positionner pour former juste ici. Parce que le texte est activé, la forme de vie est sur la droite, et je vais simplement sélectionner, par exemple, invités et regarder, maintenant bouton contrôlé D je vais les déplacer pour entendre fermer tout cela. Et nous allons simplement déplacer ce baisson vers le bas. Et si ça n'arrive pas, cache-le et déplacé comme ça. Et changeons rapidement cela. Donc, cela va écrire dans un e-mail. Vous pouvez masquer ces invités et vous pouvez supprimer la flèche. Je clique ici. Il j'ai bean email comme ça, Ou vous pouvez taper votre email encore mieux. Comme ce Close. Ce livre devrait maintenant aller exactement au même endroit. Donc, ce que vous pouvez faire ici, c'est le clic sur les tableaux d'art montrant votre mise en page. Vous pouvez positionner le bouton juste ici, et vous pouvez peut-être le déplacer comme ça pour que vous puissiez avoir ces deux-là et réserver. Maintenant, nous allons changer les orteils pour nous abonner comme ça. Et le texte hors cours va écrire en abonnement comme ceci, et une dernière chose que je veux changer est la couleur de ce bouton. Donc si je saute dans ces couleurs, peut-être que nous pouvons choisir celui-ci et ajouter tout de suite nos atouts et peut-être aller jusqu' ici. Alors nous allons sauter dans le remorquage nos jours de conception et de commande. On est un peu mieux pour que vous puissiez les tâtonner et simplement cliquer ici pour les positionner aucentre sur,les regrouper centre sur, et simplement les déplacer orteils ici jusqu'à ce que vous puissiez voir pour les pixels. Donc exactement le même que l'espacement de sorte que vous pouvez maintenir le décalage, sélectionner tout le contrôle G, beaux critères, taper, abonner comme ça. Et enfin, commençons à créer notre pied de page juste en dessous de cela. Donc, pour la photo, créons un arrière-plan, et nous allons créer un nouveau rectangle étendu jusqu'aux bords jusqu'à ce qu'il se rencontre gauche et à droite. Et pour la hauteur, lumières utilisées 6 80 et pour la couleur, nous allons utiliser cette couleur même liquide avec le reste de notre design et ne vous inquiétez pas à ce sujet. Nous allons le modifier plus tard dans la phase de conception, et parce que nous savons que c'est notre bord coupé, donc il n'y a plus de contenu en dessous. Vous conduisez comme sur votre planche, vous pouvez le déplacer vers le haut et vous pouvez zoomer tout le chemin vers le haut point situé Ici il est et simplement déplacer jusqu'à ce qu'il rencontre le bord inférieur de notre pied ou de la couleur comme ça. Et on va appeler ce pied de page Bijie parce que c'est ce que ça va être. Et la première chose dont nous avons besoin est un logo. Vous pouvez le copier. Donc contrôle. Voyez, zoomez tout le chemin pour entendre le contrôle. Nous et vous pouvez le positionner pour être ici. Positionnez le logo à peu près le pied de page BG. Et maintenant, nous allons entrer quelques informations. Nous allons donc avoir trois colonnes hors texte parce que, comme vous pouvez le voir, nous avons 12 colonnes différentes. Donc, parce que nous allons avoir cette colonne de gauche avec quelques icônes de médias sociaux ainsi que le téléphone juste ici, nous allons avoir une deuxième couleur avec des chambres commençant une avec des installations et enfin 4ème 1 esprit sur et quelques basiques sur et enfin en dessous de cela, nous allons avoir une adresse e-mail aussi. Donc, nous allons d'abord copier le téléphone et l'adresse e-mail. Donc contrôle, voir sauter et être plus près contrôle. On le positionne ici, on le déplace jusqu'au bout juste un peu plus longtemps et on va aux pieds. Il suffit de nous envoyer des textes de contrôle par e-mail. Voyez quand on va le positionner juste pour entendre le contrôle. On est donc 1234 et on va aux pieds juste ici. Si vous avez des questions, vous pouvez nous envoyer un courriel et ensuite ils vont les séparer. Donc, je veux bouger dans celui-ci pour entendre peut-être 20 pixels comme ça plus. Ce 12 ici. Il suffit de vérifier. Si vous vérifiez quelque chose, tout va bien. 1234 Jusqu'à présent, il nous sélectionne le contrôle G pour les regrouper, les positionner au milieu, les positionner tout le chemin vers le bas, faites clic droit sur le groupe. Et c'est essentiellement le texte du bas de notre site Web. Maintenant, j'ai créé quelques icônes de médias sociaux. Je vais tout simplement les baser ici, et on va jouer avec les positions un peu plus tard. Mais maintenant, tout d'abord, créons ces différentes colonnes de texte. Donc, il est la première copie districts contrôle de et le positionner ici est allé à sauter dans la messe. C' est lié. Cliquez ici parce que cela va écrire leurs chambres comme ça. Et comme je l'ai dit, parce que maintenant nous allons avoir trois colonnes de texte et cette colonne de gauche juste ici. Donc chacun d'eux prendra l'espace de trois. Donc 123 pour toutes les informations de gauche 123 pour les chambres. Contrôle sur D donc sur trois. Et ce prochain va écrire dans les installations. Et enfin, ce dernier va l'écrire sur. Et 123 va être situé orteil ici et maintenant vous pouvez les déplacer tous jusqu'à ce qu'ils rencontrent le bord supérieur du logo. Et enfin, ce que nous pouvons faire est de sélectionner cette position profonde contrôlée à l'endroit juste ici, et nous allons nous assurer que c'est la ligne gauche. Il l'est. Positionnez-le jusqu'ici, et nous allons avoir différentes options ici. Alors vas-y. 1234 Contrôle D. Assurez-vous que c'est le contrôle D. C'est la même chose. Et nous allons avoir quatre options ici comme ça donc ça va être des lits, pour qu'ils puissent s'informer sur les lits, mais haut parce que c'est connu. Parfois, l'eau n'est pas si bonne en Grèce Mini bar parce que peut-être ils veulent savoir ce qu'il y a à l'intérieur du minibar. Et quels sont les prix et l'accès handicapés pour les personnes handicapées comme ça ? Et alors ce que nous pouvons faire est de commander ce texte un peu mieux. Donc je vais simplement positionner ça ici. Ensuite, je vais écrire dans des lits juste en dessous de la dette haut de bain, juste en dessous des lits, minibar juste en dessous de la baignoire et enfin l'accès handicapés juste en dessous de beaucoup plus. Et je vais simplement les regrouper tous afin de contrôler G. Et nous pouvons peut-être changer cela et simplement et supprimer ces deux-là. Appelez cette chambre contrôle de et puis déplacer ce droit ici contrôle de et déplacer cette orteil droit ici, puis positionné ceux-ci un peu mieux. Donc c'est pire. L' une est des chambres. Ce sont des installations, et ce dernier est à propos de Donc nous allons changer tout cela afin que les installations et vous pouvez jouer autour. Vous pouvez, bien sûr, faire ce que vous voulez. Mais j'ai trouvé cela plus facile parce qu'il garde le même espacement. Nous n'avons pas à les dupliquer toutes une fois de plus. Donc, il suffit de copier basé cela fonctionne bien. Donc pour celui-ci, nous allons écrire dans des restaurants comme si ci-dessous que nous allons écrire dans la piscine, comme si juste en piscine, dessous de la salle de fitness de la mort, parce que peut-être ils veulent aller à la gym et enfin se garer où ils peuvent apprendre à connaître le stationnement un peu mieux. Donc, si elle est sécurisée, si c'est un parking fermé, un parking ouvert et des choses comme ça. Enfin, nous voulons écrire sur nous, alors peut-être qu'ils veulent savoir sur cet hôtel, l'histoire et ainsi de suite sur la politique de remboursement, parce que c'est vraiment une partie importante pour que les gens puissent savoir s'ils peuvent obtenir un remboursement ou non parce que vous avez un coffre-fort dans votre chambre. Mais que se passe-t-il s'ils volent quelque chose dans le coffre et ainsi de suite afin qu'ils puissent s'inspirer et en apprendre plus à ce sujet ? Et enfin, termes et conditions, parce que c'est vraiment important et aussi un orteil obligatoire par la loi comprennent les termes et conditions ici comme le bas. Maintenant, enfin, positionnons ceux-ci, donc cela va aligner les pieds en bas ici, Donc peut-être supprimer ces icônes ici. Assurez-vous qu'il est positionné ici en numérotant les icônes et assurez-vous qu'elles sont au centre. Ainsi, comme vous pouvez le voir à gauche ici, vous pouvez voir la distance entre le bord inférieur et le bord supérieur , et vous pouvez augmenter ou diminuer cet espace comme vous le souhaitez. Mais je vais simplement le laisser quelque part par ici, comme vous pouvez le voir. 97 à partir du haut. Et le fond Valentin que je veux faire est de les centrer afin que vous puissiez tout sélectionner sauf pour ce texte que les bas frappent contrôle G créer un autre picotement Irak d'ici au texte ici, sélectionnez. Et tous les deux ont frappé ici. Et vous pouvez simplement supprimer ce rectangle sur le groupe tout ce que vous grandissez avant, puis simplement regrouper tout en arrière et l'appeler pour elle comme ainsi. Et voilà. Nous avons créé notre pied de page et si je double-clique ici et supprimé la grille pour que vous ne puissiez plus le voir, vous pouvez voir à quoi cela ressemble. Et si j'ai sauté sur un critère rapide, on a tout créé, Toby. Cohérent. Tout a exactement les mêmes espacements entre tout parce que nous avons tout conçu sur une grille. Tout s'est espacé uniformément. Donc, tous les éléments ont des espaces uniformément entre eux. Et comme vous pouvez le voir ici, nous utilisons exactement les mêmes styles de texte tout au long de cette conception. Tout ce que vous en quelque sorte cohérent coule ensemble. Et, le plus important, la chose la plus importante de tous. Il est avant le monde dans le processus de conception et le processus de création suivant de près le bref de ce que le client veut que nous créions. Et voilà. C' est votre femme qui a fait le contrôle de sauver ce projet. Et dans la prochaine partie du cours, nous allons nous lancer dans la conception. Nous allons commencer à inclure quelques changements d'images. Différentes couleurs allaient orteils comprend des icônes différentes, et vous avez appris à jouer avec quelques ombres de fond, donc je vais vous y voir. 26. Structure d'image: dans cette partie du cours, nous allons commencer à concevoir notre cadre métallique, donc nous allons inclure différentes images, différentes icônes, différentes nuances et ombres portées. Mais avant de faire tout cela, je veux juste parcourir rapidement différentes images, qui sont incluses. Donc, vous allez recevoir ces images dossier et vous pouvez l'ouvrir et à l'intérieur. Vous pouvez voir ces différentes images qui allaient orteils inclure toutes sont nommées correctement,de correctement, sorte que vous pouvez savoir où va chaque image. Et au fur et à mesure que nous avançons sur le parcours, je vais les inclure dans différents endroits afin que vous puissiez vous entraîner à utiliser ces images . Toutes ces images proviennent de unspool, Esh et des picks de A. Donc, cela signifie qu'elles sont libres d'utiliser à la fois personnellement et commercialement. Et je vais aussi inclure ces liens dans la région, un fichier pdf à la fin de ce cours, afin que vous puissiez y accéder mon simple clic, et vous pouvez les télécharger et les utiliser tous dans votre projet. Donc, dans la prochaine vidéo, nous allons commencer à concevoir et inclure ces images, donc je vous verrai là-bas 27. Créer un design 1: Maintenant, commençons par le design. Et si je zoome un peu plus près, je vais cliquer ici sur l'aéroport. Nom hit contrôle de dupliquer l'ensemble de notre port. Et celui-là était un cadre métallique. Et celui-ci va être conçu, juste au centre. Et la première chose que nous allons faire est de changer le nom de cet arrière-plan pour le logo. Donc, je vais sauter ici et cliquer ici pour qu'il se démarque un peu mieux sur la page . Cela correspond un peu mieux avec nos boutons. Et maintenant, nous allons inclure le drapeau juste ici. Donc, je vais sauter dans remorquer la couche, passer tout fermé le dossier local, localiser le drapeau. Voilà, Contrôle V, et je vais monter le drapeau. J' ai déjà trouvé que je vais le laisser tomber juste avant le bouton juste ici. Supprimez l'espace réservé du drapeau, et je vais vous montrer comment je l'ai trouvé. Ainsi, vous pouvez cliquer sur votre rachidien branchement et vous aurez besoin d'installer cette prise en vous appelé . Logo I. Donc, une fois de plus, vous pouvez cliquer ici en tapant votre test de logos blancs pour être de l'obtenir Donc juste un mot et vous pouvez cliquer sur Installer. Et ce que cela peut faire, c'est que vous pouvez cliquer dessus et vous pouvez générer des drapeaux de pays. Donc, ce que vous pouvez faire est de créer différents rectangles comme celui-ci. Par exemple, vous pouvez appuyer sur la grille de répétition et vous devez créer 194. Donc, par exemple, vous pouvez créer je ne sais pas, 10 comme ça. 246 8 10 comme ça Et vous pouvez créer 20 vers le bas. Alors 2345 6789 10 Et voyons si c'est tout. Donc 10 comme ça. 123456789 10 11 12 13 14 15 16 17 18 1920. Et vous pouvez zoomer un peu plus près pour se fermer comme ça. Et ce que vous pouvez faire est de revenir à la couche, passer tous les coups sur le groupe Great, et ce que vous devez faire est de supprimer 6246 comme ça. Donc il te reste avec 194. Vous pouvez les sélectionner tous, enlevé la frontière et pourquoi 194 il est au-delà de moi, mais c'est ce qu'ils veulent que vous fassiez So Jump acteur plug in Spinal Hit La raison pour laquelle les logos frappent drapeaux du pays et ce qui va faire est qu'il va générer tous ces drapeaux de pays, et ce qui est bon, c'est que, comme vous pouvez le voir, sont des qualités assez élevées et pas vraiment quelque chose de majeur. Mais pour ce que nous devons faire, c'est que vous pouvez voir juste simple, joli petit drapeau. Vous pouvez générer différents drapeaux à partir d'ici, alors laissez-moi le supprimer rapidement. C' est comme ça que je l'ai trouvé. Encore une fois, vous je logos l'ai trouvé dans votre fiche en spécial, et vous pouvez avoir le même résultat. Mais vous pouvez, bien sûr, télécharger ce fichier et l'utiliser comme je vous l'ai montré ici. Donc tout sera comme vous l'avez vu. Alors maintenant, incluons notre image. Donc, je vais sauter dans le dossier des images. Donc, sélectionnez le héros BG juste ici, parce que c'est là que nous allons placer l'image de héros Locator. Ici, il est, et quand il suffit de le glisser et de le déposer à l'intérieur, je vais frapper le clic et augmenter la taille un peu et peut-être le positionner quelque part ici, mais je veux afficher le bouton Toby ici. Donc, ce que je peux faire, c'est déplacer ça juste un peu. Alors bouge un peu plus comme ça. Et ce que je veux faire maintenant, c'est faire ce blanc pour que je puisse cliquer ici et le rendre blanc. Et je veux faire la même chose pour ce bouton de lecture. Donc, comme ça. Et c'est notre image de héros fini. Donc, comme vous pouvez le voir, il a l'air propre. Ça a l'air sympa. Il montre l'hôtel. Il montre la personne qui apprécie l'hôtel et tout ce qu'il a à offrir. Donc fondamentalement, c'est à peu près pour cette section. Dans la prochaine vidéo, nous allons passer à autre chose et concevoir certaines de ces autres sections, donc je vais y voir. 28. Créer un design 2: est maintenant sauter et à elle certains de ces autres articles. Alors passons à notre sujet. Je vais sélectionner ces cercles, et j'ai déjà une couleur, que j'ai sélectionnée. Je vais le faire apparaître ici et supprimer la bordure de tous ces cercles et enfin cliquer ici pour l'inclure dans nos recherches d'appelant juste ici afin que nous puissions le changer d'un clic plus tard si nous le voulons. Donc, pour son 1er 1 je veux inclure une icône, Donc je vais copier et coller orteil ici. Je vais le placer au milieu de ce cercle comme ça, et je vais aller aux pieds. Assurez-vous qu'il est aligné avec le bord inférieur de ce cercle, donc il ressemble un peu à un fils, et il a juste gardé apporte un peu plus d'intérêt que d'utiliser simplement quelques icônes régulières que vous avez trouvées sur Internet et juste les badigeonner dans le espace vide. Donc on va faire la même chose avec celui-ci. Donc c'est pour la nourriture. Placez-le comme, alors assurez-vous qu'il est au milieu, et comme vous pouvez le voir, il apporte déjà beaucoup plus d'attention à ce cercle afin que les gens ne le sautent pas si facilement. Et enfin, incluons ce 3ème 1 Donc ça va être pour la plage. Donc, une fois de plus, assurez-vous qu'il est ici et au milieu, et cette section est fondamentalement ou et comme vous pouvez le voir, elle apporte beaucoup plus d'intérêt visuel qu'elle ne le ferait autrement. C' est ainsi que vous pouvez facilement attirer l'attention sur certaines de ces autres de couchesdela vôtre. Suivant. Nous allons changer la couleur de ce fond de témoignage, donc j'ai déjà sélectionné la couleur. Je vais le placer. Et comme vous pouvez le voir, c'est une sorte de couleur verdâtre de nuit. Ça marche vraiment bien. On va aller aux pieds. Ajoutez-le ici. Donc c'est 3 e 1 e si tu es curieux. Mais encore une fois, vous pouvez télécharger et utiliser ce fichier. Comme je l'utilise ici. Donc, nous allons inclure une image de témoignage à l'intérieur, donc glisser-déposer à l'intérieur ici deux fois rapidement, et vous allez maintenir Shift et positionner cette image un peu plus haut. Comme ça. Donc c'est la personne qui a dit cette citation, et comme vous pouvez le voir, c'est vraiment attrayant, c' est vraiment accrocheur, et ça se démarque vraiment sur la page. C' est pourquoi nous l'utilisons dans cet exemple. Donc dans la vidéo suivante, on va sauter dans la section de la salle et on va faire quelques changements dans les salles de deuce. Et on va inclure des couleurs différentes ici, donc je te verrai là-bas. 29. Créer un design 3: maintenant, il y a des images pour notre chambre. Alors, sautez dans la section des salles, ouvrez ces dossiers. C' est plus facile comme ça. Localisez la chambre classique donc c'est celle-ci. Il suffit de le faire glisser et de le positionner. Regardez la chambre numéro deux, qui est la chambre familiale située ici et faites-la glisser en place. Et encore une chose, bien sûr. Vous conduisez comme une augmentation de la taille de ces images si vous voulez. Alors peut-être positionnez-le comme ça, et peut-être que nous pouvons faire la même chose pour ce 1er 1 Donc une fois de plus, vous pouvez appuyer sur le contrôle et sauter directement dans votre sélection afin que vous n'ayez pas à ouvrir le dossier et ensuite faire la même chose pour les quelques fois comme ceci, sorte que vous pouvez augmenter la taille de celui-ci, peut-être soutenir les lits plus dans un centre comme celui-ci. Je pense que ça a l'air bien, mais peut-être que nous pouvons même les positionner comme ça pour que nous puissions voir tout le lit. Et enfin, vous pouvez fermer les jours les uns et tous. Kitaro numéro trois. Juste celui-là. Localisez l'image dans les dossiers de Grant Deluxe Room Dragon qui tombent à l'intérieur. Comme vous pouvez le voir, il est vraiment zoomé un peu et vous pouvez tenir un décalage vieux et clic gauche orteil. Augmentez-le uniformément dans toutes les directions. Et je n'aime pas cette lumière. Donc peut-être qu'on peut aller avec juste un peu plus vers le haut, comme ça. Et j'aime comment ça ressemble. Maintenant, ce que nous pouvons faire est de changer certaines de ces autres couleurs. Alors choisissons le texte dis et sélectionné la couleur la plus foncée parce que nous voulions se démarquer un peu comme ça. Et maintenant, ce que nous devons faire, c'est créer de l'intérêt ici. Nous allons donc créer des couleurs vertes ainsi que des couleurs rouges. Une couleur verte va être la couleur pour ceux qu'ils peuvent choisir, et la couleur rouge va être pour celle qui ne sont pas inclus dans l'offre pour la chambre. Alors commençons par une couche spendable et nous allons sauter dans les futurs, les ouvrir, et pour ce numéro un, je peux simplement choisir une couleur. Donc six b être quatre pour un va être notre couleur verte. Je vais simplement l'ajouter ici et pour cette vue sur la plage où il dit non. Nous pouvons ajouter une couleur rouge, qui va être e 13333 comme ça et nous allons aller orteils. Ajoutez-le ici comme ça. Et maintenant, ce que nous pouvons faire est simplement d'aller de l'avant et de les sélectionner tous. Donc, pas de clic ici, puis Oui, oui et oui, cliquez ici, sautez dans les dossiers des jours fermés et faites la même chose pour les deux autres. Ce qu'on a ici, c'est des lits. On doit le faire, mais on peut le laisser comme ça si tu le veux. Donc, au lieu de cette couleur verte, on peut la laisser comme ça. Et puis toutes ces autres fonctionnalités Pour être vert et rouge est juste un peu plus de sens cette façon. Donc soyez vrai. Vous savez qu'il va être lu et pour les terrasses, WiFi et toutes ces autres choses vont être vertes. Et enfin, tous ces éléments vont être inclus comme ça. Comme ça et les terroristes hors de cours. Oui, parce que c'est la pièce la plus chère, comme si je vais sauter dans et fermer tous ces autres dossiers, donc ils n'ont pas l'air désordonné comme ça, et les chambres sont essentiellement terminées. Et plus tard, quand vous arrivez à protéger, nous allons inclure des ombres de fond juste ici. Mais maintenant, je veux juste résoudre rapidement ce que les terroristes devraient être oui, semblent comme nous venons de voir dans l'exemple de conception, et c'est fondamentalement tout pour les chambres. Donc, nous allons sauter à l'intérieur et inclure sur différentes images ici. Donc, pour la piscine privée, vous pouvez la localiser juste ici. Donc, c'est cette piscine privée, et vous pouvez, bien sûr, clic adulte et zoomer beaucoup plus près si vous voulez sur cette image. Donc peut-être quelque chose comme ça juste pour créer un peu plus d'intérêt visuel que autrement, localisez l'image du jardin dans notre dossier. Ici, il est glisser-déposer à l'intérieur. Encore une fois, vous pouvez double-cliquer et zoomer beaucoup plus près afin que les gens puissent le localiser un peu plus grand. Et enfin ce que nous avons germé parking et cela devrait dire image de marquage privé, et vous pouvez sélectionner l'ensemble penser et sauter à l'intérieur juste ici le rapide sur ce nom et vous pouvez le renommer pour le rendre cohérent entre eux. Donc, cela devrait être image de jardin comme Donc, en sélectionnant le nom de goudron, vous pouvez localiser le jardin ici si rapidement et a changé son nom. Donc, quand vous voyez ces erreurs, vous pouvez facilement les réparer. Il suffit de copier et de coller vos éléments sur vos noms. Et enfin, ce que nous avons ici, c'est le parking. Donc, une fois de plus, clic terne pour agrandir cette image pour créer un peu plus d'intérêt visuel. Quelque chose comme ça a l'air sympa. Alors peut-être que plus tard, nous pouvons ajouter quelques ombres de fond orteil cette image, mais je ne le fais vraiment pas. Je pense que ce sera une bonne idée. Ombres de fond pour ceux-ci. Oui, mais pour ceux-là non, vraiment. Comme comment ça a l'air beau et propre sur la page juste ici dans la vidéo suivante, nous allons sauter dans et concevoir le reste de notre design, donc je vais voir là-bas 30. Créer des conceptions 4: modifions pas les couleurs d'arrière-plan de ces flèches. Donc, je vais simplement choisir dans cette couleur, choisir la décoloration, puis sauter à l'intérieur de mon panneau de calques, sélectionner les deux flèches et changer cette couleur pour cela, par exemple. Et si vous pensez qu'il fait trop sombre, peut-être que vous pouvez jouer ou créer une nouvelle couleur. Mais je pense que cela fonctionne bien avec notre design. Et nous allons avoir besoin d'un orteil inclure une image juste ici. Conduite cliquez ici pour changer son nom. Donc ça va être à Dallas. Je suis g sélectionner tout. Retournez à ici, Dallas. Je suis G Donc vous avez vos noms de calques cohérents Jump à l'intérieur des couches. Démarré le dossier images glisser-déposer à l'intérieur Comme à quoi il ressemble parce qu'il crée un intérêt visuel ici. Juste pour vous faire savoir que c'est l'ancien endroit et qu'il a une grande histoire. Et peut-être plus tard dans les prochaines vidéos, nous pouvons inclure une ombre de fond sur celle-ci aussi. Enfin, je veux juste changer cette couleur en couleur foncée juste pour la faire ressortir un peu. Enfin, ce dont nous avons besoin ici, c'est de changer la couleur pour que nous ayons exactement la même couleur que celle-ci. Donc si vous sautez à l'intérieur, vous pouvez voir que c'est le trois e un et nous l'avons ici parce que nous l'avons déjà sauvé. Tellement sélectionné. Cliquez ici. Et comme vous pouvez le voir, il va aux pieds. Faites apparaître ce formulaire et se démarquer un peu plus. Nous allons fermer ces dossiers, et enfin, et enfin, nous devons changer quelques choses à l'intérieur de notre pied de page. Donc, ce que nous voulons est de créer une couleur d'arrière-plan plus foncée pour notre pied de page. Donc, ce que nous pouvons faire est peut-être utiliser dans cette couleur. Donc, il fait six b 6764 et il fait vraiment sombre, comme vous pouvez le voir, mais cela rendra nos articles beaucoup plus agréable. Nous allons le sauvegarder ici et le faire glisser jusqu'au bas et ce que nous voulons d'abord c'est sélectionner celui-ci. Faites-le blanc parce que nous voulons qu'il se démarquer, et ce que nous voulons également est de choisir ces icônes et peut-être utiliser cette couleur, choisir le nombre et peut-être utilisé décoloration, choisir l'e-mail et utiliser la même couleur. Donc si je saute ici, Indices de trois. Donc c'est celui-là. On va utiliser cette couleur. Donc, pour ceux-ci, nous pouvons peut-être utiliser le blanc pour les noms comme celui-ci et pour tout le reste, nous pouvons utiliser d'autres couleurs, mais pour rendre les choses plus rapides, vous pouvez tout sélectionner. Ensuite, choisissez cette couleur, puis choisissez simplement ces noms en haut et changez-les orteil blanc. Vous pouvez, bien sûr, utiliser l'une de ces couleurs pour créer différentes combinaisons de couleurs si vous le souhaitez. Mais j'aime vraiment comment cela ressemble pour que vous puissiez sélectionner à nouveau le dossier entier, sélectionner celui-ci et peut-être expérimenter, et vous pouvez voir à quoi cela ressemble avec cette couleur. Et peut-être il semble bon, mais je voudrais vraiment pour eux de se démarquer sur la page sont juste un peu plus. Peut-être pourrions-nous créer White. Voyez à quoi ça ressemble. Ouais, je pense que ça a l'air sympa. Et juste pour les noms, peut-être qu'on peut utiliser cette couleur, juste les séparer un peu. Et enfin, pour ce dernier, nous pouvons aussi utiliser le blanc. Et voilà. Nous avons terminé notre conception. Nous avons fini d'apporter des changements majeurs. Donc, nous avons fini, y compris nos images, et dans la prochaine vidéo, nous allons faire d'autres choses. Donc, je vais vous montrer comment vous pouvez inclure différentes ombres de fond dans certains endroits, et nous pouvons peut-être jouer avec quelques placements, et nous allons voir ce que nous avons manqué pendant ce processus de conception pour que nous puissions finir ça , donc on se voit là-bas. 31. Créer un design 5: Ne sautons pas à l'intérieur et finissons notre design. Donc, je vais zoomer un peu plus près d'ici, où témoignage je vais orteil double-cliquez sur le bouton ou vous pouvez le localiser dans le côté, et je vais cliquer sur l'ombre juste ici. Je vais taper 10 10 et 20 Press Centre, et je vais m'assurer que c'est sur 50% comme ça. Donc c'est beau et grand, ou peut-être allons-y avec 30%. Je pense que cela semble beaucoup mieux juste pour que nous puissions faire ressortir ce bouton juste un peu plus. Et si vous pensez que c'est trop grand, vous pouvez bien sûr ici et prendre 20% et plus. Vous payez City de cette ombre et vous arrêtez ? Nous allons juste introduire un peu plus d'intérêt visuel, et je suis allé de l'avant et créé cette citation dans la boutique de photos parce que les téléphones fonctionnent un peu différemment ici dans Adobe Xdd. Ensuite, ils le font dans la boutique photo. Donc, même si nous utilisons l'affichage Playfair juste ici, il montre cette citation,par exemple, par exemple, juste un peu différemment ici à l'intérieur des identités d'oeufs dans quatre boutique Donc, je suis allé avant, créé et ensuite simplement exporté comme étant G et glissé et déposé juste ici à l'intérieur d'Adobe X'd. Donc peut-être qu'on peut utiliser un 20% pâteux et juste le déplacer tout le chemin du retour. Ou peut-être, je ne sais pas. Peut-être que nous pouvons l'utiliser à 40% juste pour que nous puissions inclure un peu plus d'intérêts visuels, comme donc assurez-vous que le fond va comme ça. Donc, il passe en revue la citation en arrière-plan, et je pense que cela a l'air bien. Ensuite, passons et changeons l'apparence de ces pièces. Nous allons donc inclure des ombres de fond à l'intérieur ici et sur ces arrière-plans. Donc, nous allons aux pieds, assurez-vous qu'ils se démarquent une fois que la personne passe au-dessus d'eux. Alors localisons les pièces, localisons et ouvrons tous ces dossiers. Donc chambre un BG et ce que nous pouvons faire ici, c'est aller à l'ombre et taper 55 et peut-être 20. Comme ça. Et comme vous pouvez le voir, il ne crée une ombre assez belle, et il fait juste s'assurer que se démarque sur la page un peu plus agréable, vous pouvez cliquer dessus une fois de plus sauter ici. Assurez-vous que ce soit à 16% et que ce que nous pouvons faire maintenant est juste. Cliquez sur le calque. Vous pouvez le faire ici, ou vous pouvez le faire ici, cliquez droit Copier, puis sélectionnez ces deux autres et simplement un clic droit et l'apparence basée , et il sera basé exactement la même apparence sur tous d'entre eux. Donc ne les cachons pas parce qu'on n'en a pas besoin pour le moment. Et nous allons simplement les montrer une fois en vol stationnaire. Donc, cela signifie juste inclure celui-ci. Et comme vous pouvez le voir, lorsque la personne survolera, elle montrera cette ombre de fond, et ces deux resteront sans elle. Et quand ils couvriront celui-ci, celui-ci sera éteint et ainsi de suite et ainsi de suite. Donc juste pour qu'il crée un peu plus d'intérêt visuel. Alors nous allons descendre, et nous allons apporter quelques changements à cette image hors de l'emplacement. Donc, ce que nous pouvons faire maintenant, c'est inclure dans cette ombre. Donc 10 et 20 comme ça, et ça va créer une belle ombre de fond ici. Vous pouvez jouer avec ces flèches et inclure des ombres d'arrière-plan pour eux aussi, si vous le souhaitez. Mais je pense qu'ils ont l'air bien comme ça. Maintenant, il a ajouté ce bouton, et je vais sauter dans ce bouton situé ici, clic droit copier. Fermez tous ces dossiers vers le haut, situé à l'intérieur ici, clic droit et apparence basée. Donc, comme vous pouvez le voir, c'est 10 10 20 que vous allez faire la même chose pour ce fond. Mais nous ne allons pas baser l'apparence, parce que ce bouton est une couleur différente, donc il va créer un type différent à partir d'une mise en page. Et puis on veut. Donc, comme vous pouvez le voir, nous avons créé ça. Et maintenant, nous pouvons fermer ceci et enfin, je veux sauter ici et créer juste un de ces exemples. Donc, vous pouvez imaginer que quand quelqu'un clique ici, il fera une sélection, et il se distinguera un peu plus contre tous ces autres. Donc, créons rapidement l'ombre. Donc, nous allons utiliser 10 san et 20 comme nous l'avons fait pour tous ces autres, donc vous pouvez imaginer que quand quelqu'un clique sur celui-ci et s'ouvre dans le menu déroulant, il placera une ombre dessus. Mais pour l'instant, retirons simplement cela de là. Alors cliquez ici, et quand vous voulez inclure de retour, cliquez simplement ici. Et plus tard, nous allons copier la descente basée sur toutes ces autres. Mais peut-être qu'on peut le faire tout de suite. Donc, ouvrez toutes ces autres entrées et simplement cliquez avec le bouton droit de la souris coller l'apparence, puis passez par tous les et éteignez le à partir d'ici parce que nous n'en avons pas besoin pour le moment, et nous allons l'utiliser quand nous arriverons à la phase de prototypage off. Nos projets vont enfin le changer pour celui-ci, et ce sera le cas pour ce formulaire de réservation. Vous pouvez même vous assurer d'inclure une couleur de voiture plus claire, par exemple, si vous voulez attirer encore plus d'attention sur ce champ. Mais je pense que ça a l'air sympa. Et maintenant, bougeons. Vous voulez accéder à cette dernière section ? Je vais changer cette couleur de forme en Blue Song, aller sélectionner ceci et m'assurer qu'il est là. Il semble bien, OK, et finalement sélectionné la photo BG Control D pour faire un duplicate et juste appelé cette pied de page, et j'ai inclus une image de plus juste ici à l'intérieur de notre dossier Images. Ça s'appelle Footer Image, et c'est ces célèbres moulins à vent de Nicholas Conduite. Nous condamnons les positionner comme ainsi, et ce que je veux faire maintenant est simplement abaisser votre pacenti de celui-ci. Donc, je vais l'abaisser à 15 %. Et comme vous pouvez le voir, cela crée un bel intérêt visuel pour l'arrière-plan. Donc, triez, repère emblématique hors de la douceur, et cela crée juste un peu plus d'intérêt pour l'arrière-plan que juste une couleur régulière. Donc ils sont il y a. Nous avons terminé notre conception. Nous avons traversé toutes les étapes. Allons ici et peut-être qu'on peut éteindre l'ombre ou simplement la cacher comme on l'a fait avec les autres. Et vous pouvez jouer avec elle et inclure peut-être quelques textures d'arrière-plan ici si vous le souhaitez, peut-être ajouter une belle vieille texture à ces champs. Donc, ce champ de témoignage, ainsi que ce champ de formulaire de réservation ici si vous le souhaitez. Mais je pense que cela fonctionne bien avec ce design Orel. C' est vraiment propre, simple, facile à utiliser et facile à naviguer. Et une dernière chose qui me borde, c'est la couleur de ce texte. Je pense qu'il semble juste remorquer l'avion avec, ah, cette couleur aussi bien que celle-ci parce que c'est la même chose. Nous venons de créer ceci pour être audacieux dans ce cas pour être régulier, alors allons de l'avant et changer cela. Donc nous allons sauter à l'intérieur des orteils ici et localiser la couleur de notre texte. Donc c'est celui-là, mais on ne va pas le changer partout, on va juste le changer dans certains endroits sélectionnés et laisser la couleur comme c'était sur d'autres endroits. Donc pour ici, soyons simplement inclus. Donc c'est cette couleur 90 90 90 comme ça. Et je vais faire une nouvelle nuance de couleur ici dans le panneau des actifs, et je vais sauter à l'intérieur et simplement les sélectionner pour revenir ici et cliquer ici, et je vais changer celui-ci aussi. Pour cela, comme vous pouvez le voir, il se distingue maintenant beaucoup mieux parce que ce n'est pas la même couleur. Ça a l'air un peu différent, et peut-être qu'on peut faire la même chose pour celui-là. Donc juste que nous pouvons le différencier un peu plus et nous allons laisser cela tel quel parce qu'il doit se démarquer de la page comme ça. Donc, nous pouvons passer à autre chose et cliquer sur celui-ci, par exemple, et créé comme ça. On peut laisser celui-ci tel quel. Donc, comme, ce texte celui-ci aussi, celui-ci aussi Nous pouvons sélectionner ce texte et comme vous pouvez le voir quand je le change ici, vous pouvez clairement voir la différence entre ces deux textes. Peut-être que nous pouvons même aller de l'avant et rendre celui-ci audacieux comme si juste pour que nous puissions créer un peu plus d'intérêt visuel comme ça. Enfin, faisons la même chose ici. Alors laissez-le comme il est comme ça. Et peut-être que nous pouvons laisser ces derniers tels qu'ils sont, parce que nous devons les faire ressortir juste un peu plus pour que les gens puissent cliquer sur ce formulaire et enfin changer celui-ci pour cette nouvelle voiture. Alors, voilà. Nous avons terminé notre conception. Ce qu'il nous reste à faire, c'est de planifier et de réfléchir pour nos prototypes. Parce que dans la prochaine section hors du cours. Nous allons commencer à concevoir des prototypes parce que nous allons partager cette conception avec le client et leur faire savoir ce que nous avons fait jusqu'à présent. Et, hum, donnez-leur la chance de nous fournir les premiers commentaires afin que nous puissions savoir ce que nous avons bien fait et ce qu'ils veulent que nous modifiions afin que nous puissions apporter ces changements avant d'aller plus loin avec ce projet. Donc, ce sera essentiellement notre première révision pour ce projet. Donc, je vais vous montrer dans la section suivante du cours, comment vous pouvez commencer à créer vos prototypes, comment je peux apporter un peu plus de vie à votre conception et comment vous pouvez le présenter à vos clients et aux développeurs afin qu'ils puissent peut-être mieux comprendre comment vous êtes arrivé à certaines de ces idées. Et quelle est votre pensée et votre logique derrière eux ? 32. Travailler avec des composants: dans cette vidéo. Je veux parler des composants parce que nous ne les avons pas inclus dans le processus de conception, et il y a une raison à cela. Je voulais vous montrer un travail sans aucun composant inclus pour les boutons, par exemple, et ces formulaires. Et si je clique ici sur mon cul, c'est le panneau. Vous pouvez voir que nous n'avons pas de composants, mais je vais changer cela maintenant parce que vous avez déjà vu tout le processus de conception sans aucun composant, donc vous pouvez choisir si vous voulez créer vos conceptions sans composants ou avec eux . Personnellement, j'aime créer des composants, et j'ai trouvé qu'ils étaient un moyen plus facile de concevoir n'importe quoi dans Adobe X'd. Mais je voulais juste, comme je l'ai dit, orteil vous montrer le chemin sans aucun composant parce que c'est la page de destination et nous n' allons pas avoir un grand nombre de composants de toute façon. Mais je veux te montrer dans cette vidéo. Higher peut rapidement créer des composants et comment vous pouvez les utiliser tout au long de votre conception parce que plus tard, lorsque vous avez conçu sous pages, il est vraiment important que vous ayez des composants, alors nous allons zoomer un peu plus sur nos conceptions, donc je vais vous montrer comment vous pouvez les créer. Alors cliquez sur votre Are Barkley tout à fait ici pour inclure cred et les premières choses en premier. Si je zoome un peu plus près, vous pouvez voir que notre bouton prend plus de deux colonnes afin que nous puissions changer cela. On peut créer un bouton. Il prend deux colonnes ou trois colonnes, alors nous allons zoomer un peu plus près. Et si je clique dessus, je peux sauter ici. Meaty NBG et moi pouvons déplacer cela pour tenir deux colonnes. Comme vous pouvez le voir, vous pouvez sélectionner le texte et le centrer et réserver maintenant la beauté et nous allons changer le nom pour Neff comme ça et je pourrais frapper la commande K. Et comme vous pouvez le voir, il montre ce diamant vert, ce qui signifie que c'est le composant et en outre, c'est le composant maître à partir duquel vous pouvez prendre les composants enfants, qui signifie que quoi que vous modifiez sur les composants maîtres, il sera également mis à jour sur les composants enfants. Et si je saute ici pour masser sa ceinture, vous pouvez voir que maintenant nous avons livre maintenant être tiene naff afin que nous puissions le savoir. Ok, c'est un fond qui est un livre maintenant, mais il est situé à l'intérieur du jamais parce qu'il va contenir cet esprit de deux colonnes. Alors maintenant, nous allons rapidement faire le changement toe notre menu. Donc, si vous vous en souvenez, repositionnez ses 70 pixels de ceci. Donc, faisons ça une fois de plus comme si 1234567 afin que nous puissions avoir un espacement uniforme dans notre conception afin que vous puissiez voir que c'est le bas plus petit. Allons de l'avant et créons un plus grand. Donc, si je zoom un peu plus près ici, vous pouvez voir que nous avons le même bouton que nous avions là-bas. Mais maintenant, c'est 2,5 colonnes, gros, alors étendons ça à ici, et nous allons positionner le texte comme nous l'avons fait auparavant, donc au milieu. Et je vais changer le nom pour réserver maintenant Bt. Mais appelons ça grand parce que c'est plus grand et c'est ah, c'est trois colonnes maintenant, Donc encore une fois, Controller Command K et si je saute dans mon cul est lié. Vous pouvez voir qu'il est maintenant créé. Nous avons donc deux tailles sur le même fond. Et ce bouton contient cette ombre portée si vous vous souvenez des vidéos précédentes et celle-ci ne le fait pas. C' est donc le facteur de différenciation une fois de plus. Donc maintenant, si je veux dupliquer ce bouton ou le placer parce que si je fais défiler vers le bas et vous verrez que nous l'avons ici pour que vous puissiez faire l'une des deux choses que vous pouvez sauter à l'intérieur ici , qui est le formulaire de réservation. Localisez le fond qui se trouve à l'intérieur du formulaire. Ici, il est en bas. Donc, ce que vous pouvez faire ici est de faire une copie de ce fond et ce sera votre copie enfant . Ainsi, vous pouvez simplement cliquer quand il maintenez tout pour faire glisser vers le bas, ou vous pouvez simplement cliquer ici pour supprimer ce bouton. Vous pouvez revenir au panneau des ressources et vous pouvez glisser-déposer un nouveau bouton ici. Ce que cela fera, c'est qu'il va créer une instance à partir de ce bouton. Donc, quoi que vous modifiez par exemple, les couleurs ou le texte ou quelque chose comme ça, il sera mis à jour en temps réel et vous montrera également la mise à jour ici, alors nous allons le déplacer. 40 pixels. Comme nous l'avons fait avec tous les autres. Vous pouvez donc maintenir le décalage jusqu'à ce qu'il vous montre la distance ici. Donc c'est fondamentalement tout pour les boutons. Et nous entendons un bouton de plus, qui est à l'intérieur de notre formulaire d'abonnement, mais parce que c'est un peu différent, donc la couleur est différente, la taille est différente, alors jouons avec, tout d'abord, alors ce que nous pouvons faire, c'est savoir à quel point était la distance entre ce bouton et cette entrée par courriel  ? Donc, si je clique sur le bouton, maintenez Maj et déplacez-le, vous pouvez voir que nous avons, par exemple, 130 pour que je puisse le déplacer juste ici. Vous pouvez cliquer à l'intérieur et vous pouvez le faire. Par exemple, trois colonnes avec similaire afin que vous puissiez le positionner de cette façon. Et peut-être que nous pouvons créer un espacement de colonne pour que vous puissiez cliquer sur le formulaire e-mail et vous pouvez faire glisser orteil ici pour que vous puissiez voir que nous avons un espacement de gouttière, fondamentalement pas la colonne. Vous pouvez les regrouper et, par exemple, sélectionner s'inscrire à la newsletter et simplement cliquer ici et il les placera au milieu. Mais cela n'a pas fonctionné parce que c'est plus large que ça. Donc, avec l'extérieur hors de votre dossier, cliquez ici, faites-le glisser dans son dossier, clic droit sur groupe, et voilà. Sachez ce que vous pouvez faire est que vous pouvez créer ces champs si vous le souhaitez en tant que composants séparés. Mais ce que je veux faire est de les regrouper comme donc contrôlez G et nommez-le, par exemple, formulaire e-mail ou s'abonner pour lui encore mieux, comme ça et appuyez sur contrôle ou commande K, car il va créer un composant basé sur ces deux éléments. Donc, fondamentalement, vous pouvez, comme vous l'avez vu avec ce bouton, vous pouvez simplement le glisser et le déposer sur la page ce que vous voulez, parce que sur la majorité des pages, ce formulaire d'abonnement apparaîtra de toute façon, Donc, c'est un bon moyen orteil de créer un composant, qui est ces deux éléments fondamentalement combinés en un seul élément. C' est donc à vous de décider si vous voulez travailler avec des composants ou non. J' aime travailler avec des composants, surtout si j'ai différents écrans différents. Fondamentalement, si vous travaillez avec un seul écran, juste une page, donc dans notre page de destination de cas. Vous n'avez pas besoin de composants. Mais si plus tard le client veut étendre cela et veut inclure toutes ces autres pages, comme dans notre cas, ils le feront. Donc, par exemple, imaginez, nous aurons trois pages différentes de réservation page sur nous contacter. Peut-être qu'ils vont inclure dans des pages différentes. Donc, ils sont page séparée pour le formulaire de réservation et ainsi de suite. C' est offert. Imaginez donc qu'un certain nombre de pages différentes seront incluses à l'intérieur, donc les composants sont vraiment utiles. Façon de garder la cohérence entre vos conceptions. Dans la prochaine vidéo, nous allons commencer, ajoutez quelques touches de finition à notre projet. Nous allons concevoir des menus déroulants, et nous allons concevoir comment ce formulaire ressemblera réellement lorsqu'ils cliqueront dessus. Nous allons donc inclure quelques options pour cela et cela rempli ainsi que le calendrier pour ces deux champs. Donc RC, là 33. Créer des gouttes: ajoutons maintenant des touches de finition à notre design. Donc, ce que nous allons faire est d'ajouter des menus déroulants pour les chambres juste ici ainsi que pour les drapeaux juste ici. Ensuite, nous allons sauter tout le chemin vers le bas, et nous allons ajouter différentes sélections déroulantes à ce formulaire. Donc, nous allons inclure différents types de chambres, calendriers juste ici et enfin les invités juste ici en bas. Et nous allons finir notre conception. Alors commençons. Et je vais faire défiler jusqu'au haut clic sur le port du concepteur et cacher la grille parce que nous ne voulons pas qu'elle nous distraire. En ce moment. Je vais ouvrir la main. Je vais localiser les chambres. Donc, ils sont là, juste là, et je vais essentiellement dupliquer trois fois. Alors contrôlait le 123 et déplacez ces trois jusqu'au bas. Alors maintenez la touche Maj, sélectionnez et déplacez-les vers le bas pour rouler autour d'ici. Donc, quand ils rencontrent le bord inférieur de R nev BG donc fondamentalement cette partie blanche, puis maintenez ma touche Maj et déplacez-le vers le bas pour le pixel. Donc 1234 faire la même chose pour ces deux-là. Alors localisez le bord inférieur juste ici. 1234 Et enfin faire la même chose avec le 3ème 1 Alors déplacez-le vers le bas. 1234 Et ces trois vont être nos chambres en gros. Donc, si on saute un peu vers le bas, vous pouvez voir que nous avons une famille classique dans une grande chambre de luxe, donc c'est ce que nous allons taper. Donc peut-être qu'on peut laisser de la place pour les trois finalités de taper Classic. Assurez-vous que c'est de gauche. Donc laissé la ligne comme si c'était celui-là va être de la famille comme ça et enfin, nous allons avoir une grande chambre de luxe heureuse comme ça. Et ce qu'il nous faut maintenant, c'est qu'il nous faut un arrière-plan de navigation. Nous allons donc en créer un en utilisant notre BG jamais afin que vous puissiez contrôler l'unité et vous pouvez déplacer vers le haut. Donc juste pour que vous puissiez voir ce que vous faites, vous pouvez ensuite le déplacer vers le bas jusqu'à ce qu'il rencontre votre jamais BG comme So Donc dès que vous voyez cette ligne bleue, cela signifie qu'ils sont parfaitement alignés. Déplacez le vers le bas jusqu'à ce qu'il rencontre notre texte. Comme si tout le quart 1234 Parce que nous voulons avoir le même espacement vers le bas que nous l'avons fait avec notre texte. Et ce que nous voulons pour ce bord gauche est d'aligner avec le texte sur la gauche, puis maintenir touche Maj. 1234 à gauche. Et pour ce bord droit, nous allons l'aligner avec la réservation, par exemple, afin que vous puissiez le déplacer comme ça. Et enfin, ce que nous voulons, c'est arrondir nos coins pour que vous puissiez cliquer ici. Nous voulons en bas, à gauche et en bas à droite afin que vous puissiez les localiser ici. Tapez dans 10 et 10 appuyez sur Entrée ou retourner le même liquide avec tout le reste d'entre eux. Et nous y voilà. Nous avons créé notre liste déroulante. Donc maintenant ce que vous voulez est de maîtriser cela donc ce sera nos chambres et a déposé le gène b et nous allons tous les contrôler G et appeler la liste déroulante de cette pièce comme si et nous allons le déplacer Juste en dessous sont jamais BG parce que nous voulions apparaissent en dessous, et ce que nous voulons faire est de remorquer. Ajouter un peu d'ombre portée, aussi, ne sont jamais ainsi. Cliquez dessus, cliquez sur Shadow et il ajoutera juste une légère goutte. Ombre à elle et vous pouvez le voir 03 et six. Donc c'est tout par défaut. Et je pense que ça a l'air bien parce qu'il ajoutera juste un peu d'intérêt visuel parce que cela va descendre ci-dessous. Une fois que nous cliquerons sur les pièces, cette flèche va monter, et nous allons créer la même chose pour les drapeaux en ce moment. Maintenant, pour le Flex. Comme expliqué dans les vidéos précédentes, j'ai utilisé ce plug in vous appelé logos I afin que vous puissiez cliquer dessus et puis simplement générer des drapeaux pays. Vous devez avoir 194 formes pour son travail d'orteil car il reconnaît 194 pays. Donc, c'est comme ça que ça fonctionne, fondamentalement , et pour dire parfois , et je ne vais pas le créer, je vais simplement copier les deux drapeaux dont je vais avoir besoin d'un autre fichier, et je vais sauter dans juste ici et affrontez-les à l'intérieur. Donc quelque part par ici, donc nous avons un drapeau grec et nous avons un drapeau français, donc nous allons les placer sous le drapeau britannique afin que nous puissions les centrer comme ça, tenant notre touche de changement, bien sûr, position et ancienne façon juste ici. Alors 1234 vers le bas. Et ce drapeau français. Si je clique dessus juste ici et que je le déplace, vous pouvez voir que c'est 40 pixels vers le bas aussi. Donc, ce dont nous avons besoin, c'est que nous allons créer un contexte pour cela. Comme nous l'avons fait avec nos chambres. Vous pouvez donc copier cet arrière-plan à partir de pièces ou en créer un autre, et je vais simplement le copier. Donc le contrôle D traîné à l'extérieur de ce groupe drapeaux localisateur ici air, et je vais simplement maintenir la position de décalage. C' est quelque part par ici. Je vais le placer jusqu'à ce qu'il rencontre le drapeau français au quart de travail inférieur. Voulait 34 mais avec son sélectionné Donc 1234 comme si je vais le déplacer jusqu'à ce qu'il se rencontre en haut et réduire l'esprit à, par exemple, disons 100. Voyez à quoi ça ressemble. Ouais, ça a l'air bien. Positionnez-le au centre et je vais orteil rester ces drapeaux ou langues. Descendez BG Group. Ces deux langues, comme ça et ont dû descendre à la fin comme ça. Aussi déplacer ci-dessous ne jamais être Jean parce qu'il va orteils ont fondamentalement le même effet que nous voulons. Et c'est fondamentalement tout pour cette liste déroulante. Donc, fondamentalement, quand les gens cliquent sur les pièces, il deviendra bleu. Comme la couleur du bas. Il montrera ce menu déroulant, et les gens peuvent cliquer sur l'un de ces choix. Même chose pour les drapeaux. Donc, s'ils veulent changer la langue du site Web, ils peuvent cliquer ici, puis sélectionner leur langue. Donc, nous allons utiliser ceci et créé pour ce formulaire juste ici en bas. Et pour gagner du temps, nous pouvons simplement copier le menu déroulant de cette pièce. Alors contrôlez D. Je vais le déplacer à l'extérieur de ce dossier et ensuite simplement le déplacer jusqu'à ce qu'il soit situé près de notre formulaire de réservation. Alors je vais le déplacer à l'intérieur et ce que nous voulons ici. Comme vous pouvez le voir, nous avons fondamentalement des frontières pour tous d'entre eux, mais nous voulons supprimer les frontières de tous. Donc c'est comme ça que ça va ressembler à moi rapidement haut ça. Donc si j'ouvre notre formulaire et ouvre les invités, l' enregistrement, le départ et la chambre. Nous avons des commentaires. Et pour tous, nous avons la frontière. Donc nous allons enlever la frontière de tous. Ainsi, vous pouvez cliquer un par un ou vous pouvez sélectionner plusieurs choix, puis simplement supprimer la bordure comme ça. Donc, quand les invités sont arrivés sur la page, cela ressemblera à ceci. Donc, quand ils cliquent sur le livre maintenant et qu'ils ont le type de pièce activé, la bordure d'entrée apparaîtra comme ça, et ceux-ci n'auront pas encore de bordure. Mais alors, quand ils cliquent sur le calendrier, par exemple, juste ici sur le poulet, il leur montrera la frontière. Maintenant, cela devrait montrer l'âme de type chambre. C' est un contrôle de pièce classique, voir, Donc, comme vous pouvez le voir, parfois vous pouvez repérer ces flèches plus tard dans le processus. Donc comme ça, et maintenant on l'a réparé. Revenons à nos listes déroulantes, et je vais vous montrer comment vous pouvez les créer. Alors tout d'abord, créons une liste déroulante de chambres. Donc, c'est là. Je vais le positionner à l'intérieur du dossier de cette pièce, ou vous pouvez le placer en dessous comme vous le souhaitez. Faisons ça quand même. Donc sa position en dessous et, comme vous pouvez le voir, il colle maintenant parce qu'il n'a pas de coins arrondis, mais il a plutôt des coins droits. Donc, ce que vous pouvez faire est de le déplacer vers le haut. Alors maintenez le décalage jusqu'à ce qu'il rencontre celui-ci comme celui-ci, et je pense que ça a l'air bien et vous pouvez positionner ce doute si vous voulez, mais je ne vais pas les pieds. Je vais juste, tout simplement étendre, cette route arrière jusqu'à ici. Donc, jusqu'à ce qu'il rencontre ce bord, fondamentalement, et vous pouvez cliquer à l'intérieur et voir comment votre entrée est donc il est 800. Je vais faire la même chose ici. Ainsi, 800 comme vous pouvez le voir, il s'est étendu jusqu'au bord. Maintenant, nous avons notre liste déroulante pour nos chambres. Fondamentalement, il ressemble à celui ci-dessus, alors disons-le. Mais avant cela, je vais le copier afin de contrôler le et je vais déplacer celui-ci vers le bas. Comme ça jusqu'à ce qu'il se rencontre comme nous l'avons fait avec l'avant comme ça. Et on va le cacher pour voir ce qui se trouve ici et c'est un invité. Cachons donc celle-là aussi. Et ça va être des invités tombent comme ça, et dedans ils allaient orteils. En gros, supprimez certains de ces éléments afin que nous puissions voir ce que nous faisons. On va se mettre au point dans quelques choses qui vont déterminer quels invités vont venir dans cette pièce. Tout d'abord, nous allons avoir des adultes comme ça, et nous allons avoir des enfants ci-dessous comme ça parce que nous voulons que les gens aient la sélection s'ils ajoutent, s'ils apportent des enfants avec eux ou Non, parce que les employés de cet hôtel seront en mesure de dire à Okay, vous pourriez avoir besoin de ce type de chambre. Vous pourriez avoir besoin de ces accessoires dans votre chambre. Il vous faudra peut-être autant de lits, draps et ainsi de suite pour que tout le monde sache ce qu'il a à faire. Donc, nous allons cliquer sur l'arrière-plan des chambres, et nous allons le renommer en invitant BG. Et une fois de plus, tout cela est important lorsque vous commencez à prototyper plus tard sur orteil ont votre couche et nommé correctement afin que également animer les entités et les autres fonctionnalités de cette matière à l'intérieur des oeufs d fonctionnent correctement. Et je vais l'expliquer plus en détail quand on arrivera au prototypage des parties discours. Donc, pour l'instant, réduisons la taille de cette liste déroulante d'invités vers le bas BG. Donc maintenez ceci et déplacez-le jusqu'ici parce que si vous vous souvenez, c'était 40 pixels vers le bas. Donc comme ça jusqu'à ce qu'ils rencontrent le texte et vous pouvez supprimer ce texte parce que nous n' plus besoin, avonsplus besoin, ce que nous allons créer ici. Donc, quand les gens sélectionnent des invités, vous pouvez voir à quoi cela ressemble, et cela devrait aller au-dessous des invités comme ceci. Donc, une fois de plus, quand les gens choisissent des invités il montrera leur qui a abandonné, et ils doivent être en mesure de choisir combien d'adultes ou combien d'enfants viennent avec eux. Alors donnons-leur ces options. Donc ce qu'on va faire, c'est frapper le contrôle de ces deux-là. Retrouvez ceci et sur ce 1er 1 pour nous. Mettons-les au centre sur ce premier type sans forme en deux. Et sur cette 2ème liste 1, tapez zéro, et nous pouvons les positionner comme ceci juste en dessous. Tu peux les laisser comme ça. Ça n'a vraiment pas d'importance, et c'est à toi de décider. Centrez-les comme ça, et nous pouvons peut-être les positionner quelque part par ici. Maintenant, ce dont nous avons besoin. Ceux-ci, nous devons créer un signe plus afin qu'ils puissent ajouter combien d'adultes ou combien d'autres enfants viennent avec eux. Donc, créons cela un moyen facile de le faire. C' est simplement d'utiliser un outil rectangle. Donc, comme ça, vous pouvez le remplir avec cette couleur. Comme ça, supprimez le contrôle de bordure de et vous pouvez faire pivoter cette section comme ceci. Donc, vous avez fondamentalement ces deux rectangles et vous pouvez cliquer ici pour que vous puissiez les ajouter comme une seule unité. Mais avant de faire ça, nous avons besoin d'un moins. Donc, nous allons contrôler la chaleur D ruine pour le déplacer ici, et nous allons sélectionner ces deux comme ça et simplement frapper ici ce qu'il dit, ajouter parce que cela va les ajouter comme une forme séparée afin que nous pouvons peut-être taper des annonces ou supprimer quelque chose comme ça et vous pouvez les positionner pour être au centre de votre texte. Donc, comme ça, et ensuite vous pouvez peut-être faire un espacement. Alors, les équipages, et déplacez-le. Peut-être que 40 comme ça 40 avec celui-là aussi bien comme ça. Et vous pouvez les déplacer tous, y compris le zéro. Remorquez ce bord, puis maintenez le décalage de plus de 40 pixels, orteil à gauche, puis dupliquez simplement ces derniers si contrôlés profondément et déplacez-les en dessous jusqu'à ce qu'ils soient au centre de votre zéro. Et vous pouvez ensuite organiser vos couches un peu mieux. Donc, comme ça. Et voilà. Vous avez créé votre dépôt, leur menu. Mais cela doit être ici, et vous pouvez le fermer, cliquer sur une attente et voir à quoi cela ressemble. Maintenant, si vous pensez que cet espacement est un peu désactivé, vous pouvez le changer si vous le souhaitez. Donc, ce que vous pouvez faire est simplement de localiser où ils sont. Ainsi, les invités se déroulent et vous pouvez sélectionner tous leur position jusqu'à ce qu'ils soient alignés avec ce bord comme celui-ci. Comme si tout le quart. 1234 Puis à nouveau, 1234 Et puis simplement déplacer ceci jusqu'à ce qu'il rencontre avec le bord inférieur comme ça. Et puis déplacez-les tous en arrière de 40 pixels. Donc 1234 Et maintenant vous avez un espacement beaucoup plus agréable entre eux. Et maintenant, on va aller de l'avant et sauter et faire la même chose pour ce Stop 1. Ce sera donc plus facile, car nous n'avons que des calques de texte. En gros. Alors déplacez-les jusqu'à ce qu'ils rencontrent ce sport pour correspondre, comme ça. 12341234 Encore une fois et déplacez ce fond vers ici. Alors ramène le dos. 1234 comme ça et maintenant ils sont au milieu. Alors disons-le. Je vais cliquer sur cette entrée, Supprimer la bordure. Je vais cliquer dessus. Entrée a supprimé la bordure pour l'instant. Je vais les cacher tous. Et maintenant, nous allons nous concentrer sur les calendriers de vérification et de vérification 34. Créer des calendriers: Et maintenant enfin, allons de l'avant et créons notre calendrier. Donc, si je zoom un peu plus près d'ici et que je cuisine juste ici sur le formulaire de réservation , ouvrez le formulaire, situé le poulet, et ce que vous pouvez faire ici est essentiellement copier et coller l'arrière-plan pour l'un de ces autres que vous avez créé afin de contrôler D. Et vous pouvez le faire glisser en dehors de l'ancien nom complet de vérification et beachy comme ça, et vous pouvez le déplacer vers le bas jusqu'à ce qu'il rencontre avec celui-ci. Et si vous trouvez l'un de ces autres distrayant, vous pouvez simplement les cacher. Alors bouge celui-là et je vais le laisser comme ça pour l'instant. Donc, ce que vous allez faire est de le déplacer un peu comme ça, puis de le déplacer juste en dessous pour que nous puissions avoir assez d'espace pour notre calendrier. Et si vous pensez que cela va s'étendre jusqu'ici, vous pouvez le faire aussi. Donc, par exemple, vous pouvez avoir l'esprit être orteil ici, mais il va entrer en conflit avec ce chèque. Laissons-le comme ça pour l'instant. Donc, sauter à l'intérieur de l'enregistrement et vous pouvez peut-être dupliquer ces outils, contrôler d, l'a traîné à l'extérieur et puis simplement les placer ci-dessous pour entendre, ou vous pouvez simplement cliquer sur eux, puis les déplacer ci-dessous. Parfois, vous pouvez trouver ces bugs, donc comme vous pouvez le voir, rien ne fonctionne. Déplaçons celui-ci juste un peu vers le bas pour que nous puissions voir où est le bord. Donc quelque chose comme ça et je vais taper les orteils juste ici. Septembre de 2000 et 19 par exemple. Et je peux le positionner au milieu comme ça, Ou vous pouvez rapidement sélectionner ces deux positions au milieu, et maintenant vous pouvez le positionner comme avant. Donc, quelque part par ici, et puis vous pouvez cliquer sur 2 Septembre et jusqu'à ce qu'il s'aligne avec l'endroit, Magister décalage 1234 si vous voulez, ou vous pouvez l'avoir, aussi. C' est vraiment à vous de décider, ou vous pouvez le faire pour ces autres. Donc pas. Nous allons créer un jour donc dimanche. Ou vous pouvez simplement avoir des s comme ça et vous pouvez appuyer sur Répéter Great. Donc nous avons besoin de sept comme ça, et ce que vous pouvez faire est de le positionner ici. Donc 12 peut-être, Et puis simplement augmenter l'espacement à ici, par exemple, et maintenant vous pouvez taper lundi sur celui-ci. Ou vous pouvez encore mieux sur le groupe de cette grille de répétition. Cliquez ici et maintenant vous pouvez appuyer sur le contrôle G pour les regrouper comme ici, positionner au milieu comme si et maintenant ce que nous pouvons faire est de taper en jours présentateur et peut-être position. C' est 20 en bas comme ça, et peut-être qu'on peut même changer les couleurs. Alors utilisons cette couleur, peut-être, peut-être, ou quelque chose d'un peu plus sombre. Peut-être qu'on peut même utiliser du bleu, donc c'est à toi de décider. Mais utilisons celui-ci, par exemple, juste pour l'instant, juste pour l'instant, et vous pouvez sauter à l'intérieur et commencer à taper. Donc celui-ci est mardi, celui-là est mercredi. Celle-ci est jeudi. Vendredi. Il va rester dimanche et samedi. Huit. Comme ça. Donc, lorsque les jours sont terminés, vous pouvez appuyer sur le contrôle D et descendre un peu. Alors qu'est-ce que cliquez sur celui-ci et positionnez-le vers le bas 20 comme ça et nous voulons cinq vers le bas afin que vous puissiez soit utiliser Répéter. Excellent pour ça aussi. 2345 Comme ça Et nous allons essentiellement étendre ces BG jusqu'à quelque part ici, puis appuyer sur 1234 en utilisant votre touche Maj afin que nous puissions avoir un espacement pour tous . Comme ça. Et comme vous pouvez le voir, ça va jusqu'au bout. Fondamentalement, les orteils sont pouces inférieurs Alors ce qu'on peut faire. Donc ce sont nos jours pour que nous puissions frapper ici et vous pouvez frapper sur le groupe super comme ça, et ensuite vous pouvez même sur le groupe tous, comme si vous voulez, mais je vais les laisser tels qu'ils sont, ou même mieux. Faisons ça donc frapper sur le groupe sur tous, et ensuite nous allons les regrouper par colonne, donc il va être plus facile pour nous de les aligner avec ces souhaits Stop. Alors faisons ça. Donc, je vais cliquer sur les côtés de l'art d'été, et je vais cliquer sur le premier décalage de trou, puis cliquez simplement sur Contrôle G. et peut-être que je peux les appeler numéro un ou Row 1 par exemple. Ouais, nous allons faire la même chose pour toutes ces autres dettes. Donc, contrôle, G, je vais nommer ça un peu aussi, et faire la même chose pour tous ces autres. Permettez-moi de mettre rapidement la vidéo en pause ici pour que vous ne vous ennuyez pas avec moi de les sélectionner tous . Ainsi, lorsque tous sont sélectionnés, vous pouvez aller de l'avant et ajouter vos dates. Donc, par exemple, peut-être que vous pouvez voir quelque chose comme des jours. Alors peut-être que ce sera 29. Ça va être 30. Il va être la première seconde, puis il et vous pouvez hors cours, maintenez le contrôle et cliquez directement à l'intérieur. Ça va être cinquième. Ce sera la sixième septième, et laissez-moi m'opposer à la vidéo ici pour que je puisse sentir le reste d'entre eux et ensuite revenir vers vous. Maintenant que nous les avons tous remplis, nous pouvons sélectionner un numéro deux d'ici et lui donner un peu de couleur hors visibilité inférieure. Donc on peut faire avec celui-là. Par exemple. Non, la même chose pour ce numéro un et la même chose pour 29 30 parce que ceux-ci sont du mois précédent, et fondamentalement nous pouvons le donner Octobre, Disons, parce qu'il a 31 jours et simplement positionnez-le au milieu comme ça, et ce que nous allons faire est maintenant de les aligner tous un peu mieux. Donc, utilisons mais un seul et sélectionnez-les tous. Positionnement comme ça fermé le dossier que j'ai écrit à aimer, alors jetez trois comme ce plancher pro, comme alors cinq. C' est vraiment fastidieux, mais vous devez le faire fondamentalement. Donc, parfois, vous avez trouvé que ces tâches ont vraiment fastidieux. Mais à la fin de la journée, en tant que designer, vous devez vraiment le faire. Donc, une dernière chose que vous pouvez faire est simplement en groupe les jours. Ensuite, positionnez ceci pour être au centre de votre journée. Alors maintenez simplement le décalage et déplacez-le jusqu'à ce qu'il soit au milieu de votre journée, fondamentalement comme ça jusqu'à ce qu'il se rencontre au milieu comme ça et puis quand vous terminez que vous tolérez, appelez simplement ces jours. Donc celui-ci est dimanche comme ça. Celle-ci est lundi, mardi, mercredi, mercredi, et laissez-moi faire une pause rapide de la vidéo ici à nouveau. Et puis, lorsque vous terminez cela, vous pouvez simplement les faire glisser dans leurs dossiers dédiés. Celui-ci est samedi. Celle-ci est vendredi jeudi donc fondamentalement les a laissés tomber. Donc celui-ci est mercredi. Donc mardi, lundi, et enfin dimanche, comme ainsi et pendant votre comptoir est terminé. Donc maintenant, si je les sélectionne tous et que je vois où ils sont ici, donc je peux les regrouper tous comme pour contrôler G. Et ce qu'il nous faut, c'est une flèche. Donc, nous allons simplement utiliser celui-ci, par exemple. Alors contrôlez Andi pour le dupliquer. Je vais le déplacer dehors pour entendre et je vais le positionner juste ici. Ensuite, je vais orteil inclus en vue de notre dossier et ça va être notre flèche droite comme ça, et je vais la faire pivoter et maintenir ma touche Maj. Positionnez-le au milieu comme ça, faites qu'il soit 40 à partir de la droite, comme ça. Contrôle d Ça va être une flèche gauche comme ça ? Et vous pouvez simplement le retourner horizontalement et le positionner à 40 pixels de ce bord gauche . Donc elle 81234 comme ça, et Octobre va être au centre et c'est notre calendrier, comme ça Et une fois de plus, s'ils sélectionnent le check-in, cliquez sur l'entrée, inclure la bordure. Donc c'est à ça que ça va ressembler. Donc, fondamentalement, ce calendrier va se dérouler et ils seront en mesure de sélectionner n'importe quelle date qu'ils voudraient. Et quand ils ont fini avec cela, il va mise à jour des orteils ici va fermer, et puis ils vont cliquer sur le chèque, et ils devront faire fondamentalement la même chose. Donc, pour cela, utilisons le calendrier afin de contrôler économiquement. Voyez, double-cliquez ici. Contrôle v Amero comme ça, contrôle de une fois de plus et ce sera notre calendrier de départ. Mon entrée et vous pouvez déplacer la chose entière jusqu'à ce qu'elle s'aligne avec notre chèque comme ça, se déplaçant en dessous de lacaisse comme ça, se déplaçant en dessous de la , le cacher, et je vais cacher le compteur d'enregistrement aussi bien. Cliquez ici, supprimez la bordure parce que nous sommes nécessaires pour le moment et c'est notre formulaire essentiellement rempli . Donc, dans la prochaine section du parcours, nous allons aux pieds. Commencez par notre prototypage. Je vais vous montrer comment vous pouvez créer des interactions de base qui peuvent vraiment faire apparaître votre design et faire comprendre à votre client votre processus de pensée et votre logique derrière cette conception. Comme vous pouvez le voir, nous avons parfois quelques tâches fastidieuses que nous devons terminer et que nous devons compléter le numéro de la façon dont vous pouvez créer ce calendrier, utilisant un plug in afin que vous puissiez cliquer sur le plug ins il s'appelle Il s'appelle Calendrier et vous pouvez le rechercher ici, un calendrier. Et si je clique sur montrer plus, c'est de Palo être un génie. Mais à mon avis, ce n'est vraiment pas si bien parce que Mais je viens de vous montrer que vous devez créer fondamentalement vous-mêmes parce qu'il ne met pas à jour les téléphones aux tailles que vous vouliez. Vous ne pouvez pas choisir la taille du téléphone. Donc, si je clique ici pour vous montrer que vous pouvez choisir une langue que vous pouvez simplement vendre taille. Donc fondamentalement la taille du calendrier, ce que vous pensez que c'est bon, mais il ne vous montre pas toutes ces dates et tous ces détails que vous pouvez vérifier le mois que vous voulez. Mais comme vous pouvez le voir, ce n'est vraiment pas tout aussi sophistiqué. Vous pouvez choisir le début de la semaine et la façon dont le format va ressembler et cliquez simplement sur Faire sous. Mais comme je l'ai dit, tu peux jouer avec si tu veux. C' est gratuit, bien sûr, mais ils ont dit que ce n'est vraiment pas si bon et vous devez faire tous ces changements importants vous-mêmes. Donc fondamentalement, c'est tout pour les pièces de conception. Et dans la prochaine partie du cours, nous allons sauter dans la section prototypage, et je vais vous en dire un peu plus sur la façon dont vous pouvez vraiment donner vie à ce design avec des interactions et des animations de base, donc je va te voir là-bas. 35. Organisation: dans cette section du cours, vous allez commencer par le prototypage. Et si vous n'avez jamais fait de mauvais rodage auparavant, en particulier dans Adobe X'd. Fondamentalement, ce que vous devez créer est un état, puis état à. Donc, si vous vous souvenez de ce que nous avons fait auparavant dans une partie précédente, nous avons créé , par exemple, la liste déroulante de cette salle ainsi que ces drapeaux abaissés. Donc fondamentalement, nous avons avant et après l'état même liquide ici. C' est donc l'état avant pour la section de la pièce , par exemple, et lorsque vous cliquez sur cette flèche, il ouvrira l'état après, et après qu'il est ouvert, vous pouvez alors choisir ce que vous voulez faire avec elle. Ainsi, par exemple, vous pouvez choisir différentes sélections, et nous avons des salles en plastique et laissez-moi rapidement vérifier ce que nous avons. Pourtant, nous avons une chambre classique, chambre familiale et une grande chambre de luxe, comme nous l'avons fait pour Si vous vous souvenez, nous avons l'ombre portée de fond juste ici pour que les gens puissent le choisir, puis le sélectionner à partir de là , puis passer à autre chose. S' ils veulent beaucoup plus simplement, cliquez sur ce texte juste ici. Donc c'est fondamentalement tout à propos de pro pas. Vous devez créer différents états. Alors, diacre d'Adobe X, savez ce que vous voulez montrer à vos spectateurs ? Alors, voulez-vous leur montrer ceci, qui est fondamentalement une section déclippée, ou voulez-vous leur montrer la section sur laquelle on a cliqué et qui a été ouverte en bas ? C' est ce que nous allons faire dans cette partie du cours. Et pour commencer, nous devons organiser un peu nos dossiers. Donc, si vous vous souvenez que chacun de ces conseils a un nom juste ici en haut . Donc, si vous allez de gauche à droite, nous avons le logo. Ensuite, nous avons un bref de conception de la planche d'humeur. Nous avons nos dessins de cadres métalliques juste ici. Ensuite, nous avons le cadre métallique et enfin nous avons le design. Donc, ce dont nous avons besoin pour le prototypage, c'est que nous devons créer différentes copies de cette conception avec différents états à l'intérieur. Donc c'est comme ça que nous allons faire ça. On va cliquer dessus. Notre carte contrôle profondément, et peut-être que nous pouvons appeler ce prototype un ou juste un ou curry une fois. Donc ça s'appelle ça protéger un, et ensuite vous devez compter combien de ces exemples voulez-vous montrer ? Alors allons d'abord montrer. Par exemple, chambres se déroulent, donc ça va être celui-ci, puis dans le second état, ou nous voulons montrer le drapeau déroulant pour qu'il contrôle la dernière fois. Et on va appeler ça Protect aussi, aussi, comme ça. Et si vous, par exemple, voulez montrer quand les gens cliquent sur l'un d'eux, vous devez créer trois états différents. Mais ne remplissons pas trop cette conception, et je vais vous montrer comment vous pouvez le faire pour ceux-ci là-bas parce que la majorité de la faction arrive en fait là-bas. Donc j'ai juste remarqué que le fond ne montre pas ici. Alors réparons rapidement ça. Nous avons le formulaire cliquez sur le bouton juste ici, et nous allons faire la même chose pour ces deux parce que j'ai oublié de l'inclure quand nous concevons ces éléments de formulaire comme ça et ainsi de suite. Ce que vous voulez, c'est que nous avons cet état, qui est fondamentalement l'État du Nord, et il n'est pas ouvert donc nous pouvons le connecter à ce 1er 1 Et pour chacun d'eux, nous devons créer un écran supplémentaire. Nous devons donc créer 123 écrans supplémentaires. Alors faisons ça. Et on peut peut-être les appeler. Oui, allons-y avec les chiffres. Prototype trois. Il suffit de rendre les choses faciles et bien lisibles. Donc prototype pour et enfin prototype Fife. Et si tu as raté quelque chose, ne t'en fais pas. Vous pouvez toujours revenir et faire quelques doublons, puis sauté en arrière et faire ces changements. Donc, ce que je veux faire est de les sélectionner tous sauf pour notre design original, et simplement les déplacer une touche vers la droite afin que nous puissions les séparer un peu mieux de notre design et de tous ces autres éléments. Et dans la prochaine vidéo, nous allons commencer par notre prototypage, et je vais vous montrer comment vous pouvez connecter certains de ces éléments, puis créer un prototype applicable, que vous pouvez ensuite partager avec vos clients et ils peuvent partager avec les développeurs afin qu'ils puissent voir les transitions de base et qu'ils puissent voir ce que nous pensions et le processus de conception derrière elle. Alors je te verrai là-bas. 36. Prototyping 1: Maintenant, vous pouvez imaginer que si vous avez, par exemple, 20 pages différentes, la section de prototypage pourrait devenir trop bondée. Donc, c'est toujours une bonne idée de le séparer de votre design original, parce que de cette façon, il aura l'air beaucoup plus propre que de simplement les regrouper tous ensemble comme ça. Donc, ce que je vais faire si je zoom arrière tout le chemin, vous pouvez voir que j'ai atteint la fin de la toile Adobe X'd. Donc je vais tout sélectionner, et ce papier ne va pas bouger. Mais on s'en occupera un peu plus tard, et je vais les positionner jusqu'au sommet. Ainsi,par exemple, par exemple, lorsque nous concevons plus tard des pages supplémentaires, nous pouvons simplement sélectionner tous ces prototypes et les déplacer simplement vers le bas. Et toutes les interactions que nous avons conçues notre orteil vont être à l'intérieur. Alors peu importe. Retirez-les sur la toile et ils vont toujours être gardés à l'intérieur. Donc, laissez-moi rapidement déplacer ce papier ici, donc il est à l'intérieur de son emplacement d'origine comme celui-ci et assurez-vous qu'il est 70. C' est tellement que c'est fondamentalement ça et une chose que j'ai oubliée. Et c'est ce que je dis. Que dans la vidéo précédente que vous pouvez faire est beaucoup de copies que vous voulez est que je veux faire cette petite animation, donc je veux. Quand avez-vous cliqué sur ces flèches ? Je veux qu'ils puissent changer d'une image à l'autre et d'une attraction fondamentalement à une autre. Alors créons un de plus. Donc, je vais simplement cliquer sur celui-ci Control D et renommer ce prototype six. Donc, gros, fur et à mesure, nous allons commencer et nous allons créer dans ces animations supplémentaires. Alors commençons par les premières choses du haut. Nous voulons créer des chambres, et nous voulons les agrandir. Alors je vais cliquer sur les chambres. Je vais cliquer sur la flèche vers le bas, et je vais la retourner verticalement comme ça, et je veux l'appeler Gardez-le bas, Arrow comme ça. Et puis nous allons créer un élément supplémentaire qui allait orteil inclure dans notre guide de style dans la section suivante du cours, ainsi que juste ici dans les composants. Alors, sautons ici. Donc, vers le bas, c'est haut, Et ce que je veux faire, c'est que je veux cliquer sur cette chambre steaks, et je veux appliquer la même couleur bleue que nous voyons ici, parce qu'il va indiquer qu'il a sélectionné. Alors cliquez ici et ce que nous voulons est de revenir en arrière juste ici et de montrer les chambres déroulantes . Donc il suffit de cliquer juste là, et c'est tout. Donc, ce que je veux faire maintenant est de connecter deux d'entre eux pour que vous puissiez voir ce qu'il fait. Revenez en mode prototype ici. suffit de cliquer dessus, cliquer sur les chambres ou sur la flèche. Tout ce que tu veux. Je vais cliquer sur la flèche. Ou peut-être que nous pouvons cliquer sur les pièces parce que cette cible est beaucoup trop petite et nous allons les regrouper quand nous commencerons à coder fondamentalement plus tard. Je veux dire, ils sont développeur va commencer à appeler plus tard, et ils vont regrouper ces deux éléments de toute façon, donc utilisons-nous celui-ci parce que c'est beaucoup plus gros à frapper. Il vous suffit de le faire glisser et de le dessiner ici, et ce que vous voulez, c'est qu'ils puissent taper sur le texte de cette pièce . Ensuite, nous avons l'action, donc nous allons choisir. Animer aussi parce que, comme je l'ai dit plusieurs fois tout au long du processus de conception, lorsque vous avez vos calques nommés le même, ils vont travailler orteil fondamentalement la même lorsque vous démarrez l'animation automatique plus tard, quand vous arrivez à réfuter la phase de frappe de votre projet, donc fondamentalement gardez-le, Auto Enemy destination va être prototype un assouplissement. Alors, comment le facile va ressembler vous pouvez cliquer sur ces, par exemple, vous pouvez accrocher des limites. Cependant, vous voulez que cela regarde, Gardez-le. Il est sorti et la durée. Utilisons 0.46 par exemple. Je vais cliquer ici. Cliquez sur l'aperçu et en grand est juste un peu. Donc, quand je clique ici, vous pouvez voir que la flèche a tourné, le texte est devenu bleu et cette liste déroulante est apparue de haut en bas et faisons le contraire. Donc, je vais cliquer sur les chambres une fois de plus glisser orteil ici, et il va contenir exactement les mêmes styles que nous l'avons fait avant Maintenant, si je clique ici dans ce 1er 1 clic aperçu localement pleuré ici. Et si je clique ici, vous pouvez voir que la flèche a tourné cette pop up a montré un effet, comme ici, il va alors simplement le cacher. Donc, encore une fois, si vous vouliez apparaître un peu différemment, vous pouvez le faire aussi. Et je vais te montrer comment tu peux changer ça. Ainsi, par exemple, le design. Faisons-le comme ça et tu peux le déplacer dans la première partie. Donc, dans cette partie et dans la deuxième partie, il va ensuite sauter vers le bas. Donc, vous pouvez le faire si vous le souhaitez, et passons rapidement à une autre section. Donc, lorsque les gens cliquent sur ce drapeau, allez sur le prototype et faites-le glisser sur le deuxième écran et même apparaîtra pour cela. Et quand ils cliquent sur celui-ci, il fera la même chose pour cette animation automatique est sorti. Donc, nous utilisons exactement les mêmes paramètres pour celui-ci maintenant. Il suffit d'aller en vue de ce deuxième état et les Juifs, langues ont chuté et nous allons faire la même chose pour cette flèche comme avec elle pour cette première flèche. Donc, nous allons retourner le travail en particulier. Et si j'ai fermé ceci et aller dans le moule d'aperçu, cliquez ici. Merci de jouer. Je vais plus gros orteil juste un peu. Donc, quand ils cliquent ici et si vous cliquez ici, il ouvrira cette liste déroulante. Mais comme vous pouvez le voir, cette liste déroulante n'est pas ouverte. Donc, quand je frapperai, ça les ramènera à ma page d'origine. Donc, quand je clique ici et puis que je clique ici, je peux pendre. Cliquez ici et cliquez ici. Donc, fondamentalement, vous pouvez jouer avec un peu plus et vous pouvez sélectionner, par exemple, différentes langues si vous voulez changer tout son texte et jouer avec lui afin que vous puissiez mieux présenter à votre client si vous avez le temps. Mais c'est beaucoup plus facile s'ils peuvent vous fournir la copie. Ainsi, par exemple, il s'agit de la copie anglaise. S' ils peuvent vous fournir la copie grecque originale, ce serait génial. Vous pouvez alors simplement copier et coller tous ces éléments et les faire écrire en grec plutôt qu'en anglais, sorte que vous pouvez ensuite animer cela plus loin. Ainsi, par exemple, il s' agit de la version anglaise, et lorsque vous cliquez ici, elle passe ensuite à la version grecque du site Web. Mais comme ils l'ont dit, vous devez demander à votre client orteil, vous livrer cette copie parce que si vous utilisez Google, traduisez naturellement, il ne sera pas présentable et professionnel. Donc, dans la prochaine vidéo, nous allons aller de l'avant et continuer, en ajoutant des transitions et je vous verrai là-bas. 37. Prototyping 2: continuons maintenant et commençons à ajouter nos transitions. Donc, dans la vidéo précédente, nous avons ajouté ceux-ci à la liste déroulante. Nous allons donc aller un peu plus loin sur un plateau dans l'une des vidéos précédentes . Vous pouvez ajouter plusieurs pages en utilisant exactement la même méthode, puis ajouter simplement ces ombres portées. Donc, si je clique juste ici et puis situé sur un BG et le rendre visible, vous pouvez voir à quoi cela ressemble. Donc, fondamentalement, quand ils cliquent ici, il montrera cela abandonné. Et vous pouvez, bien sûr, montrer ceci à votre client. Mais parce que nous n'avons pas de pages supplémentaires pour le moment, surtout ces chambres Bages, cet effet est vraiment cela n'a aucun sens parce qu'ils peuvent une clique en apprendre plus et aller quelque part parce que nous n'avons pas encore conçu cette autre page . Permettez-moi donc de le cacher rapidement et de fermer toutes ces sections précédentes, et ce que nous voulons réellement, c'est de concevoir celle-ci. Donc, comment nous allons le faire, c'est , c' pourquoi nous avons créé ces copies séparées. Donc, dans la copie agitée, Donc protégez numéro trois, nous allons le localiser ici, Donc cliquez sur son Je vais zoomer un peu plus près, et ce que je veux vraiment est d'inclure une image différente. Je vais donc sauter dans mon dossier d'images et localiser cette image de lumière. Je vais le glisser et le déposer à l'intérieur. Vous pouvez double-cliquer sur la trajectoire, maintenir votre touche Maj enfoncée, puis simplement la déplacer un peu vers le bas pour qu'elle s'adapte beaucoup mieux à cette zone d'aperçu . Et ça s'appelle Harmonistes comme la maison. Donc je vais frapper le contrôle C à partir du contrôle d'Internet. On l'a fondé. Et parce que ce texte est pour le Dallas, vous devez le convertir texte de zone d'orteil. Cliquez simplement ici. Je vais sauter dans mes branchements. Je vais regarder beaucoup de gypse rempli le texte réservé, insérer du texte, et il va insérer un peu aléatoire beaucoup de texte ipsum ici, et c'est fondamentalement votre deuxième état. Donc, quand les gens cliquent sur le 1er 1, ils viendront ici, et quand vous cliquez sur la flèche arrière, je veux dire flèche gauche, ils vont retourner là-bas, Donc nous allons simplement sauter dans notre 1er 1 Donc prototype c'est un écran d'accueil. Donc, quand le clic sur cette flèche, il les emmènera juste ici, et nous allons jouer avec ces paramètres. Alors choisissons pour l'assouplissement. Que choisir snap, par exemple, juste pour voir à quoi cela ressemble. Et pour celui de retour, nous allons cliquer sur cette flèche et la faire glisser ici, garder les mêmes paramètres. Ensuite, il a aperçu le mode juste pour que nous puissions voir à quoi cela ressemble avec l'agrandir. Et si je fais défiler tout le chemin vers le bas, vous pouvez voir comment notre site Web va ressembler une fois codé et parce que nous avons fait toutes ces sections belles, claires, grandes. Quand les gens défilent, défilent vers le bas, ils vont être maintenus sur une section et ils vont aller orteils. Soyez en mesure de prendre leur temps et de lire toutes ces sections joliment. Nous ne faisons pas d'autres interférences et sans que d'autres choses surgissent du côté. Donc, en gros, quand ils viennent ici, ils peuvent alors cliquer sur cette flèche et vous pouvez voir à quoi ressemble l'animation. Mais je n'aime pas vraiment ça. Je pense que l'animation automatique va être beaucoup mieux Donc ce que vous pouvez faire est simplement cliquer sur celui-ci parce que, comme vous pouvez le voir, cette flèche va, remorquer cet écran. Donc je vais cliquer ici. Je vais choisir auto animate à partir d'ici et puis simplement je vais choisir easy out, et je vais cliquer sur celui-ci et choisir fondamentalement dans les mêmes paramètres. Alors il est sorti. Et maintenant, quand j'appuie sur l'aperçu, voyons à quoi ça ressemble. Alors je vais aller jusqu'au bout. Cliquez sur la flèche, et comme vous pouvez le voir, la transition semble beaucoup plus propre, surtout là-bas pour le texte. Et comme vous pouvez le voir, ça a l'air bien. Vous pouvez également jouer et ajouter quelques éléments supplémentaires ici. Ainsi, par exemple, vous pouvez utiliser les mosquées pour cacher ces deux parties. Donc, la partie blanche sur la gauche, ainsi que la partie blanche sur la droite, puis masquer les images là et alors tout simplement pourrait faire un léger spectacle et les déplacer comme ça. Mais c'est délicat dans notre exemple, car nous avons cette ombre portée de fond. Vous pouvez également utiliser quelques mosquées avancées, mais je ne vais pas entrer dans cela parce que c'est simplement pour rendre le client où ce que vous essayiez de faire et de leur montrer quelques options. Donc quand ils cliquent sur cette flèche, ils peuvent voir Ok, je comprends. Il passe de celui-ci à celui-là et revient. Donc, les gens savent ce qu'il fait. Donc, nous allons maintenant passer à cette section et dans la prochaine vidéo sur quand orteil ajouter quelques modifications supplémentaires à elle. Et je vais te montrer à quoi ça ressemblera, donc je te verrai là-bas. 38. Prototyping 3: nous attaquons maintenant à ces autres éléments. Donc, si vous vous souvenez dans la vidéo précédente, nous avons ajouté dans cette diapositive ici. Nous avons donc créé une sorte de diaporama pour que les clients soient conscients de ce que nous essayions de réaliser leur. Donc maintenant, ce que nous voulons faire est de créer ces villes à partir d'ici bas. Donc, nous avons essentiellement trois villes de goutte, mais nous avons besoin de créer 1/4 1 oeufs aussi. Alors sautez dans la conception d'un contrôle de douves D et double-cliquez ici et appelez ceci un prototype sept. Et c'est pourquoi j'aime Adobe X d s o. beaucoup parce que vous pouvez simplement avec un clic d'un changement de bouton de conception Moto prototype les a déplacés à nouveau, faire quelques changements supplémentaires les retour à nouveau. C' est vraiment si simple à utiliser, donc j'aime vraiment ça pour ça. Donc, nous allons sauter le mode de prototypage des orteils et cliquez sur ce 1er 1 Donc ce que vous voulez pour celui-ci est quand les gens cliquent sur cette flèche, il va alors tourner à l'envers, puis il affichera cette liste déroulante juste ici, Alors laissez l'anime rapidement. Donc on va utiliser cette flèche juste ici. Donc, si je zoomer un peu cool afin que vous puissiez tenir le contrôle orteil klik à l'intérieur. Mais utilisons tout le champ parce que c'est beaucoup plus facile de cette façon. Donc nous allons le traîner ici parce que, comme vous pouvez le voir ici, nous avons notre léger juste là. Donc, nous allons utiliser le prototype d'animation de Step Auto pour C'est notre port est dans 0.4. Donc exactement les mêmes paramètres que nous l'avons fait avant. Et nous allons appeler ou contrôler la touche Insight, puis simplement le faire glisser en arrière. Et pendant que nous sommes là, nous pouvons ajouter les animations à la fois pour que nous puissions garder le contrôle. Cliquez ici, puis ajouté à la 2ème 1 comme tout ce contrôle Cliquez ici, faites-le glisser en arrière et nous avons deux autres. Donc le deuxième orteil dernier. Donc celle-là est pour le check out. Vous pouvez garder le contrôle. Cliquez à l'intérieur, faites-le glisser vers celui-ci, maintenez le contrôle, cliquez à l'intérieur et faites-le glisser vers la maison et maintenez le contrôle. Cliquez sur le dernier glissé ici contrôle et faites-le glisser tout le chemin en arrière. De cette façon, nous l'ajoutons dans l'effet de tous nos ports. Et maintenant, commençons un titre et en incluant ces éléments. Donc, je vais sauter en mode design et sauter dans celui-ci parce que comme vous vous en souvenez, nous avons ajouté la diapositive sur celui-ci. Donc je vais sauter dans le type de pièce et sur l'importation. Je vais inclure la frontière et je vais montrer les maisons abandonnées comme ça. Donc, c'est fondamentalement tout. Nous pouvons maintenant passer à la 2e 1 Donc le 2e 1 est pour l'enregistrement. Donc, je vais inclure la bordure pour l'enregistrement, comme ça, et je vais afficher le calendrier d'enregistrement juste en dessous. Ensuite, on va fermer ça et en déplacer un, et ça va être pour le départ. Donc, une fois de plus, inclure la bordure juste ici et montrer le calendrier de départ juste ici. Maintenant, sur celui-ci, nous allons cacher le livre maintenant, bouton, ou vous pouvez simplement le déplacer en bas, comme ça. Et ça va rester caché parce que nous avons trop inclus ce chèque. Donc c'est proche et finalement ce que nous avons ici, c'est ce type de chambre. Donc je vais garder le contrôle. Je vais choisir la frontière à partir de l'entrée et je vais montrer aux invités la liste déroulante juste ici . Mais la même chose que nous l'avons fait avant. Il suffit de déplacer ce bouton de livre Now tout le chemin vers le bas à l'arrière. Maintenant, si vous êtes ennuyé par cette ombre, vous pouvez simplement combattre le fond si vous voulez, puis montré une fois qu'il a sélectionné. Mais je pense que ça marche bien. Et une chose que je veux mentionner est avec ces chiffres pour que je puisse vous montrer comment vous pouvez les rencontrer . Et je vais le faire tout de suite. Donc, le contrôle, en effet, nous sommes toujours dans le mode de conception. Donc, ce que vous pouvez faire ici est de cliquer à l'intérieur et cliquer sur trois, par exemple, comme ça Et vous pouvez ensuite fermer ceci et vous pouvez sauter en mode prototypage sautant à ce 1er 1 clic sur le plus, puis simplement le faire glisser ici et vous pouvez utiliser les mêmes paramètres et vous pouvez cliquer sur le moins et le faire glisser en arrière, et il va augmenter ou diminuer le nombre sur les invités adultes. Alors commençons par le début. Cliquez ici. Je vais frapper le mode aperçu agrandir un peu. Et si je clique ici, vous pouvez voir à quoi ça ressemble. Vous pouvez voir le drapeau Arrow tourne dans l'autre sens et nous pouvons faire défiler jusqu'au bas. Localiser sont ce qu'il faut faire en douceur, vous pouvez vite ici. Et comme vous pouvez le voir, Adobe Ex d. Smart car il se souvient de la position de votre défilement. Donc, si je saute tout le chemin ici et ensuite ici, vous pouvez voir qu'il ne bouge pas ma page du tout parce qu'il sait que je suis sur cette scène hors de ma page sur cette diapositive là-bas. Donc, comme vous pouvez le voir, ça a l'air vraiment sympa et je vais descendre et, par exemple, cliquer sur le type de chambre. Comme vous pouvez le voir, il semble bien quand vous le fermez, il remonte. Et ce que j'ai oublié d'ajouter, c'est les flèches. Alors réparons ça. Alors localisez le 1er 1 Ici c'est, juste ici. Cliquez sur cette flèche en sautant en mode design et retournez simplement verticalement comme ça. Et je vais faire la même chose pour ces invités en bas. Donc c'est fondamentalement celle-là le retourner horizontalement, a fermé son formulaire de réservation, et je vais faire la même chose pour ce dernier. Il suffit de le retourner comme ça, et revenons maintenant au 1er 1 et voyons l'ensemble du prototype. Donc, je vais cliquer sur blanc ici, agrandir, et ensuite on va le revoir une fois de plus. Donc, quand je clique sur les chambres, vous pouvez le voir. La flèche sélectionnée s'affiche lorsque je clique sur l'indicateur, elle a sélectionné les zones qui s'affichent également. Vous pouvez faire défiler tout le chemin vers le bas, et nous pouvons voir à quoi ressemble celle-là. Donc, comme vous pouvez le voir, ça change les images. Nous pouvons descendre et maintenant sélectionner à la maison type. Comme vous pouvez le voir, la flèche a tourné vers le haut et nous pouvons cliquer dessus et il la refermera vers le bas. Vous pouvez cliquer sur l'enregistrement. Il montre le calendrier, et comme vous pouvez le voir, l'entrée a le trait sur elle comme nous le voulions. Ainsi, lorsque vous cliquez pour le masquer, il affichera également la hauteur dans le trait. Cliquez sur celui-ci. Il montre exactement la même chose et cliquez sur les invités et comme vous pouvez le voir, cette flèche est retournée en arrière. Donc, quand je clique ici est de nous donner cet effet bizarre avec le bouton Book Now. Donc ce que vous pouvez faire orteil éliminer qui est positionné le livre maintenant bouton tout le chemin en bas dans tous ces ports sont, et je vais le faire parce que c'est vraiment facile, et je vais sauter en arrière et vous montrer. Mais les premières choses d'abord. Voyons si ça marche. Donc, quand je clique ici, ça va montrer trois. Quand je clique ici, ça va aux pieds. Retournez à deux, et vous pouvez alors simplement le cacher et il disparaîtra. Donc, comme vous pouvez le voir, il est vraiment facile de prototyper dans Adobe X'd, et cela va donner la vie supplémentaire à vos conceptions dont vous avez besoin pour les orteils. Donnez d'abord au client l' idée de comment votre design va ressembler, une fois codé. Malheureusement, nous ne pouvons toujours pas ajouter de gifs animés, toe adobe X'd fichiers. Donc, par exemple, ce sera une belle addition si nous pouvons ajouter une sorte de vidéo de fond ici, parce que ce sera une vidéo de fond après tout, alors peut-être que dans le futur nous pourrions jouer avec elle. Mais si vous voulez montrer des prototypes avancés, vous pouvez peut-être aller dans Adobe Premiere ou Adobe after effects, puis y ajouter vos effets . Mais les clients ne peuvent pas cliquer sur. Vos prototypes ne peuvent pas vous laisser de commentaires supplémentaires, alors peut-être que vous pouvez simplement leur expliquer qu'il s'agit d'un GIF animé ou d'une vidéo d' arrière-plan afin que vous puissiez voir avec vos développeurs et qu'ils puissent l'ajouter là. Alors réparons cette dernière chose. Et c'est ceci et bouton afin que je puisse cliquer ici, cliquez sur le formulaire et son ancien chemin vers le bas, puis simplement déplacé vers ici. Fermez toutes ces ceux-là. Bouton Localiser. C' est à l'arrière. Cliquez ici. Le bouton Formulaire est tout le chemin ci-dessous. On peut passer à autre chose. Cliquez ici sur le Forum. Comme vous pouvez le voir, il est en haut, mais nous allons simplement le déplacer vers le bas, et ensuite nous allons sauter en arrière et voir si notre prototype fonctionne avec la section ci-dessous. Parce que, comme X l'a expliqué plusieurs fois tout au long du discours, positionner vos couches est vraiment important parce que de cette façon vous pouvez vous assurer et que ces animations vont réellement fonctionner correctement et que vous n'allez pas avoir effets bizarres et des animations si bizarres et que vous n'êtes pas destiné. Donc, assurez-vous simplement et que vous positionnez et nommez vos éléments dans des groupes comme vous le souhaitez. Il va vous donner cet avantage quand vous commencez à animer, donc je vais simplement le déplacer jusqu'au bas et parce que c'est au même endroit dans tous nos, euh, dessins et faisons la même chose pour ici, même si ça n'a pas d'importance. Mais comme vous pouvez le voir, c'est maintenant juste ici. Alors nous allons sauter dans le moule de prototypage. Cliquez ici, puis il joue en grand un peu. Je vais bouger tout le chemin vers le bas et je ne cliquerais pas ici. Comme vous pouvez le voir, nous n'avons plus cet effet bizarre. Et quand je clique ici, comme vous pouvez le voir, ça a l'air bien et le fond reste derrière comme il se doit. Donc, ces types de correctifs faciles sont des choses vraiment faciles, vraiment rapides et vraiment simples à faire, sorte que vous pouvez simplement localiser le problème et ensuite le résoudre pendant que vous savez ce qu'il est. Et vos conceptions et vos orteils tournent beaucoup mieux que si vous ne le faisiez pas dans la section suivante . Hors du cours, je vais parler de l'exportation de dessins parce que quand vous avez terminé votre conception, liquide en ce moment, vous avez encore les exporter, et vous devez préparer les incendies pour les développeurs comme ils l'ont dit vous. Nous allons donc nous occuper de la structure de dossiers que nous allons traiter avec l'exportation d'images , exportation d'actifs. Et peut-être le plus important de tous, nous allons créer un guide de style, que nous allons ensuite utiliser dans les étapes ultérieures du projet. Lorsque nous ajoutons quelques pages supplémentaires et à l'intérieur de cette étoile obtenu, nous allons inclure toutes les icônes hors des couleurs, tout le texte que nous utilisons pour ce projet parce que de cette façon il va être plus facile pour nous plus tard la ligne lorsque nous commençons à créer des pages supplémentaires pour simplement copier et coller ces éléments et cela gardera toutes les pages semblent cohérentes et toutes les pages semblent appartenir ensemble. Donc, je te verrai là-bas 39. Créer un guide de style: avant d'envoyer un de nos fichiers orteil les développeurs et les fichiers finaux à notre client, nous avons besoin de créer quelque chose qui est appelé Guide de style et guide de style intérieur. Tous les articles que vous avez utilisés pendant votre processus de conception seront inclus. Ainsi, par exemple, nous allons orteil inclure différents fonds et styles de téléphone que nous avons utilisés dans différentes couleurs, différentes icônes. Et puis, lorsque nous avons envoyé ce fichier final au client et à ses développeurs, ils pourront accéder facilement à toutes ces informations maintenant. Oui, ils peuvent cliquer ici dans le panneau des actifs et ils peuvent voir tout ce qui est inclus ici. Mais nous allons aussi inclure ces éléments supplémentaires parce qu'il est beaucoup simple mis pour eux de voir sur des tailles supplémentaires espacements supplémentaires entre les articles et ainsi de suite. Donc, ce que vous devez faire d'abord est organisé notre projet un peu mieux parce que cette partie gauche est un design, et cette partie à droite est un prototype. Donc, permettez-moi de sélectionner rapidement tous les prototypes et simplement la touche de changement à la maison et de les déplacer juste ici. Et comme je l'ai dit, si vous vous souvenez de toutes les interactions vont avoir lieu et seront confinées comme nous les avons créées. Peu importe si vous déplacez ces aéroports vers le bas, vers la gauche, vers la droite, ils seront toujours là. Donc, nous avons maintenant besoin de créer un nouveau nos ports sur aller cliquer ici et cliquez sur un Web 1920 par exemple. Je vais double-cliquer ici et taper dans le guide de style parce que c'est là que notre guide de style va être perspicace et je vais orteil développer juste un peu vers le bas. Et parce que ce n'est pas une page, je peux simplement maintenir cela et le supprimer tous ensemble et à l'intérieur de ce guide de style. En tout cas, les informations pertinentes seront incluses. Mais avant de les inclure, permettez-moi de créer rapidement du texte. Alors cliquez sur le textile, cliquez ici et vous pouvez taper dans la conception, contrôler A pour tout sélectionner et peut-être créé à deux centaines ou peut-être même cinq centaines. Quelque chose comme ça, et vous pouvez peut-être le positionner quelque part ici au milieu. Disons que oui, certains rares ici, et vous pouvez aussi frapper control de pour dupliquer cette position quelque part ici et appeler ce prototype parce que de cette façon, vos clients ainsi que leurs développeurs vont être capable de dire que cette partie est la conception. Et cette partie est le prototype. Et comme je l'ai dit, parce que cette toile est vraiment un grand espace, vous pouvez le positionner comme vous voulez, en fonction de votre projet plus tard. Donc, par exemple, quand nous ajoutons tellement plus de pages ici dans le futur, je pourrais déplacer cette protection vers le bas. Mais c'est vraiment au projet, et cela nécessite, alors créons rapidement le guide de style. Donc la première chose dont nous avons besoin sont ces couleurs. Donc, je vais sauter ici au sort d'actif, et je vais créer laisser compter rapidement 12 couleurs différentes. Donc, je vais simplement cliquer T et sélectionné un guide d'étoiles notre port cliquez t réduire cela à, par exemple, 48 comme ça et je peux cliquer et taper des couleurs. Non, nous n'aimons pas ça et positionnons ça comme ça. 12345678 par exemple. Même dans cette direction. Et je vais créer 12 rectangles différents. Donc quelque chose comme ce coup répéter super et tirer sur 12 et nous allons avoir besoin de les rendre un peu plus petits. Donc, ce que vous pouvez faire est sur la grille de groupe, puis simplement le faire glisser vers ici autour de cela. Ou vous pouvez simplement désactiver le redimensionnement réactif, puis réduire les décide hors de eux comme ainsi. Alors assure-toi que tu en as 12. On n'en a pas besoin d'un de plus. Donc, sélectionnons rapidement ce dernier contrôle D et faisons en sorte qu'il ressemble le même. Alors, qui sont 68 10 12 ? Et je vais les sélectionner tous comme ça, et je vais m'arrêter pour réduire la taille comme du savon. Donc maintenant ce que je dois faire est d'aller de l'avant et de les créer par les couleurs afin que je puisse cliquer sur ce 1er 1 clic sur cette couleur cliquez avec le 2ème 1 cette couleur et ainsi de suite et ainsi de suite. Mais laissez-moi rapidement mettre la vidéo en pause et je vais orteils, commander ces couleurs un peu mieux et puis revenir. Alors maintenant, ils ont un peu plus de sens si vite sur celui-ci, et ensuite tout simplement aller de l'avant et cliquer sur tous. Et ce que j'ai fait ici, c'est que je suis allé du haut bleu, qui est notre bleu principal, et je suis allé jusqu'au bas. Mais quand j'ai fait ça, je les ai commandés à partir de la couleur la plus claire des orteils sombres. Donc, dans tous les cas, si vous avez besoin de l'une de ces couleurs, vous pouvez rapidement y accéder à partir d'ici, ainsi que du panneau d'actifs lui-même. Je vais les sélectionner tous et enlever la bordure parce qu'il ne semble pas beaucoup plus propre cette façon. Mais je vais garder la bordure pour la couleur blanche parce qu'on doit pouvoir la voir. Donc, une autre chose que vous pouvez faire est que vous pouvez dupliquer ce texte et sauter à la position spéciale précédente comme ceci. Et nous allons réduire la taille, par exemple à je ne sais pas, 24. Voyez à quoi ça ressemble. Cela fonctionne bien, et je vais choisir la couleur blanche, et je vais taper ce code hexadécimal, et vous pouvez aussi le co p d'ici et ensuite le baste à ici et assurez-vous juste que c'est de couleur blanche comme ça positionné au milieu, et je vais faire exactement la même chose pour toutes ces autres couleurs. Donc, je vais mettre la vidéo en pause et revenir en arrière. Alors maintenant. Sous je peux simplement sélectionner tous les frapper groupe de contrôle G eux, déplacé vers le bas et le nommer couleurs comme Donc maintenant nous avons besoin de créer les différents fonds, Donc je vais frapper le contrôle D et faire exactement dans le même espacement que celui-ci. Mais nous allons inclure différents téléphones ici. Donc je vais arrêter de parler Florence et m'assurer qu'il est aligné à gauche ST comme ce 1er 1 et simplement le déplacer jusqu'à ce qu'il se rencontre ici maintenant pour la fois. Nous pouvons facilement le faire en cliquant sur tous ces styles de personnages. Je vais frapper le contrôle D et on n'aime pas ça. Et comme vous pouvez le voir, nous manquons le style de personnage de nos titres. Donc, nous allons sauter ici, cliquez dessus ajouté à ici. Donc, nous avons jouer pour l'affichage comme celui-ci, ainsi que jouer pour l'affichage comme celui-ci. Alors commençons par celle-là pour qu'on puisse l'appeler l'affichage du tarif de l'avion comme ça, et je vais le positionner comme ça. Et parce que celui-ci est blanc, il ne va pas très bien lire. Mais on va partir juste dans ce sombre ici. Donc je vais prendre le contrôle, De Duplicated, faire exactement l'espacement en disant et passer de 1 à 1. Donc celui-ci est régulier, comme vous pouvez le voir ici. Donc, vous êtes angulaire et le jeu pour l'affichage était audacieux, italique comme ça. Nous allons dupliquer cette position comme celle-ci est en italique de sens ouvert comme ça , et nous allons faire la même chose comme ça, et celle-ci est audacieuse. Je l'ai fait. Joel de a dupliqué ici, et celui-ci est blanc, donc on ne va pas l'inclure. Mais fondamentalement, c'est normal et nous l'avons déjà ici. Et c'est normal, et enfin, nous allons le dupliquer une fois de plus. Nous pouvons inclure celui-ci si nous voulons, mais nous ne voulons pas et nous avons fini fondamentalement. Alors supprimons ça. Et maintenant ce que vous pouvez faire est à la taille. Donc, comme vous pouvez le voir, c'est à 70 donc vous pouvez taper 70 par exemple, et pour ce type d'union dans 36 pour celui-ci, vous avez également tapé 36. Celui-ci a 24 ans et celui-ci est à 24 ans aussi. Donc maintenant, ce que vous pouvez faire est simplement de dessiner un tas de texte ou de créer et, euh, différents paragraphes pour toutes ces différentes tailles de téléphone et de les mettre en dessous. Mais je vais laisser ça comme pour le moment, comme avec les couleurs, parce que nous ne sommes toujours pas finalisés avec les couleurs. Donc les clients pourraient ne pas aimer. Certaines de ces couleurs que nous avons créées pourraient ne pas aimer ces nombreuses variations hors gris, donc nous allons juste le laisser comme il l'est pour le moment. Et d'habitude, on a quelqu'un comme cinq ou six couleurs. On a quelque chose comme deux ou trois familles de formes différentes et deux peut-être trois façons de sortirde ces familles de téléphone aussi. On a quelque chose comme deux ou trois familles de formes différentes et deux peut-être trois façons de sortir Donc nous allons les laisser comme ils le sont pour l'instant. Ensuite, nous avons besoin d'icônes avec le premier groupe, tout cela ensemble Donc central de et va dupliquer cette imposition comme ça, et nous allons regrouper tout ce contrôle G. Entrez fronts de frappe comme si couleurs vont aller dans les couleurs, dossier et Maintenant, nous allons créer des icônes et nous avons une variation ou des icônes différentes. Mais je vais maintenant aller de l'avant et les sélectionner tous. Alors c'est sur ce seul contrôle, tu vois ? Cliquez ici, contrôlez V et vous pouvez cliquer dessus, puis le dessiner près du haut. Comme ça. Mais parce que c'est une icône plus petite, je vais sauter dans et sélectionner ces plus grandes icônes. Tellement mauvais. Nourriture et plage. Je vais frapper le contrôle. C a frappé juste ici. contrôle V N va les positionner exactement au même endroit. Je vais les conduire ici et ensuite les rapprocher de beaucoup plus près. Donc quelque chose comme ça est un bon battement. Je ne peux pas le faire comme ça et tu le tolères. Assurez-vous qu'ils sont sur la même distance, puis vous pouvez vous déplacer et inclure ces autres icônes supplémentaires. Donc, ce que nous avons fondamentalement, c'est cette flèche. On va avancer un peu vers le bas. Nous avons cette flèche, donc contrôle. Tu vois, je vais sauter ici. Appuyez sur le contrôle V, et je vais le positionner un peu mieux plus tard. Mais maintenant, sélectionnons d'abord les autres aussi. Donc, fondamentalement, nous avons cette variation sur ces flèches. On va en faire des copies, et c'est tout. Nous n'avons que ces icônes de médias sociaux ici, au pied de page, donc je vais frapper copie. Je vais fermer tous ces dossiers, rendre tout agréable et propre, sauter ici et frapper le contrôle. Veto les a basés. Et enfin, je vais choisir une de ces couleurs pour les rendre un peu plus visibles comme ça. Et maintenant, créons rapidement des variations pour ces différentes icônes. Donc si je saute ici, ce n'est pas une flèche vers le bas. Si un contrôle de frappe et D et déplacer son peu de roche, il se déplace à 70 pixels, par exemple. Ça va être flèche vers le haut, alors retournez-le juste ici. Ça va être comme la plupart d'entre eux. Je vais frapper le contrôle de mouvement. C' est donc essentiellement 70 pixels comme ça et nous allons le retourner horizontalement ou verticalement . Ou vous pouvez simplement le faire tourner comme ça et ça va être une vraie terreur comme ça. Et une dernière chose dont nous avons besoin est une flèche gauche, donc nous allons simplement déplacer celui-ci ici et il va être flèche gauche ou garder ce Orton droit flip celui-ci comme ça et le nom à gauche et enfin faire la même chose pour ce un. Donc 70 comme ça C'est le contrôle de la flèche gauche De Flip comme alors assurez-vous qu'il est à 70 comme ça . Et ça va être une flèche droite comme ça. Et enfin, nous avons des icônes de médias sociaux. Je vais les déplacer juste ici. Assurez-vous qu'ils sont à 70 ans. Comme ça. Ungh. Regroupez-les. Nous avons donc Facebook, Twitter, Instagram et YouTube à la fin. Donc, ce sont nos icônes. Affaiblir le groupe Tout cela ensemble frappé le contrôle G se déplaçant en dessous de la séquence. Et ce que nous devons créer enfin pour ce guide de style est de créer des ombres portées. Nous devons donc inclure les ombres portées que nous avons créées pour ces différents éléments. Donc, comment nous pouvons faire cela est simplement que je peux cliquer ici. Localisez la pièce un BG a frappé le contrôle C pour le copier. Je vais sauter ici. Frappez le contrôle V et je vais en position des orteils. C' est quelque chose comme ça. Je vais aux orteils. Donne-le. Par exemple 50 wits 50 ou c'est trop petit. Il est utilisé 200 Wits 100 et je pense que ça a l'air beaucoup mieux. Mais nous allons utiliser des carrés. Alors allons avec cinq semaines tirer quelque chose comme ça, et nous allons copier ce texte. Alors appuyez sur le contrôle D Déplacez-le en dehors du dossier comme ceci, puis déplacez-le simplement vers le bas à la même distance. Et ça va être lâche. Les ombres sont tout simplement des ombres comme ça, et je vais bouger ça jusqu'ici. Et si vous pouvez le voir parce qu'il est blanc, vous pouvez alors simplement choisir certaines de ces autres couleurs pour le rendre un peu plus visible. Mais je pense que ça a l'air bien. Utilisons pour qui comme ça parce que nous avons besoin d'un peu plus d'espace. Contrôle thermique D Positionnez-le à quelque part comme 70 parce que nous avons utilisé cet espacement pour les icônes ci-dessus. Troll D 70 a gagné le contrôle D 70 comme ça, et ce dont nous avons besoin, c'est que nous allons utiliser cette première ombre portée pour la 1ère copie. Cliquez sur ce clic droit puis basé, et nous devons l'utiliser pour le bouton. Donc, clic droit copier, clic droit coller l'apparence va changer, mais vous pouvez utiliser cette couleur, mais il suffit de les garder la même ombre. On a celui-là parce que c'est celui-là. Et enfin, utilisons quelques-unes de ces autres. Donc, utilisons celui-ci, par exemple, parce que c'est juste un peu différent du bouton stop. Et je vais cliquer ici sur l'apparence basée et une fois de plus le changer à cette couleur afin que vous puissiez rapidement trouver si vous avez fait le bon travail. Donc tente et 20 55 20 10 10. 20 Nous pouvons donc rapidement supprimer celui-ci. Et c'est 55 20. Donc c'est fondamentalement tout pour notre guide de style. Vous pouvez ensuite les fermer tous pour que vous puissiez voir que nous avons ce bug bizarre juste ici. Mais vous pouvez double-cliquer ici, réduire la taille de votre guide de style à quelque part ici, et là vous allez. Une fois de plus, vous pouvez créer différents paragraphes avec vos téléphones. Vous pouvez les montrer dans différentes couleurs. Vous pouvez les montrer de différentes manières. Ainsi, par exemple, si vous avez l'affichage Playfair, vous pouvez le mettre juste ici en haut, puis sur le côté gauche afficher Playfair affichage régulier sur le côté droit afficher Playfair boulon d'affichage ci-dessous montrer, gras, italique et ainsi de suite. Mais j'aime montrer les téléphones que j'utilise habituellement. Et j'aime montrer les téléphones comme ça parce que les développeurs l'obtiennent et je vais vous montrer dans l' une des prochaines vidéos. Lorsque nous partageons pour les clients ainsi que pour les développeurs. Ils vont obtenir toutes les informations pertinentes dans ce lien partagé, sorte qu'ils vont être en mesure de voir ceux qui utilisaient et de quelle taille il en est. Donc dans la prochaine vidéo, nous allons couvrir le partage avec le client, et je vous verrai là-bas. 40. Partager avec le client: Maintenant, nous devons partager notre travail avec le client pour l'examen réel avant de lui envoyer les fichiers finaux . Donc, comment vous pouvez faire cela est que vous pouvez sauter dans un onglet prototype. Vous pouvez cliquer sur le premier écran, et dans notre cas, c'est notre premier écran parce que, comme vous pouvez le voir, toutes ces flèches vont de lui et je peux cliquer, puis partager. Et comme vous pouvez le voir, vous pouvez inviter orteil. Ajoutez-le afin que vous puissiez inviter d'autres concepteurs orteil. Modifiez ce fichier tout en conservant le partage de fichiers d'origine pour révision, que vous allez sélectionner, c' est-à-dire que vous pouvez partager pour que vos clients puissent les consulter. Vous pouvez partager pour le développement, ce qui est fondamentalement la même chose, mais avec beaucoup de détails techniques. Et leurs développeurs peuvent voir différentes tailles d'espacements pour les fonds. Différentes couleurs, marges, literie et ainsi de suite. Donc tout cela est pour eux. Vous pouvez gérer le lien de sorte que tous les liens que vous avez partagés et c'est important. Si vous êtes sur un libre, ils seront plan de sortie parce que vous pouvez avoir juste un partage pour examen et un partage pour le lien de développement, et enfin vous pouvez cliquer ici pour enregistrer la vidéo. Si vous voulez montrer une visite, clients à quoi ressemblera votre prototype et votre conception une fois codés et vous pouvez ensuite leur envoyer cette vidéo s'ils ne peuvent pas accéder à ce prototype pour une raison quelconque. Mais comme je l'ai dit, nous allons cliquer sur partager pour examen et vous pouvez changer d'autres choses. Ainsi, toute personne avec Lincoln View ou seulement les personnes invitées peut voir si vous sélectionnez le 2ème 1 que vous avez orteil, entrez des adresses e-mail hors des personnes. Vous voulez voir ce prototype. Si personne avec le lien ne peut voir ce prototype. Vous pouvez l'appeler différemment comme si vous le voulez, donc si je zoome un peu plus près, vous pouvez voir que nous avons un bon hôtel de charme honnête. Alors commençons à être cela parce que c'est beaucoup plus agréable quand vous avez le nom de votre projet client juste ici. Parce que plus tard, vous verrez dans une minute quand ils ouvriront ce projet, ils seront en mesure de voir à quoi cela ressemble et le nom de ce projet. Suivant. Nous avons autorisé les commentaires afin que vous puissiez permettre aux gens de commenter votre conception, et vous voulez que Si vous voulez recevoir des commentaires de votre client, affichez les conseils Hot Spot, qui s'afficheront à incliner où ils doivent cliquer afin que le des transitions peuvent se produire. Afficher les contrôles de navigation, qui sont des contrôles en bas de l'écran. Quelques-uns par ici. Et c'est important. Et j'aime garder cela parce que parfois les clients sont confus quant à l'endroit où ils doivent cliquer ? Parce qu'ils sont perdus dans le processus. Nous avons ouvert en mode plein écran, ce que je ne recommande pas, parce que de cette façon ces contrôles de navigation vont se cacher et vous pouvez afficher en plein écran plus tard dans les interactions deuxièmes internement ou quelque chose comme ça quand ils sont déjà familiers avec les contrôles adobe ecstasies et ils savent où ils doivent cliquer. Et enfin, nous avons besoin de passeport, qui est fondamentalement n'importe qui avec le passeport peut ouvrir. Toute personne sans mot de passe ne peut pas ouvrir et ne peut pas voir ce projet. Donc, enfin, lorsque vous avez coché et décoché tout inclus le titre de votre projet, vous pouvez cliquer sur Créer un lien, et le processus de création Lin varie de différentes raisons. La première raison est votre ordinateur, donc si vous avez une machine lente. Il faudra plus de temps aussi la taille du projet. Donc, en ce moment, nous avons seulement cet écran essentiellement avec différentes légères variations dessus , donc ce sera beaucoup plus rapide. Mais imaginez qui a, par exemple, 100 ou 200 écrans. Ce sera beaucoup plus difficile pour ça. Générez ce lien et aussi à quelle vitesse est votre vitesse de connexion Internet. Alors gardez toutes ces choses à l'esprit, et une fois qu'il atteindra 100, il générera le lien. Et une fois ce sera fait, vous verrez quelque chose comme ça. Donc, lorsque vous apportez vos modifications, vous pouvez utiliser exactement le même lien simplement, appuyez sur mise à jour et puis leur envoyer ce nouveau lien et vous pouvez ensuite vous arrêter pour vous. Ensuite, vous pouvez reprendre là où vous vous êtes arrêté la dernière fois, car il mettra à jour les dernières modifications apportées dans Adobe X'd. Mais pour ce 1er 1, vous pouvez simplement cliquer sur ce lien, et il l'ouvrira dans votre navigateur Internet sélectionné. Il est Google de dans mon cas, et comme vous pouvez le voir, nous avons le nom du projet juste ici en haut a expliqué et il crée beaucoup plus confiance entre vous et le client. Lorsque vous faites attention aux petits détails comme ça afin que nous puissions faire défiler vers le bas et vous pouvez voir quoi il ressemble. Si c'était le mode plein écran que tout cela serait pris par votre conception, vous pouvez voir les commandes de navigation juste ici en bas. Donc, cette icône d'accueil vous ramène à la maison. Et nous avons neuf écrans différents dans notre cas. Alors laissez-moi revenir en haut et testons certaines de ces animations que nous venons créer dans X'd. Donc, si je clique ici, vous pouvez voir qu'il nous amène au prototype un écran, qui est l'écran suivant dans l'ordre, et il montre toutes ces autres informations. Si je clique ici, cela nous ramènera à l'écran d'origine. C' est le prototype que vous pouvez voir et nous pouvons bouger. Vous voulez un peu vers le bas, et je peux vous montrer les autres animations que nous avons créées. Donc, pour celui-ci, par exemple, si un clic ici, il changera orteil le prototype trois. Vous pouvez le voir ici et juste ici. Si je clique ici, ça nous ramènera. Décidons rapidement. Donc, comme vous pouvez le voir, sautez à ici et il me donne une sorte de lingette bizarre parce qu'il ne garde pas la position quand je saute ici alors qu'il l'a fait dans Adobe X'd. Alors je vais sauter et voir ce que c'est. Mais en gros, vous pouvez voir ce qu'il fait. Vous pouvez cliquer ici, et cela vous prendra à entendre, mais il ne garde pas la position lors du défilement, et nous devons corriger cela la prochaine fois que nous l'avons envoyé au client. Mais c'est tout, fondamentalement, et si votre client veut que vous apportiez des changements, pensez qu'il suffit de cliquer sur cette rotation. Placez-le quelque part ici et en tapant. Par exemple, changez cette couleur à une couleur plus foncée, peut-être appuyer sur soumettre, et la prochaine fois que vous pouvez cliquer sur cet écran, cela vous mènera à ce commentaire. Donc, par exemple, si je suis sur le numéro d'écran, disons six. Je vois un nouveau commentaire. Je peux cliquer dessus et il me ramènera à l'écran d'origine, et je peux ensuite cliquer et localiser les commentaires sur This is it. Quand je survole, vous pouvez voir que cette couleur bleue change, comme vous pouvez le voir ici afin que nous puissions savoir que c'est le commentaire sur cet écran particulier . Alors c'est tout. Fondamentalement, pour le partage et le partage fonctionne exactement la même chose pour les développeurs. Donc, si vous pouvez cliquer en arrière et appuyer sur partager une fois de plus, partager pour le développement, vous pouvez faire les paramètres essentiellement exporter pour le Web. Donc, nous devons exporter pour les sites Web essentiellement, et vous pouvez choisir différentes variantes ici. Donc, pour IOS ou Android, mais nous devons exporter pour Web une fois de plus exiger des passeports afin que vous puissiez créer un nouveau mot de passe ici. Incluez des actifs pour Donald, et cela créera des PNG à la fois un et deux aussi, un F. rapide Et une fois de plus, tout le monde dira à Lincoln View et Onley invités peuvent voir, donc c'est fondamentalement pour le partage pour les interactions client et pour le commentaire, et j'ai besoin de corriger cette erreur, mais c'est essentiellement basé sur la position de défilement, Donc si je saute ici, prototype, prototype, cliquez sur le bouton droit ici et si je vais jusqu'ici et si je clique ici, comme vous pouvez le voir, il n'affiche pas cette erreur à l'intérieur d'Adobe X'd. Alors, juste ici. Tout fonctionne correctement. Mais lorsque vous sautez en ligne et montrez cela au client, cela montre cette erreur. Donc vous allez avoir ces boîtes de temps en temps. Mais dans ces cas, vous pouvez simplement frapper, partager et ensuite enregistrer des vidéos. Ensuite, vous pouvez enregistrer la vidéo sur votre prototype, puis leur envoyer cette vidéo et leur montrer comment ça se passe. Toe ressemble une fois codé parce que nous avons garder la position de défilement une fois que nous commençons le prototypage et c'est tout. Conservez donc la position de défilement. Mais vous devez choisir dans différents éléments. Donc, si je clique ici, il n'apparaît pas et ainsi de suite. Donc peut-être enregistrer la vidéo dans certains cas est mieux que d'autres. Parce que, comme vous l'avez vu, si je ne touche pas part, partager pour examen et si je clique sur ce lien et saute avec une fois de plus et vous montre à quoi ça ressemble alors quand je saute jusqu'ici où la douceur est, Si je clique ici, vous pouvez voir qu'il conserve la position de défilement afin qu'il fonctionne exactement sur la même page. Cela fonctionne, mais sur d'autres pages, cela ne fonctionne pas. Donc, vous avez le travail de remorquage avec ces bogues, et quand vous les repérez, c'est vraiment un moyen beaucoup plus simple juste d'enregistrer la vidéo et d'envoyer cette vidéo à votre client afin qu'il puisse la revoir s'ils sont ennuyés par ce saut de défilement position. Donc c'est à vous et à votre client de décider. Dans la vidéo suivante, je vais vous montrer la structure d'emballage pour l'exportation d'actifs et dans la vidéo. Après cela, nous allons exporter des actifs pour les développeurs, et je vous y verrai. 41. Structure d'emballage: laissez-moi savoir rapidement vous montrer la structure d'emballage parce que vous devez envoyer ces fichiers à nos clients ainsi qu'à leurs développeurs, alors devez créer cette structure d'une manière logique afin que tous les participants puissent comprendre et les utiliser. juste après avoir fini de les créer. Donc j'ai créé ce dossier Assets, et si je saute à l'intérieur, vous avez le dossier de la page d'accueil parce que actuellement nous avons seulement la page d'accueil, et vous pouvez imaginer que plus tard, quand nous avons conçu toutes ces autres pages, nous aurons tous ces autres dossiers orteils une entreprise qui donc lorsque vous sautez à l'intérieur de la page d'accueil , vous pouvez avoir le dossier Icônes ainsi que le dossier images. Maintenant, vous pouvez placer les oeufs d'origine, souler ici, ou vous pouvez créer des fichiers séparés et les mettre juste ici. Mais je ne le recommande pas parce que les oeufs sont bons avec beaucoup d'éléments, comme vous l'avez vu lors de notre conception dans le processus de protection. Donc, fondamentalement ici, dans le dossier Assets, vous pouvez créer votre document original et le mettre là. Donc, quand vous sautez à l'intérieur de la page d'accueil, vous avez sur le dossier séparé pour les icônes aussi, un dossier séparé pour les images et la raison pour laquelle nous avons fait cela est parce que nous allons exporter des images comme P et G ou J piquets, il est donc plus facile pour les développeurs de les utiliser plus tard en citation. Et nous allons exporter des icônes comme des légumes s, donc ça va être plus facile pour eux orteils. Incorporez-les dans le froid sans perdre l'égalité. Parce que SVG est un format de fichier basé sur le Web, Donc, il va être fondamentalement un fichier vectoriel pour signifié. Et les gens qui regardent le site Web en ligne peuvent avoir beaucoup plus d'icônes avec beaucoup plus détails à l'intérieur plutôt que si vous utilisez le format de fichier PNG pour les icônes. Donc, c'est fondamentalement tout pour la structure de fichiers. Comme je l'ai dit, nous n'avons qu'une page, mais si vous vous souvenez que nous avons parlé, nous allons créer dans un futur lointain d'autres pages juste en dessous de ceci, et nous allons l'envoyer au client plus tard. Quand nous aurons fini dans la prochaine vidéo, nous allons commencer à exporter nos actifs et je vous y verrai 42. Exporter des actifs: dans cette vidéo, nous allons exporter des ressources pour les développeurs. Donc, pour commencer, nous allons d'abord sauter le bout de notre page. Ce que nous devons faire, c'est exporter ce logo. Donc, les premières choses d'abord. Si vous vous souvenez de la vidéo précédente dans la page d'accueil du dossier Assets, nous avons des icônes et des images, alors exportons d'abord nos images, puis traitons des icônes. Regardez-le plus tard. Donc, d'abord, nous allons sélectionner logo frappé Contrôle E. Et je vais utiliser PNG Web utilisé parce que cela va créer un X et deux X taille. Et je vais appuyer sur le changement juste ici et sauter à l'intérieur de la page d'accueil, puis les images et choisir ce dossier parce que c'est là que je voulais aller parce que c'est qu'il va l'afficher comme une image hit export, et je vais passer dans un peu vers le bas. On va s'occuper des images plus tard, mais d'abord. Exportons ce héros B G a frappé le contrôle E B et G. Webb et un X intellects. Vous pouvez l'utiliser comme un J peg si vous le souhaitez, mais être G et J pick fonctionnera très bien. Donc, il exporte le même dossier, puis passe vers le bas. Nous avons besoin de cette image sélectionnée en utilisant le contrôle, puis cliquez dessus. Hit contrôle E. J. Beck Hit export, puis passe à autre chose. Nous avons besoin de ces trois images pour que vous puissiez les sélectionner ici. Cliquez sur le 1er 1, vous pouvez appeler le contrôle, cliquez sur le 2ème 1, puis le troisième. Vous voulez sélectionner tous les trois contrôle de chaleur E. Et il va les exporter séparément comme Monix ainsi que deux X Donc frapper exportation et nous pouvons passer à bas. Frappez celui-là. Donc contrôler e qu'il exporterait et vous pouvez sélectionner un ces deux pour obtenir l'image de jardin et l'image parking frappé contrôle e qu'il exporterait. Ensuite, nous devons exporter celui-ci. Donc le contrôle qu'il avait l'exportation. Et si vous vous souvenez, nous avons inclus une autre image. Mais nous n'allons pas l'inclure pour le moment parce que c'est juste ici. Mais si tu veux, tu peux le choisir et le renommer pour qu'il s'appelle notre nièce. Cette image contrôle e hit export parce que s'ils veulent l'inclure là, ils peuvent. Mais régulièrement ils le veulent. Ce n'était qu'un exemple, mais gardons cela comme ça parce que ce n'est pas une image. On va le laisser tel quel, et on va sauter ici jusqu'au pied de page. Nous allons exporter cette image d'arrière-plan et nous allons garder le logo tel qu'il est à l'intérieur du dossier, car juste cette couleur d'arrière-plan a changé. Donc pied de page, image hit contrôle E kit export. Et c'est fondamentalement tout pour les images. Contrôle zéro. Pour remettre en place, je vais ouvrir le dossier, ouvrir le dossier avec nos images et vous pouvez voir à quoi cela ressemble. Donc, fondamentalement, il a tout exporté à 11 x et deux x et qu'est-ce que ça veut dire ? Il a exporté, puis dans la taille d'origine et deux fois la taille. Alors pourquoi c'est ça ? Parce qu'il a besoin d'accommoder les différentes tailles. Souhaite obtenir un design réactif dans le froid dans le site responsive, qui signifie essentiellement que cette image a orteil fonctionne bien dans la taille d'origine du bateau ainsi que ces grandes tailles. Donc, tout le chemin du téléphone jusqu'aux grands arrêts de bureau et téléviseurs. Et j'ai fait une erreur avec cette image photo, donc si je l'ouvre sur mon autre écran et la fais glisser ici. Comme vous pouvez le voir, il est assez blanc parce que l'opacité est réduite et vous pouvez ramener la ville Obey à 100% exporté comme ça, puis dire aux développeurs plus tard de baisser vers le bas, Est-ce que vous payez ville ? Ou vous pouvez l'exporter comme ça en tant que pack J et exporté comme ça. Mais j'aime exporter ces images, dont l'opacité est réduite comme étant Jeez, sorte que vous pouvez simplement les supprimer d'ici. Retournez ici. Sélectionné contrôle de chaleur E et l'ensemble de Jay Peak. Choisissez BMG hit export. Et maintenant, quand je retourne à mon dossier, vous pouvez voir que rien n'a vraiment changé, sauf qu'il est maintenant en PNG et pas en J pick. Donc, vous ne pouvez pas le voir fondamentalement juste ici parce qu'il ne montre pas le précédent hors PNG. Mais cela signifie juste qu'il garde l'opacité comme il waas habituellement, donc pas de saut d'objectif et d'exporter nos icônes. Mais au lieu de les exporter à partir d'ici et de les sélectionner à partir d'ici, ce que nous allons réellement faire est de les exporter à partir d'ici parce que nous avons créé ce guide de style à cet effet, et vous remarquerez peut-être que j'ai inclus les bas ici aussi parce que j'ai oublié de les inclure dans la section précédente hors du cours. Mais vous pouvez cliquer ici sur l'Eichel et sélectionner toutes les icônes comme si appuyez sur Contrôle E et premières choses Tout d'abord, nous allons changer le dossier, donc nous allons sauter dans les icônes, sélectionner le dossier, et nous allons choisir SVG pour cela. Vous pouvez garder tous les paramètres que vous voulez frapper export, et il va toe export tous les hors de ces SP Jeez, séparément, tout pour sauter orteil mon dossier. Vous pouvez voir qu'il a exporté toutes ces icônes telles qu'elles étaient, pourquoi nous avons fait cela plutôt que de passer par le design et juste ramasser bien le jus, parce que je les ai copiés et collés de ces mêmes endroits à ici. Et je n'ai pas changé de taille. Je n'ai rien changé. Fondamentalement, j'ai juste utilisé ces icônes telles qu'elles étaient ici et les ai commandées ici sur cette page. Maintenant, nous allons exporter ces boutons, et bien sûr, vous pouvez exporter les fonds comme des images et ce que vous pouvez faire avec les boutons, vous pouvez les sélectionner appuyer sur contrôle e Changer le dossier car ils iront dans les images sur la page d'accueil. Images Sélectionnez le dossier, et vous pouvez les exporter en tant que PNG afin appuyez sur l'exportation. Et ce que cela fera Si je saute dans le dossier Images, il exportera les boutons tels qu'ils étaient ici afin que vous puissiez voir le bouton avec le texte inclus, ainsi que l'ombre d'arrière-plan. Mais nous voulons faire une chose de plus, qui est d'inclure ces bas sans aucun texte, parce que peut-être plus tard, les développeurs pourraient vouloir inclure un texte différent à l'intérieur en utilisant du code afin que vous puissiez le faire simplement en ouvrant les comme ainsi et ensuite simplement cacher le texte d'eux comme ceci. Ensuite, vous pouvez sélectionner les trois une fois de plus frapper le contrôle E et les exporter comme étant G. Il va les déchirer remplacés dans le dossier d'origine, mais vous pouvez changer les noms plus tard, ou vous pouvez sauter dans le dossier en ce moment et juste appuyer sur le texte, par exemple, juste au texte juste ici. Txt. Peut-être que ce contrôle C et frappé contrôle le droit ici et simplement changer ces noms orteil . Ajoutez cette extension txt que vous venez de créer afin que vos développeurs sachent ce que vous vouliez dire par cela , donc ils sauront. Ok, ces boutons contenaient un site de textos et ces autres boutons ne le font pas. Donc, ils seront en mesure d'utiliser fondamentalement quels sont les boutons qu'ils veulent. Et vous avez fait votre travail correctement de toute façon. Donc, une fois de plus, vous pouvez sélectionner tous les frapper contrôle, e hit export. Et parce que vous changez les noms, il en créera de nouveaux et ne remplacera pas les anciens. Et une dernière chose qui nous reste pour sélectionner une exportation sont toutes ces extensions. Ce qu'il nous faut, c'est des chambres. On a besoin des drapeaux. Alors, allons à l'intérieur. Inclure ces villes de chute et seule chose que nous voulons exporter les orteils sont ces milieux. Et nous voulons les exporter sous forme d'images PNG. Donc, il avait le contrôle e PNG images export. Nous voulons également exporter ce hit de fond ici hit contrôle e exporté et nous voulons toe export ces cercles aussi. Mais parce que nous avons inclus fondamentalement exactement le même cercle qu'il était ici, suffit de frapper le contrôle e et il exportera ce 1er 1, puis plus tard, ils peuvent créer des couleurs supplémentaires. Quoi ? Nous voulons aussi l'exportation des orteils est Discworld. Mais laissez-moi d'abord fermer tous ces autres dossiers. Alors localisez le devis. Contrôle de frappe, E S P et G a frappé l'exportation, et on peut aller jusqu'au bout et voir si on a raté quelque chose. Nous avons raté ces boutons d'arrière-plan donc il avait le contrôle e hit exportations. Et enfin, nous arrivons à cette section et nous devons exporter toutes ces autres informations. Donc le formulaire d'abonnement localisateur. Vous pouvez l'exporter comme ça si vous le souhaitez, mais pour le formulaire de réservation, je ne vais pas exporter ces entrées parce que les entrées vont être incluses à l'intérieur du manteau parce que c'est la partie de la forme de base. Je veux juste exporter ces arrière-plans pour les villes de chute afin que vous puissiez localiser la liste déroulante de la chambre , ouvrir des chambres abandonnées sur le contrôle thermique BG e exporté, et parce que nous l'avons là-haut en haut, nous voulons renommez-le ici. Donc, les chambres descendent BG. Mais peut-être l'appeler formulaire parce qu'il est à l'intérieur du contrôle de touche de formulaire E et ensuite exporté S P et G. Vous pouvez le cacher, localiser, vérifier le calendrier, et vous pouvez exporter l'arrière-plan du calendrier comme cette exportation de chaleur ? Non, la même chose pour le départ donc situé ici. Et il devrait être vérifié comme ça. Kid contrôle e il export. Cachez-le et enfin, les invités descendent. Donc, on va aux pieds. Exportez-le d'ici. Hit export Et c'est fondamentalement tout pour le processus d'exportation et vous pouvez exécuter à travers. Et c'est pour ça que c'est si beau. orteils fonctionnent dans Adobe Easy parce que si vous rencontrez une erreur, vous pouvez alors facilement sauter en arrière et localiser la zone où vous avez fait cette erreur. Vous pouvez le réparer, vous pouvez revenir et vous pouvez apporter ces changements au fur et à mesure que vous vous déplacez. Donc c'est fondamentalement tout pour le processus d'exportation. Permettez-moi de clore rapidement tout cela. Et dans la vidéo suivante, je vais vous montrer comment vous pouvez empaqueter tous les fichiers que vous venez d'exporter et comment vous pouvez les livrer au client sans perdre trop d'espace mémoire et leur fournir facilement fichiers. Parce que vous allez principalement envoyer ces fichiers à vos clients, puis ils les transmettront, remorqueront leurs développeurs. C' est donc vraiment agréable d'avoir un petit fichier facile et partageable auquel tout le monde peut accéder très rapidement sans aucun possible. Alors je te vois là 43. Livrer au client: Et maintenant enfin, il est temps de livrer les fichiers que vous avez créés à vos clients, et comment vous pouvez le faire facilement est que vous pouvez sauter dans votre dossier une fois de plus vérifier si tout est organisé, comme nous l'avons mentionné dans la précédente vidéos. Assurez-vous simplement d'avoir tous ces fichiers organisés. Assurez-vous d'inclure l'original Adobe est souillé ici, et ce que vous pouvez faire est juste. Cliquez sur votre fichier Goto Vince si je l'utilise et vous pouvez utiliser toute autre extension zip que vous pourriez avoir en cliquant sur les actifs Toe et un Death Will Do est de créer un fichier zip, qui est facilement partageable. Il est de petite taille, et il peut fonctionner sur Mac et PC, sorte que les clients peuvent y accéder très facilement. Et ce qui est bien à ce sujet, c'est si j'ai sauté et ici vous pouvez voir qu'il n'a pas réduit taille perceptible. Il est passé de 17 94 à 17 52 en mags. Mais imaginez juste que vous avez créé le fichier, qui est, par exemple, 100 mégaoctets de taille et que vous voulez le réduire orteil. En utilisant cette méthode, il sera environ 10 mégaoctets, il est donc beaucoup plus facile de partager un fichier de 10 mégaoctets. En outre, lorsque vous faites une méthode comme celle-ci, vous êtes sur Lee partageant ce fichier zip avec vos clients et non pas séparer des dossiers ou des fichiers séparés et envoyer chacun d'eux séparément. Donc, c'est vraiment important, parce que plus tard, le client peut facilement partager Onley ce fichier zip unique avec ses développeurs, et le processus peut continuer naturellement, et il sera vraiment facile pour eux de communiquer plus tard. Et s'ils ont besoin de modifications, ils peuvent alors vous renvoyer les fichiers. Vous pouvez effectuer ces modifications, puis leur renvoyer le même fichier zip. Donc, c'est fondamentalement que vous pouvez le partager étaient e-mail que vous pouvez partager étaient Dropbox. Vous pouvez le télécharger et leur envoyer le lien. C' est vraiment à toi de décider. Mais j'ai trouvé cela au fil des années pour être le moyen le plus simple de partager les fichiers avec vos clients parce qu'il y a certaines plates-formes en ligne que vous pouvez payer en cours d'utilisation, mais vous avez le téléchargement de remorquage, des fichiers séparés, et c'est vraiment agitation. C' est un moyen extrêmement facile de partager les fichiers avec tout le monde et pour que tout le monde soit sur la même piste, donc c'est essentiellement tout pour tout le processus. J' espère que tu en as un peu de valeur. Et j'espère que vous avez vraiment compris combien il est facile de travailler sur les sites Web dans Adobe X. D. vous suffit de suivre quelques règles de base et de ne pas se perdre dans le processus parce que le processus peut être vraiment fastidieux parfois. Et si un saut juste ici au panneau des actifs, vous pouvez voir juste ici. Nous avons donc ces nombreuses couleurs en ce moment, mais à l'avenir nous pourrions supprimer certaines d'entre elles. Nous avons ces styles de personnages. On pourrait en ajouter plus. On pourrait en retirer un peu. Et enfin, nous n'avons que trois composants. Mais comme nous avons commencé à obtenir de plus en plus de pages, nous allons inclure de plus en plus de composants. Alors imaginez juste au cours du projet, pensant peut-être 3 à 6 mois, vous pourriez finir avec 200 composants. Vous pourriez finir avec 500 pages et quelque chose comme ça. Donc, travailler sur cette méthodologie est vraiment important pour garder vos projets organisés et pour garder tout le monde sur la même piste car, comme vous pouvez le voir, combien d'écrans nous avons pour la page d'accueil seule à l'intérieur du fossé prototype. Imaginez combien d'écrans il y aura une fois que vous commencerez à ajouter plus de pages. Donc rampages supplémentaires à propos de nous. Page est peut-être page de réservation séparée et ainsi de suite. Il est donc très important de suivre une sorte de méthodologie. Et dans ce cours, j'ai présenté ma propre méthodologie, que j'ai trouvé du travail au fil des années et de nombreux clients ont eu dans le passé. Il est donc très facile de rationaliser vos projets et votre flux de travail à l'aide d'une méthodologie quelconque. Donc j'espère vraiment que vous avez apprécié le discours. J' espère vraiment que tu en auras de la valeur, et j'espère vraiment que tu seras à la pointe. Appliquez les connaissances que vous en tirez sur vos projets futurs. Et je vous souhaite beaucoup de chance dans tous vos projets et projets futurs. Et vous pouvez télécharger tous ces fichiers de projet à l'intérieur de la description du cours, et vous pouvez les utiliser gratuitement dans n'importe lequel de vos futurs projets. Vous pouvez modifier ceux-ci, et vous pouvez l'utiliser comme modèle si vous le souhaitez. Vous pouvez copier et coller les éléments du projet que nous venons de créer dans ce cours, et vous pouvez l'utiliser à la fois pour vos clients personnels et commerciaux parce que vous avez ma permission. Et vous pouvez, bien sûr, utiliser ces icônes que vous voyez et images. Mais je vais créer une vidéo séparée expliquant sur les liens et la ressource est et où vous pouvez télécharger tous les liens et la ressource est, J'ai utilisé pour créer ce cours. 44. Conclusion: félicitations. Vous atteignez la fin de ce cours. J' espère vraiment que ça vous a plu. Et le plus important, j'espère vraiment que tu as de la valeur. Élevez. J' espère vraiment que vous ramassez quelques conseils et astuces sur la conception du site Web. Et j' espère vraiment que vous pourrez appliquer certains de ces conseils et techniques à vos conceptions et à vos futurs travaux. Dans cette dernière vidéo du cours, je voulais juste couvrir quelques rudiments et ce que nous avons parcouru. Donc, si nous zoomons un peu plus près pour que vous puissiez voir, nous obtenons le logo du client. Donc juste un logo de base, qu'ils vont changer plus tard. Ensuite, nous obtenons ce descriptif de conception et vous pourrez utiliser ce cahier de conception comme modèle pour tous vos projets futurs. Et vous pouvez utiliser ce fichier. C' est dans le dossier, et à partir de ce résumé de conception et de toutes les informations que le client nous a données, nous avons continué et créé un tableau d'humeur de base. Nous avons exploré avec quelques couleurs de base et nous avons exploré avec un texte de base et fondamentalement juste nous entourer avec l'équipe de ce site. Ensuite, nous avons continué à créer un peu de base en tirant nos cadres métalliques et en structurant ce site Web comme une page de destination appropriée pour les conversions, car c'est le point principal de la fiche de conception que le client nous a donnée. Ensuite, nous avons continué et créé ce cadre métallique en utilisant ce dessin. Nous avons donc créé ces beaux éléments et les remplacer sur la plage. Et enfin, nous avons créé un guide de design et de style dans le design. Nous avons inclus différentes ombres, différentes icônes, différentes images et les avons remplacées dans un bon ordre, en utilisant exactement le même espacement afin que nous ayons ce bel espace blanc entre eux. Et enfin, quand nous avons fini, nous avons utilisé tous ces éléments pour créer un guide de style, qui nous sera utile tous les deux plus tard. Si nous concevons toutes ces autres pages pour les clients parce qu'ils peuvent simplement jeter un coup d'œil et voir toutes les différentes couleurs, polices et ainsi de suite et enfin faute aux développeurs parce qu'ils vont être en mesure d'utiliser tous ces différents éléments de notre guide de style à leur développement. Et enfin, enfin, mais non des moindres, nous avons créé sont entièrement cliquables prototype, que nous avons ensuite partagé avec les clients pour recevoir des commentaires, et nous leur avons montré comment le potentiel, comment le site est pourrait ressembler une fois qu'il est codé et ils sont en mesure de cliquer sur différents points et de voir ce que nous avions prévu pour ce site Web. Donc c'est tout pour ce projet. J' espère vraiment que ça vous a plu. J' espère vraiment que vous en avez tiré un peu de valeur et que vous avez trouvé quelques conseils et des techniques. Encouragez vous remorquer des liens de montre et la ressource est vidéo, parce que je vais vous montrer où vous pouvez télécharger tous les différents liens. Et la ressource est que j'ai utilisé pour cette classe ainsi que où vous pouvez dollars quelques informations supplémentaires si vous voulez en savoir plus sur les pages de destination hautement converties. Et une ressource vraiment précieuse est à ce sujet. Je vais vous donner des liens pour différents sites d'image où vous pouvez télécharger des images gratuites et les utiliser dans vos projets, fois personnels et commerciaux. Je vais vous donner seulement où vous pouvez télécharger quelques icônes de base ainsi que poupée Oh, le téléphone est que nous utilisions dans cette classe. Alors c'est tout. J' espère que ça vous a plu. Et jusqu'à la prochaine fois, prenez soin 45. Liens et ressources: pour la dernière vidéo de ce cours, je tiens à vous remercier de vous inscrire. Et encore une fois, j'espère vraiment que tu en auras de la valeur. Et dans celui-ci, je veux expliquer pour me lire le fichier pdf et comment vous pouvez l'utiliser. Voici donc tous les liens qui sont mentionnés dans le cours, et toute la ressource est qui sont mentionnés dans le cours aussi. Donc, ce premier outil ailes sont pour les téléphones gratuits qui sont des fonds Google, et ils sont utilisés dans ce projet. Et si vous voulez utiliser les mêmes téléphones que j'ai fait, je vous recommande de les télécharger et de les utiliser parce que le projet ne fonctionnera pas autrement. Ensuite, nous avons des images gratuites. Donc, les deux à partir de cendres unspool ainsi, un grain, Subait et combiné, ils ont quelque chose comme trois millions d'images que vous pouvez utiliser pour des projets personnels et commerciaux. Ci-dessous, nous avons des icônes qui sont de matériel que je O qui sont essentiellement des icônes faites par Google qui sont à nouveau libres d'utiliser à la fois pour des projets personnels et commerciaux. Et enfin, si vous voulez en savoir plus sur les pages de destination à engagement élevé, la structure plus sévère, certains éléments sur votre page. Vous pouvez en apprendre plus sur u Bahns dot com Block ainsi que sur cette chaîne YouTube, qui est d'un grand gars expliquant tout cela en détail. Je souhaite que vous aidiez à apprendre. Et enfin, si vous avez des questions sur ce cours ou l'un de mes autres cours, vous pouvez me contacter à cette adresse e-mail ici ou via la page du cours. Et je répondrai volontiers à vos questions, que vous pourriez avoir. Donc, merci encore une fois de l'apprentissage heureux question et avoir un bon prendre soin. 46. Chaîne YouTube pour plus de contenu: Hé, le designer Alex est là. Et je voulais juste vous remercier rapidement. Merci d'avoir pris le discours, et j'espère vraiment que vous en avez autant de valeur que possible si vous voulez consulter plus de contenu. J' ai récemment lancé ma chaîne YouTube, où exploré certains sujets qui pourraient intéresser les concepteurs de freelancers toe techniques de revenu passif de la conception Web, conception APP. Vous concevez la conception UX. Donc, si vous êtes intéressé par l'un de ces sujets, rendez-vous sur ma chaîne YouTube, liez-le dans le pdf, et vous pouvez simplement cliquer là et cela vous mènera à ma chaîne YouTube. Si vous aimez ce contenu, assurez-vous de vous abonner et assurez-vous de suivre, car je vais essayer d'être vraiment régulier avec cette chaîne YouTube et de télécharger autant de contenu que possible. Merci encore une fois d'avoir suivi mon cours, et j'espère vraiment vous voir sur ma chaîne Digger 47. Rejoignez mon groupe Facebook gratuit: Hey, designer, j'espère vraiment que tu as apprécié le cours, et que tu en as autant de valeur que possible. Si vous voulez recevoir encore plus de valeur de ma part et de la communauté du design, j'ai créé un groupe Facebook. Où vous pouvez rejoindre est juste un groupe Facebook pour mes étudiants seuls afin que vous puissiez rejoindre en cliquant sur le lien ci-dessous ordre. Nate off course est un compte Facebook, et c'est un groupe gratuit à rejoindre. Le groupe est formé afin de vous fournir des commentaires supplémentaires afin que vous puissiez joindre vos dessins en suivant ce cours et en utilisant des exemples de ce cours ou tout autre autre hors de mes cours. Ou si vous avez vos propres exemples. Off design travaille du passé du présent. Vous pouvez télécharger ces œuvres sur Facebook Group, puis recevoir des commentaires soit pour moi, soit d'autres membres du design. Je vous encourage également si vous disposez d'un poste pour les partager dans ce groupe afin que tout le monde puisse bénéficier de ce groupe. Encore une fois, le groupe est libre. C' est facile à rejoindre. Il suffit de cliquer sur le lien dans le pdf, et je m'attends vraiment à voir autant d'entre vous que possible dans ce groupe juste pour partager nos expériences en tant que designers, et je vais essayer de poster quelques vidéos supplémentaires, quelques conseils supplémentaires et techniques dans ce groupe Facebook. Mais pour l'instant, on commence tout juste. Nous allons juste en former, et je vous encourage vraiment à vous joindre et à partager votre meilleur travail là-bas. Pour inspirer d'autres concepteurs ou orteils, demandez des commentaires supplémentaires. Assurez-vous simplement, s'il vous plaît, lorsque vous demandez des commentaires, demander des choses spécifiques. Ne demandez pas. Que pensez-vous de cette conception ? Parce que personne ne va répondre à ça. Ou s'ils le font, ils sont sur Lee. Ils vont te dire si ça a l'air sympa ou ça n'a pas l'air sympa. Assurez-vous de demander des commentaires spécifiques sur vos conceptions. Par exemple, faites comme cette combinaison de couleurs. Tu crois que je devrais utiliser un autre front ? Pensez-vous que ces images correspondent bien à la couleur de fond, par exemple, choses comme ça, Alors assurez-vous de demander des commentaires spécifiques lorsque vos conceptions, parce que cela va être beaucoup plus facile pour moi et pour d'autres concepteurs de ce groupe pour vous donner sont des commentaires précis que vous pouvez améliorer beaucoup plus rapidement, puis en demandant simplement quoi ? Tout ce qui sort de ce design. Merci encore une fois d'avoir suivi mon cours, et j'espère vraiment vous voir en vue sur mon groupe Facebook Digger.