Como designer gráfico, mergulhar no mundo dos códigos é um pouco assustador. Meu processo de codificação é um pouco diferente. Eu gosto de começar meu projeto pensando no/a cliente.
Ao fazer isso, posso definir o tema do meu aplicativo e descobrir qual funcionalidade posso adicionar.
A partir daí, eu crio um wireframe. O wireframe me permite ver o layout do meu aplicativo. Depois disso, começo a codificar.
Começo construindo a funcionalidade e testando para ver se tudo funciona. Finalmente, começo a codificar o front end e uso diferentes frameworks CSS para projetar minhas aplicações.
Confira os conceitos de design que eu uso
1. Wireframes
Significa esboçar os posicionamentos de botões, imagens e texto com a quantidade mínima de detalhes. Isso permite pensar visualmente sobre como você deseja que seu produto final fique.
Isso também permite que você veja fisicamente quantas páginas ou elementos você pode precisar criar em seu código.
2. Composição
A composição é quando os elementos são organizados para ficarem com certa aparência.
Um conceito com o qual você deve se familiarizar é o grid system. Ele é usado com a maioria dos frameworks CSS, como Bootstrap e Foundation. Tem contraste com tamanho e cor para ajudar as informações a fluírem melhor.
A melhor maneira de fazer com que seu trabalho pareça e seja significativo é ter um ponto focal.
3. Repetição
Repetição significa reutilizar a mesma imagem ou uma imagem/estilo similar em todo o seu design. Por exemplo, se você estiver usando um botão redondo no formulário, esse estilo de botão redondo deverá ser consistente sempre que um botão aparecer na sua página.
4. Cor
Tenha sempre uma paleta de cores para o seu trabalho. Isso ajuda seu projeto a parecer mais coeso, bem pensado e visualmente agradável de olhar. Existem muitas ferramentas/sites por aí que geram uma paleta de cores. O que eu geralmente uso é o color Mind ou o coolors.
Dica: use no máximo três cores. Uma cor primária, uma cor secundária e uma cor de destaque. Use a regra 60-30-10. 60% deve ser a cor da sua marca, 30% deve ser a cor secundária e 10% a cor de destaque.
5. Tipografia
Tipografia refere-se à arte de organizar a fonte do projeto para ser mais legível e agradável de olhar ao transmitir informações. Alguns tipos básicos de elementos tipográficos que você viu no código são:
É aqui que a composição entra em cena. Primeiro, você precisa entender quais são as informações mais importantes que você deseja que o usuário veja.
Para essas informações, é provável que você opte por uma tag h1 ou talvez coloque o texto em negrito para que ele se destaque do resto.
Outra maneira de usar a tipografia é associar duas famílias de fontes diferentes e criar contraste.
O emparelhamento mais comum é um tipo de letra sem serifa combinado com uma fonte com serifa. Abaixo estão alguns exemplos:
As imagens foram retiradas daqui.
Exemplos de pares sem serifa:
Exemplos com serifa:
Exemplos de combinação com serifa:
Espero que isso tenha ajudado você a se tornar mais consciente do design em geral. Quanto mais você pratica, melhor fica. Aproveite e confira esses recursos.
Aqui está uma lista de recursos para você conferir:
- Combinações de cores para evitar
- Templates de Blog BootStrap
- Guia CSS Grid MDN
- Guia rápido para uma paleta de cores
- Fontes do Google
Este é um artigo traduzido, você pode acessar a versão original em inglês aqui. Todos os créditos para a autora: Iqra Masroor
Last modified: 06/05/2020