Introdução à Proporção

Proporção tem uma longa história de definição da beleza na arte e no design. Os antigos egípcios usavam um sistema de grade para sua arte de parede, ajudando a estabelecer escala, proporção, e ilustrar a hierarquia. Os Antigos Gregos eram fascinados com as proporções do corpo humano. A Razão de Ouro era usada para criar proporções “perfeitas” para a Bíblia de Gutenberg. Não faltam exemplos de proporções a serem cuidadosamente consideradas.

Hoje em dia, a proporção vive como um poderoso princípio de desenho que ajuda a formar consistência, hierarquia, ritmo, e beleza geral no desenho. Nesta lição, vamos discutir como usar a proporção no design da IU.

Tamanho vs Escala vs Proporção

Para tirar vantagem da proporção no design da IU, devemos primeiro entender as diferenças entre tamanho, escala e proporção. Todos estes três termos estão relacionados, mas há algumas distinções claras a considerar.

Tamanho é a dimensão real de um elemento, muitas vezes medida em px, pt, em, rem etc.

Por exemplo, o tamanho deste logotipo é 75px de altura e 275px de largura.

Escala é a dimensão relativa de um elemento, frequentemente medida por percentagens ou múltiplos.

Por exemplo, um elemento pode ser escalado para ser maior ou menor do que o seu tamanho original.

Proporção é a relação harmoniosa entre dois ou mais elementos de escala.

Por exemplo, se um elemento aumenta de tamanho, os elementos restantes devem também aumentar ao mesmo ritmo para se manterem proporcionais.

Proporção em UI Design

Comparar um logotipo proporcional e desproporcionado é uma coisa, mas você provavelmente está se perguntando “Como isso funciona para UI Design? Afinal de contas, com diferentes tamanhos de tela e dispositivos, não é possível manter uma IU proporcional, certo? A resposta a essa pergunta é “Sim e Não”

UIs normalmente incluem uma combinação de elementos estáticos e fluidos.

  • Os elementos estáticos permanecem do mesmo tamanho, independentemente de quão grande ou pequena é a tela.
  • Os elementos flúidos são escalados para uma determinada percentagem do seu recipiente.

Por definição, comparar elementos estáticos com elementos fluidos nunca resultaria num desenho proporcional, porque eles não são escalados na mesma proporção. No entanto, os usuários normalmente não trocam de dispositivos enquanto experimentam sua IU.

Com isto em mente, é possível usar proporção no Projeto de IU. No entanto, pode não ser como você esperaria.

Units of Measurement in UI Design

Você provavelmente já ouviu o termo “pixel” usado com mais freqüência como unidade de medida para produtos digitais. Isto era geralmente aceitável até 2010 quando a Apple introduziu o Retina Display.

O Retina Display mudou a forma como pensávamos sobre o “tamanho” ao embalar em duas vezes mais pixels por polegada quadrada do display. Enquanto o tamanho de um elemento entre uma Retina e uma não-Retina parece ser o mesmo, o número total de pixels que compõem esse elemento é muito diferente. Por exemplo, um botão de 48px de altura em uma tela normal teria agora 96px de altura em uma tela Retina devido à densidade de pixels.

Desde então, muitas telas diferentes de Alta Densidade de Pixels (HPD) se tornaram disponíveis em muitas marcas e dispositivos diferentes. Felizmente, as telas HPD são normalmente definidas por quantos mais pixels cabem por polegada quadrada do que a tela padrão de 1X pixels de densidade.

Por exemplo, a maioria das telas pode ser descrita como tendo uma densidade de 1X, 2X ou 3X pixels.

O termo “pixel” ainda é comumente aceito para descrever o tamanho de um elemento. Entretanto, para evitar confusão, muitos designers preferem usar o termo “ponto” ou “pt”, que descreve o tamanho, independentemente da densidade de pixels da tela.

Para o restante desta lição, usaremos os termos “pt” e “px” intercambiavelmente como a unidade de medida para descrever as relações entre os elementos em nosso design.

O sistema de grade 8pt

