O Design e a Interface no mundo da Programação

O Design e a Interface no mundo da programação ... ou “Como acabar com as guerras civis no desenvolvimento de um produto” Eduardo Shiota Yasuda | Dev in Sampa 2010 | 15.08.2010

Uma (breve) introdução

@shiota: 3 anos de Ciência da Computação [quase] Formado em Design Trabalha com Front-end, UX e Design Irmão do @shadow11 - back-end jedi developer

Problema O desenvolvimento de um produto é prejudicado por conﬂitos e falta de comunicação entre design, front-end e back-end

Objetivo Identificar papéis e obrigações de cada um, unificar o time e estabelecer uma metologia eficiente de desenvolvimento

história da Interwebz como consertar? como continuar? exemplos

História da Interwebz Como as interfaces evoluíram e os papéis mudaram

história da Interwebz como consertar? como continuar? exemplos 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010

história da Interwebz como consertar? como continuar? exemplos 1991 Primeira página HTML por Tim Berners-Lee 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010

história da Interwebz como consertar? como continuar? exemplos 1996 Entrada das empresas na Web Netscape Navigator 2 Internet Explorer 3 JavaScript ASP 1.0 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010

história da Interwebz como consertar? como continuar? exemplos 1996 Yahoo! e UOL - 1996 Fonte: The Wayback Machine 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010

história da Interwebz como consertar? como continuar? exemplos 1996 Designers Front-end Devs Back-end Devs Fazem imagens Desenvolvem o sistema Desenham “layouts” Fazem o HTML e colocam as imagens Atualizam o conteúdo Modiﬁcam os layouts 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010

história da Interwebz como consertar? como continuar? exemplos 1998 HTML 4.0 CSS 1 Macromedia (R.I.P.) Dreamweaver PHP 3 Mozilla 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010

história da Interwebz como consertar? como continuar? exemplos 1998 Yahoo! e UOL - 1998 Fonte: The Wayback Machine 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010

história da Interwebz como consertar? como continuar? exemplos 1998 Designers Front-end Devs Back-end Devs Fazem imagens Desenvolvem o sistema Desenham layouts Fazem o HTML e colocam as imagens Interações com JavaScript Atualizam o conteúdo Modiﬁcam os layouts 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010

história da Interwebz como consertar? como continuar? exemplos 1999 Explosão “ponto-com” Photoshop com slices e “Save for Web” Macromedia (R.I.P.) Flash 4 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010

história da Interwebz como consertar? como continuar? exemplos 1999 Yahoo! e UOL - 1999 Fontes: The Wayback Machine & UOL História 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010

história da Interwebz como consertar? como continuar? exemplos 2000~2002 Redesign das páginas Introdução da Arquitetura da Informação, Usabilidade e User Experience na Web Surgimento do Front-end Developer 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010

história da Interwebz como consertar? como continuar? exemplos 2000~2002 Yahoo! @ 18-18-2002 e UOL @ 2001 Fontes: The Wayback Machine & UOL História 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010

história da Interwebz como consertar? como continuar? exemplos 2000~2002 Designers Front-end Devs Back-end Devs Wireframe das páginas “Cortam” os layouts em Desenvolvem o sistema Deﬁnem interações imagens Interações com JavaScript Desenham layouts HTML, geralmente com tabelas e estilos inline Interações com JavaScript 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010

história da Interwebz como consertar? como continuar? exemplos 2003 CSS Zen Garden Movimento Tableless Safari 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010

história da Interwebz como consertar? como continuar? exemplos 2005 YouTube Orkut Ruby on Rails Firefox & Safari 2 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010

história da Interwebz como consertar? como continuar? exemplos 2006 Moda “Web 2.0” Crescimento do uso do AJAX Internet Explorer 7 & Firefox 2 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010

história da Interwebz como consertar? como continuar? exemplos 2007 iPhone Ruby on Rails no Mac OS X Safari 3 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010

