Professional Documents
Culture Documents
Fase 2:
Plataforma web de artem
Ninoska morilla fuentes, 2º B
INTRODUCCIÓN Sobre Artem
1. Introducción
• Sobre Artem
1. TEATRO DE RECIENTE CREACIÓN EN GRANADA CAPITAL
2. Briefing
• Proceso de indagación 2. IMAGEN FRESCA E INNOVADORA CERCANA AL PÚBLICO JOVEN
• Conclusiones
• Propuesta
3. libro de estilos
• Mapa Web • Sala de Exposiciones - Teatro
• Distribución de espacios - Teatro Infantil
• Uso del color • Gestión de espacio escénico - Música
• Sistema de navegación 3. SERVICIOS - Danza
- Otras actividades
• Tecnologías y lenguajes
• Programación didáctica
• Diseño de la interacción
• Estrategia tipográfica
• Ciclos monográficos
• Recursos gráficos e interactivos
4. Conclusiones
BRIEFING PROCESO DE INDAGACIÓN
• Sistema de navegación
5. ¿ Cómo gestionan la información ?
• Tecnologías y lenguajes 6. ¿ Por qué necesita Artem un sitio Web ?
• Diseño de la interacción 7. ¿ qué tipo de Web necesita?
• Estrategia tipográfica
• Conclusiones 1. No todos los teatros tienen sitio web, en toda Andalucía, sólo
• Propuesta hemos encontrado cinco
3. libro de estilos
• Mapa Web
2. La competencia • T. M. Isabel la Católica No tiene
• Distribución de espacios
más directa
• Uso del color
Web informativa de
• Sistema de navegación • C.C. Manuel de Falla poca actualización
• Tecnologías y lenguajes
• Diseño de la interacción
• Teatro Alhambra Diseño muy estático,
• Estrategia tipográfica
poco atractivo excepto
• Recursos gráficos e interactivos por las imágenes
4. Conclusiones
BRIEFING PROCESO DE INDAGACIÓN
Teatro Alhambra
1. Introducción
• Sobre Artem
2. Briefing
• Proceso de indagación
• Conclusiones
• Propuesta
3. libro de estilos
• Mapa Web
• Distribución de espacios
• Sistema de navegación
• Tecnologías y lenguajes
• Diseño de la interacción
• Estrategia tipográfica
• Conclusiones
• Propuesta
3. libro de estilos
• Mapa Web
• Distribución de espacios
• Sistema de navegación
• Tecnologías y lenguajes
• Diseño de la interacción
1. Introducción
• Sobre Artem Teatro exchgaray
2. Briefing
• Proceso de indagación
• Conclusiones
• Propuesta
3. libro de estilos
• Mapa Web • Uso de clave alta
• Distribución de espacios
• Aspecto más joven y fresco
• Uso del color
• Uso del color de forma funcional
• Sistema de navegación
para diferenciar entre los
• Tecnologías y lenguajes
distintos generos
• Diseño de la interacción
• Uso muy conmedido del color
• Estrategia tipográfica
• Gestiona solamente su agenda de
• Recursos gráficos e interactivos
espectáculos
4. Conclusiones
BRIEFING PROCESO DE INDAGACIÓN
1. Introducción
• Sobre Artem
gran teatro de cordoba
2. Briefing
• Proceso de indagación
• Conclusiones
• Propuesta
3. libro de estilos
• Mapa Web • Uso de clave baja
• Distribución de espacios • Poco cuidado del diseño de los
• Uso del color textos y de las imágenes.
• Sistema de navegación • Uso del color de forma funcional
• Tecnologías y lenguajes para diferenciar entre los
• Diseño de la interacción distintos generos
• Estrategia tipográfica • Muy oscura con todos los textos
• Recursos gráficos e interactivos sobre fondo negro o gris
4. Conclusiones
BRIEFING PROCESO DE INDAGACIÓN
• Conclusiones
• Propuesta
3. libro de estilos
• Mapa Web
• Distribución de espacios
• Sistema de navegación
• Tecnologías y lenguajes
• Uso de clave baja
• Diseño de la interacción
• Diseño muy cuidado
• Estrategia tipográfica
• Es un teatro clasico
• Recursos gráficos e interactivos
• Uso de rojos y grises en los fondos, de nuevo...
4. Conclusiones
BRIEFING PROCESO DE INDAGACIÓN
• Sistema de navegación
• Tecnologías y lenguajes
• Diseño de la interacción
• Estrategia tipográfica
... de esta segunda remesa, nos quedamos como referencia con el
• Recursos gráficos e interactivos Teatro Circo Price
4. Conclusiones
BRIEFING PROCESO DE INDAGACIÓN
1. Introducción
• Sobre Artem
2. Briefing
• Proceso de indagación
• Conclusiones
• Propuesta
3. libro de estilos
• Mapa Web
• Distribución de espacios
• Sistema de navegación
• Tecnologías y lenguajes
• Diseño de la interacción
• Tiene un aspecto más moderno y desenfadado
• Estrategia tipográfica
• Diseño cuidado, incorpora algunos recursos atractivos e interesantes
• Recursos gráficos e interactivos
• Sigue una estrategia un poco más persuasiva
4. Conclusiones
BRIEFING PROCESO DE INDAGACIÓN
• Conclusiones
• También gestionan grandes volúmenes de información
• Propuesta
3. libro de estilos • Aunque no emplean gran cantidad de recursos de diseño, la apariencia
• Mapa Web
que reflejan es más moderna
• Distribución de espacios • Gestionan agenda con eventos de gran variedad
• Uso del color
• Nos sirven sobretodo por la gestión de la información y la navegación
• Sistema de navegación
• Tecnologías y lenguajes
• Diseño de la interacción
• Estrategia tipográfica
1. Introducción
• Sobre Artem
2. Briefing
• Proceso de indagación
• Conclusiones
• Sistema de navegación
• Tecnologías y lenguajes
• Diseño de la interacción
• Estrategia tipográfica
• Conclusiones inicio el teatro/ venta calendario boletin electro- teatro socios sala de contacto programación revista enlaces mapa navegación equipo aviso formación sala expo-
información localidades nico/rss infantil prensa de interés web humano legal siciones
• Propuesta
alhambra
3. libro de estilos
teatro
cervantes ma
• Mapa Web
teatro
echegaray
• Distribución
gran teatro
córdoba
de espacios
• Sistema de
teatro lope
de vega
navegación
• Tecnologías y
teatro juan
bravo
lenguajes
• Diseño de la interacción
escalante
c. t.
• Estrategia tipográfica
artem
1. Introducción
1. OBJETIVOS • Fidelización
• Sobre Artem DE LA WEB • Captación de nuevos públicos
2. Briefing
• Proceso de indagación
• Escaparate para la empresa y sus servicios
• Conclusiones • Conocer a su público
• Propuesta • Ampliar la imagen de marca
3. libro de estilos
• Mapa Web
2. PÚBLICO • Escolares (profesores y padres)
• Distribución de espacios
OBJETIVO • Aficionados al teatro
• Uso del color
• Sistema de navegación
• Público infantil (padres)
• Tecnologías y lenguajes • Aficionados al Arte
• Diseño de la interacción • Profesionales del sector
• Estrategia tipográfica
• Propuesta
¿Qué funciones hay
3. libro de estilos Cómo organizar
actualmente?
• Mapa Web
la visita
• Distribución de espacios Comprar
• Uso del color
entradas
• Sistema de navegación
• Tecnologías y lenguajes
+ Información (consultas)
• Diseño de la interacción
2. Contactar con Artem
• Estrategia tipográfica
Organizar
• Recursos gráficos e interactivos
la visita
4. Conclusiones
BRIEFING PROPUESTA ¿Qué necesita el público objetivo?
• Propuesta
¿Dónde comprarlas?
3. libro de estilos
2. Comprar entradas
• Mapa Web
Abonos y descuentos
• Distribución de espacios
• Propuesta
3. libro de estilos
• Mapa Web
Exposición Precio
• Distribución de espacios actual
• Uso del color Horarios ¿Dónde está
• Sistema de navegación Artem?
• Tecnologías y lenguajes
• Diseño de la interacción
• Estrategia tipográfica
2. Contactar con Artem
• Recursos gráficos e interactivos
4. Conclusiones
BRIEFING PROPUESTA ¿Qué necesita el público objetivo?
1. Introducción profesionales
• Sobre Artem ARTES ESCÉNCAS
2. Briefing
• Proceso de indagación
• Conclusiones
Aforo
• Propuesta
3. libro de estilos 1. Información sobre Artem Datos Técnicos
• Mapa Web ¿Dónde está artem?
• Distribución de espacios
• Sistema de navegación
• Tecnologías y lenguajes
Interesados en
• Diseño de la interacción 2. Contactar con Artem actuar en Artem
• Estrategia tipográfica
1. Introducción profesionales
• Sobre Artem ARTE
2. Briefing
• Proceso de indagación Sala de exposiciones
• Conclusiones
1. Información sobre Artem Datos Técnicos de la sala
• Propuesta
3. libro de estilos ¿Dónde está artem?
• Mapa Web
• Distribución de espacios
• Estrategia tipográfica
1. Introducción
3. POSICIONAMIENTO
• Sobre Artem
2. Briefing • Empresa joven, fresca e innovadora
• Proceso de indagación • Intenta acercar las artes escénicas a público
• Conclusiones
más joven. - Programación infantil
• Propuesta
- Funciones didácticas
3. libro de estilos
- Espectáculos contemporáneos
• Mapa Web
- Imamagen mmoderna y desenfadada
• Distribución de espacios
• Tecnologías y lenguajes
• Cuida la imagen que transmite en todas sus
• Diseño de la interacción
acciones de comunicación
• Estrategia tipográfica • Activa Web actualizada
• Recursos gráficos e interactivos
4. Conclusiones
BRIEFING PROPUESTA
• Conclusiones
teatros más modernos que a los teatros más clásicos, sin
• Propuesta
alejarse de la estructura de información común de las Web
3. libro de estilos
de teatros
• Mapa Web
Los usuarios están acostumbrados a una
estructura concreta mantenerla les facilita
• Distribución de espacios la navegación
• Uso del color
• Estrategia tipográfica
• Actualización frecuente de contenidos
• Recursos gráficos e interactivos
4. Conclusiones
LIBRO DE ESTILOS MAPA WEB
• Tecnologías y lenguajes
• Diseño de la interacción
• Estrategia tipográfica
1. Introducción 1. PROPORCIONES
• Sobre Artem
Anccho fijo 980px
2. Briefing
Scroll Idicadores para subir
• Proceso de indagación
• Conclusiones
• Sistema de navegación
• Sistema de navegación
• Tecnologías y lenguajes
• Diseño de la interacción
• Estrategia tipográfica
1. Introducción
5. INTERFAZ
• Sobre Artem Tanto los contenidos como la navegación irán colocadas en el interior de cajas
2. Briefing colgantes unas de otras, simulando carteles.
• Proceso de indagación
• Conclusiones
• Propuesta
3. libro de estilos
• Mapa Web
• Distribución de espacios
• Sistema de navegación
• Tecnologías y lenguajes
• Diseño de la interacción
• Estrategia tipográfica
• Propuesta
3. libro de estilos 2. COLOR IDENTITARIO
• Mapa Web Se jugará con los colores corporativos, el naranja, el negro y sus distintos matices.
• Distribución de espacios
Se emplearán en titulares, cuerpo de texto y pictogramas
• Uso del color
R: 255 R: 0 R: 51
• Sistema de navegación
G: 90 G: 0 G: 51
• Tecnologías y lenguajes
B:0 B:0 B: 51
• Diseño de la interacción
• Estrategia tipográfica
1. Introducción
3. USO FUNCIONAL
• Sobre Artem • Como apoyo a la navegación se usarán enlaces en colores negro y/o gris
2. Briefing que cambiarán su color a naranja cuando el usuario interactúe con el sitio, al
• Proceso de indagación
pasar el ratón sobre ellos, o para marcar la sección en la que se encuentra
• Conclusiones
• También se jugará con el color para diferenciar entre los distintos géneros
• Propuesta
3. libro de estilos de espectáculos. Tanto para marcar sus enlaces como para los distintos
• Mapa Web titulares o marcos de sus imágenes.
• Distribución de espacios • Para jerarquizar titulos
• Uso del color
• Sistema de navegación
TEATRO
• Tecnologías y lenguajes TEATRO DANZA MÚSICA OTROS
INFANTIL
• Diseño de la interacción
R: 190 R: 14 R: 95 R: 0 R: 242
• Estrategia tipográfica G: 10 G: 48 G: 12 G: 148 G: 148
• Recursos gráficos e interactivos B: 38 B:131 B: 90 B: 48 B: 0
4. Conclusiones
LIBRO DE ESTILOS SISTEMA DE NAVEGACIÓN
• Conclusiones
Sección nvl. 1
• Propuesta
3. libro de estilos
Submenú desplegable Sección nvl. 2
• Mapa Web
Sección nvl. 3
• Distribución de espacios
• Sistema de navegación
• Tecnologías y lenguajes
• Diseño de la interacción
• Estrategia tipográfica
• Propuesta
Trayectos a la programación
3. libro de estilos
general filtrada por géneros
• Mapa Web
• Distribución de espacios
RSS
• Uso del color Acceso a Navegación
• Sistema de navegación servicios Mapa web
• Tecnologías y lenguajes Facebook
• Diseño de la interacción
1. Introducción
2. NAVEGACIONES ALTERNATIVAS
• Sobre Artem
• Enlaces hipertexto
2. Briefing • Puntos fuertes
• Proceso de indagación • Procesos rutinarios
• Conclusiones • Trayectos (caminos directos) • Servicios más visitados
• Propuesta
• Aquello sobre lo que artem quiera llamar
3. libro de estilos
la atención del usuario
• Mapa Web
• Distribución de espacios
• Menu de pestañas auxilar
• Uso del color
• Sistema de navegación
• Trayectos
• Tecnologías y lenguajes
• Visualización de videos
• Diseño de la interacción
• Visualización de imágenes
• Estrategia tipográfica
• Conclusiones
• Propuesta
3. libro de estilos
• Mapa Web
• Distribución de espacios
• Sistema de navegación
• Tecnologías y lenguajes
• Diseño de la interacción
• Estrategia tipográfica
1. Introducción
1. TIPOS NATIVOS
• Sobre Artem • trebuchet bold
2. Briefing
• Proceso de indagación • Titulos (17pt)
• Conclusiones • Subtítulos (15pt)
• Propuesta • Rótulos de los enlaces(no especificados en
3. libro de estilos tipos rasterizadas)
• Mapa Web
• Distribución de espacios
• Sistema de navegación
• Tecnologías y lenguajes
• Diseño de la interacción
• Estrategia tipográfica
1. Introducción
1. TIPOS NATIVOS
• Sobre Artem • Verdana
2. Briefing
• Proceso de indagación
• Cuerpo de texto (11px; interlineado 16px)
• Conclusiones • Títulos de tercer nivel de jerarquía
• Propuesta • Rotulos de los menús de pestañas
3. libro de estilos
• Mapa Web
• Distribución de espacios
• Sistema de navegación
• Tecnologías y lenguajes
• Diseño de la interacción
• Estrategia tipográfica
• Propuesta
3. libro de estilos
• Mapa Web
• Enlaces de las promociones en el
• Distribución de espacios
Home(17 pt)
• Uso del color
• Sistema de navegación
• Conclusiones
• Propuesta
3. libro de estilos
• Mapa Web
• Distribución de espacios
• Sistema de navegación
• Tecnologías y lenguajes
1. Introducción
2. PICTOGRAMAS Y METÁFORAS VISUALES
• Sobre Artem
2. Briefing
• Proceso de indagación
3.1.
• Conclusiones
• Propuesta
3. libro de estilos 3.2.
• Mapa Web
• Distribución de espacios
• Sistema de navegación
3.3.
• Tecnologías y lenguajes
• Diseño de la interacción
QUILLA
TA
• Estrategia tipográfica
• Distribución de espacios
• Lo que ves en otras Web (por muy fácil que te parezca), a menudo no puedes tenerlo en
la tulla.
• Uso del color
• Sistema de navegación • Con mis conocimientos de Web, que en este punto son más de los que yo esperaba, las
• Tecnologías y lenguajes decisiones de diseño se ha visto constantemente limitadas.
• Diseño de la interacción
• He empleado mucho tiempo en investigar y aprender cómo programar o crear ciertos
• Estrategia tipográfica
recursos para emplearlos en la web que me han dejado poco tiempo para el diseño y
• Recursos gráficos e interactivos
para el montaje de la página en Dreamweaver.
4. Conclusiones
CONCLUSIONES
1. Introducción • A pesar de las dificultades, estoy satisfecha con el proyecto que he llevado a cabo,
• Sobre Artem aunque pienso que es mejorable y que aun queda mucho por hacer.
2. Briefing
• Todos queremos crear la web que sea diferente, y en mi opinión la plataforma web de
• Proceso de indagación
Artem es distinta a todas las web de teatro que he encontrado, aunque no se si el di-
• Conclusiones
seño gustará a todos sus públicos.
• Propuesta
3. libro de estilos • Los recursos gráficos que creamos son muy importantes a la hora de crear cual-
• Mapa Web quier tipo de sitio Web (no es necesaria una feria de recursos) , pero si no los tienes,
• Distribución de espacios tienes una web corriente, vacía y sin personalidad. Yo he creado algunos que habéis
• Uso del color visto, pero creo que faltan algunas llamadas de atención “potentes” que comuniquen al
• Sistema de navegación usuario y le inviten a interactuar. Tengo que trabajar en ello.
• Tecnologías y lenguajes
• Queda poco tiempo y mucha tarea, seguiré trabajando como hasta ahora para intentar
• Diseño de la interacción
entregarla a tiempo sin hacer una chapuza.
• Estrategia tipográfica