A especificação de material design do Google foi originalmente destinada à plataforma Android como uma forma de sugerir consistência de design na plataforma.
01 de 06Como criar um cartão de desenho de material no Adobe Experience Design CC
Uma vez que os designers começaram a examiná-lo e entender o pensamento por trás dele, o Material Design silenciosamente se tornou uma das filosofias visuais mais influentes no design da web e de dispositivos móveis. Tudo que você precisa fazer para ver o que estamos fazendo é fazer uma pesquisa de Material Design no Pinterest e você verá centenas de exemplos e experiências em dispositivos, tablets e até mesmo sites.
O aspecto fascinante do Material Design é que o Google está pensando em como os aplicativos devem aparecer e funcionar em dispositivos móveis, mas os conceitos estão sendo aplicados a qualquer tela de qualquer tamanho em qualquer plataforma. Como o Google afirma no parágrafo de abertura da especificação, “nos desafiamos a criar uma linguagem visual para nossos usuários que sintetize os princípios clássicos do bom design com a inovação e a possibilidade da tecnologia e da ciência. Isso é design de material. Esta especificação é um documento vivo que será atualizado à medida que continuamos a desenvolver os princípios e especificações do design do material. ”
O material abordado, em termos muito gerais, é o papel e uma marca registrada do Material Design é o cartão. Pense em um cartão de índice em uma superfície e você está no caminho certo. Um cartão é um elemento que contém fotos, vídeos, links de texto e assim por diante, mas onde eles diferem da maioria dos designs interativos é que eles devem se concentrar em um único assunto. Os cartões têm cantos arredondados, contêm sombras fracas indicando que estão acima de uma superfície e, se estiverem todos no mesmo plano, serão chamados de “coleção”.
Neste "How To", vamos criar um cartão baseado na especificação. Em vez de criar o cartão com uma variedade de ferramentas de imagem e desenho, vamos chegar a ele de uma direção diferente. Vamos usar as ferramentas no Experience Design da Adobe, que atualmente está disponível apenas para o público e é gratuito. Você pode baixá-lo aqui.
Vamos começar.
02 de 06Criando o protótipo do Artboard no Adobe Experience Design CC
Não há nenhuma maneira evidente de criar uma tela do Android a partir da tela inicial no Experience Design CC (XD). O que costumávamos fazer quando abrimos o XD é selecionar a opção iPhone 6 e, quando a interface é aberta, selecionamos a ferramenta Artboard na parte inferior da Barra de ferramentas e selecionamos Android Mobile nas seleções no painel Propriedades à direita. Depois, mudamos para a ferramenta de seleção, clicamos uma vez no nome do iPhone e excluímos a prancheta. Não mais.
Na versão atual do XD, há uma pequena seta ao lado do iPhone 6 que, quando clicado, abre um menu suspenso. A partir daí, você seleciona a versão do Android Mobile e a área de trabalho do Android Mobile selecionada é aberta na interface.
Para garantir que tenhamos o espaço adequado na tela aberto para o cartão, geralmente vamos até o Sketch 3 e copiamos e colamos uma barra de status, uma barra de navegação e uma barra de aplicativos do modelo de design de material na prancheta. O esboço 3.2 contém um modelo de material design (Arquivo> Novo do modelo> Material design) e outro realmente bom é do Kyle Ledbetter que você pode obter aqui. Se você não tiver o Google Sketch, poderá copiá-los e colá-los nos adesivos XD encontrados em Arquivo> Abrir kit de interface do usuário> Material do Google. Você também pode baixá-los do Google para uso no Photoshop, Illustrator, After Effects e Sketch.
03 de 06Adicionando um cartão de material design a um Adobe XD CC Artboard
Um dos recursos mais úteis do XD é a inclusão de kits de UI para Apple iOS, Google Material e Microsoft Windows. Em muitos aspectos, eles adicionam a palavra "Rapid" ao termo "Prototipagem Rápida" e facilitam o trabalho do designer, já que os elementos comuns da interface do usuário não precisam ser constantemente recriados em um aplicativo de design como o Photoshop, o Illustrator ou o Photoshop. Esboço.
O elemento de interface do qual precisávamos era um cartão. Para chegar a isso, selecionamos Arquivo> Abrir kit de interface do usuário> Material do Google e o kit foi aberto como um novo documento. O elemento que precisávamos foi encontrado na categoria Cartões.
O que mais gostamos neles é que eles sigam a especificação do Material Design conforme as especificações do Content Blocks, bem como as especificações de formatação e espaçamento de texto apresentadas nas especificações da Tipografia.
O estilo de cartão que queríamos era o do canto inferior esquerdo. Nós simplesmente marqueamos com o mouse e o copiamos para a área de transferência. Infelizmente, o XD não contém uma interface com guias para documentos abertos. O que fazemos é mover a janela do documento aberto um pouco para revelar o que estamos trabalhando, selecioná-lo e colá-lo. Outra maneira de alternar rapidamente entre documentos XD abertos é pressione Command- '.
04 de 06Como editar um elemento de design de material no Adobe Experience Design CC
Quando o cartão no XD chega da área de transferência, não comece a trabalhar com ele. A primeira coisa que você precisa fazer é desagrupar o cartão porque você precisa de acesso aos bits e peças que compõem o cartão. Para fazer isso, selecione o cartão e selecione Objeto> Desagrupar ou pressione Shift-Command-G.
Seu cartão agora é composto de três partes:
- Caixa cinza clara para a imagem.
- Caixa cinza média para o texto
- A caixa traseira usada como plano de fundo.
O primeiro passo é excluir a caixa cinza claro. Seu único propósito é agir como um espaço reservado para a imagem, o que faz com que, se você escolher, seja opcional.
A caixa com o texto é na verdade um cinza escuro com 50% de opacidade. Essa caixa pode ser usada como fundo do texto e você pode alterar a cor e a opacidade da caixa.
Embora não seja imediatamente evidente, a caixa cinza claro segue as especificações de Material Design, pois seus cantos superiores são arredondados por 2 pixels. Tenha isso em mente se você estiver adicionando uma imagem. Ele também precisará dos cantos arredondados que podem ser adicionados a um aplicativo de criação de imagens ou no XD.
Vendo como este é o estado de repouso do cartão também precisa de uma sombra. A especificação deixa claro que há uma elevação em repouso do cartão de 2 pixels. Para adicionar isso, selecione a forma de fundo preto e defina os valores Y e B (Desfoque) como 2 no painel de propriedades.
05 de 06Como adicionar uma imagem ao cartão de material design no Adobe XD CC
Sabendo que a placa tem 344 pixels de largura e a área da imagem tem 150 pixels de altura metade da altura da caixa cinza clara Abrimos a imagem no Photoshop, recortamos no tamanho e a salvamos usando a opção @ 2x no Photoshop. Exportar como caixa de diálogo. A imagem foi importada para o Adobe XD.
Em seguida, arrastamos a caixa cinza clara sobre a imagem na área de trabalho e selecionamos Objeto> Máscara Com Forma. O resultado foi a imagem pegando os cantos arredondados da forma. Em seguida, movemos a imagem para sua posição final.
Com a imagem no lugar, alteramos a cor de fundo da caixa cinza médio, alteramos o texto e a cor do texto do link.
06 de 06Usando o recurso de grade CC do Adobe XD
Com o cartão completo, ele precisa ser colocado de acordo com as especificações do Material Design. Isso significa que há 8 pixels em cada lado da placa e a placa precisa estar 8 pixels abaixo da barra de aplicativos. Para fazer isso, clique uma vez no nome da prancheta e, no Painel de Propriedades, selecione Grade. A grade aparece sobre a prancheta.
O tamanho da grade padrão é de 8 pixels, o que acontece com o mesmo tamanho de grade para Material Design. Se você precisar de um tamanho diferente, altere o valor na área Grade. Se você quiser alterar a cor da grade, clique no chip de cores e escolha uma cor no Color Picker resultante.
Com a grade visível, clique no cartão e mova-o para sua posição final.
Para finalizar, selecionamos o cartão, clicamos no botão Repetir Grade e alteramos o espaçamento entre os cartões para 8 pixels também.
