Cómo crear un portafolio de diseño web - Guía paso a paso

¿Buscas una guía para crear tu sitio web de portafolio de diseño web? ¿Eres un creativo que quiere mostrar su trabajo para atraer a nuevos clientes?

Tanto si quiere compartir su trabajo con el mundo, venderlo en Internet o proporcionar ejemplos para atraer a nuevos clientes, su portafolio debe ser una parte esencial de su estrategia de marketing.

Hoy vamos a compartir una guía sobre cómo crear un portafolio de diseño web desde cero. Los pasos son sencillos y no necesitarás ninguna experiencia en codificación.

También aprenderás algunos trucos para que tu portafolio tenga tan buen aspecto como las imágenes, vídeos o sitios web que muestres en él.

Al final de este tutorial, serás capaz de crear un portafolio de diseño web como este.

En primer lugar, veamos por qué un diseñador necesita un portafolio en línea.

Por qué debería crear una cartera de diseño web

Tener una cartera tiene muchas ventajas.

Si tus creaciones son visuales, como imágenes, vídeos o sitios web, necesitas mostrar y contar. Un portafolio puede ayudarte.

También es un lugar donde puede demostrar de lo que es capaz y permitir que los clientes potenciales vean lo que puede hacer.

Es tu escaparate, donde puedes exponer tus creaciones y demostrar tu valía más allá de toda duda razonable.

También se pueden realizar búsquedas en las carteras.

Si quiere que le encuentren en los motores de búsqueda, el texto de su web es sólo un aspecto del SEO. Las imágenes pueden ser otro. Otro muy poderoso, sobre todo si están indexadas por Google Imágenes.

Características esenciales de una cartera de diseño web

Crear un diseño de página web impresionante para tu portafolio de diseño web es un gran acierto.

Aquí compartimos lo que consideramos características esenciales para que tu portafolio de diseño web destaque.

Acerca de la página

La página Acerca de es el lugar para mostrar tu personalidad con palabras. Sería estupendo que compartieras aquí tu historia. Por ejemplo, cómo te convertiste en diseñador web o gráfico o cómo descubriste que eras bueno en la carrera que habías elegido.

Ayuda a tus clientes a comprender tu formación, experiencia y pasión por el diseño.

Añadir su nombre y una fotografía le da un toque personal. También puedes hablar de tu formación, experiencia y compartir cualquier premio o reconocimiento que tengas.

Página de servicio

La página de servicios es una página esencial que almacena toda la información sobre sus servicios. Te recomendamos que expliques tus servicios y te centres en la persona del cliente.

También puede plantearse responder a algunas preguntas relevantes que se le ocurran a un visitante sobre sus servicios para superar cualquier objeción y ayudar a la conversión.

Galería o portafolio

Es hora de presumir un poco añadiendo tus mejores proyectos al área de portafolio de tu sitio web. Si tus imágenes atraen a los visitantes, puede que decidan contratarte, que es de lo que se trata.

Le recomendamos que utilice vídeos, presentaciones de fotos o galerías para exponer sus obras.

Recomendamos encarecidamente que el diseño sea flexible para que los visitantes puedan ver fácilmente tu trabajo desde distintos dispositivos. Es algo que muchos clientes querrán para sus propios proyectos, ¡así que no está de más que demuestres tu habilidad aquí!

Área de testimonios

Los testimonios funcionan como prueba social. Conseguir citas positivas de tus clientes y añadirlas a tu sitio web ayuda seriamente a la conversión.

Seguro que tú haces lo mismo cuando vas de compras. Miras las especificaciones y luego lees los comentarios. Si eres como nosotros, esas opiniones influirán mucho en cualquier decisión de compra.

Utilice ese mismo enfoque para su propio sitio web. Póngase en contacto con clientes y pida comentarios positivos sobre su trabajo u ofrezca algún tipo de incentivo a cambio de reseñas o testimonios.

Página de contacto

Una página de contacto es una parte vital de cualquier sitio web. Es el primer lugar donde los visitantes buscan tus datos de contacto para ver dónde estás ubicado y consultar tus redes sociales.

Si tiene llamadas a la acción en su sitio, lo más probable es que enlacen con su página de contactos.

Usted puede tener formularios de contacto y sociales en otras partes de su sitio, pero éste es el primer lugar que la gente consultará.

Si tienes otros datos de contacto, como Behance y Dribbble, te recomendamos que los añadas también. Es otra forma de que un cliente potencial se ponga en contacto contigo. Cuantos más canales proporciones, más probabilidades habrá de que se pongan en contacto contigo.

Cómo crear un portafolio de diseño web

Ahora vamos a lo importante: cómo crear un portafolio de diseño web.

Siga los siguientes pasos para crear su portafolio de diseño web en menos de 1 hora:

