SlideShare una empresa de Scribd logo
1 de 8
Descargar para leer sin conexión
Maquetas (wireframes) para
reestructurar el sitio web.
Componentes de las maquetas
Los wireframes son aproximaciones al resultado final de una página web o aplicación móvil. Pueden ser desde baja
fidelidad (contenedores de contenido, eliminando los estilos visuales) hasta alta fidelidad (contenido real, imágenes y
colores definidos).
Para esta etapa es conveniente crear maquetas de baja fidelidad, porque el estilo de la marca es sólida y la idea es
informar en arquitectura de la información cómo está organizado el contenido, sin limitar el aspecto gráfico.
Etiqueta: este cintillo no es parte de la página, sino el
identificador de la maqueta. En el extremo izquierdo se
localiza el title tag de la página mientras que en el
derecho su nombre para uso interno y su URL.
Header: es el bastión de la navegación del sitio web. Ahí
se localizan las páginas de interés. Los hipervínculos en
azul y negritas indican que esa es la página activa.
H1: es el primer título dentro de la página. Este título es
clave tanto para los usuarios como para Google porque
indica rápidamente cómo podemos ayudar al usuario.
Subtítulos: crean secciones en la página.
Textos: contenido de valor para los usuarios. Todo
aquello que sea información clave debe estar en formato
texto, y no en imágenes, para que Google pueda rastrear
e indexar esa información.
Botón: también llamados Call to Actions, son esenciales
para conectar las páginas entre sí y llevar al usuario a
información de interés.
Fold: está línea no es parte de la página. Ella delimita
hasta dónde la maqueta es visible para los usuarios
apenas entran en una página.
Imágenes y/o logos: contenedor de alguna imagen o
diseño. Las proporciones no son exactas.
Formulario: campos para ingresar información.
Footer: pie de página donde se encuentran links de
interés, RRSS, contacto, entre otras cosas.
Link 1 Link 2 Link 3
Este es un H1, el primer
título de la página.
Este es un subtítulo.
Imagen
Botón
Botón
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
10
10
Coach de codependencia emocional Home | cliente.com
¿Cómo superar la
codependencia?
(Subscríbete)
(Blog)
Video
Imagen¿Quién es Lily Pais?
Ver más
Subscríbete
Nombre y apellido*Nombre y apellido* Correo*
Artículo Artículo Artículo
Cliente Quién soy BlogServicios Contáctame En los medios Videos
Mi cuentaRegistrarse 0
Libérate de la codependencia. Ayuda profesional. Contacto | cliente.com/contactame
Contáctame y hagamos una
evaluación gratuita
Asunto
¿Cómo te puedo ayudar?
Correo*
Enviar
Cliente Quién soy BlogServicios Contáctame En los medios Videos
Mi cuentaRegistrarse 0
Nombre*Nombre*
Pregunta
Pregunta
Pregunta
Pregunta
Pregunta
Pregunta
Pregunta
Pregunta
Pregunta
Correo*
Enviar
(Sesión gratis)
Nombre*Nombre*
Testimonio de codependencia En los medios | cliente.com/en-los-medios
Superar la codependencia es posible
(Galería)
Video
Imagen
Video
Artículo Artículo Artículo
Cliente Quién soy BlogServicios Contáctame En los medios Videos
Mi cuentaRegistrarse 0
¿Qué es la codependencia y cómo superarla? Blog | cliente.com/blog
¡Hay cura para la codependencia!
Es posible superarla y ser feliz
(Posts más populares)
(Artículos)
Post Post Post
Cliente Quién soy BlogServicios Contáctame En los medios Videos
Mi cuentaRegistrarse 0
Artículo
Artículo
Artículo
Counselor en codependencia Quién soy | cliente.com/quien-soy
(Misión y propósito)
(Trayectoria)
(Medios: últimos tres artículos)
Imagen
Imagen
Artículo Artículo Artículo
Cliente Quién soy BlogServicios Contáctame En los medios Videos
Mi cuentaRegistrarse 0
Coach y motivadora
Contacto Mi cuenta
Testimonios
Elimina la codependencia con mi ayuda Mi cuenta | cliente.com/mi-cuenta
Más herramientas
eficientes para vencer
la codependencia
Cliente Quién soy BlogServicios Contáctame En los medios Videos
Mi cuentaRegistrarse 0
(Acceder)
Correo*
Contraseña*
Acceder
¿Aún no tienes una cuenta? Regístrate.
Supera la codependencia | Lily Pais Servicios | cliente.com/servicios
¿Cómo vencer la codependencia?
Algunas herramientas útiles
Cliente Quién soy BlogServicios Contáctame En los medios Videos
Mi cuentaRegistrarse 0
(Producto)
Producto
Añadir al carrito
(Producto)
Producto
Añadir al carrito
(Producto)
Producto
Añadir al carrito
(Producto)
Producto
Añadir al carrito
(Producto)
Producto
Añadir al carrito
(Producto)
Producto
Añadir al carrito
(Comentarios)
Nombre*Nombre* Correo*
Publicar
Escribe tu comentario
Contacto

