Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Design para WordPress- Anyssa Ferreira - WordCamp BH 2015

2,981 views

Published on

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

Published in: Design

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.

×