Consideraciones para hacer un Rediseño Web

Todo negocio debe atravesar por momentos de cambios, en especial aquellos que tienen presencia en el mundo digital. Por ello, si tu marca tiene una página web es importante que te informes sobre la importancia y los beneficios que tiene hacer un rediseño web cada tanto tiempo.

Pensando en eso, hemos resumido 5 beneficios que seguro ayudarán a tu web a lucir mejor y alcanzar objetivos reales con tu audiencia.

Pero antes que todo: haz backup de tu contenido.

1. Pensar en la comodidad de tus usuarios

Una página web bien diseñada  puede lograr que un usuario se sienta a gusto en tu página. Para alcanzar esto debemos primero crear una interfaz sencilla y con un diseño intuitivo, así las personas que entren al portal podrán saber de forma rápida a dónde ir.

Por ejemplo, si tu objetivo es obtener más suscriptores para tu newsletter, debes darle importancia a este aspecto y ubicarlo en un sitio de tu página donde sea fácil de ver y acceder pero que no sea invasivo.

En la actualidad está muy de moda usar las ventanas pop-up para promocionar newsletters o pedir suscripción a la web. Esto puede resultar molesto para aquellos usuarios que NO desean realizar dicha acción, logrando así que abandonen el sitio, recordemos que las personas suelen ser más perezosas en internet y buscan la inmediatez.

Las páginas que suelen implementar un rediseño web pensado para el usuario tienen en cuenta 2 factores:

  • Interfaz de Usuario (UI)

Es la parte del diseño web que se enfoca en la funcionalidad de la web y la forma en la que el usuario se comunica con esta. Una interfaz de usuario simple y bien planificada logra también una gran “experiencia de usuario”, algo que te detallaremos más adelante.

Para tener una buena interfaz de usuario, tu web debe funcionar como una especie de guía, conteniendo detalles obvios que permitan acceder rápido y fácil a tus servicios.

Por ejemplo, la interfaz de usuario son todos los botones, menú y accesos que están en tu web, esas partes diseñadas para que tu usuario interactúe con tu página.

  • Experiencia de usuario (UX)

Es el conjunto de elementos sensoriales que permiten al usuario sentirse a gusto dentro de la plataforma. Esto va siempre unido a la interfaz de usuario, ya que es el total de la suma de varios estímulos.

La experiencia de usuario no es solo la accesibilidad fácil que tenga el usuario sino cómo se siente navegando por tu website. Muchas marcas suelen hacer estudios de mercado para entender los colores, las formas y los conceptos visuales que estimulan a su público meta.

En sí, la experiencia de usuario se encuentra en los detalles que le ofreces a tu cliente para entender tu producto, para hacerlo interesante y venderlo con más facilidad.

Para hacer análisis de cómo podrías mejorar tu experiencia de usuario te recomendamos que uses los programas para analizar las zonas de calor de tu web, esos lugares donde tus usuarios suelen hacer más clic. Con esto podrás identificar la ruta que toman y cómo mejorarla. Estos programas son:

Los gratuitos:

  • Page Analytics (by Google)
  • Yandex Metrika

De pago:

  • Clicktale
  • Zarget

2. Seguir las 3 reglas básicas para un buen diseño

  • Un diseño obvio, donde las palabras importantes estén resaltadas en negrita,  a lo que nos referíamos anteriormente con “diseño intuitivo”, ese orden de ideas e imágenes que resultan fáciles de comprender para el usuario. Ejemplo: si tu página web es un E-Commerce, lo más importante es que ubiques la barra de búsqueda de productos en la parte superior de la web y que el usuario al entrar puede redireccionar su vista hasta ahí.
  • Diseñó psicológico, en este caso las empresas buscan entender a sus usuarios segmentándolos por preferencias, con el fin de entender sus gustos y adaptar el diseño a ellos. Recuerda que todo comunica, por lo que la selección de colores e imágenes influirá en las reacciones de tus usuarios.
  • Minimalismo, el minimalismo funciona para todos los propósitos, porque al final lo que una persona quiere al entrar a una web es inmediatez. El minimalismo le ofrece a tu web la ventaja de alejarte de la contaminación visual y ofrece al usuario la sensación de accesibilidad y facilidad, es común ver a personas salirse de sitios web muy recargados puesto que su visibilidad se ve perturbada y les lleva más tiempo llegar a lo que están buscando.  

