Conception de sites web réactifs dans Adobe Xd

1. Introduction du cours: Créer un design réactif est une partie essentielle de tout ensemble de compétences de concepteur, en particulier sur le marché d'aujourd'hui, où plus de trafic provient des appareils mobiles et des tablettes. Adobe Extreme rend ce processus très facile car il dispose d'excellents outils pour accélérer la partie réactive de votre conception. Et il a également d'excellentes options d'exportation, ce qui signifie que cela va rendre les développeurs heureux parce que vous allez livrer des fichiers à temps et des formats de fichiers incorrects. Traiteur. Je m'appelle Alex. Dans ce cours, vous apprendrez ce qui est un design réactif et pourquoi cela compte. Comment concevoir à l'aide de colonnes et de contenus, comment travailler avec différentes bibliothèques, points de rupture d' eau et comment les traiter. Comment créer une conception Adobe X'd puis rendre réactif pour différentes tailles et comment envoyer correctement ces fichiers aux développeurs et clients. Ce cours s'adresse à tous ceux qui s'intéressent à la conception responsive dans Adobe X deep, et vous n'avez pas besoin de savoir comment l'utiliser sera X'd. Ils vont couvrir les adultes dans ce cours, donc vous voulez être plus désirable en tant que concepteur, livrer des fichiers plus rapidement aux clients et développeurs qui cliquent et roulent, et je vous verrai dans le cours 2. Qu'est-: La conception Web réactive est une approche de la conception Web qui permet aux pages Web de se rendre bien sur une variété d' appareils et de tailles d'écran. Pour un site Web orteil fonctionne bien sur différents appareils. Il doit être préparé à l'avance. Monsieur, Job est un concepteur est de concevoir tous vos éléments avec cela à l'esprit pour obtenir cohérence dans la conception sur plusieurs appareils et tailles d'écran. Les concepteurs utilisent des systèmes de grille pour les aider à poser les éléments de manière à ce qu'ils fonctionnent cohérente sur différents appareils et conservent la même sensation de Loken. Comme de plus en plus de trafic de site Web se déplace vers les appareils mobiles. conception de sites Web réactifs est essentielle pour tout concepteur car la majorité des sites Web que vous allez concevoir vont être visualisés sur différents écrans, depuis les ordinateurs de bureau, ordinateurs portables orteils , les tablettes, les téléphones jusqu'à montres intelligentes. 3. Colonnes et contenu: lorsque vous concevez Responsive Website tout ce que vous avez à penser à nos colonnes et contenu. Vous pouvez avoir un certain nombre de colonnes en fonction de votre mise en page ou si vous utilisez une bibliothèque de composants telle que bootstrap. Ces colonnes doivent être fluides, ce qui signifie que lorsque la taille de l'appareil devient plus petite ou plus grande, ces colonnes et le nombre de colonnes s'adaptent à la taille de l'écran sur lequel le site Web est chargé. Vous avez également du contenu de revêtement de sol, et l'exemple de base est le texte, qui sont réactifs, s'adapte au nombre de colonnes que possède le périphérique qui charge le site Web. Ce qui est typique, c'est le contenu et les colonnes s'adaptent ensemble et pour les éléments qui ne sont pas fluides. Certains curseurs, par exemple, fait signe de charger les versions plus petites sur les éléments que le développeur a préparés à l'avance, laissez-moi savoir, vous montrer à quoi cela ressemble sur un exemple en direct. Donc, ici, je suis sur mon site Web beignet, ce net et je suis sur la page des produits et ce site Web est réactif, qui signifie que toutes ces colonnes et le contenu vont orteil agir de manière responsable lorsque vous redimensionnez la taille du navigateur. Laissez-moi vous montrer ce que je veux dire, vous pouvez clairement voir que nous avons quelques colonnes juste ici parce qu'il y a un défilement vers le bas. Tous sont en retard, l' un en dessous de l'autre, et tous sont, comme vous pouvez le voir, exactement la même chose avec. Donc toutes ces images sont le même esprit. Le texte est positionné à gauche, comme vous pouvez le voir ainsi que les prix, et nous avons quelques catégories ici en haut aussi. Supposons que le texte et la navigation reste là où il se trouve à cette taille d'écran. Donc, c'est la taille de l'écran du bureau pour mon navigateur. Et quand je clique ici, orteil Laurie vers le bas un peu et lorsqu'il est étendu comme si vous pouvez voir que toutes ces colonnes s'adaptent et comme un mouvement de bureau et pour tout le chemin vers le bas à, par exemple, tablette taille quelque part ici, vous pouvez voir que maintenant menu hamburger est affiché, et ces colonnes sont de plus en plus petites. Et quand je descends jusqu'à Mobile, par exemple, quelque part ici, vous pouvez le voir. Maintenant, nous avons deux colonnes et sur tout le chemin vers le bas sur les plus petits appareils, que je ne peux pas vous montrer ici. Vous devez charger ce site Web sur votre téléphone mobile. Toutes ces colonnes vont s'empiler l'une sur l'autre parce qu'elles agissent manière responsable. Donc vous pouvez voir ici. je les redimensionne de haut en bas, vous pouvez voir comment ils se déplacent et la zone juste et repositionnent là où ils doivent être. Donc, comme je l'ai dit, sur le plus petit appareil, toutes ces colonnes vont être empilées les unes sur les autres, et vous pouvez clairement voir comment elles réagissent à différentes tailles d'écran. Donc, comment cela est terminé est ce site Web utilise bootstrap, et il a 12 grilles de colonnes. Donc, fondamentalement, vous allez voir cela dans la conception un peu plus tard quand nous arriverons à la partie de conception dans ce cours. Mais fondamentalement, nous avons un jeu de 12 colonnes, et toutes ces cartes prennent quatre colonnes chacune. Donc, cette image a quatre colonnes. Cela l'a aussi pour. C' est aussi la guerre. C' est 12 au total, et c'est l'esprit de ces colonnes. Comme vous pouvez le voir, c'est pourquoi la navigation et cette image sont alignées à droite et le logo et cette image sont alignés à gauche. Donc, fondamentalement, lorsque vous devenez de plus en plus petits, ces colonnes et le contenu à l'intérieur de ces colonnes s'ajustent et s'adaptent. Donc, fondamentalement, il sait que son chargement d'une taille d'écran plus petite. Donc, il le dit essentiellement au manteau. Ok, maintenant charge-moi cette version, et quand tu descends, va te montrer, OK, OK, charge moi la dispersion. Et maintenant, lorsque vous cliquez ici, navigation va orteils apparaissent à l'intérieur de ce menu hamburger parce qu'il sait qu'il devrait l'afficher comme ça. Vous pouvez voir que le texte s'adapte ici, et il ne semble pas joli pour le moment parce que parfois nous avons juste une ligne de texte et ensuite nous devons, et c'est pourquoi cela ressemble à Donc peut-être que je peux passer à une autre page. Allons-y, par exemple, abonnement pour que nous puissions voir à quoi cela ressemble. Et c'est l'exemple parfait parce que nous avons cette grande image en haut, et quand je clique ici et commence à baisser, vous pouvez clairement voir que cette image s'étend, puis descend en taille afin que vous puissiez lire clairement sur toutes les tailles d'écran. Et maintenant le menu est juste ici. Comme vous pouvez le voir, le texte s'adapte, et c'est l'exemple parfait. Comme un set off, le texte de contenu fluide est l'un d'entre eux, parce que lorsque vous étendez, vous pouvez voir que le texte est de plus en plus petit ou de plus en plus d'esprit. Comme vous pouvez le voir ici. Et lorsque vous descendez jusqu'à la plus petite taille possible et que vous commencez à faire défiler, vous pouvez voir que ces cartes sont également ajustées. Donc, par exemple, nous avons ce prix juste ici afin que vous puissiez le voir sur Lee comme une carte sur les tailles d'écran mobiles . Mais quand je l'étend, vous pouvez voir qu'il s'agit de deux cartes. Donc, quand je vais jusqu'ici, vous pouvez voir que l'esprit fluide de ces cartes change, parce que quand je deviens de plus en plus petit, vous pouvez voir cet esprit. Chacune de ces cartes devient de plus en plus petit, comme ici, par exemple, vous pouvez voir que le fond est de plus en plus petit. Textez toutes ces tailles de texte différentes, par exemple. Tout devient plus petit et quand vous arrivez à la taille de l'écran de l'appareil mobile, vous pouvez voir qu'ils sont empilés les uns sur les autres. Donc, fondamentalement, ils vont de 12 colonnes dans lesquelles tout le chemin vers le bas à fondamentalement une ou quatre colonnes différentes, peut-être deux, peut-être trois, en fonction. Utilisez-vous bootstrap ou autre chose ? Ou utilisez-vous personnalisé appelé Richard Developer vous a dit de le faire. Lorsque vous concevez pour Responsive, vous devez savoir quelles tailles d'écran vous prenez en charge afin de savoir combien variantes différentes vous devez concevoir. Mais vous devez voir cela avec vos développeurs parce que chaque projet est évidemment différent. Donc, si les développeurs utilisent bootstrap, par exemple, vous devez toujours leur demander, Allez-vous soutenir la taille d'écran plus petite ou tout simplement plus grande ? Allez-vous prendre en charge les tailles de tablettes, tailles mobiles et ainsi de suite ? Donc, vous devez savoir qu'à l'avance avant de commencer à concevoir pour Responsive, juste pour que vous puissiez savoir quelles tailles d'écran vous allez soutenir avec votre conception et une chose de plus, vous devez concevoir ces différentes tailles d'écran dans car les développeurs ne savent tout simplement pas ce qui va se passer à ces différents points de rupture et nous allons expliquer différents points de rupture plus tard. Nous commençons à concevoir, mais essentiellement sur toutes ces tailles différentes. Donc, fondamentalement, c'est un point de rupture. Vous pouvez voir clairement la navigation ici. Mais si je l'abaisse juste un peu trop ici, vous pouvez le voir sur la taille établie. Toute cette navigation d'arrêt va dans le menu hamburger juste ici sur la gauche. Donc, les développeurs doivent savoir quelles tailles d'écran vous allez prendre en charge avec votre conception et vous devez ensuite concevoir avec responsive à l'esprit. Donc, vous devez leur montrer tous ces changements différents, différentspoints de rupture, points de rupture, afin qu'ils sachent comment le contenu va ressembler une fois qu'ils commencent à coder et commencent réellement à créer le site Web Toby life. 4. Première approche mobile: avant les premiers sites mobiles, qui prenaient en charge les appareils mobiles, étaient généralement divisés en deux sites, un pour les ordinateurs de bureau et les grands écrans et la version adaptée pour les écrans mobiles, qui comprenait des commandes tactiles. C' était une mauvaise approche parce que cela signifiait que vous devez aborder ASIO différemment. Vous deviez utiliser le sous-domaine M lorsque vous chargez le site plus petit, et parce que les appareils étaient beaucoup plus lents à Bagdad par rapport à aujourd'hui, cela signifiait que les vitesses de chargement étaient beaucoup plus lentes et les taux de rebond étaient assez élevés. Lorsque les appareils mobiles ont commencé à être accessibles il y a dix ans, méthodologie de conception de site Web appelée Mobile est apparue pour la première fois, suggérant que chaque fois que vous avez conçu un site Web, vous devriez commencer à partir de la plus petite taille. Vous allez prendre en charge et adapter votre conception à partir de leur appareil pour les plus gros appareils, car de plus plus de trafic ont commencé à venir des appareils mobiles. Cependant, aujourd'hui, de cette façon de jour et d'âge, nous avons plusieurs appareils tactiles différents de téléphones, tablettes et montres intelligentes. À mon avis, cette approche n'a plus vraiment d'importance, car aujourd'hui, contrairement à il y a dix ans, appareils majoritaires ont touché le support de Microsoft Surface Studio et des appareils comme l' écran tactile ordinateurs portables, tablettes, téléphones et montres intelligentes. Vous devez concevoir avec un support tactile à l'esprit sur toutes les tailles. Donc, lorsque vous concevez, vous devriez toujours penser à l'avance à quoi vos éléments vont ressembler ou pas de tailles d'écran à partir de sorties étendues, comme les téléviseurs intelligents jusqu'aux montres intelligentes. Vous devez donc concevoir comme vous le souhaitez, tant que vous planifiez à l'avance pour garder l'aspect et la fonctionnalité hors de vos éléments cohérents. 5. Différentes bibliothèques: Parfois, lorsque vous concevez, vous devez utiliser des bibliothèques soit parce que votre client le veut ou que leurs développeurs ont demandé que vous utilisiez des bibliothèques et différentes bibliothèques apportent avec eux-mêmes différents défis et différents fonctionnalités. Donc, dans cette vidéo, je vais juste aller orteil court rapidement à travers trois hors fondamentalement les plus populaires. Donc, ces fondations d'air bootstrap et angulaire et tout cela viennent avec différents défis et fondations différentes que vous en tant que concepteur devez connaître. Donc, en gros, vous n'avez pas à en savoir vraiment. Vous pouvez simplement concevoir avec réactif à l'esprit, et vous avez orteil Toujours planifier à l'avance et penser à l'avance et simplement parler avec les développeurs avant commencer à concevoir, afin que vous puissiez connaître les tailles d'écran riches que vous devez prendre en charge. Vous devez savoir quelles tailles d'écran vous devez concevoir avant de leur envoyer le design fini . Mais vous devez savoir à ce sujet parce que ce sont essentiellement des éléments pré-préparés et des tailles pré-préparées , et vous avez tout à l'intérieur de différents fonds, curseurs, images, textes, pagination et tous ces différents éléments préparés afin qu'ils travaillent dans avancé sur le design responsive. Donc, peu importe ce que vous travaillez sur un projet, demandez simplement à vos développeurs de travailler dans une sorte de bibliothèque hors bibliothèque. Ainsi, par exemple, bootstrap ou fondation. Et puis, si c'est le cas, allez simplement sur ces sites Web et apprenez-en plus sur cette bibliothèque de composants en particulier à l'avance . Donc, vous devez savoir quand vous concevez. Par exemple, Bootstrap a une colonne spécifique avec la taille, et ils ont une colonne différente pré-préparée, donc vous devez savoir à ce sujet. Si vous ne savez rien à ce sujet, regardez simplement en ligne. Donc, fondamentalement, vous pouvez regarder une vidéo YouTube. Vous pouvez accéder à ces sites Web et aller à la documentation. Ou vous pouvez cliquer sur les exemples d'équipes et ainsi de suite. Et vous pouvez simplement en apprendre plus sur lui parce qu'ils aiment utiliser ces bibliothèques de composants parce que cela rend leur travail beaucoup plus rapide. Donc, par exemple, quelqu'un a déjà préparé toutes ces informations et tout ce code, de sorte que les développeurs peuvent simplement utiliser ce froid quand ils commencent à coder, et leur travail va être beaucoup plus rapide. Donc, pour que votre travail soit beaucoup plus rapide, vous devez vous familiariser avec toutes ces bibliothèques de composants sur lesquelles vous travaillez sur ce projet particulier, afin que vous puissiez savoir à l'avance ce que vous devrait utiliser, quelles tailles d'écran Vous devez concevoir quatre, et vous devriez toujours demander à vos développeurs sont qu'ils vont prendre en charge la plus petite taille d' écran, plus grande taille d'écran et donc un pour que vous puissiez savoir ce que vous devriez être conçu, et quelles résolutions et tailles d'écran vous devez prendre en charge. Alors n'ayez pas peur quand quelqu'un vous demande, Pouvez-vous concevoir un site web en utilisant la fondation ? Parce que fondamentalement, tout cela signifie que vous devez connaître différents esprits de ces colonnes, combien de colonnes elles sont à l'intérieur et quels éléments sont pris en charge et qui ne le sont pas. Et vous pouvez toujours découvrir cela essentiellement en utilisant les docks sur leurs sites Web, et vous pouvez vous familiariser à l'avance avant de commencer à concevoir afin que vous ne rencontrez aucun problème lors de la conception. Plus tard, vous pouvez toujours demander à vos développeurs, et c'est toujours une recommandation hors de mon orteil. Demandez aux développeurs tout ce que vous ne comprenez pas, car lorsque vous commencez à concevoir et que vous êtes déjà investi avec votre temps, par exemple, semaine ou mois dans un projet, puis lorsque vous envoyez ces développeurs de fichiers, puis vous apprenez que vous n'avez rien fait, selon un plan, alors il peut être vraiment trépidant redesign tout ce que vous avez fait parce que vous avez déjà perdu temps à concevoir quelque chose qui ne devrait pas être conçu en premier lieu. Donc, pour résumer, regardez simplement la documentation et voyez s'il y a quelque chose de spécifique à chacune de ces bibliothèques de composants et si elle est simplement impliquée dans votre conception et apprenez essentiellement, quel point les colonnes sont blanches, le nombre de colonnes et comment ils agissent sur la conception réactive ? 6. Support et points de pause: lorsque vous concevez, vous devriez toujours poser des questions à vos développeurs sur l'appareil, le sport et les points de rupture. Cela signifie que vous avez remorqué. Demandez-leur quels appareils ils vont prendre en charge, afin que vous puissiez connaître le nombre de conceptions différentes et réactives que vous allez créer pour qu'il puisse créer, par exemple, et appelez cela un jour si c'est quelque chose qu'ils veulent. Ainsi, par exemple, ils veulent soutenir une grande taille. Et peut-être la taille de la tablette est endettée parce que c'est là que la majorité de leur trafic vient . Mais généralement, vous devez prendre en charge plus de deux, et nous sommes ici dans la documentation sur les sites de bootstraps, et vous pouvez voir clairement que les formes de portrait extra petits appareils sont moins de 576 pixels blancs. Et cela signifie, fondamentalement, que lorsque vous créez une mise en page, qui est inférieure à 576 pixels dans l'esprit, comment le design va ressembler sur ces appareils afin que vous puissiez vraiment penser à des petits téléphones mobiles ou montres intelligentes, par exemple, qui sont plus petits que 576 pixels dans l'esprit. Donc, vous pouvez soutenir cela si les développeurs exigent que vous le souteniez et puis pleurent de ceux 576 à l'avance. Encore une fois, je parle du bootstrap juste ici. Dans cet exemple particulier, vous devriez toujours parler à vos développeurs et en savoir plus sur la bibliothèque de composants et qu'ils vont utiliser, cas échéant, et vous pouvez ensuite passer à autre chose. Par exemple, vous pouvez voir que les formulaires de paysage des petits appareils sont 576 et plus. Les appareils moyens, ce qui signifie les comprimés et plus, vont de 768 et l'esprit. Et puis nous passons à un gros appareils, donc les ordinateurs de bureau et, par exemple, ordinateurs portables plus grands sont neuf à un Extra. grands appareils sont de grands ordinateurs de bureau, qui vont de 1200 pixels et plus. Donc, tout cela signifie que vous devez essentiellement créer cinq tailles différentes de votre conception afin de prendre en charge toutes ces différentes exigences. Si votre client et vos développeurs demandent orteil donc une fois de plus, s'ils veulent juste prendre en charge, par exemple, trois tailles afin qu'ils veulent prendre en charge tablette mobile et grande. C' est donc pour cela que vous devez concevoir. Et fondamentalement, comme je l'ai dit plusieurs fois tout au long de ce cours, vous devez concevoir avec responsive à l'esprit, donc chaque composant que vous concevez. Vous devez penser à l'avance à quoi cela va ressembler sur ces différentes tailles d'appareil . Peu importe si vous utilisez bootstrap ou fond de teint ou quoi que ce soit du tout, vous devez concevoir que tous vos composants s'adaptent parfaitement aux pieds et fonctionnent magnifiquement sur toutes ces tailles d'écran différentes. C' est pourquoi la prise en charge des appareils est vraiment essentielle. Avant de commencer à concevoir, vous devez toujours demander à vos développeurs et clients quels appareils vous allez prendre en charge afin de savoir combien de ports différents vous allez créer à l'intérieur d'Adobe X'd pour montrer ces différents conceptions et points de rupture. 7. Conception pour les Phones: Ah, beaucoup de concepteurs vont concevoir un largement pour les ordinateurs de bureau, puis créer différents nos conseils dans adobe X T. Pour je parie iPhone et Android adapter la mise en page pour s'adapter et appeler un jour. Cette approche est erronée parce que vous supposez que tous les utilisateurs vont accéder au site Web en utilisant uniquement ces trois appareils. C' est quand le site se casse, parce que lorsque quelqu'un visite à partir d'un autre appareil, site Web n'est pas pris en charge et il ne fonctionne pas correctement. Ces deux tailles sont spécifiques pour les APS mobiles car IOS et Android sont conçus pour fonctionner avec des composants spécifiques créés dès le début pour ces systèmes d'exploitation. Ainsi, lorsque vous chargez votre site Web dans une taille qui n'est pas prise en charge par celui-ci, vous aurez des problèmes de convivialité, problèmes de chargement, éléments qui ne s'affichent pas correctement et plus que nous devrions utiliser nos tailles d'alésage pour les APS mobiles , Onley et pour les sites web réactifs. Vous devez utiliser des points de rupture et des tailles d'appareil, que vous allez prendre en charge dès le début 8. Gestion du temps: avant Adobe X'd jusqu'à ce qu'il soit similaire à lui. Vous devez concevoir chaque taille séparément et adapter les éléments d'une manière très fastidieuse . Mais comme Ecstasy est créé avec la vitesse à l'esprit, en utilisant sa fonction de redimensionnement réactif, vous pouvez concevoir pour différentes tailles assez rapidement. La principale chose sur laquelle vous devriez vous concentrer est de penser avant un design et de planifier à l'avance comment vos éléments vont ressembler sur différentes tailles d'écran. Et dans la section suivante du cours, nous allons passer à la conception. Nous allons lire le mémoire de Zion, faire de la planification et commencer à concevoir notre site Web, puis adapté aux différentes tailles que le client va soutenir, donc je vais vous voir là-bas. 9. Introduction de conception réactive: dans cette partie du cours, nous allons nous occuper de la conception. Et je vais vous montrer comment j'ai créé ce modèle de studio de design que vous pouvez télécharger et utiliser gratuitement pour vos projets personnels et commerciaux. On va le diviser. Nous allons plonger profondément dans la façon dont vous pouvez le créer vous-même si vous le souhaitez. Je vais vous donner toutes les ressources sont utilisées pour le créer, puis nous allons créer un design responsive en utilisant ce modèle exact. Alors passons rapidement à travers ce que nous avons ici. Nous avons cette navigation simple en haut. Ensuite, nous avons une belle image de grand héros avec deux boutons. Nous avons des commandites et des organismes avec lesquels cette agence a travaillé dans le passé . Ensuite, nous avons à propos de nous section. Ensuite, nous avons une section de plus juste ici avec le texte. Nous avons des futurs. Ensuite, nous avons de bons prix gros avec trois niveaux de prix. Puis en dessous, nous avons quelques beaux témoignages ci-dessous, nous avons un appel à l'action. Nous avons la section bloc et enfin nous avons le flotteur en bas. Donc, ce que nous allons utiliser, c'est que je vais vous donner ce dossier exact. Donc, vous allez recevoir toutes ces couleurs. Vous allez recevoir tous ces styles de personnages et nous avons utilisé le sens ouvert, qui est gratuit. Devant froid. Et je vais vous donner un lien. Dans un fichier pdf, monsieur peut facilement télécharger et utiliser le sens ouvert dans ce et tous les projets futurs si vous voulez , ainsi que Carla, qui est une fois de plus gratuit Google Front, vous ne pouvez pas encore une fois, Donald et des nouvelles dans vos projets. Donc, ce que nous avons ici en haut sont bootstrap, grandes tailles. Donc, si je clique sur l'un des aéroports, par exemple, celui-ci et cliquez sur le Grand, vous pouvez voir que tous ces modèles ont grand inclus à l'intérieur. Et un grand est un peu différent, surtout pour cet arbre à la fin. Et nous allons y arriver dans les prochaines vidéos. Mais je vais expliquer rapidement que certains de ces ports sont des ports. Donc, je vais choisir d'utiliser bootstrap dans cet exemple. Et comme je l'ai dit dans les vidéos précédentes dans la section de prière hors du cours, vous pouvez utiliser d'autres notes réactives si vous le souhaitez, ou vous pouvez créer la vôtre. Tout dépend de vous, votre design et surtout de vos développeurs, car tout dépend s'ils vont le soutenir avec leur citation. Donc, dans cet exemple, nous allons utiliser bootstrap et nous allons utiliser la grille de colonne tombée. Donc, comme je l'ai dit, si je clique ici et aller à ma mise en page, vous pouvez voir que pour les ordinateurs de bureau extra grands, qui sont plus de 1200 pixels dans lesquels nous avons 12 colonnes, a obtenu Erwitt hors 30 appelant 65. Et ce sont les marges qui sont liées à la fois pour le côté gauche et droit, donc vous pouvez voir là 1 65 Donc, dans ce cas, les colonnes sont ce bleu clair colonnes que vous voyez ici, et vous pouvez cliquer ici et vous condamner un plus bas. Vous payez la ville ici si vous le souhaitez, sorte que vous pouvez facilement voir la conception derrière toutes ces colonnes. Vous pouvez si vous choisissez, changer la couleur à la couleur que vous voulez, si c'est quelque chose que vous voulez, mais je vais choisir de l'utiliser 25% juste pour que vous puissiez le voir un peu mieux. Ensuite, nous avons le prochain orteil extra grand qui arrête qui sont encore une fois plus de 200 pixels, dans lequel nous avons un gros appareils qui sont des ordinateurs de bureau jusqu'à 992 pixels, dans lequel nous avons ensuite des tablettes moyennes qui sont jusqu'à 7 68 pixels, dans lequel nous avons petits appareils tablettes qui sont jusqu'à 576 pixels dans l'esprit. Et enfin, nous avons des petits appareils supplémentaires qui sont formés en dessous de 576 pixels dans l'esprit. Donc, si je clique sur celui-ci, vous pouvez voir que nous avons quatre colonnes parce qu'une fois de plus, c'est un très petit esprit hors de votre écran. Donc, vous allez utiliser les dernières colonnes car il n'y a aucune raison pour vous d'utiliser 12 colonnes pour celle-ci aussi. Ensuite, nous avons huit colonnes pour les petits appareils et les tablettes. Nous avons 12 colonnes pour les tablettes moyennes et appareils, puis nous avons Telkom pour celui-ci et pour celui-ci aussi. Maintenant, lorsque vous concevez ces grands sites Web, vous pouvez imaginer que ces marges gauche et droite, sont vides à l'état. Mais ce qui se passe est juste d'imaginer que quelqu'un regarde votre site Web sur un très grand écran. Ainsi, par exemple, vous avez tous ces écrans courbes modernes, et ils ont ces grandes marges à gauche et à droite. Alors que se passe-t-il là ? Vous êtes super séjour exactement le même, et il reste exactement le même. Bon sens, et ce conteneur ne change pas, mais ces marges changent. Donc, vous avez vraiment deux options. Vous pouvez étendre cette image, par exemple, gauche et à droite afin que vous puissiez voir ce collier bleu foncé juste ici. Vous pouvez l'étendre à ce que vous voulez à gauche et à droite. Si c'est quelque chose que tu veux. S' il s'agit d'une image, elle peut mettre à l'échelle les orteils gauche et droit. Sentez cet écran entier. Ou vous pouvez voir avec votre développeur pour créer une belle mise en page en boîte de sorte que vous pouvez juste imaginer que cela si je clique juste là, vous pouvez voir qu'il est 1440 pixels blanc. Imaginez juste que c'est votre conteneur, et tout ce que 14 40 pixels ne va pas être inclus dans la boîte va être contenu en dehors de la boîte, donc vous pouvez imaginer que vous pouvez mettre une couleur de fond, par exemple. Vous pouvez mettre l'image d'arrière-plan qui va mettre à l'échelle sur tous ces très grands écrans. Donc, vous pouvez imaginer parfois, surtout à l'intérieur des entreprises. Les gens regardent ces sites Web sur de grands téléviseurs. Par exemple, il y a des micro-appareils de surface qui sont extrêmement blancs. Par exemple, 10 000 pixels dans l'esprit. Et ici, si je me souviens bien. Ouais, nous avons 1440 pixels dans l'esprit, donc vous pouvez imaginer à quel point la petite dette va ressembler sur cet écran. C' est pourquoi les mises en page en boîte sont bonnes, parce que le site Web ne va pas perdre. La qualité va évoluer jusqu'au point où le développeur décide qu'il va arrêter la mise à l'échelle. Et puis, après que la mise en page de la boîte va commencer, développez avec l'arrière-plan et va contenir tout ce qui est à l'intérieur de ce conteneur juste ici. Et votre design va rester le même. Mais l'extérieur de cette boîte va bien augmenter pour sentir l'écran restant. J' espère donc que Desk qui efface certaines des choses avec la mise en page réactive et bootstrap pour notre cas, et nous allons maintenant rapidement parcourir nos conceptions. Je vais donc cliquer sur l'un des aéroports et cliquer ici pour cacher les notes. Pour l'instant, je vais également cliquer ici pour masquer le panneau d'actifs frapper le contrôle zéro pour s'enclencher en position, et je vais zoomer un peu plus près. Donc, vous avez vu des ordinateurs de bureau très volumineux avant, au début de cette vidéo, vous pouvez voir à quoi il ressemble. Et maintenant, si je tous ma clé de l'espace et navigue ici, vous pouvez voir à quoi il ressemble à un prochain dispositif de garage loi. Cette illustration va donc évoluer proportionnellement. Et si vous voyez ou moyennes tablettes et tout le chemin vers le bas pour les petits écrans va regarder un peu différent de ce qu'il est ici maintenant. C' est parce que je voulais sentir ce texte jusqu'ici. Comme vous pouvez le voir, ces sections avec les clients précédents et à propos de nous ressemblent exactement ici, ainsi que sur extra large ici. Mais ils commencent à changer pour les appareils moyens, les tablettes et les petites tablettes, et surtout pour les très petits là-bas. J' ai utilisé l'illustration pour venir en haut et le texte à venir en bas et fondamentalement, comme vous pouvez le voir comme nous descendons. Ces sections vont changer. On en a quatre d'affilée ici. Il y a un peu plus près ici, mais ils répondent à la glace réce Un peu mieux ici parce qu'ils sont trop sur la route juste parce que hors de la question de l'espace et sur votre taille mobile, comme vous pouvez le voir là, un sur le dessus l'un de l'autre. Maintenant, si nous revenons avec le prix, ST Ng va pour cela Donc vous pouvez voir sur ces tailles de bureau il trois dans la rangée. Mais ici sur les tablettes sur les grandes tablettes Il y a deux dans une rangée avec un ci-dessous sur les petites tablettes il y a trois inscrire comme ça. Comme vous pouvez le voir, ce conteneur est mis à l'échelle pour s'adapter à l'espace restant. Et enfin, pour les très petites tailles et formes, vous pouvez voir qu'elles s'empilent les unes sur les autres. Eh bien, c'est réactif pour vous en un mot, et on va creuser un peu sur les orteils, et je ne vais pas recréer ce design à partir de zéro, mais je vais passer par chaque section de la vidéo suivante, et je vais vous dire comment je l'ai créé. Mais passons rapidement à travers juste pour que vous puissiez voir quelques différences. Comme vous pouvez le voir ici pour les témoignages. On en a trois ici. On en a deux ici. Nous en avons aussi un. Comme quoi ? Ces deux-là pour le bloc que nous avons dans cette même section. Donc 33 ici. Nous devons bloquer les messages. Ici, nous en entendons un. Et ici, nous en avons aussi un. Et vous pouvez voir que l'image se met à l'échelle bien en comparant à ces précédentes. Enfin, le dossier est exactement le même sur tous, sauf pour la taille mobile. Parce que nous devons empiler ce texte l'un sur l'autre et parce qu'ils défilent vers le bas , peu importe si vous mettez un sur l'autre. Mais j'ai choisi d'utiliser Rose car il est beaucoup plus simple pour l'utilisateur de cliquer sur l'un de ces éléments de menu car ils sont empilés comme ceci. C' est ce que nous allons aborder dans la prochaine vidéo. Et je vais vous montrer comment vous pouvez créer ce design aussi. Si vous voulez, je vais vous montrer comment vous pouvez utiliser certains de ces actifs. Et puis une fois que nous avons créé ce design veut vous montrer comment vous pouvez le créer. Ensuite, nous allons nous attaquer à certaines de ces trois tailles réactives. Et je vais vous montrer comment vous pouvez réduire cet orteil de conception de site Web. C' est exactement comme ça. Je te vois dans la prochaine vidéo. 10. Anatomie: D' accord. Donc, pour commencer, je vais simplement cliquer ici pour créer un 1920 avec 10. 80 à l'écran de démarrage. Et ce que je vais faire est simplement de sauter dans mon fichier original et je vais d'abord copier la grille. Je vais le badigeonner ici. Alors je vais simplement le faire parce que je le pense. Nous avons utilisé uniquement pour créer le document original. Puis Bill Odette. Je vais utiliser la conception de mon site web à la taille extra large et je vais zoomer un peu plus près et positionner quelque chose comme ça. Alors ce que je vais faire, c'est ce qu'il a sélectionné. Je peux simplement cliquer sur mes couleurs. Comme vous pouvez le voir, il montre toutes ces couleurs différentes, mais je n'en veux pas. On peut aller couleur par couleur, et je vais vous montrer comment vous pouvez faire ça. En outre, ce que vous pouvez faire est d'utiliser des styles de caractères. Comme vous pouvez le voir, nous avons tous ces styles de caractères différents ici. Donc, vous pouvez le faire si vous le voulez, ou vous pouvez garder ces choses simples. Mais j'aime le faire parce qu'il montre tous ces styles de personnages différents dans différentes couleurs, sorte que vous pouvez simplement y accéder comme ça. Ça ne va pas aux orteils. Commandez-les par taille, ce qui est un peu ennuyeux. Donc, ce que vous pouvez faire, c'est tout simplement chaque commande, certains d'entre eux. Et je vais faire ce simple clic et glisser, et je vais mettre la vidéo en pause jusqu'à ce que je fasse tout ça. Et maintenant que je l'ai fait, je veux sélectionner mes couleurs afin que vous puissiez appuyer sur le contrôle ou la commande. Cliquez sur l'un de ces éléments et vous pouvez cliquer sur votre couleur. Alors je peux faire la même chose pour ce fond. Peut-être un zoom un peu plus près juste pour que vous puissiez voir ce que je fais. Je peux faire la même chose pour le bouton. Je peux faire la même chose pour ce contexte. Je peux faire la même chose pour le texte dis. Voyons voir. Je peux faire la même chose pour le texte en dessous, et choisissons un sous couleur. Donc, ce sont des Juifs, quelque chose d'un peu plus léger. Alors voyons lequel d'eux est ? Ils sont tous 70 70. Voyons voir, peut-être que c'est celle-là. Pas de recherche, vraiment créer une nouvelle forme comme celle-ci. Je vais orteil enlever la bordure et pour la couleur utilisée quelque chose comme huit F huit F huit F huit f Let's un présentateur ou retour et puis je vais cliquer ici pour sélectionner cette couleur. Maintenant, parce que c'est ma couleur principale, je vais simplement cliquer et faire glisser dessus et simplement les commander à partir des Dockers pour nous ravir la couleur. Maintenant, nous avons aussi cette couleur d'accent juste ici qui n'a pas ramassé pour une raison quelconque. Comme vous pouvez le voir, c'est notre couleur ici dans l'illustration juste ici sur les T-shirts. Donc c'est une sorte de couleur rouge. Donc, cette couleur encore une fois je vais cliquer ici est F f 6584 et que vous voulez cliquer ici et positionner il a fait beaucoup ces deux. Maintenant que nous avons nos couleurs et nos styles de personnages, je vais simplement cacher ce panneau pour l'instant et je vais vous montrer comment j'ai créé ce design de site web. Je vais donc cliquer ici et cliquer sur Insight. Comme vous pouvez le voir sur la navigation, nous avons logo, qui est juste deux textes et fondamentalement inventé ce maintenant un rapide connu avant que je suis un. Si vous voulez apprendre à créer des designs pour des sites Web à partir de zéro, j'ai un cours dédié à ce sujet dans lequel nous courons à travers sur le design. Exposé sur la recherche de votre concurrence sur la façon dont vous pouvez être intelligent en matière de positionnement, comment vous pouvez parler avec vos clients, comment vous ne pouvez pas comprendre le design. Bref, comment vous pouvez respecter la date limite et comment vous pouvez passer de l'idée. Les cadres de fil de remorquage à la conception à part entière, puis vous pouvez exporter cette conception pour les développeurs. Mais parce que ce cours est sur le redimensionnement responsive, c'est pourquoi je le fais de cette façon. Et je ne vais pas vous ennuyer trop sur la façon dont vous pouvez créer un design de site web à partir de zéro une fois de plus. Si vous ne savez pas comment faire cela, vous pouvez simplement sauter à l'intérieur de ce cours, et vous pouvez tout apprendre sur la conception de site Web à partir de zéro. Comme ils l'ont dit, c'est juste pour la conception de sites web réactifs. Tout cela est plus, comme je l'ai dit, Voici le logo ici sont sur les éléments de menu afin que vous puissiez voir que je les ai commandés de gauche à droite de haut en bas. Comme ça. Ensuite, nous avons le bouton de démo. Comme vous pouvez le voir, obtenez une démo nbt et pour le fond. Maintenant, déplacons Belong. Nous avons ici un texte qui est ce texte ici nous avons le H ainsi que H2. Nous avons des démocrates et ci-dessous nous avons appris plus à ce sujet. Ensuite, nous avons une illustration de héros et des formes. Permettez-moi de couvrir rapidement l'illustration du héros Hill. Donc, pour obtenir cette illustration, je suis simplement allé à brancher. Et si vous n'avez pas ce blog, vous pouvez simplement cliquer ici et le trouver n'importe quel stand, mais ça s'appelle andro. Et à l'intérieur de l'Andhra, vous pouvez simplement cliquer là et vous avez toutes ces illustrations gratuites étonnantes que vous pouvez utiliser sur vote vos projets personnels et commerciaux et à l'intérieur que vous pouvez simplement taper ce que vous voulez. Donc, je pense que j'ai utilisé le design et il va chercher toutes ces différentes démonstrations de design . Comme vous pouvez le voir, il a ces illustrations étonnantes que vous devriez vraiment vérifier et vous pouvez les utiliser dans vos projets gratuitement. Bien sûr. Merci, Toa. Cette personne ici qui a été assez incroyable pour partager toutes ces illustrations. Donc, en gros, quand vous trouvez votre design, vous vous condensez. Il suffit de le choisir, par exemple qui a utilisé celui-ci. Cliquez dessus et vous pouvez simplement obtenir fait et vous pouvez venir quelque part à l'extérieur frappé Contrôle V, et il va basé dans votre conception maintenant un inconvénient principal sur ces illustrations . Comme vous pouvez le voir, ils viennent en groupe. Mais lorsque vous ouvrez ce groupe, aucun calque n'est nommé. Donc, c'est vraiment un gros inconvénient, parce que si vous voulez trouver quelque chose, vous devez vraiment cliquer à travers et voir ce que c'est. Si vous voulez changer quelque chose de très rapide, vous ne pouvez pas le faire car vous devez cliquer sur plusieurs calques, puis changer leurs couleurs. Donc, dans notre cas, vous pouvez simplement maintenir la touche de commande de contrôle, et vous pouvez cliquer ici pour sauter à l'intérieur de cette couche. Mais ensuite, vous devez tenir votre touche Maj pour sauter à l'intérieur ici. Puis ici, puis ici, Et si vous voulez changer ces, vous pouvez sauter ici et puis changer les orteils, qui ont une couleur que vous voulez. Donc, c'est un peu un inconvénient, mais une fois que vous avez déjà obtenu, vous pouvez être reconnaissante. Ce sont des illustrations incroyables et elles sont gratuites. Vous pouvez les utiliser comme ils l'ont dit dans des projets personnels et commerciaux. Alors passons à travers nos illustrations. Tout ce que j'avais fait ici, Oui, si je l'ouvre, j'ai divisé le personnage ainsi que le principal point d'illustration. Donc, comme vous pouvez le voir, voici notre illustration et voici notre personne. Donc c'est tout ce que j'ai fait parce que je veux les redimensionner plus tard pour toutes nos autres illustrations. Et c'est beaucoup pour toutes nos tailles, et c'est beaucoup plus facile de le faire et de cette façon quand vous les avez séparés dans différents dossiers maintenant pour les formes en arrière-plan, tout ce que j'ai fait est essentiellement créé une forme, et si j'ai sauté à l'intérieur juste ici, j'ai utilisé vraiment près de l'ingrédient, qui est blanc de ce côté, vide sur le site. Donc, si je clique dessus, vous pouvez voir que c'est à zéro ou ville payante. Ça va de haut en bas, et je vous ai aussi réduit la ville à 20% ici. C' est tout ce que j'ai fait pour toutes ces formes. Et enfin, pour ce grand, j'utilise juste un orteil de mosquée pour couvrir la partie de cette image de héros, et cette mosquée va diminuer au fur et à mesure que nous avançons avec le reste des tailles dans les prochaines vidéos. Mais vous pouvez voir que c'est juste le carré avec coordonné ou 50. J' ai utilisé exactement la même sensation pour toutes ces formes, ou fondamentalement, car c'est à 10%. Juste pour qu'il soit beaucoup plus facile de voir Bill derrière ce texte. Donc, en gros, c'est tout ce que j'ai fait pour cette section. Si nous passons en dessous de cela, nous avons tous ces logos différents. Je les utilise gratuitement sur Internet. Mais vous allez évidemment inclure vos clients, les bûcherons ici ou votre propre logo. Si vous créez un design comme celui-ci pour votre propre agence ci-dessous, nous avons une autre illustration de la même source, donc c'est d'andro. Encore une fois, vous pouvez l'utiliser à vous pouvez voir, J'utilise exactement la même administration Aziz qu'ils offrent. Mais je viens de changer ces couleurs de fond ici pour correspondre aux couleurs de mes boutons et un texte juste en dessous, nous avons juste du texte et nous avons ce divisé ici et il est bien diviser cet âge avec cette texte de paragraphe ici. Ci-dessous, nous avons ces jolies petites icônes et nous avons toutes ces fonctionnalités divisées en sections Diviseur attendu Ike veut aussi. Maintenant, cette section est exactement la même que la section héros. Tout ce que j'ai fait, c'est que je viens d'inclure le prix ici. Et nous avons ces grands fonds pour l'achat d'un paquet et tout. Je l'ai fait pour le différencier un peu de la page d'accueil de la section héros juste ici . Je viens de réordonner certains de ces éléments autour, et j'ai fait exactement la même chose pour cette section d'appel à l'action construite pour les témoignages que j'ai utilisé une fois de plus ce logos gratuits et j'ai juste utilisé du texte aléatoire et des noms aléatoires, et je a utilisé ces deux flèches afin que les utilisateurs puissent naviguer dans le site Web à gauche. Et juste en dessous que j'utilise ce problème avec le bouton exactement la même configuration et enfin pour les poteaux de bloc et le pied de page, nous allons bloquer les affiches. Vous pouvez voir que nous avons trois postes de bloc, et si je l'ouvre, vous pouvez voir post 123 et à l'intérieur de chaque post nous avons une image. Ensuite, nous avons l'horodatage ici que nous avons dans le texte du paragraphe. Nous avons l'avatar de la personne qui écrit le texte, et nous avons le nom de la personne. Même pour les trois. Nous avons bouton pour voir tout et va vous emmener à la plage de bloc. Comme vous pouvez le voir, il est lié ici et enfin nous avons le plus loin Donc une fois de plus c'est le logo. C' est tous ces différents éléments de menu. Nous avons des icônes de médias sociaux ci-dessous, et enfin ce texte en bas afin que vous puissiez voir ce design. C' est très simple. C' est vraiment assez facile à créer. Et comme je l'ai dit, je ne vais pas vous ennuyer et perdre trop de temps pour parler avec elle. Vous pouvez créer cette conception de site Web si vous voulez apprendre une fois de plus, avoir un cours sur la façon dont vous pouvez créer un design de site Web à partir de zéro, et dans ce, vous allez explorer beaucoup plus de détails comment vous pouvez créer des sites Web comme ceux-ci et comment vous pouvez les vendre à inclinaisons. Fondamentalement, lorsque vous créez ce brief de design parfait, qui est vraiment écrit dans la pierre de sorte que vous en tant que concepteur et vos clients vont le suivre au thé parce que vous allez d'accord tout à l'avant et vous allez à la recherche site Der ainsi que leur site de concours Vraiment bien, sorte qu'ils peuvent vraiment le comprendre et vous pouvez facilement suivre ce bref de conception. Donc encore une fois, si vous êtes intéressé, vous pouvez le vérifier. Mais si ce n'est pas le cas, nous pourrons alors poursuivre cette voie. Et dans la prochaine vidéo, je vais vous montrer comment vous pouvez réduire ce site Web en particulier et nous allons aller avec chaque vidéo sur la façon dont vous pouvez redimensionner sur ce site Web afin que vous puissiez obtenir un design entièrement réactif que vous pouvez partager avec vos développeurs. 11. Comment fonctionne Resize réactive: responsive design est essentiellement site Web réagit à l'appareil que l'utilisateur voit sur. Donc, si vous regardez l'écran du téléphone, Responsive va orteil. Adaptez-vous à cet écran de formulaire particulier pour regarder juste à droite pour paraître facilement accessible afin que vous puissiez facilement parcourir toutes les informations que ce site Web a à offrir sur cet écran d'appareil mobile . Il va sans dire que cela fonctionne sur tous ces autres appareils exactement la même chose. Donc, si vous regardez un bureau, fondamentalement, vous arrivez à la version de bureau de celui-ci. Si vous regardez un téléphone mobile, vous obtenez une version de téléphone mobile de celui-ci, et il fonctionne exactement la même chose sur tous ces autres appareils est un vous a montré dans la première vidéo de la partie de conception de ce cours parce qu'il est l'adaptation de manière responsable envers les appareils sur lesquels vous consultez votre site Web. Alors, comment cela se traduit par la partie de conception ? Eh bien, c'est assez simple dans Adobe Exit parce qu'ils ont cette belle option de redimensionnement réactive afin que vous puissiez activer cette option de taille réactive à partir d'ici, et il va redimensionner tout ce design de manière réactive, car il pense que cela devrait à mon avis, et d'après mon expérience, cela ne fonctionne jamais comme il se doit. Vous devez donc toujours adapter ce redimensionnement responsive. Et à mon avis, vous devriez toujours l'utiliser. Mais vous devriez toujours l'utiliser partie par partie, hors de votre conception, pas tout le design à la fois. Alors comment ça marche. Fondamentalement, comme vous pouvez le voir, vous pouvez simplement activer et désactiver cette lutte, et vous pouvez cliquer ici sur le bord de votre design, et vous pouvez simplement l'adapter. Et vous pouvez voir qu'il essaie de travailler sur tous ces différents composants et comment il va orteil de manière réactive. Regardez toutes ces autres tailles. Donc, comme vous pouvez le voir, nous sommes à 3 95 qui est fondamentalement notre conception mobile à ce stade. Mais comme vous pouvez le voir, aucun de ces composants ne semble comme il se doit. Donc, si vous appuyez sur les contrôles que pour revenir, vous pouvez toujours sauter à l'intérieur section par section. Et lorsque vous faites cela, vous pouvez voir tous ces autres paramètres. Donc, nous avons un rembourrage juste ici. Vous pouvez activer ou désactiver le remplissage pour les groupes, et fondamentalement vous pouvez choisir quel tapting vous avez entre tous ces différents éléments . Frappage si différent pour chaque bord ou même batteur pour tous les bords. Donc, vous pouvez voir que nous avons un rembourrage de bord droit à 1 65 ce qui est ce pari juste ici. 1 65 est là. Nous avons une literie de bord supérieur dans les paris de bord inférieur et vous pouvez utiliser toutes ces différentes mesures pour les configurer comme vous le souhaitez. Et ça va marcher sur les pieds quand tu les mets en place. Est va orteil redimensionner de manière responsable tous ces composants. Mais ce qu'il ne peut pas faire, c'est ne peut pas empiler les composants les uns sur les autres. Donc, si vous vous souvenez de l'exemple que je vous ai montré tout à l'heure, laissez-moi le faire glisser ici. Et si je l'agrandit, vous pourriez voir que j'utilise responsive resize et responsive design en général pour positionner, par exemple, dis tax sur le dessus de cette illustration. Il ne peut pas le faire dans les oeufs d'adobe. Vous devez faire ces choses manuellement. Donc, fondamentalement, la taille réactive est là pour vous aider avec votre entreprise de design réactif. Mais fondamentalement, il ne peut rien faire et tout pour vous. Tu dois faire certaines de ces choses toi-même. En outre, vous pouvez utiliser Responsive resize auto, donc utilisez des contraintes de taille re automatiques ou vous pouvez cliquer sur le menu et fondamentalement, comment vous allez le réparer et comment il va orteil ressembler lorsque vous utilisez responsive afin que vous puissiez fixer l'esprit et fixer la hauteur. Mais vous pouvez cliquer ici, par exemple, et maintenant il va être fixé en haut et fixer à gauche. Donc, si je et zoomer un peu cliquez sur notre port en cliquant ici, vous pouvez voir qu'il reste fixé à gauche et fixé au sommet. Maintenant, vous pouvez le faire pour les composants, ou vous pouvez le faire pour ces différents éléments à l'intérieur de votre conception. Donc, si j'utilise exactement les mêmes paramètres ici, et si je commence à le redimensionner, vous pouvez voir qu'il garde les contraintes à gauche, en haut à droite comme leur fixe juste là. Et il va orteil être fixé au sommet et fixé à gauche. Dans ce cas, vous pouvez voir que son design réactif fonctionne bien jusqu'à un point où il commence à se casser, et ensuite vous devez sauter à cette hauteur, sorte de blé, qui est 9 78 pixels à ce stade et vous avez de faire quelque chose. Donc, il va orteil fonctionner correctement à tout moment. Donc, fondamentalement, bureau comment le redimensionnement réactif fonctionne et dans la prochaine vidéo, nous allons commencer à le redimensionner. Donc, nous allons créer ce superbe que vous pouvez voir ici, et nous allons passer des ordinateurs de bureau très volumineux, appareils trop volumineux. Et je vais vous montrer comment vous pouvez adapter ce travail de conception orteil sur de grands appareils qui s'arrêtent . 12. Créer une conception réactive: Commençons donc maintenant avec un design réactif. Comme il l'a dit dans la première vidéo, assurez-vous de parler avec votre développeur de la façon dont pouvez-vous concevoir s'ils utilisent bootstrap s'ils utilisent angulaire ou autre chose s'ils utilisent un système de grille personnalisé s'ils n' utilisent aucun système de grille du tout ? Si vous devez créer vous-même un excellent système, alors parlez simplement avec votre développeur avant même de commencer avec le design afin que vous puissiez savoir comment il va s'adapter une fois que vous avez créé votre design, et maintenant vous devez l'adapter manuellement, pas un côté de plus. Note. Si vous commencez par extra petit. Donc, vous commencez avec la taille du téléphone, par exemple, et vous voulez l'adapter orteil extra large il s'arrête ou un temps, alors il fonctionne exactement la même chose. Donc vous allez aux pieds exactement de la même façon. Adaptez tous ces composants et différentes tailles pour s'adapter à ces différents écrans. Maintenant, commençons. Je vais cliquer ici, appuyez sur control de pour dupliquer celui-ci. Je vais le positionner ici, en dessous d'un ordinateur de bureau de grands appareils. Je vais double-cliquer sur le nom qu'il contrôlerait, voir double clic droit ici coup de contrôle de la et maintenant je vais faire je vais simplement cliquer ici pour que je puisse voir toutes ces différentes tailles. Donc, en gros, il est 10. 24 à l'esprit, donc je vais faire ça. D' abord, vous pouvez hors cours dans cette manuellement en cliquant simplement ici et en allant à 10. 24. Mais comme vous pouvez le voir, la mise en page se brise beaucoup. Donc je ne vais pas faire ça. Je vais simplement cliquer ici et utiliser 10 24 comme ça. Mais je vais désactiver la taille de responsabilité à ce stade parce que je veux que tous ces composants soient exactement de la même taille. Donc, il va aux pieds, garder exactement la même taille pour tous nos styles de personnages et sont des illustrations. Donc, je vais juste désactiver le redimensionnement réactif à ce stade. Mais je vais basculer pour certains de ces composants supplémentaires. Donc, comme nous l'avons dit 10 24% et maintenant vous pouvez voir certains d'entre eux sont à l'extérieur, mais nous allons faire face à une 2ème 1ère chose d'abord, nous devons adapter ces différents paramètres de sorte que comme vous pouvez le voir, c'est 30 50 47. Donc on va faire la même chose pour ici. Donc 30 15 et enfin 47 ici. Et vérifions une fois de plus. Colonnes si hautes 30 50 47. Dites que les colonnes 30 50 et 47 devraient être juste ici. Donc, comme vous pouvez le voir, nous avons exactement les mêmes paramètres que nous avons ici en haut. C' est un till vraiment têtu dans adobe existe, donc vous devez l'adapter de temps en temps. Maintenant, laissez-moi sauter rapidement et déplacer ce design pour que je puisse voir ce que je fais. Fondamentalement, et je peux vous le montrer dans ce dossier original. Laisse-moi entrer et je vais aller aux pieds. Les premières choses adaptent d'abord ma navigation. Donc, comme vous pouvez le voir, nous l'avons fixé à gauche et en haut. Donc, ce que nous pouvons faire, c'est que nous pouvons simplement cliquer ici et l'adapter comme ça. Mais je ne vais pas le faire parce que je n'aime pas ce qu'il fait avec le logo et ce qu'il fait avec le bas. Je veux avoir exactement la même taille ici. Donc, ce que vous pouvez faire est simplement cliquer ici, mettre en page et nous pouvons voir que nous avons des marges liées ou 47 Donc nous pouvons cliquer ici. Et nous pouvons utiliser batting pour le bord gauche et droit de 47 comme ça et comme ainsi Donc ce que nous pouvons faire à ce stade, c'est simplement utiliser la navigation se déplaçant comme ça, et je vais déplacer cela aussi. Mais comme vous pouvez le voir, ça continue de bouger ça donc je n'aime pas vraiment ce qu'il fait. Donc, je vais le faire manuellement et je vais simplement déplacer le bouton ici. Je vais simplement cliquer sur l'un de ces. Maintenez Shift et déplacez-les à quelque part par ici. Peut-être, et je vais orteil aussi réduire la taille du logo comme cellule. Positionnez-le au centre comme ça et là nous l'avons. Donc maintenant, nous avons notre navigation fait, et je vais simplement déplacer l'arrière-plan ici et ensuite entendre jusqu'à ce qu'il rencontre le bord supérieur de notre héros et que notre navigation soit terminée pour que vous puissiez voir qu'il ressemble exactement qu'ici, mais nous utilisons juste une astuce pour positionner certains de ces éléments un peu mieux, et maintenant nous allons faire la même chose pour le héros. Ainsi, comme vous pouvez le voir, vous pouvez inclure tapoter. Vous pouvez inclure le redimensionnement réactif. Mais si vous utilisez simplement le redimensionnement responsive, vous pouvez voir comment cela fonctionne, de sorte que vous pouvez cliquer et déplacer et vous pouvez voir qu'il est vraiment biaisant tous ces différents éléments. Donc, ce que j'aime vraiment faire, c'est simplement sauter à l'intérieur et déplacer le texte ici. Déplacez ces deux boutons ici, et fondamentalement je vais maintenant les adapter en taille. Donc, je vais cliquer sur l'un de ces boutons et simplement le déplacer ici. Mais je peux inclure le redimensionnement responsive pour cela, donc je pourrais simplement déplacer ici. Utilisez ce bouton et déplacez-le ici aussi. Mais si vous n'aimez pas comment ils ressemblent et je ne le fais vraiment pas parce que nous sommes toujours à la taille du bureau , vous pouvez simplement augmenter la taille de ce bouton et. Et peut-être que nous pouvons inclure le rembourrage et ce qui a augmenté la taille. Utilisons le même rembourrage, mais pour une raison quelconque, cela ne fonctionne pas. Donc, nous allons sauter à l'intérieur du manuel et maintenant c'est positionné à ici. Ça ne bouge pas parce que nous avons ces liens de rembourrage, donc je vais le positionner ici. Et puis je vais utiliser le texte à l'intérieur, placer au milieu de notre bouton, et maintenant je vais faire la même chose pour ça. En savoir plus sur les boutons. Vous pouvez voir qu'il est vraiment têtu de temps en temps, donc vous devez vraiment travailler avec. Et dans ce cas, comme je l'ai dit, je crée un bouton Toby trois colonnes Blanc parce qu'il peut vraiment bien adepte à la taille. Donc je vais sauter à l'intérieur, cliquer sur la personne, et je vais positionner sa position ici. Disons peut-être même un peu plus bas, parce que je veux que les utilisateurs voient ce texte. Et puis je vais cliquer sur mon illustration, et je vais la positionner ici jusqu'à ce qu'elle rencontre le bord droit de notre grille. Maintenant, je vais adapter tous ces différents éléments chanson aller orteil position ici, positionner ceci ici et enfin je vais sauter à l'intérieur de notre masque et cliquer sur le masque, et je vais simplement l'amener ici et entendre o B G juste apporter à ici. Et comme vous pouvez le voir, nous avons maintenant adapté le look and feel off sur les sites de jours, et je vais simplement faire une chose de plus. Sélectionnez les boutons de démonstration de texte et d'autres boutons et appuyez simplement sur le contrôle G pour les regrouper. Maintenez ma touche de commande. Cliquez sur un héros BG, et il suffit de cliquer ici pour vous assurer qu'il est au centre verticalement. Et c'est dans ce cas que vous pouvez obtenir un groupe et ensuite simplement nous pouvons vouloir avec certains de ces autres éléments. Donc, pour les logos, nous pouvons les positionner ici et ensuite simplement les redimensionner de manière responsable pour les entendre. Ensuite, nous pouvons déplacer ceci sur nous illustration et ce que je vais faire pour cela. Je vais utiliser parce que nous avons 12 colonnes. Je vais utiliser six pour l'illustration sur six pour le texte. Il y a donc des adaptations qui doivent être faites. Vous pouvez utiliser la taille responsable si vous le souhaitez. Donc deux pour six, il a l'extrémité des orteils à cette voiture, donc vous pouvez simplement le faire. Mais si vous n'aimez pas à quoi il ressemble dans un vraiment ne pas, vous pouvez désactiver la touche de changement de taille de support réactive et dans l'un des coins simplement le redimensionner , même une fuite comme ceci. Ensuite, je vais positionner le texte et le bouton ici. Donc 246 colonnes et je vais étendre la taille de mon fond Toby trois. Comme ça, et je vais simplement cliquer et positionner le texte au centre. Et maintenant ce que je dois faire est simplement très positionner certains de ces textes afin que vous puissiez voir la taille responsable. Il est activé pour le texte, donc vous pouvez même le faire si vous le souhaitez. Mais il réduit sa taille, comme vous pouvez le voir, et ce n'est pas quelque chose que nous voulons. Ce que nous voulons, c'est que nous devons le faire manuellement afin que vous puissiez doubler l'entrée de frappe intérieure afin que vous puissiez le placer sur une autre ligne et simplement créer trois au lieu de deux lignes. Et puis vous pouvez simplement déplacer le séparateur vers le bas comme ceci 20 pixels, et ensuite nous pouvons faire la même chose pour ces piles. Donc, nous allons positionner en 20 pixels, et ensuite peut-être que nous pouvons utiliser 40 pixels pour celui-ci comme celui-ci, et ensuite je vais simplement m'adapter au texte un peu plus pour qu'il corresponde à notre grand. Donc, il va simplement montrer la fonction de redimensionnement responsive de cette conception. Et enfin, ce que je vais faire, ils utilisent simplement dans le bouton texte et démo. Je vais le positionner ici, et je vais choisir une illustration, placer au milieu de notre texte, quelqu'un de notre propre humilité. Et puis je vais m'assurer que nous avons le même espacement entre notre héros, notre logo solide utiliser 18 cette coque. Donc, déplacez 12345678 et affaiblir à la même chose pour cette section. Donc 80 comme vous pouvez le voir. Et maintenant, laissez-moi rapidement déplacer ceci vers le centre et utiliser le même espacement. Donc 18 ce cas, comme ça et ensuite vous pouvez faire la même chose pour cette section comme celle-ci. Assurez-vous simplement qu'il est à 80 et maintenant ils ont à faire est simplement d'adapter ces sections à notre grand. Donc, vous pouvez voir que nous avons quatre éléments différents et nous avons 12 colonnes dans notre grand, donc chacun d'eux va prendre trois colonnes, donc vous devez les adapter Donc je cuisine sur livraison rapide et va le positionner ici. Révision illimitée. Je vais le positionner ici et enfin, des solutions personnalisées. Je vais le positionner ici parce que chacun d'entre eux va prendre trois colonnes, comme vous pouvez le voir, et il va orteil un robinet auto-responsable du manager. Nous devons adapter notre texte pour être en doute un peu comme ça, et un peu plus vite. Ils n'ont jamais laissé juste une ligne de texte en dessous d'un seul mot. Assurez-vous qu'ils sont au moins deux mots sur votre ligne afin qu'il soit agréable et propre. Donc, vous pouvez voir que cela va nous prendre le plus de temps. Qu' est-ce qui avait l'habitude de pointer à la fin ? Parce que c'est la partie la plus ennuyeuse de ce processus de conception responsive est d'adapter ce texte maintenant, comme ils l'ont dit et vous l'ont montré. Vous pouvez le faire avec un redimensionnement réactif, mais ce qu'il fait est de réduire la taille de votre texte, même si c'est quelque chose que vous ne voulez pas. Par exemple, pour ce soupire particulier de votre conception. Donc, vous allez voir le texte plus petit de temps en temps, ou vous pouvez avoir exactement les mêmes tailles Texas pour toutes vos différentes tailles de site Web. Mais vous devez faire besoin de cette façon si c'est quelque chose que vous voulez afin que vous puissiez les redimensionner de manière responsable pour toutes ces tailles. Donc vous pouvez voir que nous en avons 80 partout, donc tout a l'air beau et propre. Donc, par exemple, nous pouvons même le placer à 100 parce que je pense que c'était l'idée ici. Donc, ce que je vais faire est simplement déplacer tout vers le bas 20 pixels de plus. Alors allons des clients jusqu'au bout. Donc 20 20. Donc, comme ce 20 20 plus juste pour que nous ayons un peu plus d'espace de lecture. Le prix. C' est à 100, c'est tout. Donc pour celle-là, mais vous allez faire, c'est qu'on va sauter à l'intérieur, a dit Aziz. Plusieurs fois, vous pouvez utiliser des récits responsive quoi ? Celle-ci, mais je ne vais pas le faire. C' est très simple pour moi de simplement réorganiser certains de ces différents éléments, donc je vais sauter à l'intérieur, positionner ceci juste ici et pour cela. Je vais utiliser le redimensionnement responsive, donc chacun d'entre eux va s'adapter à quatre colonnes afin que vous puissiez cliquer ici. Positionnez ça jusqu'à ici. Ensuite, allez à pro, faites-le de la même manière. Donc 1234 comme vous pouvez le voir et enfin pour l'élite, nous allons utiliser exactement la même fin que vous pouvez voir. Il fonctionne bien avec réactif, précis, sorte qu'un envoi plusieurs fois taille responsable fonctionne vraiment bien avec certains de ces éléments. Mais pour certains d'entre eux et dans de nombreux cas, la majorité d'entre eux, vous devez tout faire vous-même pour tout. Orteil, regardez bien dans le remorquage. Travaillez correctement plus tard dans le devis. Donc, pour celui-ci, vous pouvez réorganiser leurs certains de ces éléments et vous pouvez montrer aux développeurs comment vous voulez qu'il ressemble à un état. Développer cette conception qui les utiliserons quelque chose comme ça. Et passons à la section suivante, qui est les témoignages. Alors assurez-vous qu'ils sont à 100 ans. Donc 123456789 cents, un 100 pixels. Et ce qu'on va faire pour celle-là, c'est qu'on va aller aux pieds. Retirez le témoignage numéro trois. Donc je vais juste le cacher. Je vais positionner le numéro un et le numéro deux au centre comme ça et je vais déplacer cette flèche gauche deux sera alignée comme donc je vais faire la même chose pour la flèche droite parce que maintenant ils vont. Ils vont s'adapter à l'intérieur hors sont super. Donc, dans la majorité des cas, vous allez voir certains de ces bugs avec adobe egg D, mais juste ignorez-les et contournez eux. Donc, dans la majorité des cas, vous devrez choisir certaines de ces choses les vôtres au lieu de vous aider. Mais que pouvez-vous faire ? Vous devez simplement vous frayer un chemin. Laisse-moi positionner ça ici et pour le bouton. Laissez-moi le déplacer séparément, et je vais le faire en trois colonnes blanches, comme nous l'avons fait avec tous ces autres boutons en haut. Assurez-vous qu'il est au centre comme celui-ci et ce que je vais faire à côté de simplement réorganiser certaines de ces formes. Comme je le veux. Donc peut-être une position ici. Peut-être que je peux même réduire sa taille position américaine. C' est pour être là. Je vais sauter à l'intérieur de la mosquée. Je vais le déplacer ici. Je vais le déplacer ici. Et enfin, je vais déplacer cette tarification Bijie Toby ici encore une fois, si vous voulez voir cette conception, vous pouvez le télécharger à partir de fichiers de projet et vous pouvez jouer avec elle aussi longtemps asi que vous voulez. Et comme je l'ai dit, vous pouvez l'utiliser pour des produits personnels et commerciaux. C' est vraiment à toi de décider. Mais je vous encourage qu'une fois que vous avez commencé avec cela que vous créez vos propres designs pour celui-ci, par exemple, je vais simplement réduire la taille de l'image parce que tout va bien s'adapter ici. Donc je vais utiliser trois d'entre eux, et quand je vais faire est simplement adapté le texte à cette taille particulière pour que vous puissiez voir votre offre, c'est ce que je disais. Deux mots en bas. Et enfin, je vais adapter l'avatar et le nom. Assurez-vous qu'il y a 20 pixels est que vous pouvez voir la même taille et comme ces autres, et je peux le déplacer orteil ici. Je peux faire la même image de soi. Assurez-vous qu'il est à quatre heures comme ça, et assurez-vous d'adapter le texte au besoin. Et juste pour que vous sachiez, cela va se produire Life in Cote une fois que vous commencerez le design responsive. Mais c'est juste pour votre référence et la référence du développeur sur la façon dont vous allez créer ceci. Donc, fondamentalement, nous avons presque fini avec cette taille, et je vais simplement double-cliquer à l'intérieur de cette position à l'intérieur et je vais jouer avec un texte un peu plus. Donc, comme vous pouvez le voir maintenant, nous n'avons qu'un seul texte ici. Mais parce que j'ai dit que ça n'a pas l'air si joli, je vais simplement passer à eux en bas. Je vais adapter son Darryl en position 20 pixels vers le bas et fondamentalement c'est tout pour le bloc. La seule chose qui reste est que ce bouton va être de 40 pixels vers le bas. Donc 1234 Alors maintenant, réparons le bouton. Je vais faire en trois colonnes, donc fondamentalement la même chose que nous l'avons fait avec toutes ces autres colonnes. Donc je vais positionner le texte au centre comme ça. Mais tu peux le faire. Vous pouvez simplement le sélectionner en position comme ceci. Et enfin, je vais le déplacer au centre comme ça. Assurez-vous que c'est 40 pièces comme ça . Et enfin quoi ? Je vais le faire simplement déplacer le pied de page 100 pixels vers le bas. Donc c'est fondamentalement la même distance qu'avec tous ces autres. Donc fondamentalement, décalage. 123456789 cent. Et en gros, c'est 100 pixels vers le bas. Ce que vous pouvez faire pour le pied de page est fondamentalement le déplacer comme ça, et il va à une taille de responsabilité. Mais comme vous pouvez le voir, le texte ne fonctionne vraiment pas. Dans ce cas, nous devons utiliser ces contraintes. Mais pour gagner un peu plus de temps, ce que je vais faire est utilisé cette approche manuelle. Donc, fondamentalement, allez le faire, sélectionnez tout et simplement maintenir ma touche Maj et les déplacer au centre. Maintenant, je vais simplement cliquer sur mon sont partie juste ici, et je vais étendre ce bord inférieur de mon sont partie à autour ici et il fondamentalement pour cette taille de notre conception. Alors passons rapidement à travers une fois de plus. Comme vous pouvez le voir, nous devons nous adapter. Cette illustration un peu, donc il semble un peu différent. Et ce que vous pouvez faire ici est réduit la taille de ces boutons. Toby à deux colonnes White parce qu'ils sont trop vient ici aussi, ou vous pouvez l'adapter. Toby 3 est blanc, donc c'est vraiment à vous de décider et comment vous allez utiliser cette approche. Mais dans ce cas, j'ai utilisé trois vient parce que je pense qu'il ya beaucoup plus lisible sur le plus petit écran. Ensuite, nous avons adopté la position du texte, tout pour être au centre. Nous avons adapté ces colonnes qui ont adapté la tarification et adapté ces forfaits tarifaires en conséquence . Pour les témoignages, nous n'en avons plus eu trois. Maintenant, nous avons deux témoignages, et pour ces formes de fond, nous les avons simplement adaptés et les avons positionnés différemment sur la page . Pour le blogueur utilisé exactement la même mise en page. Et enfin, pour le pied de page, tout semble exactement le même. Donc c'est tout pour cette vidéo. Et dans la prochaine vidéo, nous allons passer aux tablettes des appareils moyens et nous allons adapter cela un peu plus, et maintenant nous allons commencer à faire ces différents changements parce que dans celui-ci, nous allons pour positionner les illustrations au-dessus du texte. Donc va sembler un peu différent que dans ces deux, qui sont pour le bureau, donc je vais vous voir là-bas. 13. Créer une conception réactive: Bon, ne commençons pas avec les tablettes des appareils moyens et pour commencer, nous allons le faire. Il suffit de dupliquer. C' est une partie. Je vais sauter ici au contrôle de la chaleur C. Nous sommes ici en bas, puis ST Ng une vitesse avec les précédents. Ainsi, comme vous pouvez le voir, nous avons 12 colonnes mise en page. même chose qu'on fait ici. Mais il est 30 30 30 nuits, donc nous devons le faire aussi. Mais avant, c' est 7 68 dans l'esprit, alors faisons-le d'abord ça. Donc c'est 7 68 Appuyez sur Entrée, orateur. Encore une fois, 30 30 39. Donc, en tournant déjà. Et enfin 30 nuits. Et nous devons en savoir 30 ici aussi bien que vous pouvez le voir. C' est vraiment têtu parfois, mais il faut persuader 39 39 39 ici aussi. 30. Ça m'ennuie vraiment qu'il fasse ça, et je ne sais vraiment pas pourquoi il le fait parce que, comme vous pouvez le voir ici, nous l'avons. Donc 30 30 39. Donc si je le change, vous pouvez voir qu'il y a 39 partout. Tout va bien. Mais si je change ici. Vous pouvez le voir. Ça ne marche pas si bien. Je ne sais vraiment pas pourquoi il continue à faire ça. Je ne sais pas. C' est peut-être que je peux faire sous Pensez ainsi ? Peut-être que je peux le changer ici, alors commençons par 30. Et maintenant, commençons par 39. 39, puis passer à 30. Juste ici. Alors, voilà. 30 30 39. Donc, comme vous pouvez le voir, il est vraiment buggé cet outil et il a vraiment un esprit hors de son propre. Parce qu'une fois de plus, si je clique ici, ouvrez sur les marges. Vous pouvez y voir la même chose ici et 30 partout. Mais si je le change ici, vous pouvez voir combien de problèmes avons-nous ? Témoin. Mais ne nous enlisons pas avec ça. Passons rapidement au suivant. Donc, parce que c'est la tablette, nous ne allons pas voir ces éléments de menu ici. On va aller aux pieds. Avoir une icône de menu incluse à la place. Laisse-moi sauter à l'intérieur. Je vais déplacer ce bijie jamais ici. Je vais déplacer ce bouton ici. Voyons voir et je vais me cacher pour l'instant. tous ces éléments de menu comme ça et ici je vais inclure Menu Icône et je vais inclure un, que j'ai inclus dans l'exemple original que je vous montre. Donc, c'est là. Et laissez-moi rapidement réduire sa taille à attaquer. Non, je vais sauter à l'intérieur de mon bouton et simplement m'assurer qu'il fait trois colonnes de large, comme si Assurez-vous que c'est au centre comme ça, et laissons-le pour l'instant. Je vais déplacer cette icône de menu ici, et ce que nous avons à faire, c'est que nous devons nous assurer que nous avons créé un menu élargi . Donc c'est ce que nous allons créer maintenant. Laisse-moi dupliquer ça jamais BG pour qu'il contrôle D. Et je vais le déplacer en dessous. Donc je vais bouger celui-là comme ça jusqu'à ce qu'il rencontre celui-là. Alors assurez-vous juste que je vais éteindre la taille responsable pour celui-ci parce que je n'en ai vraiment pas besoin, et je ne sais pas pourquoi. C' est beaucoup plus grand. Donc 89 en hauteur, peut-être que nous ne pouvions même pas le rendre plus petit. Disons 60 et ce qu'il nous faut, c'est une ligne, et cette ligne va passer par ici. Donc, il va être des limites bien divisées, qui hors de mes colonnes pour l'instant va bien diviser ce jamais BG et cette beauté inférieure . Nous allons donc utiliser ceci comme une liste déroulante BG, par exemple, et nous allons déplacer tous nos éléments de menu ci-dessous. Donc je vais les sélectionner comme si je rentre chez moi. Un changement peut simplement déplacer que ci-dessous pour être au milieu de notre lâché um Bijie. Et ce que je vais faire est peut-être que je peux dupliquer mon menu déroulant BG réduit la hauteur de l'orteil un et cliquez ici et laissez-moi la frontière est exclue. Permettez-moi d'utiliser cette couleur, par exemple. Oui, comme vous pouvez le voir maintenant, nous avons cette belle ligne de démarcation. Donc, si j'ai sauté en arrière ce que je peux faire ici, il suffit de les commander. Donc, je vais sauter à l'intérieur, sélectionner tous et simplement les aligner vers la droite. Disons et alignés avec notre menu comme voulez comme ça et nous allons aller un par un . Donc services iss premières caractéristiques en contact US, vous pouvez voir que nous avons appelé votre touche de changement de vitesse ou supprimer cela pour l'instant parce qu'une fois de plus, boîte dans un pas b oeufs, les sont présents. Donc, comme vous pouvez le voir, dès qu'ils frappent, déplacez-le, sélectionnez tout. Je ne sais vraiment pas pourquoi il continue à faire ça. Mais même si j'utilise simplement ma flèche, vous pouvez voir qu'elle ne les déplace pas même si l'histoire est sélectionnée. Donc cette boîte me bogue vraiment pas de jeu de mots prévu. Mais que pouvez-vous faire ? Il suffit de passer à autre chose pour que je puisse simplement sélectionner ces deux et les déplacer vers le bas. Je peux simplement cacher ça. Déplacez cela vers le bas et il y a simplement allumer tous ces autres. Donc, ce que nous avons ici est 1234512345 et Block devrait aller de l'avant comme ça. Maintenant, faisons simplement une sélection, et je vais dupliquer cette ligne. Donc, utilisons-nous ceci comme un diviseur, comme ça, et je vais simplement le dupliquer et le déplacer ci-dessous. Ensuite, je vais utiliser 20 pixels parce que c'est ce que nous avons utilisé pour tout. Fondamentalement, Donc décalage 12 Ensuite, je vais utiliser ma ligne de séparation ici, il iss je vais l'aligner avec le fond de mon texte comme ça. Et puis je vais appuyer sur Shift une dent pour m'assurer que c'est 20 pixels vers le bas. Je vais sélectionner tout ça. Assurez-vous qu'ils sont 20 pièces en bas comme ça. Je vais les déplacer comme ça. Je vais étendre ma liste déroulante BG jusqu'ici juste pour que vous puissiez voir ce que je fais. Je vais frapper le contrôle D une fois de plus et simplement déplacé vers le haut la ligne de division 20 pixels. Encore une fois, utilisez le prix que je pourrais utiliser et, euh, répétez génial pour faire cette fonction. Mais je trouve parfois que les méthodes anciennes fonctionnent vraiment bien, Donc, nous allons orteils, passer à autre chose et simplement sélectionner les blogueurs. Vous pouvez voir Adobe X'd fait son truc maintenant parce qu'il me montre la distance de 20 pixels entre tous ces différents éléments, comme vous pouvez le voir ici. Et enfin, nous avons contacté et pour cela, nous n'allons pas utiliser le diviseur, donc déplacer veulent vers le bas, et puis je vais simplement utiliser le menu déroulant BG pour le déplacer près comme si shift 12 Et comme vous pouvez le voir, nous avons notre menu déroulant prêt à aller si vous pensez que ces séparateurs sont trop durs sur vos yeux, sorte que vous pouvez voir clairement les voir comme Donc vous pouvez soit réduire l'opacité afin que vous puissiez tous les sélectionner . Je vais les regrouper le contrôle G, par exemple, à un groupe comme Donc je vais utiliser le blanc là, s'aligne comme ça et vous pouvez abaisser votre ville de paie de tout le dossier. Plus sûr frappe 20 par exemple. Vous pouvez voir à quoi ça ressemble pour 40 ans. Je pense que c'est bien. Et vous pouvez même sélectionner cette couleur si c'est ce que vous voulez, et ensuite vous pouvez les appeler dans cette couleur particulière. Mais utilisons quelque chose comme, je ne sais pas, 80 peut-être 60. Ouais, je pense que 60, c'est bon pour l'instant. Donc, ce que nous allons faire est que nous allons utiliser tous ces éléments de menu, les déplacer et vers le bas donc comme ça et je vais orteil, utiliser les lignes de séparation et déposer BG Group tous et simplement nommé cette liste déroulante parce que je peux maintenant cacher et je peux continuer à travailler sur mon design. Donc, incluons retour sont vraiment aide. Et comme vous pouvez le voir, nous avons 12 colonnes. Comme ici, mais les colonnes sont un peu étroites. Donc, ce que nous pouvons faire pour cela, c'est que je vais simplement déplacer mon illustration vers le bas et déplacer mon texte vers le haut. Et je vais changer ce texte pour être au centre afin que vous puissiez double-cliquer à l'intérieur et cliquer ici pour vous assurer qu'il est au centre et sans déplacer cet espacement ou quoi que ce soit, je peux simplement le positionner ici. À la maison, une touche de changement. 1234 Et puis je vais adapter mes boutons. Donc, ils sont trois colonnes blanches dans ce cas. Donc je vais les déplacer ici. Comme vous pouvez le voir dans nos quatre colonnes White, je n'aime pas ça. Donc, je vais m'assurer qu'ils sont trois colonnes de large comme donc je vais déplacer cela au centre, et je vais utiliser plus de bouton comme ça parce que vous pouvez les laisser pour. Mais vous devez l'adapter une fois de plus. Donc, ils ont travaillé sur la taille mobile par exemple. Laissez-moi les déplacer 40 pixels. Donc 1234 je vais m'assurer qu'ils sont dans un centre comme ça. Et enfin, je vais déplacer mon illustration. 1234 et 1234 une fois de plus juste pour s'assurer que nous avons même espacement. Et maintenant, je vais étendre mon héros BG jusqu'à ce point comme ça et puis déplacer mon illustration en arrière. 1234 Donc, pour m'assurer qu'ils sont au centre, ce que je vais faire est de déplacer l'illustration vers la droite. Comme si je peux déplacer ma personne comme et que si c'est quelque chose que tu veux, laissons-le ici, par exemple. Et puis je peux déplacer mon illustration une fois contre son quart de travail. 1234 Maintenant, ça va être notre fond. Alignez notre image de héros. Je vais le déplacer en arrière et enfin déplacer mon illustration. 1234 Donc c'est vraiment jouer avec tous ces différents éléments et les ajuster comme vous le feriez. Et puis je vais rapidement cacher mon grand parce que je vais jouer avec ces éléments. Donc je vais sauter dans les formes et dans notre mosquée, et je vais étendre ma mosquée jusqu'ici, et ensuite je vais la rapprocher un peu plus. Et puis je vais simplement enlever ces formes autour, comme je l'ai fait précédemment. Donc, s'il est un peu difficile de les sélectionner, alors vous pouvez maintenir votre ancienne clé et vous pouvez rapidement sauter à l'intérieur et sélectionner directement. Donc, disons que c'est l'ordre que j'aime, et je peux simplement le laisser comme ça, et je peux ensuite passer à la partie suivante de mon design, qui sont les logos et les logos. Si vous vous en souvenez, nous avons un redimensionnement réactif. Mais si je rentre une touche majuscule, laissez-moi rapidement allumer mon grand afin que je puisse les voir s'enclencher en position. Donc, si je maintiens la touche Maj, ils vont diminuer uniformément comme ça. Mais vous pouvez même les étendre comme ça quand vous arrivez à un certain point. Donc, avec cela étant fait, laissez-moi les déplacer. Alors, décalez 12345678 Voyons voir, et puis je pourrai continuer avec notre illustration. Donc, avec notre illustration, je peux déplacer mon illustration ici, et je vais la mettre à l'échelle jusqu'à ce point, par exemple, parce que je voulais vraiment être belle et grande, et je voulais la positionner dans le centre comme ça. Ensuite, je vais déplacer le texte et la démo en bas juste ici, et je vais cacher toutes ces sections parce que ça va être beaucoup plus facile pour moi de travailler là-dessus. Suivant. Je vais appeler ma clé. 12342 Avec 40 pixels vers le bas, je vais l'aligner, qui sont super. Et enfin, ce que je vais faire parce que ce sera beaucoup plus facile pour moi d'utiliser le redimensionnement responsive c'est que je vais convertir ceci à partir du texte de point, qui est ici juste en texte de zone. Donc quand je clique juste là et que je peux l'étendre, Toby, juste ici, je condamne le jeu avec. Donc, par exemple, je veux déplacer cela. Comme vous pouvez le voir, il s'adapte à mon paragraphe comme si je peux le laisser comme ça, ou je peux même sauter à l'intérieur et rapprocher cela un peu plus près. Comme ça Parce que nous n'avons que deux lignes de texte maintenant pour les boutons de démonstration. Comme avec les boutons précédents. Je vais le réduire, Toby. Trois colonnes blanches pour nous assurer que nous avons le même espacement, comme ça et pour notre titre. Vous pouvez même convertir que le texte de la zone si vous voulez, mais je vais le laisser comme c'est parce qu'il n'a vraiment pas beaucoup dedans. Donc je vais le positionner comme ça. Et puis je vais sélectionner mon diviseur, mon paragraphe, mon paragraphe, et m'assurer qu'ils sont en 20 morceaux comme ça. Assurez-vous que le fond est à 40 comme ça et assurez-vous que cela est aligné pour créer C'est donc c'est fondamentalement tout pour cette section. Et maintenant, déplacez-le rapidement vers le bas. Assurez-vous que nous sommes à 80 ans. Comme vous pouvez le voir, nous sommes tellement fondamentalement que vous gardez le même look que nous avons ici. Mais maintenant l'illustration et le texte s'adaptent à l'esprit que nous avons maintenant une chose de plus sur le texte. Vous pouvez convertir ce texte à partir du texte de zone de pointe X pour tous, mais j'aime vraiment les convertir un peu plus tard, juste pour que je puisse voir où il doit être converti et s'il doit être converti du tout . Par exemple, pour ces sections, il est vraiment important que nous connaissions secrètes, mais, par exemple, pour la dissection. Peut-être que ce n'est pas si crucial, mais voyons une fois que nous commencerons à le concevoir. Donc, utilisons maintenant cette section, déplacez-la au centre comme ça, assurez-vous que c'est à 80 comme ça, et, comme vous pouvez le voir dans ce titre, s'intègre bien. Mais ce texte n'est pas si nous allons rapidement sauter en vue. Je vais convertir le texte de la zone des orteils, et je vais simplement étendre cela un peu vers le bas. Je vais déplacer ceci ici pour accrocher à la grille et déplacer ceci ici pour capturer le plus grand puits. Mais comme vous pouvez le voir maintenant, a juste les mots de ce client sur cette seule ligne. Alors quoi ? Je vais le faire. Il suffit de déplacer ça comme ça, et puis c'est terminé. Donc, comme vous pouvez le voir, c'est vraiment facile. Et maintenant, si je commence à les déplacer pour une raison quelconque, ça va s'adapter, et ça va pousser tous ces mots vers le bas. Donc, c'est essentiellement comme ça que vous travaillez avec le texte de zone. Ensuite, passons aux fonctionnalités, et je vais sélectionner ces fonctionnalités et les positionner pour les entendre. Assurez-vous qu'il y a 80 comme ça et ce que je vais faire, c'est simplement les diviser six par six . Donc ces deux-là vont prendre six colonnes chacune. Le magasin est allé faire la même chose, donc nous allons sauter à l'intérieur, et je vais déplacer des révisions illimitées. Et je vais déplacer des solutions personnalisées ci-dessous comme ceci jusqu'à ce qu'elles s'enclenchent et nous allons compter six colonnes pour celle-ci. Alors 1234568 Celui-ci. Laisse-moi vérifier une fois de plus. 123456 c'est et utilisez des solutions personnalisées si identiques ici et assurez-vous qu'ils sont à 40 séparés . Mais avant de le faire, adaptons-le rapidement pour que tu puisses tous les ouvrir. Et vous pouvez, par exemple, cliquer sur celui-ci converti clic sur celui-ci. Convertissez-le, faites la même chose pour celui-ci et faites enfin la même chose pour celui-ci. Alors maintenant, je peux simplement les étendre pour entendre. Je peux faire la même chose pour celle-là. Assurez-vous que c'est à six heures. Assurez-vous que c'est aussi six et la même chose pour celui-ci. Donc, je vais commencer par le début de la 1ère 1 Je vais le déplacer ici juste pour que je puisse voir ce qui correspond et ce qui n'aime pas ça comme ça. Il doit donc y avoir trois lignes. Donc, comme nous l'avons fait avec les précédents, passons à ici. Ceci est terminé, et faisons la même chose pour celui-ci. Il doit donc s'agir d'une alliance à trois. Si ce peut être trois lignes comme celle-ci,par exemple, cela par exemple, n'a vraiment pas d'importance parce que vous allez les pousser 40 pixels vers le bas du point le plus bas , qui est celui-ci. Donc c'est bon saut à l'intérieur et injuste ça donc ça ne gâche pas notre alignement. Donc maintenant on peut les mettre en place comme si le changement 1234 et ce que je vais faire est en fait déplacer ça. Assurez-vous qu'il est aligné avec Margaret comme si tous ces éléments sont alignés, sauf pour celui-ci, comme ça. Donc tout est bon à partir maintenant. Non, je dois ajuster mon impôt juste un peu jusqu'à ce qu'il s'accroche au grain et fasse la même chose pour celui-ci . Vous allez remarquer les problèmes d'alignement de temps en temps, mais vous devez simplement travailler avec eux parce qu'il n'y a pas d'autre solution. N' oubliez pas que vous êtes en train de concevoir à ce stade que vous ne développez pas. Donc tout est en train de tester fondamentalement. Et ce test est vraiment important parce que lorsque vous faites cela, vous faites essentiellement les tests pour les développeurs. Donc, vous vous assurez que les choses fonctionnent comme elles le devraient avant qu'elles ne passent en développement, car il est vraiment beaucoup plus facile et moins cher pour vous de tester tous ces problèmes. Ensuite, pour les développeurs, parce que leur temps est plus précieux que le vôtre. Un peu plus tard, une fois que le projet démarre et que tout est codé parce qu'ils doivent corriger des bogues , alors ils doivent s'assurer que tout fonctionne correctement comme il se doit, surtout parce que c'est un site Web. Il doit fonctionner sur différents navigateurs son propre. Alors assurez-vous juste que lorsque vous concevez, assurez-vous que vous vérifiez toutes ces erreurs parce que cela va être beaucoup plus facile pour vous et ensuite littéral pour le développeur de tout vérifier. Passons donc rapidement à notre tarification. Je vais m'assurer qu'il est à 80 comme il est juste ici et pour son peu cacher rapidement tous ces éléments ci-dessous, comme ça pour cela. Je vais sélectionner mon texte, assurer qu'il est au centre. On n'a pas du tout affaire avec les orteils. Et pour ça, ce qu'on va faire, c'est qu'on va aller aux pieds, en avoir deux d'affilée, et ensuite on va avoir la prochaine en bas. Alors quoi ? Spécialement adapté ? Donc, parce que la taille responsable est activée, vous pouvez voir qu'il garde la distance entre les marges gauche et droite, et il garde tout comme il se doit. Donc pour cinq, ça devrait être à six, comme ça, et ça devrait être à six, genre, alors assurez-vous de rendre compte. Oui, ils le sont, donc ils sont bons à y aller, et vous pouvez positionner ça au centre, mais avant de le faire, assurez-vous qu'il est à six ans aussi. Ensuite, positionnez-le au centre et vous pouvez étendre cela. Alors faisons vite que 12341234 mois Encore une fois, je vais sélectionner mon arrière-plan et simplement l'aligner avec le spot. Je n'aimerai pas. Alors déplace-le vers le haut. 1234 Et je vais tout simplement mourir. Ajustez ma forme. Alors je vais utiliser ma mosquée. Simplement étendu tout le chemin jusqu'ici, et puis je peux utiliser cette forme. Je peux jouer avec ça qui peut le positionner vers le bas. Par exemple. Je peux utiliser celui-là. Positionnez-le vers le haut, retour en position pour encercler ici. Je peux peut-être déplacer ce rectangle ici. Disons quelque chose comme ça. Peut-être que je pourrais baisser un peu et enfin je peux déplacer les prix. BG inverse de sorte qu'il s'aligne et finalement déplacer ma mosquée afin qu'elle s'aligne aussi bien. Donc, c'est fondamentalement tout, pour cette section est que vous pouvez voir certaines sections sont vraiment simples, et certaines sections peuvent être un peu difficiles à travailler avec, donc c'est rapidement cacher les prix afin que je puisse déplacer mon témoignage vers le bas. Je vais le positionner au centre de la même façon, alors assurez-vous qu'il est à 80 si ça ne se montre pas comme ce n'est pas le cas pour le moment. Shift 12345678 Et pour celui-ci, parce que nous sommes une tablette ce moment, je vais juste avoir un témoignage et je vais avoir mes flèches sur le bord. Donc je vais cacher mon témoignage que je vais placer ça au centre comme ça, et je vais simplement utiliser mes flèches comme vous pouvez le voir. Maj Key à nouveau ne fonctionne pas de manière évidente le je ne sais vraiment pas pourquoi il continue à montrer ces bogues, et j'ai vu des rapports dans la voix de l'utilisateur sur leur site Web où vous pouvez laisser votre opinion sur le logiciel et beaucoup de gens se sont plaints à propos de cette question. Mais rien n'a été fait récemment, alors passons rapidement à 80 et ce que vous pouvez faire est simplement positionner cela au centre. Mais parce qu'on n'a pas cette mosquée ici, j'ai trouvé qu'il était beaucoup plus facile de le faire un par un. Et parce que nous sommes à court d'espace, vous pouvez simplement étendre votre port tout le long, et ce que je vais faire avec celui-ci est simplement sauter à l'intérieur, déplacer mon texte au centre comme ça et m'assurer que ma bouteille est trois colonnes blanches comme ça. Vous pouvez également accélérer cela si vous le souhaitez. Je ne l'ai pas fait pour ce projet, mais je le fais habituellement. Vous pouvez simplement les faire en tant que composant, et vous pouvez inclure un composant sur un bouton de sorte que vous pouvez simplement faire glisser et déposer un composant à partir d'ici afin que vous puissiez sélectionner un bouton. Laisse-moi m'assurer qu'il est sélectionné. Vous pouvez appuyer sur le contrôle et la commande. Kate va le transformer en un composant, puis vous pouvez simplement sélectionner ce composant à partir d'ici. Faites glisser et la drogue le déposer en place, puis vous pouvez voir quelle position il à partir d'ici. Si c'est quelque chose que vous voulez, je ne le veux pas pour le moment parce que vous pouvez également frapper sur le composant de groupe et appeler cela plus BTM. Je ne voulais pas le faire parce que nous jouons toujours avec différentes tailles. Donc, comme vous l'avez vu ici, nous avons trois composants ici pour les composants et là nous devons composer deux colonnes et quelqu'un, donc c'est pourquoi je ne l'ai pas encore fait, parce que nous jouons avec différentes tailles. Donc c'est juste que je vais déplacer ce cercle pour entendre, par exemple, déplacer ceci ici. Je vais sélectionner cette forme avec ici. Je vais voir où ma mosquée va la déplacer vers l'intérieur jusqu'à ce qu'elle se retrouve au centre. Peut-être que je peux même positionner ça pour être ici, et ça joue vraiment avec ces différents éléments. Voyez ce qui fonctionne, ce qui ne fonctionne pas et essentiellement travailler autour d'elle. Non pour le bloc. On va juste en aider un, donc il bouge rapidement son 18e. Je suis allé sauter à l'intérieur et pour le journal tu ne peux pas le laisser à Voyons comment ça ressemble. Donc, sa position à 62456 Donc, vous pouvez même l'étendre d'ici. Mais comme vous pouvez le voir, il continue de bouger ce texte, et je ne veux pas le faire. Donc j'aime vraiment tout faire moi-même. Je vais sauter à l'intérieur et simplement le déplacer. Une colonne pour entendre tout le reste reste le même et pour le poste à nous allons cacher le post arbre deux. Nous allons faire la même chose, donc juste sauter à l'intérieur de l'étendue, cette image, c'est fondamentalement tout. Vous pouvez jouer avec ce texte un peu plus, mais comme vous pouvez le voir, peut-être cette remarque que vous allez adapter. Mais je vais juste aller aux pieds. Croyez-le. En l'état, tout ce que je vais faire est simplement déplacer ce voir tout d'être trois colonnes de large pour correspondre à nos autres boutons comme ça et je voudrais simplement se positionner pour être au centre, qui sont du texte comme ça et un bouton comme ça. C' est fondamentalement une dernière chose qu'il nous reste à créer, c'est Footer. Et comme je l'ai dit, vous pouvez voir la position qu'il ressemble, donc assurez-vous qu'il est à 80 comme ça et vous condensez simplement ajuster à gauche et à droite et déplacer cela vers l'intérieur, et c'est fondamentalement tout. Tu en as fini avec le truc plus complet d'Onley qui nous reste. Faire maintenant, c'est simplement déplacer ça comme, donc je vais le déplacer. Werth comme ça et nos tablettes d'appareils moyens est prêt à partir. Donc, si je passe vite à travers, ce que nous avons fait c'est qu'on l'a adapté et, comme vous pouvez le voir, doit bouger un peu. Et oui, ce bouton est trois colonnes de lumière. Ce que nous avons fait, c'est que nous avons créé ce menu et un menu déroulant. Donc, si je l'active ou la désactive rapidement, vous pouvez voir que maintenant nous avons dans le menu déroulant. Vous pouvez le déplacer si vous le souhaitez, vous pouvez le déplacer vers la gauche. Mais j'ai trouvé et les utilisateurs ont trouvé que parce que votre doigt est juste ici, Donc quand vous appuyez dessus, il va être beaucoup plus facile de simplement glisser votre doigt ici, puis de taper ici et puis étirer votre doigt orteil cette zone juste ici . Donc c'est beaucoup plus facile. Pas simple et beaucoup. Il est beaucoup plus logique d'avoir tous ces éléments de menu ici parce que, comme je l'ai dit, votre pouce est juste ici. Vous appuyez sur cette icône, ouvrez ce menu déroulant et accédez simplement à toutes ces fonctionnalités ci-dessous. Ce que nous avons fait 10, c'est tout simplement chaque commande. Certains de ces éléments ont donc supprimé l'illustration ci-dessous. Nous avons déplacé le texte vers le haut. On a fait le contraire ici. Nous avons réduit la taille de ces logos. Ensuite, nous avons positionné ces deux ressemblent donc donc au lieu de quatre dans une rangée, Maintenant, nous avons deux dans une rangée et deux lignes, fondamentalement pour le prix il maintenant un peu plus large pour tenir dans ces colonnes. Et maintenant, nous avons deux et un ci-dessous, et pour les témoignages, nous n'en avons que deux. Au lieu de cela, nous voulons seulement au lieu de deux. Et enfin, pour le bloc post, nous en avons deux au lieu de libre. Donc c'est fondamentalement tout pour celui-là. Dans la vidéo suivante, nous allons concevoir des tablettes de petits appareils, donc il va être fondamentalement le même. Mais ça va être encore plus petit que celui-ci, et je te verrai dans cette vidéo. 14. Créer une conception réactive: Continuons maintenant avec les tablettes de petits appareils et je vais orteil frappé contrôle de dupliquer celui-ci, et je vais le positionner ici. Je vais double-cliquer ici. Toucher le contrôle, semble-t-il. Ne pleurons pas ici, prenez le contrôle et je vais vérifier la taille. C' est 600. Je vais faire la même taille ici comme si présentateur, et regardons le grand ici. Donc c'est huit colonnes cette fois, alors changeons d'abord ça. Je pense que oui et 30 37 47. Essayons donc d'adapter ce 30 37 enfin 47 ici. Donc, comme vous pouvez le voir, ça nous amène toujours le même problème. Mais cette fois, nous avons réussi à le réparer facilement. Donc 30 37 47 8 Colonnes 30 37 47. Donc, c'est essentiellement du combat. Comme vous pouvez le voir, parfois vous allez avoir ces problèmes, mais parfois cela va très bien fonctionner. Alors passons section par section, et je vais utiliser ce jamais BG. Je vais le déplacer ici. Je vais sélectionner mon bouton de démonstration et l'icône de menu. Je vais les positionner ici et pour celle-là. Ne l'avons pas à trois colonnes. Alors laissez-moi rapidement s'adapter comme ça parce que nous voulions adapter nos colonnes facilement. Maintenant, parce que nous avons une goutte là-bas, nous devons aussi l'adapter. Donc tout ce que je veux faire ici, c'est déplacer vers le bas juste ici. Assurez-vous que tous mes articles seront alignés avec notre grille afin que vous puissiez sélectionner tous vos articles . Déplacez-les comme ça Et enfin, vous pouvez utiliser des lignes de séparation et dérouler BG et simplement le déplacer ici. Ensuite, nous allons passer à la section Tohira. Mais avant que je le fasse, laissez-moi rapidement cacher leur liste déroulante. Je vais passer à ma section de héros. Je vais utiliser mon héros BG et simplement le déplacer comme ça. Ensuite, je vais aller dans les formes, utiliser mon masque et simplement le déplacer dans des mots comme ça et je vais maintenant me concentrer sur le texte ainsi que sur l'illustration. Donc, pour le texte, nous devons apporter quelques changements. Donc, nous allons d'abord convertir ce texte de zone d'orteil et vous pouvez courtiser cela en texte de zone aussi bien si vous le voulez, mais je ne vais pas le faire. Je vais simplement placer ceci ci-dessous. Je vais bouger ça et enfin bouger ça comme ça. Donc, comme je l'ai dit, ne mettez jamais un mot pour que vous puissiez jouer avec l'ordre de vos mots afin que vous puissiez faire quelque chose comme ça. Donc, si vous pensez que ça va mieux que vous pouvez le faire enfin, je vais simplement adapter ce texte à mon gripped comme Donc je vais orteil, étendre leur propre. Et je vais ramener ça sur une ligne, comme si je vais passer de l'engagement des sites web, des abdos à l'image de marque. Et je vais mettre ça à la dernière ligne comme ça parce que je pense juste que ça donne l'air beaucoup plus agréable à l'oeil avec l'ici. Et enfin, nous allons nous occuper de nos boutons. Donc je vais les positionner jusqu'ici. 1234 Et une fois de plus, nous allons les rendre trois colonnes claires, donc je vais sélectionner celle-ci. Assurez-vous qu'il est trois, comme celui-ci pour vous assurer qu'il est à trois aussi bien texte positionné au centre comme alors assurez-vous que cela est au centre. Si vous ne pouvez pas le trouver, sélectionnez simplement les deux et cliquez ici, puis ici pour vous assurer qu'il est au centre. Comme ça. Positionnez ces deux-là aussi au centre. Et maintenant, traitons de notre illustration. Donc, je vais positionner notre illustration ici, assurez-vous que la taille réactive est éteinte et assurez-vous simplement que les orteils le réduisent un peu . Donc je vais avoir 40 pixels ici, puis décaler 1234 Et je vais simplement sélectionner ma beauté et la déplacer jusqu'à ce qu'elle corresponde à notre illustration. Changement suivant 12 Comme vous pouvez le voir, cela ne fonctionne vraiment pas parfois. Donc, vous devez le forcer fondamentalement. Mais vous pouvez simplement le déplacer tout en maintenant la touche Maj et va vous sélectionner 40 pixels à partir d' ici. Donc, il ne reste qu'à déplacer ces formes. Comme vous pouvez le voir, le vraiment faire fière allure. Mais comme vous pouvez le voir, vous devez les adapter tout le temps parce que pour que tout fonctionne comme il doit, vous devez vous assurer qu'ils sont différentes tailles qu'ils sont positionnés correctement. Vous devez réduire certains d'entre eux. Vous devez les positionner différemment. Mais comme vous pouvez le voir, c'est amusant de concevoir ce truc. Mais quand il s'agit de choses en quelque sorte de repositionnement, vous avez vraiment beaucoup de travail à faire. Passons maintenant à nos logos, et je vais tenir ma touche Maj et repositionner mes logos un peu mieux, comme ça, assurez-vous qu'ils sont à 80 par exemple. Alors positionnons cette ligne de remorquage correctement comme ça, et je suis allé à la maison une touche de changement de vitesse. 12345678 Je vais faire la même chose pour mon illustration. Assurez-vous que c'est à 80 ans. Pour une raison quelconque, c'est un 78 donc je vais simplement le déplacer vers les pixels vers le bas comme ça. Donc, quand tu le bouges, ça va montrer 80. Donc, ce que je vais faire maintenant est simplement utiliser mon illustration, positionnez-le orteil ici, assurez-vous qu'il correspond à notre grand changement d'appel simple. Ensuite, je vais utiliser mon texte et le positionner jusqu'à ce qu'il s'aligne et jusqu'à ce qu'il s'aligne avec notre grand sur la gauche ainsi que le décalage 1234 et je vais aller aux pieds. Positionnez simplement mon bouton jusqu'à ce que je traite cela, donc je dois déplacer ce texte un peu vers le bas. Donc, dans l'industrie, utilisons-le comme si je vais utiliser mon diviseur et simplement si cela me permet, je vais me cacher. Ce texte a simplement déplacé ces deux vers le bas I. Alors je vais choisir mon séparateur et la position 20 pixels, puis faire la même chose pour le texte. Donc, dès le début, nous pouvons peut-être déplacer ces livres. Voyons à quoi cela ressemble pour comme vous pouvez le voir, Box s'adapte bien à notre grande et une dernière chose que nous devons faire est simplement positionner ce changement. 1234 et je vais m'assurer que c'est trois colonnes de large. Je vais placer mon texte au centre de cette montagne. Comme vous pouvez le voir, il devient plus rapide et plus rapide. Plus vous faites cela, plus vous allez, plus vous créez de tailles parce que vous définissez fondamentalement cette mise en page. 234568 et que votre contenu adapte rapidement cette mise en page à vos besoins, donc ne bougeons pas rapidement cela et ne bougeons pas cela aussi. Ensuite, je vais l'étendre, et je suis content de ce que ça a l'air. Donc fondamentalement, seule chose qui reste ici est d'adapter ce titre. Alors, allons le déplacer vers le bas et voyons, où pouvons-nous le casser ? Faisons-le ici, puis déplacez simplement mon séparateur à 20. Et cette section est maintenant terminée pour les futures. Allons l'attaquer rapidement. Donc, ils alignent avec notre grille et nous allons les déplacer 80 comme si Parfois, vous allez remarquer ces lignes sans, par exemple, 80 et il va nous montrer, Disons 79.8, parce que hors de ces donc vous ne pouvez pas faire face à cela, malheureusement, Mais vous pouvez simplement passer à l'extrémité la plus proche et simplement l'arrêter là. Donc, comme je l'ai dit, nous avons huit colonnes maintenant, donc 12345678 nous allons en utiliser quatre. Et pour ainsi, passons à quatre. C' est là. Ils sont alignés comme des tirs. Ceux-ci sont allumés, donc fondamentalement il permet maintenant de l'ajuster. Tout ce que vous avez à faire est simplement déplacer ce texte à quatre comme ça et voyons où il se casse juste ici. Faites la même chose pour celui-ci. Pour simplement le déplacer à quatre, voir ce qu'il casse, et vous devez ajuster une partie de cela. Réglons ceci et ça va se montrer à trois heures. Alors traitons-nous maintenant, et nous pouvons passer à ces derniers, alors assurez-vous qu'ils sont à 40 ans. Donc, comme vous pouvez le voir, nous allons avoir quelques problèmes à cause de ces icônes. 1234 39,8. C' est le plus proche que l'on puisse l'obtenir. Et vous vous condensez. Ajustez simplement ce texte pour qu'il corresponde à nos livres comme ça à cause du texte, nous allons le laisser tel qu'il est parce que cette phrase va aller à la fin. Et nous l'avons fait de cette façon sur toutes les tailles, si vous l'avez remarqué. Alors essayons de le mettre en place. Ça va. Donc tu vas le laisser là et enfin t'en occuper ici. Maintenant que cela est terminé, reste plus qu'à déplacer ces 80 cornichons vers le bas afin de déplacer 1234567 pieds. Maintenant, parce que nous sommes sur les tablettes de petite taille, je veux faire quelques changements. Alors traitons d'abord du texte. Je vais le placer au centre comme ça, je vais diviser ça en deux lignes comme ça . Je vais utiliser mon séparateur et mon texte a été déplacé dans 20 vers le bas. Et parce que ce texte n'est pas un texte de zone, traitons-le maintenant je vais le positionner ici. Je vais positionner ça ici. Ensuite, je vais l'étendre et parce que je ne peux pas le voir, je vais cacher ces informations de prix, et je vais m'en occuper maintenant. Donc, ces paquets et pour répondre à vos besoins va aller à la bouteille. Faisons vite en sorte que c'est à la fin. Il l'est. Et maintenant, traitons de nos prix. Donc, comme ils l'ont dit, parce que nous sommes sur une petite taille de tablette, je vais les étendre pour tenir huit colonnes dans l'esprit. Alors, comment puis-je faire ça ? Je peux simplement sélectionner les trois. Déplacez les 40 pixels vers le bas, alors décalez 1234 Assurez-vous que c'est à gauche. Donc, une fois de plus 1234 et je vais déplacer un pro et élite vers le bas, Donc positionné les ici, assurez-vous qu'ils sont dans le centre comme ça et puis simplement les déplacer vers ici. Et puis je vais sélectionner les trois et simplement les étendre pour entendre si cela ne fonctionne pas, alors vous devez le faire un par un. Layout cassé ici pour une raison quelconque. Laisse-moi vérifier ce qui s'est passé. J' y retournerai quelques fois. Je ne sais pas pourquoi, parce que ces deux-là ont l'air comme ils le devraient. Eh bien, vous voyez, nous avons cette erreur ici aussi. Mais pour le réparer, il suffit de sauter à l'intérieur et je vais tout sélectionner à la place de notre fond. Assurez-vous qu'ils sont au centre et simplement alignés vers le haut avec le centre de nos livres et enfin l'achat paquet allaient orteils pour être dans le centre. Et parce que nos boutons sont différents, utilisons ce bas. Donc contrôle. Tu vois, je vais sauter ici. Supprimer frappé Contrôle V et je vais simplement le déplacer ici dans le centre comme si Pas vraiment sûr pourquoi cela est arrivé, mais comme vous pouvez le voir de temps en temps, vous allez remarquer certains de ces problèmes. Vérifions vite. Comme vous pouvez le voir ici, cela fonctionne bien. Ici. Ça marche bien. Donc, ne sautons pas vite. Réparez-le ici aussi. Donc ce que je vais faire, c'est que je vais tout sélectionner, assurer qu'il est au centre comme ça, alors assurez-vous qu'il est au centre comme ça. Si vous ne pouvez pas le forcer à être au centre, vous pouvez sélectionner toutes vos commandes de contrôle. Cliquez ici, puis cliquez simplement ici. Puis il est allé orteil aligner parfaitement au centre. Donc, pour les boutons, supprimons rapidement celui-ci. Je vais simplement utiliser celui-ci, donc contrôle C Control V. Je vais le positionner ici. Alors je vais m'assurer que c'est au centre comme ça et ensuite. Une fois que vous avez fait cela, adaptons-les maintenant pour être réactifs. Alors sélectionnons ceci. Sélectionnez ceci, assurez-vous qu'ils sont dans Central, donc positionnez là, sélectionnez les trois, puis étendons-les. Comme vous pouvez le voir, ils se sentent bien lus, perturbant tout de nos boutons. Tout hors de la mise en page, vous pouvez voir tout s'adapte comme il devrait s'assurer qu'ils sont 40. Donc 1234 et une dernière chose que je veux vérifier, c'est ça. Les boutons vont être différents de toute façon, alors laissons-les comme ça, parce que le point de taraudage est assez bon de toute façon. Alors maintenant, nous allons juste nous assurer que nous avons assez d'espacement entre eux. Donc 1234 et tu vas t'occuper de l'élite maintenant. Aussi déplacer 1234 terminé Fondamentalement il. Alors maintenant, nous allons rapidement étendre cela. Je vais cacher des témoignages, un bloc promo et un pied de page pour que nous ayons un peu de travail de l'orteil avec une position de l'orteil. Ceci vers le bas, qui comme ce décalage 1234 je vais sélectionner ceci. Ramenez-le, déplacez ceci pour être 40 comme ça et puis je vais simplement adapter notre arrière-plan et adapter certains de ces éléments. Alors allons dans des formes allant à la mosquée et adoptons la mosquée pour aller jusqu'ici comme ça et assurez-vous qu'elle est au centre comme ça. Ensuite, vous pouvez déplacer certains de ces éléments. Alors, qu'est-ce qui les a utilisés ? Laissons-les là où ils sont. Je vais positionner celui-ci ici. Je vais positionner celui-ci un peu vers le bas. Donc quelque chose comme ça, par exemple, peut-être que je peux même augmenter la taille de celui-ci. Et c'est fondamentalement tout pour cette section. Alors passons maintenant aux témoignages, bloc promo et pour elle. Et avant nous le faisons, je vais double-cliquer sur mon tableau et simplement étendre tout le chemin vers le bas. Comme ça, par exemple, parce que nous n'avons pas besoin de réduire la dette. Donc, les témoignages que vous pouvez tenir décalage, sélectionnez tout est simplement déplacer jusqu'à ici. Shift 1234 Et maintenant, nous allons sauter à l'intérieur et nous pouvons adapter nos témoignages. Donc je vais en position A à partir d'ici pour être au centre. Assurez-vous que cette flèche est ici et assurez-vous simplement que j'apporte cette flèche en deux ici . Quand vous avez fini avec ça, vous pouvez simplement sauter dans la promo. Assurez-vous qu'il est à 80 ans donc je dois tout déplacer parce que j'ai déplacé Témoignages. 40. Donc, décalez 1234 Ensuite, assurez-vous que c'est à 80 aussi bien qu'il l'est, et alors ce que vous devez faire est simplement adapté du texte à l'intérieur, alors nous allons rapidement le déplacer au centre comme ça. Alors il suffit d'adapter ce texte mais le voyage ci-dessous. Sélectionnez ceci. Assurez-vous qu'il est à 20 et adaptez simplement ce texte en place un ci-dessous. Disons de notre bouton, donc je vais le positionner pour être là. Assurez-vous qu'il est trois appels de large comme alors assurez-vous qu'il est au centre et pour les pixels vers le bas. Alors décalez 1234 Et maintenant positionnons tout comme alors assurez-vous que tout est au centre comme il est et assurez-vous juste que c'est tout. C' est au centre comme ce salut horizontalement et verticalement. Alors nous allons déplacer le prix. BG. Déplaçons les formes. Je vais donc réduire un peu la taille de mon cercle. Je vais réduire la taille de ce rectangle. Enfin, je vais bouger ça dans un peu. Je vais aller aux pieds, ajuster ma mosquée. Comme vous pouvez le voir, tout se déplace assez rapidement dès que vous commencez à obtenir ces éléments. Donc, dès que vous commencez à vous déplacer à gauche, à droite, donc huit pixels bon pour l'aligner comme ça. Et enfin, nous allons juste tout à l'intérieur. Donc je vais positionner mon texte ici. Je vais supprimer Block post, aussi. Je vais étendre mon image de post bloc pour entendre que vous pouvez double-cliquer à l'intérieur et vous transmettre repositionner cette image pour s'adapter à la prochaine. Cela va rester le même, mais cela va changer un peu, parce que maintenant nous avons beaucoup plus d'espace pour travailler. Alors gardons ça comme pour qu'il puisse déplacer l'avatar pour entendre environ 20 pixels. Et traitons de notre bouton. Donc, comme nous l' avons dit, nous devons faire trois colonnes de large, donc sa position ici et ici. Je vais sélectionner le texte, assurer qu'il est au centre. Assurez-vous qu'il est à 40 ans. Comme l'homme de soi. Assurez-vous qu'il est au centre de notre port comme ça. Enfin, pour le plus affaiblir, faites exactement dire des choses pour simplement le déplacer au centre. Assurez-vous qu'il est à 80 comme ça et faites simplement monter le notre port un peu pour que nous puissions le terminer ici. Quand il marche, vous savez qu'il est au centre, donc je vais apporter cela un peu plus près, et c'est fondamentalement tout pour la petite taille de tablette. Alors passons vite à travers ce que nous avons fait. Je vais vite cacher mes notes. Donc nous avons déplacé ce texte et je ne vois pas l'espacement ici comme il se doit. Alors tirez 12, je vais devoir tout bouger. Donc 1234 1234 et 1234 Donc je vais déplacer le héros BJ ici illustration et puis de ne pas tout faire , ne pas travailler sur tout. Donc, il suffit de déplacer la mosquée un peu comme si je vais vous montrer un petit truc. Donc je suis allé à l'étendue des orteils sont notre planche un peu tout le chemin vers le bas ? Donc, parce que nous avons travaillé sur le héros, sélectionnons rapidement tout sauf pour le héros. Vous pouvez monter un peu et ensuite simplement ajuster pour être 80 bête donc comme ça et vous pouvez voir sur le côté gauche juste ici. Si je bouge, vous pouvez voir combien de pixels se trouvent entre les deux. Et une fois que vous avez fait cela, il vous suffit de double-cliquer ici et d'apporter votre port jusqu'à ce qu'il se rencontre au centre comme ça. Vous pouvez aussi signifier beaucoup plus près si vous voulez, jusqu'à un pixel jusqu'à ce qu'il s'accroche et c'est essentiellement pour une petite taille de tablette. Donc, une fois de plus, couvrirons rapidement ce que nous avons fait. Nous avons ajusté notre logo A. Nous avons ajusté les positions de tout. Et c'est une bonne chose que je l'ai allumé parce que ce n'était pas aligné comme il se doit. Donc, comme je l'ai dit, nous avons inclus tout à l'intérieur, comme nous l'avons fait pour les tablettes d'appareils moyens. Nous avons maintenant ce texte qui s'enroule un peu plus bas. Nous avons l'illustration, qui est encore un peu plus petite. Ici, nous avons une illustration plus petite, des logos plus petits. Nous avons le texte qui s'enroule un peu différemment. Nous avons Destexhe ici nous avons ces deux-là, mais ils s'étendent maintenant un peu vers le bas. Ici, nous avons ce regard différent qu'avant, et je n'aime pas comment ça ressemble. Peut-être que je peux être quelque part par ici. Il est juste pour qu'ils ne soient pas dans le même espace et pour le prix que nous avons maintenant dans ces boîtes, qui s'étendent tout le chemin pour entendre leur sentiment tout l'espace parce qu'il ya un espace que nous avons rempli une fois de plus. Je n'aime pas à quoi ça ressemble. Peut-être que tu peux l'amener ici. Et c'est la beauté de ce processus, parce que vous pouvez simplement courir à travers et voir ce que vous n'aimez pas. Et les témoignages ajustés n'ont pas beaucoup changé. Cela n'a pas beaucoup changé aussi. Nous l'avons juste étendu pour être un peu plus grand à l'intérieur du texte. Mais pour le bloc, nous n'avons maintenant qu'un seul poste de bloc, et vous pouvez le faire dans l'autre sens. Vous pouvez inclure des héros, par exemple, témoignages de liquidité. Vous pouvez inclure la pagination juste ci-dessous. Vous pouvez inclure un post sur un autre si vous le souhaitez. Mais par souci d'espace, parce que Blawg n'est vraiment pas si essentiel pour ce site particulier parce qu'il vend services de design. Donc appartenir est juste un hors de la façon dont ils gagnent de l'argent, mais pas leur principal moyen. C' est pourquoi nous l'avons déplacé vers le bas et n'avons été inclus qu'un seul poste de bloc. Donc, s'ils veulent voir toutes les affiches de soufflage qui dit, voici la page de bloc, ils peuvent simplement cliquer, voir tout ou cliquer ici pour aller à la page de publication de bloc. Enfin, pour le pied de page, rien n'a vraiment changé. C' est juste plus étroit qu'avant. Donc c'est fondamentalement tout pour cette taille. Et dans la vidéo suivante et finale, nous allons discuter de la taille du téléphone parce que ça va changer. Encore une fois. Nous allons passer de quatre colonnes dans la mise en page orteil quatre colonnes pour le téléphone, et nous allons orteil adapté pour s'adapter là aussi, donc je vais vous voir là-bas. 15. Créer une conception réactive: Enfin, commençons avec des petits appareils supplémentaires téléphones IE. Mais avant que nous le fassions, j'ai décidé que dans certains endroits je veux inclure trois appels boutons blancs. Donc, par exemple, ici, je ne vais pas le faire parce que ça va trop gâcher les orteils avec la mise en page notre navigation. Je ne vais pas le faire ici non plus, parce qu'on a deux boutons l'un à côté de l'autre, mais je vais le faire ici. Alors laissez-moi rapidement l'adapter, et vous pouvez utiliser responsive resize toe inclure comme ça. Et maintenant, vous pouvez voir qu'il est assez grand et assez facilement lisible parce que ceux-ci le sont aussi. Enfin, je vais en inclure un ici aussi, donc je vais l'étendre jusqu'ici. Je vais m'assurer que c'est au centre, et enfin, je vais inclure ici aussi, juste parce que nous avons assez d'espace ici. Bout inclus pour être trois colonnes blanches. Maintenant que nous avons fait cela, passons rapidement aux petits appareils. Je vais sélectionner ce contrôle d'enfant en profondeur, et pour celui-ci, nous allons faire cette œuvre pour être assez longue afin que je puisse aussi bien l'étendre dès le départ. Donc je vais l'étendre jusqu'au bas et je peux sauter en vue et déplacer tout ça le bas. Mais laissez-moi vous montrer rapidement ces colonnes. Ainsi, par exemple, nous avons ici quatre colonnes. Alors, nous allons d'abord changer la dette. Donc quatre colonnes et dans lequel j'ai décidé d'être 375 parce qu'il est plus petit que 576 Double clic. En badigeonnant ça ici. Donc je vais changer de nom. Alors changeons l'esprit à 375. Donc et enfin, pour les colonnes, voyons ce que nous avons ici. Nous avons donc 30 61 20. Alors copions ça. Donc, nous avons 30 61 enfin, nous avons 20 juste ici en bas. Une fois de plus, nous allons devoir l'adapter. Donc 30 61 20. Vérifions ça. 30 61 20. Il faut un peu de temps pour que les œufs Matt entrent, mais une fois que cela fait comme vous pouvez le voir, tout fonctionne comme il se doit. Nous allons maintenant ajuster rapidement tous ces différents éléments. Donc, fondamentalement, va travailler orteil exactement la même chose que pour tous ces hors de ceux-ci. Mais pour celui-ci, je vais faire le logo un peu plus petit. Donc, par exemple, quelque part ici, je vais déplacer le bouton et l'icône du menu ici, et je vais rendre le bas un peu plus petit. Donc, je vais, par exemple, faire en sorte que ce soit deux colonnes blanches comme ça et je vais m'assurer que, par exemple, c'est un pixel 20, donc pas exactement au centre, parce que le centre sera juste ici. Mais je vais le déplacer. 20 pixels, par exemple, à gauche de notre icône de menu. Donc il a déménagé dans R B G juste ici. Inclus notre liste déroulante. Je vais tout bouger à l'intérieur ou descendre vers la droite. Donc, fondamentalement, nous allons faire exactement la même chose que nous l'avons fait. Nous allons donc sélectionner tous les éléments de menu, les déplacer ici, sélectionner les lignes de séparation et l'arrière-plan. Je vais les déplacer tous les inversants ici. Tout a l'air bien. Je vais le cacher, et ensuite nous allons traiter des éléments ci-dessous. Donc pour ça, je vais sélectionner le héros. BG. Déplacez-le en mots comme ça et je vais choisir ma forme. Alors utilisons la mosquée. Je vais amener la mosquée un peu, et on s'en occupera un peu plus tard. Donc pour l'instant, cachons toutes ces formes. Donc ils ne sont pas distrayants, et je vais faire face à ces éléments ou les placer au centre comme ça. Et puis quoi ? Je vais le faire. Déplacez simplement le bouton de démonstration ici et assurez-vous qu'il est deux colonnes blanches parce que maintenant nous en avons quatre. Assurez-vous qu'il s'agit de deux appels blancs aussi. Comme vous pouvez le voir, tout va très bien, et ce que je vais faire est simplement sélectionner ceci. Et enfin, je vais changer de taille parce qu'il est trop grand pour l'instant, et je vais changer la taille pour cela aussi. Donc, si nous revenons à ici, vous pouvez simplement le sélectionner. Et nous allons utiliser quelque chose comme la taille ouverte 36 et nous allons sélectionner ceci. C' est Carla, 80 ans. Assurez-vous qu'il est blanc. Il est, et est allé tout simplement alors attaqué ce texte pour tenir orteil ici que vous pouvez voir tout semble bien, mais je vais déplacer cela des sites abdos à la marque. On t'a couvert, donc tout est en quatre lignes au lieu de cinq. C' est pourquoi avoir des actifs et des styles de personnages, en particulier, est vraiment utile parce que cela va garder les choses belles et lisses. Tout va ressembler comme il se doit. Mais lorsque vous passez à la vue mobile, surtout ici, tout doit être un peu plus petit parce que l'appareil est globalement plus petit. Donc, vous devez penser à toutes ces choses parce que lorsque l'utilisateur regarde, par exemple, ce texte sur cet appareil, vous pouvez voir à quel point cet écran est comparé à cela. Tout va être couvert. Donc, fondamentalement, tout ce qu'ils sont allés voir est le texte sans les boutons, sans illustration. On ne veut pas ça. Nous voulons qu'ils voient tout tel qu'il est ici. C' est pourquoi nous réduisons la taille du texte dans ce cas. Donc, ne passons pas à autre chose. Je vais déplacer ça ici, alors je vais déplacer ça ici. Donc shift 1234 Assurez-vous que nous devons réduire la taille de cet orteil ici ? Ouais, et je vais aller aux pieds. Utilisez mes boutons. Assurez-vous qu'ils sont 40 pixels vers le bas comme ça et assurez-vous que tout est 40 pièces vers le bas par rapport au haut. Alors, juste ici. 1234 Et maintenant, jouons avec notre illustration et pour l'illustration. Nous allons tout rapprocher un peu, et je vais,par exemple, par exemple, repositionner cette partie de l'illustration un peu comme ça. Et puis je vais réduire la taille de l'illustration comme, donc je vais m'assurer qu'il est 40 comme il est. Alors décalez 1234 et puis je vais amener mon héros BG comme ça. Je vais déplacer l'illustration une fois de plus jusqu'à ce qu'elle soit à 40 ans et c'est essentiellement ça pour ça. occuperons pas de nos formes parce que nous avons changé l'apparence de tout, donc je vais bouger dans mon cercle. Je vais le rendre un peu plus petit. Peut-être le repositionner ici. Je vais m'occuper de cette grande place comme si je vais m'occuper de la place pour la trouver rapidement. C' est en bas. Maintenant, nous devons ajuster notre mosquée. Déplaçons-le ici. Et parce que nous l'avons fait, traitons rapidement de ce carré parce qu'il n'est pas nécessaire qu'il soit aussi grand pour que vous puissiez tenir votre touche de changement. Vous pouvez le positionner où vous voulez. Vous pouvez même le faire pivoter. Mais je ne vais pas faire ça. Il semble simplement le positionner ici. Rendre les choses agréables et simples. Positionnez ceci ici. Peut-être que je peux amener ce carré un peu dehors et peut-être que je peux déplacer le cercle, comme ça. Donc, si je cache mon grand, vous pouvez voir comment tout ressemble à tout est comme il se doit. Tout est placé là où il est censé aller, mais maintenant il semble beaucoup plus cohérent sur ce petit écran. Maintenant, pour ces logos, je ne vais pas les avoir quatre d'affilée. Au contraire, je vais juste les avoir deux d'affilée. Donc, je vais utiliser le logo trois logo pour m'assurer qu'ils sont au centre Local un logo pour m'assurer qu'ils sont au centre aussi, comme ça. Et vous pouvez même jouer avec eux et, par exemple, positionner ce logo. Donc local, vous pouvez le faire être au centre de celui-ci, et vous pouvez, par exemple, combiner ces deux pour être au centre. Ensuite, vous pouvez tout sélectionner et assurez-vous qu'il est au centre comme maintenant pour la destination. Du héros vers le bas, vous pouvez utiliser 1234 ou peut-être 80. Voyons ce qui semble le mieux. Donc elle a mangé 12345678 Je pense que c'est beaucoup trop parce que c'est juste un espace vide maintenant, donc peut-être 40. Ça a l'air beaucoup mieux. Alors maintenant, traitons de notre illustration. Vous pouvez aligner tout ici sur la gauche, assurez-vous qu'il fait 40 pixels juste ici. Vous pouvez utiliser l'illustration et simplement la mettre à l'échelle jusqu'à ce qu'elle s'insère à l'intérieur de notre grille. Comme ça, alors on va s'assurer que tout est là où il est censé être. Donc, déplacez 1234 et nous n'allons pas traiter de la taille de cette taxe parce que c'est un 36. Ce texte est que 18. Donc, fondamentalement, tout est tel que ce texte est, donc nous ne allons plus jouer avec lui. Mais ce que nous allons faire, c'est simplement nous occuper de la frontière hors de ces mots. Donc fondamentalement comme si nous allons maintenir l'industrie en bas parce qu'il dit que cela semble beaucoup plus agréable quand on les a deux lignes de texte au lieu d'une seule. Alors adaptons rapidement ce texte. Je vais l'étendre. Comme vous pouvez le voir fonctionne maintenant beaucoup mieux. Nous allons nous occuper de notre bouton et de la position à 40. Déplaçons le vers le haut en 34 et je ne vais pas simplement réduire sa taille à deux colonnes blanches qui est beau. Allons vers le bas et encore. Aller repositionner les orteils, c'est être au centre, s' assurer qu'il est 40 Donc 1234 et nous allons traiter ces deux textes en ce moment. Donc pour celui-là, on va l'ajuster. Alors, prenez vos projets. Je vais bouger ça sur le chemin rapidement. Il va à l'extérieur. Donc comme ça, eh bien, on va devoir être là. Prends soin de toi. Le design va descendre ici. Enfin, nous allons déplacer le séparateur et un texte vers le bas 20 pixels comme donc je vais déplacer ce texte ici. Déplace-le ici. C' est pourquoi nous l'avons créé en tant que texte de zone parce que, comme vous pouvez le voir sur ces petites tailles, il est beaucoup plus facile de travailler avec elle de cette façon. Puis orteil ont qu'il soit texte de point. Maintenant, pour ceux-là, ils vont être notre principal changement parce que nous allons fondamentalement les avoir un à la fois. Alors décalez 1234 Et maintenant je vais déplacer tous ces éléments parce que je ne veux pas ils me dérangent comme ça. Et nous allons maintenant nous concentrer sur ceux-ci. Donc, nous allons sauter les fonctionnalités d'initié et je vais sélectionner ces trois l'a déplacé ici. Assurez-vous qu'ils sont alignés comme ça, et je vais déplacer les solutions personnalisées à l'ancienne parce que c'est notre dernière. Et faites-le savoir, travaillez simplement sur notre texte. Tout d'abord, assurez-vous qu'ils sont tous alignés comme ceci. Assurez-vous qu'ils s'alignent avec le bord gauche de notre grille, et puis je vais sauter à l'intérieur et le texte de justice comme ainsi Donc c'est maintenant à trois lignes de texte au lieu de off pour, donc il est beaucoup plus compact pour les utilisateurs à lire, alors assurez-vous que vous êtes à 40 ans. Donc 1234 nous allons faire la même chose pour le texte Dis. Il est maintenant à deux lignes, donc ajustez-le en conséquence. Allons nous occuper de celui-là. Voyons si ça va se mettre en position. Il est même tout le contrôle de cliquer directement dans votre texte. Tu as choisi d'aller. Nous allons le coller pour être ici comme c'est le cas dans tous nos autres exemples. Assurez-vous qu'il est à 40 s'il ne veut pas être 1234 Il est allé voir 39.8 une fois de plus. C' est parce que hors de notre icône et sont semblables. On est allés ici juste pour s'assurer qu'il est coupé là où il devrait juste ici . Ensuite, nous allons passer à la tarification, donc je vais déplacer tous ces éléments vers le haut. C' est pourquoi il est agréable d'avoir ces groupes parce qu'ils sont vraiment utiles. Alors décalez 1234 Assurez-vous qu'il est à 40 et que ce que vous allez faire maintenant est de sauter dans notre texte , positionnez-le comme ainsi et des prix abordables. Voyons voir, nous allons garder tout ce qui est un zit juste s'assurer que c'est au centre, comme c'est le cas. Cette boîte s'adapte à l'extérieur, mais une fois qu'elle entrera dans le code, il n'y aura pas de boîte. Donc ça va bien s'adapter à l'intérieur, alors ne vous inquiétez pas trop. On va positionner ça dans, genre, genre, si prolongé Ne pas jusqu'à ce que ça corresponde comme ça et ensuite on va les faire entendre, s'assurer qu'ils sont à 40 ans. Donc 1234 et nous allons sélectionner tous d'entre eux sont réactifs redimensionner va faire sa magie. Comme vous pouvez le voir, tout est beau, propre et comme il se doit, il n'a pas changé les proportions. La seule chose qu'il nous reste à faire est simplement d'allonger le prix Bijie vers le bas. Donc 1234 et nous allons sélectionner la beauté des prix. Assurez-vous qu'il est aligné. Déplacez ça jusqu'à ce qu'il s'enclenche dans 40 comme ça. Et puis traitons de la tarification BG. Donc, comme vous pouvez le voir tout au long de ce projet, cet arrière-plan avec toutes ces formes nous prend le plus de temps pour que vous puissiez gérer ses deux façons que vous pouvez traiter comme nous le sommes actuellement. Ou vous pouvez l'avoir comme image que vous pouvez créer séparément. Ou tu peux l'inclure, Toby. Très une fois ou vous pouvez créer des illustrations séparées afin que vous n'ayez pas à redimensionner à chaque fois. C' est vraiment à vous et à votre flux de travail. Cependant, vous aimez le travail des orteils et là où vous pensez qu'il convient le mieux avec le projet en main. Il existe donc de nombreuses façons de traiter ces questions et ces stratégies. Donc, peu importe ce que vous pensez, cela correspond au projet, c'est ce que vous allez faire. Donc on n'en a pas fini avec notre mosquée. Donc maintenant, nous pouvons passer plus bas, donc une fois de plus, sélectionnez tout et assurez-vous qu'ils sont à 40. Donc quelque chose comme ça ici, je vais sauter dans mes témoignages. Je vais m'assurer que ma flèche gauche est alignée avec mes notes, ma flèche droite aussi bien comme ça. Et je vais utiliser mon témoignage, déplacer au centre comme ça et parce que maintenant enlevé ceci et il ne peut plus contenir cela . Ce que je vais faire en fait, c'est déplacer ces flèches vers le bas, donc je vais les sélectionner. Déplacé dans 41 234 et je vais les positionner pour être au centre et orteil en ligne avec du grain . Donc, je vais sélectionner ma flèche gauche. Positionnez-le ici, déplacez ma terreur droite. Positionnez-le ici. Comme vous pouvez le voir, il y a encore de l'espace entre les lignes de la grille donc à l'intérieur de la gouttière afin que les utilisateurs puissent utiliser leur fouet et et le point de frappe va être un accès agréable et facile aux orteils parce qu'ils ont encore assez d'espace sur la gauche, à droite et au centre entre ces deux icônes. Si vous travaillez avec des appareils plus petits, par exemple, formulaires beaucoup plus petits que ces téléphones plus récents, vous pouvez même les séparer encore plus si c'est quelque chose que vous voulez. Mais vous devez parler avec les développeurs pour voir ce qu'ils pensent lorsque vous testez sur ces appareils. Dans des conditions idéales, vous serez en mesure d'utiliser les appareils de test orteil tout de suite. Mais si vous n'avez pas cette option dans ce luxe, alors vous pouvez simplement lire autour de ce qu'il veut et ce dont vous avez besoin pour que vous puissiez tout adapter à l'intérieur. Déplaçons ce témoignage en bas de 40 et nous pouvons faire la même chose pour notre flèche. Donc 1234 et nous pouvons sélectionner ces flèches, sélectionnez-le comme ça. 1234 Parce que nous n'avons pas de couleur de fond. Faisons en sorte que ce soit à 40 ans. Donc, une fois avant et maintenant je vais sélectionner ceux-ci et eux, cependant, assurez-vous qu'ils sont à 40 aussi. Et ne nous occuperons pas de ça, donc je vais l'apporter gentiment. Je vais utiliser mon bouton de démo. Assurez-vous qu'il est deux appels blancs comme si responsable taille. Est-ce que ça pue et s'assure que ces deux-là sont au centre comme ça ? Non, nous devons adapter ça. Alors, sautons à l'intérieur. Les voyages créatifs sont allés vers le bas, et lequel d'entre nous va aller au-dessous de cela ? Utilisons le diviseur. Faisons en sorte qu'il soit 20 ans. Assurez-vous que Button est à 40 ans donc je suis allé à avant. Positionnez cela au centre et, savons-le, sélectionnez tout et déplacez-le au centre. Comme vous pouvez le voir, 64 63. Donc, il a beaucoup d'espace entre, donc vous n'avez pas besoin d'étendre cette section si vous ne voulez pas. Si vous faites un pour que vous puissiez l'étendre pour gagner encore plus d'espace. Mais si ce n'est pas nécessaire que je ne conseille pas de sorte que vous pouvez étendre tout le chemin vers le bas. Parce que même si cette section est importante parce qu'elle contient l'appel à l'action en bas, ce n'est pas si important si elle bloque la vue pour l'utilisateur, donc l'utilisateur doit faire défiler jusqu'au bas et perdre beaucoup de temps. Ils doivent être capables de dire ce que c'est tout de suite, afin que vous puissiez y faire face si vous le voulez. Alors appelons cette section faite. Je vais fermer dans ces dossiers comme ça, et il est maintenant rapidement passer à Blawg va se positionner ici, assurez-vous qu'il est à 40. Donc 1234 et enfin, laissons tomber le texte au centre comme ceci. Nous allons positionner notre bloc en dessous. Nous allons déplacer le poteau et le bas en dessous. Donc 1234 Je vais sauter à l'intérieur, ajuster mon image pour s'adapter ici. Je vais cliquer sur ce texte et ajusté en conséquence, comme ça. Et enfin, je vais déplacer mon avatar à injuste comme vous le voyez, c'est assez simple. Une fois que tu y vas, je vais m'assurer que mon bouton est orteil est blanc. Comme tous les autres boutons. Assurez-vous qu'il est à 40 ans comme ça. Et enfin, ne faisons pas affaire avec Footer. Une fois de plus, je reprends les pieds. Positionnez-le au centre, assurez-vous que c'est un 40. Donc 1234 Et quand je le ferai parce que, comme vous pouvez le voir, il ne nous reste plus d'espace, je vais utiliser ces articles. Alors Blawg et contactez-nous. Je vais me déplacer en dessous peut-être 20 pixels. Ou utilisons 40 parce que nous en avons utilisé 40 partout. Maintenant, je vais aux orteils. Positionnez cela dans le centre et sélectionnez la tarification des contrats à terme et des services et déplacez ceux au centre comme ça, comme il est juste ici. Ou vous pouvez même les regrouper et simplement sélectionner pied de page BG. Assurez-vous qu'ils sont au centre. Vous pouvez regrouper. Ces deux-là veulent le vendre pour le BG. Assurez-vous qu'ils sont au centre, et c'est le bon poids de faire ça. Vous pouvez sélectionner le logo. Assurez-vous que c'est au centre et je vais le déposer en ligne. Ensuite, vous pouvez sélectionner tous ces éléments. Assurez-vous qu'ils sont au centre. Donc, une fois que tout est beau et concis, vous pouvez alors apporter cela et étendre cela parce que nous voulons avoir beaucoup plus d'espace ici. Donc, ne faisons pas cela parce que nous avons 1234 Nous avons 40 pixels entre cela et logo. Faisons la même chose pour tous ces autres. On en a 40 ici aussi, donc je vais les sélectionner pour les déplacer jusqu'à ce qu'ils soient à 40 ans. Comme vous pouvez le voir, nous en avons 40 partout. Déplacez ça vers le bas pour être un 40 comme ça. Alors je vais tout sélectionner. Assurez-vous que tout est 40. Donc 1234 et finalement déplacé ces quarantaine. Eh bien, donc 1234 je vais apporter ça jusqu'à ce qu'il rencontre le bord inférieur. Brand a simplement appelé ma touche de changement jusqu'à ce qu'elle se termine. Donc maintenant tout est aligné et regardant correctement. Une chose violente à faire est simplement d'en parler parce que nous n'avons pas besoin pour l'appeler jusqu'au bout. Mais c'est une bonne chose à faire pour que vous puissiez étendre votre port jusqu'à ce qu'il réponde à vos exigences, et ensuite vous pouvez simplement le ramener. Donc, c'est fondamentalement tout. Nous avons créé cette page pour être responsive. Nous avons commencé avec grand qui s'arrête que petit qui arrête les talents moyens, petits caissiers et enfin, les téléphones. Si un saut ici, exclure mon grand afin que vous puissiez tout voir. Comme vous pouvez le voir, mise en page s'adapte bien à ces différentes tailles d'écran. Tout fonctionne comme il se doit. Et maintenant, c'est à vous de fournir ces développeurs d'actifs afin qu'ils puissent développer ce site Web , et ils le contestent pour voir si tout fonctionne correctement. C' est ce que nous allons faire dans la prochaine section du discours. Nous allons aller taille par taille, et nous allons extraire tous ces actifs. Ensuite, vous allez envoyer tous ces actifs aux développeurs et les développeurs vont les tester et voir si tout fonctionne correctement et comme il se doit avant qu'il ne soit en ligne pour être en direct pour les gens de voir partout dans le monde. Alors je vous verrai dans la prochaine section du cours 16. Structure du dossier: maintenant que vous avez fini de concevoir et de créer vos designs réactifs dans X'd. Maintenant, il arrive le temps d'exporter vos actifs pour les développeurs, et en tant que concepteur, vous devez exporter ces actifs afin que les développeurs comprennent où tout se passe sur différentes tailles et où tout est positionné afin d'exporter vos actifs dans X'd. C' est extrêmement simple. Mais avant d'exporter dans différentes ressources pour sont différentes tailles, vous devez créer une structure de dossier reconnaissable et logique. Laissez-moi vous montrer rapidement comment faire ça. Ici, j'ai une agence de design de studio, qui est juste un dossier vide, et à l'intérieur de ce dossier vide, nous allons créer différents dossiers pour différentes tailles. Donc, si un saut dans les oeufs D et zoomer un peu, vous pouvez double-cliquer ici. Appuyez sur le contrôle C pour copier le nom de ce notre port, et vous pouvez sauter dans votre dossier clic droit et créer Fuller et simplement basé le nom ce dossier à l'intérieur. C' est pourquoi les développeurs seront en mesure de comprendre rapidement s'ils ouvrent ces oeufs souiller, qui sont port. Essayez-vous d'exporter et pour lequel notre port ces actifs sont affectés orteil afin que vous puissiez passer à autre chose et le faire pour tous ces autres ports afin que je puisse contrôler, voir, sauter en arrière. Je vais créer un nouveau plus complet, et il va être beaucoup plus facile pour eux de comprendre lesquels il y a parce qu'ils ont ces multiples images de plusieurs tailles à traiter. Il est donc beaucoup plus facile pour eux de comprendre si vous êtes déjà prêt. Tout pour eux et l'exportation de X, dit De Aza, est extrêmement simple et facile à faire, et nous allons y arriver dans la prochaine vidéo. Mais pour cette vidéo, je veux juste vous montrer comment vous pouvez préparer votre structure de fichiers. Voici donc notre structure de fichiers de base, et à l'intérieur de celle-ci, nous allons placer tous ces éléments différents, qui vont vous montrer comment vous pouvez les exporter facilement dans la vidéo suivante. Et nous allons parler des différents formats de fichiers et des formats de fichiers que vous allez exporter. Quels fichiers car il est extrêmement important de comprendre ces formats de fichiers, en particulier lorsque vous exportez vos ressources pour les développeurs. Donc nous allons couvrir ça dans la prochaine vidéo, mais à la fin, cette vidéo. Je veux juste vous dire qu'en dehors de tous ces dossiers, vous pouvez enregistrer cette souillure principale des oeufs . Donc, si le développeur a plusieurs projets sur lesquels il travaille en même temps, il peut rapidement sauter dans cette ouverture plus complète que X. Ils peuvent voir ça. Ok, c'est ce projet et ils peuvent simplement sauter à l'intérieur de chacun de ces différents dossiers que vous venez de créer et ensuite prendre les ressources de ces dossiers. Mais vous pouvez aussi faire est de créer un fichier pdf lisez-moi ou lisez-moi fichier texte. Il n'a vraiment pas d'importance où vous pouvez simplement énumérer où vous avez vos téléphones, ou vous pouvez leur envoyer des téléphones directement, encore mieux afin qu'ils puissent travailler avec les mêmes téléphones à l'intérieur du code. En outre, si cela prenait des images de différentes sources en ligne, par exemple, nous avons utilisé sur Splash pour ce cours particulier. Par exemple, ces trois images Vous pouvez les pointer directement vers les liens de ces trois images, ou vous pouvez simplement leur envoyer un lien vers le site sur Splash où ils peuvent obtenir ces images et les télécharger dans le plus haut possible résolution. C' est pourquoi la structure des dossiers a vraiment de l'importance, surtout si vous avez différentes icônes que vous utilisiez. Par exemple, vous avez différentes collections hors icônes, puis vous allez les placer toutes ici. Si vous avez plusieurs ressources est que vous voulez envoyer sur le dessus de tous ces différents dossiers, alors je vous recommande vraiment de créer un dossier séparé, par exemple, les actifs, puis à l'intérieur de ce dossier, placez vos images, placez vos icônes, placez différentes illustrations. Quel que soit votre projet se compose, alors un vraiment recommandé de créer ce dossier et de mettre tous ces différents actifs à l'intérieur de ce dossier, comme ils l'ont dit, va être beaucoup plus facile pour les développeurs de comprendre où tout va, où tout se trouve. Et ils ne vont pas vous déranger avec plusieurs questions. Une fois que vous avez terminé la conception de ce projet, où tout est situé parce que vous allez tout préparer dans avancé et les envoyer tous de ces différents fichiers 17. Exporter des ressources: Je sais que nous avons créé notre structure de dossiers. Il est temps d'exporter nos fichiers, et si je zoom un peu plus près, cliquez sur l'un de ces tableaux et appuyez sur le contrôle E ou commandant sur un Mac. Vous pouvez voir que ce style de apparaît maintenant. Ici vous pouvez sélectionner le format que vous pouvez choisir parmi PNG, SVG, PDF et J Pick, et ils diffèrent beaucoup. Donc PNG est fondamentalement une image sans arrière-plan. Ainsi, par exemple, si vous coupez des images de personnes qui disent ou hors de l'objet et les incluez dans vos conceptions, c'est là que P et G sont utiles. Suivant SPG est un format de fichier vectoriel, et il est génial parce qu'il contient froid à l'intérieur. Et c'est également très utile pour les développeurs car ils peuvent prendre ce code, ils peuvent l'inclure dans leur propre manteau. Ils peuvent adapter, par exemple, les tailles de certaines illustrations d'icônes où ce format de fichier SVG est le plus utilisé, et ils peuvent facilement ne pas être intégrés dans les guillemets. Vous pouvez voir pour chacun d'entre eux il y a différents paramètres, et nous allons le couvrir dans une seconde. Ensuite, un pdf, qui est un fichier PDF de base. Et c'est génial. Par exemple, si vous exportez des notes de conception que vous avez créées à l'intérieur, ce sera facile. Ou si vous avez d'autres documents texte avec, par exemple, des images. Disons plus de planches d'humeur ou quelque chose comme ça, et vous pouvez l'exporter en PDF. Et enfin, nous avons le Jay Peak, qui est fondamentalement juste une image régulière. Maintenant, passons rapidement à travers certaines de ces options. Donc, pour P et G, vous pouvez choisir le design, et il va exporter les orteils. En l'état, vous pouvez cliquer sur le Web quand vous pouvez voir qu'il exporte les actifs sélectionnés comme un X et deux x, ce qui signifie dans la taille d'origine, qui est un X et deux X, qui est doublé votre site d'origine. Sauf qu'on a IOS. Comme vous pouvez le voir, il est de les exporter en un x deux x et trois x, ce qui est génial si vous concevez,par exemple, par exemple, téléphone plus petit et une taille d'iPhone plus petite. Disons iPhone huit et que vous voulez exporter orteil. J' ai trouvé 10 11 ou Max ou quelque chose comme ça. C' est là que ces tailles sont utiles, et enfin nous avons Android, qui est à nouveau différent de tout cela parce qu'il les exporte dans les mesures, qui est M. D P I. Et vous pouvez voir à 75% 100  % et va jusqu'à 400%. Et il a toutes ces abréviations différentes pourcentage orteil qu'il est exporté à et tout cela signifie fondamentalement même comme pour Iris, mais il exporte à un x deux x trois x pour Android. Parce qu'il y a beaucoup d'autres tailles hors écrans, vous pouvez voir tous ces différents pourcentages afin que vous puissiez les choisir et vous pouvez voir qu'il est conçu, par exemple, à 100% cette application Android, puis vous pouvez l'exporter dans toutes ces autres tailles. Donc, fondamentalement, c'est tout pour les formats de fichier pour le SPG. Je vous recommande de ne rien changer sauf si vous voyez avec vos développeurs s'ils veulent quelque chose de personnalisé à partir de ceux-ci, mais généralement ils vont personnaliser cela à l'intérieur hors du terrain. Donc, nous allons utiliser SVG, et nous allons utiliser la conception PNG parce que je ne vais pas utiliser le web parce que c'est si vous n'avez pas un design réactif comme nous le faisons ici, cela va essentiellement exporter cela dans la taille d'origine et doubler la taille d'origine. Donc, je ne le recommande pas parce que nous avons toujours toutes ces différentes tailles que nous avons conçues à l'origine. Alors pourquoi choisir ça ? Donc, nous allons juste utiliser la conception et pour le dossier, je vais cliquer ici, et je vais aller à M. l'Agence et commencer avec la plus grande taille et cliquez sur le dossier de sélection et je vais l'exporter orteil juste pour la sortie de se rappeler où je l'a exporté. Et si je saute à l'intérieur de ce dossier, vous pourriez voir qu'il a exporté vers l'ensemble du design. Je vous recommande de le faire car alors les développeurs peuvent facilement jeter un coup d'œil sur cette image et voir les changements que vous avez faits ou certaines positions, par exemple, est quelque chose comme ça. Bien sûr, vous allez leur envoyer le fichier original, mais c'est juste orteil les a mangés dans leur processus de développement. Ensuite, quand il s'agit d'exporter, vous devez sélectionner toutes ces options différentes dans toutes ces différentes couches. Donc, je vais sélectionner mon panneau de calques juste ici et à l'intérieur de ma sieste. Je veux juste exporter mon logo et mon bouton de démonstration, mais à la place hors texte. Je vais le cacher et je vais sélectionner des dossiers Donc logo et démo entre et je vais orteil frappé contrôle e jus bong hit exportations dans ce suivi qu'il vient de sélectionner et je vais orteil également sélectionner mon logo qu'il contrôlerait, manger et exporté est SVG parce que je veux que mon orteil de développeur ait cette option. S' ils veulent inclure dans le froid plus tard, ils peuvent le faire aussi. Je vais rapidement ramener le texte à mon bouton de démonstration et une note de côté rapide parce que j'ai fait une erreur. J' ai nommé tous ces boutons BT et vous pouvez les nommer comme ceci, donc il suffit de double-cliquer ici. Il contrôlerait le contrôle V et ça va être une démo d'or Bateer. Ensuite, vous pouvez simplement sélectionner ce calque. Il contrôlerait E et exporterait cette couche comme un bouton. Mais parce que, comme je l'ai dit, j'ai fait l'erreur. Je vais les cacher tous des boutons, puis les ramener pour les avoir dans le design original Suivant avec l'exportation. Ah, héros, je vais commencer par des illustrations. Je vais les sélectionner tous les deux mais séparément, vous pouvez le voir contrôler e et les exporter tant que svg parce qu'une fois de plus, je veux que mon orteil développeur Avoir cette option toe les exporter comme ça. Ensuite, nous avons toutes ces formes différentes. Je vais les sélectionner, Hit contrôle, manger et je vais exporter les PNG s parce qu'ils sont essentiellement des formes semi-transparentes et les développeurs seront en mesure de les inclure comme ça. Ensuite, nous avons héros BG tremper il contrôlé qu'il a exporté comme étant G parce que nous n'avons pas besoin de l'exporter comme SPG parce que c'est juste fondamentalement un fond de couleur. Si vous l'avez comme un radiant, vous pouvez parler avec vos développeurs S'ils préfèrent, vous leur envoyez svg parce qu'alors ils peuvent adapter le Grady et un peu à l'intérieur hors CSS. Mais s'ils ne veulent pas tolérer, envoyez-les simplement pour être dans le fichier G à la place. Ensuite, nous avons des boutons. Donc, une fois de plus, je vais cacher le texte à cause de mon erreur antérieure. Je vais sélectionner Dergarabedian et la morbidité et frapper le contrôle e exporter leur PNG l'exportation. Et comme vous pouvez le voir, un bot de démonstration n existe déjà. Donc, parce que c'est ce bouton juste ici, je vais simplement sélectionner plus entre le contrôle thermique E et l'exportation. C' est P et G. Je vais cacher tout ça. Mais avant de le faire, je vais simplement ramener au texte comme ça. Il suffit de cliquer sur ce globe oculaire je pourrais Il va revenir et ensuite nous avons toutes ces icônes différentes maintenant, parce que ce ne sont pas mes clients clients. Je vais simplement choisir le contrôle e exporter les PNG s. Juste pour que le développeur sache quelles sont les tailles hors logos qu'ils vont éventuellement inclure à l'intérieur. Lorsque vous travaillez sur un design, assurez-vous que orteil toujours demander à votre client s'ils ont des clients originaux hors, il y a de sorte que vous pouvez les inclure à la place de ces Normal I était. Mais si vous n'aimez pas mon client dans ce cas, je vais inclure ces locaux par défaut. Et puis les développeurs peuvent plus tard le changer parce que c'est simplement une image PNG. Donc fondamentalement une image de celui-ci, l'arrière-plan transparent. Donc ils vont l'inclure comme ça. L' administration a frappé une fois de plus le contrôle e. Je vais exporter cela comme svg hit export et nous avons Demo VT dans lequel nous ne allons pas changer et nous allons le garder tel qu'il est. Mais parce que si je n'aime pas ici, apportez ma mise en page, vous pouvez voir que c'est à trois colonnes blanches, et elles sont à la femme de Khan, donc vous pouvez l'exporter avec un nom différent. Donc Demo Bt en trois, par exemple, pour trois appeler encore mieux. Comme si peut-être que je pourrais inclure ceci comme pour que les développeurs sachent que c'est trois colonnes blanches. Je vais cacher le texte frappé contrôle E export qui s P et G je ramène donc ce texte. Et maintenant, nous avons fondamentalement tous les boutons sur cette page, à l'exception de celui-ci sur. Je vais l'inclure un peu plus tard. Non, laisse-moi me cacher vite. Fais bien parce qu'on n'en a plus besoin. Et maintenant, parce que sur toutes ces lignes, je vais sélectionner ce texte et choisir ce diviseur pour être diviseur. Trois appels, par exemple. Comme si son contrôle e export qui s p et G Et pour ces autres diviseurs, je vais simplement les laisser tels qu'ils sont. Donc juste un petit diviseur et vous n'avez pas à les exporter tous. Vous pouvez simplement exporter un contrôle thermique E, S, P et G. Et maintenant passons aux icônes. Je vais maintenir ma touche de contrôle ou de commande et sélectionner simplement toutes nos icônes. Contrôle thermique E. Assurez-vous que vous sélectionnez SVG hit export car une fois de plus je considère vraiment important. Toby a exporté dans la plus haute qualité possible parce que vous pouvez juste l'imaginer sur de très petits écrans. Ces cycles fonctionnent vraiment bien, car, car, comme vous pouvez le voir au zoom avant complet, il ne perd pas de qualité du tout parce que c'est une icône basée sur des facteurs. Sauf que passons à ça. Et parce que nous avons tous ces éléments à l'intérieur de notre section héros, je ne vais pas les exporter parce que parfois les développeurs veulent utiliser quelque chose comme J Query pour animer toutes ces formes d'arrière-plan, et c'est vraiment à eux et le client ce qu'ils veulent trouver un produit à ressembler une fois qu'il est appelé et publié. Mais dans notre cas, je ne vais pas les exporter parce que, comme on l'a dit, ils sont exactement les mêmes formes que celles-ci. Vous avez deux options, vous pouvez simplement sélectionner les deux. Vous pouvez les regrouper frapper le contrôle E et exporter cette image entière en tant que PNG si vous le souhaitez. Et si vous ne le faites pas, vous pouvez simplement acheter des prix à l'exportation. BG parce que hors des contraintes. Donc, le développeur sait à quelle distance ce texte est de l'ensemble, par exemple, à quelle distance ces boîtes des chirurgiens sur afin qu'ils connaissent toutes ces mesures. Mais sinon je ne vais pas exporter toutes ces formes différentes une fois de plus. Parce que, comme il l'a dit, nous l'avons déjà dans notre dossier, donc il contrôlerait Ito export pricing PG exporté. Demandé désolé, PNG. Et je vais sélectionner l'un d'entre eux parce que tous ont exactement le même fond, mais encore mieux parce que nous avons inclus les noms. Donc prix trois prix BG pour être G prix un b j. Vous pouvez simplement le sélectionner. Il contrôlerait les exportations de PNG. Et puis ce que je vais faire est d'exporter un de ces boutons. Donc, bouton d'achat, je vais cacher mon texte parce que, comme vous pouvez le voir, il y en a un autre ici. Je n'ai pas renommé chaque couche comme un shoot afin qu'il puisse contrôler le PNG s exporté et maintenant, fondamentalement, développeur a tous ces différents boutons. Donc c'est plus que je vais faire la même chose qu'avec les clients précédents. Parce que, comme vous pouvez le voir, je les ai nommés comme un devrait, donc vous pouvez voir locale 567 Je vais frapper le contrôle E export que Mlle Bong une fois de plus. Juste pour qu'ils sachent la position de ces logos par rapport à ce texte. Voyons et enfin exportons nos flèches avec contrôle. E les exporter en SVG est parce que c'est un vecteur basé. Je ne peux pas. Je vais passer à la promo. Et pour celui-là, je ne vais pas éditer ça, Martin. Je ne vais pas l'exporter. Je n'exporterai pas mes formes. Tout ce que je veux faire, c'est simplement exporter mon problème. BG il contrôle vous Exporter. C' est PNG a frappé l'exportation. Et maintenant passons au bloc. Je vais sélectionner mes images et mes avatars. C' est pourquoi j'ai nommé comme ça pour que vous puissiez voir l'image l'une l'autre et ainsi de suite. Hit contrôle E export pour manquer être faire et sceller bouton. Vous pouvez les exporter ou vous ne pouvez pas le laisser vide car comme vous pouvez le voir. Fondamentalement, vous exportez les formes. Habituellement, vous n'exportez pas de boutons avec du texte sur lui parce que si les développeurs veulent changer quelque chose en bas de la ligne, ils ne peuvent pas changer le texte car il est cuit à l'intérieur. C' est essentiellement une image, donc nous allons la laisser telle quelle. Ensuite, nous bougeons le pied d'orteil ou enfin, et je ne vais pas exporter le logo parce que je l'ai déjà fait. Je vais exporter des icônes de médias sociaux afin sélectionné, comme si il contrôle E. Assurez-vous qu'ils sont à SPG Export. Et enfin, je vais choisir mon pied. RBG a frappé le contrôle et est allé exporter ça comme étant G. Et c'est fondamentalement tout pour cette taille. Ce que vous devez faire maintenant, c'est tout simplement passer à autre chose. Nous avons dit à ces autres tailles qu'il m'a fallu 10 ou 12 minutes pour celui-ci parce que je parlais tout le temps. Mais si vous ne le faites pas et si vous continuez à le faire plusieurs fois, vous pouvez obtenir très vite. Et si vous faites tout correctement après un certain temps, vous pouvez le faire en deux ou trois minutes. Donc tu vas avoir besoin de 10 ou 15 minutes pour tous. Et si vous travaillez sur des projets vraiment énormes. Donc, par exemple, disons que vous faites une conception d'APP mobile qui a subi, disons, 200 écrans. Vous devez consacrer un jour à l'exportation de tous ces fichiers différents. Et enfin, une autre chose que je veux mentionner est que vous avez généralement besoin d'un guide de style, et j'ai expliqué ce que sont des idées flagrantes dans mon cours de conception Web. Donc, si vous êtes intéressé par le remorquage, plongée profonde sur les méthodes de conception sur les planches d'humeur, organigrammes et ainsi de suite, vous pouvez vérifier ce cours. Mais fondamentalement, c'est une sorte de document juste ici ou juste ici. Où que vous vouliez le mettre à l'intérieur sera facile. Nous allons sélectionner et déplacer tous les boutons, tous les différents textes afin que vous puissiez fondamentalement sauter ici et simplement sélectionner toutes ces couleurs de circuits si vous utilisez des ombres d'arrière-plan si vous utilisez des illustrations. Si vous utilisez des styles de caractères, vous allez tout mettre à l'intérieur. Et enfin, si vous utilisez des composants comme vous pouvez le voir, je viens déjà de les créer bouton comme mon composant juste pour vous montrer comment cela fonctionne. Mais fondamentalement, vous allez tout mettre à l'intérieur et vous allez envoyer ce fichier final en tant que travail. Fichier TXT. Vous pouvez exporter ce fichier pdf et essentiellement le donner aux développeurs afin qu'ils puissent savoir en bas la ligne ce que vous avez utilisé dans ce projet. Il est également utile pour vous plus tard lorsque vous dites ce projet, si le client revient à vous et veut des changements supplémentaires, alors vous avez simplement ce projet et vous pouvez choisir les actifs que vous avez inclus dans ce guide de style, vous pouvez simplement les copier et les coller dans un travail futur. Donc, fondamentalement commencer les gars sont vraiment puissants. Une vraie recommandation que vous les créez. Mais je n'en ai pas créé pour ce projet parce que, fondamentalement, nous n'avons qu'une seule page, et ce n'est vraiment pas nécessaire lorsque vous créez des pages de destination, par exemple, pour vos clients, ce qui est fondamentalement. Mais c'est vraiment nécessaire une fois que vous avez créé quelques pages différentes. Alors nous allons zoomer un peu plus près et vous pouvez voir que nous avons cinq éléments ici, ainsi que d'obtenir une démo. Peut-être qu'il y a un contact avec nous peut-être la dette du Père Noël. Donc, dans ces cas, je vous recommande vraiment d'inclure un guide de style. Nice, Big One, et vous pouvez simplement sauter ici, et vous pouvez sélectionner, Disons, 1920. Patane, 80 est allé le positionner ici. Il suffit de renommer son guide de style, et vous pouvez ensuite l'étendre comme vous le souhaitez, et simplement copier et coller vos éléments à l'intérieur. Vous n'avez pas à le faire pour chaque taille de votre design. Vous n'avez qu'à le faire pour une taille, et cela vous a vraiment recommandé de le faire pour décider, parce qu'il est visible d'une meilleure façon que tous ces autres parce qu'il est plus grand en premier lieu, donc c'est fondamentalement tout. Vous devez simplement passer à l'étape et exporter toutes ces tailles différentes pour les développeurs, car une fois de plus ils ont besoin de connaître quelques différences dans votre conception. Comme vous pouvez le voir, ici, nous avons un peu d'espace entre notre illustration et notre texte. On n'a pas cet espace ici. Si nous bougeons veulent. Ceci est en bas, donc ils doivent connaître toutes ces marges différentes, frappeurs et ainsi de suite. Donc, vous avez l'exportation de remorquage du tout sur ces différentes tailles. Vous avez également une option de partage, qui est juste ici. Donc, si vous partagez avec eux, assurez-vous simplement de partager pour le développement. De cette façon, ils vont obtenir ce type de style numérique que X T va générer. Et ils peuvent simplement expe attendu comme ça et à Cassie, les différentes mauvaises choses et marges entre tous ces différents éléments. C' est donc une option fantastique. Avoir à l'intérieur. Ce sera X dans la prochaine vidéo. Nous allons parler de l'envoi des fichiers aux développeurs et aux clients, donc je vais y voir. 18. Envoyer les fichiers: Enfin, c'est la dernière étape de notre projet. Nous devons envoyer ces fichiers à nos développeurs et à nos clients. Et pour ce faire déjà vous a montré dans les vidéos précédentes. C' est notre structure de fichiers. Donc ici, nous avons nos dossiers et tous nos fichiers sont à l'intérieur parce que je suis allé de l'avant et tout exporté. Donc, je ne vous dérange pas en sélectionnant chaque couche de tous nos ports. Donc, fondamentalement, ce que vous avez à faire sur, j'ai déjà expliqué que dans la vidéo précédente, vous devez tous les sélectionner, exporter tous dans leurs dossiers dédiés afin que les développeurs puissent facilement y naviguer. En outre, une dernière chose que vous pouvez développer livrer à vos développeurs est des guides de style. Et je n'ai pas couvert les guides de style dans les partitions parce que, comme je l'ai dit, j'ai déjà un cours de conception Web où il ya vraiment en profondeur sur tous ces détails sur le type de cadre métallique, ses organigrammes et ainsi de suite. Donc si vous êtes intéressé, vous pouvez vérifier ce cours. Mais pour le discours, je ne veux pas créer de guides de style parce que nous n'avons qu'une page pour le moment. Si nous avons plusieurs pages hors cours guide de style est nécessaire pour livrer à vos clients et développeurs afin qu'ils puissent rapidement ouvrir cela. A l'intérieur. Off ces oeufs souiller et simplement copier et coller des éléments dans leur citation ou les utiliser et les copier où ils le veulent. Aussi pour les guides de style, vous devez aller créer ces composants séparés. Donc, comme vous pouvez le voir, nous avons seulement le bouton de démonstration ici comme un composant pour les boutons. Mais pour les coupes Sal, vous devez créer tous ces différents composants pour différentes tailles de Barton afin qu' ils puissent les utiliser plus tard. Ou si vous êtes d'accord avec le client pour créer encore plus de pages pour ce projet particulier, vous pouvez simplement utiliser ces composants et simplement les copier et les coller dans votre travail. Donc, c'est fondamentalement tout pour la pièce de conception de la pièce réactive. Et maintenant, cette dernière partie est de tout livrer aux développeurs. Voici donc notre original adobe oeufs souiller. Donc, c'est fondamentalement ce dossier. Il vous suffit de l'enregistrer sur votre ordinateur afin que vous puissiez voir Cendant à vos clients et développeurs. Et enfin nous l'avons fait. Ce fichier, qui s'appelle Project Resource, est juste un fichier texte de base, et c'est ce que j'ai dit. Incluez toujours ces fichiers afin que vous puissiez minimiser le temps que vous allez passer à parler avec les développeurs et obtenir vos clients une fois le projet terminé. Donc, fondamentalement, vous répondez à toutes les questions pour eux avant même qu'ils ne vous les posent. Donc ici, nous avons simplement des liens orteils les polices Google et simplement expliquer que ces téléphones sans air et lorsque le clic sur ces liens, ils peuvent accéder à ces fonds qui sont gratuits, et ils peuvent les utiliser à la fois pour un usage personnel et commercial si ils veulent utiliser ces téléphones que vous avez utilisés dans vos conceptions, parce que parfois les clients changent d'avis en moins de seconde, et ils veulent utiliser un front différent. C' est très bien, aussi, aussi, parce qu'alors ils peuvent parler avec les développeurs et les développeurs peuvent tout changer dans le froid vraiment facilement. Ils peuvent l'adapter à l'intérieur de la CSS, et ils peuvent inclure un fonds complètement différent, donc cela va changer le hors du site Web. En outre, nous avons des images et vous pouvez, comme je l'ai dit, leur envoyer des images séparées. Mais parce que nous avons exporté toutes les images dans toutes ces tailles de fichier différentes afin que vous puissiez voir ces images pour les blocs, par exemple, et vous pouvez les envoyer. Mais si vous le souhaitez, vous pouvez simplement leur envoyer un lien vers le site Web. Très obtenu des images de. Mais dans la plupart des cas, les clients vont utiliser leurs propres images de toute façon, donc ce ne sont que des images d'espaces réservés, mais vous devez toujours leur envoyer ces images juste au cas où ils veulent utiliser quelques-unes de ces images dans leur produit final. Donc fondamentalement, c'est pourquoi nous envoyons ce lien pour qu'ils puissent y accéder facilement. Vous pouvez également copier et coller des liens vers des images individuelles si vous le souhaitez, et le vraiment vous recommande de le faire pour les projets plus petits. Mais pour les projets plus importants, vous pouvez créer des collections, par exemple, sur splish directement, et vous pouvez simplement copier et coller le lien vers cette collection particulière. Et ils ont des images de cette collection entière à leur disposition afin qu'ils puissent les utiliser dans la taille maximale possible où et comme ils le souhaitent. Enfin, nous avons des icônes, et dans ce projet particulier, nous utilisons des icônes matérielles qui sont une fois de plus Google sur les icônes , qui sont libres d'utiliser à la fois dans des projets personnels et commerciaux. Si vous utilisez des icônes payantes, il est vraiment important que vous le mettiez en évidence auprès du client. Si le client veut payer pour ces icônes, ou si vous utilisez des fonds premium d'images premium, vous devez indiquer tout cela dans avancé. Donc, ce client peut savoir s'il veut payer pour quelque chose comme ça, parce que parfois son budget ne couvre pas cela. Donc, une fois que vous livrez tout cela et vous n'avez pas à livrer cela comme vous pouvez donc convertir en pdf. Si c'est quelque chose que vous voulez, vous pouvez enfin les sélectionner tous et sur Windows. Donc il suffit d'aller droit et simplement aller à mon WinZip et ajouter à l'agence de design studio Zip. Et je veux créer un fichier zip pour ce projet particulier parce qu'il est beaucoup plus facile d' envoyer des fichiers ZIP, en particulier par e-mail. Vous pouvez les envoyer par mou étaient différents chats. Il est donc très important que vous puissiez condenser tous ces fichiers dans la taille la moins possible . Donc, si j'apporte cette fenêtre parce que j'ai deux moniteurs sur mon ordinateur, vous pouvez voir qu'il n'a pas dit beaucoup d'espace parce que ce projet ne prend vraiment pas beaucoup , surtout si vous considérez que tous ces changements de conception que nous avons fait que tous ces actifs différents ne prennent que 2,5 mégaoctets, sorte que vous pouvez voir que tout prend environ quatre mégaoctets. Et c'est pourquoi j'adore Adobe X'd et tous ces autres logiciels l'aiment. Ainsi, par exemple, figue, MMA et croquis, mais esquisse pas tellement, parce qu'il ne comprime vraiment pas tout cela bien, comme figment et suivant D faire. Par exemple, parce que hors de ces tailles de fichiers plus petites, vous pouvez voir la taille de moins de quatre mégaoctets, vous pouvez vraiment envoyer l'ensemble du projet à nos clients et aux développeurs. Ils vont facilement le télécharger et le décompresser sur leur ordinateur et l'utiliser tel quel. Donc, je vous recommande vraiment d'emballer tous vos fichiers de projet à l'intérieur d'un dossier Zip car il va être beaucoup plus facile pour vous de partager cela avec vos développeurs et clients. Et il va être beaucoup plus facile de stocker ce type de fichier pour vous, car vous voudrez peut-être le conserver sur votre ordinateur pour des références futures. Parce que, par exemple, disons que ce projet est lancé demain et que le client veut de nouvelles pages supplémentaires dans six mois. Vous conservez juste tous ces fichiers originaux. Donc, disons que ce projet d'agence de conception de studio sur votre ordinateur afin que vous puissiez facilement y revenir et ouvrir le fichier original et simplement continuer très laissé de côté la fois précédente. Il est donc très important que vous économisiez autant d'espace que possible en raison du partage avec les clients et les développeurs, et surtout si vous voulez conserver ces fichiers sur votre ordinateur à long terme. Et j'ai vraiment recommandé parce que j'ai encore à ce jour des clients qui me reviennent, mais que je les avais, par exemple, il y a cinq ans ou six ans, voulant que je crée quelques changements supplémentaires à la design original, ou peut-être un design complet de trois. Donc, garder les fichiers originaux sur votre ordinateur est vraiment important, surtout pour ces oeufs. Refile parce que, comme vous pouvez le voir, ils sont vraiment petits et vous pouvez garder des milliers et des milliers de projets différents et différents fichiers sur votre ordinateur, et cela ne va pas vraiment prendre trop de place 19. Merci: merci d'avoir regardé le cours. J' espère vraiment que vous y avez trouvé de la valeur. Rappelez-vous juste, lorsque vous commencez à concevoir pour réactif, assurez-vous orteil. Demandez toujours aux développeurs ce qu'ils utilisent avant même de commencer à concevoir. Ainsi, vous pouvez savoir à l'avance quelles techniques vous allez utiliser une fois que vous obtenez une partie réactive des orteils de votre conception. Donc, encore une fois peu importe si vous devez créer vos solutions personnalisées ou s'ils créent les solutions pour vous ou si vous utilisez des solutions telles que bootstrap ou pêcheur que quelqu'un d'autre a déjà créé. En outre, assurez-vous que lorsque vous exportez vos conceptions à la fin du projet pour exporter toutes les tailles pour que les développeurs puissent y accéder en même temps, assurez-vous de les séparer en dossiers comme un spectacle vous dans le cours et que vous allez pour éliminer cette rétroaction supplémentaire de la part des développeurs et des clients. Tu vas finir le travail plus vite. Vous allez livrer les fichiers tels qu'ils devraient être livrés. Et il n'y aura tout simplement pas de frictions entre vos développeurs et vos clients. Merci encore d'avoir regardé le cours. Maintenant allez-y et créez ces designs impressionnants et rendez-les réactifs. Merci 20. 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 21. 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.