Repaginação de site, ou redesign: Novo site responsivo

Casa de ferreiro, espeto de pau? Aqui não! Eu trabalho com criação e desenvolvimento de sites, então ter um site responsivo é obrigação. Confira o processo do trabalho!

  • Facebook
  • Twitter
  • Whatsapp

Já comentei sobre a evolução do meu logo, mas nunca cheguei a comentar sobre a evolução do meu site, que sempre foi um laboratório pra mim. Por exemplo, foi o primeiro site responsivo que fiz. Sempre que surge alguma coisa (relativamente) nova, eu costumo utilizar meu site de cobaia. Nada mais justo, já que esse é meu trabalho.

Atualmente meu site está em sua versão 5 – ao todo foram 6 designs diferentes.

Vamos manter contato?

Assine a newsletter do blog preenchendo o formulário!
Se precisar de algo, solicite um orçamento. É sem compromisso!
Se não quiser nada disso, sem problemas! Continue lendo o post abaixo :D

Mas nem sempre mudar tanto assim a versão de um site é necessário ou recomendado — meu caso é diferente, mas nem por isso significa que você deve ter sempre o mesmo design de site sempre.

Por que repaginar um site?

Redesign de um site é importante em dois casos:

  1. Novas tecnologias: Por exemplo, antigamente ninguém se preocupava com a resolução do site… mas hoje em dia a maior parte de acessos à internet é feito através de smartphones. E aí, como fica seu site?
    Além disso, podemos citar AMP, atualizações do código fonte ou até mesmo alterações de sistemas da empresa.
  2. Evolução da empresa: Um exemplo básico é quando a empresa é lançada prestando apenas um tipo de serviço e, depois de um tempo, expande e passa a prestar outros serviços. Às vezes, só atualizar o site para adicionar mais áreas e páginas não é o suficiente, sendo necessária uma repaginação do design.
    Outro exemplo é quando a empresa faz uma alteração no logo e/ou identidade visual, ou então absorve outra empresa.

Ainda que seja importante manter seu site atual, não é recomendado que as alterações sejam constantes (por exemplo, todo ano um site novo — isso não faz sentido!) nem muito bruscas (você vai ver abaixo, no meu exemplo, que a partir do momento que crio uma identidade visual o site sempre segue uma base parecida).

A repaginação do meu site: de freelancer a empreendedor

Tudo começou quando eu precisava de um portfolio online para apresentar meus trabalhos e, assim, fazer freelas.

Se você ver bem, meu logo também mudou — falo mais sobre isso no link. É bom reforçar uma diferença básica aqui: as alterações do meu logo, conforme conto no link, tiveram a ver com minha evolução profissional. O site também acompanha isso, claro, mas acaba tendo mais versões que o logo por estar sempre “atual” em relação às novas tecnologias.

As versões antigas

Primeira versão: apresentação básica

site 1

2010: Clean e direto ao ponto

Com design clean e poucas informações, já que meu portfolio tinha poucos trabalhos, a primeira versão do site surgiu quando eu tive segurança o bastante para começar a trabalhar com criação e desenvolvimento de sites, mesmo já tendo feito trabalhos na área antes — foram projetos experimentais, e dessa vez eu estava em busca de me profissionalizar de vez.

Segunda versão: site profissional

site 2

2011: Site responsivo? Ainda não… ainda!

Com o lançamento do iPad, começou uma nova era de navegação na internet — os cliques passaram a ser acompanhados de “toques” também, com a tela touch (claro, antes mesmo dos smartphones telas touch já existia — mas dessa vez o mercado se mostrou mais promissor).

Como eu ainda não tinha experiência com design responsivo, criei o site de uma forma que ele fosse facilmente acessado em tablets, com design e navegação que facilitavam o toque.

Nesse caso, a mudança em relação à primeira versão foi bem brusca. O primeiro site era muito simples — o novo trazia mais personalidade.

Terceira versão: site responsivo

site 3

2013: Agora sim, um site responsivo!

Após alguns estudos com design responsivo, decidi que era hora de ter, enfim, um site responsivo. Uma pena, pois eu gostava bastante do site anterior e, particularmente, não gostei muito dessa nova versão — tanto que ela ficou no ar por pouco tempo.

Como toda primeira experiência, o site teve seus problemas — nesse caso, apenas um: o design funcionava muito bem em tablets e smartphones, mas em notebooks e desktops o site não era muito agradável visualmente. Criar um site responsivo, definitivamente, não era uma tarefa fácil — felizmente hoje eu tiro isso de letra!

Essa versão é quase que uma mistura entre a primeira e a segunda, se você perceber bem. Aqui eu começo a elaborar uma estrutura mais oficial para meu site.

Quarta versão: nova identidade visual

site 4

2014: Site responsivo com direito a animações

Em mais uma de minhas experiências, decidi deixar o site mais dinâmico com animações em javascript e CSS3. O grande desafio não foi fazer uma criação melhor que a versão anterior, que tivesse boa estética em qualquer dispositivo, mas foi deixar ele leve mesmo com tais animações — deu certo.

As cores eram bem mais fortes, até mesmo por ser uma tendência da época criada pela Apple. Essa versão também apresentou o logo que utilizo até hoje (e não tenho planos de modificá-lo).

Quinta versão: melhorias

site responsivo

2015: Um “upgrade” da versão anterior

Costumava chamar essa versão de 4.1 porque, nas versões anteriores, o site sofreu grandes modificações estruturais e de design — já a nova versão foi feita em cima da quarta versão, com pequenos ajustes como mudança de cores e de alguns elementos.

Por exemplo, no topo da página inicial inseri uma ilustração no lugar do logo e mudei o alinhamento de alguns elementos. De resto, a estrutura é exatamente a mesma.

Outra diferença é que enquanto na versão 4.0 (idem para a 3.0) utilizei design adaptativo, na versão 4.1 utilizei design responsivo. Como você pode conferir em meu post Design adaptativo x Design responsivo, as diferenças são muito pequenas, tanto que é comum chamar design adaptativo de design responsivo. Tecnicamente para o profissional até faz diferença, mas para o usuário — que é o que importa — não faz muita, de certa forma.

Sexta — e atual — versão

repaginacao de site fabiolobo

2016: Nova versão!

Não perca as contas: Esse é o visual 5.0!

Batendo o olho ele se parece muito com o anterior, né? Mas teve muitas alterações estruturais e de código também.

O site está mais focado em conteúdo, mais leve, mais rápido… e, de certa forma, está mais agradável visualmente em relação às versões anteriores.

Acredito que em 2018 uma nova versão vem por aí: mais simples e ainda mais leve, além de ter maior destaque para minhas outras empresas e projetos, como a WOWF. Quanto tempo essa nova versão irá durar, hein?!

Repaginação de sites

Desde que comecei a trabalhar com design responsivo em meu site, os pedidos de orçamento, acessos e comentários no blog aumentaram, já que a acessibilidade do site como um todo aumentou. E como a utilização de dispositivos móveis não para de crescer, a tendência é que isso só melhore.

Meu site sempre será meu laboratório, mas deve se manter moderno e com boa usabilidade pois é o reflexo de meu trabalho. Sabe a frase “casa de ferreiro, espeto de pau?”. Costumo evitá-la por aqui!

Quer uma repaginação em seu site? Fale comigo!

  • Facebook
  • Twitter
  • Whatsapp

Do que você está precisando?

Um site novo? Suporte para WordPress? Criação de logo? Outra coisa? Fale comigo!

Leia também

Confira artigos relacionados ao post Repaginação de site, ou redesign: Novo site responsivo.

Comente!

Espaço reservado apenas para comentários sobre o post. Então, se você deseja um orçamento, por favor, entre em contato para que possamos conversar.

Quem é Fabio Lobo?

fabio lobo

Sou eu! Quer saber ainda mais sobre mim?

Bom, a maioria dos trabalhos que faço — na área de web design e desenvolvimento front-end — é com WordPress, com foco em usabilidade, facilidade e performance (tudo isso com design responsivo, é claro!). Também sou fundador de outros projetos, como a WOWF e a FicaOn.

Quer saber mais sobre esse tal de Fabio Lobo? Veja meu currículo ou siga-me nas redes sociais acima. Ah! Você também pode acessar meu blog, que é focado em web design e desenvolvimento.