Como criar um site pessoal utilizando o Notion
O Notion é uma ferramenta com várias possibilidades. É possível utilizá-lo de várias formas, seja como lista de tarefas, blog, calendário, tabela, espaço de trabalho, quadro de projetos e etc. Neste artigo, vou detalhar todos os passos para utilizar o Notion para criar um site pessoal. É possível fazer isso de forma completamente gratuita e com muita facilidade.
O que encontrar nesse artigo
Como mencionado anteriormente, o intuito é fazer um site pessoal, então não entrarei em detalhes do Notion que serão irrelevantes para esse processo, mas, ao longo do artigo, vou deixar alguns links que podem ser interessantes para entender e visualizar a completude da ferramenta. Inclusive, escrevi um outro artigo aqui na comunidade, também aplicando Notion, mas dessa vez ensinando como fazer um currículo online que também pode ser exportado diretamente para PDF.
Exemplo do resultado final
Para que possa visualizar o que será possível fazer ao final desse artigo, aqui está uma imagem do site pessoal que eu criei e que serviu como modelo para escrever esse artigo.
Para que consiga entender melhor algumas nomenclaturas que vão aparecer, indico a leitura do trecho “Conceitos básicos do Notion” que escrevi nesse outro artigo da comunidade da Revelo.
Entender as possibilidades do Notion
Ao pensar em desenvolver um site pessoal, muitas ideias complexas e interessantes visualmente podem surgir, mas, como estamos lidando com uma ferramenta facilitadora, intuitiva e “genérica” para vários contextos, a desvantagem está justamente em recursos mais específicos para o desenvolvimento de um site por completo.
O Notion, por padrão, não possui inúmeras ferramentas que permitem a total personalização e controle de cada parte do que será apresentado na tela do site. Existem diversas ferramentas que integram com o Notion e que permitem funcionalidades ausentes no Notion.
Pensar no público alvo
Antes de desenvolver um site, é importante pensar no público alvo (”Pra quem será esse site?” Para recrutadores? Para outros desenvolvedores verem meus projetos? Para ser meu portifólio de freelancer? Para os meus familiares verem as minhas novas habilidades com o Notion?).
Pense bastante nisso antes de prosseguir e tenha de forma clara qual será o seu público. No caso que usarei como exemplo, é um site que funciona bem para mostrar para recrutadores.
Buscar referências e inspirações
Para aproveitar bem o ócio criativo, podemos praticar a arte de roubar como um artista, que consiste em olhar diversos sites e recursos visuais elaborados por designers para assim selecionar tudo que achar interessante e juntar ideias diferentes, combinando referências diferentes.
Deixo aqui uma lista de sites considero interessantes para essa etapa:
OBS.: Minha maior referência eu peguei do YouTube, de um tutorial ensinando com fazer um site em Flutter.
Separar material pessoal
Após pegar referências e descobrir o que gostaria que tivesse no seu site, esta etapa serve para pegar todo material que te pertence e deixar separado para poder utilizar no site. Dessa forma, é possível saber a quantidade de cada material e qual espaço que será necessário utilizar para apresentar tudo no site.
Caso se tenha muita coisa, é bom repensar se vale realmente a pena apresentar tudo e deixar o site muito poluído, cheio de informações.
Materiais interessantes de separar:
- Projetos no GitHub
- Imagens
- Endereços/usuários de redes sociais interessantes
- Links para blogs e artigos
- Algum texto que fale sobre você (Quem você é? O que você faz? Características interessantes e etc)
- Certificações
Por onde começar?
Tudo pronto! Tudo separado! E agora? Agora é hora de se organizar e colocar a mão na massa, separando por onde iniciar o trabalho de subir um site.
Botões de navegação
No caso que vou utilizar de exemplo, o site é completamente baseado em uma única página, esse conceito também é conhecido como Single Page Aplication (SPA).
Para que isso funcione bem, vou utilizar de botões de navegação, que vão funcionar para destinar o usuário para o bloco relacionado ao assunto desejado/informado. Esses botões nada mais são que palavras clicáveis.
Preenchimento das seções
Para cada botão, vou criar um bloco no Notion (utilizando Heading 1) que vai funcionar como sendo a seção daquele botão.
Seção Sobre
Seção Projetos
Seção Currículo
Minha seção currículo segue o mesmo padrão da seção anterior, porém utilizando uma Database para currículo.
Seção Contato
Na seção Contato, basta selecionar todos os contatos que se aplicam bem ao caso do site, em seguida, selecionar uma imagem que condiz com a ambientação do site e, por fim, colocar um bloco ao lado do outro, contendo o hiperlink na parte de baixo da imagem, ficando da seguinte forma:
Aplicando funcionalidades Notion
Criando uma galeria
Para criar esse tipo de Galeria, basta seguir o passo a passo a seguir.
- Digite /gallery view em qualquer linha em branco do Notion
- Selecione New Database para criar uma Database onde ficarão os seus projetos
- Clique no … ao lado do botão New da cor azul
- Selecione Layout
- Selecione a opção Gallery
- Na opção Card preview, selecione “Page cover”
- Em cada item da Database, clique em “Add Cover” e selecione uma imagem que represente o seu projeto
Detalhamento de informações
No momento de criar a Database de projetos, é interessante utilizar a funcionalidade do Notion que permite detalhar algumas informações sobre a página através de Propriedades.
- Clique em algum item da Database
- Clique no botão “Add a property”
- Selecione o tipo de informação
- Preencha o campo com alguma informação relevante sobre o projeto
Design do site
Para fazer do site algo mais agradável e com uma aparência mais pessoal, é muito importante acrescentar alguns detalhes e elementos visuais de sua escolha, com base nos fundamentos do Design. Isso envolve a adição de imagens, gifs, vídeos, cores e etc.
Utilização de imagens
Este é o momento apropriado para a utilização de todas aquelas imagens que foram separadas no início, pense em formas de fazer com que todas as imagens tenham uma mesma linguagem, que juntas possam criar uma identidade visual para o site.
É muito comum no Notion a utilização de ícones personalizados, uma vez que são bem fáceis de adicionar, basta arrastar para a página.
Indico o site Flaticon, que é um site muito conhecido para a aquisição de imagens, para que possa utilizar algumas delas em seu site.
Gosto pessoal
O gosto pessoal dentro de um site que será público pode ser muito subjetivo, portanto, é necessário tomar bastante cuidado. Dependendo do público alvo do site, é possível também saber a linguagem visual que tem muita probabilidade de os agradar, para, dessa forma, conseguir combinar as duas coisas, gosto pessoal com o gosto do público alvo. Afinal, não adianta nada criarmos um site que o público alvo vai detestar navegar.
Para isso, recomendo não tentar reinventar a roda e nem partir para algo totalmente fora do comum. É possível deixar sua identidade visual em elementos que são comuns ao público como: Tab Bar, ícones intuitivos, cores padrão e etc.
Finalização
Finalmente, agora com algo pronto e totalmente apresentável, basta alguns retoques finais para permitir uma boa experiências aos usuários que forem utilizar o site.
Endereço do site para o público
O site foi criado em uma página do Notion e ele permite que seja gerado um link público para essa página, para gerar essa página, siga o passo a passo a seguir:
- Clique no botão “Share”, que fica no canto superior direto da página;
- Vá até a opção “Share to web” e deixe esse campo marcado;
- Abaixo da opção, aparecerá um link e ao lado dele, o botão “Copy web link”, clique nele;
- Vá até o navegador de sua preferência e cole o link na barra de endereços.
Modo edição e modo visualização
Após habilitar o compartilhamento do link na web, agora se tem duas opções de visualização. Uma para apenas visualizar e outra onde é possível editar. Para a opção de edição, é necessário fazer o Login no Notion.
Portanto, não precisa se preocupar, pessoas na web não conseguem editar o seu site assim como você consegue.
Para deixar o endereço personalizado, realize os passos a seguir:
- Clique no botão da Side Bar no canto superior esquerdo (Ctrl + \);
- Clique em “Setting & members”;
- Em seguida, clique em “Settings”
- Em “Domain” escreva o nome do endereço que você deseja utilizar
OBS: Lembrando que o endereço final ficará: <nome desejado>.notion.site
Próximos passos
A partir daqui, já temos o site completo, pronto para ser utilizado e compartilhado com todos que desejar, o que vem a seguir são sugestões para aprimorar ainda mais o site e a experiência do usuário.
Site em Inglês
Uma boa melhoria a se fazer, é deixar o site internacional, criando uma versão em inglês. Para isso, basta replicar a página e fazer a tradução de todo o conteúdo. Após finalizar a tradução, habilite a página na web e copie o link. Crie um botão com um texto como “Versão em inglês” na página original e coloque-o para apontar para a página que acabou de criar em inglês.
Métricas analytics
Analytics é algo muito comum de se utilizar em qualquer tipo de site, é basicamente uma ferramenta que ficou famosa com o Google Analytics e que serve para monitorar diversos comportamentos e características de usuários em relação ao site que está sendo monitorado.
Uma segunda boa melhoria é ter um monitoramento de acesso ao site (”Quantas pessoas acessam por dia? De que lugar as pessoas acessam o meu site? e etc…”). É possível observar inúmeros comportamentos que podem de ajudar em futuras decisões a serem tomadas em relação ao seu site pessoal.
Para utilizar analytics existem algumas opções:
- Através do Notionlytics
- Utilizando o próprio Google Analytics
- Criando conexão entre Google Analytics e o Notion através do Zapier
Conclusão
Este é o tão esperado marco final deste artigo. Espero que tenha gostado e tido uma ótima experiência na elaboração de um site pessoal. Os convido a participar também da comunidade do Notion no Reddit para compartilhar o resultado do seu site e visualizar diversas ideias diferentes de pessoas ao redor do mundo que utilizam o Notion de formas, às vezes, inimagináveis!
Parabéns por ter chegado até aqui!