O novo leiaute do Manual do Usuário
Fiquei aterrorizado com a história deste cara: o redesenho do seu site, de três páginas, levou oito meses e consumiu US$ 46 mil. Felizmente, o do Manual do Usuário levou bem menos tempo (duas semanas) e só custou algumas horas do meu tempo.
Bem-vindo(a) ao novo visual do Manual! É diferente, mas não muito. O que mais chama a atenção é a disposição do cabeçalho, os blocos de posts mais populares e últimos podcasts lá embaixo e o tamanho da fonte dos posts. Ah, sim: posts especiais (aqueles longos) ganharam um cabeçalho bonitão (exemplo). E… bem, é isso.
Não estava nos meus planos uma troca de leiaute agora. Quando migramos de hospedagem, subimos um “staging” (uma cópia idêntica do site para testes) e dei uma olhada nos temas padrões do WordPress. Uma coisa leva a outra e, quando me dei conta, estava personalizando o Twenty Nineteen.
O antigo leiaute tinha sido feito em cima do _underscore, uma base bem mais crua para o desenvolvimento de temas para WordPress. Funcionava bem, eu gostava muito dele, mas sempre senti falta de uma maior padronização em elementos de interface, como botões e formulários.
Essa padronização foi o principal fator que me levou a considerar o Twenty Nineteen como nova cara do site. E aqui estamos.
Testei exaustivamente o novo leiaute, com a ajuda de leitores mais próximos, então não acredito que exista algo muito grave quebrado. Se encontrar qualquer coisa fora do lugar, avise-me — ali nos comentários ou por e-mail.
O leiaute anterior estava com a gente desde 2019. Antes dele, usamos por quase quatro anos uma versão modificada do Twenty Fifteen — o leiaute mais duradouro até aqui.
Um registro para a posteridade do leiaute anterior:
Me agradou, achei melhor. Minha única ressalva é o tamanho das fontes de um modo geral, que achei muito grande. Mas é um incômodo meu bem fácil de resolver, basta eu dar um zoom out. Parabéns pela busca pela simplicidade, funcionalidade e padronização.
Votos: 0Como contraponto, eu adorei o tamanho maior das fontes 😅
Votos: 0Também gostei desse tamanho maior.
O que estranhei relacionado a fonte é o estilo diferente (_typeface_ e espaçamento entre linhas, por exemplo) nos formulários.
Votos: 0Corrigi a fonte e o espaçamento entrelinhas dos formulários, Danilo. Valeu pelo toque!
Votos: 0Muuuuuuito bom! Gostei do novo leiaute, mais simples e funcional.
Votos: 0“Era um bom leiaute.” 🥲
Votos: 0ta muito bom!
Votos: 0só uma contribuição:
O campo de seleção à pergunta “Receber novos comentários por e-mail?“ ficou maior do que a tela (pelo menos a do meu celular – iphoneSE2020, safari , 100%, modo escuro).
E os campos de formulário nos comentários (Comentário e Nome) ficaram brancos no modo escuro, oq ficou meio desagradável. Detalhe que o campo do “E-mail”, ao contrário dos outros, acompanhou a escuridão do modo escuro.
Tenho as mesmas observações a respeito do novo leiaute. Essa diferença na cor dos campos de comentário, nome e e-mail, bem como no tamanho do texto “Receber novos comentários por e-mail?“, gerou uma certa “quebra” visual a meu ver.
Votos: 0Fora isso, ficou muito bom o redesign!
Boas observações, Unnicked e William. Arrumei tudo — talvez demore um pouco para mudar aí por causa do cache.
Votos: 0Muito legal. No geral gostei.
Só senti falta daquele botão de minimizar (?) um fio de comentários. Era bem útil no post livre.
Votos: 0faço o endosso do mesmo.
Votos: 0Opa Ghedin! Ficou excelente! Para duas semanas de trabalho e menos que R$ 46 mil, um trabalho formidável!
Votos: 0Tinha te falado sobre as fotos escurecidas e vejo que no novo layout, em modo escuro no iPadOS, elas aparecem normais, sem opacidade – o que realmente acho melhor.
Do novo layout, minha sugestão é adaptar a cor da fonte de texto para causar menos contraste com o fundo. Adotaria um texto grafite escuro no fundo claro e um cinza bem claro no fundo escuro. A diferença é sutil, mas, na prática, os blocos de textos com esse contraste atenuado fica mais leve no geral que o preto 100% no branco e vice-versa.
Valeu, Ivan!
O modo escuro foi pouco testado, ainda tem várias coisas pendentes. Dei uma amenizada na cor da fonte — deixei a mesma que estava no leiaute anterior. Talvez demore um pouco para mudar aí. Sugiro testar no modo anônimo ou limpar o cache do domínio
Votos: 0manualdousuario.netpara acelerar as alterações.Atualizado aqui!
Votos: 0Ficou ótimo!
Em tempo: a caixa de comentários escura – que alguém já tinha sugerido escurecer – também ficou perfeita!
Vida longa ao leiaute atual (que também é bom!) rsrs
O que mais estranhei é o texto à esquerda neste novo leiaute, mas está realmente muito mais moderno – lembrando-me um pouco até o MacMagazine – e a cor da seleção de texto (?) no modo escuro que ofusca o texto selecionado (provavelmente há um termo técnico que eu desconheço para tal). De resto, ficou excelente e extremamente agradável! Parabéns!
Aliás, há alguma chance de “open-sourcezizar” o leiaute anterior? 🥲 Adorava a simplicidade e centralização do leiaute anterior, e já tentei procurar outros temas parecidos para um futuro projeto pessoal, mas meu conhecimento zero em CSS e HTML dificultam esta aventura.
Votos: 0O tema anterior está disponível no GitHub. Meio desatualizado, mas é ele.
Votos: 0Vou postar aqui os comentários que fiz no Post Livre, com uma modificação que percebi agora:
Eu tenho o hábito de ler selecionando o texto as vezes e notei que aqui*, quando faço isso, fica um fundo azul claro com letra branca, impossível de ler.
*aqui = desktop, chrome, modo escuro. Testei no Firefox e é igual. Acredito que seja alguma configuração de css.
Enquanto de início eu achei estranho agora o site ocupar boa parte da tela (ainda mais em tela ultrawide, fica particularmente largo o site), gostei bastante da nova caixa de escrever o comentário, não sei se a fonte está diferente, com tamanho diferente, mas achei mais interessante, até! Notei, ainda que o que ocupa boa parte da tela é o texto dos comentários, não do artigo em si. Não sei se é proposital, mas não me incomoda, particularmente.
O tamanho maior e o fato das linhas verticais não serem contínuas é questão de costume!!
Achei engraçado como ficou em tela cheia esse artigo!
Votos: 0Eu gelei quando comecei a ler “Parabéns, você…” em letras gigantes na minha tela, achando que tinha sido invadido ou algo do tipo! 🤣
Valeu pelo feedback, Felipe!
A seleção de textos no modo escuro estava zoada mesmo. Fiz uma mudança no CSS, vamos ver se resolve. (Talvez demore um pouco para aparecer aí, devido ao cache.)
A largura dos comentários não era proposital, hehe. Arrumei para que cada comentário fique com a mesma largura dos posts.
Votos: 0Ficou bem agradável a largura dos comentários agora, considerando que algumas janelas uso metade da tela ultrawide. Ficou sem muito espaço vazio na direita.
O CSS realmente ainda não atualizou aqui.
Outro detalhe que estava notando aqui enquanto redigia essa resposta: O botão “Publicar comentário” é azul com letra branca. Será que esse fundo azul não deveria ser uma cor mais dentro da “paleta de cores” que você definiu para o site? De azul aqui só noto os links. Todos os outros fundos são ou preto ou grafite (essa, inclusive, é a cor que aparece aqui quando passo o cursor do mouse por cima do botão).
Outro ponto a se pensar: ali na barra superior, todas as seções tem seus links nos nomes por extenso (apoie, newsletter, seções…), exceto a busca, que é um ícone. Será que não ficaria mais interessante manter tudo como texto? Ou até usar um daqueles ícones minimalistas, para combinar com o logo do MdU mesmo.
Bem, desculpe se estou já caçando pelo em ovo 🤣
Votos: 0Em ultrawide, imagino que qualquer alinhamento deixará espaços vazios em algum lugar 😄 O leiaute é alinhado à esquerda mesmo; minha sugestão é diminuir um pouco o tamanho da janela do navegador.
A cor do botão segue a dos links, é a cor de realce. É como alguns sistemas operacionais modernos, como macOS e Ubuntu, trabalham, e pessoalmente acho legal. É quase uma identificação de “coisas interativas”, sejam links, sejam botões.
Trocar o emoji da lupa por um ícone pode funcionar!
Votos: 0Aqui ainda não mudou o CSS para a seleção de textos. Até tentei recarregar o cache usando o modo de desenvolvedor, mas não funcionou. Será que deu zebra em alguma coisa?
Percebi também um outro problema no contraste de algumas caixas que tem fundo amarelo, como essa e essa. Acho que só fazer o cinza da fonte ficar mais escuro já resolveria.
Votos: 0Cara, textos longos com um cabeçalho caprichado ficam muito muito atraentes!
Votos: 0Muito bom, tudo parece muito promissor e já causou um efeito positivo na leitura! Parabéns pelo esforço Ghedin. Era sempre o q eu pedia quando chegava no meu e-mail aquelas pesquisas de opinião sobre o Manual. As imagens nos cabeçalhos ficaram legais e causam uma ótima impressão!
Votos: 0Gostei muito do novo leiaute!
Ainda não testei em outras telas/dispositivos além do móvel (iPhone SE) então virei outra hora pra dizer com mais detalhes, mas pelo menos até então estou plenamente satisfeita com o novo espaçamento lateral e com a seção de comentários – que melhorou muito.
Parabéns, Ghedin!
Votos: 0Alinhar à esquerda é intencional? Por que não centralizado?
Votos: 0Eu ainda não tinha aberto o MdU no computador e agora sim vi o impacto as mudanças no leiaute. Na minha opinião foram positivas, pena que as melhorias de tipografia quase não se notam nas telas do celular e tablet.
Votos: 0