O documento descreve a proposta de desenvolvimento de um sistema de gerenciamento de projetos de design online. O sistema visa facilitar o trabalho de organização e acompanhamento de projetos entre empresas, profissionais e clientes de forma remota e integrada. A pesquisa realizada com empresas e profissionais de design identificou as principais necessidades e áreas de atuação para embasar o desenvolvimento do sistema.

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. Introdução Crescimento da web na área do design Crescimento dos negócios na Web (E-business) Popularização dos padrões web Rapidez dos negócios Necessidade de Automação Somente Planejamento de Interface Conceituação

3. Objetivos Geral 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. Conceituação

4. Objetivos Específicos Facilitar o trabalho de organização de projetos; Minimizar a burocracia; Centralizar várias atividades em um só dispositivo; Permitir o acesso remoto aos projetos; Conceituação

5. Problema Não existe nenhum sistema para gerenciamento direcionado especificamente para de projetos de design O cliente geralmente não acompanha o andamento dos projetos Existem várias etapas do projeto que não necessitam de visita ao cliente O controle de projetos geralmente é feito fisicamente, sem automação Conceituação

6. Justificativa do Projeto A proposta do sistema é: Armazenamento de documentação e controle de atividades; Trabalho em Equipe ; Oferecer convênio com fornecedores e profissionais liberais; Administração de conteúdo on-line Oferecer ao cliente Acompanhamento do projeto em tempo real Conceituação

7. Público-alvo Direto Empresas de Design e Profissionais Liberais em Design Indireto Gráficas, Bureaus, Fornecedores, Clientes Conceituação

8. Metodologia da Pesquisa Científica 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; 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. Conceituação

9. Levantamento de Dados O levantamento foi dividido em três partes: Design aplicado à web (webdesign) Design de Interface Negócios em Design Conceituação

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. Imagem padrões JPG e GIF São medidos em pixels (pontos) Resolução máxima de 72dpi. Webdesign

12. Cores Padrão RGB (Vermelho, Verde e Azul) Classificadas através de uma tabela, identificados em dígitos binários São visualizadas por luz induzida, e não refletida como impressos. Webdesign

13. Cores Webdesign

14. Tipografia Conforme padrão do Sistema Operacional (Arial, Verdana, Helvetica e Times New Roman) As palavras se expressam através de atributos ( Negrito , Itálico , Sublinhado , CAPS LOCK) Em websites, geralmente textos são alinhados à esquerda Webdesign

15. Tipografia Webdesign

16. Tipografia Webdesign

17. Gestalt Proximidade é essencial para definir elementos de mesmo grupo Equilíbrio, proporção e simetria é imprescindível para uma interface bem elaborada O layout se divide entre Contrastante, Conflitante e Concordante É interessante repetir para manter a ordem e identidade Webdesign

18. Simplificação, Less is More (Bauhaus) Boa Legibilidade contribui em um layout agradável Gestalt Webdesign

19. Equilíbrio das informações em blocos

20. Isso é Simplificação!

21. Gestalt Proximidade E Alinhamento Webdesign

23. Gestalt Webdesign Sites do mesmo grupo possuem topos semelhantes para identificação e familiaridade com o usuário

24. Gestalt Webdesign Cor do texto semelhante a do fundo, dificultando a legibilidade

25. Web no Brasil 20 % (32,1 milhões) da população de 10 anos ou mais já acessaram a internet Média de 28 anos de idade Renda e R$ 1.000,00 39,7% usa no trabalho 35,9% dos estudantes acessam a internet Webdesign

26. Tecnologias Importância do conhecimento de tecnologias para o designer Compatibilidade de Browsers HTML, CSS e Padrões Web (Códigos limpos e organizados) AJAX (nada novo, mas na moda) A Popularização do Flash Potência máxima com PHP e MYSQL Webdesign

27. Browsers O site precisa ser visualizado corretamente por todos os browsers, para maior acessibilidade Webdesign Principais Browsers (navegadores) usados atualmente. Mozilla Firefox, Internet Explorer, Opera e Safari

28. Linha de comando HTML, responsável pela montagem do website

29. Linha de comando CSS, responsável pela parte visual do website

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

31. FLASH Website desenvolvido com a tecnologia Flash Webdesign

32. Padrões Web Webdesign Comparação do tempo de carregamento

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

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

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

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

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

50. Vantagens da usabilidade em websites Facilidade de aprendizado; Eficiência de uso; Facilidade de memorização; Baixa taxa de erros; Satisfação subjetiva. Design de Interface

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

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

55. Web 2.0 O usuário é gestor de conteúdo O usuário interage com outros É uma comunidade gestora É rápido, com aplicações ricas Não necessita vários carregamentos de página Design de Interface

56. Camiseteria www.camiseteria.com.br

