<
Menu

Tableless



Imagem post: Um pensamento sobre design para web

Um pensamento sobre design para web

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

É 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: os layouts precisam ser proporcionais em cada um dos dispositivos e harmoniosos 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://medium.com/@diegoeis

Mais posts do autor

Comentários (14)

  • 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.

  • http://twitter.com/gabrielagabriel Gabriela Gabriel

    Eu vejo que o topico central do artigo e “Transicao”. Diego pontuou questoes relevantes de cada midia, comparou e didaticamente mostrou como ‘e necessario evoluir. Isto e’ Design.

    O paragrafo que mais me chamou atencao foi “No design impresso, quanto mais proporcional, harmoniosa e equilibrada for a peça, melhor será recebida. No design para web também: os layouts precisam ser proporcionais em cada um dos dispositivos e harmoniosos em cada navegador, além da acessibilidade para alcançar usuário distantes.” –  

    Nele, Diego mostrou de forma clara e simples a necessidade de Responsive Web Design. Muito tem se discutido sobre a relevancia de se fazer sites adaptaveis e flexiveis. Empresas tem levantado (claro) a questao economica de produzir sites desta forma… Entao, na minha cabeca, uma imagem veio nitida: imagine receber um folder em A3?  Acho que nao seria legal.. E nem o contrario, um folder em um cartao de visitas…..

    Talvez com esta imagem designers consigam explicar a seus clientes que assim como cada peca de midia tem uma funcao, assim deve ser um site “adaptavel” e com objetivos especificos dependendo de cada dispositivo.