¿Que te parecio el taller?

“Hay varias cosas que un diseñador debe tener en cuenta a la hora de diseñar un Newsletter. Además del mensaje y el diseño publicitario, es importante prestar atención a cómo el destinatario recibirá el News en su correo electrónico, cómo lo verá: con fotos, sin fotos, con qué tipografías. Aquí presento algunos conceptos básicos sobre Newsletters en HTML para que la campaña sea realmente efectiva.
Un Newsletter es generalmente parte de alguna campaña de promoción. Aunque la empresa esté informando y no promocionando, esta pieza de comunicación sigue siendo un reflejo de la imagen que la empresa quiere dar, con la que deberían identificarla.” ALEJANDRA | elwebmaster.com

1. El Asunto
El “tema” del News debe estar condensado en el nombre del Asunto, que verá el destinatario en su bandeja de entrada de su e-mail. Aquí no se puede andar con rodeos. Debe ser un mensaje fuerte y claro. Poniendo un ejemplo: una empresa de viajes que promociona diferentes paquetes turísticos, elegirá la mejor promoción para incluir en el Asunto como: “Consigue un 20% de descuento en tu viaje”, sin detallar de qué viaje se trata. Lo que queremos conseguir es que el destinatario se sienta interesado y quiera leer nuestro e-mail.

2. El mensaje

Es importante que el diseño tenga diferentes “capas”, dependiendo de la importancia del mensaje. Así, en un News como el de la fotografía se pueden leer esos niveles como:
Mensaje principal: “Small Hotels, BIG Personalities in SFI”
Mensaje de apoyo: “Boutique Hotels on Union Square”

Cuerpo del mensaje: Aquí se incluirá el detalle de la promoción. Fíjate con atención que hay dos párrafos destacados: el primero, a modo de introducción, en negrita; y el tercero, donde se detalla el valor monetario de la oferta, en rojo. Así, el destinatario puede leer sólo lo que le interesa de forma rápida, sin tener que leer de más para encontrar lo que busca. El texto rojo es un mensaje claro y obvio. También destaco que el precio está bien resaltado. La persona interesada en el precio puede leer directamente eso y profundizar en el resto de la información si es que realmente le interesa.
Cuando en el cuerpo de un mensaje hay demasiada información, todo pierde pregnancia. En el caso de un instituto de educación que promociona cursos, podrán decir que todos los cursos son igual de importantes, pero no todos pueden estar al mismo “nivel” en el diseño. Se puede elegir uno o dos para destacar, luego cuatro en un segundo nivel y el resto en un tercer nivel. De esta manera, se logra captar la atención del destinatario sobre un punto. Si no existe un diseño basado en niveles, el destinatario deja de leer, se marea por la información.
En esta imagen se puede ver que el texto de la izquierda posee mucha información y toda en el mismo nivel, mientras que en el texto de la derecha la información está “ordenada” en niveles. El lector le prestará atención a los primeros tres artículos y seguirá leyendo si está interesado.

3. No abusar del logo
Es molesto que el logotipo de la empresa se vea repetidamente en una pieza de comunicación. Por eso, con uno o dos logos es más que suficiente. Acuérdate que el logotipo debe ir siempre linkeado a la página de la empresa.

4. Aviso legal
En el pie o footer del Newsletter debes agregar un aviso legal indicando que el Newsletter ha sido enviado por cortesía de la empresa. Aclara que:
la empresa no comparte la dirección de correo del destinatario con ninguna otra empresa
la empresa no envía correo basura o “spam”
el destinatario puede dejar de recibir el Newsletter (debes indicar allí mismo cómo hacerlo: a través de un correo electrónico, dirigiéndose a alguna parte del sitio web, etc.)
En el Newsletter de Micro Star International, el footer se ve así:

