SlideShare uma empresa Scribd logo
Criação de layouts para
sites em WordPress
7 Dicas para
Marconi Pacheco
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
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.
Tamanho do site
(Breakpoints)
Faça um layout com resolução específica, simulando um site real
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
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
Layout para Mobile
Faça um layout mobile para apresentar ao cliente, somente se
necessário
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
Use fontes do Google, são grátis e muitas delas já vem no Wordpress
Fontes
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.
Consistência e Padrões
Use padrões em todo o layout, isso agrega usabilidade e facilita no
desenvolvimento
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.
Layout de Blog
Existe uma estrutura de blog pré-pronta que deve ser seguida
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
Style Guide Simples
Sempre entregue um SGS com o layout, isso acelera e ajuda na
montagem do site
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.
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
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
“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)
Obrigado!
linkedin.com/in/marconipacheco

Mais conteúdo relacionado

Semelhante a 7 Dicas para Criação de layouts para sites em WordPress

Responsive wordpress
Responsive wordpressResponsive wordpress
Responsive wordpress
Jackson F. de A. Mafra
 
Design System: Dominando o Design at Scale
Design System: Dominando o Design at ScaleDesign System: Dominando o Design at Scale
Design System: Dominando o Design at Scale
Guilherme Gonzalez
 
Tcc
TccTcc
A Semântica do HTML5: a web 3.0
A Semântica do HTML5: a web 3.0A Semântica do HTML5: a web 3.0
A Semântica do HTML5: a web 3.0
Campus Party Brasil
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Luiz Antonio
 
Introdução ao Wordpress
Introdução ao WordpressIntrodução ao Wordpress
Introdução ao Wordpress
Aline Corso
 
Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3
Heraldo Gonçalves Lima Junior
 
Desenvolvendo APPs para múltiplas resoluções
Desenvolvendo APPs para múltiplas resoluçõesDesenvolvendo APPs para múltiplas resoluções
Desenvolvendo APPs para múltiplas resoluções
talkitbr
 
Desenvolvendo APPs para múltiplas resoluções
Desenvolvendo APPs para múltiplas resoluçõesDesenvolvendo APPs para múltiplas resoluções
Desenvolvendo APPs para múltiplas resoluções
Alessandra Rosa
 
APLICATIVO EDITORIAL PARA EAD
APLICATIVO EDITORIAL PARA EADAPLICATIVO EDITORIAL PARA EAD
APLICATIVO EDITORIAL PARA EAD
dualpixel
 
Oficina de Planejamento Corte: Seu layout virando código - 15 EDTED
Oficina de Planejamento Corte: Seu layout virando código  - 15 EDTEDOficina de Planejamento Corte: Seu layout virando código  - 15 EDTED
Oficina de Planejamento Corte: Seu layout virando código - 15 EDTED
Bunee.io - Hiring with Intelligence
 
Slider da aula 01 - Design, Banco de dados e PHP
Slider da aula 01 - Design, Banco de dados e PHPSlider da aula 01 - Design, Banco de dados e PHP
Slider da aula 01 - Design, Banco de dados e PHP
Franciosney Souza
 
Como tornar seu site atraente
Como tornar seu site atraenteComo tornar seu site atraente
Como tornar seu site atraente
Suzana Viana Mota
 
T CC - David William e Marce
T CC - David William e Marce T CC - David William e Marce
T CC - David William e Marce
Notícia Web
 
PORTAIS: LIVRO DE COMPANHIA DO DESIGN EDITORIAL EM WEB E MEIOS DIGITAIS
PORTAIS: LIVRO DE COMPANHIA DO DESIGN EDITORIAL EM WEB E MEIOS DIGITAISPORTAIS: LIVRO DE COMPANHIA DO DESIGN EDITORIAL EM WEB E MEIOS DIGITAIS
PORTAIS: LIVRO DE COMPANHIA DO DESIGN EDITORIAL EM WEB E MEIOS DIGITAIS
Roberto Mitraud Aroeira
 
