SlideShare uma empresa Scribd logo
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 2009, onde atua com motion
design, games e web.
01.
– Alexandre Wollner
• 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.
Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015
Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015
Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015
• 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
02.
Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015
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 é 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.
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,
ordem e navegação do
conteúdo.
header.php
content.php
footer.php
Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015
03.
Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015
Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015
Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015
• 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/
• 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.
Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015
Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015
• 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
• www.fontsquirrel.com
• Fuja de fontes incompletas
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
tamanhos seu layout realmente
vai precisar – menos é mais!
• Pense nos break points
• Crie pranchetas com as
diferentes resoluções
• Repense o fluxo de
elementos
• Menus e navegação
Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015
• 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

Mais conteúdo relacionado

Mais procurados

WordCamp Salvador 2014 - O essencial para o bom desempenho do seu projeto em ...
WordCamp Salvador 2014 - O essencial para o bom desempenho do seu projeto em ...WordCamp Salvador 2014 - O essencial para o bom desempenho do seu projeto em ...
WordCamp Salvador 2014 - O essencial para o bom desempenho do seu projeto em ...
Sergio Costa
 
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
RC Comunicação
 
O Papel do desenvolvedor Front End
O Papel do desenvolvedor Front EndO Papel do desenvolvedor Front End
O Papel do desenvolvedor Front End
Rael Max
 
Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)
Sérgio Vilar
 
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render PathDOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
Diego Eis
 
Gerenciando Projetos Com Ruby On Rails
Gerenciando Projetos Com Ruby On RailsGerenciando Projetos Com Ruby On Rails
Gerenciando Projetos Com Ruby On Rails
Rodrigo Urubatan
 
Como eu aprendo WordPress?
Como eu aprendo WordPress?Como eu aprendo WordPress?
Como eu aprendo WordPress?
Breno Alves
 
Jetpack, um Canivete Suíço no seu WordPress (WordCamp São Paulo 2014)​
Jetpack, um Canivete Suíço no seu WordPress (WordCamp São Paulo 2014)​Jetpack, um Canivete Suíço no seu WordPress (WordCamp São Paulo 2014)​
Jetpack, um Canivete Suíço no seu WordPress (WordCamp São Paulo 2014)​
Valério Souza
 
Sweet Child O' Themes
Sweet Child O' ThemesSweet Child O' Themes
Sweet Child O' Themes
Breno Alves
 
03 windows
03   windows03   windows
03 windows
Roney Sousa
 
WordCAmp RJ 2015 - A importância do Design/UX Para os desenvolvedores de Word...
WordCAmp RJ 2015 - A importância do Design/UX Para os desenvolvedores de Word...WordCAmp RJ 2015 - A importância do Design/UX Para os desenvolvedores de Word...
WordCAmp RJ 2015 - A importância do Design/UX Para os desenvolvedores de Word...
Leandro Ciccarelli
 
Construindo seu framework CSS
Construindo seu framework CSSConstruindo seu framework CSS
Construindo seu framework CSS
Diego Eis
 
Criando temas em PSD pensando no Front-end e Back-end
Criando temas em PSD pensando no Front-end e Back-endCriando temas em PSD pensando no Front-end e Back-end
Criando temas em PSD pensando no Front-end e Back-end
@cristianoweb
 
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
@cristianoweb
 
Aula 4. bibliotecas js
Aula 4. bibliotecas jsAula 4. bibliotecas js
Aula 4. bibliotecas js
andreluizlc
 
Reuso De Código Com Rails
Reuso De Código Com RailsReuso De Código Com Rails
Reuso De Código Com Rails
Rodrigo Urubatan
 
TDC SP 2015 - Criando Web Apps Real Time com AngularJs e Firebase
TDC SP 2015 - Criando Web Apps Real Time com AngularJs e FirebaseTDC SP 2015 - Criando Web Apps Real Time com AngularJs e Firebase
TDC SP 2015 - Criando Web Apps Real Time com AngularJs e Firebase
Andre Baltieri
 
Wordpress :: Configurar seu blog
Wordpress :: Configurar seu blogWordpress :: Configurar seu blog
Wordpress :: Configurar seu blog
Wesley R. Bezerra
 
Introdução a Bootstrap 3
Introdução a Bootstrap 3Introdução a Bootstrap 3
Introdução a Bootstrap 3
Iago Effting
 
Criação Web com Bootstrap e Material Design
Criação Web com Bootstrap e Material DesignCriação Web com Bootstrap e Material Design
Criação Web com Bootstrap e Material Design
Daniel Brandão
 

