Desafío 11

Grilla y estructura

Alumno: Luis Portovedo

Tutora: Yanina Andregnette
Recap Antes de comenzar con el desafío, un breve resumen del proyecto
Problema
Cuando se tienen muchos
servicios de streaming de vídeo
ampliamos mucho el catálogo, a
veces tener tantas opciones
dificulta el momento de
seleccionar o encontrar un título
apropiado, haciendo perder gran
parte de nuestro tiempo de ocio.
Nombre de la App:
Filted
Objetivo Solución
Reducir el tiempo en que App de agregador de streaming de
el usuario selecciona un vídeo. El usuario podrá filtrar mejor
título en una plataforma para decidir qué ver en ese preciso
de streaming momento y en qué plataforma se
encuentra. Como también, para los
más indecisos, la oportunidad de
elegir al azar un título para ver en
ese momento.
 Ir a Whimsical

Recap Arquitectura de la información | Filted

 ¡A abrir esos ojos! 👀

Ahora es el momento de detallar lo máximo posible

nuestras pantallas, para que visualmente se vea
mucho mejor, con mucho más espaciado y a las
mismas distancias.

Sistema Filted es nativa en iOS por lo que se han adaptado

las siguientes especificaciones:

de grilla y Márgenes: 18px

estructura Grillas: 11px

Calles: 12px

A continuación, se mostrarán algunas pantallas, pero

se podrán ver todas dentro de Figma, en el siguiente
enlace:

Ir a Figma
Grilla y estructura Márgenes y calles

¿Cómo se procedió?
Como se mencionó anteriormente, se
utilizaron márgenes de 18px y calles de
12px.

Como en iPhone la grilla es de 11px, la

cual no es divisible entre 18px, se ha
alineado todo el contenido no al borde
del margen, si no de la siguiente grilla
(se podrá ver mejor en la siguientes
imágenes), siempre respetando el
margen para el ‘espacio seguro’ de
nuestro contenido.

Para medidas se utilizó el margen y las

calles para diseñar nuestros botones, ya
que estos llegan hasta el final, y nuestra
tab bar.
Grilla y estructura Grilla

¿Cómo se procedió?
¡Y ahora sí! 🔎 Aquí podras ver nuestra
cuadrícula con la que hemos alineado
tanto vertical como en horizontal todos
nuestros elementos.

Hemos usado 11px de grilla y hemos

hecho que todos, o por lo menos la
mayoría de los elementos, sean
múltiplos de 11px (22px, 33px, 44px…)
En esta etapa se ha mejorado considerablemente el
diseño visual de la aplicación, le hemos dado una
separación uniforme a todos los componentes y todo
se encuentra perfectamente alineado, dándole
mucho más aire a todo el contenido dentro de la
aplicación.

Con esto hemos ido iterando cada uno de los Conclusiones

componentes que ya se tenían para ir mejorandolos,
creando así nuestros átomos, moléculas y
organismos que iremos utilizando a lo largo de todas
nuestras pantallas.

Ir a Figma
¡Gracias!
¡Gracias
por los íconos! ¿En dónde conseguirlos?
Esta presentación ha sido diseñada usando recursos de Flaticon.com