O documento fornece 7 dicas para criação de layouts para sites em WordPress: 1) Considerar diferentes tamanhos de tela, 2) Criar layout para mobile, 3) Escolher fontes, 4) Manter padrões de consistência, 5) Seguir a estrutura padrão de blog, 6) Incluir um guia de estilo visual simples, 7) Validar o layout com o desenvolvedor.

1. Criação de layouts para
sites em WordPress
7 Dicas para
Marconi Pacheco

2. Introdução
O objetivo é ajudar o designer e desenvolvedor web a unir forças, melhorar o entrosamento e a comunicação.
O foco principal é a criação do layout para sites em WordPress, são 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. Abordaremos:
1. Tamanho do site (Breakpoints)
2. Layout para Mobile
3. Fontes
4. Consistência e Padrões
5. Layout de Blog
6. Style Guide Simples
7. Apresentação do Layout ao Desenvolvedor

3. O que é…
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 escolheram o
WordPress para construir seus sites.
br.wordpress.org
Layout de um 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, que alinham
beleza, necessidade e usabilidade.
O layout faz referência à identidade visual do seu
negócio, atendendo às demandas de funcionalidades
do seu site.

4. Tamanho do site
(Breakpoints)
Faça um layout com resolução específica, simulando um site real

5. Tamanho do site
(Breakpoints)
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.
getbootstrap.com/docs/5.3/layout/grid/#grid-options
Tamanho da Tela Resolução da Tela Nome da Resolução
15.6” 1366 x 768 HD (High Definition)
15.6” 1600 x 900 HD+ (High Definition +)
15.6” 1920 x 1080 FHD (Full High Definition)
Desktop
Mobile
Tablet
<576px ≥576px ≥768px ≥992px
≥1400px
≥1200px
Principais resoluções de monitores e breakpoints

6. Tamanho do site
(Breakpoints)
Graceful degradation:
(projeto de cima para baixo) um método
de projetar da tela maior, com muitos
recursos e interações, para telas
menores, onde algumas vezes os
recursos e interações são reduzidos.
Design é feito com foco para resolução
desktop.
www.seobility.net/en/wiki/Graceful_Degradation
Exemplo para um monitor desktop 1366x768px
Conteúdo ficará dentro de uma grid 1200px como mostra linhas guias e se ajustará
responsivamente a resoluções menores

7. Layout para Mobile
Faça um layout mobile para apresentar ao cliente, somente se
necessário

8. Layout para Mobile
Os sites são feitos em blocos de
códigos HTML, em resoluções
diferentes, esses blocos se adaptam
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.
Dessa forma, projete pensando de
como o site vai se adaptar
“automaticamente” em resoluções
menores do seu layout.
Desktop 1920px Mobile 767px
Tablet 991px
Comportamento dos conteúdos conforme a resolução de tela,
formato Graceful degradation

9. Use fontes do Google, são grátis e muitas delas já vem no Wordpress
Fontes

10. Fontes
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 é preciso
saber que para o uso de fontes
diferenciadas, é preciso enviar o
arquivo da fonte para o desenvolvedor
que através de códigos é inserido no
site.
fonts.google.com
developers.google.com/fonts/faq?hl=pt-br
Vantagens de usar o Google Fonts
Essa biblioteca é composta por mais de 1.052 famílias de fontes, a ferramenta possui
código aberto é fácil de implementar, é grátis e muitas dessas fontes já vem no
WordPress.

11. Consistência e Padrões
Use padrões em todo o layout, isso agrega usabilidade e facilita no
desenvolvimento

12. Consistência e
Padrões
A consistência facilita a montagem e a
4º Heurística de usabilidade de Nielsen
que diz: A interface deve “falar” a
mesma língua o tempo todo e tratar
coisas similares da mesma maneira.
Quando configuramos elementos,
como: cor, fonte, títulos, botões,
campos de formulário, etc, essas
configurações são automaticamente
replicadas para todo o site.
www.nngroup.com/articles/ten-usability-heuristics
brasil.uxdesign.cc/10-heur%C3%ADsticas-de-nielsen-para-o-
design-de-interface-58d782821840
Três exemplos configuráveis no painel administrativo
Cores
- Primária
- Secundária
- Fundo
- Texto
- Títulos
- Botões
- Formulários
- Extra
Tipografia
Títulos:
H1, H2, H3, H4, H5, H6
Texto principal
- Família de fonte
- Tamanho
- Peso
- Espaçamento X e Y
- Maiúsculas/minúsculas
Botões
Botão primário
Botão secundário
- Família de fonte
- Tamanho
- Peso
- Espaçamento X e Y
- Espaçamento interno
- Maiúsculas/minúsculas
- Bordas
- Cor de fundo
- Cor de texto
- Cor de ação
Além desses 3 exemplos existem outras configurações, tudo que o site
contempla precisa ser configurado e padronizado.

13. Layout de Blog
Existe uma estrutura de blog pré-pronta que deve ser seguida

14. Layout de Blog
O WordPress tem por padrão uma
estrutura de blog, essa estrutura guia a
construção do layout.
Índice: exibe todas as postagens.
Página individual: é onde se lê a
postagem.
O layout de blog pode ser diferente
dependendo do tema instalado, o que
não muda muito dos que estão sendo
apresentados nos exemplos das
imagens ao lado.
Lista Capas (colunas de 1 à 4) Grade (colunas de 1 à 4)
Índice do blog
Normal
Postagem individual
Cobertura
Postagem em destaque Postagem em destaque Postagem em destaque

15. Style Guide Simples
Sempre entregue um SGS com o layout, isso acelera e ajuda na
montagem do site

16. Style Guide Simples
É um conjunto de Informações com
regras, orientações e padronização
visuais do projeto.
Faça um SGS com os principais
elementos do layout para guiar o
desenvolvedor durante a montagem do
site.
Envie as informações juntamente com
arquivo Adobe XD ou Figma, as cores
são enviadas em códigos, exemplo:
#FF0000
brasil.uxdesign.cc/por-que-voc%C3%AA-precisa-de-um-styl
eguide-a89380d05c4f
Blog adobe: l1nq.com/987HD
Exemplo de estilo (SGS) na barra de ativos do documento
Barra de ativos: facilita encontrar as configurações dos elementos e editar o projeto
inteiro em um só lugar. Se preferir não usar a barra de ativos, você pode escrever ao
lado do layout as configurações de título, textos, cores e botões, isso já ajuda
bastante.

17. Apresentação do Layout
ao Desenvolvedor
Mostre o layout a pessoa que irá montá-lo e confirme se tudo que foi
desenhado poderá ser feito

18. Apresente ao
desenvolvedor
É muito importante validar o layout
junto ao desenvolvedor para que seja
verificado o que pode ou não ser feito,
e corrigido sempre que preciso, antes
de ser apresentado ao cliente.
O designer também estará passando
as ideias das ações interativas do site.
Essa apresentação ao desenvolvedor
não precisa ser somente ao final do
layout, mas durante o processo de
criação.
Brasil ux design: l1nq.com/v5RYA
Seja flexível aprendemos um com o outro
Todos nós temos que entender e abraçar mudanças que virão durante o processo.
Layout Montagem e codificação
Site publicado

19. “Tudo o que fizerem,
façam de todo o coração,
como para o Senhor,
e não para os homens”
Colossenses 3:23
(Bíblia sagrada)

20. Obrigado!
linkedin.com/in/marconipacheco