Sitio web
Diseño de portafolio creativo
El portafolio ficticio de Maya Rowan conecta proyectos, métodos de trabajo y notas.
Ideas de diseño para
- Portafolios creativosExplicar una trayectoria mediante proyectos y métodos de trabajo.
- Sitios de diseñadores independientesRelacionar lo que creas con tu manera de abordar un encargo.
- Páginas de presentación de estudiosOfrecer un punto de partida concreto a posibles colaboradores.
Aspectos destacados del portafolio
- Cinco ideas de proyectoCada tarjeta combina un nombre con una breve explicación de su propósito.
- Un método de tres etapasInvestigación, prototipos y sistemas reutilizables explican el enfoque.
- Notas junto al trabajo terminadoLas notas de campo y las preguntas abiertas muestran otra faceta del proceso.
Vista previa del diseño de portafolio creativo
1 / 5
Un portafolio que explica más que sus proyectos
El portafolio de Maya Rowan toma una decisión concreta: da a los nombres de los proyectos el peso visual que muchos portafolios reservan a las capturas. La declaración inicial, «I make ideas visible», conduce a una cuadrícula de tarjetas tipográficas, no a un muro de maquetas de dispositivos. Por eso, las descripciones son esenciales para explicar en qué consiste cada trabajo.
La misma estructura editorial se repite en tres escalas: las secciones numeradas organizan la página, los nombres grandes distinguen los proyectos y las etiquetas pequeñas identifican las notas de trabajo. Esto convierte el sitio en una referencia útil de diseño de portafolios creativos incluso antes de sustituir al personaje ficticio. Lo importante es cómo se relacionan esos niveles, no el rojo o el azul elegidos.
| Sección | Contenido visible | Pregunta que responde |
|---|---|---|
| Work | Cinco proyectos con nombre y descripciones breves. | ¿Qué tipo de cosas crea esta diseñadora? |
| Practice | Find the Signal, Build to Learn y Leave a System. | ¿Cómo aborda un encargo que todavía tiene incógnitas? |
| Notes | Una nota de campo, un registro de prototipo y una pregunta abierta. | ¿En qué piensa la diseñadora entre proyectos? |
| Contact | Una invitación final a iniciar una conversación. | ¿Cómo puede dar el siguiente paso una persona interesada en colaborar? |
Por qué las tarjetas se leen como carteles
La cuadrícula de proyectos para escritorio es deliberadamente desigual: sus columnas mantienen una proporción de 1.2:0.8, de modo que la tarjeta izquierda ocupa aproximadamente el 60% del ancho disponible. Cada tarjeta mide al menos 420px de alto. Así queda espacio para un título de líneas muy juntas en la parte superior y una frase explicativa independiente cerca del borde inferior.
Un título de ocho caracteres de ancho cambia el ritmo
El código limita los títulos de los proyectos a 8ch y utiliza una altura de línea de 0.92. «Field Notes for Better Cities» se convierte en un bloque alto en lugar de una sola línea. Ese ancho reducido le da un ritmo de cartel; no es un salto de línea accidental provocado por una captura pequeña.
La descripción aporta el significado concreto
La primera tarjeta presenta un mapa participativo y explica que pequeñas observaciones se convierten en señales sobre la vida urbana. Eso informa mucho más que «una experiencia cartográfica innovadora». La descripción está situada a 24px del borde inferior: el lector encuentra la explicación en el mismo lugar, aunque cambie el color de la tarjeta.
De los proyectos seleccionados a un método repetible
La sección Practice invierte el énfasis de la cuadrícula de proyectos. Una cita grande ocupa la columna pequeña y tres explicaciones numeradas ocupan la más ancha. Cada explicación tiene su propia línea superior y una columna fija para el número. El recorrido pasa así de explorar ideas individuales a leer una secuencia de acciones.
Find the Signal identifica los puntos de partida
La primera fila enumera personas, restricciones, lenguaje y comportamiento. Compárala con Field Notes, que trata sobre observaciones de ciudades: la descripción del proyecto identifica el material, mientras que esta fila explica qué buscaría la diseñadora en él. La página sugiere esa relación; no documenta un estudio de investigación realizado.
Build to Learn explica para qué sirve el prototipo
La segunda fila presenta un prototipo funcional como una forma de responder preguntas. No es lo mismo que prometer una interfaz final pulida. Encaja con la combinación de IA ambiental, sistemas editoriales y herramientas de decisión grupal del portafolio, donde explorar el comportamiento forma parte del problema de diseño.
Leave a System concreta la entrega
La última fila menciona componentes, tokens y pautas, en lugar de terminar con «lanzar». Así concreta el resultado propuesto: otra persona debería poder continuar a partir de esas decisiones. En un caso real, este sería el lugar para respaldar la afirmación con un componente de ejemplo o una breve regla de uso.
Una referencia de portafolio para proyectos de hackathon
OpenDesign creó este portafolio ficticio como ejemplo oficial del hackathon. Para una propuesta propia, su idea más reutilizable es separar el propósito del proyecto, las decisiones que lo sustentan y lo que sigue abierto. Una tarjeta puede presentar la propuesta, mientras que una explicación enlazada aporta las pruebas concretas.
Dónde termina el concepto de portafolio
Por debajo de 760px, el código convierte la cuadrícula de proyectos y la sección Practice en una sola columna, pero también oculta los enlaces de navegación. Es una limitación concreta que conviene resolver en un portafolio real: conservar un menú compacto de secciones en lugar de obligar a recorrer todos los proyectos para llegar a Contact.
Los proyectos ficticios no son trabajos documentados para clientes. Las notas son encabezados, no un sistema de publicación con contenido, y Contact apunta a [email protected]. Sustituye esos ejemplos y comprueba los destinos antes de compartir un portafolio real.
Cómo crear un diseño de portafolio creativo en OpenDesign
Describe los proyectos antes de elegir sus colores
Prepara varios nombres de proyecto y una frase para cada uno que explique su público y propósito. Añade tu función cuando se conozca. Así OpenDesign tendrá material suficiente para crear tarjetas que se diferencien por su contenido, no solo por su aspecto.
Prompt sugeridoCrea un diseño de sitio web de portafolio creativo con una presentación, cinco tarjetas de proyectos seleccionados, un método de tres etapas, notas de trabajo y contacto. Usa tipografía editorial grande, un fondo neutro cálido y algunos colores contrastantes en las tarjetas. Cada proyecto debe incluir un nombre, un propósito y mi función. Utiliza marcadores identificados cuando falte información. No inventes clientes ni resultados. Mantén accesible la navegación Work, Practice, Notes y Contact en pantallas pequeñas.
Conecta un proyecto con la sección del método
Pide a OpenDesign que muestre cómo un proyecto real pasó de una pregunta a un prototipo y a una entrega. Sustituye el lenguaje genérico de servicios por ese ejemplo. Mantén breve el resto de la descripción del método para que apoye al trabajo sin restarle protagonismo.
Prueba las rutas de lectura y contacto
Lee las tarjetas sin fijarte en sus colores: cada una debería seguir describiendo una idea distinta. Después prueba la navegación entre secciones y el enlace de contacto real. Comprueba que los títulos grandes salten de línea sin ocultar las descripciones en móviles.
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 de sitio web de empleo
Un estudio de empleo de Kimi construido a partir de ocho escenas lunares, con transiciones vinculadas al desplazamiento y un proceso de solicitud ilustrado.
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.
Sitio web
Diseño de Panel Personal
Life System coloca una puntuación semanal, métricas de mapa corporal, ritmos diarios y cinco experimentos en un panel de escritorio. Explora el diseño en detalle.
Aplicación de escritorio
Diseño de presentación de producto
Un pitch de espacio de trabajo nativo para agentes en 3 diapositivas.
Diapositivas