Mais procurados (20)

WordCamp Salvador 2014 - O essencial para o bom desempenho do seu projeto em ...
WordCamp Salvador 2014 - O essencial para o bom desempenho do seu projeto em ...WordCamp Salvador 2014 - O essencial para o bom desempenho do seu projeto em ...
WordCamp Salvador 2014 - O essencial para o bom desempenho do seu projeto em ...
 
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
 
O Papel do desenvolvedor Front End
O Papel do desenvolvedor Front EndO Papel do desenvolvedor Front End
O Papel do desenvolvedor Front End
 
Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)
 
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render PathDOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
 
Gerenciando Projetos Com Ruby On Rails
Gerenciando Projetos Com Ruby On RailsGerenciando Projetos Com Ruby On Rails
Gerenciando Projetos Com Ruby On Rails
 
Como eu aprendo WordPress?
Como eu aprendo WordPress?Como eu aprendo WordPress?
Como eu aprendo WordPress?
 
Jetpack, um Canivete Suíço no seu WordPress (WordCamp São Paulo 2014)​
Jetpack, um Canivete Suíço no seu WordPress (WordCamp São Paulo 2014)​Jetpack, um Canivete Suíço no seu WordPress (WordCamp São Paulo 2014)​
Jetpack, um Canivete Suíço no seu WordPress (WordCamp São Paulo 2014)​
 
Sweet Child O' Themes
Sweet Child O' ThemesSweet Child O' Themes
Sweet Child O' Themes
 
03 windows
03   windows03   windows
03 windows
 
WordCAmp RJ 2015 - A importância do Design/UX Para os desenvolvedores de Word...
WordCAmp RJ 2015 - A importância do Design/UX Para os desenvolvedores de Word...WordCAmp RJ 2015 - A importância do Design/UX Para os desenvolvedores de Word...
WordCAmp RJ 2015 - A importância do Design/UX Para os desenvolvedores de Word...
 
Construindo seu framework CSS
Construindo seu framework CSSConstruindo seu framework CSS
Construindo seu framework CSS
 
Criando temas em PSD pensando no Front-end e Back-end
Criando temas em PSD pensando no Front-end e Back-endCriando temas em PSD pensando no Front-end e Back-end
Criando temas em PSD pensando no Front-end e Back-end
 
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
 
Aula 4. bibliotecas js
Aula 4. bibliotecas jsAula 4. bibliotecas js
Aula 4. bibliotecas js
 
Reuso De Código Com Rails
Reuso De Código Com RailsReuso De Código Com Rails
Reuso De Código Com Rails
 
TDC SP 2015 - Criando Web Apps Real Time com AngularJs e Firebase
TDC SP 2015 - Criando Web Apps Real Time com AngularJs e FirebaseTDC SP 2015 - Criando Web Apps Real Time com AngularJs e Firebase
TDC SP 2015 - Criando Web Apps Real Time com AngularJs e Firebase
 
Wordpress :: Configurar seu blog
Wordpress :: Configurar seu blogWordpress :: Configurar seu blog
Wordpress :: Configurar seu blog
 
Introdução a Bootstrap 3
Introdução a Bootstrap 3Introdução a Bootstrap 3
Introdução a Bootstrap 3
 
Criação Web com Bootstrap e Material Design
Criação Web com Bootstrap e Material DesignCriação Web com Bootstrap e Material Design
Criação Web com Bootstrap e Material Design
 

Destaque

Comunidade. Abuse e use dela com moderação e inteligência.
Comunidade. Abuse e use dela com moderação e inteligência.Comunidade. Abuse e use dela com moderação e inteligência.
Comunidade. Abuse e use dela com moderação e inteligência.
Beto Muniz
 
Teste A/B
Teste A/BTeste A/B
Teste A/B
Leonardo Velozo
 
Fuja do ciclo vicioso do conteúdo sem valor
Fuja do ciclo vicioso do conteúdo sem valorFuja do ciclo vicioso do conteúdo sem valor
Fuja do ciclo vicioso do conteúdo sem valor
Nara Grilo
 
Wordpress search-elasticsearch
Wordpress search-elasticsearchWordpress search-elasticsearch
Wordpress search-elasticsearch
Taylor Lovett
 
Como enviar newsletters no WordPress
Como enviar newsletters no WordPressComo enviar newsletters no WordPress
Como enviar newsletters no WordPress
Rafael Funchal
 
