DÚVIDA_01_Figma: Design visual de um site mobile

Oi Thiago, tudo bem? O curso é voltado para quem quer começar a mexer na ferramenta do Figma e criar sites e aplicativos com ela. Portanto há um projeto que é proposto para o estudante para ele acompanhar a criação ao longo do curso, e esse projeto é de um site para celular, mas nada impede de vc aplicar esses conhecimentos em um dashboard para Power BI.

Sobre o grid, eu te aconselho a dar uma olhada nesse Alura+, onde eu explico mais sobre criação de grids, tanto para celular quanto para computador. Acho que esse vídeo te ajudará a criar um grid para uma tela de 1280x720px.

Sobre os espaçamentos padões, esse método é utilizado não só para celular, mas para qualquer plataforma digital. Por meio disso é possível criar espaçamentos padrões em diversos objetos na tela, criando maior padronização na interface. Para entender mais sobre isso recomendo olhar esse Alura+.

Sobre a parte do Wireframe, é indicado que antes que vc comece a construção do design final, vc crie Wireframes, que são representações em baixa fidelidade da estrutura que vc está pensando para a plataforma.

Espero que tenha ajudado e bons estudos.

Att, André

Fala Thiago, como vai?

A idéia é que você trabalhe com as colunas e espaços de acordo com o tamanho de interface que tem disponível. No caso do mobile, que tem pouco espaço horizonta, o professor utilizou 4 colunas com espaçamento base de 16px. Em interfaces mais largas, como browsers para desktop, etc, você tem mais espaço e pode dividi-lo em mais colunas, como por exemplo 6 ou 12 colunas, possivelmente dando um espaçamento diferente também entre elas e nas margens.

As proporções apontadas na unidade 3 são uma sugestão de que os espaços possam seguir uma regra, que possa ser percebida como harmonia pelo usuário. Os espaçamentos, portanto, podem seguir padrões de 1 espaço cheio, 0.5 espaço, 1.5 espaço, 2x espaço, etc. Se seu espaçamento for de 16px, por exemplo, 2x serão 32px e assim vai.

Você tem alguns sistemas de grid que trabalham com colunas e espaçamentos padrão para serem replicados em projetos, como https://960.gs/ e https://material.io/design/layout/responsive-layout-grid.html

Se persistir a dúvida me avisa que eu contacto o professor.

Um abraço!

Olá, André.

Antes de tudo, muito obrigado pela atenção e indicações.

Eu sou leigo e completamente fora da área de designer (sou economista...rs). Além disso, cores e desenhos são um terror para mim!! Como falei, minha intenção é aprender a fazer visuais bonitos para projetos de Business Intelligence (no caso, o Power BI) . Essa parte dos projetos ninguém sabe direito como fazer, a não ser os designers. E cá estou para aprender.

Pelo o quê vi até o momento, o meu problema é bem básico frente o quê o curso apresenta de possibilidades para outros projetos (site, apps, etc).

Ainda fiquei meio confuso e te add no linkedin para talvez ser mais pontual o nosso entendimento.

Abraços.

Rafael.

Muito obrigado pelos links. Ajudou a entender um pouco mais, entretanto admito que é uma linguagem complexa ainda para mim. Não sei se estou viajando ou complicando muito a lógica das proporções.

Abraços.