Este documento presenta consejos para diseñar un boletín informativo (newsletter) responsivo. Recomienda mantener el diseño simple con pocos elementos para que se ajuste fácilmente a diferentes pantallas. Sugiere estructurar la información en módulos que se muevan juntos cuando se reduzca el espacio, y considerar una resolución mínima de 320px. Además, aconseja usar fuentes legibles de al menos 13px y espacios en blanco para separar bloques de texto.

1. WEBINAR #DOPPLERACADEMY

2. UX/UI Designer en Doppler
Mariana Massimino
Cómo diseñar un Newsletter Responsive | Mariana Massimino#DopplerAcademy |

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

4. 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ÑÍA
CENTRADO EN TUS
PRODUCTOS/ SERVICIOS
CENTRADO 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

5. 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.

6. ¿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 |

7. 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

8. 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.

9. ¡Genial! Tenemos lo básico
¿Profundizamos?
Cómo diseñar un Newsletter Responsive | Mariana Massimino#DopplerAcademy |

10. 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 |

11. 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 |

12. 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 |

13. ¡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 |

14. 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 |

15. 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 |

16. 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 |

17. #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.

18. ¿Preguntas?
Cómo diseñar un Newsletter Responsive | Mariana Massimino#DopplerAcademy |

19. UX/UI Designer en Doppler
Mariana Massimino
https://www.behance.net/marianamassimino
¡GRACIAS!
@dcv_mariana