advertisement

Design in the Browser

50 %
50 %
advertisement
Information about Design in the Browser
Design

Published on February 19, 2014

Author: tassiapellegrini

Source: slideshare.net

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.
advertisement

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

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

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).

Comentários retirados de: www.sazzy.co.uk/2012/02/why-i-cant-design-in-the-browser 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.

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?

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

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

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

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

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

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

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.

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

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

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

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

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?

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

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.

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 : https://www.eventials.com/locaweb/criando-uma-arquitetura-escalavel-de-front-end-do-zero-com-eduardo-shiota-yasuda/

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

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: 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?

LINKS Stephen Hay: Styel Guides Are the New Photoshop http://vimeo.com/52851510 Andy Clarke: Time to stop showing clients static design visuals http://www.stuffandnonsense.co.uk/blog/about/time_to_stop_showing_clients_static_design_visuals/ Andy Clarke: Walls Coming Tumbling Down http://stuffandnonsense.co.uk/blog/about/walls_come_tumbling_down_presentation_slides_and_transcript/ Style Tiles and How They Work http://alistapart.com/article/style-tiles-and-how-they-work/ Style Tiles Inspiration http://www.pinterest.com/LeticiaChamorro/style-tiles-examples/ Using Dexy to Create Style Guides http://www.creativebloq.com/netmag/how-create-website-style-guide-7133875

+ LINKS Performance em CSS, palestra de Bernard de Luna http://www.youtube.com/watch?v=al_AJiovBfE Criando uma Arquitetura Front-End Escalável do Zero, palestra de Eduardo Shiota https://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 Luna https://www.eventials.com/locaweb/design-behind-the-scenes-and-layers-com-bernard-de-luna/

OBRIGADA! tassiapellegrini.com

Add a comment

Related presentations

My Music Magazine Pitch

My Music Magazine Pitch

October 30, 2014

music mag pitch

Questionaire charts

Questionaire charts

November 4, 2014

bk

Final research

Final research

November 5, 2014

final research

Cersaie 2014

Cersaie 2014

October 30, 2014

allestimento in cartone per il Cersaie 2014 alberi in cartone scultura in cartone

Quarta turma do workshop de Infografia, ministrado por Beatriz Blanco e Marcos Sin...

Related pages

Froont – responsive web design tool

Design in the browser. Design by modifying hundreds of ready made designs or start from scratch. Prepare your assets in Photoshop or Sketch and move them ...
Read more

Tips for Designing in the Browser - Web Design Tutorials ...

It's often thought that designing in the browser is a modern approach to web design. In fact, before the advent of tools such as Photoshop, there was ...
Read more

Designing in the browser, pro tips to make it work for you ...

Designing in the browser used to scare me. Not because it seemed hard but because I thought I would end up with a design made up of a lot of little boxes ...
Read more

Responsive Web Design in the Browser Part 1 : Kill Photoshop

Responsive Web Design is better achieved by designing in the browser using html, css and javascript. Photoshop in responsive design is a thing of the past.
Read more

Why I Design In The Browser - Kyle Ledbetter

Around 3 years ago my frustrations with designing mockups and wireframes came to a head. If I heard “what happens when I click this?” or “what css ...
Read more

Designing in the Browser With Bootstrap - Web Design ...

With the rising popularity of HTML and CSS frameworks like Bootstrap, web designers have found an efficient alternative to Adobe Photoshop for designing ...
Read more

Design with web fonts in the browser - Typecast

Typecast is a free design tool for prototyping web type, web pages & RWD. Create visual & semantic designs. Check for readability & rendering. Hand over ...
Read more

Responsive Web Design in the Browser | Lynda.com

Want to design in the browser? Learn how to use the browser's flexible canvas and a combination of HTML and CSS to build more responsive, interactive ...
Read more

Designing in the browser - CreativeBloq | Art and Design ...

Web design; Designing in the browser; Designing in the browser. Posted Web design Designer and developer Edward O'Riordan explains why you should design in ...
Read more

Web制作フローの再考とDesigning in the browser ...

Web制作フローの再考とDesigning in the browser │ Design Spice. カテゴリー: うぇぶでざいん 作成者: ootake パーマリンク ...
Read more