Comprendre la résolution et les images dans la conception de l'interface utilisateur

1. Intro: Bonjour. Je suis Christine, designer d'interface utilisateur UX. Et aujourd'hui, nous allons voir comment les images fonctionnent dans la conception de l'interface utilisateur. Afin d'obtenir les meilleurs résultats en ligne, il est essentiel de comprendre d'abord la résolution de l'écran. Ce cours est donc organisé en deux parties. abord, nous allons démystifier la résolution d'écran, vraiment comprendre ce que cela signifie, pourquoi nous utilisons des points et non des pixels, et quelles tailles d'écran nous utilisons réellement pour baser notre design Comprendre les résolutions d'écran sera un avantage considérable pour tous les aspects de la conception de vos yeux, en particulier lorsqu'il s' agit de passer du design au développement Une fois que nous aurons compris les bases, nous examinerons les images, type, où les trouver et comment les manipuler pour faire briller votre design. Il s'agit d'un cours par apprentissage. 2. Résolution : résolution des points, pixels et écran: Parlons des points en pixels et de la résolution d'écran pour comprendre la taille dont vos designs doivent être configurés. Voyons d'abord ce que sont les pixels. Eh bien, les pixels sont essentiellement les petits points dont une image est faite. Il s'agit du plus petit élément d'une image. Notez que les images sont uniquement des signes en pixels. La typographie et les arrière-plans ou les boutons sont des vecteurs. Cela signifie qu'ils sont constitués d'équations mathématiques. C'est pourquoi ils peuvent être redimensionnés à n'importe quelle taille, et la résolution de l'écran ne les dérange pas vraiment du tout. Cependant, les pixels ne sont pas vraiment une mesure fiable car ils dépendent de la résolution de l'écran, appelée DPI ou également connue sous le nom de PPI, pixels par pouce. Cela mesure le nombre de pixels dans 1 pouce. Plus le DPI de l'écran est élevé, plus il y a de pixels entassés dans ce pouce, et donc plus l'image est nette Ainsi, comme vous pouvez le constater, une mesure, par exemple, ou quatre pixels auraient une taille physique très différente selon les résolutions d'écran. Le DPI est déterminé par l'appareil de l'utilisateur, vous ne le saurez donc pas à l'avance et vous ne pouvez pas non plus l'influencer. Nous avons donc besoin d'une sorte de mesure de l'espace quelle que soit la résolution de l'écran, mais toujours par rapport aux pixels, et c'est là que les points entrent en jeu. Mais commençons par le tout début. 3. Résolution : pourquoi nous concevons à 1x: Dans le passé, un point équivalait à bm pixel et la vie était assez simple. Sur de nombreux écrans, c' est encore le cas aujourd'hui. Cependant, la résolution de l'écran a d'abord été améliorée par Apple avec l'écran Retina. Soudainement, dans le même espace physique, vous placeriez quatre pixels au lieu d'un. J'ai doublé le DPI tout en gardant la même taille d'écran physique. Cela est allé encore plus loin avec des écrans tels que le super retina de l'iPhone 11 Pro, par exemple, qui a triplé le DPI Cela signifie que le pixel n'était plus un moyen de mesure fiable, car il signifiait des choses très différentes selon les écrans. C'est pourquoi nous avons introduit une mesure sous forme taille physique de votre design, quelle que soit la résolution de l'écran. Au fait, j'utilise simplement les iPhones ici à titre d'exemple, mais ce serait exactement la même chose pour la conception d'ordinateurs de bureau Maintenant, la question la plus courante et elle vous vient probablement aussi à l'esprit, est quelle est la taille que j' utilise pour configurer mon design ? Le plus grand possible ? Non. Nous et je ne le soulignerai jamais assez, toujours selon ce concevons toujours, et je ne le soulignerai jamais assez, toujours selon ce que l'on appelle le One X. Cela peut sembler un peu confus, Cela peut sembler un peu confus, mais je vais vous montrer pourquoi nous le faisons. Prenons donc l'exemple de l'iPhone 4 Retina. Donc, pour ce grain, comme pour tout autre, nous pouvons obtenir les mesures en pixels, et nous pouvons obtenir les mesures en points. N'oubliez pas qu'à deux x, un point ressemblera à ceci en pixels. Ainsi, pour configurer nos designs, nous utilisons toujours les mesures en points et non les mesures en pixels. Ainsi, nous configurons notre design automatiquement pour qu'un point soit égal à un pixel, et nous concevons sur ce que l'on appelle un X. Dans tous les logiciels d'interface utilisateur tels que Figma ou Sketch, vous avez des plans de travail prédéfinis que vous pouvez utiliser, et vous remarquerez qu'ils sont tous configurés sur un X, prêts à être 4. Résolution : obtenir les meilleurs résultats de toutes les résolutions: Alors, comment le design at one X garantit-il toujours une bonne qualité sur toutes les résolutions d'écran ? Il s'agit donc de notre conception configurée à un X où un point équivaut à un pixel. Ainsi, les éléments tels que les boutons de typographie, les icônes vectorielles et les illustrations s'adapteront d'eux-mêmes. Ils sont appelés éléments vectoriels, ce qui signifie qu'ils sont constitués d'équations mathématiques. Donc, en arrière-plan, ils s'adaptent simplement à la taille nécessaire. L'écran double essentiellement le pixel tout seul dans les coulisses, et vous n'avez rien à faire ? Il en va de même pour l'espacement, d'ailleurs. Supposons donc que vous ayez un espacement de 40 pixels sur votre one x, qui s'adaptera automatiquement à la même taille physique sur votre écran Retina Donc, il n'y a absolument aucune raison de s'inquiéter. Vous entendrez probablement beaucoup de gens parler d'un espacement de 40 pixels ou d'une police de 16 pixels, comme je viens Ils signifient en fait des points parce qu'à un X, c'est pareil. Ne vous y trompez donc pas. Cependant, n'oubliez pas que les images sont uniquement composées de pixels, elles ne sont donc pas redimensionnées automatiquement. La plupart du temps, ils sont stockés dans un fichier sur le serveur, puis littéralement extraits par le code lorsque nous en avons besoin. Le code ne peut donc intégrer que ce que vous fournissez. Ainsi, si vous ne fournissez qu'une image un x pour une résolution de deux fois, elle paraîtra très floue sur un écran Retina Donc, ce que vous faites, c'est de fournir ces images dans une résolution d'un, deux x et trois x. Le code est configuré de manière à ce qu'il puisse saisir la résolution de l'écran , puis simplement extraire la bonne image. C'est aussi pourquoi vous avez ce petit suffixe de deux x et ainsi de suite sur le nom de votre image pour identifier la bonne taille pour la bonne résolution d'écran C'est aussi pourquoi il est si important d' utiliser un logiciel d'interface utilisateur approprié tel que Figma ou Sketch qui vous permet de le faire et non un logiciel comme Photoshop Ne vous méprenez pas. J' aime beaucoup Photoshop, mais il est conçu pour la retouche photo et non pour la configuration de I Design car vous ne pourrez pas exporter vos images en plus grand format par la suite. Donc, avec le bon logiciel de conception, c'est très facile. Ici, je suis dans Figma, je ne fais que choisir mon image, puis sur le côté droit, j'ajoute un port Et vous verrez que cela commencera à un x. Je vais choisir un JPEG car il n' a aucune transparence, donc JPC fera l'affaire. Ensuite, au fur et à mesure que vous ajoutez plus, vous pouvez ajouter d'autres exportations. Tout ce que je fais, je vais également les changer en KPC, et vous pouvez voir qu'il a automatiquement ajouté un deux x pour les deux fois pour la résolution de la rétine, et une résolution trois x quatre et même plus Celui X n'a généralement pas de suffixe, vous pouvez donc le laisser comme ça Vous pouvez ensuite simplement cliquer ici sur Exporter exporter ces images dans le fichier que vous avez choisi. L'avantage de Figma est que vous n'avez même pas besoin de toutes les exporter vous-même, car si vous donnez accès à votre équipe de développement dans Figma, elle peut simplement sélectionner ces images et les exporter à la taille qu' 5. Résumé de résolution: Résumons. Nous utilisons des points. Le point est une mesure de l' espace quelle que soit la résolution de l'écran. Et nous concevons toujours à un x. Un point est égal à un pixel. espacement typographique et tous les éléments vectoriels s'adaptent à une densité de pixels plus élevée par défaut, vous n'avez donc pas à vous en soucier Les images doivent être exportées ou mises à disposition pour exportation pour des résolutions plus élevées pour votre équipe de développement. 6. Images en ligne : SVG JPG et PNG When et pourquoi: Dans cette vidéo, nous allons parler des images dans conception de l' interface utilisateur et de la manière de les placer et de les manipuler. Lorsque vous traitez des images en ligne, trois formats de fichiers différents peuvent vous être proposés. Le premier format serait le SVG. SVG sont destinés aux fichiers vectoriels, ce serait donc quelque chose comme des logos ou des icônes Les images ne peuvent pas être stockées format SVG car elles ne sont pas basées sur des vecteurs, mais sur des pixels Pour les images, le premier choix serait toujours le format JPEG. À moins que votre image ne soit transparente, vous devez l'enregistrer au format PNG. Vous pouvez également utiliser un fichier PNG si vous souhaitez enregistrer quelque chose comme un cercle ou quelque chose qui n'est pas une image rectangulaire , car l'arrière-plan doit alors être transparent. En ce qui concerne la taille du fichier, cela fonctionnerait également dans l' ordre présenté ici. Le SVG est toujours le plus petit. Si vous pouvez enregistrer vos images au format SVG, mais cela ne fonctionne que si le vecteur est basé, par exemple, sur des icônes Parfois, vous voyez un fichier SVG et la même image qu'un fichier PNG. C'est parce que le PNG sera ici une image de remplacement. Si vous utilisez des images et des photographies standard, format JPG sera votre premier choix. Ce sera toujours plus petit qu'un fichier PNG. Par conséquent, vous ne choisissez un fichier PNG que si vous avez besoin de transparence. 7. Images en ligne : Où trouver des images: Permettez-moi de vous montrer quelques endroits où vous pouvez trouver des images que vous pouvez utiliser dans la conception de votre interface utilisateur. Il est important de savoir que vous devez détenir les droits sur toutes les images que vous utilisez dans votre design, ou que vous devez trouver des images dites libres Vous ne pouvez pas simplement choisir n'importe quelle image sur Internet et la mettre sur votre site. Il est très important que vous le respectiez car cela pourrait avoir des conséquences juridiques. Ma page préférée pour les images est Splash. Splash propose non seulement une grande sélection de photographies, mais il est également libre de droits Cela signifie que vous pouvez utiliser toutes ces images gratuitement. En bref, vous pouvez soit simplement rechercher l'image exacte que vous recherchez, soit avoir ces belles catégories ici. Alors, par exemple, passons à la santé et au bien-être, et vous trouverez des choses vraiment géniales. De plus, si vous recherchez de grandes images d'arrière-plan, c'est génial si vous allez dans leur section nature , par exemple, vous pouvez voir que vous avez très belles photos parmi lesquelles choisir. Unsplash fournit également un plug-in pour Sketch et Figma. C'est donc vraiment génial de travailler dessus, alors vous pouvez simplement rechercher directement dans toute la base de données Unsplash et y placer les images Sinon, il vous suffit de cliquer ici, vous téléchargez votre image, puis vous pouvez simplement l' insérer dans votre design. Pixabay et Pixabay sont deux autres pages qui fonctionnent exactement comme Unsplash Même si elles sont libres de droits, certaines règles Assurez-vous de toujours vérifier la licence qui vous indiquera exactement ce qui est autorisé et certaines choses que vous devez prendre en compte si vous souhaitez utiliser ces images Parfois, vous recherchez quelque chose d'un peu plus spécifique ou de plus exclusif. ce cas, je vous recommande de regarder Shutterstock ou iStock photo Ils ont une très bonne sélection à un prix vraiment raisonnable. D'ailleurs, la plupart des pages que je viens de vous montrer contiennent également des illustrations et des fichiers vidéo. Si vous recherchez une illustration en particulier, alors je tiens à vous recommander une page intitulée Blush que j'adore absolument C'est de Pablo Stanley et c'est absolument incroyable. Il est livré avec un plug-in Figma et un plug-in Sketch, vous pouvez donc les utiliser très facilement directement dans vos fichiers de conception Et ce que fait Blush, c' est qu'il propose une sélection de différents illustrateurs, puis vous pouvez mélanger et assortir les C'est par exemple, sautez ici. Ensuite, vous pouvez voir qu'il y a différents éléments, puis plus tard dans votre fichier de conception , vous pouvez simplement les assembler , changer les couleurs et créer de très très belles illustrations. 8. Images en ligne : Placer les images et le format aspect: Voyons comment images doivent être placées dans votre design. Vous pouvez placer vos images dans le grain ou en tant qu' image pleine largeur en dehors de la grille Vous pouvez joindre autant de lignes de la grille que vous le souhaitez. Ici, par exemple, j'en joins deux, mais je m'assure ensuite ne pas les placer sur le caniveau si vous placez l'image suivante, du texte ou tout autre élément Chaque fois que cela a du sens, je recommande d' utiliser un rapport hauteur/largeur pour vos images. Le rapport hauteur/largeur est la relation entre la largeur et la hauteur de l'image. Ce n'est pas obligatoire, mais j'aime bien utiliser un rapport hauteur/largeur de 16 à 9. Et c'est assez courant. Par exemple, la longueur de cette diapositive de présentation est comprise entre 16 et 9. Vous pouvez également utiliser d'autres rapports hauteur/largeur, tels que un pour un, quatre carrés cinq pour quatre ou quatre pour trois, qui sont assez courants. Les rapports hauteur/largeur sont très pratiques car de cette façon, vous savez que toutes vos images fonctionneront toujours bien ensemble. Par exemple, vous avez peut-être commencé par placer votre image sur une grille à deux, puis vous souhaitez l'agrandir sur une grille à quatre avec d' autres images Cela ne pose aucun problème avec le rapport hauteur/largeur car toutes les images auront toujours proportionnellement la même hauteur lorsque vous les redimensionnez Comme d'habitude, n'oubliez pas que c' est quelque chose qui devrait vous aider. Il arrive donc qu'un rapport hauteur/largeur ne soit pas le bon choix. Par exemple, ici sur le côté droit , mon image de fond. Si je devais passer de 16 à 9, cela remplirait probablement tout l'écran, ce que je ne veux pas. Je les réduis donc un peu. Vous pouvez soit simplement calculer le rapport hauteur/largeur vous-même, soit utiliser un calculateur de rapport hauteur/largeur. Donc ici, par exemple, si je changeais celui-ci à 1 500, il calculerait automatiquement la hauteur pour moi. Je peux, bien sûr, ensuite arrondir aux pixels entiers. Ensuite, vous pouvez également choisir ici entre différents formats d'image et accéder directement à la nouvelle taille de pixel. 9. Images en ligne : Texte sur l'arrière-plan: Parlons maintenant un peu de la combinaison d' images d'arrière-plan avec du texte. C'est quelque chose qui est souvent utilisé dans que l'on appelle le héros ou la scène, ce que l'on appelle le héros ou la scène, et c'est la première chose importante que vous voyez lorsque vous ouvrez une page. Vous l' intégrez donc dans votre design, et cela semble parfait. Vous trouvez cet endroit agréable et gratuit pour placer votre texte et votre client l'adore absolument, puis la vraie vie s'installe. La conception de l'interface utilisateur n'est pas statique. Il se trouve dans le navigateur. Donc, avec cette taille, vous pouvez même toujours vous en tirer, mais vous pouvez voir que plus l'image est petite, plus le bouton disparaît dans l'orange. Et si vous voulez changer cela pour une image plus chargée, vous pouvez simplement imaginer que cela ne fonctionnera pas sur tous les appareils Alors, que pouvons-nous faire ? Une solution serait de fixer votre image d'un côté si vous avez une image relativement vide , comme celle-ci. Ici, par exemple, je le fixe à gauche. Mon exemplaire reste donc là où je l'ai mis, mais ma chaise se coupe un peu, ce qui est normal dans ce cas. Pour le design mobile, il vous suffit fournir une image entièrement séparée. Dans mon cas, je coupe simplement la chaise et je l'utilise comme ça, mais vous pouvez également utiliser une image complètement différente pour l'arrière-plan. Maintenant, il se peut également que vous ayez des images très chargées et que vous souhaitiez toujours les utiliser, comme dans ce cas. Ce que vous pouvez faire à cet endroit, c'est ajouter une superposition, et vous pouvez jouer avec la transparence ici Comme vous pouvez le constater, la superposition rend non seulement le texte plus lisible, mais ajoute également plus de couleur de votre marque au design Et cela lui donne un look encore plus sophistiqué. D'ailleurs, vous pouvez également ajouter cette superposition sur l'ensemble de l'image et réduire légèrement l'opacité Cela donne également un très bon résultat. 10. Images en ligne : traiter de petites images: Parfois, vous pouvez recevoir des images que vous souhaitez utiliser comme image de héros sur votre page, mais elles ne sont tout simplement pas assez grandes et semblent pixélisées Vous pouvez vérifier la taille en déposant simplement cette image dans votre logiciel de conception d'interface utilisateur, vous montrera alors les dimensions en pixels. Ou vous pouvez écrire collect sur n'importe quelle image de votre ordinateur, et cela vous donnera les informations. Ici, par exemple, je sais que j'ai un JPEG. C'est la taille de l'image, et ce sont les dimensions en pixels que je recherche. Donc, mon image ici mesure 1 200 pixels de large. Cela signifie que sur ma toile, lorsque je dessine sur un x, je vais l'utiliser sur une largeur d' environ 600 pixels. Cela me garantit que plus tard, je pourrai l'exporter au double de 1 200 pour la rétine tout en obtenant de bons résultats. Cependant, ce n'est certainement pas assez grand pour une image d'arrière-plan. Voyons donc ce que nous pouvons faire pour jouer avec si nous voulons toujours l'utiliser dans notre héros. Les images n'ont pas toujours besoin d'être taille réelle pour briller dans une section dédiée aux héros. Comme vous pouvez le voir ici, j'ai simplement ajouté de la couleur pour pimenter un peu le tout. Vous remarquerez que si vous jouez avec, vous pouvez toujours obtenir de très bons résultats. De plus, même si la plupart de vos contenus doivent vraiment s'adapter à la grille, avec une image de héros, vous pouvez faire une exception Vous pouvez, par exemple, retirer de la grille ou lui donner une très belle animation. L'avantage de travailler avec des images plus petites dans la section des héros, c'est aussi qu' elles se réduisent très bien sur mobile. 11. Résumé des images: Résumons ce que nous avons appris sur les images. Utilisez le format JPEG pour les images dans la mesure du possible en ligne. Pour plus de transparence, par exemple un arrière-plan transparent, enregistrez les images sous les formats P et G. Essayez d'enregistrer vos images avec un rapport hauteur/largeur dans la mesure du possible. Tenez compte de la taille et du comportement de redimensionnement lorsque vous choisissez de grandes images d'arrière-plan Utilisez une superposition sur les images très fréquentées. Vous devez également toujours fournir un texte complet pour les images. C'est très important pour l'accessibilité. 12. Merci: Bien fait pour finir ce cours. N' hésitez pas à nous contacter à Moon Learning dot io, nous sommes toujours intéressés à entendre vos commentaires. Vous feriez aussi une grande faveur si vous pouviez juste prendre une minute et laisser un commentaire juste ici. Si vous avez apprécié ce cours et assurez-vous également que vous avez un coup d'oeil à nos cours supplémentaires. Au point Moody Learning. Nous couvrons tous les sujets, depuis les fondements mêmes de la conception de l'interface utilisateur UX jusqu'à Figma et même quelques bases du code. Assurez-vous de visiter notre site Web à Moody Learning dot IO, où vous pouvez également vous inscrire à notre newsletter.