Pablo Montes de Oca

Cartel para Videosalud2008

2

Hace unos días conversaba con Victor de lo necesario de una adecuada conceptualización en todo proceso creativo y del poco tiempo que se le destina a esa etapa en la mayoría de los casos, por cuestiones de tiempo y del ritmo de trabajo del centro; esto atenta muchísmo con la calidad de las soluciones, la entrada anterior que escribí es un ejemplo de las prácticas necesarias para contrarrestar esta limitante.

Videosalud ha sido un largo proyecto, en extremo intermitente, marcado por la prisa cuando se empezó por la premura de la página que debía salir… actualmente se están preparando los soportes promocionales para su posterior implementación y que servirán de referencia gráfica para la realización de un spot por una colega… de ahí, la prisa actual en darle conclusión a estos medios aunque todavía falte relativamente bastante tiempo.

Para estos soportes el proceso fue algo diferente, el tiempo entre la cabecera para la pagina web (que habrá que reajustar ligeramente para incluir algunos recursos gráficos más atractivos) y el cartel (aún en proceso de ajustes gráficos: ver maqueta), ha permitido conceptualizar por momentos y llegar a una solución más elaborada (de ahí su simpleza).

El concepto trabajado, a partir de una idea inicial y de tres reuniones con la colega encargada del spot, fue la combinación en un mismo espacio de elementos relacionados tanto con el medio audiovisual como con la salud, y que esta interacción fuese coherente…incluso se buscaron elementos categóricamente comunes para ambos medios pero intercambiándolos. Es el caso del cartel, donde se utiliza como elemento del medio audiovisual la conocida silla del director (un icono reconocido) y en vez de colocar junto a ella las también conocidas lámparas empleadas para las filmaciones, se coloca una lámpara “cialitica” (así la llaman en los sitios que consulté para obtener las imágenes) empleada en operaciones quirúrgicas y de amplio reconocimiento por el público. El resto son elementos informativos y propios de la identificación del evento. El objetivo: lograr una lectura interesante, decodificable y sencilla.

Actualmente se trabaja en otros soportes: credenciales, solapines, invitaciones, sueltos, etc…y se comenzará con la conceptualización para el spot a partir de la gráfica existente.

Filed under Videosalud 2008 by on . 2 Comments. #

Beneficios de la aplicación sistemática de la Identidad visual

4

Por limitaciones de tiempo, Infomed carece de un Manual de Identidad actualizado que paute aspectos esenciales como el código tipográfico institucional, el código cromático, los recursos visuales, etc…no obstante, en la medida que se han presentado trabajos que exigen acciones de diseño que abarcan estos elementos, se han definido algunos de estos como normas a la hora de generar soluciones y de esta forma ir consolidando progresivamente una imagen visual más homogénea del centro.

Este es un ejemplo evidente de lo positivo que resulta la existencia de códigos visuales definidos para la representación de una organización y de cómo esto tributa también a la agilización de procesos que podrían resultar complicados y tener repercusiones negativas. Hace alrededor de 1 hora se presenta un señor que va a ser el responsable del espacio de Infomed en el Pabellón de Salud de EXPOCUBA, y que tenía una propuesta de suelto informativo que promocionara a Infomed para colocar en algunos espacios del recinto ferial; este suelto no estaba personalizado con ningún elemento característico de nuestro centro y Olema le sugirió que pasara por el Departamento Web para que consultara esos detalles…no obstante, los encargados de la impresión del suelto estaban esperando por el original, era algo del primer cuadrante como me comentó Carlos Mario: URGENTE-IMPORTANTE.

A partir de la propuesta existente que contenía una información ya revisada, se rediseñó el soporte impreso aplicándole algunos de los recursos y códigos gráficos definidos previamente: código cromático, tipografías, composición, valoraciones tipográficas, énfasis, etc…optimizando el rendimiento gráfico de la solución y principalemente, ajustándola gráficamente a nuestro centro. Por supuesto, la nueva solución es mejorable en todos los sentidos (sobre todo la selección fotográfica), pero gracias a la apropiación de estas normas pudo rediseñarse en mucho menos de 1 hora y enviarse en tiempo a la imprenta, no se invirtió tiempo en “seleccionar” (acción mucho más compleja pues define qué es pertinente y qué no), se invirtió tiempo en “gestionar” recursos existentes y adaptárlos a nuevas necesidades.

Filed under Diseño, General, Identidad Visual Infomed by on . 4 Comments. #

Promocionando nuestras fuentes de información

5

A partir de una solicitud y propuesta organizativa de Gustavo, se diseñó una propuesta de marcos de cartulina adhesiva para colocar en los monitores de los laboratorios de los centros de salud, los cuales contienen de manera sintética los enlaces a las principales fuentes de información que ofrece Infomed, clasificados en diferentes criterios temáticos. Por otra parte, estos marcos identificarían a cada PC como una “Estación BVS Cuba”. Se diseñarán para monitores de 15″ y 17″.

Una vez que Gustavo termine de escribir una entrada en la Wiki para esta temática, se podrán sugerir cambios en cuanto a contenido informativo a fin de precisar las fuentes esenciales.

Filed under BVS, Diseño, General, Identidad Visual Infomed, Organización de información by on . 5 Comments. #

En busca de genéricos para los servicios de Infomed 2.0

1

Es necesario precisar entre todos los genéricos más pertinentes que describan de manera breve y explícita los diferentes servicios que ofrece Infomed 2.0. El hecho de que sean servicios nuevos para los usuarios de Infomed y relativamente nuevos en la web, hace conveniente agregar una descripción breve que respalde o apoye conceptualmente el nombre del Servicio en la cabecera del mismo. A continuación enumero los servicios con los genéricos provisionales:

Calendario:

1. Planificador de eventos y actividades

Wiki:

1. Espacio para construir y documentar colectivamente Infomed 2.0

2. Espacio de construcción colectiva

Blogs:

1. Servicio de blogs

Foros: ?

Enlaces:

1. Comparta sus marcadores favoritos

2. Servicio de enlaces compartidos

Galería:

1. Servicio de biblioteca de medios

Nuevas propuestas en Infomed Wiki

Filed under Diseño, General, Identidad Visual Infomed, Organización de información by on . 1 Comment. #

Cabeceras para anuncio de eventos en Blogs

3

Actualmente el Dpto. Web está trabajando en la apropiación y personalización de la herramienta WordPress MU para su implementación en los sitios de anuncio de eventos. Se planea que una vez establecida los usuarios puedan crear estos sitios empleando plantillas (temas) previamente rediseñadas y adaptadas a las necesidades de identificación del centro; estamos estudiando los temas disponibles y analizando cuáles se ajustan mejor a nuestro fin. El tema Semiologic disponible para todos los usuarios registrados en Infomed Blog es uno de lo más destacados, debido a la increíble flexibilidad que ofrece para aplicarle modificaciones visuales desde la interfaz de usuario. Este tema permite variar el ancho de página, modificar las fuentes empleadas en el sitio y escoger la cabecera para el mismo, o sea, que se puede crear un set de cabeceras genéricas personalizadas con la identificación de Infomed y CENCOMED y que funcionen para todos los eventos con diferentes variantes cromáticas, y que el usuario mismo seleccione cuál emplear.

La aplicación de este proyecto definido previamente con el Grupo de Tecnología y la dirección del centro, representaría un paso de avance en la optimización de nuestros servicios y nuestro funcionamiento interno: el usuario podrá actualizar constantemente su sitio e intervendrá en el resultado visual del mismo de una manera más activa, y garantizará una mayor inversión de tiempo por parte del Dpto. Web en proyectos de prioridad para el centro (en un análisis realizado al Plan de Trabajo de este Dpto. se comprobó que el 80% del tiempo laboral se destinaba al diseño y realización de anuncios de eventos).

Estas son algunas propuestas de cabeceras para los sitios de anuncio de eventos, en los dos últimos ejemplos se puede comprobar como cada una de estas muestras pueden variarse cromáticamente aumentando el número de opciones para escoger. Los textos relacionados con el evento que aparecen en estas cabeceras de ejemplo serían editables en las plantillas de usuario, manteniendo las características tipográficas definidas.

Filed under General by on . 3 Comments. #

Propuesta Rediseño Barra de Navegación del Portal y otros ajustes

3

Existen diversos proyectos que se están desarrollando con el objetivo de optimizar la arquitectura de información y la interfaz del Portal de Infomed, sobre todo el que presentó Rodrigo y Keylin que me pareció todo lo detallado, profundo y exhaustivo que debe ser y que una vez implementado aumentaría notablemente el nivel de usabilidad del sitio.

Este modelo que proponemos es solo un pequeño reajuste que consideramos puede aumentar las facilidades de búsqueda y que le aporta una mayor coherencia a la organización de la Barra de Navegación del Portal; para nada es algo terminado, sino que se trabajó basándonos en el concepto de “Beta perpetuo” que posibilita la optimización gradual de los proyectos que nos son imprescindibles pero implican una inversión notable de tiempo. Estas modificaciones son aplicables en la plataforma actual del Portal, de modo que su implementación, de ser aprobada, solo precisaría de algunas modificaciones.

ACCIONES DE DISEÑO

Página de Inicio de Infomed (ver propuesta)

1-Actualmente: En la cabecera la fecha se pierde y aparece “apretada” bajo el banner rotatorio.

Propuesta: La fecha se colocó a un lugar más visible de la página y encima del banner rotatorio. El día de la semana aparece en negrita para diferenciarse de la fecha y lograr un mayor interés visual.

