Suíço Modelos HTML

Modelos HTML Suíços Fáceis de Usar para Páginas Web Estruturadas

A serenidade de um layout suíço perde-se facilmente no código. O que no ecrã parece uma grelha rigorosa pode desarticular-se logo nas primeiras edições, a menos que a marcação esteja dividida ao longo das mesmas linhas. Modelos HTML suíços bem concebidos acertam nisto desde o início, associando zonas de conteúdo a colunas e unidades repetitivas para projetos e artigos.

Marcação Construída em Torno de Colunas

Na composição suíça, cada elemento de conteúdo possui uma zona definida na grelha, e a marcação dá forma a essas zonas. Os padrões que vale a pena verificar primeiro são os que se repetem:

• Um índice de projetos cujas linhas partilham os mesmos elementos, como um número, um título e uma miniatura, cada um pronto para a sua própria coluna.
• Uma entrada de portfólio que mantém uma área de imagem ampla separada de uma área de texto estreita, de modo que a divisão assimétrica sobreviva a uma nova foto ou a uma descrição mais longa.
• Um artigo editorial cujo título principal e subtítulos mantêm níveis fixos de cabeçalho, para que a ordem de relevância resida na marcação.
• Um bloco compacto de especificações para localização, ano e cliente, posicionado ao lado do texto principal.

O Lugar do Espaço em Branco

Os designers suíços utilizam o espaço para separar grupos de informação, e um modelo apenas preserva esse ritmo se a sua marcação definir os mesmos limites. Quando a apresentação do estúdio, a lista de projetos e as informações de contacto residem em regiões distintas, qualquer um deles pode mudar sem perturbar os intervalos em torno dos restantes. Layouts deliberadamente irregulares dependem ainda mais disto. Um título com uma coluna vazia ao lado, ou uma breve nota deslocada para a extrema-direita, mantém a sua posição quando cada elemento é uma unidade independente no código.

Código Moldado por Projetos ou Artigos

Dois modelos suíços podem parecer quase idênticos numa captura de ecrã e, ainda assim, servir finalidades distintas. Um modelo de portfólio é organizado em torno de unidades de projeto repetíveis, pelo que adicionar um novo projeto consiste principalmente em duplicar um bloco existente e substituir o seu conteúdo. Um modelo editorial investe mais em textos longos, com uma hierarquia de títulos mais profunda, citações destacadas e listas de artigos que se mantêm legíveis numa coluna estreita.

Se planeia personalizar o design no Nicepage, exportá-lo como HTML e continuar a trabalhar no código, verifique se as unidades repetidas do modelo correspondem ao seu conteúdo. Quando a marcação já reflete os seus projetos ou artigos, o desenvolvimento passa a ser apenas uma questão de preenchimento e afinação, mantendo intacta a grelha que motivou a escolha do modelo.