Uma não tão breve história do Design Metro

A linguagem de design Metro não é um conceito novo dentro da Microsoft. Ao contrário do que se pensa ela não surgiu com o Windows Phone e também não surgiu com o Zune. Essa interface poderia não ter um nome definido antes, mas o conceito de formas geométricas e forte ênfase à tipografia já existe há mais de 15 anos dentro da Microsoft. Ela apenas evoluiu para a forma como conhecemos hoje no Windows Phone e no Windows 8, e continuará evoluindo para a forma como estamos vendo no Technical Preview do Windows 10.

Já abordamos sobre isso no NextCast 15, em que falamos sobre a morte – ou seria evolução? – do design Metro. Mas vamos entender um pouco de conceito artístico e vasculhar alguns softwares antigos para saber como a Microsoft chegou no que chamamos hoje de “Modern UI”.

 

BAUHAUS E O ESTILO TIPOGRÁFICO INTERNACIONAL: O ESTILO SUÍÇO

Embora não tão claramente no sistema operacional em si, de janelas e menus, mas em aplicativos Metro ou que exigem uma interface mais trabalhada (como softwares multimídia) a Microsoft segue fortemente um estilo de design conhecido como Estilo Tipográfico Internacional (NOTA: link muito bom!), ou apenas Estilo Suíço. Essa influência é um dos motivos pela qual a Modern UI da Microsoft não tem como ser comparado com o Material Design da Google, muito menos o da Apple. Todos são baseados no atual conceito de “flat design”, mas as linguagens e influências do design tradicional (como arquitetura e design gráfico) são totalmente diferentes.

O Estilo Tipográfico Internacional surgiu na Suíça na década de 50 e se caracteriza pela limpeza, legibilidade e forte presença da tipografia não-serifada como elemento de design, assim como o uso mesclado de peso de fontes – negrito ou fontes finas – para semântica de conteúdo. Esse estilo de design influenciou a criação de uma das fontes mais conhecidas mundialmente: a Helvetica.

A Bauhaus foi uma escola de design que prezou pela simplicidade da forma, se mantendo distante de floreios e decorações como no Art nouveau, e se focando na funcionalidade. A era da informática é cheia de momentos em que a interface gráfica procurou imitar elementos do mundo real: o vidro do Windows Vista, o aço escovado do Mac OS X “Panther”, assim como sombras, reflexos, dégradés, etc. Isso se chama esqueumorfismo e são tentativas de aprimorar a experiência de uso sem acrescentar nenhuma funcionalidade adicional (veja bem, estamos falando de funcionalidade, e não de experiência de uso).

A filosofia de “o conteúdo é a interface” é a base da Bauhaus e do design Suíço, e se tornou a base da Modern UI.

 

WINDOWS NEPTUNE E POCKET PC

Em 1999 a Microsoft estava trabalhando num sistema operacional na época conhecido como Windows Neptune, para ser o sucessor do Windows 98 usando a base do Windows NT. Este sistema nunca saiu da fase de testes, mas serviu como base – juntamente com o Windows Odyssey (que seria o sucessor do Windows 2000) – para o que conhecemos hoje como Windows XP. Inclusive os Hubs do Windows Neptune serviram de inspiração para o Hub de Pessoas do Windows Phone. Mas enfim…

O Windows Neptune apresentava em alguns programas multimídia uma interface adaptada para facilitar a vida do usuário, chamada de Forms+. Esses programas foram chamados de Activity Centers, e continham programas como o Music Center, Communication Center e o Photo Center, com todas as informações apresentadas de forma clara e amigável.

activity-centers

A interface desses programas foi provavelmente inspirada na enciclopédia Encarta e lembra muito a interface Modern UI como conhecemos no Windows Phone. A ausência de quadros, iconografia flat (como no “avançar” e “voltar”), a separação de conteúdos importantes dos nem tão importantes usando apenas a tipografia. O Activity Center seria implantado também no Windows ME, mas ele foi cancelado juntamente com o Windows Neptune e o Odyssey.