Architecting an Highly Available and Scalable WordPress Site in AWS
Architecting an Highly Available and Scalable WordPress Site in AWS Architecting an Highly Available and Scalable WordPress Site in AWS
Architecting an Highly Available and Scalable WordPress Site in AWS
Harish Ganesan
 
WP WEEKEND 2015 - O word press é seguro. Inseguro é você.
WP WEEKEND 2015 - O word press é seguro. Inseguro é você. WP WEEKEND 2015 - O word press é seguro. Inseguro é você.
WP WEEKEND 2015 - O word press é seguro. Inseguro é você.
Rodrigo Toshiaki Horie
 
Projetando para WordPress
Projetando para WordPressProjetando para WordPress
Projetando para WordPress
Haste Design
 
Conhecendo o Wordpress
Conhecendo o WordpressConhecendo o Wordpress
Conhecendo o Wordpress
Jose Augusto Carvalho
 
Como manter o WordPress seguro
Como manter o WordPress seguroComo manter o WordPress seguro
Como manter o WordPress seguro
Rudá Almeida
 
Apostila illustrator-cs5
Apostila illustrator-cs5Apostila illustrator-cs5
Apostila illustrator-cs5
aulaemvideo
 
Adobe illustrator: Galerias de ferramentas
Adobe illustrator: Galerias de ferramentasAdobe illustrator: Galerias de ferramentas
Adobe illustrator: Galerias de ferramentas
Sara Rangel
 
Tutoriais Illustrator - 02
Tutoriais Illustrator - 02Tutoriais Illustrator - 02
Tutoriais Illustrator - 02
Vanessa Mezzadri Brudzinski
 
Image manipulation in WordPress 3.5
Image manipulation in WordPress 3.5Image manipulation in WordPress 3.5
Image manipulation in WordPress 3.5
Marko Heijnen
 
Estilizando temas de WordPress
Estilizando temas de WordPressEstilizando temas de WordPress
Estilizando temas de WordPress
Anyssa Ferreira
 
illustrator
illustratorillustrator
illustrator
KellySales27
 
Marcos Bornelli - Planejamento para o uso de TICs na educação
Marcos Bornelli - Planejamento para o uso de TICs na educaçãoMarcos Bornelli - Planejamento para o uso de TICs na educação
Marcos Bornelli - Planejamento para o uso de TICs na educação
Marcos Bornelli
 
Palestra - WordCamp Belo Horizonte 2015 - WordCamp Belo Horizonte 2015 - Hack...
Palestra - WordCamp Belo Horizonte 2015 - WordCamp Belo Horizonte 2015 - Hack...Palestra - WordCamp Belo Horizonte 2015 - WordCamp Belo Horizonte 2015 - Hack...
Palestra - WordCamp Belo Horizonte 2015 - WordCamp Belo Horizonte 2015 - Hack...
As Zone
 
Curso online wordpress aula 1
Curso online wordpress aula 1Curso online wordpress aula 1
Curso online wordpress aula 1
Vasco Marques
 
Introduction to Illustrator's workshop - Covilha October 2012
Introduction to Illustrator's workshop - Covilha October 2012Introduction to Illustrator's workshop - Covilha October 2012
Introduction to Illustrator's workshop - Covilha October 2012
Leonardo Pereira
 

Destaque (20)

Comunidade. Abuse e use dela com moderação e inteligência.
Comunidade. Abuse e use dela com moderação e inteligência.Comunidade. Abuse e use dela com moderação e inteligência.
Comunidade. Abuse e use dela com moderação e inteligência.
 
Teste A/B
Teste A/BTeste A/B
Teste A/B
 
Fuja do ciclo vicioso do conteúdo sem valor
Fuja do ciclo vicioso do conteúdo sem valorFuja do ciclo vicioso do conteúdo sem valor
Fuja do ciclo vicioso do conteúdo sem valor
 
Wordpress search-elasticsearch
Wordpress search-elasticsearchWordpress search-elasticsearch
Wordpress search-elasticsearch
 
Como enviar newsletters no WordPress
Como enviar newsletters no WordPressComo enviar newsletters no WordPress
Como enviar newsletters no WordPress
 
Architecting an Highly Available and Scalable WordPress Site in AWS
Architecting an Highly Available and Scalable WordPress Site in AWS Architecting an Highly Available and Scalable WordPress Site in AWS
Architecting an Highly Available and Scalable WordPress Site in AWS
 