Desenvolvimento Web Parte I
Desenvolvimento Web Parte IDesenvolvimento Web Parte I
Desenvolvimento Web Parte I
igorpimentel
 
Programação web e o front-end
Programação web e o front-endProgramação web e o front-end
Programação web e o front-end
Anderson Luís Furlan
 
Foundation 4 Framework CSS
Foundation 4 Framework CSSFoundation 4 Framework CSS
Foundation 4 Framework CSS
Luis Fernando Mangia
 
Aula 1 - Desenvolvimento do leiaute (1).pdf
Aula 1 - Desenvolvimento do leiaute (1).pdfAula 1 - Desenvolvimento do leiaute (1).pdf
Aula 1 - Desenvolvimento do leiaute (1).pdf
ssuser595b1e1
 
Campus Party - Desenvolvendo aplicações .Net com software gratuito
Campus Party  - Desenvolvendo aplicações .Net com software gratuitoCampus Party  - Desenvolvendo aplicações .Net com software gratuito
Campus Party - Desenvolvendo aplicações .Net com software gratuito
Alexandre Tarifa
 

Semelhante a 7 Dicas para Criação de layouts para sites em WordPress (20)

Responsive wordpress
Responsive wordpressResponsive wordpress
Responsive wordpress
 
Design System: Dominando o Design at Scale
Design System: Dominando o Design at ScaleDesign System: Dominando o Design at Scale
Design System: Dominando o Design at Scale
 
Tcc
TccTcc
Tcc
 
A Semântica do HTML5: a web 3.0
A Semântica do HTML5: a web 3.0A Semântica do HTML5: a web 3.0
A Semântica do HTML5: a web 3.0
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
 
Introdução ao Wordpress
Introdução ao WordpressIntrodução ao Wordpress
Introdução ao Wordpress
 
Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3
 
Desenvolvendo APPs para múltiplas resoluções
Desenvolvendo APPs para múltiplas resoluçõesDesenvolvendo APPs para múltiplas resoluções
Desenvolvendo APPs para múltiplas resoluções
 
Desenvolvendo APPs para múltiplas resoluções
Desenvolvendo APPs para múltiplas resoluçõesDesenvolvendo APPs para múltiplas resoluções
Desenvolvendo APPs para múltiplas resoluções
 
APLICATIVO EDITORIAL PARA EAD
APLICATIVO EDITORIAL PARA EADAPLICATIVO EDITORIAL PARA EAD
APLICATIVO EDITORIAL PARA EAD
 
Oficina de Planejamento Corte: Seu layout virando código - 15 EDTED
Oficina de Planejamento Corte: Seu layout virando código  - 15 EDTEDOficina de Planejamento Corte: Seu layout virando código  - 15 EDTED
Oficina de Planejamento Corte: Seu layout virando código - 15 EDTED
 
Slider da aula 01 - Design, Banco de dados e PHP
Slider da aula 01 - Design, Banco de dados e PHPSlider da aula 01 - Design, Banco de dados e PHP
Slider da aula 01 - Design, Banco de dados e PHP
 
Como tornar seu site atraente
Como tornar seu site atraenteComo tornar seu site atraente
Como tornar seu site atraente
 
T CC - David William e Marce
T CC - David William e Marce T CC - David William e Marce
T CC - David William e Marce
 
PORTAIS: LIVRO DE COMPANHIA DO DESIGN EDITORIAL EM WEB E MEIOS DIGITAIS
PORTAIS: LIVRO DE COMPANHIA DO DESIGN EDITORIAL EM WEB E MEIOS DIGITAISPORTAIS: LIVRO DE COMPANHIA DO DESIGN EDITORIAL EM WEB E MEIOS DIGITAIS
PORTAIS: LIVRO DE COMPANHIA DO DESIGN EDITORIAL EM WEB E MEIOS DIGITAIS
 
Desenvolvimento Web Parte I
Desenvolvimento Web Parte IDesenvolvimento Web Parte I
Desenvolvimento Web Parte I
 
Programação web e o front-end
Programação web e o front-endProgramação web e o front-end
Programação web e o front-end
 