história da Interwebz como consertar? como continuar? exemplos 2009 Explosão do mercado mobile Internet Explorer 8 Firefox 3.5 Safari 4 Google Chrome 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010

história da Interwebz como consertar? como continuar? exemplos 2010 Crescimento do HTML5 e do CSS3 iPad Apple x Flash Morte do IE 6 (pelo Google) 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010

história da Interwebz como consertar? como continuar? exemplos 2010 Yahoo! e UOL @ 10-08-2010 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010

história da Interwebz como consertar? como continuar? exemplos 2010 Designers Front-end Devs Back-end Devs Wireframe das páginas “Cortam” os layouts em Desenvolvem o sistema Deﬁnem interações imagens Desenham layouts Estrutura semântica do HTML e CSS Orientado a Objeto Interações avançadas com JavaScript Otimização de carregamento da página 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010

Como consertar? Identiﬁcando os problemas de comunicação e conﬂitos entre as áreas, e solucionando-os

história da Interwebz como consertar? como continuar? exemplos O Problema Back-end Devs Designers Managers Testers Stakeholders Front-end Devs

história da Interwebz como consertar? como continuar? exemplos O Problema Designers Front-end Devs Back-end Devs São os únicos que se Não seguem corretamente o Desenvolvem o sistema, mas envolvem com o P.O./ layout e as especificações devolvem dados Stakeholder/Cliente e testers dos Designers incompletos/mal formatados Não possuem conhecimento Não sabem integrar o HTML Desenvolvem o sistema, mas em front-end ou back-end, e ao sistema desenvolvido, não criam as views certas elaboram features deixando que um Back-end complexas/impossíveis para Dev o faça Fazem alterações no o tempo disponível ambiente de Não possuem conhecimento desenvolvimento (migrations, Alteram layouts ou suficiente de JavaScript, gems, configurações da funcionalidades e consumindo tempo do Back- aplicação) e não comunicam comunicam de última hora end Dev o Front-end Dev (ou não comunicam) Se recusam a configurar Não auxiliam ou ensinam o São inflexíveis em simplificar ambientes e aprender Front-end Dev a instalar, o layout ou interação para sistemas de versionamento configurar e utilizar recursos diminuir o tempo de desenvolvimento Enxergam o produto como programadores mas nunca como usuários

história da Interwebz como consertar? como continuar? exemplos A Solução Managers Back-end Devs Stakeholders Designers Testers Front-end Devs

história da Interwebz como consertar? como continuar? exemplos A Solução Um único time: Design + Front-end + Back-end Um único objetivo: fazer o melhor pelo time, pelo P.O., e pelo usuário Trabalho constante junto ao P.O. Transparência entre todos Compartilhamento de conhecimento entre as áreas

história da Interwebz como consertar? como continuar? exemplos A Solução Designers Front-end Devs Back-end Devs Devem saber o básico (de Devem estar em contato Devem ter conhecimento preferência o intermediário) constante com os Designers, básico de Front-end de Front-end Development de preferência opinando construtivamente na Devem produzir as views e Deve ter uma noção e se interface imprimir os dados interessar pelo trabalho dos corretamente Back-end Developers Devem seguir as especificações do layout e Devem auxiliar o Front-end Devem comunicar das funcionalidades, Dev caso haja problemas ou alterações de layouts e consultando os Designers dificuldades com a view funcionalidades a todos o caso haja dificuldades quanto antes Devem ter uma noção e se Devem ter conhecimento na interessar pelo trabalho dos Devem estar dispostos a linguagem de Back-end, em Designers, esclarecendo simplificar o layout/ ferramentas de quaisquer dúvidas técnicas funcionalidade (e lutar por versionamento e o básico do isso contra o P.O.) básico de infra para rodar o ambiente

história da Interwebz como consertar? como continuar? exemplos A Solução Fim do egocentrismo na própria área

