SlideShare una empresa de Scribd logo
1 de 15
ANATOMÍA DE UN
SITIO WEB
Diana Garcia
Katherinne Egas
Su encabezado inicia con un menú desplegable que
presenta las mismas opciones del menú ubicado al
lado del logo.
Tiene un logo pequeño ubicado al lado izquierdo.
Usa el slider para hacer publicidad de un evento
ligado a su sector de la economía. Tiene movimiento.
En el cuerpo de la página se juega con el tamaño de
las imágenes para resaltar la portada del sitio.
Versión móvil
En el remate están:
❖ Los enlaces directos para las redes sociales de la revista.
❖ Los enlaces de contacto.
❖ Breve descripción de lo que es la revista.
El porcentaje de texto es de menos del 10% tanto
para computador como para el móvil.
Se utiliza la negrilla y un tamaño superior de letra
para resaltar los títulos de las noticias.
No se utilizan videos en la página de inicio, pero sí
en algunas noticias.
Se utilizan varios gifs y screenshot de twitter en
sus noticias.
Versión móvil
Texto
User experience
El menú desplegable se visualiza mejor
en el móvil que en el computador. Hay
menos desperdicio de espacio.
Su versión móvil es más secuencial y se
puede percibir como más organizada
que la versión de computador.
Tiene un aspecto llamativo y gracias a
su fondo blanco, el usuario se puede
concentrar más en las fotos y los títulos
de las noticias.
Computador
Móvil
Tiene un logo pequeño, ubicado en la parte superior
izquierda.
Su menú está compuesto por 6 opciones.
Su slider es un video corto de las cualidades que
tiene el carro, acompañado de cinco diapositivas
más con fotos tomadas desde diferentes ángulos.
Versión móvil
En el remate están:
❏ Los enlaces directos de las redes sociales de Mercedes - Benz.
❏ Los enlaces de contacto.
❏ Servicios online.
❏ Asesoramiento para la compra.
También cuenta con un botón para volver a la parte de arriba de la página.
La página web es atractiva para el usuario, busca
engancharlo con imágenes llamativas y lujosas.
En la versión móvil tiene un menú desplegable al
lado derecho y fotos de diferentes autos.
Texto
Su porcentaje de texto tanto en la versión móvil
como en computador es inferior al 5%. En la
versión para computador se muestra un video
muy corto haciendo publicidad a uno de los
carros, sin embargo, su base son las imágenes.
Versión móvil
User experience
En el encabezado tiene un menú con 6 opciones poco
legibles por su color de fondo.
Tiene un menú desplegable en el lado derecho que se
mantiene fijo al bajar en la página.
Al darle click aparecen enlaces directos de las
diferentes redes sociales de la banda, una opción
para abrir la lista de canciones más populares en
páginas como Tidal, Spotify, entre otros. También
cuenta con los mismos enlaces del menú del
encabezado y acceso a información sobre cada uno
de los álbumes de la banda.
El cuerpo de la página incluye una descripción de la
página. Hay 3 apartados importantes: Explore by
album, Explore by location y Fan memories.
Versión móvil
En el remate están:
❖ Logo de la banda.
❖ Los enlaces directos para las redes sociales de la banda.
❖ Los enlaces de para acceder a las plataformas más populares de música
como Spotify, Shazam y Tidal.
❖ Menú con los mismos enlaces del menú desplegable.
❖ Las políticas de privacidad y de cookies y los términos y condiciones de la
página.
Texto
En el inicio de la página el porcentaje de texto es de un
60%, debido a la descripción y bienvenida que está da.
Sin embargo, posteriormente el porcentaje de texto es
bajo tanto para computador como para móvil, pues
hace uso de muchas imagenes.
User experience
La experiencia de usuario es agradable, causa la
sensación de tranquilidad por el orden y limpieza que
maneja.
En la versión móvil el menú de fondo negro e ilegible no
aparece.
Algunos enlaces se demoran un poco en cargar su
contenido. Ej: Explore by location.
¿Por que los web sites nos llamaron la atención?
● Teenvogue
Nos llamó la atención su versión para computador porque presenta demasiadas imágenes y titulares al
mismo tiempo. Incluso, podría decirse que se ve un poco desorganizada. Pero, luego entendimos que esto se
debía a que ha sido pensada principalmente para una versión móvil. Adicionalmente, usan imágenes de las
celebridades de moda, unida a titulares atractivos para captar atención de los más jóvenes.
● Mercedes - Benz
La página es muy llamativa, captura al espectador con sus atractivas y lujosas imágenes. El texto es algo
irrelevante, pues lo usa muy poco. Su principal objetivo es generar fascinación en el consumidor hacia su
producto, apoyándose en su necesidad de status.
● Coldplay timeline
La página sigue una estructura muy organizada. Tiene una mariposa con movimiento que simula volar sobre
el nombre de la banda. Las imágenes que contiene la página son muy coloridas y llamativas.
Tiene un repertorio muy completo de cada presentación o evento importante de la banda y gran parte de
las fotos son aportes de fans.

