Memoria Construcción de La Comunicación Visual

Construccin de la Comunicacin Visual
Estrategia Web y de Sealizacin
Alumnas: Gley Carolina Riquelme Van Sofa Savoy Anguita Profesor Gua: Sr. Herbert Spencer Gonzlez Diseo Grco Diciembre 2011 Ponticia Universidad Catlica de Valparaso Escuela de Arquitectura y Diseo
Construccin de la Comunicacin Visual

Estrategia Web y de Sealizacin
Alumnas: Gley Carolina Riquelme Van Sofa Savoy Anguita Profesor Gua: Sr. Herbert Spencer Gonzlez Diseo Grco Diciembre 2011 Ponticia Universidad Catlica de Valparaso Escuela de Arquitectura y Diseo
ndice
PRLOGO 9 PRESENTACIN 11 La Comunicacin 11 CAPTULO I: "CONSTRUCCIN DE UN ARGUMENTO VISUAL" 13 INTRODUCCIN 15 ESTRATEGIA DEL PROYECTO 17 Brief 17 Benchmark 17 Propuesta 21 ARQUITECTURA DE LA INFORMACIN 22 El Sector de la Salud en Chile 22 Estructura del Sistema de Salud Chileno 24 Mapa de Navegacin Anterior 26 Mapa de Navegacin Propuesto 27 Niveles de Accesibilidad 28 DISEO ESTRUCTURAL Y VISUAL 30 Wireframes e Interfaz 32 Mapas de Divs 42 Color 46 Tipografa 48 CONSTRUCCIN DEL ARGUMENTO 50 Denicin del Guin 52 Construccin de Animacin 54 CONFIGURACIN E IMPLEMENTACIN 58 Plugins 58 Elementos Integrados 59 CIERRE PRIMER CAPTULO 61
CAPTULO II: "SISTEMA VISUAL DE ORIENTACIN PARA HOSPITALES" 63 INTRODUCCIN 65 ESTUDIO Y ANLISIS 67 Introduccin a la Investigacin del Usuario: Sondas 67 Diseo para actividades del usuario 68 Anlisis de las Actividades 74 Observaciones en Terreno 75 Waynding 76 DISEO ESTRATGICO DEL SVO 79 Construccin de un Viaje Hospitalario 80 TIPOGRAFA HOSPITAL 90 Visibilidad, Legibilidad e Inteligibilidad 90 Gobierno 93 Titillium 93 Creacin de Trazos y Esqueletos 94 Caracteres 110 Versiones Tipogrcas 112 Iconos 122 Versiones de Iconos 130 Sitio Web 138 Enlaces externos 138 CONSTRUCCIN GRFICA152 Imagen del Hospital 152 Decisiones Cromticas 158 DISEO DE PROTOTIPOS 160 Jerarquas Tipolgicas de la Sealtica 160 Estructuracin de Tipologas 162 Propuestas Anteriores 182 CIERRE PRIMER CAPTULO 199
AGRADECIMIENTOS 201 REFERENCIAS 203 Bibliografa 203 Webgrafa 203 COLOFN 205 Colofn de Estudio 205 Colofn Tcnico 205
Prlogo
Una organizacin es una construccin de un nosotros. Se trata de un nosotros orientado, yendo hacia un propsito comn. En este camino de dirigirse hacia se construye una imagen de propsito escencialmente utpica porque es diferente al presente, y, en cierta medida, inalcanzable. En este ir hacia se deben ir gestionando los diferentes recursos, darle forma a los espacios, a los actos e interacciones internas y externas, adems debe repartir diferentes tareas y roles entre sus miembros. Todo esto corresponde la la construccin de los argumentos de una organizacin humana. El argumento de una organizacin equivale a su relato fundamental, aquel que permite reunir, en primera instancia, a ese grupo de personas. Corresponde a su ethos interno, a la palabra que construye sobre s misma y que le conere identidad. Su argumento es lo que va sembrando en el mundo y es aquello por lo que otras personas la reconocern e, incluso, podrn unirse a ella, porque el argumento es tambin su cultura, su modo de vida. El argumento tiene capas de profundidad en la relacin pblico-privado, y tiene niveles de especicidad; desde lo ms idiosincrtico a lo ms convencional. En el mundo actual, el ocio del diseador es muchas veces cogido por esta tarea: la de facilitar la materializacin del argumento desde una partida poitica o de la elicitacin de su voz, desde una partida retrica. Sofa Savoy y Gley Riquelme, autoras del presente estudio, abordan dos aspectos fundamentales y diversos del diseo de argumentos. Comienzan su exploracin enfrentndose a una organizacin en gestacin. Se trat de una agrupacin ciudadana preocupada por los derechos civiles asociados a la salud pblica, compuesto principalmente por mdicos, enfermeras y salubristas denominado Salud, un Derecho. El argumento de esta organizacin es bastante elemental: se trata de instalar el tema de la salud en el debate pblico para promover una reforma estructural que garantice el acceso a todos los ciudadanos. Ms all de las implicancias polticas de adscribirse o no a un movimiento de esta naturaleza, resulta fundamental para un diseador lcidamente ubicado en el mundo, reconocer el sentido retrico de su ocio y su potencia aglutinadora por cuando imagen que se vuelve propsito. Diseo como designio que se convierte en su relato articulador de personas y que encarna nalmente su identidad y su cultura. A esta primera experiencia germinal interna la sigue otra de naturaleza ms fsica y tangible, dentro de una organizacin ms madura y consolidada, como lo es un hospital del sistema pblico de salud. Este proyecto se centr en un modo de comunicacin visual
10
P R LOGO
jugado en complejidad espacial de tamaos, de signos y orientaciones. El argumento, en este caso, se centra en el modo de comunicar el sentido de la organizacin a las personas externas que ingresan a su dominio: el edicio hospitalario. Un hospital es un edicio de gran complejidad programtica, con muchos servicios interrelacionados, con muchos actores y reglas en juego. Uno de los principales problemas de las organizaciones grandes y complejas radica en que su orgnica se impone por sobre las personas, construyendo ambientes fros e inspitos, compartimentalizados por sus propios protocolos y burocracias. Los espacios no logran comunicar ni conducir naturalmente a las personas a travs de sus servicios de un modo coherente a su condicin de entrega, ya que dentro del hospital el propio cuerpo se vuelve espacio en disputa. Este cuidado por la experiencia del otro es el kairos de la hospitalidad, gran oportunidad que abre este proyecto para desarrollar una tica de diseo centrado genuinamente en las personas. Este proyecto aborda esta capa espacial de la organizacin hospitalaria para construir una voz grca que acompae a las personas que atraviesan el servicio, en un intento por otorgar coherencia y hospitalidad a la experiencia de los pacientes y sus familiares, y tambin otorgndole un rostro y una voz a una entidad abstracta, para dejarla en una situacin de proximidad. El presente estudio relata el periplo por este territorio, desde la reexin tipogrca que desencadena el desarrollo de una familia completa, as como de las diferentes conguraciones de sealtica para el hospital de Quilpu, pero tal vez, constituyndose como medida grca para extenderse a otros hospitales y servicios de salud.
Herbert Spencer G.
11
Presentacin
La Comunicacin
El desarrollo de dos proyectos aparentemente distintos en su totalidad, encuentra un modo de vincular sus aspectos fundamentales por medio de la construccin de la comunicacin. Disear para un pblico, para los usuarios, comprende un lenguaje complejo que debe construirse a travs de un arquitectura, la cual sabe distinguir las jerarquas que la componen, acentuando de forma correcta los aspectos principales y creando un camino legible y accesible a los contenidos ms especfcos.
Navegacin del Usuario en el Sitio Web Viaje del Usuario en el Hospital
CONTEXTO Lenguaje de programacin Video animacin Signos lingsticos Signos pictogrcos Colores CDIGO
EMISOR
MENSAJE
CANAL
RECEPTOR
Salud Un Derecho Hospital de Quilpu
Ideales Propsitos Direcciones Ubicaciones
Sitio Web Sistema Visual de Orientacin
Comunidad Chilena Internautas Pacientes Funcionarios Visitas
El contenido del primer proyecto trata de la construccin de un argumento visual, que responde a las necesidades de un grupo poltico-social para intenta dar a conocer una situacin crtica respecto al sistema de salud en Chile. Por otro lado, el segundo proyecto, trata de la construccin de un sistema visual de orientacin para hospitales, con la idea de disear el viaje del usuario dentro del recinto. La estructura que establece la relacin directa entre los proyectos, se basa en el modelo de comunicacin de Shannon y Weaver. Este permite dar cuenta de los roles, elementos e interacciones que se identican en el proceso comunicativo, lo que permite aproximarse al contenido y las herramientas que se emplearn para construir este dilogo.
Salud Un Derecho Elementos pertenecientes al proyecto del Argumento Visual de Salud Un Derecho.
Hospital de Quilpu Elementos pertenecientes al proyecto del Sistema Visual de Orientacin del Hospital de Quilpu.
12
P R E S EN TACI N
Captulo I Construccin de un Argumento Visual

Sitio Web y Animacin para Salud Un Derecho
14
Introduccin
Un primer acercamiento al proyecto de Titulacin I, reside en el rea de la salud con la presencia de un caso puntual (orientado a lo poltico-social): Salud Un Derecho. Este movimiento poltico y social nace ante la urgencia de cambiar el Sistema de Salud y proponer una nueva reforma estructural del Sistema de Salud Chileno, planteando igualdad en este para todas las personas, sin discriminar de su estatus social. La oportunidad de trabajar en este mbito, permite abordar la temtica de la salud desde una perspectiva diferente, y a la vez, da la posibilidad de reestructurar y redisear el sitio web de Salud Un Derecho. Para esto, es fundamental poseer metodologas de estudio por medio de las cuales llegar a construir un proyecto slido y sustentable a travs del tiempo. Con esto surge la necesidad de navegar a travs de la web y comenzar a observar las variadas temticas y funcionalidades que poseen los sitios web, a partir de lo cual se identicarn distintos patrones que ayudarn a la creacin de un nuevo argumento visual, capaz de transmitir el planteamiento de una idea y de una serie de acciones que se ejecutarn dentro del sitio y que responden a los objetivos que se propone este movimiento.
16
C A p T U LO I: "C ON S T RUCCI N
DE U N
A RGUMEN TO V I SUA L" I N T RODUCCI N
Estrategia del Proyecto

Brief
Salud Un Derecho surge como una urgencia ante una nueva reforma de la salud, enfocada a la igualdad de las personas, en donde no hay discriminacin de atencin ante quien posee mayor o menor recurso. Para exponer sus ideas han construido un sitio web a base de sus planteamientos y maniestos, con ello se quiere que las personas conozcan sus propuestas e ideas y apoyen el proyecto para poder ser planteado como una nueva reforma estructural de la salud ante el gobierno el 14 de mayo del 2014, teniendo al menos 1.000.000 de residentes a favor de ella. Objetivos del Proyecto: Que el sitio web sea un espacio de educacin con respecto a la salud, ante toda persona que ingrese a l. Crear una comunidad comprometida y participativa, que pueda generar un activismo social, dando a conocer los planteamientos de Salud Un Derecho. Que el Sitio sea un canalizador y capacitador de fcil acceso, con material grco explcito para quienes sientan el compromiso de divulgar esta nueva reforma de la salud. Meta a Cumplir: Conformar una comunidad de al menos un milln de residentes Chilenos, que apoyen activamente la nueva reforma para el 14 de marzo del 2014.
Benchmark
Comparar el actual sitio de Salud Un Derecho con otros sitios que se constituyen a partir de una temtica determinada (este caso movimientos sociales), es importante para saber cuales son los pro y los contra que tiene cada uno, de modo que se destaquen los aspectos positivos para integrarlos a la propuesta de arquitectura de informacin. En total se analizaron tres sitios -incluyendo el de Salud Un Derecho- nacionales e internacionales que se relacionan con el tema de la salud a nivel poltico y social.
Salud Un Derecho Movimiento liderado por Vivienne Bachelet Norelli (vocera del Frente Amplio de Defensa de Salud Pblica) que nace a travs de la red social Twitter, y que apoya el hecho de que la salud debe ser un derecho igual para todos.
18
DE U N
A RGUMEN TO V I SUA L" E S T R AT EG I A
DEL
P ROYEC TO
SALUD UN DERECHO http://saludunderecho.cl/
Aspectos Positivos Dispone de informacin rpida para encontrar. El Sitio se actualiza constantemente. Ofrece un espacio de opinin para cualquier persona. Expone los ideales de la organizacin de forma clara. Existe contacto directo con las redes sociales.
Aspectos Negativos Falta un espacio de participacin ms activa. La informacin se repite (y est presente) en varias secciones. Faltan recursos grcos que den a entender (de manera visual y directa) ideas, procesos, temticas, etc. que se muestren. El sitio no provoca, a quien lo visita, un deseo de participacin; no se percibe una invitacin.
MI SALUD NO ES UN NEGOCIO http://www.misaludnoesunnegocio.net/
Aspectos Positivos Espacio de informacin Categorizada y Actualizada. Comparte su contenido con las redes sociales. Cuenta con un espacio de Opinin dentro de los Artculos. Incita a informarse acerca de temticas.
Aspectos Negativos La Informacin del sitio se presenta de forma muy condensada. Falta de recursos grcos que permita entender de manera ms visual la gran cantidad de contenido escrito.
C A p TU LO I: "C ON S T RUCCI N
DE U N
DEL
P ROYEC TO
19
NATIONAL HEALTH SERVICE http://www.keepournhspublic.com/index.php
Aspectos Positivos Presenta una idea clara de sus planteamientos desde el inicio del sitio. Cuenta con un espacio para generar una campaa, otorgando los elementos grcos de esta. Ofrece un espacio de participacin al que visita el sitio. Declara todos los aspectos de su campaa y quienes aportan a ella.
Aspectos Negativos Falta de recursos grcos que permita entender de manera ms visual la gran cantidad de contenido escrito. Falta de denicin grca en el sitio. No cuenta con un buscador, y sus contenidos dentro de l son difciles de ser encontrados.
OBSERVATORIO DE EQUIDAD DE GNERO EN SALUD http://www.observatoriogenerosalud.cl/

Aspectos Positivos Dispone la informacin ordenadamente en las distintas secciones. Seala campos de observacin dentro de la temtica general. Utiliza esquemas para gracar y explicar ciertas ideas.
Aspectos Negativos Los campos del buscador son poco claros. La interfaz mezcla muchos elementos. No permite el registro y participacin de cualquier persona.
20
DE U N
DEL
P ROYEC TO
ORGANIZACIN PANAMERICANA DE LA SALUD http://new.paho.org/hq/
Aspectos Positivos Sitio donde se Publican noticias Actualizadas del tema, y acta tambin como Generador de Contenido. El Sitio est en Espaol y en Ingles, por lo que puede acceder a ms personas. Da a conocer los miembros que participan.
Aspectos Negativos El espacio de Comentario es muy cerrado, los comentarios no quedan visibles como puntos de discusin. Falta de recursos grcos que permitan entender el contenido de un modo ms visual. Nombres de menes donde no queda claro lo que se seala.
SOCIEDAD INTERNACIONAL DE EQUIDAD DE SALUD http://www.iseqh.org/
Aspectos Positivos Genera contenido propio. Tiene la opcin de ver la mayor parte del contenido en espaol y francs. El contenido principal se clasica de buena forma; el men se organiza claramente. Recalca puntos importantes y detalles de actividades.
Aspectos Negativos Se visualizan demasiados contenidos en un mismo espacio. El diseo estructural del sitio carece de un criterio de diseo (falta denicin de diagramacin).
DE U N
DEL
P ROYEC TO
21
Propuesta
Segn lo analizado en los distintos sitios, se logra destacar: Estructuracin y organizacin concisa de los contenidos. Los ideales y temticas a tratar se muestran claros. Generacin de contenidos de los propios organizadores. Hay un cierto llamado a participar en el sitio, integrando a las personas .
Crear una pgina con estructura de contenido ja que presente la identidad del movimiento, posicionando el feed de entradas en otra seccin. Crear un slideshow en el Home, como una presentacin inmediata del perl del movimiento. Crear un sidebar especco para el Home. Crear subsecciones en algunas pginas, reordenando el Otros de los elementos a integrar, de modo ms concreto y directo, son:
Con esto, es posible identicar los elementos faltantes del sitio actual y hacer las correcciones y propuestas correspondientes para comenzar a desarrollar el proyecto:
contenido de manera apropiada. Implementar un sistema de calendarizacin con Google Calendar
Interfaz e Imagen Denir un diseo coherente, con una paleta de color y una lnea de dibujo que componen la interfaz representativa del sitio web.
Accesibilidad Denir tres niveles de accesibilidad para usuarios. Administrador, Registrado, No Registrado.
Comunidad Conformar una comunidad comprometida con las ideas planteadas mediante un registro de ellas en el sitio, otorgndoles espacios de publicacin abierta para que expresen sus ideas, sus testimonios, creen debates y colaboren.
Participacin Generar el deseo de participacin mediante Red Social Implementar las redes sociales Twitter y Facebook, siendo esta ltima una causa (no perl) a la cual se pueden unir las personas. Educar Lograr educar acerca del tema de Estructura Organizar el contenido del sitio a travs de la arquitectura de la informacin, creando espacios que generen un discurso coherente y den forma al sitio web. la salud en Chile a travs de infografas y modelos explicativos. la exposicin de argumentos claros, y de la constante actualizacin de contenidos.
22
DE U N
DEL
P ROYEC TO
Arquitectura de la Informacin
El Sector de la Salud en Chile
Lo que sabemos hoy acerca de la salud en nuestro pas, ha estado sujeto a diversos cambios a travs de la historia, y se hace necesario conocer esta secuencia de eventos para comprender el desarrollo de las distintar reformas que han llevado a concretar la que se encuentra en la actualidad. Esto es un paso previo para conocer la formacin de los organismos que se han creado durante distintos perodos de la historia, y algunos de los cuales siguen vigentes hasta el da de hoy. A partir de esto, se conforma la estructura que da forma al Sistema de Salud y que muestra un panorama general de la conexin entre cada uno de ellos.
Servicios Locales de Salud