Más contenido relacionado

Similar a SEO On Page ejemplo de maquetas (Arquitectura de la información)

Introducción creación web aula madrid tecnología 2010
Introducción creación web aula madrid  tecnología 2010Introducción creación web aula madrid  tecnología 2010
Introducción creación web aula madrid tecnología 2010Pedro Jesús González
 
Rentabilizar una web
Rentabilizar una web Rentabilizar una web
Rentabilizar una web Domestika
 
Marketing Digital
Marketing DigitalMarketing Digital
Marketing DigitalDomestika
 
10 Claves Para Rentabilizar Una Web Marketing Por Internet Abascal 26 03 09
10 Claves Para Rentabilizar Una Web Marketing Por Internet Abascal 26 03 0910 Claves Para Rentabilizar Una Web Marketing Por Internet Abascal 26 03 09
10 Claves Para Rentabilizar Una Web Marketing Por Internet Abascal 26 03 09Domestika
 
Marketing Online Pymes - IMADE
Marketing Online Pymes - IMADEMarketing Online Pymes - IMADE
Marketing Online Pymes - IMADEDomestika
 
Marketing digital aula madrid tecnología 2010
Marketing digital aula madrid tecnología 2010Marketing digital aula madrid tecnología 2010
Marketing digital aula madrid tecnología 2010Pedro Jesús González
 
Puerta bonita
Puerta bonitaPuerta bonita
Puerta bonitaDomestika
 
La Vaguada Coit 18 Feb
La Vaguada Coit 18 FebLa Vaguada Coit 18 Feb
La Vaguada Coit 18 FebDomestika
 
Introducción creación web aula madrid tecnología (coit) 2010
Introducción creación web aula madrid  tecnología (coit) 2010Introducción creación web aula madrid  tecnología (coit) 2010
Introducción creación web aula madrid tecnología (coit) 2010Pedro Jesús González
 
Usabilidad web
Usabilidad webUsabilidad web
Usabilidad webDomestika
 
Webinar emBlue Agosto 2012 - ¿Cómo crear una correcta pieza de email marketing?
Webinar emBlue Agosto 2012 - ¿Cómo crear una correcta pieza de email marketing?Webinar emBlue Agosto 2012 - ¿Cómo crear una correcta pieza de email marketing?
Webinar emBlue Agosto 2012 - ¿Cómo crear una correcta pieza de email marketing?emBlue Email Marketing @embluemail
 
Ponencia Imade Domestika Venta En Internet 26marzo09
Ponencia Imade Domestika Venta En Internet 26marzo09Ponencia Imade Domestika Venta En Internet 26marzo09
Ponencia Imade Domestika Venta En Internet 26marzo09Domestika
 
SEO para Sitios de e-Commerce
SEO para Sitios de e-CommerceSEO para Sitios de e-Commerce
SEO para Sitios de e-CommerceHoempler
 
