Curso: EGR7140-04454 (20211) - Projeto

Agenda do Curso

Geral
Geral
Caros alunos,

Esperamos que, na medida do possível, estejam bem,

O plano de ensino da disciplina para esse semestre não presencial está no primeiro link deste tópico.

Para qualquer esclarecimento, estamos à disposição,

Atenciosamente,

Berenice, Cláudia, Luciane

obs: relembramos que é necessário estar matriculado nas 4 disciplinas que compõem o Módulo de Projeto: Projeto Digital; Tecnologia Digital; - Ergonomia e Usabilidade; - Interfaces Digitais e Hipermídia.
- Avisos Fórum
- PLANO DE ENSINO E CRONOGRAMA 2121-1 Arquivo 286.6Kb Documento PDF
- TUTORIAL.- COMO USAR O BBB - a sala de acesso aos encontros síncronos no moodle. Arquivo 743.2Kb Documento PDF
- Fórum Contribuições, ferramentas de Apoio ao Projeto, técnicas ...
  Espaço destinado a colaboração e contribuições sobre a identificação de ferramentas de apoio ao projeto (P6).
- SALA DE ENCONTROS SÍNCRONOS - BigBlueButton
- Roteiro para elaboração do Relatório Final Arquivo 23.3Kb Documento do Word 2007
- Exemplos de relatório final Pasta
- Exemplos de videos promocionais Pasta
15 June - 21 June
15 June - 21 June

Aula 01 - Apresentação da disciplina / Estudo de similares

> Apresentação do Plano de Ensino, método de trabalho, processo de avaliação,bibliografia;
> Detalhamento do Método de Projeto adotado;
> Definição do tema de projeto a ser desenvolvido pelas duplas tendo em vista o tema geral relacionado a ações para sustentabilidade: social, ambiental ou econômica. Deve-se considerar : viabilidade em termos de tempo, custo e estrutura, acesso a representantes do público alvo.

Temática de projeto vinculada aos objetivos de desenvolvimento sustentável propostos pela ONU, acesse o link para buscar referências: https://nacoesunidas.org/conheca-os-novos-17-objetivos-de-desenvolvimento-sustentavel-da-onu/amp/

Atividades:
> Postar no Fórum, até sexta, o tema de projeto,
> Selecionar dois similares para análise na próxima aula. Observar as funcionalidades e conteúdos. Assistir o vídeo a seguir, no quadro azul, que leva para o LOOM.

Veja o vídeo no link a seguir para maiores informações: https://www.loom.com/share/e763985094974f9ab3b4fe5cf716dab2
- FÓRUM FORMAÇÃO DAS DUPLAS E DEFINIÇÃO DO TEMA DE PROJETO
- APRESENTAÇÃO MÉTODO - PDF Arquivo 930.3Kb Documento PDF
- ANALISE DE SIMILARES PDF Arquivo 255.6Kb Documento PDF
- Artigo - Metodologias para o design de apps -USIHC Arquivo 951.7Kb Documento PDF
- Norma ISO 9241-2011 - Design Centrado no Ser Humano Arquivo
22 June - 28 June
22 June - 28 June

Aula 02 l Levantamento de dados: Similares e Entrevistas

Encontro síncrono com toda a turma pelo BBB , link no primeiros tópicos aqui do Moodle:
Aula expositiva dialogada sobre a etapa de levantamento de dados. Similares e Pesquisas qualitativas com usuários.

Espaço para tirar dúvidas e aprofundar passos dessa etapa.

Atividades assíncronas:
Assistir a Videoaula sobre a técnica de Entrevistas,
Assistir vídeo sobre empatia.
Conheça melhor a técnica de entrevistas no acessando o material de Preece, Rogers e Sharp.

Realização das seguintes atividades para encaminhamento do projeto:

A) Análise dos similares com o foco em funcionalidades e conteúdos. Organizar um quadro comparativo
B) Planejamento das entrevistas com público alvo do projeto: definir o perfil dos participantes das entrevistas e o roteiro. Veja mais informações sobre a elaboração do roteiro

ATENÇÂO: As atividades A e B devem ser apresentadas na aula de orientação síncrona do dia 02/07.
A realização das entrevistas deve ser feita até 05/07 para que no dia 06 possamos trabalhar com os dados levantados e a persona

Vídeo sobre entrevistas
https://www.loom.com/share/6d590fb0fe6e458c93d64ec984ddea50

Assistir a palestra: Sobre empatia - Bené Brown}
- ENTREVISTAS PDF Arquivo 235.2Kb Documento PDF
- Como planejar as entrevistas entrevistas com os possíveis usuários do app? Página
- Leitura: Entrevistas - Preece - Rogers - Sharp - Design de Interação Arquivo 3.8Mb Documento PDF
- Brené Brown sobre Empatia URL
29 June - 5 July
29 June - 5 July

Aula 03 l

Encontro sincrono pelo BBB aqui no Moodle

Orientação dos grupos nos horários agendados

**Levar para orientação a análise de similares e o roteiro da entrevista

Assistir o vídeo sobre elaboração dos gráficos de comportamento e coerência das personas com os dados levantados.

Aula gravada sobre personas.
https://www.loom.com/share/8b923b8fd2d64a70820328476a3c42a2

Saiba mais sobre personas :Cooper professional Educaion
- PERSONAS PDF Arquivo 739Kb Documento PDF
- Cap_Personas UX_Unger e Chandler Arquivo 2.6Mb Documento PDF
- HISTORIA DE USUÁRIO Arquivo 374.6Kb Documento PDF
- Orientação Organizador
6 July - 12 July
6 July - 12 July

Aula 04 l Histórias de usuário e mapeamento

Encontro síncrono de orientação aqui no BB do Moodle

Atividades assíncronas

Analisar e sintetizar os dados brutos coletados nas entrevistas. Realizar os gráficos de comportamento.
Modelar as personas no seu projeto.

Assista ao vídeo: https://www.loom.com/share/04f304acb05e47e6841de71c037595b5

> Atividade: Elaboração de no mínimo 4 histórias de usuários (em forma de frases: Ex. Eu como <persona> gostaria/necessito/quero... <por quê?

> Início do mapeamento das histórias de usuários (detalhamento mostrando as funcionalidades e conteúdos que o aplicativo terá)

Saiba mais sobre Historias de usuários:
https://knowledge21.com.br/tudo-sobre/agilidade/user-stories/o-que-e-user-story/

http://blog.myscrumhalf.com/2011/10/user-stories-o-que-sao-como-usar/
- APRES HISTORIA DE USUARIOS PDF Arquivo 373.7Kb Documento PDF
- O que são histórias de usuários? Página
- Leitura para próxima aula: Mapeamento de Histórias de usuários - p.214 -Kalbach Arquivo 8.1Mb Documento PDF
- Exemplo de gráficos de comportamento para geração das personas Página
13 July - 19 July
13 July - 19 July

Aula 05 l Requisitos de projeto

Orientação das equipes - Esclarecimentos sobre o processo de construção das Hist. de Usuários > mapeamento da história de usuários > requisitos.

Tragam as personas e histórias de usuários prontas.

Atividades assíncronas:

> Enviar arquivo com o tratamento dos dados das entrevistas, personas, histórias de usuários e se possível, com o mapeamento de histórias de usuários. esse material não precisa estar no seu layout final, é uma pré-entrega para acompanhamento e orientação do processo.
20 July - 26 July
20 July - 26 July

Aula -

Encontro síncrono aqui no BBB das 9-10h e orientação por equipe entre 8-9h e 10-12h:

> Levar para a orientação síncrona das equipes o mapeamento das histórias de usuário e os requisitos do projeto.

Atividades assíncronas:

> Finalização dos requisitos do projeto. Realizar um quadro dividido em requisitos funcionais e requisitos de conteúdo.

> Preparação da apresentação da próxima aula (Primeiro seminário de Avaliação no dia 27/07).

O QUE DEVE CONSTAR NA APRESENTAÇÃO?

10 min para cada grupo + 10 min de discussão

1. Título do projeto e componentes da equipe,
2. Apresentação do contexto do tema e do problema, do objetivo do aplicativo
3. Análise de similares (no mínimo 2) apresentando : nome do app, 2 telas, objetivos do app, quadro de conteúdos e quadro de funcionalidades,
4. Pesquisa com público alvo (perfil de entrevistados, local entrevistas e/ou questionário)
5. Resultados das pesquisas com usuários ( mapas ou gráficos de comportamento organizados a partir das respostas dos entrevistados. Lembrar de destacar um bloco sobre os dados gerais demográficos, um outro bloco de resultados sobre a opinião e experiência dos entrevistados com o tema, e um outro sobre a experiência dos entrevistados com tecnologia, apps, e apps relacionados ao tema )
6. Persona (com narrativa + cenários simulando o começo de uso do app + objetivos finais da persona)
7. Histórias de usuários
8. Mapeamento de historias de usuários
9. Requisitos do projeto (requisitos funcionais e de conteúdo em formato de quadro ou tópicos),
- Orientação Organizador
- Equipes que compareceram nas orientações dos dias 06 e 13:
  
  1 Pamela e Tayara
  
  2 Maria Julia e Gabrielly
  
  3 Rodolpho e Gabriel
  
  4 Lucas, Guilherme e Eduardo
  
  5 Ana Carolina e Wyllian
  
  6 Diego (dia 06)
  
  7 Maria Augusta e João
  
  8 Julia e Arthur
  
  9 Gustavo e Cecilia
27 July - 2 August
27 July - 2 August
PRIMEIRA AVALIAÇÃO DO PROJETO
3 August - 9 August
3 August - 9 August

Aula 6

Etapa Estruturação: Mapeamento, Interação e Navegação

Clique no play para assistir a videoaula de Arquitetura da Informação:

Atenção! no final da videoaula tem instruções para a TAREFA desta aula.

Prazo: 09/agosto

.

ATIVIDADE:

Elaborar a Arquitetura da Informação → Arquitetura do App

.

*** Ler os materiais em pdf abaixo.

Sugestões: Vejam e os princípios de Design adotados pela equipe que fez o redesign do site <gov.uk> e principalmente os estudos

de arquitetura da informação:

https://www.gov.uk/design-principles#ninth

https://gds.blog.gov.uk/2015/03/04/things-we-dont-talk-about-when-we-talk-about-content/
- Aula Etapa Estruturação - Arquitetura da Informação Arquivo 949.4Kb Documento PDF
- Conteúdo para consulta: Arquitetura da Informação URL
- Imagens de mapas conceituais e mapa de sites (processo da Arquitetura da informaç'ao) Página
- Artigo para leitura: Arquitetura da informação Arquivo 732.4Kb Documento PDF
- Exemplo: mapa site + Features Arquivo 190.6Kb Documento PDF
- Slides sobre arquitetura da informação URL
- Exemplo de Exemplo de mapa conceitual para funcionamento de um processo Arquivo 268.3Kb Imagem (JPEG)
- Slides sobre Arquitetura da informação da Faber Ludens Arquivo 11.5Mb Documento PDF
- Exemplo de Mapa conceitual de funcionamento de um processo Arquivo 286.3Kb Imagem (JPEG)
- Software para elaboração de fluxograma URL
- Arquitetura da infrmação Arquivo 4.7Mb Documento PDF
- Arquitetura do App Price My Job Arquivo 190.8Kb Documento PDF
  Um aplicativo para calcular o orçamento de prestação de serviços de Design.
- Exemplo - App Plantio Arquivo 18.6Mb Documento PDF
  Projeto de um aplicativo para cultivo de hortas e afins (P6 2018/2)
  
  * mapa do app e wireframes Bem Elaborados
- Envio da ARQUITETURA DO APP Tarefa
  Enviar a imagem da arquitetura em .jpg
  
  Prazo: 09/08/21.
10 August - 16 August
10 August - 16 August
Aula 7

Etapa Estruturação: Mapeamento, Interação e navegação

Clique no play para assistir a videoaula sobre Navegação, Features e Mapa do APP:

ATIVIDADE:
- Revisar a Arquitetura do App (elaborada na aula anterior)
- Representar a Navegação
- Decidir e indicar quais telas terão Features
> O resultado desse processo será o MAPA DO APP.

[ ! ] O Mapa do site deve estar pronto até 12/08, pois na aula de Tec Digital 5a-f (12/8) iniciaremos a produção dos Wireframes do App.
- Aula Navegação, Features e Mapa do APP Arquivo 1.5Mb Documento PDF
- Envio do MAPA DO APP Tarefa
  Mapa do App (Arquitetura + Navegação + Features)
  
  Prazo: 12/08/21
12/08 5a-f
12/08 5a-f
Etapa Estruturação: Mapeamento, Interação e navegação

Clique no play para assistir a videoaula Wireframes:

Wireframes = Estrutura da Tela

No mapa do App você terá a visão global e o número total de telas do app e como será a navegação.

Agora você irá trabalhar individualmente em cada tela.

Essa fase é o início do planejamento das interfaces do app (telas).

ATIVIDADE

Definir o que cada tela irá mostrar/conter e elabore os WIREFRAMES (desenho esquemático da estrutura da tela) de cada tela do App.

Como fazer o wireframe?

Você deve desenhar a quantidade de itens mostrados na tela e onde eles estarão posicionados (informações textuais, imagens, campos de texto, botões, etc.).

Os wireframes das telas podem ser feitos com:
- croqui em papel com lápis; ou
- Illustrator, Photoshop; ou
- Ferramentas on-line para elaborar o wireframe:
Figma (https://www.figma.com/)

Invision app (https://www.invisionapp.com/)

Adobe XD (https://www.adobe.com/br/products/xd/prototyping-tool.html) gratuito

Balsamic Mockups (http://balsamiq.com/products/mockups/)

Moqups https://moqups.com/
- Aula Wireframes Arquivo 3Mb Documento PDF
- Exemplo Wireframes App Arquivo 96.5Kb Imagem (JPEG)
- P6 semestre anterior EXEMPLO Arquivo 1.5Mb Documento PDF
  Arquivo apresentação Final app Gufono
- P6 semestre anterior EXEMPLO Arquivo 52Mb Archive (ZIP)
  Apresentação Final app Talking Tales
- Envio dos Wireframes do App Tarefa
  Prazo prorrogado: 23/08/2021
24 August - 30 August
24 August - 30 August
Design visual: interface, identidade e mídias

Fase que envolve a definição dos atributos gráficos e midiáticos da interface. Comunica as funções da interface, exerce apelo visceral, sistematiza a identidade da aplicação. Em síntese, é o design visual que fará o usuário compreender o design da informação, a arquitetura do sistema, o escopo e as funções, fazendo com que o sistema satisfaça as necessidades dos usuários e cumpra os objetivos definidos primariamente.

Técnicas:

❑ Qualidades da interação

❑ Mood board

❑ Painel semântico

❑ Quadro referências gráfica

Encontro síncrono para início da elaboração desta etapa:

> Aula expositiva dialogada
> Agendamento de orientações para a próxima semana

Atividades assíncronas:
> Finalizar os painéis

> Iniciar estudos relativos a paleta de cores e estudos de tipografia:

1) Retomar o conceito da qualidade de interação. Elaborar o Painel Semântico do Conceito (imagens que expressam os atributos dessa qualidade de interação).

2) Explorar / Experimentar / Testar - paleta cromática e a tipografia (ambas devem expressar o conceito). Quais outros atributos de teoria da forma que podem ler no painel semântico? Apresentar no mínimo 2 possibilidades ou seja 2 estudos
- Textos para discussão
- D4UX Framework Arquivo 98.4Kb Imagem (PNG)
- Design for UX (D4UX) Arquivo 1Mb Documento PDF
- Sugestões de consulta
- Cor Digital Arquivo 7.1Mb Documento PDF
- Tipografia Digital Arquivo 8.7Mb Documento PDF
- Visualize com mais clareza as suas ideias com ajuda de um moodboard URL
- ENTENDA O QUE É MOODBOARD E COMO ESSA FERRAMENTA PODE AJUDAR NO SEU PROJETO URL
- Maquem um horario para orientação das equipes.
- Exemplos de padrões de interface - IOS e Android URL
31 August - 6 September
31 August - 6 September
Orientação por equipes -
*agendar na ferramenta organizador deste tópico

Processo Criativo - Geração de Alternativas para o layout da interface
Apresentar na orientação: conceito, painéis de referência visual, estudos/ paletas de cores, estudo/opções de tipografia ....

Próximo passo: Geração de Alternativas para o conjunto da interface.
14 September - 20 September
14 September - 20 September
Orientação por equipes de modo síncrono aqui no BBB:

- Ùltimos esclarecimentos sobre a entrega de Design visual

- Orientações/acompanhamento sobre a implementação do Design Visual no protótipo e ajustes realizados a partir dos resultados dos testes de usabilidade

Atividades assíncronas:

- Refinamento e finalização das interfaces no protótipo segundo resultados dos testes. Aplicações das decisões de Design visual nas telas do protótipo
- Orientação por grupos - Revisão para entrega do Processo de Design Visual. Aplicação nas interfaces. Organizador
- Exemplo de projeto desenvolvido no semestre anterior URL
21 September - 27 September
21 September - 27 September
9 h - Encontro síncrono geral para orientação sobre: finalização do protótipo, apresentação final do semestre, relatório e vídeo.

Das 9:45 às 12:00 h - Orientação por grupos

***Segunda dia 27/9, das 11 ás 12 plantão aqui no BBB para tirar dúvidas***

O que deve constar na apresentação final do dia 28? explanação oral, apresentação de slides, apresentação do protótipo digital e de vídeo simulando a interação

Tempo: 15 minutos + 5 de discussão

ROTEIRO DA APRESENTAÇÃO FINAL

- Síntese do contexto inicial do projeto (contexto do problema/temática, objetivos, público alvo, persona, principais requisitos)

- Arquitetura e alguns Wireframes.

- Apresentação do Conceito da Interface: painel semântico e palavras chaves e/ou frase.

- Geração de alternativas em imagem fixa

- Alternativa Escolhida (justificar a escolha do layout, bem como a definição da paleta de cores, do tratamento das imagens, o emprego da tipografia, a diagramação; definição de ícones, estilo; ...tais definições devem refletir o conceito da interface).

- Resultados dos testes de usabilidade: detalhamento do perfil dos participantes, data, local, documentação fotográfica, vídeo documentando a interação, roteiro dos cenários para tarefas, resultados para o projeto.

- Apresentação da versão final da interface com destaque para as últimas alterações

- Detalhamento técnico e especificações / Guia de estilo).

- Apresentação do protótipo do aplicativo em vídeo com o objetivo de documentar a interação.
- ESTRUTURA PARA ELABORAÇÃO DO RELATÓRIO FINAL- Data de envio pelo Moodle: 29 de setembro Página
- Exemplo de apresentação final Arquivo 1.4Mb Documento PDF
- Exemplo 2 -Apresentação final Giulia Arquivo 3.2Mb Documento PDF
- Orientação - finalização do projeto Organizador
28 September - 4 October
28 September - 4 October
AVALIAÇÃO FINAL - A APRESENTAÇÃO DOS PROJETOS SERÁ REALIZADA NO DIA 28 de SETEMBRO

Ps. Por favor, faça o agendamento do horário aqui neste tópico

Explanação oral, apresentação de slides, vídeo simulando a interação e apresentação do protótipo digital

Tempo: 15 minutos + 5 de discussão

ROTEIRO DA APRESENTAÇÃO FINAL

- Síntese do contexto inicial do projeto (temática, objetivos, público alvo, persona, principais requisitos)

- Arquitetura e alguns Wireframes.

- Apresentação do Conceito da Interface: painel semântico e palavras chaves e/ou frase.

- Geração de alternativas em imagem fixa

- Alternativa Escolhida (justificar a escolha do layout, bem como a definição da paleta de cores, do tratamento das imagens, o emprego da tipografia, a diagramação; definição de ícones, estilo; ...tais definições devem refletir o conceito da interface).

- Resultados dos testes de usabilidade: detalhamento do perfil dos participantes, data, local, documentação fotográfica, vídeo documentando a interação, roteiro dos cenários para tarefas, resultados para o projeto.

- Apresentação da versão final da interface com destaque para as últimas alterações

- Detalhamento técnico e especificações / Guia de estilo ou Sistema de design).

- Apresentação do protótipo do aplicativo em vídeo com o objetivo de documentar a interação.

Agenda do Curso

Geral

15 June - 21 June

22 June - 28 June

29 June - 5 July

6 July - 12 July

13 July - 19 July

20 July - 26 July

27 July - 2 August

3 August - 9 August

Etapa Estruturação: Mapeamento, Interação e Navegação

ATIVIDADE:

Elaborar a Arquitetura da Informação → Arquitetura do App

*** Ler os materiais em pdf abaixo.

10 August - 16 August

Etapa Estruturação: Mapeamento, Interação e navegação

ATIVIDADE:

12/08 5a-f

Etapa Estruturação: Mapeamento, Interação e navegação

Wireframes = Estrutura da Tela

ATIVIDADE

Ferramentas on-line para elaborar o wireframe:

24 August - 30 August

Design visual: interface, identidade e mídias

31 August - 6 September

Orientação por equipes - *agendar na ferramenta organizador deste tópico

14 September - 20 September

21 September - 27 September

28 September - 4 October

Orientação por equipes -
*agendar na ferramenta organizador deste tópico