Arrastra para explorar. Desplázate o pellizca para acercar. Abre la Ayuda para ver los atajos de teclado.

Yan
ABIERTO A
PROYECTOS
Hablemos
Yan Fontão Boring view
All work

Case 029Diseño de app móvil

Rollê

Una app en portugués para encontrar lugares, curadores y actividades, que aquí se muestra con ejemplos de Curitiba. Sus páginas de lugar mezclan datos prácticos con historias y consejos de amigos.

Mi papel
Diseño de interfaz
Estado del proyecto
Diseño de interfaz · archivo de Figma
Mockup de Rollê armado para este mural a partir de pantallas reales del proyecto.
Mockup armado para este mural a partir de pantallas reales del proyecto.

01

Mi contribución

Rollê es una app en portugués para encontrar lugares, curadores y actividades. Los ejemplos del archivo están ambientados en Curitiba, y aquí sigo uno de ellos, el teatro Ópera de Arame. El archivo tiene 17 pantallas de celular distintas y guarda los borradores anteriores en una página aparte.

Fotografía a pantalla completa del teatro Ópera de Arame con barras de progreso segmentadas, el nombre del lugar, una calificación y un panel oscuro con un texto corto y tres puntos destacados.
Página del lugar Ópera de Arame con una fila de fotos, cuatro atajos redondos, dos tarjetas ilustradas de Sobre o local y el comienzo de una lista Dica de amigo.
Un recorrido por las pantallas del diseño, no una grabación: la apertura de la marca, un lugar y su story. Un lugar mostrado como un story a pantalla completa. La página del lugar, de los datos prácticos a los consejos de amigos.

02

Una ficha que suena a recomendación

La página del lugar empieza con lo esencial: nombre, calificación, una fila de fotos con la siguiente asomándose y cuatro atajos redondos para Conheça, Horários, Info y Avaliações. Debajo, el tono cambia. Sobre o local usa frases simples, como “Rola show, peças e eventos”, en tarjetas con pequeños dibujos a tinta, y Dica de amigo reúne consejos cortos, como llegar cerca del atardecer.

03

El mismo lugar como un story a pantalla completa

La pantalla de story le entrega todo el celular a una fotografía, con barras segmentadas que indican que hay más por venir. El texto queda abajo, sobre un panel oscuro: un párrafo corto sobre el lugar y tres puntos destacados. La fotografía presenta el lugar, y el texto es lo bastante corto para leerlo antes de pasar a lo siguiente.

04

Contornos negros con un eco de color

Las fotos, las tarjetas y los botones de ícono comparten un mismo tratamiento: un contorno negro con una forma delgada desplazada en un segundo color, como azul, naranja o rosa. Los títulos usan una serif, y el archivo guarda versiones tipográficas rotuladas Serif. Juntos acercan la app a una guía impresa más que a una app de listados.

000

Instrucciones

Yan Fontão
Toque
Abre una pantalla
Clic
Abre una pantalla
Arrastrar
Recorre el mural
Rueda
El mouse acerca, el trackpad mueve, el pellizco acerca
− +
Aleja hasta ver todo el mural, o acerca
Flechas
En un caso: ↑↓ cambian de caso, ←→ cambian de medio. En el mural: mueven
Espacio
Abre o vuelve
Enter
Abre
Esc Backspace
Vuelve
Home
Vuelve al centro y luego a la apertura
PgUp PgDn
Canal anterior o siguiente
Tab
Recorre proyectos y enlaces
R
Proyecto al azar
0–9
Escribe un canal, 1–61
?
Esta página
Atajos

Música del mural

Archivos comprimidos y nivelados para la web.

ABIERTO A
PROYECTOS
Hablemos

Nuevo mensaje para Yan

Cuéntame quién eres y te respondo.

000

Sobre Yan

Hola, soy Yan

Product Designer/ Design Engineer

La mayoría de los productos pierde algo entre el diseño y el código. Los míos no: investigo el problema, diseño el producto y lanzo la interfaz yo mismo, así que lo que apruebas es exactamente lo que reciben tus usuarios.

  • 2018inicio en software
  • UI + codediseño e implementación

Trabajé con Motorola · Ambev Tech · Rei do Pitaco · OneTool · CESAR

Brasil · Remoto, híbrido o presencial

Retrato de Yan Fontão sentado, con suéter verde y gafas, sosteniendo un micrófono.
ABIERTO A
PROYECTOS
Hablemos
ABIERTO A
PROYECTOS
Hablemos
000

canal bloqueado

Bajo NDA

Ingresa el código

Pídele el código a Yan ↗
ABIERTO A
PROYECTOS
Hablemos
YAN FONTÃO Casos completos