Mas o mais interessante ainda vem…

O Windows Neptune iria implantar também o conceito de “start page”, ao invés de apenas o menu Iniciar convencional que continuaríamos a ver no Windows XP. Sua interface – assim como seu conceito – lembra, e muito, a tela Inicial e a UI dos aplicativos Metro Modern do Windows 8.

windows-neptune-startscreen

Por incrível que pareça, podemos achar diversos elementos com esse “estilo Microsoft” até no antiquíssimo Microsoft Pocket PC 2000. Olhando a imagem, parece até uma mistura de Windows 3.1 com Windows Phone.

pocket-pc-2000

 

MICROSOFT ENCARTA

Um dia foi nossa enciclopédia digital preferida. Com o advento da Internet e da Wikipédia, a enciclopédia Encarta caiu no esquecimento e foi descontinuada. No entanto ela foi pioneira para o design Metro da forma como conhecemos hoje. A Encarta, devido ao seu foco no conteúdo, obviamente, foi o momento ideal para usar o conteúdo como forma.

Não existem quadros cercando o os textos. Não existe um retângulo com um plano-de-fundo escrito “Título”. Apenas a tipografia define a semântica do conteúdo, e o foco é no conteúdo! Como toda enciclopédia deve ser.

encarta-2000-a

Apresentando elementos desde a versão Encarta 95 – bem antes de qualquer sistema operacional ou aplicativo nativo do sistema – essa linguagem de design orientada à tipografia se mostrou mais forte na Encarta 2000. Semântica de conteúdo definidos pela tipografia, ausência de quadros, iconografia monocromática quando a tendência na época era o esqueumorfismo e imitações de 3D (vide a Internet em meados de 2000), tudo isso está presente nas enciclopédias Encarta 2000, 2001, até a Encarta Reference Library 2003.

encarta-2002

No Encarta 2005 (assim como no Windows Mobile 5) essa linguagem de design flat já estava praticamente posposta, provavelmente devido à influência dos esqueumorfismos, luzes e sombras do desenvolvimento do Longhorn, que futuramente se tornaria o Windows Vista, que teria sua interface nomeada de Aero.

 

WINDOWS MEDIA CENTER

Com o nascimento do Whistler (codinome do Windows XP) no início dos anos 2000, a Microsoft continuou a direcionar estratégias para usuários e dispositivos clientes, resultando na ideia do Media Center (nomenclatura claramente inspirada no Activity Center do Windows Neptune). Com o Windows XP foi lançado também o Windows Media Center, o maior passo dado pela Microsoft na criação da sua nova tendência de linguagem de design para produtos multimídia, ao invés da tradicional interface Luna, usada no Windows XP.

windows-media-center-1

Apesar das sombras e transparências que influenciariam no desenvolvimento da futura interface Aero, o Windows Media Center tem tudo aquilo que consolidaria a Modern UI: blocos dinâmicos, grande ênfase na tipografia, ausência de quadros, navegação horizontal em abas (que no Windows Phone chamamos de pivots) e o início do uso da fonte Segoe UI como padrão.

 

ZUNE, WINDOWS MOBILE 6.5 E SOFTWARES DESKTOP

Ah, grande Zune! Esse dispositivo móvel de músicas foi lançado em 2006 para bater de frente com o iPod, da Apple. Nunca conseguiu o sucesso esperado e foi descontinuado em 2011, mas seu legado é inquestionável. Desenvolvendo um dispositivo móvel touchscreen, a Microsoft reaproveitou a interface do Windows Media Center, mas totalmente renovada, com um maior enfoque em tipografia limpa e menos dégradés, ícones, janelas e quadros, além do extenso uso da fonte Segoe UI, fonte que se tornaria padrão em todos os sistemas da Microsoft.

zune-hd

Inclusive o software desktop para sincronização foi desenvolvido usando essa linguagem de design (mais tarde este mesmo software foi atualizado para uso no Windows Phone 7). E segue-se a mesma filosofia: ênfase no conteúdo. Os únicos quadros que vemos são as linhas das barras de rolagem.

