YANDiseño de app web y panel
Autopost.ai. Una interfaz para generar y publicar artículos con IA
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.
En resumen
- El problema
- Una aplicación web escribe artículos con IA para sitios WordPress. Quien paga necesita ver cuánto está gastando y seguir decidiendo qué se publica.
- Mi parte
- Diseñé los flujos y la interfaz del producto, desde la conexión con los modelos de IA hasta el dashboard, el editor y la lista de artículos, en modo claro y oscuro.
- La decisión clave
- Poner el uso y el costo junto a los botones de generar, y dejar el último paso a la persona: después de leer el artículo, una columna decide qué sigue, ya sea publicar, guardar como borrador, programar o generar de nuevo.
- Mi papel
- Flujos de producto y diseño de interfaz
- Estado del proyecto
- Diseño de interfaz · Archivo de Figma y de Dribbble
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.
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.
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.
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.
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.
