SlideShare una empresa de Scribd logo
Aspectos
esenciales
en el

DISEÑO
DE PÁGINAS
WEB

Marta Moreno – digital
communications and social media
@martaymore
INTRO
Una página web es el escaparate de nuestro negocio y una
herramienta para conectar con nuestro público (clientes)
Diseño acorde a nuestra imagen corporativa y
línea de negocio
Funcionalidades que aporten valor
¿necesito un ferrari?
Optimizada para buscadores… si no, es
predicar en el desierto
El contenido es el rey, y cada vez más 
¿qué vas a publicar?
Conectada a redes sociales y presencia
online de la marca
Qué nos espera hoy? En las próximas dos horas
cubriremos los siguientes temas.
INTERFAZ
DEL USUARIO
1 … Navegación y uso
2 … Arquitectura de la
información
3 … Usabilidad
4 … Accesibilidad
5 … Folcsonomías – >
etiquetado

DISEÑO
6 … Blueprint*
ANALÍTICA WEB
Y MÉTRICAS
7 … Qué medir
8 … Googgle Analytics
TÉCNICAS DE
OPTIMIZACIÓN
9 … SEO “basics”

PRÁCTICA
• Crear una web básica
• Insertar widgets:
- Google Maps
- Botones sociales
• Embeber contenidos:
- Vídeos
- Podcasts
• Google Analytics en tu
web
• Alta en Google Index

* Otros aspectos del diseño ya tratados en otro taller
WEB
Qué elementos formales debes tener
en cuenta a la hora de diseñar una
página web.
Os vamos a mostrar cuáles son los aspectos fundamentales a la hora de
diseñar u optimizar vuestra página web. La corta duración de este taller
no permite profundizar en cada uno de estos elementos pero intentaremos
que al finalizar el taller sepáis qué importancia tiene cada uno de ellos.
INTERFAZ DEL
1

Navegación y uso
El diseño de la página web se realiza teniendo en cuenta el tipo de página y la
navegación que mejor se adapta a nuestros contenidos.

