6 Técnicas da Divi para criar design plano da Web com Divi

O design plano da web é popular devido aos seus valores fundamentais. Ele se concentra na usabilidade e prioriza a experiência do usuário primeiro. Isso, em combinação com um design elegante e moderno, torna um bom site plano. Cada elemento de design em um site simples deve ser bem pensado antes de ser adicionado a uma página. Ele também deve se concentrar em ser simples, mas bonito e envolvente ao mesmo tempo. Sem esquecer que deve chamar a atenção dos visitantes e deixá-los curiosos para descobrir do que se trata a sua empresa.

Neste post, vamos compartilhar algumas técnicas de criação de web design plano com Divi. Este é o terceiro post da série de postagens em que lidamos com 4 estilos diferentes de sites e como alcançá-los usando o Divi:

1. Limpo e abstrato
2. Mínimo
3. Plano
4. Negrito e colorido

Vamos lá!

1. Mantenha a seção do herói limpa e compreensível

Conforme mencionado na introdução deste post, a usabilidade é um aspecto muito importante do estilo de web design plano. Ele permite que você vá direto ao ponto e compartilhe informações relevantes com os visitantes sem sobrecarregá-los. Ao mesmo tempo, você faz uso de um layout deslumbrante que combina com a marca de sua empresa.

Há muitas maneiras de criar web designs planos, mas o que notei em quase todos os lugares é a simplicidade da seção de heróis. E design simples definitivamente não significa entediante. Isso significa que você não precisa rodeios. Você pode ir direto ao ponto sem ter que exagerar no design que está criando para tentar impressionar os visitantes.

2. Enfatizar as estruturas da caixa

Outra coisa típica sobre estilos de web design simples é o uso de estruturas de caixa. Se você conhece Divi, sabe que pode encontrar estruturas de caixa basicamente em qualquer lugar dentro do construtor. Eles fornecem uma determinada estrutura ao seu site e permitem que você crie uma estrutura antecipadamente.

Em projetos planos, as estruturas de caixa geralmente são enfatizadas. Isso permite que as pessoas naveguem facilmente e encontrem o que procuram em apenas uma questão de tempo.

3. Escolha 3 cores brilhantes

Mencionamos o uso de estruturas de caixa e uma seção de herói simples até agora. Em teoria, isso parece chato, certo? Para equilibrar esse fator de usabilidade em seu site, você pode trazê-lo à vida usando uma paleta de cores brilhantes. Você pode escolher duas ou três cores brilhantes que irão personalizar seu site e combiná-lo com os valores de sua empresa.

4. Use combinações de cores gradientes muito sutis

Outra coisa que pode ajudá-lo a quebrar o ciclo é usar combinações de cores gradientes muito sutis. Use a mesma cor, mas um tom diferente para as duas cores de gradiente. Um deles precisa ser mais brilhante, enquanto o outro tem uma sensação mais profunda. Eles não parecerão imediatamente um gradiente para as pessoas, mas ajudarão a dar ao seu site um pouco mais de profundidade e detalhes.

5. Combine One Standard com One Elegant Font Family

Normalmente, muitos sites usam uma família de fontes mais elegante para títulos e uma família padrão para o corpo do texto. Por que não mudar as coisas? Isso definitivamente fará uma mudança. Além disso, as pessoas costumam pular as descrições e apenas ler os títulos. Se for esse o caso, você deseja que seus títulos sejam o mais fáceis de ler possível, certo? Uma ótima combinação de famílias de fontes é usar Arial para títulos e Georgia para o corpo do texto. Georgia ainda é muito legível, apenas um pouco mais elaborada, e dá aquele contraste necessário ao seu site.

6. Brinque com alturas

A última das dicas é brincar com a altura dos elementos de design em suas páginas. Você ficaria surpreso com o quanto isso pode contribuir para a aparência geral do seu site. Você ainda mantém a estrutura de caixa recomendada para designs planos, mas, ao mesmo tempo, também proporciona interação aos visitantes.

Antevisão

Já vimos várias técnicas na parte anterior do post, agora é hora de colocar as dicas em prática. Iremos criar o seguinte resultado impressionante passo a passo:

Vamos começar a criar: Adicionar seção padrão # 1

Configurações da seção

Fundo Gradiente

Comece criando uma nova página e adicionando uma seção a essa página. Sem adicionar nenhuma linha ainda, abra as configurações da seção. Estamos usando um fundo gradiente sutil com as seguintes configurações:

• Cor 1: # 5214ff
• Cor 2: # 420fc1
• Tipo de gradiente: Linear
• Direção do gradiente: 146 graus
• Posição inicial: 30%

Espaçamento

Estamos adicionando um pouco de preenchimento superior e inferior à nossa seção:

• Preenchimento superior: 55 px
• Preenchimento inferior: 130px

Adicionar linha # 1

Configurações de linha

Estrutura da Coluna

Continue adicionando sua primeira linha. Esta seção consistirá, no total, em três linhas diferentes. Para a primeira linha, estamos usando a seguinte estrutura de coluna:

Dimensionamento

Abra as configurações de linha imediatamente e ative a opção 'Tornar esta linha largura total' nas configurações de dimensionamento.

Adicionar um Módulo de Título de Texto

Configurações de texto H1

Só precisaremos adicionar um módulo de texto H1 a esta linha. Depois de adicionar seu conteúdo (e certificar-se de que é H1), abra as configurações de texto H1 e aplique as seguintes alterações:

• Fonte do cabeçalho: Arial
• Alinhamento do Texto do Título: Esquerda
• Cor do texto do título: #FFFFFF
• Tamanho do texto do título: 86px (desktop), 65px (tablet), 45px (telefone)
• Altura da linha de direção: 1,2em

Adicionar linha # 2

Configurações de linha

Estrutura da Coluna

Vamos passar para a próxima linha. Estamos, novamente, usando uma linha com apenas uma coluna.

Dimensionamento

Antes de adicionar qualquer módulo, abra suas configurações de linha e aplique as seguintes configurações de dimensionamento:

• Tornar esta linha com largura total: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: 1

Adicionar um Módulo Divisor

Cor

Prossiga adicionando um Módulo Divisor à sua coluna. Estamos usando '# edf000' como a cor divisória.

Dimensionamento

Vamos ajustar as configurações de dimensionamento do nosso Módulo divisor a seguir:

• Peso do divisor: 10px
• Largura: 64%
• Alinhamento do Módulo: Direito

Adicionar linha # 3

Configurações de linha

Estrutura da Coluna

Por último, mas não menos importante, adicione uma linha com duas colunas.

Dimensionamento

Abra as configurações de linha e ative a opção 'Tornar esta linha largura total' nas configurações de dimensionamento.

Espaçamento

Remova o preenchimento personalizado da linha adicionando '0px' ao preenchimento superior e inferior.

Adicione um Módulo de Texto de Descrição à Coluna 2

Configurações de texto

Continue adicionando um Módulo de Texto de descrição à segunda coluna usando as seguintes configurações de texto:

• Fonte do texto: Geórgia
• Cor do texto: #FFFFFF
• Tamanho do texto: 27 px (desktop), 22 px (tablet), 18 px (telefone)
• Altura da linha de texto: 1,9em
• Alinhamento de Texto: Direito

Adicionar um Módulo de Botão à Coluna 2

Alinhamento de Botão

Alinhe sua linha à direita nas configurações de Alinhamento de seu Módulo de Texto também.

Configurações de botão

O próximo e último módulo que precisaremos adicionar à nossa seção de herói é um Módulo de Botão. Depois de adicionar a cópia, aplique as seguintes configurações de botão a ela:

• Use estilos personalizados para botão: Sim
• Tamanho do texto do botão: 27 px
• Cor do texto do botão: # 303030
• Cor de fundo do botão: # edf000
• Largura da borda do botão: 0 px
• Raio da borda do botão: 0 px
• Fonte do botão: Geórgia

Adicionar seção padrão # 2

Configurações da seção

Espaçamento

Podemos passar para a nossa segunda seção! Abra as configurações da seção e use o seguinte preenchimento:

• Enchimento superior: 155px
• Preenchimento inferior: 200 px

Adicionar linha # 1

Configurações de linha

Estrutura da Coluna

A primeira linha que adicionaremos conterá nosso círculo vermelho. Escolha a seguinte estrutura de coluna para sua linha:

Fundo Gradiente da Coluna 1

Em vez de fazer o upload de um Módulo de imagem, vamos usar um fundo gradiente radial da coluna 1. Estamos usando a cor vermelha em nossa paleta de cores em combinação com uma cor totalmente transparente.

• Cor 1: # ff3233
• Cor 2: rgba (255,255,255,0)
• Tipo de gradiente da coluna 1: Radial
• Posição inicial da coluna 1: 45%
• Posição final da coluna 1: 45%

Dimensionamento

Continue alterando suas configurações de dimensionamento:

• Tornar esta linha com largura total: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: 1

Adicionar um Módulo Divisor

Ocultar divisor

Para garantir que o plano de fundo da coluna seja exibido, vamos adicionar um Módulo divisor à primeira coluna. No entanto, não queremos que o divisor apareça. É por isso que desativaremos a opção 'Mostrar divisor'.

Espaçamento

E para mostrar o fundo gradiente da coluna, adicionaremos a seguinte margem ao Módulo Divisor:

• Superior: 150 px (desktop), 200 px (tablet e telefone)
• Parte inferior: 150 px (Desktop), 200 px (Tablet e Telefone)

Retornar às configurações de linha

Adicionar Espaçamento

Faremos esse círculo vermelho sobrepor as duas seções de nossa página. Para fazer isso, vamos reabrir as configurações de linha e adicionar alguma margem negativa:

• Margem superior: -350 px (desktop), -400 px (tablet e telefone)
• Margem esquerda: -250 px (desktop e telefone), -400 px (tablet)

Adicionar linha # 2

Configurações de linha

