Design de Interfaces para Programadores by juarezpaf

Design de Interface para Programadores Friday, August 7, 2009 1

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 interação do usuário. Tipograﬁa Diagramação Foco no Usuário Usabilidade Arquitetura da Informação Cores Adaptável Interação simples Funcionalidades Friday, August 7, 2009 4

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

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

Passo a passo do Processo 1 - Deﬁnir 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

Deﬁnindo necessidades Detalhamento do que o cliente espera que o Design crie/construa. Basicamente um entendimento entre o cliente e você. Solicite um Brieﬁng 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

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

Pesquisa e Inspiração Uma etapa importante, onde nós analisamos sites/apps semelhantes e quais são as áreas principais. www.ﬂickr.com/groups/webdesign-inspiration Friday, August 7, 2009 10

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

Estruturação da Interface Papel e lápis Ferramentas especíﬁcas Qual devo escolher? Friday, August 7, 2009 12

Estruturação da Interface Protótipo App 1 Sketches Navegação Sitemaps Wireframes Friday, August 7, 2009 13

Estruturação da Interface Wireframes Sitemaps = estrutura geral do site; Wireframes = Estrutura de todas páginas individuais http://www.ﬂickr.com/photos/juarezpaf/3356841552/ Friday, August 7, 2009 14

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

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

Navegação e Interação http://www.alvit.de/css-showcase/ Friday, August 7, 2009 17

Estética Fixo ou Flexível? Grids http://css-tricks.com/the-perfect-ﬂuid-width-layout/ http://www.ﬂickr.com/photos/juarezpaf/3356842580/ Friday, August 7, 2009 18

Entrega da Interface Agora é hora de pegar todo material e passar para quem vai codiﬁcá-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.ﬂickr.com/photos/juarezpaf/3356024627/ Friday, August 7, 2009 19

Versão Mobile?? Precisa de um estudo especíﬁco 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

Padrões de Interfaces Friday, August 7, 2009 21

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

Padrões de Interfaces http://tr.im/vVSw Friday, August 7, 2009 23

Padrões de Interfaces Front-End http://ﬂowplayer.org/tools/ http://jqueryui.com/ Friday, August 7, 2009 24

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 = SUCESSO Agosto 2007 (Adsense) Friday, August 7, 2009 27

Cases de Sucesso Nova versão em breve do Mapas&Questões @mapasequestoes Friday, August 7, 2009 28

Cases de Sucesso Ilha dos Jogos Uma ideia + PHP + Empreendedorismo = SUCESSO Friday, August 7, 2009 29

Cases de Sucesso OxenteRails Friday, August 7, 2009 30

Cases de Sucesso Friday, August 7, 2009 33

Dicas para Railers http://tr.im/vVNw http://lesscss.org/ http://tr.im/vVO7 Friday, August 7, 2009 34

Quotes of Design http://quotesondesign.com/veerle-pieters/ Friday, August 7, 2009 35

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

HTML5 vence a batalhaCSS3 http://www.flickr.com/photos/irapuanmartinez/3767226843/ Friday, August 7, 2009 37

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

Juarez P. A. Filho Web Addict / Freelancer juarezpaf@gmail.com http://twitter.com http://juarezpaf.com Friday, August 7, 2009 39

Dúvidas, Sugestões ou Críticas http://www.flickr.com/photos/anthony_turba/3574311577/ Friday, August 7, 2009 40

Design de Interfaces para Programadores by juarezpaf

by Juarez P. A. Filho on Aug 07, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 7

Statistics

Design de Interfaces para Programadores by juarezpaf — Presentation Transcript

http://cogumm.dreamhosters.com	5
http://www.slideshare.net	2