Novo Layout

 

Olá, amigoos! Passei as últimas horas organizando esse layout novíiiissimo em folha (e que me orgulho demais!), e gostaria de falar sobre ele enquanto as informações ainda estão fresquinhas na minha cabeça. O último layout que fiz e gostei tanto desse jeito, provavelmente foi esse aqui. Todos os posteriores eu achei ok e usáveis. Há vários elementos que eu uso por padrão, mas a maioria beeem modificado. Quando se trata de layouts, reutilizar é um ganho de tempo astronômico.

Parte 01: O conceito

A imagem que me fez querer criar um layout novo foi essa. A partir daí comecei a pesquisar referências na linha cyberpunk, que a wikipédia define como um subgênero da ficção científica em um cenário futurista distópico que se concentra em uma combinação de "baixa vida e alta tecnologia". Ele apresenta conquistas tecnológicas e científicas futuristas, como inteligência artificial e cyberware , justapostas ao colapso social, distopia ou decadência. Com isso em mente, comecei a delinear o projeto. O design principal veio da junção da ideia dessa imagem + o fato de eu querer trazer gadgets laterais, para dar uma diferenciada do anterior e me dar mais liberdade para socar o que quiser na página inicial.

Uma coisa interessante é que depois dele tomar forma e eu já ter definido a paleta de cores e aplicado alguns detalhes, me lembrou muito da estética de Tron: Legacy, por causa da cor majoritária ser preto e ter esse abuso do azul neon. 

E esse filme foi um marco pra mim. Fiquei obcecada na época que assisti no cinema.

Parte 02: Background, cores e fontes

A primeira coisa que eu defini foram as cores. De início, minha intenção era usar essa imagem como background, mas para fazer isso funcionar de um jeito estético e agradável eu precisaria utilizar o estilo antigo de layout, e já tinha certeza de que não minha vontade no momento. Então, extraí o tom azul e rosa que eu queria com o seletor de cores e foquei na ideia de deixar o título do blog grandão e carregar no azul de um jeito absurdo.

Nesse ponto, eu já imaginava que um background preto seria a escolha ideal, e simplesmente testei algumas opções do ava7patterns, que é um site que venho usando há bastante tempo. Esse que escolhi foi amor ao primeiro teste. Com esse elemento decidido, foi a hora de decidir pela fonte principal. Eu literalmente pesquisei por fonte cyberpunk, e testei duas ou três recomendadas pelo Google Fonts. Não foi difícil escolher essa opção aí, assim como a segunda também caiu como uma luva.

Parte 03: Menus, gadgets e post header

Os dois menus foram reutilizados. O principal foi remodelado para uma versão que não se move, apenas transita a cor. E o segundo (de tag's), mudei apenas as cores. Uma coisa importante que defini desde o início foi o fato de que queria tudo bem quadrado. Desde títulos, menus, gadgets, tudo que tinha qualquer estilo radius foi modificado. E gostei de como esse detalhe foi determinante para o efeito final da composição.

Os gadgets foi a parte mais fácil. Apenas clonei a área de postagem e espelhei a parte do título. Decidi alinhar minha header da postagem à direita porque sempre a deixo centralizada. Removi o postado por, porque como sou a única pessoa à postar no meu blog, não vi necessidade de ter algo assim ocupando espaço. E deixei a data alinhada com o título e o link dos comentários e as tag's. So easy. O efeito do título da postagem continua deslizando ao passar o mouse, mas dessa vez vai para a direção contrária.

Parte 04: Outras estilizações

Como em qualquer outro tipo de design: os detalhes fazem a maior diferença. Um elemento que mudou totalmente a experiência visual foi a sombra neon atrás da área de postagem e da sidebar. Inclusive, se der algum desconforto em vocês, me avisem, por favor. Sei que talvez pode trazer esse tipo de sensibilidade para algumas pessoas. Além disso, foi estilizado: Sombra no título do blog, barra de rolagem, borda nas imagens dos posts, blockquote, negrito/itálico/sublinhado/tachado, letra capitular na postagem, fundo da área dos comentários e links de navegação (que foi a parte menos aesthetic do projeto).

Parte 05: Vibes

Enjoy!!

See you next time.