Marketing digital para la PYME
Marketing digital para la PYMEMarketing digital para la PYME
Marketing digital para la PYMEMedardo Aparcana
 
Taller de Blog. Jóvenes Scouts
Taller de Blog. Jóvenes ScoutsTaller de Blog. Jóvenes Scouts
Taller de Blog. Jóvenes ScoutsVictor Camacho
 
Cómo crear una tienda online en wordpress
Cómo crear una tienda online en wordpressCómo crear una tienda online en wordpress
Cómo crear una tienda online en wordpressBeatriz González Pozo
 

Similar a SEO On Page ejemplo de maquetas (Arquitectura de la información) (20)

Introducción creación web aula madrid tecnología 2010
Introducción creación web aula madrid  tecnología 2010Introducción creación web aula madrid  tecnología 2010
Introducción creación web aula madrid tecnología 2010
 
Rentabilizar una web
Rentabilizar una web Rentabilizar una web
Rentabilizar una web
 
Rentabilizar una web imade 2009
Rentabilizar una web imade 2009Rentabilizar una web imade 2009
Rentabilizar una web imade 2009
 
Marketing Digital
Marketing DigitalMarketing Digital
Marketing Digital
 
10 Claves Para Rentabilizar Una Web Marketing Por Internet Abascal 26 03 09
10 Claves Para Rentabilizar Una Web Marketing Por Internet Abascal 26 03 0910 Claves Para Rentabilizar Una Web Marketing Por Internet Abascal 26 03 09
10 Claves Para Rentabilizar Una Web Marketing Por Internet Abascal 26 03 09
 
Marketing Online Pymes - IMADE
Marketing Online Pymes - IMADEMarketing Online Pymes - IMADE
Marketing Online Pymes - IMADE
 
Marketing online 2009 ssrr imade
Marketing online 2009 ssrr imadeMarketing online 2009 ssrr imade
Marketing online 2009 ssrr imade
 
Marketing digital aula madrid tecnología 2010
Marketing digital aula madrid tecnología 2010Marketing digital aula madrid tecnología 2010
Marketing digital aula madrid tecnología 2010
 
Puerta bonita
Puerta bonitaPuerta bonita
Puerta bonita
 
La Vaguada Coit 18 Feb
La Vaguada Coit 18 FebLa Vaguada Coit 18 Feb
La Vaguada Coit 18 Feb
 
Introducción creación web aula madrid tecnología (coit) 2010
Introducción creación web aula madrid  tecnología (coit) 2010Introducción creación web aula madrid  tecnología (coit) 2010
Introducción creación web aula madrid tecnología (coit) 2010
 
Usabilidad web
Usabilidad webUsabilidad web
Usabilidad web
 
Webinar emBlue Agosto 2012 - ¿Cómo crear una correcta pieza de email marketing?
Webinar emBlue Agosto 2012 - ¿Cómo crear una correcta pieza de email marketing?Webinar emBlue Agosto 2012 - ¿Cómo crear una correcta pieza de email marketing?
Webinar emBlue Agosto 2012 - ¿Cómo crear una correcta pieza de email marketing?
 
Ponencia Imade Domestika Venta En Internet 26marzo09
Ponencia Imade Domestika Venta En Internet 26marzo09Ponencia Imade Domestika Venta En Internet 26marzo09
Ponencia Imade Domestika Venta En Internet 26marzo09
 
SEO para Sitios de e-Commerce
SEO para Sitios de e-CommerceSEO para Sitios de e-Commerce
SEO para Sitios de e-Commerce
 
Marketing digital para la PYME
Marketing digital para la PYMEMarketing digital para la PYME
Marketing digital para la PYME
 
QUE ES UNA PAGINA WEB
QUE ES UNA PAGINA WEBQUE ES UNA PAGINA WEB
QUE ES UNA PAGINA WEB
 
