Doppler Academy: Cómo diseñar un Newsletter Responsive

WEBINAR #DOPPLERACADEMY

UX/UI Designer en Doppler

Mariana Massimino

Cómo diseñar un Newsletter Responsive | Mariana Massimino#DopplerAcademy |

Cómo diseñar un

Newsletter Responsive


SÍ, QUIERO… ¿pero qué?


• Artículos educativos

• Artículos Editoriales

• Eventos

• Novedades de la industria

CENTRADO EN TU

COMPAÑÍACENTRADO EN TUS

PRODUCTOS/ SERVICIOSCENTRADO EN TU

INDUSTRIA

• Promociones

• Nuevos productos

• Nuevas herramientas de compra

• Reseñas de productos

• Novedades de la compañía

• Testimonios

• Historias exitosas

• Staff

#Tip. Selecciona info de valor sostenible en el tiempo

Ordenar, ordenar, ordenar…

¡ahhhhhhhhhh!


#Tip. Se consistente en el tiempo

Una vez que hayas decidido esto puedes comenzar a

jerarquizar estos módulos de información y sobre todo

a agruparlos con sentido.

¿Ya podemos comenzar a diseñar?

Sabemos que queremos mostrar primero, que será el

cierre pero…

¡No tan rápido! un email no es un impreso


Dimensiones dinámicas, contextos

dinámicos y tú sin bola de cristal


#Tip. Mantén tu diseño lo más simple, limpio y

jerarquizado posible.

A diferencia de un impreso, un Email se reproduce tantas

veces como el usuario lo abre:

• Clientes de correo con interfaces y limitaciones técnicas diferentes.

• Diversidad de dispositivos y contextos

• Resoluciones diferentes de pantalla

Entendiendo el concepto

de diseño fluido


#Tip. Cuantos menos elementos poseas,

más sencilla será la tarea.

Antes de tomar decisiones respecto de cómo ubicar tus elementos

debes comprender una regla muy sencilla: A medida que reduzcas

su espacio horizontal, buscarán recuperar ese espacio perdido

hacia abajo.

Ubica tus elementos

sobre espacios

modulares.

¿Por qué? De esta

manera dejarán de

comportarse como

elementos individuales

para moverse en

grupo.

¡Genial! Tenemos lo básico

¿Profundizamos?


Mensaje claro y conciso: A medida que la pantalla

disminuye su tamaño, menos

verá el usuario en un primer

vistazo.


Estructuras modulares y acotadas: La simplicidad es la clave.

Cuantos menos elementos

deban re-acomodarse, más

controlable será el resultado.


Resolución mínima Diseña siempre teniendo en

cuenta el mínimo en que se

verá tu news 320px. Sobre

todo para la longitud de tus

botones ;)


¡No todos tienen dedos pequeños! IOS Human Interface

Guidelines de Apple

recomienda una zona mínima

de tapping de 44 × 44 puntos.


Tamaños de fuente generosos Asegúrate de que tu mensaje

se pueda leer fácilmente. El

tamaño mínimo sugerido para

hacerlo cómodamente para el

ojo humano es de 13px.


Genera bloques identificables Apóyate en el uso de

espacios en blanco para

separar mejor los bloques

de información y así lograr

una lectura más cómoda.


Utiliza herramientas optimizadas El universo html es basto, si no

cuentas con los recursos para

generar un html ¡no temas!

Doppler cuenta con un editor

que soporta plantillas 100%

responsive.


#tips extras =)


Optimiza para dispositivos retina.

Simplemente exporta tus imágenes al

doble de tamaño.

Comprime tus imágenes.

Ten en cuenta que la velocidad y calidad

de conexión desde mobile nunca será la

misma que desde escritorio.

tinypng.com

Mantén la cabecera limpia.

Esto evitará que tu bloque principal

quede debajo del scroll.

Números de teléfono tapeables.

De esta manera tus usuarios podrán

llamarte fácilmente.

¿Preguntas?


UX/UI Designer en Doppler

Mariana Massimino

https://www.behance.net/marianamassimino

¡GRACIAS!

@dcv_mariana

Marketing

Doppler Academy: Cómo diseñar un Newsletter Responsive