Your SlideShare is downloading. ×
  • Like
  • Save
Frontend Web Parte 2 Arquitectura De Informacion
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Frontend Web Parte 2 Arquitectura De Informacion

  • 1,070 views
Published

 

Published in Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,070
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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