Comparative website design challenge: SIGNAL / NOISE editorial magazine and article reader
Comparative website design challenge: SIGNAL / NOISE editorial magazine and article reader is a 35-second Claude Opus motion design reference by @borjaperfra, built around code. GOAL: ### Tu misión Diseña y desarrolla una publicación digital experimental llamada **SIGNAL / NOISE**. Copy this UI motion prompt, keep the creator's frame counts and palette, and adapt the subject for your own launch film.
@borjaperfraView post
Prompt
GOAL:
### Tu misión
Diseña y desarrolla una publicación digital experimental llamada **SIGNAL / NOISE**.
MOTION:
Es una revista independiente sobre tecnología, inteligencia artificial, cultura digital y el futuro de internet.
Queremos una web que pueda competir visualmente con los mejores proyectos de diseño editorial digital. Una experiencia con personalidad, no otra landing genérica de SaaS.
Tienes libertad creativa para decidir la dirección de arte, tipografía, composición, paleta cromática, animaciones y sistema visual.
No quiero que me expliques cómo diseñarías la web. **Quiero que la construyas.**
### Producto
La web tendrá cuatro componentes principales:
**1. Portada editorial**
Una primera pantalla que establezca inmediatamente la identidad de la publicación.
Debe incluir el nombre SIGNAL / NOISE, el número de edición (ISSUE 001), una pieza editorial protagonista y una composición visual que resulte memorable.
**2. Índice de artículos**
Una selección de seis artículos ficticios, pero verosímiles, sobre tecnología y cultura digital.
No uses seis tarjetas idénticas. Diseña una composición editorial que permita distinguir historias protagonistas, artículos secundarios y contenidos breves.
**3. Experiencia de lectura**
Desarrolla al menos un artículo completo, al que se pueda acceder desde la portada.
Título del artículo: "The Internet Is Becoming a Place Without People".
Incluye una entradilla, varios apartados, citas destacadas y algún recurso visual integrado en el contenido.
Debe ser una experiencia de lectura agradable y cuidada.
**4. Navegación e interacciones**
Implementa navegación funcional, transiciones, estados hover, indicadores visuales y pequeños detalles de interacción.
Las animaciones deben aportar algo a la experiencia, no ser decoración gratuita.
### Requisitos técnicos
- React, TypeScript y Tailwind CSS.
- Puedes utilizar librerías de animación e iconos.
- Diseño responsive para escritorio y móvil.
- Accesibilidad básica, navegación por teclado y soporte para `prefers-reduced-motion`.
- Nada de interfaces estáticas que solo aparenten funcionar.
- No uses capturas de otras webs como sustituto del diseño.
- Puedes usar fotografías o recursos visuales externos, pero intégralos en una dirección artística coherente.
- El proyecto debe poder ejecutarse localmente.
### Criterios de diseño
Buscamos:
- Una identidad visual distintiva y reconocible.
- Excelente jerarquía tipográfica.
- Composiciones que aprovechen el espacio con intención.
- Buen equilibrio entre experimentación y usabilidad.
- Microinteracciones cuidadas.
- Consistencia entre portada, índice y artículo.
- Una versión móvil diseñada, no simplemente comprimida.
Evita:
- El aspecto genérico de una plantilla.
- Las seis tarjetas perfectamente alineadas.
- Gradientes decorativos sin función.
- Efectos llamativos que entorpezcan la lectura.
- Componentes de UI innecesarios.
- La apariencia típica de una landing de producto de IA.
### Libertad creativa
No tienes que seguir ninguna referencia visual concreta.
Decide tú qué significa SIGNAL / NOISE como identidad editorial y cómo debe expresarse visualmente.
Puedes ser experimental, minimalista, brutalista, sofisticado o adoptar una dirección completamente diferente.
Lo importante es que tus decisiones tengan sentido como conjunto.
### Entregable
Construye el proyecto completo.
Al finalizar, asegúrate de que funciona y proporciona una breve explicación (máximo 200 palabras) de las decisiones principales de dirección artística.
**No me hagas preguntas ni solicites aprobación de la dirección visual. Toma las decisiones y ejecuta.
Author original
### Tu misión
Diseña y desarrolla una publicación digital experimental llamada **SIGNAL / NOISE**.
Es una revista independiente sobre tecnología, inteligencia artificial, cultura digital y el futuro de internet.
Queremos una web que pueda competir visualmente con los mejores proyectos de diseño editorial digital. Una experiencia con personalidad, no otra landing genérica de SaaS.
Tienes libertad creativa para decidir la dirección de arte, tipografía, composición, paleta cromática, animaciones y sistema visual.
No quiero que me expliques cómo diseñarías la web. **Quiero que la construyas.**
### Producto
La web tendrá cuatro componentes principales:
**1. Portada editorial**
Una primera pantalla que establezca inmediatamente la identidad de la publicación.
Debe incluir el nombre SIGNAL / NOISE, el número de edición (ISSUE 001), una pieza editorial protagonista y una composición visual que resulte memorable.
**2. Índice de artículos**
Una selección de seis artículos ficticios, pero verosímiles, sobre tecnología y cultura digital.
No uses seis tarjetas idénticas. Diseña una composición editorial que permita distinguir historias protagonistas, artículos secundarios y contenidos breves.
**3. Experiencia de lectura**
Desarrolla al menos un artículo completo, al que se pueda acceder desde la portada.
Título del artículo: "The Internet Is Becoming a Place Without People".
Incluye una entradilla, varios apartados, citas destacadas y algún recurso visual integrado en el contenido.
Debe ser una experiencia de lectura agradable y cuidada.
**4. Navegación e interacciones**
Implementa navegación funcional, transiciones, estados hover, indicadores visuales y pequeños detalles de interacción.
Las animaciones deben aportar algo a la experiencia, no ser decoración gratuita.
### Requisitos técnicos
- React, TypeScript y Tailwind CSS.
- Puedes utilizar librerías de animación e iconos.
- Diseño responsive para escritorio y móvil.
- Accesibilidad básica, navegación por teclado y soporte para `prefers-reduced-motion`.
- Nada de interfaces estáticas que solo aparenten funcionar.
- No uses capturas de otras webs como sustituto del diseño.
- Puedes usar fotografías o recursos visuales externos, pero intégralos en una dirección artística coherente.
- El proyecto debe poder ejecutarse localmente.
### Criterios de diseño
Buscamos:
- Una identidad visual distintiva y reconocible.
- Excelente jerarquía tipográfica.
- Composiciones que aprovechen el espacio con intención.
- Buen equilibrio entre experimentación y usabilidad.
- Microinteracciones cuidadas.
- Consistencia entre portada, índice y artículo.
- Una versión móvil diseñada, no simplemente comprimida.
Evita:
- El aspecto genérico de una plantilla.
- Las seis tarjetas perfectamente alineadas.
- Gradientes decorativos sin función.
- Efectos llamativos que entorpezcan la lectura.
- Componentes de UI innecesarios.
- La apariencia típica de una landing de producto de IA.
### Libertad creativa
No tienes que seguir ninguna referencia visual concreta.
Decide tú qué significa SIGNAL / NOISE como identidad editorial y cómo debe expresarse visualmente.
Puedes ser experimental, minimalista, brutalista, sofisticado o adoptar una dirección completamente diferente.
Lo importante es que tus decisiones tengan sentido como conjunto.
### Entregable
Construye el proyecto completo.
Al finalizar, asegúrate de que funciona y proporciona una breve explicación (máximo 200 palabras) de las decisiones principales de dirección artística.
**No me hagas preguntas ni solicites aprobación de la dirección visual. Toma las decisiones y ejecuta.
Questions
What is this ui motion prompt for?
It is a Claude Opus motion design brief for “Comparative website design challenge: SIGNAL / NOISE editorial magazine and article reader”. Paste it into Claude and keep the timings already written in the prompt.
Where is the original film?
The creator is @borjaperfra. Use View post to open the X video this prompt belongs to.