Ao trabalhar com softwares de design, como Illustrator, Photoshop, Sketch, XD, Figma etc. é muito comum que os designers usem grades ou colunas para auxiliar em seus esforços de design. Muitos dos princípios de design discutidos neste curso podem ser alcançados com a ajuda de grades ou colunas, portanto não é surpresa que eles sejam uma ferramenta popular na caixa de ferramentas do designer.

No entanto, há uma estratégia em particular, que funciona excepcionalmente bem em proporção. Esta estratégia é conhecida como o Sistema de Grade 8pt.

O Sistema de Grade 8pt foi introduzido pela primeira vez pela especificação Material Design do Google. Felizmente, é bastante fácil de entender. Essencialmente, você quer usar uma grade que é composta de quadrados de 8 x 8 pt. Ao desenhar no topo desta grelha, você vai querer garantir que todos os elementos se encaixem na grelha.

Esta situação resulta em elementos com dimensões que são sempre divisíveis por 8. Ao desenhar desta forma, é fácil manter os elementos proporcionais, enquanto cria uma sensação de ritmo vertical ao longo do desenho.

Porquê 8 Pontos?

O sistema 8pt é o mais adotado por duas razões principais:

  • As dimensões de tela mais comuns são divisíveis por 8, tornando seus designs muito nítidos e claros na maioria dos dispositivos (sem divisão de pixels).
  • O tamanho de fonte base recomendado na web é 16px. Isto permite aos desenvolvedores escalar elementos em uma página web em unidades REM, mantendo-se fiel ao sistema de grade.

Overall, há mais benefícios em usar 8 pontos ao invés de qualquer outro número para a grade. No entanto, você pode usar um número como 10pt ou 12pt se for melhor para você.

Por que não 4 pontos?

As especificações do Google Material Design recomendam usar 4pt para “Componentes menores, como iconografia e tipografia”. No entanto, a maioria dos elementos de IU ainda pode ser manipulada pelo sistema 8pt, por isso é mais popular começar com.

The Golden Ratio

The 8pt GridSystem tem suas claras vantagens no design de IU, mas se você fizer uma pesquisa rápida no Google para “Proporção no design de IU” você será recebido com uma página inicial cheia de resultados referentes ao Golden Ratio.

O Golden Ratio é de 1:1.618 e acredita-se ser a intersecção da matemática com a beleza estética. Muitos designers ignoram completamente os sistemas de grelha a favor da criação de proporção com a Golden Ratio em vez disso.

Há muitos exemplos de como a Golden Ratio tem sido usada para tudo, desde a Bíblia de Gutenberg até ao design moderno do logótipo até às ocorrências na natureza. Contudo, há outros que acreditam que a beleza da Golden Ratio é simplesmente um mito.

Independentemente, não há como negar que muitos estão enamorados pela Golden Ratio, por isso vale a pena mencionar nesta lição.

Usando a Golden Ratio no design da IU

Na lição 4 deste curso discutimos que um design não deve ter mais do que 3 a 4 níveis de hierarquia numa determinada secção da IU. Com isto em mente, você pode aplicar a Razão de Ouro no seu design seguindo estes simples passos:

Definir a altura de um retângulo e multiplicar esse número por 1,618 para encontrar a largura. Isto cria um “Retângulo Dourado”

No exemplo acima, nosso número inicial é 350pt, mas você pode usar o número que quiser.

Dividir o seu Retângulo Dourado em quadrados perfeitos. Cada quadrado perfeito resultará num novo e menor Retângulo Dourado.

Continue a dividir o Retângulo Dourado até ter 3-4 quadrados perfeitos diferentes de tamanhos diferentes.

Utilize o tamanho de cada quadrado como um “placeholder” para ajudar a quebrar o seu layout e comunicar a hierarquia no seu design.

>
>

Overall, o resultado é um design estético e proporcional. Dê uma olhada neste exemplo do Prototypr.io.

Starting With Constraints

Agora que nós cobrimos alguns métodos para estabelecer proporção no UI Design, vamos discutir alguns grandes pontos de partida. Começando com restrições primeiro, é mais fácil construir sua IU em torno dessas restrições.