2- Actualmente: “Mapa de sitio”, “Correo” y “Buscar” aparecen en la Barra de navegación al mismo nivel de las Secciones del Portal, y son utilidades y servicios. Esto tiende a crear confusión, pues no están agrupados los elementos por categorías específicas. Por otra parte, “BVS”, “UVS” y “Salud Vida” están colocadas en la barra verde de enlaces de segundo nivel y no lo son.

Propuesta: Colocar en la barra negra de la Barra de Navegación solo enlaces a las Secciones de Infomed y en la barra en blanco los enlaces contenidos en estas secciones. Algunas secciones como Especialidades que poseen numerosos enlaces y que conceptualmente responden a otro criterio se mantendrían en el Área de Contenido del Portal. Se agregará un enlace en la barra negra denominado “Inicio” que estaría predeterminado al abrir el Portal, esta pestaña tendría como enlaces de segundo nivel algunas servicios generales que deben ser de fácil acceso: es el caso de “Correo”, “El Tiempo”, la opción de descargar la barra de Infomed y el buscador (pueden valorarse otros entre todos). Se emplearía el mismo recurso que se utiliza actualmente para resaltar los enlaces activados (cambia el color de fondo del texto), pero en la barra negra de los enlaces de primer nivel lo haríamos de modo que se perciba como pestañas, lo cual es más comprensible y hace más clara la pertenencia de los enlaces de segundo nivel a al enlace activado.

Por otra parte, “Mapa del sitio”, “Contáctenos” y las “Políticas del Portal” en su versión completa, se colocarían junto a la fecha en el extremo superior derecho como es común en la web; otra variante sería colocarlos al final de la página.

Páginas de Segundo Nivel (ver propuesta)

Esta variante funcionaría en páginas como “Al Día”, “Revistas”, “Libros”…enlaces de segundo nivel incluidos en las diversas secciones de Infomed.

1-Actualmente: Páginas muy visitadas, con un gran volumen de contenido y con tareas muy específicas como “Eventos” o “Al Día” dentro de la sección “Servicios” no poseen ninguna personalización gráfica que enfatice su carácter o aluda a su contenido, lo cual unido a la ausencia de imágenes y al hecho de que el encabezado que enuncia el nombre de la página es muy pequeño y está ubicado a la derecha, limita el reconocimiento inmediato de las páginas.

La prueba que se hizo con el sitio de “El Tiempo” actual no resultó positiva, pues se logró la personalización adecuada, resulta más atractiva, pero la barra de navegación bajo la cabecera crea confusión, pues da la impresión que responde solo a la página del Tiempo y no a todo Infomed.

Propuesta: Crear una barra de identificación de Infomed de menor altura que incluya el identificador de Infomed en su versión reducida y el nombre de la sección en la cual nos encontramos (similar a los nuevos sitios de Especialidades). A continuación en la parte inferior aparecería la Barra de Navegación y luego una cabecera de altura reducida que identifique la página y defina el comportamiento cromático de la misma. En la imagen que mostramos aparece el sitio del Tiempo en la ubicación que está actualmente con los cambios propuestos para estos enlaces, se utilizó este sitio aunque proponemos darle otra ubicación porque era el que tenía una de las nuevas cabeceras realizadas.

Por supuesto que esto precisaría de una inversión de tiempo en el tema diseño de cada una de estas cabeceras, pero se puede crear una básica con el nombre que define el contenido y gradualmente ir personalizándolas en correspondencia con la importancia de la página, el número de visitas que tiene, etc …de esta manera lograríamos una identificación más adecuada de nuestros contenidos, además que se ganaría en atractivo visual.

Como explicaba, esto solo es un acercamiento general, por eso es imprescindible que se comente y hagan aportes, críticas y apreciaciones de todo tipo por parte de todo el equipo de nuestra red.

Filed under Diseño, Identidad Visual Infomed, Organización de información, Portal de Infomed by on . 3 Comments. #

Videosalud 2008. Ajustes de diseño

1

El diseño de la imagen de este evento, que abarcará diversas piezas gráficas como solapines, invitaciones y cartel, continúa desarrollándose. La propuesta inicial ha estado sujeta a intervenciones fundamentalmente en el identificador, que se iconizó a partir del nombre del evento buscando una analogía con las claquetas empledas en el medio audiovisual, lo cual le aporta un mayor énfasis, pertinencia y capacidad identificatoria: ver variantes en Negativo y Positivo. También se realizaron modificaciones en la cabecera a partir de una solicitud de los responsables del evento que planteaban la necesidad de mostrar los principales campos de la salud que abordaría la Muestra; por este motivo la imagen de la familia se sustituyó por una secuencia de imágenes representativas de estos campos (en el sitio se colocará una secuencia optimizada para web en formato SWF).

