A palavra "flat" traduzida do inglês significa "plano". Desde a sua criação, o denominado Flat design continua a manter a sua posição há vários anos, ocupando uma posição de liderança no mercado.

Onde tudo começou

O design da Web mudou muitas vezes desde o seu início. Percorreu um longo caminho desde elementos simples e enfadonhos até tridimensionais, convexos e quase materiais. Isso pode ser facilmente visto no exemplo da alteração da aparência do sistema operacional Windows. A componente visual desenvolve-se paralelamente ao desenvolvimento da tecnologia. Mas as suas novas tendências apontam, antes, para um regresso ao minimalismo e à simplicidade.

Do skeuomorfismo ao design plano

O estilo que precedeu o plano foi o skeuomorfismo. É uma grande tendência de design há muito tempo. Skeuomorfismo é um estilo pseudovolumétrico, cujos elementos imitam a aparência de objetos reais (caderno, despertador), utilizando sombras, texturas naturais e outras coisas. Seus exemplos marcantes foram encontrados nas primeiras interfaces de smartphones. Começou a perder posição a partir de 2010, quando designers de grandes empresas começaram a buscar a simplificação e, ao desenvolver interfaces de usuário, começaram a se livrar da principal característica do skeuomorfismo - a tridimensionalidade.

Um excelente exemplo visual da diferença de estilos é a foto abaixo. A imagem da esquerda é um desenho plano, enquanto a da direita é um skeuomorfismo.

Características do estilo simples

Flat é um estilo bidimensional. Não possui absolutamente nenhum efeito visual, como transições suaves de cores, sombras ou texturas tridimensionais. Em suma, tudo o que torna a imagem tridimensional.

O principal conteúdo informativo está contido nos ícones (ícone de design plano). Eles devem ser o mais claros possível para o usuário quando se trata de aplicativos para smartphones. Para os sites, os ícones são os principais elementos que refletem a sua especificidade e mensagem informativa. Via de regra, apresentam-se na forma de formas geométricas simples, um círculo ou um quadrado, com uma imagem convencional característica.

Ao desenvolver o design Flat, é dada atenção ao esquema de cores. Deve ser monótono, não intrusivo e não distrair o usuário. Na maioria das vezes, uma cor pura e vários tons contrastantes são usados. A propósito, existem muitos serviços de Internet com conjuntos de cores de design plano que você pode usar copiando os códigos hexadecimais das cores que desejar.

Não menos importante é a tipografia (texto). Devido à simplicidade geral, o componente de texto se destaca especialmente. Isso significa que deve ser legível e não contradizer o estilo geral. Isso dependerá do sucesso da escolha da fonte e de sua cor.

Exemplos de design plano

Comecemos com o fato de que os ícones de muitos recursos conhecidos da Internet e redes sociais mudaram de forma mais plana. Não faz muito tempo, os gigantes Google e YouTube também mudaram seu design para plano. O sistema operacional Windows, a partir do oito, abandonou completamente todos os sinais de volume nos ícones, o que agradava aos olhos de alguns usuários nas versões anteriores, e passou a aderir ao design Flat. Os desenvolvedores de aplicativos móveis para iOS e Android seguiram o exemplo.

Os sites de uma página (landing pages) aproveitam amplamente as vantagens do Flat design, para o qual o papel decisivo não é desempenhado pela aparência pretensiosa, mas pela funcionalidade e legibilidade.

A evolução do design plano

No início, o design Flat era de fato completamente plano, o que criava certas dificuldades para usuários acostumados com botões convexos. Se no skeuomorfismo a clicabilidade dos botões era imediatamente perceptível, então nas primeiras variações do design plano nem sempre era possível determinar a interatividade dos elementos na primeira vez.

Depois que a Microsoft lançou o Windows 8, projetado em estilo simples, nem todos os usuários foram capazes de descobrir imediatamente a nova interface e em quais ícones poderiam clicar. A aparência dos elementos não indicava de forma alguma possível interação com eles. Esse design era mais conveniente para aplicativos móveis, que adotaram essa ideia. E a Apple foi a primeira a fazer isso com o iOS 7.

No entanto, o design plano não fica parado e evolui para uma maior complexidade. Hoje, parece cada vez mais um design semiplano ou, como também é chamado, Flat 2.0. Efeitos de profundidade, sombras e gradientes começaram a aparecer nele. A profundidade no design plano é alcançada organizando os elementos em diferentes níveis ou ângulos.

Seja como for, o estilo está no auge da popularidade e é muito procurado. Portanto, se você está planejando projetar seu site, pode optar com segurança pelo Flat design. E se você precisar de alguns elementos que faltam para o seu site, na Internet você poderá encontrar um grande número de elementos de UI de design plano gratuitos (para download gratuito), como ícones, fontes, modelos e outros componentes necessários da interface do usuário.

Prós e contras do estilo

Sem dúvida, na vida acelerada de hoje, um estilo tão discreto e informativo é mais conveniente que seu antecessor. O design plano tem inúmeras vantagens inegáveis.

O mais importante, talvez, seja o carregamento rápido das páginas da web. Sites que usam design plano abrem muito mais rápido do que aqueles sobrecarregados com animações e outros objetos pesados. O tempo de carregamento é especialmente importante para a otimização de SEO e promoção do site ao topo.

Uma aparência simplificada facilita a leitura do texto e permite que você se concentre no conteúdo principal.

O design parece harmonioso e holístico, o que cria uma impressão geral agradável.

Nada pode ser perfeito e o design Flat não é exceção. Apesar de toda a sua aparente simplicidade, desenvolver um web design plano verdadeiramente bem-sucedido não é tão fácil. Existe a possibilidade de torná-lo enfadonho e pouco atraente. Ou, pelo contrário, exagere no design e esqueça a funcionalidade. A principal tarefa ao desenvolver um design Flat é manter o equilíbrio perfeito entre beleza e facilidade de uso.

O design plano tornou-se popular recentemente para aplicativos e sites. Isso não quer dizer que todo mundo adora esse estilo, mas definitivamente não é adequado para todos os aplicativos e sites. Se há muitas vantagens em um design plano, como simplicidade e minimalismo, facilitando seu uso. Para algumas aplicações, o design plano pode ser muito simples. Ou seja, vale adicionar algumas sombras ou gradientes para ficar melhor.

Muitos argumentam que web design plano é um design eficaz. Dizem que esta é uma forma de tornar o projeto o mais amigável possível. Aqui estão alguns exemplos inspiradores de projetos de design plano. Esta seleção de vários portfólios é ótima para entender designs planos que realmente funcionam.

A ISSLand

Criativo de janeiro

Macaco Mínimo

O que é design plano?

• O design plano foca no usuário
• O design plano é simples
• Design plano – menos gradientes
• O design plano inclui linhas retas e cantos quadrados
• Normalmente usa forte contraste de cores
• O design plano não tem sombras, chanfros, texturas ou qualquer coisa que pareça 3D
• O design plano só existe em 2 dimensões
• Design plano - uma tendência à simplicidade e ao minimalismo
• Design plano - não use efeitos adicionais
• Não há extras
• Design plano – menos botões e sinos e assobios
• Design plano significa foco nas fontes
• Combinações de cores, cores contrastantes e variações interessantes de cores são componentes importantes do design plano.
• O design plano é um dos muitos designs. É adequado para alguns projetos, mas não para outros.

O que não é design plano?

• Flat design não é skeuomorfismo ou design que emula a forma e os contornos da “realidade”.
• O design plano não inclui botões brilhantes
• O design plano não inclui decorações
• No design plano você não encontrará ideias tradicionais sobre “profundidade”
• O design plano não combina com todos os projetos

O design plano é apenas um design eficiente?

Algumas pessoas consideram o design plano um design eficiente por si só. Ou seja, simplifica o uso de sites e aplicativos, permitindo encontrar as informações necessárias sem distrações. É claro que o design plano não é o único que facilita a localização das informações. Se tudo for bem feito, os usuários não terão problemas. O projeto deve ser simples e fácil para quem tem condições de utilizá-lo. Algumas pessoas preferem usar design plano, enquanto outras preferem um estilo de design diferente.

Elementos para design plano

Você gosta de design plano? Aqui estão alguns elementos que podem ser usados ​​para um design "plano"

Pacote de ícones planos

A revolução do “design plano” continuou a ganhar impulso desde que foi introduzida na plataforma Windows Phone em 2010. Não é difícil entender o porquê: uma interface com esse design parece mais intuitiva, é adequada para elementos adaptativos, frameworks modernos e parece atraente quando executada corretamente.
O design plano começou como um contrapeso ao onipresente estilo skeuomórfico, mas desde então se tornou muito mais do que apenas “Opção B”.

Inicialmente, o flat era exclusivamente bidimensional com foco total no minimalismo. Modern flat 2.o usa sombras, gradientes e outros elementos para fazer com que pareça "quase plano".

5 componentes característicos do design plano moderno:

1. Longas sombras
Sombras longas adicionam profundidade e dimensão às imagens sem ter que sacrificar os detalhes minimalistas dos ícones que tornam a interface atraente.

2. Cores dinâmicas
Complementar visuais esparsos é fácil com cores energéticas, especialmente tons claros.
Diferentes cores de fundo em contraste com a cor base dos elementos tornam a página com menu lado a lado mais viva.
O site Flat UI Colors contém os padrões de cores mais eficazes para flat.

3. Tipografia simples
A escolha da fonte plana é baseada em um critério: legibilidade. Normalmente são usadas fontes sem serifa com largura de traço constante.

4. Botão transparente
Um dos elementos de tendência do web design moderno. A razão é que não atrai muita atenção, mas é claramente reconhecível como um botão.

5. Minimalismo
Flat e minimalismo andam de mãos dadas, usando os mesmos princípios: simplicidade e foco no conteúdo.
Pode parecer que usar design plano é uma solução universal, mas o minimalismo é difícil de implementar: quanto menos elementos funcionais, mais atenção eles requerem.

Não importa o quão bom o design plano possa parecer, não há garantia de que funcionará no seu site. Confira suas principais vantagens para saber se vale a pena planejar uma reformulação global.

Vantagens:
usado em interface adaptativa;
simplifica a navegação do usuário;
uma estrutura clara e visuais esquemáticos enfatizam a lógica interna da página;
carregamento rápido de páginas devido à simplicidade dos gráficos;
A tipografia familiar melhora a legibilidade.

O design plano tem tudo a ver com simplicidade e minimalismo, o que, por outro lado, dificulta a transmissão de mensagens visualmente complexas. Portanto, antes de se apressar em simplificar a interface, você deve considerar cuidadosamente a interação entre o site e o usuário.

Baseado no livro de tendências de web design.

Recentemente, ganhou enorme popularidade um estilo específico no design de sites e interfaces de usuário, que, devido à estilização de seus elementos, é denominado Flat.

Se você olhar um site feito de acordo com as regras do Flat, não verá nenhuma transição de gradiente, nem sombras, nem o menor indício de volume ou textura. Os princípios básicos do estilo flat são simplicidade, concisão e minimalismo. As principais características distintivas são aquelas coisas nas quais você pode se concentrar - cores brilhantes e incomuns, tipografia fora do padrão, primitivos gráficos.

Hoje, cada vez mais designers estão usando essa tendência em seus trabalhos, mas o estilo Flat ganhou popularidade especial com a disseminação dos modernos sistemas operacionais móveis Windows Phone e iOS 7, pois são seguidores dessa tendência, embora não aderem a completamente.

Nossa empresa já possui experiência na criação de sites no estilo Flat, e teremos prazer em ajudá-lo a criar um site flat!

Neste artigo iremos destacar os princípios básicos do flat design que você deve seguir se quiser usar o flat como estilo principal do seu projeto.

A seguir analisaremos e daremos exemplos de alguns sites que utilizam estilo flat.

1. Remova todos os efeitos

O princípio básico do design plano é a criação de uma imagem bidimensional que já é plana em si. Ao mesmo tempo, você precisa se livrar de todos os elementos que possam adicionar pelo menos alguma profundidade à imagem: gradientes, transições suaves, sombras, chanfros, volume, texturas e assim por diante. Todos os elementos da imagem possuem bordas rígidas e também não se destacam ou possuem profundidade em relação aos demais elementos da imagem.

No flat design você não encontrará elementos que tentam parecer realistas (skeuomorfismo), animação 3D, ícones realistas, etc. Porém, o design em si tenta se manter semelhante ao tradicional, mas agora rótulos, botões e navegação ganham destaque.

À primeira vista, um site que usa Flat design pode parecer muito simples, embora na verdade esse estilo seja caracterizado por uma hierarquia clara de elementos, posicionamento conveniente de todas as ferramentas de interação do usuário e, portanto, tenha um alto índice de usabilidade.

2. Use elementos simples

Para atingir seus objetivos em design plano, os designers usam botões e ícones. Eles devem ser tão intuitivos e clicáveis ​​quanto possível. Como todos os outros elementos da interface, eles devem ser planos e simples, sem efeitos adicionais. Os designers também costumam usar formas geométricas simples – retângulos, círculos e quadrados, permitindo que cada forma seja um objeto separado.

3. Vamos focar na tipografia

Como, de acordo com o princípio anterior, os gráficos em flat design são simples, um elemento extremamente importante é a tipografia - o desenho das inscrições. No design plano, a tipografia ganha destaque junto com os botões.

As fontes devem ser legíveis e, claro, consistentes com o design, pois com um design simples, fontes extremamente ornamentadas parecerão deslocadas. Porém, você não deve usar fontes comuns; é melhor experimentar e escolher aquela que vai atrair a atenção do usuário.

Você pode considerar combinar uma fonte simples sem serifa com alguma fonte nova que será percebida como um elemento artístico. As fontes devem ajudar o design a ser mais simples e claro, enquanto os botões e outros elementos devem servir apenas para aumentar a interatividade.

4. Vamos chamar a atenção com cores

A cor desempenha quase o papel principal no design plano. Se você estudar cuidadosamente os sites criados com base nesse conceito, a primeira coisa que chama sua atenção é a paleta de cores vivas. Geralmente consiste em várias cores contrastantes puras (sem tonalidades), duas ou três, embora esse número possa chegar a oito. Além disso, todas essas cores costumam ser usadas igualmente.

As cores mais populares são as cores primárias e secundárias. Ou seja, as cores primárias (ciano, magenta, amarelo, preto) e aquelas obtidas a partir da sua mistura. Além disso, muitas vezes, cores retrô são usadas no esquema de cores ao criar um design plano, como salmão, roxo, etc.

5. Minimalismo

O design plano é simples por natureza e se adapta bem a uma abordagem minimalista.

No design geral do site, você precisa evitar muitos sinos e assobios. É claro que cores e textos simples podem não ser suficientes. Portanto, se quiser adicionar efeitos visuais, você precisa escolher fotos simples. Alguns sites de produtos de varejo usam design plano para colocar seus produtos em um fundo simples e sem distração.

Deve-se notar que algumas fotografias têm profundidade natural, mas em geral se enquadram no plano geral do design.

Quem desenvolve aplicativos mobile e sites, escreveu uma coluna para nós e colocou tudo em seu devido lugar em relação ao flat e material design.

Em geral, a diferença entre Flat design e Material Design é sutil. Para quem não tem profundo conhecimento de design gráfico, eles podem parecer muito semelhantes. Neste artigo tentarei “esclarecer” algumas das diferenças entre eles. Você receberá conhecimentos adicionais tão necessários para não ferir acidentalmente a delicadeza do designer.

Um pouco de história

Antes de começarmos a falar sobre as diferenças entre as duas tendências de design mais populares, vamos descobrir de onde elas vêm. Há uma opinião de que o design do material é criado com base em um design plano. De onde veio o design plano, então?

Skeuomorfismo

Quando se trata de interface de usuário e web design, o conceito de skeuomorfismo refere-se a uma abordagem cuja ideia principal é a imitação. Sem entrar em muitos detalhes, vamos apenas lembrar das interfaces pré-iOS 7 da Apple com suas “texturas realistas, iluminação e efeitos bombásticos”.

A tentativa de fazer com que os objetos digitais se assemelhassem aos seus equivalentes do mundo real foi motivada pela necessidade de facilitar a interação do usuário com o dispositivo. Na verdade, esta é a razão pela qual todas as interfaces com texturas realistas dominaram o mundo digital durante muitos anos. O design skeuomórfico faz um ótimo trabalho ajudando os usuários a fazer uma transição perfeita do mundo real para o digital.

No entanto, com o surgimento da tecnologia móvel, torna-se gradualmente necessário focar principalmente na conveniência e facilidade de uso. Concordo, nesta área a necessidade de criar soluções móveis acessíveis a partir de diferentes dispositivos está a aumentar significativamente. E neste exato momento, a simplicidade se torna o novo padrão de design.

Nota: Não pense em hipótese alguma que o skeuomorfismo desapareceu completamente. É amplamente utilizado em jogos onde é necessário criar um mundo realista e ajudar os jogadores a sentirem seu personagem para mergulharem profundamente no processo do jogo.

Projeto plano

Este estilo é completamente desprovido de objetos tridimensionais. Grosso modo, o design plano carece de elementos estilísticos como sombras projetadas, texturas, gradientes, mas presta atenção ao jogo de fontes, cores e ícones. Mas por que tudo isso foi necessário? A resposta é simples.

Em primeiro lugar, o design plano reduz significativamente o tempo de carregamento da página. A ausência de detalhes skeuomórficos “pesados” (pense: camadas, fontes serifadas, gradientes) torna os elementos de design plano “mais leves”, o que, por sua vez, acelera significativamente o tempo de carregamento. Além disso, os elementos planos parecem igualmente atraentes em telas de alta e baixa resolução.

Em segundo lugar, imagens simples podem transmitir a sua ideia aos utilizadores mais rapidamente do que ilustrações detalhadas: são incompletas e, portanto, bastante fáceis de compreender.

E, claro, ícones planos com uma fonte relativamente simples podem direcionar a atenção dos usuários para conteúdos realmente importantes.

Hoje, o design plano recebeu um reconhecimento merecido, mas ainda tem seus problemas. O exemplo mais óbvio de tais problemas foi o lançamento do Windows 8 pela Microsoft. Este sistema operacional é considerado pioneiro em design plano e suporta o conceito de design Metro. O que gerou os problemas foi que a empresa considerou necessário prestar mais atenção à tipografia do que aos gráficos em si.

Os resultados de um teste de usabilidade do Windows 8 conduzido pelo NN Group mostraram que os usuários tiveram dificuldade em distinguir objetos clicáveis ​​de objetos não clicáveis. Os usuários reclamaram que os objetos que pareciam estáticos eram, na verdade, clicáveis. Como resultado, a principal missão da empresa – ajudar os usuários a interpretar corretamente o sistema – falhou.

Outra empresa frequentemente associada ao design plano é a Apple. Eles se afastaram dos elementos de design skeuomórficos no sistema operacional móvel iOS 7, lançado em 2013. Desta vez a transição foi recebida um pouco melhor, principalmente pelo fato da empresa não ter tentado atualizar completamente o conceito de interface do usuário, mas simplesmente adicionou algumas mudanças em direção a um design plano. Isso permitiu que os usuários usassem o produto contando com sua experiência anterior com sistemas operacionais e sites.

Design material

Sejamos claros agora: o material design é mais um produto de marca do que uma tendência espontânea de design que ganhou ampla aceitação. Isto é o que o distingue principalmente do seu design plano.

