DESIGN IN THE BROWSER
Transformando os arquivos do Photoshop em coisas mais úteis
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
O QUE É
DESIGN IN THE
BROWSER?
É transpor a etapa de
design de interface
de um website para o
browser.
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.
Eu tenho a mesma desconexão. Para mim, ainda são dois processos separados: design e código.
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.
Logo, estamos falando de algo que, na realidade, sempre deveria ter sido natural.
POR QUE
CRIAR INTERFACES
DIRETAMENTE NO
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 é?
Porque a experiência do usuário não pode ser demonstrada
adequadamente no Photoshop.
Porque Photoshop, muitas vezes, é sinônimo de trabalho repetitivo.
A interface do Photoshop exige
mais tempo para criação, ajuste e modificação de detalhes.
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
O que muda é o foco, que
agora será em etapas
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
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
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
Se você for designer e
conhece um pouco de html e
css, aprenda mais.
Se você for desenvolvedor e
acha que sabe um pouco de
design porque manja de CSS,
leia mais sobre design.
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...
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.
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
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
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
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
COMO É O CENÁRIO
DO DESIGN DE
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
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!
