1. Criação de Interface Gráfica Para Rede Social Acadêmica: Aline MariêTataraHundensky Prof. Orientadora: Mary VonnyMeürer

2. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos Contextualização Redes sociais crescem cada dia mais. Brasil país que mais acessa sites relacionados a comunidades. [78,4% Brasil | 73,7 Japão | 62,9% França] (Folha Online de 2008 ) 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.” 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.

3. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos Contextualização É possível concluir que em um país como o Brasil, no qual o futebol é “paixão nacional” e as redes sociais são mais acessadas pelos brasileiros, a união dos dois tem tudo para dar certo.

6. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos Objetivo Geral: Desenvolver a interface gráfica da rede social Meio Campo. Objetivos Específicos: Compreender e aplicar o conhecimento sobre redes sociais e futebol; Aplicar os fundamentos do design para a concepção de uma interface adequada; Aplicar critérios de ergonomia e usabilidade para desenvolver uma interface eficiente.

7. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos Hipóteses Problema de Projeto Superar a barreira usabilidade versus identificação do público Auto-explicativa Fácil acesso Mesmas tarefas em poucos clicks

8. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos Hipóteses Problema de Projeto Superar a barreira usabilidade versus identificação do público Auto-explicativa Fácil acesso Mesmas tarefas em poucos clicks Hipóteses Usar wireframe padrão para tornar mais familiar Customização da interface

9. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos Delimitações do Projeto Exclui-se do projeto: Área de programação Conteúdo Novas Ferramentas Que será feito pela empresa Involves.

10. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos Científica Projetual Metodologia Científica Lakatos e Marconi; bibliográfica: para reconhecimento de informações acerca do tema, cliente, produto, público-alvo e concorrentes. pesquisa de observação: direta extensiva com aplicação de questionários com perguntas abertas e de múltiplas escolha ao público-alvo, análise: interpretação e organização dos resultados obtidos.

11. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos Científica Projetual Metodologia Projetual Radfahrer, que afirmou que “cada designer tem uma metodologia própria e particular, mas todas condizem mais ou menos à mesma coisa. Figura: Metodologia de Radfahrer Fonte: Tese de doutorado de Mônica Stein (2003)

12. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos Científica ProjetualAdaptada Metodologia Projetual Adaptada Figura: Metodologia adaptada Fonte: Arquivo Pessoal

13. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos Fundamentação Teórica Web 2.0 interatividade, troca de informações, colaboração entre usuários Rede Social rede de computadores conecta uma rede de pessoas e organização Futebol oportunidade prática de exercitar a cidadania, é projeto e desejo de coletividade Empresa 2008, São José/SC - FabriCO, Rocler, Helio Print

14. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos Interface Gráfica designa o conjunto de programas e aparelhos materiais que permitem sistema informativo e seus usuários humanos. (Lévy) Tipografia 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. Cor desafio, pois usuários tem preferência em utilizar cores relacionadas aos times

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. -Peladeiro: você pode ser o administrador de jogos de futebol pela internet. -Orkut, Twitter e Facebook. Estado do Design -Notícias -Interface voltada ao futebol -Formas geométricas -Poucos ícones -Cores Neutras

18. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos Questionário Perfil usuário: homens, 19 a 27 anos, conectado por 3 horas, possuem ensino superior. Redes que os usuários mais se identificam: Orkut e Twitter. Cor: 66% não deixariam de acessar por causa da cor. Símbolos: bola, gol e torcida

19. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos Conceituação Conceituação 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.

20. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos estilo de vida, valores pessoais e sociais, costumes

21. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos as palavras do conceito são ilustradas com imagens

22. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos figuras que foram citadas na pesquisa, imagens que representem o projeto

23. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos Estrutura Wireframe Geração de alternativas Figura : Fluxograma da Rede Fonte: Arquivo Pessoal

24. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos Estrutura Wireframe Geração de alternativas Figura: Wireframe Padrão Fonte: Felipe Memória(2005)

25. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos Estrutura Wireframe Geração de alternativas

26. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos Estrutura WireframeGeração de alternativas 01 02 03 04 05

27. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos Estrutura WireframeGeração de alternativas 01 02 03 04 05

28. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos Estrutura WireframeGeração de alternativas 01 02 03 04 05

29. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos Estrutura WireframeGeração de alternativas 01 02 03 04 05

30. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos Estrutura WireframeGeração de alternativas 01 02 03 04 05

31. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos Estrutura WireframeGeração de alternativas 01 02 03 04 05 Alternativa Escolhida

32. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos Estrutura WireframeGeração de alternativas 01 02 03 04 05 Alternativa Escolhida Tabela de critério de avaliação sugerida por Baxter(2000, p.64)que também foi utilizada para selecionar a alternativa escolhida:

33. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos Cor Tipografia Gestalt Ergonomia Usabilidade Cores VERDE simbolicamente a representa do campo de futebol 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. E o GRAFITE, dá equilíbrio e estabilidade, por ser o equilíbrio do preto e do branco.

34. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos Cor Tipografia Gestalt Ergonomia Usabilidade Variação de Cor e Fundo Variação de cor e fundo

35. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos Cor Tipografia Gestalt Ergonomia Usabilidade Variação de cor e fundo

36. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos Cor Tipografia Gestalt Ergonomia Usabilidade Variação de cor e fundo

37. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos Cor Tipografia Gestalt Ergonomia Usabilidade Variação de cor e fundo

38. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos Cor Tipografia Gestalt Ergonomia Usabilidade Variação de cor e fundo

39. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos Cor Tipografia Gestalt Ergonomia Usabilidade Variação de cor e fundo

40. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos Cor Tipografia Gestalt Ergonomia Usabilidade Variação de cor e fundo

41. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos Cor TipografiaGestalt Ergonomia Usabilidade Tipografia Neste projeto foram utilizadas duas fontes, EstrangeloEdessae Verdana. EstrangeloEdessa:títulos e texto curtos. Verdana: textos longos e outras informações. EstrangeloEdessa Verdana

42. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos CorTipografia GestaltErgonomia Usabilidade Gestalt Unidade: O site é formado por várias unidades, como: a cor do fundo, a marca da empresa, as formas geométricas, os textos, menu. 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.

43. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos CorTipografia GestaltErgonomia Usabilidade Gestalt Continuidade: As linhas que fecham as caixas dão sensação de continuidade. Proximidade: Caixas de conteúdo Semelhança: Cores e formas

44. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos CorTipografia GestaltErgonomia Usabilidade Ergonomia Informacional Legibilidade: fundo do site composto por cor e imagem, isolado das informações. Leiturabilidade: textos curtos e diretos. Pregnância Visual: segue o mesmo padrão em todas as páginas. De interfaces (Bastien e Scapin, 1993) Critérios e Subcritérios Condução: usuário sabe sua localização 4 subcritérios: Presteza – indica o caminho, cores e botões. Agrupamento/Distinção de itens – box conteúdo, amigos, times, prêmios. Feedback Imediato – resposta de ação.

45. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos CorTipografia Gestalt Ergonomia Usabilidade Usabilidade Utilizando os 7 critérios básicos de Dias(2007): -Eficácia e eficiência de uso: Informações separadas, conteúdo de forma eficiênte. -Satisfação subjetiva: Estrutura simples, navegação fácil e conteúdo separado. -Facilidade de aprendizado: Usuário já conhece outras redes, facilitando o acesso. -Facilidade de memorização: wireframepadrão conhecido. -Baixa taxa de erros: Usuário já utiliza redes sociais, sabe como corrigi-los caso ocorra. -Consistência: terminologia, fontes e cores padronizados. -Flexibilidade: acessar área de prêmios de diversas maneiras.

47. Recomendações e tendências, -Diferencial destacado, -Customização pré-definidas -Conceitos de usabilidade e ergonomia

48. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos Marketing Analisado o composto de marketing criado por Jerome McCarthy(1960), os chamados “quatro ps”, Produto: rede social. 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. 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. 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).

49. Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos Desdobramentos Futuros Primeiramente a empresa Involves pretende implementar este projeto; Disponibilizar a rede para desenvolvedores criarem novos aplicativos; Criar o aplicativo móvel deste projeto, para facilitar ainda mais o acesso dos usuários; Expandir a rede para outros países.

55. brigada! Contato: alinemariedesigner@yahoo.com.br 47-9924-1244 47-8483-4221