deixe seu designer feliz
TRANSCRIPT
><MARTA PREUSS PARA FRONT IN FLORIPA 2016
COMO DEIXAR SEU DESIGNER FELIZE SER MAIS FELIZ TAMBÉM
1
slideshare.net/MartaPreuss/deixe-seu-designer-feliz
><
01Apresentação [email protected]
http://marta.preuss.nom.br
fb.com/mapreuss
twitter.com/suco_de_uva
Marta Preuss
2
><
FormaturaMídias Digitais pela Universidade Metodista (SBC)
AgênciasAgências de publicidade em São Paulo e Editora Abril
EstadãoClickOn e depois Estadão para front-end do portal
Pós graduaçãoEm Design de Interação e SocialBase - agora freelando.
2008 2012 2014 2016
ClickOn, Estadão, SocialBaseFormação em Comunicação Social com hab em Mídias Digitais. Especialização em Design de Interação.
3
><
02WHY GOD WHY
Origens do webdesign• Vamos fazer peças para
imprimir na revista
• COMO ASSIM não vai ficar igual no IE6?
4
><
- Escola da psicologia - Movimento que atua na área da teoria da forma. - Wertheimer, Immanuel Kant, Ernst Mach e Johann Wolfgang von
Goethe.
É uma palavra que significa “forma” ou “figura”
HTTP://CHOCOLADESIGN.COM/O-QUE-E-GESTALT
Gestalt não era um cara
5
O INTEIRO É INTERPRETADO DE MANEIRA DIFERENTE QUE A SOMA DE SUAS PARTES.
6
>< 7
Proximidade
>< 8
Continuidade
>< 9
Semelhança
>< 10
Alinhamento
><
Pregnância
Vemos o mais simples primeiro. È uma montanha com neve, mas olhando bem tem cavalos malhados.
Fechamento
Completamos o espaço em branco com a nossa imaginação; mesmo sem haver um crânio, enxergamos um com elementos separados.
Unificação
Substituimos o espaço em branco e vemos a continuidade, formando objetos onde não há.
11
><
- Leia o manual da marca, ele tem figuras e é bonito - Exporte a logo com qualidade e faça ser clicável para a home ou o
topo do site - Cuidado com espaços em volta da marca e o fundo onde ela é
posicionada - Se tiver dúvidas, consulte o designer
Pense nela como o bebê mais lindo que o designer pariu
Cuide da marca
12
><
- Diferenças entre gif, jpg e png - Comprima imagens com o tiny jpg ou png - Não esqueça de exportar @2x para retina, faz uma baita diferença - Cuidado com padrões, recorte para repetir direitinho - Peça ajuda ao designer se ele fez aquela super imagem cheia de
multiply que está atrasando seu dia - Prefira fazer o que for possível com CSS
Qualidade da imagem é tão legal
Exporte imagens direitinho
13
><
03Semântica
div é legal mas você já experimentou outras tags?
14
><
Entenda quais são as áreas do site e desenvolva semanticamente seu HTML antes de fazer o CSS.
<!DOCTYPE html> <section> <article> <aside> <nav> <address> <time> <ul> e <li> tem de sobra
Sente com o designer e PERGUNTE o que significa cada coisa
HTTPS://DEVELOPER.MOZILLA.ORG/PT-BR/DOCS/WEB/HTML/HTML5/HTML5_ELEMENT_LIST
HTML first
15
><
<table> <thead>
<tr> <th> Cabeçalho </th> </tr> </thead> <tbody>
<tr> <td> Conteúdo </td> </tr> </tbody>
</table>
Pode usar tabela sim, quando for tabela
Tabelas
16
><
<form action=“”> <fieldset>
<legend> Título do formulário </legend> <label for=“nome”>Nome</label> <input type=“text” name=“nome” id=“nome”>
</fieldset>
</form>
Vamos fazer formulários com amor?
Formulários
17
><
- Flexbox - Miligram - Semantic.gs - Gridle - Suzy
Joga pro CSS resolver
Grid
18
><
04Cross-browser
Cross-browser: não vai ficar
idêntico. 19
><
- Meyer - Normalize - Yahoo YUI3
Nivelando todos os navegadores
Resset CSS
20
><
- Adicione classes no body, use JS ou media queries para browsers diferentes.
- Beautiful degradation - http://caniuse.com/ - http://browserhacks.com/
Se precisar fazer algo diferente para cada navegador
Técnicas
21
><
Microsoft dá suporte para IE 11+ ou Edge, mas o 10 não é tão ruim 9 quebra algumas coisas sem muito sentido e não funciona flexbox do mesmo jeito. TESTE em TODOS os navegadores …ou espere alguém vir te avisar que quebrou.
Respira fundo
IE stuff
22
><
- Deixe o menor estilo fora das media queries. Coloque os maiores dentro delas.
- Teste além das resoluções padrão, mudando a largura no inspetor de propriedades e corrigindo quebras
- Peça para o designer imaginar como as coisas deveriam ficar. - Exporte imagens @2x.
Responsivo ao resgate
Mobile
23
><
05comofas///
Pixel PERFECT
24
><
HTML SemânticoFizemos primeiro o HTML, usando tags do HTML5 e sabendo o que é o que.
CSSFizemos o CSS passando o grid e usando resset para todos os navegadores.
ResponsivoVisualizamos em diversas resoluções e exportamos imagens @2x.
01 02 03 04
ProcessoVAI FICAR TODO MUNDO FELIZ SIM
25
Entendeu o layoutNossos conhecimentos em Gestalt ajudaram a entender porque o designer fez as coisas dessa forma.
>< 26
><
- PerfectPixel no Chrome - Pixel Perfect no Firefox
Div semitransparente com position absolute e z-index alto.
Ou faça você mesmo
Extensões
27
><
06UX
Sério, usuário?
28
><
- Textos em inglês ou lorem ipsum - Mensagens de erro perfeitamente normais para você mas bizarras
para ele - Imagens e botões - Texto sublinhado == link - Imagem pode ser clicável também - cuidado com os links delas
Ele VAI ver
29
><
- Texto, se tiver botão de ação e botão de cancelar. - Botões iguais para fazer coisas diferentes. - Botão de ação, se tiver de preencher um formulário antes - Link da mesma cor do texto e sem sublinhado, mesmo que estiver
em negrito ou itálico - Todo o resto em torno do título ou de uma palavra colorida
Ele NÃO vai ver
30
><
- Ouça opiniões alheias: você vicia no layout e é sobre seu trabalho, não sobre você
- Respeite o que o designer pensou e converse com ele se não der para respeitar
- Ouça antes de dizer não. Aí, se for o caso, diga. - Imagine todos em combustão expontânea.
Como ficar feliz?
31
OBRIGADA!
32
slideshare.net/MartaPreuss/deixe-seu-designer-feliz