A Estética da Web
Publicado; outubro 28, 2012 Arquivado em: A List Apart, Design, Mobile, Mobile Design, Web Leave a comment »Artigo traduzido com autorização da A list Apart Magazine e do autor.
—
“É a essência da Web ser flexível. E deveria ser nossa obrigação como designers e desenvolvedores adotar essa flexibilidade, e produzir páginas que, por serem flexíveis, se tornam acessíveis a todos.” John Allsopp, The Dao of Web Design
Doze anos atrás John Allsopp nos pediu para aceitar a adaptabilidade da essência da Web. Nós não ouvimos.
Apesar do movimento dos padrões da web terem levado à separação do conteúdo e apresentação – um requisito essencial para o design adaptável – isto apenas se manifestou na codificação. Divs flutuantes substituíram tabelas, mas ainda assim os layouts se mantiveram presos às convenções da impressão.
Hoje, quando todo dispositivo implora para estar conectado, tornou-se mais fácil – quase que necessária – a aceitação da flexibilidade da web. O Web Design Responsivo é considerado uma boa prática, que está em crescimento, e nossos layouts estão se tornando mais flexíveis. Mas, mais uma vez, a inovação está focada em execuções técnicas, enquanto a estética visual continua sendo ignorada.
Em outras palavras, estamos nos tornando mais responsivos, mas ignorando a segunda parte: “o design.” Estamos trocando divs com larguras fixas por outras que fluem com o design. Como passamos por um período de reavaliação, tanto de nossa prática como de nossas ferramentas, este é o momento certo para procurar uma estética mais verdadeira para o meio.
O Material da Web
Para projetarmos um design para um meio, precisamos entendê-lo. Eu gosto de pensar na web como um material com características únicas, que podemos nos aproveitar, e com limites para serem alcançados antes de serem quebrados. A web pode quase que ser considerada um material composto feito de HTTP (o como), URLs (o onde) e HTML (o quê). Omita qualquer um desses elementos e você não estará mais produzindo para a web.
É a combinação de protocolos e convenções que ajudam a web a alcançar o que o Sr Tim Berners-Lee chama de “primeiro princípio do design”: Universalidade.
“Deve ser acessível de qualquer tipo de hardware que possa se conectar a internet: fixo ou móvel, de tela pequena ou de tela grande.”
Com a universalidade tão inerente ao meio, pode-se dizer que a web é responsiva por padrão. “Design Responsivo” não é uma técnica ou processo, mas uma característica fundamental da plataforma – e é uma característica que ameaçamos com cada linha de CSS e JavaScript que colocamos sobre ela. Universalidade transcende o design visual também: Websites precisam ser tão fáceis de apresentar como textos simples ou lidos em voz alta.
Esta essência e essas características devem mostrar cada aspecto do nosso design. Então como essa estética poderia mudar o que temos em mente sobre a essência da web?
O Meio é a Mensagem
Assim como na Web, a televisão é um meio onde os dispositivos que a acessam diferem: Televisores podem variar em tamanho, resolução, formato e refresh rate.
Isto se tornou especialmente verdadeiro nos anos 70 e começo dos anos 80. Apesar de os programas serem gravados “a cores” as emissoras ainda tinham que considerar um grande número de pessoas que utilizavam televisor “preto e branco”. Por este motivo as imagens precisavam funcionar nos dois tipos de telas. Então os designers tinham que utilizar formas e cores para criar contraste. Por exemplo, a vinheta da BBC1 usava amarelo (e depois, verde brilhante) num globo giratório num fundo azul escuro. O design final podia parecer espalhafatoso, mas funcionava.
vinhetas da BBC1 de 1974 e 1981
A televisão esta enfrentando outro período de transição, desta vez a caminho das altas definições e formato widescreen. Novamente, pelo fato de muitos telespectadores possuírem televisores com definições padrão 4:3, os designers precisam se comprometer a trabalhar num “padrão seguro” para garantir que as imagens não fiquem distorcidas nas TVs mais antigas. Desta forma, as imagens nos televisores widescreen tendem a flutuar no meio da tela ainda incapazes de usar toda a tela disponível.
A estética dos televisores continuará a mudar, mas permanecerá regida pelos avanços na tecnologia e pelo entendimento dos designers de suas limitações.
Tudo que é velho volta a ser novo
Antes dos super Websites e do desejo de produzir layout printáveis – quando a velocidade da internet era limitada e pequenas telas podiam exibir apenas 256 cores –, imagens pixel graphic eram consideradas obrigatórias. O design era simples e direto.
Em 1995, a Hotwire usava apenas 16 cores. A homepage tinha pouco mais que 6 cores, com GIFs de 1KB representando cada tópico. O layout era apenas essas imagens centralizadas:
Hotwire, Circa 1995
Cercados de telas com alta definição e banda larga sem limites, é fácil esquecer que restrições semelhantes ainda existam. Embora os dispositivos estejam se tornando cada vez mais poderosos e cheios de recursos, dispositivos menos capacitados continuam a ser produzidos, por exemplo, o Kindle da Amazon é um dispositivo popular da linha de e-readers, e ainda assim os modelos possuem conectividade celular e um display de tinta monocromática.
Abraçando as restrições
Na busca de layouts responsivos outra limitação se revelou: Imagens Bitmap falharam em responder, seja ao tamanho da janela ou a conexão disponível.
Isto não é uma falha da web; podermos incorporar diferentes tipos de mídias numa webpage é uma importante característica. Mas nem todos os formatos compartilham das características da Web. Há uma grande oportunidade para desenvolvimento de imagens Bitmaps responsivas, e eu duvido que as imagens irão ser realmente parte da web até que isto exista. Neste meio tempo, a pergunta persiste: Como podemos fazer para que imagens altamente detalhadas possam funcionar em meios tão adaptáveis?
Muitos tentaram responder a essa pergunta com soluções técnicas. Dos hacks mais complexos aos mais simples foram encontrados, esforços levaram a definição de novos padrões onde poderiam detectar os diferentes tamanhos de tela para que as imagens fossem exibidas de tamanhos diferentes.
É no campo da restrição que a criatividade é estimulada. Designers ainda têm que forçar os limites do que é possível. Na busca de soluções de design para este problema, poderíamos criar uma estética mais adequada ao meio – e talvez perceber que o problema de imagem responsiva só existe porque nossos padrões de design permanecem enraizados no design impresso. Sem esse período de experimentação e reflexão, temo que realmente possamos introduzir padrões que vão contra a universalidade do meio.
Criando o Design Para Contornar um Problema
Felizmente desenvolvedores e designers estão começando a aceitar tal experimentação, e estão encontrando soluções que negam a necessidade de novos padrões.
1 – Otimização
Ao invés de gerar imagens de tamanhos diferentes e determinar o que deve ser mostrado, outra opção é exibir uma única imagem altamente otimizada.
O dConstruct Archive é um pequeno site onde as pessoas podem ouvir palestras de conferências anteriores do dConstruct. Nas imagens a seguir, veja que o fundo, e em volta do rosto do palestrante, foi desfocado, gerando menos pontos de compressão e consequentemente tamanhos de arquivos menores. Esta técnica funciona especialmente bem para retratos, pois, de qualquer forma, as pessoas tendem a se concentrar nas características faciais.
Imagem original: 9kb Imagem otimizada:4kb
Para decidir com qual tamanho de imagem trabalhar, levaram-se em conta as maiores e as menores telas. Nós já podemos ver uma diminuição nas propostas de imagens responsivas. Se você visitar o site, você vai notar que janelas de exibição maiores as vezes exibem imagens menores, porque o tamanho da imagem necessária é muitas vezes dependente do tamanho do seu bloco de conteúdo e não do tamanho da janela. No entanto, o tamanho das janelas de exibição são os valores a serem levados em conta.
2. Alterando a Estética
Se imagens com poucas cores e maior compressão podem gerar arquivos melhores, então talvez nossos designers devessem pensar nisso.
Com o tema “jogando com o futuro” o site da conferencia dConstruct 2012 empregou um design altamente tipográfico com imagens monocromáticas em áreas de uma única cor. Esta decisão sobre o design significava que as imagens poderiam ser bem pequenas, e algumas só precisavam de 8 cores.
Imagem Original 14KB. Imagem Otimizada: 11KB
Como vimos no exemplo da televisão, as restrições do meio podem impactar no resultado estético. Neste caso as imagens com pouca cor e com fundos desfocados – e, talvez até com pontos de compressão – deveriam se tornar uma norma aceita na web? Certamente a popularidade de serviços como o Instagram (Produto já criado com limitações) tem provado que fotografias são julgadas por seu conteúdo e não por sua resolução.
3. Melhoria Progressiva
Alterar o visual estético para se adequar ao meio é uma boa ideia, mas é improvável que seja aceita por alguns clientes e, vamos encarar: Nem sempre é apropriado. Na verdade, nós raramente fazemos essa pergunta: O que é apropriado? Ao analisarmos nosso conteúdo, podemos decidir quantas imagens são realmente necessárias para transmitir uma mensagem.
Em vez de aumentar a resolução de imagens, conforme o tamanho do local onde será exibida, podemos pensar em aumentar a quantidade. Isto vai de encontro a ideia da melhoria progressiva (do inglês – progressive enhancement) : fornecer uma experiência de base, que seja aperfeiçoada à medida que a capacidade do dispositivo melhora.
O site de notícias para dispositivos móveis da BBC é um grande exemplo de melhoria progressiva. O HTML base tem como fonte somente duas imagens: o logo da BBC e uma imagem para a notícia principal. Todos os dispositivos recebem isto, e as páginas pesam não mais que 28KB – Uma façanha em um mundo de páginas de 5MB.
Quando acessada por dispositivos mais poderosos como novos smartphones, tablets e desktop (aqueles que são o centro das atenções) mais atuais, uma imagem é exibida para cada notícia. Essas imagens foram consideradas como “úteis” – uma melhoria à experiência central, que está condicionada a ser exibida somente depois de a página básica ser carregada.
A melhoria progressiva já esta na caixa de ferramentas do desenvolvedor há muito tempo, mas só agora deve ser apresentada durante o processo de design. Ao pensar em websites em termos menos binários (desktops versus dispositivos móveis; IE6 versus navegadores mais modernos) podemos criar experiências que se adaptem a paisagem diversificada da web.
Adaptando Nossas Suposições (E não só Nossos Layouts)
Imagine o projeto de um novo website. Você vê um layout com cabeçalho e rodapé, com navegação ao longo da parte superior e uma área de conteúdo principal com uma barra lateral?
Precisamos redefinir essas suposições.
Ao invés de buscar inspiração na impressão, talvez devêssemos olhar mais para o design de software. Os aplicativos dos desktops têm sido muito copiados na web, principalmente em aplicativos para produtividade, e os resultados são normalmente intoleráveis. As interfaces de mais sucesso combinam as melhores características dos aplicativos de desktop com a interface já conhecida da Web – Pense em Gmail versus Yahoo!Mail.
Um pensamento semelhante está sendo usado agora em aplicações de conteúdo específico, em grande parte graças a introdução da Chrome Web Store (loja online do Chrome) em 2010. Este recurso deu aos desenvolvedores do Chrome um mercado para vender e promover aplicativos produzidos com os padrões web, e muitos criaram aplicativos para redirecionar o conteúdo disponível na Web.
O fato de esses aplicativos serem visualizados apenas com o uso do Chrome é um requisito enervante e digno de protesto. Mas, se olharmos para estes aplicativos a partir de um ponto de vista puramente visual e o compararmos aos seus correspondentes de sites tradicionais, podemos ver que uma tela branca livre de suposições pode entregar experiências mais aplicáveis a web.
Somente As Notícias que Podem Ser Impressas
Quando pensamos em websites inspirados por impressos, os jornais florescem em nossa mente. O site do New York Times apresenta um grid multi-column, denso e fixo. Como muitos sites contemporâneos, o conteúdo é sufocado por propagandas, widgets para compartilhamento e links relacionados:
A inadequação deste projeto se torna mais evidente quando comparado ao seu aplicativo Chrome (que, felizmente, é acessível em outros navegadores). O conteúdo vira o centro das atenções com uma interface menos confusa e mais focada, que também é responsiva – até certo ponto. Note que apresenta imagens menos fotográficas, apoiando a ideia de que as imagens responsivas podem ser problema apenas quando os designers tentam aplicá-las na impressão.
SITES ORIENTADOS A TAREFAS
Outro site que sofre com layouts lotados é o BBC Good Food:
Ainda assim, quando a página é visualizada em um aplicativo do Chrome, novamente podemos ver um layout mais focado; é bem mais fácil seguir uma receita quando não se tem que ficar rolando a página.
Conteúdo Não-Chrome (Outros Conteúdos)
Um último exemplo desta tendência pode ser encontrado no Rdio. Com a evolução dos serviços de música via stream, os designers do Rdio procuraram coerência entre seu website e a aplicação para desktop. Quando antes essas interfaces compartilhavam apenas alguns componentes, agora elas são praticamente as mesmas. Isto resultou em um projeto que fica em algum lugar entre os dois: não é bem um site, mas também não é aplicativo para desktop.
Assim como os aplicativos do Chrome para o New York Times e para o BBC Good Food, este empurrão em direção a uma interface mais parecida com um aplicativo resultou num foco intenso no conteúdo (neste caso, capas de álbuns), num layout mais fluído e numa navegação menos intrusiva.
Em alguns aspectos, a nova interface compartilha de algumas das qualidades da interface “Metro” da Microsoft, encontradas no Windows Phone e no Windows 8. Quando se considera que alguns dos princípios aplicados no layout do “Metro” incluem “Clean, light e open and fast”, “Content not Chrome” e “Ser verdadeiramente digital” seria difícil discutir que esses valores não podem ser aplicados igualmente em interfaces Web.
Claro que uma das razões para que esses aplicativos sejam tratados diferentemente dos websites tradicionais é a falta de propagandas – uma restrição não da Web, mas sim, dos modelos de negócios construídos em cima deles. A publicidade online está no caminho de uma longa e dolorosa morte: Anúncios estão ficando maiores e mais agressivos, enquanto os serviços para removê-los como o Adblock, Instapaper e Readability estão ganhando mais popularidade. Ainda assim, sem um modelo de negócios funcional para substituí-los, a exibição de anúncios provavelmente ficará conosco mais alguns anos.
Entretanto, isto não deve nos impedir de aprender algo sobre os designs inspirados em aplicativos. Na melhor das hipóteses, eles realçam uma alternativa possível para layouts e, como um serviço, podem se tornar mais desejáveis quando focado ao conteúdo.
A Jornada Continua
Ao entrarmos na terceira década de existência da Web, deveríamos adquirir mais senso do que “funciona” e do que “não funciona”. Deveríamos agora ter a confiança ao escolher que aspectos de outras mídias e outras plataformas nos inspirar e quais ignorar. Deveríamos nos inspirar por outras mídias e não nos deixar ser regidos por elas.
Com o princípio da universalidade como guia, podemos agregar abordagens de melhoria progressiva em todo o processo de design. Tudo na web, em última analise, precisa degradar-se a textos simples (imagens requerem legendas, vídeos precisam de transcrições), de modo que o editor de textos possa se tornar a ferramenta mais importante do designer.
Com o amadurecimento da web, devemos reconhecer e aceitar suas limitações – e a estética que essas limitações podem produzir. Quando o fizermos, poderemos descobrir que a verdadeira estética da web é acima de tudo visual.
—
Traduzido por: Márcia Arraes
Acesse o artigo original no A List Apart
