como desenvolver layouts.
WordCamp BH2015
13/06/15
Técnica e bacharela em Design
Gráfico. Professora de cursos livres de
design no SENAC. Sócia no estúdio Haste,
fundado em ...
01.
– Alexandre Wollner
• Design, do inglês, ato de projetar, planejar,fazer algo com uma
intencionalidade.
• Gráfico, do grego grafikós ou graphḗ...
• http://asinthecity.com/2011/11/10/the-difference-between-a-ux-designer-and-ui-developer/
• http://www.fastcodesign.com/3...
02.
São os conjuntos
de arquivos
(geralmente
PHP, CSS, e JS)
responsáveis
pela exibição e
aparência do site.
• O PHP é responsável pelas funcionalidades e
por pegar as informações do banco de dados e
transformá-las em HTML.
• O CSS...
index.php
header.php
content
.php
sidebar.php
footer.php
page.php
header.php
content-
page.php
sidebar.php
footer.php
É um desenho
simplificado do site,
como um esqueleto,
sem imagens ou cores,
usado para definir o
posicionamento, escala,
o...
03.
• O Photoshop não foi criado pra isso, é um editor de imagens.
• 95% dos casos do cata-ventodadesgraçado Mac OS X
ocorrem ...
• Mais agilidade para manipulação dos elementos gráficos
(independente de camadas);
• Hoje, estes softwares conseguem prat...
• RGB
• Pixels
• Largura – 1400px
• Altura variável
• Pranchetas – páginas
principais
• Backgrounds
• Conteúdo
• Conteúdo hover
• Grid – linhas guias
• Infos – anotações
• 1140px
• 12 colunas
• Gutter 30px
• Limpe o painel
• Crie as cores da sua paleta
• Swatches globais facilitam a
troca de cores
• Fontes padrão – poucas
opções, mas não pesam.
• @font-face – se usadas em
excesso pesam muito.
• www.google.com/fonts
• ...
Defina os estilos para os
elementos HTML
• Títulos H1 ao H6
• Parágrafos
• Links
• Listas
O WordPress corta
automaticamente as imagens
enviadas de acordo com as
configurações no painel ou no
tema. Pense em quais
...
• Pense nos break points
• Crie pranchetas com as
diferentes resoluções
• Repense o fluxo de
elementos
• Menus e navegação
• Menu
• Botões
• Paginação
• Datas
• Legendas de imagens
• Formulários
• Tabelas
• Ícones
• Comentários
• Widgets
Crie símbolos
para tudo que
for se repetir no
layout.
Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015
Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015
Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015
Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015
Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015
Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015
Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015
Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015
Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015
Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015
Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015
Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015
Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015
Próximos SlideShares
Carregando em…5
×

Design para WordPress- Anyssa Ferreira - WordCamp BH 2015

2.526 visualizações

Publicada em

Palestra do WordCamp BH 2015 sobre como os designers podem desenvolver melhores layouts para WordPress.

Publicada em: Design
2 comentários
17 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
2.526
No SlideShare
0
A partir de incorporações
0
Número de incorporações
521
Ações
Compartilhamentos
0
Downloads
35
Comentários
2
Gostaram
17
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Design para WordPress- Anyssa Ferreira - WordCamp BH 2015

  1. 1. como desenvolver layouts. WordCamp BH2015 13/06/15
  2. 2. Técnica e bacharela em Design Gráfico. Professora de cursos livres de design no SENAC. Sócia no estúdio Haste, fundado em 2009, onde atua com motion design, games e web.
  3. 3. 01.
  4. 4. – Alexandre Wollner
  5. 5. • Design, do inglês, ato de projetar, planejar,fazer algo com uma intencionalidade. • Gráfico, do grego grafikós ou graphḗ, desenho, marca, escrita, ou seja, qualquer registro visual que carregue um significado.
  6. 6. • http://asinthecity.com/2011/11/10/the-difference-between-a-ux-designer-and-ui-developer/ • http://www.fastcodesign.com/3032719/ui-ux-who-does-what-a-designers-guide-to-the-tech-industry • http://pt.slideshare.net/maxdesign/ixda-russweakley20150202v2
  7. 7. 02.
  8. 8. São os conjuntos de arquivos (geralmente PHP, CSS, e JS) responsáveis pela exibição e aparência do site.
  9. 9. • O PHP é responsável pelas funcionalidades e por pegar as informações do banco de dados e transformá-las em HTML. • O CSS é responsável por definir todas as propriedades visuais do HTML: como fontes, cores, posicionamento, efeitos, etc. • O JavaScript é responsável por modificar os elementos HTML e CSS para criar funcionalidades e efeitos.
  10. 10. index.php header.php content .php sidebar.php footer.php
  11. 11. page.php header.php content- page.php sidebar.php footer.php
  12. 12. É um desenho simplificado do site, como um esqueleto, sem imagens ou cores, usado para definir o posicionamento, escala, ordem e navegação do conteúdo. header.php content.php footer.php
  13. 13. 03.
  14. 14. • O Photoshop não foi criado pra isso, é um editor de imagens. • 95% dos casos do cata-ventodadesgraçado Mac OS X ocorrem durante o uso do PS. • É um software bitmap, portanto é muito pesado pouco flexível. • Difícil de manipular os elementos em camadas. • Difícil de simular interatividade e usabilidade • Péssimo para responsividade • Não possui múltiplas páginas • Renderização de texto ruim http://blog.teamtreehouse.com/psd-to-html-is-dead http://www.smashingmagazine.com/2013/04/22/repurposing-photoshop/
  15. 15. • Mais agilidade para manipulação dos elementos gráficos (independente de camadas); • Hoje, estes softwares conseguem praticamente os mesmos tipos de efeitos do Photoshop... • ... apesar destes efeitos não estarem “na moda” – Flat Design; • Criação de múltiplas páginas, de diferentes tamanhos; • Fácil modularização, expansão e redução do layout; • Arquivos bem mais leves.
  16. 16. • RGB • Pixels • Largura – 1400px • Altura variável • Pranchetas – páginas principais
  17. 17. • Backgrounds • Conteúdo • Conteúdo hover • Grid – linhas guias • Infos – anotações
  18. 18. • 1140px • 12 colunas • Gutter 30px
  19. 19. • Limpe o painel • Crie as cores da sua paleta • Swatches globais facilitam a troca de cores
  20. 20. • Fontes padrão – poucas opções, mas não pesam. • @font-face – se usadas em excesso pesam muito. • www.google.com/fonts • www.fontsquirrel.com • Fuja de fontes incompletas
  21. 21. Defina os estilos para os elementos HTML • Títulos H1 ao H6 • Parágrafos • Links • Listas
  22. 22. O WordPress corta automaticamente as imagens enviadas de acordo com as configurações no painel ou no tema. Pense em quais tamanhos seu layout realmente vai precisar – menos é mais!
  23. 23. • Pense nos break points • Crie pranchetas com as diferentes resoluções • Repense o fluxo de elementos • Menus e navegação
  24. 24. • Menu • Botões • Paginação • Datas • Legendas de imagens • Formulários • Tabelas • Ícones • Comentários • Widgets
  25. 25. Crie símbolos para tudo que for se repetir no layout.

×