Ao chamar um material de design de “marca”, quero dizer que ele possui todo um conjunto de recomendações e princípios claramente definidos que todo designer que se preze segue. É bastante óbvio por que o Google introduziu seu Material Design: havia uma necessidade de unificar o design para que os aplicativos tivessem a mesma aparência em qualquer um dos muitos dispositivos Android.

Embora bastante funcional, o design plano ainda é considerado de difícil compreensão. A verdade é que objetos planos na tela podem confundir os usuários (principalmente aqueles que não têm experiência no uso de interfaces móveis e web). Portanto, o material design tenta trazer de volta os elementos do skeuomorfismo, mas de uma forma bastante simplificada. As imagens parecem planas, especialmente quando se trata de cores, mas ainda são multidimensionais graças à presença do eixo Z.

Em outras palavras, o material design pode ser chamado de uma versão melhorada do design plano com elementos de skeuomorfismo - animação, sombras e camadas. Desta forma você pode tornar o produto mais intuitivo em termos de navegação e evitar complexidades desnecessárias no estilo geral.

Prós e contras do design plano

Vamos deixar para trás a história da evolução dos estilos e passar para algo mais significativo - vamos listar os pontos fortes e fracos do design plano.

• Minimalismo e estilo
• Intuíção. Será mais fácil para você transmitir sua ideia aos usuários.
• Economizando tempo e recursos. As páginas carregam muito mais rápido com menos consumo de largura de banda.
• Concentre-se no conteúdo. A interface está livre de detalhes desnecessários que podem desviar a atenção de informações verdadeiramente valiosas.
• Parece igualmente bom em vários dispositivos, seja um navegador de PC ou um smartphone.
• Acelera o processo de desenvolvimento de design de site ou aplicativo, eliminando toques desnecessários de design.

• Estilo minimalista.
• Bastante intuitivo em um nível intuitivo. O design do material será igualmente fácil de perceber tanto para usuários experientes quanto para iniciantes.
• Skeuomorfismo moderado. Tudo parece mais realista graças ao uso do eixo Z (um conceito exclusivo do Google).
• Existe um conjunto de manuais que são constantemente atualizados. Portanto, qualquer designer pode sempre recorrer a eles caso surjam dificuldades durante o processo de trabalho.
• Animação para soluções web é incentivada. Não há necessidade de lembrar o quanto as pessoas amam o movimento. Além disso, a animação permite tornar a interface mais clara e intuitiva.

• Tem proprietário (empresa Google). Portanto, quaisquer dúvidas e sugestões de melhorias deverão ser encaminhadas ao proprietário.
• Devido ao eixo Z, o processo de design pode demorar mais para ser concluído.
• Elementos animados requerem mais recursos.
• A adesão rígida às diretrizes pode limitar a originalidade de um design.

Resumir

Na verdade, uma das abordagens de design em consideração não deve ser considerada como tendo uma clara vantagem sobre a outra, uma vez que os estilos plano e material andam lado a lado. Ambos são incrivelmente populares e desprovidos de realismo excessivo. O material design é um sucessor do design plano, enquanto o próprio design plano foi uma reação a soluções que eram muito pesadas e realistas. O design de materiais adicionou algo que o design plano sempre tentou se afastar - um pouco de skeuomorfismo. Embora uma coisa sempre seja diferente entre essas abordagens: o material design é um produto proprietário do Google, e o flat design é o resultado da fusão de várias práticas de design que buscam principalmente a simplicidade geral.

Na verdade, o design plano evoluiu muito nos últimos anos, passando de um estilo completamente “plano” para um estilo “semi-plano”. Agora permite o uso de camadas e sombras sutis para permitir que os objetos pareçam mais profundos do que pareciam anteriormente. Então, você e eu somos felizes contemporâneos do flat design 2.0.

Por último, nada impede que você tente combinar essas duas abordagens para criar um produto verdadeiramente funcional e fácil de usar. Então, inspire-se nos gurus do design plano e de materiais e mãos à obra!

Se você encontrar um erro de digitação, destaque-o e pressione Ctrl + Enter! Para entrar em contato conosco você pode usar .