TIPOLOGÍA DE WEBSITES
1 … Corporativo (indra.es, endesa.es).
2 … e-commerce (Amazon).
3 … colaborativo (WikiS).
4 … herramientas (buscadores, fotos, mapas, etc.).
5 … campañas online (El almacén de la ilusión –de Coca Cola–)
5 … transacciones (banca online)
6 … noticias (lainformacion.com, el pais.com)
7 … Microsites (p.ej. de libros concretos

“Portal web
vs
website”
INTERFAZ DEL
2

Arquitectura de la información

disciplina encargada del estudio, análisis, organización, disposición y
estructuración de la información en espacios de información, y de la selección y
presentación de los datos en los sistemas interactivos y no interactivos
Objetivo: organizar los patrones inherentes en los datos, haciendo clara la
complejidad..

ASPECTOS BÁSICOS
1 … Establecer la misión y la visión del sitio
2 … Determinar el contenido informativo y las
funcionalidades técnicas
3 … Definir la forma y los medios mediante los cuales
los usuarios encontrarán y accederán a la información
contenida en el website
4 … Establecer los medios y vías para permitir el
crecimiento y desarrollo futuro
INTERFAZ DEL
3

Usabilidad

el atributo de calidad que mide lo fáciles que son de usar las interfaces Web”
Jakob Nielsen
Objetivo: que los usuarios puedan interactuar de la forma más fácil, cómoda e
intuitiva, de forma que no exista, o exista el menor esfuerzo de aprendizaje posible

QUÉ ANALIZAR
1 … Respeto a los estándares web
2 … Ergonomía cognitiva y usos comunes
en internet
3 … Aspectos físicos de la legibilidad y
percepción en una pantalla
4 … Interfaz de usuario
5 … Rotulación y ayudas a la navegación

¿Quieres saber más?
10 reglas de usabilidad de
Jakob Nielsen
una docena de… consejos
sobre usabilidad
INTERFAZ DEL
4

Accesibilidad

acceso a la información independientemente del tipo de hardware, software,
infraestructura de red, idioma, cultura, localización geográfica y capacidades de
los usuarios.
Objetivo: que cualquier usuario pueda acceder a la información.

ES BUENO SABER
1 … Mucho que ver con la programación
2… Tres niveles de accesibilidad
3…. Herramientas gratuitas de verificación
http://www.tawdis.net/taw3/cms/es
http://validator.w3.org
INTERFAZ DEL
5

Folcsonomías

la clasificación colaborativa por medio de etiquetas simples en un espacio de
nombres llano, sin jerarquías ni relaciones de parentesco predeterminadas
Objetivos: que los usuarios tengan la posibilidad de utilizar etiquetas y acceder al
contenido a través de las etiquetas utilizadas.

ASPECTOS BÁSICOS
1 … El etiquetado de contenidos
favorece su indexación por buscadores
2 …Facilita al usuario encontrar lo que
busca
3 … Todo el contenido debe estar
etiquetado
4… Las nubes de etiquetas ayudan al
usuario

Categoría
Temática que engloba el
contenido

Etiqueta
Conceptos, temas o cuestiones
sobre los que trata el contenido
DISEÑO WEB
6

Blueprint

también conocido
como wireframe o
diagrama de
contenido.
Es una
representación
esquemática de
una página web
con elementos
gráficos que
muestran el
contenido y
comportamiento
de las páginas
ANALÍTICA WEB
7

Analítica web

Nos permite conocer el comportamiento de los usuarios en nuestra
web y aplicar mejoras

MÉTRICAS
1 … Visitas: visitantes únicos y nuevos, páginas visitadas, …
2 … Variable Tiempo
3 … Fuentes de Tráfico: directo, buscadores, enlaces, de pago
4 … Tasa de Rebote
5 … Tasa de Conversión
ANALÍTICA WEB
8

Google Analytics

es un servicio gratuito de estadísticas de sitios web

https://www.google.com/analytics
POSICIONAMIENTO
9

Posicionamiento SEO

Search engine optimization o dicho en otras palabras optimización
para buscadores. También se llama posicionamiento natural.

posicionamiento optimizado en buscadores

… Accesibilidad y
compatibilidad para
buscadores, indexabilidad:
facilitar la labor de rastreo a las
arañas de los buscadores

Optimización de factores:
Interactuar con factores bien
ponderados por algoritmos de
posicionamiento

Relevancia y popularidad:
contenidos de alta calidad y
captación de enlaces entrantes
POSICIONAMIENTO
Arquitectura, diseño, usabilidad son importantes para el SEO
A PASARLO BIEN.
Con las manos en la masa… la mejor manera de aprender
HEMOS APRENDIDO
El usuario es el que manda.
El contenido es el rey.

La usabilidad es un aspecto clave.
Medir sí o sí.
Aspectos básicos del posicionamiento.
…y
LISTOS!

Esta presentación no
pretende ser un estudio
exhastivo sobre los distintos
aspectos del diseño de
páginas web!
El objetivo es que aporte una
pincelada que os ayude a
entender la importancia de
cada fase en el uso futuro de
la web.
¿Os ha resultado útil?
BY MARTA.

@martaymore

Más contenido relacionado

PPT
Arquitectura de un sitio web
PDF
Modelo Margaritas
PPT
Arquitectura De La Informacion
PPT
El modelo margarita
PDF
Bases pag web 4
PPTX
El modelo margarita.ppt
PPT
Organización de un sitio web
PDF
Inventario de contenido Diplomado Arquitectura de Información y UX
Arquitectura de un sitio web
Modelo Margaritas
Arquitectura De La Informacion
El modelo margarita
Bases pag web 4
El modelo margarita.ppt
Organización de un sitio web
Inventario de contenido Diplomado Arquitectura de Información y UX

La actualidad más candente (10)

ODP
Fundamentos de arquitectura de la información
PPT
Arquitectura del negocio en Internet y usabilidad web
PDF
Cardsorting Diplomado Arquitectura de Información y UX
PPTX
Modelo margarita
PDF
Usabilidad
PPT
Tipos de Sitios: Arquitectura
PDF
Metodología de diseño en la web
PPT
Presentación sobre Diseño Web
PDF
Preparativos web
DOCX
IA GUIDE
Fundamentos de arquitectura de la información
Arquitectura del negocio en Internet y usabilidad web
Cardsorting Diplomado Arquitectura de Información y UX
Modelo margarita
Usabilidad
Tipos de Sitios: Arquitectura
Metodología de diseño en la web
Presentación sobre Diseño Web
Preparativos web
IA GUIDE
Publicidad

Similar a Web 2.0 diseño de páginas web (20)

DOCX
PDF
Arquitectura taller 2
PPTX
Exposicion equip 3
PPTX
Presentación evolución de la web sebastian vargas
PPTX
Usabilidad
PPTX
Presentación evolución de la web 10-05
DOCX
Rd #3 nh
PDF
Diseño de web
PPTX
Diseño Web - Proceso de desarrollo y diseño
PPT
Clase2
PPTX
Presentación1
PDF
Diseño web
PDF
Diseño web
PPS
Evaluar un sitio web
PDF
Clase no 3
PPTX
Recursos web 2.0
PPTX
Usabilidad web
PPTX
Usabilidad web
PPTX
Recursos web 2.0 - 1005 Jm
PPTX
Arquitectura de la información y Usabilidad
Arquitectura taller 2
Exposicion equip 3
Presentación evolución de la web sebastian vargas
Usabilidad
Presentación evolución de la web 10-05
Rd #3 nh
Diseño de web
Diseño Web - Proceso de desarrollo y diseño
Clase2
Presentación1
Diseño web
Diseño web
Evaluar un sitio web
Clase no 3
Recursos web 2.0
Usabilidad web
Usabilidad web
Recursos web 2.0 - 1005 Jm
Arquitectura de la información y Usabilidad
Publicidad

Web 2.0 diseño de páginas web

  • 1. Aspectos esenciales en el DISEÑO DE PÁGINAS WEB Marta Moreno – digital communications and social media @martaymore
  • 2. INTRO Una página web es el escaparate de nuestro negocio y una herramienta para conectar con nuestro público (clientes) Diseño acorde a nuestra imagen corporativa y línea de negocio Funcionalidades que aporten valor ¿necesito un ferrari? Optimizada para buscadores… si no, es predicar en el desierto El contenido es el rey, y cada vez más  ¿qué vas a publicar? Conectada a redes sociales y presencia online de la marca
  • 3. Qué nos espera hoy? En las próximas dos horas cubriremos los siguientes temas. INTERFAZ DEL USUARIO 1 … Navegación y uso 2 … Arquitectura de la información 3 … Usabilidad 4 … Accesibilidad 5 … Folcsonomías – > etiquetado DISEÑO 6 … Blueprint* ANALÍTICA WEB Y MÉTRICAS 7 … Qué medir 8 … Googgle Analytics TÉCNICAS DE OPTIMIZACIÓN 9 … SEO “basics” PRÁCTICA • Crear una web básica • Insertar widgets: - Google Maps - Botones sociales • Embeber contenidos: - Vídeos - Podcasts • Google Analytics en tu web • Alta en Google Index * Otros aspectos del diseño ya tratados en otro taller
  • 4. WEB Qué elementos formales debes tener en cuenta a la hora de diseñar una página web. Os vamos a mostrar cuáles son los aspectos fundamentales a la hora de diseñar u optimizar vuestra página web. La corta duración de este taller no permite profundizar en cada uno de estos elementos pero intentaremos que al finalizar el taller sepáis qué importancia tiene cada uno de ellos.
  • 5. INTERFAZ DEL 1 Navegación y uso El diseño de la página web se realiza teniendo en cuenta el tipo de página y la navegación que mejor se adapta a nuestros contenidos. TIPOLOGÍA DE WEBSITES 1 … Corporativo (indra.es, endesa.es). 2 … e-commerce (Amazon). 3 … colaborativo (WikiS). 4 … herramientas (buscadores, fotos, mapas, etc.). 5 … campañas online (El almacén de la ilusión –de Coca Cola–) 5 … transacciones (banca online) 6 … noticias (lainformacion.com, el pais.com) 7 … Microsites (p.ej. de libros concretos “Portal web vs website”
  • 6. INTERFAZ DEL 2 Arquitectura de la información disciplina encargada del estudio, análisis, organización, disposición y estructuración de la información en espacios de información, y de la selección y presentación de los datos en los sistemas interactivos y no interactivos Objetivo: organizar los patrones inherentes en los datos, haciendo clara la complejidad.. ASPECTOS BÁSICOS 1 … Establecer la misión y la visión del sitio 2 … Determinar el contenido informativo y las funcionalidades técnicas 3 … Definir la forma y los medios mediante los cuales los usuarios encontrarán y accederán a la información contenida en el website 4 … Establecer los medios y vías para permitir el crecimiento y desarrollo futuro
  • 7. INTERFAZ DEL 3 Usabilidad el atributo de calidad que mide lo fáciles que son de usar las interfaces Web” Jakob Nielsen Objetivo: que los usuarios puedan interactuar de la forma más fácil, cómoda e intuitiva, de forma que no exista, o exista el menor esfuerzo de aprendizaje posible QUÉ ANALIZAR 1 … Respeto a los estándares web 2 … Ergonomía cognitiva y usos comunes en internet 3 … Aspectos físicos de la legibilidad y percepción en una pantalla 4 … Interfaz de usuario 5 … Rotulación y ayudas a la navegación ¿Quieres saber más? 10 reglas de usabilidad de Jakob Nielsen una docena de… consejos sobre usabilidad
  • 8. INTERFAZ DEL 4 Accesibilidad acceso a la información independientemente del tipo de hardware, software, infraestructura de red, idioma, cultura, localización geográfica y capacidades de los usuarios. Objetivo: que cualquier usuario pueda acceder a la información. ES BUENO SABER 1 … Mucho que ver con la programación 2… Tres niveles de accesibilidad 3…. Herramientas gratuitas de verificación http://www.tawdis.net/taw3/cms/es http://validator.w3.org
  • 9. INTERFAZ DEL 5 Folcsonomías la clasificación colaborativa por medio de etiquetas simples en un espacio de nombres llano, sin jerarquías ni relaciones de parentesco predeterminadas Objetivos: que los usuarios tengan la posibilidad de utilizar etiquetas y acceder al contenido a través de las etiquetas utilizadas. ASPECTOS BÁSICOS 1 … El etiquetado de contenidos favorece su indexación por buscadores 2 …Facilita al usuario encontrar lo que busca 3 … Todo el contenido debe estar etiquetado 4… Las nubes de etiquetas ayudan al usuario Categoría Temática que engloba el contenido Etiqueta Conceptos, temas o cuestiones sobre los que trata el contenido
  • 10. DISEÑO WEB 6 Blueprint también conocido como wireframe o diagrama de contenido. Es una representación esquemática de una página web con elementos gráficos que muestran el contenido y comportamiento de las páginas
  • 11. ANALÍTICA WEB 7 Analítica web Nos permite conocer el comportamiento de los usuarios en nuestra web y aplicar mejoras MÉTRICAS 1 … Visitas: visitantes únicos y nuevos, páginas visitadas, … 2 … Variable Tiempo 3 … Fuentes de Tráfico: directo, buscadores, enlaces, de pago 4 … Tasa de Rebote 5 … Tasa de Conversión
  • 12. ANALÍTICA WEB 8 Google Analytics es un servicio gratuito de estadísticas de sitios web https://www.google.com/analytics
  • 13. POSICIONAMIENTO 9 Posicionamiento SEO Search engine optimization o dicho en otras palabras optimización para buscadores. También se llama posicionamiento natural. posicionamiento optimizado en buscadores … Accesibilidad y compatibilidad para buscadores, indexabilidad: facilitar la labor de rastreo a las arañas de los buscadores Optimización de factores: Interactuar con factores bien ponderados por algoritmos de posicionamiento Relevancia y popularidad: contenidos de alta calidad y captación de enlaces entrantes
  • 15. A PASARLO BIEN. Con las manos en la masa… la mejor manera de aprender
  • 16. HEMOS APRENDIDO El usuario es el que manda. El contenido es el rey. La usabilidad es un aspecto clave. Medir sí o sí. Aspectos básicos del posicionamiento.
  • 17. …y LISTOS! Esta presentación no pretende ser un estudio exhastivo sobre los distintos aspectos del diseño de páginas web! El objetivo es que aporte una pincelada que os ayude a entender la importancia de cada fase en el uso futuro de la web. ¿Os ha resultado útil?