Selo peixe Grande 2011

Todos os posts em Criação

Chega de dizer “casa de ferreiro, espeto de pau”!

Novo layout @cristianoweb

Novo layout @cristianoweb

Em 2009 eu abandonei o meu primeiro e único site que eu fiz em “tableless” e optei pelo tema WordPress chamado “Pyrmont-v2″ e todos os anos venho prometendo criar a minha própria versão. Tanto que trabalhei num tema durante uns 3 meses no final do segundo semestre de 2011 em paralelo aos projetos dos meus clientes e quando finalmente eu conseguir entregar os arquivos PSD para o Cayo codificar, tudo mudou por aqui (para variar!!!) e o projeto ficou “datado” e decidi comprar uma solução e trabalhar num conteúdo mais comercial e sentir um pouco melhor como o mercado absorve a minha forma de trabalhar navegando no site. É o conceito do “Getting Real“, de faça um produto, recolha o feedback, corrija, ajuste, lance novamente e amplie a sua solução.

A solução então foi refazer o conceito comercial, trabalhar na arquitetura de informação e aí sim buscar um tema adequado para o meu site, afinal, é assim mesmo que faço quando sou contratado para ajustar um tema WordPress para um cliente certo!?

O tema escolhido foi o Classica do designer Orman Clark, disponível no excelente Themes Forest. De conceito mega minimalista, o tema é uma ótima opção para quem quer mostrar trabalho em formato de portifólio de forma simples, bonita e descomplicada tanto para quem vê quanto para quem mantém. E como não poderia deixar de ser, eu vou fazer uma pequena resenha para explicar o funcionamento para vocês: Continue lendo →

Criando layouts em PSD pensando no Front-end e Back-end

Categoria: Layout

Depois de quase dois anos, finalmente eu vou escrever um dos artigos mais pedidos aqui no blog (é verdade gente!!!): a velha e ‘ainda’ difícil relação entre designers e desenvolvedores. Desde os primórdios da web, essa picuinha é responsável pelos problemas de 8 em 10 projetos que vemos por aí. Essa relação pode ser vista (e entendida) na ilustração abaixo que mostra as diferentes visões de dois tipo comuns de profissionais web.

Designers vs Developers

Designers vs Developers (clique para ver o infográfico)

Trabalhando em equipe

Tudo começa mais ou menos no segundo semestre de 2009 quando eu fiz junto com o Cayo Medeiros (@yogodoshi), o projeto ‘Tudo é Turismo‘, o nosso primeiro em WordPress. A partir daí, foram mais 4 projetos na seqüência de muito trabalho nessa parceria. Enquanto eu fazia o atendimento junto ao cliente e criava os layouts em PSD, o Cayo implementava no WordPress e trabalhava na programação de cada caso. Esse período durou um intervalo de tempo de 1 ano e por causa disso, a relação precisava ser afinada, para que tudo saísse corretamente. Sempre trabalhei na criação deixando o PSD o mais amigável possível para o Cayo. Renomeava todas as ‘layers’ e pastas para que ele soubesse exatamente em que elemento estava manipulando.

Nós conversávamos muito em busca de otimização dos processos, mas foi só no 15º EDTED da Arteccom, mais precisamente numa oficina promovida por um amigo em comum, o Bernard de Luna, é que essa dificuldade tomou um rumo mais profissional. Bernard apresentou junto com o Victor Montalvão a “Oficina de Planejamento Corte: Seu layout virando código“, que ensinava como criar layouts pensando no desenvolvedor. O Cayo esteva presente no EDTED e postou no Twitter que gostaria que eu estivesse lá para assisti-la. Eu estava mega ocupado com outro projeto, mas no fim do dia, recorri ao Slideshare e encontrei essa maravilha de PPT que mudou a minha forma de criar layouts. Continue lendo →

“Pencil Sketching”, uma extensão bem completa do Firefox

Categoria: Wireframe

Imagine a cena: você trabalhou durante alguns dias na criação do layout com o seu Photoshop, e quando você está quase no final, percebe que algo não funciona bem! A navegação, ou os elementos, você não sabe ainda ao certo! Então você começa a refazer algumas partes em busca de solução, quando de repente a ideia inicial do layout se perde um pouco e isso te frustra!

Imaginou a cena? Ela é mais comum do que a gente pensa na verdade! Você que é designer, e cria layouts sem passar pela fase do Wireframe, esse é o cenário mais recorrente, não sua produção! Na criação de um layout de um site, é fundamental trabalharmos com wireframes para prever possíveis erros. Quando fazemos esboços no papel, tudo pode parecer perfeito, combinando direitinho, mas é na hora do Photoshop (ou Fireworks para alguns) é que o bicho pega! Há um artigo bem bacana que o Fred Van Amstel escreveu no site Usabilidoido em 2005 que mostra a importância dessa fase na criação. Além do Usabilidoido, eu sugiro a leitura dos artigos do Ivo Gomes e do Walmar Andrade para complementar esse conceito.

Por conta desse artigo é que comecei a implementar esse estágio na minha metodologia de criação usando um software chamado ImageStyler (descontinuado pela Adobe) na criação dos meus wireframes. Com ele, eu fiz praticamente todos os meus layouts dos últimos 3 ou 4 anos. Até que no último projeto, o site do evento CoéSEO, eu resolvi testar a extensão para Firefox chamada ”Pencil Sketching” e hoje eu vou passar para vocês as minhas impressões de uso.

"Pencil Sketching", uma extensão bem completa do Firefox
“Pencil Sketching”, uma extensão bem completa do Firefox

Continue lendo →

Fazemos design para pessoas, não para designers

Logotipo Rio 2016

Para começar os trabalhos de postagem em 2011 aqui no blog, nada melhor do que falar sobre a criação do logotipo dos Jogos Olímpicos de 2016 do Rio de Janeiro. Lançado oficialmente no Réveillon, o logotipo foi criado pela agência carioca, Tátil design, e óbvio que já gerou discussão sobre o seu conceito, similaridades e há quem já achou que é fruto de plágio mesmo.

Continue lendo →