Uma não tão breve história do Design Metro | vNext: A maior Rede Social Nerd do Brasil | Libere sua Nerdice!
Brunno Pleffken, 25/04/201525/04/2015, Editorial,Windows,Windows Phone,Xbox, design,Metro,Modern UI,UX, 3 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
"Pivots": para serem usados em páginas internas, detalhes e listagens
"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.
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.
Novo dashboard do Xbox 360 em 2011, seguindo a filosofia de design Metro
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.
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.
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.
Microsoft aposta alto e exibe comercial do Xbox One durante o Fantástico
Fabio Teixeira, 18/11/201318/11/2013, Xbox, Microsoft,Xbox,Xbox One, 5 É bem difícil ver a Microsoft Brasil apostando alto. Por aqui a empresa parece se limitar aos mercados ao...	+
Qual a diferença entre os gostos de fãs da Apple e da Microsoft?
Filipe Machado, 10/10/201410/10/2014, Off Topic,Windows, Apple,Business Insider,Humor,Microsoft, 11 No campo de distorção da realidade os gostos são diferentes da turminha do Bill Gates? O Business Insider utilizou...	+
[Atualizado 27/07/12] Campanha: Xbox Live para o Brasil #XboxLiveToBrazil
Rony Deolindo, 27/07/201216/02/2013, Windows Phone, Brasil,jogos,Xbox Live, 47 Olá Galera ! Vejo que muitos de vocês etão bem frustados com os serviços que a Microsoft disponibiliza para...	+
Esta semana nos jogos Live: iStunt 2
Marcelo Wadeck, 27/03/201216/02/2013, Windows Phone, jogos,Xbox Live, 0 O lançamento desta semana nos jogos Live do Windows Phone é iStunt2, da MiniClip, que chega pelo valor de...	+
Microsoft confirma data de lançamento do Windows Phone 7. Dia 11 de Outubro
, 04/10/201004/10/2010, Windows, HTC,HTC Mondrian,LG Optimus 7,Microsoft,Samsung, 0 Essa veio para me fazer pagar língua. Eu havia falado no Podcast PDE #2 que o Windows Phone 7...	+
Microsoft abaixa resolução minima do Windows 8 para incentivar tablets de baixo custo
Fabio Teixeira, 29/03/201331/05/2013, Windows,Windows 8, Windows 8,Windows Blue,Windows RT, 5 A Microsoft mudou a resolução mínima requerida para um dispositivo utilizar o Windows 8 na interface metro para somente...	+
Novos comerciais do Windows Phone 7 tentam te resgatar de volta para a vida
, 26/09/201029/09/2010, Windows, HTC,HTC Mondrian,Microsoft, 2 Alguns comerciais sobre o Windows Phone 7 apareceram já na rede. Alguns mostrando somente vídeos de como o aparelho...	+
Veja o Windows Phone 7 Mango em ação no novo vídeo promocional da Microsoft
, 15/07/201115/07/2011, Windows, Vídeo, 5 Vídeo em alta definição do WP7 Mango mostra várias das novidades do que a Microsoft está chamando de "Novo...	Lojas da Nokia - finalmente - vão virar Microsoft Store no BrasilOs lados positivos e negativos do Windows 10 rodar aplicativos de iOS e Android	3 Comentários
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.
Faça login para responder	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.
Faça login para responder	NextCast 28: Street Build 2015 | Tenologia com opinião e de maneira divertida | vNext 2 anos atrás	[…] Uma não tão breve história do Design Metro […]