Le wireframing pour la conception de site Web pour les débutants

1. Introduction: bienvenue aux cadres de fil pour les concepteurs de cette classe, vous allez apprendre les bases de l'encadrement de fil sur. Nous allons explorer les styles analogiques, low fi et hi fi. Vous allez être en mesure de travailler sur des livres de papier, crayon et croquis, des notes postées, illustrateur photo shop et des actes de navigateur Web en ligne. Vous allez voir les divers outils que vous pouvez utiliser et comment ce style de travail peut réellement profiter et améliorer vos compétences en conception. Le cadre métallique vous permet de gérer la structure squelettique de votre conception de site Web plutôt que enliser par les détails tout de suite, ce que je sais parfois nous sommes aptes à dio. Donc, dans cette classe, vous allez apprendre les bases de la façon dont le cadre de fil de remorquage, quand l'utiliser et comment l'utiliser comme d'habitude avec ma classe, je veux que vous exploriez et amusez-vous 2. Fournitures de cours: Bon, allons-y et jetons un coup d'oeil aux fournitures dont vous aurez besoin pour encadrer des fils pour un type de cadrage, vous avez juste besoin d'une sorte de papier. Cela pourrait juste être, vous savez, papier de base pour tablette, poster des notes et une sorte de marqueur de crayon. Un ustensile d'écriture. Si vous êtes plutôt un travailleur numérique, vous pouvez également utiliser l'ordinateur pour cette classe. L' illustrateur ou Photoshopped fonctionnera parfaitement pour cela. Si vous aimez dans le design, vous pouvez remplacer cela dans une houle, mais je vais montrer illustrateur et photo acheté pour cela, et j'ai fourni des modèles pour chacun d'eux pour vous, pour ce projet de classe aussi. Vous pouvez utiliser des sites de cadre métallique en ligne tels que Besame IQ. Ils fonctionnent très bien. Celui-ci a un procès d'un mois. Certains d'entre eux sont gratuits. Certains d'entre eux ne sont pas eso. Il suffit de trouver ceux que vous avez expérimenté dans lequel si c'est vos besoins économiques et de voir ce qu'ils dio. Mais les libres sont assez décentes. Donc je dirais « Commencez par là ». D' accord, allons-y et commençons 3. Le projet !: d' accord. Il est temps pour le projet de classe. Dans ce projet, vous allez concevoir des cadres de fil de sites Web. Maintenant, ça pourrait être un que tu as inventé. Cela pourrait être votre propre site web. Ou cela pourrait être une refonte d'un site qui, selon vous, a besoin d'un peu d'amour pour cela . Nous allons concevoir trois de ses pages. De cette façon, nous pouvons voir sa cohérence et son unité sur les trois pages. Ce que vous allez faire est vert le choix du style qui vous semble le plus intéressé. Vous aimez l'analogique ? Croquis ça. Prenez votre papier, prenez vos crayons, prenez votre carnet de croquis et voyez à quoi vos pages peuvent ressembler. Avec cela Vous aimez poster des notes. Vas-y. Vous avez un tableau noir ou un tableau blanc ? Croquis là-dessus. Aimez-vous le système lo fi ? Nous ne nous inquiétons pas encore trop de grilles. Ensuite, essayez illustrateur ou boutique photo et voyez ce qui se passe là-bas. Peut-être que tu étais intéressé à apprendre la moitié. Construisez-le sur le style de navigateur en ligne à cela, Explorez un couple d'entre eux et voyez lequel fonctionne le mieux pour vous. Comme d'habitude, l'exploration est toujours la clé. Peut-être qu'à ce stade, tu ne sais même pas ce que tu aimes. Si c'est le cas, essayez un peu de tous. Souviens-toi, on ne s'enlise pas par les couleurs. On ne s'enlise pas par le genre. On ne s'enlise pas par des détails finis. Nous nous inquiétons juste pour le système squelettique. Et comment ce framework interagit-il et fait-il passer le message sur votre page ? Donc on ne met pas de texte, on va l'utiliser. Lauren, c'est dedans. Si tu le dessines, ça pourrait être la boîte avec des gribouillons dedans. Ne vous inquiétez pas pour la viande et les pommes de terre quand vous vous inquiétez de ce que l'assiette est réellement. Alors pour cela, détendez-vous et amusez-vous. Expérimentez et voyez quel style vous convient le mieux. Chaque fois que vous avez vos trois pages complètes et quel que soit le style qui vous intéresse, allez-y et téléchargez-la dans le projet de classe. Vous pouvez également montrer certaines des étapes que vous avez prises pour cela. Je trouve toujours que voir le processus aide toujours, et ce qui est génial avec le partage de compétences, c'est quand vous voyez ce que tout le monde fait, vous obtenez une idée plus large des options qui sont là-bas donc partager. Partagez votre projet et partagez votre processus. Et puis dans les projets de cours ci-dessous, nous pouvons voir votre travail et voir à quoi ressemblent vos dessins. Comme d'habitude, amusez-vous. 4. Qu'est-ce qu'un Wireframe ?: D' accord. Alors, quelle est exactement la raison pour laquelle vous piégez ? Vous posez peut-être une bonne question, et c'est pour ça que nous sommes là. Le cadre en fil de fer est un outil incroyable pour la conception. Et pour les concepteurs Web, cela nous donne le temps de réfléchir à nos pensées et de comprendre notre plan d'action , pour ainsi dire. Je sais qu'il y a cette tentation que tu sais toujours, ça doit être ce visage serré. Il doit être cette couleur que j'aimerais avoir X, y et Z tout cela pousser sur le côté. Nous ne nous inquiétons pas des détails sur celui-ci. Nous nous inquiétons de sa fonctionnalité. Considérez ça comme un plan directeur. Donc si tu construis une maison, il y a des chances que tu ne vas pas sauter et dire, c'est le ballon. C' est l'autre mur. Oh, ça va être rose et jaune signature. Oh, ça va être magnifique. Ne vous inquiétez pas pour les détails. Ne vous inquiétez pas de la structure réelle de juste le faire paraître assez bien, ce n'est pas ainsi que cela fonctionne. Vous devez avoir les plans pour que vous sachiez comment fonctionner et tout cartographier. Quelle est sa taille ? Quel est son contenu, etcetera. Donc, au lieu de nous inquiéter de la couleur de la peinture de la maison, nous allons nous inquiéter de la fondation réelle et de la sous-structure de celui-ci. Donc c'est notre système squelettique. Nous devons nous appuyer sur elle éventuellement. Mais c'est la première partie. C' est la partie qui va lui donner sa colonne vertébrale et sa structure. Donc pour cela, pensez que ce que je vais appeler avec amour est le croquis de fantaisie. Vous pourriez commencer avec quelques miniatures Lee Doodles juste pour faire avancer vos idées initiales. Mais pour entrer dans le cadre de fil réel dans l'étape, vous allez travailler avec les détails de base afin que vous puissiez construire la structure autour de cela . Donc pas de couleur, pas de type. Je vais le dire beaucoup, alors ne vous inquiétez pas pour les détails. Préoccupez-vous de la coquille. Donc, pour cela, il y a quelques façons que vous pouvez, bien sûr, aller à ce sujet le style analogique où vous venez de vous asseoir sur drawl, non rafted out. Vous pouvez le faire le lo fi, qui est Photoshopped illustrateur sketch ups et aussi vous pouvez aller Hi fi, qui est un peu plus fantaisie pour illustrateur et Photoshopped. C' est là que nous avons plus à traiter avec les colonnes et les grilles et aussi. Ce sont des outils en ligne pour encadrer les fils. Je vais approfondir chacun de ces détails dans leurs propres sections dans les prochains chapitres . Mais maintenant, pensez au cadrage de fil comme un croquis initial qui va vous permettre de voir comment tout va couler ? Qu' est-ce qui se connecte à quoi ? Où allez-vous ? Comment la vue va-t-elle être manipulée à travers la maison du site ? Son flux ? Est-il facile à utiliser ? Est-il évident un design intuitif ? Ou y a-t-il un hoquet ? C' est l'étape que vous pouvez pré-travailler cela afin que lorsque vous entrez réellement dans la partie codage de ceci, ces hoquets, pour la plupart, devraient déjà être travaillés. Donc, au lieu d'aller au code esquissé, peut-être que c'est bien d'avoir un pas entre les deux, qui est le cadre métallique. Pour cela, nous allons explorer une variété d'options et de styles de travail afin que vous puissiez trouver celui qui vous convient le mieux. 5. Types de Wireframes: Jetons un coup d'oeil aux différents types d'options de cadre de fil que vous avez. L' un d'eux va convenir à votre mieux. Et comme toujours, si tu as suivi mes autres cours, tu sais ce que je vais te dire ensuite. Comme jamais expérimenter, essayer chacun d'entre eux et comprendre lequel coule réellement le meilleur pour vous et votre style de travail. Le 1er 1 que nous allons traiter est l'analogique pour analogique. Vous pouvez utiliser une variété de matériaux pour cela, et tout cela va être mains sur le style afin que vous puissiez aller avec le papier classique et le crayon . Ça ne devient pas beaucoup plus simple que ça. J' aime toujours commencer par un post il notes ou les notes collantes afin que je puisse en quelque sorte réarrangé et mélanger les choses autour. Les tableaux noirs fonctionnent très bien. Vous pouvez également utiliser des découpes en papier qui ressemblent à des notes collantes. Certaines personnes aiment utiliser des pochoirs. C' est plus pour si vous entrez dans le cadre U. S. U X fil cadrage si mobile design, etcetera sur ainsi. embarquement blanc, qui est, vous savez, comme le chop boarding. Mais, vous savez, juste le faire monter et vous savez, c'est un peu plus interactif que vous pouvez travailler avec votre équipe sur celui-là. Eso va dépendre de ton style de travail, du papier et du crayon. Typiquement, ça va être toi. Si bas, notes collantes la côtelette vers les planches blanches, etcetera. Ce sera probablement plus de travail basé sur l'équipe après analogique, nous allons traiter avec faible Fi sur. C' est juste un peu, je dirai la version plus fantaisie de l'analogique. Mais nous le gardons toujours lâche, rude et quelque peu gestuel pour cela. Ah, vous pouvez utiliser Illustrator. Vous pouvez également utiliser la boutique photo pour cela. Et si vous ou votre entreprise avez un croquis, vous pouvez également utiliser le croquis pour cette classe. Je vais juste être illustrateur de démonstration et photographié pour ça. Si tu fais ça du point de vue le plus lofi,tu ne vas pas t'enliser avec des grilles là-dessus. Si tu fais ça du point de vue le plus lofi, Vous êtes juste en quelque sorte d'organiser les éléments de la page et de voir comment ils fonctionnent. Quand on entre dans le haut 5,c'est là que tu as commencé à t'occuper des poignées et maintenant, c'est l'heure de la haute amende pendant que tu cadres. Quand on entre dans le haut 5, c'est là que tu as commencé à t'occuper des poignées et maintenant, c'est l'heure de la haute amende pendant que tu Euh, celui-là. Tu y vas, Teoh, tu t' occupes des grilles. Tu vas avoir un système modulaire de colonne de tri sur lequel tu vas le baser. J' ai construit un modèle pour vous une version et Illustrator One va être dans la boutique photo afin que vous voulez essayer le hi fi. Le shell existera déjà pour vous. Alors ce qu'on va faire avec bonjour, Fi. J' ai juste donné ces deux-là. Nous allons encore y faire face grâce à l'illustrateur et à la boutique photo. Euh, vous pouvez aussi utiliser des cartes web en ligne pour cela. Hum et je vais le démontrer aussi. Dans une section qui vaut la peine de venir de cette façon, vous pouvez voir comment vous savez que APS fonctionne pour cela plutôt que de le construire et Photoshopped également un illustrateur. Cela a payé pour le logiciel de cadre de fil pour cela. Je vous recommanderais si vous alliez vraiment commencer là-dedans. C' est là que vous allez prendre l'engagement pour ça. Ah, un. Belle chose que je vais ajouter, um Adobe Creative Cloud vient de sortir de la bêta, le x d, qui est un je vais l'appeler plus d'une maquette plutôt que d'un cadrage de fil, parce que vous faites plus avec les détails sur celui-là. Mais si vous avez déjà le cloud créatif, faites suivre cette application afin que vous puissiez en quelque sorte voir comment vous pouvez utiliser cela pour des simulations rugueuses ainsi. Mais pour le hi fi, nous allons faire face à un peu plus de construction de grille et obtenir les éléments dans l'endroit, s' enliser par les détails, comme les polices de caractères de couleur, etc. D' accord, alors quand est-ce que tu fais vraiment un cadre métallique ou, tu sais, quand utilises-tu tes cadres métalliques ? Euh, typiquement, si je devais passer par, vous savez, le flux de travail. Tu sais, tu commencerais par un croquis rapide et tu vas penser que c'est ce plan ? Vous construisez une maison, mais vous devez d'abord avoir ce plan. Vous ne sauteriez pas juste parce que beaucoup étaient des murs et correspondent et tout serait tordu. Nous avons besoin de tout arracher pour savoir où sont les portes dans les pieds de page, etc. Avant qu'on puisse la construire avant de pouvoir décider, tu sais si c'était une maison avant de décider de quelle couleur c'est, quel tapis ? Alors tu sais, comment on va peindre, clochard ? Vous devez comprendre, vous savez, où est-ce que ça va être, comment fonctionne le cadre squelettique ? Euh, aussi, quelque chose à garder à l'esprit est juste d'avoir une bonne communication d'équipe. Si vous travaillez dans une équipe, si tout le monde voit le plan, vous savez que vous pouvez réorganiser les pièces, vous pouvez comprendre ce qui va, et c'est toujours dans cette phase flexible. Une fois que vous entrerez dans la phase de code, vous serez un peu plus enfermé. Donc, si vous ne travaillez pas seul, vous savez, si vous travaillez seul, c'est juste que vous et votre client êtes sur scène. Vous n'avez pas à vous soucier autant de la communication avec une équipe. Il y a encore une équipe, mais avec une équipe de quelques personnes, vous savez que cette étape est super utile parce qu'elle met tout le monde sur la même page et rappelez-vous toutes les choses et la communication de conception va être la clé 6. Méthodes de travail de Wireframe: comme pour tout ce qui est de la conception, nous devons déterminer quel système fonctionne le mieux pour vous, nous devons déterminer quel système fonctionne le mieux pour vous,qui sera celui qui sera le plus efficace en temps et celui qui vous donnera les meilleurs résultats. Donc, ce que nous devons faire est de déterminer quel système fonctionne le mieux et d'expérimenter pour que nous puissions le comprendre . Le plus basique serait de commencer par un simple croquis. Fais juste sortir ton idée. Vous pouvez penser à cela comme une classe de dessin. Il serait considéré comme le tirage gestuel. De là, vous pourriez juste aller de l'avant et sauter dans le code. Ce serait la version la plus simple et la plus simple de génération d'idée pour votre travail . Cette étape serait de commencer avec le cadre de fil réel, que ce soit e haute def pour basse def, puis commencer à rincer certains de ces éléments visuels juste pour donner un peu plus cohérence. Quelles sont les images ? Que ce soit le texte, quels sont les en-têtes ? Une fois que vous avez compris cela, vous pouvez aller de l'avant et sauter dans la partie codage de votre projet. D' accord, pour notre troisième version, tu l'as deviné. On va commencer par ce croquis. Peut-être aussi ajouter une liste à cette liste. Faire pourrait être un excellent moyen de générer des idées pour vos projets. Après ça, saute dans le remorquage. Cadre en fil de fer, haute def Low. Déf. Quoi qu'il en soit, celui qui fonctionne le mieux pour vous, puis ajoutez certains de ces éléments visuels. Quelles sont les images ? Quelles sont les parties de texte de votre site ? Une fois que tu l'as sorti un peu, tu l'as deviné. Vous pouvez sauter et faire démarrer ce code. Je voulais simplement parler brièvement des éléments visuels de l'air, des détails qui entreront en jeu une fois que nous commencerons à participer un peu plus à notre processus. Un de ces détails que nous devons accorder une attention particulière lorsque nous arrivons à l'étape orientée détail est la typographie du site. Qu' utiliserez-vous pour l'en-tête ? Qu' est-ce que tu vas utiliser pour le corps, etcetera ? Avez-vous des polices Web que vous devez suivre ? Comment cela se relie-t-il à l'image de marque ? Ces petits détails vont entrer en jeu une fois votre cadrage de fil terminé ainsi ne vous enlisez pas par la couleur. La couleur va venir après le cadrage du fil aussi. Allez-vous utiliser un générateur de jeux de couleurs pour cela ? Est-ce qu'ils ont déjà une identité de couleur de marque préexistante avec laquelle ils associent déjà leur marque ? Et à quel type d'images allez-vous traiter pour votre site Web ou elles seront plus grandes ? Vont-ils plus au carré dans une sorte de style blawg ? Tu sais ? Sont-ils liés à l'article ou sont-ils liés à d'autres sources ? Ces air, les détails que vous devez penser quand il s'agit des images ? Peut-être qu'une partie des images est que vous allez devoir faire face à la création de tous vos boutons et radios et de tous les bits et bobs qui entrent dans ce domaine. Je vais juste mettre ça dans le joli petit tas d'etcetera, tu vois ? Ça va avoir une vidéo ? Avez-vous des liens sur les réseaux sociaux, etc. ? Les contacts, les abonnements. Ça va aller dans ce petit, tu sais, pot de crock. Je Donc les détails que vous allez vous inquiéter, mais ne vous inquiétez pas au sujet du genre de détail fini d'eux parce qu'avec le cadre métallique, vous êtes juste à la recherche des os nus. Tu cherches le squelette. Après avoir franchi cette étape, vous pouvez commencer à devenir difficile avec votre conception. 7. Considérations de conception de site Web: avant de commencer un projet de conception, nous avons quelques considérations auxquelles nous devons prêter attention avant de nous lancer. quoi vous devez penser, c'est qui quoi ? Pourquoi et comment de votre projet de conception. Le 1er 1 le qui est votre public cible ? Qui va venir sur ce site et qui est le centre ? Le prochain domaine sur lequel se concentrer est le quoi ? Quel est le but du site et qu'allez-vous faire pour accomplir cette tâche ? Le pourquoi est un élément sur la page que nous ne concevons pas au hasard et nous ne jetons pas des éléments juste pour rigoler. Pourquoi ? Pourquoi est-il sur la page ? Pourquoi l'aérer l'ancrage à cet endroit ? À quel but est-ce que ça sert ? Nous le livrons avec votre prise de décision, cette section vous permet de comprendre cette partie . Et enfin, comment sont tous les éléments sur votre page et sur votre site ? Unifié. Comment allez-vous tout lier ensemble ? Comment allez-vous utiliser ces éléments et ces principes ? Quel est cet objectif final de l'unité ? C' est le moment de disséquer cette partie et de comprendre comment allez-vous réellement faire cette tâche 8. Considérations d'éléments: une fois que vous avez le qui, quoi, pourquoi et comment compris. Maintenant, il est temps de creuser encore plus profondément. Alors, quelles sont les considérations du site auxquelles vous devez penser en premier ? À quoi ressemble ton orteil de navigation ? C' est quoi ton en-tête ? Quel est ton pied de page ? Quel est le contenu réel de la page ? D' où vient-il ? Et quelles dates limites avez-vous besoin de fixer pour ces images ? Fournissez-vous les images ? Votre client fournit-il les images ? Tu vas avoir une barre latérale ? Une recherche ? Loin. Qu' en est-il des éléments interactifs ? Donc, chaque fois que vous répartissez cela dans votre cadre métallique, gardez ces parties à l'esprit aussi et réfléchissez à où seront-ils ? Comment vont-ils se connecter les uns aux autres et comment vont-ils être unifiés sur tout le site ? Donc, si vous étiez tout à fait sûr de quels éléments vous deviez traiter en premier, c'est une bonne liste de démarrage pour vous. Pour ceux d'entre vous qui sont nouveaux dans le Web design utilisé, ce est un gars pour comprendre quelle partie faire vous avez besoin pour créer votre ensemble 9. Techniques de Wireframe lo Fi (Analog): d' accord. Il est temps de commencer pour cette section. On va s'occuper de ce que j'appelle l'analogique. Donc, le papier, le post, il note les marqueurs. Peu importe ce que vous avez les mains que vous pouvez utiliser, vous pouvez utiliser les tableaux noirs et vous pouvez utiliser les tableaux blancs. Aussi, si c'est ça, tu es disponible pour ma démo. Je vais m'occuper du journal parce qu'il est juste là devant nous. Bon, donc on va prendre mon marqueur Dandy Sharpie pratique pour qu'il soit plus facile à voir. Mais tu peux avoir tes crayons. Vous pouvez avoir des marqueurs de rubrique, les marqueurs de torche. Tout ce qui fait une marque va faire le travail. Donc typiquement, tout ce qui tourne autour du monde, dessiner tend à effrayer les gens. Ce qu'il faut faire, c'est enlever ce genre de mythe. Lorsque vous faites un croquis, vos esquisses ne sont pas basées sur le concept de perfection. Ce que vous allez travailler, c'est juste y faire face de l'idée d'ici à ici. Donc, ne vous inquiétez pas d'avoir tout parfait et aligné. Souviens-toi, c'est pour ça que tu encadres. On fait juste descendre les idées pour voir si elles vont s'écouler et s'elles vont travailler . Donc, pour le 1er 1 dans le dessin, vous pouvez faire ce qu'on appelle l'esquisse gestuelle. Donc le dessin gestuel est juste, vous savez, vous ne vous inquiétez pas nécessairement du fait que tout soit agréable, soigné et parfait. Vous vous inquiétez de faire tomber l'idée et de capturer ce moment difficile dans le temps. Donc, si ce sont nos trois pages, c'est dire, par exemple, la page d'accueil qu'ils ont faite dans le contact. Commençons donc par ce que j'appellerai avec amour les trois bases. Donc, si pour votre projet de classe lorsque nous faisons nos trois pages et que vous n'êtes pas sûr celles sur lesquelles travailler, faites la maison à propos en contact parce qu'ils sont à peu près standard et stable sur toute accueil de la page Web. C' est celui qu'ils vont voir en premier, ce sera celui qui sera immédiatement hors de la batte. Donc pour notre dans ce cas, style gestuel, peut-être que je vais avoir mon en-tête en haut, et je vais avoir les histoires défilantes ici. Peut-être une photo et une autre histoire, et il y aurait une petite barre de défilement et ensuite nous aurions peut-être des liens de médias sociaux ici vidéos . Ou mettons-nous une vidéo ici parce qu'on fait de la publicité ou qu'est-ce que tu as ? Et ça fait du bien, parce que tu es genre, OK, je sais où tu sais. Je pense que ça doit aller dans ça, tu sais, peut-être notre menu. Peut-être que nous mettrons notre menu juste sous notre barre d'en-tête. Et donc pour notre page à propos, nous savons que nous avons cette partie qui doit être traduite vers le bas. Donc, notre en-tête d'image et ensuite notre menu. Ok, donc pour le sujet, on a gagné le même genre de position parce qu'on voulait ressembler à un eso unifié pour ça. Je vais avoir le texte racontant l'histoire du sujet. Et peut-être que ce serait une photo. Voici une belle photo. Et peut-être que c'est une image de leurs produits, peu importe ce que ce serait. Donc, je ne suis pas exact. Je ne suis pas, vous savez, délibéré avec ma marque. Je suis juste en train de faire tomber l'idée pour que je puisse voir, tu sais. Ok, peut-être que je n'aime pas comment ces photos fonctionnent. Tu sais quoi ? Si à la place je le retourne ou je fais cette partie deux colonne. C' est donc un peu plus facile à lire. Il vous donne la chance de le voir et de commencer à travailler autour d'elle. Et vous obtenez pour la page de contact. Voilà notre grande bannière, et voilà notre menu. Et puis pour la page de contact aura probablement un titre. Un ici. Nous sommes heureux de vous aider. Et puis on aura nos champs d'entrée. Donc nom, adresse, vous savez, vérifiez. Oui. Si vous voulez vous abonner dans un bouton de soumission et puis peut-être pour cela, je vais juste le laisser vide parce que nous voulons voir une partie du blanc, la page, donc ce n'est pas trop écrasant avec le design que vous allez remarquer tout de suite. Il y a quelque chose dont je ne m'inquiète pas. Pas inquiet pour la couleur. Je me fiche de ce qui se passe là-bas. On n'est pas encore dans cette étape. Je ne m'inquiète pas pour les détails. Comme, quoi ressemble cet en-tête ? Qu' est-ce que mes boutons « No », aviateurs. Vous ressemblez et je ne suis pas inquiet pour mes polices de caractères. On ne fait pas les détails. Je pensais juste à ce sujet dans un cadre squelettique rapide . Point de vue. Bon, donc c'est notre style gestuel qui va le jeter sur le côté. Et si vous voulez être un peu plus précis, vous pouvez prendre notre ami le souverain. Maintenant, j'ai aussi des papiers calqués et des tablettes de dessin. En fait, j'aime le travail des orteils sur du papier calque aussi, car il vous donnera la possibilité de faire des couches sur le dessus. Donc, si vous voulez essayer du papier calque, c'est aussi très bon, et c'est utile. Bon, donc pour la prochaine partie, soyons un peu plus précis. Donc ce sera pour ceux d'entre vous qui vous connaissez, comme un peu plus de style exigeant au four quand vous travaillez. Et je vais juste aller Teoh, faire une boîte, ça va servir de page. Je vais juste un sur chaque page, donc je vais dio une belle petite marque pour que je puisse fondamentalement obtenir mon cadre le même, ce qui serait le même sur tous, et je vais juste dio peut-être un pouce plus. Alors, cette façon, j'ai l'uniformité. Donc pour celui-ci, je vais juste faire une démonstration avec une, mais ce sera la même pour les trois pages. Donc, chaque fois que vous avez cette coquille, mettez en place un royaume. Photocopiez-le si vous voulez ou construire la boîte dans la boutique photo sont illustrés et juste les imprimer . Et il suffit de l'utiliser comme un guide d'ID de modèle que cela fonctionne très bien aussi. Alors construisez ces lignes pour la boîte. Et pour cela, nous allons obtenir un peu plus, vous savez, exigeant contre vous, juste le style rugueux à main levée du geste. Celle-ci, nous allons être plus genre de dessinateur, comme avec notre style de travail. Très bien, tête ça. D' accord. Donc maintenant, nous avons notre émission, et ça va ouvrir cette bonne page d'accueil pour que je puisse garder une trace de vous savez, où je suis avec ça. Faites-le pour autant de pages que vous recherchez avec. Je vais rester avec les mêmes concepts que vous pouvez le voir dans ce, vous savez, différents styles de travail. Mais pour celle-là, voyons ça. On va juste avoir l'en-tête de l'image en haut d'une sorte. Alors allons de l'avant et construisons ça. Donc je vais aller chercher le mien, et je pense que je vais juste faire un demi-pouce. Je suis désolé quartier Greenwich et ensuite 3/4 pouce juste pour garder une bonne proportion et encore écho à ce que nous faisions là-bas. Et je vais juste pour celle-là, l' arc d'un côté à l'autre. Alors va remplir la page chaque fois que je vais faire mon travail de conception. Maintenant, chaque fois que je dis espace chapelier, alors peu importe ma bannière ou ce qui se passe ici comme le nom de la page d'accueil ou le nom du site, qu'avez-vous ? Um, ça n'a pas forcément à prendre tout ça graphiquement. Il va juste vivre dans ce conteneur. C' est l'espace où il fait sa maison pour ça. Nous voulons montrer qu'il s'agit d'une image d'une sorte ou d'une autre. Donc on doit faire un X. Le X est en train de se montrer et vous allez le remarquer. C' est aussi un illustrateur et dans la conception, Chaque fois que nous travaillions avec une boîte d'image, il a ce X à travers elle, il montre que le conteneur tient quelque chose, et que quelque chose est, dans ce une image. D' accord, donc de notre autre, nous avons eu notre menu, et je vais juste faire une ligne pour ça aussi. Maintenant, ça devrait suffire. Et puis le menu, bien sûr, resterait cohérent dans chacune de nos pages. Et vous savez, vous pouvez ombrager cette partie si vous voulez, car elle est assez proche de ça. Ou tu peux faire ton ex. Certaines personnes ici vont changer les couleurs de celui-ci. C' est pour ça que j'ai les coptes dehors. Aussi, ça va être à vous de décider. Vous pouvez, vous savez, peut-être que l'air de navigation sera d'une couleur. Les images vont être une autre et le Texas une autre, donc cela va dépendre du système avec lequel vous travaillez. Je vais juste le remplir, puisque le temps est une sorte d'essence ici. Mais encore une fois, cela dépend de votre style de travail. Bon, donc on sait que ça va être dans le menu et dans l'autre. Ce qu'on avait c'était notre titre et je vais juste utiliser le coin de ma règle pour cette partie. Bon, voici notre titre. Un à ce sujet est peut-être que ça va être une page blawg. Donc, pour notre blawg, vous savez, nous voulons que nos articles soient le leader de notre page pour nos téléspectateurs, pour le public, pour les lecteurs. Donc pour cela peut être sur ce type ont le mien un, parce que pour notre plus élevé, nous savons H un est le plus élevé. Il nous faut choisir la prochaine. Donc, et ainsi de suite eso alors de cette façon je sais pour cet espace qui sera quel que soit le titre, et ensuite nous allons avoir notre article réel. Alors allons de l'avant et rédigeons ça ici. D' accord, allez-y et rappelez-vous que celui-ci allait être notre genre de défilement. Donc je vais juste Teoh faire croire qu'il saigne de ce qui serait considéré comme le pli de la page Web Le pli signifiant comme un journal où vous le retournez. Mais dans ce cas, le premier défilement à travers. Alors le deuxième défilement à travers prendre le reste de celui-ci. Et je vais juste faire ça à main levée pour le temps, et ce serait notre barre de défilement. On y va. Donc, pour le texte, vous avez quelques options différentes avec cela, vous pouvez dio un autre debout ici le tri des lignes de gribouillage comme vous le verriez dans les bandes dessinées pour les dessins animés de sorte que cela semble impliquer la ligne pour vous pouvez juste faire lignes droites pour laisser entendre que le texte serait là. Et je pense qu'on a décidé d'essayer les deux colonnes pour celle-là. Donc notre conteneur va avoir deux colonnes de texte. Donc pour le mien, je vais juste faire le droit et le répéter. Un. La deuxième colonne. Nous ne nous inquiétons pas pour les détails. Nous savons pour la couleur. On ne s'inquiète pas du genre, mais on veut voir comment ça va couler ? Et puis je vais juste mettre dans la seule image de l'argent qu'on avait. Nous avons eu une vidéo ici, alors allons de l'avant et rudivisons ça. Et vous pouvez utiliser du papier râpé pour cela. En outre, cela fonctionne très bien pour cela. De cette façon, vous pouvez obtenir tout ce que vous savez un peu plus droit que ce que je suis plus avec . Cette partie, cette partie du jeu et comme avant, avec ce qui se passe de notre en-tête d'image, nous allons faire le X pour que le X montre l'image ou le placement vidéo. Qu' est-ce que tu as donc pour celle-là, si on fait une boîte qui contient une photo d'une sorte. C' est la boîte et vous faites votre ex si c'est du texte griffonnant ligné ou juste des lignes droites. Donc pour ça, tu sais, des marqueurs, du papier, tout ce qui te plaît. J' ai même de mes blocs-notes jaunes préférés avec lesquels j'aime travailler aussi, sorte que chaque fois que je travaille, disons que je vais juste faire un geste à nouveau. Même étagères. Voilà notre en-tête. Il y a notre menu, et je vais juste gribouiller sur ça parce que je ne vais pas prendre le temps pour cette démo de faire tout le détail. Très Donc, il y a notre vidéo ou un titre, puis notre article réel avec nos deux colonnes de texte. Alors qu'est-ce qui est agréable quand vous travaillez comme un carnet de croquis ou un bloc-notes ? Ensuite, vous pouvez commencer à prendre des notes comme Okay, alors peut-être que l'unité 1 va être une vidéo YouTube sur ce qui va être le Blawg. Blawg publie des articles, et ils seront chronologiques, etc. Donc, vous pouvez chronologique. Désolé, chronologique. On y va. Ensuite, nous pouvons commencer à prendre des notes dessus et à la construire à la prochaine sorte de couche de détail. Donc nous avons la coquille et ensuite nous pouvons commencer à suivre vous savez à quoi nous pensons . Donc on peut commencer à dire Ok, peut-être pour l'arrière-plan, vous savez, ils veulent leur Le client veut le numéro de code hexadécimal du client. Quoi qu'il en soit pour cela pour la couleur en arrière-plan. Cela vous donne un moyen de commencer à remplir les détails qui l'entourent sans entrer en bas dans le détail de l'esquisse. Et puis tout le monde peut en quelque sorte le voir si vous travaillez dans une équipe et y ajouter leurs bits et bobs. En outre, un autre système qui est bon de travailler est post it notes. Donc, collent. Les notes sont vraiment agréables pour cela aussi, parce que vous pourriez le décomposer dans les systèmes que vous recherchez. Bon, donc on a une page d'accueil maintenant, suffit de mettre la page là pour qu'on puisse voir et ensuite quoi ? Nous devons aller sur le menu de la page d'accueil. Et puis quels que soient les articles sur le menu et juste, vous savez, les articles de contact, bébé, un portfolio liens, je ne sais pas. Peu importe. Quoi que ce soit que votre projet va impliquer. Vous pouvez écrire que sur votre post il Note. Aussi, posons-le un peu pour qu'ils ne se chevauchent pas. Le titre un. Donc, ce serait pour l'article principal. Quoi ? Et puis vous pouvez commencer à entrer dans les détails comme, Quels sont ces articles que votre client recherche ? Nouveau ? Je ne peux même pas penser à des codes de coupon d'épargne pour les vacances, etc. Mettez le prochain post il note la vidéo YouTube dont nous parlons, et cela aurait pu être la seule vidéo d'introduction pour que vous ne sachiez pas exactement laquelle c' est, et ça va aller à côté d'ici. Maintenant, quand je travaille avec Post il notes, j'ai tendance à aimer le travail des orteils sur un mur afin que je puisse en quelque sorte tout mettre en place et avoir réorganiser parties mobiles à base de plantes avec ceci sur. Et puis aussi quelqu'un est comme Eh bien, vous savez, j'aime la vidéo YouTube, mais ce que je pense doit arriver, c'est qu'il doit aller ici, et l'article va être de l'autre côté pour que vous puissiez mélanger les choses et peut-être faire un croquis lâche par la suite. Une fois que vous avez toutes les pièces mobiles compris comme un groupe. Les notes supposées sont incroyables avec les groupes. J' ai toujours des tas de messages qu'il note dans mes salles de classe. Et puis chaque fois que nous arrivons à cette étape, prenez tout un pot et allez en ville et aimez-vous et vous aide à trouver les pièces dont vous avez besoin. Combien d'articles, Où vont-ils être positionnés ? Que se passe-t-il dans la page du portefeuille ? Quelles images avez-vous besoin de prendre ou avez-vous déjà ? Donc, il vous aide à organiser posté que le système est vraiment sympa, parce que alors l'équipe peut travailler ensemble, et puis vous pouvez voir tout mis en place devant vous et réorganiser au besoin, donc celui-ci viendra probablement en premier. C' est plus que ce que je dirai, idée générant l'étape de ce que nous avons réellement besoin et ensuite vous pourriez aller et simplement travailler sur la partie croquis de celui-ci. Donc, si vous utilisez le tableau noir ou la méthode du tableau blanc, ça va dépendre de ce que vous avez à vous savez que vous êtes prêt dans ma maison, dans mon bureau à domicile, j'ai un des murs peints avec la peinture de tableau et puis chaque fois que je travaille, je peux juste m'asseoir et écrire ou dessiner tout ce dont j'ai besoin, puis l'effacer quand les projets sont terminés et ensuite au travail dans la salle de classe, j'ai le tableau blanc et le tableau noir. Donc, les étudiants, selon celui avec lequel ils sont plus à l'aise, ils peuvent utiliser l'un ou l'autre. Et beaucoup de nos projets sont orientés groupe pour la conception web. C' est donc beaucoup plus facile quand ils travaillent en équipe. Donc ce que je vais recommander, c'est , comme toujours, lequel pensez-vous que vous allez aimer le mieux ? Lequel avez-vous déjà les outils que vous connaissez, pour expérimenter. Alors commencez par là. Donc, si vous vous sentez à l'aise avec le croquis, allez-y et esquissez. Si vous avez pas de curiosité sur ce que le tableau blanc est et que vous voulez essayer de lister et de dessiner sur leur essai que aussi, peu importe ce que vous faites, ce que je vais recommander, prendre des photos de tout c'est que vous travaillez et partagez nos projets de classe ci-dessous, afin que nous puissions voir ce que vous avez expérimenté. Et vous pouvez également nous dire lequel, selon vous, fonctionne le mieux et celui avec lequel vous pensez que vous pourriez aller de l'avant dans le futur pour vos projets. Comme toujours, partagez pour que nous puissions voir ce qui se passe. Et puis de cette façon, vous pouvez explorer toutes les méthodes de cadrage de fil analogique afin que vous puissiez déterminer lequel fonctionne le mieux pour vous et votre efficacité de travail. 10. Bonjour à la Wi framing avec Illustrator et Photoshop: d' accord. Maintenant, il est temps d'explorer les options de cadrage de fil de site Web haute définition. Et pour cela, nous allons entrer dans l'illustrateur, et nous allons aussi voir la boutique photo sur. Et pour cela, je vous ai fait des modèles, et ils seront dans notre zone de projet de classe. Donc, si vous vouliez utiliser un shell pré-existant, un sera prêt pour vous. D' accord ? haute définition va être un peu plus impliquée que notre basse définition, où nous essayons de trouver les bases, vous savez, compris. Mais nous allons utiliser nos colonnes et utiliser plus d'un système d'organisation pour cela, tout comme notre temps analogique. Je vais utiliser le même concept que nous faisions là-bas. Donc, ce n'est pas réécrire dans la roue. Bon, donc pour le mien, on commençait par notre en-tête. Que ce soit le site, nommez une bannière. Que ce soit le site, C' est l'espace où les informations principales pour votre site Web vont réellement aller maintenant pour cela , ce que je vais recommander est d'obtenir un système Ah, assez tôt. Semblable à notre analogique. Donc un analogue, nous avons parlé de nos marqueurs. Donc peut-être qu'une couleur allait être, vous savez, vous savez, gros titres représentatifs. L' un allait être le type qu'on allait être des boîtes d'images, etc. Donc tu avais une sorte de système pour ça. La même chose ici, vous savez, quel serait votre système ? Peut-être que dans ce cas, je ne veux pas d'esquisse. Peut-être que dans ce cas, Je veux juste pouvoir voir la couleur de la boîte. Et puis peut-être mes boîtes, euh, peut-être que je vais faire des cheveux gris foncé comme un gris de milieu de gamme. Et puis ce serait mes boîtes d'images. Et puis mon type en sera un autre. Donc je dirai que cette couleur va être notre image. Je vais revenir à ma sélection régulière et comment nous l'avions. Waas On avait notre menu en dessous, donc je vais juste copier, et je vais le coller. D' accord, Transformation libre. Je vais frapper ma lettre e. et de cette façon, je pourrais vous faire savoir, l'échelle un peu plus proportionnelle à ça et encore, vous savez, est-ce que ça va être un bar ? Les croix sacrées sont partis ? C' est juste ? Tu sais, peut-être que ton Naff quand tu le fais va être laissé maintenant, hum, donc si c'est le cas, c'est là qu'on joue avec ça, voir ce qui a l'air bien, peut-être que ton Naff quand tu le fais va être laissé maintenant, hum, donc si c'est le cas, c'est là qu'on joue avec ça, voir ce qui a l'air bien, se sent bien sur la page pour nous et pour notre design. On a pris beaucoup de café et on a collé une image ici, alors allons-y et on en a eu une autre en dessous. Je vais juste laisser ce petit peu passer par le fond. Donc je ne vais pas m'inquiéter pour ce petit détail, car ça va finir ce petit peu . Donc, ne vous inquiétez pas à ce sujet. Bon, donc il y a nos images, et si on veut éteindre nos gars pour voir ce qui se passe, c' est ce qu'on a. Nous avons nos boîtes d'images en place. Maintenant, nous devons commencer à penser à notre genre. Donc, je vais utiliser la même quantité d'espace pour la plupart ici, et celui-ci va être pour notre type, glisser un peu vers le bas pour qu'ils soient en alignement. Si tu veux être un peu difficile ici, tu peux, ça va être à toi de décider. D' accord. Et puis pour cela, nous ne voulons pas que ce soit la même couleur, parce que cela va devenir vraiment déroutant. Alors peut-être que pour mon type, je vais avoir un peu de briquet. Gris. D' accord, donc ça va être mon H. Donc, le H, comme nous le savons, va être la forme la plus haute de notre hiérarchie, taille sage, et puis notre article ou sous-en-tête va aller là-bas et puis notre article, et puis nous continuons à construire d'ici. Alors que waas l'image qui allait à notre YouTube, donc je ne vais pas réellement la connecter à cette ligne de grille. Mais alors le prochain article que nous avions serait venu en dessous, et puis nous avons eu un autre article en dessous. Et la bonne chose avec la boutique photo et l'illustrateur, c'est que vous pouvez , vous savez, construire vos concepts assez rapidement avec ces eso que vous savez où ils vont, tout de suite. Vous effectuez un zoom arrière juste un peu. Donc probablement lui en ce moment, c'est qu'on travaille dans un sens, juste contre le bord. Peut-être que je ne veux pas ça alors je vais sélectionner tout ça, et je vais les repousser. Et aussi, je voulais avoir de la place pour notre barre de défilement, et ça se sent mieux tout de suite. Donc c'est notre temps de jeu. Ce qui a l'air bien spatialement. Comment est la vue ? On va flotter, tu sais, tu sais, quel est le flux pour le spectateur ? Qu' est-ce qui leur permettra de naviguer plus facilement ? Bon, donc pour ça, je vais cacher le guide à nouveau pour qu'on puisse voir ce qui se passe. Nous avons une sorte d'espace étrange au milieu. Donc ce que je ferais, c'est passer une limite plus de temps à jouer entre, vous savez , peut-être au lieu de ça je voudrais avoir le haut, ou celui-ci serait subdivisé. Et peut-être que c'est une image. Mais ici va être ah, nourriture en direct de nos instagrammes. Et de cette façon, les gens peuvent voir ce que notre nouveau post waas. Hum alors ça va aider cette structure tout de suite semble déjà mieux. Donc, avec les grilles, c'est les bases. Quoi ? Je dirai de n'importe quel design avec grille. Donc, dans ce cas, les colonnes, mais c'est une grille comme système. Cela nous donne ce sens de l'ordre, et à travers cela nous pouvons réellement dio la danse sur la page et voir ce qui semble bon structurellement pour nous et pour nos téléspectateurs. Donc, cela nous donne le temps de jeu dont nous avons généralement besoin pour comprendre ce qui se passe. Et comment pouvons-nous faire de ce site un site qui est vraiment sympa et utilisable pour celui qui va venir visiter notre illustrateur si vous voulez faire la haute mort ou la boutique photo, nous regardons trois pages. Donc celui-ci était représentatif de notre page d'accueil et j'allais de l'avant. Et comme je l'ai dit, que le contact et sur les valeurs par défaut, si vous n'êtes pas tout à fait sûr lesquels construire de vous n'ont même pas besoin d'avoir l'en-tête jusqu'ici . Um, juste jouer et voir quels espaces fonctionnent le mieux pour vous et le site que vous avez en tête. C' est un design vraiment simpliste. Vous pouvez devenir fou avec celui-ci, alors jouez avec l'illustrateur Um, si vous voulez, vous pouvez entrer, et peut-être à une nomenclature de couple est à elle. Pour que nous sachions que c'est le gros titre. Peut-être qu'on pourrait en avoir un qui dit, tu connais l'article, et je vais juste dupliquer ce Oops. Pas dupliqué le mauvais. Et puis comme ça, tu sais, si tu regardes plus tard, surtout quand on a eu les changements ici. Et puis comme ça, tu sais, si tu regardes plus tard, Donc c'était maintenant notre flux Instagram. Euh quoi ? Oui, je pense que je vais changer ça. Je vais garder ça comme le gris plus foncé depuis pour me nourrir. Et peut-être que c'est de la publicité ou quelque chose comme ça. Donc, nous allons mettre des publicités ici et le top une intro YouTube. Donc, comme ça, on peut se souvenir où on était avec tout. Toi aussi, dans le vrai et notre menu. Donc, pour la haute définition, vous pouvez obtenir un peu plus d'étiquettes et de structure orientées, mais les boîtes vont nous donner une sorte de pré-forme pour commencer. Rend un peu plus facile pour ce s o jouer avec elle et voir ce qui fonctionne pour vous. Et je vais aussi brièvement entrer et vous montrer à quoi ça ressemble et d'autres magasins aussi . Avant d'entrer dans la boutique Feder, bien que je voulais vous montrer quelques exemples de projets étudiants s O que vous pourriez avoir une idée de l'endroit où cela pourrait mener pour vos propres projets. Chacun de ces éléments que je vais montrer que nous avons fait dans l'une de nos méthodes. Ce 1er 1 allait être fait dans ce qui vante Tomic, nous allons obtenir avec notre section en ligne. Euh, celui-là a une autre sorte de dessinateur gribouillé comme l'apparence de lui. Celui-ci aussi a été fait en ligne en utilisant des outils de cadrage de fil en ligne afin que vous puissiez voir que vous pouvez obtenir une grande variété avec le résultat réel et la sortie. Avec cela, cela dépendra de votre style de travail. Donc, comme d'habitude, assurez-vous d'expérimenter et de voir lequel vous aimez le mieux pour celui-ci. On travaillait dans Illustrator. Donc vous pouvez voir que vous savez, celui-là a les autres Texans. On va te montrer comment faire ça ensuite, donc ça te donne une idée de ce que ça pourrait ressembler une fois qu'il aura quelque chose sur la page. Et c'est pour celle-là. Celui-ci a été fait dans les boutiques de photos que cela va nous Segway dans notre démo à nouveau. Il utilise le texte de remplissage. Nous avons nos boîtes, cet étudiant, mais les ex sur eux au lieu d'utiliser, euh, les super boîtes pour que vous puissiez voir qu'il y a une variété de façons de le faire. Les expériences voient lequel fonctionne le mieux pour vous. Tu es allé, tu sais, boîtes à code couleur. Voulez-vous utiliser le remplissage, texte et les images pour être l'excès ? Découvrez celui qui vous convient le mieux. Alors maintenant, nous allons entrer dans le texte de remplissage et voir ce que nous pouvons faire dans un magasin de photos. Bon, maintenant on va faire une autre version de Ah, salut fi. Ah, technique du cadre métallique. Avec cette fois-ci, on va aller dans une boutique photo. Mais d'abord, je veux attraper un peu apprendre le texte ipsum. Alors pour ça, allez-y. Tapez Lauren Epsom et sous la première recherche, vous allez probablement faire la même chose. Vous voulez les lèvres du générateur, allez-y et cliquez sur cela, et de faire défiler un peu vers le bas. Voir l'enseignement de C dit combien de paragraphes vous voulez ou de mots ou de morsures ou de listes, et voulez-vous qu'il commence par la Lauren. C' est, euh donc je vais dire que deux paragraphes devraient suffire, puis allez-y, générez, puis sélectionnez-le et copiez-le de cette façon. C' est dans votre tableau d'art pour chaque fois que je suis désolé, pas votre tableau d'art votre presse-papiers pour chaque fois que vous êtes prêt à l'utiliser. Bon, maintenant on est prêts à entrer dans la boutique photo, comme un illustrateur. J' ai déjà mis en place un modèle pour vous. Celle-ci fait 1200 par milliers. C' est juste une taille légèrement différente. De cette façon, vous avez différentes options pour travailler, de sorte que vous pouvez également voir comment votre design fonctionne à différentes échelles, n'est-ce pas ? Donc ça va être fondamentalement la même chose. Je vais utiliser le même style que celui qu'on faisait dans, euh, euh, sont en version analogique. Alors allons de l'avant et construisons une maquette ici. Nous allons avoir besoin de bâtisseurs en forme. Donc je vais prendre mon outil rectangle et aller de l'avant, et ça va être cet espace où, euh, nous allons prendre pour notre nom de site, ou est-ce que ça va être, vous Une image va être centrée. Est-ce qu'il va être laissé ? C' est juste ? Nous n'en sommes pas tout à fait sûrs. Mais c'est le conteneur dans lequel il va se mettre en vie. Je vais aux orteils. Modifiez également la couleur. Allons avec peut-être un bleu foncé et ça va être représentatif de, vous savez, quelles que soient les images que nous allons utiliser, ce sera aussi bleu. Très bien, Nous allons aussi avoir besoin de notre menu, et nous avons que assis juste sous le nom de notre site Web va être. Et puis de cette façon, c'est cohérent dans tous les cas. Et alors n'oubliez pas de faire nos trois pages pour un projet, à peu près la navigation et le nom de notre site en haut vont maintenir une position stable parce que nous voulons avoir l'unité dans notre conception. Ok, donc à partir de là, ce qu'il nous faut pour dio, c'est trouver où nous avions notre YouTube, alors mettons-nous notre vidéo YouTube. Peut-être qu'il va vivre ici, et je vais juste passer à ma sélection régulière et je vais tenir et vouloir un Mac. Je vais utiliser ma clé d'option. Ah, ça pourrait être un flux pour, hum Instagram. De cette façon, nous pourrions avoir nos médias sociaux ici aussi. Euh, à partir d'ici, allons-y. Retournez dans notre outil rectangle. Euh, peut-être que pour celle-là, je vais le briser un peu. Nous avons beaucoup d'espace. Donc je pense que pour celle-là, ce qu'on va dio est notre titre, et je vais changer la couleur. Donc, le bleu allait être nos images. Et faisons-en un bleu clair pour le texte de cette façon, c'est un peu similaire, mais un peu différent aussi. Alors de cette façon, vous savez, nos gros titres vont avoir une belle cohérence à travers et vous serez en mesure de faire la différenceentre les deux vont maintenir la touche d'option parce que l'air va être Alors de cette façon, vous savez, nos gros titres vont avoir une belle cohérence à travers et vous serez en mesure de faire la différence entre les deux vont maintenir la touche d'option parce que l'air va être côte à côte lire des articles et nous allons de l'avant et faire la boîte pour notre texte. C' est là que le conteneur pour notre texte va le dupliquer sur Beautiful. Donc, nous mettons nos articles dedans. Euh, peut-être en bas, je ne vais pas passer par tout ça, mais peut-être qu'en bas on va continuer et comprendre, tu sais, comme, parce qu'ils vont être plus des articles, des photos, tu sais ? Est-ce juste la propagation d'une page ou nous allons continuer à défiler. Ce sont des choses auxquelles tu vas penser quand tu seras dans ce processus de conception . Bon, donc on a eu notre texte de remplissage, alors allons-y. Je vais prendre mes outils de type. Je vais faire un nouveau calque sur le dessus, donc je ne vais pas sur tout ça, et ça va faire une zone de texte, et je vais mettre mon texte Lauren ipsum là-dedans pour que nous puissions voir une sorte de quoi il ressemble une fois que le texte est en fait là-bas et je vais juste le dupliquer et l'ai fait aussi, euh, quand je fais défiler mes couches et j'ai éteint nos guides et je vais juste faire une boîte simple dessus de ça. De cette façon, nous allons pouvoir le voir. Alors faisons juste un remplissage de blanc. Bon, on y va. De cette façon, nous pouvons en quelque sorte avoir une idée de ce que ça va maintenant. On a un peu d'espace bizarre ici, donc je n'aime pas ça, donc je ne voudrais pas comprendre ça. Les zones de texte elles-mêmes sont en fait assez décentes. Donc, en utilisant seulement vos formes et en jetant dans un texte de remplissage, vous avez une idée de ce que ce site pourrait ressentir pour quiconque le visite. Eso Si vous êtes à l'aise avec la boutique photo, essayez l'aversion et la boutique photo si vous le souhaitez. Illustrator, allez de l'avant et créez une version et un illustrateur comme d'habitude, Allez-y et enregistrez vos fichiers et téléchargez ces chevilles J dans notre projet de classe afin que nous puissions voir ce que vous travaillez. 11. Options en ligne: ainsi que notre boutique photo et nos options illustrateurs. Il y a des sites Web gratuits qui vous permettront de faire des simulations là-bas. Aussi, je vais juste en sortir deux pour que vous puissiez les voir. Et puis, si vous voulez, essayez la monture. Voyez lequel fonctionne le mieux pour vous à nouveau. Ces air, le gel ou les démos libres. Certains d'entre eux auront des coûts, mais ceux que je vais montrer n'ont pas de coûts. Le 1er 1 du spectacle est un flux fictif. Celui-ci est sur le plan de base. Il y a donc, bien sûr, certaines limites à cela. Mais si tu voulais, tu aurais pu te dessiner à la main. Je sangle. Voyez, les bootstraps, les pommes, APS, etc., ou tout simplement les blancs peuvent dépendre de ce que vous avez des besoins. Um, si vous voulez, allez-y et commencez un test et appelez ce test pour que chaque fois qu'il y aura , on puisse voir ce qui se passe. Non, pour la plupart, tout ça est intuitif. Donc ce que vous voyez, c'est ce que vous obtenez avec ça. Donc, comme toujours, je recommanderais juste de jouer avec elle et de voir, vous savez, comment cela fonctionnerait pour vous et de faire votre cadrage métallique il allait le sauver, passer à travers l'élément suivant. Je vais peut-être y ajouter un bouton. Et ce qui est bien avec ceux-ci, c'est avec les éléments pré-existants. Vous pouvez, vous savez, juste une sorte de jeu et ne pas avoir à vous soucier de la phase de construction, parce que pour la plupart, vous savez qu'ils seront là pour vous. Mettons un peu de texte et jouons avec. Donc peut-être que ça va être comme une page de galerie, etc. Donc je vais juste entrer dans les éléments. Vous pouvez voir. Nous avons des cadres de navigateur, cercles de texte, des images, boutons, des bannières, des barres de défilement , des boutons radio, des crochets ainsi de suite et ainsi de suite. Différentes pages en ajoutant vos images, vous pouvez voir votre flux. Um, et comme jamais, jouez et voyez où tout ça vous mène à nouveau. C' est juste la version de base, accord. Notre prochain site de freebie que je vais juste passer rapidement par ces simulations. Hum, et encore une fois, tous les liens seront dans nos feuilles dans notre zone de projet de classe sur celui-ci est un gratuit aussi. Ainsi, vous pouvez voir que vous avez de nouveaux contours de pages. Vous pouvez commencer par des modèles, des images icônes , etc. Et il fonctionne à peu près de la dernière. Vous pouvez voir qu'il a les en-têtes, les étiquettes, les paragraphes, les boutons, les chèques, les radios, textes. Je ne vais pas montrer ça, vous savez, le détail de fonctionnement réel. Mais juste que vous pouvez voir quels éléments existent là-dedans. Il y avait quelques éléments de forme dessinés maintenant de pièces, um , lunettes , déroulants , boutons, beaucoup et beaucoup et beaucoup et beaucoup d'options à choisir parmi celui-ci aussi. Et comme le dernier, suffit de jouer et de voir ce qu'il fait. D' accord, un autre est aller mockingbird dot com et vous allez remarquer une tendance. Il y a, pour la plupart, beaucoup de similitudes entre tous ces éléments. Vous allez avoir votre espace de travail et vos gouttes de dragon que vous pouvez retirer du côté gauche s afin que vous puissiez obtenir votre page dans un beau croquis de besoin, pour ainsi dire. C' est un bouton. On a les boutons ici, alors de cette façon, vous pourriez avoir certains des éléments sur la page afin que vous puissiez comprendre comment ils sont tous liés ensemble ? - Un autre est fil cadre dot cc, et vous pouvez voir la version gratuite. Tu as juste un cadre de fil d'une seule page , mais tu auras les mêmes outils que les autres. Celui-ci que vous pouvez pop entre les appareils mobiles pour les fenêtres du navigateur standard. Et ça va dépendre. Quel est votre projet et quels sont les besoins de votre projet ? Donc c'est sympa, mais celui-ci est Vous pouvez choisir. Vous savez par quelle base vous voulez commencer. De là, c'est à peu près le même style de rinçage et de répétition. , Tu sais, tu as ta forme peut gagner des outils. Euh, vous avez votre type de remplissage. Vous pouvez ajuster en conséquence. Je vais tout laisser par défaut pour cette démonstration. Vous pouvez mettre vos images. Vous pouvez mettre vos boutons etcetera. Cela dépend simplement de votre style de travail. Le suivant est un point com scintillant. Vous pouvez le dire tout de suite. Nous avons déjà des similitudes. Vous savez, nous avons différentes formes dans ce cas, donc il est façonné par les relations. Formes de base. Um, ils vont fonctionner. Exactement. Tu sais, la même chose. Celle-là. Vous pouvez choisir entre une forme ou une zone de texte. Ou vous pouvez ajouter une étiquette dessus. Aussi, euh, repositionner le redimensionner, hum, selon vos besoins. La bonne chose avec ça, c'est qu'il a, euh, les guides de règle avec ses prises voit une sorte de gars intelligents avec elle, et vous aurez la même fonctionnalité que vous êtes habitué. Si vous êtes à l'aise avec la suite créative, vous pouvez faire vos doublons. Vous pouvez faire vos copies et coller. Il a beaucoup de commandes que vous pouvez utiliser et naviguer avec. Hum, donc pour ça, je vais juste faire quelques boîtes à répéter pour que vous puissiez voir ce processus. J' aime bien les guides sur celui-ci. Et comment vous pouvez travailler avec eux ici a une bonne capacité d'ajustement avec elle. Tu peux dire toutes sortes d'outils, de formes,de conteneurs,de formulaires,de boutons,de radio, tu le nommes. Tu peux dire toutes sortes d'outils, de formes, de conteneurs, de formulaires, de boutons, boutons, radio, Ils vont l'avoir. Le dernier que je vais faire, c'est Masonic. Les deux sont si doux. Effort. Les deux, Um, transmettez ça. Je vais juste laisser ça une sorte de vitesse, fond de la peste. Pourquoi en parler ? Parce qu'à ce stade, vous le trouvez. Ils ont tous une sorte de modèle répétitif. Cela a été obtenu agréable parce qu'il a une sorte plus de, ou vous pouvez lui donner la possibilité d'avoir à une sorte de regard plus sommaire à son Il semble plus gestuel à la main, ce qui est une belle sorte d'esthétique avec elle. Ils ont un essai gratuit sur celui-ci, et ensuite ils ont aussi payé pour la version eso. Celui-ci est un peu différent. Ce n'est pas basé sur un navigateur, comme les autres. Celui-ci, vous allez devoir d'abord faire un téléchargement, puis l'ouvrir comme un logiciel normal. Mais je crois que c'est un mois d'essai gratuit, et puis vous payez par mois, comme le cloud créatif. Donc, pour celui-ci est juste le plaisir de jouer autour. Ce qui est si sûr, je dirais aller de l'avant et faire l'essai d'un mois juste pour voir à quoi cela ressemble, et il a beaucoup d'options avec elle. Au-delà de juste, vous savez, la page Web que vous pouvez voir en haut et tous les actifs qu'ils ont des boutons de l'icône des formulaires de conteneurs , qui , euh, je o s vous travaillez avec des marques  ? Et cette partie est agréable que vous puissiez communiquer avec l'équipe avec celle-ci ? Vous pouviez voir des têtes, pas de cartes, etc. Il y a donc beaucoup d'options et celle-ci qui ne sont pas dans les autres. Alors, Alors, profite de cet essai gratuit d'un mois pour que tu puisses voir ce qu'il a à offrir . Et si c'est quelque chose que vous entrez dans, hum, gardez-le sur le fond avec vos souvenirs pour que vous puissiez y revenir ou si vous travaillez dans une équipe et que vous cherchez ce genre de solution, il y a beaucoup de options orteil travailler avec par rapport aux autres. 12. Conclusion Wireframe: J' espère vraiment que vous avez apprécié votre exploration dans l'analogique, le lo fi, les cinq versions élevées du cadre métallique. Pourquoi le cadrage pourrait être un excellent outil pour les premières étapes de votre site Web ? Le design vous aidera à organiser vos pensées. Voyez ce dont vous avez besoin. Voyez ce que vous avez. Je ne vois pas ce que tu manques. Donc juste avec un crayon de base, votre papier poster des notes, photo shop ou illustrateur. Même nos outils en ligne Vous pouvez construire un cadre pour un site Web vraiment réussi. J' espère que vous avez apprécié ce cours. J' ai hâte de voir ce que vous avez conçu dans les projets ci-dessous. Et je te verrai la prochaine fois. Au revoir.