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

Autopost.ai

Diseño de interfaz de una app web que genera artículos con IA para sitios en WordPress: el panel, la configuración inicial, el editor de artículos y los modos claro y oscuro.

Mi papel
Flujos de producto y diseño de interfaz
Estado del proyecto
Diseño de interfaz · Archivo de Figma y de Dribbble
Portada de presentación de Autopost, del archivo de diseño original.
Portada de presentación del archivo original.

01

Mi contribución

Autopost.ai es una app web en inglés para generar artículos con IA y prepararlos para un sitio en WordPress. Mi trabajo aquí cubre la interfaz, desde la configuración inicial hasta la pantalla donde se revisa y se programa un artículo.

El shot de Dribbble titulado AI Content and SEO Generator muestra el mismo producto, por eso sus pantallas se integran en este caso. Las cifras de uso, los nombres y los títulos de los artículos son datos de ejemplo.

Un recorrido por las pantallas del diseño, no una grabación: onboarding, el panel y su tema oscuro.
Panel de Autopost.ai en modo claro con una barra lateral, dos acciones Generate with AI, costos de uso, información de la suscripción, tres contadores y un gráfico de barras de tokens por modelo.
El panel pone la creación de artículos junto al plan y al uso.

02

Poner el plan y el uso a la vista

El panel empieza con las dos cosas que alguien viene a hacer: crear varios artículos a la vez o crear uno solo. Las dos están arriba en la primera columna, con el mismo botón Generate with AI, mientras que los contadores de artículos, temas y palabras recorren la parte superior de la segunda.

Debajo, los costos de uso por modelo, los datos de la suscripción y un gráfico de tokens por modelo responden a la pregunta que acompaña a cualquier herramienta de IA de pago: cuánto se ha usado hasta ahora. Manage subscription está junto al plan, así que una consulta puede convertirse en una acción en la misma pantalla.

El mismo panel en modo oscuro, con botones blancos, títulos lila y barras pálidas en el gráfico.
El modo oscuro mantiene el layout y desplaza el énfasis.

03

Conectar primero los modelos

La configuración ocurre sobre el panel desenfocado, así que el producto ya se ve detrás del formulario. El paso Setup your APIs pide una clave para Midjourney y otra para GPT-3. Debajo de cada campo, una sola línea indica dónde iniciar sesión y enlaza con la clave, y Back y Next mantienen el paso dentro de una secuencia.

Diálogo Setup your APIs sobre un panel desenfocado, con campos para las claves de Midjourney y GPT-3, enlaces de ayuda y los botones Back y Next.
El paso de configuración indica de dónde sale cada clave de API.
Computadora portátil con el editor de artículos en pantalla, sobre una repisa de concreto: ajustes de generación a la izquierda, un artículo sobre correr un maratón con su ilustración en el centro y ajustes de publicación a la derecha.
El editor prepara, revisa y programa un artículo generado.

04

Revisar antes de publicar

El editor de artículos tiene tres columnas. La de la izquierda contiene el tema y los ajustes de generación, como la cantidad de palabras, el tipo de artículo y el tono. La del centro muestra el artículo generado con su imagen. La de la derecha decide qué pasa después: publicar, guardar como borrador, programar o programar automáticamente, con la opción de elegir autor y cuentas de redes sociales, y un botón para regenerar.

De vuelta en la lista, pestañas y etiquetas separan los artículos publicados, programados, en borrador y en generación, y un artículo que aún se está generando muestra su progreso en la tarjeta.

Computadora portátil que flota sobre un fondo gris pizarra oscuro y muestra la pantalla Articles, con tarjetas marcadas como publicado, programado, en generación y borrador.
La lista de artículos etiqueta cada tarjeta según su estado y muestra el progreso mientras se genera.

05

Explorar las dos apariencias

Las pantallas existen en claro y en oscuro. El layout se mantiene mientras cambia el énfasis: en modo oscuro los botones pasan a blanco, los títulos a lila y las barras del gráfico a un tono pálido, así que el índigo de la versión clara no tiene que sostener solo el contraste.

Collage inclinado de pantallas claras de Autopost: el editor, una cuadrícula de artículos en borrador, el panel, los ajustes de generación, el centro de ayuda y una tarjeta de bienvenida.
Del shot AI Content and SEO Generator: editor, borradores, panel y ajustes juntos.
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 36 Diseño de app web y panel