3. Adaptabilidad móvil

Hasta ahora una web que no se adapte a las plataformas móviles va quedando en el pasado y representa un obstáculo para sí misma. Lo más curioso es que no necesitamos estudios muy exhaustivos para saber que todos pasamos muchas horas en nuestros teléfonos y hemos emigrado algunas de las actividades que hacíamos en nuestro ordenador para realizarlas en nuestro smartphone.

El rediseño que vayas a implementar a tu web debe enfocarse en ser más simple, práctico e incluso hasta más cómodo a la hora de visualizarse en un teléfono móvil.

Piensa en estrategias para mejorar la experiencia del usuario como colocar el menú o un botón de contacto en el lado derecho y en la parte inferior de la pantalla, porque las personas diestras pueden colocar su pulgar más cómodamente allí a la hora de usar su teléfono. Piensa incluso en alguna estrategia para que el menú cambié de posición si la persona indica que es zurda.

Toda esta adaptación e innovación harán que tu interfaz se convierta en una experiencia placentera. Evitarás frustraciones para los usuarios a la hora de acceder a tu plataforma.

4. Mejorar los tiempos de carga

Qué lindas esas páginas que parecen una obra de arte pero tardan demasiado en cargar (sarcasmo). Ten presente siempre cuando quieras ejecutar tu nuevo rediseño web que además de verse bien, que sea rápida. Aquí es donde ves que diseñar una página es el epítome de equilibrio.

Los tiempos de carga pueden mejorarse de muchas formas, primero toma en cuenta el peso de las imágenes que subas. Recuerda no tener tantos pluggins para tu web, debes prestar atención al tiempo de respuesta de tu servidor, sé bien detallista con el servidor que contrates.

Hay muchas otras cosas que pueden entorpecer la velocidad de carga de tu página así que considera mejorar este aspecto.

5. Términos de analítica web que te ayudarán con tu rediseño