Más contenido relacionado

Similar a Anatomia de las paginas web

Similar a Anatomia de las paginas web (20)

Ejercicio Webby Awards y tendencias del marketing
Ejercicio Webby Awards y tendencias del marketingEjercicio Webby Awards y tendencias del marketing
Ejercicio Webby Awards y tendencias del marketing
 
Copia de expo
Copia de expoCopia de expo
Copia de expo
 
Taller emi
Taller emiTaller emi
Taller emi
 
Análisis de una página web
Análisis de una página webAnálisis de una página web
Análisis de una página web
 
Analisis Sitios Web JGB
Analisis Sitios Web JGBAnalisis Sitios Web JGB
Analisis Sitios Web JGB
 
Analisis sitioweb
Analisis sitiowebAnalisis sitioweb
Analisis sitioweb
 
Taller 4 emi
Taller 4 emiTaller 4 emi
Taller 4 emi
 
Taller 4 emi 2
Taller 4 emi 2Taller 4 emi 2
Taller 4 emi 2
 
Webby awards ejercicio
Webby awards ejercicioWebby awards ejercicio
Webby awards ejercicio
 
Análisis Semiótico de un Sitio Web
Análisis Semiótico de un Sitio WebAnálisis Semiótico de un Sitio Web
Análisis Semiótico de un Sitio Web
 
Analisis sitio web
Analisis sitio webAnalisis sitio web
Analisis sitio web
 
Toptenerrores2003
Toptenerrores2003Toptenerrores2003
Toptenerrores2003
 
Paginas web
Paginas webPaginas web
Paginas web
 
Recursos digitales 3
Recursos digitales 3Recursos digitales 3
Recursos digitales 3
 
Analisis de una pagina web.
Analisis de una pagina web.Analisis de una pagina web.
Analisis de una pagina web.
 
Análisis de una página web
Análisis de una página webAnálisis de una página web
Análisis de una página web
 
EVIDENCIA NO.6 "ANÁLISIS SEMIÓTICO DE UNA PÁGINA WEB"
EVIDENCIA NO.6 "ANÁLISIS SEMIÓTICO DE UNA PÁGINA WEB"EVIDENCIA NO.6 "ANÁLISIS SEMIÓTICO DE UNA PÁGINA WEB"
EVIDENCIA NO.6 "ANÁLISIS SEMIÓTICO DE UNA PÁGINA WEB"
 
EVIDENCIA NO.6 "ANÁLISIS SEMIÓTICO DE UNA PÁGINA WEB"
EVIDENCIA NO.6 "ANÁLISIS SEMIÓTICO DE UNA PÁGINA WEB"EVIDENCIA NO.6 "ANÁLISIS SEMIÓTICO DE UNA PÁGINA WEB"
EVIDENCIA NO.6 "ANÁLISIS SEMIÓTICO DE UNA PÁGINA WEB"
 
Qué es el diseño web
Qué es el diseño webQué es el diseño web
Qué es el diseño web
 
¿Qué es el diseño web?
¿Qué es el diseño web? ¿Qué es el diseño web?
¿Qué es el diseño web?
 

Último

TECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptx
TECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptxTECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptx
TECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptxKarlaMassielMartinez
 
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxSEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxYadi Campos
 
Dinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dDinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dstEphaniiie
 
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdfCurso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdfFrancisco158360
 
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptxTIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptxlclcarmen
 
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLAACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLAJAVIER SOLIS NOYOLA
 
La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.amayarogel
 
plan de capacitacion docente AIP 2024 clllll.pdf
plan de capacitacion docente  AIP 2024          clllll.pdfplan de capacitacion docente  AIP 2024          clllll.pdf
plan de capacitacion docente AIP 2024 clllll.pdfenelcielosiempre
 
MAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grandeMAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grandeMarjorie Burga
 
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...JAVIER SOLIS NOYOLA
 
Estrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcciónEstrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcciónLourdes Feria
 
Cuaderno de trabajo Matemática 3 tercer grado.pdf
Cuaderno de trabajo Matemática 3 tercer grado.pdfCuaderno de trabajo Matemática 3 tercer grado.pdf
Cuaderno de trabajo Matemática 3 tercer grado.pdfNancyLoaa
 
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VSOCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VSYadi Campos
 
Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...Lourdes Feria
 
Sesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docxSesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docxMaritzaRetamozoVera
 
Éteres. Química Orgánica. Propiedades y reacciones
Éteres. Química Orgánica. Propiedades y reaccionesÉteres. Química Orgánica. Propiedades y reacciones
Éteres. Química Orgánica. Propiedades y reaccionesLauraColom3
 
CALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDADCALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDADauxsoporte
 

Último (20)

TECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptx
TECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptxTECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptx
TECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptx
 
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxSEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
 
Dinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dDinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes d
 
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdfCurso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdf
 
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptxTIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
 
Unidad 3 | Metodología de la Investigación
Unidad 3 | Metodología de la InvestigaciónUnidad 3 | Metodología de la Investigación
Unidad 3 | Metodología de la Investigación
 
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLAACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
 
La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.
 
plan de capacitacion docente AIP 2024 clllll.pdf
plan de capacitacion docente  AIP 2024          clllll.pdfplan de capacitacion docente  AIP 2024          clllll.pdf
plan de capacitacion docente AIP 2024 clllll.pdf
 
Sesión de clase: Fe contra todo pronóstico
Sesión de clase: Fe contra todo pronósticoSesión de clase: Fe contra todo pronóstico
Sesión de clase: Fe contra todo pronóstico
 
MAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grandeMAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grande
 
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...
 
Estrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcciónEstrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcción
 
Medición del Movimiento Online 2024.pptx
Medición del Movimiento Online 2024.pptxMedición del Movimiento Online 2024.pptx
Medición del Movimiento Online 2024.pptx
 
Cuaderno de trabajo Matemática 3 tercer grado.pdf
Cuaderno de trabajo Matemática 3 tercer grado.pdfCuaderno de trabajo Matemática 3 tercer grado.pdf
Cuaderno de trabajo Matemática 3 tercer grado.pdf
 
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VSOCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
 
Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...
 
Sesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docxSesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docx
 
Éteres. Química Orgánica. Propiedades y reacciones
Éteres. Química Orgánica. Propiedades y reaccionesÉteres. Química Orgánica. Propiedades y reacciones
Éteres. Química Orgánica. Propiedades y reacciones
 
CALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDADCALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDAD
 

