DESIGN IN THE BROWSER

Transcrição

1 DESIGN IN THE BROWSER Transformando os arquivos do Photoshop em coisas mais úteis TASSIA PELLEGRINI /// EVENTIALS /// FEV 2014

2 TASSIA PELLEGRINI Professora do curso de Design da Universidade Federal da Bahia, National Employer Branding Coordinator na AIESEC Brasil e designer de interfaces com mais de cinco anos de experiência Saiba mais em tassiapellegrini.com/sobre

3 O QUE É DESIGN IN THE BROWSER?

4 É transpor a etapa de design de interface de um website para o browser.

5 OU, DIE, PHOTOSHOP, DIE!

6 OU, DIE, PHOTOSHOP, DIE! Ok, não é bem assim, e nem se trata de um conceito novo também (mas ainda assusta algumas pessoas).

7 Comentários retirados de: 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. Eu nem quero nem pensar em tentar.

8 Comentários retirados de: Eu tenho a mesma desconexão. Para mim, ainda são dois processos separados: design e código.

9 Comentários retirados de: 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.

10

11 A intenção de usar o browser não é eliminar a etapa de design de interface. Pelo contrário: o objetivo é melhorá-la com o fortalecimento de etapas anteriores.

12 Transpor o design de interface para o browser é algo que vem sendo discutido há um bom tempo, mas ganhou mais notoriedade em 2008.

13 Há vários artigos dessa época que já discutiam coisas que até hoje temos certa dificuldade de implementar. Veja em: Veja em:

14 Logo, estamos falando de algo que, na realidade, sempre deveria ter sido natural. Ver:

15 POR QUE CRIAR INTERFACES DIRETAMENTE NO BROWSER SERIA BOM?

16 RAZÃO 01: Porque telas desenhadas no Photoshop (ou qualquer outro programa do gênero) possuem largura fixa.

17 Largura fixa e websites responsivos parecem não combinar muito, não é?

18

19 RAZÃO 02: Porque a experiência do usuário não pode ser demonstrada adequadamente no Photoshop.

20 RAZÃO 03: Porque Photoshop, muitas vezes, é sinônimo de trabalho repetitivo.

21 RAZÃO 04: A interface do Photoshop exige mais tempo para criação, ajuste e modificação de detalhes.

22 RAZÃO 05: Mockups em Photoshop não representam de forma real o que vai ser entregue ao cliente.

23 COMO FAZER DESIGN IN THE BROWSER?

24 Não há nada muito diferente em se fazer Design in the Browser.

25 O que muda é o foco, que agora será em etapas geralmente negligenciadas.

26 01: ARQUITEURA DE INFORMAÇÃO Etnografia Virtual Inventário de Conteúdo Mapa Conceitual Card Sorting Sitegrama Fluxograma

27

28

29 02: PROTOTIPAÇÃO Planejamento dos media queries breakpoints Wireframe em Papel / Navegável Testes iniciais de usabilidade

30 03: 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

31

32 04: 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

33 COMO ADAPTAR O MEU WORKFLOW A ISSO?

34 Se você for designer e conhece um pouco de html e css, aprenda mais. Não é tão fácil quanto parece.

35 Se você for desenvolvedor e acha que sabe um pouco de design porque manja de CSS, leia mais sobre design. É muito menos fácil (ou artístico) do que parece.

36 Dentro de uma equipe o diálogo e os experimentos são essenciais. Nem tudo que funciona com um time funcionará em outro.

37 QUE TIPO DE FERRAMENTAS EU POSSO USAR AO MEU FAVOR?

38 FERRAMENTAS BÁSICAS Browser inspectors (nativos ou como o FireBug), Modo de Design Adaptável (do Mozilla), Developer Tools, Live Reload...

39 EDITORES DE IMAGEM (SIM!) Ok, estamos falando do quanto o Photoshop e editores de imagem acabam com o nosso flow de webdesign desde a idade da pedra, mas há alternativas interessantes surgindo no mercado que podem ajudar a melhorar esta situação, a exemplo do Sketch, para Mac.

40 PRÉ-PROCESSADORES DE CSS E SEUS ACESSÓRIOS Sass, Less, Stylus, Compass e muitos outros são ótimos para agilizar o desenvolvimento, especialmente em projetos responsivos. Dicas ótimas de Eduardo Shiota em :

41 AUTOMATIZADORES DE TAREFAS Grunt, Jasmine, CasperJS/PhantomJS, e muitas outras ferramentas que ajudam a testar dependências, concatenar e comprimir arquivos (sejam códigos ou até mesmo imagens), tirar screenshots automáticos, gerenciar a documentação

42 EXEMPLO: DEXY O Dexy é baseado em Python e permite a criação de Style Guides complexos e atualizados automaticamente, criando maior unidade entre as etapas de desenvolvimento com informações realmente úteis. Veja mais detalhes de como usá-lo em:

43 Suponha que este html seja uma representação do seu projeto. Vamos chamá-lo de mockup.

44 Agora, em um arquivo que será lido pelo Dexy, criamos o conteúdo do nosso style guide.

45 Bom, está na hora de começar a se acostumar com o terminal. Aqui instruímos o Dexy a gerar para nós nossa documentação e exibí-la no navegador.

46 Exemplo de um style guide simples rodando no navegador.

47 COMO É O CENÁRIO DO DESIGN DE INTERFACES HOJE?

48 LINKS Stephen Hay: Styel Guides Are the New Photoshop Andy Clarke: Time to stop showing clients static design visuals Andy Clarke: Walls Coming Tumbling Down Style Tiles and How They Work Style Tiles Inspiration Using Dexy to Create Style Guides

49 + LINKS Performance em CSS, palestra de Bernard de Luna Criando uma Arquitetura Front-End Escalável do Zero, palestra de Eduardo Shiota Design Behind the Scenes and Layers, palestra de Bernard de Luna

50 OBRIGADA! tassiapellegrini.com