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

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

SÍ, QUIERO… ¿pero qué?

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

• 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!

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

#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

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

Dimensiones dinámicas, contextos

dinámicos y tú sin bola de cristal

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

#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

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

#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?

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

Mensaje claro y conciso: A medida que la pantalla

disminuye su tamaño, menos

verá el usuario en un primer

vistazo.

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

Estructuras modulares y acotadas: La simplicidad es la clave.

Cuantos menos elementos

deban re-acomodarse, más

controlable será el resultado.

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

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 ;)

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

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

Guidelines de Apple

recomienda una zona mínima

de tapping de 44 × 44 puntos.

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

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.

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

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.

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

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.

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

#tips extras =)

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

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?

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

UX/UI Designer en Doppler

Mariana Massimino

https://www.behance.net/marianamassimino

¡GRACIAS!

@dcv_mariana