Sobre larguras de elementos em uma interface

[akfzambrana]

Bom dia pessoal,

Tenho uma hipótese que preciso provar se ela é verdadeira ou não e preciso da ajuda de vocês para isso.

Hipótese:

Em questão de largura, tudo na interface de uma aplicação web ou app pode ser resumido em 5 larguras, sem levar em consideração o tamanho 100%:

• extra pequeno
• pequeno
• médio
• grande
• extra grande

O que preciso de vocês:

Que me ajudem a provar que estou errada me mostrando casos em que essa base não se aplica. Por favor justifiquem o porque não se aplica e se puderem coloquem uma imagem para ilustrar 😄

Compartilhem por ai pra geral ajudar também.

Obrigada!

[leandroc]

Oi @akfzambrana, eu até ousaria dizer que esse é um padrão hoje em dia, mas com CSS Grid aí, isso tendo a mudar. Esse “padrão” existe hoje por muita gente usa bootstrap e outros frameworks.
Eu não diria que você está errada, mas também não diria que está certa ;)

[leandroc]

Digitar pelo celular faz a gente perder um monte de palavra 😒

[raphaelfabeni]

Esse é um assunto muito legal pra se discutir. Esse padrão de breakpoints que você levantou acho que já segura a maioria dos casos. Mas recentemente comecei a pensar uma coisa e até aos poucos tenho testado algumas coisas diferentes na hora de desenvolver. Percebi que essas quebras/valores são muito bem aplicadas pro grid geral ou container como preferirmos chamar, mas quando descemos pro nível de componente fica um pouco mais difícil de seguir à risca essas quebras, ainda mais se for uma UI mais complexa. Tenho feito alguns testes isolando o componente num escopo que ele por si só se adapta em qualquer resolução, então ele teria as suas quebras ou breakpoints e teoricamente teria que se ajustar em qualquer resolução. Mas voltando, rs, concordo com você e diria que dependendo da interface você consegue até reduzir esse número.

[akfzambrana]

@leandroc consegue ilustrar ou exemplificar como isso mudaria com o grid layout? até onde tenho estudado a respeito dele, ainda precisaremos dividir a tela em N pedaços para criar o grid, a minha hipotese ate onde entendo ainda se aplica. Pode me ajudar a entender melhor o seu ponto?

@raphaelfabeni então, pelo que tenho percebido 3 tamanhos ja cumprem quase todos os papeis em questão de layout, os 2 adicionais (extra pequeno e extra grande) seriam as "excessões" que as vezes são necessárias. Você poderia falar mais sobre seus testes? fiquei curiosa 😄

Falando de interfaces complexas, vocês teriam alguns exemplos para mostrar? tal vez eu esteja analisando apenas interfaces simples 🤔

Apenas como esclarecimento, não estou falando apenas de "breakpoints" mas de larguras de containers e inclusive estes tamanhos combrem componentes dentro desses containers ate onde consigo analisar, mas como pedi ajuda para provar que estou errada gostaria de exemplos, porque os casos onde minha hipotese é correta eu ja tenho hauhaahuah agora preciso quebrar ela pra ver mais fora da minha propria experiencia 😄

Tenho analisado muitas interfaces de aplicações, sites, etc e tenho percebido esse padrão de que falei sobre as larguras dos elementos. Para exemplificar melhor vou falar de colunagem mas apenas porque é um conceito de "medida" e não que eu pretenda utilizar a colunagem dentro de uma interface. (Estou falando de 12 colunas, mas de forma independente da largura da view).

Por exemplo:
Nas interfaces reais que tenho analisado percebo que existem containers de 4, 6 e 8 colunas, quase sempre estas tres larguras se repetem em diversos lugares e mesmo quando temos dois componente dentro de um container, no container tb se repetem (lembrando que o container passa a ter novamente 12 colunas)
Neste caso, as vezes encontramos elementos de 2 colunas ou 10 colunas, mas dificilmente encontramos 1 ou 11 e o mesmo acontece para 5 e 7, o que as vezes encontramos é 3 colunas mas nestes casos a view em si ta dividida de forma diferente (por isso penso que tal vez a minha hipotese esteja 100% errada 🤔)

[felipefialho]

@akfzambrana

@raphaelfabeni então, pelo que tenho percebido 3 tamanhos ja cumprem quase todos os papeis em questão de layout, os 2 adicionais (extra pequeno e extra grande) seriam as "excessões" que as vezes são necessárias. Você poderia falar mais sobre seus testes? fiquei curiosa 😄

É isso, hehe

Acho que small, medium e large contemplam 90% (número mágico) dos casos, e os dois adicionais (extra-small e extra-large) dão conta do resto.

Não peguei ainda cenários que precisavam de mais opções.