Estojo Aurora Design

Dec 07 2022

Como você sabe, vários designers podem estar envolvidos na criação de projetos complexos e em desenvolvimento em momentos diferentes. É muito conveniente usar um sistema organizado de elementos e regras para seu uso enquanto continua trabalhando no projeto de alguém.

Este é exatamente o método necessário para um de nossos projetos, o Aurora. Nossa tarefa era criar um conceito de elementos básicos para construir a partir deles uma interface completa para uma plataforma na área de gerenciamento de comércio eletrônico.

O cliente forneceu o sistema Carbon como exemplo, que inclui o Design-Kit, cores, fontes, casos de uso e muito mais. Bem como um análogo de seu produto. Além disso, concentrei-me nos exemplos de Material Design, pois o site deles possui opções de componentes que podem ser úteis no desenvolvimento.
No decorrer do trabalho, primeiramente foram propostas fontes, ícones e cores principais do projeto. Ao mesmo tempo, criei botões e entradas de amostra para mostrar como as fontes e os ícones selecionados interagem entre si. Com base nisso, o cliente escolheu as fontes, cores e aparência dos ícones. Assim, uma das cores do logo, rosa, é utilizada como cor Primária, e a segunda, cinza, como Secundária.

Todos os estilos de fonte usados com funções marcadas são salvos nos estilos do projeto Figma e podem ser selecionados na lista.

As cores são preservadas de maneira semelhante. Mas eles são divididos em pastas na seção Estilos de cores: Primário e Adicional. Para expandir a paleta de cores, usei o método de adicionar preto e branco à cor selecionada em diferentes proporções sequencialmente (20%, 40%, 60%, etc.). O quadro com o layout de cores também indica os papéis de cores pretendidos.

Além disso, foram adicionadas várias opções de sombra para escolher entre um conjunto pronto oferecido pelo cliente.

Em seguida, foi escolhida a aparência dos botões, entradas, dropdown e o botão de seleção de idioma. Todos os botões são componentes, cuja aparência pode ser alterada diretamente no projeto, dependendo da finalidade. O ícone no botão também pode ser alterado no menu Auto Layout.

A aparência do botão suspenso para selecionar o idioma foi ligeiramente alterada (tornou-se mais compacta) depois que criei a página de login de amostra.

A entrada possui 9 opções e pode ser utilizada com ou sem ícone. O campo de entrada de senha tem mais opções porque pode ser usado em diferentes situações e possui propriedades específicas. Por exemplo, uma escala que mostra a força da senha e os elementos destacados em verde se o usuário tiver digitado o número necessário de caracteres. Também criei um componente separado para o campo de entrada do código de verificação.

Em seguida, foram criados componentes para a caixa de seleção e alternância, bem como componentes para os mesmos elementos com texto. Além disso, adicionei avatares de tamanhos diferentes, componentes com grupos, dicas de ferramentas e exemplos de uso junto com uma lista suspensa.

Para mostrar como os elementos e o texto funcionam na vida real, criei telas de login, levando em consideração os desejos do cliente. Mais tarde, um tema escuro foi adicionado, para o qual criei componentes separados.

E para configurar os componentes para o tema escuro, usei um layout de login pronto e selecionei combinações adequadas de cores e transparência. Para alguns elementos nada teve que ser mudado. Por exemplo, para o botão Principal.

Assim, em um tempo bastante curto, o cliente recebe um kit de interface do usuário simples com a capacidade de editar elementos no Figma. Esta é uma ótima maneira de mostrar o foco estilístico principal de um projeto sem gastar muito dinheiro.