•  | 
  • 4 min

Resizer, la nueva herramienta de diseño y programación web de Google

El diseño y la interacción son partes fundamentales de los productos digitales. Visualizar las webs en distintos dispositivos como PCs, smartphones y tablets de manera optimizada se ha convertido en un proceso fundamental para las empresas. Ya no se trata solo de estar presentes, ahora es importante también conseguir el mejor diseño, el más atractivo y adaptado para todos los clientes.

Los diseñadores y desarrolladores de productos digitales tienen por delante el reto de ofrecer el mejor servicio a los clientes a través de las webs de cada empresa. Necesitan conseguir el mejor resultado visible para que las empresas ofrezcan sus productos y hacerlos visualmente atractivos para todos. No es una tarea sencilla y para ello deben tener en cuenta la resolución multi-pantalla de cada web y aportar un diseño web apropiado.

Google ha empezado a ofrecer material gráfico, guías y recomendaciones para el diseño web y las interfaces. A través de Resizer, una herramienta de Google, con la que podemos descubrir de manera dinámica, fácil, sencilla e intuitiva cómo conseguir un diseño responsive a través de ayudas y conversaciones con muchos diseñadores y desarrolladores en todo el mundo. Puedes introducir una URL y pre-visualizarla empleando diferentes funciones, materiales y demos disponibles.

Explorando patrones

Hay varios patrones potenciales que podemos seguir a la hora de cambiar el tamaño de la pantalla, así como sus componentes: desplegables, divisiones, expansiones, transformaciones, etc. Todo puede ser visualizado previamente para mejorarlo a través de demos y showcases.

A través de las demos podemos dar un estilo propio basado en un tamaño de pantalla, cambiar y transformar la app y el tamaño de la misma, la posición y cambios posibles de diseño en diferentes tamaños de pantalla a móvil. Al mismo tiempo, podremos modificar los formularios web, cambiar las acciones y los links visibles, iconos y otras acciones. Todo ello para transformar la experiencia web de los usuarios, haciéndola más sencilla para facilitar la compra y fomentar el ecommerce y a su vez el mobile commerce.

¿Qué será lo próximo?

Desarrollar varias guías de sonido con un diseño responsive está aún en proceso. Conseguir una imagen visual consistente, capaz de solventar cualquier problema de diseño y tamaño, es una tarea que está en desarrollo y se pretende conseguir una solución mediante showcases.

Ya están disponibles varios recursos en la web de Google, en la que puedes conseguir más de 900 iconos y aprender sobre su diseño. Son los ya conocidos como iconos 2.2 y, a través de los 933 recursos disponibles en la librería, destacan los que son empleados frecuentemente en webs para valorar la experiencia y satisfacción con los productos y servicios.

Estos recursos suponen nuevas oportunidades para crear un lenguaje visual y sintetizar los principios del buen diseño a través de la innovación, la tecnología y la ciencia. Google afirma que se actualizarán los materiales de diseño y continuarán desarrollándolos para ofrecer más y mejores iconos a los diseñadores y programadores webs.

google-diseñadores

Lo material es una metáfora

La tecnología avanza y lo virtual se convierte en real, un ejemplo son las impresiones 3D.  Las cosas que conforman lo racional se convierten en material, transformando así lo teórico en algo táctil que se inspira en estudios de papel. Pero la tecnología avanza y las reglas de la física también: la flexibilidad de los materiales permite nuevas posibilidades físicas y oportunidades de negocio. La luz, el movimiento y la interacción existen en el espacio real mostrando la división de las partes del movimiento.

Las tipografías, los espacios, márgenes, escalas, colores y la composición visual son los elementos más importantes en el diseño de una web, además de las propias imágenes y vídeos embebidos o incrustados. Debemos tener todos los aspectos muy en cuenta y no pasarlos por alto si queremos conseguir la mejor experiencia de usuario en la web.

El movimiento, las acciones y los efectos visuales transforman el diseño de una web. Hacerlo de manera sencilla sin romper la experiencia de usuario continuada en la web es difícil. Además surge la necesidad de otorgar al usuario una apropiada navegación y mantener la atracción y foco sobre los contenidos. Las transiciones deben ser eficientes y coherentes además de claras y sencillas.