30 sites com belos fundos e paleta de cores que combinam

Hoje em dia, os padrões estão em toda parte.

É comum encontrá-los em grandes embalagens, dentro das capas de várias publicações incríveis e impressos em lindos rolos de tecido.

Se você tem pesquisado online ultimamente, é provável que também tenha visto padrões sendo usados em web design.

Embora sejam usados em muitas seções diferentes dos sites, eles se tornaram uma opção especialmente popular para planos de fundo.

Se você quiser entrar nesse barco e estiver procurando um pouco de inspiração para começar, dê uma olhada no nosso mostruário abaixo.

Nele, você encontrará 30 ótimos exemplos de diferentes abordagens e estilos que podem ajudar a dar asas à sua criatividade.

Está tentando descobrir quais elementos usar para criar o padrão do seu site? Para ver isso na prática, dê uma olhada no site do Cafe Frida.⁠(abre em uma nova aba ou janela)

Ao entrar, você vê um belo padrão composto por lindas flores brancas que se adaptam ao restante do layout à medida que você rola a página. É encantador.

Temos a tendência de encontrar beleza na simetria. Tire proveito disso e crie padrões simétricos, como o usado no site For Better Coffee⁠(abre em uma nova aba ou janela).

Desenhe uma linha imaginária no meio da página. Percebeu como os dois lados são idênticos?

Obtenha esse visual com o modelo de site Gold Wedding Events.

Às vezes, os designers tendem a ficar felizes com as cores e se esquecem de como as linhas simples podem ser bonitas. Dê uma olhada na Letters, Inc⁠(abre em uma nova aba ou janela). e em seu complexo padrão.

Se você clicar no site, também poderá apreciar as diferentes animações sutis que caracterizam algumas das peças do padrão.

Ao mergulhar no web design, é importante ter em mente que o design de um site deve sempre apoiar sua funcionalidade e ajudar a tornar as informações acessíveis.

Às vezes, os padrões muito movimentados podem ser esmagadores e dificultar a obtenção fácil de informações pelos usuários. Se estiver trabalhando com um padrão de plano de fundo muito carregado, faça o que a VOTD TV⁠(abre em uma nova aba ou janela) faz e use cores suaves.

Se você tiver uma foto na qual se inspirou, carregue-a no gerador de paleta de cores do Canva⁠(abre em uma nova aba ou janela) e obtenha seus códigos HEX. Ou você pode escolher entre as várias paletas de cores⁠(abre em uma nova aba ou janela) que combinam e que estão prontas para uso.

Torne um design movimentado mais agradável aos olhos adicionando uma paleta de cores suaves, como no modelo de site de portfólio Bright Graphic Designer⁠(abre em uma nova aba ou janela).

A Hi-Res⁠(abre em uma nova aba ou janela) é uma agência de design sediada em Londres que produz trabalhos incrivelmente sensuais. Acesse o site deles para conferir o trabalho premiado.

Observe como eles criaram padrões feitos com elementos fotorrealistas, como bolhas, que mudam à medida que você olha para diferentes peças de trabalho. Muito legal, não é?

Você pode usar suas próprias fotos ou fotos de banco de imagens. Continue lendo para obter dicas sobre como encontrar fotos de banco de imagens gratuitas⁠(abre em uma nova aba ou janela) para sua empresa ou confira a extensa biblioteca de fotos de banco de imagens do Canva⁠(abre em uma nova aba ou janela).

Um close-up de uma planta pode fornecer um padrão de fundo interessante. Confira o modelo de site Bio-Link de caridade para ambiente fotográfico verde⁠(abre em uma nova aba ou janela).

As animações se tornaram a última moda em UI e web design. As animações ricas agora são características de aplicativos e sites de alta qualidade.

Se você desenvolveu um padrão de fundo simples, experimente animá-lo. Você pode chegar a um resultado elegante e bonito, como o Google Ventures faz em seu site A Year In Review⁠(abre em uma nova aba ou janela).

O site da Garbett⁠(abre em uma nova aba ou janela) apresenta um padrão azul intenso composto de pontos transparentes. Naturalmente, à medida que você rola a tela para baixo, o conteúdo de cada ponto muda. É uma abordagem excelente e simples que pode ajudar a incrementar um padrão que, de outra forma, seria sem graça.

O site do XOXO Fest⁠(abre em uma nova aba ou janela) apresenta um padrão de fundo composto de linhas e círculos que muda de configuração sempre que você atualiza o site. O design também se baseia na transparência e na bela tipografia, usadas em combinação para criar um visual moderno e fresco.

As formas e outros elementos dimensionados em sua totalidade podem criar padrões interessantes. Confira o modelo de site de link na BIO do Blogger com blocos coloridos azuis, rosa e amarelos⁠(abre em uma nova aba ou janela).

1407⁠(abre em uma nova aba ou janela) integrou seu padrão de plano de fundo ao layout. À medida que você clica em diferentes elementos da interface do usuário, o padrão altera sua configuração para se adaptar às alterações na estrutura do layout resultantes do clique no elemento da interface do usuário.

Os padrões não precisam ser extremamente coloridos para serem interessantes. Às vezes, uma paleta simples e formas interessantes são suficientes para produzir um belo padrão, como o apresentado no site da Poke London⁠(abre em uma nova aba ou janela).

Use duas ou três cores para manter sua paleta de cores simples. Obtenha o visual com o modelo de site de currículo de designer de moda com blocos de cores bege e marrom⁠(abre em uma nova aba ou janela).

Alguns dos padrões mais interessantes que já vi usam apenas preto e branco, semelhante ao que a Echo⁠(abre em uma nova aba ou janela) usa em seu site. Não está convencido? Dê uma olhada nas tesselações de M.C. Escher⁠(abre em uma nova aba ou janela). Você encontrará vários exemplos alucinantes construídos inteiramente em preto e branco.

Você pode usar uma combinação semelhante de cores escuras e claras. O modelo de site de serviço de fitness com blocos coloridos verde-azulados e azul-esverdeados usa azul-esverdeado em um plano de fundo escuro⁠(abre em uma nova aba ou janela).

Dê uma chance ao uso de elementos abstratos e aleatórios para criar seus padrões, como faz a Cabure⁠(abre em uma nova aba ou janela). Eles colocaram elementos de design divertidos com cores vivas em um fundo escuro e os animam.

Crie seus padrões usando ícones que sejam significativos para o produto que você está apresentando, como o Socialist faz no site do aplicativo⁠(abre em uma nova aba ou janela). Além de serem bonitos, eles o ajudarão a comunicar visualmente as informações sobre o seu produto aos usuários.

Não tem tempo para encontrar o conjunto perfeito de ícones? O Canva tem vários ícones disponíveis em sua biblioteca de imagens, mas você também pode dar uma olhada em nosso artigo Ícones gratuitos: 49 melhores sites para encontrar ícones gratuitos bonitos e úteis⁠(abre em uma nova aba ou janela) para obter mais opções.

Você pode usar um elemento, como as flores do modelo de site de eventos de casamento Pink Flower⁠(abre em uma nova aba ou janela), para criar uma paleta de cores para seu design. Você também pode repetir as flores em outras páginas do seu site.

O padrão do Sourisseaux Partners⁠(abre em uma nova aba ou janela) se move conforme o movimento do mouse. O movimento não é pesado ou drástico, mas apenas o suficiente para chamar sua atenção. É uma ótima maneira de adicionar um pouco de diversão interativa ao seu site e padrão.

Matt Luckhurst⁠(abre em uma nova aba ou janela) criou um belo padrão usando as letras de seu nome e alguns elementos de design divertidos. Normalmente, quando pensamos em padrões, tendemos a esquecer o quanto as formas das letras podem ser valiosas e as diferentes soluções que elas podem ajudá-lo a criar.

Se você estiver com dificuldades para descobrir qual elemento interessante pode se tornar a base de seus padrões, não se esqueça de olhar para o alfabeto.

Sam Skinner usa um conjunto interessante de ícones para criar um padrão no qual você pode clicar para visualizar seu trabalho. Se você simplesmente passar o mouse sobre um ícone, desenhará uma linha entre cada um deles. É um pouco difícil colocar em palavras, então clique aqui⁠(abre em uma nova aba ou janela) e comece a passar o mouse sobre os ícones. Muito legal, não é?

Explore as cores gradientes para adicionar profundidade e dimensão ao seu plano de fundo nos modelos de site de negócios Blue Purple Professional Gradient⁠(abre em uma nova aba ou janela).

Você não precisa usar toneladas de formas diferentes para criar um padrão. Tente selecionar uma forma simples e criar um padrão usando variações dela.

Não tem certeza do que isso significa? Vá até o site da Acorns⁠(abre em uma nova aba ou janela) e confira o histórico deles. Eles criaram um ótimo padrão composto de triângulos que variam em tamanho e cor.

Este é realmente algo que você precisa ver para apreciar. O Jam3⁠(abre em uma nova aba ou janela) apresenta um padrão incrível de triângulos que se movem na mesma direção.

Mover o mouse atrapalha o fluxo, mas se você ficar parado, eles voltarão à formação original. Se você passar o mouse sobre cada letra, elas também começarão a se desintegrar. Dê uma olhada, é muito legal.

Quem disse que você precisa apresentar apenas um padrão? Jamie Wolfond⁠(abre em uma nova aba ou janela) troca o padrão de fundo toda vez que você clica. Alguns são bem engraçados.

Clique no site dele para conferir seus padrões e alguns de seus trabalhos maravilhosos. Se você desenhou algumas opções diferentes e não tem certeza de qual escolher, tente usar todas elas.

Confira o excelente gráfico no site da Borheh⁠(abre em uma nova aba ou janela). Usando uma leve mudança de direção, eles produziram um padrão impressionante.

Se achar que precisa levar seu design um pouco mais longe, considere a possibilidade de mudar a direção de uma seção do seu padrão ou de alguns dos elementos que usou para criá-lo.

Limite os elementos e as cores do design para manter as coisas em um nível mínimo. Confira o modelo de site do Blogger Teal White Colorful Blocks.⁠(abre em uma nova aba ou janela)

O Mixture.io usa um padrão de fundo sutil composto de wireframes. É apropriado, considerando a utilidade dos wireframes⁠(abre em uma nova aba ou janela) no desenvolvimento front-end, a disciplina para a qual o Mixture cria a ferramenta.

Ao criar seus próprios padrões, considere construí-los usando elementos que façam referência ao conteúdo do seu site. Em outras palavras, se estiver projetando um site para uma empresa que passeia com cães, tente usar biscoitos ou coleiras de cachorro.

Fotos de eventos podem ser usadas como plano de fundo, e as cores podem ser usadas como base para a paleta de cores do site. Inspire-se com o modelo de site de fotografia de casamento branco, elegante e simples.⁠(abre em uma nova aba ou janela)

Com tantas ferramentas digitais excelentes disponíveis atualmente, é fácil esquecer como os padrões podem ser bonitos quando você os esboça à mão. Tente criar seus padrões ou os elementos necessários para construí-los com suas mãos, usando meios clássicos como tinta ou giz de cera.

Você pode acabar com um plano de fundo tão surreal quanto o de Taro Horiuchi⁠(abre em uma nova aba ou janela).

Você pode criar elementos artesanais no Canva para usar com seu design, como a tinta aquarela no modelo de site de casamento para casamento com destino em aquarela abstrata bege claro⁠(abre em uma nova aba ou janela).

Ao criar uma paleta de cores para seus padrões, experimente cores fortes. Lemondela⁠(abre em uma nova aba ou janela) usa um amarelo forte e variações dele nos detalhes da estampa. Essa é uma ótima maneira de garantir que o plano de fundo não esteja repleto de muitas cores brilhantes que podem se tornar opressivas.

Às vezes, uma solução simples e clássica, semelhante à apresentada no site da Print Mor⁠(abre em uma nova aba ou janela), pode ser muito útil. Não hesite em experimentar padrões simples e clássicos em seu plano de fundo. Eles serão sutis, mas podem dar um toque especial a um layout sem graça.

No entanto, tenha cuidado com a escala, ou eles podem começar a se parecer com uma textura.

Dê uma olhada no site da Less Rain Berlin⁠(abre em uma nova aba ou janela). Eles combinam dois padrões, um padrão de linha simples e um padrão ilustrativo, para criar um visual deslumbrante. Como se não bastasse, o site também apresenta um pequeno trem animado.

Amplie seu padrão e aumente o zoom até o fim. Embora o resultado possa não permitir que os espectadores apreciem o padrão inteiro, ele pode ajudá-lo a criar um plano de fundo interessante, como o site do Uber Brand Guideline⁠(abre em uma nova aba ou janela). Adicione animação à mistura e você estará pronto para começar.

O zoom na imagem ou no padrão do plano de fundo o torna um pouco mais interessante e muito exclusivo. Obtenha o visual com o modelo de site imobiliário Clean Grids White Purple Grey Real Estate⁠(abre em uma nova aba ou janela).

Ao criar padrões de plano de fundo, não se esqueça de que você pode combiná-los com outros recursos visuais para produzir um ótimo trabalho. Dê uma olhada no site da Combadi⁠(abre em uma nova aba ou janela), um ótimo exemplo de como a combinação de um padrão com uma bela imagem pode resultar em algo bonito.

Se você não gosta muito de imagens grandes, tente combinar seu padrão com um fundo de cor sólida, gradiente ou com uma paleta de cores que combine.

Não quer projetar elementos complicados para criar seu padrão? Tente usar formas geométricas básicas para chegar a uma bela solução. Veja o exemplo abaixo, que usa uma combinação de apenas duas formas geométricas para criar um padrão de fundo interessante.

A maneira mais rápida de criar padrões para seu site é usar formas. Altere o tamanho e a cor para torná-lo mais interessante. Confira o modelo de site educacional de geometria básica laranja e roxa⁠(abre em uma nova aba ou janela).

Não hesite em transformar palavras em elementos de design para seu padrão. Elas serão especialmente poderosas se estiverem vinculadas ao assunto de seu site. Dê uma olhada no design do Hack FWD, um ótimo exemplo que apresenta uma combinação de ícones e palavras.

Misture e combine seu design com uma paleta de cores interessante que combina e uma tipografia⁠(abre em uma nova aba ou janela) bacana. Obtenha esse visual com o modelo de site de fotografia de moda editorial com curadoria em bege e preto⁠(abre em uma nova aba ou janela).

Crie seus padrões de acordo com o tema de seu site, como o Wiski. Eles criaram um padrão que representa as bordas das belas encostas brancas apresentadas no site da Wiski. Inspire-se no conteúdo apresentado no site para o qual você está projetando e crie uma solução de design em torno dele.

E aí está, 30 ótimos exemplos para ajudar a inspirar seu próximo padrão de fundo de site bonito.

Para realmente pensar fora da caixa, não se esqueça de buscar inspiração em fontes offline. Visite uma galeria, um museu ou até mesmo sua biblioteca local. Às vezes, as melhores fontes de inspiração online não estão em uma tela.

E, como sempre, bom trabalho de design!