Portfolio de Web design |10 changements pour améliorer l'apparence et la fonctionnalité de vos sites

1. Introduction: Bonjour. Je m'appelle Jenna et je suis l'artiste à l' origine de jehna Creates Je suis concepteur de motifs de surface chez un graphiste et un concepteur de sites Web et Oren Creative basé à Sydney, en Australie Si vous êtes créatif et actif comme moi, il y a de fortes chances que vous ayez dû créer un site Web pour mieux mettre en valeur votre travail Les créatifs souhaitent naturellement que ce site Web soit aussi beau, percutant et mémorable que possible Nous pouvons donc envoyer à des clients ou à des clients potentiels. Au fil des ans, en tant que designer en pleine croissance, il m'a été impératif de créer de superbes sites Web de portfolio, la fois esthétiques et fonctionnels La meilleure démonstration de ma promenade. Grâce à mon baccalauréat et à mon expérience en design, j'ai pu appliquer le design thinking à mes côtés. Cela, combiné à des années d'expérience dans la gestion du portfolio et des sites de commerce électronique, m'a permis de faire des erreurs et d' apprendre véritablement les bases de la conception pour Web Insider. Dans ce cours, je vais vous expliquer dix étapes simples mais vraiment efficaces pour améliorer rapidement votre site Web. Nous allons aborder une série d' éléments de conception fondamentaux qui rendent sites Web cohérents et beaux. Des éléments tels que les familles de typographies et des palettes de couleurs efficaces, ainsi que des améliorations plus techniques telles que la correction vitesse de chargement de votre site et création de mises en page simples et intelligentes avec des images PNG tout au long du cours, utiliseront un simple site Web d'une page et y appliqueront les dix conseils Ainsi, vous pouvez voir visuellement, étape par étape, l'impact de chaque conseil sur le site Web. Et commencez à imaginer comment cela va améliorer votre propre côté. ne s'agit pas d'un cours de développement Web, mais se concentre sur la conception graphique spécifiquement pour les sites Web. Les débutants peuvent tout à fait suivre ce cours, mais ce cours est principalement conçu pour les personnes qui sont sur le point de créer leur site Web ou qui ont déjà un site Web qu' elles souhaitent améliorer esthétiquement et fonctionnellement Mon objectif principal est d'apporter des modifications simples à votre site Web actuel afin de maintenir engagement et l' intérêt des visiteurs pour votre contenu. À la fin de ce cours, je vous ferai penser différemment à votre site Web. Vous aurez une bonne compréhension des principes fondamentaux de la conception et plus important encore, une liste exploitable de modifications rapides que vous pouvez apporter pour améliorer considérablement l'apparence, convivialité et la fonctionnalité de votre site Web Je suis très heureuse d'enseigner ce sujet. Alors allons-y directement. 2. Ce que vous apprendrez: Avant d'arrêter ce cours, parlons rapidement du format des leçons et de ce que vous allez apprendre. Les dix conseils de ce cours seront divisés en trois catégories. Image de marque, maintien de l'intérêt et fonctionnalité. Vous pouvez considérer ces trois catégories comme l'apparence, la convivialité et la fonction de votre site Web. Au cas où vous vous inquiéteriez, peu importe la plateforme sur laquelle votre site Web est construit. Vous serez en mesure d'appliquer ces conseils pour Godless. La section la plus importante de cette classe est l'image de marque. Maintenant, avant que vous ne paniquiez, je sais que l'image de marque peut être un mot un peu effrayant. Vous pensez peut-être que je n'ai pas de marque, je fabrique juste de belles choses. Mais le fait est que, peu importe ce que vous créez, vous avez une identité de marque. En termes simples, une marque est un ensemble de caractéristiques qui distinguent vos produits des autres. Cela peut être composé d'un logo, polices spécifiques, d'un jeu de couleurs et de nombreux autres facteurs. Eh bien, ces éléments aident à définir qui vous êtes et doivent refléter l'identité, la personnalité et les valeurs de votre marque. Dans ce cours, nous aborderons quelques éléments de marque qui peuvent amplifier un site Web Et nous verrons comment choisir ces éléments pour refléter au mieux l'identité de votre marque. Une fois que votre image de marque sera claire sur votre site Web, nous passerons à la catégorie « Maintien de l' intérêt », vous pouvez considérer comme une amélioration de l'apparence de votre site. Cette section couvre un éventail de techniques que vous pouvez utiliser pour impliquer davantage votre public et le garder plus longtemps sur votre site Web. Enfin, les dernières leçons portent sur le fonctionnement du site Web. Cette section vous aidera à optimiser rapidement votre site afin que utilisateurs puissent profiter de tout le dur labeur que vous avez consacré à votre site Web. n'y a rien de pire que de créer un beau site Web, mais personne ne le voit car son chargement prend trop de temps. Dans chaque leçon, j'appliquerai le conseil pertinent à ce site Web simple d'une page Vous pouvez progressivement constater l'impact qu'ils ont. Bien que je fasse la démonstration ces modifications sur Wordpress, je n'enseignerai aucun développement Web dans ce cours. Je souhaite également me lancer dans l'optimisation des moteurs de recherche. Si vous pensez qu'un site Web de base avant tout, mes conseils devraient être faciles à appliquer sur n'importe quelle plateforme d'hébergement de sites Web en utilisant une conception frontale simple. Si vous n'avez jamais créé de site Web auparavant, pas de problème. Ce sont des concepts simples que vous pourrez appliquer tout en apprenant les bases du développement Web. Je vous recommande de suivre d'abord toutes les leçons , puis de décider quels conseils vous allez appliquer en fonction de leur pertinence pour votre site Web parlerons de votre projet dans la vidéo suivante. 3. Votre projet: Votre projet pour ce cours consiste à mettre en œuvre au moins un ou plusieurs des dix conseils que je vais partager. La première étape consiste simplement à prendre une capture d'écran de votre site Web tel qu'il est actuellement. Une fois que vous avez mis en œuvre les conseils que vous avez choisis, prenez une autre capture d'écran et publiez-la dans la galerie de projets afin que nous puissions comparer l'impact avant et après. J'ai beaucoup aimé ce projet car il est très facile à mettre en œuvre et vous obtiendrez un excellent enregistrement visuel et une compréhension des différences, de ces petites modifications et des modifications apportées à votre site Web. Vous pouvez télécharger votre projet à l'aide du bouton Créer un projet sous cette classe et partager vos captures d'écran Cela me permettra de vous faire part de mes commentaires sur les modifications que vous apportez à votre site Web. Je vous ai également fourni un manuel de gestion de la marque simple que vous pouvez remplir pour faciliter ces modifications Cela aide particulièrement à consolider ce que vous apprenez dans les leçons 123 Donc, si c'est votre objectif, n' hésitez pas à partager. Il s'agit d'un projet visant à. Passons à la leçon numéro un 4. Image de marque : typographie: Commençons par le conseil numéro un. Comment améliorer ses sites Web conçus en sélectionnant la typographie Il est si facile de sous-estimer le pouvoir que peuvent avoir les polices sur notre site Web Mais je pense que les polices sont en fait l' atout le plus important de votre image de marque. Ils communiquent rapidement l'identité de votre marque, fournissent des indices visuels importants sur les informations d'audit qui doivent être lues et définissent le ton et l'ambiance généraux d'une page. Ils constituent également un élément clé pour garantir une expérience utilisateur optimale lors de la sélection des polices. La chose la plus importante à prendre en compte est la hiérarchie typographique Désormais, la hiérarchie des polices typographiques est simplement un système de classement des polices pour communiquer aux pillards l'importance de l'information Lorsqu'elle est mise en œuvre efficacement, la hiérarchie FUN peut créer une bien meilleure expérience utilisateur. Ajoutez de la structure et de l'organisation visuelle à votre contenu, tout en renforçant la reconnaissance de la marque. Il y a trois déchirures de base d'un site Web en termes de hiérarchie que vous devez prendre en compte. En-têtes, sous-titres et corps du texte. C'est simple, non ? Pour sélectionner ces fonds, vous allez procéder à ce que l' on appelle le couplage de polices L'objectif de l'appariement de polices est de choisir différentes polices qui créent un contraste visuel de manière harmonieuse Avant de passer à quelques exemples d'appariement de polices, définissons quelques termes Nous venons de parler de la hiérarchie et des associations de polices. Mais voici d'autres temps de typographie standard. Les empattements, une police de caractères avec une petite projection à la fin des petits traits L' exemple le plus connu est celui des San-Serif Times New Roman, qui sont les polices les plus courantes sur le Web Ce sont des polices de caractères sans traits ni ornements Colibri en est un exemple standard. polices de caractères Script sont essentiellement des polices qui imitent l'écriture manuscrite et les empattements en dalle, très similaires aux Serifs, tout en conservant l'épaisseur et l'épaisseur du trait sur l' ensemble Maintenant que vous savez avec quoi vous travaillez, choisissons quelques polices. C'est le meilleur pot. L'une des règles de base de l'appariement des polices est que les contraires s'attirent. Lorsque vous choisissez des polices, je veux que vous preniez en compte deux choses. Ces polices reflètent-elles le type de service ou de produit que je représente ? Et tout cela est facile à lire. Lorsque vous choisissez des polices, pensez l'ambiance que vous souhaitez transmettre à votre marque, votre marque est ludique et accessible ? Ou est-ce qu'il a une touche bohème minimale ? combinaisons de polices reflètent l' esthétique générale de votre marque Jetons un coup d' œil à ces exemples. La première concerne les combinaisons de polices de style minimaliste que je viens de créer à l' aide de Google Fonts Vous pouvez très facilement télécharger les polices Google sur votre ordinateur et de nombreux créateurs de sites Web les ont déjà disponibles. Ce qui fonctionne avec ces associations et crée cette ambiance minimaliste, c' est la lisibilité et la structure de et Ces polices sont toutes sans empattement et cette absence de projection sur les lettres, ainsi que l' espacement que nous avons ici, créent un look très épuré et pratique Notre deuxième exemple est ici : optez une esthétique plus luxueuse et haut de gamme. Ces associations appliquent dans une large mesure l'attraction opposée en combinant des empattements et polices de script pour les titres, puis en les complétant un sans empattement vraiment net sans empattement Celui-ci dégage une très belle ambiance sophistiquée et est un exemple de combinaison de polices que vous pouvez acheter, en l'occurrence sur Nous en reparlerons un peu plus à la fin de la leçon. Les dernières combinaisons de polices dégagent une ambiance très ludique et téléphonique. polices souples rendent les choses plus ludiques par rapport aux polices Cera épurées qui confèrent une esthétique plus luxueuse. Vous pouvez jouer avec les combinaisons pour voir quel type d'ambiance communique et déterminer type d'esthétique que vous essayez d'évoquer Pour un site Web d'une page, je vais opter pour un look assez haut de gamme Je vais donc utiliser cette combinaison de polices ici. Je vais commencer à le remplir et je vais créer un classeur de marque, auquel vous pouvez accéder dans le cadre de cette leçon J'ai mis le nom de la police H ainsi que les liens. Je vais également arrêter de remplir certains mots qui représentent l'esthétique que j' essaie de créer. Mais nous y ajouterons également au fur et à mesure. Maintenant que nous avons appris quelques théories, appliquons-les à cette page. Nous avons ici une hiérarchie typographique de base , ce qui est une bonne chose Et les polices sont très lisibles. Mais ils n'apportent rien d'autre. Ils ne représentent pas exactement le nouveau domaine sophistiqué que j'essaie de rechercher. Remplaçons-les donc par les combinaisons de polices qu'il a essayées auparavant Je vais commencer par créer quelque chose comme cette police de titre car c'est clairement quelque chose de très important. Et puis quelque chose comme ça serait un slogan et c'est évidemment le corps du texte Je veux que tous mes titres soient en majuscules. C'est évidemment trop petit, mais nous allons juste le rendre beau et grand. Modifiez légèrement la hauteur de la ligne. Et je veux que tout soit en minuscules. Ensuite, nous voulons créer cette police de corps et une police sans empattement agréable Vous pouvez déjà voir la différence que cela apporte à la page Lorsque vous choisissez votre typographie, gardez à l'esprit je recommande de ne pas utiliser plus de trois polices différentes pour l'ensemble de votre site Web L'utilisation de polices Termini, de styles de police ou de tailles de police peut donner au site un aspect non structuré Garder les choses propres avec un maximum de trois polices est écrasée. L'ensemble de votre site Web crée une cohérence visuelle et contribue à renforcer votre image de marque Maintenant que vous disposez de vos polices, voyons rapidement comment les utiliser au mieux. Tout d'abord, nous avons la hauteur de ligne ou d'interligne, qui est l'espace vertical entre deux lignes de texte La recherche montre que l'utilisation appropriée des espaces blancs entre les lignes de texte peut améliorer la compréhension jusqu'à 20 La longueur d'une colonne correspond au nombre de mots divisés horizontalement avant de passer à la ligne suivante 40 à 60 mots sont considérés comme les plus attrayants visuellement Laissez-nous faire face définit la distance entre les caractères et supposons qu'une hauteur définisse la hauteur de ces caractères. En gras et en italique. différentes options de mise en forme et l'harmonie visent à créer une cohésion entre les éléments En matière de typographie, cela implique d'utiliser des polices similaires ainsi que des interlignes et un formatage cohérents C'est donc une place, mais pour les astuces de mise en forme, je vais agrandir cette ligne un peu pour améliorer la lisibilité Et puis peut-être aussi mettre ce bouton en majuscule pour approfondir la hiérarchie visuelle Nous ne voulons pas qu'il soit trop grand, mais il est beau, un peu plus lisible. Ensuite, ce bouton, je vais juste le transformer en majuscules et changer la police en utilisant la même phrase, Sarah Je vais également passer en revue et modifier toutes ces autres polices pour qu'elles restent cohérentes sur l'ensemble du site. En maintenant la taille et l'espacement cohérents sur l'ensemble du site, le site aura l'air beaucoup plus cohérent. Ça a déjà l'air tellement mieux. Vous pouvez déjà voir les différences que cela apporte au site Web. C'est plus clair, plus facile à lire et cela correspond davantage à la marque grâce à l'esthétique épurée et luxueuse que j' essaie de représenter. Ce n'est qu'un conseil pour l'instant. Avant de passer à la leçon suivante, je voudrais aborder rapidement la question du droit d'auteur. J'ai joint à cette leçon une ressource qui répertorie quelques endroits où trouver des polices libres de droits, ainsi que des endroits où acheter des La plupart des plateformes Web vous permettent de télécharger n'importe quelle police personnalisée sur votre site Web, mais assurez-vous toujours d'acheter la licence appropriée avant d'installer une police. Vous pouvez souvent également acheter combinaisons de polices prédéfinies sur ces côtés Si vous ne souhaitez pas télécharger de polices personnalisées, vous pouvez toujours appliquer ce que vous avez appris ici et créer des associations de polices avec des polices préinstallées Si vous souhaitez aller plus loin, vous pouvez toujours transformer votre propre écriture en une belle police à utiliser sur votre site Il existe de très bons cours sur Skillshare qui peuvent également vous montrer comment procéder 5. Image de marque : palettes de couleurs: La deuxième astuce concerne les palettes de couleurs. palette de couleurs de votre site Web est un élément essentiel de la création d'une belle marque. fait d'avoir une palette de couleurs cohérente qui représente l'identité de votre marque améliorera considérablement l'apparence de votre site Web En fait, selon une étude de l'université de Lille, lot, Colour peut accroître la notoriété d'une marque jusqu'à 80 %. Il y a quelques éléments qui font qu' une bonne palette de couleurs pour un site Web est essentielle. Couleurs. La première chose que les internautes remarqueront lorsqu'ils visiteront votre site. Les couleurs déterminent l'identité visuelle de votre site Web et de votre marque. Une bonne palette de couleurs peut avoir un impact considérable sur le style et la cohérence de Your Side. Les couleurs suscitent des réactions émotionnelles qui peuvent avoir un impact sur la façon dont quelqu'un pense que je visite votre site Web Enfin, les couleurs créent une hiérarchie visuelle. La palette de couleurs d'un site Web ne se limite pas à votre logo et à la couleur d'arrière-plan. Il inclut toutes les couleurs qui apparaissent sur votre site Web. Votre tête haute, vos pieds, sections, vos boutons, les couleurs du texte. Même si la chaleur est utilisée dans vos photos, toutes contribuent à la palette de couleurs que vous présentez. En gardant à l'esprit que 60 % des personnes acceptent ou rejettent de nouveaux produits uniquement sur la base de la couleur. Il est très important de bien choisir cette palette et joue un rôle important dans le façonnement de l'ambiance et de l'esthétique de votre science. Heureusement, il n'est pas trop difficile de savoir par où commencer. Si vous êtes artiste ou designer, il peut être facile de choisir des couleurs pour représenter votre marque. Jetez un coup d'œil à votre travail. Y a-t-il des couleurs que vous utilisez toujours et qui vous attirent naturellement ? Peut-être n' utilisez-vous que des teintes chaudes ou couleurs contrastantes Ajanta lorsque choisissez une palette pour votre site Web et votre marque Dessiner des couleurs à partir de votre propre logo ou produit garantira un look cohérent Vous pouvez même porter cela à un niveau plus personnel en regardant les vêtements et les articles que vous achetez dans des couleurs ou des tons similaires à ceux qui vous attirent. Ces articles représentent qui vous êtes dans une toute nouvelle identité et peuvent être une très belle façon de présenter votre site Web. Vous pouvez également analyser l'humeur générale de votre dos. Réfléchissez à l'esthétique que vous essayez de présenter. Voulez-vous que votre site Web soit lisible de manière minimaliste, lumineuse, audacieuse, bohème, voire gothique foncé Certaines couleurs sont associées à certains mouvements esthétiques. Connaître votre esthétique peut donc faciliter le choix de ces couleurs. Alors, combien de couleurs devraient figurer dans votre palette ? L'approche la plus simple consiste à suivre une hiérarchie similaire à celle dont nous avons parlé et à celle de la typographie, et à choisir une couleur principale, une secondaire et une couleur d'accent Une règle générale en matière de conception Web est le 603010. Cette règle suggère que 60 % du site doivent être la couleur dominante, 30 % la couleur secondaire et 10 % l'accent Bien entendu, les règles sont faites pour être enfreintes et je recommande vivement expérimenter et d'utiliser la quantité de couleurs qui, selon vous, représente le mieux votre marque Comme nous l'avons dit précédemment, certains mouvements esthétiques sont associés à certaines couleurs. Cet exemple porte donc sur une esthétique minimaliste et épurée Le minimalisme est souvent associé à des couleurs neutres et à des tons terreux, comme on peut le voir dans ces exemples Avoir une couleur vive très saturée ici ne serait pas à sa place. Formula Lux look again, les tons neutres sont très importants Mais cette fois, les couleurs des axones sont plus saturées et nous serons plus présents et plus visibles sur un site Web Il y a également plus de contraste ici. En fait, j'ai sélectionné cette palette spécifiquement pour notre site de maquette afin de l'adapter aux polices que nous avions choisies auparavant Et je les ai mis dans un classeur de marque avec les codes hexadécimaux afin de pouvoir copier et les coller sur le site. Je reviendrai bientôt sur les raisons pour lesquelles je les ai choisis. Lorsqu'il s'agit de sélectionner des palettes plus ludiques l'utilisation de couleurs contenant plus de blanc est assez standard. Cela peut créer un joli look pastel. Cette esthétique joue également souvent avec des combinaisons de couleurs complémentaires contrastées et divisées avec une saturation assez élevée. Une palette comme celle-ci est plus audacieuse et plus frappante qu'une palette comme celle-ci qui est plus sophistiquée tout en restant amusante. Mais toutes ces palettes créent toujours une ambiance très amicale, lumineuse et heureuse. Le choix de la bonne combinaison dépend de votre travail et de l'ambiance que vous essayez de créer. Vous pouvez également prendre en compte la psychologie des couleurs. La psychologie repose essentiellement sur l'idée que certaines couleurs déclenchent des émotions spécifiques. Appliqués à la conception Web, de nombreux concepteurs choisissent les couleurs en fonction de l'expérience émotionnelle qu'ils souhaitent offrir aux utilisateurs. Lorsque vous ne comprenez pas ce que chaque couleur représente, choix des couleurs pour votre site Web peut devenir plus intuitif. Reprenons donc tout ce qu'ils ont appris dans cette leçon. Je l'applique ici. La seule couleur se trouve actuellement sur ce site Web. Pourquoi ? Du noir et d'autres couleurs sur les photos ? Il s'agit d'une maquette du site Web d'un artiste. J'ai décidé de choisir des couleurs inspirées de l'histoire de l'art, comme des bleus profonds et des objectifs intemporels et magnifiques. Le blues est également lié à des sentiments de communisme et de fiabilité, ce qui, je pense, fonctionnerait bien l'ambiance que je souhaite évoquer Je souhaite également conserver beaucoup d' espaces blancs pour garder un look frais et propre Actuellement, la seule couleur d'arrière-plan est le blanc. Je vais donc commencer par ajouter des couleurs de fond et tomber en dessous de 603010 La structure équilibrera visuellement les couleurs au fur et à mesure. Je vais laisser l'arrière-plan comme ça pour le moment et continuer à le développer au fur et à mesure que le site évolue. Je vais rapidement faire de ce bouton une couleur d'accent et modifier ces polices la couleur opposée pour qu'elles soient plus lisibles. Nous appliquons enfin les conseils jusqu'à présent, et cela semble déjà tellement mieux. Je veux comparer. Comparons. Ça, c'est ça. Ce n'est pas maintenant que nous avons appliqué des couleurs de fond et de la typographie, c'est déjà fait jusqu'à présent, juste pour deux conseils sur dix Et ça a déjà l'air bien mieux que ça. C'est tellement mieux. Je pense que c'est tellement excitant. Passons à la prise trois 6. Image de marque : Images, Vidéos et votre esthétique: Maintenant que nous avons abordé la typographie et la couleur, parlons de la puissance des images, des vidéos et de votre esthétique générale belles images ne sont pas au centre d'un site Web, que vous vendiez un produit, un service ou que vous partagiez simplement des informations. Ils renforcent vraiment l'ambiance et l'esthétique d'un site Web. De bonnes images, en particulier lorsqu' il s'agit d'images de produits, peuvent faire la différence entre un utilisateur qui convertit ou non. Même si des images de haute qualité apporteront du professionnalisme à votre site Web. veillant à ce que les images soient cohérentes en esthétique et de ton, elles passeront au niveau supérieur. Le fait d'avoir des images issues de la même séance photo ou modifiées avec le même filtre apporte cohérence à un site Web qui peut être liée l'image de marque que vous avez déjà créée avec votre palette de couleurs J'ai créé deux exemples d' esthétiques différentes avec les photos présentées ici. Sur la gauche, nous nous appuyons sur notre image de marque minimaliste. Il y a certaines choses qui font que ces images fonctionnent si bien ensemble. chose la plus importante à noter ici est que toutes les images ont des tons très chauds et terreux et des retouches assez sombres C'est la même sensation que la palette de couleurs minimaliste que nous avons créée Ces images sont également prises de manière assez similaire en ce qui concerne les espaces blancs Si vous avez ajouté ici une image avec des retouches plus claires et des tons froids, cela changera l'ambiance générale du look. Il est important de prendre en compte le rôle de chaque image individuelle dans l'ensemble. Ces images évoquent une ambiance beaucoup plus joyeuse et ludique. Cela fonctionnerait bien avec certaines des polices plus douces et avec Brad ou Palettes que nous avons créés. La principale différence ici est que ces images sont retouchées pour avoir une exposition beaucoup plus élevée, les rend plus lumineuses et joyeuses Ces accessoires ou couleurs à peu près sans points sur ces images Les expressions faciales et le positionnement plus proche de la caméra créent une ambiance plutôt conviviale Le contenu vidéo est un autre outil incroyable pour améliorer votre site. Les vidéos sont un excellent moyen de transmettre concepts émouvants sans mots le moyen idéal pour mettre en valeur votre processus de travail et pour communiquer rapidement à des publics potentiels la valeur de votre travail Si votre travail repose sur un processus de fabrication très pratique ou sur une histoire unique. L'ajout d'une vidéo de haute qualité et bien conçue présentant ces détails sur votre site Web ajoute non seulement une touche tactile à votre site, mais permet également de communiquer visuellement la valeur de ce que vous avez créé car un média n'a jamais été accessible ou consommé qu'aujourd'hui 96 % des personnes déclarent se tourner vers les vidéos pour en savoir plus sur un produit ou un service. L'utilisation de ce média est indispensable. Vous pouvez également partager des informations par le biais de vidéos sur votre site Web notamment une vidéo d'introduction expliquant votre produit ou service. Une vidéo expliquant comment utiliser votre produit ou service. Une vidéo de type campagne mettant en évidence la façon dont votre produit ou service peut avoir un impact sur quelqu'un. Une compilation de témoignages ou d'histoires de clients, images des coulisses ou vidéos de processus qui peuvent vous aider à vous impliquer davantage Appliquons donc cette théorie ici. Nous avons actuellement quelques images et elles sont toutes de très haute qualité, ce qui est formidable. Mais ils ne parlent pas nécessairement tous le même langage visuel. Ceux-ci ont un ton légèrement différent des autres et ne correspondent pas vraiment à autres et ne correspondent pas vraiment la palette de couleurs que nous avons établie. Maintenant parce que ce n'est qu'une maquette de site. Je n'ai pas pris de séance photo en particulier. Je viens de récupérer ces images sur Splash. Dans ce cas, je vais simplement utiliser des photos du même photoshoot Unsplash, qui est celui-ci Et mieux encore, quelque chose comme ça. En fait, je vais les supprimer simplement parce qu'ils n' ajoutent pas grand-chose en étant ici. En fait, même si ce sont de très belles images qui nuisent à la cohérence du site en utilisant des teintes plus chaudes La majorité des images et des couleurs nous ont maintenant un bleu, ce qui est sympa. Je veux plus de cette excellente couleur dorée pour ma palette. Je viens de prendre cette image et transformer en un BATNA pleine largeur n'y a rien de mal à utiliser deux fois le même actif. Dans ce cas. Cela va aider à relier la page. Mettons-le ici pour le moment. À présent. Il ne nous reste plus de photos, mais nous ne sommes pas en train de tirer le meilleur parti des autres. Nous l'avons fait. Celle-ci, par exemple, est une très belle image. Et c'est lié celui-ci simplement parce qu'il provient de la même séance photo. Mais je pense vraiment que nous pourrions rendre ce contenu plus intéressant visuellement. Je pense que n'importe qui peut en faire une sorte de collage et que nous pouvons jouer avec la relation entre nos photos et notre consommation d'alcool. Nous pouvons revenir sur ce contenu. Je vais donc commencer par créer deux colonnes sexuelles. Et je vais vous montrer ce que j' entends par collage dans une seconde. Nous voulons que cette image soit au centre de nos préoccupations. C'est donc naturellement ce qui occupera le plus d'espace. Ensuite, je veux que l'autre côté soit l'une des couleurs de notre schéma qui soit collée avec beaucoup d'arrêt cool. Je vais maintenant le dupliquer et l'inverser. Et je vais remplacer cette image par tout ce qu'elles sont juste pour garder le même aspect visuel. C'est un peu le look de base que je veux, mais ça a l'air bizarre au milieu Je vais donc opter pour un partage d'environ 70 ou 30. Ça a l'air plutôt cool. Alors maintenant je vais prendre une partie de ce contenu et la mettre ici. Les principales choses que je veux retenir, le fait qu'il s'agisse design d'intérieur et cette de design d'intérieur et cette dernière phrase qui concerne spécifiquement la literie payante en laine et la décoration intérieure. Je reviendrai sur le reste de ce contenu. Mais je pense que nous pouvons communiquer le même sentiment visuellement sans l'afficher simplement sous la forme d'un paragraphe de texte standard. Je pense que c'est beaucoup plus efficace. J'ai également écrit dans cette section : améliorez votre espace. Je pense que le fait de dire ce que vous allez travailler fait plutôt que ce que c'est réellement. Je peux souvent vous aider à mieux communiquer ce que vous offrez. Je souhaite ajouter une vidéo à ce site. Encore une fois, je vais juste m'en procurer un libre de droits d'auteur , cette fois auprès de Pexels Je cherche à raconter la même histoire visuelle que le reste de mon image de marque. Celui-ci est génial. Ajoutons simplement a comme arrière-plan d' une nouvelle section et mettons-la en boucle. Je viens d'ajouter quelques textes en haut de cette vidéo car je pense que c'est juste une façon vraiment visuellement dynamique d' afficher des informations. Avec cette vidéo, nous allons simplement attirer l'attention des utilisateurs et leur communiquer instantanément en quoi consiste ce site Web ? 7. Image de marque : l'importance de votre histoire: Le conseil numéro quatre vous concerne. C'est peut-être l'actif le plus sous-estimé auquel chaque personne a accès Cet atout, c'est votre histoire. Et votre Y. Raconter une histoire sur votre site Web peut sembler une étape évidente, mais elle est si souvent négligée et côté parce qu'elle n' a pas Je vais vous parler de votre page À propos de votre site Web. Peut-être la page la plus importante et la plus percutante que vous créez. Donner la priorité à un espace dédié pour partager votre histoire et votre personnalité sur votre site Web est un moyen à la fois magnifique et extrêmement efficace d'aborder sujets essentiels avec le public, la connexion et la confiance Votre histoire est très importante car elle ajoute un élément humain à votre WACC Les humains ont toujours besoin de connexion. En partageant une partie de nous avec les autres, nous pouvons commencer à établir une relation. Lorsque quelqu'un lit votre histoire et est ému d'une manière ou d'une autre, ce soit parce qu'il fait preuve d'empathie, s'identifie à vous ou s'inspire Cette personne est désormais inévitablement plus engagée et plus investie en vous et, bien sûr, en votre travail. Cette base de connexion ajoute également soudainement de la valeur à la marche. Lorsque nous regardons un produit, par exemple, et que nous ne savons rien à son sujet si ce n'est son apparence. Nous lui donnons inconsciemment une valeur basée uniquement sur cet aspect Cependant, si vous connaissez les personnes qui ont fabriqué le produit, le dur labeur et les processus nécessaires à sa fabrication, ainsi que l' inspiration qui les a poussées à croire qu' il devait exister dans ce monde. Vous avez considéré que ce même produit avait plus de valeur. À première vue, rien ne change. C'est votre lien affectif avec quelque chose qui ajoute cette valeur. C'est le pouvoir que peut avoir le fait de raconter votre histoire. En expliquant simplement pourquoi, vous pouvez aider les gens à comprendre la véritable valeur de votre travail. J'ai rassemblé quelques exemples de méthodes PFK-1 pour partager des informations vous concernant sur votre Tout d'abord, nous avons ce soda, qui est à la mode sur Instagram depuis un certain temps, mais qui constitue en fait un ajout vraiment amusant à un Quelque chose comme ça peut communiquer à quelqu'un rapidement et visuellement des informations personnelles pertinentes vous concernant Vous pouvez personnaliser les options et les conserver dans votre style pour qu'elles restent pertinentes. Avoir une courte liste d' informations intéressantes vous concernant peut être poétique et un moyen de partager un peu de personnalité En gardant l'affichage de ces informations assez visuel, l'utilisateur est plus susceptible de les évaluer que s'il s' agissait simplement d'un bloc de texte Vous pouvez également partager vos choses préférées ou une courte histoire personnelle. L'utilisation de mes cassettes et de votre style pour segmenter les valeurs de vos services, ou tout autre type d' information que vous souhaitez partager, est une autre technique que vous pouvez utiliser, en ajoutant de l'interactivité à l' aide d'effets de survol, par exemple Cela a donc également contribué à accroître l'intérêt et l'engagement des utilisateurs Nous aborderons ce concept plus en détail dans la leçon 6. Actuellement sur mon site Web, j'ai une liste rapide pour résumer mon style et vous pouvez certainement y ajouter de jolies illustrations. J'ai également une chronologie de mon histoire et parcours professionnel afin que les gens puissent comprendre comment je suis arrivée là où je suis arrivée là. J'ai également utilisé quelques illustrations ici pour étayer visuellement le concept de croissance. L'ajout de ces informations personnelles pertinentes aide simplement les utilisateurs à se connecter à vous et, par conséquent, à s'investir davantage dans 8. Image de marque : utiliser votre en-tête et votre pied de page: Mon cinquième conseil est d'utiliser la présentation de votre en-tête et l'afficher pour mieux représenter votre marque Tirer le meilleur parti de la conception de votre en-tête et est un excellent moyen d'améliorer l'apparence de votre site Web Votre en-tête et votre pied de page s'étendent sur toutes les pages de votre site Web Cela joue donc un rôle important dans la définition du ton et de l' ambiance de votre site. Vous souhaitez que votre en-tête et votre pied de page incluent les couleurs et l'identité de votre marque Accédez facilement au menu à toutes vos pages, en particulier à vos pages de portfolio, de boutique ou à propos, tous les liens sociaux et à un moyen simple de vous contacter, comme une zone de saisie ou d' abonnement, votre logo, votre notice de copyright et votre politique de confidentialité, ainsi que tout autre lien que vous souhaitez rendre accessible sur toutes les pages. Essentiellement, vous devez utiliser votre esprit ouvert pour présenter votre image de marque et communiquer rapidement ce qui se trouve sur votre site. Et vous souhaitez utiliser votre pied de page pour partager des informations importantes qui améliorent la convivialité du site est très important de choisir le style d'en-tête qui correspond le mieux à votre image de marque et au type de fonction de menu dont Il est très important de choisir le style d'en-tête qui correspond le mieux à votre image de marque et au type de fonction de menu dont vous avez besoin. Examinons différents styles d'en-tête et de pied de page et leur impact sur l' apparence d'un site Web De nombreux créateurs de sites Web ont des modèles que vous pouvez consulter. Et je viens d'aller sur le site Shopify pour vous montrer quelques styles différents que vous pouvez créer Lorsqu'il s'agit de l' implémenter sur votre propre site, vous pouvez être limité dans ce que vous pouvez créer, mais il est utile de connaître le potentiel de ce à quoi peuvent ressembler un en-tête et Jetons un coup d' œil à quelques exemples. Celui-ci est un très bel en-tête simpliste qui utilise cette transparence Celui-ci comporte également une très bonne photo. nom de la marque est énorme en bas afin que vous puissiez accéder facilement à la page d'accueil à tout moment. Il contient également les colonnes complètes qui incluent des informations sur le site, des liens importants, une boîte d'abonnement à la newsletter. Et puis, en bas, vous trouverez des liens plus techniques tels que droits d'auteur et la politique de confidentialité. Ce design présente un aspect similaire à celui de l'image en pleine largeur, mais cette fois, il présente un céto opaque Je sais qu'avec des en-têtes comme celui-ci, vous pouvez souvent le configurer pour qu'il défile afin qu' il reste sur la page tout le temps Le pied de page de celui-ci est un peu plus simple. Cependant, cette fois, il incluait des liens sociaux. Ce dernier exemple est mieux intégré au site. Il comporte simplement une simple barre d' annonce d'une couleur différente, un logo centré, puis le menu. Et nous allons simplement examiner rapidement l'en-tête mobile ici. Encore une fois, c'est très simple et propre, ce qui est idéal pour quelque chose aussi essentiel pour naviguer sur le site Vous pouvez trouver beaucoup d' inspiration en matière de conception d'en-tête et de pied de page en consultant ce type de modèles Actuellement, cette page n'a pas d'en-tête. Nous avons juste le logo en haut et le copyright Florida en bas. Commençons par l'en-tête. Même s'il s'agit d' un site d'une page, l'ajout d'un menu facilitera la navigation Je vais insérer un en-tête que j'ai créé plus tôt. Cet en-tête est une très belle mise en page simple qui aidera simplement à guider un utilisateur. J'ai ajouté les sections principales de cette page, ainsi que deux options de menu supplémentaires pour le journal et les contacts, que nous allons simplement faire semblant d'apparaître sur des pages supplémentaires que j'ai créées. Vous pouvez voir que j'en ai ajouté un sur les couleurs d'accent afin de conserver la cohérence de cette couleur. Allons un peu plus en profondeur avec le pied de page. Je vais inclure cette boîte d'abonnement dans le pied de page. Comme il ne s'agit théoriquement que d'un site Web d'une ou deux pages, il serait bien dans ce cas d'avoir une boîte d'abonnement sur chaque page Commençons donc par cela. Ce texte sera blanc. En fait, je vais le modifier pour simplement dire newsletter et en faire une petite incitation. Maintenant que c'est fait , ajoutons une section secondaire à la photo. Certaines choses que je souhaite inclure dans cet autre menu, des liens sociaux, à nouveau notre logo et peut-être même des informations sur la marque. Je pense que je vais le créer sous forme deux colonnes avec le menu d'un côté, les autres informations en haut. Oui, donc c'est comme ça que ça a l'air vraiment bien. Et maintenant, sur le côté, je vais ajouter le même menu de navigation que j'ai utilisé dans Head Off. Cool, donc je trouve ça vraiment sympa. J'ai la navigation d'un côté, laquelle je viens de prendre le même menu que celui où je vais cliquer sur vous. Et puis des informations de l'autre côté sans liens sociaux. J'ai également ajouté cette bordure dorée juste pour ajouter un peu plus cette couleur d' accent. Je vais rapidement ajouter une section sur les droits d'auteur pour terminer. Je trouve que ça a l'air vraiment sympa. Et voyons maintenant à quoi cela ressemble réellement sur la page. Ça a l'air vraiment sympa. Je vais juste me débarrasser de cette section parce que nous n'en avons plus besoin. Je vais également ajouter la bannière dorée ici. Séparez simplement ces deux sections. Et c'est le Furda. Vous pouvez voir qu'il s'agit d'un espace convivial beaucoup plus optimisé , qui correspond vraiment à l'image de marque que nous avons créée plus tôt Vous pouvez imaginer s'il s' agissait d'un site multipages, quel impact cela aurait sur la facilité d'utilisation, ainsi que sur la cohérence esthétique du site 9. Garder l'intérêt : expérience utilisateur de base et flux d'une page Web: Maintenant que nous avons terminé tous les conseils relatifs à l'image de marque, prochaines modifications visent toutes à maintenir l' engagement des visiteurs de votre site Web. sixième conseil porte sur l'aspect le plus important de l'engagement des utilisateurs, qui consiste à offrir une bonne expérience utilisateur. Maintenant, j'ai beaucoup utilisé le terme expérience utilisateur tout au long de ce cours. Mais approfondissons ce que signifie réellement, en termes simples, conception de l'expérience utilisateur ou la conception de l'expérience utilisateur, c'est-à-dire le processus qui consiste à rendre quelque chose qui est utilisable, accessible et agréable à utiliser le plus possible. En matière de conception Web, cela signifie prendre en compte chaque interaction que l'utilisateur a sur votre site Web et s'assurer qu'il est optimisé. L'expérience utilisateur de votre site ne doit pas être sous-estimée Des études montrent que si l'expérience utilisateur d'un site Web est médiocre, jusqu'à 89 % des internautes se tourneront vers le site Web d'un concurrent De plus, 38 % des utilisateurs cesseront d'interagir avec contenu d'un site Web si la couche est peu attrayante ou obsolète La partie la plus importante de la conception de l' expérience utilisateur est de comprendre les utilisateurs eux-mêmes. Il s'agit de comprendre qui, quoi, où, quand et pourquoi. Il est idéal pour une utilisation positive, intuitive et fluide lors de la navigation sur votre site Web Offrir cette expérience utilisateur significative vous permet non seulement de mieux définir parcours des visiteurs sur votre site Web, mais aussi de permettre aux consommateurs de se sentir plus confiants en vous et en ce que vous leur offrez. Encore une fois, établir ce sentiment de confiance. Maintenant, je ne m'attends pas à ce que vous deveniez designer UX du jour au lendemain, mais je veux que vous commenciez à envisager cette perspective lorsqu'il s'agit de la conception d'un site Web Il y a quelques domaines clés de la conception UX à prendre en compte. Cela inclut des informations bien organisées, conception axée sur l'interaction, une conception la convivialité, une conception visuellement attrayante et des recherches sur les utilisateurs Parcourez votre site Web tel qu'il est actuellement et posez-vous quelques questions liées à ces domaines. Est-ce facile à utiliser ? Est-ce que le lecteur fait l'expérience de Flow ou se sent-il coupable ? Saurait-il clairement à un utilisateur quelle est la prochaine étape à suivre ? Des boutons et des emplacements intuitifs ? Les textes sont-ils suffisamment grands pour être lus, etc. Il existe de nombreuses ressources en ligne sur les moyens d'améliorer l'expérience utilisateur. Mais une chose générale que j' aime faire lorsque je considère expérience utilisateur est d'appliquer le concept selon lequel moins c'est plus. Des choses comme prendre de gros blocs de texte et ajouter le bouton Lire la suite pour le rendre plus digeste. Ou même en le cachant de manière visuelle, comme dans une boîte à images. Quelque chose que vous pouvez considérer quand il s'agit de moins, c'est plus Respecter les espaces blancs, hiérarchiser la hiérarchie visuelle, catégoriser les informations, segmenter à l' aide de puces, de boutons de raid ou d'éléments visuels intéressants, maintenir la cohérence des pages et rendre de grandes zones d'information boutons de raid ou d'éléments visuels intéressants, plus interactives et grandes zones d' Je vais vous montrer quelques exemples très basiques sur le site Web de maquette Regardons ceci, ma section persistante tant qu'exemple rapide de conception de l'expérience utilisateur. Maintenant, c'est vraiment un excellent contenu et il est bien meilleur que lorsque nous avons commencé, c'est certain. Mais ça fait quand même pas mal de textes à digérer dans un grand groupe comme celui-ci. Parce que nous avons des sous-titres clairs ici. Je pense qu'une expérience très utilisateur serait quelque chose comme un système à bascule pour décomposer ces informations Je l'ai construit pour que vous puissiez voir ce que je veux dire. C'est le même contenu, sauf qu'il est maintenant plus interactif et facile à digérer car il a été divisé en sections. Nous vraiment des espaces blancs également vraiment des espaces blancs et une hiérarchie visuelle. Donc, dans l'ensemble, c'est une expérience beaucoup plus agréable visuellement et fonctionnellement Rapidement, le fait de regarder cette section de cette page perturbe un peu le flux du Ces marges sont un peu choquantes. Elle serait bien plus esthétique en tant que section pleine largeur pour créer essentiellement un design plus attrayant, ce qui, nous l'avons appris, est très important pour les utilisateurs Pour résoudre ce problème, je vais le transformer en une image pleine largeur J'ai décidé de l'inverser de faire du motif l'arrière-plan de cette section et d'y ajouter un cadre bleu foncé Pendant que nous y sommes, je vais également ajouter ce titre au centre et ajouter une superposition foncée Génial, c'est beaucoup plus joli et ça s'intègre très bien dans l'en-tête Maintenant que cela a changé lorsque nous faisons défiler la page entière, le flux visuel est vraiment agréable. Et nous continuerons d'y travailler au fur et à mesure. La cohérence des pages d'espace sera également abordée dans cette leçon. Je veux juste passer en revue et ajouter de jolis espaces blancs et du rembourrage aux zones où cela se superpose un peu, comme ici Cela va juste lui donner un aspect un peu plus professionnel. J'ai donc ajouté un peu d'espacement et j'ai juste modifié certaines choses. Je modifie légèrement ce texte et déplace ce bouton vers le bas. Maintenant que je regarde ça, je pense que je veux déplacer cette image de ce côté si possible. Laisse-moi partir. Oui, j'ai l'impression que ça marche un peu. Je me suis assuré que tous les textes étaient identiques et j'ai supprimé les éléments qui ne sont plus pertinents. J'ai ajouté quelques mots supplémentaires. Cet espacement fait une énorme différence dans le flux de page 10. Garder l'intérêt : le pouvoir des PNG: Le septième conseil est consacré au pouvoir des PNG. Il y a deux choses très intéressantes dont je voudrais vous parler en ce qui concerne les PNG. Tout d'abord, le format PNG est une excellente option pour enregistrer des images de haute qualité pour le Web Et deuxièmement, ils ont la possibilité d' enregistrer avec des arrière-plans transparents. Je veux commencer par partager la différence entre un PNG et un JPEG. Les deux types d'images présentent des avantages et des inconvénients Lorsqu'il s'agit d'enregistrer des images pour votre site Web, un fichier PNG peut contenir plus de données qu'un fichier JPEG, ce qui signifie qu'il peut s'agir d'une image de meilleure qualité, mais également d'un fichier plus volumineux, ce qui peut alors affecter la vitesse de chargement de votre Toutefois, les PNG ont une compression sans perte, ce qui signifie essentiellement que vous pouvez réduire la taille d'une image PNG tout en préservant la qualité Ces fichiers seront toujours beaucoup plus volumineux que les fichiers JPEGS qui utilisent la compression avec perte Cela réduit considérablement la taille de l'image, mais avec moins de données à utiliser, au format JPEG, qualité de l'image peut en pâtir et vous perdre certaines couleurs et certains détails. Le choix d'utiliser un format PNG ou JPEG dépend de votre jugement et de l' importance la qualité des images pour votre public. Par exemple, si vous êtes photographe et que vous avez votre portfolio de photographies sur votre site Web, il est très important que ces images soient de haute qualité. Comme mentionné, les J'arrête de payer peuvent avoir des arrière-plans transparents, ce qui les rend très utiles pour le Web. L'utilisation des arrière-plans transparents de Piaget peut donner lieu à des opportunités vraiment intéressantes et uniques en matière d' matière Maintenant, avant de vous inquiéter de la taille des fichiers, je voudrais que vous exploriez les possibilités de ce que Piaget peut offrir De ton côté. Nous reviendrons à la question de l'espace et de la taille des images dans moins de dix. Je veux vous montrer quelques exemples de PNG sur des sites Web. Il s'agit de mon site Web actuel et j'ai fait cette illustration au format PNG pour créer un arrière-plan vraiment dynamique pour cette inflammation, ce qui correspond parfaitement à mon style artistique. Cela donne aux gens une idée très rapide de ce que je fais de bizarre J'ai dessiné ces fleurs et je les ai reproduites, puis les ai enregistrées au format PNG avec un fond transparent Un autre exemple que j'ai créé est cette petite section de valeur de ce côté. Les lignes ondulées et les cercles texturés sont tous deux des PNG. Ces lignes, par exemple, je viens de créer la vague sur Illustrator et de l'enregistrer avec un côté transparent Ensuite, je me suis assuré que les codes hexadécimaux des couleurs correspondaient à ce qu'il y avait sur le côté. Tout ce qui est circulaire ou avec des bords texturés sera au format PNG. Et cette stylisation artistique apporte simplement une ambiance amusante, ludique et différente à la conception Web, qui est par ailleurs très tranchante et structurée Rien, vous ne savez ce qui définit un PNG ? Vous le verrez partout. Conception de site Web à défilement sur Pinterest. Vous pouvez dire que c'est un Piaget, alors ça l'est aussi Vous serez en mesure de trouver l'inspiration pour utiliser au mieux les PNG très facilement. La meilleure utilisation des PNG que j'ai personnellement vue est probablement celle de Mike Costs pour le site Sound Snap Maintenant, c'est un site super beau qui aurait certainement demandé un codage fou. Mais toutes ces magnifiques illustrations auraient dû être enregistrées au PNG avec des arrière-plans transparents pour obtenir ces lignes organiques La conception de ce site repose beaucoup sur les PNG pour son esthétique Vous pouvez consulter le site Web en détail à l'adresse snip sand.com et économiser de superbes fichiers PNG Même si vous pouvez être tenté de mettre du texte dans vos compilations d'images pour créer des mises en page sympas Je vous recommande de conserver tous vos textes directement sur votre site Web. Si votre texte est une image, il n'est pas surligné. Cela signifie que les moteurs de recherche tels que Google ne peuvent pas le lire et comprendre l'objectif de votre site. Si vous envisagez de rendre votre site lisible sur Google, simple fait d'avoir ce texte lisible peut faire toute la différence entre l' affichage de votre site Web ou le fait de se perdre parmi les saloperies En regardant cette page, je trouve qu' il serait vraiment amusant d'utiliser des PNG à certains endroits , mais restons assez simples pour arrêter cette section et la façon dont nous avons pris cette image et ces phrases pour les transformer en ceci Tout ce qui reste dans cette section de contenu est cette section. Et cela ne fait que décrire le style de cette personne. Je pense que ce serait vraiment amusant à afficher visuellement en utilisant des PNG. En regardant ce contenu, je l'ai divisé en trois mots principaux, orné, intemporel et tranquille, qui décrivent le style Je vais enregistrer des images PNG sur Illustrator qui correspondent à ces trois mots Je viens de les choisir gratuitement, mais s'il s'agit de mon propre travail, je dessinerais mes propres images pour mettre en valeur mon style de photo. Je vais rapidement tracer l'image pour supprimer le fond blanc. Je vais sélectionner Sketch et vérifier que l'option Ignorer blanc est sélectionnée. Sympa. Je vais les développer et les dissocier. J'ai créé trois sorties, toutes aux mêmes dimensions pour y placer chaque PNG à des fins d'enregistrement. Je les veux sur un plan de travail de la même taille pour qu' ils aient tous la même apparence sur le côté. J'ai choisi ces trois fichiers et je vais juste m' assurer qu'ils sont alignés sur le plan de travail afin que ceux qui sont centrés sur la page puissent m' assurer que les bons fichiers sélectionnés par Kabeles sont corrects Nous allons faire la même phase J. Et maintenant nous allons les exploiter Ma méthode préférée pour enregistrer des images comme celle-ci pour PNG est d'aller dans Fichier, Exporter, Exporter pour écrans. Ensuite, chaque plan de travail créera sa propre boîte. Et vous pouvez simplement cocher celles que vous souhaitez explorer, dans ce cas, toutes. Ensuite, je vais aller ici et m'assurer que c'est en PNG ou je vais choisir PNG 8. suffit ensuite d'appuyer sur Exporter et de l' enregistrer dans un dossier que vous pourrez retrouver ultérieurement. Nous allons donc les insérer ici sur la page. Je vais les avoir sous forme de trois images ci-dessous. C'est une très bonne façon d'afficher des informations comme celle-ci. Et vous pouvez imaginer que vous pouvez rendre les PNG encore plus intéressants en utilisant des arrière-plans colorés, en ajoutant des textures et, évidemment ayant des images qui correspondent à ce que vous essayez d'afficher Je souhaite également transformer ces images de critique en PNG. C'est donc un peu plus intéressant qu'un simple rectangle. Revenons donc à Illustrator. Cette fois, je viens de prendre ce coup de pinceau de Free Pig, et je vais juste le tracer à l'image également Encore une fois. Ignore White est activé. Je vais monter le seuil pour qu'il revienne. Ça a l'air bien. Je vais donc l'étendre. Et le choix de la couleur est très facile grâce à notre palette de couleurs. Je vais avoir cet accent bleu. Ce sont actuellement des rectangles, mais ce que je veux faire, c'est les découper, les masquer dans ce cercle et ensuite tracer un joli coup de pinceau Comme avant. Je viens de créer trois plans de travail aux mêmes dimensions. Je vais jouer avec la mise en page et l'envoyer à la banque Il va donc vérifier rapidement ceux qui n'ont pas de fond blanc derrière ici. Un moyen rapide de tester cela consiste simplement à créer un arrière-plan sombre et à le placer derrière. Et vous pouvez voir qu' aucun blanc n'apparaît. Donc tant que nous n'avons rien d'autre derrière cette image, lorsque nous l'enregistrons au format PNG, elle sera transparente. Je vais maintenant exporter les données de la même manière que je le faisais auparavant. Ensuite, nous pouvons les insérer. Et voila, ça a l'air un peu plus intéressant maintenant Ce ne sont là que deux exemples de PNG très simples, mais vous pouvez déjà commencer à voir le potentiel des images d' arrière-plan transparentes et tout ce que vous pouvez créer simplement en superposant des couches 11. Garder l'intérêt : l'animation et le mouvement: Mon huitième conseil consiste à ajouter l'animation et du mouvement à votre site Web. Animation and Movement est une stratégie très efficace pour engager les utilisateurs sur votre site Web. Cela peut inclure de petits éléments tels que des animations de boutons et des survols d'images, ou des éléments plus grands tels que des images fixes dynamiques, des arrière-plans vidéo, des graphismes animés et même des cadeaux Les graphismes animés attireront l'attention des internautes et les garderont plus longtemps sur votre site Web, qui augmentera les chances qu'ils interagissent avec votre contenu. En fait, des recherches ont révélé que les visiteurs du site Web resteront 8 % plus longtemps sur les pages Web contenant des vidéos. Passons à quelques exemples de manières d' ajouter du mouvement à votre site. Je souhaite vous montrer quelques façons d' ajouter des mouvements simples à votre site. Je voulais commencer par un exemple simple d'image fixe. Nous regardons la galerie de motifs ici, et elle est plutôt jolie. Mais je souhaite ajouter une texture à l'arrière-plan de manière très subtile pour ajouter du mouvement à la page. Et je veux que cette texture soit une superposition. Maintenant, je vais juste le régler pour qu'il soit corrigé. Une image fixe signifie simplement que lorsque quelqu'un fait défiler la page, l' image reste dans la même position, ce qui crée Vous pouvez voir sur les spécifications ici reste au même endroit, ce qui donne l'illusion qu'il bouge. C'est une façon très subtile d'ajouter du mouvement, mais c'est juste un peu plus accrocheur qu' un arrière-plan statique Je vais ajouter cette même image de style fixe en arrière-plan ici. Je viens d'ajouter cette même image fixe dans la section de révision ici. J'ai modifié les proportions pour que le texte soit plus large que les images. Et vous pouvez voir à quel point ce petit mouvement supplémentaire ajoute une bonne dose d'intérêt. Juste un peu plus dynamique. Ça a l'air vraiment sympa sans, sans détourner l'attention du contenu, ce qui est l'essentiel L'exemple suivant que je veux vous montrer est cette section d'étalonnage. Maintenant, cela semble correct tel quel, mais je pense que cela pourrait être beaucoup plus intéressant. Je vais utiliser le survol de masse ici et transformer ces images statiques en boîtes à rabat pour créer un mouvement plus interactif C'est le genre de chose que nous allons créer lorsque vous passez la souris, ça bascule Et au lieu d'avoir une image puis les informations, nous allons mettre les informations sur l'image. Je pense que je veux juste l' image du devant. Et j'ai ajouté une petite bordure dorée juste pour redonner cette couleur d' accent. Ensuite, nous aurons ces informations et le bouton au dos. Je pense que cela semble beaucoup plus intéressant. Je vais donc m' occuper des deux autres. Il s'agit simplement d'une manière beaucoup plus attrayante de présenter des informations. Son interactivité implique l'utilisation de taupes, que les utilisateurs seront plus enclins à interagir avec ce contenu La dernière chose que je vais faire est d'ajouter des effets d'animation de base au reste de ce site. Donc des images comme celles-ci, peut-être celles-ci, et probablement celles-ci aussi. Je vais simplement ajouter des flux ou d'autres paramètres d'animation simples afin que, lorsque la page se charge, ces images se déplacent au fur et à mesure que vous les dépassez Les effets d'animation sont des fonctionnalités de conception assez basiques du front-end. Donc, lorsqu'il s'agit de le faire vous-même, jetez un coup d'œil aux hébergeurs de sites Web que vous utilisez. La plupart d'entre eux proposent des options d'animation de base que vous pouvez appliquer à n'importe quelle image statique. Je les ai ajoutés, alors mettons-le à jour et prévisualisons-le, et je vais vous montrer à quoi il ressemble. Vous pouvez voir cette subtile disparition. C'est juste créer un peu plus d'intérêts. Et tu peux faire le type de fondu que tu veux. Avec ça. Je viens d'en choisir des très basiques. J'ai également ajouté cette liste sur le même arrière-plan vidéo que moins de trois. Vous pouvez déjà voir à quel point ces pages sont plus intéressantes avec tout ce mouvement 12. Fonctionnalité : points d'arrêt et conceptions Mobile First: Le neuvième conseil concerne Breakpoints et Designing Mobile First Lors de la conception d'un site Web, il est très important d'analyser d'abord manière dont votre public idéal consultera votre site Web Par exemple, si vous vendez des produits et utilisez principalement Instagram pour promouvoir votre travail, la plupart de vos spectateurs cliqueront sur le lien de votre biographie Instagram et consulteront le site Web sur leur téléphone. Sinon, si vous avez un site de portfolio de CV et que vous l'envoyez par e-mail à des employeurs potentiels, celui-ci sera probablement consulté sur ordinateur Maintenant, si vous ne savez pas quels sont les points d'arrêt, notre point d'arrêt est une taille spécifique à laquelle contenu et la conception d'un site Web s'adapteront pour offrir une meilleure expérience utilisateur Bien que vous puissiez créer autant de points d'arrêt que vous le souhaitez, un site Web en possède généralement trois. Ils permettent au site Web de fonctionner différemment selon que l'utilisateur le consulte sur un ordinateur de bureau, une tablette ou un mobile. De toute évidence, l'écran d'un téléphone a une forme et une taille complètement différentes. Ainsi, un ordinateur de bureau et, si souvent, ce que vous avez conçu pour un type d' écran ne se traduisaient pas bien en roman. Si vous voulez qu' un pourcentage décent de personnes consultent votre site Web depuis leur téléphone. Je recommande vivement concevoir d'abord un site Web mobile. Maintenant, il est souvent plus intuitif de concevoir d'abord le site pour ordinateur, puis traiter le site mobile comme une Mais si vous allez beaucoup utiliser les appareils mobiles, je vous recommande de prendre très au sérieux leur conception mobile. Selon Zip, oui, 52 % des personnes disent qu' une mauvaise expérience mobile leur fera perdre confiance en Accompagner , ils sont cinq fois plus susceptibles de quitter un site Web qui n'est pas optimisé pour les appareils mobiles. Il est beaucoup plus facile de concevoir pour mobile et Ultimate pour ordinateur de bureau que l' inverse, car vous augmentez votre conception au lieu de la réduire. Lorsque vous concevez pour mobile, vous disposez de beaucoup moins d'espace. Cela vous oblige donc à hiérarchiser contenu des pages et à créer une expérience intuitive. Si vous pouvez donner à votre site Web une belle apparence sur mobile, vous pouvez le rendre magnifique sur ordinateur de bureau. J'ai d'abord créé l'ensemble de cette page Web pour ordinateur. Et vous pouvez le voir quand je regarde les points d'arrêt Commençons par la tablette Ça a l'air plutôt bien jusqu'à présent. Mais quelque chose comme ça ne s'est évidemment pas bien traduit. Et sur le mobile, vous pouvez constater que certaines sections ne fonctionnent tout simplement pas bien. Si j'avais créé quelque chose comme ce bouton Mobile First, il se serait parfaitement traduit sur tablette et ordinateur de bureau. Mais comme j'ai fait le contraire, cela ne fait que créer du travail supplémentaire pour moi. Vous pouvez voir que certaines zones ne fonctionnent tout simplement pas du tout. Maintenant que nous avons modifié le mode réactif, certaines zones semblent correctes. Et de retour sur la tablette, vous pouvez voir que l'espacement est légèrement décalé sur les côtés. Et je ne pense pas que cela serait arrivé si nous étions passés du mobile au bureau. Encore une fois, quelque chose comme ça. Il a un espacement vraiment étrange. Et si je l' avais créé Mobile First, je ne pense pas que cela serait arrivé. C'est donc juste quelque chose à prendre en compte si votre public va beaucoup utiliser les appareils mobiles Concevoir d' abord ce site de téléphonie mobile vous fera rire beaucoup plus facilement. 13. Fonctionnalité : vitesse du site et temps de chargement: Mon dernier conseil pour améliorer votre site Web est énorme optimiser la vitesse de chargement de votre site. Je voudrais commencer cette leçon par le fait que cela pourrait vous rendre un peu triste. Des recherches ont montré que 39 % des utilisateurs n'étaient pas engagés si le chargement d'un site Web prenait trop de temps. Maintenant, vous vous demandez peut-être combien de temps est trop long ? Eh bien, la triste vérité est que 53 % des visiteurs de sites Web utilisent Hawk Aucun trafic potentiel n' abandonnera un site Web dont le chargement prend plus de 3 secondes C'est le temps qu'il m'a fallu pour lire cette phrase. Vous avez donc travaillé dur créer un site Web époustouflant regorgeant de contenu incroyable et plus de la moitié des personnes le regarderont en partant avant même de le dire. Je suis sûr que vous pouvez voir à quel point un site Web à chargement rapide est vraiment important . Avant d'examiner comment améliorer la vitesse de votre site, nous devons savoir de quoi il s'agit actuellement et pourquoi. Google dispose d'un outil incroyable qui rend cela très facile, appelé PageSpeed Je vais utiliser cet outil sur le site d'une page que nous avons créé pendant ce cours et l'utiliser pour expliquer ce que vous pouvez faire pour améliorer la vitesse de chargement de votre site Nous allons donc d'abord récupérer le lien URL de notre page Web publiée, copier, le coller ici et cliquer sur Analyser. Il va maintenant créer ces deux sections, mobile et ordinateur de bureau. Cela est dû au fait que ces deux modes différents ont des plages de chargement différentes. La vitesse de votre site mobile sera presque toujours inférieure à celle de votre ordinateur de bureau. Même si votre site mobile est optimisé. Tout simplement parce que les ordinateurs de bureau disposent meilleurs processus et d'une connexion Internet souvent plus fiable. Je vais d'abord regarder l'ordinateur de bureau, simplement parce que je n'ai pas vraiment créé ce site pour mobile. Google a donc effectué une analyse sur cette page Web et diagnostique ses performances. Il est divisé en sections complètes. Performances, accessibilité, meilleures pratiques et optimisation du référencement ou des moteurs de recherche. Ces résultats ne s'appliquent qu'à une seule page Web. Donc, si vous avez un site de plusieurs pages qui comporte une page À propos, une page de portfolio, etc., vous devrez analyser chacune d'elles individuellement Lorsque nous parlons de la vitesse de chargement de votre site, nous souhaitons examiner cette section sur les performances. Toutes ces données sont liées à la vitesse de chargement de votre site. Mais le principal chiffre que vous devez connaître est votre indice de vitesse, qui est le temps de chargement total de votre page Web. Ce premier contenu pour Paint indique le temps nécessaire au chargement de la première information. Et cette peinture complète du contenu le plus volumineux correspond au temps de chargement du plus gros fichier de votre page. Ce gros chiffre correspond à l'ensemble de votre Speed School. Idéalement, vous voudriez que ce soit dans la zone verte, mais honnêtement, tout ce qui passe entre les années 1970 et 1980 est plutôt génial Performance dispose également d'une arborescence visuelle qui vous montre les étapes de chargement du contenu de votre page. Sous la carte arborescente, nous avons des opportunités, et c'est là que vous pouvez commencer à voir des suggestions sur la manière d' améliorer la vitesse de votre site. Jetons un coup d'œil à la sauvegarde d' images dans des formats de nouvelle génération. Et vous pouvez voir qu'il m'affiche les images réelles qui prennent le plus de temps à charger. Je suggère que je convertisse ces formats de nouvelle génération tels que Web Pay En fait, j'utilise un plug-in qui automatise cela pour moi, qui explique en grande partie pourquoi ce score est déjà si bon Mais vous pouvez facilement rechercher une image et la convertir en ligne. Et je trouve qu'en utilisant ces convertisseurs, les images ne perdent pas grand-chose En cas d'inégalité, je préfère d'abord enregistrer une image au format PNG pour obtenir une haute qualité , puis la convertir en page Web par la suite. Cette section est liée à mon back-end, que vous pourriez à nouveau gérer avec un plugin, mais je laisserais juste quelque chose comme ça Maintenant, ces deux éléments sont spécifiques à ce site Web. Mais si j'en reviens à cette section d'audit précédente, voici quelques autres problèmes auxquels vous pourriez être confronté lorsque vous examinez la vitesse de votre site. Pour que les images soient correctement dimensionnées, il faut qu'elles soient de la bonne taille pour vos Breakpoints Différer les images hors écran suggère de configurer un chargeur différé, ce qui signifie simplement que les images se trouvent sur la page mais qui ne sont pas visibles tant que vous ne faites pas défiler la page vers le bas. Ne les chargez pas tant que l'utilisateur n'y accède pas. Comme vous pouvez le constater, il existe de nombreuses autres suggestions. Quand il s'agit d'améliorer la vitesse de votre site. Il vous suffit de consulter la section des opportunités. Lorsque vous cliquez dessus, il vous dira à peu près exactement ce que vous devez faire. Si vous ne comprenez pas ce que cela signifie, il vous suffit de rechercher la phrase sur Google et vous trouverez de nombreuses instructions sur la façon de le faire. La plupart des améliorations de la vitesse du site concernent la façon dont images sont enregistrées et la façon dont vous avez créé votre site Web. Ils reviendront toujours à héberger des suggestions auxquelles vous ne pouvez rien faire. C'est. Ne t'inquiète pas pour ceux-là. Si vos scores se situent dans la zone rouge et que tout cela est lié au backend, vous devrez probablement envisager de mettre à niveau l'hébergement de votre site Web La section suivante est consacrée à l'accessibilité, qui est liée à l'expérience utilisateur et à des éléments tels que la lisibilité C'est une excellente école, mais l'une des suggestions qu'ils ont ici est que les couleurs d'arrière-plan et de premier plan n'ont pas un rapport de contraste suffisant Si nous cliquons dessus, cela nous montre où il pense que cela s'applique. Dans ce cas, il s'agit de mon texte gris sur fond de grue, peut-être difficile à lire pour certaines personnes, ainsi que ce texte blanc sur fond bleu clair. C'est une chose assez facile à corriger. Les meilleures pratiques concernent le backend et les devis. Donc, en supposant que vous ne fassiez pas de code insensé, vous devriez généralement être en sécurité ici. Enfin, le score SEO est la facilité avec laquelle les moteurs de recherche peuvent comprendre votre contenu. Maintenant, je ne vais pas entrer dans le domaine du référencement, mais l'ajout d'une méta-description est une chose assez importante et standard à faire et nous allons beaucoup améliorer ce score. Une méta-description n'est qu'un bref résumé du sujet d'une page particulière. Vous pouvez facilement rechercher sur Google comment ajouter une méta-description via un fournisseur de site Web Vous savez maintenant ce que signifient ces numéros de téléphone, et il en va de même pour le mobile. Il contiendra quelques suggestions différentes pour votre site mobile. Il s'assure donc de passer par les deux. Mais c'est à peu près tout ce que vous devez savoir pour améliorer la vitesse de votre site. 14. À votre tour !: Nous l'avons fait une fois en ajoutant une bulle. C'est comme ça que fonctionne le modem. C'était beaucoup de contenu à assimiler. Résumons donc rapidement chacun des dix conseils et réfléchissons à ceux qui fonctionneraient le mieux pour votre site Web. Les cinq premières leçons de ce cours ont porté sur la définition des principes visuels fondamentaux de la création d'une marque. Cela comprenait la typographie, où nous avons abordé la hiérarchie typographique de base, comment choisir les combinaisons de polices qui correspondent votre marque et comment les utiliser au mieux sur votre site Web, ainsi que quelques informations rapides sur les ainsi que quelques informations rapides Nous nous sommes ensuite penchés sur les palettes de couleurs et expliqué comment choisir les couleurs qui reflètent votre travail. Combien de couleurs inclure dans la palette de votre marque et quelle quantité de chaque couleur utiliser sur votre site Web, ainsi que quelques notions de base sur la psychologie des couleurs. Dans la troisième leçon, nous avons parlé du choix des images adaptées à votre marque et de la puissance du contenu vidéo. Et en moins de quatre, nous approfondissons l'importance de partager votre histoire sur votre site Web. La cinquième et dernière leçon sur l'image de marque portera sur l'utilisation de vos en-têtes et pieds de page et sur vos habitudes pour les utiliser pour donner le ton et l' ambiance de Leçons 6 à 8 : Rangez tout ce qui concerne les sensations et fidélisez notamment en réfléchissant à l'expérience utilisateur, créant des images intéressantes à l'aide de PNG, explorant le pouvoir du mouvement grâce à l'animation et J'ai perdu ses leçons, tout tournait autour de la fonctionnalité. Il s'agissait notamment d'analyser votre public et éventuellement de concevoir d'abord le mobile, ainsi que de comprendre et optimiser la vitesse du site, importante OCO Jetons rapidement un coup d' œil au site Web d' exemples de maquettes avant et après Nous avons donc ici le site Web d'avant. Cela ne semblait pas si mal au départ, mais maintenant que nous avons des preuves visuelles montrant à quel point cela pourrait être mieux, il est difficile de revenir en arrière. Vous m'avez vu appliquer H des dix conseils de cette page, commençant par la typographie, en ajoutant les couleurs, en jouant avec les mises en page et l'espacement Vous connaissez maintenant l'impact que chacun de ces changements peut avoir. Voici la page complète avec tous les conseils appliqués. Et je trouve que c'est vraiment beau et qu'il est certainement beaucoup, beaucoup plus optimisé. Lorsque vous apportez vous-même ces modifications, ne vous laissez pas submerger. Si ça n'a pas l'air parfait tout de suite. Prenez le temps d'expérimenter et de jouer avec ce que vous avez appris. Vous avez toutes les anologies nommées ici. Il suffit donc de le décomposer pointe par pointe et de voir ce qui se passe. Je suis toujours là pour vous faire part de vos commentaires et j'adorerais connaître au préalable les modifications que vous apportez à votre site Web dans la section des projets. Chaque petit changement que vous apportez compte pour améliorer votre site Web. J'adorerais le voir. Avant de terminer. Je tiens à vous remercier beaucoup regardé mon tout premier cours Skillshare Cela signifierait beaucoup pour moi si vous pouviez laisser un commentaire et me dire ce que vous pensez de ce cours. Vous pouvez également me suivre ici sur Skillshare et vous serez informé de tous les nouveaux cours que je créerai J'espère vraiment que vous avez trouvé de la valeur dans ces leçons. J'adore enseigner ce sujet et vraiment hâte de savoir lequel de ces conseils vous a été le plus utile et ce que vous allez créer avec ces nouvelles connaissances. Merci encore et bon site