Transferir como PDF, PPTX
Carregado porMarta Preuss
Deixe seu Designer Feliz
Marta Preuss apresenta dicas para desenvolvedores deixarem designers felizes ao criar sites. Ela discute a importância de seguir as diretrizes de design, usar semântica corretamente e testar sites em diferentes navegadores e resoluções para garantir a usabilidade. Preuss enfatiza a necessidade de colocar os usuários em primeiro lugar ao desenvolver sites.
![[INFNET] Criando layouts em PSD pensando no front-end e back-end](https://cdn.slidesharecdn.com/ss_thumbnails/criando-layouts-em-psd-pensando-no-front-end-e-back-end-140225044132-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Deixe seu Designer Feliz
- 1. ><MARTA PREUSS PARAFRONT IN FLORIPA 2016 COMO DEIXAR SEU DESIGNER FELIZ E SER MAIS FELIZ TAMBÉM 1 slideshare.net/MartaPreuss/deixe-seu-designer-feliz
- 2.
- 3. >< Formatura Mídias Digitais pela UniversidadeMetodista (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 Origensdo webdesign • Vamos fazer peças para imprimir na revista • COMO ASSIM não vai ficar igual no IE6? 4
- 5. >< - Escola dapsicologia - 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 É INTERPRETADODE MANEIRA DIFERENTE QUE A SOMA DE SUAS PARTES. 6
- 7.
- 8.
- 9.
- 10.
- 11. >< Pregnância Vemos o maissimples 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 omanual 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 entregif, 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 é legalmas você já experimentou outras tags? 14
- 15. >< Entenda quais sãoas á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ítulodo 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 vaificar idêntico. 19
- 20. >< - Meyer - Normalize -Yahoo YUI3 Nivelando todos os navegadores Resset CSS 20
- 21. >< - Adicione classesno 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á suportepara 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 omenor 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.
- 25. >< HTML Semântico Fizemos primeiroo 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.
- 27. >< - PerfectPixel noChrome - Pixel Perfect no Firefox Div semitransparente com position absolute e z-index alto. Ou faça você mesmo Extensões 27
- 28.
- 29. >< - Textos eminglê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, setiver 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õesalheias: 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.