Design para front-end - Root #09

Подписаться 371 тыс.

Просмотров 21 тыс.

50% 1

Vamos conferir 6 dicas de design para ajudar na hora programar seu front end.
Nosso educador Mayk Brito reuniu dicas essenciais como contraste, alinhamentos, espaçamento, preenchimento, cores e fontes. Coisas importantes para somar na sua percepção de design na hora de construir seu front end. Esse é um tema super pedido e finalmente chegou 🎉
-----
Confira a grade completa de conteúdos do canal aqui: rocketseat.com...
Conecte-se a 200mil devs e avance para o próximo nível com a nossa plataforma: rocketseat.com...
Cadastre-se na nossa plataforma: app.rocketseat...
Junte-se a mais de 392mil devs em nossa comunidade no Discord: / discord
Acompanhe a Rocketseat nas redes sociais:
Twitter: @rocketseat
Facebook: @rocketseat
Instagram: @rocketseat_oficial
Nos ouça também no Spotify:
- Podcast Faladev
- Podcast Alumni
- Podcast Proxy

Опубликовано:

29 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 136

@gubmx20 3 года назад

Uma dica de espaçamento. Para a altura entre as linhas de um texto (line-height)* uma boa é multiplicar o tamanho da fonte por 1.5. exemplo com fonte de 16px: 16 * 1.5 = 24px; fica muito mais agradável pra leitura.

@maykbrito 3 года назад

Noossaa!! Excelente!! Vou procurar lembrar disso

@mr.a2323 2 года назад

Tava olhando aqui, o figma já mantém esse padrão né? (de modo automático)

@AndrelinoSilvas 3 года назад

Parabéns Maykão pelo aula!

@rocketseat 3 года назад

Maykão mandou bem demais, né, Andrelino? 💜

@AndrelinoSilvas 3 года назад

@@rocketseat, ele sempre manda bem! O cara é Fera demais!!!!!

@tiagoalvespereira6038 3 года назад

Muito bom o conteúdo!! Poderiam falar sobre flexbox e grid e quando é melhor usar um ou outro???

@Marujhin 3 года назад

Tbm queria. Até hj nunca usei grid na prática, flex-box parece sempre fluir melhor.

@thauaengelmann770 3 года назад

@washingtonazevedo1514 3 года назад

@thenriquedb 3 года назад

Grid para layout e flex-box para conteúdo. Uma boa analogia é imaginar que o grid serve para dividir os cômodos de uma casa, enquanto o flex é utilizado para organizar os moveis em cada cômodo.

@tiagoalvespereira6038 3 года назад

@@thenriquedb Muito obrigado! Estou dando uma estudada nesse conteúdo e acabei chegando nessa mesma conclusão.

@vagnereix 3 года назад

Atualmente trabalho como front end developer e devo muito à Rocketseat com toda certeza, primeiramente gratidão. Porém ainda sinto algumas dificuldades ao pegar certas páginas para codar e identificar como faria aquele layout, será que poderia sugerir um vídeo onde o Maykão ou algum educador da Rocket escolheria algum(s) layout(s) como esses do Dribbble e explicaria como o mesmo pensaria no desenvolvimento daquele layout, se usaria uma posição absoluta com um left negativo em determinado elemento para deixar na posição que o layout exige por exemplo, e coisas do tipo? Me ajudaria demais e com certeza mais devs com esse tipo de dúvida. 💜💜

@wesleydcm 3 года назад

boa

@luccateixeira5470 3 года назад

Apoio.

@Credin84 3 года назад

Assista o video da Rocketseat que mostra o Guilherme Rodz fazendo um clone do Discord, assista o video várias vezes que vc vai ficar fera com o mindset correto de quando bater o olho num layout e já ir planejando como codar, ele repete várias vezes os conceitos, recomendo

@vagnereix 3 года назад

@@Credin84 vou assistir, obrigado!

@Yanksz 3 года назад

recomendo o front end mentor, a ideia do site é vc realmente praticar esses layouts e tem do lvl newbie até o master se nao estiver enganado

