design de interfaces para programadores by juarezpaf
DESCRIPTION
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)TRANSCRIPT
Design de Interface para Programadores
1Friday, August 7, 2009
Muito Prazer
2Friday, August 7, 2009
3Friday, August 7, 2009
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
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
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
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
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
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
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
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
Estruturação da Interface
Papel e lápis
Ferramentas específicasQual devo escolher?
12Friday, August 7, 2009
Estruturação da InterfaceProtótipo App 1
Sketches
SitemapsNavegação
Wireframes
13Friday, August 7, 2009
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
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
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
Navegação e Interação
http://www.alvit.de/css-showcase/
17Friday, August 7, 2009
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
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
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
Padrões de Interfaces
21Friday, August 7, 2009
Padrões de InterfacesMaster/Details
Column BrowseSearch Result Filter Search
Spreadsheet Parallels PanelsWizards
http://tr.im/vVSo
22Friday, August 7, 2009
Padrões de Interfaces
http://tr.im/vVSw
23Friday, August 7, 2009
Padrões de InterfacesFront-End
http://jqueryui.com/http://flowplayer.org/tools/
24Friday, August 7, 2009
Padrões de InterfacesjQuery Tools
25Friday, August 7, 2009
Padrões de InterfacesjQuery UI
26Friday, August 7, 2009
Cases de Sucesso
Uma ideia + Rails + Empreendedorismo =
SUCESSO
Agosto 2007 (Adsense)
27Friday, August 7, 2009
Cases de Sucesso
Nova versão em brevedo Mapas&Questões
@mapasequestoes
28Friday, August 7, 2009
Cases de Sucesso
Uma ideia + PHP + Empreendedorismo =
SUCESSO
Ilha dosJogos
29Friday, August 7, 2009
Cases de Sucesso OxenteRails
30Friday, August 7, 2009
Cases de Sucesso OxenteRails
31Friday, August 7, 2009
Cases de Sucesso OxenteRails
32Friday, August 7, 2009
Cases de Sucesso
33Friday, August 7, 2009
Dicas para Railers
http://lesscss.org/
http://tr.im/vVNw
http://tr.im/vVO7
34Friday, August 7, 2009
Quotes of Design
http://quotesondesign.com/veerle-pieters/
35Friday, August 7, 2009
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
HTML5 vence a batalhaCSS3
http://www.flickr.com/photos/irapuanmartinez/3767226843/
37Friday, August 7, 2009
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
Juarez P. A. FilhoWeb Addict / Freelancer
[email protected]://twitter.com
http://juarezpaf.com
39Friday, August 7, 2009
http://www.flickr.com/photos/anthony_turba/3574311577/
Dúvidas, Sugestões ou Críticas
40Friday, August 7, 2009