1. Requisitos previos para crear un sitio web en WordPress
2. Instalar y activar el tema Astra
3. Instalar y activar las plantillas de inicio
4. Seleccione una plantilla de sitio web de cartera
5. Instalar y activar WP Portfolio
6. Cree su portafolio de diseño web
7. Personaliza tu portafolio de diseño web

Empecemos.

Paso 1: Qué necesita para crear un sitio web con WordPress

Si quiere crear un sitio web, necesita lo siguiente:

Un nombre de dominio: Cada sitio web tiene un nombre de dominio. Es una dirección legible por humanos, como nuestra propia https://wpastra.com/.

Un plan de alojamiento: El alojamiento es el lugar donde almacena los archivos y recursos de su sitio web para que la gente pueda visitarlo. También se utiliza para conectar su nombre de dominio con el servidor de nombres.

Hay muchas empresas de alojamiento en el mercado. SiteGround, Cloudways y Kinsta ofrecen alojamiento de primera clase. Recomendamos explorar cada uno de ellos.

WordPress: WordPress es un sistema de gestión de contenidos (CMS) muy popular que se utiliza para crear sitios web. Es gratuito y tiene software de apoyo ilimitado como temas y plugins.

La mayoría de las empresas de alojamiento ofrecen instalación de WordPress en un clic.

Paso 2: Instalar y activar el tema Astra

Astra es uno de los temas más populares del ecosistema de WordPress. Es un tema adaptativo, moderno y personalizable, totalmente compatible con los creadores de páginas de WordPress más populares.

La buena noticia es que es gratuito y viene con todo lo necesario para crear un sitio web de portafolio de diseño web.

Para este tutorial, vamos a utilizar nuestro tema Astra.

Vamos a instalarlo.

Ir a la Panel de WordPress > Apariencia > Temas.

Pulsa el botón Añadir nuevo situado en la parte superior de la página o utilice el botón '+para añadir un nuevo tema.

Utilice el campo de búsqueda para encontrar el Astra tema. A continuación, haga clic en el botón Instale botón.

Ahora, pulsa el botón Activar botón.

Has instalado y activado correctamente el tema Astra en tu sitio web.

Paso 3: Instalar y activar Starter Templates

Starter Templates es un popular plugin de WordPress en el que confían más de Más de un millón usuarios para diseñar sus sitios web.

Viene con toneladas de plantillas web gratuitas para portafolios compatible con diferentes constructores de páginas. Puede construir rápidamente el sitio web de sus sueños utilizando la plantilla gratuita en cuestión de minutos.

Vamos a instalar el plugin.

Vaya a Plugins > Añadir nuevo.

Tipo 'starter templatesen el campo de búsqueda para encontrar el plugin. A continuación, pulse el botón Instalar ahora botón.

Ahora haga clic en el botón Activar botón.

Enhorabuena, ¡ha activado Starter Templates en su sitio web!

Paso 4: Seleccionar una plantilla de sitio web de cartera

Starter Templates vienen con una gama de plantillas de portafolio gratuitas y premium.

Aquí, vamos a seleccionar Cartera y CV. Es una plantilla gratuita que viene con la mayoría de las características que usted necesitará para hacer un sitio web de la cartera.

Otras plantillas de Astra recomendadas:

• Plantillas y diseños de sitios web personales
• Plantillas de sitios web para currículos
• Diseños y plantillas de sitios web de fotografía

Vamos a importar la plantilla.

Ir a Apariencia > Plantillas de inicio.

Haga clic en el botón Cree su sitio web ahora para empezar.

Elige el constructor de páginas que más te guste para diseñar tu sitio web. Hemos seleccionado el Creador de páginas Elementor para la nuestra.

Tipo 'carteraen la barra de búsqueda y seleccione Cartera y CV plantilla.

Puede añadir su sitio web logotipo aquí mismo si tienes uno. Puedes añadirlo más tarde si no lo tienes.

Haga clic en el botón Continuar botón.

Si desea cambiar el valor predeterminado fuentes y color de su sitio web, puede hacerlo aquí.

Haga clic en el botón Continuar cuando estés listo.

Indique su nombre y dirección de correo electrónico si desea recibir nuestros boletines. A continuación, pulse el botón Enviar y crear mi sitio web botón.

El sistema importará los plugins esenciales y los recursos necesarios a su sitio web.

Por último, haga clic en el botón Ver su sitio web para ver el diseño.

Echemos un vistazo rápido a su sitio web.

Paso 5: Instalar y activar WP Portfolio

Cartera WP es un práctico plugin de WordPress diseñado para ayudarle a crear un portafolio impresionante en tan sólo unos clics.

Puedes crear carteras de imágenes, vídeos y sitios web. Es compatible con creadores de páginas populares de WordPress y ofrece infinitas posibilidades para hacer más atractiva su cartera.