@willsandres 3 года назад

Acredito que num projeto real para um bom contraste ("white space" ou "espaços negativos", recomendaria o de 4, 8, 16, 32, 64 e 128 (mentoria Origamid 🐺😍)

@allancassio6674 3 года назад

não tem como nao se apaixonar pelas aulas desse jovem.... incrivel como sempre.

@rocketseat 3 года назад

Vou ter que concordar... Maykão manda bem demais! 💜

@elizenetemachado7993 2 года назад

@@rocketseat ki

@supremorei 3 года назад

na parte de acessibilidade poderia ter falado questão de vontes mais amigaveis a pessoas com dislexia pós existem questão de espaçamenteo entre letras e entra linhas mais apropriados para quem tem dislexia como a Open Dyslexic.

@andresdosantos5310 2 года назад

Po Mayk, vou quebra o espelho daqui então kkkkkkkkkkkkkkkkk

@giulianabezerra 3 года назад

Obrigada pelas dicas! Essa da regra dos 8 achei sensacional! Vou tentar aplicá-las no próximo projeto que irei desenvolver aí te marco, Mayk ;)

@rocketseat 3 года назад

Faaaaala, Giu! Que massa que curtiu! Essa regra é prática demais, né? Boooa! Aplica e marca a gente mesmo! 😍 💜

@soukaigiwar 3 года назад

Lá pelos 19min vc deu o exemplo de acessibilidade. Eu tava certo que ia falar de alguém que faz um layout pra uma tela de tamanho médio e, depois na hora de abrir numa 4k os elementos ficam muito pequenos, quase impossíveis de ler. Mas foi o contrário, só que pra quem não enxerga bem, isso é até bom. Penso que deveria ser o contrário do que disse. Gostei muito do vídeo, da didática. Está de parabéns.

@maykbrito 3 года назад

Boa Sergiao!! Obg manin 💜

@TheTrollzica 3 года назад

Outras coisas muito legais pra levar em conta também: - Hierarquia dos elementos = Como o Mayk mostrou, um título com fonte grande e em negrito, o texto com fonte menor. Isso melhora a clareza do layout. - Dar feedback para o usuário é muito importante = Acrescente efeitos quando o mouse passa por cima, scroll suave no caso de navegação com links âncora, loadings para operações que ainda estão executando. Lembre-se sempre de dizer pro usuário o que está acontecendo pra que ele não fique perdido.

@AnthonyDev 3 года назад

Ótimas dicas, anotei tudo aqui porque eu sou ruinzão de design. Muito obrigado por compartilhar conhecimento. Será que você poderia me dizer qual é esse app que deixa você riscar em cima do vídeo e mover o círculo com a câmera dentro, por gentileza, jovem Mayk?

@rocketseat 3 года назад

Faaaaaala, Anthony! Beleza? Valeu demais pelo feedback! 💜 Claro, te passo sim! 😛 A aplicacão para o círculo com a câmera: github.com/maykbrito/mini-video-me A aplicação que permite o desenho: github.com/maykbrito/fronteditorv2 Sucesso! 😉 🚀

@MarceloAlbukerki 3 года назад

Fala Mayk. Parabéns por suas colocações! Você citou um exemplo de que provavelmente na empresa vai haver um profissional Designer, mas, a realidade na qual eu mesmo me enquadro é a de que eu sou o Designer e o Programador. Lógico, eu trabalho como Freelancer, então preciso ter um estudo muito bem consolidado nas bases do Design. Afinal, meu cliente me contrata para construir um site, tenho que fazer tudo. Esse é o perfil de investimento de meus clientes. Suas dicas são simplesmente fantásticas e realmente depois que você tem essa base bem consolidada seus trabalhos ganham em qualidade e você passa a ser muito mais metódico nessa construção, é um estudo de muita importância, e diria quase obrigatório para programadores.

@jozieliosantiago 3 года назад

Mayk é incrível!! Alguém mais percebeu a mensagem subliminar aos 10:41 (404) kkkkk