Actualmente se comenzará la implementación del diseño propuesto a la instancia creada www.videosalud2008.sld.cu.

Filed under Diseño, Eventos, Videosalud 2008 by on . 1 Comment. #

Propuesta Diseño Infomed Espacios

1

Manteniendo la estructura general de la interface de Infomed Espacios (actualmente se muestra como Infomed Noticias en la cabecera), se realizaron algunas modificaciones con el objetivo de personalizar este producto e integrarlo al perfil gráfico que se está desarrollando en nuestra red. Ver Propuesta

En la cabecera se partió de un concepto que funciona como “descripción gráfica” de las características de la herramienta, con el fin de denotar su función de manera directa y facilitar su comprensión: la herramienta es un agregador de RSS y la imagen muestra una red de iconos RSS en movimiento y en diferentes planos, buscando una profundidad coherente con el término “Espacios” que denomina la sección de Infomed. La cabecera permitirá editar como texto el título del agregador (en la imagen se colocó el texto Noticias) para futuros agregadores temáticos.

De manera general, la gama cromática emplea el color anaranjado como color principal (el icono de RSS es de ese color) y emplea el negro, gris y azul en otros elementos buscando una unidad visual con la propuesta para Infomed Enlaces y un adecuado contraste en la página.

En conversación con Gustavo se analizó el hecho de que los titulares de artículo no poseen enlaces al artículo, lo cual puede traer confusión al usuario y lo obliga a intuir a través de qué enlace puede acceder a la información completa. Por ese motivo, en el diseño actual se propone que los titulares de artículo posean enlace (color anaranjado) al artículo completo además de los ya existentes (desde el punto de vista de programación hay que crear o habilitar esta opción).

Filed under Diseño, Identidad Visual Infomed, Organización de información, RSS by on . 1 Comment. #

Propuesta Diseño Infomed Enlaces

2

La propuesta parte del diseño predeterminado que presenta el producto empleado en la versión Beta del Infoenlaces actual. Se realizaron las siguientes modificaciones:

Organización de los elementos en la página:

-Se agruparon los enlaces correspondientes a “Registrarse”, “Acceder” y “Acerca de” y se ubicaron en el extremo superior derecho de la página, zona que posee un alto énfasis visual y que facilita el inmediato reconocimiento de estas acciones de primer nivel.

-Se incorporó el buscador a la barra menú que aparece debajo de la cabecera, con el objetivo de aportarle un mayor énfasis a esta utilidad y ubicarla en una zona que desde el punto de vista funcional tuviese un denominador común; en esta barra aparecen los elementos necesarios para guiar la búsqueda: un buscador general y un buscador por categorías (Fecha, título, URL).

Selección cromática

La selección cromática garantiza un adecuado contraste entre los diferentes elementos de la página y una correcta legibilidad; por otra parte, se establecen relaciones cromáticas que favorecen la comprensión de la página: tanto las etiquetas de los enlaces como la nube que aparece a la derecha aparecen en naranja, todos los botones poseen el mismo comportamiento cromático (desactivado-gris claro, disponible-gris oscuro, mouse hover-verde brillante).

Cabecera

Se empleó el concepto de “ondas en el agua” las cuales se generan en forma de círculos cuando se produce una perturbación en la superficie del líquido. Este concepto y el uso del conocido icono de “la manito” utilizado universalmente en el medio digital para indicar la existencia de un enlace, permite recrear una ilustración metafórica donde muchas “manitos” (muchos usuarios accediendo a diferentes enlaces) generan ondas que se propagan (comparten estos enlaces) y llegan a otras “manitos” (nuevos usuarios que acceden a estos enlaces compartidos) que su vez generan nuevas ondas estableciendo una “red de intercambio” (infoenlaces).

Filed under Diseño, General, Identidad Visual Infomed, Organización de información by on . 2 Comments. #

Videosalud 2008

0

Para la cabecera del sitio de este evento se emplearon diversos recursos gráficos asociados al mundo cinematográfico: el color negro, los medios técnicos de iluminación, el celuloide; por otra parte, se utiliza la imagen de una familia sonriente como elemento que reafirma el factor humano, el bienestar y la salud que están presentes en esta muestra internacional. Desde el punto de vista tipográfico, se emplea la familia Officina del diseñador Spikerman, la cual se caracteriza por su modernidad, frescura y actualidad, atributos que unidos al juego tipográfico-cromático que se aplica para generar las separaciones entre palabras, pretenden imprimirle un marcado carácter contemporáneo a la pieza gráfica.

Se esbozó una vista general para visualizar la cabecera en conjunto con el resto de la página, pero no es definitiva pues aún no se han determinado con exactitud los elementos informativos que contendrá el sitio.

Filed under Diseño, Eventos by on . Comment. #

1 2 3 4 5 6 7