Sitio web

Diseño de sitio web de currículum

El currículum ficticio de Tom Goodman combina experiencia con gráficos de capacidades y trabajos seleccionados. Explora su orden de lectura en dos columnas, tarjetas de trabajo compactas y una maquetación de impresión independiente.

OpenDesign HackathonDiseño y producción
Ejemplo
Diseño de sitio web de currículum4 secciones
Currículum de Tom Goodman: currículum completo con perfil, experiencia, trabajos seleccionados, formación, comunidad y resumen del candidato
Currículum completo y resumen del candidato

Ideas de diseño para

  • Sitios web de currículum para diseñadoresPresenta experiencia y trabajos seleccionados en una sola página legible.
  • Páginas de perfil profesionalRespalda una introducción breve con evidencia concreta.
  • Currículums web e impresosConsidera la lectura en pantalla y la salida en papel de forma conjunta.

Aspectos destacados del currículum

  • Dos rutas de lectura paralelasLa experiencia discurre junto a un resumen compacto del candidato.
  • Cinco secciones numeradasPerfil, experiencia, trabajos, formación y comunidad forman la columna principal.
  • Un punto de entrada para impresiónLa página original incluye un control de Imprimir / PDF.

Dos rutas de lectura en un sitio web de currículum

El sitio web de currículum de Tom Goodman trata un perfil profesional como dos documentos vinculados: un relato convencional del trabajo a la izquierda y un panel del candidato a la derecha. Cinco secciones numeradas organizan la columna principal. La barra lateral oscura usa barras, recuentos y un gráfico de distribución del trabajo en lugar de más texto sobre empleos.

El contraste cambia la forma en que se puede escanear el currículum. Los nombres de los puestos y las fechas aportan cronología; la barra lateral ofrece un resumen rápido y de apariencia cuantitativa. La pregunta útil no es si un panel de control parece más impresionante que un currículum, sino si cada visualización comunica algo que el texto adyacente no transmite.

Cómo el currículum distribuye su contenido
ÁreaQué contieneCómo adaptarlo
Perfil y experienciaUna introducción seguida de puestos con fechas y ubicaciones.Facilita la comparación entre puesto, organización y período antes de ampliar la descripción.
Trabajos seleccionadosCategorías Prototipo, Artefacto publicado, Presentación y Animación.Vincula cada categoría de trabajo a una muestra real en lugar de depender solo de la categoría.
Resumen del candidatoRecuentos de impacto, barras de capacidades y un gráfico de perfil operativo.Usa esta área para evidencia que pueda explicarse brevemente y rastrearse hasta su fuente.

Qué comunican realmente cinco barras de capacidades

El panel de capacidades contiene cinco barras etiquetadas, con puntuaciones que van de 88 a 96. Las etiquetas están a la izquierda, los valores a la derecha y las barras rellenas se extienden debajo de ellas. El verde brillante vincula cada valor con su relleno, mientras que la cuadrícula oscura proporciona un fondo común.

Las cinco barras de capacidades a una escala legible, aisladas de la barra lateral del candidato original. Abre la imagen para ver la resolución completa.
Las cinco barras de capacidades a una escala legible, aisladas de la barra lateral del candidato original. Abre la imagen para ver la resolución completa.

Los valores se agrupan en un rango de ocho puntos

Diseño de producto es 96, Sistemas de diseño 94, Prototipado rápido 93, Animación y narrativa 88, y Orquestación de agentes 91. En una barra de 100 puntos, incluso la más corta está casi completa. El resultado visual enfatiza la amplitud y las valoraciones consistentemente altas; hace poco por mostrar una diferencia significativa entre las habilidades.

El orden y la longitud cuentan historias distintas

Las barras no están ordenadas por puntuación: Orquestación de agentes con 91 sigue a Animación y narrativa con 88. El orden es, por tanto, una lista de capacidades, no una clasificación. Si el lector necesita comparar puntos fuertes, elige un orden explícito y explica qué miden los valores.

Una cuadrícula de cuatro celdas de trabajos bajo la experiencia

Trabajos seleccionados comprime cuatro categorías de artefactos en una cuadrícula bordeada de dos por dos. Cada celda usa una breve categoría en negrita seguida de una descripción más pequeña. Es un índice compacto de entregables, no una galería de proyectos individuales: ninguna de las cuatro etiquetas identifica un encargo concreto.

