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.
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.
Qual é o papel do «gua-ç wa no processo de
desenvolvimento de um site em Word Press?

4.
DESIGN 8: DESIGNER
ue são? O que fazem? Do que se
alimentam?

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.
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.
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.
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.
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.
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.
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.
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.
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.
: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.
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.
c Hino: a: variaram
jvngnrn hum]
'nas l
° mm 2
un

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.
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.
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.
ARQUIVOS DO TEMA
Arquivos necessários
o style. css
o index. php

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.
ENCAIXE TEMPLATES
HEADERPHP
CONTENT
SIDEBAR
FOOTER
INDEXPHP
SINGLEPHP
ARCHIVEPHP
404.PHP

23.
finca/ Jo á
DESENVOLVIMENTO DO
LAYOUT
o Organograma
o Wireframe
o Layout
o Front-end

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.
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.
PINI-CRIE¡
ruwmw 3

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.
LAYOUT- O QUE USAR ENTÃO?
Illustrator, FireWorks, Inkscape, InDesign.
GIMP também não vale! o

29.
PROCESSO
Documento
o RGB
o Pixels
o Largura - 1400px
o Altura - ?

30.
PROCESSO
Grid
o 1140px
o 12 colunas
o Gutter 30px
Paleta de cores
o Swatches

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.
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.
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.
PROCESSO
o Exportar em HTML para prever o layout
o Exportar imagens do layout em fatias

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

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.
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.
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.
OBRIGADA! PERGUNTAS?
r w _
r» @anyssaferreira