5. Si no ves el Newsletter…
Los News suelen subirse como un sitio web. Esto es así para poder redirigir a los usuarios a una página, en caso de que no puedan ver el correo. Así, el destinatario tiene la posibilidad de ver nuestro mensaje de cualquier manera.
Para esto, debes incluir en la parte superior del News, un enlace con algo parecido a: “Si no ves nada, haz clic aquí: http://www.agenciadeviajes.com/newsletters/news21.html”

6. Evita el uso de CSS
Como muchos proveedores de correo no muestran los estilos adjuntos a un mensaje, debes evitar trabajar con CSS, tanto como una hoja adjunta como dentro del código HTML en forma de estilos (<style>) al inicio del código.

En vez de eso, debes tratar cada elemento de forma individual. Si a todos los subtítulos le asignabas el estilo <h3> que quedaba estipulado en un CSS, ahora deberás asignárselo a cada uno por separado de esta manera: <td style="font-family:'Trebuchet MS', Verdana, Arial; font-size:13px"><font color="#333333">. Es un poco fastidioso, pero te aseguras de que el cliente vea el e-mail tal cual lo has diseñado.

7. Manejo de tipografías
Cuando en el código le asignas aun texto un estilo de tipografía o fuente, debes incluir tres opciones: font-family:’Trebuchet MS‘, VerdanaArial. Muchas personas no tienen ciertas fuentes instaladas en sus computadoras. Esto significa que jamás verán el News con la fuente que tu has elegido, pero puedes darles opciones. En este caso, Trebuchet MS es la fuente predeterminada. Si el destinatario no la tiene, verá el News con Verdana, y si no tiene Verdana, lo verá con Arial. Escoge fuentes similares para que el News mantenga una continuidad con el diseño original.


8. Imágenes

Quizás lo más destacado a la hora de diseñar un Newsletter es el tema de las imágenes. Hoy en día la mayoría de los proveedores y programas de manejo de correo electrónico deshabilitan las imágenes. Para verlas, el usuario debe seleccionar la opción de habilitarlas, pero no todos lo hacen. Entonces es el desafío del diseñador, crear un News donde la información importante no esté incluida en las imágenes, sino que estas sean más bien un accesorio.

También debe lograr que cuando las imágenes no se muestran, no quede un espacio vacío en su lugar que moleste o que esté muy destacado. Yo personalmente, ubico las imágenes y luego las reemplazo por elementos grises del mismo tamaño. Así tengo una idea de cómo verá el News una persona que no haya habilitado las imágenes.

Con respecto al color, debes tener en cuenta que muchas veces los textos aparecen sobre una imagen, y a veces se plantea un problema cuando la imagen de fondo es oscura y el texto es blanco o claro. ¿Por qué? Porque si las imágenes están deshabilitadas, se muestra un fondo gris y el texto no se ve. En este caso, lo que debes hacer es asignarle un color oscuro a la table donde va a ubicarse la imagen:

<td width="426" height="115" background=”URL de la imagen” bgcolor=”#000033″>

9. News listando contenido
Muchas veces, los Newsletter buscan informar sobre el último contenido o las últimas novedades de un sitio web. Este es el caso del News de ElWebmaster.com, donde se listan los artículos de la última semana. En estos Newsletters lo más importante es que la información sea clara, que el listado tenga algún tipo de distinción de “capas”, con contenido más y menos importante bien diferenciado, ninguna o pocas imágenes y enlaces claros a las páginas del sitio que estamos recomendando. No es necesario que el News esté alojado en Internet como una página web.

10. Newsletter de imágenes

También existen Newsletter donde la imagen es tan importante que el 80 por ciento del News está basado en imágenes. Las empresas con mucho desarrollo en publicidad gráfica prefieren este tipo de comunicación. Cuando el destinatario tiene deshabilitada la opción de mostrar imágenes, estos News se ven como cajas vacías. Aquí es sumamente importante incluir la opción de “Si no ves el Newsletter…”.
Estos News deben dejarse únicamente para campañas de promoción y envío de novedades, nunca para mensajes informativos que deben ser recibidos sí o sí, puesto que es probable que sean pocos los destinatarios que lleguen a leer el mensaje completo.
En la imagen superior se puede ver cómo queda un Newsletter basado en imágenes y uno donde las imágenes son accesorios del contenido, cuando quedan deshabilitadas.

