UI Case: Design XP
Telas do site Design XP, uma plataforma de cursos focados em trilhas de conhecimento em design digital.
Introdução
Neste case mostro de forma bem objetiva os resultados finais de telas para a plataforma Design XP, um conceito de plataforma de cursos apenas de design digital, que serão organizadas por trilhas de conhecimento.
Utilizou-se de princípios de gamificação para aumentar o engajamento dos estudantes.
Demonstro utilização de Grids mobile e destktop e como utilizo a regra de 8 pontos para a realização das telas.
Versão web desktop
Homepage
Grids
Para os grids desktop web, foi configurado 12 colunas, com um gutter de 16px — já respeitando grid de 8 pontos. A escolha de 12 colunas foi feita por ser um bom ponto de partida para redução até chegar no mobile com 4 colunas, e assim se adaptar com diversos tamanhos.
Grid de 8 pontos
Aqui um exemplo da utilização do grid de 8 pontos, no qual utiliza-se espaçamentos de padding e margin com múltiplos de 8 para se manter uma consistência visual agradável entre os elementos.
Tela “Meus Cursos”
Tela “Meu perfil”
Aqui há elementos de gamificação, como conquistas, missões e amigos.
Tela “Trilha de conhecimento”
Versão web mobile
Login
Homepage
Grids
O grid para mobile foi configurado com 4 colunas, margin de 24px e gutter de 8px.
Tela “Meus Cursos”
Tela “Meu perfil”
Guia de Estilos
Logotipo
Cores
Tipografia
Efeitos
Botões
