Design de Interface para
                             Programadores



Friday, August 7, 2009                             ...
Muito Prazer




Friday, August 7, 2009   2
Friday, August 7, 2009   3
Design de Interfaces??
      Design de Interfaces é o design de aplicações e websites
         com foco na experiência e i...
A importância da Interface
          A parte mais importante de um sistema é sua interface,
         pois é apenas ela que...
A importância da Interface
      80% do tempo gasto pelo visitante para baixar uma página
                é gasto no front...
Passo a passo do Processo
                         1 - Definir necessidades dos usuários
                         2 - Pesqu...
Definindo necessidades                                   Detalhamento do que o
                                            ...
Definindo necessidades
    “Eu gostaria de um site. E quero que o visual seja arrojado
    e com um ar moderno. Além disso ...
Pesquisa e Inspiração
    Uma etapa importante, onde nós analisamos sites/apps
    semelhantes e quais são as áreas princi...
Pesquisa e Inspiração

    Quanto mais conhecemos interfaces, mais nossa mente se
    torna aberta para novas possibilidad...
Estruturação da Interface



                         Papel e lápis

                                         Ferramentas ...
Estruturação da Interface
                                      Protótipo App 1




         Sketches
                 Nav...
Estruturação da Interface
                           Wireframes
                                                          ...
Estruturação da Interface
                           Wireframes



                                                       ...
Estruturação da Interface
                     Paper Prototyping
                         É um processo onde você
        ...
Navegação e Interação




      http://www.alvit.de/css-showcase/




Friday, August 7, 2009                    17
Estética
             Fixo ou Flexível?                                                  Grids




                       ...
Entrega da Interface
    Agora é hora de pegar todo material e
    passar para quem vai codificá-lo. Alguns
    pontos para...
Versão Mobile??
    Precisa de um estudo específico sobre que tipo de
    suporte você vai oferecer.




                  ...
Padrões de Interfaces




Friday, August 7, 2009      21
Padrões de Interfaces
                         Master/Details




                                          Column Browse
...
Padrões de Interfaces




     http://tr.im/vVSw



Friday, August 7, 2009      23
Padrões de Interfaces
                                                              Front-End


                         h...
Padrões de Interfaces
                            jQuery Tools




Friday, August 7, 2009                     25
Padrões de Interfaces
                            jQuery UI




Friday, August 7, 2009                  26
Cases de Sucesso



                          Uma ideia + Rails +
                         Empreendedorismo =
            ...
Cases de Sucesso



                         Nova versão em breve
                         do Mapas&Questões


           ...
Cases de Sucesso
                                Ilha dos
                                   Jogos
                       ...
Cases de Sucesso     OxenteRails




Friday, August 7, 2009                 30
Cases de Sucesso     OxenteRails




Friday, August 7, 2009                 31
Cases de Sucesso     OxenteRails




Friday, August 7, 2009                 32
Cases de Sucesso




Friday, August 7, 2009   33
Dicas para Railers
                         http://tr.im/vVNw




                                                        ...
Quotes of Design




                         http://quotesondesign.com/veerle-pieters/




Friday, August 7, 2009        ...
Recomendações!




            http://www.sitepoint.com/books/sexy1/   http://tr.im/vVMI                                  ...
HTML5 vence a batalhaCSS3




                                http://www.flickr.com/photos/irapuanmartinez/3767226843/

Fr...
Novidades em breve
                         Vamos precisar do
                         poder do Rails que está
           ...
Juarez P. A. Filho
                         Web Addict / Freelancer
                          juarezpaf@gmail.com
        ...
Dúvidas, Sugestões ou Críticas
                         http://www.flickr.com/photos/anthony_turba/3574311577/




Friday,...
Upcoming SlideShare
Loading in...5
×

Design de Interfaces para Programadores by juarezpaf

1,402

Published on

