Wireframe de referência
Design final da interface
O Desafio
O terceiro desafio foi para criar uma tela de log in com um link (ou botão) para criar uma nova conta, caso o usuário ainda não fosse cadastrado.
Estrutura
Espaçamentos
Os espaçamentos foram definidos a partir da grade de 8 pontos, o que significa que todos os espaços entre elementos são múltiplos de 8.
Assim como os espaçamentos entre itens, o espaçamento interno dos componentes também segue a grade de 8 pontos, bem como os raios das bordas curvas.
Tipografia
Para a tipografia, escolhi a fonte Baloo para o H1 e Baloo 2 da mesma família, porém com mais opções de peso, para os demais itens. Escolhi essa fonte para passar um ar mais descontraído para a interface. Para os itens principais, pesos mais altos para definir hierarquia e puxar a atenção do usuário.
Cores
A paleta de cores possui um gradiente linear para o plano de fundo, que vai de um azul vivo (#0575E6) a um verde saturado (#00F260).
A cor primária da interface é um azul vivo (#0066FF), utilizado no botão de ação, botões terciários (links de "esqueci minha senha", "criar uma conta" e "mostrar a senha"), nas bordas dos botões de parceiros e nos ícones auxiliares nos campos de entrada.
Os textos possuem um tom de grafite (#373737) e o fundo da área do formulário, branco. Já os cinzas aparecem nas bordas dos campos de texto (#CBCBCB) e nas linhas e texto divisor entre os métodos de login (#A7A7A7).
Componentes
Os componentes consistem em:
Campos de entrada com ícones auxiliares (retirado da biblioteca Phosphor Icons).
Um botão de ação com ícone auxiliar (também da biblioteca Phosphor Icons).
Uma linha divisória com texto indicativo, para separar os diferentes métodos de log in.
Botões de login com ícones de cada parceiro, retirados da plataforma Brandfetch.
Variantes
Durante o processo de design, criei outras versões até optar pelo design final mostrado acima, aqui estão algumas delas:
Com os botões de login com parceiros seguindo as diretrizes de design de cada um. Não gostei desse design por ficar muito destoante do restante do estilo.
Com tons amarelados. Gosto das cores, mas achei que faltou contraste e não quis ir em direção ao laranja. Acabei optando por tons mais frios, de azul e verde.