Des conseils simples (mais efficaces) pour faire ressortir votre site web

1. Introduction: Bonjour, Je m'appelle Kathy If Orania et sur un concepteur Web et développeur. Au fil des ans, j'ai travaillé sur d'innombrables projets pour des clients allant des petites entreprises aux grandes entreprises. Chaque projet que je serais allé me donne l'occasion d'étirer ma créativité et repousser les limites telles que la conception Web traditionnelle. Au fil des ans, j'ai développé quelques techniques simples mais efficaces qui ont aidé à faire site Web Se démarquer de tout le monde est C'est vraiment important parce que de nos jours tout le monde a un site Web avec de plus en plus de sites Web sur Internet est elle de laisser un impression durable sur les utilisateurs et de faire de votre site Sandow en général. Donc, dans ce cours, toujours partager ces techniques avec vous ainsi que des démonstrations de bons exemples. Mais d'autres concepteurs et développeurs que nous utilisons des techniques similaires pour rendre leur site Web remarquable travailleront également ensemble sur un projet de classe et qui transformera une page Web inférieure à la moyenne en une page bien conçue. En utilisant ces techniques certains de base que les connaissances de conception et de développement seraient suggérées juste pour que vous puissiez suivre un peu mieux. Donc, si vous êtes prêt à faire passer votre site Web au niveau supérieur, apprenez à faire ses mots qui se démarquent, commençons 2. Faire votre recherche: avant de commencer à développer un concepteur, il est vraiment important de faire vos recherches. abord, vous pourriez passer des heures deux jours, deux années même à chercher la meilleure information possible. Cependant, cette classe nous allons nous concentrer sur deux choses en particulier connaître votre base d'utilisateurs et définir l'objectif de votre site de fesses. Connaître votre base d'utilisateurs est extrêmement important car beaucoup de Decatur vos conceptions envers votre ensemble d'utilisateurs. C' est aller pour n'importe quoi des mises en page. Deux couleurs trop loin Choix. La meilleure façon d'expliquer ceci est un spectacle. Un exemple. Donc, pour un exemple de corbillard, on va faire semblant de concevoir un site web pour quelqu'un qui est plus âgé. Donc, je suis tombé sur ce site web de la maison de vieillesse, qui je pense est un bon exemple de ce que vous voulez faire. Ce n'est pas parfait, mais il a beaucoup de bons attributs, donc la navigation est vraiment simple à suivre. Hum, et tout le contenu est bien aménagé. n'y a rien de fantaisie à ce sujet, mais c'est ce qui le rend facile. Il est facile à comprendre, facile à faire défiler facilement l'information. Maintenant mettre cela en contraste avec le site Web Red Bull, qui est un site vraiment fantaisie perdu en cours d'animation, de vidéos de fond. Mais pour quelqu'un qui est plus âgé, ça pourrait être trop. Ils pourraient tomber sur cette page Web et ne pas vraiment savoir ce qui se passe, se sentir dépassés et simplement renoncer à essayer de trouver l'information qu'ils veulent. Un autre bon exemple de montrer de connaître votre base d'utilisateurs est un contraste entre Wal Mart et Nike. Même s'ils sont tous deux des sites de commerce électronique, leurs conceptions répondent très différemment aux différentes bases d'utilisateurs. Donc, une personne typique qui vient sur le site Web de Walmart pourrait être considérée comme quelqu'un qui veut des prix bas , elle produit et juste obtenir vraiment facilement. Et c'est une sorte de ce que le site Web de Walmart répond. Mec qui travaille au début, ils ont un tas de bannières, euh,les euh, prix les plus bas. Épicerie gratuite, essayant vraiment de souligner que venir dans un WalMart est pas cher. Je suis juste en dessous. C' est tous vos départements de boutique vraiment facile à trouver, certains faisant un processus facile pour venir sur le site et obtenir vos produits bon marché. En revanche, Nike veut que leurs utilisateurs se sentent comme ils achètent les meilleurs produits et généralement les gens qui l'achètent maintenant, il veut aller plus vite. Athlètes. Ils ont une certaine image que vous essayez d'afficher. Nike veut défendre cette image. Donc, leur site Web est de l'eau très propre. Um perte d'animation, beaucoup de vidéo à essayer de souligner ce sentiment de luxe pour leurs utilisateurs, similaire à connaître votre base d'utilisateurs. Connaître l'objectif de votre site Web est également très important pour faire une conception efficace de votre site. Donc, des exemples d'objectifs pour le même site de commerce électronique serait de vendre vos produits ici. Mettez pour votre site Web est d'afficher votre travail ou pour le site Blawg est d'obtenir plus de lecteurs. Un site Web de groupe géographique national est un bon exemple de blogueur ou de site Web d'information. Donc, à partir de la première page, vous venez sur le site Energie ist histoires. Donc vous voyez leurs dernières histoires, Um, toutes les infos et il y a juste beaucoup de contenu tout de suite. Donc, vous venez sur le site Web, vous voyez du contenu, vous cliquez dessus et puis vous êtes accro. Voulez-vous commencer à lire de plus en plus. Best Buy est un exemple de site Web de commerce électronique, donc ils ne se soucient pas tellement d'avoir un bon contenu. Ils veulent juste vous montrer les produits que vous cliquez et achetez. Donc, vous venez sur le site directement par le haut. C' est juste les dernières offres et essentiellement des produits pour vous d'acheter. Um, et pourtant cela montre juste le contraste entre un nouveau site sur, puis un site de commerce électronique. Donc, une fois que vous avez votre base d'utilisateurs et l'objectif de votre site Web pour trouver l' inspiration pour que vous puissiez trouver l'inspiration, il est facile de sortir sur Google et de taper, hum, hum, sites Web de vos concurrents et de voir ce qu'ils font ou tout simplement passer au hasard par Internet et vu si vous rencontrez quelque chose. C' est agréable, cependant, pour les sites Web que j'ai toujours tendance à aller à trouver l'inspiration est prix dot com, qui présente certains des meilleurs sites Web ou les meilleurs sites de conception sur Internet par des concepteurs et développeurs étonnants . Ces air souvent très progressistes et avant-gardistes sites, sorte que vous ne voudrez peut-être pas mettre en œuvre tous leurs aspects de conception, mais vous pourriez certainement enlever des morceaux et des morceaux. Un autre bon site est dribblé. Eso. Cela a des milliers et des milliers de designs par des utilisateurs de partout dans le monde dont vous pourriez vous inspirer. Encore une fois, le fait est vous ne voulez pas copier un dessin, mais c'est génial de regarder autour de vous pour voir ce qui est là-bas et de vous inspirer avant de sauter dans un projet. 3. Configurer votre projet: Maintenant que vous savez l'importance de faire vos recherches avant de commencer un projet, nous allons vous présenter notre projet de classe, qui consiste essentiellement à prendre cette page Web mal conçue que j'utilise pour commercialiser la classe que vous regardez en ce moment, deux autres utilisateurs de sculptures ou personnes intéressées par la conception Web, et nous allons la prendre et la transformer en une page web bien conçue. Nous allons donc le faire en explorant différents éléments de la conception Web tels que la typographie, mise en page, les couleurs, animations et les transitions et l'imagerie de transistors. Et même si vous n'avez pas d'expérience de codage, c'est bien, parce que tout va être pré-codé. Donc tout ce que tu vas avoir à faire, c'est des cours d'Assam ou des commentateurs. Peu fréquent. Quelqu' un est un code, donc ce sera très facile de tomber. Nous utilisons également Code Ben, qui est un éditeur de code en ligne, donc il n'y aura pas besoin de télécharger des programmes. Tout ce que nous faisons sera ici dans votre navigateur sur cette page. Donc, si vous n'avez pas un compte de stylo de code arrête déjà la vidéo et allez à code pen dot io et inscrivez-vous pour un compte gratuit. Alors maintenant que vous avez votre compte gratuit enregistré rapidement. Le lien de point de départ dans notre description de classe qui vous amènera à une page comme celle-ci. Avoir vos points de vue différents. suffit de cliquer, vous changer et de choisir la vue que vous souhaitez utiliser. Personnellement, je préfère le côté, mais c'est une préférence personnelle. Donc ce qu'on va faire maintenant, c'est juste de fourrer le projet en cliquant sur le porc en haut . Ce qui fait est de copier le point de départ aérien sur votre compte afin que toutes les modifications que vous apportez soient enregistrées sur votre propre compte. Et juste pour éviter toute confusion, on va renommer le point de départ pour travailler. Donc notre projet est maintenant mis en place et vous êtes prêt à partir. Donc la seule autre chose que nous pourrions utiliser est notre dépôt, que je vais aussi laisser un lien vers une description de classe et qui va juste stocker quelques images . Je vais mettre le projet de classe d'arrivée là-haut et nous aurons notre guide de conception là-bas, qui expliquera tous un peu plus tard. Donc, une fois que vous avez mis en place cette page, vous êtes essentiellement prêt à partir et ah, commençons avec nos projets de classe. 4. Concevoir des mises en page originales: Ok, Donc le premier élément de la conception qui va travailler avec un projet est la mise en page. Donc je suis sûr que vous avez tous vu quelle page comme ça avant. C' est assez générique. Donc, vous avez votre grande bannière tournante, dessus votre menu collant, hum , et puis juste très chanceux fait. Et puis vous avez vos petites icônes avec les nouvelles en dessous. Eso vous pourriez même aimer celui-ci est assez basique. Mais alors on pourrait y aller. C' est un peu plus intéressant, mais encore une fois, vous avez probablement vu quelque chose comme ça avant, donc vous avez votre curseur vers le haut. Ah, ton grand donne tes images avec tes informations en dessous. Donc, il n'y a rien de mal intrinsèquement avec une page Web comme This is great affiche des informations . Le seul problème, c'est c' est juste une sorte de mélange ensemble ? Si une personne visite votre site Web, elle n'aura pas une impression durable. Hum, et encore, selon l'or, votre site web, votre site web, vous n'aurez peut-être pas besoin de cette impression durable. Mais si vous voulez avoir un plus grand impact sur vos utilisateurs et est préférable de vous éloigner de ce style de conception typique, donc comme je l'ai dit, donc comme je l'ai dit, il n'y a rien de mal intrinsèquement à ce type de conception Web ou quelle conception de page et il fonctionne. C' est pour ça que tant de gens l' utilisent, utilisent, car c'est efficace. Mais la chose est, vous pouvez toujours garder beaucoup des mêmes éléments sans qu'il soit exactement le même type de mise en page que vous voyez sur des tonnes d'autres pages Web. Donc, nous allons jeter un oeil à cette page, qui est un site qui tombe en quelque sorte le même guide. Il y a donc le même grand type de mise en page de bannière de héros, la même navigation flottante. Mais ils l'ont changé juste assez pour qu'il ait son propre style original. Donc, juste la façon dont ils ressemblent aux chevauchements de l'appareil et les moyennes d'arrière-plan rend un peu plus intéressant à regarder au lieu de simplement les lignes de coupe droites que vous voyez sur l' autre page Web. Même en descendant ici, ce sont des petits pâtés de maisons. Il a un peu plus d'intérêt pour elle, avec l'arrière-plan et les superpositions, euh, et juste tout ce qui se passe avec elle. Ainsi, vous pouvez le voir en faisant défiler cette page. Il a tous les mêmes éléments dans les mêmes fonctionnalités que cette page ici, mais il a juste fait d'une manière qui fournit un peu plus de créativité, ce qui lui permet de se démarquer qui ont une meilleure impression durable pour ses utilisateurs. Voici donc un autre site qui, je pense, est vraiment bien fait dans le sens où il conserve deux autres composants traditionnels d'un site Web. Mais c'est fait d'une manière qui le rend très original, euh, et passe à travers le message que le site essaie de dépeindre donc ici vous pouvez voir que c'est toujours la même bannière de héros ou comme l'ont fait, Ah, page comme ceci. Tu as toujours ce grand héros. Mais juste la façon dont le Texas coupé par l'image de la personne le rend plus intéressant, et même juste la taille et la propreté de tout autour lui donne en quelque sorte ce sentiment propre, euh, propre, euh, et moderne. Ensuite, si vous faites défiler vers le bas, juste le côté espace blanc des utilisations, souligne vraiment, um, ou vraiment vous permet de vous concentrer sur le contenu qui est là sur ce que j'ai trouvé. Particulièrement intéressant est son utilisation de ces images de fond pour le fait en ajoutant une petite image au bas de la Div. C' est un peu l'éclaboussure de peinture, il semble que ce n'est pas seulement un div en ligne droite et lui donne un sentiment plus intéressant. Alors tu es plus traditionnel genre de lignes droites que tu verrais entendre, ou surtout à travers cette barre bleue. Alors tu es plus traditionnel genre de lignes droites que tu verrais entendre, Maintenant que nous avons exploré quelques idées sur la façon de transformer une simple page Web en quelque chose d'un peu plus créatif et unique, nous allons appliquer ces éléments à notre projet de classe. Donc, j'ai mis juste un modèle simple de ce que nous avons déjà. Ah, cadre en fil de fer très basique. Et puis j'en ai fait un qui est ou le cadre métallique de ce que nous espérons réaliser, euh, grâce àla nouvelle mise en page. Et puis j'en ai fait un qui est ou le cadre métallique de ce que nous espérons réaliser, euh, grâce à euh, Si vous voulez les ouvrir vous-même, vous pouvez ouvrir notre lien de dépôt et aller au guide de conception. Et puis je serai la classe, euh, euh, bien conçu commencer PDF et la conception de classe Pdf. Donc, juste pour résumer, notre point de départ d'un projet de classe est un emporte-pièce très droit, plus une ligne droite, hum, pas très intéressante. Très fondamentalement sorti. Et quand nous regardons, regardez cette page, les éléments que j'ai vraiment aimé à ce sujet étaient ce côté de cette idée de masquer en masquant beaucoup de lignes droites. Donc, quand vous regardez ce que nous avons fait avec notre nouveau, nous avons appliqué cela à notre page à notre manière. Donc, au lieu d'avoir toutes ces lignes droites ici pour chacune des sections, nous avons appliqué des vagues sur chacune des parties supérieures, de sorte que cela donne juste une sensation plus fluide de la page Web au lieu de toute la coupe droite lignes également en haut. Ce que j'ai vraiment aimé sur ce site était l'ouverture de la bannière du héros et juste la taille, l'utilisation en plein écran de celui-ci. Donc nous l'avons fait aussi. Donc nous avons fait un grand héros de haut, avons rendu agréable et propre. Mais ce que nous avons fait est en quelque sorte rétrécir l'image. Donc, au lieu d'être juste une grande image de rouge à travers, nous allons faire de l'image un peu plus faible lob. Hum, ce mai n'a peut-être pas beaucoup de sens en ce moment, mais quand nous aurons terminé notre projet, ça aura beaucoup plus de sens de ce site. Les éléments que j'ai vraiment aimé étaient les dibs qui se chevauchent. Donc juste une sorte de l'idée de ce truc se chevauche au-dessus de cette image de fond. On va prendre cette idée et l'amener à notre côté aussi. Donc, vous pouvez voir ici sur les petites vignettes d'icônes qui auront notre texte pour les tuiles sorte de chevauchement avec les icônes elles-mêmes, puis ici, similaire à ce que l'autre page a fait. On va avoir une image de fond, mais la div en haut et juste un peu décalée vers le bas. Encore une fois, l'idée de chevaucher le contenu. Donc j'espère que si vous regardez cette page et quand vous regardez la version construite de celle-ci que vous pouvez voir ici, vous pouvez imaginer que lorsque nous construisons cette version de la page Web Oh, regardez beaucoup plus agréable. La mise en page sera beaucoup plus intéressante. Donc, dans la prochaine partie de cette classe va entrer dans le code et changer réellement notre projet pour devenir plus ressemblant à ceci 5. Mettre en page la mise en page: Donc maintenant que nous savons ce que nous voulons notre nouveau orteil Leo ressemble donc nous avons un design ici, comme être exploré avant de vouloir passer par le code et mettre à jour cette page pour commencer à ressembler à ça. Encore une fois, c'est juste un cadre métallique de base, donc ce ne sera pas exactement le même. Mais c'est plus juste un guide, et alors ce sera un peu la version la plus polie. Donc, comme je l'ai dit, tout est déjà pré-codé. Donc, nous allons juste chercher tous ces petits objets à faire et qui sont étiquetés avec la mise en page et essentiellement les appliquer aux éléments et pour la couche, tout va être dans chacun, vous savez, donc vous pouvez juste rétrécir votre CSS et JavaScript. Alors prenez C'est un pourboire. Encore une fois, nous avons notre premier à faire l'article ici, qui est d'appliquer la classe claire à Topper. Donc nous avons notre partie supérieure, euh, élément juste ici. Donc on va s'appliquer clairement. Et comme nous le faisons, vous pouvez immédiatement voir que la mise en page a changé. Alors on va continuer à défiler vers le bas et trouver la prochaine aussi. Est-ce qu'ils sont assis bannière. Un bluff conçu pour bannière de base. Donc ils n'ont pas créé de blob. Et maintenant, vous pouvez voir qui sont la première page commence à regarder un peu différent et disposer à nouveau sug Uncommon. Et en faisant ça, nous allons avoir notre héros ressemblant à ce que nous avons conçu. Donc nous avons notre blob ici, le gros texte, et ensuite nous allons avoir un blob. gros SMS, euh, sont mais au milieu, et ça va être quelque part. Donc juste pour le répéter, c'est tout la mise en page en ce moment, donc les couleurs et la typographie vont toujours être rugueuses, mais nous allons l'explorer plus tard dans sa classe. Donc, nous allons juste continuer à passer par ce manteau et trouver la disposition pour faire des objets. Donc mise en page sur le commentaire SPG si rare qu'ils sont. Je ferais la classe milieu empotage et fond doux à la section enlevée classe. Ah, petite planification. Désolé. C' est l'erreur juste là. Alors appliquez ça. Et voici un autre calque que je croiserais décalé design deux tuiles d'icônes de base. Continuez. Nous allons juste passer par tout le html et trouver tous les trop deux éléments et les mettre à jour donc je puce de classe qu'il donne à notre section et supprimer tapting classique de notre section Donc rare son S P G Nous serons ce petit rappeur de classe supérieure et tapting contenu Teoh Trapper déplacer classe petit corps Donc nous allons juste planer dessus et le remplacer par petit rappeur milieu poudre Vous allez vers le bas Eh bien, je coûterais gros pot dans la section vous déplacez classe Petite planète une section que je n'ai pas que Donc, le signe et puis il va nous descendre deux ou un p directions de thérapie et puis notre dernière mise en page est tout simplement et commenter Ce n'est pas un code ici le SPD Donc en faisant cela, nous avons fondamentalement passé par notre page et fait tous les changements nécessaires pour transformer sont mise en page en allow qui ressemble à ceci. Donc, si vous faites défiler la page vers le bas, vous pouvez voir que sont mise en page est maintenant mis à jour et certainement un grand et prouver a disparu nous avons déjà eu Ou quoi de la grande amélioration inductive de la conception originale. J' ai en fait remarqué quelque chose Ah que j'ai oublié de mettre dans alors oh, faites-vous passer à travers afin que nous puissions mettre à jour cela ensemble pour la section sur moi et le contenu. Rappeur. On va ajouter un petit rappeur. Oh, et je vois que je l'avais ici. J' ai juste oublié de le faire. Donc c'est mon erreur. Donc maintenant, quand on fera défiler vers le bas, ce sera juste plus serré. Texte et un meilleur look avec l'espace blanc ont passé par une mise à jour de notre mise en page et nous sommes maintenant prêts pour la prochaine étape. 6. Choisir la bonne police: donc un autre élément vraiment important de la conception graphique ou Web design ou tout autre design, est vraiment la typographie. Eso. Dernièrement, il y a eu une sorte de navires d'avoir la typographie être très scié, servi sur des baies. Juste despoints propres et simples, points propres et simples, ce qui est bon car il se rend facilement et il est clair sur tous les écrans. Mais avec des téléphones plus gros sortant et des résolutions plus nettes sur les appareils et pour la plupart des écrans des gens utilisent, nous pourrions recommencer une police Sarah plantain. Donc un bon exemple qui est chimpanzé mâle. Alors regarde Nelson. Ils l'ont vraiment ramenée. Et ils ont de beaux gros serpents pour tous leurs titres. Et c'est un peu Sando juste parce que tu ne le vois pas tellement en ce moment. Et il s'éloigne de vos étangs typiques, très propres et coupés. Donc encore une fois, comme nous avons été en quelque sorte couvrir encore et encore, il n'y a rien de mal avec des étangs propres. Il doit juste servir votre but. Donc, le but de Milton, il se distingue ce petit peu, quel genre de quand vous venez sur le site qui mélangé avec le jaune et tout, il attire vraiment votre attention, donc choisir vos polices est vraiment important, et aussi je veux attendre. Donc, si vous regardez Wikipédia, même si le site est très simple en termes de style de conception, le poids forint est la valeur. Donc, comme tous les titres sont beaux et dorés, sorte que vous attirez votre attention directement là. Donc, vous voulez garder cette idée pour n'importe quel design Web est comme si vous avez des informations importantes faisant un rocher, faisant un démarquer mieux que tout le reste, Donc un bon fonctionne comme ça utilise sorte de Cela rend les déchets avant avec nouvelle typographie moderne, même en utilisant quelques paires de chansons, c'est sur. Sarah est une agence énorme, donc c'est leur site web ici. Ils utilisent des polices très grandes et audacieuses pour tous leurs en-têtes. Mais puis beaux, simples et propres étangs Sarah pour dessous. Donc, comme vous pouvez le voir comme, il a vraiment une forte impression sur vous, surtout la première page, qui est juste grand, audacieux Bonjour. Il capte votre attention tout de suite et vous permet de vous concentrer sur le site Web. Donc, une chose à garder à l'esprit avec vos designs et typographie est de s'assurer qu'il est lisible pour que vous puissiez avoir la meilleure typographie de design. Mais si le texte peut réellement être lu, et qu'il ne sert pas vraiment un but, surtout s'il essaie de fournir des informations précieuses. Donc, la taille de la police, plus facile envie de corriger. S' il est trop petit, suffit de sauter la taille du téléphone jusqu'à ce que les gens puissent le lire. Une chose à laquelle vous devez accorder un peu plus d'attention est votre contraste. Donc, ce fond doux, le grand sombre, contraste vraiment les uns les autres bien. Vous pourriez le lire, hum, assez facilement. Eso a mis un mauvais contraste. Disons que si vous commencez à le mettre sur un gris plus doux, cela pourrait sembler agréable et certains scénarios de conception. Mais, hum, ça pourrait être très difficile à lire, surtout si votre écran n'a pas la meilleure définition de couleur ou si vos utilisateurs ont une mauvaise vue qui pourrait devenir très difficile, voire impossible, à lire. Donc juste deux choses simples à réparer. Mais pour garder um, attention à parce qu'ils peuvent rendre assez difficile pour vos utilisateurs de lire votre contenu. Maintenant que nous avons exploré certains principes de base de la typographie, allons les appliquer à notre page Web. Donc similaire à notre mise en page, nous allons juste chercher notre typographie pour faire des objets et les appliquer à notre h lui dehors. Donc, cela va aussi avoir quelques éléments à faire dans notre CSS, Mais obtenons le html fait d'abord. Donc toppy Big title Quiet est le titre de la section. Donc tout ce qui est en Asie, j'étais quelques titres de section de plus, donc je vais faire défiler rapidement et appliquer ceux qui me concernent et ensuite pour entrer en contact au lieu d'un petit titre au lieu de, hum, gros titre. Désolé. On va mettre une petite queue si vite. Vous pouvez simplement voir que les tailles de police sont de gros titres ou les titres de section ont changé. On dirait que j'ai raté un eso juste ici, donc on va recommencer maintenant. Vous pourriez voir un deuxième titre est maintenant beau et grand. Donc ici, nous allons regarder notre CSS où nous avons toutes les bonnes importations pour nos formulaires Google. On va commenter ça pour importer nos nouveaux téléphones, et ensuite on va juste changer. Vos variables sont ah, CSS Très bateaux des chansons de police sur Sarah à nos nouveaux hants. Nous sommes désolés. On va changer nos variables ici pour nos nouvelles polices. Donc notre monstre sur lequel nous venons de charger avec Google veut que nous allons mettre comme nos chansons hantent ou veulent des chansons variables et ensuite nous allons prendre notre très si Sarah Font et appliquer ça à notre Sara supportable. Donc, vous pouvez maintenant voir qu'il passe par le site qui sont de nouvelles formes ont été appliquées Nos titres de section sont sympas Ah, Sarah polices maintenant qui, comme nous avons exporté les navires de courrier se démarquent un peu plus agréable et tous ces fonds sont un peu plus agréable aussi. Et il semble que je n'ai absolument pas fait quelque chose avec la mise en page. Non, aidez-moi vite. Tu sais, je t'entends. Alors rappeur. Donc, nous respectons déjà cela dans notre mise en page, mais j'ai juste foiré et ah, besoin de répondre. Ok, alors on y va. Tout a l'air bien et nous sommes prêts pour la typographie. 7. Choisir de magnifiques palettes de couleur: avoir une bonne palette de couleurs ou une peau de couleur pourrait aider votre site Web à se démarquer . Par conséquent, il est important d'essayer de trouver les couleurs qui conviendront le mieux à votre site Web si vous n'avez aucun sens de la théorie des couleurs ou de la conception des couleurs que c'est bien parce qu'il y a outils qui pourraient vous aider à générer de belles palettes. Ce sont des refroidisseurs, qui est un générateur de palette de couleurs. Nous devons donc faire est de cliquer sur ce bouton de génération. Non, générez une belle palette de couleurs pour vous. Donc, comme vous pouvez le voir, nous venons d'en générer un et c'est plutôt sympa. Si vous ne l'aimez pas, vous pouvez simplement cliquer sur générer encore et encore et encore jusqu'à ce que vous trouviez quelque chose que vous aimez. Ou, si vous le souhaitez, vous pouvez explorer les palettes de couleurs d'autres personnes qu'ils accouplent et voir si vous pouvez y voir quelque chose qui, selon vous, fonctionnerait bien avec votre site. Donc juste en haut de ma tête, passant par ça ici, hum, quelque chose comme ça serait comme une belle palette de couleurs pour un site plus minimaliste . On est juste sur le bleu foncé, le gris. Je ne pense pas y aller ensemble. Hum, nous continuons à faire défiler ça ici serait quelque chose que je pourrais voir, juste ici. Donc, ce serait quelque chose que je pourrais voir être bon pour site Web respectueux ou une sorte de charité de l'environnement où vous avez vos mandats brillants pour se démarquer du vert. Mais vous avez toujours le vert pour agir comme référence à l'environnement et tout. Je viens de voir cette palette de couleurs ici me fait penser à la crème glacée. Donc, pour une raison quelconque que je mets que dans un magasin de crème glacée, sites Web, mêmes fils ou quelque chose comme ça encore juste ces choix de couleurs me fait penser à la crème glacée. C' est ce que j'utiliserais. Donc, juste pour réitérer le point est vraiment d'essayer de trouver une palette de couleurs qui correspond le mieux à votre contenu et d'essayer de le fusionner efficacement de cette façon. Maintenant que vous avez choisi votre palette de couleurs, il est également important de savoir comment l'utiliser efficacement sur un site Web, donc cela va avoir les belles couleurs qui vont bien ensemble. Cela ne signifie pas que si vous les couper partout, ils vont nécessairement faire un beau site Web à la recherche donc une façon que je pense que ce site a fait du bon travail, mais c'est que leur palais est assez vibrant, donc ils ont vert, violet, orange, lire juste un tas de couleurs vraiment fortes. Donc, au lieu de faire un tas d'éléments, ces couleurs, ils les utilisent comme plus pour les éléments d'arrière-plan ou soudainement mis comme couleurs d'arrière-plan. De cette façon, vous obtenez le sentiment de public tout au long du site comme non seulement ennuyeux noir et blanc, mais il est pas écrasant en même temps, Un autre moyen efficace, Je pense que la couleur devrait être utilisé pour aider à la facilité d'utilisation. Donc, le site Web de Rogers fait du bon travail avec cela dans le sens que si vous voyez la couleur rouge , vous savez que c'est une action. Donc, vous avez votre barre en haut où il y a toutes vos actions là-bas ou un morceau de pain, mais vous savez que c'est cliquable. Les boîtes rouges sont toutes cliquables, le bouton blanc et rouge et cliquable. Donc, si vous faites défiler le site et que vous voyez du rouge, c'est comme, Oh, c'est une action. Je sais cliquer là pour faire quelque chose. C' est donc un moyen d'aider la facilité d'utilisation avec la couleur. Maintenant que nous avons trouvé d'excellentes ressources pour créer nos propres palettes de couleurs. Allons de l'avant et faisons une palette de couleurs à appliquer à notre projet de classe. Donc, je suis allé de l'avant et généré cette palette de couleurs ici qui correspond au schéma de couleurs . Mais vous avez vu tout au long de notre projet de classe pour les les titres de section ou de nos sections de classe. Alors allons dans notre classe, projetons à nouveau le pan et modifions nos couleurs. Donc tout ce dont nous avons besoin va être dans le CSS et similaire dit avant que tout va être dans notre couleur pour faire des articles. Donc notre premier élément est de supprimer la palette de couleurs existante, ce qui est juste ici et ensuite tout ce que nous allons faire est rare. Notre nouvelle palette de couleurs, qui correspond au schéma que je viens de vous montrer ici et maintenant sont instantanément peau de couleur va être mis à jour à celui que je viens de vous montrer. Donc, comme vous pouvez le voir, juste en faisant ça, hum, ça fait un monde de différence, et notre site commence maintenant à paraître de plus en plus poli 8. Faire des interactions avec les utilisateurs: un moyen vraiment efficace de créer une impression durable pour les utilisateurs est de créer des interactions intéressantes avec les utilisateurs. Par cela, je veux dire la façon dont les utilisateurs interagissent avec les éléments du site Web. Donc, cette page a mis beaucoup d'efforts pour faire des interactions intéressantes. À peu près chaque élément de ce site interagit dans une attente unique. Donc, à partir des grands titres qui étaient, vous passez le curseur sur eux et ils ont leur animer une ligne de signe ou l'icône de hamburger qui s'anime lentement dans et dehors que vous l'aider plus. Étant donné les icônes des médias sociaux ont une attraction intéressante où le curseur qui vous suit autour se rétrécit pour que vous puissiez lire. C' est pour que vous puissiez lire les liens mieux quand vous l'avez vers le bas, tout le contenu s'anime pour garder l'attention de l'utilisateur. Tout en animant tout cela est vraiment génial et vraiment impressionnant fait. Cependant, certains pourraient soutenir que c'est presque trop dans le sens où les interactions et les animations pourraient presque retirer du contenu du site. Cependant, ce sera tout cela. Le principe de cela pourrait encore être pris et l'appliquer d'une manière plus subtile. Donc, si vous regardez ce site ici, laissez-moi juste le rafraîchir. Donc, tout charge le même, hum, tout encore Andresen, mais ce n'est pas trop agressif ou hardiment, donc ça n'enlève pas le contenu. La conscience est toujours l'objectif principal de ce site, car vous pouviez entendre tout si animé, et il a même de petites animations qui y restent. Mais il n'y a rien de vraiment distraire de ce contenu si semblable à avoir tout le reste . Nous nous sommes efforcés de trouver le bon équilibre et de savoir ce qui est bon pour votre site . Donc, si vous avez une pièce de portefeuille de mise, je veux vraiment montrer des attractions intéressantes. Je montre vraiment ton habileté. Ensuite, il est préférable d'aller plus vers cette route et vraiment essayer de penser à chaque chose et comment vous pouvez le rendre cool et intéressant sur vraiment engager avec les utilisateurs. Cependant, si vous êtes fait focus contenu, alors vous pourriez vouloir être plus comme ça dans le sens que vous avez encore ce sentiment un peu plus et ce professionnel, euh, ouais, juste une petite cerise sur le dessus avec toutes les animations et transitions. Pourtant, il n'enlève pas le contenu. Donc, une chose à entendre à l'esprit est que vous ne voulez pas passer en haut avec les interactions utilisateur au point où ce que vous interagissez avec non ou au point où les interactions ne servent plus un but. Donc, même sur ce site, où il semble que tout ait une interaction, tout sert un but. Tout ce avec lequel vous interagissez est un lien cliquable qui vous amène à une autre page fournit plus de contenu ou ouvre quelque chose. Donc, si vous allez à ce contenu ici, c'est juste du contenu pur, donc il n'a pas besoin d'interaction, et cela n'arrive pas. Donc, cela a du sens sur la même chose avec toutes les animations ici, même si tout s'anime une fois qu'il est dans le cadre, il s'est arrêté, donc c'est facile à lire, et vous pouvez comprendre ce qui se passe. Donc, ce que vous voulez un d'éviter est juste d'avoir tout bouger tout le temps, en particulier fournir des interactions sur les éléments qui n'ont pas d'action après Donc, vous étiez orteil survolez cela et plus pour animer d'une certaine façon. Vous penseriez alors que c'est un lien ou quelque chose de cliquable, mais vous continueriez à cliquer dessus encore et encore, mais rien ne se passerait, sorte que cela crée juste un tas de confusion pour l'utilisateur. Donc, c'est vraiment un peu le point que j'essaie de ramener à la maison ici est que chaque interaction besoin d'un but, ou il doit y avoir une interaction uniquement pour les éléments exploitables sur cette page. Euh, une chose que je pense que c'est sympa. Ce sont juste ces petits personnages subtils qui donnent à cet événement plus de vie au site Web. Mais parce qu'ils sont fanés, vous savez qu'ils ne sont pas applicables. Même le fait d'avoir, hum, le curseur n'a pas changé lorsque vous passez le curseur sur eux fournit également juste ce peu supplémentaire de commentaires que vous connaissez, il juste là pour la décoration. Et ce n'est pas un objet réel. Oh, sont des objets exploitables 9. Ajouter des transitions et des animations: Maintenant que nous avons exploré des interactions uniques entre les utilisateurs, allons sur notre page Web et appliquons nos propres interactions. Donc comme avant, tout va être juste ajouter des classes à la page Web. Mais nous allons expliquer plus en détail ce qui se passe. Donc, comme vous pouvez le voir pour beaucoup de présages lorsque vous passez le curseur sur eux, c'est très brusque sur le passage d'états non Howard à survol et est particulièrement apparent pour le menu mobile. Car lorsque vous cliquez dessus, le menu apparaît très brusquement. Nous voulons donc nous débarrasser de ces changements soudains et assurer une transition un peu plus fluide. Nous allons donc passer par un code et trouver nos interactions pour faire des objets. On va appliquer ces deux-là notre page. Donc, pour l'instant, fournissons simplement les transitions en douceur. Donc, nous avons un menu de transition en douceur, bascule à travers la transition longue à notre menu, puis ceux de tout le monde ici, qui est notre dont la transition vers notre bouton de base. Je dois aller jusqu'au bas de la page, ou je suppose que pas tout le chemin, euh, euh, mais à nos médias sociaux va appliquer la transition en douceur. Laissez la pointe de l'outil pour l'instant à notre détenteur des médias sociaux. Donc, en appliquant les classes de transition en douceur, vous pouvez maintenant voir lorsque vous passez le curseur sur les éléments de la page, il a unetransition agréable et lisse, transition agréable et lisse, donc ce n'est pas aussi brusque qu'il est avant. Ceci est particulièrement évident sur notre menu mobile, où lorsque vous cliquez dessus, le menu glisse maintenant bien comme où avant il juste une sorte de surgit à vous pour le menu mobile bascule lorsque vous cliquez et vous pouvez même voir l'icône de hamburger se transformant uniquement des hamburgers en X. Donc encore une fois, il n'y a rien de super fou sur le dessus. Mais ce sont juste ces petits détails qui sur un peu plus de professionnalisme ou juste une sorte de donner cette cerise sur un site Web. Eso. On va retourner à notre section sur les réseaux sociaux, et on va appliquer cette astuce. C' est donc une interaction utilisateur intéressante que j'aime faire, une spéciale avec des icônes où les utilisateurs peuvent ne pas toujours savoir ce que signifie l'icône, en particulier pour les médias sociaux, où il semble y avoir de plus en plus de plateformes de médias sociaux qui sortent chaque jour, donc tout ce qu'il fait n'est pas. Lorsque vous survolez une petite boîte de poppet apparaît et anime en expliquant sur lequel une plate-forme de médias sociaux rencontrer votre, um, um, sur le point de cliquer sur vous pouvez voir Ici est instagram sur spa. Sh pourrait 10 penser Dan et Twitter. Donc, l'une des plus grandes caractéristiques est que nous voulions appliquer à notre site dès le début d' un point. La nouvelle mise en page était ce gros blob ici, et vous pouviez voir en ce moment est un peu ennuyeux. C' est juste que c'est intéressant parce que ce n'est pas la même forme de boîte, mais ils sont juste assis là. Donc ce qu'on va faire, c'est aller dans notre JavaScript. Nous allons venir ici à cette interaction pour faire l'élément, qui est le seul à faire l'élément et javascript que nous avons. Et on va juste rater ce code ici. Ce faisant, nous allons faire notre blob, euh, animer entre deux états. Donc, il l'a fait. C' est une forme, puis il s'est lentement transformé dans l'autre état et remonte. Donc vous pouvez voir en faisant ça, nous avons maintenant nos blobs de morphine. Donc, quand quelqu'un viendra sur le site, il attirera son attention tout de suite. et, espérons-le, laisser une impression très durable. Donc c'est tout pour nos interactions avec les utilisateurs pour notre page Web. Donc j'espère que vous pouvez voir maintenant que par les interactions utilisateur d'Andy qui sont ce que Page commence à regarder beaucoup mieux que ce que nous avons commencé avec. 10. Utiliser des images pertinentes: Le dernier sujet que nous allons aborder est l'imagerie, et l'imagerie. Je ne veux pas seulement dire des images statiques, mais ça pourrait aussi être des cadeaux vidéo ou des illustrations. Aucune imagerie n'a le pouvoir de créer ou de casser un site Web, il est donc crucial de consacrer le temps et les efforts nécessaires pour obtenir les bonnes images. À mon avis, toutes les images de sites Web, il devrait être original et de haute qualité, mais ce n'est pas toujours possible en raison de l'équipement ou des limites budgétaires. Donc, la meilleure chose suivante, si vous ne pouvez pas prendre vos propres images de haute qualité, est d'obtenir de très bonnes photos de stock. Donc je suis des éclaboussures. Un site qui a beaucoup de logiciels a été pris par des photographes professionnels étaient photographes amateurs partout dans le monde sur leur complètement libre d'utiliser chacune des images à la fois à des fins commerciales et personnelles. C' est donc un endroit idéal pour obtenir des images si vous n'avez pas la capacité d'obtenir les vôtres. Cela dit, l'image idéale comme je l'ai déjà mentionné, est de sortir et d'obtenir votre propre image de votre entreprise, ou de vous ou de votre produit, et de rendre personnelle à l'Europe à votre site web pour conclure l'original So maintenant que nous connaissons l'importance de l'imagerie et le type d'images à utiliser sur notre site Web, continuons et appliquons ces connaissances à notre projet de classe. Donc, vous pouvez voir ici que les images que j'ai en ce moment sont jolies terres. Ce sont juste des photos de stock aléatoires que j'ai attrapé sur Google, mais ils ne sont pas vraiment liés à notre page Web tant. Je veux dire, je suppose que je fais un peu dans le sens où ils sont en quelque sorte basés sur un ordinateur. Celui-ci est, ah, ah, site web, et celui-ci est juste comme si c'était un ordinateur portable dans la technologie, mais ce n'est pas lié à notre projet de classe ou à notre page Web. Donc je n'avais pas un budget énorme pour sortir et faire venir un photographe professionnel prendre photos dans notre billet, hum, photos professionnelles prises. Mais j'ai pu sortir et en avoir assez bien avec mon téléphone. Donc et parfois c'est tout ce que vous avez besoin est juste une bonne image de téléphone de sa qualité encore élevée et est significatif et lie dans votre page. Alors c'est parfait. Donc, si vous allez à notre get hub Repo, qui encore une fois le lien est dans notre description de classe. Allez aux images. Vous pouvez voir beaucoup de couleur de l'image. Donc c'est celui que je veux utiliser pour notre blob. On va juste copier l'adresse de l'image, ouvrir une nouvelle heure et la coller ici et ensuite on pourra voir l'image complète. Donc, il est juste moi tenant mon ordinateur portable avec l'image ou avec l'écran montrant notre projet de travail fonctionnent code Pet Project. Donc, tout comme j'ai été plus pertinent que l'image a à voir avec quoi ? Les pages Web qui s'affichent. Donc c'est juste copier l'adresse de l'image ici, puis revenir en arrière. Teoh travaille. Projet et faites défiler vers le bas. Teoh sont tellement, euh, SPG et nous avons l'image. Donc on va juste remplacer cette image juste ici avant de la copier. Il suffit de lui donner une deuxième mise à jour et là donc ce n'est pas la meilleure image du monde. Comme je l'ai dit, il a été pris avec mon ah, téléphone portable, pas un photographe professionnel, mais il obtient le point à travers, et il a beaucoup plus de sens à ce site que juste une image aléatoire de n'importe quel ordinateur portable. Alors, pour une photo ici. Cette photo n'est pas trop mauvaise, mais je pensais qu'on pourrait faire un peu mieux. Cette photo n'est pas trop mauvaise, Donc pour cette route, au lieu de prendre le mien, j'ai juste fait sortir le Stockport. Mais c'est une photo de meilleure qualité, et c'est en fait une photo stock que j'ai mis sur deux, hum, squash. Donc je suppose qu'on pourrait dire qu'il a été pris à l'origine, bien qu'il n'ait pas été prévu à l'origine pour ce projet. Donc, nous allons juste très rapide à nouveau copier, adresse de l'image, puis coller dans le nouveau haut afin que nous puissions voir l'image complète. Donc juste un peu plus de code. Et c'est mon vrai poste de travail. Donc, il est lié à notre projet dans le sens qu'il est un peu plus ou qu'il est lié à notre page dans le sens qu'il a été personnel pour moi au lieu de juste la station de travail aléatoire de quelqu'un d'autre . Donc, pour mettre à jour cette image, nous allons juste faire défiler ici jusqu'à ce que nous trouvions notre section de descriptions. Et puis nous avons notre image de fond de section, et nous allons juste changer cette moyenne d'arrière-plan. Vous êtes bien, ce que nous venons de copier et juste laisser mettre à jour. Euh, désolé, et juste là, je voudrais juste me rafraîchir. Personne ne connaissait la pression. D' accord ? Et voilà notre nouvelle image. Encore une fois, c'est aussi une qualité beaucoup plus élevée que l'image qui était là dedans. Et cela a à voir avec moi et mon projet parce que à moins que ce soit mon poste de travail, Donc encore une fois, la principale chose que j'essaie de rentrer ici est une image pure ont à voir avec votre contenu et le message que vous essayez de passer à travers. Et j'espère que vous pouvez le voir avec ces deux images. C' est vraiment plus logique d'avoir ces et ce qu'il y avait sur le site avant. 11. Conclusion: Donc c'est tout pour nos techniques. Nous avons discuté de l'imagerie de mise en page, typographie, schémas de couleurs et des interactions avec les utilisateurs. Donc je vais vous laisser avec le défi de prendre l'état final sur le projet de classe et aller plus loin avec. Donc, prendre les techniques avec lesquelles nous avons travaillé et les appliquer ou à l' état final . Donc, cela pourrait être quelque chose de changer le jeu de couleurs à quelque chose que vous aimez un peu mieux ajouter vos propres images que vous avez prises là où vous allez et complètement réorganiser la mise en page sur, euh, faire leur propre. Donc si tu veux récupérer mes pieds, je regarderai ce projet de culture pour mais en manteau quand tu le sauveras. Juste aussi mettre l'étiquette sculpture Matthew Fornier que je pourrais rechercher tous les produits de classe où tous les projets que vous avez travaillé sur et je pourrais laisser les commentaires directement sur. J' espère que vous apprenez quelque chose de nouveau et quelque chose d'utile, et vous êtes maintenant un meilleur avec le concepteur et le développeur à cause de lui sur euh, merci d'avoir regardé