história da Interwebz como consertar? como continuar? exemplos A Solução “Eu não vejo diferença entre Front- end e Back-end developer. Pra mim, são todos developers e devem ser tratados igualmente.” Ronaldo Ferraz (@rferraz)

Como continuar? Sugestões de workﬂows e organização para manter a equipe sincronizada e funcionando

história da Interwebz como consertar? como continuar? exemplos 1. Wireframes

história da Interwebz como consertar? como continuar? exemplos 1. Wireframes Colombia Travel Fonte: www.wireframeshowcase.com

história da Interwebz como consertar? como continuar? exemplos 1. Wireframes Documentam as features (e desejos do P.O.) Ajudam o P.O. e o tester a enxergarem melhor as features Estruturam a página para que o HTML seja feito Documentam funcionalidades da interface Deixam claro aos Back-end Devs as funcionalidades do sistema e dados a serem impressos Facilitam a estimativa das histórias

história da Interwebz como consertar? como continuar? exemplos 2. Meetings Fonte: icanhascheezburguer.com

história da Interwebz como consertar? como continuar? exemplos 2. Meetings Daily meetings, plannings, reviews e retrospectives devem envolver todos (designers, front-end e back- end devs) Meetings que envolvem todos não devem entrar em detalhes técnicos – discutir isso separadamente tempo++ == stress++ == harmonia--

história da Interwebz como consertar? como continuar? exemplos 3. Tech talks

história da Interwebz como consertar? como continuar? exemplos 3. Tech talks Fonte: @taq - http://twitpic.com/2engls

história da Interwebz como consertar? como continuar? exemplos 3. Tech talks Compartilha o conhecimento entre todos Quebra a rotina do trabalho Promove skills sociais Slides/vídeos/anotações servem como referência posterior

história da Interwebz como consertar? como continuar? exemplos 4. Work ow

história da Interwebz como consertar? como continuar? exemplos 4. Work ow (Scrum) O wireframe de cada história deve ser feito separadamente em outra história, um sprint antes Histórias devem ter design, front e back-end simultâneos, em constante comunicação Testes devem ser constantes Todos devem tirar quaisquer dúvidas com o P.O. diretamente – design, front e back-end estão no mesmo “nível”

história da Interwebz como consertar? como continuar? exemplos 4. Work ow (Scrum) Sprint n-1 Sprint n Sprint n+1 Wireframe/UX Design Interface Dev. Bug ﬁx & deploy Back-end Dev. Testes Planning 1 & 2 Planning 1 & 2 Wireframe é apresentado e explicado Wireframe é apresentado e explicado

Exemplos O que deu certo e o que deu errado

Recapitulando...

Recapitulando... Design: Protótipos, Wireframes, Arquitetura, UX, Arte Back-end: Sistema, oferece toda a funcionalidade e dados necessários à interface Front-end: Interface que conecta o back-end ao Design

Recapitulando... Design, front e back-end devem formar um único time Todos devem compartilhar conhecimentos e acabar com barreiras entre as áreas Todos devem prontamente auxiliar outras áreas Todos devem se interessar pelo trabalho das outras áreas Todos devem cuidar para que todos façam suas tasks com perfeição

Recapitulando... Wireframes: devem ser feitos com antecedência, ajudam (muito) a mapear funcionalidades e fazer estimativas Meetings: rápidos, somente o necessário, envolvendo todos Meetings: discussões técnicas somente com a sua área Tech talks: ajudam a passar o conhecimento Workﬂow: todos simultaneamente na história, evitando o formato waterfall

Obrigado! Eduardo Shiota Yasuda - @shiota contato@eshiota.com www.eshiota.com

http://www.eshiota.com	26
http://eshiota.localhost	22
http://grupojcdesign.blogspot.com.br	6

O Design e a Interface no mundo da Programação

by Eduardo Shiota Yasuda on Aug 14, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 54

Statistics

O Design e a Interface no mundo da Programação — Presentation Transcript