1886
Promulgacin del Reglamento Orgnico de la Junta de Benecencia. Promulgacin del Reglamento Orgnico de la Junta de Benecencia.
Maduracin del
1892
Consejo de Higiene Pblica asume las funciones de la Junta Nacional de Salubridad.
1887
Creacin de la Junta Nacional de Salubridad. Asesora al Gobierno en materias de salubridad y organiza nacionalmente los desarrollos locales.
1917
Realizacin de un Congreso Nacional de sociedades bencas e instituciones previsionales y sectoriales. Estas dieron mayor organizacin y estructuracin al sistema previsional y asistencial de salud.
1924
Creacin del Ministerio de Higiene, Asistencia y Previsin Social. Se establece el Seguro Obrero Obligatorio (ley 4.054). La Caja de Seguro Obrero fue destinada a cubrir riesgos de enfermedad invalidez, vejez y muerte.
Reforma Neoliberal de los 80

1978
Se introduce el procedimiento de pago por servicios FAP (Facturacin por Atencin Prestada) y FAPEM (Facturacin por Atencin Prestada en Establecimiento Municipal). Financia la compra de insumos. As, los hospitales reciben su nanciamiento mediante sueldos, salarios y FAP
1979
Fusin de los recursos del SNS y del SERMENA. Redenicin de las funciones del Ministerio de Salud. Creacin del Fondo Nacional de Salud (FONASA), el Sistema Nacional de Servicios de Salud (SNSS), el Instituto de Salud Pblica (ISP) y la Central de Abastecimientos del SNSS (CENABAST).
1981
Comienza el proceso de municipalizacin de los Centros de Atencin Primaria. Hasta 1988 se traspasan al rededor del 70% de los establecimientos de atencin primaria del SNSS a las municipalidades. Se establece la formacin de las Instituciones de Salud Previsional (ISAPRE). Esto permite al trabajador dependiente, la libre eleccin de optar por la compra de su seguro obligatorio de salud (puede optar por FONASA o ISAPRE).
1990
Creacin de la Superintendencia de ISAPRE (Ley 18.933). Fiscaliza las ISAPRES, vela por el cumplimiento de la normativa y promulga disposiciones relativas al funcionamiento del sector. Desde esta fecha, los Gobiernos de la Concertacin de Partidos por la Democracia han asumido la responsabilidad gubernamental de administrar el Sistema de Salud heredado.
DE U N
A RGUMEN TO V I SUA L" A RQU I T EC T U R A
DE L A I N FOR M ACI N
23
Lnea de Tiempo del Sistema de Salud Chileno En esta cronologa se muestra un resmen del contexto histrico y normativo del Sistema de Salud Chilen.
Desarrollo Social y Sistema de Salud

1938
Se dicta la Ley de Medicina Preventiva.
SNS y Predominio de Planicacin Central

1948
Construccin por Ley del Colegio Mdico de Chile. Formula polticas de salud.
1942
Creacin del Servicio Mdico Nacional de Empleados (SERMENA). Cubre al sector de empleados pblicos y particulares. Creacin de la Direccin General de Proteccin a la Infancia y Adolescencia (PORTINFA). Proteccin para nios y adolescenter.
1952
Creacin del Servicio Nacional de Salud (SNS). Unica diversos organismos pblicos que prestaban servicios de salud. Responsable de atender a obreros, sus cargas e indigentes.
1964
Inicio de reformas sociales. En salud, se invierte en centros asistenciales, formacin y enrolamiento de personal, y extensin de cobertura geogrca.
Gobiernos de la Concertacin de Partidos por la Democracia

1995
Promulgacin del Estatuto de la Atencin Primaria.
1996
Se reemplaza el FAP por un sistema de pago asociado a diagnstico (PAD), combinado con un sistema de pago prospectivo por prestacin (PPP). Se corrigieron problemas del antiguo sistema de pago y se tiene como objetivo incentivar la eciencia y calidad de los servicios entregados.
1997
Se reemplaza el FAPEM por un sistema capitalizado de acuerdo a poblacin adscrita.
2004
Creacin del Plan de Acceso Universal con garantas Explcitas (Plan AUGE). Entra en vigencia al ao siguiente.
2006
El Plan AUGE es reemplazado por el plan de Garantas Explcitas de Salud (GES). Garantiza la cobertura por parte de FONASA e ISAPRES.
24
DE U N
Estructura del Sistema de Salud Chileno

Para poder comprender la temtica que aborda la Salud en Chile, es necesario realizar una organizacin de los distintos elementos que conforman su estructura, entendiendo esta ltima como un sistema en el que los agentes cumplen distintos roles.
DE U N
25
26
DE U N
Mapa de Navegacin Anterior
Mapa de Navegacin
NDICE DE CONTENIDO 1. Ingresar 2. netenos 3. Concenos 3.1. Maniesto 3.2. Nuestros Miembros 4. Aprendamos de Salud 4.1. Artculos de Aprendizaje (infografas, esquemas, etc) 5. Noticias 5.1. Artculos de Noticias 6. Publicacin Abierta 6.1. Haz tu publicacin 7. Actividades 7.1. Actividades Realizadas 7.2. Calendario 8. Descargas 8.1. Documentos 8.2. Videos 8.3. Grca de Campaa 9. Contacto
Mapa de navegacin del sitio web anterior de Salud un Derecho.
DE U N
27
Mapa de Navegacin Propuesto

La organizacin y disposicin de las secciones en el mapa de navegacin anterior, no es del todo ptima, pues mucho de sus contenidos estn dispersos y repetidos en el sitio. La siguiente propuesta reorganiza y crea nuevas secciones en las cuales el contenido se dispone de manera tal que presenta un discurso coherente respecto a la informacin que se desea mostrar. En la nueva estructura del sitio web, se denen reas de crecimiento identicadas en tres niveles, los cuales indican los sectores en los que se iran agregando contenido, de modo que el sitio tenga un aspecto orgnico, es decir, un espacio vivo que se alimente y retroalimente de contenidos creados por los administradores, por los usuarios, por la gente que visita el sitio y por otras fuentes de informacin.
Administrador y Usuario Registrado Administrador
Crecimiento Mnimo Aumenta el listado de personas que siguen el movimiento, dispuesto en una sola pgina.
Crecimiento Medio El crecimiento es un poco ms activo, pues son archivos, eventos y artculos que se irn agregando.
Crecimiento Alto Son las secciones ms activas y de mayor crecimiento, pues van incorporando contenidos y actualizando el sitio.
28
DE U N
Niveles de Accesibilidad
La propuesta de navegacin del sitio, se basa en aspectos de colaboracin y participacin, de modo que existen diferentes tipos de usuarios relacionados. Primero se piensa en tres casos comunes posibles dentro de la navegacin web; quien slo observa, quien participa y quien administra. A partir de esto, se determinan tres diferentes niveles de accesibilidad, correspondientes a las acciones anteriores: Usuario No Registrado Usuario Registrado Administrador
Niveles de Accesibilidad para Usuarios Tipos de usuarios y sus respectivos permisos y acciones dentro del sitio web. Esto permite tener una idea clara de cmo ser administrado el sitio en relacin a la generacin de contenido.
DE U N
29
Secciones del Sitio y su Accesibilidad Cada seccin presenta contenidos diferentes, as como tambin la accesibilidad de algunos es limitada. Se especica qu es cada seccin y cules son las acciones de los usuarios dentro de estas.
30
DE U N
Diseo Estructural y Visual

Teniendo armada la estructura base de contenidos y denidos los roles de usuarios, el siguiente paso corresponde a la disposicin y articulacin de estos en el diseo del sitio web. En esta etapa es importante tomar en cuenta que hay un argumento por construir, el cual da a entender el discurso del sitio mismo, acerca de lo que Salud Un Derecho quiere dar a conocer. La disposicin de los elementos en la pgina, juega un rol fundamental en la comunicacin con el usuario, donde existe un momento inicial en el que se encuentra con la presentacin del argumento y de los aspectos que el sitio abarca. Para esto, se comienza con la maquetacin del sitio al crear los wireframes, en donde se denen las distintas reas de contenidos, sin mucho detalle y slo como un esqueleto que servir de gua al momento de realizar el diseo visual. La interfaz rene los aspectos ms detallados del diseo, pues se debe cuidar cada elemento que se incorpore en ella. La eleccin de una paleta de color consecuente y de una tipografa adecuada, es fundamental para llamar o no la atencin de quien visita el sitio.
Cuerpo de Contenido Contendr toda la informacin de las distintas secciones, publicaciones y contenido en general. Barra de Men Contendr las secciones principales del sitio. Header Contendr logo y buscador.
(Logo Original)
(Logo Editado)
El logo del movimiento fue diseado previamente, y los permisos para modicarlo son limitados, por lo que se mantiene la tipografa y se mejora la imagen, dndole un aspecto de corazn ms redondeado y no tan alargado como el que se tena.
Footer Contendr las mismas secciones de la barra de men, ms un enlace a Contacto (mail to).
DE U N
A RGUMEN TO V I SUA L" D I S E O E S T RUC T U R A L
V I SUA L
31
MEDIDAS
Sidebar Contendr enlace al registro, secciones de redes sociales, ltimas publicaciones y etiquetas de estas.
32
DE U N
V I SUA L
Wireframes e Interfaz
HOME DEL SITIO
DE U N
V I SUA L
33
34
DE U N
V I SUA L
PGINA CON SUBPGINAS
DE U N
V I SUA L
35
36
DE U N
V I SUA L
PGINA DE NOTICIAS
DE U N
V I SUA L
37
38
DE U N
V I SUA L
PGINA DE ARTCULO
DE U N
V I SUA L
39
40
DE U N
V I SUA L
FORMULARIO DE CONTACTO
DE U N
V I SUA L
41
42
DE U N
V I SUA L
Mapas de Divs
Para construir de manera simple y ecaz la construccin del sitio, utilizamos mapas de divs para diagramar los sectores del sitio. Si bien Thesis dene una cierta cantidad de capas, se han creado otras acorde a la necesidad de cmo disponer el contenido en la pgina.
HEADER Y BARRA DE MEN El header, al igual que el men, se mantiene de la misma manera en todas las secciones del sitio. Consta slo de dos partes importantes y visibles, que son el logo y el buscador.
DE U N
V I SUA L
43
HOME La pgina de home, es una pgina esttica, con una estructura personalizada, pues se agrega el slideshow y tres columnas. Tambin pose un sidebar especco, diferente a los de las otras pginas que mantienen la misma estructura.
44
DE U N
V I SUA L
PGINA CON SUBPGINAS Este tipo de pgina reemplaza de cierta forma al men desplegable, y permite tener un manejo ms personalizado del contenido que quiera introducirse en ella. El sidebar que de esta pgina, es el mismo para el resto de las secciones del sitio (excepto el home).
DE U N
V I SUA L
45
PGINA DE NOTICIAS La pgina de noticias, muestra los resmenes de las ltimas publicaciones en las, dos por cada una de ellas.
46
DE U N
V I SUA L
FOOTER El footer tambin se mantiene de la misma manera en todas las secciones del sitio, presentando los mismos enlaces que la barra de men.
Color
La capa emocional del sitio, est dada principalmente por los colores. Estos tienen distintos signicados, que comunican o provocan emocin de manera sensorial (a travs de la vista), por lo que es fundamental denir una paleta de colores adecuada para aplicarla al un sitio web. Como se dijo anteriormente, Salud Un Derecho ya cuenta con un logo y ccon olores denidos (naranjo y rojo), por lo que las dems elecciones de color deben tener una relacin armnica respecto a los colores base.
DE U N
V I SUA L
47
Naranja: Representa entusiasmo, felicidad, atraccin, creatividad, determinacin, xito, estmulo y nimo. Tiene alta visibilidad, por lo que es til para captar atencin y subrayar aspectos importantes. Se utiliza cuando se reclama participacin o accin, tambin es ideal para botones. Utilizado en pequeas extensiones o con acento, es un color de gran utilidad, pero en grandes reas es demasiado atrevido y puede crear una impresin impulsiva o agresiva. Rojo: Es el color ms intenso en lo emocional, y cuando se lo usa como color secundario, recomendable para motivar a las personas a tomar decisiones rpidas y a incrementar las expectativas. Trae el texto o las imgenes con este color a primer plano, resaltndolas sobre el resto de colores. Azul: Cuando se utiliza junto a colores clidos (amarillo, naranjo), la mezcla suele ser llamativa. Puede ser recomendable para producir impacto. No es un color que sature la vista al ser utilizado en grandes reas. Caf: Comunica credibilidad y estabilidad. Este es el color de la tierra y de la abundancia en la naturaleza. Excelente para transmitir informacin, ya que crea un ambiente neutral para discusiones abiertas. Beige: Como el caf, tambin es color de tierra relajante, reductor del estrs, que invita a la comunicacin. Utilizado para reconfortar a otros o para transmitir informacin. Gris: Los grises medio-claros tienen poca atraccin visual, siendo idneos para fondos o elementos de relleno que no aporten informacin al espectador. Se asocia a la neutralidad absoluta, discrecin y equilibrio. En la paleta de colores denida predominan los tonos clidos, acompaados de un color fro y un color neutro. Se han utilizan gradaciones de algunos colores, siguiendo la lnea de tonalidades.
Gradaciones #E6D6AA #E47A56 #F0F0F0 #D4B96F #D54E21 #FF9933 #DDDDDD #BC9838 #B6431C #EA690B #2396CB #CCCCCC Seleccin del Color Del logo, el nico color que se mantiene en la paleta de colores, es el naranjo, pues el rojo se reemplaza por un color ms terracota; ms oscuro y menos fuerte para la vista al tomar tonalidades del caf. El caf no fue una eleccin directa, ya que se preri algo ms neutro, un color ms suave y que tuviera directa relacin con otros colores de la paleta. En este caso, el beige toma matices del caf, que tambin toma el terracota, y del amarillo presente en el naranjo. Los colores fros y neutros, como el celeste y el gris, son el toque que da equilibro; uno que es muy discreto y otro que destaca.
Colores Base
48
DE U N
V I SUA L
Tipografa
Las decisiones tipogrcas se hicieron a partir de fuentes abiertas en la red, para evitar incompatibilidades y complicaciones al utilizar tipografas diferentes a las web safe. Para esto se recurri a Google Font Directory, que ofrece un listado de fuentes para el uso liberado de ellas. De las 28 fuentes que Google ofrece, utilizamos slo dos, IM Fell English y Droid Sans; la primera se deni para los ttulos principales, y la segunda para ttulos secundarios, texto y enlaces.
Fuente IM Fell English Diseada por Igino Marini, en su versin 3.00. Pose dos variantes; regular y cursiva.
Fuente Droid Sans Diseada por Steve Matteson, en su versin 1.00. Pose dos variantes; regular y negrita. La variacin a cursiva en algunos casos del sitio, es modicada por las cascadas de estilo.
El trazo de IM Fell English, emula un trazo a mano alzada, una tipografa dibujada, manteniendo concordancia entre la lnea de dibujo del video y del sitio, pero caer en un aspecto demasiado informal.
DE U N
V I SUA L
49
Las jerarquas denidas en el sitio varan tanto en tamao como en color. Para los ttulos se decide utilizar el color #D54E21, mientras que para los enlaces y otros, se utiliza el color #2396CB.
IM Fell English 30 px
IM Fell English 25 px IM Fell English 18 px Droid Sans 12 px Droid Sans 14 px Droid Sans 14 px Droid Sans 12 px Droid Sans 11 px
La relacin jerrquica est dada directamente por la fuente, como puede apreciarse en la imagen superior, los ttulos principales utilizan IM Fell English, mientras que el texto de prrafos y secciones menores, utilizan Droid Sans. En una seccin especca, se utiliza la fuente Georgia para los textos breves introductorios de las subpginas. No se utiliza IM Fell English ya que, a tamao pequeo y cursiva, no favorece la legibilidad del texto.
Utilizacin de fuente tipogrca Georgia Esta imagen es un ejemplo del prrafo introductorio en una subpgina, en donde se utiliza la fuente Georgia, en su variante cursiva.
50
DE U N
V I SUA L
Construccin del Argumento

Para el desarrollo de una idea, se hace imprescindible la organizacin y estructuracin de sus partes, que en este caso, ser lo que transforme la idea en el argumento de lo que se desea expresar y dar a conocer. El texto de las Cuatro Figuras Maestras (Four Master Tropes) de Kenneth Burke, indica que metfora, metonimia, sincdoque e irona son recursos para descubrir y describir la verdad, es decir, son recursos que se utilizan como base para la construccin de un argumento lgico y consecuente.
DE U N
A RGUMEN TO V I SUA L" C ON S T RUCCI N
DEL
A RGUMEN TO
51
Metfora La metfora en relacin a la perspectiva, hace ver una cosa desde el punto de vista de otra, por lo que para nuestro argumento, se aplica a crear distintas vivencias de una persona (dentro del rea de la salud), las que son relatadas y que aluden a comparaciones dentro de las mismas.
Metonimia La metonimia en relacin a la reduccin, transmite la idea de lo tangible (o corpreo) a lo intangible (o incorpreo) y viceversa, lo cual se aplica a ciertos momentos o situaciones, que son representados por elementos concretos.
Sincdoque La sincdoque en relacin a la representacin, siendo aplicada en el argumento, como una forma de traer distintas realidades sociales a travs de personajes, que sern el elemento mediante el cual se representarn.
Irona Finalmente, la irona en relacin a la dialctica, se aplica en la argumentacin como forma de leve exageracin y desarrollo de un drama, el cual llama al sentido de alerta y de inters.
52
DE U N
DEL
A RGUMEN TO
Denicin del Guin

