Wireframe de referência
Design final da interface
O Desafio
O quarto desafio foi para criar uma tela de sign in, ou de registro de conta, com um link (ou botão) para fazer log in numa conta já existente, caso o usuário já possua uma conta.
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.
A grade que controla o espaçamento interno da tela também é baseada em 8 pontos, tendo como margens (o espaço entre a borda da tela e o conteúdo) 104 pontos, a margem interna (padding, entre as colunas) de 16 pontos e o tamanho da coluna em si, fixado em 88 pontos.
A margem externa é dinâmica, podendo variar em tamanho conforme o espaço disponível do navegador.
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
Para o gráfico de ondas à esquerda do formulário, temos 5 tons de azul (#0066FF, #007AFF, #008CFF, #2B9DFC e #4FACF7).
A cor primária da interface é o tom mais escuro utilizado para as ondas (#0066FF), utilizado no botão de ação, botões terciários (links de "Termos e Condições", "Política de Privacidade", "log in" 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:
Um gráfico em formato de ondas criado através da plataforma Haikei.app
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 registro.
Botões "continuar com parceiro" com ícones das respectivas plataformas, retirados do site Brandfetch.