Taller de Blog. Jóvenes Scouts
Taller de Blog. Jóvenes ScoutsTaller de Blog. Jóvenes Scouts
Taller de Blog. Jóvenes Scouts
 
Optimizacion De Landing Pages
Optimizacion De Landing PagesOptimizacion De Landing Pages
Optimizacion De Landing Pages
 
Cómo crear una tienda online en wordpress
Cómo crear una tienda online en wordpressCómo crear una tienda online en wordpress
Cómo crear una tienda online en wordpress
 

Más de Pencil Speech

Páginas Web vs Redes Sociales
Páginas Web vs Redes SocialesPáginas Web vs Redes Sociales
Páginas Web vs Redes SocialesPencil Speech
 
Presupuesto SEO ejemplo - Agencia SEO pencil speech
Presupuesto SEO ejemplo - Agencia SEO pencil speech Presupuesto SEO ejemplo - Agencia SEO pencil speech
Presupuesto SEO ejemplo - Agencia SEO pencil speech Pencil Speech
 
Ejemplo resultados SEO Técnico
Ejemplo resultados SEO Técnico Ejemplo resultados SEO Técnico
Ejemplo resultados SEO Técnico Pencil Speech
 
Ejemplo de Análisis SEO
Ejemplo de Análisis SEOEjemplo de Análisis SEO
Ejemplo de Análisis SEOPencil Speech
 
Ejemplo presupuesto de un proyecto seo
Ejemplo presupuesto de un proyecto seoEjemplo presupuesto de un proyecto seo
Ejemplo presupuesto de un proyecto seoPencil Speech
 
Ejemplo: Presupuesto de un proyecto SEO
Ejemplo: Presupuesto de un proyecto SEOEjemplo: Presupuesto de un proyecto SEO
Ejemplo: Presupuesto de un proyecto SEOPencil Speech
 

Más de Pencil Speech (6)

Páginas Web vs Redes Sociales
Páginas Web vs Redes SocialesPáginas Web vs Redes Sociales
Páginas Web vs Redes Sociales
 
Presupuesto SEO ejemplo - Agencia SEO pencil speech
Presupuesto SEO ejemplo - Agencia SEO pencil speech Presupuesto SEO ejemplo - Agencia SEO pencil speech
Presupuesto SEO ejemplo - Agencia SEO pencil speech
 
Ejemplo resultados SEO Técnico
Ejemplo resultados SEO Técnico Ejemplo resultados SEO Técnico
Ejemplo resultados SEO Técnico
 
Ejemplo de Análisis SEO
Ejemplo de Análisis SEOEjemplo de Análisis SEO
Ejemplo de Análisis SEO
 
Ejemplo presupuesto de un proyecto seo
Ejemplo presupuesto de un proyecto seoEjemplo presupuesto de un proyecto seo
Ejemplo presupuesto de un proyecto seo
 
Ejemplo: Presupuesto de un proyecto SEO
Ejemplo: Presupuesto de un proyecto SEOEjemplo: Presupuesto de un proyecto SEO
Ejemplo: Presupuesto de un proyecto SEO
 

