CASE: novo site RamonPage.com

Por RamonPage

DURANTE ANOS EU mantive este site com a mesma cara, somente fazendo mudanças aqui, ali e acolá. Eu sabia que precisava mudar, mas queria uma mudança totalmente radical. E assim eu fiz.

Screenshots do site RamonPage.com
RamonPage.com no iPhone, iPad e Macbook

Meu desejo era transformar o meu site e blog em algo ainda mais tipográfico, sem muitos elementos visuais, afinal eu adoro tipografia. Para que isso fosse possível, eu trabalhei o projeto em algumas etapas. Explicarei-as abaixo.

Novo visual

Já não é de hoje que eu digo “Content First”. Tendo isso em mente, eu precisava de um estilo de site que evidenciasse o conteúdo. Tudo bem que o site antigo já era clean, mas eu precisava de algo mais (ou menos). Decidi tornar as páginas muito simples. No caso do blog, a única imagem aparente que compõe o layout é o logotipo. O rodapé também é estilizado com imagens, mas ele não possui destaque considerável.

Eu utilizo a App Reeder como leitor de RSS e foi daí que veio a inspiração para um blog puramente tipográfico1.

1 — Engraçado que a 37signals também renovou seu blog recentemente e ele também está com overdose de tipografia. Está interessante, vale uma conferida.

Paleta de cores

As cores deste novo site estão muito próximas das que existiam no anterior, visto que elas já formavam uma combinação que me agradava. Publiquei uma paleta no COLOURlovers com as mudanças que fiz.

Novo logotipo

A etapa do logotipo certamente foi a mais trabalhosa. Passei um bom tempo estudando as possibilidades. Minha única premissa era de que o logotipo fosse puramente tipográfico. Algumas das minhas inspirações:

Imagem do Flickr: So pro bono
Fonte: http://www.flickr.com/photos/sepra4life/5078177751/in/photostream/
Imagem do Behance: Popular Mechanics 110th Edition
Fonte: http://www.behance.net/gallery/Popular-Mechanics-110th-Edition/3103131
Imagem do I Love Typography:
'Dreams', 'Stars' & 'So Much To Do'
Fonte: http://ilovetypography.com/2010/11/15/typographic-posters-dreams-stars-so-much-to-do/
Imagem do Wookmark:
Respect
Fonte: http://www.wookmark.com/image/97763/aia-typography-inspiration-151-jpeg-jpeg-image-400-300-pixels-
Imagem do Flickr:
Stay Fresh
Fonte: http://www.flickr.com/photos/gizo/1052243642/sizes/m/
Imagem do Curatedmag:
The Faile Bast Deluxx Fluxx Arcade at Lazarides, London
Fonte: http://www.curatedmag.com/news/2010/01/28/the-faile-bast-deluxx-fluxx-arcade-at-lazarides-london/

O resultado final foi…

Logotipo RamonPage.com
Versão final do novo logotipo RamonPage

Infra-estrutura

O meu blog sempre foi em WordPress e eu não posso negar: ele sempre me serviu muito bem! O WordPress resolve o que ele propõe, porém eu cheguei num estágio em que precisava de mais flexibilidade na manutenção do projeto. Ou seja, a minha dor maior estava nas atualizações constantes, que muitas vezes eram críticas.

Além disso, eu precisava de uma plataforma mais simples. Algum lugar que eu pudesse abrir o arquivo de um post, digitar o que eu tivesse a dizer, e subir para um repositório com um simples comando de deploy.

Eu já havia tido boas experiências com o Jekyll2 rodando no Github Pages3. Seria uma solução prática e barata para rodar meu novo site. Porém por algumas razões eu deixei de usar ambos. Duas delas:

2 — Jekyll é um gerador de páginas estáticas, baseado em Ruby. Ótimo para sites simples e blogs.

3 — O Github Pages é uma das formas mais fáceis de publicar páginas web na atualidade. É como um servidor web, porém apenas de arquivos estáticos.

A escolha: Middleman App

Fiquei impressionado com o Middleman. Tudo o que eu precisava estava lá! SASS, HAML, templates para as views, Template Helpers (como no Rails) e etc. Só dou nota negativa para a documentação inconsistente, pois boa parte dos recursos eu meio que descobri na suposição.

Middleman + Heroku = <3

Site e blog configurados, eu precisava de um servidor. Acredito que essa tenha sido a decisão mais fácil. O Heroku certamente me atenderia. E atendeu.

Para todos os serviços de servidor que eu precisava – que o Github Pages não cobria – bastou usar o canivete suíço Rack. Tudo passou por ele: redirects 301, URL canônica, redirecionamento 404, cache de assets, e etc.

Experimentos com suporte a Retina Display

Eu sou da opinião de que a gente pode – e deve – testar qualquer recurso interessante em nossos projetos pessoais. Nós somos donos da decisão e pouco importa se isso “fere” algum conceito, moda, ou padrão.

Assim sendo, resolvi implementar todas as imagens do layout preparadas para retina display. Algumas percepções:

Responsivo

Ok, o site precisava ser responsivo. Eu queria um site mais legível, mais acessível. Nada mais justo torna-lo portátil.

Considerações finais

Eu sinceramente estou feliz com o resultado. Estou bem mais confortável para escrever. Espero que essa renovação me impulsione para voltar a escrever com frequência.

Marcado em: , ,

* * *