Padrões de design Web Design

¿Sabia que o design web desempenha um papel crucial no sucesso do seu site? Conhecer e aplicar os padrões de design web adequados pode fazer a diferença entre um site que gera conversões e outro que não consegue cativar seu público.

Neste artigo, aprenderemos sobre padrões de design web, o que são e como podem ajudá-lo a criar uma experiência de usuário excepcional. Os padrões de design web são soluções testadas e eficientes para problemas comuns de design. Ao implementar esses padrões em nosso site, melhoramos sua usabilidade, navegação e capacidade de resposta.

O que são os padrões de design web?

Os padrões de design web são soluções gerais para problemas recorrentes de design. São abordagens testadas e eficazes para enfrentar desafios comuns no design de sites. Esses padrões se baseiam na experiência acumulada de designers e desenvolvedores web ao longo dos anos.

Ao utilizar padrões de design web, você pode aproveitar as melhores práticas estabelecidas e evitar ter que reinventar a roda em cada projeto. Esses padrões são como "receitas" que você pode seguir para resolver problemas específicos de design web.

Alguns dos padrões de design web mais utilizados são:

1. Duas colunas iguais

A seguir, mostrarei duas formas de realizar esta tarefa. Uma delas consiste na propriedade display: grid, na qual precisamos definir um contêiner no arquivo HTML que será um <div> com a classe principal contêiner. Criamos uma nova classe com o nome duas-colunas-iguais-grid para aplicar estilos no arquivo styles.css. Por exemplo:

Agora estabelecemos um @media, uma regra de CSS que permite aplicar os estilos quando a largura mínima da janela do navegador for 768 px. O navegador atribuirá automaticamente cada elemento a uma coluna com a propriedade grid-template-columns, onde mostro quatro formas de ter duas colunas iguais:

1. Com percentagens indicamos que cada artigo ocupará 50% do espaço da janela do navegador.
2. A função Repeat(2, 50%) em CSS é usada para criar um padrão de colunas ou linhas que se repetem duas vezes e ocupam 50% do espaço disponível. Por exemplo, se aplicada à propriedade grid-template-columns, serão criadas duas colunas de igual largura que preencherão o contêiner da grade.
3. O valor 1fr significa que cada coluna ocupa uma fração igual do espaço disponível. Por exemplo, grid-template-columns: 1fr 1fr cria duas colunas de igual largura.
4. Essa função de valor repeat(2, 1fr) consiste em criar duas colunas iguais, cada uma com um tamanho de uma fração (fr) do espaço disponível. Por exemplo, se o contêiner da grade tiver uma largura de 768 px, cada coluna terá uma largura de 384 px. Esta propriedade se aplica ao elemento que tem display: grid ou display: inline-grid.
   

Em seguida, devemos aplicar um espaço entre as colunas de um elemento. Para isso, usamos a propriedade column-gap com 2rem, equivalente a 32 px.

A segunda forma é com a propriedade display: flex, que permite criar um contêiner flexível que pode ajustar o tamanho e a posição de seus elementos filhos automaticamente da esquerda para a direita. Algumas vantagens de usar display: flex são:

• Podemos alinhar e distribuir os elementos filhos no eixo horizontal e vertical com facilidade.
• Mudamos a ordem dos elementos filhos sem modificar o código HTML.
• Controlamos o espaço entre os elementos filhos com propriedades como justify-content, align-items e gap.

2. Duas colunas iguais e uma maior com display: grid

A estrutura HTML será composta da seguinte maneira:

1. A etiqueta <main> define o conteúdo principal, que contém outra etiqueta <article>, que neste caso é uma entrada de blog, com uma imagem e um parágrafo.
2. Adicionamos duas etiquetas <aside> para incluir dois parágrafos sobre Nós e Missão.
   

No arquivo CSS, implementamos essa condição com display: grid, utilizando grid-template-areas, propriedade do CSS que define áreas de uma grade.

Além disso, especificamos o número de colunas da grade com a propriedade grid-template-columns. Com os valores 1fr 3fr 1fr, indicamos a distribuição dos elementos do HTML.

O primeiro e o terceiro elemento ocuparão uma fração, enquanto o segundo elemento terá três frações do espaço disponível. Em seguida, atribuímos um nome a cada coluna da grade com uma palavra entre aspas “esquerda conteúdo direita”. Os nomes podem ser qualquer valor válido de identificador de CSS, exceto o valor reservado none, que indica uma célula vazia.

Por outro lado, os elementos filhos da grade devem ter a propriedade grid-area com o nome da área a que pertencem. No caso da seção do conteúdo principal, adicionamos a propriedade grid-area: conteúdo. Aqui indicamos que este elemento estará no centro com três frações do espaço disponível. O mesmo ocorre com o terceiro elemento chamado painel-esq, que se mostra no lado esquerdo ocupando uma fração do espaço.

3. Duas colunas iguais e uma maior com display: flex

