---

title: "caiomga.com"
date: 2024-01-22T00:30:00-03:00
tags: ['blog', 'site', 'projects', 'web design']
---
Neste post eu falo sobre o processo de design e criação da minha home page:
[caiomga.com](http://caiomga.com/)


## Introdução
Meu portifólio ficava disponível no meu domínio pessoal por questões de
praticidade. Eu não tinha a necessidade de colocar mais coisas num site dedicado
aos meus projetos simplesmente porque eu nunca tive essa preocupação de organizar
meus projetos. Uma vez que estou no processo de organizar e divulgar meus projetos,
cabe um redesign.

## Design

Pensei em criar um site com uma única página contendo meus links. Uma espécie de
linktree mais personalizável e de autoria própria. Tendo isso em mente, **fui
esboçar essa idéia no Figma**. O projeto está disponível
[AQUI](https://www.figma.com/file/HJJ2H6uTh0VvGKxYYS5ato/Caio-Amaral---Home-Page?
type=design&node-id=0%3A1&mode=design&t=rLwkwAZ28AmlnTHk-1).

Gosto de pensar nessa home como meu **cartão de visitas**, a primeira impressão que
as pessoas terão de mim e do meu trabalho. Incorporei este tema do cartão de
visitas na versão desktop do site.

Eu sempre gostei de **fontes grandes**, não sei por quê, só gosto. Atualmente
tipografias grandes (enormes) são tendência em web design, mais um motivo pra
escrever tudo grandão.

Montei um esboço com essas idéias e não é que ficou bom? Comecei pela versão de
desktop, com um card central contendo todo o texto da página. Todos os links e o
próprio título da página. A versão mobile, devido às limitações do mobile, tem
menos elementos, o que não acho ruim apesar de mudar o tom da experiência
dependendo da plataforma pela qual se acessa o site.


Eu queria **adicionar certa interatividade no site**. Cogitei criar o site com uma
quantidade gigantesca de temas e mudar os temas conforme a posição do mouse na
tela. Isso aumentaria o tamanho do site e essa interação seria inexistente na
versão mobile. Optei por criar um tema diferente para cada link e um tema escuro
que seria o tema padrão. Na versão mobile, eu teria um botão que ao ser pressionado
trocaria de tema. No fim esse botão também ficou disponível na versão desktop.

Pesquisei paletas de cores no [Coolors](https://coolors.co/palettes/trending),

escolhi algumas e as modifiquei para melhorar a legibilidade.

## Desenvolvimento

Comecei um projeto novo, apenas 3 arquivos. Utilizei fontes do Google para o

projeto que eu importo direto na página.

Comecei o site pela versão mobile por várias razões: a versão mobile tem menos
elementos, um design mais simples, e a conexão com a internet de celulares modernos
não é confiável, de modo que esperar o site todo carregar para depois aplicar o css
correto pode estragar uma experiência mobile. Uma vez que os desktops tem mais
capacidade de processamento e conexões de internet com velocidades mais altas
(geralmente), faz sentido jogar esse processamento extra pra eles.

Feito o layout, fiz a troca de temas e criei 7 temas distintos.

Durante a criação de temas eu testei a idéia de trocar não só as cores como também
as fontes. Ficou um saladão. Mexi no css para não bagunçar o layout quando eu
trocasse de fontes, mas mesmo assim o design ficou esquisito, descontraído demais.
Por fim o projeto usa apenas 2 fontes: uma para o título, e uma para o resto.
Simples.

Com os temas definidos, a troca de temas bem sucedida, resolvi alguns problemas de
interação, adicionei meu retrato ao projeto.

Deixei o projeto "dormindo" e no dia seguinte eu fiz transições suaves entre os

temas. Um comportamento não esperado é o delay que ocorre na troca de cores do meu
nome (título). Acredito que seja porque eu tenho 2 regras controlando a cor do
título, de modo que o tempo de transição acaba somando e criando um delay. Não
achei ruim, não corrigirei.

Concluído o design, subi no meu VPS, atualizei meus subdomínios e o site está no
ar!!!!

## Desktop x Mobile

A simplificação dá ares brutalistas à versão mobile. Brutalismo é outra tendência

de web design em alta. Essa discrepância entre versões é algo ruim? Num primeiro
momento eu diria que sim pois isso pode criar ruído quanto a identidade da marca. O
elemento de design central da versão de desktop, a troca de temas com base na
interação do usuário, foi mantido no mobile mas não é uma experiência tão orgânica
e é completamente ignorável. As limitações do mobile tiram um pouco da leveza do
design. :(

Entretanto, me parece impossível transmitir a mesma experiência em ambas as

plataformas (mobile e desktop). A orientação e tamanho da tela bem como o método de
interação com a página (mouse x touch) impossibilitam a criação de experiências
interessantes que tenham consistência entre plataformas. É possível criar um site
consistente, porém isso será feito em detrimento do desktop, ou do mobile. Não tem
muito o que fazer.

## Conclusão

O processo foi mais demorado do que eu esperava. A página em si não é muito

complicada, porém o processo de escolha dos temas, das fontes e da criação do site
em si tomaram algum tempo. Além disso, o processo foi bastante experimentativo, o
que exigi mais tempo.

Estou bastante satisfeito com o resultado final. [Veja com seus próprios olhos!]
(http://caiomga.com/)