Apresentação PCC - Rodrigo Santiago

2,381
-1

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

No notes for slide

Apresentação PCC - Rodrigo Santiago

  1. 1. Design de Interface APLICAÇÃO DE INTERFACE PARA SISTEMA DE GERENCIAMENTO ON-LINE DE PROJETOS DE DESIGN Rodrigo Santiago Correia Professor Orientador: Alessandro Brito Dias INSTITUTO DE ENSINO SUPERIOR DA AMAZÔNIA - IESA FACULDADE MARTHA FALCÃO - FMF CURSO DE DESIGN Principal
  2. 2. Introdução <ul><li>Crescimento da web na área do design </li></ul><ul><li>Crescimento dos negócios na Web (E-business) </li></ul><ul><li>Popularização dos padrões web </li></ul><ul><li>Rapidez dos negócios </li></ul><ul><li>Necessidade de Automação </li></ul><ul><li>Somente Planejamento de Interface </li></ul>Conceituação
  3. 3. Objetivos <ul><li>Geral </li></ul><ul><li>Desenvolvimento de um sistema integrado que possa atender às necessidades de empresas e profissionais liberais de design, desde o primeiro contato com o cliente, até a finalização do projeto. </li></ul>Conceituação
  4. 4. Objetivos <ul><li>Específicos </li></ul><ul><li>Facilitar o trabalho de organização de projetos; </li></ul><ul><li>Minimizar a burocracia; </li></ul><ul><li>Centralizar várias atividades em um só dispositivo; </li></ul><ul><li>Permitir o acesso remoto aos projetos; </li></ul>Conceituação
  5. 5. Problema <ul><li>Não existe nenhum sistema para gerenciamento direcionado especificamente para de projetos de design </li></ul><ul><li>O cliente geralmente não acompanha o andamento dos projetos </li></ul><ul><li>Existem várias etapas do projeto que não necessitam de visita ao cliente </li></ul><ul><li>O controle de projetos geralmente é feito fisicamente, sem automação </li></ul>Conceituação
  6. 6. Justificativa do Projeto <ul><li>A proposta do sistema é: </li></ul><ul><li>Armazenamento de documentação e controle de atividades; </li></ul><ul><li>Trabalho em Equipe ; </li></ul><ul><li>Oferecer convênio com fornecedores e profissionais liberais; </li></ul><ul><li>Administração de conteúdo on-line </li></ul><ul><li>Oferecer ao cliente Acompanhamento do projeto em tempo real </li></ul>Conceituação
  7. 7. Público-alvo <ul><li>Direto </li></ul><ul><li>Empresas de Design e Profissionais Liberais em Design </li></ul><ul><li>Indireto </li></ul><ul><li>Gráficas, Bureaus, Fornecedores, Clientes </li></ul>Conceituação
  8. 8. Metodologia da Pesquisa Científica <ul><li>a) Dados Primários – Pesquisa e coleta de material já existente, ou seja, estudo em livros, Internet, artigos científicos e etc., para contribuir para o resultado do projeto; </li></ul><ul><li>b) Dados Secundários – Coleta de dados em campo, através de questionário com empresas e profissionais de design, a fim de que o projeto possa ser de aproveitamento de toda a comunidade do design. </li></ul>Conceituação
  9. 9. Levantamento de Dados <ul><li>O levantamento foi dividido em três partes: </li></ul><ul><li>Design aplicado à web (webdesign) </li></ul><ul><li>Design de Interface </li></ul><ul><li>Negócios em Design </li></ul>Conceituação
  10. 10. Webdesign “ o web design é um fragmento do design . Não existe web designer. Existe o designer que faz web e este profissional tem que aprender tudo, tipografia, fotografia, semiótica, gestalt, matemática, ótica, percepção, comportamento humano, etc. Senão, ele não consegue fazer web” NÄHR, 2007 apud WOLLNER Webdesign
  11. 11. Imagem <ul><li>padrões JPG e GIF </li></ul><ul><li>São medidos em pixels (pontos) </li></ul><ul><li>Resolução máxima de 72dpi. </li></ul>Webdesign
  12. 12. Cores <ul><li>Padrão RGB (Vermelho, Verde e Azul) </li></ul><ul><li>Classificadas através de uma tabela, identificados em dígitos binários </li></ul><ul><li>São visualizadas por luz induzida, e não refletida como impressos. </li></ul>Webdesign
  13. 13. Cores Webdesign
  14. 14. Tipografia <ul><li>Conforme padrão do Sistema Operacional (Arial, Verdana, Helvetica e Times New Roman) </li></ul><ul><li>As palavras se expressam através de atributos ( Negrito , Itálico , Sublinhado , CAPS LOCK) </li></ul><ul><li>Em websites, geralmente textos são alinhados à esquerda </li></ul>Webdesign
  15. 15. Tipografia Webdesign
  16. 16. Tipografia Webdesign
  17. 17. Gestalt <ul><li>Proximidade é essencial para definir elementos de mesmo grupo </li></ul><ul><li>Equilíbrio, proporção e simetria é imprescindível para uma interface bem elaborada </li></ul><ul><li>O layout se divide entre Contrastante, Conflitante e Concordante </li></ul><ul><li>É interessante repetir para manter a ordem e identidade </li></ul>Webdesign
  18. 18. <ul><li>Simplificação, Less is More (Bauhaus) </li></ul><ul><li>Boa Legibilidade contribui em um layout agradável </li></ul>Gestalt Webdesign
  19. 19. Equilíbrio das informações em blocos
  20. 20. Isso é Simplificação!
  21. 21. Gestalt Proximidade E Alinhamento Webdesign
  22. 23. Gestalt Webdesign Sites do mesmo grupo possuem topos semelhantes para identificação e familiaridade com o usuário
  23. 24. Gestalt Webdesign Cor do texto semelhante a do fundo, dificultando a legibilidade
  24. 25. Web no Brasil <ul><li>20 % (32,1 milhões) da população de 10 anos ou mais já acessaram a internet </li></ul><ul><li>Média de 28 anos de idade </li></ul><ul><li>Renda e R$ 1.000,00 </li></ul><ul><li>39,7% usa no trabalho </li></ul><ul><li>35,9% dos estudantes acessam a internet </li></ul>Webdesign
  25. 26. Tecnologias <ul><li>Importância do conhecimento de tecnologias para o designer </li></ul><ul><li>Compatibilidade de Browsers </li></ul><ul><li>HTML, CSS e Padrões Web (Códigos limpos e organizados) </li></ul><ul><li>AJAX (nada novo, mas na moda) </li></ul><ul><li>A Popularização do Flash </li></ul><ul><li>Potência máxima com PHP e MYSQL </li></ul>Webdesign
  26. 27. Browsers <ul><li>O site precisa ser visualizado corretamente por todos os browsers, para maior acessibilidade </li></ul>Webdesign Principais Browsers (navegadores) usados atualmente. Mozilla Firefox, Internet Explorer, Opera e Safari
  27. 28. Linha de comando HTML, responsável pela montagem do website
  28. 29. Linha de comando CSS, responsável pela parte visual do website
  29. 30. AJAX Webdesign Website com suporte a tecnologia ajax, onde o usuário não espera carregar a página após realizar uma acão
  30. 31. FLASH Website desenvolvido com a tecnologia Flash Webdesign
  31. 32. Padrões Web Webdesign Comparação do tempo de carregamento
  32. 33. Design de Interface “ É a maneira como um produto proporciona ações em conjunto entre pessoas e sistemas . Além de indicar o aspecto essencial dos produtos interativos, o termo também define um processo de criação e uma sub-disciplina do Design que se ocupa em estudá-lo.” AMSTEL, 2006 Design de Interface AMSTEL, 2006
  33. 39. Interação Homem-Computador “ HCI é o grupo de processos, diálogos e ações através do qual um usuário humano emprega e interage com um computador” BAECKER e BUXTON, 1987 Design de Interface
  34. 42. Arquitetura da Informação “ É o estudo da organização da informação que permite ao usuário chegar ao entendimento. Na prática, ela se refere à organização da estrutura de um website e seu conteúdo, rotulagem e categorização da informação e o design dos sistemas de navegação e de busca.” AMSTEL, 2006 Design de Interface
  35. 46. Metodologia da Arquitetura da Informação • Análise do usuários e necessidades; • Conceituação: linhas gerais da solução; • Representação: onde os conceitos são detalhados e documentados (wireframes e storyboards); • Implementação: onde se constrói o objeto, que no caso é o site. Design de Interface
  36. 47. Usabilidade “ Usabilidade (neologismo traduzido do inglês usability) significa facilidade e comodidade no uso dos produtos, tanto no ambiente doméstico como no profissional.” IIDA, 2005 Design de Interface
  37. 50. Vantagens da usabilidade em websites <ul><li>Facilidade de aprendizado; </li></ul><ul><li>Eficiência de uso; </li></ul><ul><li>Facilidade de memorização; </li></ul><ul><li>Baixa taxa de erros; </li></ul><ul><li>Satisfação subjetiva. </li></ul>Design de Interface
  38. 51. Wireframes e Storyboards Wireframes São rascunhos feitos para se criar uma estrutura inicial e, a partir daí, desenvolver a idéia Storyboards são roteiros de comunicação entre as páginas e elementos, com informações para o programador Design de Interface
  39. 54. Design Centrado no Usuário Krug (2006) fala que nenhum usuário tenta de primeira utilizar um manual de instruções para entender um sistema. Ele tenta, cria sua própria história , tentando, até conseguir, e se não conseguir, então o manual é utilizado. Design de Interface
  40. 55. Web 2.0 <ul><li>O usuário é gestor de conteúdo </li></ul><ul><li>O usuário interage com outros </li></ul><ul><li>É uma comunidade gestora </li></ul><ul><li>É rápido, com aplicações ricas </li></ul><ul><li>Não necessita vários carregamentos de página </li></ul>Design de Interface
  41. 56. Camiseteria www.camiseteria.com.br
  42. 57. Navegação Linear e Hipertexto <ul><li>A Linear se dá em uma estrutura Seqüencial, Não possibilita alternar seções e sem interferência do usuário </li></ul><ul><li>Hipertexto são ligações (nós) entre as páginas para alternar e navegar livremente </li></ul>Design de Interface
  43. 58. Navegação Linear e Hipertexto Design de Interface Navegação Linear: O usuário visualiza uma página por vez, podendo voltar somente de uma por uma
  44. 60. Acessibilidade <ul><li>Conhecendo as necessidades especiais (daltônicos, cegos, problemas de locomoção, etc) </li></ul><ul><li>Seguindo os padrões web </li></ul><ul><li>Escrevendo texto preciso e conciso </li></ul><ul><li>Testando em situações reais </li></ul><ul><li>Não somente para quem é portador de necessidades especiais </li></ul>Design de Interface
  45. 63. Metodologia para Acessibilidade <ul><li>Levantamento de Dados </li></ul><ul><li>Criação (idéias) </li></ul><ul><li>Refinamento (aperfeiçoamento) </li></ul><ul><li>Produção (protótipo) </li></ul><ul><li>Implementação </li></ul><ul><li>Lançamento </li></ul><ul><li>Manutenção </li></ul>Design de Interface
  46. 64. Web para Negócios <ul><li>E-commerce: Três Fases (Aparecer, Transações com clientes, E-business) </li></ul><ul><li>Empresa “virtual” </li></ul><ul><li>Confiança dos usuários </li></ul><ul><li>Fazer tudo pela internet! </li></ul>Negócios em Design
  47. 65. Negócios para Design em Manaus <ul><li>Espaço para todos os segmentos </li></ul><ul><li>Falta de profissionais formados </li></ul><ul><li>Barreira: Cultura </li></ul><ul><li>Domínio das grandes agências </li></ul><ul><li>Remuneração baixa </li></ul><ul><li>Atuação em Gráfico, Editorial, Embalagem, Sinalização, Multimídia, Promocional e Produto </li></ul>Negócios em Design
  48. 66. Pesquisa de Campo: Empresas <ul><li>Áreas de Atuação </li></ul><ul><li>Como você administra seus projetos? </li></ul><ul><li>Quanto tempo a sua empresa está ativa? </li></ul><ul><li>Quantos funcionários a empresa possui? </li></ul><ul><li>Qual o público-alvo principal de seus projetos? </li></ul><ul><li>Tempo médio na internet (por dia) </li></ul><ul><li>Quantos clientes a sua empresa possui em média? </li></ul>Negócios em Design
  49. 67. Pesquisa de Campo: Empresas <ul><li>Como resultado, obtivemos como maioria: </li></ul><ul><li>Gráfico, Animação, Consultoria, Webdesign, Embalagem e Editorial como as mais atuante </li></ul><ul><li>Empresas arquiva seus projetos em pastas </li></ul><ul><li>São novas empresas, com até 5 anos </li></ul><ul><li>Possuem de 5 a 10 funcionários </li></ul><ul><li>Trabalham normalmente com empresas </li></ul><ul><li>Usam de 3 a 5 horas de internet por dia </li></ul><ul><li>Equilibradamente de 1 a 5, 10 a 20 e 30 a 50 clientes </li></ul>Negócios em Design
  50. 68. <ul><li>Qual a área do design que você atua? </li></ul><ul><li>Como você arquiva seus projetos? </li></ul><ul><li>Tempo de mercado </li></ul><ul><li>De que forma você trabalha? </li></ul><ul><li>Qual o público-alvo de seus projetos? </li></ul><ul><li>Tempo médio na internet (por dia) </li></ul><ul><li>Quantos clientes em média você possui? </li></ul>Pesquisa de Campo: Profissionais Negócios em Design
  51. 69. <ul><li>Como resultado, obtivemos em maioria: </li></ul><ul><li>Gráfico, Editorial, Consultoria, Embalagem, Multimídia, Web como áreas de atuação </li></ul><ul><li>78% arquivam projetos em pastas </li></ul><ul><li>1 a 5 anos de mercado </li></ul><ul><li>50% possuem emprego fixo </li></ul><ul><li>Trabalham diretamente com empresas </li></ul><ul><li>Usam de 4 a 8 horas de internet </li></ul><ul><li>De 1 a 5 clientes </li></ul>Pesquisa de Campo: Profissionais Negócios em Design
  52. 70. Empresas de Design em Manaus <ul><li>Muitas com o nome “design” que não são referentes ao nome </li></ul><ul><li>Poucas onde existem designers formados </li></ul><ul><li>Diferenças entre Design x Publicidade </li></ul><ul><li>Grandes: Oana, Kintaw, Tape e Prócion </li></ul><ul><li>Muita oportunidade </li></ul>Negócios em Design
  53. 71. Perfil do Cliente <ul><li>Vários tipos de negócios </li></ul><ul><li>Ainda não conhece o potencial </li></ul><ul><li>Geralmente passou por experiências ruins </li></ul><ul><li>Pessoa “Visuai” </li></ul><ul><li>Foca-se no Resultado </li></ul><ul><li>Não encara a profissão como séria </li></ul>Negócios em Design
  54. 72. Similares Aprex DotProject Webaula Acadêmico Similares
  55. 73. DotProject <ul><li>Gerenciamento de Projetos em geral </li></ul>Similares
  56. 74. Estrutura Companhias, Projetos, Tarefas, Calendário, Fórum, Tickets, Administração Similares
  57. 75. Pontos <ul><li>Positivos </li></ul><ul><li>Muitas opções </li></ul><ul><li>Inclusão de Módulos </li></ul><ul><li>Livre </li></ul><ul><li>Customizável </li></ul><ul><li>Instalável </li></ul><ul><li>Negativos </li></ul><ul><li>Complicado </li></ul><ul><li>Layout fraco </li></ul><ul><li>Provoca Confusão </li></ul>Similares
  58. 76. Requisitos e Parâmetros Requisitos e Parâmetros
  59. 77. Requisitos e Parâmetros Requisitos e Parâmetros
  60. 78. <ul><li>A estrutura foi criada para tomar como base o site e o sistema de gerenciamento </li></ul><ul><li>Sistema será mais detalhado </li></ul><ul><li>Versão Beta </li></ul>Estrutura do Website Estrutura
  61. 79. Estrutura do Website Estrutura
  62. 80. Estrutura do Sistema Projetos; Tarefas; Clientes; Cronograma; Fornecedores; Profissionais; Reuniões; Relacionamento; Blog; Usuários; Configurações Estrutura
  63. 81. Naming <ul><li>Processo de Brainstorming </li></ul><ul><li>Dividido por categorias (Design Empresa, Software, Web, Gerenciamento) </li></ul><ul><li>Seleção por pregnância e relatividade </li></ul>Naming
  64. 82. Seleção Nomes Finalistas, atendendo a critérios de relevância, identificação e Facilidade de leitura Naming Design Office Design Enterprise Design Tool Design Manager Design Team Design Fácil Design Admin Gerente Design Meu projeto Design Plan Projeto Simples SP Manager Easer Make it! Quicker Zproject
  65. 83. <ul><li>Nome escolhido: Quicker </li></ul><ul><li>Justificativa do nome: Quicker , em inglês, significa rápido, prático. Este é o objetivo do projeto, ser simples, prático e rápido para que o profissional ou a empresa possa aproveitar a ferramenta ao máximo sem perder tempo. </li></ul>Nome Escolhido Naming
  66. 84. <ul><li>Deve representar rapidez e praticidade </li></ul><ul><li>Deve servir apenas como suporte do projeto, não exigindo detalhamento </li></ul><ul><li>Servirá como identificação do projeto e do produto </li></ul>Obrigações Marca
  67. 85. Resultado Marca
  68. 86. <ul><li>Baseado na tecnologia Ajax, aplicativo web </li></ul><ul><li>Ambiente de Sistema Operacional </li></ul><ul><li>Visual familiar ao usuário </li></ul><ul><li>Arrastar, abrir e fechar as telas </li></ul>Opção 1 Alternativas
  69. 87. Esboço: Opção 1 Alternativas
  70. 88. Wireframe: Opção 1 Alternativas
  71. 89. <ul><li>Baseado em aplicações Web 2.0 (gmail, flickr) </li></ul><ul><li>Site Leve, compatível à região </li></ul><ul><li>Poucos elementos visuais </li></ul><ul><li>Aplicações realizadas sem recarregar a página </li></ul>Opção 2 Alternativas
  72. 90. Esboço: Opção 2 Alternativas
  73. 91. Wireframe: Opção 2 Alternativas
  74. 92. Tabela de Escolha <ul><li>Conceitos baseados nos requisitos e parâmetros (os principais) </li></ul><ul><li>Peso de 1 a 3 (do menos importante ao mais importante) </li></ul><ul><li>Nota de 0 a 10, multiplicada pelo peso e somadas para o total. </li></ul>Alternativas Conceito Peso Alternativa 1 Alternativa 2 Interface 2 8 / 16 9 / 18 Interatividade 3 6 / 18 6 / 18 Estética 1 9 / 9 7 / 7 Usabilidade 2 7 / 14 9 / 18 Total 57 61
  75. 93. <ul><li>Resolução de tela: 800x600 pixels </li></ul><ul><li>Cores básicas: Laranja (#FF9900) e Cinza (#999999) </li></ul><ul><li>Ícones Representativos </li></ul><ul><li>Tecnologia sugerida: XAJAX + PHP + MYSQL </li></ul>Desenvolvimento Alternativas
  76. 94. Detalhamento Alternativas
  77. 95. Explicação Menu de Navegação Marca da empresa que acessará Saudação e opção para sair Atalhos rápidos do Sistema Última mensagem do blog RSS do Blog Banner com tutoriais para utilização do Sistema Marca do Quicker Navegação do site Quicker Alternativas
  78. 96. Visualizar Projetos Filtros para os organização e visualização Postar novo projeto Principais campos identificadores dos registros Alternativas
  79. 97. Editar Projetos Exportação do projeto Opções do projeto Visualização e alteração automática dos registros Alternativas
  80. 98. Adicionar Projetos Alternativas
  81. 99. Tarefas Buscar Tarefa Criar nova tarefa Filtro por tipo de tarefa realizada Alternativas Atualizam automaticamente
  82. 100. Editar Tarefas Opções de tarefas Criar nova tarefa Campos de visualização editáveis Alternativas Outras tarefas relacionadas Exportação
  83. 101. Adicionar Tarefa Alternativas
  84. 102. Clientes Busca Criar novo cliente Filtro por situção do cliente Alternativas Atualizam automaticamente
  85. 103. Editar Clientes Opções de clientes Criar novo cliente Campos de visualização editáveis Alternativas Outros clientes relacionados Exportação
  86. 104. Adicionar Cliente Alternativas
  87. 105. Cronograma Alternativas Criar novo cliente Visualização por tipo Tarefa ou compromisso por projeto Linha de tempo
  88. 106. Fornecedores Busca Criar novo Fornecedor Filtro por situção do fornecedor Alternativas Atualizam automaticamente
  89. 107. Editar Fornecedores Tela de Opções Criar novo fornecedor Campos de visualização editáveis Alternativas Outros itensrelacionados Exportação
  90. 108. Adicionar Fornecedor Alternativas
  91. 109. Profissionais Busca Criar novo Profissional Filtro por situção Alternativas Atualizam automaticamente
  92. 110. Editar Profissional Tela de Opções Criar novo Profissional Campos de visualização editáveis Alternativas Outros itens relacionados Exportação
  93. 111. Adicionar Profissional Alternativas
  94. 112. Reuniões Busca Criar nova reunião Filtro por status Alternativas Atualizam automaticamente
  95. 113. Editar Reunião Tela de Opções Campos de visualização editáveis Alternativas Outros itens relacionados Exportação
  96. 114. Reunião Online Participantes da Reunião Dados da Reunião atual Alternativas Conversa Detalhes Digítação Sair da Reunião
  97. 115. Relacionamento Busca Filtro por status Alternativas Atualizam automaticamente
  98. 116. Editar Reunião Tela de Opções Campos de visualização editáveis Alternativas Outros itens relacionados Exportação
  99. 117. Criação de chamado (cliente) Alternativas
  100. 118. Blog Busca Filtro por status Alternativas Atualizam automaticamente
  101. 119. Editar Post Tela de Opções Campos de visualização editáveis Alternativas Outros itens relacionados Exportação
  102. 120. Criar Post Alternativas
  103. 121. Usuários Busca Filtro por status Alternativas Atualizam automaticamente
  104. 122. Editar Usuário Tela de Opções Campos de visualização editáveis Alternativas Exportação
  105. 123. Criar Usuário Alternativas
  106. 124. Configurações: Módulos Alternativas
  107. 125. Configurações: Sistema Alternativas
  108. 126. Configurações: Aparência Alternativas
  109. 127. Login Alternativas
  110. 128. Custos: Implementação Alternativas Para implementar o sistema na web para 10 clientes inicialmente. Nome Quantidade Valor Domínio 1 R$ 30,00 Hospedagem (1GB) 10 R$ 550,00 Desenvolvimento R$ 8.000,00 Total R$ 8.680,00
  111. 129. Custos: Cliente Alternativas Plano Grátis*: 2 Clientes, 5 Usuários, 50 MB de espaço em disco Módulo Ouro Prata Bronze Freelancer Grátis Projetos      Tarefas      Clientes      Cronograma      Fornecedores     Profissionais    Reuniões   Relacionamento    Blog   Valor Mensal R$ 50,00 R$ 35,00 R$ 20,00 R$ 30,00 Grátis
  112. 130. Principais Referências <ul><li>NETTO, Alcides. Entrevista sobre a situação das empresas de design em Manaus. Manaus, AM . Realizada em 10/06/2007 </li></ul><ul><li>MEMÓRIA, Felipe F. P. Design para a Internet: Projetando a Experiência Perfeita . 1. ed. Rio de Janeiro: Campus/Elsevier, 2005. </li></ul><ul><li>KRUG, Esteve . Não me Faça Pensar . 2 ed. Alta Book, 2006 </li></ul><ul><li>RADFAHER, Luli. Design/Web/Design . 2 ed.: Market Press, 2003 </li></ul>
  113. 131. Conclusão <ul><li>Para se projetar um website, é necessário conhecer regras do design, interface e padrões web </li></ul><ul><li>O mercado de design em Manaus oferece muitas oportunidades para novos profissionais </li></ul><ul><li>Para criar um serviço para empresas de design é necessário conhecer a rotina </li></ul><ul><li>A internet é uma ferramenta muito importante para os negócios de uma empresa de design </li></ul>
  114. 132. Agradecimentos: Deus, Meus Pais, Meu irmão e minha cunhada, Minha namorada, Professores, Prof. Orientador, Colegas Amigos
  115. 133. Obrigado. Rodrigo Santiago Designer de Interface

×