57. Navegação Linear e Hipertexto A Linear se dá em uma estrutura Seqüencial, Não possibilita alternar seções e sem interferência do usuário Hipertexto são ligações (nós) entre as páginas para alternar e navegar livremente Design de Interface

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

60. Acessibilidade Conhecendo as necessidades especiais (daltônicos, cegos, problemas de locomoção, etc) Seguindo os padrões web Escrevendo texto preciso e conciso Testando em situações reais Não somente para quem é portador de necessidades especiais Design de Interface

63. Metodologia para Acessibilidade Levantamento de Dados Criação (idéias) Refinamento (aperfeiçoamento) Produção (protótipo) Implementação Lançamento Manutenção Design de Interface

64. Web para Negócios E-commerce: Três Fases (Aparecer, Transações com clientes, E-business) Empresa “virtual” Confiança dos usuários Fazer tudo pela internet! Negócios em Design

65. Negócios para Design em Manaus Espaço para todos os segmentos Falta de profissionais formados Barreira: Cultura Domínio das grandes agências Remuneração baixa Atuação em Gráfico, Editorial, Embalagem, Sinalização, Multimídia, Promocional e Produto Negócios em Design

66. Pesquisa de Campo: Empresas Áreas de Atuação Como você administra seus projetos? Quanto tempo a sua empresa está ativa? Quantos funcionários a empresa possui? Qual o público-alvo principal de seus projetos? Tempo médio na internet (por dia) Quantos clientes a sua empresa possui em média? Negócios em Design

67. Pesquisa de Campo: Empresas Como resultado, obtivemos como maioria: Gráfico, Animação, Consultoria, Webdesign, Embalagem e Editorial como as mais atuante Empresas arquiva seus projetos em pastas São novas empresas, com até 5 anos Possuem de 5 a 10 funcionários Trabalham normalmente com empresas Usam de 3 a 5 horas de internet por dia Equilibradamente de 1 a 5, 10 a 20 e 30 a 50 clientes Negócios em Design

68. Qual a área do design que você atua? Como você arquiva seus projetos? Tempo de mercado De que forma você trabalha? Qual o público-alvo de seus projetos? Tempo médio na internet (por dia) Quantos clientes em média você possui? Pesquisa de Campo: Profissionais Negócios em Design

69. Como resultado, obtivemos em maioria: Gráfico, Editorial, Consultoria, Embalagem, Multimídia, Web como áreas de atuação 78% arquivam projetos em pastas 1 a 5 anos de mercado 50% possuem emprego fixo Trabalham diretamente com empresas Usam de 4 a 8 horas de internet De 1 a 5 clientes Pesquisa de Campo: Profissionais Negócios em Design

70. Empresas de Design em Manaus Muitas com o nome “design” que não são referentes ao nome Poucas onde existem designers formados Diferenças entre Design x Publicidade Grandes: Oana, Kintaw, Tape e Prócion Muita oportunidade Negócios em Design

71. Perfil do Cliente Vários tipos de negócios Ainda não conhece o potencial Geralmente passou por experiências ruins Pessoa “Visuai” Foca-se no Resultado Não encara a profissão como séria Negócios em Design

72. Similares Aprex DotProject Webaula Acadêmico Similares

73. DotProject Gerenciamento de Projetos em geral Similares

74. Estrutura Companhias, Projetos, Tarefas, Calendário, Fórum, Tickets, Administração Similares

75. Pontos Positivos Muitas opções Inclusão de Módulos Livre Customizável Instalável Negativos Complicado Layout fraco Provoca Confusão Similares

76. Requisitos e Parâmetros Requisitos e Parâmetros

77. Requisitos e Parâmetros Requisitos e Parâmetros

78. A estrutura foi criada para tomar como base o site e o sistema de gerenciamento Sistema será mais detalhado Versão Beta Estrutura do Website Estrutura

79. Estrutura do Website Estrutura

80. Estrutura do Sistema Projetos; Tarefas; Clientes; Cronograma; Fornecedores; Profissionais; Reuniões; Relacionamento; Blog; Usuários; Configurações Estrutura

81. Naming Processo de Brainstorming Dividido por categorias (Design Empresa, Software, Web, Gerenciamento) Seleção por pregnância e relatividade Naming

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

83. Nome escolhido: Quicker 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. Nome Escolhido Naming

84. Deve representar rapidez e praticidade Deve servir apenas como suporte do projeto, não exigindo detalhamento Servirá como identificação do projeto e do produto Obrigações Marca

85. Resultado Marca

86. Baseado na tecnologia Ajax, aplicativo web Ambiente de Sistema Operacional Visual familiar ao usuário Arrastar, abrir e fechar as telas Opção 1 Alternativas

87. Esboço: Opção 1 Alternativas

