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

Manuel Méndez García
Visibilitat: Públic - - comentari el PEC1. Deconstrucción de una interfaz gráfica.

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

Manuel Méndez García
Visibilitat: Públic - - comentari el 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.

 

 

01 Deconstrucción de una interfaz gráfica

Debat

No hi ha comentaris.

PEC1. Deconstrucción de una interfaz

Maria Teresa Cuenca Ramirez
Visibilitat: Públic - - comentari el PEC1. Deconstrucción de una interfaz
PEC1. Deconstrucción de una interfaz

PEC1. Deconstrucción de una interfaz

Maria Teresa Cuenca Ramirez
Visibilitat: Públic - - comentari el 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.

01 Deconstrucción de una interfaz gráfica

Debat

No hi ha comentaris.

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

Irene Rodriguez Rodriguez 1209480
Visibilitat: Públic - - comentari el PEC 1- Deconstrucción de una interfaz gráfica

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

Irene Rodriguez Rodriguez 1209480
Visibilitat: Públic - - comentari el 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!

01 Deconstrucción de una interfaz gráfica

Debat

No hi ha comentaris.

Benvinguts i benvingudes!

Quelic Berga Carreras
Visibilitat: Públic -

Benvinguts i benvingudes!

Quelic Berga Carreras
Visibilitat: Públic -
Hola! Aquesta publicació s’ha generat automàticament a l’Àgora. Et trobes a l’Àgora de l’assignatura. En aquest espai es recolliran totes les publicacions…
Hola! Aquesta publicació s’ha generat automàticament a l’Àgora. Et trobes a l’Àgora de l’assignatura. En aquest espai es recolliran…

Hola!

Aquesta publicació s’ha generat automàticament a l’Àgora.

Et trobes a l’Àgora de l’assignatura. En aquest espai es recolliran totes les publicacions relacionades amb les activitats que facin els companys i companyes de l’aula al llarg del semestre.

L’Àgora és un espai de debat on els estudiants i els docents poden veure, compartir i comentar els projectes i tasques de l’assignatura. 

Si només veus aquesta publicació, pot ser perquè encara no se n’ha fet cap, perquè no has entrat amb el teu usuari de la UOC o perquè no pertanys a aquesta aula. Si no ets membre de la UOC i veus alguna publicació, és perquè el seu autor o autora ha decidit fer-la pública.

Esperem que aquesta Àgora sigui un espai de debat enriquidor per a tothom!

 

Debat

No hi ha comentaris.

Les intervencions estan tancades.