7 Dicas para layouts em WordPress

Nesse post eu vou passar 7 Dicas para layouts em WordPress, contudo o objetivo é ajudar o designer e desenvolvedor web a unir forças, melhorando o entrosamento e a comunicação.
O foco principal é a criação do layout para sites em WordPress, serão 7 dicas que ajudarão o designer a fazer uma boa entrega ao desenvolvedor, fazendo com que a eficiência e produtividade sejam mais assertivas e eficazes, em suma abordaremos:

Breve Descrição Sobre WordPress e Layout

WordPress

WordPress é um CMS de código aberto que você pode usar para criar sites, blogs e lojas online. CMS (Content Manager System) é um sistema de gerenciamento de conteúdo de sites dinâmicos. 43% da internet usa o WordPress, desde blogs amadores até sites super desenvolvidos. Mais de 60 milhões de pessoas escolhem o WordPress.

Layout de Site

Layout de site é a forma visual que corresponde a organização de elementos gráficos como, textos, imagens, formas e cores, organizados em uma página web, alinhando: beleza, necessidade e usabilidade. O layout faz referência à identidade visual do seu negócio, pois pretende atender as demandas da empresa e funcionalidades do seu site.
Veja mais sobre Web Design.

7 Dicas para layouts em WordPress

1. Tamanho do site (Breakpoints)

O que eu posso dizer sobre Breakpoints: são pontos de quebra/interrupção, também conhecido como “Grid”. Um sistema muito usado por desenvolvedores como referência é a grid do Bootstrap, que são 6 pontos de interrupção para quebra da largura de tela. Cada ponto de interrupção possui seu próprio tamanho de largura.

2. Layout para Mobile WordPress

Por causa de tamanho de telas, projete pensando de como o site vai se adaptar “automaticamente” em resoluções menores do seu layout. Faça um layout mobile para apresentar ao cliente, somente se necessário.
Em HTML, os sites são feitos em blocos de códigos, esses blocos se adaptam em resoluções diferentes empurrando da esquerda para direita, quando o conteúdo fica muito apertado o bloco da direita cai para baixo, fazendo com que os blocos se empilhem um em cima do outro.

3. Fontes em WordPress

Usar as fontes do Google é uma recomendação por já vir instalados em alguns WordPress e porque são fáceis de instalar se necessário. Você pode usar outras fontes mesmo não tendo no Google, porém eu não recomendo pela trabalho que gera ao instalar.

4. Consistência e Padrões

Segundo Jacok Nielsen que diz: “A interface deve “falar” a mesma língua o tempo todo e tratar coisas similares da mesma maneira.” A consistência deve seguir a identidade da marca no site, facilitando na montagem ao configurar os elementos, como: cor, fonte, títulos, botões, campos de formulário, etc, essas configurações são automaticamente replicadas para todo o site.
Endenda melhor sobre Heurísticas de Nielsen.

5. Layout de Blog em WordPress

WordPress por padrão tem uma estrutura pré-pronta de blog a ser aeguida, essa estrutura guia o designer na construção do layout. O layout de blog pode ser diferente dependendo do tema instalado no WordPress.

6. Style Guide Simples

Style Guide é um conjunto de Informações com regras, orientações e padrões visuais do projeto. Faça um style Guide simples com os principais elementos do layout para guiar o desenvolvedor durante a montagem do site. Recomendo que envie as informações juntamente com arquivo do Figma ou do progrma onde foi feito.

7. Apresentação do Layout ao Desenvolvedor

É muito importante validar o layout junto ao desenvolvedor para que seja verificado o que pode ou não ser feito, antes de passar ao cliente para aprovação. Essa validação com desenvolvedor não precisa ser somente ao final do layout, mas durante o processo de criação.

Resumo

Resumindo essas 7 Dicas para layouts em WordPress em poucas palavras e por tópicos:
1. Faça um layout com resolução específica, simulando um site real;
2. Faça um layout mobile para apresentar ao cliente, somente se necessário;
3. Use fontes do Google, são grátis e muitas delas já vem no WordPress;
4. Use padrões em todo o layout, isso agrega usabilidade e facilita no desenvolvimento;
5. Existe uma estrutura de blog pré-pronta que deve ser seguida;
6. Sempre entregue um style guide simples com o layout, ajudará na montagem do site;
7. Valide o layout com o desenvolvedor não somente no final, mas durante o processo de criação.