METRO DESIGN

Após o vazamento de algumas imagens e builds da nova versão do Windows, a interface Metro voltou a ser notícia.
Com a revelação do Windows 8, durante a conferência D9, foi confirmada a utilização da Metro UI como base para a interface desse SO. Mas no que consiste esse recurso que nos permite interagir com o sistema operacional? De onde ele veio? Quais são as características que o diferenciam?

O surgimento da Metro UI
A Metro UI (User Interface, ou Interface do Usário) é uma linguagem de design criada pela Microsoft para ser utilizada no seu sistema operacional móvel. Linguagens de design são arquiteturas para a construção de mecanismos que proporcionem interação entre as máquinas e as pessoas.

Atualmente, essa interface é usada no Windows Phone 7 e em alguns softwares da empresa, como o Zune HD e o Office Labs. Entretanto, a primeira aparição da Metro foi no Windows Media Center – ferramenta de gerenciamento multimídia da marca –, favorecendo o texto como forma principal de navegação.

Em sua essência, a Metro UI é baseada nos princípios clássicos da escola suíça de design gráfico. Segundo a Microsoft, o nome dado à linguagem de design representa toda a velocidade, autenticidade e modernidade da tipografia (processo de composição de textos) usada, bem como a constante “movimentação” do seu código – o que nos leva a crer que ele esteja em constante desenvolvimento.


Windows 8 com METRO DESIGN.


METRO Design é formado basicamente por quadrados coloridos ou preto e branco, dependente de sua escolha.

O metro design não é complicado e foi implementado mais ainda na web depois do windows 8, pela sua fama, implantar metro design em um site é muito fácil, utilizando apenas HTML, JS, CSS e Imagens você pode fazer um site em metro design...

Veja um simples exemplo: http://www.raafs.tk/ ( Este site não está completo )

A própria microsoft implantou METRO DESIGN em praticamente todos os seus apps recentes, tais como:
http://outlook.com/
http://www.microsoft.com/pt-br/default.aspx

Estes são os exemplos mais simples de metro design.

agora vamos ao código direto.

Para implementar um metro design é só fazer quadrados com efeito hover, bem simples.

Código:

 #quadrado1{
 width:100px;
 height:100px;
 background-color:#000066;
 }
 #quadrado1:hover{
 width:50px
 height:50px;
 background-color:#000077;
 }

Implementar METRO DESIGN é fácil, não tem segredo, são apenas quadrados com efeito hover aparente.
METRO Design não utiliza exclusivamente e somente quadrados, no final do post você encontrará algumas imagens que podem ser usadas.
Implante e mande uma imagem de como ficou seu "site" e irei enviar dicas exclusivas para cada um.

FreddyVsJason - Coordenador SS e METRO UI Designer

Muito básico:



Transporte:



Costura:



Equipamento de acampamento:



Telefonia:



Matemático:



Decisões:



Setas:



Para hosts:



Formas de pagamento:



Ícones sociais:



Para designers:




Para hosts 2:



Abaixo, extras: