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 006Diseño de app móvil

TerasApp

Una app móvil para los sensores IoT de temperatura TERAS en granjas: emparejar dispositivos, leer la última temperatura, seguir los registros del sensor y exportar reportes. Todas las lecturas son datos de ejemplo.

Mi papel
Flujos de producto y diseño de interfaz
Estado del proyecto
Diseño de interfaz · archivo de Figma
Logo de TerasApp sobre un disco negro.
El logo.

01

Mi contribución

TerasApp es la app complementaria, en portugués, de los sensores de temperatura TERAS. Cada sensor recibe un nombre, como el de ejemplo “Caldeira da fazenda 1”, y la app gira en torno a tres verificaciones: la última lectura, el estado del sensor y cómo se comportó la temperatura en los últimos siete días.

El archivo de Figma conserva toda la cadena, desde wireframes de baja fidelidad (onboarding, acceso, inicio, emparejamiento, dispositivo) hasta un prototipo de 31 frames móviles y los componentes que hay detrás. Aquí me concentro en las pantallas que sostienen esas tres verificaciones.

Grabación del prototipo de Figma. Inicio de sesión, una búsqueda de sensores cercanos y dos dispositivos nuevos agregados a la lista.
Tres pantallas inclinadas sobre fondo oscuro: el panel del dispositivo, los reportes con gráficos de batería y temperatura, y los ajustes.
Un sensor visto desde su panel, sus reportes y sus ajustes.

02

La lectura va primero

La página del dispositivo abre con una tarjeta oscura que contiene el nombre del sensor, la hora de la última actualización y la temperatura, el único bloque de la página con un contraste fuerte. Debajo vienen el intervalo de registro y los registros guardados en la memoria y en la app, y luego la señal y la batería. Leída de arriba abajo, la pantalla va del número al estado del sensor que está detrás.

Página del dispositivo Caldeira da fazenda 1, con una tarjeta oscura que muestra Sensor TMP1 y su temperatura, y luego los registros del sensor, la señal y la batería.
Pantalla de reportes con un gráfico de barras rojas del rango de temperatura de los últimos siete días y un botón Exportar e salvar.
Pantalla de inicio con el logo de TERAS, un botón Procurar dispositivos y tres tarjetas de dispositivos, una de ellas en gris y sin señal.
La página del dispositivo empieza por la última lectura. Los reportes grafican el rango de temperatura de los últimos siete días. La pantalla de inicio lista cada sensor conectado con su estado y su señal.

03

Siete días de temperatura en un gráfico

Relatórios muestra el rango de temperatura de los últimos siete días en barras rojas, frente a líneas fijas en 50 y 100 °C. Al seleccionar una barra se abre un tooltip oscuro con el mínimo, el máximo y el promedio de ese punto, de modo que el gráfico se mantiene limpio hasta que alguien pide el detalle. Se pueden agregar y quitar gráficos, y un reporte se puede exportar y guardar, con las exportaciones anteriores guardadas en un historial.

Dos versiones de la pantalla de reportes unidas por una flecha dibujada a mano: el gráfico en reposo y el mismo gráfico con un tooltip oscuro de mínimo, máximo y promedio.
Al seleccionar una barra se abren el mínimo, el máximo y el promedio.

04

Encontrar y cuidar un sensor

La pantalla de inicio lista los dispositivos conectados como tarjetas con estado, temperatura y señal, y un sensor sin señal pasa a gris. Procurar dispositivos lleva a una lista de emparejamiento que marca la señal de cada sensor como Forte, Médio o Fraco. Los ajustes reúnen el almacenamiento, la batería, el nombre del dispositivo y el intervalo de registro, y dejan las dos acciones destructivas, borrar los registros locales y desconectar el sensor, al final de la pantalla con íconos rojos.

Una cuadrícula diagonal y densa de pantallas de la app: onboarding, inicio de sesión, lista de dispositivos, emparejamiento, panel del dispositivo, reportes, ajustes y una confirmación de exportación.
La app, del onboarding al reporte exportado.
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

Canal 06 Diseño de app móvil

TerasApp

Una app móvil para los sensores IoT de temperatura TERAS en granjas: emparejar dispositivos, leer la última temperatura, seguir los registros del sensor y exportar reportes. Todas las lecturas son datos de ejemplo.

Mi papel
Flujos de producto y diseño de interfaz
Estado del proyecto
Diseño de interfaz · archivo de Figma

Verlo en Dribbble

Logo de TerasApp sobre un disco negro.
El logo.

Un sensor de granja, legible desde un celular

Pantallas del diseño original en Figma y Dribbble, con datos de ejemplo.

Mi contribución

TerasApp es la app complementaria, en portugués, de los sensores de temperatura TERAS. Cada sensor recibe un nombre, como el de ejemplo “Caldeira da fazenda 1”, y la app gira en torno a tres verificaciones: la última lectura, el estado del sensor y cómo se comportó la temperatura en los últimos siete días.

El archivo de Figma conserva toda la cadena, desde wireframes de baja fidelidad (onboarding, acceso, inicio, emparejamiento, dispositivo) hasta un prototipo de 31 frames móviles y los componentes que hay detrás. Aquí me concentro en las pantallas que sostienen esas tres verificaciones.

Grabación del prototipo de Figma. Inicio de sesión, una búsqueda de sensores cercanos y dos dispositivos nuevos agregados a la lista.
Tres pantallas inclinadas sobre fondo oscuro: el panel del dispositivo, los reportes con gráficos de batería y temperatura, y los ajustes.
Un sensor visto desde su panel, sus reportes y sus ajustes.

La lectura va primero

La página del dispositivo abre con una tarjeta oscura que contiene el nombre del sensor, la hora de la última actualización y la temperatura, el único bloque de la página con un contraste fuerte. Debajo vienen el intervalo de registro y los registros guardados en la memoria y en la app, y luego la señal y la batería. Leída de arriba abajo, la pantalla va del número al estado del sensor que está detrás.

Página del dispositivo Caldeira da fazenda 1, con una tarjeta oscura que muestra Sensor TMP1 y su temperatura, y luego los registros del sensor, la señal y la batería.
La página del dispositivo empieza por la última lectura.
Pantalla de reportes con un gráfico de barras rojas del rango de temperatura de los últimos siete días y un botón Exportar e salvar.
Los reportes grafican el rango de temperatura de los últimos siete días.

Siete días de temperatura en un gráfico

Relatórios muestra el rango de temperatura de los últimos siete días en barras rojas, frente a líneas fijas en 50 y 100 °C. Al seleccionar una barra se abre un tooltip oscuro con el mínimo, el máximo y el promedio de ese punto, de modo que el gráfico se mantiene limpio hasta que alguien pide el detalle. Se pueden agregar y quitar gráficos, y un reporte se puede exportar y guardar, con las exportaciones anteriores guardadas en un historial.

Pantalla de inicio con el logo de TERAS, un botón Procurar dispositivos y tres tarjetas de dispositivos, una de ellas en gris y sin señal.
La pantalla de inicio lista cada sensor conectado con su estado y su señal.
Dos versiones de la pantalla de reportes unidas por una flecha dibujada a mano: el gráfico en reposo y el mismo gráfico con un tooltip oscuro de mínimo, máximo y promedio.
Al seleccionar una barra se abren el mínimo, el máximo y el promedio.

Encontrar y cuidar un sensor

La pantalla de inicio lista los dispositivos conectados como tarjetas con estado, temperatura y señal, y un sensor sin señal pasa a gris. Procurar dispositivos lleva a una lista de emparejamiento que marca la señal de cada sensor como Forte, Médio o Fraco. Los ajustes reúnen el almacenamiento, la batería, el nombre del dispositivo y el intervalo de registro, y dejan las dos acciones destructivas, borrar los registros locales y desconectar el sensor, al final de la pantalla con íconos rojos.

Una cuadrícula diagonal y densa de pantallas de la app: onboarding, inicio de sesión, lista de dispositivos, emparejamiento, panel del dispositivo, reportes, ajustes y una confirmación de exportación.
La app, del onboarding al reporte exportado.