12 das Tendências mais quentes do WordPress Web Design em 2020

Em meio ao glamour, glamour, e pátios de chiffon nos desfiles da Fashion Week – seja em Milão, Paris, ou na Big Apple – duas coisas são certas:

1. O editor da Vogue usará óculos escuros dentro de casa.
2. Diversos designs subirão ao topo, criando uma safra de novas tendências para a próxima estação.

A passarela do WordPress não é diferente. Bem, exceto pelo editor da parte Vogue.

Para manter seu site na vanguarda do desenvolvimento e design web, você precisa entender o que é popular na comunidade WordPress. Mais importante, você precisa entender porque algumas tendências se tornam, bem, trendy.

Even, se assim o parecer, o que é popular raramente é arbitrário. Ao entender quando e porque implementar elementos básicos de design, você estará melhor equipado para criar um site WordPress que seja bonito, moderno e funcional.

Vamos começar dando uma olhada nas 12 tendências mais interessantes em web design de hoje. Depois mostraremos como elas podem ser implementadas em seu próprio site WordPress.

Construtores de sites

Pequipamento com milhares de temas disponíveis, pode ser um desafio criar um design de site que seja verdadeiramente seu. No entanto, este paradigma está lentamente a mudar, à medida que o web design está a tornar-se mais democratizado.

Este é, em parte, o resultado de uma onda de popularidade para os construtores de websites. Estes utilizam uma interface What You See Is What You Get (WYSIWYG) que permite a todos os utilizadores personalizar rapidamente o aspecto das suas páginas web. Os construtores de websites baixam o limite para web design, dando até mesmo aos usuários inexperientes a capacidade de criar sites impressionantes e únicos – fast.

Para acompanhar os concorrentes, o WordPress está focando mais neste tipo de funcionalidade. Existem populares construtores WYSIWYG criados explicitamente para WordPress que já existem há algum tempo, como Beaver Builder e Elementor.

WordPress entrou no ato em 2018 com o lançamento em escala real do Block Editor. Este editor foi lançado recentemente como parte do núcleo do WordPress. Ele substitui o editor baseado no TinyMCE que há muito tempo era nativo do CMS.

Inspirado por outros construtores WYSIWYG, o Block Editor possui uma interface de arrastar e soltar que permite que você personalize livremente diferentes áreas de um post ou página. Não é estritamente um construtor de páginas – não permitirá que você personalize temas, por exemplo – mas é influenciado pela natureza amigável e dinâmica das interfaces do construtor.

Esta mudança impactou a experiência do WordPress, e o projeto foi controverso. Mesmo assim, parece claro que os construtores de páginas são o caminho do futuro, e é provável que os vejamos evoluir e crescer ainda mais nos próximos anos.

Minimalismo Evoluído

O design plano tem sido popular há algum tempo, e não parece estar indo a lugar algum. Este tipo de design minimalista foca na simplicidade enquanto usa cores lisas, clareza e muito espaço branco.

Não só coloca o foco em mostrar o seu conteúdo, mas também garante que o seu site será carregado rapidamente e terá uma boa aparência em todos os dispositivos. Este tipo de minimalismo pode ser visto no tema Arnold, que é dirigido aos criativos e faz um excelente uso do espaço branco para deixar o texto e as imagens brilharem.

Esta tendência pode ser um pilar fundamental, mas isso não significa que esteja a envelhecer. Na verdade, os designs têm evoluído para incorporar gradientes, sombras e imagens a um grau mais substancial. Isto cria uma maior sensação de profundidade na página e pode levar a alguns designs atraentes.

Um exemplo perfeito deste efeito é o Hue, que faz uso de fontes grandes e claras e esquemas de cores gradientes para criar estilos memoráveis.

O uso de fotografias e vídeos grandes e que chamam a atenção está também a crescer em popularidade, à medida que as ligações mais rápidas à Internet se tornam mais comuns. Temas como Kalium tiram proveito disso, acoplando um design minimalista geral com cabeçalhos de largura total.

Usando esta abordagem menos-é-mais-muito mais ao design, você pode criar sites que se destacam. Além disso, pode ajudar a melhorar a velocidade de carregamento do seu site e tornar mais fácil para os visitantes encontrarem as informações de que precisam.

Alta Saturação e Cores Vibrantes

Os dias de “Você pode ter qualquer cor que quiser, desde que seja preto” já se foram há muito. Hoje em dia, cores arrojadas e combinações contrastantes são comuns. As pessoas têm reacções muito viscerais à cor, pelo que a sua escolha do esquema de cores pode afectar significativamente a forma como percebemos uma marca ou website. Na verdade, de acordo com Buffer, 90% da nossa avaliação quando se trata de produtos é feita exclusivamente com base na cor.

É lógico que usar uma combinação de cores impressionante é uma forma perfeita de fazer o seu site pop. Os designers do WordPress também não têm dormido sobre esta tendência. Muitos temas têm um foco centrado em cores.

Por exemplo, o tema Skin permite que você escolha duas cores, e irá criar um esquema de gradiente para o seu site. Você também pode criar seus próprios gradientes e adicionar padrões e texturas.

Pode também assumir esta tendência, e uma que está se tornando mais popular ultimamente, é o uso de contrastes nítidos. Usar cores contrastantes dá ao seu site uma vibração divertida, artística, e também pode ajudar com acessibilidade.

Um tema que faz isso bem é Piñata, com seus esquemas de cores vibrantes que também são totalmente personalizáveis.

É incrível o que algum uso criativo de cores pode fazer para fazer um design de outra forma simples saltar da página. Como você pode ver com o tema Piñata, manter um esquema de cores consistente em todo o seu site, inclusive em suas imagens, pode transformá-lo em algo inesquecível.

Aymmetrical and Broken Layouts

Minimalismo e designs planos estão todos bem e bons, mas às vezes você quer o oposto de um visual limpo e limpo. Os designers estão a começar a ultrapassar os limites criando grelhas deliberadamente quebradas e designs assimétricos.

Um tema que realiza este bem é Albert. Ele usa imagens deslizantes, elementos sobrepostos e um visual deliberadamente torcido que chama a atenção e o obriga a prestar atenção.

Outra variação desta tendência vem na forma do tema Overlap, que usa elementos sobrepostos e um design de grade quebrada para criar um visual único.

Este tipo de design é difícil de se obter. Ele requer que você pise uma linha tênue entre ser visualmente travado e manter seu site utilizável e desordenado. Mesmo que o conteúdo esteja espalhado pela página de forma não convencional, tudo ainda precisa ser claramente visível e possível de ser lido de relance.

Afinal, você não quer acabar com um site elegante que ninguém entende como usar.

CSS Grids

Web designer Hui Jing Chen descreveu as grades CSS como “a web finalmente conseguindo sua carteira de motorista”. Em sua opinião, o web design tem ficado preso aos padrões de impressão por muito tempo, e ela vê as grades CSS como um grande passo para longe desta limitação auto-imposta. Então o que é exactamente uma grelha CSS?

Em suma, é um tipo de grelha reactiva que muda dinamicamente dependendo de onde é apresentada. Você provavelmente já se deparou com este tipo de design com mais frequência em dispositivos móveis. Os elementos da página irão encolher e reorganizar-se com base no tamanho da janela. O mesmo pode ser feito em navegadores padrão, onde o design da página muda em tempo real à medida que você muda o tamanho da janela.

É uma aposta justa que os designs de grades CSS continuarão a se tornar mais populares. Alguns temas do WordPress já estão fazendo uso deles, incluindo o tema Kuhn, que você pode ver em ação acima. Observe como as imagens, textos e colunas mudam em tempo real à medida que a janela cresce e encolhe?

Este é um desenho muito diferente de estático, inspirado na impressão.

Designs amigáveis para celulares

Fala de desenhos responsivos, vamos falar sobre dispositivos móveis. Em 2016, o número de usuários de internet em dispositivos móveis excedeu o número de usuários de desktop pela primeira vez. Este foi um ponto de viragem no uso da web e deixou claro que a criação de sites que são responsivos em dispositivos móveis é mais crítica do que nunca.

