Porém hoje o desafio é diferente, além dos monitores de desktop e notebooks, temos também que pensar em como adaptar o conteúdo para a telinha de um smart phone e/ou uma tablet. Além das limitações tecnológicas impostas por esses aparelhos (como no caso do drama Apple X Flash) e a obrigatoriedade do uso de certos navegadores em determinados dispositivos.

O que fazer nessa situação já que um site deve atender a todas essas espectativas? Vender 2 versões diferentes para o seu cliente, uma convencional e outra para dispositivos móveis? Seria interessante, não? Um projeto, duas soluções diferentes, mais horas de desenvolvimento e de construção de layouts ($$$$$$$)! Porém um bom profissional tem a obrigação de pelo menos oferecer ao seu cliente a melhor solução. Se o cliente precisa de um hotsite em flash para fazer um jogo multiplayer ou permitir uma interação do seu usuário com a webcam, não há muito o que fazer, o problema por sí só já impõe limitações. Mas se o caso for outro? Se o cliente quiser apenas um site?

Estudando em como oferecer aos meus clientes a melhor solução, cheguei a algumas conclusões:

- Flash? NO WAY!

Eu amo o flash, trabalho com AS3 desde a sua origem e acho uma linguagem extremamente organizada e poderosa, porém há limitações para dispositivos móveis (certo sr. Jobs?). Até que esse problema seja sanado (ou não!) o flash deixa de ser interessante para sites, mas ainda é uma ferramenta muito útil e eficaz para criação de jogos, hotsites interativos, players stream, aplicativos mobile entre outras coisas.

- Então restou o apenas combo HTML/CSS/JS, certo? SIM!

Exato, essa é sem dúvida a melhor solução! Mesmo com algumas incompatibilidades cross-browsers (que já são bem menores hoje) e a ainda humilde tentativa da criação de padrões para seu uso, o HTML/CSS/JS ainda é a melhor solução para os dias de hoje. Afinal, webkit a parte, todo browser renderiza html.

- Outras tecnologias?

Existem outras possibilidades? Não, pelo menos por enquanto. Ou eu estou equivocado?

- O que isso muda para os designers?

Esqueçam a comodidade do “centraliza o conteúdo nessa área útil e deixa o resto pro scroll”. Não dá mais para pensar dessa forma, cabe aos verdadeiros webdesigners estudarem as resoluções dos dispositivos móveis e adaptar a arte para cada caso. Além da simplificação das interfaces para o melhor funcionamento em dispositivos móveis.

- E para os desenvolvedores?

Para os desenvolvedores de interface a coisa também não simplifica. Trabalhar com layouts diferentes dentro de uma mesma página não é só desafiador como exige também “criatividade” por parte dos mesmos afim de tornar a coisa toda possível.

- Solução.

Desafios fazem parte do nosso trabalho, trabalhar com internet é evoluir a medida que ela mesma evolui, é se reinventar e buscar novas soluções todos os dias. Mas nem tudo é tão difícil quanto parece.

Conversando sobre assuntos aleatórios com meu irmão um dia desses, ele me mostrou algo que estava faltando para a conclusão da minha pequena pesquisa, um site que disponibiliza um show case de vários sites que atendem essa necessidade, o mediaqueri.es.

Usando CSS3 Media Queries é possível importar estilos diferentes para cada resolução adaptando de maneira simples o layout do seu projeto para a resolução desejada. Simples! Até agora, a melhor solução que consegui achar.

Maiores informações sobre CSS3 Media Queries:

Media Queries no W3C (inglês)

Exemplos de CSS3 Media Queries no Web Designer Wall (Inglês)

Media Queries Crash Course no Net Tuts Plus (Inglês – Video)

Meio Apple style.

A única coisa realmente interessante(só  para o Youtube/Google) nessa nova interface é que tem mais espaço para propaganda.

Alias, empurrar o player para o lado para mostrar banners só não é pior do que os banners flutuantes dos grandes portais brasileiros que sempre entram na frente do destaque que você está lendo.

Vou deixar com a interface nova por um tempo, já vejo tanta propaganda na internet que talvez eu até me acostume.

Quer tentar? Clique aqui.

Vi no Giz.