Anatomia de las paginas web

  • 1. ANATOMÍA DE UN SITIO WEB Diana Garcia Katherinne Egas
  • 2.
  • 3. Su encabezado inicia con un menú desplegable que presenta las mismas opciones del menú ubicado al lado del logo. Tiene un logo pequeño ubicado al lado izquierdo. Usa el slider para hacer publicidad de un evento ligado a su sector de la economía. Tiene movimiento. En el cuerpo de la página se juega con el tamaño de las imágenes para resaltar la portada del sitio. Versión móvil
  • 4. En el remate están: ❖ Los enlaces directos para las redes sociales de la revista. ❖ Los enlaces de contacto. ❖ Breve descripción de lo que es la revista.
  • 5. El porcentaje de texto es de menos del 10% tanto para computador como para el móvil. Se utiliza la negrilla y un tamaño superior de letra para resaltar los títulos de las noticias. No se utilizan videos en la página de inicio, pero sí en algunas noticias. Se utilizan varios gifs y screenshot de twitter en sus noticias. Versión móvil Texto
  • 6. User experience El menú desplegable se visualiza mejor en el móvil que en el computador. Hay menos desperdicio de espacio. Su versión móvil es más secuencial y se puede percibir como más organizada que la versión de computador. Tiene un aspecto llamativo y gracias a su fondo blanco, el usuario se puede concentrar más en las fotos y los títulos de las noticias. Computador Móvil
  • 7.
  • 8. Tiene un logo pequeño, ubicado en la parte superior izquierda. Su menú está compuesto por 6 opciones. Su slider es un video corto de las cualidades que tiene el carro, acompañado de cinco diapositivas más con fotos tomadas desde diferentes ángulos. Versión móvil
  • 9. En el remate están: ❏ Los enlaces directos de las redes sociales de Mercedes - Benz. ❏ Los enlaces de contacto. ❏ Servicios online. ❏ Asesoramiento para la compra. También cuenta con un botón para volver a la parte de arriba de la página.
  • 10. La página web es atractiva para el usuario, busca engancharlo con imágenes llamativas y lujosas. En la versión móvil tiene un menú desplegable al lado derecho y fotos de diferentes autos. Texto Su porcentaje de texto tanto en la versión móvil como en computador es inferior al 5%. En la versión para computador se muestra un video muy corto haciendo publicidad a uno de los carros, sin embargo, su base son las imágenes. Versión móvil User experience
  • 11.
  • 12. En el encabezado tiene un menú con 6 opciones poco legibles por su color de fondo. Tiene un menú desplegable en el lado derecho que se mantiene fijo al bajar en la página. Al darle click aparecen enlaces directos de las diferentes redes sociales de la banda, una opción para abrir la lista de canciones más populares en páginas como Tidal, Spotify, entre otros. También cuenta con los mismos enlaces del menú del encabezado y acceso a información sobre cada uno de los álbumes de la banda. El cuerpo de la página incluye una descripción de la página. Hay 3 apartados importantes: Explore by album, Explore by location y Fan memories. Versión móvil
  • 13. En el remate están: ❖ Logo de la banda. ❖ Los enlaces directos para las redes sociales de la banda. ❖ Los enlaces de para acceder a las plataformas más populares de música como Spotify, Shazam y Tidal. ❖ Menú con los mismos enlaces del menú desplegable. ❖ Las políticas de privacidad y de cookies y los términos y condiciones de la página.
  • 14. Texto En el inicio de la página el porcentaje de texto es de un 60%, debido a la descripción y bienvenida que está da. Sin embargo, posteriormente el porcentaje de texto es bajo tanto para computador como para móvil, pues hace uso de muchas imagenes. User experience La experiencia de usuario es agradable, causa la sensación de tranquilidad por el orden y limpieza que maneja. En la versión móvil el menú de fondo negro e ilegible no aparece. Algunos enlaces se demoran un poco en cargar su contenido. Ej: Explore by location.
  • 15. ¿Por que los web sites nos llamaron la atención? ● Teenvogue Nos llamó la atención su versión para computador porque presenta demasiadas imágenes y titulares al mismo tiempo. Incluso, podría decirse que se ve un poco desorganizada. Pero, luego entendimos que esto se debía a que ha sido pensada principalmente para una versión móvil. Adicionalmente, usan imágenes de las celebridades de moda, unida a titulares atractivos para captar atención de los más jóvenes. ● Mercedes - Benz La página es muy llamativa, captura al espectador con sus atractivas y lujosas imágenes. El texto es algo irrelevante, pues lo usa muy poco. Su principal objetivo es generar fascinación en el consumidor hacia su producto, apoyándose en su necesidad de status. ● Coldplay timeline La página sigue una estructura muy organizada. Tiene una mariposa con movimiento que simula volar sobre el nombre de la banda. Las imágenes que contiene la página son muy coloridas y llamativas. Tiene un repertorio muy completo de cada presentación o evento importante de la banda y gran parte de las fotos son aportes de fans.