Design para WordPress- Anyssa Ferreira - WordCamp BH 2015

2.680 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
16 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
2.680
No SlideShare
0
A partir de incorporações
0
Número de incorporações
522
Ações
Compartilhamentos
0
Downloads
37
Comentários
2
Gostaram
16
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.

×