La construccin del guin de Salud Un Derecho es fundamental para conformar la totalidad del argumento, para mostrar y dar a entender dentro del sitio web, la postura de este movimiento frente a la complejidad del Sistema de Salud Chileno. Para esto, es necesario tomar ciertos elementos clave y comenzar a vincularlos coherentemente entre s, logrando crear una estructura base a partir de la cual se desprende un relato acerca de lo que el sitio va a contar. El siguiente paso luego de construdo el guin, es llevarlo desde su estado estructural a un estado grco y comprensible para todos, transformndose as en una animacin. Esta apunta a una situacin emocional ms que explicativa (pues para esto se encuentra la seccin Aprendamos de Salud) ya que el enganche que se trata de lograr, es tomar un caso cotidiano en la vida de las personas, para que se sientan identicadas y se interesen en lo que el sitio y el movimiento les est mostrando. Si bien esto responde a dirigirse (de modo especco) a un tipo de pblico, los otros no estn excentos, ya que si bien no es una vivencia propia o cotidiana, muestra la diferencia entre un sistema y otro, dejando clara la injusticia ocurrida y su evidente desigualdad.
DE U N
DEL
A RGUMEN TO
53
Cruzar informacin sobre Salud Un Derecho y sobre el Sistema de Salud Chileno, es fundamental para dejar en claro cual ser el discurso a entregar. As, se articulan los contenidos tomando en cuenta los aspectos puntuales que se quieren destacar y recalcar.
54
DE U N
DEL
A RGUMEN TO
Construccin de Animacin
HISTORIA: GUIN VIDEO PRESENTACIN SALUD UN DERECHO Cuando llev mi nio al consultorio con tos y ebre, estuve todo el da ah para que despus el mdico me lo atendiera en 3 minutos. Pero cuando mi patrona lleva su guagua al pediatra, va y solo espera un par de minutos para ser atendida, y el doctor se da su tiempo pa revisarla. En el hospital, cuando el doctor me recet un remedio, fui a buscarlo en la farmacia y me dijeron Seora Carmen, no tenemos ms de se, lo tendra que comprar afuera. Yo me pregunto Por qu los hospitales ahora no tienen plata para nuestros remedios? Si yo no tengo culpa de haberme enfermado, o de no tener pa comprar. Como mi vecina, que est hace ms de un ao con una hernia y nunca la operan, en el hospital le dicen Lo suyo puede esperar, hay otros ms graves, y ella ya ni puede hacer las cosas de la casa. Entonces yo pienso Por qu algunos pueden elegir la fecha de su operacin como si fueran unas vacaciones, y el que no puede pagar tiene que esperar aos? All en el barrio alto, donde trabajo, veo clnicas privadas que parecen hoteles 5 estrellas yo no pido tanto, slo pido que me traten bien, y me den lo que necesito! Pero igual una piensa: Algo debe estar mal si es tan diferente un hospital de una clnica o no? Y al nal, de mi salud, quin se preocupa? Salud Un Derecho naci en Chile como un movimiento poltico y social, y su razn de ser es el restablecimiento de la solidaridad como el pilar fundamental del sistema de salud chileno. Buscamos que exista un sistema de salud igual para todos en nuestro pas, y queremos generar conciencia en la sociedad civil sobre los derechos que emanan de su condicin humana. As, Salud Un Derecho busca la promocin de la salud para todos, especialmente de las personas, familias, grupos y comunidades que viven en condiciones de pobreza y marginalidad. Luchemos por una reforma estructural de la salud! S parte de este sueo. Compromtete. La Salud es un derecho!!!
9. Seora Carmen dice lo que pide y analiza que algo est mal en el Sistema de Salud. 5. Seora Carmen reexiona acerca de su situacin en el Hospital y con los pocos recursos con los que este cuenta. 1. La Sra. Carmen lleva a su hija al Consultorio ya que tiene tos y ebre, pero debe esperar horas para ser atendida.
STORYBORAD La denicin de las partes del video introductorio de Salud Un Derecho, crea una estructura gua para llevar a cabo la construccin de la animacin determinando escenas claves para el desarrollo de ideas y situaciones, de modo que se reitere el argumento, enfocado desde distintos planos.
13. Luchemos por una Reforma Estructural de la Salud! Se parte de este sueo, compromtete La salud es un derecho!
DE U N
DEL
A RGUMEN TO
55
2. La patrona de la Sra. Carmen lleva a su beb al Mdico y solo tiene que esperar unos minutos para ser atendida.
3. El doctor le receta un remedio a la Seora Carmen.
4. En la Farmacia le indican que no cuentan con el medicamento y que debe ir a comprarlo afuera.
6. La vecina de la Sra. Carmen est hace ms de un ao con una hernia y nunca la operan, en el Hospital le dicen lo suyo puede esperar.
7. Seora Carmen reexiona acerca de la diferencia de tiempo de espera de una operacin entre un Hospital Pbllico y uno Privado.
8. Seora Carmen compara las Clnicas Privadas con hoteles cinco estrellas.
10. Seora Carmen pregunta: Y al nal de mi salud, quien se preocupa?.
11. Aparece el Logo de Salud Un Derecho. Se cuenta parte de lo que trata este movimiento.
12. Se dicen los propsitos que plantea el movimiento Salud Un Derecho y a quienes va enfocada esta Reforma Estructural del Sistema de Salud.
14. Finaliza el video mostrando el sitio web, invitando a unirse al movimiento para cumplir una meta.
56
DE U N
DEL
A RGUMEN TO
PERSONAJES Y ELEMENTOS El diseo de los personajes y elementos para la animacin (y tambin para elementos dentro del sitio) se dene como un trazo a mano alzada, evitando caer en un diseo iconizado, pues se enfoca en la parte emocional del usuario y receptor.
Personajes Protagonistas, sus estados y extras presentes en la animacin, en la cual se les aplica sombra para sobresalir en las escenografas.
DE U N
DEL
A RGUMEN TO
57
Objetos y Escenografas Elementos y escenas principales utilizadas en las composiciones de la animacin.
58
DE U N
DEL
A RGUMEN TO
Conguracin e Implementacin
La plataforma sobre la cual se construye el sitio web de Salud Un Derecho, es WordPress, y el template especco a utilizar es Thesis Theme. En esta seccin de programacin, se modican tanto cascadas de estilo como archivos .php, dando forma al espacio en el cual se dispondr el contenido, de acuerdo a la etapa de diseo estructural (wireframes) y visual (interfaz).
WordPress Es un sistema de gestin de contenido enfocado en la creacin de blogs, que naci del deseo de construir un sistema de publicacin personal, elegante y con una buena arquitectura, colocando especial atencin a la esttica, estndares web, y usabilidad. Fuente: http://es.wikipedia.org/wiki/WordPress
Plugins
Al momento de trabajar directamente en la programacin del sitio, se hace indispensable buscar plugins que faciliten y complementen el diseo propuesto. Para esto, la bsqueda comienza sabiendo exactamente qu es lo que necesitamos, de modo que se evite la descarga innecesaria de plugins. Dentro del sitio, existen mltiples aspectos que deben cubrirse, como por ejemplo: para los usuarios, el formulario de registro para un nuevo miembro, el rol que a este se le asigna y los permisos y capacidades que debiese tener; y en el rea de las redes sociales, la existencia de bookmarks y un espacio del sidebar para Twitter, RSS y Facebook, entre otros. Akismet: Chequea los comentarios para ver si son o no spams. Category Reminder: Muestra una nube de etiquetas personalizada en el sidebar. Congurable Tag Cloud: Aade un globo gigante que cambia de color, indicando la seccin de categoras justo debajo del botn de publicacin para no olvidar agregarlas. GET POSTS: Aade una etiqueta de cdigo corto en cualquier pgina esttica o entrada, y se mostrar una lista de mensajes utilizando el cdigo de plantilla [get_ posts]. Google Analytics for WordPress: Aade Google Analytics en el blog de WordPress, aadiendo un montn de caractersticas como, por ejemplo, variables personalizadas y clickout automtico, y el seguimiento de descarga. Latest Post by Category: Devuelve una lista de sus ltimos mensajes, organizados por categora. Levels2Categories2: Permite crear una relacin entre el nivel de usuario y las categoras, as solo los usuarios con denido nivel pueden postear en las categora elegida. Raw HTML Capability: Permite ingresar HTML puro en los mensajes. Tambin puede activar y desactivar comillas inteligentes y otros formatos automticos en funcin de cada post. Register Pluz Redux: Mejora el proceso de registro de usuario con una personalizacin completa y opciones adicionales de administracin.
Thesis Theme Es un framework que gestiona la plantilla de WordPress, ofrece diferentes opciones de diseo que pueden ser administradas fcilmente. Da espacio para custom.css y custom_functions.php, haciendo verstil personalizar el diseo al momento de la programacin.
DE U N
A RGUMEN TO V I SUA L" C ON FIGU R ACI N E I MpLEMEN TACI N
59
Role Scoper: Sistema de gestin de contenidos (CMS) que otorga permisos para leer y editar, restringir contenido especco y crea, complementa y edita roles de WordPress. Share This: Permite que los visitantes compartan un post o una pgina con los dems. Soporta correo electrnico y posteos a los sitios con bookmarks sociales. Social Proles Widget: Permite insertar conos de perles sociales en el sidebar a travs de widgets. Thesis OpenHook: Permite insertar contenido arbitrario en los numerosos hooks que el tema Thesis proporciona. Widgets Reloaded: Reemplaza varios de los widgets que vienen por defecto en WordPress con versiones que permiten mayor control y opciones para personalizarlos, adems pueden ser utilizados repetidas veces. Tweet Blender: Proporciona varios widgets de Twitter, como mostrar los propios tweets, mostrar tweets relacionados con las etiquetas de mensaje, mostrar tweets para listas de Twitter, mostrar tweets de hashtags y tweets favoritos, entre otros. WordPress Importer: Importa posts, pginas, comentarios, campos personalizados, categoras, y tags desde un archivo de exportacin de WordPress. WP Filter Post Category: Permite elegir las categoras de las entradas que se mostrarn en el home, escondiendo las que no se seleccionen.
Elementos Integrados
Otra de las implementaciones hechas en el sitio web, fue la incorporacin de un Slideshow en el home, en el cual se ubica la animacin que explica qu es Salud Un Derecho, en la primera pestaa, cul es su objetivo en la segunda y cmo contribuir en la tercera. De este modo, se optimiza el espacio de la pgina, en comparacin a lo que hubiese sido desplegar estas secciones dentro de la misma. Los ttulos de las pestaas se ubicaron en la parte inferior del recuadro y su apariencia fue modicada mediante la cascada de estilo correspondiente, dndole un aspecto ms ligero; tambin fueron eliminados los botones anterior y siguiente, pues el hecho de ser slo tres pestaas hace rpida la seleccin de contenido.
Slideshow Presentacin de los tres momentos del slideshow ubicado en el home del sitio web: video e imgenes.
60
DE U N
A RGUMEN TO V I SUA L" C ON FIGU R ACI N E I MpLEMEN TACI N
Cierre Primer Captulo

El proceso de trabajo en esta etapa, abarc distintos aspectos de estudio y desarrollo, los cuales convergeron en un punto crucial para concluir el proyecto; este es, la creacin de un argumento visual en un espacio web concreto. La realizacin del video introductorio para Salud Un Derecho, se ha terminado para completar el elemento faltante dentro del sitio, esta es la pieza que da forma al argumento globar y que presenta al movimiento de manera clara, dando sentido al discurso. A pesar de haber producido una sola animacin, se han puesto a disposicin, de los integrantes de Salud Un Derecho, los archivos que la construyen para que puedan tomarlos y crear otros videos, con el n de entregar argumentos en distintos casos, que transmitan al pblico, informacin e ideas claras y precisas. Lo estimado, es que se siga trabajando con la lnea de diseo implementada. Si bien se ha concretado la construccin del video y del template del sitio, su administracin se encuentra en manos de los integrantes del movimiento, por lo que sucede algo similar a lo que pasa con el video; el sitio queda sujeto a cambios de contenido, ms que de diseo, segn lo que ellos estimen conveniente para el desarrollo de sus necesidades.
62
DE U N
A RGUMEN TO V I SUA L" C I ER R E P R IMER C A p T U LO
Captulo II Sistema Visual de Orientacin para Hospitales

Estudio y Diseo de Componentes Grcos
64
Introduccin
En la segunda etapa de Titulacin se abarca un nuevo tema, presentando un cambio con relacin al proyecto anterior, pues el tema tratante en este perodo, se orienta a la creacin de un producto de diseo tangible. En este caso, el medio deja de ser una plataforma web para ser ahora un lugar y un objeto fsico: el Hospital de Quilpu y su sealtica. A pesar de ser dos proyectos que abarcan asuntos diferentes y que parecieran ser distantes el uno del otro en trminos de materia, existe un hilo conector entre ambos casos de estudio que reside en la creacin de la comunicacin visual. Con esto tenemos que en el proyecto de Salud un Derecho se construye un argumento visual, en el que se da a conocer este grupo como entidad y donde comunica sus metas e ideales, invitando a las personas a unrseles; por otro lado, en el Hospital de Quilpu se disea un sistema visual de orientacin que construye el viaje del usuario (paciente, funcionario, acompaante) desde que llega al lugar hasta que lo deja, actuando como un canal de comunicacin entre l y los espacios fsicos que conforman los distintos servicios del Hospital. La idea del anteproyecto se divide en dos ciclos; Fase de Diseo y Fase Constructiva. La primera corresponde a esta etapa de la Titulacin, en la cual se desarrolla el estudio y planicacin del Sistema Visual de Orientacin, y donde se construye una tipografa llamada Hospital, exclusiva para su uso. La segunda corresponde a la etapa de Titulacin 3, en la cual se abarcar el tema del prototipado con materiales y puestas en escena, adems de la entrega del manual grco a la directiva del Hospital de Quilpu como documentacin de un anteproyecto que puedan implementar en sus instalaciones. Las reas de estudio presentes en este captulo abarcan aspectos de la realidad vivida por los usuarios, las condiciones creativas y funcionales que requiere un sistema de orientacin exitoso, como tambin aspectos ms nos que se aplican en la abstraccin de un smbolo y la construccin de un caracter, para que juntos conformen codigo coherente y legible para el usuario.
66
C A p T U LO II: "S I S T EM A V I SUA L
DE
O R I EN TACI N
pA R A
H OS pI TA LE S " I N T RODUCCI N
Estudio y Anlisis
Introduccin a la Investigacin del Usuario: Sondas
Las sondas nos permiten descubrir diferentes cosas respecto a los sueos, percepciones, experiencias y vivencias de las personas, ya se componen de elementos que recolectan informacin, que ayuda a responder diversas preguntas en una investigacin.
Los objetos de diseo no son solo productos tangibles que se aplican a modernas tecnologas, sino que tambin son experiencias, funciones y servicios que deben ser tiles, usables y deseables. Por ello el diseo se ha vuelto complejo, porque aplica a su producto la experiencia del usuario que debe ser previamente estudiada.
Estudio de Sondas: Para abarcar el proyecto, se necesita de una investigacin del usuario, por ello que se estudian las sondas como mtodo de compilacin de informacin del usuarios y metodologas de pensamiento.
68
DE
O R I EN TACI N
pA R A
H OS pI TA LE S " E S T U D IO
A N LI S I S
Diseo para actividades del usuario

A partir de la materia acerca de las sondas, nos enfocamos a generar una investigacin sobre el usuario (funcionarios, pacientes, acompaantes, visitas, etc). Para esto, debemos describir qu es lo que necesitamos saber en pos de descubrir algo y documentarlo. El primer paso que inicia el proceso, es denir en torno a qu son las preguntas; en este caso es saber qu proceso se necesita para orientar a las personas del hospital, cmo ubicarlas dentro del ujo abstracto y del lugar fsico. A partir de esto es posible comenzar a denir los tems de las actividades que se quieren realizar. Teniendo los tems claros, se comienzan a construir las actividades respectivas. Es importante tener en cuenta que estas deben ser dinmicas y no demasiado extensas, pues la idea es que el usuario no pierda el inters y la continuidad durante el desarrollo de estas, ya que adems puede generar una conversacin entre diseador (en este caso) y usuario, un dilogo vlido que aporte a la investigacin del proyecto y al desarrollo del diseo. ESTRUCTURA DE LA ACTIVIDAD 1. Cmo se mueven las personas en el espacio y cmo se ubican dentro de este. 1.1. Actividad con mapa a. Ubquese usted dentro del mapa b. Ubique el punto a donde se dirige, anote el lugar. c. Dibuje el recorrido del lugar al que se dirige. d. Sealice y nombre los lugares que conoce. e. Coloque puntos crticos para la orientacin. 2. Cul es la percepcin que se tiene del hospital, qu reeja. 2.1. Describa el hospital en 3 palabras. 2.2. Le gusta su hospital? Si su respuesta es s, qu cosas le gustan de l? 2.3. Nombre aspectos crticos del hospital y cmo podran solucionarse. 2.4. Cmo considera la sealizacin dentro del hospital? Encierre su alternativa a. muy bueno b. bueno c. malo d. muy malo 3. Cules son los modos ms frecuentes para orientarse. 3.1. Ordene de 1 al 5 los modos ms frecuentes para orientarse; tomar el 1 como lo mejor (ocina de informaciones, sealtica, personal administrativo, personal mdico, guardia). 3.2. Explique la decisin de los nmeros 1 y 5.
C A p TU LO II: "S I S TEM A V I SUA L
DE
O R I EN TACI N
pA R A
A N LI S I S
69
4. Cules son las caractersticas o cualidades de un hospital idneo. 4.1. Describa en 3 palabras su hospital idneo. 4.2. Cul es la imagen que le gustara que reejara el hospital? 5. Cul es la rutina del usuario al llegar y entrar en el hospital? 5.1. Lnea de tiempo. Marque con una cruz su rutina desde que va al hospital hasta que sale de l. 5.2. Me voy al hospital en: a. automvil propio b. locomocin colectiva c. bicicleta d. caminando 5.3. Llegando al hospital: a. s exactamente a dnde debo ir b. no s a dnde debo ir 5.4. Me guo gracias a: a. la sealtica del hospital b. OIRS c. el personal mdico d. el personal administrativo e. guardia f. otro 5.5. Una vez dentro del hospital: a. me ubico perfectamente b. me pierdo con facilidad
70
DE
O R I EN TACI N
pA R A
A N LI S I S
DE
O R I EN TACI N
pA R A
A N LI S I S
71
Actividad 1 Mapa de las plantas del hospital que permite a las personas ubicarse y expresar sus ideas dentro de l.
72
DE
O R I EN TACI N
pA R A
A N LI S I S
Actividad 2-3-4 Seccin de narracin e indicacin sobre algunos temas referentes al hospital.
DE
O R I EN TACI N
pA R A
A N LI S I S
73
Actividad 5 Indicacin del recorrido-ubicacin de la persona en el hospital.
74
DE
O R I EN TACI N
pA R A
A N LI S I S
Anlisis de las Actividades

