09/08/2013 ♦ Interface gráfica

Design Autêntico

Esse artigo de Dmitry Fadeyev foi publicado originalmente em 16 de julho de 2013 na Smashing Magazine. A tradução para português é de Adriano Ribeiro.

A recente popularização do estilo “flat” de interface não é apenas uma tendência. É a manifestação de um desejo de maior autenticidade no design, um desejo de reduzir o excesso visual e eliminar o falso e o supérfluo.

Na criação de novas oportunidades, o progresso tecnológico muitas vezes leva ao excesso. No século 19, a produção em massa mecanizada permitiu que ornamentos fossem estampados de forma rápida e barata, levando a bens de consumo sobrecarregados de ornamentos. Algo semelhante ocorreu nos últimos anos, quando a computação gráfica permitiu aos designers criarem interfaces visualmente ricas, levando a excessos de estilo e de esqueumorfismo.

Em seu desejo de autenticidade, o movimento Modernista limitou o excesso ornamental do século 19, fazendo o design se adaptar a era da produção em massa. Hoje, nós estamos vendo o mesmo desejo de autenticidade se manifestando na tendência “flat”, que rejeita o esqueumorfismo e os excessos visuais para algo mais simples, mais limpo e mais focado em conteúdo.

O nascimento do Design Moderno

Em 1908, Adolf Loos, influente arquiteto austríaco, escreveu um ensaio provocativo intitulado Ornamento e Crime. O ornamentista moderno, segundo ele, era um “retardatário cultural ou um caso patológico. Ele próprio é forçado a renegar sua obra depois de três anos. Suas produções são insuportáveis ​​para pessoas cultas hoje, e se tornarão assim para outras pessoas em pouco tempo.” E com mais audácia ainda, Loos afirmou: “Quanto menor o nível cultural de uma pessoa, mais generosos são seus ornamentos. Para encontrar beleza na forma, em vez de fazê-la depender de ornamentos que é o objetivo para a qual a humanidade aspira.”

O que provocou tal ataque ao ornamento? Para entender a mentalidade deste pioneiro do design moderno, é preciso primeiro entender o estado do design no final do século 19.

O advento do motor a vapor marcou o início de uma era de produção em massa mecanizada. Como o crítico de arte Frank Whitford escreveu: “máquinas movidas a vapor podiam estampar, cortar e moldar quase todos os materiais mais rápido e melhor do que a mão humana. Produção mecanizada significa preços mais baixos e maiores lucros”.

Enquanto o método de produção passou do manual para a máquina, o estilo das mercadorias não mudou. A maioria dos produtos, desde a construção civil e mobiliário aos tecidos e talheres, foi adornada com uma capa opulenta de ornamento, construída sobre o grande espírito do Renascimento.

Um tinteiro apresentado na Grande Exposição de 1851
Um tinteiro apresentado na Grande Exposição de 1851, uma celebração das melhores produções mundiais. O uso de ornamentação aqui é extremo mas não atípico.

Historicamente, a decoração artesanal sempre foi algo caro para produzir, servindo como um símbolo de riqueza e luxo. Com o advento da mecanização, imitações desses tão desejados ornamentos puderam ser estampados de forma barata e rápida. Ao invés de parar e pensar sobre que tipo de projeto seria mais adequado para a produção em massa, os fabricantes aproveitaram a oportunidade para copiar esses estilos a baixo custo. O resultado foi uma enxurrada de produtos extravagantes, de baixa qualidade que Adolf Loos e outros pioneiros do design moderno criticavam.

Em A Arte Decorativa, o famoso arquiteto Le Corbusier afirmou sem rodeios que o lixo é extremamente decorado, e que “o objeto de luxo é bem-feito, organizado e limpo, puro e saudável, e sua nudez revela a qualidade de sua fabricação. É na indústria que acontece a reversão desse situação: um fogão de ferro fundido repleto de decoração custa menos do que um de superfície lisa, pois os ornamentos escondem as falhas da fundição.”

Montgomery Schuyler, um influente crítico e jornalista, condenou fortemente as fachadas ornamentadas do século 19 dizendo: “Se você tivesse que raspar a superfície dos edifícios dessas ruas, você iria achar que simplesmente removeu toda arquitetura e que havia deixado os edifícios tão bom como antes.”

Edifício da loja Harrods
O edifício atual da Harrods em Londres foi concluído em 1905 pelo arquiteto Charles William Stephens. A fachada é típica da arquitetura Vitoriana. (Imagem: Michael Greifeneder)

Louis Sullivan, arquiteto conhecido como “o pai dos arranha-céus”, pediu moderação sugerindo que “seria ótimo para nosso bem estético nos abstermos totalmente do uso de ornamento por alguns anos, a fim de nos concentrar intensamente na produção de edifícios bem feitos e graciosamente desnudos.” Abaixo está uma imagem de um dos edifícios de Sullivan. O piso térreo é decorado, mas os andares superiores são surpreendentemente modernos para um projeto do século 19, especialmente quando contrastado com a Harrods.

Edifício da loja Harrods
O edifício da loja Carson Pirie feito por Louis Sullivan foi originalmente projetado em 1899 por Schlesinger & Mayer. A simplicidade dos andares superiores aqui é impressionante para um edifício do século 19.

Durante os anos 20, um novo movimento surgiu na Alemanha conhecida pela palavra intraduzível Sachlichkeit, que tem um sentido de “factual”, “verdadeiro”, “prático”, “objetivo”. O movimento Neue Sachlichkeit no campo do design procurou utilidade pura. O arquiteto alemão Hermann Muthesius explicou como essa ideia de utilidade poderia ser aplicado ao estilo, para produzir algo que ele chamou Maschinenstil, ou “estilo da máquina.” Em suas próprias palavras, encontramos exemplos desse estilo em “estações ferroviárias, salas de exposições, pontes, navios a vapor, etc. Aqui estamos confrontados com um profundo e quase científico Sachlichkeit, com a abstinência de toda a decoração exterior e com formas completamente ditadas pelos fins que se destinam a servir. ”

Ao invés de atacar o ornamento, outros pioneiros do design moderno se concentraram em elevar a funcionalidade da forma ao pedestal. Em 1934, uma exposição sob a curadoria do arquiteto modernista Philip Johnson foi realizada no Museu de Arte Moderna de Nova York, intitulada Machine Art. Na exposição estavam várias peças de equipamentos mecânicos, como hélices de avião e isoladores industriais. A idéia era destacar a beleza da forma em objetos que eram puramente funcionais. Para o movimento do design moderno, a decoração não era necessária. Beleza e elegância surgem a partir do próprio conteúdo, e não a partir de uma camada superficial de decoração.

Edifício da loja Harrods
Este bule foi projetado por Naum Slutzky, ourives, designer industrial e mestre artesão de Weimarer Bauhaus. O design limpo e utilitário não tem um traço de ornamento - uma solução quase matemática para o problema dado.

Somente na metade do século 20 é que o movimento modernista prevaleceu, e finalmente estilos e técnicas tradicionais foram superados por novas abordagens. Em seu livro Twentieth-Century Design, Jonathan Woodham observa que a estética moderna foi caracterizada por “formas geométricas puras, o uso de materiais modernos como o aço cromado e vidro, e superfícies planas articuladas pela manipulação abstrata de luz e sombra . O uso da cor foi muitas vezes contido, com ênfase em branco, branco gelo, cinza e preto.” O design moderno havia derramado o revestimento rico do ornamento e ao invés disso procurou beleza na fusão harmoniosa entre forma e função.

Seria errado dizer que o movimento do design moderno como um todo foi caracterizado como contrário ao ornamento. Novos estilos iam e vinham, como os movimentos populares de Art Nouveau e Art Deco. Alguns estilos, como o Futurismo, eram carregados de uma estética tecnológica exagerada, enquanto outros, como o De Stijl, buscaram a harmonia em uma limitada paleta de cores e formas. Mas subjacente às variações de estilo, foi um movimento constante para longe do enfeite desnecessário, um movimento em direção a uma forma mais limpa e mais contida de design, cuja beleza estava no estilo e na forma do conteúdo em si, ao invés da decoração externa.

Ornamento Digital

Se compararmos a história do design moderno com a nossa curta história do software e do web design, um paralelo pode ser visto. Da mesma forma que a produção em massa mecanizada resultou em um excesso de ornamento, os avanços na computação gráfica resultaram no uso intenso de decoração em interfaces de softwares e websites. Designers, nos primeiros anos da Web foram especialmente exploratório nesta frente, com animação e som, juntamente com imagens para produzir experiências excessivamente ricas e muitas vezes extravagantes.