WP WEEKEND 2015 - O word press é seguro. Inseguro é você.
WP WEEKEND 2015 - O word press é seguro. Inseguro é você. WP WEEKEND 2015 - O word press é seguro. Inseguro é você.
WP WEEKEND 2015 - O word press é seguro. Inseguro é você.
 
Projetando para WordPress
Projetando para WordPressProjetando para WordPress
Projetando para WordPress
 
Conhecendo o Wordpress
Conhecendo o WordpressConhecendo o Wordpress
Conhecendo o Wordpress
 
Como manter o WordPress seguro
Como manter o WordPress seguroComo manter o WordPress seguro
Como manter o WordPress seguro
 
Apostila illustrator-cs5
Apostila illustrator-cs5Apostila illustrator-cs5
Apostila illustrator-cs5
 
Adobe illustrator: Galerias de ferramentas
Adobe illustrator: Galerias de ferramentasAdobe illustrator: Galerias de ferramentas
Adobe illustrator: Galerias de ferramentas
 
Tutoriais Illustrator - 02
Tutoriais Illustrator - 02Tutoriais Illustrator - 02
Tutoriais Illustrator - 02
 
Image manipulation in WordPress 3.5
Image manipulation in WordPress 3.5Image manipulation in WordPress 3.5
Image manipulation in WordPress 3.5
 
Estilizando temas de WordPress
Estilizando temas de WordPressEstilizando temas de WordPress
Estilizando temas de WordPress
 
illustrator
illustratorillustrator
illustrator
 
Marcos Bornelli - Planejamento para o uso de TICs na educação
Marcos Bornelli - Planejamento para o uso de TICs na educaçãoMarcos Bornelli - Planejamento para o uso de TICs na educação
Marcos Bornelli - Planejamento para o uso de TICs na educação
 
Palestra - WordCamp Belo Horizonte 2015 - WordCamp Belo Horizonte 2015 - Hack...
Palestra - WordCamp Belo Horizonte 2015 - WordCamp Belo Horizonte 2015 - Hack...Palestra - WordCamp Belo Horizonte 2015 - WordCamp Belo Horizonte 2015 - Hack...
Palestra - WordCamp Belo Horizonte 2015 - WordCamp Belo Horizonte 2015 - Hack...
 
Curso online wordpress aula 1
Curso online wordpress aula 1Curso online wordpress aula 1
Curso online wordpress aula 1
 
Introduction to Illustrator's workshop - Covilha October 2012
Introduction to Illustrator's workshop - Covilha October 2012Introduction to Illustrator's workshop - Covilha October 2012
Introduction to Illustrator's workshop - Covilha October 2012
 

Semelhante a Design para WordPress- Anyssa Ferreira - WordCamp BH 2015

Técnicas de Análise e Design de Interfaces.pptx
Técnicas de Análise e Design de Interfaces.pptxTécnicas de Análise e Design de Interfaces.pptx
Técnicas de Análise e Design de Interfaces.pptx
franmafesoni
 
CV Alexandre R. de Castro
CV Alexandre R. de CastroCV Alexandre R. de Castro
CV Alexandre R. de Castro
Alexandre R. de Castro
 
Producao para web
Producao para webProducao para web
Producao para web
Alex Sanches
 
Aula 01- web designer
Aula 01- web designerAula 01- web designer
Aula 01- web designer
Roney Sousa
 
A Web para todos - Acessibilidade na web
A Web para todos  - Acessibilidade na webA Web para todos  - Acessibilidade na web
A Web para todos - Acessibilidade na web
Rogério Chiavegatti
 
Laboratório Web 2013-2014 - Apresentação Unidade Curricular
Laboratório Web 2013-2014 - Apresentação Unidade CurricularLaboratório Web 2013-2014 - Apresentação Unidade Curricular
Laboratório Web 2013-2014 - Apresentação Unidade Curricular
Ricardo Pereira Rodrigues
 
7 Dicas para Criação de layouts para sites em WordPress
7 Dicas para Criação de layouts para sites em WordPress7 Dicas para Criação de layouts para sites em WordPress
7 Dicas para Criação de layouts para sites em WordPress
Marconi Pacheco
 
Web mobile dicas
Web mobile dicasWeb mobile dicas
Web mobile dicas
Ana Laura Gomes
 
Aula 01 drean
Aula 01 drean Aula 01 drean
Aula 01 drean
Washington Oliveira
 
Introdução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento WebIntrodução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento Web
Anderson Luís Furlan
 
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Cristofer Sousa
 
Arquitetura de informação
Arquitetura de informaçãoArquitetura de informação
Arquitetura de informação
renatamruiz
 
