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 004Interfaz de app móvil

Hello You

Una app de Motorola que reúne consejos sobre el celular, beneficios y contenido personalizado en una sola home, con pestañas de videos, juegos y podcasts.

Mi papel
Diseño de interfaz
Estado del proyecto
Archivos de diseño
Pantalla de primer uso, de bienvenida a Hello You, con una ilustración y un botón Continue.
Home Explore con un coach mark que apunta a la pestaña Videos.
Un recorrido por las pantallas del diseño, no una grabación: el primer uso, la carga y la home Explore. El primer uso. Un coach mark señala la pestaña Videos.

01

Mi contribución

Hello You reúne consejos sobre el celular, beneficios exclusivos y contenido personalizado en una sola app. El archivo explora su primer uso, la home Explore y los estados alrededor del feed.

Estado de carga de la home con placeholders tipo skeleton y efecto shimmer.
Bottom sheet de opciones de una publicación.
Diálogo para reportar que pregunta qué estuvo mal.
El shimmer mientras carga la home. Las opciones de cada publicación. Reportar una publicación.

02

Una home construida en torno a accesos directos

Explore abre con un banner y una cuadrícula de accesos directos para el dispositivo, la app box, el marketplace, encontrar una tienda, ayuda y diagnóstico, seguidos de temas en tendencia y del feed. Las pestañas inferiores llevan a Videos, Dimo, Games y Podcasts.

03

Los estados alrededor del feed

El archivo también diseña lo que rodea a ese contenido: un shimmer mientras carga la home, un coach mark que señala la pestaña Videos, un modal de inicio de sesión, una hoja de opciones para cada publicación y un diálogo para reportar.

04

Antes y después

El archivo también guarda una versión anterior de esta home. Abría con una sola historia de borde a borde sobre los accesos directos y probaba distintas imágenes en el hero. Hello You conserva la idea de una home para el celular y sus servicios, y lleva el contenido a una estructura más oscura y más fácil de leer.

Lado a lado, la home anterior y la home Explore: la historia en foto da paso a un banner, los ocho accesos directos pasan a una tarjeta, y los temas del momento y el feed ganan el espacio de abajo.

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 04 Interfaz de app móvil

Hello You

Una app de Motorola que reúne consejos sobre el celular, beneficios y contenido personalizado en una sola home, con pestañas de videos, juegos y podcasts.

Mi papel
Diseño de interfaz
Estado del proyecto
Archivos de diseño
Un recorrido por las pantallas del diseño, no una grabación: el primer uso, la carga y la home Explore.
Pantalla de primer uso, de bienvenida a Hello You, con una ilustración y un botón Continue.
El primer uso.
Home Explore con un coach mark que apunta a la pestaña Videos.
Un coach mark señala la pestaña Videos.

Consejos, beneficios y contenido para un celular Motorola, en una sola app

Archivos de diseño. El contenido del feed son datos de ejemplo de los mockups.

Mi contribución

Hello You reúne consejos sobre el celular, beneficios exclusivos y contenido personalizado en una sola app. El archivo explora su primer uso, la home Explore y los estados alrededor del feed.

Estado de carga de la home con placeholders tipo skeleton y efecto shimmer.
El shimmer mientras carga la home.

Una home construida en torno a accesos directos

Explore abre con un banner y una cuadrícula de accesos directos para el dispositivo, la app box, el marketplace, encontrar una tienda, ayuda y diagnóstico, seguidos de temas en tendencia y del feed. Las pestañas inferiores llevan a Videos, Dimo, Games y Podcasts.

Bottom sheet de opciones de una publicación.
Las opciones de cada publicación.

Los estados alrededor del feed

El archivo también diseña lo que rodea a ese contenido: un shimmer mientras carga la home, un coach mark que señala la pestaña Videos, un modal de inicio de sesión, una hoja de opciones para cada publicación y un diálogo para reportar.

Diálogo para reportar que pregunta qué estuvo mal.
Reportar una publicación.

Antes y después

El archivo también guarda una versión anterior de esta home. Abría con una sola historia de borde a borde sobre los accesos directos y probaba distintas imágenes en el hero. Hello You conserva la idea de una home para el celular y sus servicios, y lleva el contenido a una estructura más oscura y más fácil de leer.

Lado a lado, la home anterior y la home Explore: la historia en foto da paso a un banner, los ocho accesos directos pasan a una tarjeta, y los temas del momento y el feed ganan el espacio de abajo.

La home anterior, con una historia de borde a borde sobre una cuadrícula de accesos directos.
La versión anterior de la home.
La home Explore: un banner, una tarjeta con ocho accesos directos, temas del momento y el feed.
La home Explore.