Seis dicas para criar um layout atrativo

Ponderei um pouco se faria ou não essa postagem, mas como dizem, o conhecimento devo ser compartilhado, senão é perdido, por tanto, acredito que seja uma boa ideia eu compartilhar com vocês, as dicas que aprendi nos cursos que fiz da área de Design Gráfico, são dicas para te fazer olhar com outros olhos e quem sabe dar uma guinada em seu layout. Para começar, você pode sim fazer seu próprio layout, todos os templates do Diae, fui eu que fiz, não sou especialista em HTML, e criei o meu com a ajuda de tutoriais que tem na net, há muita coisa boa e te dará um norte para criar seu próprio layout, mas antes de se aventurar nos tutoriais, vou deixar algumas dicas para a confecção inicial, ou rascunho, afinal, você precisa ter ideia do que quer e como aplicar.

1°: Menos é Mais

Esta foi a primeira dica que aprendi no Design, quanto menos, mas limpo e atraente vai ser seu layout, não é preciso colocar tudo que você considera bonito ou gosta, pois muita coisa interfere na outra, e pode acontecer de você montar uma salada de frutas ao invés de um layout. Claro que tudo personalizado dá a impressão de ser bonito, mas nem sempre será funcional e lembre-se, quanto mais coisa tiver o seu layout, mais lento ele ficará. Um layout que entra rapidamente é mais convidativo, por tanto, maneirar é chave de tudo.

2°: Identidade

Antes de começar o corpo do seu layout, é preciso ter uma identidade e isto não é apenas o nome do seu blog. Pense nas seguintes questões: Seu espaço é para quê? Para quem? O que significa o nome do seu blog? Qual a razão desse nome? O que vem em mente quando pensa no título do seu blog?

Para se criar um cabeçalho ou banner, é imprescindível ter todas as repostas para essas perguntas, pois é com ela que você montará o significado, ou identidade do seu blog e consequentemente o seu layout. Por exemplo, o Da Imaginação à Escrita foi criado não como um blog literário, esta não era a minha intenção, minha ideia era ter um espaço para as minhas fanfics, por isso o nome da imaginação à escrita, mas com o tempo, o blog se transformou no que é hoje. Como eu já tinha uma ideia do que seria a essência do blog e seu nome, era hora de ter um banner, minha escolha sempre foi ter uma pena e um pergaminho, na verdade a pena era essencial, acredito que muitos já devem ter visto esses dois elementos nos antigos layouts do Diae, mas assim mesmo não era exatamente o que eu buscava, queria algo mais consistente. Quando fiz esse layout, procurei com afinco algo que pudesse ser a cara do blog, que transmitisse o que eu sempre imaginei para ele, quando encontrei a moça com a escrivaninha, sabia que seria essa a minha identidade, e podem notar, a pena, está lá, que era algo que eu queria muito que tivesse também.

Por tanto, ao criar seu cabeçalho, imagine as questões acima, coloque tudo no papel, tudo que você imaginar, no design chamamos isso de breaming storm, ou chuva de ideias, é um exercício legal para se aplicar, mas lembre-se, tente fugir do clichê, do convencional, se não der, sem problema, mas tente fazer algo de diferente, que torne seu blog único e especial.

3° Inspiração

Há uma grande diferença entre inspiração e fazer igual, nem digo plágio, pois esse é um outro assunto. Aqui no blog, eu me inspiro muito no Livros e Chocolate, a Flávia é uma das blogueiras que mais admiro, adoro o trabalho dela, seja literário ou de Web Design, mas claro, tento ter a minha marca em tudo que faço, mas a inspiração é uma ótima amiga se você quiser alguma ideia, mas nada de ser igual ao colega! Outro exemplo ótimo de inspiração, são os layouts da Silviane, do Cantar em Verso (que babo toda vez que entro nesse blog) e no Estilhaçado Livros. A tendência hoje em dia são layouts com fundo branco e esses 3 são ótimos para você ter uma inspiração, mas volto a repetir, inspiração é diferente de fazer igual, não adianta você querer igual a de uma pessoa, pois não será seu, terá a marca de terceiros, tente fazer alguma coisa que você olhe e pense: Isso tem um pouco de mim.

4° Gosto versus Mercado

