Design in the browser

transcript

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

“Eu tenho a mesma desconexão. Para mim, ainda são dois processos separados: design e código”

- Jim, 2012

“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

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.

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

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.

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.

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

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.

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

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

and... don‟t repeat yourself.

Obrigada!

tassiapellegrini.com