El anlisis de las actividades busca entrever lo que los usuarios y funcionarios esperan, desean y suean del hospital, as como tambin conocer su postura frente a algunas situaciones, su orientacin dentro de este edicio. Algunos de los tems pueden ser muy subjetivos, pero esto da la posibilidad de que las personas expresen su punto de vista, sus pensamientos. La actividad con el mapa muestra claramente que los funcionarios conocen bastante mejor los edicios que la mayora de los pacientes, aunque en ciertos casos el CAE y el Hospital se ven totalmente independientes el uno del otro. Otro aspecto de importancia que se observ fueron los puntos crticos dentro del hospital, puntos de decisin y de indicacin que sealaron las personas, claves para el diseo de waynding. Las actividades respecto a los modos de orientacin dan un claro acerca de la sealtica y de primera fuente de la que los usuarios se informan. El orden de preferencia y funcionalidad es el siguiente: 1. Guardia - Es la primera persona con la que se encuentran y quien les indica y aclara dudas respecto a la ubicacin. 2. Ocina de Informaciones (OIRS) - Es la segunda opcin al preguntar por lugares y procesos dentro del hospital. 3. Sealtica - Es la tercera opcin que slo sirve como referencia para orientarse, pero que ha sido criticada no en cuanto a su funcin, sino en cuanto a su ubicacin, aspecto y relacin con el hospital. Las actividades respecto a asuntos ms subjetivos permiten ver que a las personas les gusta el hospital en relacin a la atencin directa, pero an as piensan y desean un hospital renovado, ms tecnolgico, con ms espacios y recursos, y con atencin personalizada, ms cercana. Todos aspectos que les gustaran ver reejados en el Hospital de Quilpu. Podemos decir que las limitaciones nancieras del hospital, impiden muchos de los sueos que tienen las personas respecto a la infraestructura y tecnologa, pero se puede avanzar con un sistema de orientacin ubicado en puntos clave, mejorando el ujo tanto del personal como de los pacientes, acompaantes y visitantes. Es importante que exista una persona a la cual se le puedan hacer consultas respecto de una ubicacin, pero de ah en adelante el camino se hace por mera intuicin de lo sealado; es aqu donde el sistema de orientacin ayudar a facilitar este recorrido.
DE
O R I EN TACI N
pA R A
A N LI S I S
75
Observaciones en Terreno
El Hospital de Quilpu tiene un evidente problema en cuanto a la sealtica, pues adems de carencia en la parte esttica, tambin comprende una falta de lgica y funcionalidad. Lo primero a observar es la cantidad de diferentes colores, formas y tipos de sealticas que pretenden formar un asunto continuo y unicado, pero este se ve interrumpido por la variedad y poca correspondencia entre ellas. Lo segundo se enfoca a la ineciencia de las indicaciones dentro y fuera del recinto, haciendo difcil la ubicacin de la persona en el lugar.
Actuales Tipologas Hospital de Quilpu La variedad de tipologas no alcanza a construir una continuidad y lgica para obtener una optima lecturabilidad de las variadas jerarquas de rtulos, afectando tambin la carente imagen corporativa que puede tener un hospital.
76
DE
O R I EN TACI N
pA R A
A N LI S I S
Waynding
Para comenzar la creacin y el desarrollo del sistema de orientacin, es necesario comprender aspectos ms generales respecto a la sealtica que no dejan de ser importantes. Con esto nos referimos al conocimiento y entendimiento del waynding. El waynding es una metodologa de organizacin de sealtica (o indicadores) que sirve para guiar a las personas en diferentes espacios que la rodeen, utilizando entre algunas de sus herramientas, los signos y smbolos. La funcin de estos ltimos es identicar, informar, dirigir, restringir o permitir en la sealtica, hacindola ms accesible y ofreciendo una mejor experiencia de manera exitosa. Otros aspectos que juegan un rol importante en el waynding, son la luz, el color, los materiales y los senderos, elementos que muchas veces condicionan las decisiones de diseo. El hospital ya es un entorno complejo, y nos hemos percatado de que en muchos casos la sealtica no es suciente, o no es lo sucientemente clara. Para mejorar esta situacin, es bueno considerar algunos principios del waynding, tales como: La lgica del sitio: Comprender cmo se dividen y seccionan los espacios. Saber qu corresponde a cada cosa. Los sistemas dentro del entorno: Aspectos como el nombrar, enumerar y organizar las reas, zonas, sitios, etc. Crear jerarquas claras y lgicas que ayuden a los usuarios a recordar y usar la nomenclatura. La orientacin: Utilizar mapas direccionales, orientativos (usted est aqu) Denir diagramas simples, mostrando los detalles sucientes para no complejizar los mapa. Elementos de sealizacin: Smbolos y signos. Mecanismos grcos relacionados con el entorno mismo (paredes y pisos). Habilidades del usuario: Tomar en cuenta las necesidades especiales, las minoras culturales y tnicas, y la tercera edad. Considerar a los funcionarios y usuarios frecuentes, las limitaciones de vista (por ejemplo, al utilizar color, el daltonismo) y movimiento.
DE
O R I EN TACI N
pA R A
A N LI S I S
77
Consistencia: Todas las formas de informacin pblica deben ser consistentes y claras. La explicacin de cmo funcionan los signos (de la sealtica), ayudan al equipo (funcionarios) a dar indicaciones ms claras y tiles. Los trminos utilizados deben ser reconocidos y entendidos por todas las personas. Para pensar en un sistema de orientacin eciente para estructuras complejas como el hospital, es tambin importante basarse en el comportamiento de las personas,ya que estas interpretan de manera cognitiva los espacios.
Las siguientes caractersticas debera considerarse en un sistema de sealizacin: No les hace pensar. Crean un sistema de comunicacin visual completo, claro y consistente, con mensajes concisos. Muestra solo lo que se necesita. Muestra informacin relevante sobre el espacio, la ubicacin y ruta de navegacin. Elimina el exceso de informacin. Elimina elementos innecesarios para crear un entorno visual.
Interpretacin Cognitiva Ejemplo de un esquema cognitivo de un mapa geogrco.
78
DE
O R I EN TACI N
pA R A
A N LI S I S
ACCESIBILIDAD COGNITIVA La accesibilidad al medio urbano requiere que la ciudad y sus servicios se organicen, de modo que permita a cualquier persona poder desenvolverse en ellos de manera independiente, segura y natural. Segn el Concepto Europeo de Accesibilidad (CEAPAT, 1996), la accesibilidad es una caracterstica bsica del entorno construido. Es la condicin que posibilita el llegar, entrar, salir y utilizar las casas, las tiendas, los teatros, los parques y los lugares de trabajo. La accesibilidad permite a las personas participar en las actividades sociales y econmicas para las que ha concebido el entorno construido. Para obtener accesibilidad en el medio fsico, los sistemas que se establezcan deben respetar los siguientes requisitos: Crear sistemas sencillos y entendibles para todo tipo de usuarios. Administrar y facilitar la informacin en los puntos crticos mediante una buena indicacin. Utilizar smbolos y signos adecuados en la sealizacin. Las capacidades cognitivas son aquellas que se reeren a lo relacionado con el procesamiento de la informacin, entre ellas estn: atencin, percepcin, memoria, resolucin de problemas, comprensin y establecimiento de analogas. La idea es ocupar estas capacidades para el desarrollo de un sistema de orientacin basado en la experiencia del usuario. En relacin al waynding, lo cognitivo se sita en uno de sus procesos, en donde las personas deben realizar acciones cognitivas (como la toma y ejecucin de decisiones) para desplazarse en los espacios. Si la persona est en un lugar desconocido, se debe facilitar la estrategia cognitiva para que logre escoger correctamente qu camino seguir, posibilitando la accesibilidad cognitiva dentro del espacio.
DE
O R I EN TACI N
pA R A
A N LI S I S
79
Diseo Estratgico del SVO

Analizando las actividades, se puede dar cuenta de tres reas esenciales que deben ser intervenidas para crear un nuevo Sistema Visual de Orientacin que acompae a la persona en su viaje dentro del hospital: contenido, espacialidad e innovacin.
Esquema SVO Se muestra lo que se abarca en cada rea, cual es el enfoque que debe tratarse en ellas respectivamente, de modo que sea posible crear una estructura clara y organizada del viaje del usuario en un entorno hospitalario.
La sealtica es una forma de comunicacin visual muy precisa, pues la utilizacin y decisin de smbolos, colores y tamaos crea un sistema complejo a la hora de comunicar el contenido a una persona. As, las tres reas mencionadas anteriormente tienen directa relacin con la comunicacin y con el sistema de orientacin en s.
80
DE
O R I EN TACI N
pA R A
H OS pI TA LE S " D I S E O E S T R ATG ICO
DEL
SVO
Construccin de un Viaje Hospitalario

El viaje de las personas dentro del recinto hospitalario se dene por un ritmo, funcin, disposicin y arquitectura del hospital. Para entender este ritmo, este viaje se dividi en siete etapas necesarias para lograr internarse en la complejidad del hospital, y en sus respectivas reas. En cada una de ellas se dene un suceso que gua al usuario de manera uda y legible.
1
Identicacin Hospital
Una vez que se llega al recinto hospitalario, la persona desea saber en qu lugar de l se ubica y hacia dnde debe dirigirse
3
Reconocimiento del Edicio
Se verica que el lugar al que deba dirigirse es el correcto
5
Direccionamiento
En el recorrido interno dentro del edicio, existe sealizacin que indica la ubicacin de los servicios
Llegada
La persona ubica el hospital fuera del recinto
4
Identicacin de Planta
La persona identica todas las plantas del edicio, la ubicacin de sus servicios
DE
O R I EN TACI N
pA R A
DEL
SVO
81
Estructura del Viaje Hospitalario El viaje hospitalario se divide en 7 partes denidas por distintos sucesos que marcan un guin que acompaa al viaje en el Hospital.
6
Reconocimiento del rea
La persona verica la llegada a un rea gracias a su nominacin
7
Seleccin
Dentro de un rea o del mismo recinto hospitalario, la persona puede identicar los servicios menos , as como tambin las habitaciones para ingresar a ellas
Caminata Viaje continuo del usuario hacia y en el hospital con el n de llegar a un servicio.
Detencin El usuario hace una pausa en su trayectoria para hacer un reconocimiento del lugar.
82
DE
O R I EN TACI N
pA R A
DEL
SVO
PARTITURA DE INTERACCIN El viaje de la persona dentro del hospital comienza a formar una estructura que se cruza con una planicacin del sistema de orientacin. Con la partitura de interaccin se puede visualizar de mejor modo los puntos claves en este viaje y los componentes internos y externos que intervienen en el proceso, para crear un sistema que acompaa al usuario hasta llegar a su destino.
DE
O R I EN TACI N
pA R A
DEL
SVO
83
Partitura de Interaccin Permite ver de manera paralela los distintos elementos que actan en el viaje hospitalario, en este caso la evidencia fsica, el usuario, el sistema de orientacin e informacin.
84
DE
O R I EN TACI N
pA R A
DEL
SVO
ESTUDIO DEL ESPACIO La estructura base parte con la denicin de estos momentos en el viaje del usuario, los cuales estn denidos segn los puntos claves de decisin. Estos han sido ubicados en el plano, en los distintos niveles del hospital.
DE
O R I EN TACI N
pA R A
DEL
SVO
85
Hospital Quilpu Nivel-1 En el plano se muestran los puntos claves donde se deben indicar nombres, prevenciones,peligro, direccionamiento y ubicaciones.
86
DE
O R I EN TACI N
pA R A
DEL
SVO
Hospital de Quilpu Nivel 1
DE
O R I EN TACI N
pA R A
DEL
SVO
87
Hospital de Quilpu Nivel 2
88
DE
O R I EN TACI N
pA R A
DEL
SVO
ORGANIZACIN DEL ESPACIO Los edicios se separan en 9 complejos que se nombran como: Urgencias, Centro Adosado de Especialidades (CAE), A, B, C, D, E, F y G. La idea tras esta decisin, es lograr ubicar al usuario en espacios denidos y concretos, sealando no una planta general, sino que especicando los niveles del edicio en particular y los servicios existentes en cada uno.
DE
O R I EN TACI N
pA R A
DEL
SVO
89
Divisin del Hospital La divisin tiene el propsito de hacer un rpido reconocimiento de los espacios en el hospital, identicando los edicios con esta designacin de letras.
90
DE
O R I EN TACI N
pA R A
DEL
SVO
Tipografa Hospital
La tipografa en la sealtica responde a una necesidad especca y fundamental; est diseada para ser vista y comprendida de forma inmediata, ofreciendo mayor legibilidad a distancia en un mnimo de tiempo. En base a esta premisa, la eleccin tipogrca para el sistema de orientacin comienza con un estudio previo en base a su visibilidad, legibilidad e inteligibilidad, de modo que su diseo y construccin para el Sistema Visual de Orientacin, rena la mayor cantidad de elementos favorables para un resultado eciente en su implementacin. El punto de crear una nueva fuente tipogrca, no es solo darle funcionalidad, sino que tambin aportar un toque esttico y un rasgo particular, pero sin desviar su objetivo. Crear una tipografa para el Sistema Visual de Orientacin responde a todos los criterios estudiados con anterioridad, pero no solo busca dar cierta identidad al Hospital de Quilpu, sino que tambin proyectarse como una tipografa que pueda ser utilizada por distintos servicios de salud, respondiendo a la urgencia, a la rapidez y al breve tiempo de detencin de las personas que transitan estos espacios y que interactan da a da con el sistema.
Visibilidad, Legibilidad e Inteligibilidad

La tipografa en la sealtica responde a una necesidad especca y fundamental; est diseada para ser vista y comprendida de forma inmediata, ofreciendo mayor legibilidad a distancia en un mnimo de tiempo. En base a esta premisa, la eleccin tipogrca para el sistema de orientacin comienza con un estudio previo en base tres aspectos fundamentales: 1. Visibilidad: Que el texto o palabra sea visible. 2. Legibilidad: Que texto o palabra se pueda leer (el cdigo es accesible). 3. Inteligibilidad: Que el texto o palabra se pueda comprender.
Dentro de los criterios para la prevalencia de legibilidad, existen ciertas caractersticas importantes a considerar: Reconocimiento de trazos: Son los contornos destacados de cada letra, sus trazos ascendentes, descendentes, redondos y angulares, los que facilitan la recepcin visual del usuario. Con esto, el ojo humano es capaz de reconocer rpidamente los caracteres sin necesidad de captarlos completamente, sobre todo al observar su parte superior, lo que ayuda al usuario en movimiento dentro del hospital, en su recorrido, y facilita -de cierto modo- la lectura, si es que el usuario presenta problemas de visin.
DE
O R I EN TACI N
pA R A
H OS pI TA LE S " TI pOG R A F A H OS pI TA L
91
Uso de maysculas y minsculas: Los textos escritos en maysculas requieren una supercie mayor de impresin y reducen la velocidad de lectura en aproximadamente un 12%, a diferencia de un texto escrito en minsculas. El ojo tipogrco, los trazos ascendentes, descendentes y terminales, y los puntos de las es y diresis, son aspectos determinantes de las minsculas que inuyen directamente en el reconocimiento de las palabras. Variaciones tipogrcas: Al utilizar negritas o semi-negritas, se corre el riesgo de bajar el ndice de legibilidad, pero al aplicarlas para diferenciar categoras y destacar algunas cosas, su cualidad de contraste funciona perfectamente para esto. Interletraje: Debe ser armnico y equilibrado respecto del blanco del espacio interior de los caracteres y el blanco del espaciado, pues un interletraje exagerado evoca la imagen de caracteres aislados, y un interletraje demasiado estrecho, ser un ruido en la lectura perjudicando la legibilidad. Sucede algo similar en el interlineado y el espaciado entre palabras.
Trazos Reconocibles La imagen al costado izquierdo muestra los trazos fundamentales para el reconocimiento de los caracteres de caja baja.
92
DE
O R I EN TACI N
pA R A
REFERENCIAS TIPOGRFICAS De lo estudiado respecto a las fuentes para sealtica, sealizacin y rtulos, las tipografas ms apropiadas para esta clase de usos son las sin serif, de estilo neo-grotesco y geomtricas. Su construccin es bastante dctil y dcil, presentan muy buena legibilidad en palabras y frases cortas ya que sus trazos son equilibrados, sencillos y proporcionados, y tienen una abertura del ojo tipogrco apropiada.
Fuente Tipogrca Frutiger
Algunos ejemplos de las fuentes tipogrcas ms utilizadas para la sealtica, son: Frutiger: Creada por Adrian Frutiger en 1968 para el diseo de un sistema de sealizacin acorde con la arquitectura del nuevo aeropuerto de Charles de Gaulles. Es de fcil y rpido reconocimiento a grandes distancias, tanto de frente como en ngulo. No es estrictamente geomtrica ni humanista. Helvetica: Desarrollada por Max Miedinger en 1957 para la fundicin de tipografas Haassche Schriftgieerei de Suiza; nace como un rediseo de una fuente llamada Haas Grotesk. Es muy buena para su uso en ttulos u otras aplicaciones donde el texto es corto y de gran tamao. Johnston Underground: Diseada por Edward Johnston en 1916 para el sistema de sealizacin de la London Underground Railways. Se caracteriza por la combinacin de una gran tcnica caligrca y sensibilidad tipogrca. Univers: Creada por Adrian Frutiger en 1954 para la Fundicin Deberny & Peignot, para su uso en composicin y fotocomposicin en metales. Escapa de las formas geomtricas y constructivistas. Los blancos internos son ms grandes que los blancos entre las letras, las astas verticas son ms gruesas que las horizontales y las diagonales tienen un grosor intermedio. DIN 1451: Las letras DIN hacen referencia al Deutsches Institut fr Normung (Instituto Alemn de Estndares Industriales). Declarada en 1936 por el Comit alemn de estndares como la tipografa para las reas de tecnologa, trco, administracin y negocios. Se extendi rapidamente por toda Alemania, especialmente en la sealizacin de carreteras. La seleccin de un palo seco se debe a su legibilidad y a las formas geomtricas y fciles de reproducir. La versin de DIN utilizada en este caso es ms contempornea, y corresponde a la fuente DINPro. Las variaciones presentes en esta residen en aspectos de interletraje, prolongacin de trazos y curvas, pero son tan leves que no logran cambiar considerablemente la forma de los caracteres.
Fuente Tipogrca DIN El escrito superior corresponde a la fuente tipogrca DIN 1451, mientras que el escrito inferior corresponde a la fuente tipogrca DINPro. Fuente Tipogrca Univers Fuente Tipogrca Johnston Underground Fuente Tipogrca Helvetica
DE
O R I EN TACI N
pA R A
93
Adems de estas cuatro fuentes, se consideran dos ms como elementos de inspiracin, correspondientes a la tipografa del Transantiago (presenta un trazo menos geomtrico y hecho a mano) y del Gobierno de Chile (presenta variaciones en el grozor de los trazos).
Fuente Tipogrca TS
Para comenzar con la respectiva construccin de los caracteres, se agrega una sptima fuente tipogrca que es de libre uso y que puede ser editada: Titillium. Esta fuente nace en la Accademia di Belle Arti di Urbino como un proyecto didctico de un curso de diseo tipogrco del Master of Visual Design Campi Visivi. Los diseadores de tipografas interesados en la correccin o revisin de Titillium son invitados a cooperar o desarrollar sus propias variantes de los caracteres acorde a los trminos especicados en la licencia, compartiendo nuevas ideas. En base a las referencias tipogrcas se modula el diseo de una fuente exclusiva para sealtica hospitalaria, tomando los aspectos ms claros y funcionales de cada una. Considerando que los trazos del contorno superior son fundamentales para el reconocimiento de los caracteres -y as, para el reconocimiento de una palabra-, se toman los rasgos ms limpios y denidos de las tipografas escogidas. En cuanto al blanco interior, este debe ser proporcionado respecto al blanco que deja con otras letras, sin abusar del caso de si es redonda, ovalada o curva. El grosor del trazo tambin es decisivo y determinante para su construccin, pues el blanco interior ms dibujado, ser una gua a considerar en el diseo de la nueva tipografa.
Tipografa del Transantiago
Gobierno
Fuente Tipogrca Gobcl Tipografa del Gobierno de Chile
Titillium
Fuente Tipogrca Titillium
La evolucin de la tipografa va mostrando de forma clara e inmediata algunas de las decisiones tipogrcas, tales como la orientacin y denicin de los trazos. Esto conforma el gesto de la tipografa, el cual se muestra tanto en los caracteres como en la iconografa, pues es sumamente importante que en el desarrollo lineal de los tipos, los iconos y la sealtica como tal, sea coherente y consecuente en el uso de los aspectos caractersticos, de modo que todo el sistema sea consistente.
Blancos Tipogrcos Blancos interiores de las tipografas Frutiger, Helvetica y Univers.
94
DE
O R I EN TACI N
pA R A
Creacin de Trazos y Esqueletos

