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

juarezpaf@gmail.comhttp://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