Publicat per

The Guardian

Publicat per

The Guardian

Deconstrucción de una interfaz gráfica The Guardian es un sistema complejo desde la arquitectura de la información, es un sitio con muchas…
Deconstrucción de una interfaz gráfica The Guardian es un sistema complejo desde la arquitectura de la información, es un…

Perez_Lina_TheGuardian02

Deconstrucción de una interfaz gráfica

The Guardian es un sistema complejo desde la arquitectura de la información, es un sitio con muchas secciones, enlaces, categorías y niveles. Identificar los componentes con los elementos que permiten sistematizar el sitio es el reto de esta actividad. La estructura de la página principal son módulos que se clasifican en secciones y básicamente se repiten a lo largo de la página con algunas modificaciones particulares, como por ejemplo, el manejo de color en los titulares, la línea de cada noticia y en algunas ocasiones el fondo y el conteo de los comentarios.

La estructura en los tres breakpoints es la misma, lo que cambia es la disposición y el tamaño de los componentes en el ancho de la pantalla. La jerarquía en la información de la sección se define de acuerdo a la imagen y el titular de cada noticia. Una vez identificados los elementos y la estructura del sitio, el paso más complejo es el diseño y funcionamiento del menú con sus niveles para las tres resoluciones.

The Guardian_home   The Guardian iPad   The Guardian_iPhone

The Guardian web  /  The Guardian iPad  /  The Guardian iPhone

Debat0el The Guardian

No hi ha comentaris.

Publicat per

PEC1: Deconstrucción de una interfaz gráfica

PEC1: Deconstrucción de una interfaz gráfica
Publicat per

PEC1: Deconstrucción de una interfaz gráfica

Hola, muy buenas noches: Lo primero, dejo los enlaces de los prototipos públicos de los prototipos: UI Kit + Desktop: https://www.figma.com/proto/hG8pQIqfUW7qFV55oTObfO/The-Guardian-_-UI-kit-%2B-prototypes?page-id=0%3A1&node-id=4%3A541&viewport=241%2C48%2C0.08&scaling=scale-down-width&starting-point-node-id=4%3A541&show-proto-sidebar=1 Tablet:…
Hola, muy buenas noches: Lo primero, dejo los enlaces de los prototipos públicos de los prototipos: UI Kit +…

Hola, muy buenas noches:

Lo primero, dejo los enlaces de los prototipos públicos de los prototipos:

La verdad es que la práctica me ha resultado muy interesante y profunda. Tal vez demasiado profunda y larga por mi parte, dado que me ha pillado el toro y he invertido más de 60 horas delante de Figma y he acabado media hora después de la fecha de entrega.

No sé sí he sido muy excesivo a la hora de replicar la interfaz y he ido demasiado profundo, pero en las adaptaciones he tenido que sacrificar partes de la web y no reproducir todo porqué lo veía inviable. También había confiado en los componentes de Figma para crear un siguiente nivel de interactividad, sobre todo para los estados y he descubierto que sólo funciona en Beta y, aunque he mandado varios correos a la gente de Figma, pues nada, todo el trabajo de componentes no se ha lucido lo que esperaba.

Espero que lo entiendas Laura y que para la próxima PEC pueda encarar y manejar todo mejor.

Muchas gracias.

Disfrutad de una maravillosa noche.

Saludos.

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

No hi ha comentaris.

Les intervencions estan tancades.

Publicat per

PEC 01. Deconstrucción de una interfaz gráfica

PEC 01. Deconstrucción de una interfaz gráfica
Publicat per

PEC 01. Deconstrucción de una interfaz gráfica

Para esta primera entrega de la asignatura de Prototipado, hemos analizado una página web en sus distintas modalidades y la hemos reconstruido…
Para esta primera entrega de la asignatura de Prototipado, hemos analizado una página web en sus distintas modalidades y…

Para esta primera entrega de la asignatura de Prototipado, hemos analizado una página web en sus distintas modalidades y la hemos reconstruido haciendo uso de software de wireframe. Esta actividad nos ha permitido poder entender cómo se esquematizan las aplicaciones web y qué relaciones y similitudes existen en sus distintos breakpoints (web, móvil y tablet).

En mi caso, he optado por la página web de elPeriódico haciendo uso de la aplicación Adobe Xd. A continuación, se muestran algunas imágenes de los resultados obtenidos:

UI Kit

Carregant...

Prototipo versión Web

Carregant...

Prototipo versión Móvil

Carregant...

Prototipo versión Tablet

Carregant...

 

Finalmente, adjunto el enlace al prototipo en vivo de Adobe Xd:

https://xd.adobe.com/view/d464a3f2-c2d2-49eb-9c97-ae8b47e18402-8137/

 

Un saludo

Debat0el PEC 01. Deconstrucción de una interfaz gráfica

No hi ha comentaris.

Publicat per

Desconstrucció d’una interfície gràfica

Publicat per

Desconstrucció d’una interfície gràfica

A continuació podeu veure el meu exercici de Deconstrucció d’una interfície gràfica del diari El Periódico. Aquest consta d’un UI Kit, un…
A continuació podeu veure el meu exercici de Deconstrucció d’una interfície gràfica del diari El Periódico. Aquest consta d’un…

A continuació podeu veure el meu exercici de Deconstrucció d’una interfície gràfica del diari El Periódico. Aquest consta d’un UI Kit, un prototip per escriptori, tauleta i mòbil. L’UI Kit és navegable per pàgines i els prototips tenen interacció a la primera notícia i al menú.

https://xd.adobe.com/view/c3adcf9e-315f-413a-831a-ba070edd77bf-96fe/?fullscreen

Debat0el Desconstrucció d’una interfície gràfica

No hi ha comentaris.