Este documento describe los pasos clave para diseñar la arquitectura de información de un sitio web. Explica que la arquitectura de información involucra definir los objetivos del sitio, la audiencia, los contenidos, la estructura, los sistemas de navegación y el diseño visual. Luego proporciona ejemplos de cómo aplicar estos pasos para diseñar los sitios web de un hotel y una empresa de servicios ambientales.

1. autor Toni Martín-Ávila toni@martinavila.net
el FRONT-END de un negocio on-line
Parte 2. arquitectura de información
© TONI MARTIN-AVILA 2009

2. autor Toni Martín-Ávila toni@martinavila.net
licencia creative commons Reconocimiento-No comercial-Compartir bajo la misma licencia 3.0 España
detalles licencia http://creativecommons.org/licenses/by-nc-sa/3.0/es/
© TONI MARTIN-AVILA 2009

3. Arquitectura de información
• Conjunto de métodos y herramientas que
permiten organizar los contenidos, para ser
encontrados y utilizados por los usuarios de
manera simple y directa
– Organizar contenidos
– Usabilidad (parte 3)
© TONI MARTIN-AVILA 2009

4. Arquitectura de información
1. Definición de objetivos del sitio
2. Definición de audiencia/público objetivo
3. Definición de contenidos del sitio
4. Definición de estructura del sitio
5. Definición de sistemas de navegación
6. Definición del diseño web
© TONI MARTIN-AVILA 2009

5. 1. Definición objetivos sitio
• Marketing en Internet
• ¿Para qué mi sitio web?
– Tener presencia, presentar servicios, dar
contenidos, vender
• Revisar misión, visión de mi organización
© TONI MARTIN-AVILA 2009

6. 2. Definición audiencia/PO
• Determinar a qué público objetivo se dirige la web
• La P de persona
• Es la base para el resto de acciones: contenidos,
navegación,diseño,etc.
© TONI MARTIN-AVILA 2009

7. 3. Definición contenidos sitio
• Los contenidos es el producto de nuestra web y todo lo que
rodea para darle valor, para atraer al visitante, para retenerlo
y fidelizarlo
• Lo primero de todo debe ser determinar qué productos-
servicios vamos a ofrecer a través de la web y que contenidos
se necesitan para “rodearlo”
• La P de producto
• Contenidos dados de alta por los visitantes
• Ejemplo: HOTEL EN MALLORCA: vacaciones en Mallorca,
información de Mallorca, el hotel, sus servicios,
ofertas,paquetes...RESERVAR
© TONI MARTIN-AVILA 2009

8. 4. Definición estructura
• ¿Qué secciones tendrá mi web?
• ¿Qué información de cada sección?
• 4-5 secciones principales como máximo
– ¿Que ofrecemos?
– ¿Cómo?
– Quienes somos
– ¿A quienes y donde?
– Compre....
© TONI MARTIN-AVILA 2009

9. 4. Definición estructura
© TONI MARTIN-AVILA 2009

10. 5. Sistemas de navegación
© TONI MARTIN-AVILA 2009

11. 6.Diseño visual
© TONI MARTIN-AVILA 2009

12. ¿Cómo se diseña?
• Planteamiento e idea inicial
• A medida
– Con herramientas de diseño gráfico apropiadas para diseño web
(Adobe, Fireworks, Photoshop, etc. )
– Se crean ficheros .png, .jpeg que luego se maquetarán
• A través de plantillas
– Aplicaciones Web cerradas
– Aplicaciones CMS con plantillas
– Blogs (blogspot.com, wordpress, etc.)
• A menudo requiere una actualización de imagen
© TONI MARTIN-AVILA 2009

13. Antes ....
© TONI MARTIN-AVILA 2009

14. después ....
© TONI MARTIN-AVILA 2009

15. Resumen diseño web
• Identidad digital apropiada
– Manual de identidad corporativa/extensión digital
(colores, tamaños,logos,etc)
• Apropiado al Mercado, a las personas
• Persuasión
– llamar la atención del visitante creando branding
• El siguiente paso y conjunto: la Maquetación
– usabilidad + arquitectura de información
© TONI MARTIN-AVILA 2009

16. Factores clave
• Adecuación digital/off-line
• Hacer pruebas “a mano”
• Mejorar en sucesivos pasos. No ser muy exigentes al principio
• La aportación del cliente/equipo es fundamental
– Trabajar estrechamente con el cliente/equipo. Tener en cuenta su
valiosa aportación y participación en cada etapa del proceso para
lograr un diseño estéticamente agradable sin comprometer la facilidad
de uso.
• Testing en varias plataformas
• “Peso” de la página
© TONI MARTIN-AVILA 2009

17. Ejemplo web hotel
Objetivos del sitio
Audiencia
Por qué Mallorca e información de interés. El hotel y sus
Contenidos
habitaciones con ofertas de paquetes vacacionales con
cajetín de reservas
•El destino ... Vacaciones en mallorca
Estructura
•Nuestros productos/servicios
•El hotel, las habitaciones, las tarifas, paquetes,
ofertas
•Quienes somos
•Noticias / eventos
•Reservas
•Nuestras referencias
Menú izquierda con foto principal en cada sección.
Sistema navegación
Master/detail #1
Diseño web visual
© TONI MARTIN-AVILA 2009

18. © TONI MARTIN-AVILA 2009

19. © TONI MARTIN-AVILA 2009

20. Ejemplo empresa servicios
Presentar servicios de consultoría medioambiental
Objetivos del sitio
Audiencia Empresas sector industrial y admin, pública, en
especial hoteles
La empresa y sus productos. Novedades de legislación
Contenidos
medio-ambiental y normas ISO 1400/EMAS con artículos
tipo blog
• Quienes somos (la empresa,contacto,etc)
Estructura
• Que productos/servicios ofrecemos
• Nuestra experiencia/nuestros clientes
• Información del sector Noticias / eventos
Menú superior derecha
Sistema navegación
Diseño web visual
© TONI MARTIN-AVILA 2009

21. ARQUITECTURA
Objetivos del sitio
Audiencia
Contenidos
Estructura
Sistema navegación
Diseño web visual
© TONI MARTIN-AVILA 2009

22. http://www.templatesbox.com/data/premium.templates/images/full_flash_site/flash.preview/1236612890blq/index.html
© TONI MARTIN-AVILA 2009

23. •Diseño y maquetación preparados
en templates
•Listos para realizar maqueta pre-final
antes de programación
http://www.templatesbox.com/premium-templates/website-templates/template330.htm
© TONI MARTIN-AVILA 2009

24. © TONI MARTIN-AVILA 2009

25. © TONI MARTIN-AVILA 2009

26. © TONI MARTIN-AVILA 2009

27. © TONI MARTIN-AVILA 2009