Front-end, Web Standards & Accessibility

Cinemavip se ha convertido en la mayor red profesional audiovisual en España, al tener actualmente registrados 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.

Acerca del proyecto

Cinemavip es una red social con un gran volumen de información. Recuerdo que durante las fase de análisis me encontraba con infinidad de opciones, sobre opciones, sobre más opciones. El reto fue tomar toda esa materia prima y moldearla para que cumpliese mejor las expectativas de los usuarios y los objetivos que perseguía el proyecto.

Fases realizadas

• Arquitectura de la información
• Wireframes
• Diseñó (PSD)
• Web (XHTML / CSS / JS)
• Estándares, Accesibilidad, Usabilidad

Imágenes

Cinemavip versión ANTERIOR

• 
• 
• 
• 

Cinemavip versión NUEVA

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

El equipo

• Presidente: Jorge Iniesta
• Director Comercial: Marcelo Rodríguez
• Director técnico: David Lastra
• Desarrollo Front-end: Javi aurea
• Desarrollo Back-end (RoR): Grantaire
  • Sebastián Bernardo Galkin
  • Juan Martín Buceta
  • Ludovico Rafael Quiroga

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

2. Identidad gráfica

Colores

Con los primeros tonos se ha buscado transmitir la ideas de tecnología, audiovisual y profesionalidad. El último color azul aturquesado le otorga un componente moderno y atractivo.

Más información sobre la paleta de colores en COLOURlovers.

Logo

Era importante mantener la esencia del logo. Un cambio importante fue el de la tipografia (VAG Rounded Std Bold) con más personalidad y un aspecto más joven.

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

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.

Menú de navegación

• La barra de navegación permanecerá siempre ubicada en un sitio (a diferencia del diseño anterior). Esta navegación muestra de forma clara y agrupada todo lo que puede ofrecer Cinemavip.
• El acceso al profile del usuario logeado se muestra como la última sección e la barra de navegación y bajo el color principal de los enlaces, haciendo que destaque y sea diferente del resto de opciones.

Home

• Lo primero que aparece en la home es un espacio con 4 bloques en el que se definen claramente a quien va dirigido Cinemavip y que puede ofrecer. El último de los bloques es el marketplace para remarcar su importancia, también es el único que va acompañado de un botón.
• El siguiente bloque está dedicado a Cinemavip.tv
• Cabe destacar como en los bloques de la zona central: cinemavip.tv, actualidad, grupos y empleo, se muestra en el encabezado y al margen derecho el enlace a las respectivas secciones, para obtener rápidamente: más videos, más posts, más grupos, más trabajos.
• El bloque de empleo cobra una especial importancia. Se muestran los 5 últimos empleos y a continuación se disponen 4 grupos de enlaces encabezados por las provincias con mayor número de ofertas y seguidos por orden alfabético el resto de provincias.
• En el sidebar ocupan un lugar privilegiado las empresas. Al logo lo acompaña el nombre de la empresa y el tagline. Se finaliza el bloque con el enlace al directorio de empresas.
• Se muestran los 15 usuarios más activos con avatar.
• Finalmente tenemos “Eventos”, donde aparecen los últimos 3 eventos y el que está próximo a cumplirse más destacado. La fecha es lo que resalta.

Bueno, y hasta aquí respecto al diseño, de tener que comentar cada página, reforma e idea, creo que entre todo el equipo podríamos escribir un libro

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.