L'imprimante 3D est le gadget le plus en vogue de nos jours. C'est un outil susceptible de révolutionner la fabrication des produits. Mais il existe également un autre sujet tridimensionnel qui fait des vagues dans le monde du design: les visuels 3D.
Même si la conception de sites Web a deux dimensions, cela n’empêche pas les concepteurs de faire preuve de créativité et de repousser les limites de l’écran avec plus d’objets et de projets réalistes. Voyons comment tirer le meilleur parti de la tendance 3D.
Travailler en trois dimensions
En ce qui concerne la conception de sites Web, les effets tridimensionnels ont toutes les chances de vivre dans un espace 2D. (Surtout parce qu'essayer de mettre en place quelque chose nécessitant des lunettes spéciales n'est pas particulièrement efficace. Comment savoir quels utilisateurs en ont eu?)
En ce qui concerne l'utilisation, les effets 3D peuvent très bien fonctionner pour une variété d'options de site. Des interfaces de style de jeu aux achats en passant par l'identification des produits, une interface que les utilisateurs peuvent presque toucher s'avère très utile.
Il devient également de plus en plus tendance d'intégrer des effets et des styles 3D au design. Alors que les concepteurs commençaient à penser à la 3D il y a quelques années, la folle popularité du design plat a mis fin à la tendance, car imiter une esthétique fidèle à la réalité nécessite des techniques qui ont été découragées, car le mouvement a pris de l'ampleur. Des effets tels que les ombres portées, le biseau et le gaufrage sont essentiels pour créer une profondeur de champ dans l'espace 2D vers 3D.
Une tendance en évolution
Alors, comment tirer le meilleur parti de cette tendance en constante évolution? Associez-le à d'autres styles tendance pour un impact maximal.
Voici quelques éléments à prendre en compte lorsque vous utilisez des éléments visuels 3D:
- Ajoutez une touche réaliste aux éléments que les utilisateurs voudront toucher
- Ajoutez de la profondeur aux éléments de jeu ou vidéo
- Faites-en une partie de l'interface avec le défilement parallaxe
- Ne surchargez pas les utilisateurs et ne vous contentez plus que d'une astuce 3D
- Gardez le reste de la conception simple
- En ce qui concerne la convivialité, indiquez aux utilisateurs comment naviguer ou utiliser des outils.
Superposition et influences matérielles
Travailler avec des effets 3D prend de l'ampleur grâce à Material Design. Le concept de design basé sur Google a permis de ramener certaines techniques et effets démodés avec des styles plus plats et minimaux.
Cela inclut l'utilisation d'ombres portées - oui, elles sont de retour. Mais ils prennent plus en considération pour que les ombres portées imitent toujours la lumière d’une "source". Cela signifie que les ombres doivent sembler naturelles car un élément a de la profondeur et non uniquement pour mettre en évidence un texte ou un objet.
Bien que vous ne vouliez pas devenir fou avec les ombres, de minuscules ombres sur plusieurs objets sont acceptables. Les meilleures ombres sont celles qui servent à quelque chose mais qui ne sont pas évidentes pour l'utilisateur occasionnel. Si quelqu'un peut? Voir? l'ombre, c'est probablement trop. Optez pour des ombres pâles, douces et soulignez la réalité.
L'un des concepts clés de la conception de matériaux est l'idée de superposer des objets sur des plans. La documentation met même l'accent sur l'utilisation de l'espace 3D:
L'environnement matériel est un espace 3D, ce qui signifie que tous les objets ont des dimensions x, y et z. L'axe z est perpendiculaire au plan de l'écran, l'axe z positif s'étendant vers l'observateur. Chaque feuille de matériau occupe une position unique le long de l'axe z et a une épaisseur standard de 1dp, équivalente à un pixel d'épaisseur sur les écrans d'une densité de pixels de 160.
Sur le Web, l’axe des z est utilisé pour la superposition et non pour la perspective. Le monde 3D est émulé en manipulant l'axe des ordonnées.
Par conséquent, lorsqu’on pense à la 3D, il est tout aussi vital d’examiner la manière dont les objets se déplacent et interagissent que de réfléchir aux techniques de conception impliquées dans leur création.
Illustrations 3D et animation
Les illustrations, les images d'objets et l'animation sont l'un des endroits où vous pouvez vraiment faire évoluer les visuels 3D au niveau supérieur. Les détaillants en ligne, en particulier, font un excellent travail en incorporant des effets animés 3D dans les pages produits.
L’une des meilleures utilisations de cette fonctionnalité est la possibilité d’options d’affichage à 360 degrés pour les produits que les acheteurs peuvent pratiquement déplacer et examiner en quelques clics ou tapotements. Converse fait un excellent travail avec ses pages de chaussures. Les utilisateurs peuvent déplacer chaque émission pour la voir sous n’importe quel angle, modifier les couleurs et d’autres options, le tout sur une toile qui donne à l’utilisateur l’impression d’être dans un environnement tenant la chaussure et la regardant.
Il s’agit d’une utilisation efficace des visuels 3D pour la conception de sites Web. C'est compliqué et cool, mais incroyablement convivial. (C'est le vrai truc pour faire en sorte que cela - ou n'importe quelle technique de conception - fonctionne réellement d'une manière qui ait du sens pour les utilisateurs.)
Trucs et astuces
Quand il s'agit de visuels 3D, mieux c'est. Vous ne voulez pas écraser les utilisateurs avec trop d’effets ou d’éléments qui ne sont que pour le spectacle. Parce que la conception en trois dimensions est une illusion visuelle sur le plat, le canevas du site Web, il est important de ne pas devenir fou avec des astuces. Concentrez-vous sur la convivialité du contenu et décidez à partir de là si la 3D est la voie à suivre.
Lorsque vous utilisez la 3D, tenez compte de ces conseils:
- Utilisez la 3D pour séparer les objets de leur environnement (superposition)
- Visez les ombres portées subtiles ou le gaufrage, et pensez à considérer un? Naturel? source de lumière en ce qui concerne les angles et le placement
- Il doit avoir l'air réel
- Les dégradés et les tons clairs peuvent également créer de la profondeur et des couches
- Utilisez les effets 3D de manière cohérente sur toutes les pages
- Si la 3D est associée à une action, telle qu'un clic, fournissez des repères qui aident l'utilisateur à comprendre quoi faire (les boutons sont un élément 3D commun)
- Échelle des éléments de manière appropriée; La 3D est une illusion de réalité, alors les objets doivent se sentir? Réels? en taille, poids et environnement
Conclusion (et un mot de prudence)
Maintenant, ce que vous voulez éviter, c'est de vous retrouver avec une typographie ou des images en 3D qui ressemblent à l'art des mots des premiers traitements de texte. (Vous pouvez être rattrapé et arriver à ce résultat plus rapidement que vous ne le pensez.)
Le truc pour obtenir des effets tridimensionnels est la subtilité. Il devrait y avoir des éléments de réalité et de superposition, mais cela ne devrait pas être une évidence. ou effet. De bons effets 3D encouragent les utilisateurs à utiliser et à utiliser l'interface, grâce à une technique qui les aide à savoir plus intuitivement quoi faire.