{"id":35518,"date":"2023-09-22T19:14:15","date_gmt":"2023-09-22T17:14:15","guid":{"rendered":"\/tutoriales\/?p=35518"},"modified":"2025-02-05T19:31:38","modified_gmt":"2025-02-05T18:31:38","slug":"portfolio-ejemplos","status":"publish","type":"post","link":"\/mx\/tutoriales\/portfolio-ejemplos","title":{"rendered":"Los 20 mejores ejemplos de portfolio para marcas personales, fot\u00f3grafos, artistas y m\u00e1s"},"content":{"rendered":"<p>Un portfolio digital ayuda a resaltar tu mejor trabajo y aumentar la visibilidad en l&iacute;nea, abriendo oportunidades para posibles empleos y colaboraciones. <\/p><p>Sin embargo, crear un portfolio en l&iacute;nea que se destaque puede ser un desaf&iacute;o, por lo que recomendamos analizar los mejores ejemplos de portfolio antes de comenzar a hacer un sitio web.<\/p><p>Este art&iacute;culo enumera 20 ejemplos de portfolio para diferentes roles, incluidos escritores, estudiantes y figuras p&uacute;blicas, y se&ntilde;ala qu&eacute; los hace especiales. Tambi&eacute;n discutiremos los cinco elementos de la creaci&oacute;n de un portfolio para cautivar a clientes potenciales.<\/p><figure class=\"wp-block-image size-large\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/Build-Website-In-9-Easy-Steps-ES.pdf\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" width=\"1024\" height=\"283\" src=\"https:\/\/blog.hostinger.io\/mx-tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/eBook-Build-website-ES-1024x283.png\" alt=\"\" class=\"wp-image-25981\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/eBook-Build-website-ES.png 1024w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/eBook-Build-website-ES-300x83.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/eBook-Build-website-ES-150x41.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/eBook-Build-website-ES-768x212.png 768w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/eBook-Build-website-ES-1536x425.png 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-mejores-ejemplos-de-portfolio-para-marcas-personales\">Mejores ejemplos de portfolio para marcas personales<\/h2><p>Un excelente punto de partida es comprender <a href=\"\/mx\/tutoriales\/como-crear-una-pagina-web\/\">c&oacute;mo crear un sitio web &uacute;nico<\/a> y buscar inspiraci&oacute;n para ver qu&eacute; funciona para ti y la industria.<\/p><p>A continuaci&oacute;n se muestran los cuatro mejores ejemplos de portfolio con una marca personal s&oacute;lida. Observa c&oacute;mo puedes implementar las <a href=\"\/mx\/tutoriales\/ideas-para-paginas-web\">ideas de su sitio web<\/a> en el tuyo.<\/p><h3 class=\"wp-block-heading\" id=\"h-1-enrico-deiana\">1. <a href=\"https:\/\/www.enricodeiana.design\/\" target=\"_blank\" rel=\"noreferrer noopener\">Enrico Deiana<\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1019\" height=\"505\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/pagina-de-inicio-enrico-deiana.png\" alt=\"Ejemplo de portfolio, sitio web de Enrico Deiana\" class=\"wp-image-35519\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/pagina-de-inicio-enrico-deiana.png 1019w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/pagina-de-inicio-enrico-deiana-300x149.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/pagina-de-inicio-enrico-deiana-150x74.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/pagina-de-inicio-enrico-deiana-768x381.png 768w\" sizes=\"(max-width: 1019px) 100vw, 1019px\" \/><\/figure><\/div><ul class=\"wp-block-list\">\n<li><strong>Por qu&eacute; es especial: <\/strong>m&uacute;ltiples microinteracciones y dominio de nivel superior espec&iacute;fico de la industria<\/li>\n<\/ul><p>Enrico Deiana es un dise&ntilde;ador web y de productos radicado en Italia. Su sitio de portfolio &uacute;nico y atractivo recibi&oacute; una Menci&oacute;n de Honor en los <a href=\"https:\/\/www.awwwards.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Awwwards<\/a> de 2022.<\/p><p>Una vez que los visitantes llegan al sitio web, ven un efecto de deslizamiento y una imagen principal tipogr&aacute;fica, lo que inmediatamente les dice lo que &eacute;l hace y crea una excelente primera impresi&oacute;n.<\/p><p>A medida que te desplazas hacia abajo, hay m&uacute;ltiples microinteracciones. Algunas de ellas son:<\/p><ul class=\"wp-block-list\">\n<li>El estilo del cursor cambia al pasar sobre enlaces en los que se puede hacer clic.<\/li>\n\n\n\n<li>El fondo cambia cuando el cursor se posa en un &aacute;rea del portfolio.<\/li>\n\n\n\n<li>Fotograf&iacute;as, botones de llamado a la acci&oacute;n y texto animado.<\/li>\n<\/ul><p>La p&aacute;gina Acerca de tambi&eacute;n es atractiva e informativa. Esta muestra m&uacute;ltiples certificados y premios mediante un efecto de desplazamiento suave y un t&iacute;tulo animado.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1018\" height=\"511\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/pagina-acerca-de-enrico-deiana.png\" alt=\"P&aacute;gina Acerca de en el sitio de Enrico Deiana\" class=\"wp-image-35520\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/pagina-acerca-de-enrico-deiana.png 1018w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/pagina-acerca-de-enrico-deiana-300x151.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/pagina-acerca-de-enrico-deiana-150x75.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/pagina-acerca-de-enrico-deiana-768x386.png 768w\" sizes=\"(max-width: 1018px) 100vw, 1018px\" \/><\/figure><\/div><p>Este dise&ntilde;ador web independiente mejora su portfolio agregando informaci&oacute;n sobre su negocio de dise&ntilde;o web, incluida una p&aacute;gina de precios con descripciones de servicios.<\/p><p>Esta puede ser una excelente manera de conseguir clientes potenciales m&aacute;s r&aacute;pido. Otro aspecto excelente de este portfolio en l&iacute;nea es el uso de un <a href=\"\/mx\/tutoriales\/que-es-un-tld\">dominio de nivel superior (TLD)<\/a> <strong>.design<\/strong>, lo que fortalece la marca personal de Enrico como dise&ntilde;ador.<\/p><p>\n\n\n\n    <div class=\"mb-50 mt-50 domain-checker domain-checker__bg\">\n        <h3 class=\"m-0 text-center text-white pb-10\">Verificador de nombres de dominio<\/h3>\n        <p class=\"pb-40 text-center text-white\">Verifica de inmediato la disponibilidad del nombre de dominio.<\/p>\n        <form id=\"domain-checker-form\" class=\"d-flex w-100 position-relative flex-column flex-sm-row align-items-center\" action=\"\/mx\/dominios-de-internet\">\n            <input\n                    class=\"domain-checker__input label text-light-black\"\n                    name=\"domain\" type=\"text\"\n                    placeholder=\"Ingresa tu nombre de dominio deseado\"\n                    value=\"\"\n            \/>\n            <input id=\"domain-submit\"\n                   type=\"submit\"\n                   value=\"Revisar\"\n                   class=\"domain-checker__button hb--danger new-h-button-primary button text-white float-right\"\/>\n        <\/form>\n    <\/div>\n\n\n\n\n\n<\/p><h3 class=\"wp-block-heading\" id=\"h-2-sean-o-brien\">2. <a href=\"https:\/\/seanobrien.com.au\/\" target=\"_blank\" rel=\"noreferrer noopener\">Sean O&rsquo;Brien<\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1018\" height=\"491\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/sitio-web-de-sean-obrien.png\" alt=\"Sitio web de Sean O'Brien\" class=\"wp-image-35521\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/sitio-web-de-sean-obrien.png 1018w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/sitio-web-de-sean-obrien-300x145.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/sitio-web-de-sean-obrien-150x72.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/sitio-web-de-sean-obrien-768x370.png 768w\" sizes=\"(max-width: 1018px) 100vw, 1018px\" \/><\/figure><\/div><ul class=\"wp-block-list\">\n<li><strong>Por qu&eacute; es especial:<\/strong> una marca personal s&oacute;lida y un nombre de dominio con c&oacute;digo de pa&iacute;s<\/li>\n<\/ul><p>Sean O&rsquo;Brien es un windsurfista que ha ganado campeonatos en todo el mundo. Este indica la informaci&oacute;n en la p&aacute;gina de inicio en la parte superior de la p&aacute;gina, lo que permite a los visitantes saber inmediatamente qui&eacute;n es.<\/p><p>Sean muestra los logotipos de los socios en la p&aacute;gina de inicio y art&iacute;culos en los que aparece en la p&aacute;gina de prensa. Este tambi&eacute;n <a href=\"\/mx\/tutoriales\/como-escribir-entrada-de-blog\">escribe entradas de blog<\/a> y dedica la p&aacute;gina de Tour a sus actividades.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1020\" height=\"602\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/blog-de-sean-obrien.png\" alt=\"P&aacute;gina de blog de Sean O'Brien\" class=\"wp-image-35522\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/blog-de-sean-obrien.png 1020w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/blog-de-sean-obrien-300x177.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/blog-de-sean-obrien-150x89.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/blog-de-sean-obrien-768x453.png 768w\" sizes=\"(max-width: 1020px) 100vw, 1020px\" \/><\/figure><\/div><p>Sean eligi&oacute; dise&ntilde;os atrevidos y coloridos para mostrar mejor su pasi&oacute;n. Hay varias fotograf&iacute;as de &eacute;l surfeando y fuentes grandes que utilizan efectos simples para que el contenido sea f&aacute;cil de digerir.<\/p><p>Como es de Australia, el atleta utiliza el TLD con c&oacute;digo de pa&iacute;s <strong>.au<\/strong> para indicar a los motores de b&uacute;squeda y a los visitantes del sitio que su sitio web personal se centra en el pa&iacute;s. Puedes utilizar un <a href=\"\/mx\/comprar-dominio\">buscador de dominios<\/a> y el mismo enfoque para tener tu marca personal hoy mismo.<\/p><h3 class=\"wp-block-heading\" id=\"h-3-gary-le-masson\">3. Gary Le Masson<\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1017\" height=\"508\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/ejemplo-de-portfolio-gary-le-masson.png\" alt=\"Ejemplo de portfolio, sitio web de Gary Le Masson\" class=\"wp-image-35524\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/ejemplo-de-portfolio-gary-le-masson.png 1017w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/ejemplo-de-portfolio-gary-le-masson-300x150.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/ejemplo-de-portfolio-gary-le-masson-150x75.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/ejemplo-de-portfolio-gary-le-masson-768x384.png 768w\" sizes=\"(max-width: 1017px) 100vw, 1017px\" \/><\/figure><\/div><ul class=\"wp-block-list\">\n<li><strong>Por qu&eacute; es especial:<\/strong> dise&ntilde;o de portfolio creativo<\/li>\n<\/ul><p>Gary Le Masson es un consultor de an&aacute;lisis web y optimizaci&oacute;n de motores de b&uacute;squeda (SEO) con sede en Francia. El sitio de su portfolio es un gran ejemplo de dise&ntilde;o creativo.<\/p><p>Este freelancer utiliz&oacute; el dise&ntilde;o de los resultados de b&uacute;squeda de Google como inspiraci&oacute;n, incluida la barra de b&uacute;squeda, la paleta de colores, las fuentes y los dise&ntilde;os. Incluso anim&oacute; su nombre para que se pareciera a Google en el pie de p&aacute;gina.<\/p><p>Este es un enfoque inteligente para demostrar que trabaja en la industria y atraer empleadores potenciales.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"754\" height=\"614\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/curriculum-gary-le-masson.png\" alt=\"P&aacute;gina de curr&iacute;culum de Gary Le Masson\" class=\"wp-image-35525\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/curriculum-gary-le-masson.png 754w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/curriculum-gary-le-masson-300x244.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/curriculum-gary-le-masson-150x122.png 150w\" sizes=\"(max-width: 754px) 100vw, 754px\" \/><\/figure><\/div><p>En la parte superior de la p&aacute;gina, podemos ver los men&uacute;s del sitio:<\/p><ul class=\"wp-block-list\">\n<li><strong><strong>Web analytics<\/strong><\/strong>: describe sus competencias en SEO y an&aacute;lisis web.<\/li>\n\n\n\n<li><strong><strong>Reference<\/strong>: <\/strong>enumera los clientes anteriores de Gary.<\/li>\n\n\n\n<li><strong><strong>Google resume<\/strong><\/strong>: esta p&aacute;gina web tiene el historial educativo y los datos personales del consultor.<\/li>\n\n\n\n<li><strong>Contact:<\/strong> incluye un formulario de contacto y detalles, incluida la direcci&oacute;n de su oficina y enlaces sociales.<\/li>\n<\/ul><p>Generalmente, estas son las p&aacute;ginas que se encuentran con m&aacute;s frecuencia en los sitios web de portfolio. Estas ayudan a los clientes potenciales a comprender qui&eacute;n eres y si tus habilidades se ajustan a sus necesidades.<\/p><h3 class=\"wp-block-heading\" id=\"h-4-melyssa-griffin-nbsp\">4. <a href=\"https:\/\/www.melyssagriffin.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Melyssa Griffin<\/a>&nbsp;<\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1020\" height=\"505\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/ejemplo-de-portfolio-melyssa-griffin.png\" alt=\"Ejemplo de portfolio, sitio web de Melyssa Griffin\" class=\"wp-image-35526\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/ejemplo-de-portfolio-melyssa-griffin.png 1020w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/ejemplo-de-portfolio-melyssa-griffin-300x149.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/ejemplo-de-portfolio-melyssa-griffin-150x74.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/ejemplo-de-portfolio-melyssa-griffin-768x380.png 768w\" sizes=\"(max-width: 1020px) 100vw, 1020px\" \/><\/figure><\/div><ul class=\"wp-block-list\">\n<li><strong>Por qu&eacute; es especial: <\/strong>buen uso de ventanas emergentes y p&aacute;gina de inicio informativa<\/li>\n<\/ul><p>Melyssa Griffin es una exprofesora que empodera a otros emprendedores mediante la creaci&oacute;n de contenido sobre empresas en crecimiento, incluidos cursos en l&iacute;nea y un programa de capacitaci&oacute;n.<\/p><p>Al abrir su portfolio digital, aparecer&aacute; un cuestionario emergente que quiere saber sobre tu estilo emprendedor. Esta es una gran idea para impulsar el engagement y comprender mejor a los visitantes de tu sitio.<\/p><p>Otro punto destacado del portfolio de Melyssa es la informaci&oacute;n completa presentada en la p&aacute;gina de inicio. Esta muestra qui&eacute;n es ella, sus proyectos y clientes anteriores junto con enlaces esenciales. <\/p><p>La p&aacute;gina tambi&eacute;n incluye su cuenta de Instagram y la suscripci&oacute;n al bolet&iacute;n en el pie de p&aacute;gina para impulsar la acci&oacute;n.<\/p><p>Melyssa utiliza colores llamativos como el amarillo y el naranja para resaltar zonas o elementos. Tambi&eacute;n agrega ilustraciones y formas coloridas para <a href=\"\/mx\/tutoriales\/como-hacer-un-portfolio-profesional\/\">crear un portfolio<\/a> &uacute;nico y atractivo.<\/p><h2 class=\"wp-block-heading\" id=\"h-mejores-ejemplos-de-portfolio-de-figuras-publicas\">Mejores ejemplos de portfolio de figuras p&uacute;blicas<\/h2><p>Repasemos los sitios web de portfolios personales de cuatro figuras p&uacute;blicas, entre ellas un comediante y un futbolista.<\/p><h3 class=\"wp-block-heading\" id=\"h-1-russell-brand\">1. <a href=\"https:\/\/www.russellbrand.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Russell Brand<\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1019\" height=\"506\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/sitio-web-russell-brand.png\" alt=\"P&aacute;gina de inicio del sitio web Russell Brand\" class=\"wp-image-35527\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/sitio-web-russell-brand.png 1019w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/sitio-web-russell-brand-300x149.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/sitio-web-russell-brand-150x74.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/sitio-web-russell-brand-768x381.png 768w\" sizes=\"(max-width: 1019px) 100vw, 1019px\" \/><\/figure><\/div><ul class=\"wp-block-list\">\n<li><strong>Por qu&eacute; es especial:<\/strong> banner del bolet&iacute;n y funci&oacute;n de reserva<\/li>\n<\/ul><p>Russell Brand es actor, comediante y activista de rehabilitaci&oacute;n de drogas y salud mental. Al estar involucrado en actividades tan diferentes, es importante un sitio web personal para informar su agenda.<\/p><p>Su sitio muestra todo su trabajo, incluidos libros, podcasts y v&iacute;deos de comedia. Este tambi&eacute;n comparte sus presentaciones de stand-up y las fechas de eventos de la comunidad, permitiendo a los fan&aacute;ticos reservar boletos directamente en el sitio web.<\/p><p>El sitio tambi&eacute;n promueve el engagement de la comunidad al incitar a las personas a unirse a la lista de correo y colocar el banner del bolet&iacute;n en la parte superior de las p&aacute;ginas.<\/p><p>En cuanto al dise&ntilde;o, este utiliza una paleta de tonos tierra con fuentes serif e im&aacute;genes de cuervos ampliamente conocidos por sus fan&aacute;ticos por simbolizar el cambio o la transformaci&oacute;n.<\/p><h3 class=\"wp-block-heading\" id=\"h-2-lior-raz\">2. <a href=\"https:\/\/www.liorraz.co.il\/\" target=\"_blank\" rel=\"noreferrer noopener\">Lior Raz<\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1018\" height=\"464\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/sitio-web-de-lior-raz.png\" alt=\"Sitio web de Lior Raz\" class=\"wp-image-35528\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/sitio-web-de-lior-raz.png 1018w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/sitio-web-de-lior-raz-300x137.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/sitio-web-de-lior-raz-150x68.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/sitio-web-de-lior-raz-768x350.png 768w\" sizes=\"(max-width: 1018px) 100vw, 1018px\" \/><\/figure><\/div><ul class=\"wp-block-list\">\n<li><strong>Por qu&eacute; es especial: <\/strong>sitio de portfolio informativo de una p&aacute;gina y video destacado<\/li>\n<\/ul><p>Lior Raz se encuentra entre los mejores sitios web de portfolio de una p&aacute;gina de nuestra lista. Este actor y orador p&uacute;blico hizo que su sitio fuera visualmente atractivo y al mismo tiempo brindara informaci&oacute;n de manera abierta.<\/p><p>Al acceder a este sitio web de portfolio, los visitantes ver&aacute;n un video destacado que muestra fragmentos cortos de las pel&iacute;culas de Lior para ayudar a captar la atenci&oacute;n del visitante.<\/p><p>Este divide su sitio web de una p&aacute;gina en cinco secciones: acerca de, galer&iacute;a, prensa, discursos y contacto.<\/p><p>Los visitantes pueden hacer clic en el bot&oacute;n <strong>m&aacute;s <\/strong>para leer el contenido de cada secci&oacute;n, evitando el desorden. Tambi&eacute;n hay un bot&oacute;n de &ldquo;<strong>hamburguesa<\/strong>&rdquo; que contiene estas diferentes secciones para una navegaci&oacute;n m&aacute;s r&aacute;pida.<\/p><p>El sitio web del actor utiliza im&aacute;genes de banner de ancho completo para los t&iacute;tulos y negro para el fondo para mantener el foco en su contenido.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1015\" height=\"507\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/secion-galeria-del-sitio-lior-raz.png\" alt=\"Secci&oacute;n de la galer&iacute;a en el sitio Lior Raz\" class=\"wp-image-35530\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/secion-galeria-del-sitio-lior-raz.png 1015w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/secion-galeria-del-sitio-lior-raz-300x150.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/secion-galeria-del-sitio-lior-raz-150x75.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/secion-galeria-del-sitio-lior-raz-768x384.png 768w\" sizes=\"(max-width: 1015px) 100vw, 1015px\" \/><\/figure><h3 class=\"wp-block-heading\" id=\"h-3-cristiano-ronaldo\">3. <a href=\"https:\/\/www.cristianoronaldo.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Cristiano Ronaldo<\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"970\" height=\"613\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/ejemplo-de-portfolio-cristiano-ronaldo.png\" alt=\"Ejemplo de portfolio, sitio web de Cristiano Ronaldo\" class=\"wp-image-35531\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/ejemplo-de-portfolio-cristiano-ronaldo.png 970w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/ejemplo-de-portfolio-cristiano-ronaldo-300x190.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/ejemplo-de-portfolio-cristiano-ronaldo-150x95.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/ejemplo-de-portfolio-cristiano-ronaldo-768x485.png 768w\" sizes=\"(max-width: 970px) 100vw, 970px\" \/><\/figure><\/div><ul class=\"wp-block-list\">\n<li><strong>Por qu&eacute; es especial: <\/strong>aspectos destacados de su carrera<\/li>\n<\/ul><p>Si buscas ejemplos de dise&ntilde;o de una p&aacute;gina, visita el sitio web de Cristiano Ronaldo.<\/p><p>La secci&oacute;n superior del portfolio muestra todos los proyectos de Cristiano, desde su carrera futbol&iacute;stica hasta la industria de la moda. Para esta &uacute;ltima, cada imagen en el dise&ntilde;o basado en tarjetas dirigir&aacute; a los visitantes a la tienda en l&iacute;nea respectiva.<\/p><p>Al desplazarse hacia abajo, un slider horizontal resume la trayectoria profesional del jugador, categorizada por los clubes a los que se uni&oacute;. Cada diapositiva tiene un breve v&iacute;deo de fondo que muestra la contribuci&oacute;n de Cristiano al club.<\/p><p>Adem&aacute;s de las marcas y los aspectos m&aacute;s destacados de su carrera, este portfolio de una p&aacute;gina contiene un video de su producto m&aacute;s reciente, un formulario de suscripci&oacute;n al bolet&iacute;n y enlaces a las asociaciones anteriores de Cristiano.&nbsp;<\/p><h3 class=\"wp-block-heading\" id=\"h-4-bill-gates\">4. <a href=\"https:\/\/www.gatesnotes.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bill Gates<\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1017\" height=\"544\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/pagina-de-inicio-de-gates-notes.png\" alt=\"P&aacute;gina de inicio de Gates Notes\" class=\"wp-image-35532\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/pagina-de-inicio-de-gates-notes.png 1017w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/pagina-de-inicio-de-gates-notes-300x160.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/pagina-de-inicio-de-gates-notes-150x80.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/pagina-de-inicio-de-gates-notes-768x411.png 768w\" sizes=\"(max-width: 1017px) 100vw, 1017px\" \/><\/figure><\/div><ul class=\"wp-block-list\">\n<li><strong>Por qu&eacute; es especial: <\/strong>l&iacute;nea de tiempo personal y dise&ntilde;o de revista<\/li>\n<\/ul><p>El sitio web de Bill Gates es uno de los mejores ejemplos de portfolio si deseas concentrarte en mostrar tu trabajo y actualizaciones y compartir tus conocimientos.<\/p><p>El sitio utiliza un dise&ntilde;o de p&aacute;gina de revista y divide las entradas en temas como el clima, la energ&iacute;a y la educaci&oacute;n. En la parte superior de la p&aacute;gina de inicio, los art&iacute;culos destacados que se muestran son nuevos o relevantes para los eventos actuales.<\/p><p>El sitio web personal del cofundador de Microsoft utiliza paletas de colores en blanco y negro, lo que permite a los lectores centrarse en las potentes im&aacute;genes y v&iacute;deos de su canal de YouTube. <\/p><p>Para mantener la simplicidad, el sitio web utiliza un men&uacute; de hamburguesas en la parte superior derecha de la pantalla.<\/p><p>La p&aacute;gina &ldquo;Acerca de&rdquo; de este sitio web ofrece excelentes ideas para crear una l&iacute;nea de tiempo personal o profesional atractiva. Esta muestra un slider de l&iacute;nea de tiempo interactivo para ilustrar el viaje de Bill Gates en diferentes &aacute;reas (Microsoft, la Fundaci&oacute;n Bill y Melinda Gates y sus otros proyectos) junto con im&aacute;genes que las representan.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1019\" height=\"494\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/linea-de-tiempo-en-gates-notes.png\" alt=\"Slider de l&iacute;nea de tiempo en Gates Notes\" class=\"wp-image-35533\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/linea-de-tiempo-en-gates-notes.png 1019w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/linea-de-tiempo-en-gates-notes-300x145.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/linea-de-tiempo-en-gates-notes-150x73.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/linea-de-tiempo-en-gates-notes-768x372.png 768w\" sizes=\"(max-width: 1019px) 100vw, 1019px\" \/><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-mejores-ejemplos-de-portfolio-para-fotografos-y-artistas\">Mejores ejemplos de portfolio para fot&oacute;grafos y artistas<\/h2><p>Si eres fot&oacute;grafo o dise&ntilde;ador gr&aacute;fico, consulta estos sitios web para generar ideas para tu propio portfolio.<\/p><h3 class=\"wp-block-heading\" id=\"h-1-tamara-sredojevic\">1. <a href=\"https:\/\/www.iamtamara.design\/\" target=\"_blank\" rel=\"noreferrer noopener\">Tamara Sredojevic<\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1020\" height=\"517\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/ejemplo-de-portfolio-tamara-sredojevic.png\" alt=\"Ejemplo de portfolio, sitio web de Tamara Sredojevic\" class=\"wp-image-35534\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/ejemplo-de-portfolio-tamara-sredojevic.png 1020w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/ejemplo-de-portfolio-tamara-sredojevic-300x152.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/ejemplo-de-portfolio-tamara-sredojevic-150x76.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/ejemplo-de-portfolio-tamara-sredojevic-768x389.png 768w\" sizes=\"(max-width: 1020px) 100vw, 1020px\" \/><\/figure><\/div><ul class=\"wp-block-list\">\n<li><strong>Por qu&eacute; es especial:<\/strong> propuesta de valor &uacute;nica y dominio personalizado<\/li>\n<\/ul><p>Tamara Sredojevic se especializa en dise&ntilde;o UX accesible y sostenible. Su sitio web es un excelente ejemplo de un portfolio de dise&ntilde;o que refleja valores personales.<\/p><p>Ella indica claramente su mercado objetivo y su base de clientes existente en la p&aacute;gina de inicio, en su mayor&iacute;a organizaciones sin fines de lucro, organizaciones ben&eacute;ficas y marcas &eacute;ticas.<\/p><p>Adem&aacute;s de mencionar sus valores fundamentales en la p&aacute;gina Acerca de, el pie de p&aacute;gina del sitio enlaza con la p&aacute;gina de declaraci&oacute;n de accesibilidad, la cual explica c&oacute;mo aplica los est&aacute;ndares de accesibilidad al sitio.<\/p><p>El sitio tambi&eacute;n presenta una puntuaci&oacute;n de huella de carbono para demostrar que es respetuoso con el medio ambiente.<\/p><p>El portfolio de dise&ntilde;o de Tamara se basa en la simplicidad, utilizando formas grandes, l&iacute;neas finas y colores apagados.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1018\" height=\"293\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/puntuacion-de-huella-de-carbono.png\" alt=\"Puntuaci&oacute;n de huella de carbono en el sitio de Tamara Sredojevic\" class=\"wp-image-35535\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/puntuacion-de-huella-de-carbono.png 1018w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/puntuacion-de-huella-de-carbono-300x86.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/puntuacion-de-huella-de-carbono-150x43.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/puntuacion-de-huella-de-carbono-768x221.png 768w\" sizes=\"(max-width: 1018px) 100vw, 1018px\" \/><\/figure><\/div><p>Para educar a los clientes potenciales sobre su trabajo, cada p&aacute;gina de proyecto explica su proceso de dise&ntilde;o, incluidos los antecedentes del proyecto y su enfoque UX.<\/p><h3 class=\"wp-block-heading\" id=\"h-2-demas-rusli\">2. <a href=\"https:\/\/www.demasrusli.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Demas Rusli<\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1014\" height=\"503\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-fotografia-de-demas-rusli.png\" alt=\"Portfolio de fotograf&iacute;a de Demas Rusli\" class=\"wp-image-35537\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-fotografia-de-demas-rusli.png 1014w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-fotografia-de-demas-rusli-300x149.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-fotografia-de-demas-rusli-150x74.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-fotografia-de-demas-rusli-768x381.png 768w\" sizes=\"(max-width: 1014px) 100vw, 1014px\" \/><\/figure><\/div><ul class=\"wp-block-list\">\n<li><strong>Por qu&eacute; es especial:<\/strong> imagen destacada<\/li>\n<\/ul><p>Demas Rusli es un fot&oacute;grafo con cientos de miles de seguidores en las redes sociales. Este se centra en fotograf&iacute;a urbana, arquitect&oacute;nica y a&eacute;rea.<\/p><p>Este ejemplo de portfolio muestra fotograf&iacute;as visualmente atractivas directamente en la p&aacute;gina de inicio. Estas est&aacute;n divididas en tres secciones: imagen destacada, categor&iacute;as de fotograf&iacute;as y su cuenta de Instagram.<\/p><p>En la parte superior, este muestra im&aacute;genes de ancho completo que cambian cada cinco segundos para hacer que el <a href=\"\/mx\/tutoriales\/como-crear-una-pagina-web-de-fotografia\">sitio web de fotograf&iacute;a<\/a> se destaque.<\/p><p>Debajo de eso, Demas clasifica su trabajo en seis temas (encargos, urbano, a&eacute;reo, arquitectura, naturaleza y fantas&iacute;a) para ayudar a los clientes potenciales a decidir si su trabajo se ajusta a sus necesidades. <\/p><p>Si haces clic en una de las categor&iacute;as, deber&iacute;as ver una galer&iacute;a llena de sus fotos y secuencias de video est&aacute;ticas. El dise&ntilde;o de la galer&iacute;a depende de la categor&iacute;a. Por ejemplo, en la p&aacute;gina Commissions, Demas utiliza un dise&ntilde;o de cuadr&iacute;cula que presenta la imagen o GIF de cada proyecto.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1022\" height=\"511\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/diseno-de-cuadricula-de-sitio-de-demas-rusli.png\" alt=\"Dise&ntilde;o de cuadr&iacute;cula del sitio web de Demas Rusli\" class=\"wp-image-35538\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/diseno-de-cuadricula-de-sitio-de-demas-rusli.png 1022w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/diseno-de-cuadricula-de-sitio-de-demas-rusli-300x150.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/diseno-de-cuadricula-de-sitio-de-demas-rusli-150x75.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/diseno-de-cuadricula-de-sitio-de-demas-rusli-768x384.png 768w\" sizes=\"(max-width: 1022px) 100vw, 1022px\" \/><\/figure><\/div><p>Por si fuera poco, Demas&nbsp;agrega botones que conducen a otras categor&iacute;as encima del t&iacute;tulo de cada categor&iacute;a, lo que facilita a los visitantes navegar por diferentes &aacute;reas sin tener que volver a la p&aacute;gina de inicio.<\/p><h3 class=\"wp-block-heading\" id=\"h-3-alice-lee\">3. <a href=\"https:\/\/www.byalicelee.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Alice Lee<\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1021\" height=\"437\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-alice-lee.png\" alt=\"Portfolio de Alice Lee\" class=\"wp-image-35539\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-alice-lee.png 1021w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-alice-lee-300x128.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-alice-lee-150x64.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-alice-lee-768x329.png 768w\" sizes=\"(max-width: 1021px) 100vw, 1021px\" \/><\/figure><\/div><ul class=\"wp-block-list\">\n<li><strong>Por qu&eacute; es especial:<\/strong> un dise&ntilde;o minimalista para portfolios de ilustraciones<\/li>\n<\/ul><p>Alice Lee es una ilustradora y muralista independiente. Su portfolio visualmente atractivo puede <a href=\"\/mx\/tutoriales\/inspiracion-disenos-web\">inspirar excelentes dise&ntilde;os web<\/a>, especialmente para ilustradores.<\/p><p>En la parte superior de la p&aacute;gina de inicio, Alice agrega una animaci&oacute;n sutil donde la imagen principal se mueve seg&uacute;n el cursor del visitante.<\/p><p>Debajo, esta muestra varios proyectos utilizando un dise&ntilde;o minimalista sobre un fondo blanco, lo que permite a los visitantes centrarse en su colorido y hermoso trabajo. Haz clic en una de las im&aacute;genes para ver la descripci&oacute;n del proyecto y sus borradores.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"960\" height=\"612\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/descripcion-del-proyecto-y-borradores-portfolio-de-alice-lee.png\" alt=\"Descripci&oacute;n del proyecto y sus borradores en el portfolio de Alice Lee\" class=\"wp-image-35540\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/descripcion-del-proyecto-y-borradores-portfolio-de-alice-lee.png 960w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/descripcion-del-proyecto-y-borradores-portfolio-de-alice-lee-300x191.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/descripcion-del-proyecto-y-borradores-portfolio-de-alice-lee-150x96.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/descripcion-del-proyecto-y-borradores-portfolio-de-alice-lee-768x490.png 768w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-4-lauren-hom\">4. <a href=\"http:\/\/homsweethom.com\" target=\"_blank\" rel=\"noreferrer noopener\">Lauren Hom<\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1018\" height=\"425\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-lauren-hom.png\" alt=\"Ejemplo de portfolio, sitio web de Lauren Hom\" class=\"wp-image-35541\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-lauren-hom.png 1018w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-lauren-hom-300x125.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-lauren-hom-150x63.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-lauren-hom-768x321.png 768w\" sizes=\"(max-width: 1018px) 100vw, 1018px\" \/><\/figure><\/div><ul class=\"wp-block-list\">\n<li><strong>Por qu&eacute; es especial:<\/strong> contenido detr&aacute;s de escena y blog educativo<\/li>\n<\/ul><p>Lauren Hom es una dise&ntilde;adora, ilustradora y artista de letras que vive en Nueva York. Es conocida por sus paletas de colores brillantes y sus divertidas formas de letras y puedes ver que tambi&eacute;n aplica ese estilo en su portfolio de dise&ntilde;o gr&aacute;fico.<\/p><p>Lauren utiliza varios tonos de verde para el fondo y naranja para los elementos resaltados, como hiperv&iacute;nculos y botones de llamada a la acci&oacute;n.<\/p><p>Esta dise&ntilde;adora gr&aacute;fica comparte fotograf&iacute;as del detr&aacute;s de escena de los productos finales en la p&aacute;gina Work.<\/p><p>Tambi&eacute;n escribe entradas de blog sobre murales, letras y consejos para trabajar como aut&oacute;nomo, compartiendo su experiencia y ayudando a mejorar el posicionamiento del sitio de su portfolio en los resultados de b&uacute;squeda.<\/p><h2 class=\"wp-block-heading\" id=\"h-mejores-ejemplos-de-portfolio-para-blogueros-y-escritores\">Mejores ejemplos de portfolio para blogueros y escritores<\/h2><p>Esta secci&oacute;n cubre cuatro ejemplos de portfolios para escritores, desde redactores publicitarios hasta escritores musicales.<\/p><h3 class=\"wp-block-heading\" id=\"h-1-todd-clarke\">1. <a href=\"https:\/\/toddsgotapen.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Todd Clarke<\/a><\/h3><figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1020\" height=\"500\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-todd-clarke.png\" alt=\"Portfolio de Todd Clarke\n\" class=\"wp-image-35542\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-todd-clarke.png 1020w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-todd-clarke-300x147.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-todd-clarke-150x74.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-todd-clarke-768x376.png 768w\" sizes=\"(max-width: 1020px) 100vw, 1020px\" \/><\/figure><ul class=\"wp-block-list\">\n<li><strong>Por qu&eacute; es especial:<\/strong> texto atractivo<\/li>\n<\/ul><p>Utilizando la marca Toddsgotapen, Todd Clarke demuestra que crear un portfolio de sitios web atractivo no requiere animaciones complejas. Este redactor mantiene el dise&ntilde;o de su sitio simple y utiliza sus habilidades de redacci&oacute;n para atraer la atenci&oacute;n del visitante.<\/p><p>Su texto es sencillo y atractivo, lo que ayuda a los lectores a comprender r&aacute;pidamente lo que ofrece y por qu&eacute; deber&iacute;an contratarlo. Este utiliza t&iacute;tulos grandes para estructurar la informaci&oacute;n, adem&aacute;s de oraciones en negrita e &iacute;conos en el cuerpo del texto para resaltar puntos importantes.<\/p><p>En la p&aacute;gina Portfolio, las categor&iacute;as cliqueables en la parte superior facilitan a los lectores consultar su trabajo. Cada imagen de la p&aacute;gina los dirigir&aacute; al sitio web en vivo o a una imagen en pantalla completa que refleja la versi&oacute;n en vivo del proyecto. Para establecer credibilidad, Todd dedica una p&aacute;gina entera a los testimonios.<\/p><p>Como Todd solo tiene un perfil de LinkedIn, tacha otras cuentas de redes sociales en el pie de p&aacute;gina para que los visitantes sepan d&oacute;nde est&aacute; disponible.<\/p><h3 class=\"wp-block-heading\" id=\"h-2-muriel-vega\">2. <a href=\"https:\/\/www.murielvega.net\/\" target=\"_blank\" rel=\"noreferrer noopener\">Muriel Vega<\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1018\" height=\"507\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-la-escritora-muriel-vega.png\" alt=\"Portfolio de la escritora Muriel Vega\" class=\"wp-image-35543\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-la-escritora-muriel-vega.png 1018w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-la-escritora-muriel-vega-300x149.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-la-escritora-muriel-vega-150x75.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-la-escritora-muriel-vega-768x382.png 768w\" sizes=\"(max-width: 1018px) 100vw, 1018px\" \/><\/figure><\/div><ul class=\"wp-block-list\">\n<li><strong>Por qu&eacute; es especial:<\/strong> navegaci&oacute;n sencilla<\/li>\n<\/ul><p>Muriel Vega es una escritora freelance enfocada en temas como la tecnolog&iacute;a, la gastronom&iacute;a y la cultura que ha trabajado con varias marcas populares, incluidas The Guardian y Patreon. Su portfolio es simple pero eficaz para mostrar a los empleadores potenciales sus habilidades de escritura.<\/p><p>La p&aacute;gina de inicio presenta el t&iacute;tulo de su trabajo, men&uacute;, seis ilustraciones con links para diferenciar sus proyectos e &iacute;conos de redes sociales. Su trabajo est&aacute; organizado en una cuadr&iacute;cula que contiene una imagen, el t&iacute;tulo del art&iacute;culo y la empresa que lo public&oacute;.<\/p><p>En su p&aacute;gina Acerca de, Muriel mantiene la informaci&oacute;n sencilla al describir sus experiencias previas de escritura.<\/p><h3 class=\"wp-block-heading\" id=\"h-3-helena-bowen\">3. <a href=\"https:\/\/helenabowen.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Helena Bowen<\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1021\" height=\"367\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-la-escritora-helena-bowen.png\" alt=\"Portfolio de la escritora Helena Bowen\" class=\"wp-image-35544\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-la-escritora-helena-bowen.png 1021w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-la-escritora-helena-bowen-300x108.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-la-escritora-helena-bowen-150x54.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-la-escritora-helena-bowen-768x276.png 768w\" sizes=\"(max-width: 1021px) 100vw, 1021px\" \/><\/figure><\/div><ul class=\"wp-block-list\">\n<li><strong>Por qu&eacute; es especial:<\/strong> fuerte secci&oacute;n en la mitad superior de la p&aacute;gina<\/li>\n<\/ul><p>Helena Bowen es una destacada oradora, formadora y redactora de discursos. Esta ha trabajado con m&aacute;s de 150 clientes, obtuvo millones de visitas en l&iacute;nea y apareci&oacute; en medios como TED, CNN y National Geographic.<\/p><p>Helena utiliza la mitad superior de la p&aacute;gina de inicio como un elemento impactante para atraer clientes potenciales. Aqu&iacute; muestra la cantidad de clientes con los que trabaj&oacute;, traducciones de idiomas y vistas.<\/p><p>Al desplazarse hacia abajo, no solo incluye los testimonios de sus clientes anteriores, sino tambi&eacute;n sus comentarios en las redes sociales.<\/p><p>Adem&aacute;s de brindar pruebas sociales, Helena explica su trayectoria profesional y su flujo de trabajo general.<\/p><p>En cuanto al dise&ntilde;o del sitio, lo mantiene simple con amplios espacios en blanco y fotograf&iacute;as profesionales para que los lectores se concentren en el contenido y colores fuertes para resaltar los detalles esenciales.<\/p><h3 class=\"wp-block-heading\" id=\"h-4-duygu-muhurdar\">4. <a href=\"https:\/\/dmuhurdar.journoportfolio.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Duygu M&uuml;h&uuml;rdar<\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1019\" height=\"473\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-del-compositor-duygu-muhudar.png\" alt=\"Portfolio del compositor musical Duygu M&uuml;h&uuml;rdar\" class=\"wp-image-35545\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-del-compositor-duygu-muhudar.png 1019w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-del-compositor-duygu-muhudar-300x139.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-del-compositor-duygu-muhudar-150x70.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-del-compositor-duygu-muhudar-768x356.png 768w\" sizes=\"(max-width: 1019px) 100vw, 1019px\" \/><\/figure><\/div><ul class=\"wp-block-list\">\n<li><strong>Por qu&eacute; es especial:<\/strong> interfaz de usuario sencilla, navegaci&oacute;n limpia<\/li>\n<\/ul><p>Duygu M&uuml;h&uuml;rdar es un compositor musical que desempe&ntilde;a diversos roles en la industria. Como tiene m&aacute;s que art&iacute;culos para mostrar, el uso de miniaturas para representar su trabajo escrito y visual mantiene la p&aacute;gina de inicio limpia pero informativa.<\/p><p>Cada miniatura del men&uacute; refleja el mismo estilo minimalista con mucho espacio en blanco. Tambi&eacute;n incluye enlaces de sus redes sociales para respaldar el contenido basado en texto.<\/p><p>La p&aacute;gina de entradas, escrita en turco, ofrece una funci&oacute;n de b&uacute;squeda y clasificaci&oacute;n. Los visitantes tambi&eacute;n pueden encontrar art&iacute;culos espec&iacute;ficos seg&uacute;n su tipo de publicaci&oacute;n.<\/p><p>El fondo blanco en todo el sitio hace que las secciones resaltadas se destaquen. Este es un dise&ntilde;o para la p&aacute;gina de trabajos en redes sociales, ya que las coloridas miniaturas podr&iacute;an chocar con colores no neutros.<\/p><h2 class=\"wp-block-heading\" id=\"h-mejores-ejemplos-de-portfolio-para-estudiantes\">Mejores ejemplos de portfolio para estudiantes<\/h2><p>Hemos reunido cuatro ejemplos de portfolio para estudiantes y reci&eacute;n graduados para que sirvan de inspiraci&oacute;n para tu propio sitio web.<\/p><h3 class=\"wp-block-heading\" id=\"h-1-novia-chao\">1. Novia Chao<\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1020\" height=\"464\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-la-disenadora-ux-novia-chao.png\" alt=\"Portfolio de la dise&ntilde;adora UX Novia Chao\" class=\"wp-image-35546\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-la-disenadora-ux-novia-chao.png 1020w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-la-disenadora-ux-novia-chao-300x136.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-la-disenadora-ux-novia-chao-150x68.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-la-disenadora-ux-novia-chao-768x349.png 768w\" sizes=\"(max-width: 1020px) 100vw, 1020px\" \/><\/figure><\/div><ul class=\"wp-block-list\">\n<li><strong>Por qu&eacute; es especial: <\/strong>s&oacute;lida p&aacute;gina Acerca de y dise&ntilde;o de portfolio<\/li>\n<\/ul><p>Novia Choa es una reci&eacute;n graduada en ingenier&iacute;a de la Universidad de Columbia Brit&aacute;nica que trabaja como dise&ntilde;adora de UX.<\/p><p>Esta mantiene la p&aacute;gina de inicio simple, con sutiles colores degradados para llenar el espacio. Aqu&iacute; incluye su nombre, profesi&oacute;n, dos breves p&aacute;rrafos biogr&aacute;ficos y cuatro proyectos destacados.<\/p><p>Novia agreg&oacute; varias microinteracciones para hacer que el portfolio de dise&ntilde;o sea atractivo, como un efecto de desvanecimiento del t&iacute;tulo de la secci&oacute;n de trabajo y cambios de color cuando los visitantes pasan el cursor sobre el cuadro del proyecto destacado.<\/p><p>Cada p&aacute;gina de proyecto tiene una breve descripci&oacute;n del producto, un bot&oacute;n en el que se puede hacer clic que dirige a los visitantes a su prototipo en Figma y una explicaci&oacute;n detallada del flujo de trabajo.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1020\" height=\"520\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/descripcion-de-proyecto-sitio-de-novia-chao.png\" alt=\"Descripci&oacute;n de un proyecto en el sitio web de Novia Chao\" class=\"wp-image-35547\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/descripcion-de-proyecto-sitio-de-novia-chao.png 1020w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/descripcion-de-proyecto-sitio-de-novia-chao-300x153.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/descripcion-de-proyecto-sitio-de-novia-chao-150x76.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/descripcion-de-proyecto-sitio-de-novia-chao-768x392.png 768w\" sizes=\"(max-width: 1020px) 100vw, 1020px\" \/><\/figure><\/div><p>Para fortalecer su marca profesional, Novia comparte sus intereses, fotograf&iacute;as y mantras de dise&ntilde;o en su p&aacute;gina Acerca de.<\/p><h3 class=\"wp-block-heading\" id=\"h-2-greg-chen\">2. Greg Chen<\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1019\" height=\"536\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-greg-chen.png\" alt=\"Portfolio del dise&ntilde;ador de productos Greg Chen\" class=\"wp-image-35549\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-greg-chen.png 1019w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-greg-chen-300x158.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-greg-chen-150x79.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-greg-chen-768x404.png 768w\" sizes=\"(max-width: 1019px) 100vw, 1019px\" \/><\/figure><\/div><ul class=\"wp-block-list\">\n<li><strong>Por qu&eacute; es especial:<\/strong> flujo de trabajo detallado<\/li>\n<\/ul><p>Greg Chen tiene uno de los mejores sitios web de portfolio si buscas una forma atractiva de dise&ntilde;ar las p&aacute;ginas de tus productos. Este reci&eacute;n graduado de la Universidad Carnegie Mellon se describe a s&iacute; mismo y muestra los proyectos destacados que ya est&aacute;n en la p&aacute;gina de inicio.<\/p><p>Una vez que hagas clic en uno de los enlaces de proyecto, ver&aacute;s un video y una breve descripci&oacute;n del proyecto. A medida que te desplazas hacia abajo, se mostrar&aacute;n los antecedentes del proyecto, su proceso de investigaci&oacute;n y dise&ntilde;o y el resultado. <\/p><p>Greg tambi&eacute;n adjunta fotograf&iacute;as y capturas de pantalla para ilustrar su flujo de trabajo y resaltar su experiencia.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1012\" height=\"526\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/pagina-de-proyecto-sitio-de-greg-chen.png\" alt=\"P&aacute;gina de un proyecto en el sitio de Greg Chen\" class=\"wp-image-35550\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/pagina-de-proyecto-sitio-de-greg-chen.png 1012w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/pagina-de-proyecto-sitio-de-greg-chen-300x156.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/pagina-de-proyecto-sitio-de-greg-chen-150x78.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/pagina-de-proyecto-sitio-de-greg-chen-768x399.png 768w\" sizes=\"(max-width: 1012px) 100vw, 1012px\" \/><\/figure><\/div><p>Adem&aacute;s de describir su trayectoria educativa y profesional en la p&aacute;gina Acerca de, Greg proporciona un curr&iacute;culum descargable para referencia futura y explica su funci&oacute;n con m&aacute;s detalle.<\/p><h3 class=\"wp-block-heading\" id=\"h-3-marino-franulovic\">3. <a href=\"https:\/\/www.franulovic.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Marino Franulovic<\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1018\" height=\"498\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-marino-franulovic.png\" alt=\"Portfolio de Marino Franulovic\" class=\"wp-image-35553\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-marino-franulovic.png 1018w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-marino-franulovic-300x147.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-marino-franulovic-150x73.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-marino-franulovic-768x376.png 768w\" sizes=\"(max-width: 1018px) 100vw, 1018px\" \/><\/figure><\/div><ul class=\"wp-block-list\">\n<li><strong>Por qu&eacute; es especial:<\/strong> animaciones sutiles en la p&aacute;gina de inicio<\/li>\n<\/ul><p>Marino Franulovic tiene una licenciatura en artes de la Universidad de Coventry y centra su carrera en la consultor&iacute;a de marketing digital.<\/p><p>La secci&oacute;n de la mitad superior de su p&aacute;gina de inicio tiene un t&iacute;tulo grande, su breve biograf&iacute;a y texto animado. A continuaci&oacute;n, Marino describe sus servicios, los cuales incluyen la planificaci&oacute;n de marketing y el desarrollo web, aplicando sutiles efectos flotantes a medida que los usuarios se desplazan.<\/p><p>M&aacute;s abajo, este incluye una entrada de blog, una secci&oacute;n Acerca de con sus datos de contacto, fotograf&iacute;a y testimonios. <\/p><p>Aunque el <a href=\"\/mx\/tutoriales\/portafolio-de-programador\">portfolio de desarrollador web<\/a> de Marino es un gran ejemplo de buen dise&ntilde;o, podr&iacute;a mejorarse mostrando el trabajo de empleadores anteriores para convencer a clientes potenciales de trabajar con &eacute;l.<\/p><h3 class=\"wp-block-heading\" id=\"h-4-dayla-baron\">4. <a href=\"https:\/\/www.dalyabaron.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Dayla Baron<\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1020\" height=\"503\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-dalya-baron.png\" alt=\"Portfolio de escritura acad&eacute;mica de Dalya Baron\" class=\"wp-image-35554\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-dalya-baron.png 1020w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-dalya-baron-300x148.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-dalya-baron-150x74.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/portfolio-de-dalya-baron-768x379.png 768w\" sizes=\"(max-width: 1020px) 100vw, 1020px\" \/><\/figure><\/div><ul class=\"wp-block-list\">\n<li><strong>Por qu&eacute; es especial:<\/strong> se centra en su curr&iacute;culum<\/li>\n<\/ul><p>Para aquellos que buscan inspiraci&oacute;n para su portfolio de escritura acad&eacute;mica, el sitio web de Dayla Baron es un excelente ejemplo.<\/p><p>La&nbsp; estudiante de doctorado en astrof&iacute;sica mantiene la navegaci&oacute;n sencilla al mostrar cuatro men&uacute;s en la p&aacute;gina de inicio: Resume, Research, Outreach y Personal (Curr&iacute;culum, Investigaci&oacute;n, Divulgaci&oacute;n y Personal). <\/p><p>Los men&uacute;s tambi&eacute;n son fijos, por lo que los visitantes no necesitan volver a la p&aacute;gina de inicio para buscar otras categor&iacute;as.<\/p><p>Dayla escribe su educaci&oacute;n, premios y publicaciones cronol&oacute;gicamente en la p&aacute;gina de curr&iacute;culum, mientras que la p&aacute;gina de investigaci&oacute;n tiene gr&aacute;ficos y cifras para ayudar a los lectores a vislumbrar sus trabajos acad&eacute;micos.<\/p><h2 class=\"wp-block-heading\" id=\"h-que-hace-que-un-sitio-web-de-portfolio-sea-excelente\">&iquest;Qu&eacute; hace que un sitio web de portfolio sea excelente?<\/h2><p>Los ejemplos de portfolio anteriores dejan en claro que dise&ntilde;ar un portfolio no se trata solo de est&eacute;tica sino tambi&eacute;n de UX y contenido en general. Por lo tanto, esta secci&oacute;n cubrir&aacute; las cinco mejores caracter&iacute;sticas de un portfolio a considerar al crear uno nuevo o actualizar uno existente.<\/p><p><strong>Proyectos Relevantes<\/strong><\/p><p>Aseg&uacute;rate de incluir solo tu mejor trabajo en el portfolio para mostrar habilidades relevantes para el puesto que te interesa.<\/p><p>Por lo tanto, definir un p&uacute;blico objetivo es importante para ayudar a filtrar tu trabajo y mostrar tu experiencia desde la perspectiva del cliente. <\/p><p>Por ejemplo, los fot&oacute;grafos de alimentos deben limitar su portfolio a fotograf&iacute;as comerciales y de alimentos, incluso si han capturado hermosas fotograf&iacute;as de paisajes.<\/p><p><strong>Navegaci&oacute;n fluida<\/strong><\/p><p>La navegaci&oacute;n sencilla permite a los visitantes del sitio encontrar lo que buscan m&aacute;s r&aacute;pido, brindando una excelente experiencia de usuario. Evita tener demasiados enlaces de men&uacute; y aseg&uacute;rate de que el dise&ntilde;o sea completamente adaptativo.<\/p><p>Si quieres ser creativo, no te olvides de la experiencia del usuario. Por ejemplo, quienes crean un portafolio de fotograf&iacute;a pueden utilizar el portfolio de Demas Rusli como ejemplo de organizaci&oacute;n de diferentes categor&iacute;as.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1021\" height=\"524\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/categorias-en-portfolio-de-fotografia-de-demas-rusli.png\" alt=\"Categor&iacute;as en el portfolio de fotograf&iacute;a de Demas Rusli\" class=\"wp-image-35555\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/categorias-en-portfolio-de-fotografia-de-demas-rusli.png 1021w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/categorias-en-portfolio-de-fotografia-de-demas-rusli-300x154.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/categorias-en-portfolio-de-fotografia-de-demas-rusli-150x77.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/categorias-en-portfolio-de-fotografia-de-demas-rusli-768x394.png 768w\" sizes=\"(max-width: 1021px) 100vw, 1021px\" \/><\/figure><\/div><p><strong>Dise&ntilde;o bonito<\/strong><\/p><p>Seguir las mejores pr&aacute;cticas de dise&ntilde;o web es esencial para brindar una buena experiencia de usuario y maximizar tus posibilidades de contrataci&oacute;n. Independientemente de tu tipo de portfolio, aseg&uacute;rate de:<\/p><ul class=\"wp-block-list\">\n<li>Utilizar im&aacute;genes de alta calidad.<\/li>\n\n\n\n<li>Seleccionar la paleta de colores que mejor represente tu personalidad y resalte tu trabajo.<\/li>\n\n\n\n<li>Elegir la tipograf&iacute;a adecuada.<\/li>\n<\/ul><p>Las <a href=\"\/mx\/plantillas-web\">plantillas web<\/a> creadas por dise&ntilde;adores son una excelente manera de comenzar. La mayor&iacute;a de los <a href=\"\/mx\/creador-de-paginas-web\">creadores de sitios web<\/a>, incluido el de&nbsp;Hostinger, ofrecen excelentes plantillas para portfolios creativos en l&iacute;nea, por lo que no es necesario crear todo desde cero.<\/p><p>Simplemente agrega tu contenido y, si es necesario, personaliza el dise&ntilde;o con nuestro editor f&aacute;cil de usar.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"468\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/ejemplo-portfolio-creador-de-paginas-web-hostinger-1024x468.png\" alt=\"Ejemplo del dise&ntilde;o de un portfolio con el Creador de p&aacute;ginas web de Hostinger\" class=\"wp-image-35562\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/ejemplo-portfolio-creador-de-paginas-web-hostinger.png 1024w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/ejemplo-portfolio-creador-de-paginas-web-hostinger-300x137.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/ejemplo-portfolio-creador-de-paginas-web-hostinger-150x69.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/09\/ejemplo-portfolio-creador-de-paginas-web-hostinger-768x351.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p><strong>Informaci&oacute;n sobre ti<\/strong><\/p><p>Tu historia profesional ayuda a convencer a clientes potenciales de trabajar contigo, especialmente cuando tienes educaci&oacute;n, capacitaci&oacute;n y reconocimiento relevantes. Sin embargo, no temas alejarte de un tono profesional para <a href=\"\/mx\/tutoriales\/como-crear-una-marca\">construir una marca<\/a> adecuada a tu personalidad.<\/p><p>Parte de la informaci&oacute;n necesaria para incluir en los sitios web de portfolio es:<\/p><ul class=\"wp-block-list\">\n<li>Detalles personales como aficiones y valores.<\/li>\n\n\n\n<li>Antecedentes profesionales, como educaci&oacute;n y certificados.<\/li>\n\n\n\n<li>Tu foto.<\/li>\n<\/ul><p><strong>Prueba social<\/strong><\/p><p>La prueba social hace que tu marca personal sea m&aacute;s confiable. Tambi&eacute;n, adem&aacute;s de incluir testimonios de clientes o colegas anteriores, puedes a&ntilde;adir art&iacute;culos y premios.<\/p><p>Por ejemplo, Enrico Deiana menciona su participaci&oacute;n en el jurado de Awwwards en su portfolio de desarrollo web y Helena Bowen incluy&oacute; art&iacute;culos en los que aparec&iacute;an sus clientes.<\/p><figure class=\"wp-block-image size-large\"><a href=\"\/mx\/creador-de-paginas-web\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/blog.hostinger.io\/mx-tutoriales\/wp-content\/uploads\/sites\/39\/2023\/02\/ES-Website-Builder_in-text-banner-1024x300.png\" alt=\"\" class=\"wp-image-29282\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/02\/ES-Website-Builder_in-text-banner.png 1024w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/02\/ES-Website-Builder_in-text-banner-300x88.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/02\/ES-Website-Builder_in-text-banner-150x44.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/02\/ES-Website-Builder_in-text-banner-768x225.png 768w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2023\/02\/ES-Website-Builder_in-text-banner-1536x450.png 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusi&oacute;n<\/h2><p>Un buen sitio web de portfolio combina el dise&ntilde;o correcto, ejemplos de trabajo relevantes y contenido.<\/p><p>Antes de <a href=\"\/mx\/tutoriales\/como-hacer-un-portfolio-profesional\/\">crear un portfolio<\/a>, considera tu funci&oacute;n, personalidad y valores para que te destaques. Un dise&ntilde;ador web, por ejemplo, puede demostrar sus habilidades t&eacute;cnicas con microinteracciones, como Enrico Deiana, o escribir sus principios como lo hace Tamara Sredojevic.<\/p><p>Adem&aacute;s del dise&ntilde;o, utilizar tu experiencia, como las habilidades de redacci&oacute;n publicitaria de Todd Clarke, es una excelente manera de mostrar a los posibles empleadores y clientes lo que tienes para ofrecer.<\/p><p>Esperamos que hayas encontrado inspiraci&oacute;n en los 20 ejemplos de portafolios de este art&iacute;culo y hayas generado ideas para aplicar a tu portafolio de dise&ntilde;o web o cualquiera que sea tu campo.<\/p><p>Si dudas de la calidad de tu portafolio, preg&uacute;ntale a tus amigos o contacta a un experto para que lo eval&uacute;e y te ayude a mejorarlo.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Un portfolio digital ayuda a resaltar tu mejor trabajo y aumentar la visibilidad en l&iacute;nea, abriendo oportunidades para posibles empleos y colaboraciones. Sin embargo, crear un portfolio en l&iacute;nea que se destaque puede ser un desaf&iacute;o, por lo que recomendamos analizar los mejores ejemplos de portfolio antes de comenzar a hacer un sitio web. Este [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/mx\/tutoriales\/portfolio-ejemplos\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":334,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"Los 20 mejores ejemplos de portfolio para inspirarte en %currentyear%","rank_math_description":"Echa un vistazo a los 20 mejores ejemplos de portfolio para inspirarte. Compartimos portafolios de figuras p\u00fablicas, escritores y m\u00e1s.","rank_math_focus_keyword":"portfolio ejemplos","footnotes":""},"categories":[5701,14371],"tags":[14438],"class_list":["post-35518","post","type-post","status-publish","format-standard","hentry","category-desarrollo-web","category-produccion","tag-portfolio-ejemplos"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/portfolio-website-examples","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/sites-portfolio-exemplos","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/portfolio-exemple","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/portfolio-ejemplos","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/contoh-website-portofolio","default":0},{"locale":"de-DE","link":"https:\/\/www.hostinger.com\/de\/tutorials\/portfolio-beispiele","default":0},{"locale":"it-IT","link":"https:\/\/www.hostinger.com\/it\/tutorial\/esempi-di-portfolio","default":0},{"locale":"nl-NL","link":"https:\/\/www.hostinger.com\/nl\/tutorials\/portfolio-voorbeeld","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/portfolio-website-examples\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/portfolio-website-examples\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/portfolio-website-examples\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/portfolio-ejemplos","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/portfolio-ejemplos","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/portfolio-ejemplos","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/sites-portfolio-exemplos","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/portfolio-website-examples\/","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/portfolio-website-examples\/","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/portfolio-website-examples\/","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/portfolio-website-examples","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/posts\/35518","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/users\/334"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/comments?post=35518"}],"version-history":[{"count":20,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/posts\/35518\/revisions"}],"predecessor-version":[{"id":41356,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/posts\/35518\/revisions\/41356"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/media?parent=35518"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/categories?post=35518"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/tags?post=35518"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}