Onde criar Portfólio de Design? — Análise e Referências
Confira as vantagens, desvantagens e (muitos) exemplos de 11 plataformas para portfólios.
Você precisa fazer seu portfólio e está em dúvida sobre qual plataforma escolher?
Confesso, já perdi as contas de quantas vezes me perguntaram sobre onde e como fazer um portfólio de Design. A fim de fazer apenas um artigo (e não um livro rs), optei por abordar especificamente os locais onde você pode criar seu portfólio.
Estrutura do Artigo
A seguir farei um comparativo com vantagens, desvantagens, preço e exemplos de 11 plataformas do mercado. Entre elas, irei analisar o Framer, Notion, Behance, Wix, Wordpress e outras.
Além disso, como designer com experiência de mais de 10 anos no mercado, deixarei minha opinião sobre cada uma das plataformas listadas. Lembrando que é apenas minha opinião e eu realmente espero que sua opinião seja diferente da minha.
Afinal, o principal intuito deste artigo não é dizer “use a ferramenta X”. Mas sim apresentar prós e contras para que, após isso, você escolha a melhor ferramenta para o seu momento atual.
💡 Importante ressaltar: eu já tive contato com todas as ferramentas citadas no artigo. Seja para portfólio, estudos, projetos de clientes ou até mesmo para projetos pessoais. Por esse motivo, me sinto segura em opinar sobre cada uma delas.
Ordem das Ferramentas
A ordem apresentada neste artigo importa. Listei as ferramentas pensando em “onde eu faria meu portfólio se eu fosse começar hoje, sem muito conhecimento de design ou código”.
Começando com as que eu provavelmente não usaria (11ª colocada) e, ao final do artigo, as opções que seriam mais prováveis de eu utilizar se fosse começar hoje no design (1ª colocada).
Foco
Importante ressaltar que o seu foco no design pode impactar significativamente na escolha da ferramenta. Por exemplo, pessoas mais focadas em UX Design podem preferir plataformas que valorizam o aspecto textual, enquanto profissionais mais focados em UI Design podem preferir plataformas com maior apelo visual.
Sugiro que, antes de escolher a plataforma, você liste o que é importante para você.
Por exemplo, para uma suposta Maiane começando no mercado de design, sem muito conhecimento de design ou código, é importante:
- Ser gratuito.
- Ser fácil de deixar bonito.
- Ser fácil de escrever textos para acompanhar os projetos.
- Rápido e fácil de atualizar (para manter o portfólio em dia 😉).
- Poder dar enfoque na parte visual.
- Acessibilidade.
- Ser responsivo.
- Possuir link amigável.
Dito isso, vamos para a análise das ferramentas.
11. Medium
O Medium é uma plataforma do tipo blog. Através dela é possível criar e compartilhar artigos sobre temas diversos, inclusive design.
Vantagens
- ✅ Acessibilidade: por ser bastante focada em textos e leitura possui boa acessibilidade.
- ✅ Facilidade de uso: possui baixa curva de aprendizado. No caso é tão simples que com pouco tempo de uso o usuário consegue começar a criar e escrever.
- ✅ Link amigável: no plano gratuito o link gerado é amigável (ex.: sheisacreative.medium.com). Além disso, nos planos pagos é possível utilizar seu próprio domínio.
- ✅ Descoberta: como seu portfólio fica público em uma plataforma que distribui conteúdos, caso seus estudos de caso e artigos sejam realmente relevantes há sempre a chance de ganhar seguidores e ficar conhecido no Medium. Embora, não é tão simples assim e com certeza exige um trabalho adicional.
Desvantagens
- ❌ Baixo apelo visual: a plataforma tem enfoque textual. Logo, apesar do enfoque clean, é difícil conseguir alto nível de apelo visual.
- ❌ Pouca personalização: as possibilidades de personalização são bastante limitadas, tanto na página inicial do usuário quanto nos artigos.
Preço
É possível criar um portfólio no Medium utilizando apenas o plano gratuito. Porém, caso queira recursos mais avançados (não necessários para criar seu portfólio), os planos do Medium começam em $ 5 (em dólares) por mês.
Exemplos
🔵 Portfólio como artigo: diferente dos demais portfólios no Medium apresentados, o portfólio da Andreza segue uma estrutura diferente, na qual ela criou o portfólio inteiro no formato de artigo com links para outros locais. Pode ser uma alternativa interessante dependendo do seu caso.
Opinião da Mai
O Medium é uma excelente plataforma, mas o foco dela é escrever artigos e criar uma estrutura de blog. Caso seu foco seja UX Writing ou profissões ligadas à parte escrita pode ser uma ótima alternativa.
Porém, em geral, eu não recomendo para designers, visto que, para a maioria de nós, é muito importante entregar um bom apelo visual. Afinal, quem nunca comprou um livro pela capa que jogue a primeira pedra rs…
10. Figma
O Figma é, neste momento, a principal ferramenta de design com foco em criar protótipos interativos. Através dela é possível criar protótipos (não o produto final) de sites, aplicativos, softwares e similares.
Vantagens
- ✅ Flexibilidade: caso você já utilize a ferramenta, é fácil criar experiências incríveis e extremamente flexíveis que incluem texto, imagens e até vídeos.
- ✅ Familiaridade: muitos designers já estão familiarizados com a ferramenta, nesses casos, não há nova curva de aprendizagem.
- ✅ Fácil de manter: após criado, para manter é tão simples quanto arrastar elementos.
Desvantagens
- ❌ Plataforma: não podemos supor que recrutadores ou clientes são designers, muitos deles nunca sequer abriram o Figma portanto pode ser bastante confuso.
- ❌ Não é responsivo: não é possível enviar um link que abra em um formato no desktop e seja adaptado para celular ou vice-versa. Por exemplo, se você fez pensado para desktop as chances de parecer ruim no mobile são extremamente altas.
- ❌ Link não amigável: o link gerado é normalmente grande, poluído e pouquíssimo amigável.
- ❌ Falta acessibilidade: como o Figma é uma ferramenta para criar protótipos e não um produto final é muito difícil garantir boa acessibilidade com o mesmo já que, em geral, não temos muito controle sobre ela.
Preço
É possível criar um portfólio no Figma utilizando apenas o plano gratuito. Porém, caso queira recursos mais avançados os planos do Figma começam em $ 15 (em dólares) por mês.
Exemplos
Opinião da Mai
O Figma é a ferramenta queridinha de boa parte dos UI/UX Designers. Porém, não é uma ferramenta para portfólio.
Os maiores problemas, na minha visão, dizem respeito à falta de responsividade e acessibilidade. Afinal, tão importante quanto um bom visual é garantir uma boa experiência para todos os usuários.
Acredito que alguns dos poucos casos em que eu recomendaria o Figma para portfólio são os seguintes:
- Se estiver com muita pressa, já souber usar o Figma e for uma forma de quebrar um galho; ou,
- Caso você precise demonstrar alguma habilidade muito específica relacionada ao Figma
De toda forma, caso escolha esta alternativa, esteja atento se quem irá receber o link está familiarizado com a ferramenta.
💡 Dica! Utilize plugins para passar seu design do Figma para outras plataformas específicas de website. Entre as plataformas sugeridas neste artigo ao menos Wix, Webflow e Framer possuem plugins específicos para migrar o seu design.
9. Dribbble
O Dribbble é praticamente um mural de design. Através dele é possível ver diversos shots (fotos ou vídeos únicos) de outros designers, colecionar projetos que você gosta e claro, compartilhar seus próprios projetos.
Vantagens
- ✅ Fácil de criar: como você só precisa fazer upload de poucas imagens e vídeos é bastante fácil de criar.
- ✅ Link amigável: apesar de não ser possível atrelar a domínio próprio o link que a plataforma gera é bastante amigável (ex.: dribbble.com/sheisacreative).
- ✅ Descoberta: ao deixar seus projetos públicos há a possibilidade de outras pessoas conhecerem seu trabalho, inclusive fora do Brasil. Entretanto, para se destacar é preciso ter alto nível de excelência e dedicação à plataforma.
Desvantagens
- ❌ Baixa personalização: além de decidir quais imagens você irá enviar não é possível personalizar quase nada na plataforma, salvo alterações mais simples como mudar a ordem dos projetos e, ainda assim, você precisa de um plano Pro para isso.
- ❌ Plataforma em declínio: há muito tempo vejo profissionais no Twitter e outras redes sociais reclamando que o Dribbble já não é a mesma plataforma que foi antes. Para referência, há uns 10 anos tudo que todo designer queria era um convite para o Dribbble.
- ❌ Projetos sem muito contexto: o foco da plataforma é altamente visual, logo, para projetos que possuem mais contexto e trabalho de pesquisa fica difícil de mostrar tudo que foi feito.
- ❌ É muito b: brincadeiras a parte, mas é fácil demais errar a quantidade de “b”s no Dribbble… 😂
Preço
É possível criar um portfólio no Dribbble utilizando apenas o plano gratuito. Porém, caso queira recursos mais avançados o Dribbble Pro custa $ 8 (em dólares) por mês e promete aumentar a visibilidade do seu perfil.
Entretanto, não é raro ver usuários comentando que o plano Pro não vale tanto a pena. Logo, fica a seu critério caso queira testar, mas sugiro ir com precaução.
Exemplos
Opinião da Mai
Se fosse o mercado de design de 10 ou 15 anos atrás e você tivesse recebido o tão desejado “convite para o Dribbble” eu diria sem medo: crie um portfólio por lá. Porém, naquela época a plataforma era muito mais forte.
Hoje em dia, especialmente para os designers que fazem além do visual uma boa pesquisa, a plataforma deixa muito a desejar. Porém, como é extremamente fácil e rápido de criar, se você estiver com pressa pode ser uma ótima alternativa.
Além disso, pode ser também uma boa alternativa caso você queira buscar público e serviços internacionais. Entretanto, isso exige estudar e criar um bom perfil na plataforma, como uma rede social.
E a pergunta que fica é: será que (ainda) vale a pena investir tempo no Dribbble? Esta pesquisa deixo para você que estiver disposto(a) a testar.
8. Behance
Similar ao Dribbble o Behance também é uma plataforma para designers. Entretanto, o foco não está em apenas postar uma ou outra foto de um projeto, mas sim projetos mais completos.
Além disso, é importante ressaltar que a Adobe vem investindo mais no Behance desde que criaram recentemente o chamado Behance Pro.
Vantagens
- ✅ Fácil de utilizar: é bastante fácil criar um perfil e também projetos no Behance.
- ✅ Baixa compressão de imagens: desde muitos anos o Behance tem um cuidado bastante alto de não comprimir demais as imagens colocadas na plataforma, o que ajuda os projetos a não perder qualidade.
- ✅ Descoberta: seus projetos ficam disponíveis na rede de forma que pessoas que não conhecem seu trabalho podem passar a conhecer.
Desvantagens
- ❌ Pouca personalização: o editor de projetos é relativamente travado para mexer e, ao mesmo tempo, o site em site não permite muita personalização.
- ❌ Dificuldade em entender qual projeto é seu: o fato de terem muitos projetos de outros designers por lá pode confundir alguns recrutadores que — acreditem, já vi acontecer — podem achar que tudo que está no Behance é do mesmo designer.
Preço
É possível criar um portfólio no Behance utilizando apenas o plano gratuito. Porém, similar ao Dribbble, o Behance oferece um plano Pro no valor de R$ 47 por mês.
O plano Pro do Behance promete aumentar a possibilidade de personalização do perfil, adicionar senhas a projetos e também destacar seu perfil. Similar ao Dribbble, caso resolva testar sugiro ir com precaução.
Exemplos
- 🟢 André Bertolin
- 🟢 Eduarda Gama
- 🟢 Isabella Martinelli
- 🟢 Isaque Pereira
- 🟢 Maiane Gabriele
- 🟢 Moacir Eduardo de Oliveira
- 🟢 Rafaela Pedroza
- 🟢 Renan Mayrinck
- 🔵 Larissa Hessel*
🔵 Template entre projetos diferentes: a Larissa deu a dica de usar um template padrão entre projetos diferentes, similar ao que ela fez em seu portfólio no Behance.
Opinião da Mai
Confesso: sou uma das pessoas que gosta do Behance (me julguem rs).
Apesar de muitos designers não gostarem do Behance, pois normalmente alegam foco muito alto no apelo visual e a dificuldade de entender qual projeto é realmente seu, eu tenho uma experiência um pouco diferente.
Apesar de ser um pouco raro, eu já fechei alguns contratos muitos bons de clientes que encontraram meu trabalho através do Behance. Porém, ele não é a plataforma principal do meu portfólio e sim um complemento.
Em geral, eu recomendo o Behance para:
- quem precisa criar um portfólio de forma rápida;
- quem quer focar em ser freelancer e pretende realmente investir tempo na plataforma (como uma rede social).
No segundo caso, exige bastante empenho se destacar na plataforma, visto que existem muitos projetos incríveis por lá.
Por fim, válido ressaltar que desde que o Behance lançou o Behance Pro passei a receber mais contatos de possíveis clientes pela plataforma (mesmo sem assinar). Entretanto, a qualidade da maioria desses contatos é baixa e cai muito no padrão “gringo que quer contratar brasileiro por ser barato”.
7. Adobe Portfolio
O Adobe Portfolio é um criador de sites do modelo mais simples que pode existir. Em geral ele possui alguns templates disponíveis e oferece algum nível de personalização.
O maior diferencial do Adobe Portfolio é que através dele você consegue facilmente criar um website alimentado pelos projetos que estão no seu Behance.
Vantagens
- ✅ Fácil de criar: é bastante fácil e rápido criar um site no Adobe Portfolio, especialmente se você já tiver projetos no Behance.
- ✅ Templates: oferece alguns templates bastante clean e focados em projeto que podem ser um ótimo ponto de partida.
- ✅ Link amigável: o link gerado é bastante amigável (ex.: pessoa.myportfolio.com) e se você quiser é possível adicionar domínio próprio.
- ✅ Integração com o Behance: ao integrar com o Behance é simples como ligar e desligar um botão para escolher quais projetos você quer mostrar no portfolio.
Desvantagens
- ❌ É pago: triste realidade, mas é pago. Em geral o Adobe Portfolio é vendido como parte de outras assinaturas da Adobe.
- ❌ Personalização limitada: apesar de ser possível personalizar ele não é um criador avançado de sites e o que pode ser personalizado é limitado.
Exemplos
Preço
O Adobe Portfolio é uma plataforma paga, porém, inclusa em algumas assinaturas da Adobe, como o plano todos os apps — normalmente em oferta por R$ 139 por mês 😵. Além disso, o Adobe Portfolio também está incluso no plano Behance Pro.
Opinião da Mai
O Adobe Portfolio é uma ótima alternativa para quem está começando e já possui ou está familiarizado com o Behance. É praticamente criar um website a partir dos projetos do Behance.
Entretanto, eu o recomendo apenas para quem já assina Adobe por algum outro motivo. Caso contrário, não acho que o valor compense apenas para ter o seu Adobe Portfólio.
6. Desenvolver Website
Desenvolver o próprio website diz respeito principalmente a quem está disposto a “codar”. Especificamente para este artigo coloquei o site próprio separado de algumas outras ferramentas como Wordpress ou Wix, por exemplo.
Nesta seção focarei em abordar os sites que são “codados na raça”, ou seja, um pouco mais independentes de ferramentas externas. Embora, entendo que quase sempre acaba dependendo de algo mais (ex.: Vercel, Github, …).
Vantagens
- ✅ O céu é o limite: é possível fazer o que você quiser, desde que você tenha a habilidade técnica necessária.
- ✅ Menor dependência de plataformas: é possível ter mais controle sobre onde seu site será hospedado, por exemplo. Dessa forma, diminui a chance de você ficar dependente de uma plataforma específica.
- ✅ Maior controle: é possível dar atenção mais detalhada para performance, acessibilidade, responsividade…
- ✅ Domínio próprio: é possível usar seu próprio domínio.
Desvantagens
- ❌ Alta curva de aprendizado: desenvolver um site é uma tarefa que pode ser, muitas vezes, bastante complexa. Afinal, é preciso pensar no design, acessibilidade, manutenção, semântica e vários outros pontos.
- ❌ Tempo de desenvolvimento: nem sempre é rápido criar e lançar um website (em alguns casos, dependendo da sua habilidade e complexidade do website, pode ser).
Preço
Os preços para manter um site próprio variam bastante. Em geral, pelo menos dois pontos devem ser considerados: (1) Domínio; e (2) Hospedagem.
Os domínios mais baratos costumam custar em torno de R$ 40 por ano na plataforma Registro.br. Porém, os preços podem variar bastante dependendo do domínio, chegando inclusive a valores absurdos (ex.: a OpenAI pagou incríveis $ 15,5 milhões no domínio chat.com).
Com relação à hospedagem é possível hospedar sites de forma gratuita nos planos mais básicos de plataformas como Vercel e Netlify e, ainda assim, ter domínio próprio. Importante nestes casos estar atento ao uso do site, caso comece a receber muitos acessos poderá ser necessário migrar para planos pagos e aí a conta pode chegar pesada…
Exemplos
- 🟢 Dener Garcia
- 🟢 Gabriella Cavalcanti (Bootstrap Studio + código)
- 🟢 Paulo Carmo
- 🟢 Pedro Neto
- 🟢 Rafael Ferreira
- 🟢 Rick Benetti
- 🟢 Yago Torres (fez o design, terceirizou o desenvolvimento)
- 🟢 She is a Creative
Opinião da Mai
Desenvolver um website do zero com código é a chamada “faca de dois gumes”. De um lado, você tem a liberdade para fazer o que quiser, de outro, com grandes poderes vêm grandes responsabilidades.
É extremamente libertador fazer o que você quiser em um website (por experiência, meu website atual foi desenvolvido por mim e estou trabalhando no próximo). Porém, é preciso cuidar com muitos detalhes para sair de forma realmente boa.
Por exemplo, no meu site atual um dos maiores problemas é a manutenção. Na época eu não conhecia React e ainda integrei com Wordpress sem saber PHP. Resultado: hoje tenho um site que para mudar qualquer coisa no layout é um parto.
Por esse motivo, recomendo criar websites com código apenas para quem já tem alguma experiência com Front End ou caso seja muito doido como eu e esteja disposto a aprender no caminho. Por outro lado, é possível fazer tudo exatamente como você quer e, para mim, isso vale o esforço (especialmente porque já tenho um website que funciona e não preciso fazer na pressa).
5. Webflow
O Webflow é uma poderosa ferramenta no-code (sem código) que permite criar websites, blogs e similares sem o usuário, necessariamente, conhecer código. Apesar do apelo no-code, a plataforma permite inserir trechos de código o que torna a experiência ainda mais rica.
Por fim, um dos grandes diferenciais do Webflow em comparação aos concorrentes no-code é a quantidade de personalizações possíveis. Ademais, é uma ferramenta no-code bastante indicada para websites maiores e complexos.
Vantagens
- ✅ Alta personalização: através do Webflow é possível fazer quase tudo que é possível fazer com código, desde que você tenha o conhecimento necessário.
- ✅ Comunidade ativa: existe uma comunidade bastante ativa e apaixonada por Webflow, o que pode ajudar caso precise de apoio durante a jornada de aprendizado da plataforma.
- ✅ Animações poderosas: sem muitas dificuldades é possível adicionar animações que deixam o seu website com aquele aspecto de “legalzão”, sabe?
- ✅ Plugin para Figma: existe plugin para Figma que promete exportar o design do Figma para o Webflow.
- ✅ Link amigável: mesmo no plano gratuito o link gerado pelo Webflow é amigável (ex.: artofsarang.webflow.io).
- ✅ Exportação de código: é possível exportar o código do Webflow e, por exemplo, utilizar em um repositório próprio (dica do Francisco Nunes 😄).
Desvantagens
- ❌ Curva de aprendizado: apesar de ter muitas capacidades não é uma plataforma muito intuitiva.
- ❌ Preço: como os preços são em dólar, dependendo do tamanho do website pode acabar ficando meio salgado...
Preço
É possível criar um portfólio no Webflow utilizando apenas o plano gratuito. Porém, caso queira recursos mais avançados, como domínio próprio, os planos começam em $ 14 (em dólares) por mês.
Exemplos
- 🟢 Aimêe Mothé
- 🟢 Andressa Belém
- 🟢 Bárbara Travassos
- 🟢 Carlos Evangelista
- 🟢 Dualpixel
- 🟢 Julie França
- 🟢 Maycon Correia
- 🟢 Patrick Rodrigues
Opinião da Mai
O Webflow é uma ferramenta muito completa que está entre as que mais permitem chegar próximo do que é feito diretamente com código.
Entretanto, tenho bastante receio com plataformas cujo valor inicial é em dólares que cobram conforme seu website cresce. Afinal, o que era para ser barato pode sair do controle sem você perceber.
Além disso, a curva de aprendizado inicial é bastante alta. Nesse caso, acredito que se o seu objetivo é puramente criar um portfólio, pode não valer a pena o tempo investido na plataforma.
Por outro lado, se você pretende aprender Webflow como mais um dos conhecimentos que você possui, nesse caso, pode ser uma ótima forma de criar seu portfólio.
4. Wix
O Wix é “o Webflow que o brasileiro pode pagar”. 🙊
Brincadeiras a parte, muito similar ao Webflow, o Wix também se propõe a ser uma plataforma no-code (sem código). Através de muito “clica e arrasta” é possível construir sites inteiros.
Porém, diferente do Webflow ele tem muito menos possibilidades em termos de construção dos websites. De outro lado, possui um apelo bastante focado no marketing que pode ser interessante para quem quer investir em um bom marketing pago ou orgânico.
Vantagens
- ✅ Alta personalização: similar ao Webflow é possível criar sites bastante legais e complexos. Porém, o nível de personalização é bem mais limitado.
- ✅ Plugin para Figma: existe plugin para Figma que promete exportar o design do Figma para o Wix.
- ✅ Preço: comparado a ferramentas similares como Framer e Webflow os preços são mais amigáveis, visto que possuem conversão em reais, com maior paridade com a realidade brasileira.
Desvantagens
- ❌ Plataforma limitada: o construtor de sites do Wix é muitas vezes travado e lento na hora de criar websites. Além disso, comparado a Framer e Webflow é bem mais limitado.
- ❌ Plano gratuito não muito “profissional”: como eu disse, eles são focados em marketing, inclusive para eles mesmos rs… Nesse caso, os websites criados no plano gratuito possuem um banner relativamente chamativo no topo dizendo que foi feito via Wix.
Preço
É possível criar um portfólio no Wix utilizando apenas o plano gratuito. Porém, ele fica com um banner bem chamativo do Wix. A boa notícia é que em termos de plano o Wix possui preços de entrada amigáveis, com planos começando em R$ 15 por mês.
Exemplos
Opinião da Mai
O Wix é uma ferramenta poderosa mas, confesso, já passei muita raiva com ele… rs
Ao tentar desenvolver website no Chrome, mesmo usando um computador potente, o construtor de websites deles apresentou muitos problemas de performance. Logo, espero que sua experiência seja diferente da minha (ou que eles melhorem o construtor de sites 💁🏻♀️).
Mas, como o preço é bastante amigável, pode ser um bom custo-benefício superado o trauma inicial. Sendo assim, sugiro considerar o Wix entre as alternativas na hora de construir seu portfólio pois, pode sim, ser uma boa alternativa.
3. Wordpress
Wordpress é um software que você pode instalar em um website e, com isso, tem uma ferramenta poderosa para te ajudar a criar websites e gerenciar conteúdos. Através do Wordpress é possível criar muitos tipos de websites e blogs.
Por exemplo, algumas alternativas são: criar websites a partir de templates (pagos ou gratuitos), utilizar plugins similares a ferramentas no-code (como o Elementor), ou ainda, “codar” um website inteiro e integrar da forma que você quiser com o Wordpress.
Vantagens
- ✅ Alta personalização: o Wordpress em si não limita nenhuma personalização, sendo possível escolher de que forma e com quais ferramentas irá utilizar ele a fim de criar o que você quiser.
- ✅ Plugins (muitos plugins): o Wordpress é uma ferramenta muito forte no mercado e, há muitos anos, tem uma comunidade bastante ativa. Por esse motivo, para quase tudo que você precisar existe um plugin para isso.
- ✅ Templates: existem diversos templates (pagos ou gratuitos), sendo muitas vezes uma ótima opção para quem tem pouca noção de design ou precisa de algo rápido.
- ✅ Poderoso CMS (Sistema de Gestão de Conteúdos): é possível ter controle muito completo dos conteúdos do seu website, como projetos, posts para blogs, tags e similares. Após configurado, é simples como escrever em um editor de textos e apertar “Publicar”.
- ✅ Preço: é possível instalar e usar o Wordpress de graça caso você decida hospedar por conta própria.
Desvantagens
- ❌ Alta curva de aprendizado: especialmente se você optar por hospedagem própria pode não ser tão simples entender como o Wordpress funciona. Além disso, é preciso aprender a conectar com seu domínio e assim por diante. Entretanto, se estiver disposto a utilizar existem muitos materiais disponíveis. Por fim, não é tão difícil como criar o código do zero, principalmente se você optar por templates ou plugins no-code, como o Elementor.
- ❌ Performance: pelo o Wordpress ser uma ferramenta bastante completa, é possível que ele adicione um peso considerável ao seu website. É preciso estar sempre atento aos plugins também. Entretanto, se configurado com cuidado esse peso, quase sempre, passa despercebido pela maioria dos usuários.
Preço
O Wordpress vem em dois modelos: (1) hospedagem própria (wordpress.org); ou (2) através de plataforma oficial (wordpress.com).
Se você optar por hospedagem própria, os valores para manter um site em Wordpress são similares aos valores de manter um site com desenvolvimento próprio (começando em R$ 40 por ano — preço do domínio).
Por outro lado, no caso de hospedar via wordpress.com, os preços começam em R$ 12 por mês, sendo um valor bastante amigável comparado a ferramentas que, muitas vezes, cobram em dólar.
Além de domínio e hospedagem, dependendo da forma como irá desenvolver seu website alguns valores extras podem ser adicionados, como o valor de comprar um template Premium (tem de todo preço rs) ou adicionar plugins pagos, como o Elementor Pro (começando em $ 4,92 por mês).
Exemplos
- 🟢 Anna Freire
- 🟢 Marcus Martins
- 🟢 Muahoolab
- 🔵 Alex Matos (Elementor)
- 🔵 Beatriz Maciel (Elementor + Template)
- 🔵 Dan Lisboa (Elementor)
- 🔵 Gustavo Mazzeti (Elementor)
- 🔵 Marco Vinicius (Elementor)
- 🟣 Álvaro Votan (Semplice + Heliohost)
🔵 Elementor: plugin no-code que permite construir sites inteiros no maior estilo “arrasta e solta”.
🟣 Semplice + Heliohost: Semplice é uma ferramenta moderna focada na construção de portfólios elegantes, praticamente um template Premium do Wordpress. Heliohost, por sua vez, é uma alternativa de hospedagem gratuita.
Opinião da Mai
Wordpress é uma ferramenta extremamente poderosa, especialmente na hora de gerenciar conteúdos.
Como no caso de portfólio muitas vezes precisamos atualizar, pode ser uma boa alternativa para facilitar manter o portfólio em dia. Além disso, recomendo demais caso você tenha a intenção de ter um blog.
Apesar de não parecer muito amigável e ter muitas funcionalidades a princípio, com certeza vale a pena vencer a barreira inicial e conhecer um pouco sobre o Wordpress. Afinal, é uma ferramenta que pode abrir muitas portas não somente para seu portfólio, mas também para outros projetos.
2. Notion
Notion é uma plataforma de organização. Trabalha com um conceito de blocos no qual é possível adicionar diversos tipos de conteúdos, como textos, imagens, títulos, poderosas tabelas e muito mais.
Vantagens
- ✅ Bastante flexível: possui muitos tipos de blocos de textos, imagens, vídeo, conteúdos incorporados e outros.
- ✅ Fácil de manter: após acostumar com a ferramenta é fácil de manusear e editar as informações.
- ✅ Templates: possui templates gratuitos e pagos para quem não quer começar do zero.
- ✅ Plano gratuito generoso: é possível usar quase tudo no Notion apenas com o plano gratuito.
Desvantagens
- ❌ Curva de aprendizado: alguns usuários possuem dificuldade ao começar utilizar devido à quantidade de funcionalidades que possui.
- ❌ Plataforma: alguns recrutadores ou clientes podem não estar familiarizados e ter dificuldades na hora de navegar.
- ❌ Link não amigável: o link gerado não é nada amigável.
- ❌ Conteúdos escondidos: Dependendo da forma como você constrói e dos blocos utilizados (ex.: toggle e páginas) alguns conteúdos podem ficar escondidos.
Preço
É possível criar um portfólio no Notion usando somente o plano gratuito. Porém, caso decida assinar a plataforma os planos do Notion começam em $ 10 (em dólares) por mês.
Além disso, caso decida usar ferramentas externas como o Super, também poderá utilizar o plano gratuito ou explorar os planos pagos do Super, que começam em $ 16 (em dólares) por mês.
Exemplos
- 🟢 Alex Muench
- 🟢 Bruno Albuquerque
- 🟢 Emanuel Tomiyoshi
- 🟢 Kim Alban
- 🟢 Maria Carneiro
- 🟢 Raquel Souza
- 🔵 Ana Paula Alvares (Notion + Super)
- 🔵 Gabriela Peron (Notion + Super)
- 🔵 Jonas Lobo (Notion + Super)
- 🔵 Mah Piacesi (Notion + Super)
- 🟣 Sâmya Almeida (bit.ly/samyaalmeida)
🔵 Super: é uma ferramenta externa ao Notion que permite criar websites a partir de páginas do Notion. Se quiser aproveitar, a galera da Vagas UX fez um aulão sobre como usar o Super para tirar o portfólio da gaveta.
🟣 Bit.ly: a Sâmia deu a dica de usar o bit.ly para deixar o link mais amigável que o link automático gerado pelo Notion.
Opinião da Mai
Confesso que quando comecei a escrever este artigo o Notion estava entre as opções menos recomendadas. Afinal, o Notion não é uma plataforma para construir websites.
Entretanto, após pedir dicas de portfólio e receber vários portfólios feitos com Notion + Super mudei de opinião. O Notion não é uma plataforma para websites, mas o Super é.
Logo, juntar ambas as ferramentas acredito ser um dos modos mais fáceis e baratos de criar um portfólio, especialmente se você já utiliza o Notion. Além disso, tem a facilidade de ser muito fácil de gerenciar, editar textos e imagens, o que permite manter o portfólio em dia de forma muito mais simples.
1. Framer
O Framer é uma plataforma no-code (sem código) focada em criar websites. Um dos grandes benefícios do Framer é que, para designers que já utilizam o Figma, a transição de ferramentas é muito simples e a curva de aprendizado também.
Vantagens
- ✅ Plugin para Figma: existe plugin para Figma que promete exportar o design do Figma para o Framer. Além disso, muitos designers relatam que esse processo costuma funcionar muito bem.
- ✅ Facilidade de uso: muitos designers relatam que gostam de utilizar o Framer e, até mesmo, se divertem durante o processo.
- ✅ Alto nível de personalização: é possível criar layouts muito únicos e diferentes através do Framer, similar ao que é feito no Figma.
- ✅ Link amigável: mesmo nos planos gratuitos o link gerado pelo Framer é bastante amigável (ex: mf-portfolio.framer.website).
- ✅ Animações de alto nível: é possível, sem muita dificuldade, adicionar interações de altíssimo nível que podem elevar o nível do seu portfólio.
Desvantagens
- ❌ Curva de aprendizagem: similar a outras ferramentas, existe uma curva de aprendizagem inicial. Embora, muitos designers relatam ser relativamente simples.
- ❌ Dependência da plataforma: caso você precise migrar seu website do Framer para outra plataforma não é muito simples. Além disso, é preciso estar atento aos planos pois, caso seu site cresça demais os valores também podem subir.
Preço
É possível criar um portfólio no Framer usando somente o plano gratuito. Porém, caso decida assinar a plataforma os planos do Framer começam em R$ 28 por mês.
Exemplos
- 🟢 Christian Oliveira
- 🟢 Dominique Ganime
- 🟢 Heitor Rodrigues
- 🟢 Elias Nunes
- 🟢 Enzo Chaves
- 🟢 Fernando Araujo
- 🟢 Gisele Cardoso (template)
- 🟢 Henrique Porto Silva
- 🟢 Ivan Teixeira
- 🟢 Josiane Cardoso
- 🟢 Karine Souza
- 🟢 Matheus Freitas
- 🟢 Murilo da Costa
- 🟢 Romenig Cintra
- 🟢 Thais Dybax
Opinião da Mai
Não é à toa que o Framer é uma das ferramentas mais recomendadas por designers hoje em dia.
Particularmente, acho os planos um pouco caros e não recomendo para qualquer pessoa que queira um website com intenção de expandir o mesmo. Porém, para quem está começando na área e somente precisa de um portfólio bonitão é com certeza uma excelente alternativa.
Um ponto que vale muito a pena ressaltar no Framer é a possibilidade de adicionar animações de alto nível. Se bem feitas, apenas essas animações podem elevar seu portfólio para outro nível.
Por fim, o mais importante é você pesquisar com calma e tentar entender qual a melhor ferramenta para você. Afinal, cada pessoa possui objetivos muito diferentes e usar a “Ferramenta X” só porque o “Fulano” recomendou não me parece a escolha mais inteligente.
Tá, mas… como está o portfólio da Mai hoje? 🤔
Confesso, sempre que vejo alguém dando dicas sobre portfólio a primeira coisa que faço: busco o portfólio da pessoa para julgar se ela está seguindo as dicas que ela mesma deu. 😂
Talvez você seja minimamente parecido comigo e esteja se perguntando sobre o meu portfólio. Apesar de eu citar no meio do artigo e até colocar links para meu portfólio no Behance ou Dribbble (este último eu praticamente nem uso, mas como estava com poucos exemplos, coloquei), a verdade é que eles não são meu portfólio principal.
Meu portfólio atual está disponível em sheisacreative.com.br e foi desenvolvido por mim com HTML, CSS e JavaScript. Além disso, eu integrei com Wordpress usando PHP. Entretanto, estou em processo de criar um novo website (faz mais de um ano, mas vai sair rs).
O novo website também será “codado” por mim, porém, deixarei de usar o Wordpress como CMS (Sistema de Gestão de Conteúdos). Afinal, como hoje em dia tenho maior conhecimento de código, a princípio irei manter todo o conteúdo como texto no código (markdown ou JSON). Dessa forma, eu consigo retirar um peso considerável do website.
Além disso, optei por fazer um site novo porque o atual não me representa tão bem como eu gostaria e, ainda, é muito difícil a manutenção do mesmo. Por fim, estou fazendo o novo website com Next.Js e Typescript, uma solução bem mais moderna que permite carregamento mais rápido e, principalmente, melhor manutenção a longo prazo.
Da minha parte, prefiro desenvolver site próprio pois gosto de ter a liberdade de fazer o que eu quiser (mesmo). E ainda, aprendo no caminho.
Bônus: gambiarra de alto nível
Várias ferramentas apresentadas possuem o problema de o link não ser muito amigável. E, mesmo quando é, muitas vezes leva o nome na ferramenta, o que pode não ser o ideal.
Nesse sentido, caso queira ter um domínio próprio independente da plataforma a dica é comprar o domínio e redirecionar.
Logo, uma boa opção é a seguinte (funciona para domínios .com.br):
- Compre seu domínio via Registro.br (a opção mais barata para comprar domínios no Brasil).
- Após comprar, acesse sua conta.
- Na tela seguinte clique no nome do domínio que gostaria de redirecionar.
4. Por fim, role a tela até a seção DNS e clique em “Configurar endereçamento”. No painel que abre insira o endereço do site para o qual quer redirecionar o usuário (ex.: meulindowebsite.framer.website).
Após alguns minutos já estará pronto (pode ser que demore um tempinho para o redirecionamento funcionar, então paciência). Agora, sempre que alguém acessar o domínio que você acabou de comprar será redirecionado para o seu portfólio, independente de onde ele estiver. 😄
Materiais extra
- 🟢 Adobe Portfolio: caso queira aprender a criar o seu site utilizando o Adobe Portfólio, eu tenho um vídeo super antigo (dos tempos que o Adobe Portfolio era gratuito e meu portfólio era feito nele) no qual exploro a ferramenta em detalhes.
- 🟢 Figma: caso queira aprender a usar o Figma, recomendo o Curso de Figma gratuito que criei no YouTube (juro que é divertido e informativo 🙆🏻♀️).
Agradecimentos
Para finalizar, este artigo só foi possível graças às dezenas de recomendações de portfólio que recebi no LinkedIn. Por isso, muito obrigada a todos que interagiram com a postagem e ajudaram a construir este artigo. Vocês são maravilhosos.
Ótimo portfólio a todos! 💛
