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 054Diseño de landing page

Succession Now

Un sitio de marketing para un producto de planificación de la sucesión, diseñado para escritorio y celular en torno a una sola acción: agendar una demo.

Mi papel
Diseño de interfaz
Estado del proyecto
Diseño de interfaz · archivo de Figma
Portada de presentación de Succession Now, del archivo de diseño original.
Portada de presentación del archivo original.

01

Mi contribución

Succession Now es un sitio de marketing para un producto de planificación de la sucesión. El archivo de Figma incluye una landing page, un cuadro de diálogo de demo con sus mensajes de éxito, la oferta de una guía y las versiones de celular del menú y de los cuadros de diálogo.

Un desplazamiento por el diseño: la landing page, del producto a sus funciones.

02

Mantener a la vista el siguiente paso

En escritorio, el hero mantiene el mensaje corto y pone dos acciones lado a lado: agendar una demo como botón sólido y ver la demo como uno más discreto. El mismo verde se repite en la barra superior con la oferta de la guía, así que el color marca lo que hay por hacer.

El menú del celular sigue ese orden. Primero van seis enlaces simples, luego Login en un bloque claro y Schedule My Demo en verde sólido, lo que hace fácil distinguir las dos acciones.

Cuadro de diálogo de celular a pantalla completa, con una foto verde claro que lleva el logo de Succession Now, un mensaje corto, campos de nombre y correo electrónico y un botón verde Schedule my demo.
Menú de celular con el logo de Succession Now, un ícono de cerrar, seis enlaces de texto, un bloque claro de Login y un botón verde sólido Schedule My Demo.
El cuadro de diálogo de la demo pide un nombre y un correo electrónico, con un solo botón para continuar. El menú del celular termina con Login en un bloque claro y la demo en verde sólido.

03

Un cuadro de diálogo que pide muy poco

El cuadro de diálogo de la demo ocupa toda la pantalla del celular. Una foto clara lleva el logo, un mensaje corto presenta el paso y el formulario se detiene en dos campos: nombre y correo electrónico. El botón de cerrar queda en la esquina superior, así que salir es tan claro como continuar.

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