Fusion: o tema 2008 do blog

06 Dez, 14:32     Webdesign

Ah, como o fator beleza é mutável, não? Quando finalizei o tema anterior deste blog, o Simple Grey, tinha ficado maravilhado. Tema bonito, clean, do jeito que eu queria. Passados exatos seis meses desde então, lancei hoje o novo tema do blog, o qual batizei de Fusion.

Antes que alguém lenvate a hipótese, não tem nada a ver com o carrão-banheira da Ford. Escolhi este nome em virtude das cores do tema. Azul e cinza. A primeira foi utilizada em dois ou três temas antigos daqui, e a segunda, no último. Como este junta as duas, daí o nome. Nada muito importante por agora, mas se algum dia fizer o mesmo que fiz com o Simple Grey, ou seja, distribuí-lo, o nome está escolhido.

O tema tem mais “sustância” que o anterior. Aquele era um tanto vazio, com branco chapante de fundo. Como diz um amigo, dava para usar o site como lâmpada durante a noite. No Fusion, dediquei boa parte do desenvolvimento na harmonização das cores, de modo a deixá-las bem orquestradas e, o mais importante, agradáveis à vista. Uma coisa que quero fazer a partir de agora é documentar o desenvolvimento através de screenshots. Da idéia que surgiu em minha cabeça há alguns dias, até o resultado final que você vê agora, foram várias versões, testes e descartes. Seria legal uma galeria mostrando essa evolução.

Troquei a fonte. Deixei de lado a Lucida Grande (que eu realmente não sei se vem na instalação padrão do Windows), e adotei a batida Arial. Acho-a mais suave e confortável para leitura, mesmo neste tamanho pequeno. O espaçamento entre as linhas, como sempre, está numa medida boa, e tudo conspira para o texto, de modo a deixá-lo melhor para ser lido.

A barra lateral possui algunas features legais. A imagem no topo eu pretendo mudar vez ou outra, ou então criar um sistema rotativo que a mude a cada atualização da página. Ainda não decidi. inicialmente, queria fazê-la dinâmica: a cada área do blog acessada, uma imagem relacionada apareceria. Consegui isso em parte: clicando em qualquer categoria, ou nos arquivos, ou ainda fazendo uma pesquisa, a imagem muda. Só faltou, mesmo, torná-la dinâmica nas páginas dos posts. Testei algumas soluções que conhecia, mas não teve jeito mesmo…

Ainda na barra lateral, dei uma enxugada boa nela. Concentrei muitos itens no box Informações e contato, adicionei figuras na Cultura (in)útil, e diminui a quantidade de curtas, de três para uma. Essas ações resultaram numa coluna mais enxuta, colaborando para a harmonia do layout. Falta, ainda, acrescentar o campo de busca ali.

Uma parte deste tema que eu particularmente gostei foi a dos comentários. Para mim, desenvolver o layout dos comentários sempre é o mais difícil na hora de fazer um tema. Desta vez não foi diferente, mas ao contrário da maioria, cheguei a um resultado satisfatório. As mesmas informações que existiam no tema anterior estão presentes aqui, mas os dados dos comentaristas foram destacados, e o número do comentário, efeito este conseguido graças a este tutorial do Léo Baiano, preencheu o espaço de maneira soberba.

Apesar de faltar alguns detalhes, que serão corrigidos e/ou implementados em breve, acredito que o tema já está num nível utilizável. Afinal, se não estivesse assim, não o teria publicado ainda. Desculpem ter criado expectativa, e obrigado pela constante e agradável atenção dispensada.

Dúvidas, críticas ou sugestões são muito bem-vindas no espaço para comentários.

Posts Aleatórios

26 Comentários

