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

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

13. Cores Webdesign

15. Tipografia Webdesign

16. Tipografia 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

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

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

56. Camiseteria www.camiseteria.com.br

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

72. Similares Aprex DotProject Webaula Acadêmico Similares

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

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

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

79. Estrutura do Website Estrutura

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

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

85. Resultado Marca

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

88. Wireframe: Opção 1 Alternativas

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

91. Wireframe: Opção 2 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

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