{"id":42060,"date":"2024-01-18T19:06:34","date_gmt":"2024-01-18T22:06:34","guid":{"rendered":"\/tutoriais\/?p=42060"},"modified":"2024-01-18T19:06:37","modified_gmt":"2024-01-18T22:06:37","slug":"sites-portfolio-exemplos","status":"publish","type":"post","link":"\/br\/tutoriais\/sites-portfolio-exemplos","title":{"rendered":"Os 19 melhores exemplos de sites de portf\u00f3lio para fot\u00f3grafos, artistas, escritores e mais"},"content":{"rendered":"<p>Um portf&oacute;lio digital &eacute; um cart&atilde;o de visita que ajuda a destacar seus melhores trabalhos e aumentar a sua visibilidade online, abrindo oportunidades para poss&iacute;veis empregos e colabora&ccedil;&otilde;es. No entanto, criar um portf&oacute;lio online que se destaque pode ser desafiador, e &eacute; por isso que recomendamos analisar os melhores exemplos dispon&iacute;veis na internet antes de mergulhar no processo de&nbsp;<strong>criar o seu pr&oacute;prio site<\/strong>.&nbsp;<\/p><p>Este artigo lista 19 exemplos de portf&oacute;lios com diferentes fun&ccedil;&otilde;es, incluindo sites de escritores, estudantes e figuras p&uacute;blicas, e destaca o que torna cada um deles especial. Tamb&eacute;m falaremos sobre os cinco principais elementos que voc&ecirc; deve levar em conta para criar um portf&oacute;lio cativante.<\/p><p class=\"has-text-align-center\"><a href=\"https:\/\/docs.google.com\/document\/d\/14TYg5ZY4-IszYoepRipjT8PNp_WVuplO\/copy\" target=\"_blank\" rel=\"noreferrer noopener\">Baixar modelo de curr&iacute;culo atrativo de desenvolvedor web<\/a><\/p><p>\n\n\n\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-sites-de-portfolio-para-individuos\"><strong>Sites de Portf&oacute;lio para Indiv&iacute;duos<\/strong><\/h2><p>Um &oacute;timo ponto de partida para criar o seu site &eacute; entender&nbsp;<a href=\"\/br\/tutoriais\/como-criar-um-site-passo-a-passo\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>como criar um site &uacute;nico<\/strong><\/a>&nbsp;e buscar inspira&ccedil;&atilde;o para ver o que funciona para voc&ecirc; e para o seu setor.<\/p><p>Aqui est&atilde;o os quatro melhores exemplos de portf&oacute;lio feitos para indiv&iacute;duos e marcas pessoais. Na lista abaixo, pense em como voc&ecirc; pode implementar as&nbsp;<a href=\"\/br\/tutoriais\/ideias-para-criar-um-site\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>ideias de sites<\/strong><\/a>&nbsp;deles no seu pr&oacute;prio.<\/p><h3 class=\"wp-block-heading\" id=\"h-1-enrico-deiana\"><strong>1.&nbsp;<\/strong><a href=\"https:\/\/www.enricodeiana.design\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Enrico Deiana<\/strong><\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"583\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/1-enrico-deiana-1.png\/public\" alt=\"enrico deiana, exemplo de portf&oacute;lio online\" class=\"wp-image-42067\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/1-enrico-deiana-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/1-enrico-deiana-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/1-enrico-deiana-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/1-enrico-deiana-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><ul class=\"wp-block-list\">\n<li><strong>Diferenciais:&nbsp;<\/strong>v&aacute;rias micro-intera&ccedil;&otilde;es e extens&atilde;o de dom&iacute;nio espec&iacute;fica do setor<\/li>\n<\/ul><p>Enrico Deiana &eacute; um designer de internet e produtos baseado na It&aacute;lia. &Uacute;nico e envolvente, seu portf&oacute;lio recebeu uma Men&ccedil;&atilde;o Honrosa no <a href=\"https:\/\/www.awwwards.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Awwwards<\/strong><\/a>&nbsp;de 2022.<\/p><p>Assim que os visitantes acessam o site, eles veem um efeito de deslizar e uma imagem principal com t&iacute;tulo chamativo, informando imediatamente aos visitantes o que ele faz e criando uma &oacute;tima primeira impress&atilde;o.<\/p><p>Conforme voc&ecirc; rola para baixo, existem v&aacute;rias micro-intera&ccedil;&otilde;es, incluindo:<\/p><ul class=\"wp-block-list\">\n<li>O estilo do cursor muda ao passar o mouse sobre links clic&aacute;veis.<\/li>\n\n\n\n<li>O fundo muda quando o cursor pousa em uma &aacute;rea de portf&oacute;lio.<\/li>\n\n\n\n<li>Texto animado, fotos e bot&otilde;es de chamada para a&ccedil;&atilde;o.<\/li>\n<\/ul><p>A p&aacute;gina Sobre tamb&eacute;m &eacute; envolvente e informativa. Ela mostra v&aacute;rios certificados e pr&ecirc;mios usando um efeito de rolagem suave e t&iacute;tulo animado.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"584\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/2-enrico-deiana-2.png\/public\" alt=\"exemplo de portf&oacute;lio de enrico deiana\" class=\"wp-image-42068\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/2-enrico-deiana-2.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/2-enrico-deiana-2.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/2-enrico-deiana-2.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/2-enrico-deiana-2.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>Enrico aprimora seu portf&oacute;lio adicionando informa&ccedil;&otilde;es sobre sua ag&ecirc;ncia de web design, incluindo uma p&aacute;gina de pre&ccedil;os com descri&ccedil;&otilde;es de servi&ccedil;os.<\/p><p>Esta pode ser uma &oacute;tima maneira de obter leads mais rapidamente. Outro aspecto interessante deste portf&oacute;lio online &eacute; o uso do&nbsp;<a style=\"font-weight: bold\" href=\"\/br\/tutoriais\/o-que-e-tld\" target=\"_blank\" rel=\"noreferrer noopener\">TLD<\/a> <strong>.design<\/strong>, fortalecendo a marca pessoal de Enrico como designer.<\/p><p>\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\">Ferramenta de Pesquisa de Dom\u00ednio<\/h3>\n        <p class=\"pb-40 text-center text-white\">Descubra se um nome de dom\u00ednio est\u00e1 dispon\u00edvel<\/p>\n        <form id=\"domain-checker-form\" class=\"d-flex w-100 position-relative flex-column flex-sm-row align-items-center\" action=\"\/registro-de-dominio\">\n            <input\n                    class=\"domain-checker__input label text-light-black\"\n                    name=\"domain\" type=\"text\"\n                    placeholder=\"Digite o dom\u00ednio desejado\"\n                    value=\"\"\n            \/>\n            <input id=\"domain-submit\"\n                   type=\"submit\"\n                   value=\"Pesquisar\"\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\"><strong>2.&nbsp;<\/strong><a href=\"https:\/\/seanobrien.com.au\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Sean O&rsquo;Brien<\/strong><\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"582\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/3-sean-obrien-1.png\/public\" alt=\"captura de tela do portf&oacute;lio de sean o'brien\" class=\"wp-image-42077\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/3-sean-obrien-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/3-sean-obrien-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/3-sean-obrien-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/3-sean-obrien-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><ul class=\"wp-block-list\">\n<li><strong>Diferenciais:<\/strong>&nbsp;marca pessoal s&oacute;lida e dom&iacute;nio com c&oacute;digo do pa&iacute;s<\/li>\n<\/ul><p>Sean O&rsquo;Brien &eacute; um velejador que ganhou campeonatos em todo o mundo. Ele transmite as informa&ccedil;&otilde;es principais acima da dobra na p&aacute;gina inicial, permitindo que os visitantes saibam imediatamente quem ele &eacute;.<\/p><p>Sean exibe os logotipos dos parceiros na p&aacute;gina inicial e artigos que o apresentam na p&aacute;gina de Imprensa. Ele tamb&eacute;m&nbsp;<a href=\"\/br\/tutoriais\/como-escrever-um-blog\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>escreve postagens de blog<\/strong><\/a>&nbsp;e dedica a p&aacute;gina de Tour &agrave;s suas atividades.<\/p><p>Sean escolheu designs ousados e coloridos para exibir sua paix&atilde;o de maneira mais atraente. O portf&oacute;lio conta com v&aacute;rias fotos dele surfando e fontes grandes usando efeitos simples, para manter o conte&uacute;do f&aacute;cil de interagir.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"586\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/4-sean-obrien-2.png\/public\" alt=\"p&aacute;gina de sean o'brien na web\" class=\"wp-image-42076\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/4-sean-obrien-2.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/4-sean-obrien-2.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/4-sean-obrien-2.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/4-sean-obrien-2.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>Como Sean &eacute; da Austr&aacute;lia, o atleta usa o TLD de c&oacute;digo de pa&iacute;s&nbsp;<strong>.au<\/strong>&nbsp;para sinalizar aos motores de busca e visitantes do site que seu site pessoal se concentra no pa&iacute;s da Oceania. Voc&ecirc; pode usar um <a href=\"\/br\/registro-de-dominio\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>localizador de dom&iacute;nio<\/strong><\/a>&nbsp;e a mesma abordagem para garantir sua marca pessoal hoje.<\/p><h3 class=\"wp-block-heading\" id=\"h-3-gary-le-masson\"><strong>3.&nbsp;<\/strong><a href=\"https:\/\/www.garylemasson.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Gary Le Masson<\/strong><\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"505\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/5-gary-le-masson.png\/public\" alt=\"portf&oacute;lio de gary le masson\" class=\"wp-image-42069\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/5-gary-le-masson.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/5-gary-le-masson.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/5-gary-le-masson.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/5-gary-le-masson.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><ul class=\"wp-block-list\">\n<li><strong>Diferencial:&nbsp;<\/strong>design de portf&oacute;lio criativo<\/li>\n<\/ul><p>Gary Le Masson &eacute; um consultor franc&ecirc;s de otimiza&ccedil;&atilde;o para mecanismos de busca (SEO) e an&aacute;lise de web. O site do portf&oacute;lio dele &eacute; um &oacute;timo exemplo de design criativo.<\/p><p>Este freelancer usou o design dos resultados de pesquisa do Google como inspira&ccedil;&atilde;o, incluindo a barra de pesquisa, paleta de cores, fontes e layouts. Ele at&eacute; animou seu nome para parecer com o Google no rodap&eacute;.<\/p><p>Esta &eacute; uma abordagem inteligente para mostrar que ele trabalha na ind&uacute;stria e atrair poss&iacute;veis empregadores.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"828\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/6-gary-le-masson-2.png\/public\" alt='p&aacute;gina \"sobre\" do portf&oacute;lio de Gary le Masson' class=\"wp-image-42070\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/6-gary-le-masson-2.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/6-gary-le-masson-2.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/6-gary-le-masson-2.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/6-gary-le-masson-2.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>No topo da p&aacute;gina, vemos os menus do site:<\/p><ul class=\"wp-block-list\">\n<li><strong>An&aacute;lise da web<\/strong>. Ele descreve suas compet&ecirc;ncias em SEO e an&aacute;lise de web.<\/li>\n\n\n\n<li><strong>Refer&ecirc;ncias<\/strong>. Lista os clientes anteriores de Gary.<\/li>\n\n\n\n<li><strong>Curr&iacute;culo Google<\/strong>. Esta p&aacute;gina da web possui o hist&oacute;rico acad&ecirc;mico e os detalhes pessoais do consultor.<\/li>\n\n\n\n<li><strong>Contato<\/strong>. Apresenta um formul&aacute;rio de contato e detalhes, incluindo o endere&ccedil;o do seu escrit&oacute;rio e redes sociais.<\/li>\n<\/ul><p>Geralmente, essas s&atilde;o as p&aacute;ginas mais comumente encontradas em sites de portf&oacute;lio. Eles ajudam poss&iacute;veis clientes a entender quem voc&ecirc; &eacute; e se suas habilidades atendem &agrave;s necessidades deles.<\/p><h3 class=\"wp-block-heading\" id=\"h-4-melyssa-griffin\"><strong>4.&nbsp;<\/strong><a href=\"https:\/\/www.melyssagriffin.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Melyssa Griffin<\/strong><\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"499\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/7-melyssa-griffin.png\/public\" alt=\"site pessoal de melyssa griffin\" class=\"wp-image-42075\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/7-melyssa-griffin.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/7-melyssa-griffin.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/7-melyssa-griffin.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/7-melyssa-griffin.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><ul class=\"wp-block-list\">\n<li><strong>Diferenciais:<\/strong>&nbsp;bom uso de pop-ups e p&aacute;gina inicial informativa<\/li>\n<\/ul><p>Melyssa Griffin &eacute; uma ex-professora que capacita outros empreendedores criando conte&uacute;do sobre o crescimento de neg&oacute;cios, incluindo cursos online e um programa de coaching.<\/p><p>Quando voc&ecirc; abre o portf&oacute;lio digital dela, surge um question&aacute;rio pop-up querendo saber sobre o seu estilo de empreendedor. Esta &eacute; uma &oacute;tima ideia para aumentar o engajamento e entender melhor os visitantes do seu site.<\/p><p>Outro destaque no portf&oacute;lio de Melyssa &eacute; a informa&ccedil;&atilde;o detalhada apresentada na p&aacute;gina inicial. Ele mostra quem ela &eacute;, seus projetos e clientes anteriores, juntamente com links essenciais. A p&aacute;gina tamb&eacute;m inclui o feed do Instagram dela e o cadastro de newsletter no rodap&eacute;, para incentivar a intera&ccedil;&atilde;o.<\/p><p>Melyssa usa cores vibrantes, como amarelo e laranja, para destacar &aacute;reas ou elementos. Ela tamb&eacute;m adiciona ilustra&ccedil;&otilde;es e formas coloridas para&nbsp;<a href=\"\/br\/tutoriais\/como-fazer-um-portfolio-digital\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>criar um portf&oacute;lio<\/strong><\/a>&nbsp;que seja &uacute;nico e atraente.<\/p><p>\n\n\n<div class=\"protip\">\n                    <h4 class=\"title\">Dica<\/h4>\n                    <p>Veja algumas inspira&ccedil;&otilde;es de web design a partir desses&nbsp;<a href=\"\/br\/tutoriais\/site-de-pagina-unica\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>templates de sites de p&aacute;gina &uacute;nica<\/strong><\/a>&nbsp;e experimente o Criador de Sites da Hostinger para construir seu pr&oacute;prio site facilmente.<\/p>\n                <\/div>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-sites-de-portfolio-de-personalidades\"><strong>Sites de Portf&oacute;lio de Personalidades<\/strong><\/h2><p>Vamos revisar os sites de portf&oacute;lio de quatro figuras p&uacute;blicas, incluindo um comediante e um jogador de futebol.<\/p><h3 class=\"wp-block-heading\" id=\"h-1-russell-brand\"><strong>1.&nbsp;<\/strong><a href=\"https:\/\/www.russellbrand.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Russell Brand<\/strong><\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"580\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/8-russell-brand.png\/public\" alt=\"site de Russell brand\" class=\"wp-image-42081\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/8-russell-brand.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/8-russell-brand.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/8-russell-brand.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/8-russell-brand.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><ul class=\"wp-block-list\">\n<li><strong>Diferenciais:&nbsp;<\/strong>banner de newsletter e recurso de reserva<\/li>\n<\/ul><p>Russell Brand &eacute; um ator, comediante e ativista de sa&uacute;de mental e reabilita&ccedil;&atilde;o de drogas. Por estar envolvido em atividades t&atilde;o diversas, um site pessoal para atualizar sua agenda &eacute; importante.<\/p><p>Seu site apresenta todo o seu trabalho, incluindo livros, podcasts e v&iacute;deos de com&eacute;dia stand-up. Ele tamb&eacute;m compartilha suas apresenta&ccedil;&otilde;es de stand-up e datas de eventos comunit&aacute;rios, permitindo que os f&atilde;s comprem ingressos diretamente no site.<\/p><p>O site tamb&eacute;m promove o envolvimento da comunidade incentivando as pessoas a se juntarem &agrave; lista de e-mail marketing e fixando o banner da newsletter no topo das p&aacute;ginas.<\/p><p>Em termos de design, ele usa uma paleta de tons terrosos com fontes serifadas e imagens de corvos, amplamente conhecidas por seus f&atilde;s para simbolizar mudan&ccedil;a ou transforma&ccedil;&atilde;o.<\/p><h3 class=\"wp-block-heading\" id=\"h-2-lior-raz\"><strong>2.&nbsp;<\/strong><a href=\"https:\/\/www.liorraz.co.il\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Lior Raz<\/strong><\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"582\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/9-lior-raz.png\/public\" alt=\"site de portf&oacute;lio de lior raz\" class=\"wp-image-42063\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/9-lior-raz.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/9-lior-raz.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/9-lior-raz.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/9-lior-raz.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><ul class=\"wp-block-list\">\n<li><strong>Diferenciais:<\/strong>&nbsp;site de portf&oacute;lio de p&aacute;gina &uacute;nica e v&iacute;deo em destaque<\/li>\n<\/ul><p>O portf&oacute;lio de Lior Raz est&aacute; entre os melhores sites de p&aacute;gina &uacute;nica em nossa lista. Ator e palestrante, Lior Raz tornou seu site visualmente atraente enquanto fornece informa&ccedil;&otilde;es de maneira simples e aberta.<\/p><p>Ao acessar este site de portf&oacute;lio, os visitantes ver&atilde;o um v&iacute;deo principal mostrando trechos curtos dos filmes de Lior para ajudar a chamar a aten&ccedil;&atilde;o do visitante.<\/p><p>Ele divide seu site de uma p&aacute;gina em cinco se&ccedil;&otilde;es &ndash; Sobre, Galeria, Imprensa, Palestras e Contato.<\/p><p>Os visitantes podem clicar no bot&atilde;o&nbsp;<strong>mais<\/strong>&nbsp;para ler o conte&uacute;do de cada se&ccedil;&atilde;o, evitando desordem. H&aacute; tamb&eacute;m um bot&atilde;o&nbsp;<strong>&ldquo;hamb&uacute;rguer&rdquo;<\/strong>&nbsp;que cont&eacute;m essas diferentes se&ccedil;&otilde;es para uma navega&ccedil;&atilde;o mais r&aacute;pida.<\/p><p>O site do ator usa imagens de banner em largura total para t&iacute;tulos e fundo preto para manter o foco em seu conte&uacute;do.<\/p><h3 class=\"wp-block-heading\" id=\"h-3-cristiano-ronaldo\"><strong>3.&nbsp;<\/strong><a href=\"https:\/\/www.cristianoronaldo.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Cristiano Ronaldo<\/strong><\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"514\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/10-cristiano-ronaldo.png\/public\" alt=\"site de cristiano Ronaldo\" class=\"wp-image-42080\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/10-cristiano-ronaldo.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/10-cristiano-ronaldo.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/10-cristiano-ronaldo.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/10-cristiano-ronaldo.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><ul class=\"wp-block-list\">\n<li><strong>Diferencial:&nbsp;<\/strong>destaques da carreira<\/li>\n<\/ul><p>Se voc&ecirc; est&aacute; procurando exemplos de layout de p&aacute;gina &uacute;nica, visite o site de Cristiano Ronaldo.<\/p><p>A se&ccedil;&atilde;o superior do portf&oacute;lio mostra todos os projetos de Cristiano, desde sua carreira no futebol at&eacute; a ind&uacute;stria da moda. No caso deste &uacute;ltimo, o layout baseado em cards tem imagens que direcionam os visitantes para a respectiva loja online do traje exibido.<\/p><p>Ao rolar para baixo, um controle deslizante horizontal resume a jornada de carreira do jogador, organizada pelos clubes que ele j&aacute; jogou. Cada slide tem um pequeno v&iacute;deo rodando ao fundo mostrando a contribui&ccedil;&atilde;o do Cristiano para o clube.<\/p><p>Al&eacute;m das marcas e destaques da carreira, este portf&oacute;lio de p&aacute;gina &uacute;nica cont&eacute;m um v&iacute;deo de seu produto mais recente, um formul&aacute;rio de inscri&ccedil;&atilde;o para newsletter e links para as parcerias anteriores de Cristiano.<\/p><h3 class=\"wp-block-heading\" id=\"h-4-bill-gates\"><strong>4.&nbsp;<\/strong><a href=\"https:\/\/www.gatesnotes.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Bill Gates<\/strong><\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"578\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/11-bill-gates.png\/public\" alt=\"blog de bill gates\" class=\"wp-image-42079\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/11-bill-gates.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/11-bill-gates.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/11-bill-gates.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/11-bill-gates.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><ul class=\"wp-block-list\">\n<li><strong>Diferenciais:&nbsp;<\/strong>linha do tempo pessoal e layout de revista<\/li>\n<\/ul><p>O site de Bill Gates &eacute; um dos melhores exemplos de portf&oacute;lio se voc&ecirc; deseja se concentrar em exibir seu trabalho e atualiza&ccedil;&otilde;es, al&eacute;m de compartilhar seus conhecimentos.<\/p><p>O site usa um layout de revista e divide as postagens em t&oacute;picos, como Clima, Engenharia de Software, Energia e Educa&ccedil;&atilde;o. No topo da p&aacute;gina inicial, os artigos em destaque selecionados s&atilde;o novos ou relevantes para os eventos atuais.<\/p><p>O site do co-fundador da Microsoft usa paletas de cores em preto e branco, permitindo que os leitores se concentrem nas imagens e v&iacute;deos de seu canal no YouTube. Para manter a simplicidade, o site usa um menu hamb&uacute;rguer no canto superior direito da tela.<\/p><p>A p&aacute;gina Sobre fornece &oacute;timas ideias para criar uma linha do tempo pessoal ou profissional envolvente. Ele apresenta um controle deslizante de linha do tempo para ilustrar a jornada de Bill Gates em diferentes &aacute;reas: Microsoft, Funda&ccedil;&atilde;o Bill &amp; Melinda Gates e seus outros projetos &ndash; juntamente com fotos de cada uma dessas empreitadas.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"650\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/12-bill-gates-2.png\/public\" alt=\"blog de bill gates\" class=\"wp-image-42064\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/12-bill-gates-2.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/12-bill-gates-2.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/12-bill-gates-2.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/12-bill-gates-2.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-sites-de-portfolio-para-fotografos-e-artistas\"><strong>Sites de Portf&oacute;lio para Fot&oacute;grafos e Artistas<\/strong><\/h2><p>Se voc&ecirc; &eacute; um fot&oacute;grafo ou designer gr&aacute;fico, confira esses sites para gerar ideias para o seu pr&oacute;prio portf&oacute;lio.<\/p><h3 class=\"wp-block-heading\" id=\"h-1-tamara-sredojevic\"><strong>1.&nbsp;<\/strong><a href=\"https:\/\/www.iamtamara.design\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Tamara Sredojevic<\/strong><\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"581\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/13-tamara-sredojevic.png\/public\" alt=\"\" class=\"wp-image-42071\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/13-tamara-sredojevic.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/13-tamara-sredojevic.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/13-tamara-sredojevic.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/13-tamara-sredojevic.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><ul class=\"wp-block-list\">\n<li><strong>Diferenciais:&nbsp;<\/strong>proposta de valor &uacute;nica e dom&iacute;nio personalizado<\/li>\n<\/ul><p>Tamara Sredojevic &eacute; especialista em UX design acess&iacute;vel e sustent&aacute;vel. O site dela &eacute; um excelente exemplo de um portf&oacute;lio de design que reflete valores pessoais.<\/p><p>J&aacute; na p&aacute;gina inicial, ela indica seu mercado-alvo e a sua base de clientes, principalmente organiza&ccedil;&otilde;es sem fins lucrativos, institui&ccedil;&otilde;es de caridade e marcas &eacute;ticas.<\/p><p>Al&eacute;m de mencionar seus valores fundamentais na p&aacute;gina Sobre, o rodap&eacute; do portf&oacute;lio faz um link para a p&aacute;gina da Declara&ccedil;&atilde;o de Acessibilidade, explicando como ela aplica&nbsp;<a href=\"\/br\/tutoriais\/acessibilidade-web\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>padr&otilde;es de acessibilidade<\/strong><\/a>&nbsp;ao site.<\/p><p>O site tamb&eacute;m apresenta uma pontua&ccedil;&atilde;o de pegada de carbono, para mostrar que &eacute; ecologicamente correto.<\/p><p>O design do portf&oacute;lio se baseia na simplicidade, usando formas grandes, linhas finas e cores suaves.<\/p><p>Para educar poss&iacute;veis clientes sobre seu trabalho, cada p&aacute;gina de projeto explica seu processo de design, incluindo o contexto do projeto e sua abordagem de UX.<\/p><h3 class=\"wp-block-heading\" id=\"h-2-demas-rusli\"><strong>2.&nbsp;<\/strong><a href=\"https:\/\/www.demasrusli.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Demas Rusli<\/strong><\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"592\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/14-demas-rusli.png\/public\" alt=\"site de demas rusli\" class=\"wp-image-42074\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/14-demas-rusli.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/14-demas-rusli.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/14-demas-rusli.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/14-demas-rusli.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><ul class=\"wp-block-list\">\n<li><strong>Diferencial:&nbsp;<\/strong>imagem de destaque<\/li>\n<\/ul><p>Demas Rusli &eacute; um fot&oacute;grafo com centenas de milhares de seguidores nas redes sociais. Ele se concentra em fotografia urbana, arquitet&ocirc;nica e a&eacute;rea.<\/p><p>Este exemplo de portf&oacute;lio exibe fotos visualmente atraentes diretamente na p&aacute;gina inicial. Eles est&atilde;o divididos em tr&ecirc;s se&ccedil;&otilde;es &ndash; imagem de destaque, categorias de fotos e seu feed do Instagram.<\/p><p>No topo, s&atilde;o exibidas imagens de largura total que mudam a cada cinco segundos,&nbsp;<a href=\"\/br\/tutoriais\/criar-site-de-fotografia\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>criando um site de fotografia<\/strong><\/a>&nbsp;que se destaca.<\/p><p>Embaixo, Demas categoriza seu trabalho em seis t&oacute;picos &ndash; Comiss&otilde;es, Urbano, A&eacute;reo, Arquitetura, Natureza e Fantasia &ndash; para ajudar poss&iacute;veis clientes a decidir se seu trabalho atende &agrave;s suas necessidades. Se voc&ecirc; clicar em uma das categorias, ver&aacute; uma galeria cheia de suas fotos e filmagens est&aacute;ticas.<\/p><p>O layout da galeria depende da categoria. Por exemplo, na p&aacute;gina de Comiss&otilde;es, Demas usa um layout de grade apresentando a imagem ou GIF de cada projeto.<\/p><p>Al&eacute;m disso, ele adiciona bot&otilde;es que levam a outras categorias acima de cada t&iacute;tulo de categoria, facilitando para os visitantes naveguem por diferentes &aacute;reas sem ter que voltar para a p&aacute;gina inicial.<\/p><h3 class=\"wp-block-heading\" id=\"h-3-alice-lee\"><strong>3.&nbsp;<\/strong><a href=\"https:\/\/www.byalicelee.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Alice Lee<\/strong><\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"522\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/16-alice-lee.png\/public\" alt=\"site de alice lee\" class=\"wp-image-42083\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/16-alice-lee.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/16-alice-lee.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/16-alice-lee.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/16-alice-lee.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><ul class=\"wp-block-list\">\n<li><strong>Diferencial:<\/strong>&nbsp;design minimalista para portf&oacute;lios de ilustra&ccedil;&atilde;o<\/li>\n<\/ul><p>Alice Lee &eacute; uma ilustradora e muralista independente. Seu portf&oacute;lio visualmente atraente pode&nbsp;<a href=\"\/br\/tutoriais\/sites-para-designers\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>inspirar um &oacute;timo web design<\/strong><\/a>, especialmente para ilustradores.<\/p><p>No topo da p&aacute;gina inicial, ela adiciona uma anima&ccedil;&atilde;o sutil onde a imagem principal se move de acordo com o cursor do visitante.<\/p><p>Embaixo, Alice mostra v&aacute;rios projetos usando um layout minimalista em um fundo branco, permitindo que os visitantes se concentrem em seu trabalho bonito e colorido. Basta clicar em uma das imagens para ver a descri&ccedil;&atilde;o do projeto e os rascunhos dela.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"588\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/17-alice-lee-2.png\/public\" alt=\"site de Alice lee exibindo projeto\" class=\"wp-image-42084\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/17-alice-lee-2.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/17-alice-lee-2.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/17-alice-lee-2.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/17-alice-lee-2.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-4-lauren-hom\"><strong>4.&nbsp;<\/strong><a href=\"http:\/\/homsweethom.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Lauren Hom<\/strong><\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"573\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/18-lauren-hom.png\/public\" alt=\"site portf&oacute;lio de lauren h&ocirc;m\" class=\"wp-image-42078\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/18-lauren-hom.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/18-lauren-hom.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/18-lauren-hom.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/18-lauren-hom.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><ul class=\"wp-block-list\">\n<li><strong>Diferenciais:&nbsp;<\/strong>conte&uacute;do por tr&aacute;s das cenas e blog educativo<\/li>\n<\/ul><p>Lauren Hom &eacute; uma designer gr&aacute;fica, ilustradora e artista de lettering baseada em Nova York. Ela &eacute; conhecida por suas paletas de cores vivas e formas de letras l&uacute;dicas, e voc&ecirc; pode ver que ela tamb&eacute;m aplica esse estilo em seu portf&oacute;lio de design gr&aacute;fico.<\/p><p>Ela usa v&aacute;rias tonalidades de verde para o fundo e laranja para os elementos destacados, como hiperlinks e bot&otilde;es de chamada para a&ccedil;&atilde;o.<\/p><p>Al&eacute;m disso, ela compartilha fotos dos bastidores junto com os produtos finais na p&aacute;gina de Trabalho.<\/p><p>Por fim, Lauren tamb&eacute;m escreve postagens de blog sobre murais, lettering e dicas de trabalho aut&ocirc;nomo, compartilhando sua expertise e ajudando a melhorar o ranking do site nos resultados de pesquisa.<\/p><h2 class=\"wp-block-heading\" id=\"h-sites-de-portfolio-para-blogueiros-e-escritores\"><strong>Sites de Portf&oacute;lio para Blogueiros e Escritores<\/strong><\/h2><p>Esta se&ccedil;&atilde;o aborda quatro ideias de portf&oacute;lio para escritores, de redatores a compositores.<\/p><h3 class=\"wp-block-heading\" id=\"h-1-todd-clarke\"><strong>1.&nbsp;<\/strong><a href=\"https:\/\/toddsgotapen.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Todd Clarke<\/strong><\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"580\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/19-todd-clarke.png\/public\" alt=\"site de todd Clarke\" class=\"wp-image-42065\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/19-todd-clarke.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/19-todd-clarke.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/19-todd-clarke.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/19-todd-clarke.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><ul class=\"wp-block-list\">\n<li><strong>Diferencial:<\/strong>&nbsp;texto envolvente<\/li>\n<\/ul><p>Usando a marca Toddsgotapen, Todd Clarke mostra que criar um portf&oacute;lio de sites envolvente n&atilde;o requer anima&ccedil;&otilde;es complexas. Este redator mant&eacute;m o design do seu site simples e usa suas habilidades de reda&ccedil;&atilde;o publicit&aacute;ria para atrair a aten&ccedil;&atilde;o do visitante.<\/p><p>O texto dele &eacute; direto e cativante, ajudando os leitores a entender rapidamente o que ele oferece e por que eles deveriam contrat&aacute;-lo. Ele usa t&iacute;tulos grandes para estruturar as informa&ccedil;&otilde;es, al&eacute;m de frases em negrito e &iacute;cones no corpo do texto para destacar pontos importantes.<\/p><p>Na p&aacute;gina de Portf&oacute;lio, as categorias clic&aacute;veis no topo facilitam para os leitores conferirem seu trabalho. Cada imagem na p&aacute;gina ir&aacute; direcion&aacute;-los para o site em si ou uma imagem em tela cheia refletindo a vers&atilde;o ao vivo do projeto. Para estabelecer credibilidade, ele dedica uma p&aacute;gina inteira para depoimentos.<\/p><p>Como Todd s&oacute; tem um perfil no LinkedIn, ele deixa um risco nas outras contas de m&iacute;dia social no rodap&eacute; para informar aos visitantes onde ele est&aacute; dispon&iacute;vel.<\/p><h3 class=\"wp-block-heading\" id=\"h-2-muriel-vega\"><strong>2.&nbsp;<\/strong><a href=\"https:\/\/www.murielvega.net\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Muriel Vega<\/strong><\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"508\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/20-muriel-vega.png\/public\" alt=\"portf&oacute;lio de Muriel vega\" class=\"wp-image-42072\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/20-muriel-vega.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/20-muriel-vega.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/20-muriel-vega.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/20-muriel-vega.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><ul class=\"wp-block-list\">\n<li><strong>Diferencial:&nbsp;<\/strong>sistema de<strong>&nbsp;<\/strong>navega&ccedil;&atilde;o direto<\/li>\n<\/ul><p>Muriel Vega &eacute; uma escritora freelancer de tecnologia, gastronomia e cultura que trabalhou com v&aacute;rias marcas populares, incluindo The Guardian e Patreon. O portf&oacute;lio dela &eacute; simples, mas eficaz ao mostrar aos poss&iacute;veis empregadores suas habilidades de escrita.<\/p><p>A p&aacute;gina inicial apresenta o t&iacute;tulo do seu trabalho, menu, seis ilustra&ccedil;&otilde;es link&aacute;veis para diferenciar seus projetos e &iacute;cones de m&iacute;dias sociais. O trabalho dela est&aacute; organizado em um layout de grade contendo uma imagem, t&iacute;tulo do artigo e a empresa que o publicou.<\/p><p>Em sua p&aacute;gina Sobre, Muriel mant&eacute;m as informa&ccedil;&otilde;es diretas ao descrever suas experi&ecirc;ncias anteriores com escrita.<\/p><h3 class=\"wp-block-heading\" id=\"h-3-helena-bowen\"><strong>3.&nbsp;<\/strong><a href=\"https:\/\/helenabowen.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Helena Bowen<\/strong><\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"580\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/21-helena-bowen.png\/public\" alt=\"site de helena bowen\" class=\"wp-image-42087\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/21-helena-bowen.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/21-helena-bowen.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/21-helena-bowen.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/21-helena-bowen.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><ul class=\"wp-block-list\">\n<li><strong>Diferencial:&nbsp;<\/strong>se&ccedil;&atilde;o forte acima da dobra<\/li>\n<\/ul><p>Helena Bowen &eacute; uma destacada palestrante, treinadora e redatora de discursos. Ela trabalhou com mais de 150 clientes, acumulou milh&otilde;es de visualiza&ccedil;&otilde;es online e foi destaque em m&iacute;dias como TED, CNN e National Geographic.<\/p><p>Ela usa a se&ccedil;&atilde;o acima da dobra da p&aacute;gina inicial como um elemento impactante para atrair clientes em potencial. Ele exibe o n&uacute;mero de clientes com quem ela trabalhou, tradu&ccedil;&otilde;es de idiomas e visualiza&ccedil;&otilde;es.<\/p><p>Ao rolar a p&aacute;gina para baixo, ela n&atilde;o apenas inclui os depoimentos de seus clientes anteriores, mas tamb&eacute;m os coment&aacute;rios deles nas redes sociais.<\/p><p>Al&eacute;m de fornecer prova social, Helena explica seu hist&oacute;rico profissional e fluxo de trabalho geral.<\/p><p>Em rela&ccedil;&atilde;o ao design do site, ela mant&eacute;m o visual simples, com bastante espa&ccedil;o em branco e fotos profissionais para fazer os leitores se concentrarem no conte&uacute;do &mdash; e cores fortes para destacar detalhes essenciais.<\/p><h3 class=\"wp-block-heading\" id=\"h-4-duygu-muhurdar\"><strong>4.&nbsp;<\/strong><a href=\"https:\/\/dmuhurdar.journoportfolio.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Duygu M&uuml;h&uuml;rdar<\/strong><\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"574\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/22-duygy-muhurdar.png\/public\" alt=\"site de duygu m&uuml;h&uuml;rdar\" class=\"wp-image-42085\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/22-duygy-muhurdar.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/22-duygy-muhurdar.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/22-duygy-muhurdar.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/22-duygy-muhurdar.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><ul class=\"wp-block-list\">\n<li><strong>Diferenciais:&nbsp;<\/strong>interface de usu&aacute;rio simples, navega&ccedil;&atilde;o limpa<\/li>\n<\/ul><p>Duygu M&uuml;h&uuml;rdar &eacute; uma escritora do ramo da m&uacute;sica que assume v&aacute;rios pap&eacute;is na ind&uacute;stria fonogr&aacute;fica. Como ela tem mais do que apenas artigos para exibir, ela usa miniaturas para representar seu trabalho escrito e visual, o que mant&eacute;m a p&aacute;gina inicial limpa e informativa.<\/p><p>Cada thumbnail do menu reflete o mesmo estilo minimalista, com bastante espa&ccedil;o em branco. Ela tamb&eacute;m inclui seus links de m&iacute;dia social para apoiar o conte&uacute;do de texto.<\/p><p>A p&aacute;gina de Postagens &ndash; escrita em turco &ndash; oferece um recurso de pesquisa e ordena&ccedil;&atilde;o. Os visitantes tamb&eacute;m podem encontrar artigos espec&iacute;ficos com base em seu tipo de publica&ccedil;&atilde;o.<\/p><p>O fundo branco em todo o site faz com que as se&ccedil;&otilde;es destacadas se sobressaiam. Essa &eacute; uma boa escolha de design para a p&aacute;gina de Trabalhos para M&iacute;dias Sociais, pois as miniaturas coloridas podem entrar em conflito com cores n&atilde;o neutras.<\/p><h2 class=\"wp-block-heading\" id=\"h-sites-de-portfolio-para-estudantes\"><strong>Sites de Portf&oacute;lio para Estudantes<\/strong><\/h2><p>Reunimos quatro exemplos de portf&oacute;lio de estudantes e profissionais rec&eacute;m-formados para servir de inspira&ccedil;&atilde;o para o seu pr&oacute;prio site.<\/p><h3 class=\"wp-block-heading\" id=\"h-1-greg-chen\"><strong>1.&nbsp;<\/strong><a href=\"https:\/\/www.guanbaic.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Greg Chen<\/strong><\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"588\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/23-greg-chen.png\/public\" alt=\"portf&oacute;lio de greg Chen\" class=\"wp-image-42061\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/23-greg-chen.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/23-greg-chen.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/23-greg-chen.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/23-greg-chen.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><ul class=\"wp-block-list\">\n<li><strong>Diferencial:&nbsp;<\/strong>fluxo de trabalho detalhado<\/li>\n<\/ul><p>Greg Chen tem um dos melhores sites de portf&oacute;lio se voc&ecirc; est&aacute; procurando uma maneira atraente de organizar suas p&aacute;ginas de produto. Chen, profissional rec&eacute;m-formado pela Universidade Carnegie Mellon, se descreve e mostra projetos em destaque j&aacute; na p&aacute;gina inicial.<\/p><p>Assim que voc&ecirc; clicar em um dos links do projeto, ver&aacute; um v&iacute;deo e uma breve descri&ccedil;&atilde;o do projeto. Conforme voc&ecirc; rola para baixo, ele exibir&aacute; o contexto do projeto, seu processo de pesquisa e design, bem como o resultado. Greg tamb&eacute;m anexa fotos e capturas de tela para ilustrar seu fluxo de trabalho e destacar sua expertise.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"561\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/24-greg-chen-2.png\/public\" alt=\"exemplo de portf&oacute;lio de greg Chen\" class=\"wp-image-42062\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/24-greg-chen-2.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/24-greg-chen-2.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/24-greg-chen-2.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/24-greg-chen-2.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>Al&eacute;m de descrever sua forma&ccedil;&atilde;o educacional e profissional na p&aacute;gina Sobre, Greg disponibiliza um curr&iacute;culo para download para refer&ecirc;ncia futura e explica seu papel em mais detalhes.<\/p><h3 class=\"wp-block-heading\" id=\"h-2-marino-franulovic\"><strong>2.&nbsp;<\/strong><a href=\"https:\/\/www.franulovic.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Marino Franulovic<\/strong><\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"579\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/25-marino-franulovic.png\/public\" alt=\"portf&oacute;lio de marino franulovic\" class=\"wp-image-42066\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/25-marino-franulovic.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/25-marino-franulovic.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/25-marino-franulovic.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/25-marino-franulovic.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><ul class=\"wp-block-list\">\n<li><strong>Diferencial:&nbsp;<\/strong>anima&ccedil;&otilde;es sutis em toda a p&aacute;gina inicial<\/li>\n<\/ul><p>Marino Franulovic possui um diploma Artes pela Universidade Coventry e concentra sua carreira em consultoria de marketing digital.<\/p><p>A se&ccedil;&atilde;o acima da dobra da p&aacute;gina inicial tem um grande t&iacute;tulo, sua biografia resumida e textos animados. Abaixo disso, Marino descreve seus servi&ccedil;os, que incluem planejamento e desenvolvimento de marketing, aplicando efeitos sutis de flutua&ccedil;&atilde;o &agrave; medida que os usu&aacute;rios rolam a p&aacute;gina.<\/p><p>Mais abaixo, apresenta uma postagem de blog, uma se&ccedil;&atilde;o Sobre com seus detalhes de contato e foto e, por fim, depoimentos. Embora o&nbsp;<a href=\"\/br\/tutoriais\/portfolio-desenvolvedor-web\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>portf&oacute;lio de desenvolvedor web<\/strong><\/a>&nbsp;do Marino seja um &oacute;timo exemplo de bom design, ele poderia ser aprimorado ao exibir trabalhos anteriores para convencer poss&iacute;veis clientes a trabalharem com ele.<\/p><h3 class=\"wp-block-heading\" id=\"h-3-dayla-baron\"><strong>3.&nbsp;<\/strong><a href=\"https:\/\/www.dalyabaron.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Dayla Baron<\/strong><\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"541\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/26-dayla-baron.png\/public\" alt=\"dayla baron, exemplo de portf&oacute;lio online\" class=\"wp-image-42073\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/26-dayla-baron.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/26-dayla-baron.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/26-dayla-baron.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/26-dayla-baron.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><ul class=\"wp-block-list\">\n<li><strong>Diferencial:<\/strong>&nbsp;foco em seu curr&iacute;culo<\/li>\n<\/ul><p>Para aqueles que procuram inspira&ccedil;&atilde;o para seu portf&oacute;lio de escrita acad&ecirc;mica, o site de Dayla Baron &eacute; um excelente exemplo.<\/p><p>Este estudante de doutorado em astrof&iacute;sica mant&eacute;m a navega&ccedil;&atilde;o simples, exibindo quatro menus na p&aacute;gina inicial &ndash; Curr&iacute;culo, Pesquisa, Divulga&ccedil;&atilde;o e Pessoal. Os menus tamb&eacute;m s&atilde;o fixos, ent&atilde;o os visitantes n&atilde;o precisam retornar &agrave; p&aacute;gina inicial para encontrar outras categorias.<\/p><p>Dayla exibe sua trajet&oacute;ria acad&ecirc;mica, pr&ecirc;mios e publica&ccedil;&otilde;es cronologicamente na p&aacute;gina de Curr&iacute;culo, enquanto a p&aacute;gina de Pesquisa possui infogr&aacute;ficos e figuras para ajudar os leitores a terem uma vis&atilde;o geral de seus trabalhos acad&ecirc;micos.<\/p><h2 class=\"wp-block-heading\" id=\"h-dicas-para-um-site-de-portfolio-de-sucesso\"><strong>Dicas para um Site de Portf&oacute;lio de Sucesso<\/strong><\/h2><p>Os exemplos acima deixam claro que projetar um portf&oacute;lio n&atilde;o envole apenas est&eacute;tica, mas tamb&eacute;m sobre a UX geral e o conte&uacute;do. Portanto, esta se&ccedil;&atilde;o abordar&aacute; cinco caracter&iacute;sticas que voc&ecirc; deve considerar ao criar um novo portf&oacute;lio ou atualizar um existente.<\/p><h3 class=\"wp-block-heading\">Projetos Relevantes<\/h3><p>Certifique-se de incluir apenas os seus melhores trabalhos no portf&oacute;lio, para destacar habilidades relevantes para a posi&ccedil;&atilde;o que voc&ecirc; est&aacute; interessado.<\/p><p>Portanto, definir um p&uacute;blico-alvo &eacute; importante para ajudar a filtrar seu trabalho e exibir sua expertise sob a perspectiva do cliente. Por exemplo, fot&oacute;grafos de alimentos devem manter seu portf&oacute;lio limitado &agrave; fotografia comercial e de alimentos, mesmo que tenham capturado belas fotos de paisagens.<\/p><h3 class=\"wp-block-heading\"><strong>Navega&ccedil;&atilde;o Simples<\/strong><\/h3><p>A navega&ccedil;&atilde;o f&aacute;cil permite que os visitantes do site encontrem o que querem mais rapidamente, proporcionando uma &oacute;tima experi&ecirc;ncia ao usu&aacute;rio. Evite ter muitos links de menu e garanta que o design seja totalmente responsivo para dispositivos m&oacute;veis.<\/p><p>Se voc&ecirc; quer exercer a criatividade, n&atilde;o se esque&ccedil;a da experi&ecirc;ncia do usu&aacute;rio. Por exemplo, aqueles que&nbsp;<a href=\"\/br\/tutoriais\/como-criar-um-portfolio-de-fotografia\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>criam um portf&oacute;lio de fotografia<\/strong><\/a>&nbsp;podem usar o portf&oacute;lio de Demas Rusli como exemplo de organiza&ccedil;&atilde;o de diferentes categorias.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"595\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/15-demas-rusli-2.png\/public\" alt=\"portf&oacute;lio de demas rusli\" class=\"wp-image-42082\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/15-demas-rusli-2.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/15-demas-rusli-2.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/15-demas-rusli-2.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/01\/15-demas-rusli-2.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\"><strong>Design Atraente<\/strong><\/h3><p>Seguir as&nbsp;<a href=\"\/br\/tutoriais\/boas-praticas-web-design\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>melhores pr&aacute;ticas de web design<\/strong><\/a>&nbsp;&eacute; essencial para proporcionar uma boa experi&ecirc;ncia ao usu&aacute;rio e maximizar suas chances de contrata&ccedil;&atilde;o. Independentemente do tipo do seu portf&oacute;lio, certifique-se de:<\/p><ul class=\"wp-block-list\">\n<li>Usar imagens de alta qualidade.<\/li>\n\n\n\n<li>Selecione uma paleta de cores que melhor represente sua personalidade e destaque seu trabalho.<\/li>\n\n\n\n<li>Escolher a tipografia certa.<\/li>\n<\/ul><p><a href=\"\/br\/templates-de-sites\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Temas de sites<\/strong><\/a>&nbsp;feitos por designers profissionais s&atilde;o uma &oacute;tima maneira de come&ccedil;ar.&nbsp;A maioria dos&nbsp;<a href=\"\/br\/criador-de-sites\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Criadores de Sites<\/strong><\/a>, incluindo o da Hostinger, oferece &oacute;timos&nbsp;modelos de sites para curr&iacute;culos&nbsp;e portf&oacute;lios online, ent&atilde;o voc&ecirc; n&atilde;o precisa criar tudo do zero.<\/p><p>Basta adicionar seu conte&uacute;do e, se necess&aacute;rio, personalizar o design com nosso editor f&aacute;cil de usar.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"583\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/08\/edicao-criador-de-sites-hostinger.png\/public\" alt=\"\" class=\"wp-image-39274\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/08\/edicao-criador-de-sites-hostinger.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/08\/edicao-criador-de-sites-hostinger.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/08\/edicao-criador-de-sites-hostinger.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/08\/edicao-criador-de-sites-hostinger.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>\n\n<div class=\"protip\">\n                    <h4 class=\"title\">Dica<\/h4>\n                    <p>Aprenda&nbsp;<a href=\"\/br\/tutoriais\/como-criar-um-site-passo-a-passo\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>como projetar um site<\/strong><\/a>&nbsp;e leve seu portf&oacute;lio online a novos patamares.<\/p>\n                <\/div>\n\n\n\n<\/p><h3 class=\"wp-block-heading\"><strong>Informa&ccedil;&otilde;es Sobre Voc&ecirc;<\/strong><\/h3><p>Sua hist&oacute;ria profissional ajuda a convencer potenciais clientes a trabalhar com voc&ecirc;, especialmente quando voc&ecirc; possui uma trajet&oacute;ria acad&ecirc;mica, treinamento e reconhecimento relevantes. No entanto, n&atilde;o tenha medo de se afastar de um tom profissional para <a href=\"\/br\/tutoriais\/como-criar-uma-marca\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>construir uma marca<\/strong><\/a>&nbsp;adequada &agrave; sua personalidade.<\/p><p>Algumas das informa&ccedil;&otilde;es necess&aacute;rias para incluir em sites de portf&oacute;lio s&atilde;o:<\/p><ul class=\"wp-block-list\">\n<li>Detalhes pessoais, como hobbies e valores.<\/li>\n\n\n\n<li>Forma&ccedil;&atilde;o profissional, como educa&ccedil;&atilde;o e certificados.<\/li>\n\n\n\n<li>Sua foto.<\/li>\n<\/ul><h3 class=\"wp-block-heading\"><strong>Prova Social<\/strong><\/h3><p>A prova social torna sua marca pessoal mais confi&aacute;vel. Al&eacute;m de incluir depoimentos de clientes ou colegas anteriores, voc&ecirc; pode adicionar artigos e pr&ecirc;mios.<\/p><p>Por exemplo, Enrico Deiana menciona sua participa&ccedil;&atilde;o no j&uacute;ri do Awwwards em seu portf&oacute;lio, e Helena Bowen incluiu artigos em que seus clientes foram destaque.<\/p><figure class=\"wp-block-image size-large\"><a href=\"\/br\/criador-de-sites\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Website-Builder_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-32917\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Website-Builder_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Website-Builder_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Website-Builder_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Website-Builder_in-text-banner.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Website-Builder_in-text-banner.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-conclusao\"><strong>Conclus&atilde;o<\/strong><\/h2><p>Um bom site de portf&oacute;lio combina o design certo, exemplos de trabalhos relevantes e conte&uacute;do bem selecionado.<\/p><p>Antes de&nbsp;<a href=\"\/br\/tutoriais\/como-fazer-um-portfolio-digital\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>construir um portf&oacute;lio<\/strong><\/a>, considere seu trabalho, sua personalidade e seus valores para que voc&ecirc; se destaque. Um web designer, por exemplo, pode demonstrar suas habilidades t&eacute;cnicas com micro-intera&ccedil;&otilde;es, como Enrico Deiana, ou escrever seus princ&iacute;pios como Tamara Sredojevic faz.<\/p><p>Al&eacute;m do design, usar sua experi&ecirc;ncia, como as habilidades de reda&ccedil;&atilde;o de Todd Clarke, &eacute; uma &oacute;tima maneira de mostrar aos empregadores e clientes em potencial o que voc&ecirc; tem a oferecer.<\/p><p>Esperamos que, nos exemplos que trouxemos acima, voc&ecirc; tenha encontrado inspira&ccedil;&atilde;o para o design e gerado ideias para aplicar ao seu portf&oacute;lio online.<\/p><p>Se voc&ecirc; n&atilde;o tem certeza sobre a qualidade do seu portf&oacute;lio, pe&ccedil;a aos seus amigos ou entre em contato com um especialista para uma avalia&ccedil;&atilde;o profissional. Boa sorte!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Um portf&oacute;lio digital &eacute; um cart&atilde;o de visita que ajuda a destacar seus melhores trabalhos e aumentar a sua visibilidade online, abrindo oportunidades para poss&iacute;veis empregos e colabora&ccedil;&otilde;es. No entanto, criar um portf&oacute;lio online que se destaque pode ser desafiador, e &eacute; por isso que recomendamos analisar os melhores exemplos dispon&iacute;veis na internet antes de [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/br\/tutoriais\/sites-portfolio-exemplos\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":356,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"Ranking: Os 19 Melhores Exemplos de Sites de Portf\u00f3lio","rank_math_description":"Descubra os 19 melhores portf\u00f3lios digitais para inspira\u00e7\u00e3o! Com sites de fot\u00f3grafos, artistas, escritores e mais. Saiba como se destacar!","rank_math_focus_keyword":"sites portfolio exemplos","footnotes":""},"categories":[4941],"tags":[5648],"class_list":["post-42060","post","type-post","status-publish","format-standard","hentry","category-desenvolvimento-web","tag-portfolio"],"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\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/42060","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/users\/356"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/comments?post=42060"}],"version-history":[{"count":2,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/42060\/revisions"}],"predecessor-version":[{"id":42088,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/42060\/revisions\/42088"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media?parent=42060"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/categories?post=42060"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/tags?post=42060"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}