Estas son algunas características notables de WP Portfolio:

• Plantillas de portafolios
• Carga lenta
• Diseños ilimitados
• Rejilla de mampostería
• Soporte para shortcodes

La plantilla que hemos importado tiene una sección de portafolio en la página principal. Está diseñada con el widget de galería de imágenes Elementor pero podemos añadir más funcionalidades al portfolio con WP Portfolio.

En primer lugar, instale el plugin en su sitio web. El proceso de instalación del plugin es similar al Starter Templates por lo que no lo repetiremos de nuevo.

La diferencia es que hay que añadir el clave de licencia para activar el plugin, ya que es una herramienta premium.

Tendrá que crear una cuenta en Cartera WP y pague por el plugin. A cambio, recibirás una clave de licencia.

Una vez completada la instalación, encontrará la opción de activación de licencia en la página de plugins.

Pegue la clave de licencia en el campo y pulse el botón Activar licencia botón.

Recibirá el mensaje de éxito si proporciona la clave de licencia válida.

Paso 6: Crea tu portafolio de diseño web

Ahora es el momento de crear tu portafolio de diseño web.

Ir a WP Portfolio > Configuración.

Aquí tendrás tres ajustes diferentes, General, Estilo y Avanzado.

La pestaña de ajustes generales tiene cuatro opciones.

Puede seleccionar un único constructor de páginas o permitir que todos ellos importen plantillas como su cartera de plantillas de sitios web.

A continuación, haz clic en el botón de sincronización y espera a que se complete la importación.

Consulta la guía y aprende cómo replicar WP Portfolio con Starter Templates.

Para usar el portafolio, necesitas copiar el shortcode y pegarlo donde quieras mostrarlo.

[wp_portfolio]

La opción de visualización le ofrece algunas funciones para gestionar su cartera.

Haga clic en el botón Guardar cambios y pase a la pestaña siguiente.

En Estilo le da más control para personalizar la cartera.

Puede mostrar su cartera en desplazarse o en haga clic en.

Puedes establecer el estilo de desplazamiento de la miniatura como un desplazamiento de imagen y definir la barra de vista previa en la parte superior o inferior. También puedes añadir una llamada a la acción (CTA) a tu portafolio.

La opción de diseño proporciona algunos otros ajustes para establecer la cartera.

En esta área puede activar el diseño de mampostería y gestionar las columnas y los elementos por página.

No olvides pulsar el botón Guardar cambios para guardar el ajuste.

Si desea personalizar los slugs por defecto, puede visitar la página Avanzado tab. A continuación, reescriba las babosas según sus necesidades.

Cómo crear una cartera de diseño web

A continuación, vaya a WP Portfolio > Añadir nuevo.

Añadir un Título para su cartera y elija un Tipo. Queremos hacer un portafolio de imágenes por lo que hemos establecido el tipo a Imagen.

A continuación, haga clic en el botón Añadir elemento de cartera botón.

Ahora, añada una miniatura y una imagen de cartera a la cartera.

Puede utilizar la configuración correcta para establecer la categoría de cartera, etiquetas, imagen destacada y otros.

Por último, pulsa el botón Publique botón.

Nota: Para activar el diseño de mampostería, debe añadir el siguiente fragmento de código a su tema funciones.php archivo.

Acceda al archivo functions.php seleccionando Apariencia > Editor de archivos temáticos a la izquierda.

A continuación, seleccione functions.php de la lista Archivos temáticos menú de la derecha.

add_filter( 'astra_apply_flex_based_css', '__return_false' );

Después de añadir el código, haga clic en el botón Actualizar archivo botón.

Paso 7: Personalizar el sitio web de su cartera de diseño web

Vamos a añadir la cartera recién creada a su sitio web.

Ir a Editar con Elementor > Configuración del sitio.

Pulsa el botón 'X'.

Ahora la página se ha abierto en el panel del editor Elementor.

Vaya al área de portafolio de su plantilla. Haga clic con el botón derecho en la sección de la cartera y pulse el botón rojo Borrar botón.

Arrastre y suelte el Elementor Código corto en la nueva sección.

Pegue el [wp_portfolio] dentro del widget y pulse el botón Solicitar botón.

Por fin, golpea el green Actualización para guardar todos los ajustes.

Nota: También puede aplicar los mismos pasos para añadir la cartera a la página dedicada a la cartera de su sitio web.

¡Enhorabuena! Ha añadido correctamente la cartera a su sitio web.

Ahora vamos a comprobarlo.

Ejemplos de sitios web de cartera

Acabas de aprender a crear un sitio web de portafolio de diseño web.

Ahora vamos a compartir algunos ejemplos que pueden ayudarte a ser más creativo a la hora de diseñar tu portafolio.

1. Jacek Jeznach

