![Page 1: Design de Interfaces para Programadores by juarezpaf](https://reader034.vdocuments.pub/reader034/viewer/2022042623/54b54e634a7959cd6c8b4705/html5/thumbnails/1.jpg)
Design de Interface para Programadores
1Friday, August 7, 2009
![Page 2: Design de Interfaces para Programadores by juarezpaf](https://reader034.vdocuments.pub/reader034/viewer/2022042623/54b54e634a7959cd6c8b4705/html5/thumbnails/2.jpg)
Muito Prazer
2Friday, August 7, 2009
![Page 3: Design de Interfaces para Programadores by juarezpaf](https://reader034.vdocuments.pub/reader034/viewer/2022042623/54b54e634a7959cd6c8b4705/html5/thumbnails/3.jpg)
3Friday, August 7, 2009
![Page 4: Design de Interfaces para Programadores by juarezpaf](https://reader034.vdocuments.pub/reader034/viewer/2022042623/54b54e634a7959cd6c8b4705/html5/thumbnails/4.jpg)
Design de Interfaces??Design de Interfaces é o design de aplicações e websites
com foco na experiência e interação do usuário.
Interação simples
Usabilidade
Foco no Usuário
AdaptávelArquitetura da Informação
Funcionalidades
Tipografia
Cores
Diagramação
4Friday, August 7, 2009
![Page 5: Design de Interfaces para Programadores by juarezpaf](https://reader034.vdocuments.pub/reader034/viewer/2022042623/54b54e634a7959cd6c8b4705/html5/thumbnails/5.jpg)
A importância da InterfaceA parte mais importante de um sistema é sua interface, pois é apenas ela que nossos clientes precisam entender.
http://html5gallery.com/2009/07/serene-destiny/
5Friday, August 7, 2009
![Page 6: Design de Interfaces para Programadores by juarezpaf](https://reader034.vdocuments.pub/reader034/viewer/2022042623/54b54e634a7959cd6c8b4705/html5/thumbnails/6.jpg)
A importância da Interface80% 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 Sitehttp://developer.yahoo.com/performance/rules.html
6Friday, August 7, 2009
![Page 7: Design de Interfaces para Programadores by juarezpaf](https://reader034.vdocuments.pub/reader034/viewer/2022042623/54b54e634a7959cd6c8b4705/html5/thumbnails/7.jpg)
Passo a passo do Processo1 - Definir necessidades dos usuários2 - Pesquisa e Inspiração3 - Estruturação4 - Interação5 - Visual6 - Entrega (Cliente Feliz =D)
*Testes de Usabilidade?
7Friday, August 7, 2009
![Page 8: Design de Interfaces para Programadores by juarezpaf](https://reader034.vdocuments.pub/reader034/viewer/2022042623/54b54e634a7959cd6c8b4705/html5/thumbnails/8.jpg)
Definindo necessidadesSolicite 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?
Detalhamento do que o cliente espera que o Design crie/construa.Basicamente um entendimento entre o cliente e você.
8Friday, August 7, 2009
![Page 9: Design de Interfaces para Programadores by juarezpaf](https://reader034.vdocuments.pub/reader034/viewer/2022042623/54b54e634a7959cd6c8b4705/html5/thumbnails/9.jpg)
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
9Friday, August 7, 2009
![Page 10: Design de Interfaces para Programadores by juarezpaf](https://reader034.vdocuments.pub/reader034/viewer/2022042623/54b54e634a7959cd6c8b4705/html5/thumbnails/10.jpg)
Pesquisa e InspiraçãoUma etapa importante, onde nós analisamos sites/apps semelhantes e quais são as áreas principais.
www.flickr.com/groups/webdesign-inspiration
10Friday, August 7, 2009
![Page 11: Design de Interfaces para Programadores by juarezpaf](https://reader034.vdocuments.pub/reader034/viewer/2022042623/54b54e634a7959cd6c8b4705/html5/thumbnails/11.jpg)
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.
11Friday, August 7, 2009
![Page 12: Design de Interfaces para Programadores by juarezpaf](https://reader034.vdocuments.pub/reader034/viewer/2022042623/54b54e634a7959cd6c8b4705/html5/thumbnails/12.jpg)
Estruturação da Interface
Papel e lápis
Ferramentas específicasQual devo escolher?
12Friday, August 7, 2009
![Page 13: Design de Interfaces para Programadores by juarezpaf](https://reader034.vdocuments.pub/reader034/viewer/2022042623/54b54e634a7959cd6c8b4705/html5/thumbnails/13.jpg)
Estruturação da InterfaceProtótipo App 1
Sketches
SitemapsNavegação
Wireframes
13Friday, August 7, 2009
![Page 14: Design de Interfaces para Programadores by juarezpaf](https://reader034.vdocuments.pub/reader034/viewer/2022042623/54b54e634a7959cd6c8b4705/html5/thumbnails/14.jpg)
Estruturação da InterfaceWireframes
Sitemaps = estrutura geral do site;
Wireframes = Estrutura de todas páginas individuais
http://www.flickr.com/photos/juarezpaf/3356841552/
14Friday, August 7, 2009
![Page 15: Design de Interfaces para Programadores by juarezpaf](https://reader034.vdocuments.pub/reader034/viewer/2022042623/54b54e634a7959cd6c8b4705/html5/thumbnails/15.jpg)
Estruturação da InterfaceWireframes
http://www.flickr.com/photos/fernandosergio/2989042857/
http://www.flickr.com/photos/fernandosergio/2989042861/
http://www.flickr.com/photos/fernandosergio/2989902622/
15Friday, August 7, 2009
![Page 16: Design de Interfaces para Programadores by juarezpaf](https://reader034.vdocuments.pub/reader034/viewer/2022042623/54b54e634a7959cd6c8b4705/html5/thumbnails/16.jpg)
Estruturação da InterfacePaper 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
16Friday, August 7, 2009
![Page 17: Design de Interfaces para Programadores by juarezpaf](https://reader034.vdocuments.pub/reader034/viewer/2022042623/54b54e634a7959cd6c8b4705/html5/thumbnails/17.jpg)
Navegação e Interação
http://www.alvit.de/css-showcase/
17Friday, August 7, 2009
![Page 18: Design de Interfaces para Programadores by juarezpaf](https://reader034.vdocuments.pub/reader034/viewer/2022042623/54b54e634a7959cd6c8b4705/html5/thumbnails/18.jpg)
EstéticaFixo ou Flexível? Grids
http://css-tricks.com/the-perfect-fluid-width-layout/
http://www.flickr.com/photos/juarezpaf/3356842580/
18Friday, August 7, 2009
![Page 19: Design de Interfaces para Programadores by juarezpaf](https://reader034.vdocuments.pub/reader034/viewer/2022042623/54b54e634a7959cd6c8b4705/html5/thumbnails/19.jpg)
Entrega da InterfaceAgora é 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/
19Friday, August 7, 2009
![Page 20: Design de Interfaces para Programadores by juarezpaf](https://reader034.vdocuments.pub/reader034/viewer/2022042623/54b54e634a7959cd6c8b4705/html5/thumbnails/20.jpg)
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/
20Friday, August 7, 2009
![Page 21: Design de Interfaces para Programadores by juarezpaf](https://reader034.vdocuments.pub/reader034/viewer/2022042623/54b54e634a7959cd6c8b4705/html5/thumbnails/21.jpg)
Padrões de Interfaces
21Friday, August 7, 2009
![Page 22: Design de Interfaces para Programadores by juarezpaf](https://reader034.vdocuments.pub/reader034/viewer/2022042623/54b54e634a7959cd6c8b4705/html5/thumbnails/22.jpg)
Padrões de InterfacesMaster/Details
Column BrowseSearch Result Filter Search
Spreadsheet Parallels PanelsWizards
http://tr.im/vVSo
22Friday, August 7, 2009
![Page 23: Design de Interfaces para Programadores by juarezpaf](https://reader034.vdocuments.pub/reader034/viewer/2022042623/54b54e634a7959cd6c8b4705/html5/thumbnails/23.jpg)
Padrões de Interfaces
http://tr.im/vVSw
23Friday, August 7, 2009
![Page 24: Design de Interfaces para Programadores by juarezpaf](https://reader034.vdocuments.pub/reader034/viewer/2022042623/54b54e634a7959cd6c8b4705/html5/thumbnails/24.jpg)
Padrões de InterfacesFront-End
http://jqueryui.com/http://flowplayer.org/tools/
24Friday, August 7, 2009
![Page 25: Design de Interfaces para Programadores by juarezpaf](https://reader034.vdocuments.pub/reader034/viewer/2022042623/54b54e634a7959cd6c8b4705/html5/thumbnails/25.jpg)
Padrões de InterfacesjQuery Tools
25Friday, August 7, 2009
![Page 26: Design de Interfaces para Programadores by juarezpaf](https://reader034.vdocuments.pub/reader034/viewer/2022042623/54b54e634a7959cd6c8b4705/html5/thumbnails/26.jpg)
Padrões de InterfacesjQuery UI
26Friday, August 7, 2009
![Page 27: Design de Interfaces para Programadores by juarezpaf](https://reader034.vdocuments.pub/reader034/viewer/2022042623/54b54e634a7959cd6c8b4705/html5/thumbnails/27.jpg)
Cases de Sucesso
Uma ideia + Rails + Empreendedorismo =
SUCESSO
Agosto 2007 (Adsense)
27Friday, August 7, 2009
![Page 28: Design de Interfaces para Programadores by juarezpaf](https://reader034.vdocuments.pub/reader034/viewer/2022042623/54b54e634a7959cd6c8b4705/html5/thumbnails/28.jpg)
Cases de Sucesso
Nova versão em brevedo Mapas&Questões
@mapasequestoes
28Friday, August 7, 2009
![Page 29: Design de Interfaces para Programadores by juarezpaf](https://reader034.vdocuments.pub/reader034/viewer/2022042623/54b54e634a7959cd6c8b4705/html5/thumbnails/29.jpg)
Cases de Sucesso
Uma ideia + PHP + Empreendedorismo =
SUCESSO
Ilha dosJogos
29Friday, August 7, 2009
![Page 30: Design de Interfaces para Programadores by juarezpaf](https://reader034.vdocuments.pub/reader034/viewer/2022042623/54b54e634a7959cd6c8b4705/html5/thumbnails/30.jpg)
Cases de Sucesso OxenteRails
30Friday, August 7, 2009
![Page 31: Design de Interfaces para Programadores by juarezpaf](https://reader034.vdocuments.pub/reader034/viewer/2022042623/54b54e634a7959cd6c8b4705/html5/thumbnails/31.jpg)
Cases de Sucesso OxenteRails
31Friday, August 7, 2009
![Page 32: Design de Interfaces para Programadores by juarezpaf](https://reader034.vdocuments.pub/reader034/viewer/2022042623/54b54e634a7959cd6c8b4705/html5/thumbnails/32.jpg)
Cases de Sucesso OxenteRails
32Friday, August 7, 2009
![Page 33: Design de Interfaces para Programadores by juarezpaf](https://reader034.vdocuments.pub/reader034/viewer/2022042623/54b54e634a7959cd6c8b4705/html5/thumbnails/33.jpg)
Cases de Sucesso
33Friday, August 7, 2009
![Page 34: Design de Interfaces para Programadores by juarezpaf](https://reader034.vdocuments.pub/reader034/viewer/2022042623/54b54e634a7959cd6c8b4705/html5/thumbnails/34.jpg)
Dicas para Railers
http://lesscss.org/
http://tr.im/vVNw
http://tr.im/vVO7
34Friday, August 7, 2009
![Page 35: Design de Interfaces para Programadores by juarezpaf](https://reader034.vdocuments.pub/reader034/viewer/2022042623/54b54e634a7959cd6c8b4705/html5/thumbnails/35.jpg)
Quotes of Design
http://quotesondesign.com/veerle-pieters/
35Friday, August 7, 2009
![Page 36: Design de Interfaces para Programadores by juarezpaf](https://reader034.vdocuments.pub/reader034/viewer/2022042623/54b54e634a7959cd6c8b4705/html5/thumbnails/36.jpg)
Recomendações!
http://buildconference.com/
Elliot Jay Stocks
http://frontenddesignconference.com/http://www.sitepoint.com/books/sexy1/ http://tr.im/vVMI
36Friday, August 7, 2009
![Page 37: Design de Interfaces para Programadores by juarezpaf](https://reader034.vdocuments.pub/reader034/viewer/2022042623/54b54e634a7959cd6c8b4705/html5/thumbnails/37.jpg)
HTML5 vence a batalhaCSS3
http://www.flickr.com/photos/irapuanmartinez/3767226843/
37Friday, August 7, 2009
![Page 38: Design de Interfaces para Programadores by juarezpaf](https://reader034.vdocuments.pub/reader034/viewer/2022042623/54b54e634a7959cd6c8b4705/html5/thumbnails/38.jpg)
Novidades em breve
http://www.fragmentosvisuais.com.br/
Vamos precisar do poder do Rails que está em todos vocês. =D
Follow us @frag_visuais38Friday, August 7, 2009
![Page 39: Design de Interfaces para Programadores by juarezpaf](https://reader034.vdocuments.pub/reader034/viewer/2022042623/54b54e634a7959cd6c8b4705/html5/thumbnails/39.jpg)
Juarez P. A. FilhoWeb Addict / Freelancer
[email protected]://twitter.com
http://juarezpaf.com
39Friday, August 7, 2009
![Page 40: Design de Interfaces para Programadores by juarezpaf](https://reader034.vdocuments.pub/reader034/viewer/2022042623/54b54e634a7959cd6c8b4705/html5/thumbnails/40.jpg)
http://www.flickr.com/photos/anthony_turba/3574311577/
Dúvidas, Sugestões ou Críticas
40Friday, August 7, 2009