Meu site é feio porque fui eu que fiz
(goodinternetmagazine.com)- Alguém poderia ter deixado meu site mais bonito, mas então ele não seria meu
- A personalidade do site vem do gosto, das obsessões e do toque direto de quem o fez
- Em busca de simplicidade e proximidade, o autor minimiza CSS e JS e aplica regras de variação em CSS para criar caos, repetição e uma atmosfera de livraria
- O site foi projetado para reagir à interação do usuário só com CSS, com textura sem enfeites e mudanças inesperadas como marcas registradas
- O site continua mudando, crescendo e se transformando junto com seu dono, fazendo com que o “feio” de cada um permaneça vivo e em movimento
O site que eu fiz, e o sentido dessa feiura
- Se minha mãe quisesse colar um quadro incrível na geladeira, ela teria copiado e colado uma obra de artistas famosos como Vermeer, Lichtenstein ou Wyeth
- Mas minha mãe não queria esse tipo de arte; ela queria um desenho feito por mim
- Um designer talentoso poderia até deixar meu site bonito, mas aí ele deixaria de ser meu
- Para assar pão, algumas pessoas querem plantar o trigo, minerar o sal e cultivar o fermento; eu não sou assim
- Meu paladar pouco refinado fica satisfeito em comer um monte de breadsticks do Olive Garden
- Esse tipo de gosto vem da sensação de posse individual
- Cada pessoa, por seus próprios motivos, está montando o seu próprio espaço na internet
A existência de várias webs pessoais
- Algumas pessoas mantêm sites auto-hospedados movidos a energia solar
- Outras compartilham sua sabedoria pelo Substack
- Há quem, no YouTube, se aprofunde no chão de fábrica
- Gwern está fazendo algo peculiar
- Tudo isso nasce de uma motivação interna e de um desejo de “ninguém além de mim pode fazer isso”
- Eu não tenho motivação para fazer pão, servidores ou chips, mas esse desejo se expressa em humor, sistemas, software e estrutura
- Quando a emoção fica forte demais, ela explode em ficção, HTML/CSS, robôs toscos, músicas tristes e por aí vai
- Por isso meu site é meu
A convivência entre simplicidade e personalidade
- Antes, eu só queria simplicidade e familiaridade
- Remover ruído
- Destacar contraste
- Reduzir a profundidade dos menus
- HTML entediante
- CSS mínimo
- Evitar JS etc.
- Em 2023, meu site era assim (veja a imagem no texto original)
O design caótico, e a história do CSS
- Em certo momento, decidi usar mais espaço horizontal, e aí os problemas começaram
- O plano inicial era simples: aplicar
flex-wrapa umaul - Só que, como o texto também quebrava linha, ficava difícil distinguir cada link
- Havia quem lesse isso como inline e quem sentisse como inline-block
- Também tentei aumentar ainda mais o espaçamento, colocar bordas em cada link e enfiar pontos entre eles, mas nada me agradou
-
Então escolhi uma abordagem de variação nos links
-
O caos da homepage, na verdade, vem de algumas regras simples
li:nth-child(4n + 0) { transform: rotate(1deg); } li:nth-child(4n + 1) { transform: rotate(-0.6deg); } li:nth-child(4n + 2) { transform: rotate(0.5deg); } li:nth-child(4n + 3) { transform: rotate(-0.75deg); } li:nth-child(6n + 0) { font-family: Times; } li:nth-child(6n + 1) { font-family: Helvetica; } li:nth-child(6n + 2) { font-family: Georgia; } li:nth-child(6n + 3) { font-family: Times; } li:nth-child(6n + 4) { font-family: Arial; } li:nth-child(6n + 5) { font-family: "Trebuchet MS"; } -
Originalmente, usei inteiros coprimos para criar ainda mais variação, mas acabei gostando justamente da sutileza dos padrões repetitivos
- Eu amo o minimalismo, mas não gosto de uma sensação fria
- Para expressar uma atmosfera acolhedora, de “sebo”, acrescentei alguns elementos de surpresa em CSS
li:nth-child(5n + 2) { font-weight: 100; } li:nth-child(7n + 2) { letter-spacing: -1px; } li:nth-child(41n + 31) { transform: rotate(181deg); }
- A web continua sendo uma mídia interativa, então eu queria que ela reagisse ao movimento do cursor mesmo sem JS
- Com o CSS abaixo, criei uma sensação de “tocar a grama”
li:nth-child(2n + 0):hover { transform: rotate(-2deg); } li:nth-child(2n + 1):hover { transform: rotate(2deg); } - Assim, implementei uma resposta em tempo real ao movimento do cursor
- E, sem recorrer a scrolljacking, eu queria reforçar a sensação de rolagem, então fiz a página parecer “papel” com um fundo texturizado
- Usei css-doodle para compor a textura
svg { viewBox: .5 .5 10 10; fill: #000; circle*1000 { cx, cy: @r(10), @r(10); r: @r(.005, .01); } } - No modo claro, isso remete à poeira do papel; no modo escuro, às estrelas do céu noturno
- Em 2024, meu site mudou para isso (veja a imagem no texto original)
Eu mudo, o site muda
- Em breve, meu site vai mudar para uma aparência completamente diferente
- Porque eu sou o dono do meu site, e eu mesmo continuo mudando
- Você também vai mudar
- Sua paixão e seus valores vão se espalhar para outra coisa
- Mesmo que pareça feio, a sua criação vai continuar viva e em movimento
O autor Taylor Troesh é o prefeito de taylor.town, autor de scrapscript e alguém que aprecia coisas toscas
3 comentários
Entrei para ver e, de fato, é bem enigmático...
https://taylor.town/
Concordo profundamente com o conteúdo do texto. Eu também me esforço usando frameworks que designers criaram com muito cuidado para esconder meu péssimo senso de design, mas, ainda assim, venho seguindo firmemente até hoje.
Sempre pensando em um design melhor, há uma diversão em ir ajustando isto e aquilo enquanto crio e opero.
Acho que é graças a esse tipo de atividade que acabo criando mais apego e também sentindo mais prazer nisso. haha
Comentários do Hacker News
make), mantenho vários scripts shell para enviar arquivos para locais privados, até o favicon eu fiz em pixel art na época da faculdade (link), tentei até criar minha própria fonte mas desisti e apliquei uma fonte inspirada em Naruto, e dá para se divertir mais ainda olhando o código-fonte com a função "view-page-source". Quando olho para meu site, sinto que ele guarda os rastros do meu crescimento como engenheiro de software, então tenho muito carinho por essa obra simplesdiv, acho que já consigo começardivvirou meme Agora é só começar o blog