Design para front-end - Root #09

[@gubmx20]

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]

Noossaa!! Excelente!! Vou procurar lembrar disso

[@mr.a2323]

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

[@allancassio6674]

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

[@rocketseat]

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

[@elizenetemachado7993]

@@rocketseat ki

[@TheTrollzica]

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.

[@soukaigiwar]

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]

Boa Sergiao!! Obg manin 💜

[@vagnereix]

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]

boa

[@luccateixeira5470]

Apoio.

[@Credin84]

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]

@@Credin84 vou assistir, obrigado!

[@Yanksz]

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

[@MarRockAndRoll]

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.

[@willsandres]

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 🐺😍)

[@ygorch]

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]

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

[@fabiacunha9562]

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

[@rocketseat]

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

[@giulianabezerra]

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]

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

[@joaobraz612]

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]

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

[@regisfaria320]

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]

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

[@frontend81208iuuythb]

Sou muito encantada por esse educador, pura gratidão

[@rocketseat]

Ele manda muito bem, né? 💜

[@diegofranca92]

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

[@rocketseat]

Que show que curtiu, Diego! 💜

[@Videosuser]

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.

[@sidneijunior86]

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

[@rocketseat]

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

[@leonardodonatti3737]

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

[@rocketseat]

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

[@AndrelinoSilvas]

Parabéns Maykão pelo aula!

[@rocketseat]

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

[@AndrelinoSilvas]

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

[@1st_mz]

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

[@rocketseat]

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

[@JulioCesar-xn6rw]

Essa regra dos 8 foi sensacional !

[@rocketseat]

Demais, né, Júlio? 💜

[@brunoarubesu]

Te adoro maykão ❤️

[@rocketseat]

Valeu demais pelo carinho, Bruno! 💜

[@jozieliosantiago]

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

[@DjEdu28]

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

[@rocketseat]

👀 🤣

[@danielvinicius4906]

ótima aula, a regra do grid foi foda!

[@rocketseat]

Curtiu, Daniel? 💜

[@elenarpiel]

Absolutamente qualquer coisa que tiver o Mayk eu vou querer ver

[@rocketseat]

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

[@jair-araujo]

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

[@rocketseat]

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

[@jair-araujo]

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

[@lucascoelho6249]

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

[@rocketseat]

Que massa que curtiu, Lucas! 💜

[@HerlonCosta]

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

[@rocketseat]

Valeu demais pelo carinho, Herlon! 😍 💜

[@samueloliveira4465]

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]

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

[@tiagoborges7297]

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]

Boa demais, Tiago! HAHAHAHAHA 💜 💜

[@LivesDoVini]

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

[@rocketseat]

E curtiu? 💜

[@AnthonyDev]

Ó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]

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! 😉 🚀

[@leh2289]

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

[@carolferreira7400]

Com o melhor ❤️

[@rocketseat]

Ele é fera! 💜

[@vitorpetri1376]

Maravilhoso! Valeu demais Mayk

[@rocketseat]

Que massa que curtiu, Vitor! 💜 👒

[@klebersanzony]

muito muito tooooopppppp, obrigado Rocketseat!!!

[@rocketseat]

Que massa que curtiu, Klebeeeeeer! 💜

[@VictorSilvaDev]

Ótimo conteúdo

[@rocketseat]

Que massa que curtiu, Victor! 💜

[@julianavalle1567]

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/

[@tiagoalvespereira6038]

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

[@Marujhin]

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

[@thauaengelmann770]

Up

[@washingtonazevedo1514]

Up

[@thenriquedb]

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]

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

[@GabrielDias-jh1dz]

Estava precisando desse vídeo hahaha

[@rocketseat]

Nós lemos pensamentos... 👀 💜

[@osmarbritodasilva6546]

Sempre de olho👀👁️

[@rocketseat]

👀 💜

[@dharuanluigi]

Mayk é god demais!

[@rocketseat]

Maykão é fera! 💜

[@odududev]

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

[@rocketseat]

Boa, Edu! HAHAHAHA Valeu demais pelo carinho! 💜

[@felipersilvarsilva9335]

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

[@alexandresoarespereiralima886]

muito bom . esse é o cara

[@rocketseat]

Maykão é fera demais! 💜

[@viniciusbleszerd]

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

[@amanda-salagnac]

Perfeito

[@rocketseat]

Que massa que curtiu, Amanda! 💜

[@philipphahmann5971]

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]

eu uso o duckduckgo como mecanismo de busca

[@philipphahmann5971]

@@maykbrito ahh sim, muito obrigado pela resposta.

[@joaobraz612]

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]

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

[@maikinho8224]

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

[@rocketseat]

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

[@thiagobaia262]

Cheguei metendo o like maykão

[@rocketseat]

Valeeeeu demais, Thiagão! 💜

[@supremorei]

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.

[@danifelicio6406]

Top

[@FILELIFE]

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 ✌🏼

[@danielcarlosdev]

Top Maykao

[@rocketseat]

Valeu demais, Daniel! 💜

[@samueloliveira4465]

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

[@rocketseat]

Boa, Samuel! HAHAHAHA 💜

[@helder-rangel]

😀

[@ErikPervious]

boaa maykão

[@rocketseat]

Valeeeu, Erik! 💜

[@andresdosantos5310]

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

[@raoniguimao]

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

[@lucasestevam4951]

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.

[@nan-code]

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

[@willsandres]

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]

@@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.

[@thiago75501]

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

[@rocketseat]

Faaaaala, Thiago! Sugestão anotada aqui! 💜

[@chicoze2]

Maik Brito

[@rocketseat]

💜 💜

[@luosnv]

11:02 kkkkkkkkk

[@rocketseat]

👀 🤣 🤣 🤣 🤣

[@RafaelSantos-pp1iz]

second

[@rocketseat]

Boooa, Rafa! 💜

[@LivesDoVini]

Sempre achei o Wikipedia um site mt desdesignizado

[@nan-code]

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.

[@ericnevesr]

Maikão é o cara!

[@rocketseat]

Vou ter que concordar... 💜