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 045Diseño de app web y panel

Orka

Un panel de administración en portugués para equipos que reportan lecturas de agua, con una vista general, una lista filtrable y una pantalla de detalle para cada unidad.

Mi papel
Diseño de interfaz
Estado del proyecto
Diseño de interfaz · archivo de Figma
Mockup de Orka compuesto 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

Orka es un panel de administración para escritorio, en portugués, para gestionar equipos, las personas que los usan y las empresas a las que pertenecen. Las unidades reportan lecturas del agua como pH, ORP y temperatura.

Tres pantallas sostienen la estructura: una vista general, la lista de equipos y el detalle de una unidad. Todos los valores en ellas son datos de ejemplo.

Grabado del prototipo en Figma. De la vista general a un equipo, a los informes y a los ajustes.
Vista general de Orka con una barra lateral, cuatro bloques azules de totales, gráficos de dona de equipos y usuarios, una columna de notificaciones y un gráfico de líneas de equipos nuevos.
La vista general reúne totales, distribución y eventos recientes en una sola pantalla.

02

Primero los totales, con los eventos recientes cerca

La vista general abre con cuatro bloques azules para equipos, equipos premium, empresas y usuarios. Debajo, dos gráficos dividen los equipos por plan y los usuarios por nivel de acceso, y un gráfico de líneas sigue los equipos nuevos a lo largo del año.

Las notificaciones tienen su propia columna, así que eventos como un pH cercano a su límite o una unidad sin señal quedan en esta pantalla en lugar de en otra página. Una versión corta de la lista empieza al final de la misma pantalla.

Lista Equipamentos con pestañas, filtro y búsqueda, y filas con los códigos EQ-001 a EQ-011 que muestran lecturas, estado, plan, empresa y alertas.
El color y los íconos de alerta hacen visibles las excepciones al recorrer la lista.
Detalle de la unidad EQ-001 con bloques azules de lecturas, una fila de valores del inversor, gráficos de líneas, un medidor de pH y un gráfico del volumen de agua.
Una unidad: primero las lecturas actuales, después cómo varió cada una.

03

De la lista a una unidad

La lista está hecha para leerse de un vistazo. Las pestañas separan los equipos en todos, gratuitos y premium, y cada fila reúne en una línea las últimas lecturas, el estado, el plan, la empresa y las alertas. La temperatura cambia de color según su nivel y una alerta aparece como un triángulo con la cantidad, así que las excepciones resaltan.

La pantalla de detalle mantiene el orden de la vista general para una sola unidad: las lecturas actuales en los bloques grandes, los valores del inversor en una fila más clara y luego gráficos de cómo varió cada lectura, con su mínimo y su máximo. El medidor de pH marca rangos como no aceptable, aceptable y deseable, lo que convierte un número en un juicio.

Logo azul grande de Orka junto a una computadora portátil oscura que muestra la pantalla de vista general, sobre un fondo blanco.
Frame de presentación con el logo de Orka y la pantalla de vista general.
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 45 Diseño de app web y panel

Orka

Un panel de administración en portugués para equipos que reportan lecturas de agua, con una vista general, una lista filtrable y una pantalla de detalle para cada unidad.

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

De toda la base de equipos a una sola lectura

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

Mi contribución

Orka es un panel de administración para escritorio, en portugués, para gestionar equipos, las personas que los usan y las empresas a las que pertenecen. Las unidades reportan lecturas del agua como pH, ORP y temperatura.

Tres pantallas sostienen la estructura: una vista general, la lista de equipos y el detalle de una unidad. Todos los valores en ellas son datos de ejemplo.

Grabado del prototipo en Figma. De la vista general a un equipo, a los informes y a los ajustes.
Vista general de Orka con una barra lateral, cuatro bloques azules de totales, gráficos de dona de equipos y usuarios, una columna de notificaciones y un gráfico de líneas de equipos nuevos.
La vista general reúne totales, distribución y eventos recientes en una sola pantalla.

Primero los totales, con los eventos recientes cerca

La vista general abre con cuatro bloques azules para equipos, equipos premium, empresas y usuarios. Debajo, dos gráficos dividen los equipos por plan y los usuarios por nivel de acceso, y un gráfico de líneas sigue los equipos nuevos a lo largo del año.

Las notificaciones tienen su propia columna, así que eventos como un pH cercano a su límite o una unidad sin señal quedan en esta pantalla en lugar de en otra página. Una versión corta de la lista empieza al final de la misma pantalla.

Lista Equipamentos con pestañas, filtro y búsqueda, y filas con los códigos EQ-001 a EQ-011 que muestran lecturas, estado, plan, empresa y alertas.
El color y los íconos de alerta hacen visibles las excepciones al recorrer la lista.
Detalle de la unidad EQ-001 con bloques azules de lecturas, una fila de valores del inversor, gráficos de líneas, un medidor de pH y un gráfico del volumen de agua.
Una unidad: primero las lecturas actuales, después cómo varió cada una.

De la lista a una unidad

La lista está hecha para leerse de un vistazo. Las pestañas separan los equipos en todos, gratuitos y premium, y cada fila reúne en una línea las últimas lecturas, el estado, el plan, la empresa y las alertas. La temperatura cambia de color según su nivel y una alerta aparece como un triángulo con la cantidad, así que las excepciones resaltan.

La pantalla de detalle mantiene el orden de la vista general para una sola unidad: las lecturas actuales en los bloques grandes, los valores del inversor en una fila más clara y luego gráficos de cómo varió cada lectura, con su mínimo y su máximo. El medidor de pH marca rangos como no aceptable, aceptable y deseable, lo que convierte un número en un juicio.

Logo azul grande de Orka junto a una computadora portátil oscura que muestra la pantalla de vista general, sobre un fondo blanco.
Frame de presentación con el logo de Orka y la pantalla de vista general.