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.

1. como desenvolver layouts.
WordCamp BH2015
13/06/15

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.

4. – Alexandre Wollner

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.

9. • 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

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.

14. index.php
header.php
content
.php
sidebar.php
footer.php

15. page.php
header.php
content-
page.php
sidebar.php
footer.php

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.