Los increíbles diseños web de los reviews de Polygon sobre el Xbox One y el PS4

Polygon es un sitio web dedicado a los videojuegos, un tanto más centrado en las noticias de calidad y análisis de juegos. Este blog es también parte de los creadores de The Verge, por lo que la calidad de la información es innegable. Una de las características que más me llaman la atención de este sitio no es en general las noticias ni nada de su información, sino el extraordinario diseño que le colocan a sus reviews, y con la salida del Xbox One y el PlayStation 4 se volaron la barda increíblemente.

A continuación vamos a hacerle un pequeño análisis al diseño de los reviews del Xbox One y el PS4 de Polygon, ya que es de los mejores diseños que he visto para mostrar un simple reviews de una consola. Con esto otros reviews, más bien, cualquier review queda esfumado ante semejante belleza de diseño web.

Reviews

Antes que nada les quiero presentar los reviews que hicieron en Polygon sobre el Xbox One y la Playstation 4, muy buenos por cierto, si quieren conocer lo bueno y malo de las nuevas consolas.

Análisis del sitio

El sitio por si solo representa una mezcla muy compleja de varios scripts y animaciones. Lo primero que notamos son eso, las animaciones. Y es que al principio pensé que eran secuencias de imágenes, pero después investigando más me di cuenta que son gráficos SVG (Scalable Vector Graphics), es decir, gráficos vectoriales que son definidos usando un formato XML, y que se pueden  animar. No son muy comunes de usar en internet por la complejidad pero el resultado como lo vemos es muy bueno.

Los gráficos estáticos y los animados son de hecho el resultado de crear todo primero de forma animada, y luego transformarlo todo a las imágenes. También las imágenes que se crearon para el video son usadas como imágenes individuales, por lo que aquí existió una gran parte de animador gráfico y fotógrafo.

Tenemos un slider de comparación que podemos arrastrar para ver el antes y el después. Este efecto no es más que dos capas con imágenes de fondo. Lo interesante aquí es el plugin de jQuery para poder arrastrar una capa y reducir su tamaño. El ícono está centrado y cuando el cursor llega a una posición alejada del slider se baja la opacidad de las capas, ya que tienen  color de fondo en negro.

El menú principal del review tiene una posición fixed para que se quede estático aunque baje la página. Implementa también el efecto del scroll, el cuál hace que se calcule la posición del scroll, y partiendo de eso se seleccione se seleccione en el menú la opción actual. De igual manera sirve para cuando le damos clic cuando queremos ir a una determinada sección.

Por último tenemos el sitio web que se adapta de acuerdo al tamaño de la pantalla, lo que quiere decir que implementa el responsive design de forma muy eficiente, ya que tanto los gráficos como el demás contenido sigue apareciendo, pero escalado y ordenado.

Conclusiones

Como vemos los efectos ya los conocemos, no son difíciles de implementar, pero es muy difícil igualar y hacer que todos estos juntos se vean muy bien ensamblados. El sitio es muy popular y también es un lugar muy conocido, por lo que han de tener excelentes diseñadores, por eso no me sorprende, pero todo lo demás si. Espero les haya gustado este análisis y vean que hay efectos que son muy sencillos de hacer, pero se necesita un poco más para poder hacer una experiencia como la que nos ofrecen estos reviews.