Antes de denir un diseo nal para la fuente, se crean al rededor de tres versiones que vendrn a ser una especie de "paso a paso" en el desarrollo de la tipografa. En un punto del proceso se cae en la cuenta de que es necesario tener un modo de regular los trazos de los caracteres y de los iconos sin que exista la necesidad de mover y ajustar cada uno, punto por punto. Es a partir de esta premisa que se piensa en la creacin de los trazos tipogrcos para las estructuras. La funcin primordial de los trazos es principalmente construir el "esqueleto" de los caracteres, y as tambin, el de los iconos, estableciendo una relacin directa y coherente entre ambos. Estos trazos se denen como "trazos bsicos" ya que mantienen un grosor denido pero varan en sus terminaciones, presentando cuatro formas diferentes en base a las cuales se crean los diversos trazos para casos especcos, en relacin a la orientacin de los caracteres, sus ngulos y trazos terminales. De este modo se obtienen diferentes variantes de un mismo tipo, en este caso dieciseis trazos en total.
Terminaciones de los Trazos Bsicos Formas de las terminaciones utilizadas para denir los distintos trazos. Recto Semi-biselado Biselado Triangular
DE
O R I EN TACI N
pA R A
95
Trazos Rectos y Semi-biselados Trazo Recto Los trazos rectos y semi-biselados se utilizan en su mayora en letras maysculas, nmeros y caracteres que no presentan curvas.
Trazos Semi-biselado por ambos lados
Trazos Semi-biselado por lado izquierdo
Trazos Semi-biselado por lado izqderecho
Trazos Biselados Los trazos biselados se utilizan en su mayora en las terminaciones curvas de algunas letras minsculas y en Trazos Biselado por ambos lados algunos caracteres especiales.
Trazos Biselado por lado izquierdo
Trazos Biselado por lado derecho
Trazos Triangulares Trazos Triangular por ambos lados Los trazos triangulares se utilizan en su mayora en algunas letras minsculas compuestas de curvas y trazos rectos, as como tambin en algunos caracteres especiales. Trazos Triangular por lado izquierdo
Trazos Triangular por lado derecho
96
DE
O R I EN TACI N
pA R A
La construccin de estos trazos se genera a partir de cuerpos vectoriales, los cual son pensados para conformar las distintas partes que forman los caracteres. Con esto se tienen la base que permitir constituir el trazo como tal.
Base del Trazo Cuerpos vectoriales que muestran la forma del trazo antes de congurarlo como tal.
Al momento de congurarl este cuerpo como trazo, se denen una serie de modicaciones (como nombre, escala, color, estiramiento, etc.) propias de l, lo que ayuda a tener un control minucioso en la construccin de los caracteres.
Creacin de un Trazo Especicaciones del trazo tales como nombre, estiramiento, direccin y colorizacin, entre otros. Uno de los aspectos ms importante dentro de estas especicaciones es el estiramiento entre guas, ya que evita que si el trazo a utilizar se prolonga demasiado, las terminaciones se deformen.
DE
O R I EN TACI N
pA R A
97
Luego de determinar las condicionantes y especicaciones del trazo a congurar, se mantiene la misma forma del cuerpo vectorial, y a partir de esto comienza la estructuracin de los esqueletos de los caracteres.
Estructura del Trazo Esqueleto de algunos de los trazos con los que se construye la tipografa Hospital.
Un ejemplo respecto a la utilizacin de trazos para casos especcos, se muestra en las construcciones de las letras a y c, donde la letra a utiliza un trazo triangular por ambos lados y un trazo biselado por el lado izquierdo orientado hacia el interior -esto se reere a que el lado ms recto del trazo se orienta hacia el blanco interior de la letra-, mientras que la letra c utiliza un trazo biselado por ambos lados, tambin orientado hacia el interior.
Construccin de Caracteres Utilizacin de trazos para la construccin de las letras a y c.
98
DE
O R I EN TACI N
pA R A
Teniendo denida la paleta de trazos, se construyen los esqueletos de los caracteres que permitirn la creacin de distintos pesos tipogrcos para completar la familia. El hecho de que la fuente est pensada principalmente para la sealtica, no quita la posibilidad de enriquecerla con ms variantes que, en este caso, pueden seguir siendo creadas dada la libre disposicin a cambios en que se deja esta fuente.
DE
O R I EN TACI N
pA R A
99
Estructura Esqueleto de las letras maysculas y minsculas de la tipografa.
10 0
DE
O R I EN TACI N
pA R A
DE
O R I EN TACI N
pA R A
101
Estructura Esqueleto de los nmeros y caracteres especiales de la tipografa.
102
DE
O R I EN TACI N
pA R A
DE
O R I EN TACI N
pA R A
103
Estructura Esqueleto de los pictogramas en su versin nal.
104
DE
O R I EN TACI N
pA R A
DE
O R I EN TACI N
pA R A
105
106
DE
O R I EN TACI N
pA R A
DE
O R I EN TACI N
pA R A
107
108
DE
O R I EN TACI N
pA R A
DE
O R I EN TACI N
pA R A
109
110
DE
O R I EN TACI N
pA R A
Caracteres
Una vez listo el esqueleto y denido un peso tipogrco base, se crean los distintos pesos para conformar la familia tipogrca a utilizar. Para la creacin de cada caracter, se ha utilizado el programa Fontographer, mientras que para la exportacin y validacin de la tipografa en un sistema operativo, se ha utilizado el programa FontLab, el cual permite establecer la informacin y los ajustes necesarios para su uso (como el interlineado, las propiedades de cada variante y los permisos de descarga, entre otros).
Casilla de Caracteres y Edicin de Mtricas
VARIANTES Las variantes de la tipografa constan de cuatro pesos: Regular Medium Bold Black El uso de ellas depender de la aplicacin en la que se utilicen, como por ejemplo al destacar el nivel del edicio al cual se est ingresando, o al presentar jerarquas de elementos en los mapas de planta. Los iconos se integran a la familia tipogrca como un elemento aparte, pues se ha dejado establecido slo el peso regular en ellos, ya que el detalle es mucho ms no.
La imagen a la izquierda corresponde a la ventana de Fontographer que muestra los caracteres de la variante Hospital Regular, mientras que la imagen a la derecha muestra la ventana en donde se edita el interletraje (kerning) de la tipografa.
DE
O R I EN TACI N
pA R A
111
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 |/\#$@&%()[]{}=-+_?!` ^*~<> ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 |/\#$@&%()[]{}=-+_?!` ^*~<> ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 |/\#$@&%()[]{}=-+_?!` ^*~<>
Variante Hospital Regular
Variante Hospital Medium
Variante Hospital Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 |/\#$@&%()[]{}=-+_?!` ^*~<>