Mostrando algumas dicas de como programadores podem melhorar a interface de seus sistemas através de utilização de técnicas simples, tornando seus sistemas mais agradáveis para os usuários.
Apresentação realizada no http://oxenterails.com em 7 de Agosto de 2009.
Por Juarez P. A. Filho (http://twitter.com/juarezpaf.com)

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,402
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
82
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Design de Interfaces para Programadores by juarezpaf

  1. 1. Design de Interface para Programadores Friday, August 7, 2009 1
  2. 2. Muito Prazer Friday, August 7, 2009 2
  3. 3. Friday, August 7, 2009 3
  4. 4. Design de Interfaces?? Design de Interfaces é o design de aplicações e websites com foco na experiência e interação do usuário. Tipografia Diagramação Foco no Usuário Usabilidade Arquitetura da Informação Cores Adaptável Interação simples Funcionalidades Friday, August 7, 2009 4
  5. 5. A importância da Interface A parte mais importante de um sistema é sua interface, pois é apenas ela que nossos clientes precisam entender. http://html5gallery.com/2009/07/serene-destiny/ Friday, August 7, 2009 5
  6. 6. A importância da Interface 80% do tempo gasto pelo visitante para baixar uma página é gasto no front-end, carregando: Imagens, CSS, JS, SWF, etc. Best Practices for Speeding Up Your Web Site http://developer.yahoo.com/performance/rules.html Friday, August 7, 2009 6
  7. 7. Passo a passo do Processo 1 - Definir necessidades dos usuários 2 - Pesquisa e Inspiração 3 - Estruturação 4 - Interação 5 - Visual 6 - Entrega (Cliente Feliz =D) *Testes de Usabilidade? Friday, August 7, 2009 7
  8. 8. Definindo necessidades Detalhamento do que o cliente espera que o Design crie/construa. Basicamente um entendimento entre o cliente e você. Solicite um Briefing e faça questionamentos como: - Qual problema temos que resolver? - Vamos focar em algum nicho? - Me informe alguns sites e explique o motivo. Qual o orçamento e tempo de entrega do projeto? O que é mais importante para seus futuros usuários? Friday, August 7, 2009 8
  9. 9. Definindo necessidades “Eu gostaria de um site. E quero que o visual seja arrojado e com um ar moderno. Além disso precisa ser super fácil de usar e que os usuários fiquem satisfeitos” Ass.: Seu próximo cliente. Faça ele melhorar o Briefing =D http://flickr.com/photos/32392356@N04/3401223859 Friday, August 7, 2009 9
  10. 10. Pesquisa e Inspiração Uma etapa importante, onde nós analisamos sites/apps semelhantes e quais são as áreas principais. www.flickr.com/groups/webdesign-inspiration Friday, August 7, 2009 10
  11. 11. Pesquisa e Inspiração Quanto mais conhecemos interfaces, mais nossa mente se torna aberta para novas possibilidades, assim podemos desenvolver interfaces que sejam agradáveis e ao mesmo tempo inovadoras. Conheça e combine padrões. Friday, August 7, 2009 11
  12. 12. Estruturação da Interface Papel e lápis Ferramentas específicas Qual devo escolher? Friday, August 7, 2009 12
  13. 13. Estruturação da Interface Protótipo App 1 Sketches Navegação Sitemaps Wireframes Friday, August 7, 2009 13
  14. 14. Estruturação da Interface Wireframes Sitemaps = estrutura geral do site; Wireframes = Estrutura de todas páginas individuais http://www.flickr.com/photos/juarezpaf/3356841552/ Friday, August 7, 2009 14
  15. 15. Estruturação da Interface Wireframes http://www.flickr.com/photos/fernandosergio/2989042861/ http://www.flickr.com/photos/fernandosergio/2989902622/ http://www.flickr.com/photos/fernandosergio/2989042857/ Friday, August 7, 2009 15
  16. 16. Estruturação da Interface Paper Prototyping É um processo onde você imprime ou desenha os elementos e posiciona os objetos de forma a encontrar um melhor posicionioamento. www.alistapart.com/articles/paperprototyping Friday, August 7, 2009 16
  17. 17. Navegação e Interação http://www.alvit.de/css-showcase/ Friday, August 7, 2009 17
  18. 18. Estética Fixo ou Flexível? Grids http://css-tricks.com/the-perfect-fluid-width-layout/ http://www.flickr.com/photos/juarezpaf/3356842580/ Friday, August 7, 2009 18
  19. 19. Entrega da Interface Agora é hora de pegar todo material e passar para quem vai codificá-lo. Alguns pontos para facilitar as próximas tarefas: - Disponibilizar todas fontes utilizadas; - Entregar em formato simples a paleta de cores utilizada - Enviar em arquivo compactado todas imagens; - Colocar padrão de tamanho de fontes http://www.flickr.com/photos/juarezpaf/3356024627/ Friday, August 7, 2009 19
  20. 20. Versão Mobile?? Precisa de um estudo específico sobre que tipo de suporte você vai oferecer. http://www.teehanlax.com/blog/?p=447 http://www.opera.com/mini/ Friday, August 7, 2009 20
  21. 21. Padrões de Interfaces Friday, August 7, 2009 21
  22. 22. Padrões de Interfaces Master/Details Column Browse Search Result Filter Search Spreadsheet Wizards Parallels Panels http://tr.im/vVSo Friday, August 7, 2009 22
  23. 23. Padrões de Interfaces http://tr.im/vVSw Friday, August 7, 2009 23
  24. 24. Padrões de Interfaces Front-End http://flowplayer.org/tools/ http://jqueryui.com/ Friday, August 7, 2009 24
  25. 25. Padrões de Interfaces jQuery Tools Friday, August 7, 2009 25
  26. 26. Padrões de Interfaces jQuery UI Friday, August 7, 2009 26
  27. 27. Cases de Sucesso Uma ideia + Rails + Empreendedorismo = SUCESSO Agosto 2007 (Adsense) Friday, August 7, 2009 27
  28. 28. Cases de Sucesso Nova versão em breve do Mapas&Questões @mapasequestoes Friday, August 7, 2009 28
  29. 29. Cases de Sucesso Ilha dos Jogos Uma ideia + PHP + Empreendedorismo = SUCESSO Friday, August 7, 2009 29
  30. 30. Cases de Sucesso OxenteRails Friday, August 7, 2009 30
  31. 31. Cases de Sucesso OxenteRails Friday, August 7, 2009 31
  32. 32. Cases de Sucesso OxenteRails Friday, August 7, 2009 32
  33. 33. Cases de Sucesso Friday, August 7, 2009 33
  34. 34. Dicas para Railers http://tr.im/vVNw http://lesscss.org/ http://tr.im/vVO7 Friday, August 7, 2009 34
  35. 35. Quotes of Design http://quotesondesign.com/veerle-pieters/ Friday, August 7, 2009 35
  36. 36. Recomendações! http://www.sitepoint.com/books/sexy1/ http://tr.im/vVMI http://frontenddesignconference.com/ http://buildconference.com/ Elliot Jay Stocks Friday, August 7, 2009 36
  37. 37. HTML5 vence a batalhaCSS3 http://www.flickr.com/photos/irapuanmartinez/3767226843/ Friday, August 7, 2009 37
  38. 38. Novidades em breve Vamos precisar do poder do Rails que está em todos vocês. =D http://www.fragmentosvisuais.com.br/ Follow us @frag_visuais Friday, August 7, 2009 38
  39. 39. Juarez P. A. Filho Web Addict / Freelancer juarezpaf@gmail.com http://twitter.com http://juarezpaf.com Friday, August 7, 2009 39
  40. 40. Dúvidas, Sugestões ou Críticas http://www.flickr.com/photos/anthony_turba/3574311577/ Friday, August 7, 2009 40
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×