El gadget más popular, y posiblemente el que más se ha mencionado, es la impresora 3D. Es una herramienta que puede revolucionar la forma en que se fabrican los productos. Pero también hay otro tema tridimensional que genera ondas en el mundo del diseño: las imágenes en 3D.
A pesar de que el diseño del sitio web en realidad vive en dos dimensiones, no impide que los diseñadores flexionen sus músculos creativos y empujen los límites de la pantalla con más objetos y proyectos que tienen una sensación de vida real. Echemos un vistazo a cómo puede aprovechar al máximo la tendencia 3D.
Trabajando en tres dimensiones
Cuando se trata del diseño de sitios web, es más probable que los efectos tridimensionales vivan en un espacio 2D. (Particularmente porque tratar de armar algo que requiere lentes especiales no es particularmente efectivo. ¿Cómo sabría qué usuarios los tenían?)
Cuando se trata de usar, los efectos 3D pueden funcionar bastante bien para una variedad de diferentes opciones de sitio. Desde interfaces de estilo de juego hasta compras e identificación de productos, una interfaz que los usuarios casi pueden tocar resulta bastante útil.
También es cada vez más moderno incorporar efectos y estilos 3D en el diseño. Justo cuando los diseñadores empezaron a pensar en 3D hace unos años, la loca popularidad del diseño plano detuvo la tendencia, porque imitar una estética realista requiere técnicas que fueron desalentadas como un impulso plano. Los efectos tales como sombras, biselado y relieve son vitales cuando se trata de crear profundidad de campo en el espacio 2D a 3D.
Una tendencia en evolución
Entonces, ¿cómo puede aprovechar al máximo esta tendencia en constante evolución? Mezcla y combina con otros estilos de tendencias para un máximo impacto.
Aquí hay algunas cosas a considerar cuando se trata de usar imágenes 3D:
- Añade una sensación realista a los elementos que los usuarios querrán tocar
- Añade profundidad al juego o elementos de video
- Hazlo parte de la interfaz con el desplazamiento de paralaje
- No abrume a los usuarios y siga un truco 3D en el diseño
- Mantener el resto del diseño simple.
- Cuando se trata de usabilidad, guíe a los usuarios a través de cómo navegar o usar herramientas
Capas e Influencias Materiales
Trabajar con efectos 3D está ganando impulso gracias a Material Design. El concepto de diseño basado en Google ha ayudado a recuperar algunas de las técnicas y efectos que pasaron de moda con estilos más planos y mínimos.
Esto incluye el uso de sombras paralelas, sí, están de vuelta. Pero sí tienen una consideración más cuidadosa, de modo que las sombras paralelas siempre imitan la luz de una "fuente". Eso significa que las sombras deben parecer naturales porque un elemento tiene profundidad, no existe únicamente para resaltar un poco de texto o un objeto.
Si bien no quieres volverte loco con las sombras, las sombras pequeñas en varios objetos están bien. Las mejores sombras son aquellas que tienen un propósito, pero no son obvias para el usuario ocasional. Si alguien puede? Ver? La sombra, probablemente sea demasiado. Opta por sombras pálidas, suaves y que realzan la realidad.
Uno de los conceptos clave del Diseño de materiales es la idea de estratificar objetos en planos. La documentación incluso enfatiza el uso del espacio 3D:
El entorno material es un espacio 3D, lo que significa que todos los objetos tienen dimensiones x, y y z. El eje z se alinea perpendicularmente al plano de la pantalla, con el eje z positivo que se extiende hacia el espectador. Cada hoja de material ocupa una sola posición a lo largo del eje z y tiene un grosor estándar de 1dp, equivalente a un píxel de espesor en pantallas con una densidad de píxeles de 160.
En la web, el eje z se usa para capas y no para perspectiva. El mundo 3D se emula manipulando el eje y.
Entonces, al pensar en 3D, es tan vital considerar cómo se mueven e interactúan los objetos como pensar en las técnicas de diseño involucradas en su creación.
Ilustraciones 3D y Animación
Uno de los lugares donde realmente puede tomar imágenes en 3D al siguiente nivel es con ilustraciones, imágenes de objetos y animaciones. Los minoristas en línea, en particular, hacen un gran trabajo al incorporar efectos animados en 3D en las páginas de productos.
Uno de los mejores usos de esto es con las opciones de visualización de 360 grados para productos que los compradores pueden mover y examinar virtualmente con unos pocos clics o toques. Converse hace un gran trabajo de esto con sus páginas de zapatos. Los usuarios pueden mover cada espectáculo para verlo desde cualquier ángulo, además de cambiar los colores y otras opciones en un lienzo que hace que el usuario se sienta como si estuviera en un entorno sosteniendo el zapato y mirándolo.
Este es un uso efectivo de imágenes en 3D para el diseño de sitios web. Es complicado y genial, pero abrumador fácil de usar. (Ese es el verdadero truco para hacer que esto, o cualquier técnica de diseño, funcione de una manera que tenga sentido para los usuarios).
Consejos y trucos
Cuando se trata de imágenes en 3D, lo simple es mejor. No desea abrumar a los usuarios con demasiados efectos o elementos que son solo para mostrar. Debido a que el diseño tridimensional es todo una ilusión visual en el plano, el lienzo del sitio web, es importante no volverse loco con los trucos. Céntrese en la facilidad de uso del contenido y decida desde allí si el 3D es el camino correcto.
Cuando se trata de usar 3D, tenga en cuenta estos consejos:
- Usa 3D para separar objetos de su entorno (capas)
- Apunta a sombras sutiles o grabados en relieve, y recuerda considerar un "natural". Fuente de luz cuando se trata de ángulos y colocación.
- Tiene que parecer real
- Los degradados y los resaltes también pueden crear profundidad y capas.
- Usa efectos 3D consistentemente en todas las páginas
- Si el 3D está asociado con una acción, como un clic, proporcione indicaciones que ayuden al usuario a entender qué hacer (los botones son un elemento 3D común)
- Elementos de escala apropiadamente; 3D es una ilusión de la realidad, por lo que los objetos deben sentirse "reales"? En tamaño, peso y ambiente.
Conclusión (y una palabra de precaución)
Ahora, lo que quiere evitar es terminar con una tipografía 3D o imágenes que se parecen a la palabra arte de los primeros procesadores de texto. (Puede quedar atrapado y terminar con este resultado más rápido de lo que cree).
El truco para los efectos tridimensionales es la sutileza. Debería haber elementos de realidad y capas, pero no debería ser un truco obvio. o efecto Los buenos efectos 3D animan a los usuarios a participar y jugar con la interfaz, gracias a una técnica que les ayuda a saber más intuitivamente qué hacer.