EntrarComeçar

Os detalhes que fazem uma
interface parecer certa

Um curso sobre tipografia, superfícies, movimento e componentes, com demos pra você mexer em cada aula.

Por que isso importa

Você sente a diferença entre um produto bom e um ótimo antes de conseguir explicar. Quase nunca é uma coisa só. É a curva de um menu, o border-radius de um card, o número que não pula quando muda.

Os dois menus abaixo duram o mesmo tempo. Abra os dois juntos.

ease-in
300ms
ease-out forte
300ms
Só a curva muda. Um parece lento, o outro parece parte do clique.

Sozinho, nenhum desses detalhes chama atenção. Juntos, são o motivo de uma interface parecer cuidada. Hoje qualquer um coloca uma tela no ar numa tarde, e o que ainda separa um produto do outro é esse cuidado.

O Craft ensina esses detalhes: o que são, por que funcionam e como construir cada um.

Sobre o curso

São 21 aulas em 7 módulos, cada uma com demos que você pode mexer.

Tipografia que não pula
border-radius concêntrico
Curvas com intenção
Botões que respondem

O que você recebe

  • Aulas escritas

    Texto direto, feito pra ler e aplicar no mesmo dia.

  • Demos interativas

    Cada princípio vem com um exemplo pra você mexer e sentir a diferença.

  • Os valores exatos

    Curvas de easing, box-shadow, border-radius e durações prontos pra copiar.

  • No seu ritmo

    O progresso fica salvo e você volta de onde parou.

Programa

Cada módulo cobre um tema do começo ao fim. Esta é a aula que já está aberta:

São 21 aulas em 7 módulos. O acesso completo inclui todas, conforme forem publicadas.

Módulo01Fundamentos2 aulas
Módulo02Tipografia3 aulas
Módulo03Superfícies4 aulas
Módulo04Movimento: decisõesGrátis2 aulas
Módulo05Movimento: técnica4 aulas
Módulo06Componentes4 aulas
Módulo07Avançado2 aulas

Sobre mim

Foto de Matheus Cardoso

Sou o Matheus, engenheiro de software na 4Selet e na Zero7, onde construo pagamentos. Escrevo sobre interface no meu site, e o Craft é o que aprendi construindo interfaces, organizado em aulas. Você me acha no @mattcrdoso.

Comece de graça

Leia antes de decidir. Estas aulas estão abertas pra todo mundo.

Acesso

Acesso completo

Em breve
  • As 21 aulas, conforme forem publicadas
  • Todas as demos e o código de cada uma
  • Progresso salvo entre as aulas
Começar pela aula grátisA compra abre junto com o curso completo.

Perguntas frequentes

Pra quem é o curso?

Pra quem constrói interface: engenheiros de front-end, design engineers e designers que escrevem código.

Preciso saber animação?

Não. Basta conhecer HTML, CSS e o básico de React. O resto é explicado nas aulas.

Quais ferramentas o curso usa?

CSS, React, Tailwind e Motion. Os princípios valem pra qualquer stack.

Tem vídeo?

Por enquanto não. As aulas são escritas, com demos interativas no lugar dos vídeos.