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