Layouts
Os layouts Smart Chip usam um sistema de grelha simples, mas flexível, que mantém tudo com um aspeto limpo e consistente. Ao mesmo tempo, dá-te bastante liberdade para te adaptares a diferentes tamanhos, formatos e necessidades de design.
Estilos de layout
Existem dois tipos de disposição: Impressão até à borda e Espaço em branco. Ambos usam o mesmo sistema de grelha e as mesmas regras.
Impressão até à borda Estes layouts usam a nossa paleta de cores, imagens marcantes e títulos grandes para chamar a atenção. Funcionam melhor em sinalética ou como elemento de destaque quando combinados com layouts que aproveitam o espaço em branco.
Espaço em branco Os layouts deixam mais espaço para o texto e podem conter mais informação do que um layout com margens mínimas. Isso torna-os mais adequados para contar uma história.
Configuração da grelha
Começa pelas margens. A margem padrão para os layouts é 8% do lado mais curto.
Divide a área interior numa Grelha de 10×10.
É isso mesmo. Assim tens o sistema de grelha completo. Usa as linhas da grelha para alinhar e dimensionar elementos como o logótipo, os títulos, os CTAs, as imagens e muito mais.
Como usar a grelha
Usa as linhas da grelha como guia para alinhar os elementos. O sistema foi concebido para ser flexível, por isso, sente-te à vontade para misturar e combinar tamanhos e disposições, de forma a criar um layout que se adapte às tuas necessidades.
Notícias em destaque
Os títulos podem ser tão grandes quanto for preciso para preencher o espaço disponível. Mas não têm de ser assim – às vezes, mais pequenos ficam melhor. Dá espaço ao design para respirar.
Mantém uma distância em relação às imagens de, pelo menos, a largura da margem. Não coloques títulos sobre as imagens, exceto em layouts com imagem a preencher toda a página.
O texto pode ficar abaixo de uma linha da grelha ou alinhado com ela, o que ficar melhor no teu layout.
Imagens
Alinha também as imagens às linhas da grelha. As imagens podem parar na margem, para um aspeto limpo e estruturado, ou estender-se até à borda. Para um efeito mais dinâmico e envolvente, também podem ocupar toda a área, com texto e elementos sobrepostos.
O fundo ao lado da imagem pode ser preto ou branco. O branco transmite uma sensação de leveza e liberdade, enquanto o preto é elegante e poderoso. Escolhe o estilo que melhor se adequar ao contexto e ao conteúdo.
Quando fizeres um layout de página inteira, certifica-te de que o texto continua a ser fácil de ler. Podes aumentar um pouco a espessura do tipo de letra, se isso ajudar na legibilidade. Além disso, não coloques texto em cima de partes importantes da imagem (como rostos) nem em áreas muito cheias de detalhes.
As opções de sangria para imagens são: sangria total (que se estende por todos os lados), sangria parcial (que se estende por três lados) ou sem sangria.
Evita fazer sangria parcial apenas num ou nos dois lados.
Imagem na imagem
Colocar imagens em camadas e sobrepor-nas é uma ótima maneira de partilhar mais informação, dar mais dinamismo ao layout e criar profundidade visual.
Deixar que as imagens sobrepostas saiam ligeiramente da grelha torna-as ainda mais dinâmicas.
Pontuação
O marca (Logótipo ou ícone) costuma ficar no canto superior esquerdo ou direito, encostado à margem.
A escala é diferente para layouts horizontais e verticais:
- Em layouts horizontais, ajusta o tamanho da marca de forma a que a parte “SC” tenha uma a duas unidades de grelha de altura.
- Em layouts verticais, ajusta a largura para que fique entre duas a quatro unidades de grelha.
Ao posicionar a marca, alinha-a à parte “SC” em vez de aos pontos. Os pontos sobrepõem-se ligeiramente às linhas-guia.
Só colocas a marca sobre a imagem se esta continuar a ser facilmente legível. Escolhe a versão (preta ou branca) que proporcionar melhor legibilidade.
Exemplos
Exceções
O sistema de grelha funciona bem para a maioria dos tamanhos. No entanto, há algumas circunstâncias especiais que exigem que se saia da grelha.
Imagens quadradas
A grelha não permite imagens perfeitamente quadradas, mas ficam muito bem em muitos casos. Não faz mal quebrar um pouco as regras aqui – basta certificares-te de que a imagem fica alinhada com três linhas da grelha.
Formatos ultra-largos
Em formatos muito largos, como os banners, seguir as linhas da grelha resulta numa marca muito pequena e numa margem demasiado estreita (exemplo de cima).
Nestes casos, podemos usar a primeira linha horizontal da grelha como nova margem. Além disso, podemos redimensionar a marca para que ocupe toda a altura até à margem (exemplo de baixo).
Formatos muito altos
O mesmo se aplica a formatos muito altos. Neste exemplo, dimensionar a marca para quatro grelhas torná-la-ia demasiado pequena (exemplo da esquerda). Para obter um tamanho mais harmonioso para a marca, podemos quebrar a regra neste caso e aumentá-la (exemplo da direita).
O que não deves fazer
Por favor, evita os seguintes erros.
Não ultrapasses as margens.
Não faças as marcas demasiado grandes.
Não faças as marcas demasiado pequenas.
Não combines imagens com uma cor que não combine.
Não coloques margem nas imagens apenas num ou em dois lados.
Não sobreponhas parcialmente o texto e as imagens.
Não coloques texto em cima de imagens de forma a dificultar a leitura.
Não coloques o texto muito apertado.