Vamos falar um pouco sobre plan!

7 min readNov 21, 2020

Olá, sou estagiário de programação, e nesse meu início de carreira comecei a perceber a necessidade de desenvolver alguns conhecimentos além do código para evoluir em minha carreira. Um deles é o Plan.

Considerando isso, me interessei em conhecer um pouco mais desse assunto e graças a dicas de uma pessoa que traz uma grande bagagem de plan de aplicações, consegui encontrar um fluxo de estudos para me apoiar nessa caminhada e hoje gostaria de compartilhar alguns pontos que acredito que possam ajuda-los na busca desse conhecimento.

Vamos começar…

O primeiro tópico seria o framework de 8 pontos, ou simplesmente…

Framework 8

Foi a partir do lattice 8 que encontrei um norte em meus estudos. Bets dele tudo que eu tinha period uma tela em branco…

Vou explicar esse sentimento…

Bom. envision que você precisa criar do zero uma página de login portable, esteja você trabalhando ou apenas praticando… Nós, como desenvolvedores, temos somente em vista uma folha em branco de onde partiria nossa tela.

Sabemos apenas a resolução, mas como ficam as coisas? O tamanho? Em qual posição devotional posicionar os elementos? E a distância entre eles???

SOCORRRROOO!!!

Bom, graças ao framework 8, isso acaba aqui, pois nossa tela não será mais uma simples folha em branco. Vamos dar an ela algo que nós, desenvolvedores, adoramos: LÓGICA.

O network 8 é uma convenção que trata de pegar a tela em branco e dividi-la em um lattice com quadros de 8 x 8, da seguinte forma:

SHOWWW, public square temos um quadriculado!!

Certo. Em um primeiro momento, parece ser só isso, mas se você perceber, public square podemos seguir uma lógica de criação, onde tasks os espaçamentos e tamanhos de componentes em tela se encaixam em múltiplos de 8. Vamos pôr alguma coisa nessa tela para que possamos ver a mágica acontecer!

Tá bom, tá cheio de componentes. Mas e daí? No que isso me ajuda?

Vamos colocar estes componentes juntos e vamos perceber que as coisas começam a ficar mais claras. Vamos começar pelo primeiro elemento…

O que precisamos fazer é seguir o framework e dar espaçamentos de múltiplos de 8. Então, seguindo essa lógica, vamos deixar o espaçamento do nosso primeiro elemento para o topo da tela com a distância de 40px…

Beleza, marketplace vamos para o próximo da lista… Seguimos a mesma lógica de utilizar um espaçamento múltiplo de 8…

Abaixo, colocamos o próximo componente. Como sabemos que é outro campo de login, usaremos um distanciamento menor entre o campo de usuário e ele.

A nossa tela já está ganhando forma. Public square, vamos incluir o botão. Como ele também faz parte do contexto do formulário de login, vamos deixá-lo próximo dos campos de usuário e senha…

E por fim, colocamos um connect para recuperar senha… Como ele também está ligado ao contexto de login, vamos deixá-lo próximo aos outro componentes…

Como podemos observar, os componentes que fazem parte do mesmo contexto tem um distanciamento menor, de 16px e para quebrar an ideia de mesmo contexto utilizamos um espaçamento de 32px do logo para o formulário…

E não são só os distanciamentos que estão seguindo um padrão de múltiplos de 8. Operating system componentes também seguem este padrão, veja:

Espero que marketplace tenha ficado mais claro o uso de lattice…

Mas nem tudo são flores!

Com o passar do beat, mais e mais aparelhos como cell phones, scratch pad, e monitores foram desenvolvidos. E junto deles, novas resoluções foram aparecendo no mercado. Com a chegada dessas novas resoluções, o matrix 8 passou a não se encaixar perfeitamente em várias delas… Vejamos o exemplo abaixo:

Essa é a resolução do Iphone 8 (375 x 667).

Vamos dar uma olhada nas bordas de nosso matrix de 8 x 8 e ver como estão as coisas:

Temos uma sobra em tela, tanto vertical, quanto horizontalmente…

Ok, NÃOOOO. EU LI ATÉ AQUI PRA DESCOBRIR QUE NÃO SERVE MAISSS…

Calma, respira…

Isso nos leva ao segundo ponto que gostaria de trazer para vocês. Estou falando do…

Delicate Lattice

Para falar de Delicate Framework, precisamos falar risks sobre Hard Lattice…

Hard Framework é exatamente o que fizemos no exemplo acima…

Mas tu falou que aquilo é framework 8, e public square mudou para Hard Lattice? Assim não dá!!!

Calma, an explicação para isso é que o conceito de Hard Framework e Delicate Lattice são aplicados sobre o network 8… Por exemplo: quando a resolução e os componentes e suas extremidades se encaixam perfeitamente no matrix, e suas alturas e larguras são divisíveis por 8, nós chamamos de Hard Framework…

Mas como eu falei acima, o rhythm fez com que o Hard Matrix não suprisse todas as necessidades por conta das novas resoluções, fazendo com que tivéssemos Designs tortos. Com isso, surgiu a metodologia/convenção do Delicate Framework.

O Delicate Lattice te diz o seguinte, não me importo com o tamanho dos teus componentes só quero que você mantenha o distanciamento com base em 8 pontos.

Então vamos adaptar nosso design do exemplo foremost an este conceito:

Percebam que o nosso design continua centralizado na tela como deveria, mesmo ela não estando perfeitamente divisível por 8… E também vejam como estão nossos espaçamentos:Mixed

Operating system componentes também mantiveram o distanciamento seguindo o padrão de múltiplos de 8…

Então o que mudou?

Vamos dar uma olhada no tamanho de nossos componentes:

Nesse caso em especifico mantivemos an altura dos componentes, mas perceba que para deixarmos eles centralizados em tela “sacrificamos” a largura divisível por 8…

Chegamos em um ponto onde podemos diagramar um design com um pouco mais de facilidade, ressalvando que o que foi dito até public square é uma introdução ao conteúdo citado, aconselho a busca por mais conteúdo a respeito…

Risks de dar tchau…

Gostaria de agradecer em particular a TASDesigner # Tiago que além de ser meu líder técnico também é um baita amigo/tutor sempre disposto a nos ajudar e encorajando nossa evolução…

A tasks que chegaram até aqui fica meu muito obrigado!

Vamos falar um pouco sobre plan!

Written by Kalachan