zune-software

O software desktop do Zune recebeu o mesmo estilo de design do dispositivo portátil

Seguindo a mesma tendência aplicada no Zune, o Windows Mobile 6.5 também recebeu um novo launcher, com interface claramente baseada no Zune: forte uso de tipografia e ausência de ícones. Embora com um gostinho da interface Aero do Windows Vista, o Windows Mobile 6.5 foi o primeiro uso de elementos da interface Metro em smartphones.

windows-mobile-6

Com o tempo, a filosofia de design Metro iniciada com o Windows Media Center foi chegando aos outros softwares desktop. Dentre eles podemos citar as últimas versões do Windows Live Messenger e do Windows Live Mesh.

windows-live-mesh windows-live-messenger

 

 

 

 

 

COM VOCÊS… O WINDOWS PHONE 7

O Windows Phone 7 foi desenvolvido com base no Windows Mobile 6.5, e trouxe a nova linguagem de design Metro definitivamente às massas. Apresentando uma interface gráfica praticamente monocromática, herdada do Zune, o Windows Phone também incorporou muitos elementos do Windows Media Center, como a navegação horizontal e os pivots.

A influência do Estilo Tipográfico Internacional (Design Suíço) é mais forte do que nunca, assim como é interessante notar que, da mesma forma como no Zune, não há textos em itálico ou sublinhados. Pois a semântica de conteúdo é definida pelo peso das fontes e o tamanho delas, e não pela sua ornamentação. Além da Bauhaus e do Design Suíço, o design Metro tem um outro pilar que a Microsoft chamou de “Motion”. Movimento. Fluidez.

windows-phone-motion

No Windows Phone há dois modos de navegação horizontal: os pivots e o panorama. A intenção do panorama é de ser uma tela inicial com destaques, imagens, galerias, vídeos e títulos, com um grande título no topo com uma imagem de plano de fundo se movendo em paralaxe. Enquanto a intenção do pivot é para páginas internas, de listagem e detalhes de conteúdo. Tendo isso como base, tem-se a conclusão que o maior tropeço dos desenvolvedores foi confundir as duas coisas: usar os pivots para todo o aplicativo! Isso empobreceu demais o design dos aplicativos para Windows Phone, uma das principais críticas à plataforma.

windows-phone-7-pivot

“Pivots”: para serem usados em páginas internas, detalhes e listagens

windows-phone-7-panorama

“Panorama”: usado em telas iniciais e conteúdos dinâmicos/multimídia. Um dos conceitos mais lindos no Windows Phone!

O Windows Phone também trouxe um novo elemento que veio pra ficar e definiria o design de todos os seus futuros produtos: as Live Tiles. Quadros coloridos que exibem informações em tempo real. As Live Tiles foram baseadas no conceito de Active Desktop que existia desde a época do Windows 95, e dos widgets, que apareceram no Windows Vista, que se consistia em exibir informações em tempo real de cada programa sem a necessidade de iniciá-lo. As Live Tiles são a base do Windows Phone e a base do Windows 8.

Com o Windows Phone a Microsoft adotou definitivamente essa nova linguagem de design e a batizou de “Metro”. Ao longo dos anos seguintes, vários produtos – inclusive sites – da Microsoft passariam a seguir essa nova linguagem de design flat.

 

XBOX 360

O Xbox foi o penúltimo dispositivo da Microsoft a receber a interface. Na E3 2010 a Microsoft apresentou o novo software de seu console, com uma interface totalmente renovada e com o Dashboard baseado no mesmo estilo do Windows Phone 7.

xbox-dashboard-2011

Novo dashboard do Xbox 360 em 2011, seguindo a filosofia de design Metro

 

WINDOWS 8