Mobile First Design

A frase “Mobile First” foi cunhada por Luke Wroblewski em seu livro com o mesmo título. O termo ganhou popularidade junto dos designers como uma forma de combater a vontade de enfiar mais coisas numa IU simplesmente porque havia muito espaço para o fazer.

Ao focar primeiro no design móvel, os designers devem trabalhar em torno das restrições dos dispositivos móveis e focar no que realmente importa. Como resultado, a experiência do usuário permanece consistente entre dispositivos, já que o objetivo principal da IU continua sendo o centro das atenções.

Tamanho da fonte

Como mencionado anteriormente, o tamanho padrão da fonte para o corpo de texto na web é 16px para a maioria dos principais navegadores. Qualquer coisa menor que isso pode desencadear algum comportamento de zoom inesperado em dispositivos móveis Apple. Como resultado, é geralmente recomendado deixar 16px como tamanho de fonte base e especificar os tamanhos de fonte restantes (cabeçalhos, pequenos textos, legendas, etiquetas, etc.) de acordo.

Podemos definir estes tamanhos de fonte com a proporção em mente, seguindo as especificações de Design do Google Material e escolhendo tamanhos com incrementos de 4pt, tais como o guia de estilo do Bootstrap para tamanho de fonte.

Nota: incrementar o tamanho da fonte pelo Golden Ratio não é recomendado, pois as diferenças entre cada tamanho de fonte seriam muito grandes. Por exemplo, começando com um tamanho de fonte base de 16 e multiplicando cada nível de cabeçalho por 1,618 resultaria num cabeçalho H1 de 177,4 pts, o que seria muito difícil para a legibilidade.

Tamanho de botão

Outro fator limitante a considerar é a precisão do método de entrada que é usado no seu design. Neste caso em particular, estamos nos referindo a dedos, polegares, cursores e canetas stylus.

Dedos e polegares são muito mais largos e menos precisos que os cursores ou canetas stylus. Com isto em mente, é importante certificar-se que os tamanhos dos seus botões, entradas, ícones ou outros pontos de toque são escolhidos cuidadosamente para ter em conta estas limitações.

Google’sMaterial Design recomenda que os pontos de toque no telemóvel não sejam menos do que 48pt de altura e 48pt de largura com não menos do que 8pt entre eles.

Largura do conteúdo

O conteúdo é fluido, o que significa que preenche tanto o espaço horizontal e vertical quanto é capaz. Apesar desta característica, é boa prática definir uma largura mínima e máxima para o seu conteúdo.

A largura mínima do conteúdo pode ser determinada pela largura mínima da tela que o seu design irá suportar. A menor resolução de tela que a maioria dos designers suporta é de 320px (ou seja, 1X) de largura. No entanto, você deve escolher sua largura mínima com base em dados reais do usuário, se você for capaz de obtê-la. Google Analytics é um bom lugar para procurar este tipo de dados.

Embora a largura do conteúdo possa preencher tanta tela quanto a sua dada, geralmente não é recomendado permitir que o seu conteúdo abranja mais de 52 caracteres por linha. Isto sugere que a largura máxima do seu conteúdo pode ser determinada usando o corpo do texto real no seu tamanho de fonte normal e encontrando uma largura de conteúdo confortável que se ajuste a este intervalo.

Conclusão

Em conclusão, a proporção é um princípio de design útil. Apesar de ter uma combinação de elementos estáticos e fluidos, uma IU proporcional ainda pode ser alcançada usando um Sistema de Grade 8pt, a Golden Ratio, ou outro método. Quando você começa a definir as dimensões dos elementos, é prática comum começar com suas restrições, tais como dispositivo, tamanho da fonte, tamanho do botão, e largura do conteúdo. Depois que seus tamanhos de base são definidos, é muito mais fácil escalar os elementos de acordo.

Lição seguinte
Princípios do design: Espaço Branco

Lição anterior
Princípios do Design: Ênfase

Feedback

Como esta lição pode ser melhorada? Por favor, deixe o seu feedback abaixo!