Fuente: elwebmaster.com

Los invitamos a participar de la Cuarta Bienal de Tipografía, Tipos Latinos 2010 a desarrollarse en la Estación Belgrano (Ala Oeste), desde el 19 al 26 de junio inclusive.
La entrada es libre y gratuita a muestra y charlas

19-06 | 18:00 hs: Presentación del libro “Curiosidades Tipográficas” – Horacio Gorodischer.
25-06 | 18:00 hs: “¿Para qué sirve el diseño de información? ” – Horacio Raspeño, Natalia Ginsburg

Fechas para tener en cuenta:

15/03 al 25/06: Primer Cuatrimestre
28/06 al 02/07: Semana de Consulta
28/06 al 30/06: Inscripción al turno Julio
05/07 al 10/07: Mesa de Exámen de Turno Julio (1).
12/07 al 23/07: Receso Invernal
26/07 al 30/07: Semana de Consulta
26/07 al 28/07: Inscripción Turno Agosto
02/08 al 06/08: Mesa exámenes Turno Agosto (2)
05/08 al 11/08: Inscripción al 2º Cuatrimestre
17/08 al 27/11: Segundo Cuatrimestre (sc)
6/12  al 11/12: Mesa exámenes Turno Noviembre (3)
20/12 al 28/12: Mesa de exámenes turno diciembre (4)

Mas Información: Dirección de Enseñanza y Asuntos Estudiantiles FADU, e-mail: estudiantes@fadu.unl.edu.ar.

(1) Los exámenes de fecha 9 de Julio se trasladan en bloque al sábado 10 de Julio.
(sc) Las asignaturas de cursado anual inician su cursado el lunes 9 de agosto.
(3) Los exámenes de fecha 8 de diciembre se trasladan al sábado 11 de diciembre.
(4) Las fechas son 20, 21, 22, 27 y 28 de diciembre.

Por que reinventar la rueda cuando podemos inspirarnos con diseños novedosos y elegantes. Siempre es bueno tener recursos a mano para optimizar nuestros tiempos y aumentar la productividad.

Fuente: dzineblog.com

Generalmente, a los diseñadores nos gusta trabajar con maquetas fijas, pues de este modo controlamos con exactitud cada píxel en nuestra composición. Pero puede ocurrir que frente a un pedido necesitemos trabajar con alguna unidad de medida distinta al píxel.

Por ello es que aquí adjunto primero una tabla de equivalencia  y segundo una aplicación muy muy util.

Reed Design: Tabla de equivalencia entre: Puntos, Píxeles, Ems y Porcentaje.
Em Calculator: Ingresas Píxeles, obtienes Ems.

Saludos!

Navegando me encontré con una lista de 28 tutoriales para aprender a crear efectos de luz, muy bonitos todos.

Fuente: CSSBlog.es

Hola, aquí les dejo cuatro enlaces que pueden servirles de inspiración al momento de encarar un diseño web.

CSS Remix | CSS Vault | FWA | CSS Manía

Otra cosita, les comparto una aplicación gratuita llamada kuler, con la que podrán armar fácilmente patrones de colores a partir de un color o bien a partir de una imágen que pueden subir desde su pc.

Espero les sea de utilidad. Saludos!

calendario

agosto 2017
L M X J V S D
« Ago    
 123456
78910111213
14151617181920
21222324252627
28293031  

Estadísticas

  • 23,325 visitas

Ingrese su dirección de correo electrónico para suscribirse y recibir notificaciones por e-mail.

Únete a otros 13 seguidores

Únete en Facebook

Porque compartir hace bien.