project DaD

Actions

  • IA
  • UX
  • Logo
  • Interfaz
  • Front-end
  • HTML
  • CSS

Cinemavip, red profesional audiovisual

image - - leave a reply -
cinemavip

Diseño y desarrollo front-end de Cinemavip en su versión 2009-20011.

Cinemavip fue la mayor red profesional audiovisual en España, al tener más de 100.000 usuarios y más de 3.500 empresas del sector, con lo que se puede asegurar que el 90% de los proyectos audiovisuales tendrán alguna relación directa o indirecta con esta red social y profesional.

El equipo

Arquitectura de la información

Lo más importante fue abordar la ingente cantidad de información y opciones de Cinemavip. En la nueva versión se ha hecho un especial hincapié en organizar, jerarquizar y etiquetar mejor dicha información, haciendo que esta sea más fácil de encontrar y gestionar.

cinemavip2

Diseño del Interfaz

El diseño de la versión anterior de Cinemavip presentaba números problemas, aún siendo conscientes del importante y radical cambio que esto supondría para el usuario habitual, se decidió afrontarlo y marcar un punto inflexión sobre el que mejorar poco a poco en aspectos de accesibilidad y usabilidad.

cinemavip2

Algunas peculiaridades del diseño

  • Un mejor aprovechamiento de los espacios para la información y publicidad. Existe en general más aire entre los diferentes bloques de información, lo que ayuda a su visualización y a la jerarquía de los contenidos.
  • Respecto a la versión anterior hay un notable aumento en el tamaño de la fuente con intención de mejorar la claridad, la capacidad de lectura y el rastreo general del sitio web.
  • Los enlaces son elementos más claros y destacados gracias a sus unidad en color y ubicaciones.
  • Los colores, tipografía e iconografía, ayudan a crear una personalidad propia más fuerte que en la anterior versión. Una identidad gráfica más definida que busca ser fácilmente recordada por los usuarios.
  • El diseño intenta ser unisex. Se cree que las mujeres perciben con más estética las formas curvas, por esta razón tanto la tipografía como algunos de los elementos del sitio web se disponen con formas curvas.

Diseño de plantilla e-mail y newsletter

También he abordado el diseño e-mail y newsletter, una herramientas muy importante en Cinemavip.

El problema del diseño de e-mails radica en el soporte a los estándares que ofrecen la gran diversidad de gestores existentes. Teniendo en cuenta las diferencias de soporte, y con intención de mantener una compatibilidad e integridad del estilo, fue necesario:

  • Código HTML.
  • No usar Doctype DTD.
  • Tablas para la maquetación del layout.
  • CSS en línea.
  • Evitar el uso de Javascript.
  • Usar el background y bgcolor de table y no el background-image.
  • Usar rutas absolutas para enlaces e imágenes.
  • Usar obligadamente los atributos: width, height, alt en imágenes.
  • Usar el target=”_blank”.

Más información en Código para el diseño de e-mails y newsletters.