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.
a
z

.  _l]fl, fj›; g _h '- "zmzbg, 

DESIGN PARA
WORDPRESS

l ÍI= ':. .-q w ¡Hlr ; zw 1 if: 

.  .4. ,  . .  » . __. 
:-:...
6'» m. 
ANYSSA FERREIRA

Técnica e bacharela em Design

Gráfico.  Professora de cursos livres de design
no SENAC.  Trabalh...
Qual é o papel do «gua-ç wa no processo de

desenvolvimento de um site em Word Press?
DESIGN 8: DESIGNER

ue são?  O que fazem?  Do que se
alimentam?
DESIGN GRÁFICO

e Design,  do inglês,  ato de projetar,  planejar, 
fazer com uma intencionalidade. 

a Gráfico,  do grego...
WEB X DESIGN

A web é predominantemente visual,  portanto, 
é trabalho do designer gráfico projetá-Ia. 

Í_ f. 
Ú wezz/ ÊA...
FAZER DESIGN PARA WEB, 
MUITAS VEZES E FAZER DESIGN
PRA WORDPRESS

WordPress é usado por 23,1% de todos os
sites existente...
E COMO O WP FUNCIONA? 

e Conteúdo e layout são independentes. 

e O conteúdo é colocado via o painel e salvo
no banco de ...
O
fçflâ n20/-

ATE/ MASDEWORDPRESS

:  l ¡'I , I 1':  Ir.  :ILI Pv' L' : :a

1:
! l
i
L
'. '
: 
a: 
Il

. _:_| 'I'I__. :I ...
O QUE O TEMA NÃO FAZ? 

O tema não define as "páginas" do site.  Um
tema não possui um arquivo HTML ou PHP

para cada pági...
gnütwéouáto
ANATOMIA DE UM TEMA

Os temas,  em geral,  são formados por 3 tipos
de arquivos: 

o PHP
o CSS
o JS
PHP

O PHP é o responsável pela exibição de
conteúdo e pelas funcionalidades do tema. 

o Os arquivos PHP do tema são cham...
PHP

e Após serem processados pelo sen/ idor,  os
arquivos PHP geram o HTML que é o
arquivo final que o usuário irá ver. 
...
:NF i 'oranvzgJoxçLçii-Aniji i ; j
nlilíla i 'lIEYla_¡gi9l; iE-i›; |i: ) i . j
°ítiIg___-Iusií: :I:  ¡-; 

 , flskiíi Çtçi...
CSS

O CSS é o responsável pela formatação do
HTM L.  Após os arquivos serem processados,  o
CSS entra em ação definindo t...
c Hino:  a:  variaram

jvngnrn hum]
'nas l
° mm 2

un
EXEMPLO DE REGRA

É definido através da criação uma folha de
estilos,  vinculada a página HTM L,  que contém
regras para o...
m : i
Kelkçm-i #Iêlüi

'I
I

E' ii

etslkçlw ssizmçiçisrvg
: ksxcíàeaçiaxçnmiãzztçxon ! IuliIêlrlIfÍioIa-L
u-rgiaiiwrmar: ...
JS

«- O JavaScript é responsável por modificar os
elementos HTML e CSS para criar
funcionalidades e efeitos. 

e Exemplos...
ARQUIVOS DO TEMA

Arquivos necessários

o style. css
o index. php
ARQUIVOS DO TEMA

Arquivos comuns

e» functions. php
o screenshot. png
o header. php

«s sidebar. php

e footer. php

o ar...
ENCAIXE TEMPLATES

HEADERPHP
CONTENT
SIDEBAR
FOOTER

 
   
   
   
   

INDEXPHP
SINGLEPHP
ARCHIVEPHP
404.PHP
finca/ Jo á

DESENVOLVIMENTO DO
LAYOUT

o Organograma
o Wireframe

o Layout

o Front-end
ORGANOGRAMA

Determina quais páginas o site vai ter,  e qual a
hierarquia e relação entre elas,  seguindo a
estrutura do W...
WIREFRAME

Desenhar os elementos básicos,  definindo o
posicionamento e hierarquia de cada item na
página.  Também pode se...
PINI-CRIE¡

ruwmw 3
LAYOUT- NÃO USE PS PLMDDS! 

o Não foi criado pra isso
.  o 95% dos casos do cata-vento da

desgraça do Mac OS X ocorrem
d...
LAYOUT- O QUE USAR ENTÃO? 

Illustrator,  FireWorks,  Inkscape,  InDesign. 

GIMP também não vale!  o
PROCESSO

Documento

o RGB

o Pixels

o Largura - 1400px
o Altura - ?
PROCESSO

Grid

o 1140px
o 12 colunas
o Gutter 30px

Paleta de cores

o Swatches
PROCESSO

Fontes

o Escolha das famílias

o Fontes padrão

o @fonte-face

o Fontes livres para a web

o www. fontsquirrel....
PROCESSO

Definição dos estilos de texto,  incluindo os
elementos HTML

e Títulos H1 à Hó

e» Corpo de texto /  parágrafos...
PROCESSO

Outros elementos a serem definidos no
layout: 

