Design de interface: tipografia, cores e mais! | Bootcampinho UI/UX Design
Você sabe o que é o design de interface? Aprenda nessa aula super legal, com materiais extras e muito mais!
Compartilhe!
Design de interface é só telinha bonita! Só que não.
A interface de usuário é parte extramente importante de qualquer produto digital. Dessa forma, construir interfaces usáveis, escaláveis e, além de tudo, bonitas, é um enorme desafio.
Afinal, os elementos de uma interface são diversos: tipografia, cores, ponto, retas, espaços, grids, imagens e formas são apenas alguns desses elementos.
No vídeo a seguir eu apresento vários desses elementos e dicas sobre como melhor utilizá-los.
🐮 Desafio do Alfred
- Guia de Estilos: crie um guia de estilos para seu projeto
- Imagens: Defina estilo de imagens
- Ícones: Defina uma família de ícones
- Cores: sugiro utilizar no máximo 2 ou 3 cores (uma base, e no máximo 2 de destaque).
- Tipografia: escolha uma família tipográfica com muitos pesos e que combine com seu projeto.
- Escala tipográfica: Utilize uma escala tipográfica para escolher tamanho de corpo de texto, títulos e outros elementos textuais.
- Dica: não invente muita moda. Enquanto não estiver seguro(a) com suas habilidades visuais sugiro optar por tipografias conhecidas, utilizar poucas tipografias, poucas cores e assim por diante.
- Prototipação: continue a fazer as telas do seu produto projeto no Figma. Nesse momento, é importante você gerenciar o tempo para conseguir terminar o seu protótipo junto com o término da etapa de prototipação.
Materiais extras
Templates Notion
Artigos
- Designing the perfect button (em inglês)
Ferramentas
- Modular Scale
Criação de escala tipográfica. - Type Scale – A visual calculator
Criação de escala tipográfica. - Google Fonts
Guias de estudo
- Butterick’s practical typoraphy
Excelente fonte para aprender tipografia e detalhes. - Fonts knowledge (Google – em inglês)
E-books (gratuitos)
- e-Glurp: 29 dicas de UI Design – por Maiane e Glurp
O e-Glurp é um e-book gratuito criado com o auxílio do Glurp, uma divertida bala de goma extrapolada que nos leva a espalhar a palavra do design a fim de garantir a continuidade de todas as balas de goma. O livro é dividido em 5 seções: usabilidade; tipografia; componentes; padrões e cores. - Atomic Design (Brad Frost) – Em inglês
Design atômico é uma metodologia muito utilizada na criação de Sistemas de Design. Parte sempre do pressuposto de um elemento que é a base para construção de outros. É uma ótima forma de entender design de interface, elementos, componentes e escalabilidade.
Livros
- Design para quem não é designer (Robin Williams)
Esse livro é bastante curto e de fácil leitura. Ele apresenta alguns conceitos básicos e bem interessantes de design. Conceitos esses que ajudarão não somente com design de interfaces, mas qualquer tipo de design. - Elementos do estilo tipográfico (Robert Bringhurst)
Este livro apresenta os nuances da tipografia. Os detalhes dos tipos e a história da tipografia ocidental. - Grid: construção e desconstrução (Timothy Samara)
Apesar do foco bastante pensando em Design Editorial, este livro apresenta diversos exemplos que ajudam a ilustrar o uso de grid. É uma excelente forma de entender que Grid não precisa ser um objeto estático, mas uma forma dinâmica de organizar elementos. - Novos fundamentos do design (Ellen Lupton)
Quais são os elementos do design? Neste livro Ellen Lupton, referência na área de design, apresenta diversos elementos que compõe o design. Além disso, a grande quantidade de imagens e exemplos torna a leitura muito didática e dinâmica. - Pensar com tipos (Ellen Lupton)
Uma verdadeira aula de tipografia. Se você está começando no mundo do design, este livro é uma excelente forma de entender como pensar a tipografia. Através de imagens e exemplos fica muito fácil de entender e aprender sobre os tipos.
Posts
Vídeos
Listas de ferramentas e métodos de UI/UX Design
- Uma ampla lista de métodos e entregáveis de UX design
Diversas ferramentas, links e entregáveis comuns nos mundos de UI/UX Design. - ‘The great’ UX design toolbox (em inglês)
Lista com cerca de 900 ferramentas que podem ser utilizadas em diversas etapas do design. - Métodos e entregáveis em UX (em inglês)
- The Ultimate Design Systems Resources List (em inglês)
Perguntas Frequentes
Não existe nenhuma pergunta frequente nesta aula. 🙁
Ainda está com dúvidas?
- Cheque as “Perguntas Frequentes” e os comentários do vídeo do YouTube da aula
- Caso ainda tenha dúvidas, deixe ela nos comentários do vídeo do YouTube da aula que você assistiu.
Sobre o Bootcampinho Gratuito UI/UX Design
Você já pensou em aprender UI/UX Design de forma gratuita, com todos os vídeos diretamente no YouTube? Não é preciso fazer cadastro, deixar seus dados nem nenhuma complicação.
É só começar a assistir e praticar.
Para ajudar você o Bootcampinho Gratuito de UI/UX Design ainda conta com roteiro bem estruturado, materiais de apoio, templates de apoio e muito mais.
Informações importantes
- Dúvidas: as dúvidas deverão ser feitas através dos comentários no YouTube. Cheque os comentários para ver se sua dúvida não foi respondida e também a página de cada aula para ver se a resposta não está nas “Perguntas Frequentes” da aula.
- Certificados: os certificados são limitados. Para mais informações, cheque a página do curso.
- Grade Completa: clique aqui para ver a grade completa do curso.
Gostou deste material?
Me ajude compartilhando!