Sitio web
Diseño de sitio web para redacción técnica
Quartz es un diseño de sitio web de redacción técnica que convierte el concepto de un espacio de trabajo editorial en un recorrido enfocado desde el borrador hasta la publicación.
Diseñado para
- Equipos de redacción técnicaPresenta un flujo de trabajo enfocado para redactar, revisar y publicar.
- Páginas de producto de documentaciónExplica un producto de escritura especializado sin acumular funciones genéricas.
- Conceptos de SaaS editorialDefine el posicionamiento del producto en torno a una filosofía de publicación distintiva.
- Flujos de trabajo centrados en el tecladoMuestra cómo las interacciones enfocadas apoyan a quienes escriben y valoran la estructura.
Aspectos destacados
- Hero editorialUna apertura contenida plantea el producto en torno a la calidad de la escritura.
- Secuencia del flujo de trabajoCinco celdas numeradas de funciones conectan esquema, revisión, exportación, historial e integraciones.
- Límites del productoLas comparaciones de lo que hace y no hace dan al posicionamiento una especificidad poco habitual.
- Estructura de planesTres planes orientados al público conectan los precios con el contexto del equipo.
Galería
1 / 4
Diseño de sitio web de redacción técnica de Quartz
Quartz se presenta como un espacio de trabajo para redactores técnicos que quieren pasar del esquema al borrador, la revisión y la publicación sin soltar el teclado. La página es un sitio web conceptual y no prueba que exista un servicio de producción conectado, así que su mayor aportación es el planteamiento editorial: da a una herramienta especializada un punto de vista antes de enumerar sus capacidades.
La frase inicial ocupa un gran titular en Instrument Serif alineado a la izquierda, con énfasis en cursiva en “docs nobody read”. Su ancho máximo de 16ch convierte la larga propuesta en una columna compacta, mientras que el párrafo de apoyo usa una medida más amplia de 52ch. Sobre el lienzo cálido de blanco roto, el botón oscuro Request access contrasta con la acción más discreta Read the manual y con una insignia de atajo impresa. Esto prioriza la premisa de escritura, aunque esos controles no realizan las tareas anunciadas del espacio de trabajo.
Tareas que respalda el diseño
La página aborda varias tareas web relacionadas, pero las mantiene ligadas a la premisa de Quartz. Quien la visita puede entender para quién es el producto, cómo se ordena su flujo de trabajo imaginado, qué se niega a ser y cómo difieren los planes según el público. Esas tareas se comunican con etiquetas breves y contrastes repetidos, no con una introducción cargada de funciones.
Explicar un flujo de escritura
La fuente nombra cinco etapas: “OUTLINE”, “REVIEW”, “EXPORT”, “HISTORY” y “STACK”. Esa secuencia permite seguir el camino propuesto desde dar forma a un documento hasta conectarlo con las herramientas que lo rodean. La contrapartida es que la página describe una narrativa lineal; quien busque capacidades no relacionadas debe esperar a secciones posteriores.
Hacer memorables los límites del producto
Los pares “DOESN'T” y “DOES” convierten el posicionamiento en comparaciones visibles. “Auto-generate three-column landing pages” se contrapone a publicar lo que escribió el redactor, y la sincronización de bases de datos se contrapone a escribir Markdown en disco. El lenguaje tachado hace visualmente activas las exclusiones, pero también da al concepto un tono deliberadamente tajante.
Ajustar los planes a cada público
“Solo”, “Studio” y “Press” se presentan como contextos organizativos distintos, no como una simple escalera de precios. La página asocia Solo con un redactor, Studio con equipos de documentación de hasta doce personas y Press con editoriales y grandes organizaciones. Así la estructura de planes resulta legible incluso antes de estudiar las listas de funciones.
La página pasa de la escritura al posicionamiento
El diseño sigue el mismo orden que la historia del producto. Un hero grande establece la voz, y luego la página presenta el editor antes de pasar por revisión, exportación, historial e integraciones. Después, la sección de contraste afirma lo que Quartz no es, y la de precios traduce la postura editorial en tres ofertas para públicos concretos. La secuencia hace que la página se lea como un argumento y no como un catálogo.
Empezar por el editor
La primera sección numerada es “01 / OUTLINE”, con el encabezado “An outline that doubles as a typewriter.” Su texto menciona arrastrar encabezados, el modo de enfoque y el resto de la página atenuado. Estos detalles unen estructura y concentración, aunque siguen siendo un comportamiento de interacción propuesto y no verificado en ejecución.
Ampliar al contexto de equipo
Las siguientes secciones presentan la revisión integrada en el documento, la exportación a Markdown, el historial de revisiones y las integraciones. Las etiquetas mantienen compacta cada idea, mientras que las descripciones añaden relaciones concretas: los comentarios están anclados a una línea, un documento se describe como lector y escritor de la misma estructura .md, y los ID de tickets aparecen relacionados con un panel lateral. Cada adición amplía el espacio de trabajo imaginado, pero también aumenta el número de afirmaciones de producto que una implementación real tendría que respaldar.
Cerrar con una decisión comercial
La banda de precios compara Solo a $9 al mes, Studio a $22 por puesto al mes y Press como “Talk / to us”. Las distintas unidades de facturación y etiquetas de público distinguen a un redactor, un equipo de documentación y una editorial. Solo y Press enumeran cuatro funciones cada uno; Studio enumera cinco y recibe la insignia de recomendación. Press cambia el tema hacia SSO, autoalojamiento, canalizaciones de exportación y soporte, en lugar de limitarse a ofrecer una lista más larga. Todos los precios y capacidades son posicionamiento de ejemplo.
Límites visibles del diseño y de las capacidades
Quartz es un concepto de marketing, no un espacio de trabajo de escritura implementado. Su único script revela secciones mediante IntersectionObserver; no gestiona botones, atajos mostrados, edición, revisiones, exportaciones ni creación de cuentas. Los enlaces nativos llevan a Surfaces, What It Isn't y Plans, mientras que Changelog no tiene sección correspondiente y los enlaces del pie son marcadores de posición. Por tanto, la página demuestra posicionamiento visual, no integraciones funcionales, sincronización cifrada, publicación ni ofertas de precios reales. Esos servicios requerirían implementación y pruebas por separado.
Atribución de la fuente
OpenDesign distribuye este ejemplo en su biblioteca Community. La documentación de origen atribuye a Taste Skill by Leonxlnx su guía de minimalismo editorial y ritmo espacial: https://github.com/Leonxlnx/taste-skill. Es un crédito de distribución, no una afirmación de autoría original independiente de OpenDesign. El manifiesto incluido declara MIT; no establece derechos independientes sobre cada recurso representado.
Cómo crear un diseño de sitio web para redacción técnica en OpenDesign
Define el marco editorial
Empieza con un hero con un gran titular en una columna estrecha para un espacio de trabajo de redacción técnica. Usa una propuesta extensa, un párrafo de apoyo contenido y dos acciones con intenciones distintas, siguiendo el patrón de Quartz con “Request access” y “Read the manual”. Mantén el objetivo de la página centrado en escribir y publicar, en lugar de presentar un panel de software genérico.
Prompt sugeridoCrea un sitio web de marketing continuo de una sola página para Quartz, un espacio de trabajo de redacción técnica ilustrativo. Usa un lienzo cálido #FBFBFA, texto de titulares en Instrument Serif con énfasis en cursiva, texto de cuerpo en Inter Tight y metadatos en JetBrains Mono. Añade una barra de navegación flotante, un titular del hero alineado a la izquierda de 16ch y un párrafo de apoyo de 52ch, un botón oscuro Request access y una acción más discreta Read the manual. Construye una cuadrícula editorial de seis columnas con cinco celdas numeradas para esquema, revisión, exportación, historial e integraciones; haz que las dos primeras ocupen dos filas y limita los chips pálidos a las etiquetas de categoría. A continuación, añade tres afirmaciones emparejadas Doesn't/Does y tres planes de ejemplo: Solo $9/month, Studio $22/seat/month con una etiqueta de recomendación y Press Talk/to us. Conserva las longitudes de las listas de funciones de cuatro/cinco/cuatro y los tratamientos diferenciados de las acciones. Apila la cuadrícula y los precios por debajo de 880px. Usa animación de aparición local con compatibilidad para movimiento reducido y marcadores de navegación claramente etiquetados. Muestra el texto de atajos y flujo de trabajo sin afirmar que existan edición, publicación, integraciones, sincronización cifrada, cuentas ni servicios de backend. Mantén Taste Skill by Leonxlnx como fuente upstream de la guía de diseño y OpenDesign como distribuidor de la comunidad. Este es un brief de recreación sugerido, no el prompt original.
Construye la narrativa en cinco partes
Organiza la historia principal del producto en cinco secciones numeradas: esquema, revisión, exportación, historial y stack. Da a cada sección una relación observable, como comentarios anclados a una línea o Markdown que entra y sale con la misma estructura. Mantén los atajos de teclado y las referencias a integraciones como detalles conceptuales visibles, no como prueba de un comportamiento implementado.
Afina los límites y los planes
Añade una composición emparejada “DOESN'T” y “DOES” para que las exclusiones del producto se lean tan bien como sus promesas. Termina con las columnas Solo, Studio y Press, que conservan la progresión de público de la fuente, los formatos de precio, el orden de las funciones y las diferencias entre acciones. Comprueba que los titulares serif largos, las etiquetas compactas y las listas de funciones sigan siendo legibles cuando las columnas se apilan.
Exportar y obtener un enlace para compartir
Exporta tu diseño terminado y luego usa Compartir en OpenDesign para obtener un enlace. Abre el enlace en una ventana del navegador independiente y comprueba que la versión prevista y sus recursos estén disponibles antes de enviarlo.
Diseño web para estudios de diseño de IA
El diseño web para estudios de diseño de IA de OpenDesign convierte el concepto de un estudio local-first en una landing page editorial que facilita consultar habilidades, experimentos y método.
Sitio web
Diseño de sitios web de infraestructura de IA
Un concepto de landing page de infraestructura de IA de estilo suave, con métricas de ejecución de ejemplo, tarjetas de funciones anidadas, movimiento sutil y una única invitación comercial.
Sitio web
Diseño de sitio web para recorridos nocturnos por Bianjing
Un recorrido nocturno interactivo por una Bianjing imaginada de la era Song, que combina una ciudad fluvial persistente, poesía, faroles y un ritmo de capítulos multilingüe.
Sitio web
Diseño de sitio web de revista brutalista
Diseño de sitio web de revista brutalista convierte una edición con forma de publicación impresa en un sistema web de lectura legible, combinando tipografía contundente con una estructura editorial medida.
Sitio web