Intro to UI Design : Principes de conception de l'interface utilisateur pour les concepteurs UX/UI (+ exercice de conception Figma)

1. Promo: Aujourd'hui, nous allons en apprendre davantage sur les principes de la conception de l'interface utilisateur. Lorsque nous examinons la conception d'une autre interface utilisateur, nous pouvons généralement déterminer quelle conception fonctionne le mieux. Mais lorsque vous commencez à travailler seul, ce n'est soudainement plus si facile. Je vais vous montrer ce qui fait la différence, et ensemble, nous examinerons les points suivants. hiérarchie visuelle et pourquoi est-ce la clé de tout. Comment utiliser la couleur, la taille et la forme pour créer un système portant une attention particulière à la typographie et au dimensionnement. Nous apprendrons pourquoi la simplicité l'emporte toujours. Pourquoi les espaces blancs sont un super-héros secret, et ce que les grilles et les systèmes d'espacement peuvent faire pour nous ? Je vais vous montrer comment attirer l'attention sur l'endroit où vous en avez vraiment besoin et pourquoi il est si important d'ajouter une certaine émotion pour le succès. Nous terminerons ce cours en concevant notre propre site Web de co-working à partir d'un filaire en utilisant toutes nos nouvelles compétences acquises. Ce cours est fait pour vous, si vous êtes un débutant ou un concepteur expérimenté, et que vous souhaitez approfondir vos compétences d'interface utilisateur. Il s'agit d'un cours de moonlearning.io. 2. Démystifier : Qu'est-: Veuillez noter qu'il s' agit d'un cours en deux parties. Vous pouvez donc soit regarder la partie sur les principes UX, Vous pouvez donc soit regarder la partie sur les soit celle sur les principes de l'interface utilisateur. Idéalement, vous combinez les deux. Quoi qu'il en soit, je veux m' assurer que vous êtes très clair sur les deux termes différents et sur ce que cela signifie de les combiner. Une fois que vous commencerez à plonger plus profondément dans le monde de l'interface utilisateur, vous remarquerez qu' il y a beaucoup de bruit et de discussions autour de ces termes. Ce qu'ils incluent exactement, soit l'UX ou non, et l'interface utilisateur devraient ou non être combinés en un seul terme. Permettez-moi de faire la lumière là-dessus de mon point de vue et de mon expérience. Le design UX est sans aucun doute l'endroit où vous commencerez le voyage. Que comprend la conception UX ? En bref, vous allez essayer de comprendre les schémas généraux, le comportement et les attentes. Tout cela pour créer une structure globale et un ordre de fonctionnement du produit. En conséquence, vous disposez généralement d'un squelette, d'une forme de filaires et d'organigrammes décrivant un produit ou une fonctionnalité que vous suggérez. Une autre tâche très importante de la conception UX consiste à tester et à itérer tout au long du cycle de vie d'un produit. n'y a jamais de produits finis en ligne. Alors que l'expérience utilisateur, comme le nom l'indique, tente d'améliorer l' expérience globale de l'utilisateur, conception de l'interface utilisateur traite des éléments de mise en page réels. Maintenant, l'organigramme et les filaires précédemment conçus prennent vie. Un bon concepteur d'interface utilisateur a généralement une excellente idée de ce qui se passe pendant le processus UX, et vice versa. Au cours du processus d'interface utilisateur, vous définissez ensuite les guides de style, la couleur, typographie, les composants et la mise en page générale de toutes les conceptions réactives. Vous allez probablement créer un prototype qui sera testé, c'est là que vous reconnectez à la conception UX. Tout comme nous travaillons main dans la main de l'UX à l'interface utilisateur, vous devrez faire de même de l'interface utilisateur au développement. En ce qui concerne le développement, vous entendrez parler de deux grandes parties. Développement frontal, où CSS et HTML, ce que l'on appelle le balisage est écrit. C'est ici que l'interface que nous voyons est créée. C'est ce qui nous intéresse en tant que concepteurs d'interface utilisateur. Ensuite, il y a ce que l' on appelle le back-end. C'est ici que le code est écrit. Il peut s'agir de JavaScript, Java, de Python ou de n'importe quel autre langage. Cela ne nous dérange pas vraiment en tant que designers. C'est là que se déroule toute la logique derrière les coulisses. Nous, concepteurs d'interface utilisateur, avons rarement beaucoup à voir avec cela. front-end et le back-end sont évidemment connectés, et il peut y avoir des frameworks qui traitent de front-end comme React JS. Mais tout cela peut être laissé en toute sécurité à l'équipe de développement. Vous n'avez pas besoin de coder vous-même. Vous devez cependant comprendre les exigences techniques et les principes de base de la conception frontale en tant que concepteur d'interface utilisateur. Cela vous aidera à configurer correctement vos fichiers et vos conceptions . Désormais, dans une grande entreprise ou un projet chargé, vous pouvez simplement vous occuper de la conception de l'interface utilisateur. Vous pouvez simplement configurer des designs dans Figma, et c'est tout. Cependant, vous aurez toujours des chevauchements avec conception UX ainsi que le développement, et vous devez connaître vos bases. Vous pouvez également travailler en tant que concepteur UX uniquement. Dans ce cas, vous n'effectuerez probablement aucun travail de conception. Mais vous serez occupé par la recherche, la stratégie et les tests, ainsi que par la définition de nouvelles fonctionnalités. Toutefois, vous devez toujours savoir comment les décisions de conception d' interface auront impact et une influence sur l'expérience utilisateur. Si vous travaillez dans des recherches approfondies sur les utilisateurs, vous pouvez simplement le faire en fait, mais généralement vous aurez tellement de chance et dire bonjour à un designer de temps en temps. Dans certains cas, cependant, en particulier dans les petites entreprises ou les projets indépendants, vous pouvez porter de nombreux chapeaux. Lorsque nous parlons d' UX, de conception d'interface utilisateur, c'est généralement cette zone que vous voyez en surbrillance ici. Vous commencerez probablement par des recherches, la mise en place de personas et la configuration de vos propres filaires. Vous allez ensuite traduire ces filaires en conception et les remettre au développement. La plupart des concepteurs UX et UI ont tendance à perdre un peu la partie approfondie de la conception UX. C'est vrai, mais généralement pas très important dans les petits projets simples. C'est également le domaine que je vais aborder pendant ces deux cours. Veuillez noter qu'en profondeur, la recherche UX ne fait pas partie de ce cours. Il est vrai que dans certaines offres d'emploi, le terme UX et UI sont souvent confus. Vous pouvez voir une conception UX annoncée, mais ils vous demandent de configurer n'importe quoi, des filaires à la gestion des fichiers finis. En cas de doute, suffit de dessiner ce diagramme simple ici sur une feuille de papier et de montrer à votre client ou employé potentiel où vous opérez, et assurez-vous que c'est le domaine qu'il recherche également. et pas seulement un mot à la mode qu'ils utilisaient. Aussi, soyons honnêtes, ce n'est généralement pas un processus simple où les choses sont transmises. De plus, dans la plupart des entreprises, ils n'ont même pas l'intention de le faire. Il y aura toujours beaucoup de va-et-vient, et beaucoup de discussions. C'est en fait une bonne chose car ce n'est que lorsque l'UX, l'interface utilisateur et le développement fonctionnent main dans la main, très bons produits prennent vie. N'écoutez pas les gardiens d'accès, trouvez votre passion, appréciez le chevauchement et apprenez des différents domaines du design numérique. 3. Bonjour à la mots de Gestalt Theory: Aujourd'hui, nous examinerons les principes clés de conception de l'interface utilisateur pour créer une hiérarchie et une harmonie dans nos conceptions. Les principes que je vais vous présenter sont principalement basés sur la célèbre théorie Gestalt et quelques extras pertinents. Mais commençons par le cœur de tout. Qu'est-ce que la théorie Gestalt et pourquoi est-elle toujours pertinente tant d'années plus tard ? psychologie Gestalt a été fondée au début du XXe siècle en Allemagne et Autriche par Max Wertheimer, Kurt Koffka et Wolfgang Kohler. Gestalt est un mot allemand qui signifie autant que forme ou forme. En tant que verbe, gestalten signifierait concevoir. En résumé, ce que dit la théorie Gestalt, c'est que nous percevons des modèles entiers plutôt que des composants uniques. Un ensemble de règles a été établi sur la façon dont nous percevons ces schémas. Ces règles sont vraiment statiques plus tard, par exemple, dans les années 90, d'autres ont été ajoutées par d'autres psychologues. À l'époque où la théorie de Gestalt était documentée , l'interface utilisateur utilisateur n'était pas encore vraiment une chose. C'est vraiment important à comprendre. La théorie gestalt n'est pas une tendance, mais le fondement de la façon dont nos esprits lisent et interprètent les choses. C'est donc le cœur de la conception de l'interface utilisateur. Une fois que nous avons compris ces règles sur la façon dont le cerveau humain interprète les modèles, nous pouvons jouer avec eux pour créer et structurer notre conception. Les principes que je vais vous présenter sont principalement basés sur Gestalt, mais il a également ajouté d'autres sujets et conclusions pertinents spécifiques à la conception de l'interface utilisateur. Nous examinerons les aspects suivants pour créer une hiérarchie et une harmonie dans notre mise en page. L'effet d'utilisabilité esthétique et pourquoi nous nous soucions même du design. Qu'est-ce que la hiérarchie visuelle ? La loi de Pragnanz et pourquoi la simplicité est essentielle. La loi de la similitude, de la couleur, la taille et de la forme, ainsi que le rôle qu'elles jouent dans la conception de notre interface utilisateur. Nous allons examiner de plus près le texte et toucher la taille de la cible et comment le configurer dans la conception. Nous allons parler de la loi de la proximité. Nous allons nous pencher ici sur les systèmes d'espacement et les systèmes de grille et pourquoi il est si important de les utiliser et comment les utiliser. Le droit de la région commune. Nous allons créer des sections et parler un peu d' espaces blancs et d' espacement doux dans notre disposition. Le reste de l'effet amusant. C'est vraiment important pour attirer l'attention dans votre conception sur l'endroit où vous en avez réellement besoin. La loi du destin commun. C'est vraiment important lorsque vous interagissez avec l'utilisateur pour des prédictions comportementales. Pour finir, nous allons parler d'ajouter émotion à votre design. 4. Effet de l'utilisabilité esthétique - Pourquoi même de s'inquiéter de la design ?: L' effet esthétique-utilisabilité indique essentiellement que lorsque les utilisateurs trouvent une interface visuellement agréable, ils supposent que le produit est plus utilisable. En d'autres termes, si c'est mieux, les gens pensent que cela fonctionne mieux. C'est vraiment une décision que nous prenons en quelques millisecondes. Maintenant, ce n'est pas un billet gratuit, mais il s'agit essentiellement d'un bonus de confiance que vous pouvez obtenir, puis assurez-vous de le sauvegarder. C'est également la raison pour laquelle le simple fait de colorier et d'ajouter des images à un cadre filaire bien conçu ne suffit pas. Voici un exemple le produit à gauche et à droite est exactement le même en termes de contenu et de fonctionnalités, mais ils ont un sentiment de confort et de confiance très différent. L' effet esthétique-utilisabilité montre également que les gens sont plus tolérants aux erreurs et aux problèmes mineurs lorsqu'ils traitent d'un design qu'ils trouvent esthétiquement agréable. Notez que nous ne parlons ici que de problèmes mineurs, mais vous devez savoir ce qui semble généralement positif pour vous et votre produit final peut être un obstacle tests d'utilisabilité et quelque chose à prendre compte dans les phases de recherche et d'exploration. Qu'est-ce que cela signifie pour nous ? Même si la convivialité est notre objectif principal, notre conception d'interface utilisateur doit toujours être belle pour démarrer l'utilisateur. C'est la première impression et cela les rend plus disposés à essayer notre produit dans de petites difficultés plus tolérantes UX et l'interface utilisateur doivent donc aller pair pour un produit vraiment réussi. Que diriez-vous de garder à l'esprit l'effet esthétique-utilisabilité lors des tests et des recherches ? Vos utilisateurs de test et vous-même sont susceptibles de réagir de manière biaisée, une opinion selon laquelle quelque chose est facile à utiliser n'est pas la même chose qu'il est vraiment facile à utiliser. C'est pourquoi il est si important concevoir d' abord les informations et les fonctionnalités dont vous avez besoin, comme dans une image filaire, des flux d' architecture, etc., donc fondamentalement tout votre travail UX. Sur cette base, vous allez de l'avant, brossez votre conception pour votre groupe cible de manière attrayante et esthétique, et non l'inverse. En plus de cela, vous pouvez ou plutôt devriez bien sûr tester et itérer, mais assurez-vous de commencer par le fond de teint et non le maquillage. L'esthétique assurée est un moyen d'atteindre une fin, mais pas d'objectif final. Résumons. Quand il semble mieux, les gens pensent généralement que cela fonctionne mieux. Les utilisateurs sont plus tolérants ; accent sur les erreurs mineures et non les erreurs majeures, lorsqu'ils font face à un design esthétique. C'est généralement une bonne chose, mais cela peut également entraîner distorsions de résultats lors des tests d'utilisabilité et de recherche, alors soyez conscient de cela. 5. Qu': Qu'est-ce qui fait la différence dans le design ? Quel est le secret derrière une répartition parfaite de l'espace, taille et du contraste qui nous semble si agréable ? Le cœur de tout cela est une hiérarchie visuelle fonctionnelle. hiérarchie visuelle est une méthode d'organisation des éléments de conception pour communiquer un ordre d'importance. Lorsque vous démarrez un projet, vous serez probablement bombardé d' informations importantes qui doivent être communiquées. La marque, un prix, le logo, le produit, la copie, les témoignages d'utilisateurs satisfaits, etc. Au fur et à mesure que vous continuez à les ajouter, votre page sera assez encombrante. Le problème est que de cette façon, tout ce qui se trouve sur votre page en concurrence pour attirer l'attention de l' utilisateur. Utilisez un petit tour. Imaginez que tous les éléments de la page parlent ou crient selon l' importance que vous leur avez accordée. Dans cet exemple, cela paraîtra probablement très désagréable et très écrasant. Au lieu de créer une bataille d'attention aléatoire, hiérarchie visuelle vous permet d'ajouter toutes les informations, mais de manière à créer une base pacifique facile à digérer et à dessiner votre attention aux points forts. Examinons quelques exemples concrets. Voici un exemple de WIX qui est un créateur de sites Web. Comme d'habitude, je n'ai aucun lien avec cette entreprise. Je vous le montre simplement parce que je pense que c'est une grande hiérarchie. Notez maintenant comment la hiérarchie est construite ici. Nous commençons par un gros gros titre, notre âge d'un an. Il y a une copie de texte plus petite et vous n'allez probablement pas lire. Ensuite, vous avez ici l'appel à l'action. Notez comment cela se démarque. C'est probablement l'élément le plus important de cette page, même s'il est petit, il utilise la couleur de surbrillance. C'est le seul point où nous utilisons la couleur de surbrillance de ce premier côté de la page. Ce soi-disant « héros ». Bien sûr, nous avons quelques images. C'est vraiment pour nous mettre dans l'ambiance de montrer le produit. En faisant défiler la page vers le bas, vous pouvez constater que non seulement la couleur change. Cela nous montre clairement qu'il s'agit une section et que nous entrons dans une nouvelle section ici. Mais regardez également le titre principal de la topographie H1. C'est probablement H2. Vous pouvez également constater qu'ils sont au même niveau d'importance. Ensuite, vous pouvez voir ici que j'ajoute plus d'informations, mais cela tombe dans la hiérarchie. Au fur et à mesure que nous défilons plus bas, vous pouvez voir qu'ils nous montrent maintenant les modèles, et notez comment aucun de ces modèles ne sort. Il n'y a pas d'offre spéciale, rien qui ne nous respire vraiment . C'est la même chose. Il s'agit d'une collection de modèles. Vous pouvez vraiment voir comment cette hiérarchie fonctionne sur toute la page. Par exemple, si nous sommes plus loin ici, vous pouvez toujours voir qu'il s'agit d'une copie de texte H2 et d'un appel à l'action. Même si nous passons à une autre sous-page ici, passons à la première page que nous trouvons. Vous pouvez le voir encore une fois, nous avons une section héros et vous pouvez voir le titre principal, un texte d'introduction, un appel à l'action et des images. Ensuite, lorsque vous faites défiler vers le bas, vous pouvez voir à quel point cela fonctionne bien. Encore une fois, nous avons les principaux titres, sous-titres, et c'est vraiment un excellent système que nous pouvons parcourir. Résumons. La hiérarchie visuelle permet d'organiser les éléments afin communiquer un ordre d'importance. Il guide l'attention d'un utilisateur tout au long de votre page. Vous pouvez vraiment diriger cela comme vous le souhaitez et en avez besoin. C'est visuellement beaucoup plus agréable. Il facilite la numérisation et la compréhension. Vous serez en mesure d' attirer l'attention sur les points forts que vous voulez vraiment communiquer. 6. Loi de Prägnanz - La simplicité est importante !: La loi de Pragnanz ou parfois appelée loi de la simplicité stipule que la préférence est donnée aux formes dont structure est mémorable et simple afin d'éviter toute écrasante. Nos yeux vont décomposer les formes complexes en formes simples. La recherche montre également que les gens sont mieux traités et se souviennent donc de formes simples. Votre œil est dispersé et sera moins agréable car notre esprit essaie constamment de l'organiser. À moins que vous n'ayez une bonne raison pour des formes fantaisistes, respectez des lignes claires et des formes et mises en page simples. Comme vous pouvez le constater, il est beaucoup plus facile de traiter toutes les informations relatives à ce qui se passe exactement sur cette page. C'est une situation gagnant-gagnant car elle vous simplifie tellement la vie en matière de programmation, et sachez que des formes simples ne rendront pas un design ennuyeux. Vous pouvez apporter de la dynamique avec différentes tailles en utilisant ces différentes formes, couleurs et espacement. Voyons un exemple. Cette page est à peu près composée d'un type de forme, à savoir un rectangle aux coins arrondis. Comme vous pouvez le constater, ce n'est pas ennuyeux, mais c'est très clair, très facile à naviguer et à saisir et il y a beaucoup d'occasions de jouer avec ces formes simples. Ils utilisent les cuisses, ils utilisent la couleur et ils utilisent certains sentiments d'images dans ombre et jouent avec la topographie pour donner vie à cette disposition. Comme vous pouvez le constater, nous pouvons enlever à notre esprit beaucoup de charge cognitive qui sera occupée à décomposer des formes complexes en formes simples. Résumons. L'œil humain simplifie les formes complexes en formes unifiées simples. Les formes simples entraînent une charge cognitive plus faible, alors essayez d'utiliser des formulaires avec une structure simple et mémorable pour éviter d'écraser l'utilisateur. 7. Droit de la similarité - Couleur de la couleur, de la taille et de la forme: La loi de la similitude est l'un des principes originaux de Gestalt lorsqu'il s'agit de regrouper. Il indique essentiellement que les éléments visuellement similaires seront perçus comme liés. Vos principaux outils pour créer ce sentiment d' appartenance seront couleur, la taille et la forme. Notez que l'ordre que je vous présente n' est pas aléatoire. couleur est le communicateur le plus puissant, suivi de la taille puis de la forme. Vous pouvez bien sûr les combiner. Permettez-moi de vous montrer ici ce petit exemple qui montre à quel point ces petits changements peuvent vraiment être puissants. Comme pour tout ce qui est dans l'interface utilisateur UX, la clé de tout cela est d'avoir un guide de style clair lorsque vous définissez certaines règles. Pour la couleur, par exemple, vous disposez d'une palette définie, puis définissez les couleurs à utiliser comme couleurs neutres ou vos couleurs de surbrillance. Il est recommandé d'utiliser la couleur de surbrillance comme méthode pour communiquer à l'utilisateur ce qui est exploitable et cliquable. Je n' utiliserais donc pas de façon aléatoire ma couleur de surbrillance sur un titre juste parce que je pense qu'elle serait belle. Mais je l'utiliserais par exemple sur un lien cliquable ou sur un bouton. Cette forme s'applique à un bouton de ma page qui s' identifie également comme faisant partie d'un groupe et donc je m'attendrai à un certain comportement de groupe, le même pour la typographie. C'est un sujet qui continue d'être abordé car il s'agit d'un élément très important de la conception de notre interface utilisateur. Vous pouvez définir des styles pour les titres, copier du texte et des boutons, etc. De plus, tous les composants de ma page auront défini des règles sur la façon dont ils utilisent la couleur, la forme et la taille. Voyons un exemple réel. Nous sommes ici sur le site internet Spaces comme d'habitude, absolument aucune relation. Je vous montre simplement ceci parce que j'aime l'interface utilisateur et je pense que ça vaut la peine d'être regardé. Passons maintenant à ce point stratégiquement et regardons d'abord la couleur. Qu'ont-ils fait de la couleur ? Ils ont choisi ce jaune moutarde comme couleur de surbrillance. Je dois maintenant dire un mot sur le contraste et l'accessibilité lorsque je regarde cela. Il est très important que lorsque vous choisissez vos couleurs, vous vérifiez le contraste et l'accessibilité. Vous pouvez Google et choisir un vérificateur de contraste ou essayer un plug-in, par exemple dans Figma pour vérifier votre contraste et le contraste doit être suffisamment élevé. Ces vérificateurs de contraste vous indiqueront s'il est suffisamment élevé pour vous assurer qu'il est lisible par tout le monde. Celle-ci, pour être honnête, ne va probablement pas passer parce que cette moutarde sur blanc n'est certainement pas lisible pour tout le monde. Vous pouvez voir que dans ma feuille de style pour mes couleurs, je le marque comme sur la couleur afin de savoir quelle couleur peut être par-dessus laquelle. Si vous souhaitez en savoir plus sur l'accessibilité en couleur, j'ai un cours complet sur la couleur dans la conception de l'interface utilisateur. Cependant, avec cette couleur, ce qu'ils font vraiment bien, c'est qu'ils ne l'utilisent que pour des éléments exploitables et cliquables. Vous pouvez donc voir tous les boutons. Ensuite, par exemple, ici, je peux voir les bureaux s'ils sont disponibles, je peux voir l'emplacement. C'est un lien sur lequel je peux cliquer, et là encore, c' est un lien sur lequel je peux cliquer. C'est de la couleur. Ensuite, le prochain serait la taille. Que font-ils avec la taille ? Nous pouvons voir qu'il y a une hiérarchie très claire dès le premier titre qui se trouve ici. Ensuite, nous pouvons voir, laissez-moi vérifier cela ici, des gros titres qui se passent ici. Que se passe-t-il avec la forme ? En forme, ils collent la plupart du temps à formes rectangulaires triangulaires très simples. Mais nous avons aussi ces petites icônes, par exemple, qui nous montrent les différents bureaux disponibles. Ici, vous pouvez voir ici, ils ont utilisé une icône ronde pour que je puisse voir ces symboles doivent être liés. Aussi des formes comme des effets, comme si je survole, j'ai un peu d'ombre. Je vois qu'ils sont apparentés. Ici, par exemple, nous avons des formes comme ces formes dessinées. Donc, ici, nous arrivons également à différents endroits sont affichés dans ce style afin qu'ils créent une hiérarchie vraiment agréable et simple. Résumons. Visuellement, les éléments similaires seront perçus comme liés. Vous pouvez créer ce sentiment d'appartenance avec la couleur, la taille et la forme. De plus, l'orientation, le comportement et le mouvement peuvent jouer un rôle important. Utilisez un guide de style ou un système de conception pour une approche systématique et cohérente. 8. Un peu plus sur la taille de texte et de bouton: La taille est un élément très important lorsqu'il s'agit de créer une hiérarchie. grands éléments sont perçus comme plus importants que les petits éléments. Il peut être utilisé avec des images, des textes ou des blocs d'informations. Voyons un exemple. Nous avons ici une page d'accueil où les images et les textes sont en ordre et en style, mais leur taille est relativement similaire. Si nous ajoutons une certaine hiérarchie à travers le dimensionnement, nous obtenons quelque chose comme ça. Vous pouvez constater que cela nous aide immédiatement à analyser des informations importantes et à nous concentrer. Bien que cela soit assez simple lorsqu'il s'agit d'images ou de blocs d'informations, typographie est vraiment là où vous devez vous concentrer. Qu'est-ce que cela signifie et comment pouvons-nous y parvenir ? Sachez très clairement quels sont vos titres, sous-lignes , intro ou texte de kicker. Notez également que la perception de taille peut être obtenue en utilisant un texte en gras plutôt qu'un texte normal ou des majuscules. Pour vous assurer d'être cohérent et stratégique avec votre typographie et votre dimensionnement tout au long de votre conception, veillez à utiliser une échelle de types pour définir des règles claires. Pour ce faire, nous commencerons par la taille de police de base. Il s'agit du texte le plus courant, qui est votre corps standard ou votre copie de texte. Par défaut, dans presque tous les navigateurs, cette valeur est définie sur 16. Selon votre police de caractères, vous pouvez théoriquement aller un peu plus grand ou plus petit. Mais 16 est généralement une police de bonne taille de base pour travailler en ligne. J'essaie généralement de m'en tenir là. De cette façon, je sais que j' aurai une bonne lisibilité, et je sais également que la taille de ma police de base correspond à un rem, qui est la valeur racine, la valeur définie dans le navigateur pour la taille de police racine. Une fois que nous avons décidé de la taille de la police de base, nous ajoutons les autres tailles. Les H1-H3 sont les gros titres, 1-3, et c'est ce qu' on appelle un HTML. Le H1 est votre principal titre, votre principale introduction. En règle générale, vous ne devriez avoir qu'un seul H1 par page. C'est également pour des raisons d'optimisation des moteurs de recherche. Mais vous pouvez alors avoir autant de H2 ou H3 que nécessaire et vous pouvez même en ajouter d'autres. Donc, si vous vouliez plus de sous-titres, vous pouvez ajouter un H4 , un H5, etc. La taille et le poids réels que vous attribuez à ce style dépendent vraiment de vous. Vous pouvez les attribuer de manière totalement aléatoire à vos besoins. Vous pouvez utiliser un système de mise à l'échelle des ratios ou, comme dans cet exemple, vous pouvez passer par étapes de huit. Cela va très bien avec mon système d'espacement de huit points. L'important est que votre H1 soit le plus important, puis qu'il baisse lentement en importance et en hiérarchie. Vous pouvez également ajouter d'autres éléments tels que des liens ou boutons, des légendes et des citations. nombre dont vous avez besoin dépend vraiment de votre conception. Ce que vous voyez ici serait probablement le strict minimum. Vous pouvez vraiment développer votre échelle de type en fonction de vos besoins. Cependant, essayez de le garder aussi simple que possible car cela peut devenir assez désordonné sinon. Lorsque vous décidez de vos tailles, vous devez garder à l'esprit que vous concevez pour différentes tailles d'écran. Habituellement, nous concevons d'abord quelque chose appelé mobile. Cela signifie que vous définissez toutes vos tailles pour le plus petit écran , puis que vous remontez là où vous avez besoin de modifications, vous ajouterez cela. Il existe différentes stratégies sur la façon de configurer des échelles pour une conception réactive. Si vous souhaitez en savoir plus sur la typographie dans la conception de l'interface utilisateur, j'ai un cours distinct à ce sujet, passant par différentes unités, techniques de dimensionnement et réactivité. Outre la hiérarchie, il est également important de se rappeler que dimensionnement joue un rôle majeur dans la convivialité et l'accessibilité. Toutes vos cibles tactiles, telles que les boutons ou les icônes cliquables, doivent être suffisamment grandes pour que les utilisateurs puissent cliquer, non seulement avec leur souris, mais aussi avec leur doigt sur une tablette, par exemple. Il y a beaucoup de recherches sur l' ampleur que cela devrait vraiment être. Cela peut différer un peu, mais pas significativement. J'utilise le numéro donné par les directives d'interface humaine par Apple design, qui indique actuellement que 44 points devraient être une taille cible idéale. Notez maintenant que c'est très bien si l'article lui-même est un peu plus petit. La partie importante est la zone cliquable, donc vous voyez cela à droite ici. Assurez-vous simplement que la zone dans laquelle votre article est placé est suffisamment grande. Cela est particulièrement important lorsque vous ajoutez des éléments cliquables les uns à côté des autres, comme une rangée de boutons. Assurez-vous toujours qu' il y a suffisamment d'espace entre eux pour ne pas frustrer l'utilisateur en activant accidentellement le mauvais bouton. Notez maintenant que je parle de point ici, et nous concevons un logiciel d'interface utilisateur à l'on appelle 1x où 1 pixel équivaut à 1 point. plupart du temps, les gens se demandent quelle sera la taille physique plus tard que je verrai à l'écran ? Eh bien, il est un peu difficile de répondre parce qu'on ne peut pas traduire pixels ou les points en tant que tels en centimètres ou en millimètres. Mais cela équivaut à peu près à quelque chose d'environ un centimètre. C'est vraiment une bonne taille cliquable. Mais c'est vraiment quelque chose pour vous déplacer et imaginer sur un appareil lorsque vous testez, par exemple. Dans votre travail de conception, utilisez quelque chose entre 44 et 48 et vous devriez être sûr. Résumons. grands éléments sont perçus comme plus importants que les petits éléments. Soyez systématique, possédez une hiérarchie claire. Généralement pour tout, mais surtout quand il s'agit de typographie. N'oubliez pas de prendre en compte différentes tailles d'écran. Assurez-vous que vos cibles tactiles sont suffisamment grandes. 9. Droit de la Proximité : Systèmes d'espacement et grilles: Lorsque vous placez des objets dans notre disposition, nous devons tenir compte de la loi de la proximité. Cela signifie simplement que les objets situés à proximité les uns des autres seront considérés comme un groupe plutôt que des parties individuelles. Cet effet est l'un des principes originaux de Gestalt et c'est génial de créer un sentiment de regroupement et d'appartenance. Comment pouvons-nous utiliser cela en matière de conception d'interface utilisateur ? Nous pouvons l'utiliser pour regrouper des intersections d' informations similaires et désencombrer notre mise en page. La loi de la proximité peut être appliquée à peu près partout dans votre conception. Comme ici, vous pouvez voir que même si la hiérarchie de mon texte est appliquée en termes de dimensionnement, vous le percevez toujours comme appartenant à la partie supérieure de la mise en page. Alors que maintenant, il fait partie de la bibliothèque d'images ci-dessous. Tout comme la proximité peut créer un sentiment de regroupement, vous pouvez également atteindre exactement le contraire en ajoutant des espaces négatifs ou blancs, cela peut être très pratique. Par exemple, entre les sections afin de créer une distinction claire. pixels ne coûtent pas plus cher, alors utilisez-les et laissez-les respirer. L'espace négatif ou les espaces blancs font vraiment la différence dans un design. Comme pour tous les éléments de conception, l'utilisation de l'espace doit être une approche systématique. Un système qui ne fait qu' ajouter de la cohérence à votre conception mais facilite également configuration des composants suivant le même ensemble de règles ultérieurement dans votre CSS. Deux outils permettent de déterminer le positionnement et la distance dans votre conception, le système de grille et le système d'espacement. Maintenant, les deux sont souvent confus et il est important de comprendre ce que chacun d'entre eux fait et qu'ils travaillent main dans la main la plupart du temps. Les systèmes de grille définissent la distribution horizontale et la disposition plus large. La note que vous utilisez dépend de vous et de votre équipe de développement. Vous placez vos articles dans la grille , puis utilisez la gouttière réglée comme distance horizontale. Toutefois, pour votre espacement vertical et pour l'espacement entre les éléments, vous devez utiliser un système d'espacement. Le système d'espacement est essentiellement un multiple de votre taille de base que vous définissez. Dans mon cas, j'aime utiliser et je recommande vivement d'utiliser un système d'espacement à huit points. Ma plus petite taille et ma taille de base sont huit en distance, puis tout le reste est un multiple de huit. Il existe de nombreux avantages à savoir pourquoi vous utiliseriez un système de mise à l' échelle à huit points, ou un système de mise à l' échelle à quatre points, soit dit en passant, est très populaire dernièrement. Ces deux systèmes d'espacement évoluent étonnamment bien avec la taille de police du navigateur qui est généralement définie sur 16 par défaut et est un multiple de quatre et huit, ainsi que des icônes que vous trouvez généralement dans une taille de 24 ou 48 pixels. Un autre aspect est que ces chiffres évoluent très bien lorsque vous exportez des ressources vers d'autres résolutions, car vous pouvez les augmenter, mais vous pouvez également les réduire à 1,5, par exemple, lorsqu' il s'agit d'Android. De cette façon, vous évitez les demi-pixels et le flou. J'ai un cours approfondi distinct sur les systèmes de résolution et d'espacement, ainsi qu'une cause approfondie sur les grilles. Si c'est nouveau pour vous, certainement quelque chose à vérifier pour mieux comprendre. Résumons. Les objets situés à proximité les uns des autres seront considérés comme un groupe. C'est génial pour créer un sentiment de regroupement et d'appartenance à votre mise en page. L'espace blanc est roi, utilisez-le. Ajoutez de l'espace entre les sections. Ajoutez de la cohérence avec la grille et le système d'espacement. 10. Droit de la région commune - Créer des sections de votre mise en page: Le droit des régions communes stipule que les éléments dont la région est définie ont tendance à être perçus comme appartenant ensemble. Cela ne faisait pas partie de la théorie originale de la Gestalt, mais il a été ajouté plus tard par Parme dans les années 90. La région commune est un outil puissant qui donne une structure claire à l'utilisateur, à ce qui appartient ensemble. Cela peut sembler être une technique de mise en page mineure pour mettre en évidence les choses, mais cela fait une telle différence. région commune peut être n'importe quoi, d'un contour à un vase, subtil ton gris en arrière-plan qui conçoit les intersections de vos pages. La création de ces sections est une aide précieuse pour l'utilisateur afin de ne pas être submergé. Il suffit de jouer avec et vous verrez la différence que cela fait. Voyons un exemple réel. Il s'agit de la page sur les flots d'avoine, comme d'habitude, sans relation. J'aime vraiment l'UX et je voulais vous montrer. Vous pouvez voir qu'ils utilisent couleur d' arrière-plan grise très subtile , puis juste la couleur d'arrière-plan blanche en contraste avec elle. Vous pouvez voir que cela crée de très belles sections. Vous obtenez une très, très belle structure sans même avoir un élément que vous remarquez consciemment. Maintenant, en plus de cela comme couleur d'arrière-plan et la création de sections, la région commune est également utilisée dans les éléments plus petits, comme vous pouvez le voir ici, par exemple, cela donne une région commune et une ombre, et cela montre clairement qu' s'agit d'une section qui appartient ensemble. Voyons également ici si nous prenons les trains. Vous pouvez voir qu'il crée plus de cartes. Chaque fois que j'ai cette région, c'est un sujet, car ces sujets restent dans une autre région commune, le contexte ici. Vous pouvez voir qu' ils peuvent se chevaucher, mais il est très clair qu' appartiennent ensemble. Plus bas. Par exemple, nous avons un tableau, et ici nous pouvons également voir que cette ligne est mise en surbrillance par une région commune, ce qui indique très clairement qu'il s'agit certaines informations qui appartiennent ensemble et sont pertinents pour nous. Notez également qu'il ne doit pas nécessairement s' agir d'un bloc de couleurs. Ici, par exemple, nous n'avons que des lignes, mais cela crée également une région commune. Cela est dû à ce que l' on appelle la loi de fermeture, qui est également une loi sur la théorie gestalte. Ce qu'il fait, cela signifie que notre cerveau va compléter des formes incomplètes pour créer une forme. Vous pouvez, par exemple, voir ici que cela créera une région commune, même s'il y a un espace ouvert dans la forme. Comme vous pouvez le constater, vous pouvez vraiment jouer avec elle, la seule chose à laquelle vous devriez faire attention, c'est de ne pas trop l'utiliser et de ne pas imbriquer des régions communes les unes dans les autres. Si vous souhaitez créer d'autres sections avec des régions communes intérieures, j'aimerais vous montrer cet exemple ici. Il faut essentiellement être conscient d' une sorte de hiérarchie, de les créer. Ici, vous pouvez voir qu'ils ont créé cette région commune comme cette boîte extérieure, et ils ont utilisé une ombre et une certaine profondeur, ce qui la rend très proéminente et très puissante. Ensuite, ils ont voulu créer deux sous-sections au sein de ces régions communes, et ce qu'ils ont fait, ce n'est pas réutiliser cet effet utilisé pour le groupe principal, mais ils utilisent quelque chose de beaucoup plus subtil, comme, par exemple, un léger changement de couleur. Vous pouvez également simplement utiliser des espaces blancs la plupart du temps, ce qui est plus que suffisant. Plus loin ici, vous pouvez voir qu'ils n'ont pas utilisé cette approche, ce qu'il a fait, c'est qu'ils utilisent cette même région commune extérieure et un intérieur, ils ont commencé à se diviser avec une approche similaire des lignes. Vous pouvez voir qu'il devient un peu plus encombré et qu'il n'est tout simplement pas aussi clair et propre que ce qu'ils ont fait ici. Vous pouvez voir qu'il s'agit d'un concept très simple mais très puissant que vous pouvez utiliser sur pratiquement n'importe quel design. Résumons. Les éléments dont la région est définie ont tendance à être perçus comme appartenant ensemble. Cette technique simple est idéale pour structurer votre disposition. Une région peut être une couleur d' arrière-plan complète ou un contour. 11. Effet Von Restorff – Attire l'attention de vous en – de la création de: L'effet Von Restorff, également appelé effet Isolation, indique que dans un groupe d'éléments similaires, un élément différent sera le plus mémorisé. Un exemple classique est celui d'un tableau de prix dans lequel vous souhaitez mettre en évidence l'offre que vous souhaitez privilégier. Ce qui se passe ici, c'est que tout suit la loi de la similitude pour montrer que nous avons affaire à la même famille, en nommant les choix de prix. Ensuite, nous avons juste colorié dans l'un de ces cas pour mettre en évidence. Ici, nous lui avons donné une bordure rouge et nous avons mis en surbrillance le bouton. En mettant en évidence ce choix, il recevra plus d' attention de la part de l'utilisateur , se retirera et sera plus susceptible d'être mémorisé. Examinons quelques exemples réels. Nous avons ici une offre de Noël. Vous pouvez voir que même si ces boîtes sont presque identiques, vous accorderez beaucoup plus d'attention à la boîte verte supérieure. C'est à cause de la couleur proéminente. Nous avons également une présélection ici et nous avons quelque chose qui indique un très bon rapport qualité-prix. Un autre domaine dans lequel nous utilisons l'effet Isolation est si nous voulons afficher réductions ou quelque chose de spécial concernant un produit que nous vendons dans une boutique en ligne. Ici, par exemple, vous pouvez voir qu'il s'agit d'un panier normal qui vend l'article. Si nous avons une réduction, nous ajoutons du rouge ici sur le prix, ce qui attire automatiquement notre attention sur ce produit. L'effet Von Restorff ne doit pas nécessairement être lié à la tarification ou aux offres très flashy. Il peut également être utilisé de manière très subtile comme vous pouvez le voir sur cette page, où le produit est très simplifié. Ensuite, nous ajoutons simplement des images où les gens, par exemple, portent ou un peu plus une image d' ambiance qui attire l'attention. Il peut vraiment ajouter de la dynamique chaque fois que vous avez un ensemble d' éléments similaires et que vous souhaitez mettre en surbrillance un ou quelques-uns d' entre eux. Résumons. Dans un groupe d'articles similaires, se souviendra le plus de celui qui est différent. C'est idéal pour attirer l'attention sur vos principales caractéristiques. La couleur est très efficace, mais assurez-vous de prendre en compte les problèmes d'accessibilité. Par exemple, daltonisme ou contraste suffisant. 12. Droit de la maladie de commun – Behavioural de comportements: La loi du destin commun stipule que deux ou plusieurs éléments se comportent de la même manière sont perçus comme faisant partie d'une unité. Peu importe à quelle distance les éléments sont placés les uns des autres ou à quel point ils sont différents en apparence. S'ils bougent ou changent ensemble , ils apparaissent comme un seul. Cela est particulièrement important lorsque nous parlons de concevoir une interaction avec l'utilisateur. Un exemple classique est celui des diaporamas ou des listes déroulantes FAQ. Dès que vous cliquez sur l'un et que vous verrez qu'il s'ouvre, vous saurez que le reste du groupe se comportera exactement de la même manière. Un autre bon exemple est le site Web Headspace qui l'utilise beaucoup. Comme d'habitude, aucun rapport avec le produit, je vous montre juste une excellente expérience utilisateur. Ici, vous pouvez voir des citations, par exemple, et lorsque je clique, elles se comportent et se déplacent de la même manière. Plus bas, je peux voir cette section ici où si je commence à cliquer sur un bouton, elle révèle de nouvelles informations. Je saurai que cela va probablement arriver à tous ces boutons ici car ils se comportent de la même manière. Résumons. Deux ou plusieurs éléments se comportant de la même manière sont perçus comme faisant partie d'une unité. Les éléments ne doivent pas nécessairement se ressembler et ne doivent pas être à proximité. Il peut être utilisé comme effet de mise en page ou comme interaction améliorée. 13. Réaction viscérale – L'émotion dans votre design : Il est important de créer votre produit selon les principes communs U, Xi. Cela vous donnera une base et un cadre solides. Cependant, pour que votre design se démarque vraiment, vous devez provoquer une réaction viscérale La réaction viscérale signifie que vous voulez que votre design crée un sentiment qui n'a rien à voir avec logique et qui ne soit pas le résultat d'une pensée, mais plutôt un sentiment instinctif Bien que vous puissiez suivre strictement les règles en matière de principes de conception, c'est tout le contraire. C'est difficile à prévoir et à tester, mais c'est essentiellement l'identité de votre marque que vous communiquez. Le cœur et l'âme. Pensez-y comme à une personne. C'est probablement une combinaison de sa façon de marcher, de parler, de son apparence, de quelque chose de drôle ou de cool. C'est très individuel et très différent, que les gens le veuillent ou non. Assurez-vous donc de connaître vos utilisateurs et votre propre marque. Il s'agit vraiment d'être authentique dans son ensemble. Examinons quelques exemples et différentes manières d'évoquer réaction viscérale. L'imagerie est le moyen le plus simple et le plus important d'attirer réellement votre utilisateur dans votre monde Cet exemple montre très bien comment utiliser des images de différentes tailles pour réellement les intégrer à l'expérience. Ici, nous avons affaire à l'aventure et la température, et l'expérience dans son ensemble semble vraiment proche. Notez également comment ils utilisent très bien la couleur bleu et orange, comme le chaud et le froid, des couleurs complémentaires comme le chaud et le froid, des couleurs complémentaires, pour communiquer ce message. La vidéo est encore plus forte que l'image seule. Ici, vous pouvez voir que la vidéo est utilisée pour réellement communiquer une ambiance plutôt que de simplement montrer le produit. Notez également les couleurs de la vidéo et façon dont elles sont répétées sur toute la page. Tout est fait de couleurs très douces, beiges même dans la tête, et d'une atmosphère très calme. Avoir une personne ou un personnage spécifique qui vous guide à travers le produit ou l'expérience est également très utile pour créer un lien avec l'utilisateur. Vous le verrez souvent dans le domaine du développement personnel , comme le sport. Il peut s'agir de la personne réelle, mais il peut aussi s'agir d'un personnage inventé. Headspace fait un très bon travail ce sujet et Inventated fait petits personnages qui vous guident tout au long de la méditation La typographie peut également être un excellent moyen de communiquer un sentiment Cela finit généralement par avoir un aspect un peu plus moderne et graphique, mais cela ne doit pas nécessairement être le cas. Il s'agit également de la façon dont votre texte est écrit. Est-ce que c'est drôle ? Est-ce poétique ? Comment parle-t-il à l'utilisateur ? Même si vous présentez un produit ou un logiciel, vous pouvez être vraiment créatif dans votre façon de le présenter. L'important est d'être cohérent et de créer un sentiment. Résumons. La réaction viscérale est une sensation instinctive qui définit l'humeur Pourquoi ou qui fait que votre marque utilise l'imagerie, vidéo, les combinaisons de couleurs, la typographie et le ton de voix pour créer cette ambiance C'est la cerise sur le gâteau. Assurez-vous qu'il repose sur une solide expérience UxUI. 14. Télécharger le matériel: Vous voudrez peut-être travailler à mes côtés, alors j'ai préparé quelques fichiers pour que vous puissiez les télécharger. Dans le cours que vous suivrez, accédez simplement au projet et aux ressources. Vous y trouverez toutes les informations et le lien où télécharger le matériel. Vous pouvez également accéder à mon profil où vous trouverez également un lien direct vers la page de téléchargement. Sur cette page, vous trouverez une variété de téléchargements. Vous pouvez simplement choisir le cours que vous suivrez actuellement, puis cliquez simplement sur « Télécharger » et il téléchargera automatiquement le fichier pour vous. Pour ouvrir un fichier Figma et le télécharger, il est important que vous ayez un compte Figma. Dans votre compte, accédez à nouveau, puis appuyez sur « Importer ». Vous pouvez ensuite choisir un fichier que vous souhaitez ouvrir. Cela peut prendre un moment car ils sont assez volumineux, mais une fois que vous les avez importés, ils seront sur votre compte et vous n'avez pas besoin de répéter ce processus. Je travaille avec Google Fonts pour la plupart de mes créations. Si vous travaillez avec l'application Figma, vous n'avez pas besoin de faire quoi que ce soit. Toutes les polices Google sont préchargées automatiquement. Si vous souhaitez travailler avec Figma dans le navigateur, il vous suffit de rechercher la police qui vous montre manquante. Par exemple, Poppins, j'utilise beaucoup et ensuite vous pouvez télécharger directement cette police, l' installer sur votre ordinateur et vous êtes prêt à partir. Toutes les ressources sont gratuites pour les étudiants existants et vous n'avez pas besoin de saisir d'informations supplémentaires. Bien sûr, vous pouvez également télécharger n'importe quel autre fichier au cas où cela vous intéresse. En général, j'ajoute toujours tout ce que je pense être utile. Il existe, par exemple, un modèle Bootstrap puis une liste avec des liens pour des livres d'inspiration et blocs qui sont vraiment parfaits pour la conception de l'interface utilisateur UX. Cette liste de téléchargements ne cesse de croître, alors assurez-vous de revenir et jeter un coup d'œil de temps en temps. 15. EXERCICE --> Site Web de coworking de Figma: Mettons toute cette théorie en pratique. J'ai préparé un Figma 5 pour vous. Utilisez la fonction d'importation pour voir le fichier et nous pouvons commencer. Dans ce fichier, vous trouverez l' exercice sur la première page. Notre exercice est que nous allons mettre en place un design pour un petit espace de co-working à bureaux ouverts. Nous recevons un bref contenant toutes les informations sur matériaux disponibles tels que images et autres éléments de marque. Notre équipe UX imaginaire a également travaillé là-dessus et elle nous a donné un cadre métallique de base à partir duquel commencer. Vous pouvez maintenant appliquer les principes que vous avez appris dans ce cours pour configurer votre premier design. Je les résume ici à nouveau dans la description de l'exercice. Sur la deuxième page du fichier, vous trouverez une solution que j'ai préparée pour vous. Ce n'est là que pour que vous soyez inspiré et curieux de savoir comment aborder cette tâche. Il n'existe pas de solution unique à concevoir. vôtre peut être tout aussi bon ou même meilleur que le mien. Apprenez-en vraiment votre propre, essayez de vous en tenir aux principes du design, mais n'hésitez pas à réécrire le mémoire et à créer un tout nouveau projet pour votre portefeuille à partir de cela. Vous êtes en charge maintenant. Appréciez. 16. Vous voulez ajouter un UX ?: Si vous souhaitez savoir comment cette image filaire de notre exercice a été créée et ce que vous pourriez faire d'autre pour améliorer votre UX, vous pourriez faire d'autre pour je vous recommande de prendre la première partie de cette UX/UI. intro. Vous pouvez trouver nos rapports UX ici sur Skillshare. Il suffit de rechercher l'apprentissage de la lune et vous verrez tous les cours jusqu'à maintenant. Dans ces cours, vous verrez le cours UX ici. Dans ce cours, vous trouverez tous les principes relatifs à la conception UX/UI. En fin de compte, un exercice où nous parlerons de la création de ce filaire. 17. Merci !: Bravo pour avoir terminé ce cours. N'hésitez pas à nous contacter sur moonlearning.io, nous sommes toujours intéressés à connaître vos commentaires. Vous nous rendriez également un grand service si vous pouviez juste prendre une minute et laisser un avis ici. Si vous avez apprécié ce cours, assurez-vous également de consulter nos cours supplémentaires. Chez moonlearning.io, nous abordons tous les sujets, depuis les fondements mêmes de conception UX/UI jusqu'à Figma et même quelques bases du code. Assurez-vous de visiter notre site Web à l'adresse moonlearning.io, où vous pouvez également vous inscrire à notre newsletter.