Os segredos do design baseado em cartões
Então você quer entrar na tendência com uma interface estilo cartão? Essa é provavelmente uma ótima ideia; Os cartões são uma opção popular e de fácil utilização para todos os tipos de design digital em diversos tamanhos de dispositivos.
A chave para um design de cartão é criar algo que os usuários querem clicar. (Essa é a chave para um ótimo cartão.) Um cartão deve servir como um contêiner para um bit específico de conteúdo - link de conteúdo, inscrição, player de vídeo e assim por diante - com o qual os usuários desejam interagir.
Veja como você o projeta ...
Comece com um contorno preto e branco
Parece bem simples: comece com um wireframe preto e branco para o design. Pense na intenção do cartão e em quais partes ele será clicado ou tocado. (O cartão inteiro pode servir como um link.)
Planeje elementos como espaçamento, imagens e tipografia para que você possa ver o cartão sem cor ou enfeite. Pense nisso como a fase de “baralho” do design. Todos os elementos do cartão estão lá. Parece uma estrutura que é fácil de entender?
Pense em como você o usaria nesse estágio. Onde você clicaria para uma ação? O padrão e o resultado são claros? Como você volta ou avança? As respostas a essas perguntas devem ser relevantes sem sugestões, como um botão vermelho "clique aqui" piscando na tela.
Como em qualquer outro projeto, se o esquema não funcionar em preto e branco, o design final provavelmente não funcionará.
Use espaçamento exagerado
O maior desafio quando se trata de cartões é criar um design compacto que não pareça confuso. É aí que entra o espaço em branco. E você vai querer usar mais do que se sentir à vontade no começo.
A adição de espaço em branco dará aos elementos mais espaço para respirar, fazendo com que a placa geral pareça mais espaçosa e aumentando a legibilidade.
Geralmente, você pode querer começar com o dobro do espaçamento que você normalmente considera entre os elementos. As calhas devem ser extra largas e o espaçamento entre linhas também pode usar o espaço extra. O espaço extra ajudará você a criar um design aberto e organizar o conteúdo com mais clareza. O cartão tem uma tela bastante limitada e deve caber em uma única tela em um telefone e em uma parte do tamanho semelhante da tela em dispositivos maiores, como tablets ou desktops. As cartas também podem competir contra outras cartas por atenção em telas maiores. O espaço em branco adicionado ajudará todo o design a parecer mais aberto e fácil de mergulhar.
Adicionar cor natural e sombreamento
Agora você está pronto para pensar em cor e sombreamento para o design. Mantenha a aparência natural e imite a realidade nas sombras e estilos do design.
Não, não estamos falando de skeuomorphism aqui, estamos falando sobre a criação de cores com contornos e sombras naturais. Pense em como um cartão será visualizado. O usuário deve ter a mesma sensação de que estava realmente segurando.
Use algumas das regras básicas da física para imaginar (e projetar) cada carta como seria realizada:
- A iluminação deve lançar algumas sombras nas partes de trás e de baixo.
- A parte mais escura do desenho é provavelmente na parte inferior graças às condições de iluminação, que normalmente vêm de cima.
- Evite o conteúdo nas áreas necessárias para manter o cartão.
- Os pontos de contato (e as chamadas à ação associadas) devem ser pontos focais e fáceis de interagir. (Assim como o rosto de uma carta de baralho está no centro do desenho.)
- Um cartão é igual a um bit de informação.
Crie camadas simples
Agora que você está pensando em física, suba para o próximo nível com camadas simples para criar um estilo de cartão unificado para toda a interface. Não sabe por onde começar? Do Google Diretrizes de design de material são um ótimo ponto de partida.
“No design do material, as propriedades físicas do papel são traduzidas para a tela. O plano de fundo de um aplicativo se assemelha à textura plana e opaca de uma folha de papel.
O comportamento de um aplicativo imita a capacidade do papel de ser redimensionado, embaralhado e encadernado em várias folhas. Elementos que vivem fora dos aplicativos, como status ou barras do sistema, recebem um tratamento diferente. Eles são separados do conteúdo do aplicativo abaixo deles e não carregam as propriedades físicas do papel.
Quebre isso e volte a fazer um objeto digital parecer físico. E se os usuários quiserem tocá-lo, eles vão querer clicar nele. O conceito é assim tão simples.
Stick para tipos simples
Quando se trata de tipografia, simples sans serifs são frequentemente a resposta. Evite opções super finas ou condensadas porque elas podem ser um pouco mais duras para os olhos.
A maioria das placas funciona melhor com duas opções de tipos de letra (mesmo que sejam da mesma família) - algo para o corpo principal e outro para o título ou o apelo à ação. O fator mais importante quando se trata de tipografia é lembrar de incluir bastante contraste para que os elementos de texto sejam fáceis de ler. Lembre-se de incluir contraste entre tipos e contraste entre os elementos de fundo e texto de cada cartão.
Limitar elementos da interface do usuário
Repita depois de mim: uma carta é igual a uma ação.
Isso provavelmente significa que você não precisa incluir vários elementos da interface do usuário, como botões em todo o design.
Você pode nem precisar de um botão em um design estilo cartão.
Mas se você acha que os usuários precisam de uma dica visual, basta um botão. Mantenha a forma e o design simples - mais uma vez, a abordagem de Material Design é uma boa opção - e escolha apenas um botão.
Um botão é provavelmente o único elemento de interface do usuário que você precisa. Este é o seu objetivo de design.
Conclusão
Não existe uma fórmula mágica para o cartão perfeito, mas há algumas opções de design que podem ser incentivadas para que todos os usuários cliquem (ou toquem). Mantenha seu design centrado na realidade, siga uma abordagem minimalista com muito espaço e contraste, coloque ênfase na tipografia simples e crie uma única ação para cada cartão.
Seguir este esboço ajudará você a imaginar e conceituar projetos no estilo de cartão com os quais os usuários desejam interagir. Combine essas ideias com a teoria do design e suas habilidades loucas para um grande projeto que será divertido para os usuários e esteticamente na tendência.