Os primeiros sistemas operacionais com interface gráfica possuíam uma interface bem simples. Metáforas do mundo real eram usadas ​​onde fosse possível, como imagens de pastas para representar diretórios de arquivos e botões com chanfros para o usuário saber que poderia clicar sobre eles. Mas a estética geral foi bastante plana e contida. Independentemente se o designer gostaria de entregar uma experiência visual mais rica, ele era limitado pela baixa resolução das telas em preto e branco.

Mac OS 1
Usando somente duas cores para a primeira interface gráfica do Mac OS, a Apple conseguiu transmitir profundidade, texturas, botões e ícones que imitavam os objetos da vida real. A aparência da interface foi limitada pela tecnologia, não pelo designer.

Conforme a tecnologia evoluiu, os designers tiveram maior liberdade visual nas suas interfaces. Com o Windows XP, a Microsoft introduziu um estilo todo colorido, com uma aparência um tanto física, com abundância de luzes, sombras e gradientes.

A Apple foi ainda mais longe com o lançamento do Mac OS X, usando bolhas de plástico, alumínio escovado e ícones realistas na sua interface. Conforme o tempo passava, a intensidade do estilo visual dos sistemas operacionais cresceu. A Microsoft deu ao Windows um brilhante e transparente tema, enquanto que a Apple introduziu ainda mais materiais e sugestões esqueumórficas ao seus sistemas para computador de mesa e dispositivos móveis, como texturas de couro no aplicativo de calendário e efeitos de página virada em seu leitor de livros.

Windows Vista
A interface do Windows Vista apresentou o tema Aero, com suas janelas brilhantes, translúcidas e cromadas.

Estilos que imitam objetos e texturas da vida real são denominados “esqueumórficos” – ou seja, elementos de design baseados em símbolos emprestados do mundo real, com a finalidade exclusiva de fazer uma interface parecer familiar para o usuário. Recentemente, os designers começaram a questionar a lógica de fazer um aplicativo de anotações parecer um bloco de papel, ou de simular couro e efeitos de página virando em um aplicativo de calendário. Estes efeitos fornecem apelo visual, mas também são relíquias de um outro tempo, relíquias que amarram uma interface a objetos reais estáticos que são incompatíveis com a fluidez e o dinamismo das interfaces digitais.

Calendário do OS X
A versão atual do calendário do OS X apresenta uma textura de couro costurado e bordas de papel rasgado para dar a aparência de um calendário físico.

No a última versão do Windows 8, a Microsoft deu um passo corajoso para longe de tais recursos visuais supérfluos, tentando dar ao seu sistema operacional um visual totalmente digital e “autêntico”, segundo a própria empresa. A interface atual é construída sobre os princípios que a Microsoft desenvolveu para seus dispositivos móveis anteriormente, apresentando ao usuário uma estética que é totalmente desprovida de texturas ou imitações de objetos da vida real.

O Windows 8 se baseia em tipografia, espaçamento e cor para trazer ordem e elegância para a tela digital. Efeitos reais e estilos supérfluos são descartados, e tudo o que resta é simplesmente o conteúdo em si. Assim como Muthesius citou as estações ferroviárias como exemplos de Maschinenstil, os designers da Microsoft usaram as estações ferroviárias como fonte de inspiração para a nova interface do Windows, inicialmente conhecida como “Metro”.

Os blocos dinâmicos (live tiles) do Windows 8 na tela inicial
A tela de inicial do Windows 8 rompe com o padrão de desktop antigo, sendo composto de blocos dinâmicos (live tiles) planos e coloridos, em vez de ícones. Os blocos não são meramente uma escolha visual: eles permitem que a informação útil seja apresentada na tela inicial na forma de um painel de controle.

A Web passou por uma transformação semelhante nos últimos anos. No início, os layouts feitos em tabelas e Flash deram aos desenvolvedores controle sobre cada pixel de suas interfaces, e por isso os designers não hesitaram em criar recipientes visualmente ricos para seu conteúdo. Quando começamos a compreender a fluidez do novo meio e desconectar a apresentação do conteúdo usando CSS, o web design tornou-se mais contido. Recipientes altamente decorados não podiam mudar sua largura e posições facilmente, por isso os designers usaram menos imagens e privilegiam o simples estilo CSS para fazer seus layouts mais adaptáveis e fáceis de atualizar.

A mais recente evolução do design responsivo (que é a adaptação de uma única página para atender diferentes tamanhos de telas e dispositivos), bem como o movimento entre designers para trabalhar diretamente no código desde o início, pulando editores visuais como Photoshop, move-nos ainda mais para uma estética simples e focada no conteúdo, que deriva sua beleza da tipografia, espaçamento e cor ao invés do uso intenso de texturas e imagens decorativas.

