Design in the browser
-
Upload
tassia-pellegrini -
Category
Design
-
view
489 -
download
0
description
Transcript of Design in the browser
o que é
design in the browser
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!”
guess what!
não é um conceito novo.
na verdade...
é natural.
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.
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
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
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
BINGO!
por que desenhar no browser
é interessante?
DESIGNING IN A BROWSER – Por que desenhar no browser é interessante?
Porque telas desenhadas no Photoshop possuem largura fixa.
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?
Visto em: goo.gl/o1aMH
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.
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.
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.
está tudo muito bacana, mas... como fazer design in
the browser?
não muda muito. mas muda muito.
pois aumenta o foco em etapas geralmente negligenciadas.
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
Exemplo de Sitegrama
Exemplo de Fluxograma
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!)
wireframe não tem que ser bonito
mas tem que ser útil.
adeus Photoshop!
adeus Photoshop! só que não.
Photoshop e cia. servem para criar Style Tiles.
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
styletil.es
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
legal! Mas como fazer para adaptar o meu workflow a isso?
bom, não querendo ser grossa, mas... se você for designer...
não tenha medo da web. aprenda, e aprenda bem,
html e css.
não, você não precisa ser especialista. o front-end developer é.
mas adapte-se. Conheça bem o seu real canvas: a web
bom, se você é front-end developer... aprenda noções de design.
um pouco de design não morde
e te ajuda a absorver melhor as etapas que precedem seu
trabalho.
e, claro, não deixe de usar as ferramentas em seu favor
DESIGNING IN A BROWSER – Ferramentas
Ferramentas Coisas básicas como browser inspectors, developer tools...
Sass, Less, Stylus, Compass
Boilerplates, frameworks
Grunt
Dexy
and... don‟t repeat yourself.
Obrigada!
tassiapellegrini.com