1. Fabián Alvarez / Taller de Arquitectura Web 2009
TALLER de ARQUITECTURA WEB
Por FABIAN ALVAREZ
Sobre el oficio de definir estructuras, funcionalidad y contenido
en un sitio Web ANTES de diseñar o programar.
•••<>•••
Introducción
Este taller busca darle valor profesional y marco académico a una zona incierta del trabajo de
desarrollo de ambientes virtuales (multimedia y Web) generalmente cubierto por el diseñador gráfico o
por el programador.
Usar un martillo no nos hace carpinteros.
A diferencia de otros cursos donde se enseñan programas de diseño o lenguajes de programación, este
taller se concentra en la actividad profesional PREVIA, la de definir y organizar estructuras,
funcionalidad y contenidos, "pensar una Web".
Objetivos del taller
• Adquirir los conocimientos teóricos y prácticos fundamentales para el diseño de arquitecturas de
información e interfases para la Web.
• Aplicar metodologías para abordar con el cliente el proceso de desarrollo de un sitio web.
Herramientas para ordenar el trabajo, anticipar problemas y controlar presupuestos.
• Definir los conceptos claves del diseño orientado al usuario.
• Incorporar criterios de "Buen Diseño". Conocer y aplicar fundamentos básicos y muchas veces no
considerados sobre estética, diseño, lógica visual y funcional.
El taller está destinado a estudiantes y profesionales en el área del diseño web, programación y gestión de
información electrónica.
Fabián Alvarez / Taller de Arquitectura Web / www.underbit.com.ar / underbit@gmail.com / 1998.2009
2. Fabián Alvarez / Taller de Arquitectura Web 2009
Programa general
Conceptos generales
- Arquitectura de información. Introducción.
- El Arquitecto Web: Pensamiento global y visión de la totalidad de un proyecto.
- Analogía con la arquitectura tradicional.
- Diseño de estructuras de información.
- Principios del diseño de interfaces Web.
- Presentando a los actores: Cliente - Desarrollador - Usuario
- El diseño centrado en el usuario.
- Card Sorting. Prototipos HTML.
- La percepción de la información.
El "Cuerpo" Web
- Anatomía de un sitio Web: Desarmando y volviendo a armar las partes.
- Contenedores - Contenido - Navegación - Identidad - Estilo
- La importancia del espacio en Blanco
- Cómo definir la Estructura, Funcionalidad y Contenido de un sitio.
- Uso de retículas. Distintos criterios.
- Definiendo Jerarquías. Categorías. Ubicación de los contenidos y funciones.
- Etiquetas / El Nombre de las Cosas / Terminología
Lógica visual.
- Percepción de la información.
- Estructuras visuales y retículas.
- Estilos. Convenciones.
- Proporciones y simetría. La regla áurea.
- La escala en el diseño.
- El texto: Tipografía.
- Elementos: Márgenes. Bordes. Espacio blanco.
- Balance y equilibrio compositivo.
- Izquierda y derecha de la pantalla. Simetría y asimetría.
- Contraste. Escala. Contornos.
- Encuadre de imágenes. Enfocando creativamente.
Usabilidad. Diseñando la experiencia interactiva.
- Interfases para usar sin pensar. El sentido común en el diseño interactivo.
- Lo que el usuario nunca debe pensar.
- Interfases que responden Cómo? – Dónde? – Qué? al usuario.
- Lo que No hay que hacer. Análisis, crítica y propuesta sobre casos reales.
- Diferencias entre diseño de uso pretendido y el uso real.
- Diagramas de recorridos. Navegar – Buscar / Encontrar - Enviar.
- Curva de aprendizaje de una interfase.
- Como “lee” el usuario?. Hojear la Web.
Fabián Alvarez / Taller de Arquitectura Web / www.underbit.com.ar / underbit@gmail.com / 1998.2009
3. Fabián Alvarez / Taller de Arquitectura Web 2009
Tríos conceptuales en interacción.
- Dato / Información / Conocimiento
- Texto / Contexto / Usuario
- Contenido / Estructura / Funcionalidad
- Qué hay? / Dónde estoy? / Cómo voy?
- Cliente / Desarrollador / Usuario
- Diseño / Tecnología / Comunicación
Clientes Vs. Desarrolladores.
- El primer contacto. Preguntas claves al cliente en una primera aproximación a un trabajo.
- Que nos "dice" una tarjeta personal?
- Ordenando el trabajo, anticipando problemas.
- Los Clientes que "quieren ver algo":
- Dando expectativas razonables de los clientes.
- Las consideraciones sobre los potenciales usuarios.
Prototipos Web.
- Uso de Prototipos HTML en el proceso de desarrollo Web. Simular toda instancia funcional del sitio, a
través de simples páginas HTML
- Cómo evitar que tiempos y presupuestos se disparen.
- Anticipar y minimizar errores y marchas atrás.
- Card Sorting: Organizar y ayudar a definir los contenidos a publicar.
- Agrupando funciones, jerarquías, categorías. Barras de navegación, estructura de secciones y
subsecciones.
Sobre el taller
- Cada encuentro se compone de una exposición teórica sobre la que se realizan actividades prácticas o
ejercicios, individuales y grupales.
- Se trabajará con casos de estudios, análisis de ejemplos, comparación, corrección, detección de aciertos y
errores. Propuestas. Rediseños.
- Juegos de rol entre Cliente / Desarrollador / Usuario sobre proyectos dados.
- Los prácticos se realizan en PC y con papel, lápiz y marcadores de color.
- El taller ofrece, de ser preciso, asistencia básica en manejo de programas de diseño (PhotoShop -
Dreamweaver) para realizar los ejercicios.
- El taller promueve una dinámica activa entre los participantes.
Requerimientos
- Manejo de sistema operativo Windows / Manejo de navegador web
- Conocimiento de herramientas de diseño (Dreamweaver – PhotoShop - no excluyente)
- Papel / Lápices / Marcadores de color
Background teórico
Steve Krug / Richard S. Wurman / Eric Holter / Ben Hunt / Jesse James Garrett / Jason Beaird / Donald
Norman / www.alistapart.com
Fabián Alvarez / Taller de Arquitectura Web / www.underbit.com.ar / underbit@gmail.com / 1998.2009
4. Fabián Alvarez / Taller de Arquitectura Web 2009
Fabián Alvarez • Cv
FORMACION ACTIVIDAD PROFESIONAL
Formado en Facultad de Arquitectura y 1983
Urbanismo (UBA - FAU - 1982/1987). Historia del Inicia su actividad profesional en Artes
Arte con Arq. Julio Guerrero / Taller Oficio. Gráficas (estudios de diseño y arquitectura,
Producción gráfica en la Fundacion Gutemberg. imprentas).
Desde 1990 es autodidacta en diseño asistido 1990
por computadora. Incorpora herramientas informáticas aplicadas
Idóneo en manejo de programas vectoriales, a la producción gráfica. (El Naturalista - Estudio
fotográficos, editores web, sonido y video. Arq. Laura Clot)
A partir de 1997 se capacita en procesos de 1996
interactividad y programación web. Nosis.com / Presentaciones multimedia, video digital y
Gustavo Font / Darío Blanco. CdRoms. (Nosis SA)
En 2004 cursa el seminario "Negocios de 1998
Diseño - Creacion, gestión y valuación de un Comienza su actividad como diseñador web,
emprendimiento" Dra. Patricia Jablonka - formando parte del equipo de desarrollo de
INCUBA - CMD - Centro Metropolitano de Diseño. Nosis.com
BACKGROUND TEORICO 2009
Cumple 11 años como diseñador
Scott McCloud / Steve Krug / Richard S. Wurman / independiente de sitios Web. Resumen de
Jakob Nielsen / Eric Holter / Ben Hunt / Jesse trabajos hasta la fecha en http://underbit.com.ar
James Garrett / Jason Beaird / www.alistapart.com Actualmente trabaja en colaboración con Darío
Blanco (programador).
OTROS ESTUDIOS
Algunos clientes
Dibujo e Historieta con Cristian Mallea y Angel Nosis SA / Complot / Catevi (Soc.Central
Mosquito. Música, teoría, armonía con Fernando Arquitectos) / "Guri Guazu" Banda de sonido
Tavolaro. Audio y Sonido con Jorge Haro y Hugo (Malabar - TV Canal 7) / Cybrel / Vicentico
Foigelman. (Estudio Roxanova) / ArteIt / Parakultural
Algunos rubros
Información financiera, industrias, servicios, pago
por descargas, catálogos, proyectos inmobiliarios,
moda, arte, cultura, tango, asociaciones, etc.
En 2009 comienza su trabajo de investigación sobre lo que considera aspectos fundamentales y muchas
veces no considerados sobre la actividad de "pensar una web" y el rol del "Arquitecto Web".
Escribe el programa del "Taller de Arquitectura Web” Actualmente se dicta en el Instituto ArteIt, Lavalle
3910 PB "B". Buenos Aires. El taller brinda un soporte teórico / práctico para ordenar los diferentes
ángulos de nuestra compleja actividad.
Fabián Alvarez / Taller de Arquitectura Web / www.underbit.com.ar / underbit@gmail.com / 1998.2009
5. Fabián Alvarez / Taller de Arquitectura Web 2009
OTRAS ACTIVIDADES
1987/1991 Trabaja como técnico audiovisual y diseñador gráfico en el Centro Parakultural
1998/2002 Proyecto y realización de stands comerciales (Nosis SA / SilenPro) Hotel Sheraton - Palacio San
Miguel - Hotel Panamericano - Centro Mun. de Exposiciones.
2002/2004 Revista Parakultural Posta. Guía de actividad cultural tanguera. - Producción gráfica / Producción
editorial / Web
2007/2009 - Autor de la banda de sonido y música incidental para el programa "Gurí Guazu" - Canal 7 /
Producción: Malabar. Rubro: TV. Juego interactivo en 3D.
2009 - Ilustraciones aplicadas a objetos. Feria de diseño.
•••<>•••
Fabián Alvarez
estudio underBit
www.underbit.com.ar
underbit@gmail.com
15-5-805-8870
2009
Fabián Alvarez / Taller de Arquitectura Web / www.underbit.com.ar / underbit@gmail.com / 1998.2009