Your SlideShare is downloading. ×
0
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
TGI - Criação de Interface gráfica Para Rede Social Meio Campo
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

1,930

Published on

Published in: Design, Technology, Travel
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,930
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
37
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Criação de <br />Interface Gráfica<br />Para Rede Social <br />Acadêmica: Aline MariêTataraHundensky<br />Prof. Orientadora: Mary VonnyMeürer<br />
  • 2. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos<br />Contextualização<br /> Redes sociais crescem cada dia mais.<br /> Brasil país que mais acessa sites relacionados a comunidades. <br /> [78,4% Brasil | 73,7 Japão | 62,9% França] (Folha Online de 2008 )<br /> Segundo Manuel Casttels “redes constituem a nova morfologia social de nossas sociedades e a difusão da lógica de redes modifica de forma substancial a operação e os resultados dos processos produtivos e de experiência, poder e cultura.”<br /> E Mattar diz que o aspecto social do futebol no Brasil também é muito forte porque é uma modalidade que exige baixo investimento em termos práticos. Na verdade, tendo uma bola e um grupo de pessoas, você já tem futebol.<br />
  • 3. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos<br />Contextualização<br /> É possível concluir que em um país como o Brasil, no qual o futebol é “paixão <br /> nacional” e as redes sociais são mais acessadas pelos brasileiros, a união dos dois <br /> tem tudo para dar certo.<br />
  • 4.
  • 5.
  • 6. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos<br />Objetivo Geral:<br />Desenvolver a interface gráfica da rede social Meio Campo.<br /> <br />Objetivos Específicos:<br /> Compreender e aplicar o conhecimento sobre redes sociais e futebol;<br /> Aplicar os fundamentos do design para a concepção de uma interface adequada;<br /> Aplicar critérios de ergonomia e usabilidade para desenvolver uma interface eficiente. <br />
  • 7. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos<br />Hipóteses<br />Problema de Projeto<br /> Superar a barreira usabilidade versus identificação do público<br />Auto-explicativa<br /> Fácil acesso<br /> Mesmas tarefas em poucos clicks<br />
  • 8. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos<br />Hipóteses<br />Problema de Projeto<br /> Superar a barreira usabilidade versus identificação do público<br />Auto-explicativa<br /> Fácil acesso<br /> Mesmas tarefas em poucos clicks<br />Hipóteses<br />Usar wireframe padrão para tornar mais familiar<br /> Customização da interface<br />
  • 9. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos<br />Delimitações do Projeto<br /> Exclui-se do projeto:<br /> Área de programação<br /> Conteúdo<br /> Novas Ferramentas<br /> Que será feito pela empresa Involves.<br />
  • 10. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos<br />Científica Projetual<br />Metodologia Científica<br />Lakatos e Marconi; <br />bibliográfica: para reconhecimento de informações acerca do tema, cliente, produto, público-alvo e concorrentes.<br />pesquisa de observação: direta extensiva com aplicação de questionários com perguntas abertas e de múltiplas escolha ao público-alvo,<br />análise: interpretação e organização dos resultados obtidos.<br />
  • 11. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos<br />Científica Projetual<br />Metodologia Projetual<br />Radfahrer, que afirmou que “cada designer tem uma metodologia própria e particular, mas todas condizem mais ou menos à mesma coisa.<br />Figura: Metodologia de Radfahrer<br />Fonte: Tese de doutorado de Mônica Stein (2003)<br />
  • 12. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos<br />Científica ProjetualAdaptada<br />Metodologia Projetual Adaptada<br />Figura: Metodologia adaptada<br />Fonte: Arquivo Pessoal<br />
  • 13. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos<br />Fundamentação Teórica<br />Web 2.0<br /> interatividade, troca de informações, colaboração entre usuários<br />Rede Social<br />rede de computadores conecta uma rede de pessoas e organização<br />Futebol<br /> oportunidade prática de exercitar a cidadania, é projeto e desejo de coletividade<br />Empresa<br /> 2008, São José/SC - FabriCO, Rocler, Helio Print<br />
  • 14. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos<br />Interface Gráfica<br /> designa o conjunto de programas e aparelhos materiais que permitem sistema informativo e seus usuários humanos. (Lévy)<br />Tipografia<br /> está relacionada não só a legibilidade,mas também a consistência das interfaces, sendo apontada como recurso que pode facilitar a orientação do usuário,ao lado de outros códigos como a cor e demais elementos gráficos - recomendações de Nielsen , Bastian & Scapin, Schneiderman.<br />Cor<br /> desafio, pois usuários tem preferência em utilizar cores relacionadas aos times <br />
  • 15. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos<br />Concorrentes<br /><ul><li>Kigol: os usuários se cadastram e passam a fazer parte de grupos, fóruns e blogs
  • 16. Rayleague: jogadores amadores se tornarem profissionais e dos clubes, agentes e treinadores
  • 17. SFBr: é possível encontrar informação sobre time que torce, jogadores, campeonatos e instituições.</li></ul> -Peladeiro: você pode ser o administrador de jogos de futebol pela internet. <br /> -Orkut, Twitter e Facebook.<br />Estado do Design<br />-Notícias <br />-Interface voltada ao futebol<br />-Formas geométricas<br />-Poucos ícones<br />-Cores Neutras <br />
  • 18. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos<br />Questionário<br />Perfil usuário: homens, 19 a 27 anos, conectado por 3 horas, possuem ensino superior.<br />Redes que os usuários mais <br />se identificam: Orkut e Twitter.<br /> Cor: 66% não deixariam de<br /> acessar por causa da cor.<br />Símbolos: bola, gol e torcida <br />
  • 19. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos<br />Conceituação<br />Conceituação<br /> Segundo Baxter(1995) , é necessário transmitir certos sentimentos e emoções nos projetos, isso pode ser conseguido construindo-se diversos painéis de imagens visuais. <br />
  • 20. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos<br />estilo de vida, valores pessoais e sociais, costumes<br />
  • 21. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos<br />as palavras do conceito são ilustradas com imagens<br />
  • 22. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos<br />figuras que foram citadas na pesquisa, imagens que representem o projeto<br />
  • 23. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos<br />Estrutura Wireframe Geração de alternativas <br />Figura : Fluxograma da Rede<br />Fonte: Arquivo Pessoal <br />
  • 24. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos<br />Estrutura Wireframe Geração de alternativas <br />Figura: Wireframe Padrão <br />Fonte: Felipe Memória(2005) <br />
  • 25. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos<br />Estrutura Wireframe Geração de alternativas <br />
  • 26. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos<br />Estrutura WireframeGeração de alternativas <br />01 02 03 04 05<br />
  • 27. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos<br />Estrutura WireframeGeração de alternativas <br />01 02 03 04 05<br />
  • 28. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos<br />Estrutura WireframeGeração de alternativas <br />01 02 03 04 05<br />
  • 29. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos<br />Estrutura WireframeGeração de alternativas <br />01 02 03 04 05<br />
  • 30. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos<br />Estrutura WireframeGeração de alternativas <br />01 02 03 04 05<br />
  • 31. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos<br />Estrutura WireframeGeração de alternativas <br />01 02 03 04 05<br />Alternativa Escolhida<br />
  • 32. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos<br />Estrutura WireframeGeração de alternativas <br />01 02 03 04 05<br />Alternativa Escolhida<br />Tabela de critério de avaliação sugerida por Baxter(2000, p.64)que também foi utilizada para selecionar a alternativa escolhida: <br />
  • 33. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos<br />Cor Tipografia Gestalt Ergonomia Usabilidade<br />Cores<br /> VERDE simbolicamente a representa do campo de futebol<br /> BRANCO grande destaque. Utilizada sob os conteúdos, pois é a mais indicada para a inserção dos mesmos por possibilitar um melhor contraste com os textos e imagens, tornando o site menos cansativo à visão do usuário. <br /> E o GRAFITE, dá equilíbrio e estabilidade, por ser o equilíbrio do preto e do branco.<br />
  • 34. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos<br />Cor Tipografia Gestalt Ergonomia Usabilidade<br />Variação de Cor e Fundo<br />Variação de cor e fundo<br />
  • 35. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos<br />Cor Tipografia Gestalt Ergonomia Usabilidade<br />Variação de cor e fundo<br />
  • 36. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos<br />Cor Tipografia Gestalt Ergonomia Usabilidade<br />Variação de cor e fundo<br />
  • 37. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos<br />Cor Tipografia Gestalt Ergonomia Usabilidade<br />Variação de cor e fundo<br />
  • 38. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos<br />Cor Tipografia Gestalt Ergonomia Usabilidade<br />Variação de cor e fundo<br />
  • 39. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos<br />Cor Tipografia Gestalt Ergonomia Usabilidade<br />Variação de cor e fundo<br />
  • 40. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos<br />Cor Tipografia Gestalt Ergonomia Usabilidade<br />Variação de cor e fundo<br />
  • 41. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos<br />Cor TipografiaGestalt Ergonomia Usabilidade<br />Tipografia<br />Neste projeto foram utilizadas duas fontes, EstrangeloEdessae Verdana. <br />EstrangeloEdessa:títulos e texto curtos. <br />Verdana: textos longos e outras informações. <br />EstrangeloEdessa<br />Verdana<br />
  • 42. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos<br />CorTipografia GestaltErgonomia Usabilidade<br />Gestalt<br />Unidade: O site é formado por várias unidades, como: a cor do fundo, a marca da empresa, as formas geométricas, os textos, menu.<br />Segregação: Divisão em fundo, menu, conteúdo e rodapé, estas mesmas unidades segregam-se nas unidades comentadas no item anterior, que também segregam-se em novas unidades até que se possa esgotar a percepção das unidades visíveis. <br />
  • 43. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos<br />CorTipografia GestaltErgonomia Usabilidade<br />Gestalt<br />Continuidade: As linhas que fecham as caixas dão <br />sensação de continuidade. <br />Proximidade: Caixas de conteúdo <br />Semelhança: Cores e formas<br />
  • 44. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos<br />CorTipografia GestaltErgonomia Usabilidade<br />Ergonomia<br />Informacional<br />Legibilidade: fundo do site composto por cor e imagem, isolado das informações.<br />Leiturabilidade: textos curtos e diretos.<br />Pregnância Visual: segue o mesmo padrão em todas as páginas.<br />De interfaces (Bastien e Scapin, 1993)<br />Critérios e Subcritérios<br />Condução: usuário sabe sua localização <br />4 subcritérios: Presteza – indica o caminho, cores e botões.<br />Agrupamento/Distinção de itens – box conteúdo, amigos, times, prêmios.<br />Feedback Imediato – resposta de ação.<br />
  • 45. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos<br />CorTipografia Gestalt Ergonomia Usabilidade<br />Usabilidade<br />Utilizando os 7 critérios básicos de Dias(2007):<br />-Eficácia e eficiência de uso: Informações separadas, conteúdo de forma eficiênte.<br />-Satisfação subjetiva: Estrutura simples, navegação fácil e conteúdo separado.<br />-Facilidade de aprendizado: Usuário já conhece outras redes, facilitando o acesso.<br />-Facilidade de memorização: wireframepadrão conhecido.<br />-Baixa taxa de erros: Usuário já utiliza redes sociais, sabe como corrigi-los caso ocorra.<br />-Consistência: terminologia, fontes e cores padronizados.<br />-Flexibilidade: acessar área de prêmios de diversas maneiras.<br />
  • 46. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos<br />Conclusão<br /> -Objetivos cumpridos,<br /> -Layout esteticamente atraente,<br /> -Atende aos conceitos definidos,<br /><ul><li>O layout elaborado para atender as exigências do projeto,
  • 47. Recomendações e tendências,</li></ul> -Diferencial destacado,<br /> -Customização pré-definidas<br /> -Conceitos de usabilidade e ergonomia<br />
  • 48. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos<br />Marketing<br /> Analisado o composto de marketing criado por Jerome McCarthy(1960), os chamados “quatro ps”, <br />Produto: rede social.<br />Preço: valor referente à criação do layout ,locação do servidor será no valor de R$60,00 mensais e o domínio de R$30,00 por ano.<br />Praça: Brasil, mas como este projeto é destinado ao meio virtual poderá ser acessado de qualquer lugar, o idioma e política de premiação não permitem que seja utilizado fora do Brasil no momento. <br /> Promoção: a divulgação da rede social será feita através de vídeos virais, divulgação em campos de futebol, e-mail marketing e através dos parceiros (lojas que disponibilizaram os prêmios da rede social).<br />
  • 49. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos<br />Desdobramentos Futuros <br /> Primeiramente a empresa Involves pretende implementar este projeto; <br /> Disponibilizar a rede para desenvolvedores criarem novos aplicativos; <br /> Criar o aplicativo móvel deste projeto, para facilitar ainda mais o acesso dos usuários; <br /> Expandir a rede para outros países. <br />
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55. brigada!<br />Contato: <br />alinemariedesigner@yahoo.com.br<br />47-9924-1244<br />47-8483-4221<br />

×