SEO On Page ejemplo de maquetas (Arquitectura de la información)

  • 1. Maquetas (wireframes) para reestructurar el sitio web. Componentes de las maquetas Los wireframes son aproximaciones al resultado final de una página web o aplicación móvil. Pueden ser desde baja fidelidad (contenedores de contenido, eliminando los estilos visuales) hasta alta fidelidad (contenido real, imágenes y colores definidos). Para esta etapa es conveniente crear maquetas de baja fidelidad, porque el estilo de la marca es sólida y la idea es informar en arquitectura de la información cómo está organizado el contenido, sin limitar el aspecto gráfico. Etiqueta: este cintillo no es parte de la página, sino el identificador de la maqueta. En el extremo izquierdo se localiza el title tag de la página mientras que en el derecho su nombre para uso interno y su URL. Header: es el bastión de la navegación del sitio web. Ahí se localizan las páginas de interés. Los hipervínculos en azul y negritas indican que esa es la página activa. H1: es el primer título dentro de la página. Este título es clave tanto para los usuarios como para Google porque indica rápidamente cómo podemos ayudar al usuario. Subtítulos: crean secciones en la página. Textos: contenido de valor para los usuarios. Todo aquello que sea información clave debe estar en formato texto, y no en imágenes, para que Google pueda rastrear e indexar esa información. Botón: también llamados Call to Actions, son esenciales para conectar las páginas entre sí y llevar al usuario a información de interés. Fold: está línea no es parte de la página. Ella delimita hasta dónde la maqueta es visible para los usuarios apenas entran en una página. Imágenes y/o logos: contenedor de alguna imagen o diseño. Las proporciones no son exactas. Formulario: campos para ingresar información. Footer: pie de página donde se encuentran links de interés, RRSS, contacto, entre otras cosas. Link 1 Link 2 Link 3 Este es un H1, el primer título de la página. Este es un subtítulo. Imagen Botón Botón 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 10 10
  • 2. Coach de codependencia emocional Home | cliente.com ¿Cómo superar la codependencia? (Subscríbete) (Blog) Video Imagen¿Quién es Lily Pais? Ver más Subscríbete Nombre y apellido*Nombre y apellido* Correo* Artículo Artículo Artículo Cliente Quién soy BlogServicios Contáctame En los medios Videos Mi cuentaRegistrarse 0
  • 3. Libérate de la codependencia. Ayuda profesional. Contacto | cliente.com/contactame Contáctame y hagamos una evaluación gratuita Asunto ¿Cómo te puedo ayudar? Correo* Enviar Cliente Quién soy BlogServicios Contáctame En los medios Videos Mi cuentaRegistrarse 0 Nombre*Nombre* Pregunta Pregunta Pregunta Pregunta Pregunta Pregunta Pregunta Pregunta Pregunta Correo* Enviar (Sesión gratis) Nombre*Nombre*
  • 4. Testimonio de codependencia En los medios | cliente.com/en-los-medios Superar la codependencia es posible (Galería) Video Imagen Video Artículo Artículo Artículo Cliente Quién soy BlogServicios Contáctame En los medios Videos Mi cuentaRegistrarse 0
  • 5. ¿Qué es la codependencia y cómo superarla? Blog | cliente.com/blog ¡Hay cura para la codependencia! Es posible superarla y ser feliz (Posts más populares) (Artículos) Post Post Post Cliente Quién soy BlogServicios Contáctame En los medios Videos Mi cuentaRegistrarse 0 Artículo Artículo Artículo
  • 6. Counselor en codependencia Quién soy | cliente.com/quien-soy (Misión y propósito) (Trayectoria) (Medios: últimos tres artículos) Imagen Imagen Artículo Artículo Artículo Cliente Quién soy BlogServicios Contáctame En los medios Videos Mi cuentaRegistrarse 0 Coach y motivadora Contacto Mi cuenta Testimonios
  • 7. Elimina la codependencia con mi ayuda Mi cuenta | cliente.com/mi-cuenta Más herramientas eficientes para vencer la codependencia Cliente Quién soy BlogServicios Contáctame En los medios Videos Mi cuentaRegistrarse 0 (Acceder) Correo* Contraseña* Acceder ¿Aún no tienes una cuenta? Regístrate.
  • 8. Supera la codependencia | Lily Pais Servicios | cliente.com/servicios ¿Cómo vencer la codependencia? Algunas herramientas útiles Cliente Quién soy BlogServicios Contáctame En los medios Videos Mi cuentaRegistrarse 0 (Producto) Producto Añadir al carrito (Producto) Producto Añadir al carrito (Producto) Producto Añadir al carrito (Producto) Producto Añadir al carrito (Producto) Producto Añadir al carrito (Producto) Producto Añadir al carrito (Comentarios) Nombre*Nombre* Correo* Publicar Escribe tu comentario Contacto