Frontend Web Parte 2 Arquitectura De Informacion

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

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/


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)


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


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


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.


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


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....


4. Definición estructura


5. Sistemas de navegación


6.Diseño visual


¿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


Antes ....


después ....


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


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


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

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


ARQUITECTURA
Objetivos del sitio
Audiencia
Contenidos
Estructura
Sistema navegación
Diseño web visual

http://www.templatesbox.com/data/premium.templates/images/full_flash_site/flash.preview/1236612890blq/index.html


•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


Frontend Web Parte 2 Arquitectura De Informacion

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Frontend Web Parte 2 Arquitectura De Informacion

Ähnlich wie Frontend Web Parte 2 Arquitectura De Informacion (20)

Mehr von Toni Martin Avila

Mehr von Toni Martin Avila (14)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Frontend Web Parte 2 Arquitectura De Informacion