Estrutura da Coluna

Vamos passar para a nossa segunda linha. Esta linha conterá um título Módulo de texto e divisor. Escolha a seguinte estrutura de coluna:

Espaçamento

Reduza o espaço que esta linha cria usando '0px' para o preenchimento superior.

Adicionar um Módulo de Título de Texto

Configurações de texto H2

Agora podemos adicionar nossos módulos. Comece adicionando um novo Módulo de Texto H2 com as seguintes configurações de texto:

• Fonte do Título 2: Arial
• Alinhamento de Texto do Título 2: Centro
• Cor do texto do título: # 303030
• Tamanho do texto do título 2: 50 px (desktop), 45 px (tablet), 32 px (telefone)
• Altura da linha do título 2: 1,3em

Adicionar um Módulo Divisor

Cor

Logo abaixo do Módulo de Texto, adicione um Módulo Divisor. Desta vez, queremos que o divisor apareça. Dê a ele o código de cor '# 5214ff'.

Dimensionamento

Altere as configurações de dimensionamento do seu Módulo divisor a seguir:

• Peso do divisor: 10px
• Largura: 30%
• Alinhamento do Módulo: Centro

Adicionar linha # 3

Configurações de linha

Estrutura da Coluna

É hora de criar nossa linha final usando quatro colunas.

Copiar o fundo gradiente da seção

Vamos usar o mesmo fundo gradiente que usamos para a seção do herói. Então, para nos poupar algum tempo, vamos simplesmente copiar essas configurações.

Colar fundo gradiente nas colunas 1 e 3

E cole-os nas colunas um e três.

Dimensionamento

Vá para as configurações de dimensionamento a seguir e faça com que sua linha ocupe toda a largura da tela.

• Tornar esta linha com largura total: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: 1

Espaçamento

Também vamos alterar as configurações de espaçamento:

• Margem superior: 100px
• Preenchimento superior e inferior: 0 px

Adicionar um Módulo Blurb

Selecione o ícone

Agora que terminamos as configurações de linha, podemos começar a adicionar nossos módulos! Precisaremos de quatro módulos do Blurb, um para cada coluna. Em vez de criá-los separadamente, vamos criar um e duplicá-lo depois. Depois de adicionar o conteúdo do blurb, vá em frente e selecione um ícone de sua escolha.

Configurações de ícone

Em seguida, abra as configurações do ícone e use a cor do ícone '# edf000'.

Configurações de texto

Continue usando as seguintes configurações de texto:

• Orientação do Texto: Centro
• Cor do Texto: Claro

Configurações de texto do título

Abra as configurações de texto do título a seguir e faça algumas alterações:

• Fonte do Título: Arial
• Tamanho do texto do título: 31 px
• Altura da linha do título: 2.6em

Configurações do corpo do texto

Da mesma forma, faremos com que o texto do corpo corresponda ao layout que estamos criando:

• Fonte do corpo: Geórgia
• Tamanho do corpo do texto: 18 px
• Altura da linha corporal: 2,2em

Espaçamento

E, por último, para dar ao seu Módulo Blurb algum espaço para respirar, adicione o seguinte preenchimento personalizado:

• Preenchimento superior e inferior: 50 px
• Preenchimento esquerdo e direito: 20 px

Clonar e alterar o módulo do Blurb

Clone o módulo do Blurb e coloque na coluna 2

Clone o módulo Blurb que você acabou de criar e coloque a duplicata na segunda coluna.

Alterar ícone

A primeira coisa que você precisa alterar é o ícone.

Mudar a cor do ícone

Altere a cor do ícone para '# ff3233' também.

Mudar a cor do texto

Como estamos lidando com uma cor de fundo branca, você precisará alterar a cor do texto para 'Escuro' nas configurações de texto.

Espaçamento

Estamos brincando com a altura dos módulos do Blurb para fazer tudo se destacar um pouco mais. Para fazer isso, abra as configurações de espaçamento e use os seguintes valores da margem superior:

• Margem superior: 100 px (desktop), 0 px (tablet e telefone)

Sombra da caixa

Para completar, adicionaremos uma sombra muito sutil também:

• Força do desfoque de sombra da caixa: 80 px
• Força de propagação da sombra da caixa: -10px
• Cor da sombra: rgba (0,0,0,0.11)

Clone os dois módulos do Blurb e coloque nas colunas restantes

Módulos de clone

Agora temos nossos dois módulos do Blurb que reutilizaremos nas colunas restantes. Clone cada um deles uma vez.

Coloque na coluna 3 e 4

Coloque os Módulos Blurb duplicados em suas colunas correspondentes e pronto!

Antevisão

Agora que passamos por todas as etapas, vamos dar uma olhada final no resultado final em diferentes tamanhos de tela.

Pensamentos finais

Neste post, compartilhamos algumas dicas e técnicas sobre a criação de web design plano com Divi. O design plano da web é muito popular hoje em dia porque permite aos visitantes navegar facilmente pelas páginas e processar informações com mais rapidez. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!