Tableless - Desenvolvimento inteligente com Padrões Web

19/01/2012
Artigos

Um pensamento sobre design para web

Um pensamento sobre design impresso, desenvolvimento e design para web.

Por

É engraçado quando designers de peças offline tentam migrar para web e ficam assustados com as diferenças no processo de criação e produção. O controle que o design para impresso tem sobre a posição dos elementos e a forma final da arte nunca (nunca?) será a mesma na web. No impresso você define precisamente as medidas, posicionando dos elementos, o tamanho das letras, entrelinhas e cores (mesmo brigando bastante nas gráficas por aí). Já na web você briga porque um determinado elemento está deslocado para a direita em um browser ou outro, porque determinada fonte é maior em uma tela e até pouco tempo só tinha um punhado de fonts para criar. Mesmo quando definimos tudo em pixels, há variações inesperadas entre browsers e dispositivos. Também lembro quando havia muita diferença de cores de monitor para monitor. Graças a Deus temos monitores LCD/LED.
E agora ainda temos que prestar atenção aos dispositivos que comprimem mais pixels por ponto do que antigamente.

A boa experiência no design de impresso depende muito da arte inspiradora do designer, qual o papel usado, que tipo de impressão, da gráfica… em web dependemos muito do tamanho da tela, do dispositivo utilizado, do browser, da configuração do texto, velocidade da internet e do computador. São muitas variações para tentarmos manter o controle de cada detalhe.

Quando um designer faz peças para uma campanha ou algum projeto offline, dependendo do caso é necessário criar peças para diversos formatos de veiculação em outdoors, revistas, posters etc. Em relação a web, nós temos todos os formatos de telas que envolvem tablets, notebooks, monitores, TVs e celulares… Com um diferencial: cada uma dessas telas tem um tipo de comportamento diferente dependendo da manipulação do dispositivo e também do usuário. Em alguns dispositivos como tablets e mobiles em uma tela temos dois formatos: retrato e paisagem. Já no impresso não há manipulação pelo usuário. A estimulo é totalmente visual e muitas vezes tátil. Mesmo assim, a experiência que a web entrega é totalmente outra.

No design impresso, quanto mais proporcional, harmoniosa e equilibrada for a peça, melhor será recebida. No design para web também, mas os layouts precisam ser harmoniosos em cada um dos dispositivos, precisa ser proporcional em cada navegador, além da acessibilidade para alcançar usuário distantes.

Mas em ambas a personalidade é a plataforma para a emoção do usuário. Seja online ou offline, o layout, a forma com que o usuário o consome deve leva-lo para uma experiência diferente do normal. E não estou falando de hotsites feitos em flashs ordinários puramente comerciais.

Eu queria ser designer para entender melhor os conceitos que envolvem esse assunto e talvez explicar tudo isso com mais propriedade.

Assim como não é possível escrever uma linha de código sem saber os porquês da importância do código semântico e acessível, não é possível desenhar um website sem ter a plena certeza de que qualquer usuário terá uma experiência envolvente e agradável.

O design para web está mudando de novo outra vez por causa da explosão de novos dispositivos. Se você ainda não parou para pensar, pense: faça as contas das telas: notebooks, monitores, tablets e smartphones. Sendo que cada uma destes tipos de telas tem diversas variações de tamanho e principalmente de resoluções. Já disse que a experiência do usuário precisa ser cross-device, caso contrário, algo se perde.

Eu queria mesmo era fazer um carro.

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://twitter.com/diegoeis/

