Deixe seu Designer Feliz

0 %
100 %
Information about Deixe seu Designer Feliz
sbc

Published on November 20, 2016

Author: MartaPreuss

Source: slideshare.net

1. ><MARTA PREUSS PARA FRONT IN FLORIPA 2016 COMO DEIXAR SEU DESIGNER FELIZ E SER MAIS FELIZ TAMBÉM 1 slideshare.net/MartaPreuss/deixe-seu-designer-feliz

2. >< 01Apresentação marta.preuss@gmail.com http://marta.preuss.nom.br fb.com/mapreuss twitter.com/suco_de_uva Marta Preuss 2

3. >< Formatura Mídias Digitais pela Universidade Metodista (SBC) Agências Agências de publicidade em São Paulo e Editora Abril Estadão ClickOn e depois Estadão para front-end do portal Pós graduação Em Design de Interação e SocialBase - agora freelando. 2008 2012 2014 2016 ClickOn, Estadão, SocialBase Formação em Comunicação Social com hab em Mídias Digitais. Especialização em Design de Interação. 3

4. >< 02WHY GOD WHY Origens do webdesign • Vamos fazer peças para imprimir na revista • COMO ASSIM não vai ficar igual no IE6? 4

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

6. O INTEIRO É INTERPRETADO DE MANEIRA DIFERENTE QUE A SOMA DE SUAS PARTES. 6

7. >< 7 Proximidade

8. >< 8 Continuidade

9. >< 9 Semelhança

10. >< 10 Alinhamento

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

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

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

14. >< 03Semântica div é legal mas você já experimentou outras tags? 14

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

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

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

18. >< - Flexbox - Miligram - Semantic.gs - Gridle - Suzy Joga pro CSS resolver Grid 18

19. >< 04Cross-browser Cross-browser: 
 não vai ficar idêntico. 19

20. >< - Meyer - Normalize - Yahoo YUI3 Nivelando todos os navegadores Resset CSS 20

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

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

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

24. >< 05comofas/// Pixel PERFECT 24

25. >< HTML Semântico Fizemos primeiro o HTML, usando tags do HTML5 e sabendo o que é o que. CSS Fizemos o CSS passando o grid e usando resset para todos os navegadores. Responsivo Visualizamos em diversas resoluções e exportamos imagens @2x. 01 02 03 04 Processo VAI FICAR TODO MUNDO FELIZ SIM 25 Entendeu o layout Nossos conhecimentos em Gestalt ajudaram a entender porque o designer fez as coisas dessa forma.

26. >< 26

27. >< - PerfectPixel no Chrome - Pixel Perfect no Firefox Div semitransparente com position absolute e z-index alto. Ou faça você mesmo Extensões 27

28. >< 06UX Sério, usuário? 28

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

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

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

32. OBRIGADA! 32 slideshare.net/MartaPreuss/deixe-seu-designer-feliz

Add a comment