Todo mundo que trabalha com criação de sites e projetos web conhece o Maurício Samy Silva, o Maujor. Autor de vários livros como “Construindo sites com CSS e (X)HTML” (que já escrevi sobre por aqui), HTML 5, CSS 3, jQuery entre outros. Respeitado e adorado no mercado web, Maujor é carinhosamente chamado de “Dinossauro do CSS”!
Além de autor de livros, Maujor participa ativamente com excelentes artigos e uma presença marcante em eventos como FrontinBH e BrasilJS, entre outros. Eu mesmo já estive com ele pessoalmente no WordPress Meetup RJ em 2011.
[su_slider source=”media: 7536,7537,7538″ limit=”3″ width=”800″ height=”600″ title=”no” arrows=”no” pages=”no” mousewheel=”no”]
Mais ou menos em outubro de 2013, o Maujor me ligou e disse que estava escrevendo o seu novo livro, que seria publicado no meio do ano de 2014, e que o tema seria Web Design Responsivo. Achei ótima a ideia, pois o mercado é MEGA carente desse tipo de referência em português e como conheço a qualidade dos seus livros, falei que seria de grande utilidade um livro sobre esse tema.
Para a minha grata surpresa o Maujor não me ligou para me falar em primeira mão sobre o seu novo livro e sim me convidar para ser o designer do projeto que é citado no livro. Como todos sabem, o Maurício costuma criar os sites que ele cita em seus livros. É uma forma bem didática de ir vendo a evolução das etapas de codificação, só que dessa vez, por se tratar de um projeto de vanguarda, ele queria um layout realmente profissional, e me fez o convite:
[su_note note_color=”#efd589″ radius=”6″]
“Cristiano, gostaria que você desenhasse o layout desse projeto, e ficaria muito feliz em ter o seu desenho no meu livro.”
Maurício Samy Silva – Maujor
[/su_note]
Óbvio que eu aceitei!
O projeto foi bastante desafiador, pois iniciamos pelo layout dos dispositivos móveis, no conceito chamado “Mobile First“, e usamos a resolução de largura 320px para smartphones na vertical. Depois criamos a versão de 420px de largura para tablets com orientação vertical e horizontal, e por fim, fizemos a versão desktop de largura 940px.
Mas como foi o processo? Conta aí!
A ideia era criar um layout que fosse crível, nada de desenhos que não fazem sentido na realidade. Por isso o tema do site era a Copa do Mundo (o livro foi lançando na época desse evento) e criamos toda uma hierarquia como se fosse num projeto de verdade, mesmo que só tivesse a página “home”.
Eu criei o logotipo voltado para esse universo, e o site poderia ser usado facilmente como um portal de notícias sobre tudo da Copa do Mundo. Como sempre faço, desenhei todas as telas de wireframe, que depois de aprovadas passei para o layout em si, levando em consideração cores, ícones, fontes e texturas. O resultado foi um projeto simples, direto e fácil de usar.
[su_button url=”https://onedrive.live.com/redir?resid=C44959040542DD7F!1115&authkey=!AHGpfVqKg96LtuI&ithint=folder%2cpng” target=”blank” style=”3d” background=”#f6b624″ size=”6″ icon=”icon: eye”]Veja as telas desse projeto[/su_button]
Mas e o livro, é bacana?
Responder essa pergunta é chover no molhado! Maujor prima pela qualidade dos seus textos e pela didática. É muito comum encontrar “Dicas”, “Alertas”, “Terminologia” e exercícios passo-à-passo de tudo que é ensinado. Além disso, o livro conta com a participação de 6 colaboradores que somam ainda mais conhecimento para os leitores. Almir Filho, desenvolvedor web na Globo.com, ele escreveu sobre “Media Queries”. Bernard de Luna, head de produto do Videolog, que falou sobre a “Etimologia responsiva”. Dani Guerrato, sócia da PopUp Design, colaborou sobre os “Mitos do RWD”. Horácio Pastor Soares, especialista em experiência do usuário, contribuiu com o texto “RWD segundo Horácio”; Reinaldo Ferraz, especialista em desenvolvimento web do W3C Brasil, falou sobre “Acessibilidade na web e design responsivo” e por fim, Tiago Baeta do iMasters, ajudou com “iMasters, de fixo para responsivo”.
E aí @cristianoweb, você curtiu?
Com certeza! Um projeto como esse não é medido pela remuneração, mas sim pelo desafio e pelo reconhecimento.
Desafio de criar algo tão importante e ainda com raras referências no mercado. E reconhecimento que foi impresso nas páginas do livro conforme vocês podem ver na imagem abaixo.
Assistam o vídeo que eu fiz assim que recebi o meu exemplar autografado em casa e vejam como eu fiquei feliz!
[su_note note_color=”#efefef” radius=”6″]
Site oficial do livro: http://www.livrorwd.com.br
Onde comprar o livro: http://novatec.com.br/livros/webdesign-responsivo
[/su_note]