Veja os outros posts de

  • http://twitter.com/AbrahamAlves Abraão Alves

    Engraçado como a proposta Metro-style da Microsoft se encaixa perfeitamente no cenário mencionado: Cross-Device  

  • http://twitter.com/amaurycarlos Amaury Carlos

    No cenário atual a experiência do usuário deve ser a peça chave na criação e desenvolvimento cross-device. Excelente artigo.

  • Matheus Salmi

    É… A Microsoft realmente acertou no Metro

  • Vinicius Ortiz

    Algo que percebo em sites desenvolvidos por empresas especializadas em design gráfico, é que são lindos…mas o código (na maioria) é um lixo, ou então é em flash. Porque estão acostumados com a forma de criar descrita no início do texto e acham que criar para a web será a mesma coisa.

  • http://twitter.com/diegoeis Diego Eis

    E o que a Apple está começando a fazer trazendo algumas features que existem no iPad para o OSX. Ainda não acertaram a mão, mas eu confio neles.
    Já a Microsoft aprendeu com todos os erros que eles cometeram e está na cara que eles estão se inspirando nas atitudes da Apple para decisões no design e no comportamento da criação dos softwares.

  • Fabio Rocha

    Ótimo artigo.
    Fiquei muito curioso com a imagem que o ilustra, você teria o caminho para ela completa?

  • Mauricio Cabral

    Já da muito tempo nao deveriam existir designers web e designers de impresso, mas simplesmente designer, que cohnece seja um que o outro. Em caso contrario qualquer projeto terá dificuldades (e as vezes muitas dificuldades) a passar da um lado pro outro.

  • http://www.facebook.com/profile.php?id=1523095968 Anderson Butilheiro
  • http://www.facebook.com/macielportugal Maciel Portugal

    Depois de ver o link tbm quero fazer um carro *-*

  • Glaucia Rezende

    seria uma espécie de “wireframe” do desenvolvimento do carro? o.O  Eu queria mesmo era uma BMW… rs

  • http://twitter.com/ladodesign Lado Design

    Olá.

    Vivemos na era da publicidade Crossmedia, onde uma mesma campanha é veiculada em diversas mídias, sejam elas impressas ou digitais. Assim, torna-se normal (?) que uma agência especializada em impressos se aventure em criar sites também. Mas, em um mundo com tanta competitividade e tão segmentado será que ainda há lugar para o “faz tudo”? Hoje tudo muda muito rápido, e a área de design é uma das que primeiro sente esse impacto, essas mudanças. Assim, tentar focar no impresso e digital ao mesmo tempo não é muito viável pois, como citado no artigo, apesar de serem parecidas são áreas diferentes, já que a maneira de se pensar é diferente.

    Como web designer, estudo constantemente, tentando caminhar o mais próximo possível dessas mudanças: estudo design para desktops, para dispositivos móveis, design para lojas virtuais, para sites institucionais, estudo javaScript, CSS3, me preocupo em como o site será visto nas mais diversas situações… Ou seja, é um mundo diferente do impresso, onde é preciso estudar a gramatura dos papéis, o resultado do trabalho depois de impresso, o tamanho dos papéis, a comunicação com os leitores. E, assim como os web designers, os designers que trabalham com impressão, também precisam de preocupar com as mais variadas mídias: jornais, revistas, folders…

    Portanto, apesar da similaridade entre essas áreas do design – web e impressão -, elas são bem distintas. E no meu ponto de vista, apesar dos profissionais dessas duas áreas estudarem gestalt, tipografia, diagramação, cores, ilustração, dentre outras matérias, ou se trabalha com o impresso ou com o digital.

  • http://twitter.com/agah_design Hugo Oliveira

    Um ótimo artigo! Eu sempre trabalhei na área gráfica e estou começando a trabalhar na área de web e sempre soube que cada área tem as suas especificações. As empresas agora necessitam de um produto cross-media: aquilo que produzo no impresso tem que ser adaptado para o digital. Pode ser que cada profissional cuide de sua área de atuação ou que cada um entenda um pouco na área do outro, mas a era digital está demandando mais produtos online. Não vou migrar de vez para web, pq amo muito a área gráfica, mas pq certos produtos precisam ter uma presença online também: estou me atualizando para não ficar desatualizado.

  • http://twitter.com/agah_design Hugo Oliveira

    Concordo com você sobre o Crossmedia e quanto à velocidade da tecnologia, mas discordo quando você diz que: “ou se trabalha com o impresso ou com o digital”. Estamos vivenciando uma transição dos impressos para o digital. Hoje se eu focar somente no impresso, me sinto que estou ficando para trás, já que grande partes de marcas e produtos oferecem seus serviços no modo online. Vejamos, por exemplos algumas publicações: são impressas e ao mesmo tempo têm as suas edições em versão para Ipad, certo? Daqui a pouco tudo vai ser digital (outro exemplo: o Jornal do Brasil, deixou de ser impresso e atualmente você só o encontra online). Como você, também, procuro estudar e ficar atento às essas mudanças. Há pouco tempo fiz um curso para produzir revistas interativas, compatíveis para Ipad e Smartphones e qual software faz o projeto gráfico? Respondo: no Indesign, onde a atuação do designer gráfico é constante em projetos para as mídias impressas. Ou seja nada me impede de trabalhar em peças offline ou online. Claro, claro, concordo que um “faz tudo” também deixa trabalhos a desejar, mas quero ressaltar que tem como sim você trabalhar em ambos os campos, mesmo não fazendo tudo, mas um pouco de cada.