como desenvolver layouts.

WordCamp BH 201513/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.

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

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

sid

ebar

.ph

p

footer.php

page.php

header.php

content-page.php

sid

ebar

.ph

p

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.

hea

der

.ph

p

content.php

footer.php

03.

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

• 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

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