design in the browser
DESCRIPTION
Palestra introdutória de Design On The Browser no Flisol/Bahia JS 2013TRANSCRIPT
![Page 1: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/1.jpg)
![Page 2: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/2.jpg)
![Page 3: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/3.jpg)
o que é
design in the browser
![Page 4: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/4.jpg)
DESIGNING IN A BROWSER – O que é Design in the Browser?
É transpor a etapa de design de um website para o browser. Mais conhecida como: “die, Photoshop, die!”
![Page 5: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/5.jpg)
guess what!
não é um conceito novo.
![Page 6: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/6.jpg)
na verdade...
é natural.
![Page 7: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/7.jpg)
DESIGNING IN A BROWSER – O que é Design in the Browser?
Desenhar websites no browser não significa ignorar a etapa do design de interface. Pelo contrário: a intenção é melhorá-la.
![Page 8: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/8.jpg)
DESIGNING IN A BROWSER – O que não é
“As pessoas desenham diretamente no browser? Isso é novo
para mim! Eu não sei como é possível criar sites ricos e
coloridos sem antes modelá-los no Photoshop. (...)”
- Rakel, 2012
Comentários retirados de: www.sazzy.co.uk/2012/02/why-i-cant-design-in-the-browser
![Page 9: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/9.jpg)
DESIGNING IN A BROWSER – O que não é
“Eu tenho a mesma desconexão. Para mim, ainda são dois processos separados: design e código”
- Jim, 2012
Comentários retirados de: www.sazzy.co.uk/2012/02/why-i-cant-design-in-the-browser
![Page 10: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/10.jpg)
DESIGNING IN A BROWSER – O que não é
“O design moderno de websites é feito dentro e fora do browser. (...) Na minha opinião, a combinação das duas técnicas levam a experiências de usuário bem sólidas”
- Grayson Koonce, 2012
Comentários retirados de: www.sazzy.co.uk/2012/02/why-i-cant-design-in-the-browser
![Page 11: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/11.jpg)
BINGO!
![Page 12: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/12.jpg)
por que desenhar no browser
é interessante?
![Page 13: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/13.jpg)
DESIGNING IN A BROWSER – Por que desenhar no browser é interessante?
Porque telas desenhadas no Photoshop possuem largura fixa.
![Page 14: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/14.jpg)
![Page 15: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/15.jpg)
DESIGNING IN A BROWSER – Por que desenhar no browser é interessante?
Porque a experiência do usuário não pode ser demonstrada adequadamente no Photoshop.
Hover state? Aumentar tamanho do texto? Renderização do texto?
![Page 16: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/16.jpg)
Visto em: goo.gl/o1aMH
![Page 17: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/17.jpg)
DESIGNING IN A BROWSER – Por que desenhar no browser é interessante?
Porque Photoshop, muitas vezes, é sinônimo de trabalho repetitivo. Experimente mudar a cor, tamanho do texto e alinhamento de alguns elementos em pelo menos 10 arquivos do Photoshop.
![Page 18: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/18.jpg)
DESIGNING IN A BROWSER – Por que desenhar no browser é interessante?
E demanda tempo, muito tempo. A interface do Photoshop (ou de qualquer outro programa com propósitos e funcionalidades similares) exige mais tempo para criação, ajuste e modificação de detalhes.
![Page 19: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/19.jpg)
DESIGNING IN A BROWSER – Por que desenhar no browser é interessante?
Além disso tudo, não representa fielmente o trabalho final. Já que o site, de fato, irá ser exibido em incontáveis browsers, o Photoshop não consegue prever bem como o texto – e demais propriedades – será renderizado neles.
![Page 20: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/20.jpg)
está tudo muito bacana, mas... como fazer design in
the browser?
![Page 21: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/21.jpg)
não muda muito. mas muda muito.
![Page 22: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/22.jpg)
pois aumenta o foco em etapas geralmente negligenciadas.
![Page 23: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/23.jpg)
DESIGNING IN A BROWSER – Como fazer design in the browser?
1. Arquitetura de Informação Etnografia Virtual
Inventário de Conteúdo
Mapa Conceitual
Card Sorting
Auditoria de Conteúdo
Sitegrama
Fluxograma
![Page 24: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/24.jpg)
Exemplo de Sitegrama
![Page 25: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/25.jpg)
Exemplo de Fluxograma
![Page 26: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/26.jpg)
DESIGNING IN A BROWSER – Como fazer design in the browser?
2. Prototipação Planejamento dos media queries breakpoints
Wireframe em Papel / Navegável
Testes iniciais de usabilidade (sim, podem ser feitos até
mesmo no papel, oh!)
![Page 27: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/27.jpg)
![Page 28: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/28.jpg)
wireframe não tem que ser bonito
![Page 29: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/29.jpg)
mas tem que ser útil.
![Page 30: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/30.jpg)
adeus Photoshop!
![Page 31: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/31.jpg)
adeus Photoshop! só que não.
![Page 32: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/32.jpg)
Photoshop e cia. servem para criar Style Tiles.
![Page 33: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/33.jpg)
DESIGNING IN A BROWSER – Como fazer design in the browser?
3. Style Tiles Menos vagos que moodboards
Menos trabalhosos que „moldes‟ completos no PS
Apresentam o look and feel do site
Não engessam a apresentação dos elementos
Não impõem uma irrealidade
![Page 34: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/34.jpg)
styletil.es
![Page 35: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/35.jpg)
![Page 36: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/36.jpg)
DESIGNING IN A BROWSER – Como fazer design in the browser?
4. Front-end Inicia logo após definição dos wireframes
Mais tempo para focar na interação e qualidade do código
Testes, testes e testes
Mais velocidade no desenvolvimento
![Page 37: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/37.jpg)
legal! Mas como fazer para adaptar o meu workflow a isso?
![Page 38: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/38.jpg)
bom, não querendo ser grossa, mas... se você for designer...
![Page 39: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/39.jpg)
não tenha medo da web. aprenda, e aprenda bem,
html e css.
![Page 40: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/40.jpg)
não, você não precisa ser especialista. o front-end developer é.
![Page 41: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/41.jpg)
mas adapte-se. Conheça bem o seu real canvas: a web
![Page 42: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/42.jpg)
bom, se você é front-end developer... aprenda noções de design.
![Page 43: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/43.jpg)
um pouco de design não morde
e te ajuda a absorver melhor as etapas que precedem seu
trabalho.
![Page 44: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/44.jpg)
e, claro, não deixe de usar as ferramentas em seu favor
![Page 45: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/45.jpg)
DESIGNING IN A BROWSER – Ferramentas
Ferramentas Coisas básicas como browser inspectors, developer tools...
Sass, Less, Stylus, Compass
Boilerplates, frameworks
Grunt
Dexy
![Page 46: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/46.jpg)
![Page 47: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/47.jpg)
![Page 48: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/48.jpg)
![Page 49: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/49.jpg)
and... don‟t repeat yourself.
![Page 50: Design in the browser](https://reader033.vdocuments.mx/reader033/viewer/2022060111/55667c7bd8b42ad5798b4e9b/html5/thumbnails/50.jpg)
Obrigada!
tassiapellegrini.com