Já falamos antes sobre como otimizar seu site WordPress para usuários móveis.

Uma maneira de fazer isso é baixando o plugin WPtouch, que irá criar um tema móvel baseado no seu site que você pode personalizar como quiser. Este plugin é recomendado pelo Google e garante que o seu tema para telemóvel cumpre os padrões do motor de pesquisa (embora valha a pena ter em conta que as suas opiniões são um pouco mistas).

Você também pode usar o plugin Jetpack para criar rapidamente um tema móvel para o seu site.

Um outro plugin que dá muita importância à compatibilidade entre dispositivos é o Elementor. Esta ferramenta multiuso permite definir larguras dinâmicas e configurar elementos de página individuais dependendo do dispositivo de exibição.

Este construtor de páginas pode ser usado com qualquer tema. Você também pode ver seu site emulado em telefones, tablets e desktops, para que você possa ter certeza de que ele ficará ótimo independentemente de como é visto.

Microinterações

Design é tudo sobre os detalhes. A tendência crescente das microinterações se concentra nesses pequenos detalhes e tem se tornado cada vez mais popular nos últimos anos. Como o nome indica, este conceito refere-se à forma como os elementos do site respondem a pequenas interacções de várias maneiras.

Um exemplo deste conceito em acção é quando uma curta animação é reproduzida se clicar ou pairar sobre um ícone. Você provavelmente já se deparou com isso, como com a reação emojis do Facebook.

Microinterações dão ao seu site uma sensação viva e tátil. Elas fazem parecer que você está realmente interagindo com a página – ao invés de apenas olhar para uma parede estática de informação.

Você pode adicionar um efeito semelhante ao seu próprio site com o plugin Animate It! Este plugin permite-lhe adicionar animações a quase todos os conteúdos, incluindo imagens e texto. Você também pode determinar quando a animação será acionada, decidir quantas vezes ela irá se repetir e definir tanto um ponto de início quanto um ponto de saída.

Dê uma olhada no exemplo a seguir, onde a imagem é definida para executar uma animação “pop” quando o cursor paira sobre ela.

Microinterações não são apenas para animações e imagens, no entanto. Esta técnica também pode permitir que você use texto de maneiras interessantes.

Por exemplo, algumas páginas dão a opção de destacar o texto e depois compartilhá-lo em mídias sociais. Você pode adicionar este recurso ao seu próprio site com o plugin Highlight and Share, que suporta redes populares como Facebook, Pinterest e LinkedIn.

Estes são apenas alguns exemplos de como você pode usar microinterações para fazer seu site se sentir mais vivo e responsivo.

Slants and Diagonals

Fazer o seu site parecer off-kilter pode não soar como a melhor idéia, mas na verdade é uma das tendências de design que mais cresce. Linhas inclinadas e quebras diagonais não só dão ao seu site um toque moderno, mas também ajudam a conduzir o olho para baixo na página. Isto funciona particularmente bem em designs de uma página, separando cada secção de uma forma visualmente agradável.

Temas do WordPress Several permitem que você implemente um visual inclinado no seu site.

Por exemplo, dê uma olhada no tema Flamingo, que lhe permite criar um design único com separadores diagonais. Os resultados são inegavelmente chamativos, e a personalização do tema permite que você seja criativo com o design final.

Outro design inclinado vem do tema Upward. Esta opção usa um layout mais tradicional, baseado em grade, mas implementa linhas oblíquas para um visual incomum e elegante. Também é totalmente personalizável, com muitas opções.

Como você pode ver, usando um design não convencional pode tornar o seu site realmente expressivo. É também uma ótima maneira de separar claramente o conteúdo e direcionar a atenção dos visitantes para os elementos mais essenciais.

Fontes grandes, arrojadas

Tipografia é a arte de processamento e tipo de impressão. Em outras palavras, é uma forma de transformar palavras em obras de arte. Ao usar estilos de fontes grandes, você pode instantaneamente definir o tom do seu site com um cabeçalho elegante. Um tema que mostra isso bem é Wedding Planner.

