Au-delà du logo : Booster l'identité de marque avec une interface utilisateur efficace

1. Se dérouler au-delà du logo : une introduction: Salut tout le monde. Je m'appelle Sofia et je suis directeur artistique , graphiste et designer d'interface utilisateur. Dans cette classe, nous comprendrons que donner un grand coup de pouce numérique à ce que vous concevez, peut être très simple. Au cours de mon expérience de travail, j'ai réalisé que la conception d'un système visuel fort ne suffisait pas à garantir l'unicité d'une identité, en particulier dans un contexte numérique. Je me suis retrouvé à concevoir une carte interactive des villes, à partir d'un motif graphique. J' ai créé une illustration vectorielle pour parler au public plus jeune d'une marque. J' ai développé des infographies afin de rendre les données facilement accessibles, et de les transformer en matériel pour poster sur les médias sociaux. Assurer toujours la cohérence de la marque, des médias traditionnels aux médias numériques. C' est pourquoi j'ai hâte de vous enseigner tous les conseils dont vous avez besoin pour concevoir une identité de marque réussie avec une approche numérique. En particulier, nous allons découvrir, tous les secrets pour transformer l'élément graphique d'une marque dans un système unique et exceptionnel d'interface utilisateur. Nous allons apprendre à concevoir un jeu d'icônes approprié pour avoir une approche typographique correcte pour intégrer des animations et élaborer des directives à suivre pour vos collègues. Cette classe s'adresse à un designer qui a déjà certaine expérience avec Adobe Illustrator et Steel Sketch. Mais nous allons procéder étape par étape. Tous ceux qui veulent comprendre comment concevoir avec une touche numérique, trouveront beaucoup à apprendre. Prêt ? Allons-y. 2. Notre projet: Salut tout le monde. Je suis content que tu aies choisi de commencer ce voyage avec moi. Dans cette introduction, je vais expliquer rapidement ce que nous allons accomplir ensemble d'ici la fin de cette classe. Nous pouvons prendre notre brève description comme point de départ. En effet, il résume déjà de manière concise deux des principaux axes de nos leçons. L' une est l'identité de marque, ce qui signifie dans notre cas spécifique, les principaux traits visuels définissant le sujet que nous choisirons pour notre projet. Il peut s'agir d'éléments de marque existants ou d'autres caractéristiques visuelles que nous transformerons en expériences numériques significatives. Le second est l'interface utilisateur efficace, est-à-dire le système numérique exceptionnel dans lequel nous transformerons éléments d'identité de marque que nous avons mis en évidence dans la diapositive précédente. Tout ce que nous apprenons ensemble sur l'identité et l'interface utilisateur finira par rassembler dans un projet spécial que vous construirez et complétez leçon par leçon. Le projet est une excellente page d'accueil du site Web. Attendez, je n'ai pas dit de page d'accueil, j'ai dit une grande page d'accueil parce que, comme nous le verrons, ce n'est pas une tâche facile de le faire correctement. Pour résumer ce que nous avons dit jusqu'à présent, nous commencerons à partir de l'identité de la marque et grâce à une conception efficace de l'interface utilisateur, nous obtiendrons une excellente page d'accueil du site Web. Cool. Mais comme apprendre tout en s'amusant est la chose la plus importante, notre site Web serait commun. Je voudrais que vous choisissiez un personnage que vous aimez profondément ou qui vous intéresse, qu'il soit réel, fictif, humain, non-humain, drôle, même romantique, courageux, et qu'il construise sa propre page d'accueil. chose la plus importante à retenir lors du choix d'un personnage est qu'il doit être visuellement bien défini avec beaucoup de fonctionnalités intéressantes à utiliser pour construire cette présence numérique. Finalement, nous verrons comment ces étonnantes études du personnage et, d'une manière générale, ce que nous allons apprendre dans cette classe pourrait facilement être considéré comme une formation pour ce que nous devrions tous faire dans le cadre d'un travail réel. Voulez-vous voir un petit aperçu alors ? Je le savais. Eh bien, je pourrais commencer à révéler. Je choisirai Henri Matisse comme personnage. Je vais l'étudier avec l'aide d'un tableau d'humeur à partir duquel je vais concevoir des couleurs, typographie et des styles graphiques reconnaissables. Plus tard, j'utiliserai ces éléments pour concevoir l'interface utilisateur de ma future page d'accueil, définissant, par exemple, son ensemble d'icônes. Grâce à un bref voyage à travers les merveilles de l'architecture de l'information, des parcours des utilisateurs et des interactions, nous définirons étape par étape notre merveilleuse page d'accueil. C' est pourquoi, que vous soyez un graphiste super-qualifié ou un brillant directeur artistique et que vous souhaitiez apprendre à donner un coup de pouce numérique aux identités de marque que vous concevez, c'est la classe qu'il vous faut. Une certaine expérience avec Adobe Illustrator et XD sera formidable. Mais comme nous allons procéder étape par étape, tous ceux qui sont intéressés à comprendre comment concevoir une identité avec une touche numérique, trouveront beaucoup à gagner. Prêt à commencer ? quelques petites suggestions que j'aimerais vous donner avant que nous traversions ce voyage ensemble. Amusez-vous toujours en expérimentant votre design, travaillez sur quelque chose que vous aimez vraiment et que vous voulez découvrir en profondeur, et ne jamais abandonner quand quelque chose ne fonctionne pas au début. Juste au cas où vous aimeriez en savoir plus sur ce que nous allons faire ensemble, je vous suggère de jeter un oeil à certains des articles super intéressants que j'ai mis à la fin de la description du cours. C' est tout pour tout ce type de leçon. Préparez-vous avec votre ordinateur portable ou votre ordinateur portable, et rendez-vous dans la prochaine leçon. 3. Succès en ligne: Salut tout le monde et un accueil très chaleureux à la première leçon de cette classe. Dans la diapositive suivante, nous commencerons notre voyage avec quelques grandes études de cas. Grâce à eux, il sera beaucoup plus facile de comprendre de quoi nous parlons quand nous disons une identité numérique réussie. Dans la première partie de la leçon, nous examinerons quatre grands exemples de marque qui construisent une identité très cohésive, des points de contact physiques aux points de contact numériques. Alors que dans la deuxième partie, nous commencerons à traiter des premières étapes de notre projet. Tout d'abord, pourquoi devrions-nous nous concentrer sur la cohérence de la marque ? Eh bien, parce qu'à l'ère numérique est très susceptible de voir notre identité se perdre dans un univers plein de contenus, nous devons donc garantir que nos marques conservent leur unicité et leur force dans chaque expression visuelle. Toutes ces expressions doivent également être examinées très attentivement car aujourd'hui, nous devons donner des valeurs à nos clients, pas seulement des sorties visuelles. Ces valeurs peuvent être véhiculées grâce à toutes les fonctionnalités que nous construisons autour de notre identité de marque. En troisième lieu, nous ne devons pas oublier qu'une marque aujourd'hui est également sociale, connectée et plus rapide. Chaque expression de marque doit refléter ce développement sans fin, mais en même temps être cohérent les unes avec les autres. Pourquoi ne pas commencer notre voyage à partir des études de cas que j'ai sélectionnées pour vous ? De la cohérence visuelle aux animations, des médias sociaux aux lignes directrices de la marque, je vais vous guider pour découvrir les clés de leur succès. La première marque dont j'aimerais vous parler est AESOP. Personnellement, je l'aime et je pense vraiment qu'en tant qu'étude de cas, elle peut vous donner une grande quantité d'inspiration. Parce que lorsque vous regardez leur emballage ou que vous allez dans l'un de leurs beaux magasins de créateurs, vous avez ce même sentiment d'élégance et de beauté que vous percevez lorsque vous faites défiler leur flux Instagram, ou tout simplement quand vous regardez leur logo. Comme nous pouvons le supposer à partir de leur emballage, par exemple, leurs principales caractéristiques visuelles sont très essentielles et simples. Les concepteurs de l'AESOP sont vraiment super bien en les mélangeant toujours d'une manière super équilibrée et élégante. Il est également facile de voir comment ils ont réussi à traduire tous les éléments graphiques que nous pouvons trouver dans l'univers physique AESOP dans le numérique. Ils se sont également attachés à trouver la meilleure contrepartie numérique de leur typographie institutionnelle. Voici un court voyage à travers leur site web. Comme vous pouvez le voir tout dit AESOP, de la correspondance des couleurs aux transitions fluides, images de produit décorées, et la typographie propre. Voici un autre exemple. Changeons complètement la perspective et parlons d'un géant dans l'univers numérique. Google, qui de mieux qu'eux pourrait nous donner une bonne inspiration ? Bien sûr, je sais que Google est déjà un produit numérique, mais il est très intéressant de voir comment les gens Google sont capables de diversifier et d'élargir la marque, conservant même les moindres détails. Comme vous pouvez le voir, leurs identités jouent autour d'une topographie emblématique en quatre couleurs très distinctives. définissant ceux-ci comme point de départ et avec un goût pour l'utilisation des formes géométriques et des animations, ils parviennent à faire vivre leur identité. Vous trouverez ici un bref résumé de ce que nous avons déjà dit. Quatre couleurs, lignes graphiques essentielles. Si nous approfondissons ces recherches, nous découvrirons que grâce à une utilisation incroyablement habile des animations et des transitions, elles font vraiment parler les formes d'une manière parfaitement compréhensible par un large éventail d'utilisateurs. Utilisant cette déclinaison de leur identité numérique, ils vont au-delà des mots et des langues. Un autre dossier que j'aimerais vous montrer, c'est Kinfolk. Kinfolk est reconnu dans le monde entier comme l'un des magazines les plus raffinés que vous pouvez trouver dans les librairies. Il traite principalement du mode de vie, de la maison et de la culture. Ces jours-ci reflètent la parole des gens en vedette à l'intérieur. Ce qui frappe vraiment à première vue, c'est l'utilisation incroyablement soignée et équilibrée de la typographie, de grille éditoriale et de belles images, qui vous étonnera page après page avec des solutions toujours différentes et intelligentes. Si nous essayons de résumer, les principales caractéristiques visuelles de la mise en page éditoriale Kinfolk, nous devons absolument mentionner la grille, l'utilisation d'espaces vides, et des appariements typographiques élégants. Ces mêmes caractéristiques définissent et rendent leur identité numérique si unique et reconnaissable. La grille est présente et permet de distinguer les lancements principaux et secondaires. L' utilisation du noir et blanc et les expériences typographiques sont utilisés pour transmettre la même élégance et l'équilibre que vous pouvez trouver sur le papier. Le dernier exemple que j'aimerais partager avec vous, c'est Monki. Monki est une marque relativement nouvelle du groupe H&M avec une cible principalement composée de jeunes femmes qui voulaient s'exprimer eux-mêmes et leurs valeurs à travers la mode. Ce qui frappe le plus dans cette marque, c'est une communauté forte qui s'est rapidement développée autour d'elle. Voici un aperçu aussi petit et non exhaustif de leur compte Instagram. Comme vous pouvez le voir, l'utilisation d'une palette de couleurs diversifiée mais cohérente avec des parcelles et des tons féminins ainsi que des expériences de typographie cohésive fonctionne vraiment bien. Est beau de voir en particulier, ce qui peut être fait avec une seule police, si nous décidons de le décliner de manière créative, mais sans le déformer. En fin de compte, ce qui est vraiment intéressant chez Monki, c'est qu'il communique l'audace, soi et le plaisir avec une approche cohérente et percutante, tant du ton de la voix que du point de vue de la direction artistique. Maintenant que nous avons vu beaucoup de grands exemples d'identités numériques, êtes-vous prêt à jeter les bases de votre propre projet ? Le temps est venu de choisir notre personnage, les protagonistes absolus de notre design. Attendez, attendez, ne paniquez pas. Je sais ce que ça veut dire de partir d'une ardoise vierge. C' est pourquoi dans les diapositives suivantes, je vais passer en revue quelques conseils qui, je suis sûr, seront utiles. Lors du choix de votre personnage, rappelez-vous ce que nous avons dit dans la dernière vidéo. Ça pourrait vraiment être n'importe qui qui vous inspire. Ça pourrait être réel, fictif, humain sur humain, drôle, maléfique qui que vous voulez raconter une histoire. Ce sera même simple si vous suivez ces règles. Un, choisissez quelqu'un que vous admirez vraiment et que vous voulez explorer en profondeur, vous deviendrez son fan numéro un. Deuxièmement, vos résultats seront encore plus époustouflants si votre personnage a des caractéristiques reconnaissables. Troisièmement, amusez-vous, et laissez votre imagination courir sauvage. Comme je le mentionnais dans la vidéo précédente, mon choix sera Henri Matisse pour plus d'une raison. Quand j'ai découvert ses découpes en visitant une exposition, je suis tombé amoureux de leurs formes organiques, compositions démographiques et de leurs explosions de couleurs. Je pense qu'ils ont toutes les fonctionnalités pour être mon inspiration pour construire le site Matisse. Cool. Eh bien, c'est à ton tour maintenant. Maintenant que vous avez choisi votre personnage, je vais vous guider dans la création de son moodboard. Un moodboard est un outil super utile qui rassemble en un seul endroit toute l'inspiration visuelle qui décrit la direction de votre projet. Dans notre cas, il recueillera les images les plus emblématiques représentant notre personnage. Nous parlons d'un outil très utile qui vous aidera à garder une cohérence visuelle tout en traitant les différentes étapes de votre projet, mais qui aidera également vos clients, leur permettant de comprendre clairement ce qui se passe dans votre esprit. Pour construire le moodboard parfait, rappelez-vous toujours que vous n'avez pas besoin de beaucoup d'images pour exprimer votre idée. Quelques-uns, mais bien choisis, suffisent. Vous n'avez pas forcément à vous en tenir à un seul univers visuel. L' inspiration peut provenir de nombreuses sources différentes et peut être transmise par différents médias. Après une collection remarquable d'images, j'ai décidé que celles-ci m'auraient aidé à construire l'identité du site Matisse. Pourquoi ? Deux d'entre eux appartenaient à son propre travail. Il est important d'avoir au moins quelques références originales pour éviter d'aller trop loin de votre point de départ. Mais ces images en disent aussi beaucoup sur les couleurs, correspondance des couleurs et les formes organiques. Ces deux autres images sont plutôt des références supplémentaires qui m'aideront à construire ma palette de couleurs et à définir mon style graphique. Je veux qu'il soit doux, organique et fait à la main. Es-tu prêt ? Il est temps de commencer à collecter des images et de sélectionner celles qui représentent le mieux votre style de personnage. Une fois que vous les avez obtenues, mettez-les dans un tableau de bord et restez à l'écoute pour la prochaine leçon. se voit dans le chapitre suivant, les gars. Merci d'avoir regardé ça. 4. Trouvez votre style: Salut tout le monde, bienvenue à notre troisième leçon. Ensemble, nous comprendrons comment définir la caractéristique visuelle de notre projet, à partir du tableau d'ambiance que nous avons défini au cours de la deuxième leçon. Comme vous pouvez le voir dans les diapositives suivantes, nous allons apprendre beaucoup de choses afin d'avoir toutes les bases pour construire une identité visuelle cohérente. Mais avant de commencer, permettez-moi de vous rappeler une fois de plus que nous nous concentrons principalement sur un paysage numérique. De quoi avons-nous besoin pour construire notre identité numérique en tenant compte d'une perspective visuelle ? Pour le découvrir, nous devons d'abord analyser les valeurs de notre marque. Les valeurs sont les mots-clés pour communiquer notre projet, et nous aideront à concevoir de manière plus efficace. Pour définir des valeurs, nous devons étudier et nous familiariser avec notre marque ou dans notre cas spécifique avec notre caractère. La première étape que nous devrions prendre pour trouver le mot pour représenter notre projet est d'analyser notre tableau d'humeur. Au fait, vous vous souvenez du tableau d'humeur que nous avons préparé lors de la dernière leçon ? Nous avons recueilli l'image représentative utilisée pour résumer notre travail de personnages. Je choisis Matisse. En ce qui concerne Matisse tout d'abord, nous pouvons remarquer de notre tableau d'humeur que son coup de pinceau n'est généralement pas précis surtout ses découpes. En second lieu, on peut supposer que le travail de Matisse se se caractérise par une façon très simple et minime de représenter les choses. Les couleurs sont simples et les lignes sont réduites à l'essentiel. Nous pouvons aussi dire que, d'une manière générale, nous regardons une œuvre très élégante, mais sans l'impression qu'elle est trop complexe et inaccessible. Appelons ça un style sans prétention. A la fin de notre analyse, nous avons donc recueilli ces trois points clés, imparfaits, simples et essentiels, et sans prétention. Ce sont les valeurs que nous utiliserons pour communiquer notre projet. Maintenant que nous avons nos points clés, nous allons les utiliser comme point de départ pour construire notre langage visuel. Pour que cela se produise, nous aurons besoin de couleurs, typographie et d'un style graphique exceptionnel. Les couleurs sont à la base de notre conception, nous en avons besoin pour renforcer la qualité, communiquer des actions et donner des informations. Lors du choix des couleurs, n'oubliez pas que moins c'est plus, vous obtiendrez de meilleurs résultats si votre palette de couleurs adhère à un maximum de trois couleurs primaires. Plus vous utilisez de couleur, plus il sera compliqué de gérer votre design. S' il est trop difficile de choisir, vous pouvez toujours utiliser un jeu de couleurs, 60 pour cent pour votre teinte dominante, 30 pour cent pour la couleur secondaire et 10 pour cent pour les couleurs d'accentuation. N' oubliez pas toujours de prêter attention à la culture visuelle dans laquelle vous travaillez. Par exemple, en Inde, l'orange a une série de sens que vous ne devriez pas ignorer. Avant de découvrir comment choisir les couleurs pour notre projet, j'ai quelques autres recommandations pratiques pour vous. Afin de simplifier la sélection des couleurs, essayez de commencer à partir de ce que vous avez comme le matériel que vous avez déjà collecté. Il est également important de toujours garder à l'esprit le public pour lequel vous travaillez, et pour éviter la couleur du concurrent, cela vous aidera à vous démarquer de la foule. En revenant à notre bien-aimée Matisse, si ce sont les images que nous avons déjà sélectionnées, ce pourraient être les couleurs à considérer pour notre palette initiale. Pour être clair, n' oubliez pas que si vous n'êtes pas sûr à 100% de quelque chose, vous pouvez changer d'avis à chaque étape du projet. Nous suivons le chemin spécifique parce qu'il nous aide à définir un processus dans la conception de notre site Web, mais n'hésitez pas à expérimenter et à changer les idées. Outre les belles couleurs que nous avons tirées du tableau d'ambiance, il est essentiel d'inclure également des gris dans notre design, surtout parce que nous travaillons pour le monde numérique. Habituellement, il est préférable de choisir au moins deux nuances de gris, une sombre et une lumière. Pour les choisir, vous pouvez suivre une méthode facile développée en brisant éditorial, dans cette diapositive, vous pouvez trouver le lien pour voir la méthode. Ici, nous sommes avec notre palette de couleurs finale pas si difficile, non ? Maintenant, nous sommes prêts à passer au deuxième chapitre de notre leçon, la typographie. La conception Web est 95 pour cent de la typographie comme l'a dit Oliver Reichenstein. typographie est essentielle pour garantir la lisibilité et l'accessibilité, et pour donner à votre site un équilibre graphique correct. Comme nous l'avons dit en ce qui concerne les couleurs, l'utilisation de plus de trois polices de caractères peut rendre votre application ou votre site Web occupé et non structuré. Il est préférable de limiter le nombre de familles de polices, deux, c'est beaucoup, une est souvent suffisante. Pour créer un rythme lors de la sélection de la typographie, commencez par deux polices très différentes, car le contraste et les différences créent un équilibre. Enfin, soyez conscient de choisir la taille de police appropriée avec n'importe quelle méthode que vous préférez, mais rappelez-vous que moins de 14 dimensions de points pourraient devenir difficiles à lire. En règle générale, rappelez-vous que le corps du texte est l'élément le plus commun dans un produit, c'est ce que tous vos utilisateurs verront et expérimenteront. En conséquence, l'aspect et la sensation de vos textes corporels auront le plus grand impact sur la qualité de votre design. Comme nous l'avons fait avec les couleurs, commençons par les références que nous avons trouvées. Assurez-vous de sélectionner la police avec des lettres distinctives pour garantir la lisibilité. Il n'est pas rare en fait de trouver des polices de caractères avec des formes de lettres confuses spécifiquement avec I et L. Si nous regardons l'ancienne affiche d' expositions de Matisse, nous pouvons diriger nos recherches sur les polices. Nous pouvons, par exemple, rechercher des polices manuscrites semblables à la signature de Matisse ou sélectionner des polices Serif pour communiquer l'élégance naturelle de sa peinture. Pour créer un contraste, ce sera génial si nous sélectionnons les deux sont sans-empattement et une police Serif. Par exemple, j'ai trouvé ces polices gratuites étonnantes en ligne, cela pourrait être un bon choix car il a deux poids différents qui changent beaucoup en termes de style. La version légère me rappelle les détails Art Nouveau et Liberty, tandis que la version régulière est plus audacieuse et plus lisible. Maintenant que nous avons des couleurs et de la typographie, il est temps de penser à notre style graphique qui nous aidera à mieux structurer l'ensemble de la direction artistique du projet. Pour le moment, il n'est pas nécessaire de définir tous les styles aspect, mais il pourrait être utile de délimiter au moins le concept principal. Le style graphique est un point clé d'un design car il aide à communiquer la personnalité de la marque. Vous souvenez-vous des trois valeurs que nous avons sélectionnées au début de la leçon, chaque choix de style graphique les annoncera et les soulignera. C' est pourquoi, lorsque vous construisez une marque, vous devrez définir beaucoup d'aspects différents, de la police aux signes, boutons, en passant par les images. Tout doit être beau et cohérent. Trouver le bon style graphique est quelque chose qui vous aidera pendant tout le processus de direction artistique et de design. C' est une première exploration visuelle pour commencer à imaginer la direction que votre projet suivra. Encore une fois pour définir votre style commence à partir de ce que vous avez et ne vous limitez pas. Par exemple, vous pouvez penser à développer des motifs particuliers ou des éléments graphiques spécifiques pour vous aider à imaginer les étapes futures de votre projet. Mais il est toujours important de ne pas exagérer au début, rester simple. Rappelez-vous que vous devez penser au numérique où tout doit être prêt à être transformé. Si nous regardons à nouveau ce que nous avons recueilli, nous pouvons isoler une seule caractéristique et commencer à imaginer des formes et des lignes qui peuvent être appliquées à notre conception. Par exemple, à partir de découpes Matisse, nous pouvons isoler des formes organiques plates à utiliser à l'intérieur du projet et des lignes indéfinies. Nous pouvons également penser à une taille photographique qui mène bien avec les choix que nous avons faits précédemment. Eh bien, nous arriverons à la fin de notre troisième leçon, pas si difficile ? Maintenant, il est temps pour vous de commencer à pratiquer ce que vous avez appris jusqu'à présent, j'ai hâte de voir vos résultats. Restez à l'écoute et rendez-vous à notre prochaine leçon. 5. Retrouvez-le en ligne: Salut tout le monde et bienvenue à notre leçon numéro 4. Préparez-vous et fixez votre ceinture de sécurité. Celui-ci sera très excitant. Nous sommes enfin en train de sauter dans le monde de l'interface utilisateur. Comme nous le faisons toujours, afin de suivre un processus étape par étape, la première partie de la leçon portera sur une introduction de base sur signification réelle de l'assurance-chômage et sur de très bonnes études de cas. La deuxième partie au lieu de cela, sera entièrement dédiée au développement de notre projet. Comme je l'ai déjà mentionné, comprendre ce que signifie réellement le terme « interface utilisateur » est l'un des principaux objectifs de la leçon d'aujourd'hui. Nous savons tous comment il est devenu rapidement un terme très familier, mais soyons sûrs de l'utiliser correctement chaque fois que nous nous retrouvons à en parler. utilisation correcte de ce terme est essentielle car l'interface utilisateur est la façon dont, en tant que concepteurs, nous nous assurons de répondre aux besoins de nos clients et, en même temps, assurons une réalisation facile et intuitive des produits numériques que nous concevons. Enfin, dans cette leçon, j'aimerais que vous compreniez que même si nous concevons dans certaines limites et règles, cela ne signifie pas que nos résultats seront pires ou moins créatifs. Chaque fois que nous trouvons un bon moyen de fusionner les meilleures pratiques et les besoins en matière de branding, c'est là que nous créons de la valeur réelle. Commençons par un résumé très rapide de ce que nous avons fait ensemble au cours de la troisième leçon, le style de notre identité numérique en termes de couleurs, typographie et d'éléments graphiques. Nous avons également recueilli quelques références photographiques. Si vous le souhaitez, vous pouvez collecter tous les matériaux dans une planche et le garder à portée de main pendant cette leçon. Nous avons vraiment tout ce dont nous avons besoin pour commencer, alors allons découvrir l'interface utilisateur. Qu' est-ce que l'interface utilisateur et pourquoi est-il si important de construire une identité numérique ? conception de l'interface utilisateur est le processus de fabrication d' interfaces numériques avec un accent sur l'apparence ou le style. L' objectif du concepteur de créer des conceptions utilisateur trouvera facile à utiliser et agréable. C' est exactement ce dont nous avons besoin. Pour rendre les choses encore plus claires, vous pouvez voir ici un graphique simple à partir duquel vous pouvez comprendre la différence entre l'interface utilisateur et la conception UX. Ces termes sont souvent confus, mais comme vous pouvez le voir, la différence est tout à fait visible. interface utilisateur dans UX est ce dont nous avons besoin pour définir spécifiquement l'aspect et la sensation résultant de notre conception. Si nous voulons être encore plus précis, il y a aussi plus petite partie de l'interface utilisateur appelée, l'interface utilisateur graphique, qui concerne tout ce qui concerne la perception visuelle. parlant d'une approche plus pratique, nous pourrions dire que l'interface utilisateur peut effectivement impliquer un grand nombre de ces éléments. Nous devrons construire un site web. Mais pour ne pas vous accabler avec trop d'informations, je vais m'en tenir à ces trois. fois parce qu'ils sont les plus utilisés et les plus connus et parce qu'ils nous permettent de nous amuser tout en pensant à la façon de les concevoir. Cependant, nous pourrions définir des règles d'or avant commencer à examiner en profondeur les boutons, les icônes et les formes. N' oubliez pas d'être cohérent dans ce que vous concevez. Si vous pensez qu'un comportement particulier correspond à votre objectif, respectez-y. L' utilisateur vous remerciera car il sera en mesure de trouver tout ce dont il a besoin sans que quelqu'un explique où le chercher. Commençons notre analyse à partir des boutons. La première chose que vous devez savoir est qu'ils doivent différer des autres éléments de la page, sorte qu'ils peuvent être facilement remarqués, mémorisés et utilisés. Dans de nombreux sites Web, qu'ils soient commerciaux, institutionnels ou informatifs, les boutons sont pour différentes raisons leur point de destination de l'utilisateur. Ils symbolisent la réalisation de la tâche de l'utilisateur. C' est pourquoi ils doivent être reconnaissables, faciles à trouver et explicatifs. À mon avis, une marque qui utilise réellement des boutons de la manière la plus claire possible est Spotify. Mais avant de vous montrer la diapositive suivante, j'aimerais faire une expérience ensemble. Essayez de penser à votre tableau de bord Spotify. Quelle est la première chose qui vous vient à l'esprit ? On se souvient de l'attention de tout le monde à première vue est évidemment la différence entre le fond sombre et les boutons verts. Y a-t-il un meilleur moyen de faire remarquer les choses ? Peut-être que ce n'est pas toujours si facile d'être aussi explicite avec des boutons. Cela dépend vraiment des éléments de notre identité numérique. Dans d'autres cas, les icônes, peuvent nous aider. Les icônes sont un véhicule très important pour votre identité numérique. Ils vous aident à construire l'imaginaire autour de votre marque. Vous pouvez les utiliser pour renforcer sa caractéristique visuelle et pour soutenir les utilisateurs pendant qu'ils naviguent sur votre site Web. Enfin, n' oubliez pas qu'ils sont aussi un outil incroyable qui vous permet d' aller au-delà des barrières culturelles et de parler à n'importe qui. Ici, nous pouvons voir un bon exemple de renforcement de l'identité à travers les icônes. Uber déclare que le design de leurs icônes est inspiré par le transport. Voici une vidéo rapide montrant la grille dans laquelle les gens d'Uber ont conçu leur système d'icônes murales. Comme nous le verrons dans la deuxième partie de cette leçon, l'utilisation d'une grille est un excellent moyen d'assurer la cohérence entre les compositions graphiques des différentes icônes. Voici un aperçu rapide de leur système d'icônes. Comme vous pouvez le voir, ils peuvent immédiatement être reconnus comme faisant partie du même univers visuel. Ils ont des traits cohérents, des détails équilibrés et surtout, il y a immédiatement accrocheur et un véritable guide pour l'utilisateur. Vous ne les comprendrez pas par hasard. Le troisième et dernier aspect que j'aimerais analyser avec vous, est celui qui pourrait peut-être être caché à première vue, mais qui révélera son importance stratégique lorsque vous analysez en profondeur un design bien fait. Nous parlons de formes. Les formes sont très intéressantes à considérer, non seulement du point de vue de la cohérence, mais aussi parce qu'elles ont le pouvoir de transmettre un sens réel en termes de communication et d'expression. Comme les icônes, les formes peuvent parler. Voici un exemple d'application : Sanctuaire, conçu selon une utilisation cohérente des formes. Nous pouvons voir comment les angles sont la base de nombreux éléments d'interface utilisateur dans l'application. En commençant par les icônes, les boutons, les bords et d'autres petites gemmes, vous pouvez trouver dispersés dans toute la mise en page. Spotify peut également fournir une bonne étude de cas quand il s'agit de formes. Les gens de Spotify ont pris une caractéristique visuelle de la phase de type circulaire comme point de départ. Je pense que c'est une approche super intelligente pour assurer un excellent résultat de l'interface utilisateur. Ici, nous pouvons voir comment ils ont pris des motifs graphiques récurrents pour les lettres et les feuilles, et les ont traduits dans la conception du système d'icônes murales. Les mêmes bords, les mêmes angles, le même aspect et la même sensation d'ensemble. Après tous ces excellents exemples, je pense que nous sommes vraiment inspirés. Qu' en est-il de commencer par la base de l'interface utilisateur de notre projet ? Dans cette section, je vais vous montrer comment j' ai trouvé mes résultats en termes d'icônes, de boutons et de formes. J' aimerais que vous preniez cette considération telle quelle et généralement des guides pour votre propre projet, même si le look global et le sentiment que vous choisissez est très différent du mien. Commençons par les icônes ; pour commencer à construire le système, nous allons mettre en place une grille de 24 pixels par 24 pixels. Ce sera votre terrain de jeu design. Dans la grille, définissons une zone de sécurité de 20 par 20 pixels. C' est le domaine dans lequel vous êtes les conceptions principales prendront forme. Je recommande seulement d'intégrer votre grille avec d'autres éléments. Je parle de guides, verticaux, horizontaux et diagonaux, et d'autres formes géométriques qui créent une interaction utile qui peut devenir des traits distinctifs pour vos icônes. Voici ma première icône. En suivant la grille, j'ai utilisé la forme ronde comme bord principal. Je conçois avec un angle de 45 degrés et essaie, manière générale, de respecter les règles que j'ai mises en place dans les étapes précédentes. En ce qui concerne l'aspect graphique, je choisis un trait épais et des lignes douces qui, comme nous le verrons, correspondent à mes formes graphiques. Petit indice, comme vous pouvez le voir, l'apparence et la sensation et conséquemment, ce que les icônes communiquent, peut être très différent avec juste un léger changement de certains paramètres, comme par exemple, course. C' est pourquoi il est si important de choisir soigneusement votre style d'icône. Pour compléter le design, je choisis parmi ma palette de couleurs, les tons appropriés pour les différentes parties de mon icône et comme une touche finale embrasser et mettre en évidence encore plus les valeurs que je reconnais le travail Matisse. Tu te souviens de la troisième leçon ? J' ai décidé de donner une touche floue à la zone colorée de mon dessin en utilisant l'effet fisheye d'Adobe Illustrator. Ici, vous pouvez voir d'autres exemples de mon système d'icônes. Pour correspondre au style que j'ai choisi pour mes icônes, je vais avec des coins arrondis et un look et un toucher doux, aussi pour les boutons. Dans Adobe XD, j'ai sélectionné un angle de rayon de 35 degrés pour tous les différents boutons. Quant aux formes pour améliorer encore plus l'utilisation d'éléments arrondis plus doux, j'ai décidé de faire de ce style graphique un motif déterminant à partir de la page d'accueil de mon site web, rendant visible dans de nombreux modules différents le long de la page. Par exemple, ici vous pouvez voir comment j'ai décidé d'intégrer mes formes dans le module de calendrier. Une astuce agréable et facile, mais très utile pour renforcer mon identité numérique. Nous voilà les gars, à la fin de cette leçon très intense. J' ai hâte de voir vos résultats téléchargés et de vous rencontrer dans le prochain chapitre. 6. Dans la flux: Salut tout le monde. Bienvenue à notre nouvelle leçon. Dans les diapositives suivantes, nous allons parler de la façon d'identifier les comportements des utilisateurs afin de construire un parcours utilisateur parfait. Nous allons découvrir ce que nous entendons par design centré sur l'humain et comment cela fonctionne. Nous définirons ensuite notre stéréotype cible, que nous appellerons notre personnalité. Définir à la fin de notre leçon notre architecture de site web. Nous pouvons considérer la structure du site comme son squelette et nous devons suivre un processus étape par étape pour la définir. Dans cette leçon, nous allons parler de trois de ces étapes nécessaires. abord, définir les objectifs de notre site Web afin de définir ce que nous faisons et pourquoi. Deuxièmement, établir une cible qui identifiera pour qui nous concevons. Troisièmement, comprendre le parcours, le chemin que l'utilisateur fera pour atteindre ses objectifs personnels que nous avons fait sur notre site Web. Tout d'abord, commençons par la définition de la conception centrée sur l'homme. design centré sur l'humain est la pratique qui place l'utilisateur au centre du processus de conception comme son caractère principal, toujours en tenant compte de ses besoins, cachés ou non, de ses désirs, objectifs et problèmes. Comme je l'ai déjà dit, pour appliquer la conception centrée sur l'homme, nous avons besoin de connaître notre utilisateur et donc de l'étudier. Pour y parvenir, nous avons besoin de la recherche dite des utilisateurs, qui pourrait se faire selon une approche quantitative ou qualitative. L' approche quantitative est basée sur les chiffres, généralement les gens lisent les rapports, recueillent et analysent les données. L' approche qualitative, au contraire, est basée sur un nombre réduit d'utilisateurs, mais elle va généralement plus loin grâce à des entretiens spécifiques et observation directe et à l'aide d'ateliers et de rencontres. Néanmoins, il peut arriver parfois de se trouver sans suffisamment de temps ou de ressources pour trouver de vraies personnes à interviewer. Dans ces cas, pour garantir les résultats de nos recherches, nous pouvons faire un exercice d'imagination. Nous pouvons commencer par définir une série de questions pour mieux savoir pour qui nous concevons et quel est l'objectif final de notre site Web. Au début, il est préférable d'étudier différents utilisateurs afin diversifier les réponses et de donner un plus large éventail de résultats possibles. Par exemple, pour le site Matisse, je peux imaginer que l'utilisateur pourrait être un collectionneur, un critique d'art moderne, un étudiant, ou tout simplement un amateur d'art. Deuxièmement, nous pouvons nous demander pourquoi ces gens s'intéressent à l'art moderne. En nous donnant une réponse, ils porteront tous une perspective différente. Pour donner un exemple, le collectionneur s'approche du marché de l'art contemporain pour faire un investissement économique, tandis que l'étudiant doit aller plus loin dans la matière en raison des besoins éducatifs. En suivant cette méthode, nous pouvons continuer à poser des questions et essayer d'y répondre pour mieux connaître nos utilisateurs. Par exemple, nous pouvons demander où ils entendent parler de Matisse, ou ce qu'ils cherchent et surtout pourquoi ils ont besoin de découvrir Matisse. Cette question est particulièrement importante pour comprendre dans quelle mesure Matisse est différent des autres peintres dans notre taille d'utilisateur. Pour le prochain exercice, nous allons choisir l'un des personnages qui ont répondu à nos questions et nous allons essayer de construire un monde réel autour de lui, donc, nous allons transformer un utilisateur générique en une vraie personne armée de ses besoins et objectifs, nous allons construire une personnalité de lui. Pour définir ma personnalité, je choisis le critique. J' imagine lui donner un visage et un âge pour la faire parler et j'ai ajouté quelques citations à son profil. Pour mieux la comprendre, je définit ses besoins et ses objectifs rationnels et émotionnels. Elle doit écrire quelques articles pour un journal local, mais elle rêve de découvrir un nouvel art Avanguardia et d'être considérée comme la meilleure critique de tous les temps. Maintenant que nous avons clairement défini notre personnalité, nous pouvons commencer à créer votre parcours client, guider dans le chemin qu'elle suivra à l'intérieur du site Web pour atteindre les informations dont elle a besoin et atteindre ses objectifs finaux. Pour créer un parcours client correct, nous pouvons imaginer diviser une chronologie en différents moments et corriger certains points douloureux à l'intérieur. Les points de douleur sont des moments difficiles pour l'utilisateur où nous, en tant que concepteurs, pouvons agir afin de résoudre les problèmes. C' est essentiellement la raison pour laquelle, à partir d'un parcours utilisateur, nous serons en mesure d'obtenir une liste complète des exigences pour notre site Web. Ceci est un exemple de la façon de structurer un parcours client. Comme vous pouvez le voir, chaque ligne représente un sujet différent lié à l'utilisateur qui doit être rempli. Par exemple, j'ai sélectionné pour Camila, cinq moments différents au cours de son voyage. Dans chacun, j'ai essayé d'imaginer une pensée et des émotions possibles et j'ai utilisé emojis pour avoir une réaction plus définie visuellement. Comme vous pouvez le voir dans le moment où elle lit des articles et des publications, nos emoji expriment confusion, cela pourrait être considéré à un point douloureux et devient donc une excellente occasion pour nous de réfléchir à une façon de faire son voyage plus facile. Lorsque nous concevrons notre site Web, nous nous soucions de donner des informations en mots-clés de la manière la plus simple et la plus claire possible. Pour en arriver à une conclusion avec nos recherches sur les utilisateurs, nous avons un dernier exercice à faire, c'est ce qu'on appelle la déclaration unique. Le caractère unique est de loin le test le plus puissant pour définir une position stratégique. marques ont besoin d'un positionnement solide parce que les clients ont des préférences, si vous ne vous démarquez pas, vous les perdez. Pour gagner le jeu de positionnement, vous devez répondre à une simple question, qu'est-ce qui fait de vous le seul ? Pour notre site de Matisse, la déclaration unique sonnera comme ceci  : « Le site de Matisse sera le seul portfolio en ligne qui suggère et rapporte à des sujets de Matisse pour les conservateurs qui veulent écrire quelque chose d'intelligent. » À ce stade de la leçon, nous avons assez connu sur notre utilisateur final et nos objectifs, il est temps de structurer l'expérience de notre site Web. La discipline, la structure, c'est ce qu'on appelle la conception d'interaction. Parallèlement, nous aurons également besoin d'une autre technique clé, appelée l'architecture de l'information. conceptions d'interaction tentent de définir les pensées et les comportements possibles des utilisateurs, ainsi que la façon dont le système y répondra. Plus précisément, la conception d'interaction utilise architecture d' information pour représenter et visualiser les subdivisions, les groupes et les relations existant dans le système de site Web. L' architecture de l'information, également connue sous le nom d'IA, définit le squelette du site Web qui nous montre les différentes sections qui le divisent. Dans certains cas où nous faisons face à un système plus complexe, cela nous aide à développer un flux utilisateur. Pour les flux, nous entendons les livrables qui visualisent le chemin complet que les utilisateurs suivent sur l'ensemble de la solution. Il existe différents types d'architecture d'information, les plus courants sont le système hiérarchique, le système séquentiel et l'utilisation d'une matrice. Essayons d'imaginer, par exemple, l'IA de notre site Web. Ceux-ci pourraient suivre une organisation séquentielle, où les utilisateurs passent d'un sujet différent au même niveau. Au contraire, celui-ci pourrait être la visualisation du même contenu dans un diagramme hiérarchique où les utilisateurs peuvent passer étape par étape à travers le contenu pour accomplir leurs tâches. Êtes-vous prêt à construire la base de votre site Web ? Terminez l'exercice que nous avons traversé dans cette leçon et soyez prêt pour ceux à venir, attendez vous dans le chapitre suivant. 7. Fons des images: Bonjour à tous, bienvenue à notre sixième leçon. Le temps est venu de mettre en pratique ce que nous avons appris jusqu'à présent. Alors nous allons cadre métallique. Dans les diapositives suivantes, nous procéderons étape par étape comme première étape, mais nous définirons notre plan de travail Matisse. Après cela, nous verrons comment définir les modules qui vont alimenter votre page d'accueil et les placer à l'intérieur d'un filaire. Ce faisant, nous devons toujours nous souvenir notre objectif final de concevoir la page d'accueil des sites personnels de notre personnage. C' est la raison pour laquelle au cours de cette leçon, nous garderons un œil à la fois sur le design et sur le contenu. Nous verrons comment ils sont profondément liés les uns aux autres. Tout d'abord, nous devons choisir sur quelles dimensions nous voulons concevoir notre page d'accueil. Bien sûr, étant soit un site Web, il peut être vu à partir de différents appareils et il doit fonctionner pour chacun d'eux. Mais dans mon cas, pour des raisons de présentation, je vais concevoir pour un écran de bureau. Ici, vous pouvez voir les plus communs sont, ce qui est la plus grande résolution pour cette classe. Venant sur les sites mobiles, vous aurez probablement entendu parler de la première expression mobile. Mais qu'est-ce que cela signifie ? Aujourd'hui, la plupart des gens apprécient le site directement à partir de leurs téléphones. De nombreux concepteurs préfèrent esquisser d'abord pour mobile plutôt que pour les écrans de bureau et ici vous pouvez voir la résolution représentant les appareils les plus vendus et les plus populaires. Dans d'autres cas et pour certaines expériences particulières, comme celles éditoriales ou interactives. Comme par exemple, une réalité virtuelle se produire la taille de la tablette pourrait être plus approprié à la conception, je vais suggérer de télécharger la version d'essai de Xd, un logiciel sous licence par Adobe qui a été publié à nos concepteurs pour créer facilement leur mises en page. Aussi sketch est un excellent outil quand il s'agit mise en page de concepteur d'une manière rapide et super précise. L' essai de croquis est gratuit pour le premier mois. Après cela, vous pouvez payer 99$ pour votre licence personnelle. Si vous n'avez pas le temps d'apprendre un nouveau programme, Adobe Illustrator ou Photoshop pourraient également être des outils adaptés à la conception. Mais je vous suggère vivement d'apprendre dans votre croquis parce qu'ils sont vraiment intuitifs et extrêmement utiles quand il s'agit de numérique. Alors les gars, allons-y avec notre projet de classe. Construisons un filaire. En bref, nous pourrions dire que le filaire est le squelette de notre page d'accueil qui recueille et organise tous les éléments de notre mise en page. La première chose à faire pour la construire est de revenir à notre architecture d'information et de la garder à l'esprit lors de la conception. Par exemple, si l'on pense à Matisse et à l'objectif final de son site, qui est de montrer son travail et ce sont de la poésie. Probablement, nous allons utiliser de grandes images, beaucoup de signes graphiques et de gros textes. Tout d'abord, l'espace en haut de la page abritera l'en-tête. L' autre, est un élément essentiel car il permet à l'utilisateur d'atteindre chaque section du site web à chaque fois qu'ils je pourrais être variable, sont généralement conçus le maximum 100 pixel i pour une résolution de bureau. Le premier élément indispensable à l'intérieur de l'autre est le journal de la marque, qui redirige généralement vers la page d'accueil elle-même. Dans mon cas, je placerai la signature Matisse comme logo. Un autre élément nécessaire, bien sûr, est le menu ou plutôt toutes les étiquettes qui relient aux différentes sections de notre site Web. En ce moment, en particulier, dans lequel les médias sociaux jouent un rôle si important dans la communication. Permettez-moi de vous suggérer de placer à l'intérieur, il y a aussi quelques icônes sociales. Ils doivent être très visibles sur votre site Web. En les plaçant à l'intérieur, il pourrait y avoir une option valide. Dans mon cas, ces icônes seront directement liées au réseau social de Matisse. Au-dessus de l'autre, nous pourrions également fournir un espace pour une diapositive commerciale dans laquelle informer l'utilisateur, par exemple, sur les nouvelles ou les cieux à venir. Habituellement, l'espace utilise le site commercial pour informer les clients sur les services de livraison ou les offres spéciales. Ok, maintenant il est temps de penser à la première grande zone visible de notre site Web. Puisque celui-ci sera le premier contenu que votre utilisateur verra débarquer sur le site Web, il doit être gras. Invitez l'utilisateur à continuer le défilement et à découvrir d'autres contenus. Pour cette raison, vous pouvez généralement trouver des vidéos, grandes images ou un carrousel d'images. C' est le moment de vendre. Quant à la copie, pensez à un titre remarquable. Chaque membre doit toujours ajouter un appel à l'action. Si l'utilisateur ne fait pas défiler, c'est parce qu'il veut cliquer. Dans le second rouleau, nous présenterons le personnage, dans mon cas, Matisse. N' exagérez pas les mots. L' essentiel est que les gens n'aiment pas lire quelques mots, mais bien pensé serait suffisant pour l'utilisateur comprenne rapidement de quoi nous parlons. Dans cette section, j'ai également décidé d'économiser de l'espace pour le nuage d'attaque. Cela pourrait être utile si vous voulez donner à l'utilisateur la chance atteindre immédiatement ce qui est à la recherche et en même temps, comprendre en un coup d'œil ce qu'est l'art de Matisse. Après avoir été attrayant et informatif avec notre première section, il est temps d'afficher notre contenu réel avec une série de modules disposés l'écran de colonne de Chu interne. Je vais montrer un exemple remarquable du travail de Matisse. Comme vous pouvez le voir, chaque module est composé d'une image, d' un texte avec le titre du projet et une courte description et de quelques textes. Ces modules sont potentiellement répliquables sans fin. Mais laissez-moi suggérer encore une fois de ne pas exagérer l'attention des gens est très éphémère. La bonne chose est que si l'utilisateur a fait défiler votre site Web jusqu'à ce point de la page, il va probablement continuer jusqu'à la fin et s'il fait défiler jusqu'à la fin, il voudra probablement visiter la prochaine exposition Matisse. C' est pourquoi placer leur module de calendrier à ce point de la page, pourrait être un choix intelligent à la toute fin du site, essayez de ne pas perdre l'attention de l'utilisateur. Je suggère de lui donner un aperçu rapide de l'univers des médias sociaux ainsi qu'un résumé de l'autre, afin qu'il puisse continuer à découvrir d'autres sections de votre site Web. N' oubliez pas d'économiser de l'espace dans le pied de page pour les infos légales plus anciennes, et maintenant il est temps de remplir ce filaire. Cela signifie que dans les diapositives suivantes, nous allons voir comment intégrer le contenu en fonction des décisions que nous avons déjà à prendre en termes de style graphique et de look and feel. Si vous vous souvenez, au cours des quatre leçons, nous avons rassemblé tous nos éléments visuels dans une planche. Ce que vous voyez ici, c'est à moi, lié à Matisse. J' ai deux téléphones différents. En termes de taille et de style une grande palette de couleurs avec deux gris différents, formes irrégulières et quelques images avec la lumière naturelle et l'atmosphère romantique et oui, c' est mon remplir la page. Quant à l'additif, j'ai décidé d'aller avec une solution transparente parce que je préfère voir ma merveilleuse image en plein écran. J' ai choisi cette image particulière pour exprimer la puissance de l'art Matisse, grâce à sa couleur et à sa composition, et en raison de sa complexité, j'ai besoin de titres, de textes et d'appels à l'action pour se démarquer clairement. C' est pourquoi je choisis le blanc pour les textes et le gris foncé pour les boutons. Comme vous vous en souvenez peut-être, mes boutons ont des coins arrondis pour annoncer un jeu de Matisse. C' est mon deuxième défilement où l'utilisateur peut trouver une introduction sur Matisse. Pour des raisons visuelles, j'ai décidé de donner plus d'espace pour détecter les nuages. Comme vous pouvez le voir derrière tout le contenu de la page, j'ai décidé de placer les formes irrégulières caractérisant le style Mattise, quant aux faits saillants du travail, j'ai choisi d'utiliser différents types de photographie pour équilibrer le récit. Par exemple, pour les vitraux, j'ai sélectionné une photographie, un intérieur y pour la lithographie, j'utilise directement une image d'auteur. Pour le détail de la gerbe. Juste pour faire un autre exemple. J' utilise une photographie qui a été prise lors d'une exposition. Comme vous pouvez le voir, je choisis d'utiliser les icônes que j'ai conçues, les Aztèques. Ces mêmes icônes que vous pouvez trouver dans la bande [inaudible] juste au-dessous de l'autre. Afin de ne pas perdre le lien avec les sections précédentes, j'ai décidé de mettre mes formes graphiques également à l'intérieur du module calendrier des expositions. Dans le dernier module, nous trouvons les flux sociaux Matisse dans lesquels il pourrait y avoir un mélange de photographies, expositions et d'œuvres d'art et au bas de la page, il y a le pied de page avec un fond gris foncé le différencier de l'explosion de couleur de la page d'accueil. Dans mon cas, j'ai décidé de mettre en évidence le module d'abonnement à la newsletter. Plus nous pouvons recueillir d'adeptes, plus notre message sera diffusé dans le monde entier et c'est tout pour cette leçon, gars. Qu'en pensez-vous ? Êtes-vous prêt à construire la page d'accueil de votre personnage ? J' ai hâte de voir vos œuvres. N' oubliez pas de laisser quelques commentaires si vous aimez cette leçon ou si vous avez juste des questions, n'hésitez pas à me contacter et à télécharger votre travail. Rendez-vous dans le chapitre suivant. 8. Animation: Salut les gars, nous voilà. Voici notre leçon numéro 7 et puisque nous approchons de la fin de la classe, il est temps d'ajouter quelques touches à la belle page d'accueil que nous avons conçue. Oui, nous allons parler des animations et comment elles vont donner un coup de pouce aux éléments de l'interface utilisateur sur notre page. Peut-être qu'à la fin, ce sera quelque chose de vraiment simple, mais croyez-moi, ce sera suffisant pour améliorer votre expérience utilisateur. Cette leçon est également de montrer et de prouver que le travail des designers ne se termine pas avec la mise en page. Notre mission est de veiller à ce que la marque soit perçue aussi pour ces petits détails mais significatifs. Tous réunis, peuvent être un moyen supplémentaire d'atteindre votre public. Mais ces détails sont également nécessaires pour les utilisateurs car ils engagent un dialogue avec eux et rendent leur expérience numérique claire et facile, mais pas exceptionnellement ou si drôle et gratifiante. Bien sûr, même si celui-ci pourrait être une partie passionnante du travail, il est important de ne pas submerger l'utilisateur. Donc, n'ajoutez pas de tonnes d'effets ou d'animations super compliquées. Rappelez-vous toujours que moins, c'est plus. Commençons par la base. Dans les diapositives suivantes, nous allons voir quelques définitions essentielles des micro-interactions et des rétroactions d'action, apprenant comment elles fonctionneront de façon substantielle. Pour être clair dès le début, dans ce diagramme, nous trouvons une définition de la différence entre eux. micro-interactions sont déclenchées par une action ou par une modification de l'état du système. Les retours d'action sont une réponse à ce déclencheur, qui sont visuellement communiqués à l'utilisateur, générant ainsi un cycle virtuel. De plus, des retours d'information sont nécessaires pour tenir les utilisateurs informés, leur permettant d'être sûrs de ce qui se passe à un moment précis au cours d'une action. Même si vous ne le réalisez pas, plupart du temps tous les produits numériques sont remplis de micro interactions. Si vous ne les remarquez pas en utilisant une application, eh bien, cela pourrait être méchant qu'ils sont bons. Avant de poursuivre, voici un bref résumé des recommandations et des pratiques exemplaires que nous avons mentionnées dans les diapositives précédentes. Tout en pensant aux animations, n'oubliez pas qu'il est très important de créer des habitudes afin que l'utilisateur puisse facilement s'habituer à l'expérience numérique qu'il vit. N' exagérez pas les animations de redondance, mais assurez-vous que les utilisateurs communiquent avec l'interface et la comprennent. Eh bien, après cette recommandation, il est maintenant temps de voir quelques bons exemples d'interactions, d'animation et de commentaires. J' espère qu'ils vous feront comprendre comment même la plus petite torsion pourrait faire une grande différence en termes de succès de la marque numérique. Nous voilà à nouveau. Voici la liste que nous avons vue dans la leçon 4. Lorsque nous avons rencontré nos éléments d'interface utilisateur pour la première fois, comme vous pouvez l'imaginer, chacun d'eux pourrait avoir son propre effet animé qui peut améliorer ses performances et le rendre clair pour l'utilisateur. Mais bien sûr, comme nous avons peu de temps, nous allons passer rapidement par un aperçu. À partir de l'animation la plus simple et la plus courante, vous pouvez trouver des animations complexes qui pourraient aider l'utilisateur à percevoir votre marque dans son intégralité. C' est pourquoi je choisis un exemple à vous montrer, qui sont les plus liés aux éléments que nous avons déjà conçus pendant notre classe. Je suis sûr qu'ils vous expliqueront comment cette animation peut réellement contribuer à construire votre identité numérique, donnant des significations supplémentaires à vos créations. Commençons par les icônes. Dans la leçon numéro 4, nous avons vu comment changer certains paramètres lors de la conception, nous pouvons également faire changer les valeurs qu'ils communiquent. La même chose peut être dite pour une animation car nous pouvons les concevoir en fonction du positionnement de notre marque. Par exemple, nous pouvons percevoir à première vue la différence entre les icônes en haut et celles en bas de cette page. Alors que les premiers sont clairs, les derniers sont doux et fluides. Ici, à coup sûr, ceux du sommet, donnent un sentiment d'enjouement immédiat, tandis que ceux du bas semblent courir avant de s'exprimer pleinement une fois qu'ils sont remplis, donnant une perception plus dynamique. Oui, on peut dire tout à fait la même chose aussi pour les boutons. Dans cette diapositive, par exemple, tandis que le contour est très rassurant, guidant l'utilisateur jusqu'à ce que l'action soit faite, la seconde est directe et informative aussi avec l'aide de la couleur verte à la fin. Parce que oui, les commentaires peuvent également être donnés par les couleurs. Voici deux exemples intéressants dans lesquels les interactions sont visuellement liées à ce qu'elles signifient réellement de manière littérale, communiquant leurs valeurs avec des formes et des couleurs. En ce qui concerne les champs de texte, nous pouvons dire qu'il existe différentes façons de les stimuler en donnant, par exemple, une touche plus formelle ou informelle à l'action de remplir une simple entrée de texte. Mais comme nous le disions auparavant, non seulement des micro-interactions peuvent être appliquées pour fournir aux utilisateurs une perception plus précise de notre marque. Certaines animations peuvent être directement liées à notre identité numérique, comme celles concernant le logo et d'autres éléments de page. Par exemple, parlons du logo. Nous le considérons tous comme l'expression la plus évidente de notre marque. Mais pensons-nous à l'animer puisque nous agissons sur un environnement numérique ? Voici deux animations de logo différentes. Comme nous l'avons vu pour les icônes et les boutons aussi la façon dont nous animons le logo peut exprimer les valeurs de notre marque. Dans ce cas ci-dessus, alors que Mailchimp est plus immédiat et compacté, logo d' Ubers est rempli ligne après ligne. Il y a vraiment beaucoup d'autres choses que nous pouvons faire lorsque nous parlons d'animations pour les éléments de l'interface utilisateur. Regardez par exemple le premier port de vue du site Hello Mondays. Tout dans la partie discours, nous pouvons voir en plus de l'illustration principale, l'animation de texte et l'ouverture de la barre latérale avec l'interaction suivante sur les voix de menu. Comme vous pouvez le voir, tout est très lisse et plus doux et adhère à une palette de couleurs noir et blanc. Voici un autre exemple montrant comment la simplicité peut également fournir beaucoup d'informations. Jetez un oeil à l'animation du menu. Lorsque vous commandez sur une étiquette, vous pouvez immédiatement avoir un aperçu de ce que vous verrez dans cette section, qui est très utile pour amener l'utilisateur juste où il veut aller. Maintenant, c'est notre tour. Je sais que quand on parle d'animations, tout le monde ne se sent pas à l'aise. Ils semblent toujours difficiles à faire. Eh bien, allons approfondir ça pour voir ce qu'on peut faire ensemble. Tout d'abord, rappelez-vous qu'une grande partie de l'animation que vous voyez sur un site Web sont faites directement avec des paramètres de modification de code avec CSS. Cela signifie que notre rôle en tant que concepteurs est de fournir aux développeurs une idée claire de ce que nous voulons faire. Nous pouvons leur donner des liens directs vers des références en ligne que nous aimons ou prototype quelque chose. Pour cette deuxième option, nous avons différents outils que nous pouvons utiliser. Adobe After Effect est excellent car il nous permet d'être très précis en fournissant une maquette de ce que nous aimerions voir en ligne. Pour les animations les plus simples sont, par exemple, gifs. Nous pouvons également utiliser Adobe Photoshop. Mais, pour couvrir un large éventail d'animations, économisant beaucoup de temps, principe sera le meilleur. Pas si immédiat, mais sûrement en vaut la peine. J' ai utilisé Adobe After Effect pour créer deux exemples d'animation que j'aimerais voir sur mon site Matisse. Le premier est l'appel à des actions sur l'effet. Pour enregistrer l'enjouement et les lignes imprécises, nous reconnaissons qu'en tant qu'emblématique du style Matisse, j'ai décidé d'utiliser une transition douce pour faire en sorte que le bouton réponde à mon action. Je voulais aussi animer les icônes. Nous voyons à l'intérieur des boutons de technologie pour ces éléments, je choisis de souligner le champ de couleur inprécis, en lui donnant comme mouvement déplacé quand je passe sur les boutons. Qu' en est-il des éléments sur votre page d'accueil ? Lequel et comment voulez-vous les animer ? N' oubliez pas de télécharger vos résultats sur les commentaires. Alors nous sommes les gars. C' est la fin de cette leçon. Maintenant, viens avec moi à la prochaine. Je vous donne quelques bonnes pratiques pour mener à bien notre projet. 9. Meilleures pratiques: Bonjour, tout le monde. Bienvenue dans cette nouvelle leçon. Puisque notre travail est fait à ce stade, dans les diapositives suivantes, je vous donne quelques conseils utiles pour la gestion globale du projet. Comme vous pouvez le voir, ils constitueront essentiellement un résumé des bonnes pratiques. Pour être précis, nous comprendrons ce que signifie le design avec la perfection des pixels, et comment construire des lignes directrices graphiques et photographiques. Chacun de ces points est nécessaire pour garantir la cohérence de votre site Web. À ce stade de la classe, nous parlons des prochaines étapes qui vous permettront , à vous ou à d'autres designers de votre équipe, de poursuivre l'excellent travail que vous avez fait, et de concevoir de nouvelles pages du même site web. C' est pourquoi nous avons besoin de règles à suivre avec des directives graphiques et photographiques claires. En fait, en regardant ce que nous avons fait, il est facile de comprendre que nous en sommes probablement au début de notre travail. Nous devons compléter notre site Web, concevant les pages restantes qui doivent être cohérentes avec la page d'accueil et une partie du même système. Bien sûr, la première règle que nous devons suivre est la perfection des pixels. Cela n'est pas directement lié à la cohérence, mais cela nous permettra de travailler avec une base de conception solide et d'éviter les problèmes futurs. Comme vous le savez peut-être déjà, un pixel est le plus petit élément contrôlable d'une image représentée à l'écran avec 1 920 pixels par 1 080 pixels. Par exemple, nous pouvons avoir 1 080 colonnes et 1 920 lignes de pixels. Par conséquent, le nombre total de pixels sera de 2 073 600 pixels à l'écran. Suivre une méthode de pixel parfait signifie avoir des exportations plus nettes et des œuvres d'art plus précises. Pixel se comporte comme une grille super minuscule et nous devons nous en tenir à cette grille pour nous assurer que notre design sera parfait. Ce que nous devons faire pour être parfait en pixels, c'est d' abord de garder un œil sur les chiffres. Notre dimension extérieure et ceux de tous les éléments que nous allons concevoir sur la page doivent être pleins sans comas. Les icônes doivent également être conçues à l'intérieur d'une grille de pixels précise et ne se chevauchent pas sur les bordures. Par exemple, en regardant en arrière nos icônes, nous pouvons voir que nous avons déjà conçu à l'intérieur de la grille. Nous définissons des guides de géométrie et les utilisons pour dessiner nos icônes, en respectant les limites et les directions. Notre méthode de remplissage chevauche la grille, mais cela peut être considéré comme un choix de site graphique, et cela n'interfère pas avec la méthode que nous suivons pour concevoir nos icônes. Maintenant, que nous savons comment assurer une grande courtoisie designer, allons comprendre comment fusionner dans un guide de style graphique toutes les règles dont nous avons besoin pour concevoir notre site Web. Si vous regardez des entreprises comme Dropbox, Google et Spotify, vous remarquerez que chacune d'entre elles a sa propre esthétique unique. Sur tous leurs produits, il y a un fort sentiment de cohérence et d'uniformité. Cela arrive aussi parce qu'ils ont des directives claires à respecter, mais qu'est-ce qu'un guide de style exactement ? Nous pouvons le considérer comme un document résumant l'ensemble du système de conception et servant de guide, à fois pour la conception de nouveaux éléments et pour la mise en œuvre suivante. Un guide de style dans son ensemble peut avoir plusieurs sections et explorer un grand nombre de sujets, mais pour ce but de classe, je vais faire quelques exemples liés aux éléments sur lesquels nous nous sommes déjà concentrés. De toute évidence, plus vous entrez dans les détails, plus votre conception sera cohérente. Parlons par exemple, des couleurs. Dans ce guide de style, nous pouvons collecter toutes les décisions que nous avons prises précédemment en termes de palette, et définir pour quels éléments les concepteurs doivent utiliser une couleur spécifique. Par exemple, les actions de couche seront toujours affichées en gris foncé pour l'état par défaut. A pour la typographie, nous pouvons définir une liste de tailles à utiliser à travers toutes les pages. Par exemple, chaque grand titre sera sur Panamera Regular 120 point. Le corps à la place sera toujours dans Panamera Light 36 point. Pour faciliter les choses, il existe certains codes que nous pouvons utiliser pour faire référence à un usage particulier de titres. Par exemple, H1 est généralement lié aux titres primaires, H2 est quatre titres secondaires, et ainsi de suite. Pour les boutons, nous devons spécifier les dimensions et les marges, mais nous devons également définir comment ils changent en fonction de leur statut. Nous pouvons, par exemple, associer une couleur différente lorsque l'utilisateur clique dessus et définir lequel communique que le bouton peut être cliqué. Il peut également être très utile d'avoir un exemple d'interaction dans le guide de style. De cette façon, nous pouvons nous assurer que les animations étrangères seront conçues en fonction de ce style que nous avons défini pour le premier. Comme je l'ai déjà dit, ce n'est qu'un avant-goût de ce qu'un guide de style peut être, mais à partir de ces exemples, nous pouvons obtenir quelques règles d'or utiles. Tout d'abord, rappelez-vous que le guide est une sortie qui vient après le processus de conception. Résumer, par conséquent, concevoir jusqu'à ce que vous soyez satisfait, puis normalisez-le. Cela pourrait être génial si vous incluez également quelques principes de conception qui vous ont inspiré pendant le processus de travail, ainsi que quelques nouvelles études afin de permettre à d'autres concepteurs et développeurs de comprendre quand utiliser des éléments spécifiques. Maintenant, il est temps d'entrer dans le dernier chapitre de cette leçon, les lignes directrices photographiques. directives photographiques définissent le type d'images que vous et les autres concepteurs devez utiliser pour transmettre correctement la voix et l'identité de votre marque. Uber, par exemple, consacre beaucoup d'espace à la photographie à l'intérieur de ses lignes directrices, allant très loin dans les détails et considérant différentes catégories. Comme vous pouvez le voir, les gens d'Uber divisent la photographie en sous-chapitres qui sont liés à cinq sujets principaux, interactions, compositions, casting, éclairage, couleur et lieux. Chaque sous-chapitre contient des pratiques exemplaires et des recommandations pour ce sujet spécifique. De l'étude de cas d'Uber, nous pouvons apprendre beaucoup. Tout d'abord, gardez toujours votre marque au centre. Lors du choix des images, demandez-vous, suivant mes principes de marques, quelles images seront bonnes pour sa communication ? Alors n'oubliez pas de définir les types de sujets qui seront vus sur vos photos et dans quel contexte ils agiront. En troisième lieu, définir des lumières et des tons qui sont essentiels pour transmettre des émotions et des sentiments spécifiques. Essayons les catégories d'Uber sur notre site. Vous souvenez-vous des valeurs de la marque Matisse ? Nous avons dit qu'il s'agissait d'imperfections, de simplicité et de simplicité. Probablement au lieu d'afficher uniquement des œuvres d'art, nous pouvons supposer que d'autres types de contenu sont également affichés. Eh bien, compte tenu des images que nous avons déjà mises à l'intérieur de la mise en page, nous pouvons dire que nos paramètres seront ouverts dans espaces modernes avec des diapositives naturelles et chaudes. Les gens qui veulent être le centre d'attention, mais l'art de Matisse sera, donc les gens ne seront pas reconnaissables. Préférant, par exemple, les gens flous en arrière-plan. Leur interaction avec l'art sera immersive et contemplative. Pour terminer ce chapitre, voici quelques conseils supplémentaires que j'aimerais vous donner. Toujours essayé de fournir un contenu original de haute qualité. Ce sera un super plus pour votre marque et les utilisateurs le reconnaîtront. Si vous êtes sur un budget, considérez les catalogues de stock, certains d'entre eux sont librement accessibles et vous permettent de télécharger de superbes images en haute résolution. Sinon, n'oubliez pas que l' illustration peut transmettre l'identité de votre marque. Donnez-leur un style distinctif et vous êtes prêt à partir. Les gars, nous sommes maintenant à la fin de cette leçon. N' oubliez pas d'écrire quelques commentaires si vous aimez. J' espère que vous me suivrez jusqu'au prochain, qui marquera la fin de notre classe ensemble. On se voit. 10. Conseils et conclusions: Bonjour mes chers amis, nous voilà. C' est la dernière leçon de notre voyage. Je suis très triste, mais en même temps, je suis aussi sûr que vous allez appliquer tout ce nous avons appris ensemble pour concevoir quelque chose d'incroyable. Avant de nous dire au revoir, j'ai quelques conseils sur le processus de conception que j' aimerais vous donner comme conclusion de votre PAF. En fait, il est utile de savoir qu'il existe des outils et des pratiques exemplaires qui peuvent nous soutenir dans les différentes étapes du développement du projet. Dans cette leçon, nous allons voir quelques outils populaires à partager, fois avec notre équipe et le client, le développement continu de notre projet, ainsi que quelques bonnes pratiques pour exporter correctement actifs afin de permettre aux développeurs de faire leur meilleur travail. De plus, nous découvrirons également qu'il existe des règles faciles à suivre afin d'assurer un environnement de travail joyeux parmi les membres de l'équipe. Nous devons vraiment être conscients de tout cela, simplement parce que la plupart du temps nous ne travaillerons pas seuls. Par conséquent, il est super important d'apprendre à collaborer correctement avec les différents acteurs impliqués dans notre jeu, tels que l'équipe de conception, les clients et les développeurs. Peut-être que ce ne sera pas toujours facile et amusant. Nous aurons besoin de beaucoup de temps pour apprendre à gérer un projet. Mais plus nous obtenons de l'expérience, plus nous serons en mesure de gérer des situations différentes et compliquées. Pour collaborer, la première chose à considérer est de savoir comment partager des sorties sans être trop chaotique. Dans cette section, nous allons avoir un aperçu rapide de deux des outils les plus connus que les équipes du monde entier utilisent pour partager tout ce qui concerne le design, du concept à nos tableaux, en passant commentaires et les spécifications. Cette recommandation est vraiment importante et doit toujours être gardée à l'esprit. Soyez toujours conscient qu'à la fin de la phase de conception, le travail n'est pas du tout terminé. Par exemple, vous pouvez utiliser InVision pour partager vos conceptions, qui est un service Web qui aide les concepteurs à présenter et à prototyper des produits numériques, aime les sites Web et les applications d'une manière très rapide, facile et intuitive. Le premier téléchargement est ouvert et accessible à tous, pourquoi ? Pour plus d'un projet, vous aurez besoin d'un abonnement. Lorsque vous téléchargez vos écrans, InVision les affiche d'une manière qui imite une expérience de navigation réelle. Ceux qui ont accès au projet peuvent également inspecter les différents composants de votre conception, et laisser un commentaire correct afin de maintenir un dialogue facile et direct sur le projet. InVision est très utile car il nous permet de prototyper et de partager l'aperçu des produits avec le client ou d'autres membres de l'équipe. Les clients peuvent laisser des commentaires, ce qui permet une conversation claire entre les personnes qui, souvent, ne parlent même pas le même vocabulaire. Avec InVision, vous pouvez également transformer directement vos plans de travail en spécifications de conception, et communiquer avec les développeurs sans aucun autre outil. Pour partager des sorties, vous pouvez également utiliser Zeplin, un autre excellent outil en ligne qui fonctionne aux côtés des programmes de conception les plus courants. Comme sur InVision, le premier téléchargement de projet est gratuit. Donc, vous pouvez l'essayer et comprendre pourquoi c'est si incroyable. Zeplin nous permet de télécharger, d'organiser, d'inspecter et de commenter notre conception. L' interface est super propre et ne vous laissera pas vous perdre pendant les différentes étapes de votre travail. fonctionnalité la plus étonnante de Zeplin est que vous pouvez exporter vos fichiers directement à partir du logiciel de conception, que vous utilisiez Sketch, Adobe XD, Figma ou Photoshop. Avec juste un plugin, il génère automatiquement des spécifications personnalisées que vous pouvez collecter dans des guides de style organisés. Ainsi, tous les membres de l'équipe peuvent accéder aux dernières ressources de conception et être avertis lorsque des modifications se produisent. Ce que nous avons vu jusqu'à présent, ce sont des outils qui, parmi leurs fonctionnalités, nous donnent la chance d'obtenir des actifs sans l'inconvénient de les exporter manuellement de manière singulière. Mais si vous avez besoin d'exporter vos actifs un par un, ce qui peut facilement arriver, il y a quelques choses que vous devez savoir pour le faire correctement. Une fois que vous les obtenez, rien ne vous arrêtera, et vous serez le héros des développeurs. Sommes-nous sûrs que nous savons tous ce que sont les actifs ? Par actifs, nous entendons tous les matériaux dont nous avons besoin pour mener à bien un projet. Selon la terminologie de conception et de développement Web, actifs se réfèrent généralement au contenu textuel, graphiques, aux photos, aux vidéos, aux fichiers audio et aux bases de données. Pour garantir un résultat parfait en pixels, ressources doivent être à une double résolution, car écrans rétiniens ont une densité de pixels supérieure à celle des écrans traditionnels. exportation haute définition peut transformer la vitesse de chargement de votre site Web très lourde, ce qui pourrait influencer la révision du site Web ou de l'application. Vous pouvez facilement résoudre ce problème en utilisant des outils en ligne appropriés pour redimensionner les images. Par exemple, TinyPng peut réduire le poids de vos images sans compromettre la qualité globale. Lorsque vous exportez des ressources, n'oubliez pas de sélectionner le bon format. Par exemple, SVG fonctionne pour les fichiers vectoriels tels que les icônes, mais ne peut pas fonctionner pour les images. Il est préférable de choisir un format PNG ou JPEG. Aussi le mode couleur est très important. N' oubliez pas de toujours exporter en RVB, nous travaillons pour le monde numérique. Voici la troisième partie de notre leçon, dernière et non des moindres. Comme personne ne réussit seul, on peut vous demander de signer votre ego créatif et de commencer à penser dans une perspective axée sur l'équipe. Mais pourquoi assurer un environnement de travail frais est-il si important ? Au cours de votre carrière, vous allez probablement travailler au sein d'une équipe, il est très important de garder à l'esprit que si vous êtes le grand patron ou le jeune stagiaire, vous devrez accomplir votre propre tâche de votre mieux, et compte tenu de la direction générale de l'équipe. Donc, si vous êtes en charge d'une équipe, essayez de connaître vos camarades, et quelles sont les choses qu'ils aiment faire. Rappelez-vous que chaque membre de votre équipe est un expert dans sa propre discipline. Soyez donc ouverts à leurs opinions et à leurs contributions. Soyez ce genre de personne avec qui d'autres personnes veulent travailler, veillant à ce que toute l'équipe se sente à l'aise et en sécurité pour s'exprimer. Donc, nous sommes à la fin de ce cours. J' espère que mes commentaires ont pu être utiles. Je suis là pour tout ce dont vous pourriez avoir besoin, et j'aimerais voir si vous utilisez quelque chose que nous avons appris ensemble sur un travail spécifique. Bien sûr, j'adore voir votre résultat. Alors n'ayez pas peur de me contacter, et de te voir dans le prochain cours.