O site da Escola Revolution é a plataforma onde são apresentados e vendidos os cursos ativos da escola.
Toda a estrutura do site é construída por meio do construtor visual Divi, dentro da plataforma do wordpress.
Pensando em tornar as alterações do site escaláveis e práticas, comecei a desenvolver um Design System para que fosse possível manter a consistência em todas as páginas que temos hoje e que podemos ter futuramente.
O primeiro passo foi começar a definir os Tokens.
Pensando em tornar as alterações do site escaláveis e práticas, comecei a desenvolver um Design System para que fosse possível manter a consistência em todas as páginas que temos hoje e que podemos ter futuramente.
O primeiro passo foi começar a definir os Tokens.
Para as proporções e grids do DS, a ideia é que a construção dos layouts siga o grid de 8px, que mantém uma proporção agradável ao escalonar.
Também foi definido o grid a ser trabalhado quando a construção for pensada para o responsivo mobile.
Também foi definido o grid a ser trabalhado quando a construção for pensada para o responsivo mobile.
Foram definidos os tokens para a tipografia que utilizamos normalmente.
Os tokens são: família tipográfica, tamanho de fonte, peso de fonte e estilo de fonte.
Os tokens são: família tipográfica, tamanho de fonte, peso de fonte e estilo de fonte.
Foram definidos os tokens de cor para as cores neutras, primárias e secundárias.
Os tokens para as cores que representam ações bem sucedidas, erros e de atenção também foram definidas.
Tokens de opacidade para overlays também foram documentados.
Os tokens para as cores que representam ações bem sucedidas, erros e de atenção também foram definidas.
Tokens de opacidade para overlays também foram documentados.
Os tokens para definir o tamanho do border-radius presente nos elementos também foi definido nessa etapa, já que é um recurso bastante utilizado dentro do site.
Componentes de base
Após definir os tokens, foi iniciada a criação dos componentes base. Acima, são os componentes base de suporte para organização e identificação dos arquivos dentro do Figma, com a identidade do Design System em desenvolvimento.
Para os componentes base do site, foram desenvolvidos os botões em todos os seus estados, tamanhos e prioridade.
Foram construídos também os componentes e suas variações para os elementos da página de cursos da Escola Revolution.
-
O Design System ainda está em construção, mas já foram implementados os componentes e tokens existentes diretamente no Divi, dentro da plataforma que utilizamos hoje, para permitir a replicação em escala sem dificuldades.
Foram construídos também os componentes e suas variações para os elementos da página de cursos da Escola Revolution.
-
O Design System ainda está em construção, mas já foram implementados os componentes e tokens existentes diretamente no Divi, dentro da plataforma que utilizamos hoje, para permitir a replicação em escala sem dificuldades.
-
Se você curtiu o projeto, deixa um like e seu feedback aqui! =)
