Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Adobe XD
Webdesign

Cómo crear una plantilla para sitio web de currículum vitae en Adobe XD

by
Difficulty:IntermediateLength:LongLanguages:

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:

Amber UI kit
Kit de interfaz de usuario de la plantilla Amber en Envato Elements

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.

resume website template

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.

resume website template home page

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.

resume website template about page

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.

resume website template stats page

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.

resume website template blog page

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.

vertical scrolling

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

mask logo

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.

hover state prototype

Así se debería verse tu animación.

hover animation

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

home page menu

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

hover state prototype

Así se debería ver tus animaciones en estado cursor encima.

hover animation

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

home page main

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.

home page group

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.

home page mask

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.

hover state prototype

Así se debería ver tus animaciones en estado hover o con cursor encima.

hover animation

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

home page button

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.

hover state prototype

Así deberían verse tus animaciones en estado con cursor encima.

hover animation

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.

about page hover state prototype

Así es como deben verse tus animaciones en estado con cursor encima.

hover animation

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.

explore button hover state prototype

Así se deberían ver tus animaciones en estado con cursor encima.

hover animation

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.

stats hover state prototype

Así se deberían ver tus animaciones en estado con cursor encima.

hover animation

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.

blog hover state prototype

Así deberían verse tus animaciones en estado con cursor encima.

hover animation

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

portfolio menu hover state prototype

Así se deberían ver tus animaciones en estado con cursor encima.

hover animation

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.

portfolio hover state prototype

Así es como deberían verse tus animaciones en estado con cursor encima.

hover animation

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.

contact hover state prototype

Así se deberían ver tus animaciones en estado con cursor encima. Usa el color #1DA1F2 para Twitter y el color #C8232C para Pinterest.

hover animation

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

footer hover state prototype

Así se deberían verse tus animaciones en estado con cursor encima.

hover animation

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.

scroll to animation

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.

scroll to animation

Paso 3

Selecciona el componente Contact (contacto) de la sección HOME (inicio) y vincúlalo con el grupop CONTACT.

scroll to animation

Paso 4

Selecciona el resto de componentes del menú y conéctalos con los grupos correspondientes.

scroll to animation

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

blog page mask

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.

duplicate artboard

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.

horizontal scrolling

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.

tap animation prototype

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

scroll horizontally

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.

horizontal menu animation

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

horizontal scrolling

¡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!


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.