Programação web e o front-end
Programação web e o front-endProgramação web e o front-end
Programação web e o front-end
Anderson Luís Furlan
 
Aula 1
Aula 1Aula 1
Tcc
TccTcc
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e ComposiçãoLaboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
Ricardo Pereira Rodrigues
 
Construindo aplicações Desktop com HTML, CSS e JS - Rio.JS Conference 2013
Construindo aplicações Desktop com HTML, CSS e JS - Rio.JS Conference 2013Construindo aplicações Desktop com HTML, CSS e JS - Rio.JS Conference 2013
Construindo aplicações Desktop com HTML, CSS e JS - Rio.JS Conference 2013
javamanrj
 
Lightning Talk: Webdev who?
Lightning Talk: Webdev who?Lightning Talk: Webdev who?
Lightning Talk: Webdev who?
Leandro Nunes
 
Mobile User Experience: Compilando pessoas e codificando cores
Mobile User Experience: Compilando pessoas e codificando coresMobile User Experience: Compilando pessoas e codificando cores
Mobile User Experience: Compilando pessoas e codificando cores
Pedro de Albuquerque Borges
 
Performance na web, além do framework
Performance na web, além do frameworkPerformance na web, além do framework
Performance na web, além do framework
Alexandre Cardoso
 

Semelhante a Design para WordPress- Anyssa Ferreira - WordCamp BH 2015 (20)

Técnicas de Análise e Design de Interfaces.pptx
Técnicas de Análise e Design de Interfaces.pptxTécnicas de Análise e Design de Interfaces.pptx
Técnicas de Análise e Design de Interfaces.pptx
 
CV Alexandre R. de Castro
CV Alexandre R. de CastroCV Alexandre R. de Castro
CV Alexandre R. de Castro
 
Producao para web
Producao para webProducao para web
Producao para web
 
Aula 01- web designer
Aula 01- web designerAula 01- web designer
Aula 01- web designer
 
A Web para todos - Acessibilidade na web
A Web para todos  - Acessibilidade na webA Web para todos  - Acessibilidade na web
A Web para todos - Acessibilidade na web
 
Laboratório Web 2013-2014 - Apresentação Unidade Curricular
Laboratório Web 2013-2014 - Apresentação Unidade CurricularLaboratório Web 2013-2014 - Apresentação Unidade Curricular
Laboratório Web 2013-2014 - Apresentação Unidade Curricular
 
7 Dicas para Criação de layouts para sites em WordPress
7 Dicas para Criação de layouts para sites em WordPress7 Dicas para Criação de layouts para sites em WordPress
7 Dicas para Criação de layouts para sites em WordPress
 
Web mobile dicas
Web mobile dicasWeb mobile dicas
Web mobile dicas
 
Aula 01 drean
Aula 01 drean Aula 01 drean
Aula 01 drean
 
Introdução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento WebIntrodução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento Web
 
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
 
Arquitetura de informação
Arquitetura de informaçãoArquitetura de informação
Arquitetura de informação
 
Programação web e o front-end
Programação web e o front-endProgramação web e o front-end
Programação web e o front-end
 
Aula 1
Aula 1Aula 1
Aula 1
 
Tcc
TccTcc
Tcc
 
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e ComposiçãoLaboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
 
Construindo aplicações Desktop com HTML, CSS e JS - Rio.JS Conference 2013
Construindo aplicações Desktop com HTML, CSS e JS - Rio.JS Conference 2013Construindo aplicações Desktop com HTML, CSS e JS - Rio.JS Conference 2013
Construindo aplicações Desktop com HTML, CSS e JS - Rio.JS Conference 2013
 
Lightning Talk: Webdev who?
Lightning Talk: Webdev who?Lightning Talk: Webdev who?
Lightning Talk: Webdev who?
 
Mobile User Experience: Compilando pessoas e codificando cores
Mobile User Experience: Compilando pessoas e codificando coresMobile User Experience: Compilando pessoas e codificando cores
Mobile User Experience: Compilando pessoas e codificando cores
 
Performance na web, além do framework
Performance na web, além do frameworkPerformance na web, além do framework
Performance na web, além do framework
 

Mais de Anyssa Ferreira

Como começar com o Gutenberg, o novo editor do WordPress
Como começar com o Gutenberg, o novo editor do WordPressComo começar com o Gutenberg, o novo editor do WordPress
Como começar com o Gutenberg, o novo editor do WordPress
Anyssa Ferreira
 
CSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoCSS - Cansei de Ser Subestimado
CSS - Cansei de Ser Subestimado
Anyssa Ferreira
 
Instalando o WordPress local em qualquer sistema operacional - Anyssa Ferreir...
Instalando o WordPress local em qualquer sistema operacional - Anyssa Ferreir...Instalando o WordPress local em qualquer sistema operacional - Anyssa Ferreir...
Instalando o WordPress local em qualquer sistema operacional - Anyssa Ferreir...
Anyssa Ferreira
 
O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp S...
O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp S...O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp S...
O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp S...
Anyssa Ferreira
 
Lojas virtuais com WordPress + WooCommerce
Lojas virtuais com WordPress + WooCommerceLojas virtuais com WordPress + WooCommerce
Lojas virtuais com WordPress + WooCommerce
Anyssa Ferreira
 
Design de temas para WooCommerce - Anyssa Ferreira
Design de temas para WooCommerce - Anyssa FerreiraDesign de temas para WooCommerce - Anyssa Ferreira
Design de temas para WooCommerce - Anyssa Ferreira
Anyssa Ferreira
 
Vendendo (com) WordPress
Vendendo (com) WordPressVendendo (com) WordPress
Vendendo (com) WordPress
Anyssa Ferreira
 
Percepção e participação das mulheres na comunidade WordPress
Percepção e participação das mulheres na comunidade WordPressPercepção e participação das mulheres na comunidade WordPress
Percepção e participação das mulheres na comunidade WordPress
Anyssa Ferreira
 

Mais de Anyssa Ferreira (8)

Como começar com o Gutenberg, o novo editor do WordPress
Como começar com o Gutenberg, o novo editor do WordPressComo começar com o Gutenberg, o novo editor do WordPress
Como começar com o Gutenberg, o novo editor do WordPress
 
CSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoCSS - Cansei de Ser Subestimado
CSS - Cansei de Ser Subestimado
 
Instalando o WordPress local em qualquer sistema operacional - Anyssa Ferreir...
Instalando o WordPress local em qualquer sistema operacional - Anyssa Ferreir...Instalando o WordPress local em qualquer sistema operacional - Anyssa Ferreir...
Instalando o WordPress local em qualquer sistema operacional - Anyssa Ferreir...
 
O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp S...
O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp S...O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp S...
O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp S...
 
Lojas virtuais com WordPress + WooCommerce
Lojas virtuais com WordPress + WooCommerceLojas virtuais com WordPress + WooCommerce
Lojas virtuais com WordPress + WooCommerce
 
Design de temas para WooCommerce - Anyssa Ferreira
Design de temas para WooCommerce - Anyssa FerreiraDesign de temas para WooCommerce - Anyssa Ferreira
Design de temas para WooCommerce - Anyssa Ferreira
 
Vendendo (com) WordPress
Vendendo (com) WordPressVendendo (com) WordPress
Vendendo (com) WordPress
 
Percepção e participação das mulheres na comunidade WordPress
Percepção e participação das mulheres na comunidade WordPressPercepção e participação das mulheres na comunidade WordPress
Percepção e participação das mulheres na comunidade WordPress
 

Design para WordPress- Anyssa Ferreira - WordCamp BH 2015

  • 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. 01.
  • 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.
  • 10. 02.
  • 12. São os conjuntos de arquivos (geralmente PHP, CSS, e JS) responsáveis pela exibição e aparência do site.
  • 13. • 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.
  • 16. É 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
  • 18. 03.
  • 22. • 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/
  • 23. • 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.
  • 26. • RGB • Pixels • Largura – 1400px • Altura variável • Pranchetas – páginas principais
  • 27. • Backgrounds • Conteúdo • Conteúdo hover • Grid – linhas guias • Infos – anotações
  • 28. • 1140px • 12 colunas • Gutter 30px
  • 29. • Limpe o painel • Crie as cores da sua paleta • Swatches globais facilitam a troca de cores
  • 30. • 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
  • 31. Defina os estilos para os elementos HTML • Títulos H1 ao H6 • Parágrafos • Links • Listas
  • 32. 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!
  • 33. • Pense nos break points • Crie pranchetas com as diferentes resoluções • Repense o fluxo de elementos • Menus e navegação
  • 35. • Menu • Botões • Paginação • Datas • Legendas de imagens • Formulários • Tabelas • Ícones • Comentários • Widgets
  • 36. Crie símbolos para tudo que for se repetir no layout.