Conseils en design pour tous

1. Intro: Hey, qu'est-ce qui se passe, tout le monde ? Je suis designer et entrepreneur et je conçois depuis cinq ou dix ans. J' ai travaillé avec toutes sortes d'entreprises, allant de petites entreprises locales à des entreprises de plusieurs milliards de dollars. Dans ce cours, je vais partager quelques conseils de conception rapides que j'ai appris au fil des ans sont en train de concevoir. Espérons que vous pouvez les appliquer à vos propres designs. Alors, allons y entrer. 2. Choisissez votre personnalité: Quand il s'agit de concevoir quoi que ce soit, quoi que ce soit peut-être que vous avez un entraînement, la personnalité que vous voulez donner à votre site Web ou quoi que ce soit que vous travaillez application, site Web, quoi que ce soit. Je voulais donc regarder deux sites qui ont très différentes et qui ont des personnalités très distinctes. Donc, cette arrivée du site, vous pouvez voir qu'il est très intelligent sur les corpus, très moderne. Vous pouvez voir tous les boutons sont très carrés. Vous pouvez voir les polices également très carré, palette de couleurs très minimaliste ainsi, juste les noirs, blancs pâturent. Et oui, un design et une personnalité très intelligents et sophistiqués. Denis donnant, même avec les polices, ayant des polices majuscules comme celle-ci, où l'espacement entre les lettres aussi, juste une approche très moderne. Cependant, quand nous regardons hunk, qui est une application de messagerie, vous pouvez voir très, très différent. Il utilise des couleurs beaucoup plus claires. Il a des coins arrondis, coins très, très arrondis. Même la police elle-même qu'ils utilisent a des coins arrondis à la fin, le bouton est très arrondi. Vous pouvez voir ces petites animations bizarres. Il y a beaucoup de couleurs différentes qui se passent. Les icônes, vous savez, rebondissent, se déplacent. Un look très différent et beaucoup plus convivial résoudre look. Ça a l'air plutôt bien. Ce site et le site d'arrivée sont tous deux fantastiques. Ils ont juste des personnalités très différentes. Donc, chaque fois que vous concevez quelque chose a établi ce qu'est votre personnalité, quelles sont les personnalités que vous essayez de faire passer pour cette marque, pour ce site Web, et partir de là. Il est bon de regarder d'autres exemples, est bon de regarder d'autres sites Web et de voir ce qu'ils font quand il s'agit de donner leur personnalité. Donc, à titre d'exemple rapide, je vais me moquer deux différents vu un site Web n'est pas complet, mais juste pour vous donner une idée de ce que c'est d'ajouter de la personnalité à un site Web. Nous allons donc ajouter un cadre dans FISMA. Faisons cette largeur 1200 en fait, rendons un peu plus large. Peut-on le rendre plus large et l'ajuster ? Oui, on peut. D' accord. Super. Donc oui, je pense que je vais faire un site bancaire. Maintenant, elle a mis la banque la réserve ici. Et nous allons opter pour une palette de couleurs minimaliste pi pour l'instant. Et mettons aussi quelques titres. Alors connectez-vous, inscrivez-vous. Je vais juste être très rapide avec Alice. Ajoutons un rectangle. Navbar. Par exemple. Allons faire tomber ça. Oh, on veut obtenir tout ça et les aligner. Et quand il s'agit de la police, ce que nous ferons c'est que nous utiliserons, parce que je pense que c'est un bon téléphone intelligent et sophistiqué. Il a des bords très tranchants à elle aussi. Rendons le logo un peu plus grand. Je pense que rendre les polices audacieuses aussi peut aider à lui donner un look plus audacieux. On va faire ce blanc aussi. Allons à et splash et encore, l'image à inclure dans notre conception. Alors faisons entrer cette image. Mettons-le à l'intérieur, bien sûr, en apportant tout en dessous. Et puis nous le voulons vraiment dans la zone du cadre. Ce que nous ferons, c'est que nous ajouterons aussi un ouais, nous ajouterons un remplissage sur le dessus. Faire un remplissage solide. Et obéir à l'opacité. Peut-être que deux environ 70% feront également cette couleur sombre. A mis autour de leurs yeux, faire ces blancs. Rendons ça un peu plus grand. T 14, je pense que c'est bon. Et l'espacement entre eux semi inclinait les couleurs sur eux. Et ce que je vais faire, c'est que je vais supprimer cet en-tête. Et je pense en fait bien, regardez mieux sans l'en-tête. Et ceux-là encore pour se retourner là-bas. Et puis nous allons ajouter une copie maintenant parce que c'est noir. Mais on va le rendre un peu plus grand. Comme par exemple, un espace supplémentaire là-bas. Amenez-le au milieu. Ajoutons également du texte en dessous. Faisons ça comme « Day Gate ». Et nous allons rendre ça beaucoup plus petit. Peut-être 16 bits D beaucoup hier, on a mieux Alex. On aura peut-être ce tee-shirt en couleur. Nous allons ajouter un bouton. Le bouton, le collier en or. Maintenant, nous avions comme disons, eh bien en fait je pense que ça va avoir besoin d'être permet de le rendre un peu plus sombre en couleur. Ça a l'air plutôt bien. Pour le faire semi-incliné. Ça rend aussi ce bouton un peu plus grand. J' ai donc changé la couleur du bouton parce que je pense que le bleu semble un peu mieux. Mais oui, on est là. Nous venons de faire une sorte très rapide d'en-tête de site bancaire. Et j'ai choisi une image très simple. L' image d'entreprise utilise des polices très modernes avec des bords tranchants, des boutons sans sorte de rayon sur eux. Et comme ça semble très corporatif et très commercial, très bancaire, comme si on lui donnait un nom de banque. Et ce qu'on va faire, c'est en faire un autre. Et celui-ci, disons, est plus lié à la mode parce qu'il va y avoir une apparence très, très différente. Alors donnons-lui le nom juste mode. Très facile. Donc pour celui-ci, nous allons utiliser une police appelée Made Mirage, mon grand favori. Et nous changeons toutes les polices. Je devrais nous utiliser t polices utiliseront mirage made et nous utiliserons termini parce que nous allons pour plus d'un look de mode. Nous utilisons un certain nombre de fonds différents pour celui-ci. Donc résilier à nouveau est l'une de mes polices préférées. Je pense que ça a l'air fantastique. Faites de vous une suite en majuscules. Et peut-être qu'on va faire ça comme un blog. Contact. Cu rendra aussi la jambe un peu plus grande et elle est un peu plus petite. Ils sont comme du côté. Ce que nous allons faire est que nous allons supprimer l'image d'arrière-plan et ensuite aller à et splash. Et nous chercherons une image liée à la mode. Donc nous allons utiliser cette image ici. Nous supprimerons ce texte là où nous avons fait le bouton aussi. Quand nous avons tout, utilisera cette image ici. Rends-le évidemment beaucoup plus petit que ça. Peut-être qu'on va faire ça ici. Amenez aussi cela un peu plus, ramenez un peu le cadre vers le bas. On garderait 1400 zones humides. Et nous allons mettre quelque chose comme un gros titre dans notre police préférée. Rends-le blanc. Et nous allons le rendre énorme aussi. Quelque chose comme ça. Cela le rend moins, assurez-vous que tout est aussi centré. Et nous sommes, ce que nous allons faire cela aussi, va effectivement recadrer cette image. Alors faites un rectangle d'ici à ici et obtenez l'image. Et nous utilisons la mosquée. Et encore une fois, je pense que c'est mieux. On pourrait même rendre ce titre encore plus grand. Oui, rendons encore plus grand comme ça. Et on va le rendre un peu mince à T, mec de la Navy. Et ce que nous ferons, c'est que nous ajouterons du texte ci-dessous. Je, peut-être juste un texto factice. Comme dire que je pense que ça pourrait être un peu trop de texte factice. Montre-moi un peu. Et aussi le rendre un peu plus petit. Il peut ajouter une date. Et nous ferons de cette date un terme et une police. Augmentons la hauteur de la ligne à ce t. Et puis nous pouvons ajouter un bouton pour dire, lire la suite. Encore une fois. Faisons ça notre autre police. Et oui, on est là. Nous avons juste une sorte très rapide de blogs de mode ou chose que j'ai mis en place. Et cela semble évidemment très différent de notre site de banque d'entreprise que nous avons fait plus tôt. Et c'est juste un moyen vraiment rapide et facile d'ajouter de la personnalité sur un site Web. Déterminez la personnalité que vous pouvez utiliser. Différentes polices sont différentes formes de bouton. Quoi qu'il en soit, regardez l'inspiration et appliquez votre propre personnalité à vos propres sites Web. 3. N'utilisez pas de gris: Lorsque vous commencez à concevoir, il est en fait très facile d'utiliser noirs, des gris et des blancs quand il s'agit de votre design. Mais ce que j'aime faire est, est différent de t pâturé qui ont un soupçon de couleur en eux. Que ce soit un indice bluey, un indice greenie, ou un indice jauneux pour eux. Ou peut-être même comme un soupçon rouge pour lui donner un look plus chaud. Et dans un soupçon de couleur à vos gris peut vraiment vivre et design supérieur et transformer la façon dont il ressemble. Donc, je vais rapidement vous montrer ce que c'est de juste faire une grâce normale et ensuite ajouter quelques gris avec quelques couleurs ici. Et sigma fera une palette de couleurs rapide. Donnez des boutons au-dessus autour du coin. J' adore mes boutons ayant des coins arrondis. Et je te verrai quand on commencera avec le noir. Va faire une couleur noire. Couleur grise. J' ai fait un autre gris quelque part par là. Faisons en sorte que ce sont les ACGME qui vont me tuer. Ici, nous avons un tas de Noirs, Gris et de Blancs. Ça a l'air bien. Vous pouvez l'utiliser dans votre conception. Et j'ai parfois utilisé des couleurs complètement noires et complètement grises dans mon design. n'y a rien de mal à ça. Cependant, si votre site Web a une couleur d'accent, par exemple, le bleu, je ne vois pas pourquoi vous pouvez ajouter du bleu à votre grâce. Donc on va faire ça. Donc on a fait cette IVR et on en parlera, mais on l'amènerait au bleu par ici. Et ce qu'on va faire, c'est l'amener ici, quelque part par ici. Maintenant, c'est très, très subtil. Et puis si vous commencez à voir sur votre écran, mais vous pouvez voir que c'est beaucoup un noir de pitch, mais c'est plus d'une sorte de bluey en noir clé d'une certaine manière. Et ce qu'on va faire, c'est faire différentes nuances de ce gris. Alors que nous passons par la gamme de couleurs, nous pouvons simplement utiliser le sélecteur de couleurs. Et nous aimerions faire, c'est que j'aimerais aller dans ce genre d'angle, vous pourriez dire. Alors. Pas juste comme tout droit, j'aime aller en quelque sorte dans un angle, dire comme ça fondamentalement. Mais revenons à ce que vous faites. Va par ici peut-être. Ouais, je pense que ça a l'air plutôt sympa. Par ici, je crois. Oui. En fait, rendons ça un peu plus sombre et là. Et là, quelle couleur son bureau, le désert B. Donc on va le faire autour d'un B, je pense. Autour de là. Oui. Qu' est-ce que c'est ? C' est un d. Alors apportez votre attitude D. là-bas. Et puis enfin B1, dernière couleur. Maintenant, nous le sommes. Comme vous pouvez le voir, il y a un soupçon de bleu dans ces gris. Et je pense que cela ajoute juste un peu plus de couleur et caractéristique à n'importe quel design sur lequel vous travaillez. Et c'est un moyen très rapide de faire une palette de couleurs de gris avec un soupçon de couleur en eux. Donc ici, je me suis rapidement moqué d'une application juste en utilisant des Noirs, des gris et des blancs, et immédiatement semble ok. Mais il manque de personnalité. Je dis cela parce que ça me fait rire avec après chance que je dessinerais qui ressemble à ça de toute façon. Et, mais, mais de toute façon, nous voulions ajouter de la couleur à cette application. Donc nous allons changer notre Grâce et leur donner un peu de couleur. Donc, nous allons d'abord commencer par l'arrière-plan. Alors choisissons un bleu que nous aimons. Apportez-le. Et on voit déjà qu'il y a un petit changement entre celui-ci et celui-ci. Changeons notre icône de hamburger. Permet de choisir audiblement Pat sol. Et évoquons ça. Peut-être deux par là. Ouais, j'aime ça là-bas. Je pense. Faites de même avec notre icône de sonnette de notification. Et nous allons juste passer lentement et changer la couleur de notre pâturage trop un peu plus bleu. Rallons-le un peu plus léger. En fait. Voilà, tu y vas. Oups. C' est la mauvaise couleur. Donc, vous pouvez déjà voir que ça fait une grande différence. Vous pouvez déjà voir qu'il y a un peu de couleur dans l'application elle-même. Alors continuons. Change ça. Oui. Et puis nous allons également ajouter une couleur à notre bouton parce que notre bouton est actuellement simplement gris. Dites, donnons-lui une zone de couleur. Ça a l'air plutôt bien. Nous donnerons un peu de couleur à nos cartes aussi. Peut-être même changé un peu ici. Le gars. Changé la barre de progression, est bon, qu'un peu de couleur comme ça. On a l'air bien en angle, on y arrive, on y arrive. S' y rendre très, très vite. Nous allons zoomer un peu pour que nous puissions changer ces couleurs aussi. Donc, quand il s'agit de quelque chose comme ça, ce bouton, beaucoup de gens, ce qu'ils font habituellement c'est qu'ils font Y, et ensuite ils lui donnent probablement une capacité de 50 par exemple. Mais je pense que c'est une erreur que beaucoup de gens font. Et, et je pense que ça a l'air juste. La meilleure chose que j'ai trouvé que vous devriez faire est que vous devriez réellement donner au bouton une couleur qui est plus une sorte de couleur bleue plus claire ou plus claire comme ça. Je pense juste que cela semble beaucoup mieux que d'utiliser un blanc et ensuite de le changer pour lui donner une certaine capacité ferait pour ceux-ci en fait, nous avons utilisé l'arrière-plan un peu comme par exemple parmi apporter ces tourner autour là. Oui, je pense que ça marchera. Et encore une fois, avec ce texte ici, la, Je pense que la plupart des gens feraient blanc, puis lui donner une opacité. Mais nous ne voulons pas faire ça. Nous voulons lui donner une teinte bleutée, mais d'une couleur bleue comme ça. Et puis on peut faire la même chose pour les autres. Tu sais quoi, je vais copier et coller celui-là juste pour le rendre un peu plus facile pour moi. Et nous voilà. Vous pouvez voir que nous avons pris une grande application, application gris très foncé, et nous l'avons donné un peu de couleur et il ressemble beaucoup différemment. Il donne à l'Apple un peu plus de personnalité, lui donne un peu plus de couleur, et donne juste l'impression qu'il y a une sorte de marque derrière elle. Donc, oui, c'est génial d'utiliser des gris. Tu ne peux pas utiliser les noirs et les gris si c'est le look que tu cherches. Mais si votre marque a une couleur d'accent comme une couleur bleue comme ici, alors je pense que c'est toujours une bonne idée d'ajouter un peu de bleu à votre grâce, vos noirs et blancs. 4. Espacement des lettres: Quelque chose que j'aime faire quand il s'agit de mes dessins est que j'aime augmenter ou diminuer l'espacement des lettres en fonction du texte et du contexte. Donc, par exemple, ici nous avons une image, nous avons une catégorie, nous avons un titre, et nous avons du texte. Quelqu' un SMS. Et je vais faire, c'est que je vais copier tout ça pour que je puisse vous montrer un avant et un après. Donc on va le copier là-bas. Oui. Et ce qu'on fera, c'est qu'on fera tout ça en majuscules. Et puis nous augmenterons l'espacement des lettres de 50%. Maintenant, c'est un peu trop. Faisons 10%. Nous y sommes. Je pense que ça a l'air bien. Et je pense que cela fonctionne très bien quand il s'agit de petits morceaux de texte comme ça, étiquettes de lumière intérieure et de choses comme ça. Avoir des lettres majuscules avec un espacement semble beaucoup mieux que ce que vous voyez ici. Mais quand il s'agit de titres, ce que j'aime faire, c'est que j'aime diminuer l'espacement des lettres. Donc, réduisons ça à peut-être moins 5%, quelque chose comme ça. Et nous voilà. Ça fait des lettres beaucoup plus rapprochées et ça ressemble plus à un titre. Et vous pouvez vraiment voir la différence. Décidez où il n'y a pas d'espacement de plomb et de ce côté où il y a un espacement laser accru et un espacement des lettres réduit. 5. Hauteur de lignes de texte: Tant de programmes conçus. Et généralement, lorsque vous développez un site Web ou un site de code et que vous mettez du texte, le texte peut sembler un peu trop compact, trop rapproché. Cela rend la lecture du texte beaucoup plus difficile qu'il ne devrait l'être. Et un très facile à, qui beaucoup de gens que je pense manquer. C' est juste pour augmenter la hauteur de votre ligne. Donc, si nous allons augmenter la hauteur de la ligne où elle vient juste ici, c'est actuellement sur 17 comme sa valeur par défaut. Mais si nous l'augmentons à 22, par exemple, nous pouvons immédiatement voir que c'est tellement plus facile à lire. Il y a beaucoup plus d'espacement entre chaque ligne. Nos yeux trouvent qu'il est beaucoup plus facile de lire chaque ligne aussi. Et cela aide beaucoup quand il s'agit de lisibilité. Maintenant, la seule chose avec ça, c'est que tu ne veux pas avoir la même ligne haute. Si vous avez un titre, disons par exemple, si je, ou même juste une police plus grande en général. Donc si je fais celui-ci un peu plus grand, parce qu'il est un peu avoir 14. Et puis nous mettons la hauteur de la ligne aussi. Comme ça. Il est encore assez lisible même avec une police plus grande. Mais lorsque vous augmentez réellement la hauteur de ligne pour les polices plus grandes, vous ne voulez pas l'augmenter autant qu'avec un paragraphe. Donc, actuellement, il est à 29 comme valeur par défaut à moins qu'il suffit de l'augmenter à 32. Et oui, vous pouvez voir instantanément que c'est tellement plus facile à lire. Ce que je vais faire est en fait de les rendre un peu plus petits pour juste vous montrer les différentes laiteries côte à côte, combien d'une différence de laiteries. Donc, si nous copions et collons des jours, amenez-les ici. Et puis nous avons mis auto comme une hauteur de ligne. Nous pouvons voir ce côté ici est avec la hauteur de ligne augmentée. Et ce côté ici est juste une hauteur de ligne et modifiez-le. Et il est tellement plus facile de lire le côté qui a la hauteur de la ligne augmentée. Donc, vous avez très rapide, astuce simple pour tous ceux qui font un site Web, tous ceux qui ont affaire à n'importe quelle sorte de gros corps de texte. 6. Largeur de paragraphe: Concevoir n'importe quel site Web, ou peut-être que vous concevez un blog ou quelque chose comme ça. Nous avons perdu du texte. Il est assez facile d'avoir de grandes images et de gros corps de texte. Cependant, je trompe Garcia lobule fabricants à un étirement le texte tout le chemin à travers le site, tout le chemin à travers, juste pour faire croire qu'il correspond à l'image. Mais c'est tout à fait faux et pas toujours vous devriez faire des choses parce que cela rend la lecture du texte assez difficile. Vos yeux doivent vraiment aller et venir pour lire chaque phrase. Et c'est en fait assez fatigant et assez ennuyeux pour le lecteur. Donc, une chose très simple à faire est juste de diminuer la largeur de votre texte. Et une bonne règle est de le garder entre 40 et 80 caractères par ligne. Maintenant, évidemment, n'est pas vraiment facile compter chaque caractère que vous avez sur chaque ligne. Mais comme vous continuez à le faire, fur et à mesure que vous résolvez, gâchez le design, aussi effronté, en jouant avec la largeur du texte, vous obtenez une bonne idée de ce qui est plus facile à lire et de ce qui fonctionne avec la police que vous utilisez. Donc oui, un autre conseil très rapide sur juste rendre votre texte plus facile à lire. 7. Mettez en place vos formes: Donc, quand il s'agit de formulaires, je vois que les sites Web de journaux ont des formulaires qui ressemblent à ceci, où vous avez tous ces champs de saisie et ils semblent être lourds. Et il n'y a pas de séparation. Juste beaucoup de champs de saisie. Et ce n'est pas très convivial, ne semble pas très soigné et bien rangé. Et quelque chose que vous voulez remplir. Maintenant, il est vraiment facile de corriger cela et il est vraiment facile de séparer chaque partie du formulaire et de le rendre plus digestible pour l'utilisateur qui remplit le formulaire. Donc ce que nous allons faire, c'est nous allons copier ça et nous commencerons d'abord en haut du formulaire. Alors commençons à séparer les choses. Ajoutons une bordure ici. Faites-le t pixels. Donnez-lui un gris très clair. En fait, on peut juste en faire un pixel. Et nous allons déplacer tous ces formulaires vers le bas. Donc nous allons faire notre forme de bit, un peu plus grand comme le sinus. Donc on va tout bouger d'un peu. Nous y sommes. Juste pour nous donner de la place. Ce que nous ferons, c'est que nous séparerons les champs d'entrée. Nous avons donc les champs d'entrée à droite, puis à gauche et avons une description de cette section. Donc, par exemple, ici, nous pouvons le titre info utilisateur, par exemple. Faites-le demi-os comme la couture. Ensuite, nous pouvons mettre une description pour cette section, ce qui, je pense, peut être très utile, surtout pour les personnes qui s'inscrivent. On peut aussi aider ici est de travailler dans un système de grille. Donc, nous pouvons voir que le champ d'entrée lui-même est 880 large. Et nous pouvons diviser cela en trois, puis mettre 20 pixels de panoramique entre chacun. Donc ça nous donne une colonne de 280. Donc, nous pouvons faire ce 280 par exemple, comme ça. Et puis nous abordons cela ici, donnons 20 pixels de rembourrage. Alors déplacez-le de 20 pixels, 12, puis faites notre champ d'entrée à 80. Comme disons, cependant, quand il s'agit de l'InputField réel, ne vous sentez pas comme vous devez vous en tenir à la 280. Ce que j'aime faire, c'est que j'aime concevoir le champ d'entrée tandis que la largeur du champ d'entrée, en fonction de la durée de l'entrée que je pense sera. Ainsi, par exemple, avec une adresse municipale qui peut varier beaucoup, elle peut être très longue ou très courte. Vous devez donc penser à la longueur du champ de saisie et à ce que vous prévoyez d'y aller. Donc un prénom et un nom de famille, généralement ils ne sont pas fous longtemps, donc on peut les amener ici. Et nous pouvons en faire 280. Et je pense qu'il y aura trop de problème. Alors on y va. Nous avons notre première section et nous pouvons déjà voir que c'est une différence énorme par rapport à ce que nous voyons ici, abordera dans la section suivante, qui est la section adresse. Donc, dans cette section, nous allons l'appeler adresse de facturation. Parce qu'il s'agit évidemment d'un formulaire d'enregistrement de paiement souple. Appelez ça l'adresse de facturation, comme ça. On va copier ça. Et comme je l'ai dit, je n'ai pas l'impression que vous deviez faire le champ d'entrée à 80. Et avec une adresse de rue unique, elle peut varier tellement. Donc je pense que c'est en fait une bonne idée d'avoir ceci comme un champ d'imput pleine largeur. Je pense que le champ de la ville pourrait réellement rester comme un 2-SAT avec la même chose avec le champ de l'État et du comté peut juste faire à 80 ici rapidement, comme si. Même avec le champ pays, puis même avec le code postal. Et puis nous avons notre dernière section, qui est les informations de la carte. Alors copions ça. Et nous pouvons mettre quelque chose comme juste pour rassurer l'utilisateur. Juste faire quelque chose en ce moment va augmenter la hauteur de la ligne de celui-ci. Apportez le nom du titulaire de la carte. Ouais, je pense qu'en fait ce serait une bonne idée de faire ce genre de numéro de carte de longueur, je pense que ça pourrait être 2-SAT. Et ce que nous ferons, c'est que nous garderons le numéro de la carte sur sa propre ligne. Parce que je pense que ça a beaucoup plus de sens. Avoir comme ça. Comme si nous allons apporter le bouton de registre là-haut. Et puis nous rendrons aussi notre forme compacte. Et on y va. Nous pouvons déjà voir qu'il y a une énorme différence par rapport à ce que nous avons ici. En fait, nous avons pris tous ces champs, imput field, et l'avons rendu, rendu le formulaire lui-même plus compact et aussi beaucoup plus lisible pour l'utilisateur. Ils peuvent voir ce qu'ils doivent remplir. Ils peuvent voir des séparations claires entre chaque partie du formulaire rend juste beaucoup plus digeste pour l'utilisateur. Et c'est un moyen très rapide et facile de rendre vos formulaires beaucoup plus faciles à lire. 8. Boutons de radio: Donc généralement quand vous concevez un formulaire, parfois vous aurez des boutons radio comme celui-ci et ils fonctionnent, ils ont l'air bien, mais je pense que nous pouvons faire un bien meilleur travail ici et rendre ces boutons radio plus beaux. Donc nous allons copier tout ça et le faire tomber comme ça. On va enlever les rayons. Et ce qu'on va faire, c'est mettre dans un rectangle, comme disons , peut-être lui donner des coins arrondis. Rends-le blanc. Donnez-lui une ombre portée. Amenez ça ici. Ce que je vais faire est en fait de le rendre plus facile, je vais juste tirer tout cela dans un dossier, séparer ceci en un nouveau calque de texte. Et puis on va faire ça un peu plus grand. Peut-être 18 en fait, faisons-le 1618, peut-être un peu trop grand. On se fait demi-incliner. Et quel est le prix ? Un peu plus grand pour l'amener. Et puis en dessous, on peut mettre un texte factice. Gros T, gros. En fait, supprimez une ligne. Et je pense que c'est déjà bien mieux. Donc nous allons le copier pour les autres aussi. Donc nous allons en faire un groupe. Et puis nous pouvons aussi faire un design pour ce sélectionné. On pourrait changer la couleur de ça. Pour être assez probable. Peut-être. On va y ajouter une grève. Et B fera leur grève pour nommer à nouveau. En fait, rendons ça plus lumineux aussi. Je pense qu'on devrait être plus mordant. Peut-être comme ça. Peut-être anti couleur un peu plus léger pour n'importe quel type. Et maintenant, c'est aussi simple que ça. Vous pouvez voir que nous avons pris vos boutons radio standard et les avons juste fait paraître beaucoup mieux et une description. Et il a simplement été plus facile de les lire et ajouté un joli style de design à eux. 9. Couleurs d'icônes: Donc, une erreur courante que je vois quand les gens conçoivent des interfaces utilisateur est quand ils font les icônes de la même couleur que leur police de texte. Donc ici, nous pouvons voir que nous avons l'icône, nous avons le texte, mais il n'a pas l'air juste. Et l'icône semble qu'ils sont un peu à vous attendu. J' ai l'impression qu'ils retirent un peu trop d'attention du texte lui-même et qu'ils ne sont tout simplement pas pondérés correctement. Donc, un bon moyen et un moyen très facile de corriger cela est de le copier et de le coller. Le cirque vous montre la différence. Nous faisons littéralement simplement l'icône une couleur plus claire que le texte lui-même. Donc, il peut y avoir quelque chose dans le coin. Oui. Je pense que ça a l'air bien. Et puis nous le ferons pour chacun d'eux. Donc maintenant que nous avons fait, si chacune des icônes, vous pouvez voir une énorme différence entre ce côté ici et décider ici. Il semble juste un peu plus neutre, un peu plus égal en ce qui concerne les couleurs et les poids, même si le texte lui-même est en fait une couleur sombre que les icônes elles-mêmes. Donc, ce n'est qu'une astuce rapide sur la fabrication ou le tableau de bord. icônes et les étiquettes semblent un peu plus égales. 10. Ne élargissez pas les icônes: Donc, lorsque vous mettez des icônes dans l'un de vos designs, généralement les icônes que vous mettez dans impair signé par un designer américain qui a déjà conçu leurs icônes à une largeur et une hauteur définies. Donc beaucoup d'icônes de diacre différentes tailles. Mais par exemple, ces icônes sont actuellement à 64 par 64, mais la taille d'origine de ces icônes, ou en fait 32 par 32. Donc, je les ai agrandies ici pour s'adapter la carte et pour avoir l'air plus qu'ils prennent plus de place. Cependant, c'est en fait une erreur. Ce n'est pas quelque chose que tu devrais faire. Et c'est quelque chose que je vois beaucoup de jeunes designers faire. Lorsque vous voulez avoir des icônes plus grandes. Habituellement, les icônes devraient avoir plus de détails à mesure qu'elles deviennent de plus en plus grandes. Si vous agrandissez une icône plus petite, vous agrandissez simplement quelque chose qui est déjà conçu pour être dans un très petit espace et agrandissez qui n'a tout simplement pas l'air correct. Il ne coule pas vraiment avec le design. Et clairement l'icône elle-même n'a pas été conçue pour être agrandie. Donc, ce que nous allons faire est que nous allons prendre ceci et nous allons changer ces icônes à leur taille d'origine. Mais nous voulons aussi qu'ils prennent la place, pour prendre une, une bonne quantité d'espace sur la carte elle-même. Et il y a un moyen très rapide et facile de le faire. Donc nous allons copier celui-ci vers le bas. Par exemple, fera de l'icône sa taille d'origine de 32. Et ce que nous ferons, c'est que nous ajouterons un cercle derrière l'icône. Alors faisons-le 80 par 80. Comme disons, je le jette derrière l'icône. Centrons ça. Et puis centrons l'icône à l'intérieur. Ordres aussi. On va faire la brûlure d'Ikhwan. Et puis nous ferons de ça la couleur bleue qu'on avait. En fait, on va le faire un peu plus. Je pense que je pourrais être un peu trop grand. Faisons 70 par 70. La zone. Et nous pouvons déjà voir que cela a fait une énorme différence parce que cette icône a été conçue pour être 32 sur 32, pas 64 sur 64. Alors faisons-le aux autres aussi. Et nous y sommes. C'est une petite différence, mais je pense que cela apporte un grand changement, un grand impact de la conception. Parce que la plupart des icônes ne sont pas vraiment conçues pour être plus petites ou agrandies. Ils sont conçus pour être la taille qu'ils sont conçus, et c'est tout le but d'eux. Et une bonne façon de les faire prendre plus de place est d'ajouter des formes derrière eux comme je l'ai fait ici, n'a pas besoin d'être un cercle. Vous pouvez en faire un carré, vous pouvez en faire un diamant, un hexagone, quelle que soit la forme que vous voulez, où que la forme corresponde à votre marque. Et il avait juste un moyen rapide d'améliorer vos icônes dans vos designs. 11. Faites le mode sombre correctement: Donc, nous adoptons le mode étant aussi populaire qu'il est. La plupart des gens, ce qu'ils font, c'est qu'ils vont concevoir ou voir leur version légère de l'application, comme vous pouvez le voir ici. Et puis ils vont juste inverser leur design. Et ça a l'air bien. C' est vraiment fonctionnel. Ça n'a pas l'air juste. Encore une fois, il n'a pas l'air juste, l'avoir inversé. Et la raison en est lorsque vous concevez une interface lumineuse, ce que vous faites habituellement est que vous avez les couleurs plus sombres en arrière-plan et puis il avait les couleurs plus claires au premier plan. C' est ce qui crée de la profondeur. C' est ce qui donne l'impression que les choses surgissent sur le design. Et quand vous faites cela avec un concepteur inversé et la lumière inversée faite, les arrière-plans réels sont plus légers que les actions qui sont devant vous. Alors corrigeons ça. Donc nous allons copier ça. Et puis nous avons seulement besoin de faire quelques ajustements et c'est vraiment pas beaucoup. Donc, nous allons commencer avec le fond va rendre cela considérablement plus sombre. Et là, je pense que ça a l'air assez bien. faire cela aussi darpa et doit être plus sombre que les boutons réels eux-mêmes. Comme disons, vous savez quoi déjà, je pense que ça semble beaucoup mieux. Et vous pouvez voir ce que nous avons fait, c'est que nous avons fait des couleurs plus sombres en arrière-plan où elles devraient être. Et nous avons fait les couleurs plus claires au premier plan où elles devraient être. Et il rend juste l'obscurité pourrait sembler beaucoup mieux et juste beaucoup plus agréable à l'œil que d'avoir les couleurs réelles elles-mêmes inversées.