02
setembro
2013

Novo Blog!

Depois de uns quatro meses projetando a nova identidade visual, planejando e fazendo o blog, o Novo Magel Studio saiu. E como não dá para se dividir em 3, o jeito foi dar prioridade neste projeto, por isso os posts por aqui acabaram ficando em segundo plano. Mas vocês vão ver que foi por um bom motivo. 😉

Mais espaçoso

Mais espaço para imagens grandes, coisa que eu sempre gostei muito de explorar por aqui, mas que antes não conseguia fazer da melhor forma devido ao tipo de template que o Magel tinha. Agora o layout se adapta de acordo com o tamanho do monitor, ou seja, a imagem pode aparecer pequena ainda se a resolução do seu monitor for menor que 1300 pixels de largura.

novo-magel-imagens

O header ficou maior, dando uma prioridade visual maior que a versão anterior.

novo-magel-header

Mais organizado

As categorias agora estão em um menu na horizontal, proporcionando uma visualização rápida dos principais assuntos do blog. Já a navegação por Tags auxilia a busca por assuntos diversos.

novo-magel-categorias

Além dos assuntos relacionados que aparecem no fim de cada post (recurso já utilizado na versão anterior), no rodapé o blog dá até três sugestões de posts sobre assuntos que você também pode se interessar.

novo-magel-sugestoes

Fazer uma busca ou procurar por posts antigos também ficou mais amigável. Eliminei o antigo e antipático menu select por mês e criei um modo melhor e visual para buscar os posts por ano. Dá uma olhada!

novo-magel-arquivo

No final de cada post foi criado um botão com os rótulos dos nomes do próximo post e do anterior, facilitando o entendimento do que vem antes e o que vem depois.

novo-magel-prox-ant

Mais legível

Os textos ficaram maiores, mais legíveis e mais confortável para ler. Os títulos também ficaram maiores, conversando melhor com a tipografia aplicada na nova identidade.

Mais dinâmico

O header agora mostra uma imagem randômica a cada atualização de página, disponibilizando um link para o post da imagem em questão.

novo-magel-header-randon

O layout também se adapta de acordo com o tamanho do seu monitor, trabalhando então com um comportamento para resolução de 1024 até 1300 pixels de largura e outro para monitores com resoluções maiores que 1300 pixels.

novo-magel-responsive

E para quem acessar o blog via celular, continuará com a mesma visualização já implantada anteriormente.

Para adicionar uma imagem específica no Pinterest, basta passar o mouse em cima dela e clicar no botão “Pin it” que aparecerá no canto superior esquerdo da imagem (Passe o mouse sobre a imagem abaixo):

novo-magel-pin-it

Mais bonito

Foi criada uma nova identidade para o blog, seguindo as cores do logotipo, explorando o amarelo e o marrom, cores marcantes do Magel Studio. Efeitos sutis, como fade in e fade out em cada elemento de clique também ajudou a dar um acabamento legal nas interações do blog.

Também foi feito um Style Guide para que o desenvolvimento seguisse as cores e as regras de mouse over de cada elemento padrão do blog.

 

novo-magel-stileguide

O layout foi feito por mim e programado com maestria pelo Marcelo Gorzoni.

 

 

Veja todos os posts sobre: