Embed Size (px)
DESCRIPTION
Aula sobre introdução ao desenvolvimento de interfaces, onde são introduzidos assuntos como o processo de desenvolvimento de um site, arquitetura de informação, sitemap, wireframe.
Citation preview
Desenvolvimento de Interface
ARQUITETURA DE INFORMAÇÃO (A.I.)
O Information Architecture Institute define Arquitetura de Informação como:
O Information Architecture Institute define Arquitetura de Informação como:
A arte e ciência de organizar, categorizar e rotular sites afim de melhorar a experiência do usuário através da usabilidade e legibilidade de
conteúdo.
Organizar de uma forma que faça sentido e seja natural
Organizar de uma forma que faça sentido e seja natural
User Experience DesignersDesigners de InteraçãoEspecialistas em Usabilidade
AI também podem ser conhecidos como:
ENVOLVE DIVERSOS CONHECIMENTOS
O QUE FAZEM OS ARQUITETOS DE INFORMAÇÃO?
Brinks
wireframes
SitemapsPersonasFluxograma
Levantamento de requisitos Briefing Avaliação heurísticaPesquisas etnográficas
Wireframes SitemapsPersonasFluxograma
Levantamento de requisitos Briefing Avaliação heurísticaPesquisas etnográficas
FERRAMENTAS
FireworksAxureVisioMindmanagerCacooLucidchartExcel
FireworksAxureVisioMindmanagerCacooLucidchartExcel
BRIEFING
BRIEFING
Passagem de informação de um ponto para outroDa pessoa certa e para a pessoa certaDescrição, problemas, oportunidades, objetivos, etcBase do planejamento.
CLIENTE EQUIPEARQUITETO DE INFORMAÇÃO
QUAL UM DOS MOTIVOS DE SUCESSO DOS MELHORES VENDEDORES?
QUAL UM DOS MOTIVOS DE SUCESSO DOS MELHORES VENDEDORES?
Eles conhecem o que vendem
CRIAÇÃO DO BRIEFING
Deve ser um documento simples e objetivoUm briefing muito grande não é seletivoum briefing muito curto é subjetivo
CRIAÇÃO DE BRIEFING
SITEMAP
Diagrama de navegaçãoEstrutura de páginas do siteLiteralmente um mapa do siteImportante em SEO
SITEMAP
WIREFRAME
ProtótipoMockup
WIREFRAME
O esqueleto dos projetosComo o objeto final será Feito da maneira mais simples possívelMostrando o essencialRascunho, sem cores ou imagens.
WIREFRAME
Entendimento dos requisitos que foram Recolhidos junto ao cliente com relação as Funções e elementos que deverá conter
WIREFRAME
EstáticosNavegáveis
WIREFRAME
DICAS
Não tenha medo Papel e canetaTeste seu wireframepeça opiniões de outras pessoasInspire-se
DICAS PARA WIREFRAME
FERRAMENTAS
PhotoshopFireworksPower PointMockupScreensAxureBalsamiq MockupsPencilFlairBuilderForeUIOmniGraffle
FERRAMENTAS - DESKTOP
WireframeSketcherJustinmind PrototyperDENIMEasyPrototypeSketchFlowDesignerVistaMockAppGUI Design StudioOverSiteMicrosoft VisioFluidIA
iPlotzProtoShareMockFlowHotGlooMockingbirdCacooJumpchartGliffyLovely ChartsLumzy
FERRAMENTAS - ONLINE
JustProtoPidocoiPhone Mockup
BriefingPropostaPesquisa de satisfaçãoContratoAprovação de etapa
MODELOS DE DOCUMENTOS
Links e referências: http://arquiteturadeinformacao.comhttp://www.iainstitute.org/http://oxox.co.uk/css3/http://www.informationisbeautiful.net/http://www.uxpasaopaulo.com.br/http://www.usability.gov/http://www.revistawide.com.br/http://fireworkswireframingkit.com/http://wireframes.linowski.ca/http://visitmix.com/articles/the-future-of-wireframeshttp://blog.teamtreehouse.com/20-steps-to-better-wireframinghttp://www.wireframeshowcase.com/http://www.xml-sitemaps.com/
http://www.sitemaps.org/pt_BR/