Mais recentemente a Apple, líder do esqueumorfismo, deu o primeiro passo para a autenticidade digital em sua última versão de sistema operacional móvel, o iOS 7. Já vão longe as texturas de couro costurado e bordas de papel rasgado, substituídos por uma interface minimalista, predominantemente plano, com ícones simples e coloridos, e superfícies semi-translúcidas.

Comparação entre as interfaces do iOS 6 e 7 da Apple
O iOS 7 da Apple 7 é um abandono radical do esqueumorfismo. O design antigo do aplicativo de calculadora do iOS está à esquerda e o outro para iOS 7 à direita. A textura granulada, botões chanfrados e vidro brilhante se foram, substituídos por uma interface predominantemente plana e funcional.

Design Autêntico

O que une os primórdios do design moderno com as mudanças atuais do web design é o desejo de autenticidade. Esta unidade para uma maior autenticidade é o que levou os designers a eliminar os ornamentos do seu trabalho há cem anos atrás, e é essa força que está movendo o design digital hoje em direção a uma estética mais limpa, mais funcional. Mas o que exatamente torna o design “autêntico”?

Design autêntico tem como objetivo trespassar a falsidade e eliminar a superfluidade. Design autêntico é sobre o uso de materiais sem mascará-los em texturas falsas, mostrando seus pontos fortes ao invés de tentar esconder suas fraquezas. Design autêntico é sobre acabar com funcionalidades que fazem um produto parecer familiares ou desejável, mas que não servem para nada. Design autêntico é sobre a representação da função em sua forma mais ideal, sobre ter convicção na elegância através da eficiência. Design autêntico é sobre deixar cair as muletas de ornamento externo e encontrar beleza no conteúdo puro.

No design autêntico, o estilo é importante, mas não é perseguido através da decoração. Ao contrário, a beleza da forma depende do seu conteúdo, com o estilo sendo um resultado natural de uma solução criativa. Como Deyan Sudjic comentou sobre o design icônico da lâmpada Anglepoise, “Como a lâmpada parecia – em especial, a forma de sua sombra – era uma espécie de segundo plano. Mas isso fazia parte de seu apelo. Sua forma simples deu uma certa inocência que sugeriu a autenticidade, assim como as primeiras versões do Land Rover que tinham o tipo de credibilidade que vem com um design baseado em uma idéia tecnicamente engenhosa, ao invés do desejo de criar um produto de consumo sedutor.”

A luminária Anglepoise
O desenho da lâmpada Anglepoise é uma solução engenhosa para um problema real. Mas a forma resultante, que é uma solução eficaz, acaba por ter o seu próprio fascínio estético.

No design digital a autenticidade pode ser grosseiramente resumida da seguinte forma:

  • Abrace a aparência digital. Não temos para imitar texturas como metal, madeira e couro em uma tela de computador. Não é disso que uma interface digital é feita, e fingir que é não faz sentido. Isso não quer dizer que um design deva ter somente fundos de cores chapadas, significa que não devemos tentar imitar ou estar restritos às texturas do mundo real.
  • Livre-se do esqueumorfismo. Um livro digital não precisa imitar o papel, como virar uma página, nem um aplicativo de anotações precisa parecer um bloco de papel físico, com uma capa de couro, bordas rasgadas e uma letra manuscrita. Esqueumorfismo nem sempre é ruim, mas sempre cria limitações desnecessárias na interface. Por exemplo, enquanto um bloco de papel é estático e unidimensional, uma interface digital não é, mas desde que a interface é feita para imitar um bloco de papel, ela deve seguir as restrições da metáfora física.
  • Fazer o estilo centrado no conteúdo. Concentre-se no conteúdo e não no estilo e na decoração. Você pode achar que isso é banal, mas quantas vezes você já notou um tema pronto em um website? Um tema é sempre construído sobre o conteúdo fictício e sendo assim, por sua própria natureza, jamais é uma representação ideal do conteúdo que ele irá conter. Construir temas com texto fictício leva o designer a se concentrar em estilo e decoração, em vez de conteúdo, porque não há conteúdo ainda para trabalhar. Só quando você trabalha com o conteúdo real é que pode realmente começar a transformar função em forma.

Não Minimalismo

