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

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

on

  • 2,310 views

 

Statistics

Views

Total Views
2,310
Views on SlideShare
2,310
Embed Views
0

Actions

Likes
2
Downloads
36
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • Criação de
    Interface Gráfica
    Para Rede Social
    Acadêmica: Aline MariêTataraHundensky
    Prof. Orientadora: Mary VonnyMeürer
  • 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.
  • 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.
  • 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.
  • 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
  • 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
  • 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.
  • 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.
  • 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)
  • 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
  • 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
  • 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
  • Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos
    Concorrentes
    • Kigol: os usuários se cadastram e passam a fazer parte de grupos, fóruns e blogs
    • Rayleague: jogadores amadores se tornarem profissionais e dos clubes, agentes e treinadores
    • 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
  • 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
  • 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.
  • Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos
    estilo de vida, valores pessoais e sociais, costumes
  • Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos
    as palavras do conceito são ilustradas com imagens
  • 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
  • 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
  • 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)
  • Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos
    Estrutura Wireframe Geração de alternativas
  • Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos
    Estrutura WireframeGeração de alternativas
    01 02 03 04 05
  • Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos
    Estrutura WireframeGeração de alternativas
    01 02 03 04 05
  • Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos
    Estrutura WireframeGeração de alternativas
    01 02 03 04 05
  • Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos
    Estrutura WireframeGeração de alternativas
    01 02 03 04 05
  • Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos
    Estrutura WireframeGeração de alternativas
    01 02 03 04 05
  • 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
  • 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:
  • 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.
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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.
  • 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
  • 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.
  • 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.
  • Contextualização Objetivos Problema Delimitações Metodologia Fundamentação Alternativas Memorial Conclusão Desdobramentos
    Conclusão
    -Objetivos cumpridos,
    -Layout esteticamente atraente,
    -Atende aos conceitos definidos,
    • O layout elaborado para atender as exigências do projeto,
    • Recomendações e tendências,
    -Diferencial destacado,
    -Customização pré-definidas
    -Conceitos de usabilidade e ergonomia
  • 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).
  • 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.
  • brigada!
    Contato:
    alinemariedesigner@yahoo.com.br
    47-9924-1244
    47-8483-4221