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

Lex by Alexandria

Una landing page en portugués y un logo para una oferta sobre la factura de electricidad, con tres tratamientos de hero para celular en torno a la misma pregunta de apertura.

Mi papel
Diseño de interfaz
Estado del proyecto
Diseño de interfaz · archivo de Figma
Logo de Lex by Alexandria sobre un disco blanco.
El logo.

01

Mi contribución

Lex by Alexandria es una landing page en portugués para una oferta sobre la factura de electricidad, dirigida a hogares y negocios. El archivo reúne versiones de escritorio y móvil de la página, junto con variantes del logo.

El titular y las etiquetas de estas pantallas son el texto de marketing de la propia página, no resultados que yo pueda verificar. Este caso revisa cómo está armada la página.

Un desplazamiento por el diseño: la landing page, de la oferta a cómo funciona.
Logo de Lex by Alexandria en degradado sobre blanco, junto a dos celulares inclinados que muestran la landing page, sobre una forma diagonal del morado al amarillo.
El logo junto a dos versiones móviles de la landing page.

02

Tres formas de abrir en el celular

Los frames para celular exploran tres tratamientos de la misma primera pantalla. Dos abren con una fotografía, una familia junto a paneles solares o un técnico caminando por un campo solar, y ponen la pregunta sobre un panel naranja. El tercero deja la foto de lado, pone el logo en degradado sobre blanco y trae el botón Simular Desconto a la primera vista.

Esa versión también cierra la primera vista con seis etiquetas breves sobre una banda oscura, un pequeño resumen antes de que la página continúe.

Pantalla de celular con una barra naranja arriba, el logo en degradado sobre blanco, una pregunta sobre la factura de electricidad, un botón Simular Desconto en degradado y seis etiquetas sobre una banda oscura.
Pantalla de celular con una franja negra arriba, una barra naranja con el logo blanco, una foto de una familia frente a paneles solares y un titular sobre un panel naranja.
El mismo layout con una foto de un técnico con chaqueta de alta visibilidad caminando por el pasto alto entre paneles solares al atardecer.
Esta versión trae el logo, la pregunta y el botón a la primera vista. Una versión con foto pone la pregunta sobre un panel naranja. El mismo layout con una segunda fotografía.

03

Un degradado que da unidad a la página

El logo va del morado al amarillo pasando por el naranja, y el mismo degradado rellena el botón principal y las formas diagonales de los frames de presentación. En la barra naranja de las versiones con foto, la marca pasa a blanco, así que sigue legible sin cambiar de forma.

Primer plano de una computadora portátil inclinada que muestra el hero de escritorio, con una navegación pequeña, el logo en degradado, un titular grande y un botón Simular Desconto, junto al logo y a formas en degradado.
El hero de escritorio centra el logo, la pregunta y un solo botón.
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 52 Diseño de landing page

Lex by Alexandria

Una landing page en portugués y un logo para una oferta sobre la factura de electricidad, con tres tratamientos de hero para celular en torno a la misma pregunta de apertura.

Mi papel
Diseño de interfaz
Estado del proyecto
Diseño de interfaz · archivo de Figma
Logo de Lex by Alexandria sobre un disco blanco.
El logo.

Una landing page que abre con una pregunta

Pantallas del archivo de diseño original en Figma. Los titulares son el texto de marketing de la propia página.

Mi contribución

Lex by Alexandria es una landing page en portugués para una oferta sobre la factura de electricidad, dirigida a hogares y negocios. El archivo reúne versiones de escritorio y móvil de la página, junto con variantes del logo.

El titular y las etiquetas de estas pantallas son el texto de marketing de la propia página, no resultados que yo pueda verificar. Este caso revisa cómo está armada la página.

Un desplazamiento por el diseño: la landing page, de la oferta a cómo funciona.
Logo de Lex by Alexandria en degradado sobre blanco, junto a dos celulares inclinados que muestran la landing page, sobre una forma diagonal del morado al amarillo.
El logo junto a dos versiones móviles de la landing page.

Tres formas de abrir en el celular

Los frames para celular exploran tres tratamientos de la misma primera pantalla. Dos abren con una fotografía, una familia junto a paneles solares o un técnico caminando por un campo solar, y ponen la pregunta sobre un panel naranja. El tercero deja la foto de lado, pone el logo en degradado sobre blanco y trae el botón Simular Desconto a la primera vista.

Esa versión también cierra la primera vista con seis etiquetas breves sobre una banda oscura, un pequeño resumen antes de que la página continúe.

Pantalla de celular con una barra naranja arriba, el logo en degradado sobre blanco, una pregunta sobre la factura de electricidad, un botón Simular Desconto en degradado y seis etiquetas sobre una banda oscura.
Esta versión trae el logo, la pregunta y el botón a la primera vista.
Pantalla de celular con una franja negra arriba, una barra naranja con el logo blanco, una foto de una familia frente a paneles solares y un titular sobre un panel naranja.
Una versión con foto pone la pregunta sobre un panel naranja.

Un degradado que da unidad a la página

El logo va del morado al amarillo pasando por el naranja, y el mismo degradado rellena el botón principal y las formas diagonales de los frames de presentación. En la barra naranja de las versiones con foto, la marca pasa a blanco, así que sigue legible sin cambiar de forma.

El mismo layout con una foto de un técnico con chaqueta de alta visibilidad caminando por el pasto alto entre paneles solares al atardecer.
El mismo layout con una segunda fotografía.
Primer plano de una computadora portátil inclinada que muestra el hero de escritorio, con una navegación pequeña, el logo en degradado, un titular grande y un botón Simular Desconto, junto al logo y a formas en degradado.
El hero de escritorio centra el logo, la pregunta y un solo botón.