Foundation 4 Framework CSS
Foundation 4 Framework CSSFoundation 4 Framework CSS
Foundation 4 Framework CSS
 
Aula 1 - Desenvolvimento do leiaute (1).pdf
Aula 1 - Desenvolvimento do leiaute (1).pdfAula 1 - Desenvolvimento do leiaute (1).pdf
Aula 1 - Desenvolvimento do leiaute (1).pdf
 
Campus Party - Desenvolvendo aplicações .Net com software gratuito
Campus Party  - Desenvolvendo aplicações .Net com software gratuitoCampus Party  - Desenvolvendo aplicações .Net com software gratuito
Campus Party - Desenvolvendo aplicações .Net com software gratuito
 

Mais de Marconi Pacheco

Teste de Usabilidade Como planejar e executar
Teste de Usabilidade Como planejar e executarTeste de Usabilidade Como planejar e executar
Teste de Usabilidade Como planejar e executar
Marconi Pacheco
 
Apresentação TCC - Marconi Pacheco 2010
Apresentação TCC - Marconi Pacheco 2010Apresentação TCC - Marconi Pacheco 2010
Apresentação TCC - Marconi Pacheco 2010
Marconi Pacheco
 
Maturidade UX nas Empresas
Maturidade UX nas EmpresasMaturidade UX nas Empresas
Maturidade UX nas Empresas
Marconi Pacheco
 
style guide ui
style guide uistyle guide ui
style guide ui
Marconi Pacheco
 
Bootstrap praticas mais usadas
Bootstrap praticas mais usadas Bootstrap praticas mais usadas
Bootstrap praticas mais usadas
Marconi Pacheco
 
UX e UI Design - O que é? Quais as diferenças?
UX e UI Design - O que é? Quais as diferenças?UX e UI Design - O que é? Quais as diferenças?
UX e UI Design - O que é? Quais as diferenças?
Marconi Pacheco
 
A obra do espirito santo na igreja
A obra do espirito santo na igrejaA obra do espirito santo na igreja
A obra do espirito santo na igreja
Marconi Pacheco
 
Simplificando o design digital
Simplificando o design digitalSimplificando o design digital
Simplificando o design digital
Marconi Pacheco
 
Qual a importância de ir à igreja
Qual a importância de ir à igrejaQual a importância de ir à igreja
Qual a importância de ir à igreja
Marconi Pacheco
 
Design Centrado no Usuário para Interface Digital
Design Centrado no Usuário para Interface DigitalDesign Centrado no Usuário para Interface Digital
Design Centrado no Usuário para Interface Digital
Marconi Pacheco
 
Evolução do design digital
Evolução do design digitalEvolução do design digital
Evolução do design digital
Marconi Pacheco
 
Profissão Desenhista / Ilustrador
Profissão Desenhista / IlustradorProfissão Desenhista / Ilustrador
Profissão Desenhista / Ilustrador
Marconi Pacheco
 
Apresentando SEO Otimização de Sites
Apresentando SEO Otimização de SitesApresentando SEO Otimização de Sites
Apresentando SEO Otimização de Sites
Marconi Pacheco
 
Usabilidade para Websites
Usabilidade para WebsitesUsabilidade para Websites
Usabilidade para Websites
Marconi Pacheco
 
Arquitetura de informação para Interface Digital
Arquitetura de informação para Interface DigitalArquitetura de informação para Interface Digital
Arquitetura de informação para Interface Digital
Marconi Pacheco
 
Site responsivo vantagens e desvantagens
Site responsivo vantagens e desvantagensSite responsivo vantagens e desvantagens
Site responsivo vantagens e desvantagens
Marconi Pacheco
 
Restaurando a Qualidade de Vida - Filipenses 4:4-8
Restaurando a Qualidade de Vida - Filipenses 4:4-8Restaurando a Qualidade de Vida - Filipenses 4:4-8
Restaurando a Qualidade de Vida - Filipenses 4:4-8
Marconi Pacheco
 