Não é tão simples fazer essa distinção, dependendo do contexto, uma obra de arte pode se tornar uma peça de design e vice-e-versa. Mas podemos começar a aprofundar a analise pela definição do que é design. Segundo o Wikipedia:

O design, desenho industrial ou desenho ou modelo é a configuração, concepção, elaboração e especificação de um artefato. Essa é uma atividade técnica e criativa, normalmente orientada por uma intenção ou objetivo, ou para a solução de um problema. Simplificando, pode-se dizer que design é projeto.

Ou seja, design é projeto! Design é projetar a forma afim de torná-la funcional. Mas se existe uma definição clara, por que a discussão?

Simples, lembrar aos designers qual é sua verdadeira função, para que esses nunca se esqueçam que antes de entregar um projeto bonito, eles devem sempre pensar em entregar um projeto funcional.

Não adianta entregar um layout fantástico, feito com extrema habilidade artística se esse não atende às especificações que são necessárias. Não adianta fazer um drop down que não se parece com um, não adianta achar uma solução super criativa para um formulário de e-mail se isso irá criar dificuldades para o usuário entendê-lo. Não quer dizer que  tudo deva ser padronizado, não quer dizer que todo formulário tenha que ser igual, quer dizer apenas que nunca deve-se ignorar a sua função principal, que não é deixar o usuário maravilhado e sim, possibilitar ao mesmo enviar um e-mail para contato da maneira mais simples e objetiva possível.

Ser um bom designer é adaptar a forma à sua função, é criar um site bonito e fácil de navegar, é priorizar a informação e a funcionalidade do objeto em questão e só então, torná-la visualmente agradável.

Afinal, do que adianta comprar a moldura mais bonita do mundo se ela não se prende na sua parede?

Projeto Offline

Desginer | Diretor de Arte

Projeto: Kingpin – Flash Site Concept

Cliente: Projeto Pessoal

Descrição do projeto: Conceito para portfolio em Flash

Técnicas e tecnologias empregadas: Photoshop, Illustrator, Ilustração manual

>> Ver site

Co-Desenvolvedor (AS3)

Projeto: Intimus | Site

Agência: _Salve

Cliente: Intimus

Descrição do projeto: Site de produtos Intimus.

Técnicas e tecnologias empregadas: Actionscript 3

Outros desenvolvedores: Atimoda Thiago Zecchinelli (_Salve | AS3 Pleno), Outros…

>> Ver site

Designer | Diretor de Arte

Projeto: Celebritá Eventos | Site

Agência: Freelancer

Cliente: Celebritá Eventos

Descrição do projeto: Site corporativo Celebritá Eventos

Técnicas e tecnologias empregadas: Illustrator, Photoshop, Kuller

Obrigado a todos que estão ajudando a divulgar o site.

Nos próximos dias haverão:

• Mais trabalhos
• Posts sobre design, desenvolvimento, tecnologia e games
• E melhorias estruturais nos site

E por enquanto é isso, espero que gostem do novo site e dos novos trabalhos.

Se encontrarem erros, por favor avisem.

Obrigado.

Kingpin – Rafael Baggio Fuentes

>> Ver aplicação

Desenvolvedor (AS3/Javascript)

Projeto: Facebook Ronaldize-se | Aplicativo

Agência: TaxiLabs | Ogilvy

Cliente: Claro

Descrição do projeto: Aplicativo para Facebook que consiste em mesclar o rosto do usuário com o rosto do Fenômeno

Técnicas e tecnologias empregadas: Actionscript 3, Javascript, Facebook API (AS3), Facebook SDK (Javascript), interação com webcam, transformação de imagem (Filtros e aspecto geral)

Outros desenvolvedores: Higor Bimonti (TaxiLabs | Desenvolvedor PHP)

>> Ver case

Desenvolvedor (AS3)

Projeto: Vivo Pass | Painéis interativos para Youpix

Agência: IThink

Cliente: Vivo

Descrição do projeto: Painéis interativos para disponibilizar informações obtidas através de chips com tecnologia RFID colocados em aparelhos de clientes VIVO no Youpix

Técnicas e tecnologias empregadas: Actionscript 3 e Javascript

Outros desenvolvedores: Rodrigo DePresbiteris (IThink | .NET Sênior) e Daniel Lessi (IThink | AS3 Pleno)