Design onde a beleza está na função não é o mesmo que minimalismo estilo minimalista. No primeiro caso, o designer procura eliminar o supérfluo para tornar o produto mais fácil de entender, para melhorar seu desempenho e explorar ao máximo seu próprio meio. O último procura criar uma estética minimalista, para dar ao objeto uma aura de simplicidade e limpeza. Um é princípio fundamental do design, o outro uma escolha estilística.

flatui_mini
Flat UI

Seria um erro aplicar de forma rígida uma concepção estética minimalista a uma interface na esperança de torná-la mais simples e digitalmente “autêntica.” Eliminar totalmente elementos visuais como sombras, cores e fundos, não necessariamente torna uma interface mais fácil de usar. Em alguns casos, aconteceria o oposto, acabando com a hierarquia e o foco, que foram estabelecidos por essas mesmas sombras e cores de fundo.

Outlook 2013
A interface do Outlook 2013 foi atualizada de acordo com o tema moderno do Windows 8. Mas com a interface chapada, todos os conteúdo e menus foram fundidos em num único plano, tornando-se mais desordenado como resultado final.

Em As Leis da Simplicidade, John Maeda postula, “A maneira mais simples de atingir a simplicidade é por meio da redução cuidadosa. Em caso de dúvida, basta remover. Mas tenha cuidado com o que você remove.” O aviso final é importante. Remover algo muitas vezes leva a simplicidade apenas porque o usuário tem menos itens para processar. Mas remover pistas visuais que ajudam o usuário a processar mentalmente a interface – como elementos gráficos que agrupam itens, que diferenciam botões e etiquetas e que criam destaque – pode fazer exatamente o contrário, dando mais trabalho ao usuário. Então, ao invés de orientar o design ao estilo, oriente pelo princípio.

Por que o Design Autêntico é Importante

O aplicativo Rise é um perfeito exemplo de design digital autêntico. O despertador de relógio é um problema que já foi resolvido, mas a Simplebots decidiu abordar o conceito do zero, repensar a interface no contexto de uma tela puramente digital.

O aplicativo Rise
No aplicativo Rise, o usuário define o tempo com um inovador controle deslizante em tela cheia, com a cor de fundo mudando para refletir a cor do céu.

A interface do Rise possui um controle deslizante de tela cheia, com uma cor de fundo que muda para refletir a cor do céu de acordo com o horário em que você definiu. Ele não demonstra nenhuma tentativa de imitar um relógio físico ou um slider ou texturas reais. Em vez disso, os designers abraçaram a tela de toque do telefone móvel, criando uma experiência que é projetada a partir do zero para extrair o máximo do seu meio. O design inovador não só contribui para uma excelente experiência do usuário, mas eleva o aplicativo acima dos outros no mercado.

Uma interface como a do Rise só é possível quando você enfrenta um problema de design totalmente dentro do contexto da tela digital, ao invés de traduzir as soluções do mundo real. A tela digital permite formas abstratas, animação, cores vivas e tons uniformes. Ele não precisa estar limitada a uma paleta vencida ou representação estática, nem deve ser vinculado a formas esqueumórficas. Ao descobrir a melhor forma de representar o conteúdo usando uma grade de pixels, podemos chegar a melhores e mais simples soluções, interfaces inovadoras que se sentem em casa na tela, projetos que proporcionam uma melhor experiência do usuário e que se destacam da multidão.

A recente popularização do estilo “flat” de design pode ser uma tendência, mas também é a manifestação do desejo de uma maior autenticidade no design, um desejo de reduzir decorações supérfluas e focar no conteúdo em si. O progresso tecnológico por vezes leva ao excesso, como a produção em massa mecanizada fez no século 19, quando usou o ornamento em demasia, e como a computação gráfica fez durante os primeiros anos do web design. Mas o excesso ornamental foi controlado ao longo do tempo pelos pioneiros do Modernismo, que buscavam a beleza na função, e os excessos de hoje em software com o tempo serão controlados por um desejo subjacente de autenticidade no design.

Referências

  • Bauhaus, Frank Whitford (2010: Thames & Hudson)
  • Twentieth-Century Design, Jonathan M. Woodham (1997: Oxford University Press)
  • Pioneiros do Design Moderno, Nikolaus Pevsner (1991: Penguin Books)
  • A Linguagem das Coisas, Deyan Sudjic (2009: Penguin Books)
  • As Leis da Simplicidade, John Maeda (2006: MIT Press)

Esse artigo de Dmitry Fadeyev foi publicado originalmente em 16 de julho de 2013 na Smashing Magazine. A tradução para português é de Adriano Ribeiro.