tgi - criação de interface gráfica para rede social meio campo

Download TGI - Criação de Interface gráfica Para Rede Social Meio Campo

Post on 30-Oct-2014

8 views

Category:

Design

1 download

Embed Size (px)

DESCRIPTION

 

TRANSCRIPT

  • 1. Criao de
    Interface Grfica
    Para Rede Social
    Acadmica: Aline MariTataraHundensky
    Prof. Orientadora: Mary VonnyMerer

2. ContextualizaoObjetivos ProblemaDelimitaesMetodologiaFundamentaoAlternativasMemorialConclusoDesdobramentos
Contextualizao
Redes sociais crescem cada dia mais.
Brasil pas que mais acessa sites relacionados a comunidades.
[78,4% Brasil | 73,7 Japo | 62,9% Frana] (Folha Online de 2008 )
Segundo Manuel Casttels redes constituem a nova morfologia social de nossas sociedades e a difuso da lgica de redes modifica de forma substancial a operao e os resultados dos processos produtivos e de experincia, poder e cultura.
E Mattar diz que o aspecto social do futebol no Brasil tambm muito forte porque uma modalidade que exige baixo investimento em termos prticos. Na verdade, tendo uma bola e um grupo de pessoas, voc j tem futebol.
3. ContextualizaoObjetivos ProblemaDelimitaesMetodologiaFundamentaoAlternativasMemorialConclusoDesdobramentos
Contextualizao
possvel concluir que em um pas como o Brasil, no qual o futebol paixo
nacional e as redes sociais so mais acessadas pelos brasileiros, a unio dos dois
tem tudo para dar certo.
4. 5. 6. ContextualizaoObjetivos ProblemaDelimitaesMetodologiaFundamentaoAlternativasMemorialConclusoDesdobramentos
Objetivo Geral:
Desenvolver a interface grfica da rede social Meio Campo.

Objetivos Especficos:
Compreender e aplicar o conhecimento sobre redes sociais e futebol;
Aplicar os fundamentos do design para a concepo de uma interface adequada;
Aplicar critrios de ergonomia e usabilidade para desenvolver uma interface eficiente.
7. ContextualizaoObjetivos ProblemaDelimitaesMetodologiaFundamentaoAlternativasMemorialConclusoDesdobramentos
Hipteses
Problema de Projeto
Superar a barreira usabilidade versus identificao do pblico
Auto-explicativa
Fcil acesso
Mesmas tarefas em poucos clicks
8. ContextualizaoObjetivos ProblemaDelimitaesMetodologiaFundamentaoAlternativasMemorialConclusoDesdobramentos
Hipteses
Problema de Projeto
Superar a barreira usabilidade versus identificao do pblico
Auto-explicativa
Fcil acesso
Mesmas tarefas em poucos clicks
Hipteses
Usar wireframe padro para tornar mais familiar
Customizao da interface
9. ContextualizaoObjetivos ProblemaDelimitaesMetodologiaFundamentaoAlternativasMemorialConclusoDesdobramentos
Delimitaes do Projeto
Exclui-se do projeto:
rea de programao
Contedo
Novas Ferramentas
Que ser feito pela empresa Involves.
10. ContextualizaoObjetivos ProblemaDelimitaesMetodologiaFundamentaoAlternativasMemorialConclusoDesdobramentos
Cientfica Projetual
Metodologia Cientfica
Lakatos e Marconi;
bibliogrfica: para reconhecimento de informaes acerca do tema, cliente, produto, pblico-alvo e concorrentes.
pesquisa de observao: direta extensiva com aplicao de questionrios com perguntas abertas e de mltiplas escolha ao pblico-alvo,
anlise: interpretao e organizao dos resultados obtidos.
11. ContextualizaoObjetivos ProblemaDelimitaesMetodologiaFundamentaoAlternativasMemorialConclusoDesdobramentos
Cientfica Projetual
Metodologia Projetual
Radfahrer, que afirmou que cada designer tem uma metodologia prpria e particular, mas todas condizem mais ou menos mesma coisa.
Figura: Metodologia de Radfahrer
Fonte: Tese de doutorado de Mnica Stein (2003)
12. ContextualizaoObjetivos ProblemaDelimitaesMetodologiaFundamentaoAlternativasMemorialConclusoDesdobramentos
Cientfica ProjetualAdaptada
Metodologia Projetual Adaptada
Figura: Metodologia adaptada
Fonte: Arquivo Pessoal
13. ContextualizaoObjetivos ProblemaDelimitaesMetodologiaFundamentaoAlternativasMemorialConclusoDesdobramentos
Fundamentao Terica
Web 2.0
interatividade, troca de informaes, colaborao entre usurios
Rede Social
rede de computadores conecta uma rede de pessoas e organizao
Futebol
oportunidade prtica de exercitar a cidadania, projeto e desejo de coletividade
Empresa
2008, So Jos/SC - FabriCO, Rocler, Helio Print
14. ContextualizaoObjetivos ProblemaDelimitaesMetodologiaFundamentaoAlternativasMemorialConclusoDesdobramentos
Interface Grfica
designa o conjunto de programas e aparelhos materiais que permitem sistema informativo e seus usurios humanos. (Lvy)
Tipografia
est relacionada no s a legibilidade,mas tambm a consistncia das interfaces, sendo apontada como recurso que pode facilitar a orientao do usurio,ao lado de outros cdigos como a cor e demais elementos grficos -recomendaes de Nielsen , Bastian & Scapin, Schneiderman.
Cor
desafio, pois usurios tem preferncia em utilizar cores relacionadas aos times
15. ContextualizaoObjetivos ProblemaDelimitaesMetodologiaFundamentaoAlternativasMemorialConclusoDesdobramentos
Concorrentes

  • Kigol: os usurios se cadastram e passam a fazer parte de grupos, fruns e blogs

16. Rayleague: jogadores amadores se tornarem profissionais e dos clubes, agentes e treinadores 17. SFBr: possvel encontrar informao sobre time que torce, jogadores, campeonatos e instituies.-Peladeiro: voc pode ser o administrador de jogos de futebol pela internet.
-Orkut, Twitter e Facebook.
Estado do Design
-Notcias
-Interface voltada ao futebol
-Formas geomtricas
-Poucos cones
-Cores Neutras
18. ContextualizaoObjetivos ProblemaDelimitaesMetodologiaFundamentaoAlternativasMemorialConclusoDesdobramentos
Questionrio
Perfil usurio: homens, 19 a 27 anos, conectado por 3 horas,possuem ensino superior.
Redes que os usurios mais
se identificam: Orkut e Twitter.
Cor: 66% no deixariam de
acessar por causa da cor.
Smbolos: bola, gol e torcida
19. ContextualizaoObjetivos ProblemaDelimitaesMetodologiaFundamentaoAlternativasMemorialConclusoDesdobramentos
Conceituao
Conceituao
Segundo Baxter(1995) , necessrio transmitir certos sentimentos e emoes nos projetos, isso pode ser conseguido construindo-se diversos painis de imagens visuais.
20. ContextualizaoObjetivos ProblemaDelimitaesMetodologiaFundamentaoAlternativasMemorialConclusoDesdobramentos
estilo de vida, valores pessoais e sociais, costumes
21. ContextualizaoObjetivos ProblemaDelimitaesMetodologiaFundamentaoAlternativasMemorialConclusoDesdobramentos
as palavras do conceito so ilustradas com imagens
22. ContextualizaoObjetivos ProblemaDelimitaesMetodologiaFundamentaoAlternativasMemorialConclusoDesdobramentos
figuras que foram citadas na pesquisa, imagens que representem o projeto
23. ContextualizaoObjetivos ProblemaDelimitaesMetodologiaFundamentaoAlternativasMemorialConclusoDesdobramentos
EstruturaWireframeGerao de alternativas
Figura : Fluxograma da Rede
Fonte: Arquivo Pessoal
24. ContextualizaoObjetivos ProblemaDelimitaesMetodologiaFundamentaoAlternativasMemorialConclusoDesdobramentos
Estrutura Wireframe Gerao de alternativas
Figura: Wireframe Padro
Fonte: Felipe Memria(2005)
25. ContextualizaoObjetivos ProblemaDelimitaesMetodologiaFundamentaoAlternativasMemorialConclusoDesdobramentos
Estrutura Wireframe Gerao de alternativas
26. ContextualizaoObjetivos ProblemaDelimitaesMetodologiaFundamentaoAlternativasMemorialConclusoDesdobramentos
Estrutura WireframeGerao de alternativas
01 02 03 04 05
27. ContextualizaoObjetivos ProblemaDelimitaesMetodologiaFundamentaoAlternativasMemorialConclusoDesdobramentos
Estrutura WireframeGerao de alternativas
01 02 03 04 05
28. ContextualizaoObjetivos ProblemaDelimitaesMetodologiaFundamentaoAlternativasMemorialConclusoDesdobramentos
Estrutura WireframeGerao de alternativas
01 02 03 04 05
29. ContextualizaoObjetivos ProblemaDelimitaesMetodologiaFundamentaoAlternativasMemorialConclusoDesdobramentos
Estrutura WireframeGerao de alternativas
01 02 03 04 05
30. ContextualizaoObjetivos ProblemaDelimitaesMetodologiaFundamentaoAlternativasMemorialConclusoDesdobramentos
Estrutura WireframeGerao de alternativas
01 02 03 04 05
31. ContextualizaoObjetivos ProblemaDelimitaesMetodologiaFundamentaoAlternativasMemorialConclusoDesdobramentos
Estrutura WireframeGerao de alternativas
01 02 03 04 05
Alternativa Escolhida
32. ContextualizaoObjetivos ProblemaDelimitaesMetodologiaFundamentaoAlternativasMemorialConclusoDesdobramentos
Estrutura WireframeGerao de alternativas
01 02 03 04 05
Alternativa Escolhida
Tabela de critrio de avaliao sugerida por Baxter(2000, p.64)que tambm foi utilizada para selecionar a alternativa escolhida:
33. ContextualizaoObjetivos ProblemaDelimitaesMetodologiaFundamentaoAlternativasMemorialConclusoDesdobramentos
Cor Tipografia Gestalt Ergonomia Usabilidade
Cores
VERDE simbolicamente a representa do campo de futebol
BRANCO grande destaque.Utilizada sob os contedos, pois a mais indicada para a insero dos mesmos por possibilitar um melhor contraste com os textos e imagens, tornando o site menos cansativo viso do usurio.
E o GRAFITE, d equilbrio e estabilidade, por ser o equilbrio do preto e do branco.
34. ContextualizaoObjetivos ProblemaDelimitaesMetodologiaFundamentaoAlternativasMemorialConclusoDesdobramentos
Cor Tipografia Gestalt Ergonomia Usabilidade
Variao deCor e Fundo
Variao de cor e fundo
35. ContextualizaoObjetivos ProblemaDelimitaesMetodologiaFundamentaoAlternativasMemorialConclusoDesdobramentos
Cor Tipografia Gestalt Ergonomia Usabilidade
Variao de cor e fundo
36. ContextualizaoObjetivos ProblemaDelimitaesMetodologi

Recommended

View more >