Intro
O aspect ratio (ou proporção de aspecto) é a relação entre a largura e a altura de uma imagem ou vídeo. Essa proporção é expressa em números, como 16:9 ou 4:3, e desempenha um papel fundamental na forma como o conteúdo é exibido em diferentes dispositivos e plataformas.
No contexto de um Design System governamental, compreender e aplicar corretamente o aspect ratio é essencial para:
- Garantir consistência visual entre os diversos sites institucionais e serviços digitais.
- Evitar distorções ou cortes indesejados, assegurando que imagens e vídeos sejam exibidos de forma íntegra.
- Manter a harmonia estética, reforçando a identidade digital única do Governo de Mato Grosso do Sul.
- Melhorar a experiência do usuário, oferecendo conteúdos adaptados a diferentes telas (desktop, tablet, mobile).
Escala de Aspect Ratio Definida
O Design System MS estabelece uma escala de 7 proporções principais para composições visuais:
| Aspect Ratio | Uso Recomendado | Observações |
|---|---|---|
| 1:1 | Ícones, avatares, cards quadrados | Ideal para destaques compactos e redes sociais. |
| 4:3 | Imagens institucionais, fotos de eventos | Proporção clássica, boa para retratos e documentos. |
| 5:6 | Banners verticais, campanhas | Favorece composições mais altas, mantendo equilíbrio. |
| 8:1 | Faixas horizontais, cabeçalhos | Usado para banners longos e informativos. |
| 12:5 | Destaques visuais em carrosséis | Proporção intermediária, versátil para imagens amplas. |
| 15:4 | Chamadas institucionais de grande impacto | Excelente para campanhas com foco visual. |
| 16:9 | Vídeos, imagens responsivas | Padrão universal para mídia digital e dispositivos móveis. |
Abaixo estão alguns exemplos visuais dos Aspect Ratio:
Tipos de aplicação de Aspect Ratio para composição de grid
O exemplo abaixo é aplicado na seção da página de Secretárias:
Exemplo 1 aplicando os Aspect Ratio para definir as áreas onde o conteúdo serão substituídos.
Exemplo 2 usado no mesmo contexto, mas agora para compor uma seção de destaque com diferentes destaques com Aspect Ratio diferentes.
O interessante é que, com os Aspect Ratio definidos pelo Design System, pode-se proporcionar maior flexibilidade na composição dos conteúdos aplicados com as Grids.
Margem de Segurança
- Foi definida uma margem de composição para cada aspect ratio.
- Essa margem garante que elementos principais (texto, logotipo, ícones) não sejam cortados em diferentes dispositivos.
- Recomenda-se manter conteúdo crítico dentro da área segura, evitando posicionar informações importantes nas bordas.
Diretrizes de Composição
- Centralizar elementos principais dentro da área segura.
- Evitar excesso de texto em imagens de destaque.
- Usar imagens institucionais oficiais para reforçar credibilidade.
- Testar responsividade em diferentes telas (desktop, tablet, mobile).
Essa seção pode ser usada como guia prático para designers e desenvolvedores ao compor os Destaques nos sites institucionais.