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 - IESAFACULDADE MARTHA FALCÃO - FMF

CURSO DE DESIGNPrincipal

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

DiretoEmpresas de Design e Profissionais Liberais em Design

IndiretoGrá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

WebdesignGestalt

Equilíbrio das informações em blocos

Isso é Simplificação!

ProximidadeE Alinhamento

WebdesignGestalt

WebdesignGestalt

Sites do mesmo grupo possuem topos semelhantes para identificação e

familiaridade com o usuário

WebdesignGestalt

Cor do texto semelhante a do fundo, dificultando a legibilidade

Web no Brasil Webdesign

• 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

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 Webdesign

• O site precisa ser visualizado corretamente por todos os browsers, para maior acessibilidade

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

Website desenvolvido com a tecnologia Flash

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

Companhias, Projetos, Tarefas, Calendário, Fórum, Tickets, Administração

Estrutura 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

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

Nomes Finalistas, atendendo a critérios de relevância, identificação e Facilidade de leitura

Seleção Naming

• 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

MarcaResultado

• 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

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

• 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

• 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çãoMenu 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 ProjetosExportaçã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çõesCampos 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çõesCampos 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

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

Para implementar o sistema na web para 10 clientes inicialmente.

Custos: Cliente Alternativas

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

Plano Grátis*: 2 Clientes, 5 Usuários, 50 MB de espaço em disco

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,

ColegasAmigos

Obrigado.

Rodrigo SantiagoDesigner de Interface