Spanish (Español) translation by Javier Salesi (you can also view the original English article)
En este tutorial de Adobe XD aprenderás cómo crear un diseño de página web para currículum vitae usando una plantilla. También aprenderás cómo animar partes de sus elementos.
Lo que aprenderás en este tutorial de Adobe XD:
- Cómo usar una plantilla de sitio web para currículum vitae en Adobe XD
- Cómo enmascarar y agrupar objetos
- Cómo animar el desplazamiento horizontal y vertical
- Cómo guardar los componentes
- Cómo crear animaciones durante el estado hover
- Cómo crear prototipos interactivos
Para más inspiración sobre cómo ajustar o mejorar tu diseño final de página web para currículum puedes encontrar muchísimos recursos en GraphicRiver.
Lo que necesitarás:
Necesitarás los siguientes recursos para completar este diseño de CV en Adobe XD:
- Plantilla Amber de sitio web para currículum vitae
- Retrato de un joven atractivo con colores neón
1. Cómo ajustar la plantilla de sitio web para currícululm vitae
Paso 1
Descarga la plantilla Amber de sitio web para currículum y ábrela en Adobe XD. Elimina la mesa de trabajo Amber (light) y enfócate en la restante mesa de trabajo Amber (dark). Selecciona los grupos resaltados en la primera imagen y elimínalos.
Paso 2
Ahora, hagamos algunos pequeños ajustes a esta plantilla de sitio web para currículum. Comienza con la sección de la página Home (inicio). Primero, cambia el texto de Amber de la esquina superior izquierda por Michael (#FFFFFF) Williams (#9013FE).
Ajusta el espaciado en tu menú como se muestra a continación, remplaza el texto grande Amber con Michael y elimina el punto púrpura.
Duplica el botón PORTFOLIO y mueve la copia hacia la derecha, dejando un espacio de 50 px entre estos dos objetos. Selecciona la nueva forma del botón, deshabilita el Relleno y añade un Borde blanco. Establece el Tamaño en 4 y marca el botón Trazo interior. Cambia el texto para este segundo botón a "HIRE ME" (Contrátame).
Finalmente, remplaza esa imagen de fondo con el retrato de un joven atractivo en color neón.
Paso 3
Pasa a la sección About (sobre mí). Todo lo que tienes que hacer es modificar el espaciado entre los componentes principales, como se muestra en la siguiente imagen. Ajusta el espaciado entre los componentes a 100 px en las áreas resaltadas. Esto añadirá un poco de consistencia a tu diseño final facilitando la legibilidad.
Paso 4
Pasa a la sección Intermediate (intermedia) y renómbrala Stats. Primero, ajusta el espaciado superior e inferior como se muestra en la primer imagen.
Agrega un marco rectangular redondeado para cada cuadro de texto y establece el radio del vértice en 20. Asegúrate de que el espaciado sea uniforme enre todos estos rectángulos redondeados y centra el contenido de texto dentro de cada uno de ellos.
Paso 5
Pasa a la sección Blog y ajusta el espaciado como se muestra en la primer imagen. Abre el grupo Blog Grid y mantén únicamente dos grupos Blog Grid Item. Ajusta el estilo como se muestra enseguida.
Pasa a la sección Portfolio y únicamente ajusta el espaciado como se muestra en la segunda imagen. Haz lo mismo para la sección Contact Form (formulario de contacto) y remplaza la imagen de fondo con el mismo retrato de joven atractivo con colores neón.
Paso 6
Mueve todas las secciones de tu diseño una debajo de la otra y ajusta la altura de tu mesa de trabajo como corresponda. Echa un vistazo dentro del panel Capas y organiza y renombra tus grupos como se muestra a continuación. Esto te facilitará mucho ubicar y conectar objetos cuando llegues a la etapa de prototipado.
Haz clic en el nombre de tu mesa de trabajo y enfócate en el inspector de Propiedades. Selecciona Vertical del menú Desplazamiento y establece la Altura de la ventana gráfica en 1080.
2. Cómo crear las animaciones en estado hover en la página de inicio del diseño de la página web de tu currículum vitae.
Paso 1
Toma la herramienta Rectángulo (R) y crea una forma de 136 x 2 px. Usa las guías inteligentes para colocar fácilmente tu forma como se muestra en la siguiente imagen y luego dirígete al inspector de Propiedades. Deshabilita el Borde existente usando esa casilla de verificación y luego haz clic en el color de Relleno y cambia el color a #9025FB.
Usando la misma herramienta, crea una forma de 136 x 31 px y colócala exactamente como se muestra en la segunda imagen. Los atributos de apariencia de este rectángulo no son importantes pues utilizarás esta forma como una máscara.
Selecciona este rectángulo junto con el texto Michael Williams y la delgada línea púrpura. Haz clic derecho en tu selección y ve a Máscara con forma (Mayúsculas-Comando-M).
Paso 2
Ahora, vamos a crear nuestra primera animación en estado hover. Asegúrate de que tu grupo enmascarado siga seleccionado, enfócate en el inspector de Propiedades y haz clic en el botón del signo de más de la sección de ese Componente. Haz clic de nuevo en ese botón del signo de más y agrega un Estado con cursor encima. Asegúrate de que siga seleccionado y regresa a tu mesa de trabajo.
Haz doble clic en tu grupo hasta que veas esa delgada línea púrpura. Selecciónala y arrástrala debajo del texto, como se muestra en la segunda imagen. Regresa a la sección Componente del inspector de Propiedades y selecciona Estado predeterminado.
Con tu componente todavía seleccionado, cambia del modo Diseño a Prototipo. Establece el Suavizado en Suavizar salida y la Duración a 0.3 segundos. Finalmente, haz clic en el botón de vista previa de la esquina superior derecha de la pantalla para probar tu animación en estado hover o con cursor encima.
Así se debería verse tu animación.
Paso 3
Pasa al primer elemento de texto de tu menú para crear una nueva animación en estado hover o con cursor encima. Toma la herramienta Elipse (E) y crea un círculo de 10 px. Colócalo como se muestra en la primera imagen y establece el color de Relleno en #9025FB.
Cambia a la herramienta Rectángulo (R), crear una forma de 63 x 10 px y colócala como se muestra en la segunda imagen. Puedes disminuir su Opacidad a 50% para colocar fácilmente tu forma en el lugar correcto. Selecciona este rectángulo junto con el círculo púrpura y el fragmento de texto que está ubicado atrás y aplícales una máscara (Mayúsculas-Comando-M).
Paso 4
Asegúrate de que el grupo enmascarado hecho en el paso anterior esté todavía seleccionado y conviértelo en un componente. Añade un Estado con cursor encima y selecciónalo.
Haz doble clic en tu grupo seleccionado hasta que veas ese círculo púrpura y luego arrástralo hacia arriba como se observa en la segunda imagen. Una vez que termines, regresa al Estado predeterminado.
Cambia de modo Diseño a Prototipo, establece el Suavizado en Suavizar salida y la Duración en 0.2 segundos. Repite las mismas técnicas para animar el resto de los elementos de tu menú.
Así se debería ver tus animaciones en estado cursor encima.
Paso 5
Usando la herramienta Rectángulo (R), crea una forma de 690 x 350 px y colócala como se muestra en la primer imagen.
Toma la herramienta Texto (T) y añade los textos "My name is" y "my mission is design". Colócalos como se muestra en la segunda imagen y establece el color de relleno en blanco.
Cambia a la herramienta Elipse (E), crea un círculo de 50 px, rellénalo del color #9025FB y colócalo como se muestra en la segunda imagen.
Selecciona los cuatro elementos hechos en este paso junto con los textos Michael y Lorem Ipsum y Agrúpalos (Comando-G).
Paso 6
Mantente enfocado en el grupo hecho en el paso anterior. Selecciona el texto "My name is" y arrástralo junto al borde izquierdo de la mesa de trabajo, y luego selecciona el texto "my mission is design" y arrástralo junto al borde derecho. Finalmente, selecciona ese cículo púrpura y muévelo como se muestra en la siguiente imagen.
Paso 7
Mantente enfocado en ese grupo. Selecciona el rectángulo rojo y tráelo al frente (Mayúsculas-Comando-]), arriba de los otros elementos de tu grupo. Una manera mucho más fácil para que selecciones y muevas estos objetos sería mediante el panel Capas.
Vuelve a seleccionar este rectángulo rojo junto con el resto de los elementos de este grupo y aplícales una máscara (Mayúsculas-Comando-M). Convierte este grupo enmascarado en un nuevo componente.
Paso 8
Añade un Estado con cursor encima para tu componente más nuevo, selecciónalo y dirígete a tu mesa de trabajo. Selecciona ese párrafo "Lorem Ipsum" y disminuye su Opacidad en 0%. Selecciona el círculo púrpura y los dos textos que yacen afuera de tu mesa de trabajo y llévalos a su ubicación original, como se muestra en la siguiente imagen.
Una vez que termines, regresa al inspector de Propiedades y selecciona el Estado predeterminado para tu componente.
Cambia del modo Diseño a Prototipo, establece el Suavizado en Suavizar entrada-salida y la Duración en 0.3 segundos, y luego puedes probar tu animación en estado con cursor encima.
Así se debería ver tus animaciones en estado hover o con cursor encima.
Paso 9
Duplica tu botón de PORTFOLIO y coloca la copia debajo del botón HIRE ME, como se muestra en la primer imagen. Cambia el texto de este nuevo botón a "LET'S DESIGN".
Usando la herramienta Rectángulo (R), crea una forma de 140 x 35 px y colócala como se muestra en la segunda imagen. Selecciona este rectángulo junto con los botones HIRE ME y LET'S DESIGN y enmascáralos (Mayúsculas-Comando-M).
Paso 10
Asegúrate de que el botón HIRE ME esté todavía seleccionado y conviértelo en un componente. Añade un Estado con cursor encima para este nuevo componente y selecciónalo. Arrastra el botón LET'S DESIGN arriba de tu botón HIRE ME y luego regresa al Estado predeterminado de tu componente.
Cambia del modo Diseño a Prototipo, establece el Suavizado en Suavizar salida y la Duración en 0.3 segundos, y luego puedes probar tu animación en estado con cursor encima.
Así deberían verse tus animaciones en estado con cursor encima.
3. Cómo crear las animaciones en estado con cursor encima restantes en este diseño de página web para currículum vitae
Paso 1
Enfócate en la primer foto de tu sección ABOUT. Ajusta el tamaño de ese rectángulo púrpura para encajar en las dimensiones de la foto y luego centra el botón More (más), como se muestra en la segunda imagen.
Selecciona estos dos elementos junto con la foto que yace atrás y conviértelos en un nuevo componente. Dirígete al panel Capas y deshabilita la visibilidad para el rectángulo púrpura y ese botón More (más).
Añade un Estado con cursor encima para este componente y selecciónalo. Regresa al panel Capas y vuelve a habilitar la visibilidad del rectángulo púrpura y ese botón More (más). Regresa al Estado predeterminado.
Cambia del modo Diseño a Prototipo, establece el Suavizado en Suavizar salida y la Duración en 0.3 segundos, y luego puedes probar tu animación en estado de cursor encima.
Así es como deben verse tus animaciones en estado con cursor encima.
Paso 2
Selecciona el botón EXPLORE y conviértelo en un componente. Agrega un Estado con cursor encima para este nuevo componente y selecciónalo. Cambia el color de Relleno de ese rectángulo redondeado a #9025FB y luego regresa al Estado predeterminado de tu componente.
Cambia del modo Diseño a Prototipo, establece el Suavizado en Suavizar salida y la Duración en 0.3 segundos, y luego puedes probar tu animación en estado con cursor encima.
Así se deberían ver tus animaciones en estado con cursor encima.
Paso 3
Enfócate en el primer elemento de la sección STATS. Selecciona el texto junto con ese rectángulo redondeado y conviértelos en un componente. Añade un Estado con cursor encima para este nuevo componente y selecciónalo. Cambia el color de Relleno de ese rectángulo redondeado a #9025FB y luego regresa al Estado predeterminado de tu componente.
Cambia del modo Diseño a Prototipo, establece el Suavizado en Suavizar entrada y la Duración en 0.2 segundos, y luego puedes probar tu animación en estado con cursor encima.
Así se deberían ver tus animaciones en estado con cursor encima.
Paso 4
Enfócate en el primer Blog Grid Item de la sección de BLOG. Conviértelo en un componente, añade un Estado con cursor encima y selecciónalo. Cambia el color de ese fondo de texto a #9025B y el fondo del botón de la flecha a negro (#000000) y luego regresa al Estado predeterminado de tu componente.
Cambia del modo de Diseño a Prototipo, establee el Suavizado en Suavizar salida y la Duración en 0.2 segundos, y luego puedes probar tu animación en estado con cursor encima. Haz los mismos cambios para el segundo Blog Grid Item.
Selecciona los componentes Blog Grid Item, duplícalos y luego arrastra las copias hacia la derecha, como se muestra en la tercera imagen.
Así deberían verse tus animaciones en estado con cursor encima.
Paso 5
Enfócate en el menú del texto de la sección PORTFOLIO. Usando la herramienta Rectángulo (R), añade un rectángulo púrpura detrás del texto "ALL". Selecciona el rectángulo y el texto y conviértelos en un componente. Selecciona ese rectángulo púrpura y disminuye su Opacidad a 0%. Añade un Estado con cursor encima para tu componente y selecciónalo. Vuelve a seleccionar ese rectángulo púrpura e incrementa la Opacidad de nuevo a 100%. Regresa al Estado predeterminado de tu componente.
Cambia del modo de Diseño a Prototipo, establece el Suavizado en Suavizar entrada y la Duración en 0.1 segundos, y luego puedes probar tu animación en estado con cursor encima. Añade el mismo tipo de animaciones en estado con cursor encima para el resto de los elementos de tu menú.
Así se deberían ver tus animaciones en estado con cursor encima.
Paso 6
Enfócate en la primer foto de tu sección de PORTFOLIO. Ajusta el tamaño de ese rectángulo púrpura para que encaje en las dimensiones de la foto y luego centra el botón como se muestra en la segunda imagen.
Para la parte de la animación en estado con cursor encima básicamente tienes que seguir las mismas técnicas usadas para las fotos en la sección About.
Así es como deberían verse tus animaciones en estado con cursor encima.
Paso 7
Enfócate en los botones de las redes sociales de la sección CONTACT. Selecciona el botón de Facebook y conviértelo en un componente. Añade un Estado con cursor encima para este nuevo componente y selecciónalo. Cambia el color de Relleno de esta forma a #3B5998 y luego regresa al Estado predeterminado de tu componente.
Cambia del modo de Diseño a Prototipo, establece el Suavizado en Suavizar entrada-salida y la Duración en 0.2 segundos, y luego puedes probar tu animación en estado con cursor encima.
Así se deberían ver tus animaciones en estado con cursor encima. Usa el color #1DA1F2 para Twitter y el color #C8232C para Pinterest.
Paso 8
Enfócate en el menú del texto de la sección FOOTER. Selecciona el botón Home (inicio) y conviértelo en un componente. Añade un Estado con cursor encima para este nuevo componente y selecciónalo. Cambia el color de Relleno del texto a #3B5998 y luego regresa al Estado predeterminado de tu componente.
Cambia del modo Diseño a Prototipo, establece el Suavizado en Suavizar entrada-salida y la Duración a 0.2 segundos, y luego puedes probar tu animación en estado con cursor encima. Repite las mismas técnicas para animar el resto de los elementos de este menú.
Así se deberían verse tus animaciones en estado con cursor encima.
4. Cómo convertir tu diseño en un prototipo interactivo
Paso 1
Asegúrate de que el modo Prototipo esté aún activo y selecciona ese Detalle superior de la página de la sección FOOTER. Haz clic en ese botón de la flecha azul y conéctalo con el grupo Home (inicio). Establece el Suavizado en Ninguno y la Duración en 0.4 segundos, y luego puedes probar tu animación en estado con cursor encima. Un clic en este botón se desplazará hacia arriba hasta la sección HOME de tu diseño.
Paso 2
Mantente enfocado en la sección FOOTER y selecciona ese componente Home (inicio) del menú. Haz clic en ese botón con el signo de más y conecta tu componente con el grupo Home (inicio). Mantén los atributos de Suavizado y Duración como están. Por defecto, Adobe XD usará los mismos atributos aplicados para el prototipo anterior.
Paso 3
Selecciona el componente Contact (contacto) de la sección HOME (inicio) y vincúlalo con el grupop CONTACT.
Paso 4
Selecciona el resto de componentes del menú y conéctalos con los grupos correspondientes.
Paso 5
Cambia del modo Prototipo a Diseño. Enfócate en los grupos Blog Grid Item de la sección BLOG. Usando la herramienta Rectángulo (R), crea una forma de 1440 x 554 px y colócala como se muestra en la primera imagen.
Selecciona esta nueva forma junto con los cuatro grupos Blog Grid Item y enmascáralos (Mayúsculas-Comando-M).
Paso 6
Haz clic en el nombre de tu mesa de trabajo para seleccionarlo y usar el atajo de teclado Comando-D para añadir tres copias de tu mesa de trabajo como se muestra en la siguiente imagen.
Paso 7
Enfócate en la sección BLOG. En los siguientes pasos convertirás el grupo Blog Grid en un menú desplazable horizontalmente. Esto requerirá que cada mesa de trabajo coincida con una etapa diferente del desplazamiento horizontal a través del menú.
Selecciona el grupo Blog Grid de la segunda mesa de trabajo, mantén presionada la tecla Mayúsculas y arrastra tu selección hacia la izquierda, como se muestra en la primer imagen. De manera alternativa, puedes ir al inspector de Propiedades e introduce -181 en el cuadro X.
Dirigete a la tercera mesa de trabajo, selecciona el grupo Blog Grid y arrástrala hacia la izquierda, como se muestra en la segunda imagen (X: -791). Finalmente, selecciona el grupo Blog Grid de la cuarta mesa de trabajo y muévelo a -1000 como se muestra en la tercera imagen.
Paso 8
Cambia de nuevo al modo Prototipo. Dirígete a la primera mesa de trabajo y enfócate en los botones de paginación de la sección BLOG. Selecciona el segundo círculo y conéctalo con la segunda mesa de trabajo. Establece el Suavizado en Ninguno y la Duración en 0.2 segundos.
Paso 9
Mantente enfocado en esos botones de paginación de la primera mesa de trabajo. Conecta el tercer círculo con la tercera mesa de trabajo y el cuarto círculo con la cuarta mesa de trabajo.
Selecciona todo el grupo Blog Grid del panel Capas y vincúlalo con la cuarta mesa de trabajo. Cambia el Desencadenador a Arrastar y establece el Suavizado en Ninguno. Esto te permitirá desplazarte hacia el extremo derecho del menú.
Paso 10
Dirígete a la segunda mesa de trabajo y enfócate en esos botones de paginación. Primero cambia los colores según corresponda, y luego vincula los círculos grises con las mesas de trabajo correspondientes. Recuerda cambiar de nuevo Desencadenador a Tocar, establece el Suavizado en Ninguno y la Duración en 0.2 segundos.
Paso 11
Dirígete a la tercera mesa de trabajo, cambia el color de esos botones de paginación según corresponda, y luego vincula los círculos grises con las mesas de trabajo correspondientes. Haz lo mismo para la cuarta mesa de trabajo.
Selecciona el grupo Blog Grid de la cuarta mesa de trabajo y vincúlala con la primer mesa de trabajo. Cambia el Desencadenador a Arrastrar y establece el Suavizado en Ninguno. Esto te permitirá desplazarte de nuevo al extremo izquierdo del menú.
¡Felicidades! ¡Tu diseño de página web para currículum vitae está completo!
Aquí está cómo deberá verse. Espero que hayas disfrutado este tutorial y puedas aplicar estas técnicas para crear tu propio currículum vitae en Adobe XD. No dudes en compartir tu resultado final en la sección de comentarios.
Siéntete libre de ajustar el diseño final y hacerlo tuyo. Puedes encontrar algunos magníficas fuentes de inspiración en GraphicRiver, con interesantes soluciones para mejorar tu currículum vitae en Adobe XD.
¿Quieres aprender más?
Tenemos muchísimos tutoriales de Adobe XD en Tuts+, desde el nivel principiante hasta intermedio, ¡consúltalos!
Adobe XDCómo crear un diseño de interfaz de usuario para aplicación de finanzas en Adobe XD
Adobe XDCómo crear un diseño de interfaz de usuario de aplicación para reservaciones de hotel en Adobe XD
Adobe XDCómo crear un diseño de interfaz de usuario para aplicación de reproductor de música en Adobe XD
Adobe XDTu primer esquema de página con Adobe XD
Adobe XDNuevo curso: 15 atajos de teclado para Adobe XD que ahorran tiempo
Adobe XDCómo crear un prototipo de interfaz de usuario usando Adobe XD
SketchCómo crear bordes en un solo lado en Sketch y Adobe XD
Adobe XDConsejo rápido: Diseña un gráfico de flecha en formato SVG en Adobe XD
Adobe XDCómo usar redimensionamiento adaptativo y restricciones en Adobe XD
Adobe XDDomina Adobe XD con estos 4 cursos