O Poder da Língua - Tiago 3.1-12
O Poder da Língua - Tiago 3.1-12O Poder da Língua - Tiago 3.1-12
O Poder da Língua - Tiago 3.1-12
Marconi Pacheco
 
Profissão Front-end
Profissão Front-endProfissão Front-end
Profissão Front-end
Marconi Pacheco
 
Web Designer - Principais Conhecimentos Principais Funções
Web Designer - Principais Conhecimentos Principais FunçõesWeb Designer - Principais Conhecimentos Principais Funções
Web Designer - Principais Conhecimentos Principais Funções
Marconi Pacheco
 

Mais de Marconi Pacheco (20)

Teste de Usabilidade Como planejar e executar
Teste de Usabilidade Como planejar e executarTeste de Usabilidade Como planejar e executar
Teste de Usabilidade Como planejar e executar
 
Apresentação TCC - Marconi Pacheco 2010
Apresentação TCC - Marconi Pacheco 2010Apresentação TCC - Marconi Pacheco 2010
Apresentação TCC - Marconi Pacheco 2010
 
Maturidade UX nas Empresas
Maturidade UX nas EmpresasMaturidade UX nas Empresas
Maturidade UX nas Empresas
 
style guide ui
style guide uistyle guide ui
style guide ui
 
Bootstrap praticas mais usadas
Bootstrap praticas mais usadas Bootstrap praticas mais usadas
Bootstrap praticas mais usadas
 
UX e UI Design - O que é? Quais as diferenças?
UX e UI Design - O que é? Quais as diferenças?UX e UI Design - O que é? Quais as diferenças?
UX e UI Design - O que é? Quais as diferenças?
 
A obra do espirito santo na igreja
A obra do espirito santo na igrejaA obra do espirito santo na igreja
A obra do espirito santo na igreja
 
Simplificando o design digital
Simplificando o design digitalSimplificando o design digital
Simplificando o design digital
 
Qual a importância de ir à igreja
Qual a importância de ir à igrejaQual a importância de ir à igreja
Qual a importância de ir à igreja
 
Design Centrado no Usuário para Interface Digital
Design Centrado no Usuário para Interface DigitalDesign Centrado no Usuário para Interface Digital
Design Centrado no Usuário para Interface Digital
 
Evolução do design digital
Evolução do design digitalEvolução do design digital
Evolução do design digital
 
Profissão Desenhista / Ilustrador
Profissão Desenhista / IlustradorProfissão Desenhista / Ilustrador
Profissão Desenhista / Ilustrador
 
Apresentando SEO Otimização de Sites
Apresentando SEO Otimização de SitesApresentando SEO Otimização de Sites
Apresentando SEO Otimização de Sites
 
Usabilidade para Websites
Usabilidade para WebsitesUsabilidade para Websites
Usabilidade para Websites
 
Arquitetura de informação para Interface Digital
Arquitetura de informação para Interface DigitalArquitetura de informação para Interface Digital
Arquitetura de informação para Interface Digital
 
Site responsivo vantagens e desvantagens
Site responsivo vantagens e desvantagensSite responsivo vantagens e desvantagens
Site responsivo vantagens e desvantagens
 
Restaurando a Qualidade de Vida - Filipenses 4:4-8
Restaurando a Qualidade de Vida - Filipenses 4:4-8Restaurando a Qualidade de Vida - Filipenses 4:4-8
Restaurando a Qualidade de Vida - Filipenses 4:4-8
 
O Poder da Língua - Tiago 3.1-12
O Poder da Língua - Tiago 3.1-12O Poder da Língua - Tiago 3.1-12
O Poder da Língua - Tiago 3.1-12
 
Profissão Front-end
Profissão Front-endProfissão Front-end
Profissão Front-end
 
Web Designer - Principais Conhecimentos Principais Funções
Web Designer - Principais Conhecimentos Principais FunçõesWeb Designer - Principais Conhecimentos Principais Funções
Web Designer - Principais Conhecimentos Principais Funções
 

7 Dicas para Criação de layouts para sites em WordPress

  • 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)