Consejos para actualizar tu diseño web | Súmate Marketing Online

21 de septiembre de 2017

Escrito por Montse Muñoz

Qué difícil es destacar en un mundo donde parece estar todo inventado, ¿o no? El diseño web es fundamental como sello de identidad de tu sitio. Pero presenta el mismo reto de todo aquello que está sujeto a modas, tendencias y, además, a una rápida evolución tecnológica: es tan cambiante que hoy puedes tener el diseño web más innovador y mañana estar el último en la cola, porque avanza de una forma imparable. En muchas ocasiones desempolvamos tendencias que parecían estar muertas y que, sin embargo, resurgen con más fuerza que nunca.

Si estás pensando en crear tu propia web o darle magia y frescura a la que ya tienes, estas ideas pueden servirte de inspiración. No obstante, no podemos olvidar que un diseño web innovador y creativo tiene que responder, a la vez, a unas características óptimas de SEO y usabilidad.

Modelos innovadores en diseño web

Con el auge de la visualización de contenido web en diferentes dispositivos móviles además del ordenador de sobremesa, y con la necesidad de que estos contenidos se adapten mejor y generen tiempos de carga cada vez menores, están surgiendo nuevos criterios y estructuras de diseño web. Vamos a ver tres innovaciones que tomarán fuerza este 2018:

  • Diseño en esqueleto. Este diseño permite que la web se cargue en etapas, es decir, de lo más simple a lo más complejo, proporcionando en el proceso de carga un esqueleto de pantalla para que el usuario pueda ir haciéndose a la idea de la estructura que va a encontrar. Ésto significa un aumento en la usabilidad del lugar visitado, haciendo más amena la espera. Esta técnica ya está empezando a ser utilizada por sites como Facebook o linkedin.
  • Diseño modular. Aunque los diseños hamburguesa siguen siendo una práctica muy extendida, irán perdiendo fuerza para dar relevo al diseño modular. Este diseño hace que la web funcione mediante módulos. Su mayor ventaja es que estos módulos actúan de manera independiente, proporcionando una gran capacidad de adaptación a las dimensiones de cada dispositivo, a diferencia de las webs que funcionan como una sola unidad. Un ejemplo de ello es Pinterest.
  • PWA (aplicaciones web progesivas). Se comporta como una aplicación nativa pero utiliza tecnología web, ocupando menos espacio e incrementando su funcionalidad. Asímismo, se está tendiendo a crear las web pensadas para dispositivos móviles para más tarde adaptarlas a los demás formatos, puesto que la adecuación inversa es más fácil.

Colores y formas

Los colores en diseño webLos diseñadores gráficos están de enhorabuena: cada vez existe más demanda de ilustraciones e infografías propias, dejando atrás los bancos de imágenes con fotografías a menudo repetitivas y poco originales. Triunfan los diseños más interactivos que se salen de cuadrículas y plantillas predeterminadas, dando lugar a diseños más imperfectos y diferenciadores.

Algunas de las tendencias que están tomando fuerza en cuanto al contenido gráfico de las webs están siendo:

  • Colores vivos, degradados y bicromatismos: haciendo la web más atractiva y contemporánea.
  • Formas geométricas y skeumorfismo (texturas de la vida real, como el diseño textil en la web).
  • Fondo sobre forma y superposiciones de colores simples para un efecto de profundidad y textura.
  • Flat design o diseño gráfico plano: regresando al diseño minimalista combinado con una imagen limpia y fondos blancos o pastel.
  • Minimalismo en branding y logos: surge a raíz del auge del visionado móvil, intentando que logos y marca no resten importancia al contenido de nuestra web.
  • Formas y botones personalizados: Es necesario que una web tenga personalidad y carácter en su diseño, reforzando así la identidad visual de la marca. Es muy larga la lista de pequeños detalles a los que podemos dar un toque especial para diferenciarnos, como por ejemplo los botones de call to action, error 404, animaciones de carga web, e incluso los mapas para localizar tus tiendas físicas.

En esta web pueden apreciarse muchas de estas tendencias: http://www.lapierrequitourne.com/

Imágenes, vídeos y efectos

Es esencial que, cada vez que introduzcamos un vídeo, imagen o efecto en nuestro sitio web, tengamos riguroso cuidado con los tiempos de carga, ya que éstos podrían repercutir en la usabilidad y en el nivel de calidad general. Estas son algunas ideas y efectos que podéis comenzar a probar en vuestros sitios para darle un mayor dinamismo al diseño:

  • Heroimágenes, Gifs o vídeos que ocupan toda nuestra página, sirviendo de carta de presentación de nuestra marca. Es recomendable que los vídeos sean entendidos sin sonido.
  • Microinteracciones: acciones que provocan un cambio cuando el usuario interactúa con ellos, por ejemplo, cuando introducimos un producto en el carrito, que éste se mueva o cambie de forma. Estas animaciones pueden también no necesitar interacción por parte del usuario para activarse, por ejemplo, un botón de call to action que posea alguna animación.
  • Efectos hover: se activa cuando el usuario se sitúa sobre una imagen y ésta cambia, mostrando otra imagen, texto o color.
  • Efecto parallax: son movimientos a distintas velocidades de elementos web que se activan al hacer scroll, dándole profundidad a la página. Estos efectos a menudo impresionan al internauta, no obstante, pueden despistar de lo importante y dañar nuestra indexación en buscadores. Aquí os dejo un ejemplo en el que podéis ver claramente este efecto sobre la web: https://www.teapot-creation.com/#/page/home
  • Realidad virtual y 360 como hemos hablado más extensamente en el post de tendencias en medios digitales.

Tipografías y tamaños

Al encontrarnos en una época en la que el contenido visual gana terreno al escrito, siendo éste más breve y amigable que hace unos años, el tamaño de letra utilizado es cada vez mayor para llamar nuestra atención:

  • En muchas ocasiones las tipografías son usadas como formas y no como texto para comunicar, como si se tratase de una ilustración.
  • Las tipografías “hand made” o vintage siguen estando presentes al conseguir una mayor diferenciación y distinción de las habituales. No obstante, las tipografías circulares y la Sans Serif también ocupan gran lugar entre las preferidas por los usuarios.
  • Tipografías desencuadradas, así como el texto en superposición con imágenes.
  • Si eres atrevido y te gusta innovar, la tendencia a combinar textos o títulos horizontales y verticales es perfecta para llamar la atención de los internautas.

A la hora de darle forma a nuestra web hay que tener en cuenta que es imprescindible la colaboración entre diseñadores y desarrolladores web para asegurarnos de su buen funcionamiento. Lo esencial cuando hablamos de diseño es jugar con él y testar qué es lo que funciona mejor, porque todo es prueba y error.

Por último te dejo una página que puede servirte de inspiración para tu diseño web: www.designspiration.net

Te ayudamos con tu estrategia digital

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Por Montse Muñoz

Tu privacidad es importante para nosotros. Súmate utiliza la información que proporcionas para ponerse en contacto contigo en relación con contenido, productos y servicios relevantes para ti. Puedes darte de baja para dejar de recibir este tipo de comunicaciones en cualquier momento. Si deseas obtener más información sobre la protección de tus datos en HubSpot, consulta nuestra Política de Privacidad.