Envie um comentário


  1. Leo Baiano
    06 Dez, às 15:11

    Gostei deste tema, só sente falta de links apontando para outros artigos nas páginas single, acho que uma relação dos últimos posts na sidebar resolveria o problema… poderia colocar artigos relacionados também.

    Ficou muito bom o estilo que você meteu lá na numeração dos comentários, eu queria ser bom com design…


  2. Felipe Diesel
    06 Dez, às 15:33

    Ficou legal o tema. Bem simples…

    Um erro que percebi: Os campos do comentário estão estourando por causa do “padding”, diminui um pouco a comprimento deles.


  3. Rodrigo P. Ghedin
    06 Dez, às 16:11

    @ Léo Baiano

    Léo, adicionei links para o post anterior e seguinte abaixo das informações do atual (abaixo da imagem do topo da sidebar). Obrigado pela sugestão, e também pela dica da numeração dos comentários!

    @ Felipe Diesel

    Ah, Firefox e IE… No Opera não há esse erro :). Anyway, corrigi o problema, e agora está ok em todos navegadores.

    []’s!


  4. Elemento_CM
    06 Dez, às 17:45

    Opa! Ficou legal, parabéns!

    Só algumas bobagens que gostaria de dizer:

    -Nos comentários, mais especificamente nos campos Nome/E-mail/Site, eles estão enormes, caberia duas linhas em cada campo. :P

    -Ainda nos comentários: “Site/blog (este não é obrigatório :)” Isso era para ser um emoticon mesmo?

    -Os links clicados ficam roxo, e a essa cor não combina com o tema. Sei que dá para mudar isso no navegador, mas se der para alterar isso no tema, fica ai a sugestão.

    -E em “del.icio.us” tem uns caracteres estranhos.


  5. Henrique
    06 Dez, às 19:28

    Olá Ghedin,

    Gostei muito de seu tema, e gostaria de saber se ele vai ser disponibilizado para publico que nem o outro.


  6. Luiz Henrique Pinho
    06 Dez, às 20:15

    Mais uma vez vou dar o meu pitaco: o Simple Gray era melhor.

    Apesar de, por exemplo, ter gostado das figuras se alternando de acordo com as seções, acho que o “azul orkut” e o cinza não combinaram bem e a estrutura do site (barra lateral, cabeçalho, conteúdo e rodapé) não estão se “integrando”, tudo meio retangular.

    O mais importante para um blog é que seja legível e isso com certeza o Fusion está cumprindo. Estou questionando o layout, que é algo que pode ser subjetivo e pessoal.

    []’s!


  7. Elemento_CM
    06 Dez, às 21:33

    Uma coisa que notei: Ficou um estilo meio Mac OS X Leopard. :P

    Certo?


  8. Fernando Furmann
    06 Dez, às 22:42

    Pensei que o Fusion significava a fusão do orkut com o Simple Gray :)
    Achei este tema um pouco mais ousado e bem mais criativo que o Simple Gray que por sua vez era bem melhor que o anterior, na minha opinião, você esta sempre evoluindo. Eu coleciono screenshots dos layouts que me agradam eu seleciono julgando a estrutura, combinação de cores, tipografia, e desde este aqui bem antigão nenhum layout seu foi para a coleção mas o Fusion vai porque eu gostei da screenshot do jogo.
    Resumindo, gostei das imagens no Cultura (in)útil, como era naquela antigo tema do link acima, a sidebar toda eu gostei muito, achei legal o detalhe azul do lado direito da página me lembrou o finado If..Else Log, acho que você não conheceu mas era um ótimo blog. Os pontos negativos são o logo, muito sem vida poderia ter arriscado um pouco mais e o footer fundido com a sidebar, talvez mais um motivo para o nome Fusion :)


  9. Fernando Furmann
    06 Dez, às 22:48

    Ha! esqueci de falar que a imagem da categoria “Eu e as mulheres” é muito boa em todos os sentidos e a da categoria “Eu e eu mesmo” você parece um deputado pedindo voto :)
    A da pesquisa não consegui ver porque o link esta quebrado.


  10. Lali
    07 Dez, às 10:36

    Rodrigo, eu gosto bastante do Simple Grey aliás quero colocá-lo no meu blog!
    O fusion ficou ótimo e combina muito com você! Ficou a sua cara.
    Eu acho que a imagem no topo deveria mudar a cada atualização, esse sistema de rotação é o maximo, lembro quando visitei seu blog pela primeira vez e fiquei atualziando pra ver as frases mudando.. huahuahuahua :D

    Beijos!


  11. Rodrigo P. Ghedin
    07 Dez, às 11:44

    @ Elemento_CM

    Vamos lá:

    • Essa é a idéia :) ;
    • Sim, era para ser um emoticon mesmo;
    • Quis deixar bem claro quais os links visitados. O padrão do HTML é link novo azul, e visitado roxo. Fiz uma variação mais suave dessas cores;
    • Problema de codificação do plugin. Um dia eu descubro como arrumar essa nhaca.

    @ Henrique

    Por enquanto, não. Daqui a alguns meses provavelmente o disponibilizarei para download. Será meio complicado em virtude de alguns detalhes (como a imagem semi-dinâmica no header, e alguns boxes da sidebar), mas acredito que dará para fazê-lo funcional na maioria dos blogs.

    @ Luiz Henrique Pinho

    Infelizmente, não dá para agradar a todos… :) . É o risco do designer, e não há como escapar dele.

    @ Elemento_CM

    Haha, sei lá, não consigo ver muita semelhança com o Mac OS X :P .

    @ Fernando Furmann

    Poxa, aquele tema antigo do blog é um dos que eu mais gostei (e usei; foi cerca de um ano). O logo fiz de maneira simples, mas sempre há tempo para mudanças. Estou pensando em algo já.

    Ah sim: fico lisonjeado pelo fato do meu tema entrar na sua coleção :) .

    @ Lali

    Sinta-se à vontade para usar o Simple Grey, Lali.

    Pelo jeito, terei que fazer o esquema de rotação por ali mesmo… Só falta criar coragem para fazê-lo :P .

    []’s!


  12. Pepe
    07 Dez, às 12:13

    Caramba, já tava achando estranho você passar mais de três dias com o mesmo tema…

    Brincadeira!!


  13. FMatt
    07 Dez, às 13:57

    Ficou mto bom! Mais vivo que o anterior ehehhe

    []s


  14. Lali
    07 Dez, às 15:03

    Wow Esse Fusion me deu sorte! Meu gravatar até funcionou nele :O

    Beijos


  15. Cleber Luiz
    07 Dez, às 18:30

    Parabéns Rodrigo, belo trabalho. Ficou bem leve e interessante o tema.


  16. Nelson
    07 Dez, às 19:00

    Bom… gostei mais do anterior, principalmente pela fonte. Tanto no Guia como aqui no blog, não gostei do Arial, hah…

    Porém, as sugestões: no campo comentários, as “duas linhas” já citadas não tanto me incomodaram, mas um detalhe é de ser observado: a fonte utilizada nos campos ‘Nome’, ‘e(aliás, letra minúscula aqui…?)-mail’ e ‘Site/blog’ são diferentes do em ‘Comentário’.

    Além, acho que o rodapé poderia ter uma cor diferente de azul… que tal o mesmo cinza do topo?


  17. Elemento_CM
    07 Dez, às 22:00

    Outra coisa que esqueci de dizer é que só faltou um ícone para o blog ficar completo.

    E uma imagem do Leopard:
    http://images.appleinsider.com/leopard-launch-gal-5.png

    Seja intencional ou não, note que parece um pouco com ele sim. :P


  18. Thássius
    08 Dez, às 17:54

    Ficou bastante bonito. A título de informação, a Lucida Grande não acompanha o Windows. Só o sistema da Apple.


  19. Tiago Celestino
    09 Dez, às 11:39

    Bem legal o novo tema. Diferente por sinal. :D


  20. Heri Cristine Nakamura
    09 Dez, às 18:01

    Pela primeira vez que vi o tema 2008 do blog achei simplesmente horrível, “aquela coisa meio pronta”. Hoje, mais acostumada com o tema julgo que não é tão feito. As imagens no lado esquerdo do tema ficaram boas, com exceção da categoria “passeios e viagens”.

    Beijos!


  21. Rafael
    10 Dez, às 13:21

    Hm.
    Legal o tema ghedin.Me lembrou o visual do office 2007. :)


  22. Rafael
    10 Dez, às 13:26

    @Lali

    hahahhaha eu também fiquei atualizado a página para ver as frases. :lol:


  23. kadu
    13 Dez, às 19:01

    Ah, como o fator beleza é mutável, não?

    Excelente frase, nunca tinha parado para pensar nisso :)

    Apesar de eu estar atrasado, o tema ficou muito bom! Gostei do cuidado que você teve com as cores, o equilíbrio está ótimo.

    Uma ressalva, quando você está entre vários comentários, fica meio difícil identificar o autor do mesmo, você não sabe se o autor é o nome de cima ou de baixo do comentário. Como ninguém comentou isso, talvez seja coisa minha mesmo =/

    O restante está muito bem resolvido!
    []


  24. William
    14 Dez, às 21:08

    O tema tá bem legal! Mas não gostei muito do tom de azul usado na barra lateral, poderia ser branca com a sombra azul, igual o lado direito.

  25. [...] no qual já estava trabalhando, e integrá-lo ao blog. A aparência lembrava bastante o Fusion, e este fator foi levado em conta na tomada desta decisão. Três dias depois, o tema estava pronto [...]

  26. [...] volta ao bom e velho Fusion (tema do blog). Uma mudança aqui, uma adatação ali, e ele está novo de novo. Na minha opinião, [...]

Comente

XHTML: Você pode usar as seguintes tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>