View
530
Download
4
Category
Tags:
Preview:
DESCRIPTION
O que é Design in the Browser? Fazer mockups de altíssima fidelidade tornou-se inviável com a crescente adoção ao design responsivo e de metodologias como o mobile first. O canvas não é mais a tela de Photoshop e, sim, o browser. Aprenda o que é design in the browser, como adaptar seu workflow para isso e ferramentas para tornar o design de interfaces mais produtivo e escalável. Vamos abordar tópicos como: - O que é fazer "design no browser" - Como aplicar isso no mundo real - Etapas importantes para assegurar a qualidade de um projeto desse tipo (arquitetura de informação, prototipação, etc) - Como adaptar o seu workflow - ou o seu time - a esse formato - Ferramentas para maior produtividade - Discussões sobre design de interface e interação no atual cenário da web - Referências importantes sobre o tema Esta palestra não pretende implementar nenhum layout ou projeto. Não é um live code, e sim uma abordagem e uma discussão sobre uma prática que vem sendo adotada mas nem sempre discutida.
Citation preview
DESIGN IN THE BROWSERTransformando os arquivos do Photoshop em coisas mais úteis
TASSIA PELLEGRINI /// EVENTIALS /// FEV 2014
TASSIA PELLEGRINIProfessora 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
O QUE É
DESIGN IN THE BROWSER?
É transpor a etapa de design de interface de um website para o browser.
OU, “DIE, PHOTOSHOP, DIE!”
OU, “DIE, PHOTOSHOP, DIE!”
Ok, não é bem assim, e nem se trata de um conceito novo também (mas ainda assusta algumas pessoas).
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.
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.
Comentários retirados de: www.sazzy.co.uk/2012/02/why-i-cant-design-in-the-browser
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.
Comentários retirados de: www.sazzy.co.uk/2012/02/why-i-cant-design-in-the-browser
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.
Transpor o design de interface para o browser é algo que vem sendo discutido há um bom tempo, mas ganhou mais notoriedade em 2008.
Há vários artigos dessa época que já discutiam coisas que até hoje temos certa dificuldade de implementar.
Veja em: http://www.stuffandnonsense.co.uk/blog/about/time_to_stop_showing_clients_static_design_visuals/ Veja em: http://stuffandnonsense.co.uk/blog/about/walls_come_tumbling_down_presentation_slides_and_transcript/
Logo, estamos falando de algo que, na realidade, sempre deveria ter sido natural.
Ver: http://alistapart.com/article/dao/
POR QUE
CRIAR INTERFACES DIRETAMENTE NO BROWSER SERIA BOM?
Porque telas desenhadas no Photoshop (ou qualquer outro programa do gênero) possuem largura fixa.
RAZÃO 01:
Largura fixa e websites responsivos parecem não combinar muito, não é?
Porque a experiência do usuário não pode ser demonstrada adequadamente no Photoshop.
RAZÃO 02:
Porque Photoshop, muitas vezes, é sinônimo de trabalho repetitivo.
RAZÃO 03:
A interface do Photoshop exige mais tempo para criação, ajuste e modificação de detalhes.
RAZÃO 04:
Mockups em Photoshop não representam de forma real o que vai ser entregue ao cliente.
RAZÃO 05:
COMO
FAZER DESIGN IN THE BROWSER?
Não há nada muito diferente em se fazer Design in the Browser.
O que muda é o foco, que agora será em etapas geralmente negligenciadas.
Etnografia Virtual
Inventário de Conteúdo
Mapa Conceitual
Card Sorting
Sitegrama
Fluxograma
01: ARQUITEURA DE INFORMAÇÃO
Planejamento dos media queries breakpoints
Wireframe em Papel / Navegável
Testes iniciais de usabilidade
02: PROTOTIPAÇÃO
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
03: STYLE TILES
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
04: FRONT-END
COMO
ADAPTAR O MEU WORKFLOW A ISSO?
Se você for designer e conhece um pouco de html e css, aprenda mais.
Não é tão fácil quanto parece.
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.
Dentro de uma equipe o diálogo e os experimentos são essenciais. Nem tudo que funciona com um time funcionará em outro.
QUE TIPO DE
FERRAMENTAS EU POSSO USAR AO MEU FAVOR?
Browser inspectors (nativos ou como o FireBug), Modo de Design Adaptável (do Mozilla), Developer Tools, Live Reload...
FERRAMENTAS BÁSICAS
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.
EDITORES DE IMAGEM (SIM!)
Sass, Less, Stylus, Compass e muitos outros são ótimos para agilizar o desenvolvimento, especialmente em projetos responsivos.
PRÉ-PROCESSADORES DE CSS E SEUS ACESSÓRIOS
Dicas ótimas de Eduardo Shiota em : https://www.eventials.com/locaweb/criando-uma-arquitetura-escalavel-de-front-end-do-zero-com-eduardo-shiota-yasuda/
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
AUTOMATIZADORES DE TAREFAS
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.
EXEMPLO: DEXY
Veja mais detalhes de como usá-lo em: http://www.creativebloq.com/netmag/how-create-website-style-guide-7133875
Suponha que este html seja uma representação do seu projeto. Vamos chamá-lo de mockup.
Agora, em um arquivo que será lido pelo Dexy, criamos o conteúdo do nosso style guide.
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.
Exemplo de um style guide simples rodando no navegador.
COMO É O CENÁRIO
DO DESIGN DE INTERFACES HOJE?
Stephen Hay: Styel Guides Are the New Photoshophttp://vimeo.com/52851510
Andy Clarke: Time to stop showing clients static design visualshttp://www.stuffandnonsense.co.uk/blog/about/time_to_stop_showing_clients_static_design_visuals/
Andy Clarke: Walls Coming Tumbling Downhttp://stuffandnonsense.co.uk/blog/about/walls_come_tumbling_down_presentation_slides_and_transcript/
Style Tiles and How They Workhttp://alistapart.com/article/style-tiles-and-how-they-work/
Style Tiles Inspirationhttp://www.pinterest.com/LeticiaChamorro/style-tiles-examples/
Using Dexy to Create Style Guideshttp://www.creativebloq.com/netmag/how-create-website-style-guide-7133875
LINKS
Performance em CSS, palestra de Bernard de Lunahttp://www.youtube.com/watch?v=al_AJiovBfE
Criando uma Arquitetura Front-End Escalável do Zero, palestra de Eduardo Shiotahttps://www.eventials.com/locaweb/criando-uma-arquitetura-escalavel-de-front-end-do-zero-com-eduardo-shiota-yasuda
Design Behind the Scenes and Layers, palestra de Bernard de Lunahttps://www.eventials.com/locaweb/design-behind-the-scenes-and-layers-com-bernard-de-luna/
+ LINKS
OBRIGADA!
tassiapellegrini.com
Recommended