Comment concevoir un site Web - Partie 1

1. Bonjour: On a besoin de Christine. Je n'ai pas besoin de continuer à concevoir mon diplômé de Flatiron et j'ai une formation en design visuel, en formation, en stratégie, stratégie, marketing et en publicité. Et j'ai quitté le Parlement m'a appris à coder. Tout ce que je vois des sources, bien sûr, est un tel écrasement encore partagé école de code Connick tête vers le bas moi et beaucoup d'autres. Si vous voulez en savoir plus sur mes réflexions sur la conception technologique, vous pouvez voir le lien ci-dessous qui est celui de mon blog. Et si vous voulez en savoir plus sur moi et mes projets dans le travail que je fais, vous pouvez visiter mon site Web. Pas en bas avec Jacob pour que vous puissiez voir un vendredi de mon peuple. Merci d'avoir suivi ce cours. J' espère que vous en apprendrez plus. A propos de ce design de développement. Allons chercher 2. Introduction au cours: bonjour et bienvenue à la façon de concevoir un site web. C' est mes premiers coûts d'enseignement sur partage sécurisé, Donc j'espère que je vous ai composé les meilleures connaissances et compétences sur ce qui conçoit avec le design à partir de deux menthols. Dans le cadre de cette classe, vous découvrirez le processus de conception. A aidé à créer un profil de marque. Pourquoi les techniques de prototypage Freeman et quelles mises en page grâce à un design réactif, le total en utilisant notre B X D envisagé et Google dessiner ? Tous sont des équipes libres. Veuillez le signer avec l'accès Adobe Creative Cloud Toe. Ce sera X'd. Nous utiliserons cet outil pour concevoir nos cadres métalliques et nos prototypes. Si vous êtes intéressé à apprendre comment et puis ce sera le logiciel fonctionne. X'd serait une excellente introduction. Adobe est le fabricant, magasin de floater et d'autres problèmes impressionnants. Puisque Photoshopped et autres APS viennent avec le prix, X'd est complètement gratuit. Tout ce que vous avez à faire est de cliquer sur ce bouton ici sur ce site. Je vous emmène à l'Adobe Creative appelé Sign of Age. S' il vous plaît inscrivez-vous à la vision à Los Well, nous allons utiliser cet outil. courts de nourriture lointaine Il est complètement gratuit et envisager a un outil pour le prototypage, mais pour ce cours restera avec l'accord. BXC, pour le prototypage et la vision serait utilisé pour nos planches d'humeur. C' est vraiment simple, bien que déjà avoir un compte une fois que je clique sur ce bouton et il me conduira à ma page d'accueil . En attendant, s'il vous plaît inscrivez-vous à Adobe Creative appelé et imaginez ce dernier but, mais pas le moindre, tirage au sort de Scougall. Si vous n'avez pas encore de compte Google, veuillez nettoyer. Nous utiliserons Google. Tirage rapide. Excusez-moi, Google dessin. C' est plus comme ça et à partir d'ici jouera avec nos outils de carte du site à partir de matériaux. Nous allons commencer à utiliser des formulaires que j'ai créés moi-même. Donc, si vous pouvez s'il vous plaît télécharger les formulaires de processus de conception Web et j'ai créé ces formulaires pour vous aider avec ce cours, s'il vous plaît sentir du tout comme nous passons à travers chaque leçon pour vous aider à concevoir votre site Web et conception Ressource est J'ai créé un liste des recherches de sites Web utiles pour vous aider à choisir des fonds, des images, des couleurs et d'autres outils de conception. Si vous préférez, c'est comme Matt, votre site à la main. Vous pouvez imprimer que les sites Web de conception mappage de site commencent déposé que j'ai ici. C' est un fichier clignotant et vous pouvez démarrer votre set. Mon truc. Ma main. Ce sont les sites de conception comme rien de fichier fini Voici l' outil finalisé pas miking de notre projet. Ceci si vous Condell jusqu'à ce que ce sera un moyen pour vous de comprendre à quel point mes œuvres seront tristes qui discuteront plus tard. Last but not least, je vous demande de télécharger le dopey X T déposé ici. Nous devons commencer le fichier qui va commencer à travailler sur nos projets de classe ensemble. Et puis c'est le travail final des yeux que nous allons voir ce que nous finissons notre projet. Donc, une fois vos outils et vos matériaux mis en place, nous commencerons le processus de conception. On se voit dans la prochaine vidéo. 3. Processus de conception: le processus de conception. Le processus de conception nous a aidés à sortir Un problème à travers différentes étapes de la surface du processus de conception peut ressembler à ceci. Nous commençons par trouver un problème. Pour résoudre le problème. Nous créons de nombreuses idées a été l'échange de plan. Nous façonnons ces idées qui les structurent à travers des cadres métalliques de prototypes. Ensuite, nous apportons ces idées. Pourtant, la vie fait de la coke. Et comme toujours, nous testons ces idées ou solutions au problème pour obtenir des commentaires. Quels sont les processus conçus ? Plus complexe ? Ça peut ressembler à ça. Il y a beaucoup de collaborations entre les concepteurs, les développeurs et les chercheurs. Ensemble, ils donnent vie à des idées basées sur la façon dont les utilisateurs se comportent, ressentent et pensent. Les principaux domaines comprenaient la recherche sur les utilisateurs, l'expérience des utilisateurs, la stratégie et les tests. Et beaucoup de réflexion sur le design le fait. Je pense qu'il a un processus pour résoudre des problèmes créatifs pensée de conception de loup et que le processus de conception change constamment. En réponse à des commentaires, Nous apprenons des utilisateurs et des prototypes aide orteil, redéfinir le problème initial, créer de nouvelles idées ou modifier ceux existants. Alors maintenant que vous avez une meilleure idée de ce qu'est le processus de conception, commençons à planifier notre projet. Rendez-vous dans la prochaine vidéo 4. Utilisateurs: pendant l'étape de la planification, nous parlerons des grandes lignes du projet, des profils de marque, duparcours de l'utilisateur, parcours de l'utilisateur, cartographie du site et de la conception visuelle. Plus ce plan est recherché, plus je suppose que nous pouvons gagner ce dont nous devrions garder à l'esprit. C' est le Who et pourquoi, quoi et comment des interactions des utilisateurs à notre site pendant le Who et pourquoi les étapes pensaient à nos utilisateurs. On demande qui pourrait visiter. Ce seront des fans, des employés potentiels ? clients potentiels ? Numéros ou curieux ? Les gens se demandaient aussi  : Pourquoi ont-ils disparu ? Pourrait-il être orienté vers des objectifs ou exploratoire ? Signification ? Cherchez-vous de l'information, ayant besoin de services spécifiques, désireux d'être un employé ou un employeur potentiel ? Ou se soucient-ils simplement de la personne, du produit, produit, entreprise ou de la marque ? Et ils veulent en savoir plus sur quelque chose ou quelqu'un. Eh bien, pour votre 1er 2 dio, pensez à vos utilisateurs et pourquoi ils visitent votre site Web. Une fois que vous avez déterminé que vos utilisateurs commenceront à décrire notre site Web, rendez-vous dans la ville de 5. Plans de projet: dans la face occidentale. Vous avez déjà utilisé vos interactions ? Nous avons mis en place nos plans de projet ici nous répondons aux questions de quels sont les partenaires de l' existence des sites web ? Quels sont les objectifs d'action pour nos utilisateurs et quels sont les priorités ou les objectifs que nous avons ? Où les sites Web types d'action objectifs comprennent contact s'inscrire à nouveau, acheter quelque chose, obtenir des informations, écouter de la musique, regarder des vidéos et plus d'action va trouver le but de vos utilisateurs qui veulent interagir pour votre site Web. Par exemple, c'est un artiste que j'aime. Elle s'appelle Selena Child. J' aime ses œuvres d'art et l'objectif de dénigrement pour moi, quand je regarde sa situation Web est d'en savoir plus pour les œuvres d'art aller à sa galerie d' apprendre plus sur elle en tant que personne et artistes. Si je veux entrer en contact avec elle, c'est mon objectif d'action. Comme nous allons à sa page de contact, nous vous concevons une petite image mignonne, une petite liste de diffusion d'abonnement que je peux m'inscrire à un contact personnel, vous connaissez le plus à la représentation, ainsi qu'une liste de médias sociaux des comptes dont elle fait partie. Donc, pour contacter Alina enfant, je peux la contacter directement pour s'inscrire à sa liste de diffusion d'abonnement ou la suivre sur l'une de ces plateformes de médias sociaux. Donc, le but pour moi en tant que but de faction utilisateur serait de contacter la recherche d'un enfant et n'importe quelle façon ou pour mon camp. Un autre exemple serait Spotify. Donc, disons, en tant qu'utilisateur, nous voulons nous inscrire à Spotify. Donc nous allons cliquer sur ce bouton une fois que nous visiterons le site et nous nous enregistrerons avec Facebook ou nous inscrirons avec un email mais actrice de notre choix. Une fois que vous vous sentez dans cette information, rapide, la boîte de chapitre, nous pouvons cliquer sur vous inscrire. Donc, c'est une action aller. Un autre objectif d'action pour le site Spotify entre les utilisateurs serait, si l'utilisateur a déjà été compte, ils peuvent simplement se connecter. Donc, une fois que vous êtes sur la page de connexion, vous pouvez vous connecter avec Facebook ou l'adresse e-mail et le mot de passe. Vous avez créé un autre objectif d'action qui est très commun pour pouvoir choquer. Alors, sur quoi je suis ? Disons que je suis à la recherche d'un élément particulier défilant vers le bas. Je vois l'élément de choix que je veux faire votre avis. C' est comme la quantité que je veux d'abord carter. J' ai l'article au panier, alors passons à la commande maintenant. Une fois que je vais vérifier, je serai prompte. C' est la perfection de citer en compte. Cela se produit parce que je n'ai actuellement pas de compte ou que je ne me connecte pas pour réaliser l'objectif d'action consistant à effectuer un achat. Ça a été au moins un autre commentaire. En fait, aller serait de chercher quelque chose en haut. Donc, en revenant à nos Donc objectifs d'action ici, nous pouvons voir que tout ce que nous rencontrons en ligne a un but. Voici un exemple de notre projet de classe. Quand on découvre une diapositive de site comme celle-ci, cela signifie que je vais vous guider à travers ce que nous venons d'apprendre et l'appliquer à notre projet de classe . Alors commençons pour notre classe. Le projet va construire un livre off. Il y a un site web, donc ce sont ses informations pour son plan de projet. Son but est de vendre des livres. Les occasions peuvent-elles mettre en valeur son travail et partager son expertise dans la rédaction. Ses objectifs d'action sont de vendre des livres, contacter pour des opportunités, communiquer directement et de se connecter via les médias sociaux, ou ont été une priorité suivie ou des objectifs comprennent montrer des livres à vendre, appeler et en envoyant un courriel à la mère pour se connecter ou suivre le père. Donc, pour que vous utilisiez votre quel processus de conception Pour cela, j'ai fourni une réponse à vos questions à votre projet. grandes lignes et les objectifs. Écrivez tout ce que vous savez, pensez-vous que ce sera bénéfique pour vous. Donc, quand elle esquisse sa carrière, on parlera de contenu. Siyuan prochaine vidéo. 6. Contenu: contenu. Une autre partie de l'étape des interactions avec les utilisateurs est le contenu. Posez les questions. Qu' est-ce que le site Web doit inclure ? Comment le contenu sera-t-il des catégories et quelles seront les principales catégories de contenu ? Ça pourrait être n'importe quoi. Il peut s'agir d'images de texte, icônes, vidéos et plus encore. Le contenu varie d'un site à l'autre, mais il doit toujours être pertinent par rapport à vos objectifs d'action. Jetez un oeil à quelques exemples. Le contenu du texte doit être inclus dans un document Word. quais sympathiques. Plus vous incluez de contenu contextuel, mieux c'est. Nous pouvons déterminer ce qui devrait ou ne devrait pas être inclus sur notre site Web. Il vous aide également à organiser le contenu de votre texte en fonction de vos principales catégories. Voici donc mon contenu de texte pour mon site personnel. Comme vous pouvez le voir, j'ai ajouté la page d'accueil des catégories principales dans environ, et je l'ai aussi pour le travail. J' ai beaucoup d'autres contenus de texte que j'ai classés dans mes catégories principales. Ainsi, comme vous pouvez le voir, plus je conclus, plus je peux comprendre mon site Web et ce que je veux communiquer. Donc, l'autre partie du contenu, y compris les images, nous devons garder à l'esprit que de nombreuses images dans le monde ont des droits d'auteur . Ça veut dire que tu dois obtenir la permission. Heureusement, sites comme unspool ash nous permettent d'utiliser des images de haute qualité pour la politique libre. Regardez un exemple. Disons que nous voulons regarder une image pour chien une fois que nous entrons dans notre recherche. Comme vous pouvez le voir, nous avons des qualités impressionnantes de chiens. Disons que nous voulions les télécharger pendant que nous avons deux duis Hubbard. Cliquez sur cette flèche et nous l'aurons. Téléchargez-le. Assurez-vous également de créditer l'artiste. Une autre information sur le contenu. Nous pouvons inclure serait des icônes et des éléments graphiques. De nombreux sites Web utilisent de petits visuels comme des icônes et des symboles. Arrêt liens avec plat I icône certains éléments et je concert gratuit fait à télécharger et utiliser. Donc, disons que nous voulons regarder la fusée a des images impressionnantes de fusée parce que vous pouvez voir certaines d'entre elles sont gratuites. Si nous rencontrons une foule, cela signifie qu'elle fait partie d'un compte d'abonnement, sorte que ces icônes n'auront pas besoin d'être achetées. Mais disons simplement vocale avec ce particulier pour que nous puissions cliquer sur ce bouton. Une fois que nous avons voulu télécharger. Nous verrons du PNG et nous cliquerons sur la plus grande taille de pixel de 120. Nous reviendrons plus sur cette question pendant que nous travaillons sur notre site web dans le projet de classe. Comme vous pouvez le voir, contenu de notre projet de classe comprendra par le biais des articles de nom de texte sur les contacts et les livres. Les images seraient des images actuelles du livre. Look autoportrait, images sur les images de l'article. Les ailes seraient les médias sociaux, ailes, les secteurs, Twitter, instagram et Facebook. Les éléments graphiques incluent le logo, les médias sociaux, les iPhones et une touche de texte. On va utiliser quelque chose appelé Lauren Gibson et ce texte de remplissage d'air. Donc Lauren, c'est, euh, en fait , un texte réservé. Et ce qui s'est passé, c'est que pour notre site, puisque nous n'avons pas de texte pertinent dans nos informations, alors nous allons utiliser du texte de remplissage. Et comme vous pouvez le voir, je peux générer la Laura Epsom. Donc, si je dis que je veux des paragraphes une plus grande somme, évidemment générer parce que je fais défiler vers le bas, je vais être en mesure de café tout ce texte et copier coller sur mon site afin que nous allons parler plus à ce sujet que nous commençons à construire le site, notre première à faire sur le contenu. Collectons et organisons votre contenu en utilisant le formulaire pdf que j'ai créé pour vous. Veuillez remplir le formulaire et remplir vos principales catégories. Plus vous pouvez inclure des informations textuelles, mieux c'est. Ainsi, après avoir recueilli votre contenu, nous pouvons construire notre profil de marque. On se voit dans la prochaine vidéo. 7. Profil de marque: profil de la marque. Un profil de marque définit la façon dont votre marque doit ressembler et se sentir et définit. Quel message voulez-vous dire ? Branding a décrit qui nous sommes, ce que nous aimons et ce que nous représentons. Comment exprimer ces caractéristiques est de brûler les lignes directrices. La course à pied construit l'identité visuelle d'une personne ou d'une entreprise à travers le langage, style, la personnalité, imagerie, les interactions et le langage visuel. Lors de la conception d'un site Web pour vous-même, vous utilisez votre propre voix tandis que la conception pour un client signifie concevoir dedans. Garçons, la recherche d'un style de personnalité signifie façonner les traits de caractère ou quelque chose que les utilisateurs veulent posséder, imiter, embrasser ou s'identifier à travers des photos, des dessins et des symboles et autres , nous pouvons refléter ces traits de la façon dont vous interagissez avec l'utilisateur. Exprime trop bien vos traits de caractère. Votre interaction soit Hume oreilles animées. Allez-vous poser des questions, ou serez-vous strict ? langage visuel est la partie amusante de l'impression. Nous pouvons créer des palettes de couleurs, choisir des téléphones et trouver des éléments graphiques et des icônes. Jetons un coup d'oeil à notre projet de classe avec leur profil de marque. Lorsque vous travaillez sur le profil de votre marque, assurez-vous de pouvoir faire un résumé de l'ensemble de votre marque. Par exemple, sur notre projet. Nos auteurs ont dit qu'elle aime, ça, donc c'est son résumé. Elle a dit qu'elle aime écrire ses styles d'écriture plein d'esprit, tout comme sa personnalité. Elle est créative, mais elle aime montrer un côté cool et minimaliste d'elle-même pour être moins au sujet des détails fantaisistes, et être plus au sujet du contenu est ce qui compte pour elle. C' est donc un exemple très court, mais j'espère que cela ramène le point à la maison. Lorsque vous construisez votre profil de marque, assurez-vous de consommer, se lever qui vous êtes et de ce que vous souhaitez apporter à la table. La partie Miller du profil de la marque où nous parlons de notre régal de personnage afin de refléter vos friandises de personnage, nous devons venir avec une phrase ou un mot qui résume vraiment l'ensemble de la marque pour cet exemple sont des auteurs et elle est son personnage est plein d'esprit, et nous essayons de comprendre ce que cela signifierait pour elle. Pour l'instant, il dit qu'elle est cool en couleur mais pas cool yeux dans la culture pop. Cool. Elle est minimaliste, douce, mais elle n'est pas calme, et elle est simple, mais pas simple, donc pour refléter nos traits de caractère. Nous pouvons trouver des images, des couleurs et des éléments qui nous inspirent afin que nous puissions utiliser unspool, ash ou tout autre service d'imagerie visuelle afin de trouver des objets qui nous aideront à trouver notre caractère ou des traits malades. Donc, disons, par exemple, nous recherchons de l'esprit, pour notre auteur s'ébranler vers le bas. Vous pouvez trouver cette image, et c'est quelque chose qu'elle pourrait juste régime. Est-ce que j'ai mangé ça ? Donc, ce serait une image amusante que nous pouvons recueillir pour une planche d'humeur. Donc, une fois que vous cliquez sur ce bouton de téléchargement, nous pouvons enregistrer les images dans un dossier qui aidera a été de construire notre tableau d'humeur. Donc, pour notre projet de classe, j'ai déjà fourni les images seront en utilisant et sous le haut de la ressource. Nous allons être sûrs de télécharger cela et de le mettre dans un dossier dans votre projet de classe. Donc, pour faire, nous allons super un résumé de la marque. Pensez à vos traits de personnage et trouvez des images qui peuvent vous aider à vous inspirer. Une fois que vous avez défini le résumé de votre marque et les traits de caractère, nous pouvons commencer sur notre conception visuelle, voir quand la prochaine vidéo 8. mood boards: Donc, une fois que vous avez votre marque quelque part dans les traits de caractère définis, nous pouvons commencer à mettre notre profil Bram sur un tableau d'ambiance. L' objectif est de trouver des motifs, des couleurs et des idées. Nous pouvons utiliser un mouvement pour passer par Pinterest ou envisager. Mais pour ce projet de classe, on va commencer à travailler sur la vision, et je vais vous montrer comment créer votre tableau d'ambiance. Commençons. Une fois que vous vous connectez à votre vision, cliquez sur ce bouton ici et nous commencerons à créer un nom entier à bord. C' est un projet de partage de tuer. Collons-nous avec le style de maçonnerie. Commençons. Donc, voici notre rapport et voici notre section ici, alors commençons à ajouter quelques images qui ont été inspirées. Tu te souviens de cette photo ? Nous avons décidé d'inclure nous allons revenir à supprimer le tableau et je l'ai déjà téléchargé dans nos dossiers. Donc ce que je vais faire, c'est que je vais prendre toutes les photos qui m'ont inspiré. A et je vais cliquer sur le séchage sur le tableau ici. Cela va prendre du temps, mais ce sont toutes les images qui seront incluses avec nos images téléchargées. Nous allons créer un titre ici, des images à chaque parchemin, je suis en panne. Vous pouvez voir toutes les images que nous avons téléchargées avec quelques-uns qui prennent encore leur temps. Alors revenons ici, puis arrivons à ce dont nous étions les plus inspirés. Vous pouvez l'utiliser pour nous aider à trouver notre palette de couleurs, et j'aime cette photo particulière. Revenons à notre dossier et nous trouverons cette photo. On y va. Nous allons donc commencer à utiliser cette photo pour nos prochaines couleurs. Donc, pour que vous ayez mis en place votre propre tableau, vous pouvez utiliser Pinterest ou imaginer, mais l'objectif était de trouver des images et de voir si vous pouvez trouver des motifs, des couleurs et idées que vous aimez avec votre configuration dans le tableau, nous pouvons alors commencer à créer nos palettes de couleurs. Nous vous verrons dans la prochaine vidéo 9. Couleur: choisir des couleurs peut être amusant. Les couleurs sont plus que ce qu'elles semblent, et cela vous fait sentir et penser. Les couleurs peuvent venir avec de nombreux symboles, et lors de la collecte de différentes couleurs, il crée une palette. Ces palettes sont comme des mots pour trouver une humeur ou un sentiment, alors jetons un coup d'oeil à quelques exemples hors générateurs de couleurs. Un générateur de palette de couleurs que j'aime vraiment est pour Canda. C' est l'un de mes favoris parce que je peux tenir une photo que j'aime. Et tout cela vient cinq millions de couleurs qui ont été peuplées à partir de l'image. Là, nous pouvons obtenir un numéro froid de texte et un nom, Donc c'est une façon de générer une palette de couleurs faisant une image que vous êtes inspiré vers le haut. Un autre outil de couleur est appelé refroidisseurs. Ici, au générateur de couleurs, vous comparez la barre de base et les résultats. Un tas d'autres couleurs qui viennent à propos de l'utilisation des couleurs est assez simple. Vous pouvez faire glisser une barre de couleurs de votre choix. Vous pouvez l'ajuster au besoin. Merci saturation et luminosité. Si vous aimez une couleur particulière, vous pouvez également la garder verrouillée en place au fur et à mesure que vous générez de nouvelles couleurs. Comme vous le remarquez. Nous avons également le numéro de code hexadécimal pour la couleur ainsi qu'un nom qui vous sera utile dans un peu. Allons de l'avant avec notre projet. Je vais à Silicon Image qui m'a inspiré de notre conseil d'invasion. Alors commençons avec ça. J' ai enregistré l'image sur mon ordinateur. Je vais prendre cette image. Je vais le traîner. Qu' est-ce qui vient les cinq couleurs principales. Alors remplissons ceci sur notre vision A ainsi que sur notre fichier terne B X D. Donc, commençons avec Envision at Honor Report va créer une nouvelle section, et ici, nous pouvons ajouter une nuance de couleur. Je vais bouger ça de côté. Je clique sur ce bouton pour copier Coller. Nous ferons le même remède. Et ici, nous avons notre couleur. C' est percenter. Il est retourné à notre fort. C' est la même chose pour toutes les autres couleurs. Maintenant que nous avons notre tableau de couleurs mis en place sur notre tableau d'humeur, mettons à jour notre fichier X'd dopey ces performances de partage de compétences ouvertes. Tu vas commencer. Comme vous pouvez le voir, vous aurez un clignotement vide. Un système de couleurs page où tous les blocs de viande grande. Nous allons donc mettre à jour notre palette de couleurs. Une copie. Tiens, étire ça en arrière. Cliquez sur cette case. Une fois que vous cliquez sur cette case, nous allons cliquer sur ce bouton un peu coller notre code. Maintenant que le changement de couleur qui enregistre un échantillon de visite, assurez-vous de mettre à jour votre nom de code hexadécimal ici dessus. Nommez notre couleur ici. Maintenant, RGB, comme nous l'avons mentionné, signifie rouge, vert et bleu. Nous allons donc trouver notre code couleur RVB bleu nuit qui permet à Internet de le faire. On va aller aux codes hexadécimaux de couleur. Alors nous allons étirer ça et je peux vous montrer comment on a confiné pour qu'on puisse coller le code. Ici, ils arrivent en remorquage. Ici, nous avons notre liste d'autres codes de couleur. L' étape RGB pour notre couleur de cuisinier est 9 59 et 74. Sélectionnez et mettez cela maintenant que le fichier enregistrer Nous allons à travers le reste pour toutes les autres couleurs . Donc, ici, nous avons nos couleurs système toutes configurées. Il a été sauvegardé dans notre dossier, et il a été sauvé sur notre nouveau tribunal. Pour que vous puissiez faire sur votre propre projet personnel, trouvez votre palette de couleurs que vous pouvez utiliser en vision ou Pinterest ou tout autre outil que vous trouvez très utile à vos propres besoins. Allons donc vers l'apprentissage du choix de nos fonds. Nous vous verrons dans la prochaine vidéo 10. Typographie: Donc, une fois que vous avez choisi vos couleurs, nous pouvons commencer à choisir des polices. Maintenant. typographie est une étude des polices de caractères, et il y a toute une science derrière elle. Maintenant. Une police de caractères est l'apparence, la sensation et la lecture d'un texte . C' est l'art du texte créé par un artiste ou des artistes, et c'est essentiellement ce que l'on voit quand on lit des textes. Maintenant. Ah, plaisir est un fichier qui contient une police de caractères, et nous utilisons des polices sur un ordinateur taxes du type SIDA. Regardons un exemple. Le monstre rock avant serait installé sur son ordinateur, et lorsque nous choisirons d'utiliser, cette police aura accès à ses polices. Et ces polices sont légères, normales, moyennes, semi-vieilles, vieilles, noires et quelques autres. Maintenant, un frais de type peut également être catégorisé. types de Sarah et de capteurs. Il y a d'autres catégories, mais celles de Sarah et de Sand Sarah sont les deux plus courantes. Maintenant Sarah's Air, les petites poussins qui sortent des lettres, tandis que San Sears, ce qui signifie non, Sarah a un look plus clair qui est couramment utilisé pour le texte. Certaines polices de caractères sont mieux utilisées sur les éléments imprimés, tandis que d'autres fonctionnent bien sur le Web. Et si vous regardez cet exemple, nous pouvons voir quelque chose appelé couplage serré. Nous avons un type San Serif et un certain type. Tout ce qui compte, c'est que nous puissions voir un équilibre et que ce texte et tout le contenu puissent être lus très facilement. Alors regardons quelques exemples de pères que nous pouvons accéder à mon téléphone dot com My hans dot com a l'un des plus haut professionnellement design et polices et polices de caractères de qualité. Donc, lorsque vous travaillez sur ce site, nous pouvons également voir une étiquette de prix mais certaines de ces polices. Mais heureusement, nous avons ce que c'est comme Google Farm qui nous permettra d'accéder gratuitement aux fonds , et nous pouvons y accéder à travers leurs catégories. Et nous pouvons également modifier la phrase afin que nous puissions tester comment sont la phrase Will pourrait regarder sur notre site Web. Écoutez, nous voulons changer notre expression pour quelque chose que nous pouvons sur notre site Web. Alors faisons ça. Vous pouvez appliquer cette phrase à tous les fonds, et au fur et à mesure que nous sortons, nous pouvons voir comment la police sera longue à notre phrase. C' est un excellent exemple de la façon dont nous contestons les pensées et les polices de caractères. Si vous décidez de choisir beaucoup, vous pouvez simplement cliquer sur ce bouton ici, puis en bas. Il peut dire ce bouton et nous pouvons télécharger dans notre ordinateur pour accéder aux différents types de visages et styles. Alors passons avant à notre projet de classe. Heureusement, quand je travaillais sur notre projet, j'ai décidé de choisir la pensée. Un jeu rapide a été rapide. Fiston, on a quatre styles. Cela signifie qu'il y a quatre polices de caractères. On y va. Alors appliquons Rapide Santo notre conseil. Allons à notre vision et recommençons dans une autre section de ST. Donc, ce que j'ai déjà fait, c'est que j'ai pris quelques captures d'écran de nos polices de caractères provenant d'obligations locales. Quoi ? Je vais faire sa tête en arrière son dossier sur la typographie, prendre toutes les images ici et cliquer et déposer un remède. La plupart des crimes comme nous ne pouvions pas commencer à changer notre police de caractères sur notre dopey x d 5. Eh bien, j'ai déjà fait, c'est que j'ai déjà chargé des sables mouvants. Donc disons que j'ai pris cet article particulier qu'on va voir des bizarreries. Et en ce moment, il est envoyé au rythme régulier. Donc ce que je vais faire, je sélectionne tous ces textes particuliers changements en sable mouvant et la même chose ira pour ces éléments ici, le pré résumé. Mais nous avons seulement vieux. Donc, maintenons ça m'a dit comme ça. Avoir un réglage régulier et la prochaine chose que nous pouvons faire est de mettre à jour nos couleurs de texte. Donc, ce que j'ai déjà fait, c'est que nous avons déjà les grandes couleurs. Donc, ce que nous pouvons dio a changé trois couleurs principales de différentes nuances. Donc, nous allons juste à ce clic sur ce choix pièce de copie non éclairé maintenant de retour à nos formes de couleurs. Maintenant, nous pouvons mettre à jour tous les textes, et nous voulons avoir de la couleur. Elle était la plus sombre des grands. Changons le corps du texte à quelque chose d'un peu plus léger. Alors qu'est-ce que ça a réglé ? Nous pouvons réellement enregistrer le style clic droit vers le haut. Vous pouvez voir que les éléments de styles de caractères. Ce que cela signifie, c'est que nous ne pouvons pas accéder aux types de caractères plus tard que nous travaillons sur notre prototype , lorsque vous faites la même chose pour les couleurs plus. En attendant, j'aimerais que vous choisissiez votre plaisir. On se reverra l'année prochaine. Nous allons commencer à parler de navigation du site, stealin 11. Navigation: après avoir défini nos utilisateurs et leur but d'interagir avec notre site Web, nous voulons savoir comment, si naviguer vers le site Web et quand ils sont dans le site Bonjour naviguer à l'intérieur. La navigation peut en fait être décomposée en externe et interne. Nous voulons savoir comment les utilisateurs trouvent votre site Web, comment les anciens utilisateurs accèdent à votre site Web. Quels points d'accès pendant qu'ils prennent types de points d'accès peuvent être lors de l'e-mail, où un lien dans l'e-mail et lorsque vous cliquez dessus et de prendre l'utilisation du site Web. Une recherche de base comme Google étant ou jeune un lien direct, ce qui signifie que les utilisateurs visitent le site fréquemment afin qu'ils se souviennent de votre reste. Donc, tout ce qu'ils ont à faire est d'entrer le nom du site Web dans le mot de passe de la partie de recherche, pas le site protégé par mot de passe signifie que vous n'avez accès au site Web que si vous créez un mot de passe afin que ceux-ci puissent être comme un compte bancaire ou un compte de médias sociaux. Un réseau social lent à travers une recherche de profil ou des messages d'amis. En fait, vous pouvez voir des informations sur le site Web, l'entreprise ou la personne concernée. Donc, lorsque vous passez par les médias sociaux, il y a beaucoup de pièces d'accès dans le post lui-même ou la page elle-même à travers la publicité payante . C' est un point d'accès commun vers lequel de nombreux utilisateurs sont dirigés. Ainsi, lorsque vous voyez une annonce et que vous êtes intéressé par cet élément ou des informations en particulier lorsque vous cliquez sur, vous accédez directement à ce site Web. Il y a quelque chose d'exemple d'accès. Ceci est mon parcours utilisateur, qui parlera plus tard dans le cours. Mais en termes de navigation, façon dont les utilisateurs accèdent à mon site Web et accomplissent une tâche dépend des actions qui seront entreprises. Par exemple, j'ai un employeur potentiel curieux de moi à travers leur action de voir mon CV lettre de motivation YouTube, vidéos d'un projet. Obtenez son profil, Twitter ou mon blogueur me définir directement via la recherche de base. Comme Google, ils peuvent être dirigés vers mon site Web. Il y a donc de nombreuses avenues pour accéder à un site Web, et une fois que vous êtes à l'intérieur du site Web, il y a une autre sorte de navigation, et c'est ce qu'on appelle l'interne. Donc, pendant que nous sommes dans l'éternelle, vous posez des questions sur la façon dont les utilisateurs passent d'une catégorie de contenu à l'autre. Combien d'abus sexuels prennent pour accomplir une tâche ? Cool. Jetons donc un coup d'oeil à notre projet de classe maintenant projet de classe. Quand nous parlons de navigation, nous parlons de la notification interne. Donc, nos auteurs site Web Navigation interne sont les suivants. Nous avons des catégories principales telles que la maison sur les looks, les articles et les pages de contact. Donc, dans chaque catégorie moyenne, nous avons les éléments suivants que nous serons, y compris sur cette page particulière. C' est sur la page d'accueil. Nous allons avoir une page de couverture, un livre de titre de livre, aperçu avec un formulaire de pré-commande et d'autres livres listés sur la page à propos de l' autoportrait et une biographie dans les livres. Page aura une galerie de livres avec le titre et sa description, ainsi que la longueur pour amener les utilisateurs à cette page de livres particuliers sur les articles auront liste d'articles. L' article, Image, article, article, titre et la description de l'article et enfin, dans le contact par âge aura des informations sur les orteils comment les utilisateurs peuvent contacter d'autres Donc, nous allons inclure son email, un compte de médias sociaux et un court board. Donc, pour votre faire ripper, votre navigation externe et interne, passez en revue vos catégories de contenu pour déterminer votre navigation interne Up. Ensuite, nous commencerons à discuter de la cartographie du site. C' est là que nous commencerons à cartographier notre navigation interne. Voir dans la vidéo suivante 12. Carte de site: site Mint décrit une navigation de la page d'accueil aux différentes pages Web étaient morceau de contenu de notre site Web. D' une certaine manière, une carte de site est comme un flux de contenu. Comment voulons-nous que les utilisateurs passent d'un contenu à un autre et mappent le chemin des utilisateurs lorsqu'ils interagissent avec l'ensemble du site Web ? Donc, en termes de navigation interne, cela signifie que nous connectons notre contenu. Nous voulons nous assurer que la connexion à la navigation interne est logique. Donc, comment les utilisateurs obtiennent pour un morceau de contenu à l'autre. Comment utiliserez-vous votre skiffle une catégorie de contenu à une autre catégorie ? Voici donc un exemple de mappage de site. C' est ma légère. Mon pour mon site personnel. L' utilisation de Google dry a été en mesure de cartographier mon contenu et mes blocs. En bas à gauche, vous pouvez voir une légende. Jaune représente la page Doublure sur les différentes couleurs ci-dessous représente les onglets, contenu des onglets, les pages secondaires sur des sites tiers. Alors voici la panne. Lorsqu' un utilisateur accède à ma page d'accueil, ceux qui ont un flou Nobel sur la dernière galerie de projets de leur utilisateur peuvent naviguer vers la page de contact. Une page de travail sur le blawg maintenant le sang ne sera pas une page web séparée, mais ça va être lié à mon journal moyen, qui utiliserait donc vos clics sur ce lien. Il les mènera directement au bloc sur le moyen. Maintenant, lorsque j'utilise votre accès à la page du projet de travail, ils verront une variété de projets. Mais ces projets sont répertoriés avec les onglets. Donc, quand un utilisateur clique sur l'un de ces onglets, que ce soit la stratégie de développement de l'amour conçu illustration dans les arts du livre sera navigué vers des pages séparées bien pour ce que les stratégies de développement seront naviguer sur votre page Web, ce qui signifie si leurs guérit sur un projet particulier dans cet onglet. Une fois qu'ils cliquent sur cette information ou que le projet sera pris à cela. Ce qui projette une page personnelle à partir de là, l'alerte ou à propos de ce projet, y compris les liens externes qui y sont connectés maintenant pour des illustrations de conception de Foot Bart, ces projets individuels ne seront pas navigué vers une nouvelle page Web. Il restera dans les onglets, et vous pourriez être en mesure de voir d'autres liens externes qui lui sont associés. En bas, en bas serait mon pied de page. Voici plus d'icônes de médias sociaux, alors voyons comment cela fonctionne. Naviguer vers mon site web personnel. Voici la page d'accueil. Comme vous pouvez le voir, nous avons la fiche de travail dans les catégories principales de contact. C' est sur la page d'accueil. Si nous faisons défiler vers le bas, vous verrez à propos de Blurred et mon dernier projet. Voyons donc si nous cliquons sur l'âge de travailler. Comme vous pouvez le voir ici, nous avons une variété d'onglets sur lesquels nous pourrions cliquer. Donc, si nous sommes toujours dans l'onglet de développement Web, disons que nous regardons le projet t créer en cliquant sur T Crate ont été dirigés vers la page principale du commerce de thé. Ici. Nous arrivons à en apprendre plus sur ce projet particulier, mais revenons en arrière. Nous avons donc décidé d'aller sur des illustrations. Prenez une montre. Bonjour. Vous y allez. Nous pouvions voir notre projet particulier. Comme vous pouvez le voir, je ne peux pas cliquer sur chaque projet pour nous amener à leur propre page personnelle parce qu'ils auront gagné leurs propres informations est défini dans ce site particulier. Mais nous pouvons passer au crible les images pour plus d'informations. Si vous allez à la page de contact, nous avons toutes les coordonnées ci-dessous. Ici vous pouvez voir le flotteur de pied, que j'ai inclus mes icônes de médias sociaux comme je l'ai mentionné Lorsque nous cliquons bloc, il nous dirigera vers mon blawg sur le médium, ce qui prendrait un deuxième duc de So. Comme vous pouvez le voir, chaque petite chose compte. La façon dont vous interagissez avec vos utilisateurs est extrêmement importante. Ici, nous avons le logo, qui une fois cliqué, pourrait vous ramener à la page d'accueil, sorte que vous voulez le rendre aussi simple que possible pour vos utilisateurs. Plus ils peuvent naviguer facilement sur votre site Web, mieux ils reviendront et nous apprécieront individuellement ou leur projet de classe. Nous allons commencer à travailler sur la cartographie du site de nos auteurs sites Web s'il vous plaît ouvrir numéro un conçu site Web commencer sur Google dessiner Harold conçu comment notre site Web fonctionnera à partir de la tortue en application. La première chose dont nous avons besoin pour Dio est de sortir des blocs de nos principales catégories. Alors faisons ça. Ça a été sur un pâté de maisons. Eh bien, disons l'accueil pour la page d'accueil. Assurez-vous que tout est centré et pour rendre le texte un peu plus facile sur les yeux. Changeons ça. Je vais rendre le combat juste un peu parfait. Donc c'est au moins Isis un peu ici. Je vais mettre ceci au centre de notre document servi avec la maison est l'une de nos principales catégories, mais parce que c'est la page d'accueil principale, il va être dirigé vers nos autres catégories principales. Alors construisons ça. Nous aurons un copier-coller. J' utilise des raccourcis sur le clavier qui, quelle que soit façon dont vous voulez une copie collant vos éléments, s'il vous plaît avoir un total de quatre autres. La Grèce peut. C' est ce que Jésus à vélo a donc changé cela à propos des livres, des articles et des contacts pour tous ces éléments. Donnons-leur une frontière. Ça l'a changé en grâce, c'est ce qui est plus facile sur les yeux. Utilisez-le pour cette couverture. C' est une ligne. Ces catégories bien, même milieu. Nous allons tout détruire. Horizontal uniformément. allons juste aligner comme si maintenant nous avons aussi notre beurre où nous allons inclure nos icônes de médias sociaux. Donc, nous allons utiliser les deux que nous copions coller plus tôt. Quel visage de café ? Encore un. Tu mens. Ces gars étaient, disons, Instagram, Twitter et Facebook. Répartisons-les un peu uniformément tirer les choses ici. C' est aussi à des frontières avec ces gars. Attrouve-le. Est-ce que ça arrive ? On y va. Ensuite, nous allons comprendre comment notre contenu se connectait. Donc on a dit sur la page à propos, on va avoir une biographie dans les livres d'autoportrait. Page, cependant, nous allions avoir une galerie de livres pour chaque livre serait conduit à sa propre page de livre. Alors faisons ça. C' est une page secondaire. Alors changeons ça en livre. Et parce que la galerie qu'il redirige vers plusieurs pages Web, faisons un symbole pour nous avertir que la page des livres a été connectée à plusieurs pages secondaires . Donc ce qu'on va faire, c'est copier de la pâte, on l'a découvert. Supprimez cette taxe. Donnons nos principales catégories. C' est de couleur blanche. On pourrait faire la même chose. Sa page d'accueil était jaune, donc en revenant aux livres, tout a changé l'ordre de retour. Déplacez ça ici. Juste un peu de viande. Vous pouvez également faire un autre va copier coller. Modifiez à nouveau la commande. C' est jusqu'à l'arrière. Vous l'ajustez comme ça. Donc, nous allons regrouper ces éléments, puis donnons à cela une bordure de DOT aux points. C' est une page secondaire et va lui donner la couleur pêche et tester maintenant dans la page du livre. Nous avons mentionné que le livre aura un lien externe vers un site qui permet à un utilisateur d'acheter un livre. Alors construisons ça. C' est le rythme de copie, mais l'élément glisser cela vers le bas dira site pour acheter un livre. Et nous allons changer une couleur en gris parce que nous avons dit les liens externes sont grands, mais nous allons re changé l'orteil de bordure un solide. Je vais aussi changer la taille de la police juste pour le rendre un peu plus facile sur les yeux. Là, nous avons une section de la quelle page fait. Le lien que nous avons avec les articles est que l'auteur aura un blurb d'articles qu' elle a écrits pour le freelance. Ainsi, chacun des flurts sera en mesure de lier à l'article principal sur l'autre site Web. C' est donc un lien externe. Alors copions le rythme. Un autre article ici, juste une lumière comme si vous pouvez utiliser les lignes rouges pour vous aider. Nous dirons que le contact de l'article Queen avait seulement l'e-mail aussi bien sur, alors dessinons ça, aussi. Mais ce n'est pas un bon lien externe, mais c'est toujours un moyen de contact. Donc, ici, nous avons, est notre connexion de contenu pour notre cartographie de site. Ensuite, nous devons nous assurer que ce que nous voulons Dio est de souligner ce qu'un utilisateur peut naviguer. Mais d'abord, regrouperons certaines choses ensemble. Comme nous l'avons mentionné, les principales catégories seront notre navigation principale pour le site, donc cela est généralement placé dans l'en-tête. Alors faisons un symbole, alors on va changer. Cela trop transparent a changé la frontière. Parler à Dieu changera l'ordre dans le dos. Nous pouvons utiliser le graphique au verso du document pour nous aider à aimer les choses un peu plus propres et à emménager. Vous pouvez faire la même chose en disant ici qu'il s'agit d'un en-tête et celui-ci s'éloigne autres pages qu'un utilisateur prendra. Changeons la taille. Assurez-vous que les choses sont centrées. Donc, disons la même chose pour notre pied de page va copier le rythme. Pendant ce qui suit, je dirai que c'est le pied de page, alors nettoyons le fichier juste un peu. Faire les choses un peu Niedere, en réduisant certaines des tailles. Toujours lui la même chose pourrait être pour notre contenu. Ici sec, ces gars légèrement page d'accueil est un peu d'accord Alors faisons la connexion. Utilisons notre ligne. Tear utilisera le connecteur oncle de sorte que la page d'accueil peut être naviguée pour être sur. Donc tout ce que vous avez à faire est de toucher ce point pourpre avec votre bouche. Maintenez-le là, bouton et faites glisser. On peut faire la même chose pour tous les autres blocs, mais faisons les barils pour ces gars ici. Donc ce que nous avons mis de livres Gallery nous mène à une page de livre, mais une page de livre peut aussi retourner à notre galerie de livres, donc nous allons avoir besoin d'un chant particulier. Alors nous allons changer et mettre la flèche tenant votre souris blonde et maintenez le bouton Maj. Vous pouvez simplement faire glisser vers le bas relâchement. On va faire la même chose en haut, on a dit un livre. Obtenez à côté d'un léger orteil, permettre aux utilisateurs par elle. Mais faisons ça. Et puis les articles font la même chose pour les articles principaux. Angle de contact par rapport à l'e-mail également. Donc, lorsque vous êtes sur ce site pour acheter un livre, il y a une référence pour vous ramener à la page d'accueil. Donc, vous ne pouviez pas en lire plus sur l'auteur si vous ne l'avez pas fait. Alors faisons une connexion là-bas. Ne touche pas à ça. Il suffit de maintenir le glisser-glisser vers le haut en cliquant sur cette touche de sélection. Comme vous pouvez le voir, nous avons des diamants. Ce que tu peux faire, c'est planer sur ce diamant. Faites glisser tout ici comme ça parce que c'est une connexion externe. Changez-le pour adopter un point Nous pouvons faire la même chose pour l'article principal. Faisons un autre chien comme ce chien ici. On y va. Changons le point en point Cliquez sur la touche de sélection, passez le curseur sur le diamant. Il suffit de le déplacer comme pour que vous puissiez également le faire glisser vers le bas. Donc c'est un peu plus facile pour les yeux parce que ce genre de frontières de nous connectons. Alors passons ça et ça en arrière juste pour le rendre un peu plus soigné. Prenons quelques notes sur cette section particulière. C' est des cochons de copie, et on dira quand c'est à un clic des livres. Calorie, qui le fait ? Une autre copie paie pour dire ici que ce sont des livres externes et là vous avez la cartographie du site. Nous avons donc terminé la cartographie du site de notre projet de coûts. J' espère que cela a du sens pour vous, et que Google draw peut vraiment nous aider à construire notre site, cartographier à travers facile et intuitif. Et c'est une excellente pratique si vous voulez simplement en savoir plus sur l'outil ou simplement apprendre à construire des diagrammes. Donc, pour que vous puissiez construire vos diagrammes de plan de site une fois que cela est terminé, nous pouvons parler de vos voyages. Tu vois la vidéo suivante ? 13. Voyage de l'utilisateur: utiliser votre parcours est le flux qu'il traverse habituellement lors de l'interaction avec un site Web entier . Il tourne autour d'un objectif d'action. Cela nous aide à comprendre ce que les utilisateurs vont faire et dans quel ordre. Quel est leur chemin du point A à me pointer pour accomplir une tâche ou un objectif. La partie délicate est de limiter le nombre d'étapes. Utilisez vos prises pour aller d'un point à un autre. Cliquer sur plusieurs boutons juste pour obtenir des informations étaient pour être en mesure d'acheter quelque chose va ennuyer un utilisateur. Vous devez assigner de manière ciblée afin que l'utilisateur ait une expérience agréable et revienne sur votre site Web. Certains emballages de jointure utilisateur peuvent être simples ou complexes. Comme ça. Le parcours de l'utilisateur de l'idée est de connaître la réponse émotionnelle d'un utilisateur, ses pensées et son expérience globale. À partir de ces réponses, nous pouvons obtenir des commentaires pour améliorer nos idées ou en créer de nouvelles. À partir de cet exemple, nous pouvons voir une expérience utilisateur de trouver un nouveau look pour nouveau abandonné d'être en mesure trouver un service qui lui fournira que vous regardez et dans lequel elle a une grande expérience et elle va plaider pour cela entreprise particulière. L' expérience globale des utilisateurs contient de nombreux niveaux sur est-ce plusieurs étapes ? Mais c'est le point d'utilisation de voyage est d'apprendre à connaître plus de vos utilisateurs parce que sont eux qui vont être votre site Web. Vous en tant que concepteur devra concevoir à leurs besoins et à leurs expériences jusqu'à. Suivant. Nous allons parler de notre projet de classe, donc nous allons commencer à construire nos rêves d'auteurs. Ouvrez votre fichier un utilisateur de site Web de conception pour moi Démarrer le fichier dans Global Drop. Changons nos objectifs d'action pour notre utilisateur. En fait aller pour un utilisateur serait d'acheter un livre pour obtenir des informations sur l'auteur ou le livre étaient d'entrer en contact. Étendez le bloc ici. Donc, disons que notre utilisateur, c'est n'importe quel potentiel. Qu' est-ce qu'il y a dans la caravane ? Changeons la taille avant juste pour obtenir beaucoup plus facile sur les yeux. Assurez-vous que tout est au centre. On lui a donné une frontière. Facilitez les yeux. C' est toujours juste une ville, accord, donc ah, un client potentiel peut accéder au site Web de deux façons. Donc, nous allons copier, payer et dire une recherche de base C'est un peu trop recherche Google et c'est suivi. J' ai piqué un peu en cours. Copiez les trous de collage plus juste au-dessus. Je vais voir bien. Je vais enlever la frontière froide. Transparent. Vous changez la recherche Google en une bordure pointillée. Laissons ça un peu plus bas, donc c'est un peu plus proche. Donc je vais copier Coller ça pour le prochain point d'accès, et ça pourrait être maintenant. Utilisez le rire d'ici. Console à mais mélanger. Nous pouvons commencer à construire le réseau social à ce stade. Goûtez que nous verrons. Donc, Sean, traînons un peu les taches parce qu'on a dit « Centrer ce bloc ». C' est pourquoi il protège le centre. Alors changeons ça pour que nous ayons Twitter. Je reste sur Facebook maintenant. L' autre pourrait faire partie de nombreux autres écrivains et groupes de livres bruts. Donc, disons que les bons lisent celui-ci. Un autre. Disons juste au club juste du courage à Herrick. Une autre semaine sera, hum, YouTube. Peut-être que quelqu'un est tombé sur une page YouTube où elle parle de ses livres. Donc je pense que le dernier siège pour l'instant. Faisons un exemple rapide de tous nos points d'accès. Les X points peuvent être très complexes. Donc, euh, tout ce que vous devez faire pour construire votre point de site Web pour déterminer votre parcours utilisateur vous aidera avec la conception de votre site Web. Mais pour cet exemple de ce projet de classe, nous allons le rendre aussi simple que possible. Centrer tout ici et construisons Ah, site web. Je vais juste copier coller nos éléments pour gagner du temps, pousser ça ici. Religion sur notre page d'accueil de notre site Web est qu'elle a une liste d'autres galeries de livres. Mais en attendant, nous allons mettre en page les principales catégories pour obtenir la page d'accueil que nous avions sur les livres. Nous avons également eu nos articles sur la page contact. Maintenant, nous avons dit que les livres ont une galerie de livres qui conduirait à une page de livre, la même chose pour les articles qui seraient conduits à un lien externe étendu des sites informatiques. Maintenant, les articles seront également traités de la même manière où il a un lien externe vers l' article principal . Alors construisons un bloc supplémentaire. Utilisez le point pour pointer, je vais dire des livres ici, une autre copie de la paix. Son livre. Donc essentiellement, nous sommes en quelque sorte en train de construire notre cartographie de site dans le site Web. Ça n'a pas besoin d'être exact, mais c'est quelque chose de simple. Il semble encore pour les articles ici médicaux afin que nous essayons de construire un petit exemple de notre site Web sieste. Nous avons mentionné que l'article principal nous retrouverait sur le site Harmony. Donc c'est un autre point d'accès. Alors faisons que cela se produise. C' est ce Copy coller ces individus ici et nous allons dire des liens externes. Et ça pourrait être un article, une page histoire. Voyons voir ça. Ou il peut aussi être le site d'achat de livres. Revenons à notre page interne. Je vais enlever des articles et des livres. Kristen le rendrait un peu plus propre. On va remonter au sommet et ce que je vais faire ici. Connectons ces blocs individuels. Donc, je vais faire un Y et connecter les points ici en utilisant mon changement d'objet sélectionné à la ligne de bordure du quai , et nous allons utiliser les cercles pour indiquer que la bête sont connectés, et je vais rétrécir cela juste pour obtenir un peu plus propre a a changé la forme de notre site Web . Eh bien, nettoyons ça un peu. Il y avait du froid. L' action que nous avons ici. Serait d'acheter un mais obtenir le contact, obtenir des informations en contact. Alors revenons en bas. Je ne sais pas. C' est le site. Aidez juste à nettoyer les choses ici. Maintenant, connectons notre navigation externe et interne à l'aide du connecteur Hubble. Eh bien, le client potentiel à une recherche de base. Peut-être qu'on aura une longue lettre d'information. Réseau social où ils rencontrent des liens externes. Allons nettoyer ça juste un peu. Je me suis levée Mlle Uppers Wall. On va juste, c'est un peu plus. Donnons des mois à ces gars. Non, le point d'accès nous ramènera toujours au site, alors faisons-le. Il est dans le coude, les liens externes. On va mettre cette partie ici. Réseau social. Il suffit de marcher, vous savez, la même et la chirurgie de base sur le site Web. Dans l'ensemble, le site nous emmènera toujours à Oops, il a touché cette étape particulière pourpre obtenu. Achetez un livre. Alors sélectionnons toutes ces marques. Donnez-lui un étroit. Maintenant, nous avons mentionné l'article besoin pour les ings externes. Alors quoi ? Le avec le site d'achat de livres. Donc c'est génial. Je dois pointiller avec le coude. Eh bien, ce n'est pas se soucier, et l'article sera de retour ici pour affaiblir certaines antennes. Ici, nous choisirons la frontière. Ce gars va. Laisse-moi voir si je peux obtenir le diamant qu'ils ont. C' est ce qui fait une flèche. C' est choisir un L. différent Jusqu'à présent, voici comment notre parcours utilisateur pourrait ressembler à un client potentiel. Conexe notre site Web à travers quatre points d'accès de base. Basic Search England newsletter. Un réseau social ou faire divers luminaires moulures qui se connectent à notre site Web. Dans le site Ouest, l'utilisateur peut naviguer en interne sur la page d'accueil à propos de la page, contact, clics de page, page et de la page d'article sur les livres et articles. Page peut rencontrer à secondaire quelle page ou un lien externe. Dans l'ensemble, l'objectif d'action peut être complété maintenant le canal client potentiel, soit par un livre obtenir pour majeur ou contacter l'Arthur. C' est ainsi que vous utilisez votre voyage peut ressembler. Maintenant, c'est à votre tour que vos rêves utilisateur. Assurez-vous de connecter votre contenu à votre navigation Charles et pensez à la façon dont vos utilisateurs navigueront sur votre site Web et à ce que vous souhaitez qu'ils fassent l'expérience. Une fois cela terminé, nous pouvons commencer à parler de design réactif. Nous verrons dans la prochaine vidéo 14. Conception réactive: conception réactive de X. Comment nos mises en page Web vont être conçues parce qu'il y a tellement d'écrans sur la balle de votre téléphone mobile à votre ordinateur de bureau. Quelles mises en page doivent être une restructuration et répond aux changements de tailles d'écran. Tout est disposé dans une affaire très propre, organisée et déterminée. Le contenu sera conçu pour s'étirer vers l'extérieur, mais pas défini sur une taille d'écran spécifique. Pourquoi la crème de prototypes aide à structurer cette mise en page. Alors quoi ? Pages conçues en empilant les blocs le contenu d'une page Web est décomposé dans le corps , où nous avons l'en-tête, pied de page principal et quelques autres blondes sémantiques. Puisque nous devons concevoir le contact, étirez-vous. On peut utiliser les mises en page de Greg. Nous alignons les blocs CERN sur les pages Web. Grain. Voici quelques exemples de cet artiste Chris Bannister. Il a créé une salle de fil sensible Jif. Je ne pense pas que ce soit un excellent exemple pour vous montrer le Constable Responsive Web. Jetons donc un coup d'oeil si vous cliquez sur le bureau. Comme vous pouvez le voir, les ordinateurs de bureau grandissent ici est assez blanc sur le contenu qui s'étirait. La galerie de produits a quatre colonnes et si nous regardons ci-dessous. Le pied de page a également quatre Collins, et il est aligné en tant que tel. Donc, c'est un mensonge de se transformer en une grille, et cela en fait pour un site Web soigné, la navigation et le groeller moyen ou une autre partie du contenu qui est en quelque sorte divisé . Mais si nous regardons la tablette, ils peuvent voir le produit. Galerie a montré qu'il a fallu trois colonnes, donc essentiellement un bureau peut stricter son vert pour devenir une tablette. Donc, une fille moyenne de navigation er, toujours genre de reste le même. Mais la galerie de produits et le flotteur leur grille a l'atout d'un style de trois colonnes, et ce n'est pas si mal. Mais c'est parce que garder un esprit supprimerait d'un appareil à l'autre. Surtout, nous allons d'une vue de bureau orteil une tablette. Le contenu se rétrécit, donc une autre façon d'y penser est que le contenu devrait pouvoir se propager vers l'extérieur. Cela signifie donc que lorsque nous travaillons avec un paramètre mobile, le contenu devrait simplement compter sur l'écran lui-même, doit être flexible. Donc, sur le réglage de son téléphone, nous avons remarqué que notre galerie de contenu s'est maintenant réduite à une grille d'une colonne. Et ce n'est pas si mal, parce qu'avec le téléphone, quand on fait défiler de haut en bas, c'est dans une section d'une colonne. Avez-vous remarqué la navigation ? Il est ivre lui-même dans un menu hamburger de sorte que ces navigation peuvent maintenant être accessibles par un menu déroulant. façon dont vous concevez votre réactivité dépend de vous, mais il y a des modèles de conception que nous pouvons suivre. Mais c'est pour une autre vidéo dans le futur. Je veux juste souligner ce lien, informatif, responsive design Web. Blawg ici, et ils ont de grands exemples où ils touchent sur des sites de la vie réelle. Donc voici de la nourriture. Puisque j'aime vraiment leur style, ils sont un design réactif. Donc, si vous regardez de près, c'est la vue du Bureau. Ils ont leurs icônes de médias sociaux dans le flottement et leur navigation sur la gauche sous forme de menu latéral. Ils ont l'image principale ici au centre et une grille à quatre colonnes d'autres articles ainsi . Mais lorsque vous passez à une vue Tablette, la navigation à partir de la barre latérale se déplace vers le haut. L' image principale s'est déplacée au centre de la page, et le bon de quatre colonnes s'est étiré vers l'extérieur sur cette information ici est resté le même. Passant à une disposition de téléphone ou de mobile, nous avons remarqué que la navigation a été poussée vers le haut sans les icônes. Le local s'est centré au milieu. La galerie Mitch est toujours au centre, mais tout le reste est devenu une grille d'appel unique. Il s'agit donc d'un exemple de design Web réactif. C' est une excellente façon de penser comment vous voulez mettre en place vos cadres métalliques et prototypes avant un projet de classe. Je vais m'en tenir à une taille d'écran de 1024 pixels. On en parlera plus quand on ira vers notre fil. Libére-moi, mais on se verra dans la prochaine vidéo. 15. Continuez à accéder au message 2e partie: merci d'avoir pris la façon de concevoir une partie de site Web Quoi ? Nous avons couvert beaucoup de terrain sur le processus de conception, en particulier l'étape de planification. Ensuite, veuillez passer à la deuxième partie pour en savoir plus sur les étapes de saisie du cadre métallique et du portail. Pourquoi mettrons-nous tout ce que nous avons appris dans nos structures de notre application Web ? On se voit là-bas.