Autopost.ai

Diseño de interfaz de una app web que genera artículos con IA para sitios en WordPress: el panel, la configuración inicial, el editor de artículos y los modos claro y oscuro.

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

Verlo en Dribbble

Portada de presentación de Autopost, del archivo de diseño original.
Portada de presentación del archivo original.

Una interfaz para generar y publicar artículos con IA

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

Mi contribución

Autopost.ai es una app web en inglés para generar artículos con IA y prepararlos para un sitio en WordPress. Mi trabajo aquí cubre la interfaz, desde la configuración inicial hasta la pantalla donde se revisa y se programa un artículo.

El shot de Dribbble titulado AI Content and SEO Generator muestra el mismo producto, por eso sus pantallas se integran en este caso. Las cifras de uso, los nombres y los títulos de los artículos son datos de ejemplo.

Un recorrido por las pantallas del diseño, no una grabación: onboarding, el panel y su tema oscuro.
Panel de Autopost.ai en modo claro con una barra lateral, dos acciones Generate with AI, costos de uso, información de la suscripción, tres contadores y un gráfico de barras de tokens por modelo.
El panel pone la creación de artículos junto al plan y al uso.

Poner el plan y el uso a la vista

El panel empieza con las dos cosas que alguien viene a hacer: crear varios artículos a la vez o crear uno solo. Las dos están arriba en la primera columna, con el mismo botón Generate with AI, mientras que los contadores de artículos, temas y palabras recorren la parte superior de la segunda.

Debajo, los costos de uso por modelo, los datos de la suscripción y un gráfico de tokens por modelo responden a la pregunta que acompaña a cualquier herramienta de IA de pago: cuánto se ha usado hasta ahora. Manage subscription está junto al plan, así que una consulta puede convertirse en una acción en la misma pantalla.

El mismo panel en modo oscuro, con botones blancos, títulos lila y barras pálidas en el gráfico.
El modo oscuro mantiene el layout y desplaza el énfasis.

Conectar primero los modelos

La configuración ocurre sobre el panel desenfocado, así que el producto ya se ve detrás del formulario. El paso Setup your APIs pide una clave para Midjourney y otra para GPT-3. Debajo de cada campo, una sola línea indica dónde iniciar sesión y enlaza con la clave, y Back y Next mantienen el paso dentro de una secuencia.

Diálogo Setup your APIs sobre un panel desenfocado, con campos para las claves de Midjourney y GPT-3, enlaces de ayuda y los botones Back y Next.
El paso de configuración indica de dónde sale cada clave de API.
Computadora portátil con el editor de artículos en pantalla, sobre una repisa de concreto: ajustes de generación a la izquierda, un artículo sobre correr un maratón con su ilustración en el centro y ajustes de publicación a la derecha.
El editor prepara, revisa y programa un artículo generado.

Revisar antes de publicar

El editor de artículos tiene tres columnas. La de la izquierda contiene el tema y los ajustes de generación, como la cantidad de palabras, el tipo de artículo y el tono. La del centro muestra el artículo generado con su imagen. La de la derecha decide qué pasa después: publicar, guardar como borrador, programar o programar automáticamente, con la opción de elegir autor y cuentas de redes sociales, y un botón para regenerar.

De vuelta en la lista, pestañas y etiquetas separan los artículos publicados, programados, en borrador y en generación, y un artículo que aún se está generando muestra su progreso en la tarjeta.

Computadora portátil que flota sobre un fondo gris pizarra oscuro y muestra la pantalla Articles, con tarjetas marcadas como publicado, programado, en generación y borrador.
La lista de artículos etiqueta cada tarjeta según su estado y muestra el progreso mientras se genera.

Explorar las dos apariencias

Las pantallas existen en claro y en oscuro. El layout se mantiene mientras cambia el énfasis: en modo oscuro los botones pasan a blanco, los títulos a lila y las barras del gráfico a un tono pálido, así que el índigo de la versión clara no tiene que sostener solo el contraste.

Collage inclinado de pantallas claras de Autopost: el editor, una cuadrícula de artículos en borrador, el panel, los ajustes de generación, el centro de ayuda y una tarjeta de bienvenida.
Del shot AI Content and SEO Generator: editor, borradores, panel y ajustes juntos.