«r Menu

«i Botões

e Paginação

o Imagenselegendas
a Formulário...
PROCESSO

o Exportar em HTML para prever o layout
o Exportar imagens do layout em fatias
CSS

'[3233',  Ia¡ III:  u:  iam:  :c:  :I IÇÊI ' '$5.31'
CSS

Vantagens: 

1. Cuidar para que os estilos sejam fiéis ao
layout,  pois muitas coisas podem passar
despercebidas: 

«...
CSS

o Fazer ajustes direto no CSS,  sem precisar de
intermediários. 

o Aplicar elementos que não puderam ser
previstos n...
PROUDLY POWERED BV
WORDPRESS + | MPRESS. JS = 
WORDIMPRESS

Esta apresentação foi feita com Word Press e
Impress. js,  atr...
OBRIGADA!  PERGUNTAS? 

r w _
r»  @anyssaferreira
Upcoming SlideShare
Loading in …5
×

Design Para WordPress: Como desenvolver layout específicos para WordPress

2,375 views

Published on

Palestra apresentada por Anyssa Ferreira no WordCamp 2014.

Nesta palestra é apresentado as atribuições do designer em projetos de sites, as particularidades do projeto de design para o WordPress e proposições de como o designer pode estruturar uma metodologia de trabalho, do planejamento ao CSS.

Versão em WordPress + Impress.js (WordImPress Plugin)
http://www.hastedesign.com.br/apresentacoes/presentations/wordcamp-anyssa

Published in: Design

