Flat Design no layout de e-mail marketing

Por Capa, Dicas, Dicas do Dinamize Mail, Dinamize Mail

Flat Design no layout de e-mail marketing

 

O Flat Design consiste em simular objetos reais graficamente, utilizando pouca textura, contrastes de sombras e cores vivas, que tornam os elementos mais simpáticos e mais objetivos para o usuário. Que tal aplicar o Flat Design no layout do seu e-mail marketing?


Como surgiu o flat design?

O Flat Design evoluiu a partir de um conceito de design do século 19, chamado Esqueumorfismo. Muitos afirmam que o Flat Design é uma tendência totalmente oposta, e é verdade, porém ele é uma simplificação desse conceito de representação.  A palavra é composta do grego “skeuos”, que significa vaso ou ferramenta, e “morpho”, que significa forma.

E nascia o iPhone!E nascia o iPhone!

Esqueumorfismo, esta ideia de imitar a aparência de coisas reais como uma agenda, um relógio ou o folhear de um livro ou revista, exerceu tamanho fascínio em Steve Jobs que lá em 2007,  a Apple não resistiu e passou a adotá-lo em todos os seus produtos a partir do primeiro e lendário iPhone!

 

 

 

Microsoft ZuneMicrosoft Zune. Inovador, mas…

Surgiu um ano antes, mas ele era muito caro. Foi a tentativa de concorrer com o iPod que fracassou comercialmente, mas que deu origem ao visual básico do Windows 8 e 10, e inclusive, influenciou as interfaces dos produtos da Apple, após a morte de Steve Jobs.  Essa interface já tinha a característica de ser minimalista e com uma tipografia de letras grandes;  livre de excesso de detalhes, clara e concisa.

 

 

 

 


Definindo o Flat Design

Definindo o Flat DesignÉ como o nome indica: a simplificação de uma interface através da remoção de texturas e gradientes que criam a aparência 3D, lembrando um pouco peças de Playmobil e Lego.

 

 

 

A ideia é criar uma representação da realidade, com foco na funcionalidade e usabilidade. Pode-se ver facilmente como os ícones representam perfeitamente as ideias sem demasiados detalhes

flat design

Os elementos da tela ficam como peças de um jogo, o que instiga o usuário a manipular e interagir. Essa “vontade de interagir” deve ser corretamente guiada no desenvolvimento do layout, para que ele tenha uma finalidade além da estética e não deixe a informação confusa.

desenvolvimento do layout

 


Flat Design no layout do e-mail marketing

Aplicar o Flat Design no layout de e-mail marketing, simplifica muito o design de newsletters; há valorização das cores, sem excesso de efeitos com gradiente ou texturas. A peça fica muito mais leve tanto visualmente, quanto no tamanho em bytesO foco passa a recair no conteúdo escrito, e a responsividade é algo que deve ser levado em conta. Um layout mais conciso como o flat deve se adaptar a uma vasta gama de dispositivos que temos hoje, como celulares, tablets e notebooks.

Botões

Ao criar um botão, usar uma borda e drop-shadow fará com que o elemento se destaque do fundo e do conteúdo. Isso torna facilmente identificável como um elemento clicável, porém  você não pode usar muito desses detalhes, de modo que o foco deve ser colocado sobre o contraste de cor!

Você até pode usar  sombra na fonte, mas você deve manter a aparência plana do botão, aqui vale a maxima KISS rule (Keep It So Simple)

botões flat design

 

Tipografia

A tipografia é um elemento muito importante. Uma vez que a interface é minimalista, você pode usar a tipografia para criar o humor que você está tentando passar. Você pode definir um estado de espírito formal, casual ou divertido dependendo do estilo da fonte. Uma vez que o fundo é simples, a fonte irá definir o estilo por si. No caso do e-mail marketing especificamente, na parte textual, use fontes compatíveis com a maioria dos dispositivos, como Tahoma e Verdana

tipografia no flat design

Cores

Uma parte fundamental da concepção de uma interface é a definição de uma paleta de cores. Os esquemas de cores neste tipo de design mais plano tendem a ser mais ousados e mais brilhantes do que algumas outras paletas de cores, para compensar a retirada dos efeitos de textura e profundidade. Ao escolher uma paleta de cores, lembre-se de pensar sobre como as cores vão ajudar os usuários a navegar. Certifique-se de especificar uma cor para as principais ações em sua peça.

Receba o conteúdo no email

Está gostando deste conteúdo?
Temos um ebook sobre cores no email marketing para você!

design flatPintou umas Dicas!

Acesse o Flatui ColorPicker para ver mais detalhes das cores flat

Veja oAdobe Color Onlinepara ver regras de combinações das cores flat


Autor


Francis Fussiger

Analista de Sistemas, Desenvolvedor de Software, trabalha também com analise de marketing digital e otimização de SEO. Adora ciência, punk rock e gifs; estuda memética por diversão

Veja conteúdos do Autor