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.

Introducció

Quan ens trobem davant d’una nova necessitat d’un client o un nou projecte, moltes vegades no es parteix de cap idea preconcebuda i es aquest el moment on un dissenyador UX/UI ha de plantejar un univers visual del producte. Tècniques com el moodboard poden ajudar a pensar en aquest univers i permetre al dissenyador fer una proposta de disseny així com elaborar el prototip en base a aquest.

Un aspecte a tenir en compte en aquesta pràctica és que partim des de zero, el que implica que cada element interactiu que volguem incloure ja sigui ara o en un futur, serà necessari que es plantegi per a que l’equip desenvolupador pugui consultar-ne sense que hagi de tornar a passar a mans de l’equip de UX/UI, especialment en els elements més unitaris. També és important que l’hora de crear el UI KIT del producte, aquest sigui el més clar i entenedor possible per a l’equip de desenvolupament.

La imatge que es volia donar amb Short.ly és la d’una web segura, minimalista i amigable principalment. Per aquest motiu s’han volgut triar colors com el blau i el verd per denotar aquesta confiança i colors ataronjats/groguents en moments puntuals per tal de fer notar aquesta simpatía. Així mateix, en quant a tipografies, per al logotip ens hem inspirat en les xarxes socials, per donar un toc juvenil i refrescant alhora que ens hem decantat per a la resta de textos del producte per Segoe UI. A continuació es mostra el moodboard fet servir per aquesta pràctica.

Enllaç al prototip

A continuació teniu els enllaços dels prototips per a escritori i per mòbil, així com un flux per provar els elements interactius principals.

URL Prototip Breakpoint – Desktop

URL Prototip Breakpoint – Mobile

Elements interactius testing

Vídeo dels fluxos d’interacció

En el següent vídeo es poden contemplar el flux d’interacció d’escurçar una URL sense iniciar sessió, així com els passos necessaris per a poder registrar la URL per recollir-ne estadístiques.

Flow Short.ly Breakpoint Desktop | Ariadna Ortega Rams

Conclusions

Una de les principals dificultats que m’he trobat a l’hora de crear el prototip del producte ha estat crear l’univers visual. Tot i que tenia una idea clara del que volia transmetre i els colors que Short.ly em transmetia, l’estil de tots els elements està molt influenciat per l’estil de Microsoft, fent servir com a referència Fluent UI, React i Material UI. Però malgrat ser molt influenciada per aquesta estètica minimalista, sóc conscient que he de practicar en les questions estètiques, sobretot quan he de partir des de zero.

Un altre aspecte que cal destacar és que com a UI kit han faltat alguns components que potser ara no es fan servir però més endavant serien necessaris. Un exemple del que ha pogut faltar és tota mena d’inputs diferents, no només els de text que hem fet servir activament en el prototip.

Com a punt de millora, a part de treballar en aprendre a crear nous estils, crec que hauria de plantejar el UI kit de manera diferent, enlloc de pensar en què necessito per l’aplicació, podria començar creant tots els elements interactius més habituals, sense pensar en la funcionalitat en sí del producte, de manera que faria que l’UI kit fos més complet. L’ordre i la metodologia en la creació d’un UI Kit des de zero són fonamentals per a que l’equip de desenvolupament pugui consultar totes les possibilitats de forma ordenada i autònoma.

Finalment, crec que he fet una bona feina i que estic millorant respecte altres treballs més senzills de prototipar i respecte l’anterior pràctica. Sento que he aplicat de forma més consistent les eines de sistematització de Figma, el qual m’ha permès que la creació de les pantalles fos extremadament ràpida un cop tenia els elements unitaris i els més complexes creats.