Design Para WordPress: Como desenvolver layout específicos para WordPress

  1. 1. a z . _l]fl, fj›; g _h '- "zmzbg, DESIGN PARA WORDPRESS l ÍI= ':. .-q w ¡Hlr ; zw 1 if: . .4. , . . » . __. :-: ._zI= -z . Í I . u : :l : 'W' I I ' -u.
  2. 2. 6'» m. ANYSSA FERREIRA Técnica e bacharela em Design Gráfico. Professora de cursos livres de design no SENAC. Trabalho com Web desde 2007. Sócia na Haste Design, fundada em 2009.
  3. 3. Qual é o papel do «gua-ç wa no processo de desenvolvimento de um site em Word Press?
  4. 4. DESIGN 8: DESIGNER ue são? O que fazem? Do que se alimentam?
  5. 5. DESIGN GRÁFICO e Design, do inglês, ato de projetar, planejar, fazer com uma intencionalidade. a Gráfico, do grego ypa<pII<óç ou ypacpr] (grafikós ou graphê), desenho, marca, escrita, ou seja, qualquer . : II flw; z¡ 'ug' I; l| ¡| : fi/ j [AE-Il : I i _
  6. 6. WEB X DESIGN A web é predominantemente visual, portanto, é trabalho do designer gráfico projetá-Ia. Í_ f. Ú wezz/ ÊA ' é umMmenü Ámignr. Ãjão exixsü mf / Édígnem 343213 o z/ íuaynem 1m: :uefa edü/ vuñãacbnalüm gua 172401144 Úuâ», Jemúíúku, 30%, maümálü/ o, ótica, peAcepçÃu, conyzomfanwnü , cfc. ;cuzão eá. náo Ázaián. -AIEXANDREWOIJNER
  7. 7. FAZER DESIGN PARA WEB, MUITAS VEZES E FAZER DESIGN PRA WORDPRESS WordPress é usado por 23,1% de todos os sites existentes, e por 61% dos que usam algum CMS.
  8. 8. E COMO O WP FUNCIONA? e Conteúdo e layout são independentes. e O conteúdo é colocado via o painel e salvo no banco de dados. «- Tema é responsável pelo layout e exibição. a O tema é como uma embalagem do conteúdo.
  9. 9. O fçflâ n20/- ATE/ MASDEWORDPRESS : l ¡'I , I 1': Ir. :ILI Pv' L' : :a 1: ! l i L '. ' : a: Il . _:_| 'I'I__. :I 'I : l 11:41'¡ I . w I"
  10. 10. O QUE O TEMA NÃO FAZ? O tema não define as "páginas" do site. Um tema não possui um arquivo HTML ou PHP para cada página do site. Ele possui arquivos que vão servir para tipos de páginas, e não para uma página única.
  11. 11. gnütwéouáto ANATOMIA DE UM TEMA Os temas, em geral, são formados por 3 tipos de arquivos: o PHP o CSS o JS
  12. 12. PHP O PHP é o responsável pela exibição de conteúdo e pelas funcionalidades do tema. o Os arquivos PHP do tema são chamados de template files (modelos), pois são reaproveitáveis, servem para exibir vários conteúdos.
  13. 13. PHP e Após serem processados pelo sen/ idor, os arquivos PHP geram o HTML que é o arquivo final que o usuário irá ver. G É como se o PHP fosse um arquivo aberto (Al, PSD) e o HTML fosse um arquivo fechado apenas para impressão (PDF, PS).
  14. 14. :NF i 'oranvzgJoxçLçii-Aniji i ; j nlilíla i 'lIEYla_¡gi9l; iE-i›; |i: ) i . j °ítiIg___-Iusií: :I: ¡-; , flskiíi Çtçioiítêuiê. 'cisma : Rita _; . ; ÍÍIEJÂPIIÍKQIÍÊC y;
  15. 15. CSS O CSS é o responsável pela formatação do HTM L. Após os arquivos serem processados, o CSS entra em ação definindo todas as propriedades visuais do conteúdo: fontes, cores, posicionamento, efeitos visuais, etc. É semelhante aos estilos do InDesign e do Photoshop.
  16. 16. c Hino: a: variaram jvngnrn hum] 'nas l ° mm 2 un
  17. 17. EXEMPLO DE REGRA É definido através da criação uma folha de estilos, vinculada a página HTM L, que contém regras para os elementos HTM L. Ex. : todo titulo da página terá a cor vermelha, ou todo link será azul, sublinhado e com tamanho 14pt.
  18. 18. m : i Kelkçm-i #Iêlüi 'I I E' ii etslkçlw ssizmçiçisrvg : ksxcíàeaçiaxçnmiãzztçxon ! IuliIêlrlIfÍioIa-L u-rgiaiiwrmar: ;uspzg L . I
  19. 19. JS «- O JavaScript é responsável por modificar os elementos HTML e CSS para criar funcionalidades e efeitos. e Exemplos de aplicação de JS: sliders, lightbox, dropdown, formulários, etc. «r É definido através de um arquivo JS vinculado ao HTM L.
  20. 20. ARQUIVOS DO TEMA Arquivos necessários o style. css o index. php
  21. 21. ARQUIVOS DO TEMA Arquivos comuns e» functions. php o screenshot. png o header. php «s sidebar. php e footer. php o archive. php e single. php
  22. 22. ENCAIXE TEMPLATES HEADERPHP CONTENT SIDEBAR FOOTER INDEXPHP SINGLEPHP ARCHIVEPHP 404.PHP
  23. 23. finca/ Jo á DESENVOLVIMENTO DO LAYOUT o Organograma o Wireframe o Layout o Front-end
  24. 24. ORGANOGRAMA Determina quais páginas o site vai ter, e qual a hierarquia e relação entre elas, seguindo a estrutura do Word Press. , aí < i l ; v -r n__. - d. m - . glqlll , w “ L . “E V' _ V x _,
  25. 25. WIREFRAME Desenhar os elementos básicos, definindo o posicionamento e hierarquia de cada item na página. Também pode ser interativo. É importante considerar os elementos do Word Press, como o header, footer, sidebars, meta informações, comentários, widgets e quaisquer outros componentes que serão exibidos em múltiplas páginas do site.
  26. 26. PINI-CRIE¡ ruwmw 3
  27. 27. LAYOUT- NÃO USE PS PLMDDS! o Não foi criado pra isso . o 95% dos casos do cata-vento da desgraça do Mac OS X ocorrem durante o uso do PS. o Falta de interatividade e usabilidade o Responsividade o Renderização de texto o É um software bitmap
  28. 28. LAYOUT- O QUE USAR ENTÃO? Illustrator, FireWorks, Inkscape, InDesign. GIMP também não vale! o
  29. 29. PROCESSO Documento o RGB o Pixels o Largura - 1400px o Altura - ?
  30. 30. PROCESSO Grid o 1140px o 12 colunas o Gutter 30px Paleta de cores o Swatches
  31. 31. PROCESSO Fontes o Escolha das famílias o Fontes padrão o @fonte-face o Fontes livres para a web o www. fontsquirrel. com o www. googIe. com/ fonts o Fontes de icones: Dashicons
  32. 32. PROCESSO Definição dos estilos de texto, incluindo os elementos HTML e Títulos H1 à Hó e» Corpo de texto / parágrafos e Links a Listas ordenadas e não ordenadas a Outros
  33. 33. PROCESSO Outros elementos a serem definidos no layout: «r Menu «i Botões e Paginação o Imagenselegendas a Formulários «a Tabelas o Ícones
  34. 34. PROCESSO o Exportar em HTML para prever o layout o Exportar imagens do layout em fatias
  35. 35. CSS '[3233', Ia¡ III: u: iam: :c: :I IÇÊI ' '$5.31'
  36. 36. CSS Vantagens: 1. Cuidar para que os estilos sejam fiéis ao layout, pois muitas coisas podem passar despercebidas: «s Cores (#000000) e» Tamanhos de fonte (font-size) a Margens (margin) o Entrelinha do texto (line-height)
  37. 37. CSS o Fazer ajustes direto no CSS, sem precisar de intermediários. o Aplicar elementos que não puderam ser previstos no layout, como animações.
  38. 38. PROUDLY POWERED BV WORDPRESS + | MPRESS. JS = WORDIMPRESS Esta apresentação foi feita com Word Press e Impress. js, através do plugin Word| mPress, em breve disponivel em Iíiigiâi jzitiru lwrrirri H; rawii><= <i; ::r* NVIWIL'III"IVAIF^%S.
  39. 39. OBRIGADA! PERGUNTAS? r w _ r» @anyssaferreira

×