design para wordpress- anyssa ferreira - wordcamp bh 2015
TRANSCRIPT
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.
• 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.
• 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
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.
É 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.
hea
der
.ph
p
content.php
footer.php
• O Photoshop não foi criado pra isso, é um editor de imagens.
• 95% dos casos do cata-vento da desgraça do 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-deadhttp://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.
• 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
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
• Menu
• Botões
• Paginação
• Datas
• Legendas de imagens
• Formulários
• Tabelas
• Ícones
• Comentários
• Widgets