Ao melhor estilo “ame ou odeie”: Windows 8. Lançado em agosto de 2012, foi o último dispositivo a adotar o Metro, posteriormente rebatizada de Modern UI. No Windows 8 a Microsoft acabou com o menu Iniciar e trouxe para o usuário uma tela Inicial baseada no Windows Phone, com Live Tiles espalhadas pela tela mostrando notificações em tempo real. Como dito anteriormente, tal conceito não é novidade pois no Windows 95 existia o Active Desktop e o Windows Vista veio com os widgets, ambos com objetivos semelhantes.

windows-8-startscreen

A princípio o Windows 8 foi pensado em dispositivos touchscreen como tablets e notebooks conversíveis (um novo nicho de mercado popularizado pelo Windows 8). Sua navegação totalmente baseada em gestos foi inovadora quando comparado ao iOS ou Android na época e torna o uso do tablete muito agradável e rápido. No entanto seu uso se tornou complicado com a dupla mouse + teclado, exigindo uma curva de aprendizado maior e levando os usuários ao downgrade para o Windows 7. Alguns desses problemas de usabilidade com mouse e teclado foram corrigidos no Windows 8.1 mas o estrago já havia sido feito.

 

E A VIDA SEGUE… VEM “NI MIM”, WINDOWS 10

O Windows 10 é um novo marco para o design dos softwares da Microsoft. Não apenas pelo fato do Windows 10 ter incorporado o design Modern UI para além do menu Iniciar, mas também por modificar profundamente a maneira como o design Metro tradicional do Zune e do Windows Phone 7 foi concebido.

No Windows 10 não estamos limitados a quadrados. Há elementos circulares como fotos de usuários e toggle switches (os botões on/off). A dupla pivot/panorama tem dado mais espaço para os chamados “menus hambúrgueres”, populares no iOS e no Android. Podemos pensar como uma ruptura da Modern UI, uma quebra de paradigmas, uma “poluição” do design Metro atual… Mas podemos também parar pra pensar que a Microsoft não está enfatizando o design Metro propriamente dito, ela enfatiza a simplicidade e a clareza, conceitos defendidos pela Bauhaus e pelo Design Suíço.

mdl2-windows-10-compare

Da interface Luna do Windows XP, ao Aero do Windows Vista e Windows 7, até a interface Metro/Modern UI do Windows 8 e Windows 10. Vemos toda uma trajetória – e até mesmo uma coesão – da maneira como a Microsoft vem tratado o design de seus softwares.

A Microsoft sempre foi uma empresa de vanguarda, idealizando o futuro, mesmo às vezes não acertando muito em cheio: sistemas operacionais centrados na Web (como os Windows Neptune e Odyssey), consoles que são centrais multimídias como o Xbox One (idealizado ainda na época do Windows XP com o Windows Media Center), computadores touchscreen por todo o lado como o idealizado no Windows 8 (e anteriormente pelos Tablets PCs), e uma quebra no conceito de smartphone como simplesmente uma grade de ícones de apps espalhadas pela tela (como feito no Windows Phone).

O Windows 10 ainda está em Beta, mas vamos ver como as coisas evoluirão até daqui 10 anos.

3 Comentários
  1. Paulo Ridgeford 2 anos atrás

    Excelente! Perfeito! Adorei a materia!
    Nao gostei dessa ruptura. Está mais para poluição como disseram. Esses hambúrguer menus e as novas toggles switches realmente não ficaram legais. A Microsoft deveria continuar investindo no Metro Design. Eu queria ver o fim do desktop no Windows 10! Amo o Metro Design! Esta é o principal motivo pelo qual gosto do Windows Phone.

  2. Echer 2 anos atrás

    Verdade! Excelente materia. Bons tempos e muita inspiração. Eu adoro estilo Metro anterior ao W10. Vamos ver a evolução daqui pra frente. Ah! também não devemos esquecer da contribuição das obras de Piet Mondrian. Adoro o estilo deste cara.

  3. […] Uma não tão breve história do Design Metro […]

Envie uma Resposta

©2017 vNext. Todos os direitos reservados.

ou

Fazer login com suas credenciais

ou    

Esqueceu sua senha?

ou

Create Account