88. Wireframe: Opção 1 Alternativas

89. Baseado em aplicações Web 2.0 (gmail, flickr) Site Leve, compatível à região Poucos elementos visuais Aplicações realizadas sem recarregar a página Opção 2 Alternativas

90. Esboço: Opção 2 Alternativas

91. Wireframe: Opção 2 Alternativas

92. Tabela de Escolha Conceitos baseados nos requisitos e parâmetros (os principais) Peso de 1 a 3 (do menos importante ao mais importante) Nota de 0 a 10, multiplicada pelo peso e somadas para o total. 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

93. Resolução de tela: 800x600 pixels Cores básicas: Laranja (#FF9900) e Cinza (#999999) Ícones Representativos Tecnologia sugerida: XAJAX + PHP + MYSQL Desenvolvimento Alternativas

94. Detalhamento Alternativas

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

96. Visualizar Projetos Filtros para os organização e visualização Postar novo projeto Principais campos identificadores dos registros Alternativas

97. Editar Projetos Exportação do projeto Opções do projeto Visualização e alteração automática dos registros Alternativas

98. Adicionar Projetos Alternativas

99. Tarefas Buscar Tarefa Criar nova tarefa Filtro por tipo de tarefa realizada Alternativas Atualizam automaticamente

100. Editar Tarefas Opções de tarefas Criar nova tarefa Campos de visualização editáveis Alternativas Outras tarefas relacionadas Exportação

101. Adicionar Tarefa Alternativas

102. Clientes Busca Criar novo cliente Filtro por situção do cliente Alternativas Atualizam automaticamente

103. Editar Clientes Opções de clientes Criar novo cliente Campos de visualização editáveis Alternativas Outros clientes relacionados Exportação

104. Adicionar Cliente Alternativas

105. Cronograma Alternativas Criar novo cliente Visualização por tipo Tarefa ou compromisso por projeto Linha de tempo

106. Fornecedores Busca Criar novo Fornecedor Filtro por situção do fornecedor Alternativas Atualizam automaticamente

107. Editar Fornecedores Tela de Opções Criar novo fornecedor Campos de visualização editáveis Alternativas Outros itensrelacionados Exportação

108. Adicionar Fornecedor Alternativas

109. Profissionais Busca Criar novo Profissional Filtro por situção Alternativas Atualizam automaticamente

110. Editar Profissional Tela de Opções Criar novo Profissional Campos de visualização editáveis Alternativas Outros itens relacionados Exportação

111. Adicionar Profissional Alternativas

112. Reuniões Busca Criar nova reunião Filtro por status Alternativas Atualizam automaticamente

113. Editar Reunião Tela de Opções Campos de visualização editáveis Alternativas Outros itens relacionados Exportação

114. Reunião Online Participantes da Reunião Dados da Reunião atual Alternativas Conversa Detalhes Digítação Sair da Reunião

115. Relacionamento Busca Filtro por status Alternativas Atualizam automaticamente

116. Editar Reunião Tela de Opções Campos de visualização editáveis Alternativas Outros itens relacionados Exportação

117. Criação de chamado (cliente) Alternativas

118. Blog Busca Filtro por status Alternativas Atualizam automaticamente

119. Editar Post Tela de Opções Campos de visualização editáveis Alternativas Outros itens relacionados Exportação

120. Criar Post Alternativas

121. Usuários Busca Filtro por status Alternativas Atualizam automaticamente

122. Editar Usuário Tela de Opções Campos de visualização editáveis Alternativas Exportação

123. Criar Usuário Alternativas

124. Configurações: Módulos Alternativas

125. Configurações: Sistema Alternativas

126. Configurações: Aparência Alternativas

127. Login Alternativas

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

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

130. Principais Referências NETTO, Alcides. Entrevista sobre a situação das empresas de design em Manaus. Manaus, AM . Realizada em 10/06/2007 MEMÓRIA, Felipe F. P. Design para a Internet: Projetando a Experiência Perfeita . 1. ed. Rio de Janeiro: Campus/Elsevier, 2005. KRUG, Esteve . Não me Faça Pensar . 2 ed. Alta Book, 2006 RADFAHER, Luli. Design/Web/Design . 2 ed.: Market Press, 2003

131. Conclusão Para se projetar um website, é necessário conhecer regras do design, interface e padrões web O mercado de design em Manaus oferece muitas oportunidades para novos profissionais Para criar um serviço para empresas de design é necessário conhecer a rotina A internet é uma ferramenta muito importante para os negócios de uma empresa de design

132. Agradecimentos: Deus, Meus Pais, Meu irmão e minha cunhada, Minha namorada, Professores, Prof. Orientador, Colegas Amigos

133. Obrigado. Rodrigo Santiago Designer de Interface