Introducción

La finalidad de este documento es recoger la segunda entrega de la asignatura, cuyo fin es realizar el prototipado de una web responsive de acortar urls. Los principales objetivos de esta actividad son:

1. Definir una línea estética acorde a los conceptos trabajados.
2. Comparar en un breve benchmark sus competidores y website similares para detectar posibles componentes, comportamientos, necesidades, etc.
3. Saber construir un prototipo navegable definiendo previamente los componentes a utilizar.
4. Desarrollar el pensamiento crítico y de autoevaluación.

Guía de estilo

https://www.figma.com/file/susXzE0gyOvW0RcIQg9yyY/PAC02-Dise%C3%B1o-y-sistematizaci%C3%B3n-de-una-interfaz-gr%C3%A1fica-_-Laura-Reyes-P%C3%A9rez?node-id=1%3A14&t=00lh9rRc4lFRO2Se-0

Componentes

https://www.figma.com/file/susXzE0gyOvW0RcIQg9yyY/PAC02-Dise%C3%B1o-y-sistematizaci%C3%B3n-de-una-interfaz-gr%C3%A1fica-_-Laura-Reyes-P%C3%A9rez?node-id=1%3A13

Prototipo

Tras trabajar en un mapa conceptual e identificar las ideas claves con las que trabajaremos para definir el look and feel del sitio web, se definen los elementos de marca más identificativos: color, tipografía y logo. Partiendo de estos, y tras hacer un breve ejercicio de sketching analizando website similares, se diseñan los componentes a utilizar para posteriormente diseñar y añadir interacción al prototipo móvil, definido en un breakpoint de 360px (móvil) y 1366px (escritorio).

https://www.figma.com/proto/susXzE0gyOvW0RcIQg9yyY/PAC02-Dise%C3%B1o-y-sistematizaci%C3%B3n-de-una-interfaz-gr%C3%A1fica-_-Laura-Reyes-P%C3%A9rez?page-id=1%3A12&node-id=19%3A625&viewport=234%2C222%2C0.27&scaling=scale-down&starting-point-node-id=19%3A625

Para que quede más claro el trabajo y flujo diseñado, a continuación se pueden ver los vídeos de dicha navegación, sobre los diferentes dispositivos realizados.