Benchmarck Diseño desde el codigo

De Casiopea


TítuloBenchmarck Análisis de sitios
AsignaturaDiseño desde el Código
CarrerasDiseño, Diseño Gráfico
Alumno(s)Omar Nuñez, Gabriel Olivares Torrijo, Catalina Armijo
URLhttps://docs.google.com/presentation/d/16p3l8orkaqUJt6xrcxhTTrm7Ff 72dfc3cpN2gGJjAU/edit?usp=sharing

SITIO SERVICIOS AMEREIDA

Se creará un sitio que contenga todo tipo de oferta para que los alumnos de la comunidad e[ad] podrían ofrecer en la instancia de ciudad abierta que se produce los miércoles con Amereida. Dentro de las posibilidades se encuentra la comida que seria lo mas común, la posibilidad de ofrecer transporte a ritoque y un espacio para propagar eventos que podrían ocurrir ahí

KISS

https://kyivsculpture.com/en/

Es un sitio de información sobre una exposición de escultura, se eligió este sitio por como presenta sus elementos en un estilo visual interesante, su uso de colores que se van intercambiando dependiendo del contenido y sus transiciones entre momentos.

Header

Kyivsculpture04.jpg

El header cubre por completo la pantalla en un primer momento, da un buen espacio a una introducción completa que también comparte espacio con una fecha de evento remarcado porque debe ser el mas cercano.

Listado eventos

Kyivsculpture01.gif

El listado de eventos esta presentado como un conjunto en un principio donde se muestra con más énfasis la fecha y los títulos, pero al pasar el cursor por encima se despliegan fotos del evento en cuestión, cada una de las filas con los eventos señalan con un signo “mas” que se pueden expandir, esto se hace con un clickeo en la fila correspondiente lo que provoca que se expanda desplegando mas detalles de la información, este sistema hace que la pagina sea mucho mas interactiva con el usuario ya que responde a los movimientos y navegación de este también crea un orden visual que mantiene la información concisa y ordenada a primera vista.

Menu principal

Kyivsculpture02.gif

Este sitio web en vez de tener una barra de navegación en su header emplea un botón que lleva a un menú que cubre la pantalla completa creando un espacio distinto que mantiene los tonos de la página principal pero invertidos, mantiene los estilos principales de la pagina pero aplicados en un nuevo contexto, aquí también se mantiene el despliegue automático de imágenes al pasar por cada una de las opciones.

Footer

Kyivsculpture03.gif

Como con el menú, el footer mantiene este estilo invertido que denota un momento distinto que es más técnico ya que muestra información de los organizadores y contacto.

keurig

https://www.keurig.ca Sitio de venta de distintos tipos de cafe, lo que llama la atención es la forma en la que ordena sus productos.

Header

Keurigca1.jpg

Simple y espacioso, cubre casi toda la pantalla dando suficiente espacio para los menus desplegables.

Menu desplegable

Keurigca2.jpg

Utiliza el espacio asignado por el header por lo que no se traslapa con el contenido debajo.

Menú filtro

Keurigca3.jpg

El menú de filtro contiene varias opciones, se puede seleccionar varias a la vez para hacer la búsqueda mas rápida.

Traslape

Keurigca4.jpg

Para promociones se emplea un traslape sutil entre el header y las ofertas.

Uber Eats Blog

https://www.ubereats.com/blog/

UberEats es una pagina/aplicación que ofrece un servicio de entrega de comida, sin embargo su blog consta de una gran variedad de imagen que te otorgan distintas historia. No esta enfocada en la venta, si no mas bien es una página de información sobre algunos tipos de comida que hay en las regiones de chile y además ofrece información de “utilidad” con respecto a estas.

Pagina1.png

La grilla está dividida en filas y 3 columnas. En cada espacio resultante es colocada una imagen que al hacerle click te lleva a una historia. (algunas imágenes se ubican en 2 espacios y en la última fila solo hay 2 imágenes centradas)

800

Menu

Ofrece 2 menús desplegables, uno para cambiar el país/ciudad en que se reside, otorgando información especifica para cada lugar y otro menú que divide las historias en distintas categorias desde noticias y promociones hasta datos interesantes e ideas para cocinar.

800

Footer

En el footer podemos encontrar los mismos links que en el menú de categorías y ademas otros links que permiten mantener en contacto a la pagina mediante redes sociales, links de ayuda al cliente en distintos ámbitos y también para realizar pedidos a través de la pagina principal.

800

PlayStation Store

https://store.playstation.com/es-cl/home/games

Playstore1.gif

Presentación total de la pagina La barra superior se esconde al hacer scroll pero sin molestar la visión del usuario Tiene un banner que con la actualización de ofertas y nuevos productos El menú lateral no resalta y no llama la atención como debería ya que es donde se encuentran los productos

AL ingresar a la cuenta realiza una búsqueda mas personalizada y te entrega mejores ofertas y productos según el interés personal

Playstore2.jpg

Visualización de interés general del publico.

Playstore3.jpg

Basado en las compras y descargas realizadas te entrega futuros productos que podrían gustarte.

Playstore4.jpg

Se entrega una comparación de juegos.


Basicamente entrega una