@DjEdu28 3 года назад

eu tava encarando esses números... mas não sabia pq kkkkkkkkkkk

@rocketseat 3 года назад

👀 🤣

@viniciusbleszerd 3 года назад

A regra dos 8 pra mim veio do material design no android não faz muito tempo, eu comecei a usar na web só pra ver o que rolava e nunca mais parei haha

@samueloliveira4465 3 года назад

Mayk seria da hora você pegar alguns Sites de seguidores para comentar em cima, ai você fala do html, css e do JS caso tenha.

@rocketseat 3 года назад

Faaaaaala, Samuel! Boa! Ideia boa demais! Anotei aqui a sua sugestão! 💜

@joaobraz612 3 года назад

Eu quero saber como que é feito o sistema de um blog. Aquilo de criar posts. É feito na mão com js? É feito através de um wordpress da vida? Sempre tive essa dúvida

@devarthurreis 3 года назад

Atraves do back-end salvando os pots em um banco de dados

@samueloliveira4465 3 года назад

"Se algo vai fazer sentindo você vai deixar seu like". Eu: "Novamente" kkkkkkkkkkkkk

@rocketseat 3 года назад

Boa, Samuel! HAHAHAHA 💜

@helder-rangel 4 месяца назад

😀

@philipphahmann5971 3 года назад

Cara, me tira uma dúvida que achei bacana essa funcionalidade. Como você fez pra na pesquisa ir direto pro Google Imagens? Vi que na URL você digitou "!gi" porém no meu não foi, é uma extensão ? Obrigado de antemão :)

@maykbrito 3 года назад

eu uso o duckduckgo como mecanismo de busca

@philipphahmann5971 3 года назад

@@maykbrito ahh sim, muito obrigado pela resposta.

@thiago75501 3 года назад

Podia fazer um vídeo sobre grid. Não o grid do css kkj

@rocketseat 3 года назад

Faaaaala, Thiago! Sugestão anotada aqui! 💜

@ygorch 3 года назад

Maykão é tão carregado de conteúdo pra compartilhar as coisas que consigo absorver reflexões (até filosoficas), metodologias, referências, insights e cuidado tudo num vídeo só. Parabéns pela didática, Maykão! Obrigado Rocket[Family]seat por trazer essa e muitas outras estrelas para preencher nossas galáxias de conhecimento 🚀🙏🤟

@rocketseat 3 года назад

Wooow! Que feedback massa, Ygor! 💜 👏‍🏻‍ 👏‍🏻‍ 👏‍🏻‍ Maykão é fera demais! Nós que agradecemos o carinho, viu? Boooora pra cima com a gente! 🚀 🤟

@LivesDoVini 3 года назад

Sempre achei o Wikipedia um site mt desdesignizado

@nan-code 3 года назад

Essa palavra não existe kkkk mas achei engraçado, o padrão do design deles tem que ser aquele mesmo, afinal é um site puramente de leitura, muitos detalhes atrapalharia os usuários.

@lucascoelho6249 3 года назад

Muito legal o conteúdo desse vídeo !!!!!

@rocketseat 3 года назад

Que massa que curtiu, Lucas! 💜

@regisfaria320 3 года назад

Muito bom! São pequenas coisas que vale muito se atentar, principalmente quando você trabalha em uma equipe que não tem designers(algo que acredito ser mto comum).

@rocketseat 3 года назад

Faaaala, Régis! Exatamente! É muito mais comum do que você imagina, viu!? Que massa que curtiu o conteúdo! 💜 🚀

@Videosuser 3 года назад

Muito bom o vídeo. Apesar de não ser o foco do canal, adoraria ver um vídeo destinado a designers, como eu, sobre como fazer um design que seja otimizado para web principalmente focando no que não é possível construir. Acho a comunicação entre as duas áreas imprescindível, e não vejo muito esse tipo de conteúdo por aí. Eu até manjo de HMTL, CSS e JS, mas abaixo do nível que um programador mais experiente, então sempre fico na dúvida se o que eu quero fazer é possível, já que um conhecimento básico sobre as ferramentas que eu citei não me permite conhecer todo o potencial delas. Por exemplo, uma dica que me ajuda batante na hora de criar interfaces é pensar em termos de "DIVs" e que cada componente se transformará no HTML numa espécie de retângulo.