Luego de establecer un objetivo para poder ejecutar tu rediseño web, debes hacerle seguimiento a tu página. Incluso antes de hacer el rediseño ya el análisis tuvo que haberse hecho, para entender qué mejorar. Cada negocio tiene un propósito distinto, por eso es importante saber cuáles métricas vamos a analizar según nuestra página web, pero en sí, para saber si el rediseño está siendo positivo, estas son las más importantes:

  • Visitas mensuales
  • Visitas por ubicación
  • Visitas por dispositivos
  • Porcentaje de rebote
  • Fuentes principales de tráfico (redes sociales u otros sitios webs donde salga tu página)
  • Cantidad de leads por mes
  • Números de ventas por mes
  • Nivel de conversión (esto se mide en Google Analytics, ya sea en sus objetivos o por estructurar paneles donde vayas revisando el progreso de ciertos aspectos de tu web.

Antes de hacer un Explainer Video sigue estos pasos

Cualquier tema puede ser fácil de explicar, si se consigue el medio adecuado. Por ello, cada vez las marcas prefieren más los Explainer Video (Vídeos Explicativos), breves animaciones audiovisuales que permiten promocionar un producto, servicio o comunicar cualquier idea de la forma más simple posible.

Los Explainer Video son vídeos donde se les da la ilusión de movimiento a imágenes, colores o fotografías. Con la unión correcta de colores, música y orden de ideas, cualquier tema puede resultar de más fácil comprensión.

Pero primero, debes tener claro ciertas cosas que te permitirán organizarte y llegar más rápido a tu propósito.

Pasos para crear un Explainer Video:

1. Guión

Antes de transmitir un mensaje o explicar un tema, debemos concretar “la idea principal”. A esta idea debemos darle relevancia y lograr que todo lo que digamos sea para darle cuerpo a la idea.

Por ejemplo, en Ciwok realizamos un Vídeo Explicativo para la app Tid Bit, cuya idea principal era explicarle a los usuarios cómo usarla y el beneficio que le brinda a su día a día.

Tid Bit es una app para “foodies” en donde los usuarios pueden crear un perfil y compartir reseñas de restaurantes con su comunidad digital, dándoles puntuación y participando en la generación de una matriz de opinión sobre el lugar, comida o servicio que ofrecen. Además, permite ubicar los restaurantes más cercanos y conocer lo que tus amigos piensan sobre ellos, influyendo (o no) en la decisión final de qué comer.

La idea principal del guión para dicho video animado no era solo enseñar a los foodies a usar la app sino también motivar a formar parte de esta comunidad, porque, al final, a todos nos gusta la comida.

Partiendo de allí, decidimos crear una secuencia explicativa lineal del uso de la app mediante la simulación  de situaciones en las que se vería envuelto un usuario.

Asimismo, decidimos explicar lo que provee la aplicación. No cómo usarla a nivel técnico de usuario, sino los beneficios recreativos que ofrece ser parte de esta comunidad.

2. Storyboard

Una vez lista tu idea principal y tu guión, hay que hacer un storyboard. Recuerda que un Motion Picture se sostiene en imágenes, por lo que aquello que te interesa presentarle al cliente es un borrador gráfico de cómo lucirá su video.

El storyboard puede ser a lápiz o digital, lo importante es concretar los planos que tendrá el video. Es una parte esencial del proceso, puesto que un buen storyboard te permitirá venderle al cliente una mejor idea de lo que será el video.

Una vez hayas pasado la etapa de sudar frío esperando saber  lo que dice el cliente, te toca llevar todo a la parte audiovisual y aplicar los ajustes finales o aplicar los cambios previstos por el cliente al storyboard.

3. Diseño y creación de escenarios, personajes y objetos que comprenden la historia

Esto no es animar, recuerda que debes primero diseñar (con el software que mejor se adapte a tu trabajo) todas las secuencias del video, una por una, y una vez se realicen cada una de las escenas sin importar el orden pasarán por el proceso de edición final.

Nosotros utilizamos Photoshop para el diseño de personajes, After Effects, Anime Studio Debut y Premiere para la animación.

La razón por la que se usaron estos programas de animación es porque Anime Studio cuenta una interfaz amigable para la animación, After Effects es perfecto para la postproducción y la incorporación de efectos. Por su parte, Premiere es ideal para la edición general del vídeo (incorporación de sonido, ordenar las escenas, etc).

Pero tú siempre puedes recurrir al software que mejor se adapte a ti. Es importante que el storyboard final represente de forma gráfica la historia que se quiere contar. Una vez que todos los escenarios, personajes y elementos están ilustradas, toca animar.

4. Animando

Una vez realizado el cuerpo de nuestro video se procede al paso que requiere más tiempo; la animación. El animador establecerá un patrón de movimiento para sus personajes, desde cómo caminan hasta cómo mueven las manos o expresiones del rostro. Todo de acuerdo a lo que se quiera expresar.

Crear un Explainer Video tiene varios pasos, primero el animador debe crear un rigging, que es el paso de la animación donde podremos básicamente controlar “como marionetas” a nuestro personaje.

En el caso de Tid Bit nos tomó de 2 a 3 meses, aproximadamente, hacer todo el vídeo. El reto más grande a la hora de animar es lograr naturalidad y fluidez en los movimientos. Así que ¡sé paciente!

5. Edición de sonido

Todo en esta vida amerita de un soundtrack, por lo que debes escoger, con mucho cuidado, la música de tu video explicativo. Primero: selecciona una canción que no rompa con las leyes de copyrights, para ello YouTube cuenta con una galería de canciones gratuitas que puedes utilizar. También existen stocks de música gratuita o por suscripción mensual.

Segundo, recuerda que algunas acciones deben llevar su complemento de sonido, por ejemplo, si en tu guión suena la bocina de un auto o el encendido de un motor.

Para TidBit se grabaron alguno de los sonidos con Audacity, es decir, no fueron descargados.

De todas maneras, existen bancos gratuitos de efectos de sonidos. Te adjuntamos una lista:

Una vez elegida la canción y cada uno de los sonidos a elegir, vendría a cabo la post producción, en donde nos aseguramos de darle los retoques finales. Recuerda que lo más importante de toda campaña, y de este creciente mundo del Marketing Digital, será el contenido, así que pon tu foco en él.

Los medios evolucionan y, con ellos, la forma en la que comunicamos. Por eso, los recursos audiovisuales están ayudando a las marcas a proyectarse cada vez más.