Se a largura for maior ou igual a 768 px, o modo flexbox é ativado para o contêiner-flex e seus elementos são distribuídos em uma única linha com espaço entre eles. O conteúdo-principal ocupa 60% da largura disponível, restando uma margem de 1rem. Os painéis ocupam 20% da largura disponível, restando também uma margem de 1rem. O painel-esq é colocado no início da linha com a propriedade order.

Com esta propriedade order, atribuimos um valor positivo ou negativo para mudar a ordem dos elementos. Por exemplo, se order: 1 for atribuído a um elemento, ele será colocado no final da coluna, e se order: -1 for atribuído, ele será colocado no início. A propriedade order afeta apenas a ordem visual dos elementos, não sua ordem no código.

4. Distribuição de colunas com Column Drop

É um padrão de design que permite adaptar uma página web com colunas a diferentes tamanhos de tela. Consiste em que, quando a tela fica menor que 480 px, as colunas se empilham verticalmente na ordem que definimos, criando um efeito de queda das colunas. Com esta técnica, adaptamos o conteúdo a diferentes dispositivos e resoluções, mantendo uma boa legibilidade e usabilidade.

Para implementar column drop com grid em CSS, podemos usar a propriedade grid-template-columns para definir o número e o tamanho das colunas em cada ponto de interrupção. Por exemplo:

Neste código definimos dois pontos de interrupção: um para telas com largura mínima de 480px e outro para telas com largura mínima de 768 px. Em cada ponto de interrupção, o código muda o número de colunas e a posição de alguns elementos usando a propriedade grid-template-columns e as propriedades grid-column e grid-row.

Por exemplo, o elemento com a classe .segunda ocupa duas colunas em telas pequenas, mas se move para a terceira coluna em telas maiores.

5. Column Drop com Flexbox

La clase .column-drop-flex aplica la propriedade display: flex ao elemento que a contém. Isso faz com que seus elementos filhos se distribuam em uma única linha, com espaço entre eles e permitindo que se ajustem se não couberem.

Também se definem as propriedades flex-basis para as classes .contenido-principal, .primera e .segunda, que são os elementos filhos de .column-drop-flex. A propriedade flex-basis determina o tamanho inicial de cada elemento.

Neste exemplo, usamos duas media queries para alterar essas propriedades conforme a largura da tela. A primeira consulta se aplica quando a largura é maior ou igual a 480 px e estabelece que o tamanho inicial de .contenido-principal e .primera seja 50% menos 1rem do contêiner, deixando um espaço entre eles.

A segunda consulta se aplica quando a largura é maior ou igual a 768 px e estabelece que o tamanho inicial de .contenido-principal, .primera e .segunda seja 33,3% menos 2rem do contêiner, criando três colunas com espaço entre elas.

6. Sidebar com Grid

Para criar um sidebar em CSS com grid, precisamos definir um contêiner que tenha display: grid e duas colunas, uma para o sidebar e outra para o conteúdo. Em seguida, atribuímos o sidebar à primeira coluna e o conteúdo à segunda, usando a propriedade grid-column.

Este código é uma regra de CSS que se aplica quando a largura mínima da tela é de 768 pixels. O que faz é criar um layout de grade com duas colunas, uma de 3 frações e outra de 1 fração, separadas por um espaço de 4 rem. A propriedade grid-auto-flow indica que os elementos são colocados em ordem de coluna. O elemento aside é posicionado na segunda coluna, ocupando todo o espaço disponível.

7. Sidebar com Flex

Para criar uma barra lateral com Flex, usa-se a propriedade CSS display: flex no contêiner principal da página chamado .con-sidebar, e atribuem-se valores às propriedades flex-direction, flex-wrap, justify-content e align-items para definir o comportamento e a posição dos elementos flexíveis. A barra lateral é criada como um elemento flexível com uma largura fixa ou relativa, e o restante do conteúdo se adapta ao espaço disponível.

Ferramentas para implementar padrões de design web

Existem inúmeras ferramentas e recursos disponíveis online para te ajudar a encontrar e implementar padrões de design web. Algumas das ferramentas mais populares incluem:

• Pattern Lab:  é uma ferramenta de design de interface que nos permite criar e organizar padrões de design web.
• UI Patterns: é um site que coleta e mostra uma ampla variedade de padrões de design de interface de usuário.
• Dribbble: é uma plataforma online onde muitos designers compartilham exemplos de designs web e padrões de design.
• Codepen: é um ambiente de desenvolvimento online que te permite experimentar e compartilhar código relacionado ao design web.

O design web é um elemento fundamental para o sucesso do seu site. Ao utilizar os padrões de design web adequados, você pode melhorar a experiência do usuário, aumentar a participação e gerar conversões. Lembre-se de adaptar os padrões à sua marca e objetivos específicos e utilizar as ferramentas disponíveis para encontrar e implementar os padrões de design web adequados.

Prepare-se para se destacar online e levar seu negócio ao próximo nível!