O documento fornece diretrizes para desenvolvimento de layouts web, incluindo a utilização de ferramentas como Sketch ou Adobe XD ao invés de Photoshop, definição de grids, estilos, imagens e pontos de quebra para responsividade.
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.
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.
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
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.
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