Todos os leiautes que o Manual já teve

Em dez anos no ar, o site do Manual do Usuário já teve alguns leiautes. Foram menos de dez, se não me falhe a memória, o que acho um bom número.

Com a ajuda da Wayback Machine, consegui resgatar todos (?) os leiautes da nossa história. Ao menos, as versões para computadores — que são sempre mais legais, pois oferecem mais espaço para trabalhar.

Desde sempre, usei o WordPress para publicar o Manual. Alguns temas ainda estão disponíveis para baixar. Quando for o caso, darei o link.

Segue a lista, com imagens, em ordem cronológica.

Print do primeiro leiaute do Manual, com uma imagem borrada à esquerda e resumos dos posts à direita.
Foi assim que tudo começou!

O primeiro ano do site foi frenético, com quatro (!) leiautes. O site estreou com o Tabinikki, que (até onde eu sei) não existe mais.

Era um tema simples, condizente com a proposta. Olhando hoje, parece um desses temas para geradores de sites estáticos, tipo Jekyll e Hugo.

Segundo leiaute do Manual, com uma imagem grande no cabeçalho.
No início, gostava de colocar fotos aleatórias que eu mesmo tirei para ilustrar o leiaute.

O segundo, ainda em 2013/2014, foi o Widely. Acho que não existe mais também.

No primeiro aniversário do site, listei os temas usados e escrevi o seguinte do Widely:

Estaria usando ele até hoje não fosse a sua complexidade. Perdia muito tempo arrumando inconsistências no código, procurando e reportando erros aos desenvolvedores e mesmo assim sempre tinha alguma coisa errada. Uma hora cansa.

Do terceiro não tenho print, mas vale a menção porque é, de certa maneira, o mesmo que está em uso hoje, em 2023: um tema personalizado criado com base no Underscores, tema-base criado pelos desenvolvedores do próprio WordPress.

Gosto muito do Underscores. Ele dá uma base sólida, pré-blocos/Gutenberg, para desenvolver temas tradicionais, estilo blogs mesmo. Pena não ter um registro — eu não me recordo de como era esse leiaute em 2013.

Print do tema Moka no Manual, com um menu lateral à esquerda e blocos de posts no restante da página.
Moka: nada a ver.

Antes do primeiro aniversário do site, usei o único tema pago da nossa história, o Moka, do Elma Studio.

É um tema bonito, mas que evidencia o problema de se usar leiautes/temas prontos: ele tem cara de tema pronto. E é muito espaçado, o que gera uma estrutura meio confusa.

Tema Twenty Fifteen personalizado para o Manual do Usuário.
Esta imagem me traz boas lembranças de tempos mais simples (ou que assim imagino).

A experiência com o Moka me levou de volta ao básico. O próximo foi o Twenty Fifteen, tema padrão do WordPress em 2015, bastante personalizado.

Usei ele por quase três anos, salvo engano. Era (ainda é) bonito e bastante flexível.

Leiaute em coluna única, baseado no Underscores, do Manual em 2019.
Desde 2019, é meio que esse visual aí com leves variações.

Quando o Manual voltou a ser independente, no final de 2018, voltei-me ao Underscores. Desde então, a estrutura não mudou: um leiaute simples, de coluna única e estilo blog.

Mesmo tema, com uma página inicial detalhando uma “edição” (20#16) do Manual.
Durante um ano, tive a experiência de “fechar a edição” do site. Foi boa!

Só mudaram os detalhes, como em 2020, quando adotei um ritmo de publicação semanal, com edições e tudo, e adaptei o Underscores em uso.

Mesmo leiaute, Underscores, com o logo grandão do Manual do Usuário.
Esse logo foi um dos mais controversos da nossa história.

E em 2021, quando abandonei as edições semanais e criei um logo que trazia, depois de muito tempo, o nome do site de volta ao cabeçalho. (Pensando hoje, foi uma loucura deixá-lo tantos anos sem o nome lá em cima, só com um logo que não diz nada.)

Tema Twenty Nineteen personalizado para o Manual do Usuário.
Ficava tudo meio grandão, mas ainda hoje gosto desse visual.

Em 2022, tentei usar o Twenty Nineteen, tema padrão do WordPress em 2019, saudoso de uma base mais moderna e de ter menos trabalho de manutenção.

Gostei do resultado, mas senti falta do controle e de deixar o site extremamente enxuto. O que me levou… de volta ao Underscores. Vivemos um relacionamento duradouro, repleto de idas e vindas.

Tema atual do Manual, ainda baseado no Underscores.
Fala a verdade: é bonito, né?

Em vez de reaproveitar leiautes antigos, fiz um novo, adotando técnicas mais modernas de estilos, como flexboxes e variáveis no CSS. (Essas coisas facilitam um bocado.)

Esse último trabalho é o que você vê aqui. Foi nessa mudança que retrabalhei o logo do site para tornar o nome “Manual do Usuário” parte dele.

Gosto bastante do que temos hoje. Algumas áreas podem ser simplificadas e a tipografia merece um pouco de carinho, mas são detalhes.

A newsletter do Manual. Gratuita. Cancele quando quiser:

Quais edições extras deseja receber?


Siga no Bluesky, Mastodon e Telegram. Inscreva-se nas notificações push e no Feed RSS.

9 comentários

  1. O de 2019 foi um dos que me veio a lembrança assim que vi. É um dos mais bonitos, mas o pós moka ainda ganha.

  2. o MdU é sempre uma referência de leiautes limpos, sucintos, ágeis e diretos

    ainda gosto mais do leiaute de 2015, mas entendo a versatilidade da coluna única

    fica a dúvida: qual foi a controvérsia com o logotipo de 2021 (as proporções estavam mal resolvidas, mas fora isso qual o problema)

    dito isso: ainda sou o chato dos logotipos, a atual marca me incomoda, mas é porque sou ranzinza mesmo :)

    1. Essa versão recebia menos comentários negativos. Quem reclamava, dizia que era muito grande.

      A primeira (não tenho registro) trazia um “corte” na parte de cima da janela, mais ou menos como o (finado) Gawker fez depois. Muita gente achou que estava errado/com problema de renderização.

      O que lhe incomoda na marca atual? Sou todo ouvidos.

      1. então, é pura chatice minha mesmo, mas meu incômodo está em dois pontos:

        • acho que a assinatura “manual do usuário” briga com o símbolo (o quadro com os três riscos). Acho que o tamanho dos elementos não está equilibrado e o fato da fonte ser serifada faz com que ela chame muita atenção, tornando o símbolo quase que só um apoio para o texto e não um conjunto integrado. (e esse símbolo é muito bonito e já faz parte da memória visual do MdU!) É um pouco como se essa assinatura estivesse passando por cima do símbolo.

        • Aí tem também meu TOC com os alinhamentos :) https://imgur.com/a/R6uh6Wl

  3. O Manual do Usuário tem o melhor layout da internet, pois é leve e muito simples. Nada de rastreadores das big techs, sem pop-ups saltando na tela, sem anúncios que atrapalham a leitura, etc.
    Está de parabéns!

  4. Gosto bastante do layout do Manual, é tão simples mas eficaz e confortável. Se eu fosse fazer um blog ou site pessoal, iria querer passar esse tipo de “vibe”.

  5. Que saudosa viagem por esses layouts, gostei muito, valeu pelo trabalho.
    Ah, só uma coisa, o parte de “Inscreva-se na newsletter:”, fica quebrada no mobile.

    Meus parabéns pelos 10 anos.

  6. A logo controversa foi a que mais gostei. O nome grandão do Manual se impõe sobre tudo.