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.
Unirse a la comunidad
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.
Vista previa del diseño de sitio web de currículum
1 / 4
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.
| Área | Qué contiene | Cómo adaptarlo |
|---|---|---|
| Perfil y experiencia | Una 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 seleccionados | Categorí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 candidato | Recuentos 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.

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.

| Celda | Qué nombra la descripción | Qué añadiría una muestra de trabajo real |
|---|---|---|
| Prototipo | Interfaces web responsivas, de escritorio y móviles. | La tarea específica, la pantalla y la contribución personal. |
| Artefacto publicado | Paneles de control, muros de KPI y salas de decisión. | Qué decisión soporta la interfaz y un enlace para inspeccionarla. |
| Presentación | Entrega en HTML, PDF y PPTX editable. | El tema de la presentación y el formato realmente disponible. |
| Animación | HyperFrames 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
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 sugeridoCrea 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.
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.
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.
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.