Trabajos seleccionados: cuatro celdas separan la categoría del artefacto de su explicación. Esta es una captura directa del detalle HTML.
Trabajos seleccionados: cuatro celdas separan la categoría del artefacto de su explicación. Esta es una captura directa del detalle HTML.
Distintos tipos de información dentro de las cuatro celdas
CeldaQué nombra la descripciónQué añadiría una muestra de trabajo real
PrototipoInterfaces web responsivas, de escritorio y móviles.La tarea específica, la pantalla y la contribución personal.
Artefacto publicadoPaneles de control, muros de KPI y salas de decisión.Qué decisión soporta la interfaz y un enlace para inspeccionarla.
PresentaciónEntrega en HTML, PDF y PPTX editable.El tema de la presentación y el formato realmente disponible.
AnimaciónHyperFrames y salida MP4 determinista.Un ejemplo reproducible y la parte de la producción que gestionaste.

Leer el currículum en pantalla y en papel

Este ejemplo oficial del hackathon de OpenDesign incluye un tratamiento de impresión diferenciado y no solo un botón de imprimir. La fuente cambia varias dimensiones a milímetros, reduce el retrato a 27 × 32 mm, oculta los controles de acción y elimina los manejadores de selección. Esos cambios muestran que la vista de impresión está pensada como una composición independiente.

El móvil cambia el orden de lectura

Por debajo de 880px, el currículum pasa a tener una sola columna principal y el panel del candidato se integra en el flujo del documento. En anchos más pequeños, la barra lateral también se colapsa a una sola columna. La narrativa profesional aparece, por tanto, antes que el resumen cuantitativo, en lugar de comprimir ambos en franjas paralelas estrechas.

Un botón de impresión es solo el comienzo

El control original invoca la impresión del navegador. El espaciado específico para impresión puede ayudar, pero una descripción de puesto larga puede seguir desplazando un encabezado o una cuadrícula a través de un salto de página. Prueba con tu texto real y el tamaño de papel elegido; no des por sentado que la muestra ficticia demuestra que el currículum terminado cabe en una página.

Qué comprobar antes de usar esta maquetación de currículum

Tom Goodman es un perfil ficticio, y los datos de empleo, recuentos de comunidad y puntuaciones de habilidades son contenido de muestra. La página demuestra una maquetación de currículum y un punto de entrada para impresión, no logros personales verificados. Su patrón útil es separar cronología, entregables y evidencia de respaldo; la credibilidad de una versión real depende de reemplazar los tres con información precisa.

Cómo crear un diseño de sitio web de currículum en OpenDesign

  1. Descargar e instalar OpenDesign

    Descarga la aplicación de escritorio, instálala y completa la configuración. Crea un proyecto para tu diseño.

    Descargar OpenDesign
  2. Aporta experiencia real antes de aplicar estilos

    Proporciona a OpenDesign tus puestos, fechas, contribuciones y enlaces a trabajos. Si estás explorando la maquetación antes de contar con esa información, solicita marcadores de posición explícitos en lugar de una trayectoria profesional inventada.

    Prompt sugerido

    Crea un diseño de sitio web de currículum con una columna principal para perfil, experiencia, trabajos seleccionados, habilidades y contribuciones a la comunidad. Añade una barra lateral oscura y compacta para datos de contacto y puntos destacados con fuente. Usa un encabezado con el nombre destacado y acentos verdes contenidos. Mantén puesto, organización y fechas juntos. Usa marcadores de posición claramente señalados para los datos que falten; no inventes empleadores, métricas ni porcentajes de habilidades. Incluye una acción de impresión desde el navegador y estilos optimizados para impresión.

  3. Vincula los puestos a muestras de trabajo

    Solicita una entrada de trabajos seleccionados que explique tu contribución y apunte a un artefacto real. Lee la página una vez sin la barra lateral: la columna principal debe seguir explicando qué haces y qué has creado.

  4. Comprueba pantallas estrechas y la vista previa de impresión

    Confirma que la barra lateral sigue a la introducción en un orden de lectura coherente en móvil. Abre la vista previa de impresión e inspecciona los saltos de página, el contraste del fondo y los enlaces que pueden quedar poco claros en papel. Ajusta la maquetación antes de dar la versión impresa por lista para enviar.

  5. 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.

OpenDesign Desktop

Un sistema de diseño. Tu marca, coherente en cada resultado

En el Vibe Design Workspace completo, aplica las mismas reglas de marca a sitios web, presentaciones, prototipos interactivos, dashboards, imágenes y vídeo HTML. Conecta Codex, Claude Code, Cursor y otros agentes de código locales y crea gratis.

  • Web, presentaciones, prototipos, dashboards, imágenes y vídeo
  • Más de 140 sistemas de diseño y la biblioteca completa de plantillas y skills
  • Codex local y más de 21 agentes de código · Gratis
Descargar gratis

Disponible para macOS y Windows