RTFM #01: o guia básico do componente Card
Saiba o que é card, suas diferenças com outros componentes e suas regras de uso em um design system
E damos largada oficialmente ao RTFM, nosso guia básico de utilização de componentes do nosso design system, o Zilla.
Componentes como o Card têm caráter multifacetado, com ampla utilização em nossos produtos e é, por isso, que ele foi escolhido para inaugurar nossa documentação.
Eu não sou nada fã de esportes, admito. Mas resolvi assumir o risco de fazer uma analogia equivocada ao emprestar a referência feita por Nathan Curtis no artigo “Cards and Composability in Design Systems”. Afinal, reutilizar é preciso e criar algo novo nem sempre é uma das melhores opções (assim como em um design system).
Se, assim como ele, você é fissurado em esportes e conhece esses cartões. Ótimo. (Se não dá um pesquisada aí ou compara com… Magic, sei lá).
O objetivo desses cartões de astros do esporte era reunir informações daquele indivíduo. Pelo menos nome e foto, mas alguns incluíam até data de nascimento, time ou equipe e altura. Parando agora para pensar parece bem nostálgico mesmo, Nathan!
Se você chegou até aqui e ainda está se perguntando que tipo de artigo é esse, eu sugiro você dá uma lida antes no artigo de introdução ao RTFM, o Recurso Técnico de Fixação Mental.
Definição: O que são cards?
Essa relação dos Cards com os cartões dos esportes não é mera coincidência, isso é conhecido como esqueumorfismo. Seu objetivo é evidenciar conteúdos e ações em um mesmo contexto, podendo ainda se utilizar de sombras para simular elevações, gerando hierarquia. Tecnicamente, cards são contêineres para outros elementos em um design system, o que pode acabar gerando algumas confusões.
Comparando os Cards com outros elementos
Cards ≠ Backgrounds
Backgrounds são planos de fundo (tradução livre? rs) de páginas ou seções e não possuem o objetivo de evidenciar conteúdos ou ações específicas. Inclusive, background nem é componente, né? É apenas um parâmetro.
Cards ≠ Dividers
Dividers são utilizados para dividir (okay, parei, parei! haha) conteúdos, mas sem agrupar as partes. Enquanto os cards, separam conteúdos enquanto os agrupa.
Cards ≠ Buttons
Buttons são utilizados para realizar ações e possuem uma estrutura tecnicamente planejada para isso. Portanto, não adianta querer fazer de card um superbotão. Os cards possuem um conteúdo informativo independente da sua ação.
Os do’s e don’ts dos cards
Caso decida utilizar os cards, atente-se ao que você pode e não pode fazer com eles. Não estamos em um jogo de futebol, mas, como disse um comentarista por aí, “a regra é clara”.
Para exemplificar cada regra, utilizei exemplos dos cards presentes em nossos marketplaces, que utilizam-se do Zilla, o design system da Quero Educação.
01 Independência
O card precisa funcionar sem que haja dependência de algo externo. Ele é único, mesmo que em grupo.
02 Completude
O card não pode ser dividido ou se integrar a outro para que haja uma informação completa. Card não é Lego®!
03 Individualidade
O card possui conteúdo e ações relacionados a um único contexto. Cada macaco no seu galho — quer dizer, cada conteúdo no seu card.
04 Elevação
O card pode se sobrepor a outro, mas precisa diferenciar sua elevação. Só não se esqueça das regras anteriores.
05 Interatividade
O card deve interagir com o mouseover caso possua ação. Isso tornará essa interatividade mais evidente e mais acessível.
Como utilizamos os cards na Quero Educação
Talvez o card seja um dos componentes mais utilizados aqui na Quero, principalmente para apresentar ofertas de bolsas de estudo ou informações de cursos. Card é o que não falta em nossos produtos: tem aqueles com imagem, tem aqueles mais minimalistas, tem aqueles abarrotados de informações, tem com interação, tem com botões… tem pra mais de uma seleção inteira.
Antes de apitarmos o fim do jogo, ganhei uns minutinhos de prorrogação para convidar vocês a acompanhar o RTFM também por vídeo no Instagram do time de design.
Fiquem a vontade para nos mandar aquele alô no comentários falando dos melhores lances ou daquelas faltas. É tóis!
Além disso, acompanhe outros materiais do squad Design System:
- Design System: da confusão à construção de um produto 👷🏾♂️
- OPS! Evoluímos nosso Design System 📐
- Design system por um desenvolvedor front-end, parte 1 e parte 2. 👨🏻💻
- Design System: conectando desenvolvedores e designers 🖌⚙️
Quer ter contato com os cards do nosso design system? Estamos com vagas abertas.
