Flat Design no layout de e-mail marketing

DinamizeCapa, Dica, Dicas do Mail2Easy PRO, Mail2EasyPro0 Comments



Design flat é a tendência



“Design é uma forma de resolver problemas. Nunca se esqueça disso.”
Wells Riley



“Simplicidade é o último grau de sofisticação”
Leonardo da Vinci


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 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!


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!



Design flat!!!




Design flat começou na Microsoft

Microsoft 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

Design flat foi feito por quem brincava de Lego e Playmobil


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

Design flat está em tudo

É 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.


Design flat está em tudo mesmo


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.

No layout do e-mail marketing


Aplicar o Flat Design no layout de e-mail marketing, simplifica muito o design de newsletters; 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 bytes. O 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.

Confira estes dois exemplos de Flat E-mail Marketing disponíveis na Litmus, feitos por Kevin Mandeville com o e-mail builder:


Detalhes Práticos


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)

Design flat dos botões no e-mail

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


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




o Design flat precisa de cores legais! Fica a dica.

Pintou umas Dicas!

Acesse o Flatui ColorPicker para ver mais detalhes das cores flat

Veja o Adobe Color Online para ver regras de combinações das cores flat




Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *