Wireframe de referência
Design final da interface
O Desafio
O quinto desafio foi para criar um componente de pop-up, com um botão de fechar.
Decidi fazê-lo como um componente de alerta, seguindo o estilo neo-brutalista, por ser algo que nunca havia praticado antes e, sendo esse um componente simples, resolvi testar.
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.
Tipografia
Para a tipografia, escolhi a fonte Archivo Black para o cabeçalho e Archivo, da mesma família, porém com mais opções de peso, para os demais itens. Essa fonte possui uma característica mais pesada, no caso da versão black, que combina perfeitamente com a estética neo-brutalista.
Para o cabeçalho, além da fonte com o peso mais alto (black), apliquei também o kerning (espaço entre as letras) de -1%, para compactar as palavras.
Cores
O estilo neo-brutalista é caracterizado por cores bem saturadas e alto contraste, fazendo uso do preto em seu tom puro (#000000), contrariando os princípios de design que guiam a evitar textos e elementos nesta cor, por conta da fadiga ocular que pode ser gerada pelo contraste.
Para os textos e sombras, preto puro (#000000).
Para o botão de ação destrutiva, o vermelho alaranjado (#FF4911), indicando perigo e chamando a atenção do usuário.
Para o plano de fundo e o botão de cancelar a ação, branco puro (#FFFFFF).
Componentes
Os componentes consistem em apenas três botões e um ícone de referência visual.
O ícone da lata de lixo foi retirado da plataforma Blendicons, no estilo bold e aplicado na interface com 80 pontos de altura e largura.
Os botões são retangulares, dimensionados em 160x52, sendo um com fundo branco (não destrutivo) e um com fundo vermelho (ação destrutiva).
A sombra aplicada neste design é característica do neo-brutalismo. Definida 4 pontos na escala x e 4 pontos na escala y, de cor preto puro (#000000) em 100% de opacidade, passando um efeito de 3D para os elementos. Ela foi adicionada no card e nos botões.
Os componentes também possuem uma borda de 4 pontos que demarcam seus limites e seguem a estética do alto contraste.
