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.
Tipografia
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 - 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

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

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.flickr.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íficas
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.flickr.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-fluid-width-layout/
http://www.flickr.com/photos/juarezpaf/3356842580/
Friday, August 7, 2009 18

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

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

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://flowplayer.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 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
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