Este tema também ilustra outra tendência atual: variação da fonte. Ao invés de se ater a uma ou duas escolhas similares, usar fontes serif e sans-serif juntas pode criar um resultado único.

O uso criativo de fontes não é apenas para cabeçalhos, também. O tema Retro Portfolio mostra como você pode usar várias fontes diferentes para criar um visual retro-inspirado na própria página.

O importante a lembrar é que a legibilidade ainda importa. Enquanto o seu texto ainda for parsable, no entanto, você deve se sentir livre para experimentar diferentes estilos de fontes, tamanhos e colocações.

Customized Illustrations

Tradicionalmente, a maioria dos sites tem se limitado a usar fotografia e animação ao lado do conteúdo do texto. Isto está mudando rapidamente, no entanto. Muitos designers estão percebendo que o comissionamento de ilustrações os capacita a criar uma identidade única e lhes dá ainda mais liberdade quando se trata de sua marca visual.

Usar ilustrações no design do seu site é uma ótima maneira de fazer com que ele se sinta mais pessoal e contar uma história só com imagens. Contratar um ilustrador talentoso também pode ser muito mais barato do que contratar uma equipe de fotógrafos sempre que o seu site precisar de uma atualização.

Embora a maioria das tendências que abordamos nesta peça, não há uma solução fácil de baixar aqui. O ponto chave é que você precisará encontrar um ilustrador cujo estilo combine com o seu site. É também imperativo que você se certifique de pagá-los pelo seu trabalho. O talento custa dinheiro, e ninguém quer realmente trabalhar para “a exposição”

Outras coisas, há algumas que você deve considerar ao projetar seu site em torno de ilustrações.

Primeiro de tudo, você deve ter certeza de que seu tema usa um layout de largura total, para que você possa mostrar as imagens no seu melhor. Um grande exemplo é o tema Illustrator, especialmente criado com este tipo de design em mente.

Outro tema que vale a pena conferir é TheGem, que tem um design responsivo em largura total que é perfeitamente adequado para imagens grandes. Este tema é muito versátil, com layouts adequados tanto para lojas, portfólios e empresas.

Poucas ilustrações bem posicionadas podem fazer muito para abrilhantar o seu site. Elas também ajudam a melhorar a sua narrativa e darão à sua marca uma identidade visual totalmente única.

Modos escuros

A experiência do usuário pode ver algumas mudanças este ano à medida que as interfaces vão para o lado escuro. Seja para facilitar o esforço dos olhos ou simplesmente porque o visual se adapta melhor ao estilo do seu site, vale a pena considerar a adoção de uma paleta de cores mais escuras.

Uma maneira de implementar um pouco de humor dentro do seu painel de administração do WordPress é com o plugin Dark Mode.

Esta tendência particular provavelmente começou com os programadores. A maioria dos softwares de edição de código vem com um modo escuro, novamente, para ajudar a reduzir a fadiga ocular. Por exemplo, Brackets permite ao usuário escolher entre temas claros e escuros.

Você também pode ver mais temas e websites oferecendo aos usuários front-end a opção de mudar para uma versão mais escura. É importante notar que os modos escuros tendem a economizar energia na tela, o que os torna uma opção mais amigável ao meio ambiente também.

Uma ênfase na acessibilidade

Criar websites acessíveis é uma tendência à qual vale a pena prestar muita atenção. Em particular, o WordPress tem colocado ênfase em padrões de codificação acessíveis.

Na verdadeira forma de código aberto, a equipe do WordPress criou uma página de informações abrangente sobre todos os seus esforços de acessibilidade. Os membros da comunidade e usuários também são encorajados a participar do trabalho. Se você estiver interessado em aprender mais, você pode estudar as mais recentes WCAG (Web Content Accessibility Guidelines).

WordPress Web Design Trends in 2020

Sem dúvida: 2020 vai ser um ano emocionante para os usuários do WordPress, e você vai precisar fazer um pequeno trabalho para acompanhar as últimas tendências de desenvolvimento web. Os designers nunca dormem e estão sempre descobrindo novas maneiras de ajudar o WordPress a parecer e funcionar melhor.