Upload
ngonhan
View
212
Download
0
Embed Size (px)
Citation preview
Projeto Interdisciplinar de Tecnologia em Design Gráfico
4° semestre – 2017/2
SUMÁRIO
INTRODUÇÃO AO PROJETO 02
DISCIPLINAS QUE COMPÕEM O PROJETO 02 OS CLIENTES 03
CONTEÚDO DO PROJETO Etapa I: Pesquisa exploratória e levantamento dos requisitos 03
Etapa II: Projeto da interface 04 Etapa III: Codificação 04 Etapa IV: Documentação 04
CRONOGRAMA 05
INSTRUÇÕES Configuração da pasta do website 06 Confecção do CD de entrega do projeto 10
ANEXO
FICHA PARA LEVANTAMENTO DOS REQUISITOS - PESQUISA EXPLORATÓRIA 11
Projeto Interdisciplinar de Tecnologia em Design Gráfico
4° semestre – 2017/2
INTRODUÇÃO AO PROJETO
O quarto semestre do curso de Design tem foco no design digital. Assim, os alunos devem
organizar-se em equipes/ agências de design para a elaboração de um projeto interdisciplinar de
conclusão do semestre (Av2). Este projeto visa integrar todas as disciplinas a fim de capacitar o
discente a construir um website para um cliente. A distribuição dos clientes se dará por meio de um
sorteio feito pelos professores da disciplina de Projeto Gráfico II.
As equipes serão compostas obrigatoriamente por até três integrantes, não serão permitidos
trabalhos que fujam desta configuração. Ao final, as equipes devem entregar a documentação e um
website (inédito, totalmente funcional e responsivo).
Este guia (manual) possui especificações que auxiliarão o discente na elaboração do trabalho
interdisciplinar, portanto leia-o atentamente e siga as orientações dos professores das disciplinas de
Projeto Interdisciplinar de Tecnologia em Design Gráfico e Projeto Gráfico II - Design Digital, que serão
os responsáveis pelo projeto. Cabendo a disciplina de Projeto Interdisciplinar em Design Gráfico a
orientação da documentação e Projeto Gráfico II a responsabilidade pelo gerenciamento do projeto, a
orientação e a execução da parte prática, ou seja, a elaboração da interface, o design, os testes de
usabilidade, a codificação e a hospedagem do website ( verificar )
O produto final (documentação + website em funcionamento) será entregue na semana de
27/nov a 01/dez, nas respectivas aulas de cada professor.
Observação: Não será permitido a utilização de ferramentas “construtoras de sites”, ou seja, sites que
auxiliam na construção automática do código ou sites que oferecem templates/ layout para a
interface. A criação do projeto obrigatoriamente deve ser inédita. No caso de plágio o trabalho será
rejeitado, ocasionando a anulação da nota.
DISCIPLINAS QUE COMPÕEM O PROJETO
01- Projeto Interdisciplinar - Tec. em Design Gráfico Profs. Ailton Santos e Patrícia Fujita
Responsabilidade no projeto: Disciplina encarregada por orientar o discente a elaborar a
documentação do projeto (monografia).
Página 2
02- Projeto Gráfico II - Design Digital: Profs. Emerson Goya, Fabio Flatschart e Patrícia Fujita
Responsabilidade no projeto: Disciplina encarregada por gerenciar e orientar o projeto do
website, avaliar o design, gerenciar os testes de usabilidade na interface relacionado ao User
Experience-UX (experiência do usuário), User Interface-UI (interface do usuário) e também a
construção (código) do website.
DOS CLIENTES
Neste semestre faremos uma concorrência entre as equipes da sala, isto é, uma competição
interna para produzir um website. Deste modo serão seis clientes, um cliente diferente para cada sala
de aula (campus, período, turma) e as equipes irão disputar pela melhor solução em design e
usabilidade.
Os vencedores da concorrência terão a oportunidade de contribuir para uma boa causa
doando o website ganhador para a ong como a melhor criação da sala e também receberão dez horas
de atividade complementar.
A escolha do projeto vencedor se dará pela decisão da comissão julgadora, composta por todos
os professores de Projeto Gráfico II e Linguagem de Programação.
Lista dos clientes para cada turma
Vila Prudente noturno
A AMOVIZA – Associação dos Moradores do Bairro de Vila Zelina
http://www.amoviza.org.br
Santo Amaro matutino
A Mão Branca http://www.amaobranca.org.br
Santo Amaro noturno
Associação Comunitária Despertar http://www.despertar.org.br
Página 3
Memorial matutino
Assoc. Nosso Sonho http://www.nossosonho.org.br
Memorial noturno
Turma A Assoc. Civil Anima - Espaço Anima Jovem
http://www.anima.org.br/
Turma B Instituto reciclar http://www.reciclar.org.br/pt
CONTEÚDO DO PROJETO
O projeto está dividido em quatro etapas:
Etapa I: Pesquisa exploratória e levantamento dos requisitos.
Para a execução das atividades deste projeto, as agências devem iniciar a elaboração da pesquisa
exploratória, seu objetivo é colher informações sobre o cliente, analisar estes dados e projetar o
redesign do website. OBS: Utilizar o modelo disponível em ANEXO no final deste documento.
Etapa II: Projeto da interface.
É imprescindível que os grupos só iniciem esta fase após o cumprimento da etapa I. Pois na etapa II, a
atenção se volta para o planejamento e execução dos testes na interface que tem base no conteúdo
que foi extraído durante a pesquisa exploratória (etapa 1). Assim, o levantamento das informações na
pesquisa exploratória permitirá projetar uma interface eficaz. Segue abaixo os itens que compõe o
projeto da interface do website do cliente:
- Elaborar o novo Mapa de fluxo de navegação do site do cliente;
- Projetar a interface do cliente em wireframe de média fidelidade;
- Ajustar o wireframe para aplicar o teste paper prototype (protótipo de papel); - Construir o wireframe em alta fidelidade da interface no software UXPIN ( sugestão ); - Aplicar a Heurística de Nielsen na interface.
Observação: A base teórica para a execução desta fase cabe a disciplina de Arquitetura da Informação.
Página 4
Etapa III: Codificação
Esta é fase em que será iniciado a construção do código do website a partir dos estudos das etapas I e
II já elaborados (pesquisa exploratória, mapa de fluxo de navegação, wireframe, paper prototype e
heurística de Nielsen) iniciar-se-á o passo de transformação em código HMTL5 e CSS3, que é linguagem
adotada para a elaboração do website do cliente.
Etapa IV: Documentação
Elaboração da documentação do projeto a cargo da disciplina de Projeto Interdisciplinar - Tec. em
Design Gráfico.
Página 5
CRONOGRAMA
DATAS DE ENTREGAS DATAS
ETAPA I - Pesquisa exploratória e levantamento dos requisitos
- Entrega da digital da ficha para levantamento dos requisitos 28/ago - 01/set
ETAPA II - Projeto da interface
- Mapa de fluxo de navegação (trazer desenho impresso) 04/set- 08/set
- Wireframe em média fidelidade (trazer desenho à mão livre) 18/set - 22/set
- Teste de Paper Prototype (trazer desenho à mão) + relatório de
aplicação do teste
02/out - 06/out
- Aplicação da heurística de Nielsen no wireframe em alta fidelidade,
desenvolvido na ferramenta UXPIN
23/out - 27/out
ETAPA III - Codificação do website
- Início da codificação do website do cliente 30/out - 03/nov
ETAPA IV - Documentação do projeto (pré-aula)
- Entrega da impressa da documentação Conforme cronograma
específico da disciplina de
pré-aula
ENTREGA DO PROJETO (website + documentação) 27/nov - 01/dez
Página 6
INSTRUÇÕES
CONFIGURAÇÃO DA PASTA DO WEBSITE
Siga os passos para a criação dos arquivos e pastas. Lembre-se que o website deve funcionar/ rodar
na mídia de CD/DVD.
1- Crie a estrutura de pastas conforme a imagem
No drive CD, nomeie o rótulo (label) da mídia com o nome da sua equipe: Ex: “Ag_XPTO”
Página 7
2-NO Arquivo texto “Lista_com_Nome_RA_Integrantes.txt”
Insira dentro deste arquivo, as informações da sua agência, como:
“nome da agência”, “e-mail de contato”, “nome” e “ra” dos integrantes.
3- Na pasta “site”
Dentro desta pasta insira todos os arquivos “.html” e as pastas “imagens“ e ”includes”.
Obrigatoriamente a página inicial do website deve chamar-se “index.html”
Página 8
4- A pasta “imagens” deve obrigatoriamente conter todas as figuras utilizadas no website.
Página 9
5- A pasta “includes” deve conter os arquivos de “Folha de Estilos” e arquivos
“JavaScript” como por exemplo: “estilo.css”,“w3c.css” e “validacao.js”
OBSERVAÇÃO: TODOS OS ARQUIVOS E PASTAS DEVEM OBRIGATORIAMENTE ESTAR EM CAIXA
BAIXA E SEM ACENTUAÇÃO OU ESPAÇO ENTRE AS PALAVRAS.
PARA O CASO DE PALAVRAS COMPOSTAS, UTILIZE O SINAL DE UNDERLINE “_”
EX: cod_cliente.htm
Página 10
CONFECÇÃO DO CD DE ENTREGA DO PROJETO
Arte para a capa do CD utilizar apenas embalagem para CD
Capa de CD: devidamente
identificada com logo da sua
equipe, turma, semestre, turno
e unidade;
Verso da capa: inserir
Nome e RA dos integrantes
ATENÇÃO
NÃO ADESIVE A MÍDIA DO CD, apenas escreva o nome da Agência em caneta para CD,
pois pode descolar com o passar do tempo e danificar o leitor de DVD.
Página 11
ANEXO
FICHA PARA LEVANTAMENTO DOS REQUISITOS - PESQUISA EXPLORATÓRIA
CAMPUS
Unidade: Período: Turma:
DADOS DA SUA EQUIPE
Nome da equipe:
Nome do integrante 1:
E-mail do integrante 1:
Nome do integrante 2: E-mail do integrante 2:
Nome do integrante 3:
E-mail do integrante 3:
INFORMAÇÕES SOBRE O SEU CLIENTE
Informe o endereço do
website do seu cliente:
www.
Escreva um breve
histórico sobre o seu
cliente:
Inserir histórico neste espaço.
Descreva o serviço que é
prestado pelo seu cliente:
Inserir descrição do serviço neste espaço.
Página 12
Quais são as principais
características que
diferenciam o seu cliente
da concorrência:
Inserir diferencial do cliente neste espaço.
PÚBLICO-ALVO
Qual é o perfil do público
que frequenta e/ ou
utiliza o serviço (sexo,
idade, profissão, classe
social, escolaridade, etc.)
Inserir o perfil neste espaço.
ANÁLISE DE CONCORRÊNCIA: Formulário digital para a pesquisa da concorrência.
OBJETIVO: Pesquisar dois websites (um deles é o próprio cliente) de concorrentes diretos e 1
website concorrente indireto.
Instruções para o preenchimento:
● Todos as perguntas disposta no formulário são de preenchimento obrigatório.
● Lembre-se que deverá aplicar o mesmo questionário em dois concorrentes direto e um
concorrente indireto. O intuito é conhecer os prós e os contras, surgindo assim oportunidades
para a implementação no website do seu cliente.
● Evite resposta apenas com “SIM” ou com “NÃO”. Deixe sugestões construtivas e coesas.
ATENÇÃO: Para preencher o questionário da pesquisa acesse o link
referente a sua turma: -Vila Prudente noturno https://goo.gl/forms/e3a8R05J6xOw5l0z2
- Memorial manhã https://goo.gl/forms/t2E9DGJ1gYsNUC3z1
- Memorial noturno - Turma A https://goo.gl/forms/lN3R2oCSr9NQHu642
Página 13
- Memorial noturno - Turma B https://goo.gl/forms/bOZ8Apc3L3qMjEBt2
- Sto Amaro matutino https://goo.gl/forms/txV2QJH6p6z5rMDF3
- Sto Amaro noturno https://goo.gl/forms/omqGBabAWvnV1aLW2
Página 14