autor Toni   Martín-Ávila toni@martinavila.net




             el FRONT-END de un negocio on-line
             Parte 2. a...
autor Toni      Martín-Ávila toni@martinavila.net


      licencia creative commons Reconocimiento-No comercial-Compartir ...
Arquitectura de información
• Conjunto de métodos y herramientas que
  permiten organizar los contenidos, para ser
  encon...
Arquitectura de información
1.     Definición de objetivos del sitio
2.     Definición de audiencia/público objetivo
3.   ...
1. Definición objetivos sitio
• Marketing en Internet
• ¿Para qué mi sitio web?
      – Tener presencia, presentar servici...
2. Definición audiencia/PO
• Determinar a qué público objetivo se dirige la web
• La P de persona
• Es la base para el res...
3. Definición contenidos sitio
• Los contenidos es el producto de nuestra web y todo lo que
  rodea para darle valor, para...
4. Definición estructura
• ¿Qué secciones tendrá mi web?
• ¿Qué información de cada sección?
• 4-5 secciones principales c...
4. Definición estructura




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




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




© TONI MARTIN-AVILA 2009
¿Cómo se diseña?
• Planteamiento e idea inicial
• A medida
      – Con herramientas de diseño gráfico apropiadas para dise...
Antes ....


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


© TONI MARTIN-AVILA 2009
Resumen diseño web
• Identidad digital apropiada
      – Manual de identidad corporativa/extensión digital
        (colore...
Factores clave
•    Adecuación digital/off-line
•    Hacer pruebas “a mano”
•    Mejorar en sucesivos pasos. No ser muy ex...
Ejemplo web hotel
        Objetivos del sitio
        Audiencia
                              Por qué Mallorca e informaci...
© TONI MARTIN-AVILA 2009
© TONI MARTIN-AVILA 2009
Ejemplo empresa servicios
                              Presentar servicios de consultoría medioambiental
        Objetivo...
ARQUITECTURA
                           Objetivos del sitio
                           Audiencia
                         ...
http://www.templatesbox.com/data/premium.templates/images/full_flash_site/flash.preview/1236612890blq/index.html




© TON...
•Diseño y maquetación preparados
en templates
•Listos para realizar maqueta pre-final
antes de programación




          ...
© TONI MARTIN-AVILA 2009
© TONI MARTIN-AVILA 2009
© TONI MARTIN-AVILA 2009
© TONI MARTIN-AVILA 2009
Upcoming SlideShare
Loading in...5
×

Frontend Web Parte 2 Arquitectura De Informacion

1,124

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,124
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Frontend Web Parte 2 Arquitectura De Informacion

  1. 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. 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. 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. 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. 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. 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. 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. 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. 9. 4. Definición estructura © TONI MARTIN-AVILA 2009
  10. 10. 5. Sistemas de navegación © TONI MARTIN-AVILA 2009
  11. 11. 6.Diseño visual © TONI MARTIN-AVILA 2009
  12. 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. 13. Antes .... © TONI MARTIN-AVILA 2009
  14. 14. después .... © TONI MARTIN-AVILA 2009
  15. 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. 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. 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. 18. © TONI MARTIN-AVILA 2009
  19. 19. © TONI MARTIN-AVILA 2009
  20. 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. 21. ARQUITECTURA Objetivos del sitio Audiencia Contenidos Estructura Sistema navegación Diseño web visual © TONI MARTIN-AVILA 2009
  22. 22. http://www.templatesbox.com/data/premium.templates/images/full_flash_site/flash.preview/1236612890blq/index.html © TONI MARTIN-AVILA 2009
  23. 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. 24. © TONI MARTIN-AVILA 2009
  25. 25. © TONI MARTIN-AVILA 2009
  26. 26. © TONI MARTIN-AVILA 2009
  27. 27. © TONI MARTIN-AVILA 2009

×