GRIDS no Figma: Duas estruturas funcionais para web e mobile | Gabriel Silvestri
ฝัง
- เผยแพร่เมื่อ 12 ธ.ค. 2024
- Quer se tornar UX Designer em 3 meses? Eu preparei uma palestra online gratuita te ensinando como:
ux.gabrielsilv...
🐱 CONTEÚDOS DIÁRIOS SOBRE DESIGN DE INTERFACES NO MEU INSTAGRAM:
🔶 / silvestri_gabriel
🐱 [EBOOK GRÁTIS]
7 Passos para você se tornar UX/UI Designer e ganhar um salário de R$ 4.500,00 já nos próximos 3 meses:
🔶 gabrielsilvest...
🐱 Artigos sobre Design, UX e UI no meu blog:
🔶 gabrielsilvest...
🐱 Me acompanhe por aí:
• Blog » gabrielsilvest...
• Instagram » / silvestri_gabriel
• Canal YT » / gabrielsilvestri
__⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
DesignGrafico #Design #uxui #ux #ui #uiuxdesign #uxdesign #uidesign #designdeinterfaces
Quer se tornar UX Designer em 3 meses? Eu preparei uma palestra online gratuita te ensinando como:
ux.gabrielsilvestri.com.br/aula
Cara, que vídeão tope.
Excelente vídeo, Gabriel. Seria bom que você produzisse um vídeo esmiuçando o Grid de 8-pontos, justamente pela complexidade de se trabalhar com ele. Inclusive, já vi designers usarem dois formatos de grids combinados para desenvolver uma interface clone de um app de streaming.
Eu particularmente gosto muito do Golden Cânon Grid que o Adrián Somoza desenvolveu, apesar de ser um framework que considera organizar elementos de paginação com bases mais estéticas a lógica de programação.
Boaaa, em breve vou falar sobre 8pt :)
Eu uso 8pt grid junto com o esquema de 12 colunas.
Pois o 8pt é meio que uma ferramenta pra você não escolher arbitrariamente valores aleatórios para margens, paddings, etc. Você usa uma escala de números divisíveis por 8. É super simples.
Então numa abordagem de 12 colunas, você define o gutter (espaçamento entre colunas) com um número divisível por 8, por exemplo 32. Fica muito bom!
Daí, espaçamento vertical você também usa 8pt, ex: 32px, 48px, 64px, e por aí vai.
Paddings de botões e inputs, mesma coisa, você pode padronizar um esquema 32x16... Fico tudo harmonizado! Eu refatorei um projeto inteiro de interface usando 8pt e ficou muito bom.
Foi sem dúvidas o vídeo mais esclarecedor que vi sobre o assunto! Muito obrigado
:)
Gabriel, conheci seu canal hj! Estou maratonando! Muito obrigada por entregar um conteúdo tão rico \o/
Exatamente !!!
Faz um video se aprofundando mais sobre o Grid de 8pt combinado com Colunas, please!
Seus videos são direto ao ponto e ajuda bastante o entendimento! Parabéns!
Obrigadooo, vou preparar um material desses em breve :)
Oi, gostei muito do vídeo, mas senti falta de você dizer como fez os grids, quais foram as medidas que você usou?
Valeu pelo vídeo! Me ajudo muito.
Amei, tu é muito didático!! Obrigada!!
Cara, eu também sempre amei usar GRIDS e hoje é indispensável em qualquer projeto/planta/prototipos.
Parabéns pelo conteúdo!
vlw, só queria saber aonde era para alterar as colunas, foi útil!
Muito obrigado pelo vídeo! De verdade!
♥
Muito obrigada!!
De nada :)
Belo vídeo, pois estou nesse dilema pois nunca usei grid para desenhar aplicativos mobile mas e sim nesse grid 8 pontos, conforme o Material Design
É uma alternativa bacana e bem simples de colocar em prática :)
Que altura você indica usar em frame pra desktop desconsiderando as barras do navegador etc?
E seus vídeos são ótimos, tem ajudado muito! OBG
Gabriel, tudo bem? Como coloco a margem no Figma? Valeu!
No Figma tem a opção de repeat grid igual no Adobe XD?
otimo vídeo
Uma dúvida. Como usar efetivamente as 12 colunas com o grid de 8 pts? Os números nunca se alinham. Estou desenvolvendo um layout responsivo e para o mobile (360px de largura) funcionou, mas para o desktop (1366px de largura) não consigo fazer os 2 grids alinharem de forma alguma.
Tenho uma dúvida irmão..
Notei que mesmo quando remimensionamos um svg (segurando shift) no figma, a borda vai ficando mais grossa.
Como resolver essa questão?
Usando a ferramenta de escala (atalho: K) :)
@@GabrielSilvestri Funcionou! Muito obrigado.