@LivesDoVini 3 года назад

Matk falou desse vídeo na live, tava esperando sair 💜

@rocketseat 3 года назад

E curtiu? 💜

@felipersilvarsilva9335 3 года назад

Maike Brito seria legal fazer um vídeo falando sobre o caminho front-end que tem no Github vi que o Diego fez referente ao caminho DevOps

@julianavalle1567 3 года назад

Também existe o padrão F de leitura, que vale a pena ser pensado na hora de criar o layout da página ou aplicativo o/

@FILELIFE 3 года назад

Maykão, alguma chance de a gente ver conteúdos voltados ao 3D na Rocketseat? Ultimamente venho trabalhando com WebGl e Three.js e sinto falta desse tipo de conteúdo em português.. grande Abraço ✌🏼

@thiagobaia262 3 года назад

Cheguei metendo o like maykão

@rocketseat 3 года назад

Valeeeeu demais, Thiagão! 💜

@brunoarubesu 3 года назад

Te adoro maykão ❤️

@rocketseat 3 года назад

Valeu demais pelo carinho, Bruno! 💜

@ErikPervious 3 года назад

boaa maykão

@rocketseat 3 года назад

Valeeeu, Erik! 💜

@RafaelSantos-pp1iz 3 года назад

second

@rocketseat 3 года назад

Boooa, Rafa! 💜

@VictorSilvaDev 3 года назад

Ótimo conteúdo

@rocketseat 3 года назад

Que massa que curtiu, Victor! 💜

@ericnevesr 3 года назад

Maikão é o cara!

@rocketseat 3 года назад

Vou ter que concordar... 💜

@leh2289 3 года назад

Valeu!! como programador a gente sofre com design kkkkk algo sim que acredito que dificulta a vida de muitos é o criar as imagens ou saber de onde extrair imagens em svg... tanto os flat como criar um bom logo :I

@danielcarlosdev 3 года назад

Top Maykao

@rocketseat 3 года назад

Valeu demais, Daniel! 💜

@chicoze2 3 года назад

Maik Brito

@rocketseat 3 года назад

💜 💜

@amanda-salagnac 3 года назад

Perfeito

@rocketseat 3 года назад

Que massa que curtiu, Amanda! 💜

@frontend81208iuuythb 3 года назад

Sou muito encantada por esse educador, pura gratidão

@rocketseat 3 года назад

Ele manda muito bem, né? 💜

@GabrielDias-jh1dz 3 года назад

Estava precisando desse vídeo hahaha

@rocketseat 3 года назад

Nós lemos pensamentos... 👀 💜

@vitorpetri1376 3 года назад

Maravilhoso! Valeu demais Mayk

@rocketseat 3 года назад

Que massa que curtiu, Vitor! 💜 👒

@HerlonCosta 3 года назад

Maykão você é o melhor! Obrigado por compartilhar esse conteúdo massa! #GravaComOGuanabara

@rocketseat 3 года назад

Valeu demais pelo carinho, Herlon! 😍 💜

@carolferreira7400 3 года назад

Com o melhor ❤️

@rocketseat 3 года назад

Ele é fera! 💜

@danielvinicius4906 3 года назад

ótima aula, a regra do grid foi foda!

@rocketseat 3 года назад

Curtiu, Daniel? 💜

@sidneijunior86 3 года назад

Muito da hora esse vídeo. super dica pra quem quer tocar uns projetinhos sozinhos tipo eu

@rocketseat 3 года назад

Faaaaala, Sidnei! Que massa que curtiu! Ajuda demais, né? 💜 🚀

@fabiacunha9562 3 года назад

Conheci esse canal a pouco tempo é estou apaixonada pelo dádivca do Maik .Muito top. Nota 10 .