Deixei “mercado”, pois é o termo mais simples para explicar o que eu quero dizer. Você tem inúmeros gostos, muita coisa te agrada, mas nem sempre isso tem que ser o principal meio na hora de criar seu template, lembre-se, se você está fazendo um espaço para o público visitar, nem sempre seu gosto será o mesmo do outro, e vai por mim, ele pode não combinar com a proposta do blog e a identidade. Por exemplo, personagens infantis, casam bem com sites que tenham essa proposta, um blog literário por mais que até possa usar, o ideal é ser algo maduro, elegante, afinal, você quer mostrar segurança e firmeza em seus posts e resenha, não é? Se optar por um banner, cores e até fonte mais “infantil”, não será isso que você irá mostrar, mas sim infantilidade. Ao se criar um layout, um banner ou cabeçalho, é preciso que você mostre seriedade em seu trabalho, em seu espaço e com elementos mais “infantis” não é o caminho, mas repto, a não ser se esse for o foco do site. Um exemplo: Revil, o portal para os fãs de Resident Evil, neste caso, pode e até deve ser usado os personagens do game, mas isto que é a diferença, o conteúdo, a intenção do site. Ah, mas eu gosto da Cinderela, não posso usa-la? Que tal ao invés de usa-la, você utilizar as cores? Isso na identidade é bem legal e mostra um significado por trás, por isso mesmo, você precisa ter ideia do que quer com esse blog, com esse layout. Toda regra tem sua exceção, mas nem sempre a exceção será o que o mercado pede.

O “mercado”, mas vou focar no literário, pede algo que seja funcional, bonito, clean, mas ao mesmo tempo elegante e sério, afinal, os blogs literários são formadores de opinião, fazer uma resenha, fazer um post de divulgação, tudo isso é um trabalho sério, é o que vai ajudar a editora, o autor, a ter a atenção para determinado livro, por isso seu template precisa ter um ar mais sério, claro que você não precisa ficar só nisso, mas pode combinar a seriedade com o elegante, pode combinar a seriedade com o feminismo, por exemplo, há inúmeras maneiras de se fazer isso, seja com o banner, seja com as cores e até as fontes. Você pode criar um espaço que seja sério, mais ou menos tempo leve e descontraído, basta saber como aplicar.

5°: Fontes

Fonte é um tema complicado, mas o ideal são fontes que não sejam muito duras e nem tão “personalizadas”, mas isto pode ou não se aplicar ao título do post e banner. Por exemplo, você pode sim usar uma fonte mais “floreada” no seu cabeçalho, deem uma olha na fonte que usei no nome Da Imaginação à Escrita, é uma fonte mais desenhada, este tipo de fonte é boa para se usar em títulos, mas coisa pequena, até pode ser usado no título da postagem, mas o bom é escolher uma que dê para ler. Aqui no Diae eu utilizo 5 fontes, o ideal é 3, mas nem sempre a fonte Delius (que uso no menu e no gadget), fica boa em um banner por exemplo e a Mademoiselle Camille (a fonte do cabeçalho), só uso em algumas outras situações, como no Mídia Kit por exemplo, mas em títulos que apenas quero dar uma diferenciada, pois esse tipo de fonte, não é própria para leitura.

Outras fontes que uso: Bebas para a maioria dos banners que faço, é uma letra mais quadrada, mas ótima de leitura. News Cycle, fonte do título dos posts, notem que ela é mais fina, e sem serifa. Fonte Serifadas, são aquelas que possuem um “pezinho” no final, exemplo: Times New Roman. Este tipo de fonte é a ideal para leituras, podem reparar, nos livros, são sempre fontes serifadas, pois elas formam “um caminho” quando vamos ler.

As fontes sem serifa, não possuem esses “pezinhos”, são ótimas para a Web, mas não devem ser a única usada, no caso de blogs literários, uma fonte que tenha um pouco de serifa pode ser uma ótima escolha, afinal, esse tipo de espaço, é de leitura. Aqui no Diae, já usei várias, mas atualmente é a PT Serif, ela tem uma leve serifa, mas também é arredondada, dando não só uma elegância, mas conforto. A Fonte do seu blog precisa ser confortável para a leitura, mesmo que não seja aquela que você goste.

Fontes muito quadradas e com muita serifa, podem dar o efeito ao contrário e cansar a leitura, por isso, tente evita-las.

Exemplo de boas fontes para sua postagem:

• Trebuchet MS (Fonte sem Serifa, mas ótima para Web)
• Georgia (Fonte com Serifa, mas redonda, boa para leitura)
• Verdana (Sem Serifa)
• Calibre (Umas das fontes mais bonitas e excelente para Web)
• Crimson Text (Fonte com serifa elegante, lembra um pouco a Georgia)
• Hanuman (Fonte Serifada, mas mais dura)
• Josefin Sans (É uma fonte sem serifa bonita, mas recomendo cautela)
• Open Sans (Fonte sem serifa, muito boa para Web)

Cada uma das fontes acima, são ótimas para o corpo do post, para o título, você pode escolher sim uma mais desenhada, mas tenha cautela, ou se preferir, uma fonte sem serifa mais fina ou grossa, ambas ficam ótimas em títulos.

6° Cores

Cores e fontes são coringas, mas as partes mais difíceis de escolher, aqui o gosto toma conta, mas lembre-se de ser cauteloso nas escolhas. Uma corte muito forte, pode cansar a leitura e cores muito fracas dificultam. Se você gosta de cores mais fortes, a dica que dou é que intercale com cores claras (mas nem tanto), para que não “briguem” entre si, no entanto, a cor mais forte deve ser usada para poucas coisas, como o título da postagem por exemplo, no corpo do post, tente usar um tom de 90% de preto ou até mesmo o preto, evite usar uma cor colorida na postagem. Títulos de Gadgests, blockquotes, títulos de postagens, negrito, itálico, tudo isso você pode personalizar, mas tenha moderação e escolha as cores certas. Quando decidi criar esse template, escolhi uma paleta que fosse um pouco mais unissex, mas feminina, por isso o tom de violeta, mas permaneci com os tons de marrons, cinza e verde. Claro que você pode usar rosa, azul, laranja, mas tente combinar com cores que harmonizam entrem si, para ter um espaço agradável para quem for visitar. Um fundo mais escuro pode contrastar demais o seu layout, ofuscando a postagem, por isso, opte por uma cor mais clara no fundo, este é um dos motivos do branco estar em evidência hoje em dia, além de combinar com as demais cores, ele não cansa a leitura, reparem que na maioria dos sites e redes sociais, a cor de fundo é relativamente mais clara, para que quando entrarmos, isto não ofusque a visão. Quando temos contato com uma cor mais forte, esta é a primeira que o olho vai enxergar e reter sua atenção, por isso a cautela na hora de escolher uma paleta. Cores mais focas no fundo acabam dando um charme a mais e te dá liberdade de colocar uma cor mais vibrante em outros lugares no template.

Tons frios combinam entre si e com tons quentes. Os Tons quentes casam bem com alguns terrosos, mas tenha cuidado ao unir cores quentes entre si. Tons apenas frios, por mais que combinem refletem em algo muito “tranquilo”, ou até preguiça (mas não digo preguiça no termo ruim, mas sim que te dá sono), se você combinar com um tom mais quente, seu layout terá um aspecto mais bonito. Há muito significado nas cores, no design é uma das peças mais importantes, eu particularmente procuro escolher as cores depois que tenho em mente a identidade do blog. Já usei rosas com tons de verde, já usei amarelo com marrons, verde e cinza, roxo e cinza. O legal é você escolher uma paleta com no máximo 4 cores, evite colocar mais, se não, vira uma salada mista.

O preto é uma cor que muitos gostam, mas para Web é bom evitar, apenas em casos isolados ou para um detalhe ou outro, o mesmo com cores mais claras e fortes. Na net, principalmente em blogs de tutorias de html, há muitas dicas de paletas de cores, procure uma que seja agradável ao olhar, não apenas pelo seu gosto, ou se mesmo assim você quer um tom especifico procure outros tons que irão “conversar” com o tom que você escolheu, que combinem entre si.

Alguns exemplos de paletas (não tenho ideia de quais blogs são, pois fui salvando no PC, mas se for sua, pode comentar, que te dou os créditos):

Reparem que nas paletas temos tons mais fortes em contraste com tons mais claros, paletas como as de cima, possuem cores que conversam entre si, dando um aspecto de harmonia, este é o segredo na hora de escolher uma paleta de cores: Harmonia.

***

Bem, estas foram minhas seis dicas para se criar um bom layout, pretendo trazer uma lista de blogs de tutorias que costumo usar quando vou criar meu template, para ajudar vocês. Espero de que alguma forma as dicas tenham sido úteis.