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
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
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
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
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
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
Público-alvo Direto Empresas de Design e Profissionais Liberais em Design Indireto Gráficas, Bureaus, Fornecedores, Clientes Conceituação
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
Levantamento de Dados O levantamento foi dividido em três partes: Design aplicado à web (webdesign) Design de Interface Negócios em Design Conceituação
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
Imagem padrões JPG e GIF São medidos em pixels (pontos) Resolução máxima de 72dpi. Webdesign
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
Cores Webdesign
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
Tipografia Webdesign
Tipografia Webdesign
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
Simplificação,  Less is More (Bauhaus) Boa  Legibilidade  contribui em um layout agradável Gestalt Webdesign
Equilíbrio das informações em blocos
Isso é Simplificação!
Gestalt Proximidade E Alinhamento Webdesign
 
Gestalt Webdesign Sites do mesmo grupo possuem topos semelhantes para identificação e familiaridade com o usuário
Gestalt Webdesign Cor do texto semelhante a do fundo, dificultando a legibilidade
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
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
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
Linha de comando HTML, responsável pela montagem do website
Linha de comando CSS, responsável pela parte visual do website
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
FLASH Website desenvolvido com a tecnologia Flash Webdesign
Padrões Web Webdesign Comparação do tempo de carregamento
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
 
 
 
 
 
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
 
 
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
 
 
 
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
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
 
 
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
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
 
 
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
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
Camiseteria www.camiseteria.com.br
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
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
 
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
 
 
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
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
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
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
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
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
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
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
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
Similares Aprex DotProject Webaula Acadêmico Similares
DotProject Gerenciamento de Projetos em geral Similares
Estrutura Companhias, Projetos, Tarefas, Calendário, Fórum, Tickets, Administração Similares
Pontos Positivos Muitas opções Inclusão de Módulos Livre Customizável Instalável Negativos Complicado Layout fraco Provoca Confusão Similares
Requisitos e Parâmetros Requisitos e Parâmetros
Requisitos e Parâmetros Requisitos e Parâmetros
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
Estrutura do Website Estrutura
Estrutura do Sistema Projetos; Tarefas; Clientes; Cronograma; Fornecedores; Profissionais; Reuniões; Relacionamento; Blog; Usuários; Configurações Estrutura
Naming Processo de Brainstorming Dividido por categorias (Design Empresa, Software, Web, Gerenciamento) Seleção por pregnância e relatividade Naming
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
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
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
Resultado Marca
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
Esboço: Opção 1 Alternativas
Wireframe: Opção 1 Alternativas
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
Esboço: Opção 2 Alternativas
Wireframe: Opção 2 Alternativas
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
Resolução de tela: 800x600 pixels Cores básicas: Laranja (#FF9900) e Cinza (#999999) Ícones Representativos Tecnologia sugerida: XAJAX + PHP + MYSQL Desenvolvimento Alternativas
Detalhamento Alternativas
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
Visualizar Projetos Filtros para os organização e visualização Postar novo projeto Principais campos identificadores dos registros Alternativas
Editar Projetos Exportação do projeto Opções do projeto Visualização e alteração automática dos registros Alternativas
Adicionar Projetos Alternativas
Tarefas Buscar Tarefa Criar nova tarefa Filtro por tipo de tarefa realizada Alternativas Atualizam automaticamente
Editar Tarefas Opções de tarefas Criar nova tarefa Campos de visualização editáveis Alternativas Outras tarefas relacionadas Exportação
Adicionar Tarefa Alternativas
Clientes Busca Criar novo cliente Filtro por situção do cliente Alternativas Atualizam automaticamente
Editar Clientes Opções de clientes Criar novo cliente Campos de visualização editáveis Alternativas Outros clientes relacionados Exportação
Adicionar Cliente Alternativas
Cronograma Alternativas Criar novo cliente Visualização por tipo Tarefa ou compromisso por projeto Linha de tempo
Fornecedores Busca Criar novo Fornecedor Filtro por situção do fornecedor Alternativas Atualizam automaticamente
Editar Fornecedores Tela de Opções Criar novo fornecedor Campos de visualização editáveis Alternativas Outros itensrelacionados Exportação
Adicionar Fornecedor Alternativas
Profissionais Busca Criar novo Profissional Filtro por situção Alternativas Atualizam automaticamente
Editar Profissional Tela de Opções Criar novo Profissional Campos de visualização editáveis Alternativas Outros   itens  relacionados Exportação
Adicionar Profissional Alternativas
Reuniões Busca Criar nova reunião Filtro por status Alternativas Atualizam automaticamente
Editar Reunião Tela de Opções Campos de visualização editáveis Alternativas Outros   itens  relacionados Exportação
Reunião Online Participantes da Reunião Dados da Reunião atual Alternativas Conversa Detalhes Digítação Sair da Reunião
Relacionamento Busca Filtro por status Alternativas Atualizam automaticamente
Editar Reunião Tela de Opções Campos de visualização editáveis Alternativas Outros   itens  relacionados Exportação
Criação de chamado (cliente) Alternativas
Blog Busca Filtro por status Alternativas Atualizam automaticamente
Editar Post Tela de Opções Campos de visualização editáveis Alternativas Outros   itens  relacionados Exportação
Criar Post Alternativas
Usuários Busca Filtro por status Alternativas Atualizam automaticamente
Editar Usuário Tela de Opções Campos de visualização editáveis Alternativas Exportação
Criar Usuário Alternativas
Configurações: Módulos Alternativas
Configurações: Sistema Alternativas
Configurações: Aparência Alternativas
Login Alternativas
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
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
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
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
Agradecimentos: Deus, Meus Pais, Meu irmão e minha cunhada, Minha namorada, Professores, Prof. Orientador, Colegas Amigos
Obrigado. Rodrigo Santiago Designer de Interface

Apresentação PCC - Rodrigo Santiago

  • 1.
    Design de InterfaceAPLICAÇÃ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 daweb 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 Desenvolvimentode 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 Facilitaro 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 ProjetoA 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 Empresasde Design e Profissionais Liberais em Design Indireto Gráficas, Bureaus, Fornecedores, Clientes Conceituação
  • 8.
    Metodologia da PesquisaCientí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 DadosO levantamento foi dividido em três partes: Design aplicado à web (webdesign) Design de Interface Negócios em Design Conceituação
  • 10.
    Webdesign “ oweb 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 JPGe 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.
  • 14.
    Tipografia Conforme padrãodo 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.
  • 16.
  • 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, Lessis More (Bauhaus) Boa Legibilidade contribui em um layout agradável Gestalt Webdesign
  • 19.
  • 20.
  • 21.
    Gestalt Proximidade EAlinhamento Webdesign
  • 22.
  • 23.
    Gestalt Webdesign Sitesdo mesmo grupo possuem topos semelhantes para identificação e familiaridade com o usuário
  • 24.
    Gestalt Webdesign Cordo texto semelhante a do fundo, dificultando a legibilidade
  • 25.
    Web no Brasil20 % (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 doconhecimento 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 siteprecisa 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 comandoHTML, responsável pela montagem do website
  • 29.
    Linha de comandoCSS, responsável pela parte visual do website
  • 30.
    AJAX Webdesign Websitecom suporte a tecnologia ajax, onde o usuário não espera carregar a página após realizar uma acão
  • 31.
    FLASH Website desenvolvidocom a tecnologia Flash Webdesign
  • 32.
    Padrões Web WebdesignComparaçã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
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 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
  • 40.
  • 41.
  • 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
  • 43.
  • 44.
  • 45.
  • 46.
    Metodologia da Arquiteturada 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
  • 48.
  • 49.
  • 50.
    Vantagens da usabilidadeem 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 StoryboardsWireframes 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
  • 52.
  • 53.
  • 54.
    Design Centrado noUsuá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 Ousuá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.
  • 57.
    Navegação Linear eHipertexto 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 eHipertexto Design de Interface Navegação Linear: O usuário visualiza uma página por vez, podendo voltar somente de uma por uma
  • 59.
  • 60.
    Acessibilidade Conhecendo asnecessidades 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
  • 61.
  • 62.
  • 63.
    Metodologia para AcessibilidadeLevantamento 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óciosE-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 Designem 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 áreado 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, obtivemosem 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 Designem 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 ClienteVá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 DotProjectWebaula Acadêmico Similares
  • 73.
    DotProject Gerenciamento deProjetos em geral Similares
  • 74.
    Estrutura Companhias, Projetos,Tarefas, Calendário, Fórum, Tickets, Administração Similares
  • 75.
    Pontos Positivos Muitasopções Inclusão de Módulos Livre Customizável Instalável Negativos Complicado Layout fraco Provoca Confusão Similares
  • 76.
    Requisitos e ParâmetrosRequisitos e Parâmetros
  • 77.
    Requisitos e ParâmetrosRequisitos e Parâmetros
  • 78.
    A estrutura foicriada para tomar como base o site e o sistema de gerenciamento Sistema será mais detalhado Versão Beta Estrutura do Website Estrutura
  • 79.
  • 80.
    Estrutura do SistemaProjetos; Tarefas; Clientes; Cronograma; Fornecedores; Profissionais; Reuniões; Relacionamento; Blog; Usuários; Configurações Estrutura
  • 81.
    Naming Processo deBrainstorming 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: QuickerJustificativa 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 rapideze 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.
  • 86.
    Baseado na tecnologiaAjax, 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 1Alternativas
  • 88.
  • 89.
    Baseado em aplicaçõesWeb 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 2Alternativas
  • 91.
  • 92.
    Tabela de EscolhaConceitos 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.
  • 95.
    Explicação Menu deNavegaçã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 Filtrospara os organização e visualização Postar novo projeto Principais campos identificadores dos registros Alternativas
  • 97.
    Editar Projetos Exportaçãodo projeto Opções do projeto Visualização e alteração automática dos registros Alternativas
  • 98.
  • 99.
    Tarefas Buscar TarefaCriar nova tarefa Filtro por tipo de tarefa realizada Alternativas Atualizam automaticamente
  • 100.
    Editar Tarefas Opçõesde tarefas Criar nova tarefa Campos de visualização editáveis Alternativas Outras tarefas relacionadas Exportação
  • 101.
  • 102.
    Clientes Busca Criarnovo cliente Filtro por situção do cliente Alternativas Atualizam automaticamente
  • 103.
    Editar Clientes Opçõesde clientes Criar novo cliente Campos de visualização editáveis Alternativas Outros clientes relacionados Exportação
  • 104.
  • 105.
    Cronograma Alternativas Criarnovo cliente Visualização por tipo Tarefa ou compromisso por projeto Linha de tempo
  • 106.
    Fornecedores Busca Criarnovo Fornecedor Filtro por situção do fornecedor Alternativas Atualizam automaticamente
  • 107.
    Editar Fornecedores Telade Opções Criar novo fornecedor Campos de visualização editáveis Alternativas Outros itensrelacionados Exportação
  • 108.
  • 109.
    Profissionais Busca Criarnovo Profissional Filtro por situção Alternativas Atualizam automaticamente
  • 110.
    Editar Profissional Telade Opções Criar novo Profissional Campos de visualização editáveis Alternativas Outros itens relacionados Exportação
  • 111.
  • 112.
    Reuniões Busca Criarnova reunião Filtro por status Alternativas Atualizam automaticamente
  • 113.
    Editar Reunião Telade Opções Campos de visualização editáveis Alternativas Outros itens relacionados Exportação
  • 114.
    Reunião Online Participantesda Reunião Dados da Reunião atual Alternativas Conversa Detalhes Digítação Sair da Reunião
  • 115.
    Relacionamento Busca Filtropor status Alternativas Atualizam automaticamente
  • 116.
    Editar Reunião Telade Opções Campos de visualização editáveis Alternativas Outros itens relacionados Exportação
  • 117.
    Criação de chamado(cliente) Alternativas
  • 118.
    Blog Busca Filtropor status Alternativas Atualizam automaticamente
  • 119.
    Editar Post Telade Opções Campos de visualização editáveis Alternativas Outros itens relacionados Exportação
  • 120.
  • 121.
    Usuários Busca Filtropor status Alternativas Atualizam automaticamente
  • 122.
    Editar Usuário Telade Opções Campos de visualização editáveis Alternativas Exportação
  • 123.
  • 124.
  • 125.
  • 126.
  • 127.
  • 128.
    Custos: Implementação AlternativasPara 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 AlternativasPlano 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 seprojetar 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, MeusPais, Meu irmão e minha cunhada, Minha namorada, Professores, Prof. Orientador, Colegas Amigos
  • 133.
    Obrigado. Rodrigo SantiagoDesigner de Interface