Jack Jeznach es un desarrollador web profesional y experto en WordPress que vive en Polonia. Decora su sitio web de la cartera con un fondo oscuro y un atractivo menú de navegación en la barra lateral.

Este sitio web es muy limpio y tiene un diseño elegante.

Hay cinco elementos de menú en los que suele poner toda la información relevante. La página de trabajo muestra sus principales proyectos con atractivos efectos hover y un práctico deslizador de imágenes.

2. Maria Marie

María María es una buscadora de luz, narradora visual y diseñadora con alma creativa. Mantiene su creatividad no solo en su trabajo, sino también en su sitio web.

Tiene un sitio web de portafolio sencillo pero artístico. Este sitio web increíble tiene una página de inicio detallada con un menú de hamburguesa parte superior de la página y un menú de pie de página rica.

Este sitio web multipágina también cuenta con una hermosa página de portafolio donde muestra su arte y fotografías en un diseño de cuadrícula.

3. Tío holandés

Tío holandés es una empresa de gestión de artistas.

La página de inicio muestra las imágenes utilizando un diseño de cuadrícula. También tiene un elemento de menú para redirigir a los visitantes a su página de Instagram.

En su sitio web también encontrará las páginas esenciales, como "Acerca de", "Noticias", "Envíos" y una página de contacto para ponerse en contacto con ellos.

4. Cartera Adrian

Adrian es un diseñador de Apple que se ocupa principalmente de la interfaz humana. Tiene un sitio web único con algunas características fantásticas.

Todo el sitio web tiene un fondo oscuro con el texto en blanco. Esto hace que el sitio sea más atractivo y proporciona una sensación relajante a los visitantes.

Adrian muestra sus obras más destacadas justo después de la zona principal del sitio web, aplicando efectos hover y de animación exclusivos. Su sitio web también tiene una zona de pie de página que muestra sus canales sociales.

5. Mike Kus

Mike Kus es otro ejemplo real de sitio web de portafolio atractivo. El diseño es sencillo y muy fácil de usar.

Un elegante encabezado en la parte superior con tres enlaces sociales ayuda a los visitantes a ver sus otros trabajos profesionales en diferentes plataformas de diseño.

Consejos adicionales para que su cartera destaque

Ahora ya sabes cómo hacer un portafolio de diseño web para llevar tu carrera de diseño al siguiente nivel.

Vamos a compartir algunos consejos para mejorar un poco más tu cartera.

Centrarse en la selección de proyectos

Aquí viene la parte que cambia el juego. Destaca tus mejores proyectos en esta área, ya que la cantidad importa. Te recomendamos que añadas solo tus mejores trabajos, aunque todavía no tengas muchos.

Contar una historia

Hay una historia detrás de cada obra creativa y detrás de cada diseño creativo.

Ahora más que nunca, los clientes se interesan por las personas que hay detrás de un producto o una obra como

les ayuda a entenderte un poco mejor.

Esta es su oportunidad de compartir su historia y contar una historia con sus creaciones.

Comparta sus obras personales

Algunos clientes pueden estar interesados en ver tus trabajos personales además de tus proyectos profesionales.

Es un truco que muchos clientes utilizan para entender hasta qué punto te apasiona tu trabajo. Sería estupendo que mostraras algunos de tus trabajos personales, si los tienes. Ayuda a capte la atención de sus clientes y es, en definitiva, otra forma de mostrar tu creatividad.

Que sea escaneable

Lo ideal es que su sitio web tenga un diseño sencillo, ya que ayudará a los visitantes a explorar su trabajo con facilidad.

Aunque estén ocupados, los visitantes pueden escanearlo rápidamente y crearse una impresión de sus capacidades.

Concéntrese en el SEO de su sitio web

La optimización para motores de búsqueda (SEO) es la clave si tiene un sitio web de portafolio en línea.

Considere la posibilidad de utilizar herramientas SEO modernas como Esquema Pro. Es una herramienta para optimizar la información del esquema de su sitio web que puede ayudar a mejorar la aparición de su sitio web en los resultados de los motores de búsqueda.

Consulte este blog para informarse cómo optimizar el SEO de su sitio web WordPress.

Conclusión

La creación de un sitio web de portafolio es una excelente manera de compartir su trabajo con los visitantes y, con suerte conviértalos en clientes.

WordPress, Astra y plugins como WP Portfolio simplifican el proceso. ¡Realmente puedes crear un portafolio atractivo en unos pocos clics!

Con herramientas como éstas y un poco de tiempo, podrías crear tu propio sitio web y un portafolio que te muestre en todo su esplendor.

Si estás empezando como profesional creativo, ¡hay muchas razones para probarlos!

¿Ha utilizado un portafolio para atraer a nuevos clientes? ¿Tienes algún consejo sobre el diseño o algún truco para convertir a los visitantes en clientes? Comparte tu historia a continuación.