Hola a todos,

He prototipado de el periódico digital “The guardian” que podéis encontrar en el siguiente enlace.

https://www.figma.com/proto/d2BzYZgtzH38ZmXBACr6Tl/The-Guardian?page-id=0%3A1&node-id=29%3A1551&viewport=271%2C48%2C0.33&scaling=scale-down&starting-point-node-id=29%3A1551&show-proto-sidebar=1

Se ha prototipado la página principal y la noticia principal en 3 breakpoints distintos que corresponden a el desktop del ordenador, una tablet y un smartphone. En mi caso se trata de un desktop de 1400x1024px, un ipad de 768x1024px y un iphon X de 375x812px . Sin embargo el prototipo es responsive por lo que dentro de las medidas máximas de breakpoint la interface se adapta a  cualquier dispositivo. de  La noticia principal está basada en una real, por el contrario la página principal no incluye información real sino que es una estructura con imágenes y texto estándar para que entender como se configuraría.

Grid vertical pantalla principal

El Grid cambia de la pantalla principal cambia para adaptarse al breakpoint.

En el Break point de > 1300px tenemos un grid con 5 columnas alineadas a la izquerda con un ancho de 220px, margenes de 20px y una separación entre ellas de 20px,. Este grid tiene un tamaño de 1300 que permanece constante. Al reducir o aumentar el ancho del dispositivo lo que se escala son unicamente los margenes exteriores al grid.

En el Break point que acarca 979-740px tenemos un grid con 4 columnas centradas con un ancho de 160px, margenes de 20px y una separación entre ellas de 20px. Este grid tiene un tamaño de 740px que permanece constante. Al reducir o aumentar el ancho del dispositivo lo que se escala son unicamente los margenes exteriores al grid.

En el Break point <729 solo existe una columna con margenes de 10px. Al reducir o aumentar el ancho del dispositivo cambia el tamaño de la columna escalando todo su contenido. A diferencia de en los otros breakpoints, en este no existen márgenes exteriores al grid.

Grid vertical noticia principal

Las noticias se estructuran de una forma un poco distinta a página principal, en este caso es más sencillo dividir el espacio en columnas y márgenes que en un grid regular.

Guia de estilo

A continuación se muestra la guía de estilo correspondiente al prototipado.

Un saludo!