112 C A p T U LO II: "S I S T EM A V I SUA L
DE
Variante Hospital Black
O R I EN TACI N
pA R A
Versiones Tipogrcas
PRIMERA VERSIN Esta versin se caracteriza por la intervencin directa de los caracteres de la fuente Titillium, modicando las curvas bzier y el grosor de los trazos de forma manual. Para su transformacin esto se vuelve un tanto perjudicial, pues no existe consistencia proporcional ni uniformidad a lo largo de los caracteres, entorpeciendo la armona grca de estos y dicultando su construccin. A pesar de lo anterior, esta versin sirve como un patrn general sobre el cual aplicar un trazo de grosor constante, que permita mantener la lnea tipogrca en los distintos pesos a crear. La idea del blanco interior y la conformacin de este se muestra en esta etapa.. La denicin de la caja tipogrca (para altas y bajas) se dene en base al ancho de la letra b, la que se mantiene en la mayora de las letras minsculas, pues vara levemente en algunos caracteres como la a y la n. Para las letras maysculas el ancho base tambin es el de la letra B, pero presenta ms variaciones en otras letras de anchos similares, como la A y la E.
Blancos Tipogrcos Blancos interiores de las tipografas Frutiger, Helvetica y Univers.
Titillium Text22L Hospital
Existe un trazo curvo en las terminaciones de las letras a y g que intenta dar cierto aspecto caracterstico a la tipografa. Slo se repite en estas dos letras que tienen cierta similitud en su composicin, pues ambas tienen un blanco interior cerrado en el ojo tipogrco y uno abierto en la curva ascendente y descendente. Otros caracteres que mantienen un trazo terminal curvo, pero ms prolongado, son las letras f, j, t e yIntegrar este trazo curvo a todas las letras interferira en la lectura de una palabra o texto, pues la lnea base se vera demasiado recargada y lo que se necesita es construir sencillez y claridad para la rpida comprensin del usuario.
Anchos Tipogrcos Denicin de los anchos tipogrcos de la primera versin a partir de las letras b y B, junto con la altura de la caja tipogrca.
DE
O R I EN TACI N
pA R A
113
Trazos Terminales Lo que caracteriza la tipografa en esta versin, es la consistencia de la curvatura en los trazos terminales presentes en algunos de los caracteres.
114
DE
O R I EN TACI N
pA R A
DE
O R I EN TACI N
pA R A
115
Primera Versin de la Tipografa Hospital Caracteres que conforman la primera versin de la tipografa diseada.
116
DE
O R I EN TACI N
pA R A
SEGUNDA VERSIN La segunda versin sigue modicando directamente las curvas, pero esta vez, anando y modulando los trazos de manera que tengan algo caracterstico, que est presente constantemente y que ayude a mantener el blanco interior de los caracteres, sin alejarlos de su funcionalidad. Los caracteres especiales siguen siendo los mismos que en la versin anterior, por lo que no se muestra cambio o innovacin en su estructura.
Nuevos Trazos Terminales Traslape de las letras a y g de la primera y segunda versin tipogrca, quitando la curvatura de los trazos terminales.
DE
O R I EN TACI N
pA R A
117
El ancho tipogrco se estandariza con la letra n, evitando que existan demasiadas variables. Los trazos terminales de las letras a y g eliminan las curvas, dejando estos rectos, lo que es ms limpio visiblemente y consecuente con la lnea tipogrca general que se propone. Adems, se regulan los ngulos de estos trazos segn proporciones de las cajas para que exista un orden entre los caracteres que tambin se implementa en las letras maysculas, consolidando la construccin de la familia tipogrca.
Ancho Tipogrco y Trazos Terminales Curvos El ancho tipogrco base se rige por la letra n, y el corte de los trazos terminales curvos se orienta proporcionalmente al alto de la caja tipogrca (un octavo).
Segunda Versin de la Tipografa Hospital Caracteres que se han modicado en la primera versin de la tipografa diseada.
118
DE
O R I EN TACI N
pA R A
TERCERA VERSIN Es en este punto del proceso en que se toma la decisin de crear ms de un peso tipogrco, dando paso a la creacin de los trazos mencionados con anterioridad. A pesar de que esta es una manera que modula los caracteres de forma mucho ms proporcional, existe un rango mnimo de modicaciones directas al momento de transformar este esqueleto en un cuerpo vectorizado, pero sin entorpecer el desarrollo, sino ms bien, ayudndole. Ya en esta fase, aparecen otros caracteres especiales que suelen ser utilizados frecuentemente, y que aportan a la construccin de una familia tipogrca ms completa.
DE
O R I EN TACI N
pA R A
119
Tercera Versin de la Tipografa Hospital Caracteres modicados que conforman la tercera versin de la tipografa diseada.
120
DE
O R I EN TACI N
pA R A
VERSIN FINAL La ltima versin, y denitiva, rene los caracteres necesarios para que la fuente tipogrca sea utilizada de modo preciso en la sealtica como tambin en las necesidades de funcionarios del Hospital respecto a la entrega de informacin cambiante e inmediata, como la falta de ciertos medicamentos en la farmacia, por ejemplo. La correccin de detalles y ajustes de la tipografa presenta ciertos cambios en algunos caracteres, como por ejemplo, una de las curvas interiores de la letra a se vuelve ms recta y su ancho se reduce levemente; y los trazos terminales curvos de las letras maysculas y los nmeros, cambian de un trazo biselado a uno semi-biselado.
Cambios en la Versin Final Cambios aplicados a caracteres de la versin.
abcdefghijklmnop 1234567890
C A p TU LO II: "S I S TEM A V I SUA L O R I EN TACI N H OS pI TA LE S " TI pOG R A F A H OS pI TA L 121
DE
pA R A
OPQRSTUVWXYZ
-+?!` ^*~<>
Cuarta Versin de la Tipografa Hospital Caracteres la versin nal de la tipografa diseada.
122
DE
O R I EN TACI N
pA R A
Iconos
LA SEMITICA La construccin del signo como imagen representativa de un concepto se comprueba en la semitica, que es la ciencia que estudia los signos lingsticos que inuyen en la relacin entre la comunicacin y el signicacin (cmo esta hecho un texto o elemento para que pueda decir lo que dice). Es as como podemos saber si un signo o icono es reconocible por las personas o no. La semitica se divide en 3 ramas: Semntico: Orientado a la expresin del signicado, este sistema comprueba las posibles confusiones entre los diversos cdigos culturales. Sintctico: Se analizan con claridad las jerarquas entre las seales, as como su integracin, coherencia e integracin en el sistema. Pragmtico o Ergonmico: Que compruebe las dicultades de visin, los ruidos que afecten la percepcin de los signos.
Para la construccin de los signos se deber realizar un anlisis semitico, es decir, un acto de exploracin de las races, condiciones y mecanismos de la signicacin. Para ello, el anlisis se basa en la tricotoma de los signos: Dimensin Semntica, Pragmtica y Sintctica.
DE
O R I EN TACI N
pA R A
123
124
DE
O R I EN TACI N
pA R A
REFERENCIAS ICONOGRFICAS Sistema de Simbolos de Cook & Shanosky En 1974 el Departamento de Transporte de Estados Unidos le pidi al American Institute of Graphic Arts (AIGA, Organizacin de diseo grco ms antigua de la nacin)que creara un conjunto de 34 smbolos dirigidos a los pasajeros y peatones para el uso de los medios de transporte. El primer paso fue la compilacin e inventario de los sistemas de smbolos desarrollados para los medios de transporte individuales y eventos internacionales. El Departamento de Transporte proporcion al AIGA una lista de reas de mensajes. Investigaciones, ejemplos y manuales de todas partes del mundo fueron recolectados y compilados. Las soluciones anteriores de las 34 reas de tema fueron evaluadas por el comit encargado, luego se hizo un resumen de recomendaciones para guiar el diseo del sistema de smbolos. El conjunto nal de smbolos fue diseado y dibujado por la sociedad de diseo Cook and Shanosky Associates de Princeton, Nueva Jersey.
Smbolos Cook & Shanosky Es el primer paso principal para lograr el objetivo de que las comunicaciones grcas unicadas y efectivas trascendieran las barreras culturales.
DE
O R I EN TACI N
pA R A
125
Pictogramas Olimpiadas Pekin 2008 Por otro lado se hace referencia a los pictogramas de los Juego Olmpicos del 2008 en Pekin, en donde se representaron cada una de las 35 disciplinas deportivas que albergaran tal evento. En marzo del 2005, BOCOG(Beijing Organizing Committee for the Olympic Games) invito a 4 institutos profesionales del diseo y organizaciones para la realizacin de la campaa de Pictogramas Juegos Olmpicos Beijing 2008. El diseo se bas en los caracteres de sello siendo la Universidad de Tsinghua preseleccionada despus de la evaluacin de expertos. De esta propuesta es importante rescatar el rasgo que toma esta familia de iconos, en cuando a su composicin de lineas que los hace totalmente compatibles con el trazo tradicional del los caracteres chinos.
Pictogramas Olimpiadas 2008 Se rescata la compatibilidad constructiva entre los trazos de los caracteres chinos y el trazo de los pictogramas. Surgen como excelente referencia en lo que respecta a una coherencia de tipogrca e iconogrca.
Objetivos del diseo del sistema de smbolos considerados: Claridad de la imagen Armona y consistencia visual con la lnea, gura, peso y forma. Simplicidad en su composicin
126
DE
O R I EN TACI N
pA R A
IDENTIFICACIN DE PICTOGRAMAS Para saber qu iconos se han de disear, es necesario realizar un listado de los servicios que entrega el Hospital y considerar cuales de ellos deben ser identicados con pictogramas. De este modo, se determina cuatro reas que clasican estos servicios segn sus funciones: Especialidades Pediatra Maternidad Ciruga Ginecologa Neonatologa Traumatologa Adulto Traumatologa Infantil Oftalmologa Dental Otorrinolaringologa Pensionado Salud Mental Pensionado Kinesiologa Reglamentacin Informaciones Estacionamiento Silencio Solo Personal Autorizado Peligro Inamable Peligro Alto Voltaje Peligro Radiacin No Fumar No Usar Celulares Servicios Generales PRAIS Baos Ascensor Alimentacin Unidad de Participacin del Usuario Servicios Mdicos Generales Laboratorio Medicina Imagenologa Rayos X Ecotomologa Ecografa Electrocardiograma Banco de Sangre Medicina Transfusional rea de Parto Urgencias UPC rea Quirrgica Clnica de Enfermera Sedile Farmacia Test de Esfuerzo Fonoaudiologa Epidemiologa
DE
O R I EN TACI N
pA R A
127
CONSTRUCCIN La construccin de la familia de iconos requiere de una investigacin grca de los diferentes pictogramas que se quieren representar. Para ello es necesario realizar un listado completo de los pictogramas a construir, crear un catastro de las diferentes representaciones de smbolos que existen, observar y evaluar los tipos de construccin, grados de abstraccin y ngulos de mirada en que muestra el smbolo. En este caso se establece que el icono va acompaado de una tipografa creada especialmente para la ocasin, por lo que se quiere que entre la fuente y el smbolo haya cierta compatibilidad que armonice su lectura.
En este caso la construccin del icono se centr en los siguientes puntos: Trazo: Para la produccin de un sistema de pictogramas coherente a la tipografa se ha pensado construir un trazo, con el cual se dibujar la tipografa y el icono, con el objeto de que ambos queden insertos en una misma lgica, pertenecientes a una misma familia constructiva. Mirada: La secuencia de pictogramas debe tener cierto rasgo reconocible, algo que puede proporcionarle el correcto reconocimiento es la decisin del ngulo en que se muestra el signo. Composicin: La composicin del signo es algo muy importante, hay que tener en cuanta cuales son los elementos necesarios para su reconocimiento por ello es necesario mirar signos ya construidos de estos conceptos, y notar qu cosas cambian, qu cosas se mantienen y segn esto dar cuenta de cual es el aspecto que se puede innovar en l.
128
DE
O R I EN TACI N
pA R A
CATASTRO DE ICONOS DE BAO
DE
O R I EN TACI N
pA R A
129
Figura Humana Realizando un Catastro sobre smbolos de bao podemos dar cuenta de la cantidad de representaciones de la gura humana. En este caso es importante establecer la tipologa de gura humana a implementar, ya que juega un rol importante en el momento de construir una familia iconogrca, ya que su denicin puede ser la base constructiva de los dems iconos.
130
DE
O R I EN TACI N
pA R A
Versiones de Iconos
PRIMERA VERSIN Es la primera experiencia por llegar a una idea o concepto a travs del icono, que se construyen a partir de formas simples y que intentan mantener un equilibrio proporcional entre relleno, trazo y calado de manera que los pesos de estos se vean equivalentes. Sin embargo,la construccin de estas guras cumplen diferentes principios constructivos, es decir son formas heterogneas, en donde algunas se forman por trazos, mientas que otras se construyen a partir de un volumen, por lo que falta homogeneizar las guras creando ciertas reglas y estandarizaciones que integren todos los iconos dentro de una misma familia.
Formas Heterogneas La primera versin de iconos tenia como enfoque principal crear una forma reconocible con respecto a lo que se deseaba representar, por lo que en su forma constructiva resultaron ser bastante heterogneas, unas se construan a base de trazos, mientras que otras lo hacan en base a bloques geomtricos, creando distintos contrastes de blancos y terminaciones incoherentes entre ellas.
Construccin de Trazo
Construccin de Bloque
Esta construccin de iconos es el primer estudio que busca la correcta aproximacin a la forma que pueda representar en el contexto, la idea que desea comunicar. Se podra calicar como la Etapa de Exploracin de Figuras y Miradas probando una composicin de contrastes, formas, lineas y color (cantidad de blanco en cada gura), pensando en cuales son los objetos o guras ms representativas, cules tienen una idea preestablecida por convencin, y exploracin de las miradas que puede tener un signo.
Exploracin de la Forma Buscar cul es la mejor manera de representar una idea fue el enfoque principal de esta primera versin de iconos, evaluando cuales son las miradas y elementos que puedan potenciar de mejor manera una idea.
Maqueteos de Fonoaudiologa
DE
O R I EN TACI N
pA R A
131
Primera Versin Completa Hospital Icons Pictogramas que conforman la primera versin de la familia tipogrca Hospital Icons.
132
DE
O R I EN TACI N
pA R A
SEGUNDA VERSIN Se propone la construccin de la tipografa propia para la sealtica que lleva dentro de su familia, los iconos, por lo que ellos deben seguir cierta coherencia con esta. Para la construccin de la tipografa y los iconos se crea una familia de trazos en Illustrator CS5, con esto se quiere lograr una homogeinizacin entre estos. Esta etapa corresponde a un Estudio de la Construccin Grca de los pictogramas.
Terminaciones del Icono En esta versin se planteo una terminacin cerrada del pictograma, dibujando una silueta.
Construccin del Icono Mediante una paleta de trazos denidos en Illustrator CS5 se construyeron los distintos pictogramas de la segunda versin de iconos
El empleo de trazos comunes entre la tipografa y el icono no implica una correspondencia visual entre ellos, sobre todo porque para la composicin del icono el peso del trazo ha sido escalado a un porcentaje menor para lograr la neza de un dibujo, esto hace que cuando el icono se posa junto a la tipografa, cuenta con el peso grco que se debe tener como signos, en donde debe crear un impacto visual y ser capaz de comunicar una idea rpidamente, por ello se debe pensar en un grado mayor de abstraccin.
Grilla Iconogrca Se propone como mximo tamao del icono para exportarlo a la tipografa, la altura de las maysculas de Hospital.
Prueba de Contrastes Se hace la versin en negativos, para la prueba de contrastes de los iconos, en donde a veces en necesario para realzar el mensaje representado y causar mayor impacto visual, como es el caso de seales restrictivas.
DE
O R I EN TACI N
pA R A
133
Segunda Versin Completa Hospital Icons Pictogramas modicados que conforman la segunda versin de la familia tipogrca Hospital Icons.
134
DE
O R I EN TACI N
pA R A
VERSIN FINAL Se establece que si la tipografa se modula con trazos simples, abiertos y cerrados, los iconos se compondrn de la misma forma, en algunas ocasiones se emplearan elementos rellenos. Se continua dibujando con los trazos establecidos, y su peso esta pensado para una equivalencia con la tipografa. El trabajo que debe ocurrir cada vez que se construye una familia de iconos es pensar en la simpleza de una imagen en cuanto a su construccin. La manera de mostrar una idea con la menor cantidad de elementos posibles, de este modo el icono asegura tener una interpretacin ms rpida y por otro lado hay menos elementos que equivoquen el mensaje original. En este caso fue importante denir cual ser la construccin de la gura humana, ya que juega un rol importante en esta familia de iconos, teniendo en cuenta que toda construccin grca de una gura humana tiende a personicarse, por lo que muchas veces se le designan cualidades calicativas. Por ello hay que procurar que esta forma sea lo ms neutral posible y que no comunique otra cosa ms que persona.
Terminacin del Icono En esta versin se opt por terminaciones abiertas en los iconos, de esta manera se busca tener cierta semejanza con la forma tipogrca, abierta y sencilla.
Denicin de Figura Humana Por la condensacin de trazos en la gura humana, se opt por crear una gura que requiriese de menos trazos para conformarse como tal.
Paleta de Trazos Los trazos utilizados en esta familia de iconos se emplearon en distintas escalas y tipos.
Versiones Anteriores
Versin Final
La construccin de los iconos se realiz con trazos de diferentes caractersticas, tanto de forma como de grosor, en donde su composicin crea una correspondencia con el trazo de la tipografa en cuanto a dibujar un blanco similar al de una letra. En los casos en que se emplearon trazos ms delgados que el de las mismas letras fue en guras ms complejas, especcamente hablando, todo lo que corresponda a gura humana, ya que sus trazos estaban ms condensados, ocupando un espacio menor en su composicin por lo que creaban una mancha negra mayor que la letra.
DE
O R I EN TACI N
pA R A
135
TAMAO DEL ICONO Y GRILLA Los iconos toman un tamao mayor al de la tipografa, para que en el proceso de disear la sealtica estos estn inmediatamente proporcionados con el mensaje que lo acompaa. Adems de esta manera alcanza a constituirse como parte del mensaje ya que logra adquirir un mayor impacto visual.
Grilla Iconogrca En esta segunda versin iconogrca la grilla del icono se agranda en comparacin a la grilla tipogrca, en donde el peso del trazo se equilibra equivalentemente al de las letras.
abcde f g h ij
a Hombre b Mujer c Obstetricia d Minusvlido e Enfermera f Medicina g Nia h Nio i Pediatra j Traumatologa Adulto
kl mno p
k Traumatologa Infantil l Neonatologa m Imagenologa n Va de Evacuacin Cuidado con las Escaleras o Test de Esfuerzo p Sala de Reunin
qrstuv
q Ciruga r Kinesiologa s rea Quirrgica t Unidad Paciente Crtico - UPC u Ciruga v Sala de Reunin
136
DE
O R I EN TACI N
pA R A
wxyzABC
w Bao Pblico x Bao Infantil y Unidad de Participacin z Cancha A Salud Mental B Fonoaudiologa C Endoscopa
LMNOP
L Laboratorio M Banco de Sangre N Medicina Transfusional Nutricin O rea de Parto P Ambulancia
WXYZ123
W Urgencia X Servicios Generales Y Escaleras Z Ascensor 1 Apagar Celulares 2 Prohibido Fumar 3 Silencio
!" $% &/ ()
! | " @ # $ % & / ( ) Extintor
DE
O R I EN TACI N
pA R A
137
D EFGHIJK
D Farmacia E SEDILE F Dental G Otorrinolaringologa H Oftalmologa I Electrocardiograma J Epidemiologa K Ginecologa
QRSTUV
Q Ecotomografa R Ecografa S Rayos X T Radiografa Dental U Alimentacin V Administracin
4567 8 9 0
4 Peligro Radiacin 5 Peligro Inamable 6 Peligro Alto Voltaje 7 Informacin 8 Estacionamiento 9 No Estacionar 0 Acceso Restringido Tercera Versin Completa Hospital Icons Pictogramas modicados que conforman la tercera versin de la familia tipogrca Hospital Icons.
138
DE
O R I EN TACI N
pA R A
Sitio Web
La presentacin formal de la tipografa, fuera de la implementacin en la sealtica, toma lugar en un sitio web. En l se explica brevemente el proceso creativo y constructivo, como tambin el por qu de su origen y adems permite descargar la fuente tipogrca para instalarla tanto en el sistema operativo como para utilizarla en sitios web.
Header Contendr logo del sitio y un enlace al proyecto tipogrco en la Wiki de la Escuela.
NDICE DE CONTENIDOS 1. Inicio 2. Presentacin 3.Construccin 4. Descargas 4.1. Fuente Tipogrca 4.2. Font-Face 5. Autoras
Cuerpo de Contenido Es donde se desarrollarn cada uno de los temas de las secciones principales. Men Contendr las secciones principales del sitio.
MAPA DE NAVEGACIN
Enlaces externos
Mapa de Navegacin Mapa de navegacin del sitio web de la Tipografa Hospital.
DE
O R I EN TACI N
pA R A
139
MEDIDAS
Footer Contendr las mismas secciones que la barra de men, ms dos enlaces relacionados al proyecto tipogrco en la Wiki de la Escuela, los respectivos Flickrs de las autoras y un enlace al sitio de la Escuela de Arquitectura y Diseo de la PUCV.
140
DE
O R I EN TACI N
pA R A
WIREFRAMES E INTERFZ Inicio
DE
O R I EN TACI N
pA R A
141
142
DE
O R I EN TACI N
pA R A
Pginas de contenido: Presentacin y Construccin
DE
O R I EN TACI N
pA R A
143
144
DE
O R I EN TACI N
pA R A
Descargas
DE
O R I EN TACI N
pA R A
145
146
DE
O R I EN TACI N
pA R A
Autoras
DE
O R I EN TACI N
pA R A
147
148
DE
O R I EN TACI N
pA R A
MAPAS DE DIVS Header y Navegacin El header, y el men se mantienen constantes en cada pgina (todas estticas), permitiendo una navegacin estandar y rpida.
<body> <div id=header> <div id=head> <ul> <div class=logo>
<div id=nav> <div id=menu> <ul> <li></li> <li></li> <li></li> <li></li> <li></li>
Inicio
<body> <div id=content> <h1> <div class=esquema> <div class=nota uno> <div class=nota dos> <div class=nota tres> <div class=nota cuatro> <div class=nota cinco>
DE
O R I EN TACI N
pA R A
149
Presentacin
<body> <div id=content> <div class gallery> <div class tiporegular> <div class tipomedium> <div class tipobold> <div class tipoblack> <div class tipoiconos> <h1> <h2> <div class text> <p></p>
Construccin
<body> <div id=content> <div class=gallery> <img/>
<h1> <div class=text> <p></p>
<h2>
<h2> <div class=text> <p></p>
150
DE
O R I EN TACI N
pA R A
Descarga En esta pgina se almacenan dos elementos a descargar.
<body> <div id=content> <h1> <div class=text> <h2>
<div class=caja-tipograca> <div class=muestra> <div class=descarga> <div class=tipo>
<div class=text> <h2>
<div class=caja-tipograca> <div class=muestra> <div class=descarga> <div class=tipo>
DE
O R I EN TACI N
pA R A
151
Autoras
<body> <div id=content> <h1> <div class=presentacion> <div class=persona> <img/> <h2></h2> <p></p> <div class=persona> <img/> <h2></h2> <p></p>
Footer El footer tambin en esttico y presenta links tanto internos como externos.
<body> <div id=footer> <div class=footercontent> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <ul> <li></li> <li></li> <ul> <li></li> <li></li> <div class=mensaje> <div class =i>
152
DE
O R I EN TACI N
pA R A
Construccin Grca
La identidad que el Hospital desea reejar no slo comienza desde lo ms interno con la creacin de un sistema de orientacin, sino que tambin con el rediseo de su logotipo. Este queda en un estado porposicional que se implementa en parte de la sealtica y papelera.
Imagen del Hospital

LOGOTIPO El logotipo reeja la identidad corporativa de una empresa, en este caso, de un hospital pblico, y tiene una relevancia fundamental en el xito de esta ya que la hace mejor reconocida y recordada por sus clientes. Con ello, el nuevo diseo del logotipo se transforma en un elemento fundamental para la renovacin de lo que el Hospital de Quilpu busca transmitir: Perl del Hospital: El Hospital de Quilpu cuenta con ciertos valores y aspiraciones que desea comunicar, por ello es necesario conocerlos y reejarlos en su imagen como institucin se salud. Misin: El Hospital de Quilpu es una institucin de salud pblica de alta complejidad, inserta en las comunidades de Quilpu y Villa Alemana, otorga prestaciones de salud, basndose en los pilares de fomento, proteccin y recuperacin de la salud de las personas en un marco de trabajo en red, promoviendo la ambulatorizacin y satisfaccin de los usuarios. Visin: Institucin de salud pblica autogestionada y sustentable, capaz de satisfacer las necesidades de salud de la poblacin, de manera eciente, respetuosa, amigable y participativa. Perl del Usuario: Personas que asisten a la salud pblica, en su mayora habitantes de Quilpu y Villa Alemana, con expectativas de recibir una atencin eciente y cercana.
Logotipo propuesto Este logotipo nace de la propuesta n2, ajustando mrgenes y alineando los caracteres con la gura apropiadamente. Logotipo actual del Hospital de Qulpu
DE
O R I EN TACI N
pA R A
H OS pI TA LE S " C ON S T RUCCI N G R FIC A
153
Propuesta 1 Quilpu es conocida como la "Ciudad del Sol", por lo que en este primer boceto se intenta crear una imagen del hospital como parte de ese reconocimiento, tomando as la imagen de un sol naciente acogido por dos colinas. Se ha tomado el color amarillo como representacin del sol, y para contrastarlo, se ocupa el color azul, el mismo color base que se ha tomado para la construccin de la sealtica hospitalaria.
Propuesta 1 Las imgenes corresponden a las distintas variaciones de la primera propuesta del logotipo.
154
DE
O R I EN TACI N
pA R A
Propuesta 2 Creemos que la imagen del sol es esencial para el logo del Hospital de Quilpu, pero que a la vez, se debe hacer nfasis al plano de la salud, y verse reejado en este, por ello se toma la gura de la cruz para construir sobre ella una propuesta que integre los elementos que lo compondrn.
En este caso la propuesta, se construye con la interseccin de dos semicrculos de forma perpendicular, coincidiendo en sus centros, asimilando as la forma de la cruz que representa la salud mientras que la gura del semicrculo esta basada en la imagen de un sol de atardecer que hace referencia a la ciudad de Quilpu. El cruce de rectas perpendiculares se presta como una parte interesante del icono para ser asociada con la tipografa que lo acompaar, como un rincn que acoge parte de la letra. La combinacin de los colores sugiere un equilibrio entre los tonos clidos y fros, porque de alguna manera se busca asociar el semicrculo horizontal con el sol de atardecer, por otra parte este equilibrio busca mantener el sentido de "autoridad y lealtad", sin perder la cercana y calidez con la gente.
Proteger Fomentar Recuperacin
Estudio de la Forma Se prueban las diferentes rotaciones de la gura, para ver cul es la que mejor calza con lo que se quiere reejar, en este caso, se toman los tres pilares fundamentales sobre los que se basa el Hospital: Fomento, Recuperacin y Proteccin.
DE
O R I EN TACI N
pA R A
155
Propuesta 3 En esta propuesta se propone trabajar forma de la cruz como smbolo de Salud, que se construye con distintas piezas, que con sus calados conforman parte de la cruz, y que se completara con la parte tipogrca. Se toman conceptos importantes de la visin del Hospital , como lo son la participacin y colaboracin con la comunidad.
156
DE
O R I EN TACI N
pA R A
PAPELERA Adems del rediseo del logotipo, se agregan productos de papelera que consisten en una cha mdica y una hoja para informativos. La cha est pensada para unicar de cierta manera las recetas mdicas que son entregadas a los usuarios tanto en el Hospital mismo como en el CAE, ya que entre ellos no hay una conversacin uniforme y consistente en materia de documentos, cada uno tiene sus formatos hacindolos parecer de entidades totalmente independientes. Por otro lado, la hoja para informativos queda en un estado editable al ser entregado al hospital como una plantilla word, la cual puede ser rellenada con distintos contenidos para informar al usuario de procesos, noticias, etc.
Ficha Mdica El tamao de impresin de la cha es de media hoja carta orientada de manera horizontal (apaisada). El formato est reducido a un 60% del tamao original.
DE
O R I EN TACI N
pA R A
157
Informativo El tamao del informativo es de una hoja carta. El formato est reducido a un 60% del tamao original.
158
DE
O R I EN TACI N
pA R A
Decisiones Cromticas
El sistema cromtico se reere a la distincin de los nueve edicios que se ubican dentro del recinto hospitalario, por lo que deben tener un contraste cromtico de tal forma que los hagan reconocibles rpidamente uno al lado del otro. Rojo: Es el color ms intenso en lo emocional y cuando se lo usa como color secundario. Recomendable para motivar a las personas a tomar decisiones rpidas e incrementar las expectativas. Representa la energa como la vida fsica. Otorga vigor, dinamismo, amor y calidez. Amarillo: Simboliza el gozo y la alegra, luminosidad y el intelecto. Estimula la agilidad mental, mejorando las capacidades de memoria y concentracin. Azul: Cuando se utiliza junto a colores clidos (amarillo, naranjo), la mezcla suele ser llamativa. Puede ser recomendable para producir impacto. No es un color que sature la vista al ser utilizado en grandes reas. Representa la paz y tranquilidad, favorece la concentracin y el equilibrio de las energas, estimulante e invita a la calma. Prpura: Se asocia a la sabidura, el prestigio y elevacin. Verde: Este color invita a formar un ambiente de calma. Simboliza la bondad, fertilidad, estabilidad, tranquilidad, abundancia y vida. Gris: Los grises medio-claros tienen poca atraccin visual, siendo idneos para fondos o elementos de relleno que no aporten informacin al espectador. Se asocia a la neutralidad absoluta, discrecin y equilibrio. Se utiliza para denotar edad, madurez y sabidura. Naranjo: Representa entusiasmo, felicidad, atraccin, creatividad, determinacin, xito, estmulo y nimo. Se utiliza cuando se reclama participacin o accin, tambin es ideal para botones. Es el color de la comunicacin, del calor afectivo, equilibrio, seguridad y conanza.
Colores Base [A] Soportes: Es el color de fondo de los soportes de la sealtica, sobre l se presentan todos los otros colores expuestos. Crea una homogeneidad entre las tipologas de sealtica. [B] Textos: Es el color de los mensajes dentro de la sealtica, debe producir el contraste necesario para proporcionar el mejor reconocimiento y lecturabilidad de los textos. C=0 M=0 Y= 0 K=6 [A] C = 92,58 M = 85,55 Y = 36,72 K = 41,02 [B] Colores Identicativos Diferencian las Distintas reas del recinto hospitalario, identicndolas con cada uno de los colores correspondientes. C = 39,45 M = 100 Y = 29,97 K = 7,81 C = 14,06 M = 92,97 Y = 96,48 K = 4,3 C = 5,86 M = 69,92 Y = 97,27 K = 0,39 C = 76,18 M = 22,28 Y = 7,69 K=0 C = 95,96 M = 76,75 Y = 13,4 K = 2,88 C = 29 M = 29 Y=0 K = 19
C=0 M = 18 Y = 93 K = 23
C = 56,64 M = 5,47 Y = 100 K=0
C = 34 M = 31 Y = 40 K = 50
DE
O R I EN TACI N
pA R A
159
Tiene alta visibilidad, por lo que es til para captar atencin y subrayar aspectos importantes. Utilizado en pequeas extensiones o con acento, es un color de gran utilidad, pero en grandes reas es demasiado atrevido y puede crear una impresin impulsiva o agresiva.
C G B
Samuel Valencia
CAE
URGENCIA
San Martn
Para la decisin cromtica se considera la cualidad que posee cada edicio para hacerlo ms identicable segn su funcin primordial. Se sabe que el color invita a las personas a comportarse de cierta manera en un lugar determinado, por ello se han destacado las caractersticas ms esenciales de cada edicio del hospital. Lo importante a considerar en los colores es que se distingan bien unos de otros, de manera que no se haga confuso el viaje para el usuario.
Plano Cromtico del Hospital de Quilpu La designacin cromtica para cada edicio tiene que ver con una relacin de color y funcin del edicio. Edicio Urgencia A B C D E F G CAE Caractersticas Alerta, emergencia, atencin y decisiones rpidas rea administrativa, seriedad, gestin Calma, operacin, curacin, relajacin, fertilidad Familia, alegra Alimentacin, limpieza, relajo Almacenamiento, reparacin, organizacin Serenidad, creatividad, limpieza, almacenamiento Informaciones, datos, gua, asistencia al paciente Especialidades, experiencia, seguridad
160
DE
O R I EN TACI N
pA R A
Diseo de Prototipos
Los prototipos realizados surgen como una aproximacin de las distintas tipologas que se han pensado para este sistema de orientacin. Ellas se componen de una lgica muy simple, pensando en la accesibilidad de la informacin para el usuario, relacionadas con su rango de visibilidad, inteligibilidad y lecturabilidad.
Jerarquas Tipolgicas de la Sealtica

Para denir un orden tipolgico, en un comienzo se organiz, compar y analiz la sealtica actual del Hospital, creando un registro de las sealticas genricas para luego denir jerarquas dentro de la cual se pudiesen clasicar, identicando los distintos casos respecto a su funcin genrica: Orientadoras: Situar a los individuos en un entorno, como por ejemplo mapas y planos de ubicacin. Direccionalas: Instrumentos especcos de circulacin, como por ejemplo echas o prohibiciones de paso. Nominativas: Instrumentos de designacin que conrman la ubicacin al usuario. Informativas: En cualquier lugar del entorno, e informan por ejemplo, de horarios o servicios. Normativas: Salvaguardar y proteger a los usuarios contra el peligro (preventivas, restrictivas y prohibitivas). En base a esta organizacin general de la sealtica, se identican las funciones dentro del espacio y segn las necesidades RANGO DE VISUALIZACIN Para la planicacin de los prototipos es necesario contemplar las distancias en que son visibles, el rango de visualizacin como un criterio fundamental de legibilidad. Una sealtica situada correctamente en un lugar, es clave para el desarrollo de su tipologa, y dependiendo de la distancia a la cual deba verse, se denen las variaciones de tamaos para concretar su diseo. Son tres los rangos a considerar:
[B] Media Distancia Cuando la distancia entre el observador y la seal esta entre los 5 y 10 metros aproximadamente, el tamao de esta no puede ser menor de 1x1 metro.
[A] Corta Distancia Corta Distancia: Los letreros que se contemplan desde distancias menores de 5 metros suelen estar ubicados a una altura entre los 2.5 y 1.5 metros.
[C] Larga Distancia Rango de visibilidad mayor de 10 metros, estos letreros se ubican a una altura superior al primer piso del edicio, por lo que deben de ser de gran tamao e luminosos, ya sea por un foco o de material translcido e iluminados en su interior. [A] [B] [C]
DE
O R I EN TACI N
pA R A
H OS pI TA LE S " D I S E O
DE
P ROTOT I pOS
161
Funcin
Tipo
Emplazamiento
Descripin Es un mapa de grandes dimensiones, ubicado en la entrada del Hospital (por el estacionamiento) que soporta la labor del guardia de dar indicaciones. Seala las vas principales por las cuales ingresar a los edicios. Esquema del nivel y planta de los edicios, ubicado en los niveles principales de estos, destacando en cual se encuentra el usuario. Seala la direccin en la cual se encuentran las edicaciones y la cantidad de servicios por nivel en ellos. Ubicados en las rampas que conectan los edicios. Seala la direccin en la cual se encuentran los servicios de los niveles superiores y/o inferiores, ubicados al comienzo y/o n de las escaleras. Utilizados generalmente para sealar las reas internas que se aproximan al pasar por las rampas y por los pasillos en donde hay ms de un servicio en los costados. Seala los edicios, sus respectivos servicios y al nivel al cual ingresar el usuario, y se ubican en las puertas de entrada de cada edicio. Se utiliza para identicar las reas de servicios que se encuentran en cada edicio. Seala las sub-reas que se ubican dentro de las reas mayores en los edicios, como servicios o informacin (OIRS). Utilizado tanto para la identicacin de servicios mdicos como generales, habitaciones de pacientes y boxes.
ORIENTATIVA
Mapa General
De banda
Mapa de Nivel
Adosado
Edicio Interno DIRECCIONAL
Adosado
Escaleras
Adosado
Pasillos
Adosado - Colgante
Edicio Externo
Adosado
NOMINATIVA
reas
Adosado - Colgante
Sub-reas
Adosado
Habitacin INFORMATIVA
Adosado - Banderola
Informativo
Adosado - Impresin
Seala horarios, procesos y boletines informativos, entre otros, y se mantiene en calidad de formato imprimible por los funcionarios del Hospital.
REGLAMENTARIAS
Normativas
Adosado - Adhesivo
Seala las reas en donde hay peligro, prohibicin, alertas, las reas en las que hay que tener cuidado y precausin, y los servicios higinicos.
Evacuacin
Adosado - Adhesivo
Seala la va y direccin en la que una persona debe evacuar en caso de siniestro.
Cuadro de Jerarquas En l se organizan las distintas tipologas segn su funcin y ubicacin, planteando tambin un posible montaje para ellas.
162
DE
O R I EN TACI N
pA R A
DE
P ROTOT I pOS
Estructuracin de Tipologas
Una vez denida la familia de iconos, se establece que al llevarlas a Fontographer (programa empleado para la creacin de tipografas), la caja del icono crece en un 136% respecto a la caja tipogrca, quedando inmediatamente proporcionada en cuanto a pesos de trazo. Dentro de esta caja los iconos son alineados de distintas maneras, respecto a sus formas y tamaos, para que al ser acompaados por la tipografa queden inmediatamente en proporcin con estas.
Diferencia de Escala El icono toma una escala mayor que la caja tipografca, creciendo a un 136%, de este modo el icono queda inmediatamente proporcional a la escritura que lo acompaa.
ALINEACIN ICONOGRFICA Alineacin Inferior Los iconos se alinean al extremo inferior de su propia caja, cruzndose en su altura con la lnea tipogrca.
Iconos de alineacin inferior:
Lnea base de texto Alineacin Inferior
DE
O R I EN TACI N
pA R A
DE
P ROTOT I pOS
163
Alineacin Centrada Los iconos se alnean de manera centrada dentro de su propia caja, cruzndose con la lnea tipogrca y en algunos casos quedando sobre ella.
Iconos de alineacin centrada:
Alineacin Centrada Lnea base de texto
Alineacin a Lnea de Texto La alineacin del icono corresponde con la lnea base del texto, quedando a la misma altura que este.
Iconos de alineacin a la lnea de texto:
Alineacin a la lnea de texto
164
DE
O R I EN TACI N
pA R A
DE
P ROTOT I pOS
FAMILIA DE TIPOLOGAS El diseo de los prototipos comienza con el listado de servicios del hospital previamente denido, y con la clasicacin de las tipologas a crear. Luego, su contenido grco se estructura en base a los tamaos de cada tipologa y a su ubicacin dentro del espacio. Ante el requerimiento y urgencia que existe de la sealtica en el Hospital de Quilpu, se piensa en una estructura sencilla, en la cual su forma, materializacin y montaje deben ser pensados para lograr la mayor eciencia a bajos costos. As, el diseo de la sealtica se abstrae -en un principio- a lo ms puro y simple de su sentido: orientar. En base a esto existen en dos palabras claves a partir de las cuales se piensa la estructura: identicar e indicar/sealar. Estos verbos permiten denir una estructura funcional lo sucientemente clara para ser comprendida por los usuarios, proponiendo la identicacin como un estilo nominativo y de color, y la indicacin y sealizacin como un estilo iconizado (de echas) y color.
Servicio con Icono - Grande
3 cm
3 cm 2 cm
13 cm
40 cm
DE
O R I EN TACI N
pA R A
DE
P ROTOT I pOS
165
Servicio con Icono - Pequeo
3 cm
3 cm 2 cm
Especicaciones de Texto Tipografa Ttulo = Hospital Black Tamao = 72 pt.
13 cm
Tipografa Texto = Hospital Regular Tamao = 100 pt.
Especicaciones de Iconos Tipografa = Hospital Iconos
35 cm
Tamao = 150 pt.
Servicio con Icono - Pequeo
2 cm
Especicaciones de Texto Tipografa Texto = Hospital Regular Tamao = 100 pt.
13 cm
35 cm
166
DE
O R I EN TACI N
pA R A
DE
P ROTOT I pOS
rea Simple
6 cm
6 cm
6 cm 7 cm
28 cm
Variable
Especicaciones de Texto Tipografa = Hospital Medium Tamao = 300 pt.
Especicaciones de Iconos Tipografa = Hospital Iconos Tamao = 300 pt. Borde = 5 pt.
DE
O R I EN TACI N
pA R A
DE
P ROTOT I pOS
167
rea con Servicios
6 cm
6 cm
6 cm 7 cm
40,6 cm
3,5 cm 5 cm Variable
Especicaciones de Texto Tipografa en rea y Servicios = Hospital Medium Tamao rea = 300 pt. Tamao Servicios = 130 pt.
Especicaciones de Elementos Grosor Lnea = 4 pt.
168
DE
O R I EN TACI N
pA R A
DE
P ROTOT I pOS
Sub rea - Grande
6 cm
4,5 cm 5 cm
6 cm 21 cm
6 cm
55 cm
DE
O R I EN TACI N
pA R A
DE
P ROTOT I pOS
169
Sub rea - Pequeo
6 cm
4,5 cm 5 cm
6 cm 21 cm
6 cm
40 cm
170
DE
O R I EN TACI N
pA R A
DE
P ROTOT I pOS
Direccionales de Escaleras - Grande
3 cm
1,5 cm 2 cm 3 cm
Variable
2,5 cm 2,5 cm
3 cm 42 cm
DE
O R I EN TACI N
pA R A
DE
P ROTOT I pOS
171
Direccionales de Escaleras - Pequeo
3 cm
1,5 cm 2 cm 3 cm
Especicaciones de Texto Tipografa = Hospital Regular Tamao = 72 pt. Interlineado = 80 pt.
Variable
Especicaciones de Iconos Tipografa = Hospital Iconos Tamao = 80 pt. Borde = 1,8 pt.
3 cm 42 cm
172
DE
O R I EN TACI N
pA R A
DE
P ROTOT I pOS
Direccionales de Pasillo
6 cm
9 cm 6 cm Variable
6 cm 75 cm
DE
O R I EN TACI N
pA R A
DE
P ROTOT I pOS
173
6 cm
40 cm
6 cm
40 cm
6 cm
9 cm 6 cm
Variable
6 cm Variable
Especicaciones de Texto Tipografa = Hospital Medium Tamao = 130 pt. Interlineado = 156 pt.
174
DE
O R I EN TACI N
pA R A
DE
P ROTOT I pOS
Direccionales de Edicio Internos
6 cm
4 cm
6 cm
6 cm
6 cm 9 cm 6 cm
Variable
40 cm
40 cm 144 cm
40 cm
6 cm
Especicaciones de Texto Tipografa Encabezado = Hospital Black Tamao = 200 pt. Tipografa Niveles = Hospital Bold Tamao = 120 pt. Estilo de Texto = Todo en altas Tipografa Texto = Hospital Medium Tamao 130 pt. Interlineado = 156 pt.
Especicaciones de Iconos Tipografa = Hospital Iconos Tamao Encabezado = 150 pt. Borde = 18 pt. Tamao junto a Texto = 141 pt.
DE
O R I EN TACI N
pA R A
DE
P ROTOT I pOS
175
Nominativo de Edicio Interno
33 cm
144 cm
Especicaciones de Texto Tipografa = Hospital Bold Tamao = 700 pt.
176
DE
O R I EN TACI N
pA R A
DE
P ROTOT I pOS
Normativa - Grande
1 cm
1,2 cm
1 cm 1 cm
24,8 cm
1 cm 42 cm
Especicaciones de Texto Tipografa = Hospital Black Tamao = 72 pt. Interlineado = 80 pt. Especicaciones de Iconos Tipografa = Hospital Iconos Tamao = 493 pt. Borde = 4 pt.
DE
O R I EN TACI N
pA R A
DE
P ROTOT I pOS
177
Normativa - Pequea
1 cm
1 cm 1 cm
24,8 cm
1 cm 6,3 cm 23 cm
Especicaciones de Texto Tipografa = Hospital Black Tamao = 66 pt. Interlineado = 60 pt. Especicaciones de Iconos Tipografa = Hospital Iconos Tamao = 395 pt. Borde = 4 pt.
178
DE
O R I EN TACI N
pA R A
DE
P ROTOT I pOS
Edicio Exterior 40 cm
40 cm
6 cm 2 cm 4,8 cm
2 cm Variable
6 cm 2 cm
10 cm 6 cm 6 cm
Especicaciones de Texto Tipografa Encabezado = Hospital Bold Tamao = 1000 pt. Tipografa Niveles = Hospital Bold Tamao = 100 pt. Estilo de Texto = Todo en altas Tipografa Texto = Hospital Regular Tamao = 100 pt. Interlineado = 120 pt.
Especicaciones de Elementos Grosor Lnea = 2,5 pt.
DE
O R I EN TACI N
pA R A
DE
P ROTOT I pOS
179
Mapa de Planta Variavble 1 mt mx. 9 cm 4,5 cm
Variavble 1 mt mx.
5 cm 4 cm 4 cm
Especicaciones de Texto Tipografa Edicio = Hospital Black Tamao = 180 pt. Tipografa Nivel = Hospital Bold Tamao = 120 pt. Tipografa Ttulo Simbologa = Hospital Medium Tamao = 48 pt. Tipografa Texto Simbologa = Hospital Regular Tamao = 44 pt. Interlineado = 72 pt. Especicaciones de Iconos Tipografa = Hospital Iconos Tamao = 60 pt. Tamao Simbologa = 44 pt.
180
DE
O R I EN TACI N
pA R A
DE
P ROTOT I pOS
Mapa General
8 cm
8 cm
39 cm
8 cm
39 cm
8 cm 8 cm 8 cm
42 cm 43 cm 12 cm
2,8 cm
4,5 cm 4,5 cm
161 cm
6 cm
8 cm 185 cm
Especicaciones de Texto Tipografa Ttulo = Hospital Bold Tamao = 88 pt. Estilo de Texto = Todo en altas Tipografa Texto = Hospital Medium Tamao = 88 pt. Interlineado = 98 pt.
DE
O R I EN TACI N
pA R A
DE
P ROTOT I pOS
181
Especicaciones de Iconos Tipografa = Hospital Iconos Tamao = 260 pt. Especicaciones de Elementos Dimensiones de Logo = 43 cm x 30 cm
182
DE
O R I EN TACI N
pA R A
DE
P ROTOT I pOS
Propuestas Anteriores
Las primeras versiones de prototipado, buscan la manera de crear una forma ordenada de comunicacin, a travs de elementos simples. En base a estas se identican los elementos ms apropiados para crear coherencia, lectura continua, legibilidad y empata en el sistema de orientacin para con el usuario
PRIMERA VERSIN El uso del color es casi como una etiqueta que distingue solo la correspondencia con el edicio en el que se est, para destacar cosas relevantes se emplea un color neutral que se antepone al blanco del fondo. Para esta propuesta se destaca el empleo de un logotipo que hace referencia al hospital.
DE
O R I EN TACI N
pA R A
DE
P ROTOT I pOS
183
Versin 1 - Propuesta A
184
DE
O R I EN TACI N
pA R A
DE
P ROTOT I pOS
Se emplea un mtodo de color como distintivo de cada edicio a travs de franjas de color que van a los laterales de cada sealtica.
DE
O R I EN TACI N
pA R A
DE
P ROTOT I pOS
185
Versin 1 - Propuesta B
186
DE
O R I EN TACI N
pA R A
DE
P ROTOT I pOS
SEGUNDA VERSIN El Color se emplea no solo para crear correspondencia entre la sealetica y el edicio, sino que tambin como rea para destacar y hacer referencia a cosas relevantes.
DE
O R I EN TACI N
pA R A
DE
P ROTOT I pOS
187
188
DE
O R I EN TACI N
pA R A
DE
P ROTOT I pOS
Esta Propuesta trabaja netamente el color de cada edicio en la totalidad de la sealtica, empleando el color tanto como fondos, en reas para destacar cosas y en tipografas e iconos se hace un juego entre fondo blanco - tipografa color y fondo color - tipografa blanco, el problema de esto es que la lectura se torna molesta ya que cada color genera su propio contraste en al lectura de caracteres, dicultando as su legibilidad.
DE
O R I EN TACI N
pA R A
DE
P ROTOT I pOS
189
190
DE
O R I EN TACI N
pA R A
DE
P ROTOT I pOS
TERCERA VERSIN Esta propuesta trabaja con formas rectas y adems integra formas curvas, de modo de romper lo paralelo, de cierta manera, y dar un poco de dinamismo a lo visual. El color se usa en cantidad medida, la suciente para lograr indicar e identicar a qu edicio corresponde.
DE
O R I EN TACI N
pA R A
DE
P ROTOT I pOS
191
192
DE
O R I EN TACI N
pA R A
DE
P ROTOT I pOS
Aqu el color se vuelve protagonista de la sealtica, quizs siendo un poco violento o invasivo para la vista. Se destaca el uso de una franja de color vertical, la cual integra conos y echas.
DE
O R I EN TACI N
pA R A
DE
P ROTOT I pOS
193
194
DE
O R I EN TACI N
pA R A
DE
P ROTOT I pOS
VERSIN FINAL
DE
O R I EN TACI N
pA R A
DE
P ROTOT I pOS
195
Sealetica de Exterior Se muestran las tipologas principales y la manera en como irn dispuestas en el espacio fuera de los edicios.
196
DE
O R I EN TACI N
pA R A
DE
P ROTOT I pOS
DE
O R I EN TACI N
pA R A
DE
P ROTOT I pOS
197
Sealetica de Interior Se muestran las tipologas principales y la manera en como irn dispuestas en el espacio dentro de un edicio.
198
DE
O R I EN TACI N
pA R A
DE
P ROTOT I pOS
Cierre Primer Captulo

El proceso de trabajo en esta etapa, abarc distintos aspectos de estudio y desarrollo, los cuales convergieron en un punto crucial para concluir el proyecto; este es, la creacin de un sistema visual de orientacin y una familia tipogrca. El estudio tanto del espacio fsico y de sus transentes, como el de las necesidades y bases de un sistema orientativo y sus componentes, permiten desarrollar una propuesta creativa fundamentada en base al viaje que experimenta el usuario dentro del hospital, formulando as un proceso comunicativo a travs de un Sistema de Sealtica. As mismo, la creacin de una fuente tipogrca exclusiva da libertad a los funcionarios del recinto para su uso en situaciones de urgencia o de ltimo minuto, pues no solo se piensa para que est presente en la sealtica, sino que tambin para diversos propsitos dentro del Hospital. De este modo, la conclusin de la familia tipogrca da cuenta de un proceso evolutivo dejando expuesta su materia de estudio. La tipografa construida queda disponible para todo el pblico a travs de su sitio web: http://proyectos.ead.pucv.cl/hospital/inicio.html La nalizacin de este proyecto concluye con la presentacin completa de este, al Hospital de Quilpu, junto con la entrega de toda la documentacin y material de estudio producido, a travs de un manual grco y un CD que compilan cada uno de los archivos fundamentales para la posible implementacin de este proyecto en el recinto.
20 0
DE
O R I EN TACI N
pA R A
H OS pI TA LE S " C I ER R E P R IMER C A p T U LO
Agradecimientos
Durante esta etapa de estudio y trabajo, se ha contado con la presencia de personas que han aportado de diferentes maneras en el desarrollo de los proyectos. Comenzamos agradeciendo a nuestro profesor de titulacin, Herbert Spencer, por guiarnos en el desarrollo de nuestros estudios y por haber proporcionado el uso de Thesis Theme para la construccin del sitio web de Salud Un Derecho; a los integrantes de Salud Un Derecho por la entrega de material acerca del movimiento y temas de la salud en Chile, y por las correcciones y aportes hechos en la redaccin del guin para el video introductorio; a Mirian Araceli Muoz Araya y Francisco Javier Vera Muoz, por su disposicin para grabar sus voces en la animacin; a Juan Andrs Mucarquer Fuentes por compartir sus conocimientos de programacin; al Hospital de Quilpu por entregarnos documentacin que aport al estudio; a Marcela Gonzles por gestionar los permisos necesarios para poder circular dentro del Hospital, facilitando el estudio y la realizacin del proyecto de sealtica hospitalaria; a Adolfo Espinoza Bernal por su asesoramiento en materiales para las ediciones y el empaste de estos ejemplares.
202
A G R A DECIMI EN TOS
Referencias
Bibliografa
AEDO I., Cristin. Las Reformas en la Salud en Chile, Captulo 14. B. MEGGS, Philip. La Historia del Diseo Grco, Identidad corporativa y los sistemas visuales, Cap. 22, 1991. BASTAS S., Dr. Gabriel; VALDIVIA C., Dr. Gonzalo. Reforma de Salud en Chile; El Plan AUGE o Rgimen de Garantas Explcitas en Salud (GES). Su Orgen y Evolucin, 2008. BAUMANN, Sander. Introduction to Waynding and Signage Design, 2010. BENEICKE, Alice; BIESEK, Jack; BRANDON, Kelley. Waynding and Signage in Library Design, 2003. BURKE, Kenneth. Four Master Tropes, Rethoric Review, Vol. 11, 1992. COSTA, Joan. Disear para los ojos, 2003. FREYLEJER, Valeria; MADIES, Claudia; TOBAR, Federico. Reforma de los Sistemas de Salud en Amrica Latina, 1997. GROWTH SOLUTIONS GROUP. Specialist clinics waynding guidelines: The outpatient journey, 2008. MATTELMKI, Tuuli. Design Probes, 2006. QUINTANA OROZCA, Rafael. Diseo de Sistemas de Sealizacin y Sealtica. R. MRQUEZ, Elio. Seales: Caractersticas de Visibilidad y Legibilidad. VEGA, Eugenio. Sistemas de signos en la comunicacin visual.
Webgrafa
EVOLUCIN DE LOS SISTEMAS DE SALUD EN CHILE https://www.u-cursos.cl/medicina/2010/1/FOGESTSA2/1/material_docente/objeto/294443 EL SISTEMA DE SALUD CHILENO http://www.colegiomedico.cl/ DERECHO A LA SALUD http://www.derechoshumanos.udp.cl/ DIEZ LECCIONES SOBRE LA SEALIZACIN http://blog.duopixel.com/articulos/senaletica.html NORMAS GRFICAS DEL TRANSANTIAGO http://www.det.cl/elaboracion-de-estudio-de-actualizacion-del-manual-de-normas-gracas-de-transantiago-ts3/ PLUGINS PARA WORDPRESS http://wordpress.org/extend/plugins/ VISIBILIDAD Y LEGIBILIDAD http://www.proyectacolor.cl/percepcion-del-color/visibilidad-y-legibilidad/
204
R EFER ENCI A S
Colofn
Colofn de Estudio
Las etapas de titulacin comprendieron dos proyectos: Salud un Derecho, proyecto Web y Hospital de Quilpu, proyecto de Sealtica. Ambos, a pesar de parecer tan distantes, convergen en la construccin y planicacin de una conversacin, un dilogo en el cual uno se interna en los contenidos de un sitio web y el otro en los servicios de un hospital. La coherencia en el discurso que ambos proyectos buscan establecer, trata de construir una uidez signicativa entre los distintos elementos que los componen y los usuarios. Los documentos relacionados a los proyectos se han dejado a disposicin de estas dos entidades (Salud Un Derecho y Hospital de Quilpu) en caso de que quisieran seguir desarrollndolos, o por otro lado, dejarlos como referencia en caso de realizar un proyecto similar.
Colofn Tcnico
TIPOGRAFA Ttulo 1: Giacomo Medium; Cuerpo 16; Interlnea 13 Ttulo 2: Giacomo Regular; Cuerpo 11; Interlnea 13 Subttulo 1: Giacomo Medium; Cuerpo 7,5; Interlnea 13; Todo en altas Subttulo 2: Giacomo Regular Italic; Cuerpo 7,5; Interlnea 13 Texto: Giacomo Light; Cuerpo 7,5; Interlnea 13 Ttulo de Notas: Giacomo Regular; Cuerpo 6,5; Interlnea 10 Texto de Notas: Giacomo Light; Cuerpo 6,5; Interlnea 10 Folio: Giacomo Light; Cuerpo 7; Interlnea 11; Versalitas COLORES Terracota: C=0; M=63; Y=85; K=29 Celeste: C=87; M=49; Y=0; K=0 Negro: C=0; M=0; Y=0; K=100 Gris: C=0; M=0; Y=0; K=70 SOPORTE Papel de Contenido: Hilado 6
206
C OLOF N
SOFTWARES Contenido y Portada: Adobe InDesign CS5 IMPRESIN Contenido: Se ha impreso con la impresora lser Samsung CLP 320 Series Portada: Se ha impreso en la impresora carro ancho HP Designjet 90 Esta edicin termin de imprimirse el 3 de Diciembre del 2011.
C OLOF N
207

Memoria Construcción de La Comunicación Visual

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Memoria Construcción de La Comunicación Visual

Încărcat de

Drepturi de autor:

Formate disponibile

Construccin de la Comunicacin Visual

Estrategia Web y de Sealizacin

Construccin de la Comunicacin Visual

Navegacin del Usuario en el Sitio Web Viaje del Usuario en el Hospital

Salud Un Derecho Hospital de Quilpu

Ideales Propsitos Direcciones Ubicaciones

Sitio Web Sistema Visual de Orientacin

Comunidad Chilena Internautas Pacientes Funcionarios Visitas

Captulo I Construccin de un Argumento Visual

A RGUMEN TO V I SUA L" I N T RODUCCI N

Estrategia del Proyecto

A RGUMEN TO V I SUA L" E S T R AT EG I A

SALUD UN DERECHO http://saludunderecho.cl/

MI SALUD NO ES UN NEGOCIO http://www.misaludnoesunnegocio.net/

A RGUMEN TO V I SUA L" E S T R AT EG I A

NATIONAL HEALTH SERVICE http://www.keepournhspublic.com/index.php

OBSERVATORIO DE EQUIDAD DE GNERO EN SALUD http://www.observatoriogenerosalud.cl/

A RGUMEN TO V I SUA L" E S T R AT EG I A

ORGANIZACIN PANAMERICANA DE LA SALUD http://new.paho.org/hq/

SOCIEDAD INTERNACIONAL DE EQUIDAD DE SALUD http://www.iseqh.org/

A RGUMEN TO V I SUA L" E S T R AT EG I A

contenido de manera apropiada. Implementar un sistema de calendarizacin con Google Calendar

A RGUMEN TO V I SUA L" E S T R AT EG I A

Servicios Locales de Salud

Reforma Neoliberal de los 80

A RGUMEN TO V I SUA L" A RQU I T EC T U R A

Desarrollo Social y Sistema de Salud

SNS y Predominio de Planicacin Central

Gobiernos de la Concertacin de Partidos por la Democracia

A RGUMEN TO V I SUA L" A RQU I T EC T U R A

Estructura del Sistema de Salud Chileno

A RGUMEN TO V I SUA L" A RQU I T EC T U R A

A RGUMEN TO V I SUA L" A RQU I T EC T U R A

Mapa de Navegacin Anterior

Mapa de navegacin del sitio web anterior de Salud un Derecho.

A RGUMEN TO V I SUA L" A RQU I T EC T U R A

Mapa de Navegacin Propuesto

Administrador y Usuario Registrado Administrador

A RGUMEN TO V I SUA L" A RQU I T EC T U R A

A RGUMEN TO V I SUA L" A RQU I T EC T U R A

A RGUMEN TO V I SUA L" A RQU I T EC T U R A

Diseo Estructural y Visual

A RGUMEN TO V I SUA L" D I S E O E S T RUC T U R A L

A RGUMEN TO V I SUA L" D I S E O E S T RUC T U R A L

A RGUMEN TO V I SUA L" D I S E O E S T RUC T U R A L

A RGUMEN TO V I SUA L" D I S E O E S T RUC T U R A L

PGINA CON SUBPGINAS

A RGUMEN TO V I SUA L" D I S E O E S T RUC T U R A L

A RGUMEN TO V I SUA L" D I S E O E S T RUC T U R A L

A RGUMEN TO V I SUA L" D I S E O E S T RUC T U R A L

A RGUMEN TO V I SUA L" D I S E O E S T RUC T U R A L

A RGUMEN TO V I SUA L" D I S E O E S T RUC T U R A L

A RGUMEN TO V I SUA L" D I S E O E S T RUC T U R A L

A RGUMEN TO V I SUA L" D I S E O E S T RUC T U R A L

A RGUMEN TO V I SUA L" D I S E O E S T RUC T U R A L

A RGUMEN TO V I SUA L" D I S E O E S T RUC T U R A L

A RGUMEN TO V I SUA L" D I S E O E S T RUC T U R A L

A RGUMEN TO V I SUA L" D I S E O E S T RUC T U R A L

A RGUMEN TO V I SUA L" D I S E O E S T RUC T U R A L

A RGUMEN TO V I SUA L" D I S E O E S T RUC T U R A L

A RGUMEN TO V I SUA L" D I S E O E S T RUC T U R A L

A RGUMEN TO V I SUA L" D I S E O E S T RUC T U R A L

A RGUMEN TO V I SUA L" D I S E O E S T RUC T U R A L