@rocketseat 3 года назад

Wooow! Que massa, Fabia! Maykão manda bem demais, né!? Seja muito bem vinda! 💜

@odududev 3 года назад

Já deixei o like antes de tu pedir Maykão, tamo junto e vambora!

@rocketseat 3 года назад

Boa, Edu! HAHAHAHA Valeu demais pelo carinho! 💜

@joaobraz612 3 года назад

Dicas super úteis. No início eu não fazia ideia de como fazer um site. Sempre ia direto codando sem ter a noção de que precisa-se de um design antes.

@rocketseat 3 года назад

Que massa que curtiu, João! E isso acontece mais do que você imagina, viu? 👀 💜

@tiagoborges7297 3 года назад

Mesmo antes de ter assistido o vídeo todo, já deu meu like. Se é o Maykão, o vídeo é bom! Até rimou hahaha

@rocketseat 3 года назад

Boa demais, Tiago! HAHAHAHAHA 💜 💜

@elenarpiel 3 года назад

Absolutamente qualquer coisa que tiver o Mayk eu vou querer ver

@rocketseat 3 года назад

Woow! Boa demais, Elen! Curtiu o conteúdo? 💜

@diegofranca92 3 года назад

Dicas maravilhosas. Dá uma visão muito boa e simplificada

@rocketseat 3 года назад

Que show que curtiu, Diego! 💜

@maikinho8224 3 года назад

Esse site/app no início foram vocês que fizeram?

@rocketseat 3 года назад

Faaaala, Maikinho! Não não, é um exemplo pronto do *dribbble* 💜

@leonardodonatti3737 3 года назад

Sem brincadeira, esse é o melhor vídeo que eu vi nesse canal

@rocketseat 3 года назад

Sem brincadeira, valeu demais por esse feedback, Leo! 💜 💜 💜

@klebersanzony 3 года назад

muito muito tooooopppppp, obrigado Rocketseat!!!

@rocketseat 3 года назад

Que massa que curtiu, Klebeeeeeer! 💜

@1st_mz 3 года назад

mayk a sua mentalidade é foda cara! Parabéns e muito obrigado!

@rocketseat 3 года назад

Maykão é fera, né, Maganez? Nós que agradecemos o feedback! 💜

@raoniguimao 3 года назад

Professor, 5:45 não seria Camel Case?

@lucasestevam4951 3 года назад

Não, camel case no caso é quando uma palavra / frase é escrita tudo junto com a primeira letra maiúscula, no caso as variáveis/funções javascript são escritas normalmente dessa forma, como: const umExemplo onde a primeira palavra se manter tudo minúscula, diferente do python que usa a snake case: um_exemplo. é claro isso não é uma obrigação a comunidade das linguagens criam esses padrões, no caso no video ele ta falando da propriedade css: text-transform: capitalize que deixa todas as primeiras letras maiúsculas: Um Exemplo Disso.

@jair-araujo 3 года назад

Curti demais as dicas Maykão, gosto demais desses designs bem feitos.

@rocketseat 3 года назад

Dá um quentinho no coração ver, né, Jair? 💜

@jair-araujo 3 года назад

@@rocketseat com certeza, é inspirador demais!!! 🤩

@JulioCesar-xn6rw 3 года назад

Essa regra dos 8 foi sensacional !

@rocketseat 3 года назад

Demais, né, Júlio? 💜

@nan-code 3 года назад

Meu padrão de espaçamento começa em 5, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60.

@willsandres 3 года назад

Acredito eu que num projeto real diferença de 5 em 5 n daria um bom contraste, recomendaria o de 4, 8, 16, 32, 64 e 128 (mentoria Origamid 🐺😍)

@nan-code 3 года назад

@@willsandres há casos e casos de uso, aliás vc está se baseando apenas na dica dada no curso de web Designer da origamid, ele mesmo disse que esse padrão é pessoal dele, não é uma constante, tanto o padrão que citei e o seu, são variáveis.