Publicat per

PEC1. Deconstrucción de una interfaz gráfica.

Publicat per

PEC1. Deconstrucción de una interfaz gráfica.

Esta primera PEC consiste en la deconstrucción de una interfaz gráfica para así analizar elementos gráficos e interactivos. En mi caso, he…
Esta primera PEC consiste en la deconstrucción de una interfaz gráfica para así analizar elementos gráficos e interactivos. En…

Esta primera PEC consiste en la deconstrucción de una interfaz gráfica para así analizar elementos gráficos e interactivos.

En mi caso, he decidido analizar la web de “elPeriódico” en sus versiones de escritorio, tablet y móvil.

El primer paso es analizar las diferentes versiones para poder obtener las tipografías, las gamas cromáticas, las retículas, etc.

A continuación comparto un análisis de las retículas en columnas. Son 12 columnas en ordenador, 2 columnas en iPad y 1 columna en iPhone.

 

 

 

 

 

 

Una vez analizadas las diferentes versiones, se han realizado las guías de estilo para mostrar los elementos funcionales y gráficos de los diferentes breakpoints.

 

 

 

 

 

Estos son los UI kits de ordenador, iPad y iPhone ordenados de izquierda a derecha.

Después de elaborar las guías de estilo, es momento de comenzar con el prototipado. El resultado es el siguiente, con la representación de la interacción solicitada en el enunciado de la PEC.

 

 

Para una consulta más concisa, proporciono un enlace de visualizado del proyecto en Figma:

https://www.figma.com/file/IRhWvSgQkjXygJ169VOf0C/PEC1.-Deconstrucción-de-una-interfaz-gráfica-Manuel-Méndez?node-id=0%3A1

Un cordial saludo.

Manuel Méndez García.

 

 

Debat0el PEC1. Deconstrucción de una interfaz gráfica.

No hi ha comentaris.

Publicat per

PEC1. Deconstrucción de una interfaz

PEC1. Deconstrucción de una interfaz
Publicat per

PEC1. Deconstrucción de una interfaz

Hola a tod@s! A continuación, adjunto el enlace a figma con mi propuesta de la práctica “Deconstrucción de una interfaz gráfica”, en…
Hola a tod@s! A continuación, adjunto el enlace a figma con mi propuesta de la práctica “Deconstrucción de una…

Hola a tod@s!

A continuación, adjunto el enlace a figma con mi propuesta de la práctica “Deconstrucción de una interfaz gráfica”, en concreto, la página web del diario The Guardian. Comentar también, que en la primera página de figma se muestra el Kit UI y en la restantes, el prototipo para tres tipos de dispositivos: desktop, tablet y móvil.

Este es el enlace.

Debat0el PEC1. Deconstrucción de una interfaz

No hi ha comentaris.

Publicat per

PEC 1- Deconstrucción de una interfaz gráfica

Publicat per

PEC 1- Deconstrucción de una interfaz gráfica

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…
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…

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!

Debat0el PEC 1- Deconstrucción de una interfaz gráfica

No hi ha comentaris.