[UI/UX] [Design] Dicas sobre Design Web

Favoritando esse post, muito bom mesmo! :wave: :wave: :wave:

1 Like

Esse post é utilidade pública! MUITO OBRIGADA!!!

1 Like

Muito bom, sou péssimo em design e vai me ajudar muito.

1 Like

Uma dica é montar seu design no Figma Ou Adobe XD antes de passar pra código.

1 Like

Ótimas dicas Ingrid! é de grande valia pra quem tem o foco no front.

1 Like

Caraca!!!

Vou deixar tudo isso aí como colinha pros meus projetos futuros kkk
Muito obrigado pelo conteúdo, agregou bastante!!!

1 Like

Eu acho muito importante um desenvolvedor conhecer sobre UXUI Design, qual é a melhor experiência que seu produto irá oferecer, se será adaptado para leitores de tela pensando em acessibilidade. Saber utilizar pelo menos o básico de algumas ferramentas de prototipação como Figma, AdobeXD. O Figma tem um problema de gerar o CSS tudo como absoluto de forma estática, já o AbodeXD até animações ele gera em formato CSS.

1 Like

Eu gosto dos softwares da Adobe, mas o problema é que são pagos ou crackeados. O Figma é usado no navegador, então acaba sendo minha ferramenta de preferência, além de ser muito mais fácil caso eu queira mostrar pra alguém através de um link.

1 Like

salve raça, vim aproveitar esse post pra divulgar esse curso gratuito de ux/ui que eu to fazendo (e com certificado). Lá na plataforma da fiap vc consegue ter acesso a diversos outros cursos gratuitos na area de tech User Experience - EuCapacito

4 Likes

Para complementar as dicas, segue uma para quem quer assinar os programas da Adobe.

A Adobe oferece assinatura no valor de R$86 mensais com todos os programas para estudantes. Basta referenciar qual a instituição de ensino ou empresa de educação.

1 Like

Muito obrigada por todas essa dicas, Ingrid!

Já salvei todas aqui!

2 Likes

Adorei essa dica @iW90. Excelente postagem!

1 Like

Obrigada por dividir esses links! Deixo aqui a minha contribuição da regrinha 60-30-10 que é ótima para interfaces: https://brasil.uxdesign.cc/como-usar-as-cores-em-ui-design-9e145cb21664

1 Like

Aproveitando o post, será que alguém consegue me ajuda a dimensionar uma imagem do jeito que quero?
Em resumo, quero que a imagem preencha a tela nas laterais, mas tenha altura limitada(a altura eu consegui deixar ok). Por causa dos comando para configurar o body, não estou conseguindo preencher a tela. O padding que coloquei deixa uma beiradinha nas laterais aparecendo, e não quero isso. Tem uma forma de fazer uma div ignorar as configurações do body e prevalecer só as configurações dela?
Deixei a imagem com os trechos de código, como referência.

1 Like

Vc colocou 5px de padding no seletor universal, ou seja, todos os elementos da página vão ter 5 de padding. Vc pode sobrescrever isso colocando padding: 0 no container em q está a imagem.

Mas como tem o 5px de padding no body também, ainda vai ter esse 5px de espaço. Aí vc teria q zerar o padding do body também. Vê como fica se vc zerar só o do container primeiro.

Qualquer coisa, manda o HTML aqui também q vai ficar mais fácil de ajudar.

2 Likes

Você precisa deixar a largura em 100% ali no seu width do container (existem monitores com mais de 1800px de largura) e colocar padding 0 no seletor universal (o asterisco).
Depois coloque um padding no container (e nas demais sections que tiverem na sua página) para que o conteúdo não fique muito rente à borda.

1 Like

Excelente tópico! Me interesso muito pela parte do design das interfaces, muito obrigada!

1 Like

já havia tentato isso antes. Ao retirar o padding do universal, as outras divs perdem várias outras configurações. Por isso está difícil configurar essa imagem.

2 Likes

:vulcan_salute: :heart:

1 Like

Muito bom! Muitas dicas excelentes

1 Like