Poa PostersDiego AgneProjeto Gráfico 4Prof. Heli Meurer
Sumário                                                  Projeto Preliminar                                               ...
Sumário                                                  Escopo                                                  Personas ...
01 Projeto    Preliminar
Projeto Preliminar                                                  Assunto                                               ...
Projeto Preliminar                                                  Motivação                                             ...
Projeto Preliminar                                                  Estado da Arte                                        ...
Projeto Preliminar                                                  Segundo Agner (2009) interfaces gráficas existem em fu...
Projeto Preliminar                                                  Objetivos           Objetivo Principal                ...
Projeto Preliminar                                                  Metodologia                                           ...
Projeto Preliminar                                                  Cronograma   Projeto Preliminar            Estratégia ...
Projeto Preliminar                                                  RecursosPoa Posters | Diego Agne | Projeto Gráfico 4 |...
02   Contextualização
Contextualização                                                  Questões Projetuais       O que desenvolver?            ...
Contextualização                                                  Taxonomia                            Atuação            ...
Contextualização                                                  Cenários                  Cenário Atual                 ...
Contextualização                                                  Situação inicial bem definida e si-                     ...
Contextualização                                                  Definição dos PapeisPoa Posters | Diego Agne | Projeto G...
Contextualização                                                  Identificação dos usuários                              ...
Contextualização                                                  Lista de Verificação I                                  ...
03   Estratégia
Análises Linguísticas                                                  Termos pertinentes ao projeto                      ...
Análises Linguísticas                                                  ato de viajar em aeronaves; aeronáutica. N. de     ...
Análises Linguísticas                                                  que permite a conexão de um gravador cassete a     ...
Análises Linguísticas                              Usuário             u.su.á.rio                                         ...
Análises Linguísticas                                                  Linha do tempo - Cartaz                            ...
Análises Linguísticas                                                  Linha do tempo - Cartaz                            ...
Análises Desenhísticas                                                  Análise Contextual                                ...
Análises Desenhísticas                                                  Análise Contextual                                ...
Análises Desenhísticas                                                  Análise Contextual                                ...
Análises Desenhísticas                                                  Análise Contextual                                ...
Análises Desenhísticas                                                  Análise Contextual                                ...
Análises Desenhísticas                                                  Análises estruturais, funcionais e                ...
Análises Desenhísticas                                                  Análises estruturais, funcionais e                ...
Análises Desenhísticas                                                  Análises estruturais, funcionais e                ...
Análises Desenhísticas                                                  Análises estruturais, funcionais e                ...
Análises Desenhísticas                                                  Análises estruturais, funcionais e                ...
Análises Desenhísticas                                                  Análises estruturais, funcionais e                ...
Análises Desenhísticas                                                  Análises estruturais, funcionais e                ...
Análises Desenhísticas                                                  Análises estruturais, funcionais e                ...
Análises Desenhísticas                                                  Análises estruturais, funcionais e                ...
Análises Desenhísticas                                                  Análises estruturais, funcionais e                ...
Análises Desenhísticas                                                  Análises estruturais, funcionais e                ...
Análises Desenhísticas                                                  Análises estruturais, funcionais e                ...
Análises Desenhísticas                                                  Análises estruturais, funcionais e                ...
Análises Desenhísticas                                                  Análise dos Diferenciais                          ...
Análises Desenhísticas                                                  Análise dos Diferenciais                          ...
Análises Desenhísticas                                                  Análise dos Diferenciais                          ...
Análises Desenhísticas                                                  Análise dos Diferenciais                          ...
Análises Desenhísticas                                                  Painel SemânticoPoa Posters | Diego Agne | Projeto...
Análises Desenhísticas                                                  Painel SemânticoPoa Posters | Diego Agne | Projeto...
Análises Desenhísticas                                                  Painel SemânticoPoa Posters | Diego Agne | Projeto...
Análises Desenhísticas                                                  Painel SemânticoPoa Posters | Diego Agne | Projeto...
Análises Desenhísticas                                                  Análise comparativa de                            ...
Análises Desenhísticas                                                  Análise da identidade                             ...
Análises Desenhísticas                                                  Análise da identidade                             ...
Análises Desenhísticas                                                  Análise da identidade                             ...
Análises Desenhísticas                                                  Análise da identidade                             ...
Lista de Verificação II                                                  Restrições                                       ...
04   Escopo
Escopo                                                  Personas                                                  24 anos,...
Escopo                                                  Definição das ferramentas e                                       ...
Escopo                                                  Cenários hipotéticos                                              ...
Escopo                                                  Cenários hipotéticos                                Diego         ...
Escopo                                                  Cenários hipotéticos                                              ...
Escopo                                                  Cenários hipotéticos                                   João       ...
Escopo                                                  Cenários hipotéticos                                              ...
Escopo                                                  Cenários hipotéticos                                 Tiago        ...
Escopo                                                  Diferencial semânico pretendido                                   ...
05   Estrutura
Estrutura                                                  Organograma do produto.                                        ...
06   Esqueleto
Esqueleto                                                  Wireframe estrutural                                           ...
Esqueleto                                                  Wireframe arquiteturalPoa Posters | Diego Agne | Projeto Gráfic...
Esqueleto                                                  Wireframe arquitetural                                         ...
07   Estética
Estética                                                  LogográficaPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.:...
Estética                                                  CromográficaPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof....
Estética                                                  Tipográfica                                                  Fam...
Estética                                                  Pictográfica / IconográficaPoa Posters | Diego Agne | Projeto Gr...
08   Execução
ExecuçãoPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer   83
ExecuçãoPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer   84
ExecuçãoPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer   85
ExecuçãoPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer   86
ExecuçãoPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer   87
ExecuçãoPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer   88
ExecuçãoPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer   89
ExecuçãoPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer   90
ExecuçãoPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer   91
ExecuçãoPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer   92
ExecuçãoPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer   93
ExecuçãoPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer   94
ExecuçãoPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer   95
ExecuçãoPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer   96
Bibliografia                                                  AGNER, Luiz. Ergodesign e arquitetura de infor-             ...
Relatorio Projeto 4
Próximos SlideShares
Carregando em…5
×

Relatorio Projeto 4

365 visualizações

Publicada em

Publicada em: Educação
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
365
No SlideShare
0
A partir de incorporações
0
Número de incorporações
19
Ações
Compartilhamentos
0
Downloads
5
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Relatorio Projeto 4

  1. 1. Poa PostersDiego AgneProjeto Gráfico 4Prof. Heli Meurer
  2. 2. Sumário Projeto Preliminar Assunto Tema Problema Antecedentes Motivação Estado da arte Objetivos Metodologia Cronograma Recursos Contextualização Questões projetuais Taxonomia Cenários SIBD e SFBD Definição dos papeis Identificação dos usuários Lista de verificação I Estratégia Termos pertinentes ao projeto Linha do tempo Análise contextual Análises estruturais, funcionais e heurísticas Análise dos diferenciais semânticos Painel semântico Análise comparativa de ferramentas e funcionalidades Análise da identidade gráfico-visual Lista de verificação IIPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 3
  3. 3. Sumário Escopo Personas Definição das ferramentas e funcionalidades Cenários hipotéticos Diferencial semântico pretendido Estrutura Organograma Esqueleto Wireframe estrutural Wireframe arquitetural Estética Logográfica Cromográfica Tipográfica Pictográfica / Iconográfica Execução BibliografiaPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 4
  4. 4. 01 Projeto Preliminar
  5. 5. Projeto Preliminar Assunto Posters em Porto Alegre Tema Desenvolvimento de um aplicativo para Iphone, com interface gráfica amigável, para fins de catalogação de posters e cartazes espalhados na cidade de Porto Alegre, utilizando a experiência do usuário como ferramenta principal. Problema Como projetar um aplicativo para iphone com a função de captura, catalogação e compartilhamento de imagens? Antecedentes Por ser um projeto que está sendo também desen- volvido externamente, em um ambiente de trabalho. Inspirado no site postersinamsterdam.com, o Poa Posters foi desenvolvido graficamente idêntico ao referido site, apenas para registro da ideia de im- plantar o mesmo projeto na cidade de Porto Alegre. Cabe ao autor desenvolver a interface gráfica e fun- cionalidades do novo site e do aplicativo Iphone. Anteriormente, o site seria usado somente para ins- piração, sendo o conteúdo disponível para os fun- cionários do escritório onde trabalha o autor deste projeto, mas foi acordado que o site viria à público.Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 6
  6. 6. Projeto Preliminar Motivação Em geral, a população de Porto Alegre é carente em questão de interação entre pessoas. O aplicativo visa um meio de que ocorra essa interação, princi- palmente entre os interessados em artes gráficas, posters e cartazes, profissionais e estudantes de Design Gráfico. Existe também um desejo latente de que haja um re- gistro fotográfico desse tipo de arte que se espalha pela cidade de Porto Alegre. Esse registro será feito totalmente pelos usuários que enviarão fotos através do aplicativo ou diretamente pelo site. aplicativo Iphone.Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 7
  7. 7. Projeto Preliminar Estado da Arte Atualmente, uma busca com os termos “PORTO ALEGRE” na loja de aplicativos do Iphone retorna 37 resultados sendo: 5 Aplicativos de guia de turismo 9 Aplicativos de rádio on-line 3 E-books Nesses 37 aplicativos analisados não existe nenhum que haja uma interação entre usuários, tampouco nenhum aplicativo que exiba ou registre imagens da cidade, sejam elas de qualquer motivo. Já uma busca com a palavra chaves “POSTERS” retorna 75 resultados sendo esses aplicativos de diversas partes do mundo e com diversas funções diferentes. A maioria deles apresenta uma lista de imagens de um determidado assunto específico. A grande referência para este projeto é o aplicati- vo Instagram. Com ele é possível aplicar diferentes filtros na imagem capturada e compartilhar com outros usuários do aplicativo ou até mesmo nas prin- cipais redes sociais.Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 8
  8. 8. Projeto Preliminar Segundo Agner (2009) interfaces gráficas existem em função do usuário. Toda interface deve ser estudada e projetada baseada nas noções de usabilidade do mesmo. O uso da arquitetura da informação torna-se indispensável no desen- volvimento de um projeto de interface gráfica. Para Agner (2009) a arquitetura da informação deve atuar como mediado- ra entre os usuários e a interface gráfica propriamente dita. “O arquiteto da informação seria a pessoa que mapeia determinada informação e nos disponibiliza o mapa, de modo a que todos possamos criar nossos caminhos próprios em direção ao conhecimento.” (AGNER, 2009) Preece et al. (2005) define o design de interação como: “Design de produtos interativos que forne- cem suporte às atividades cotidianas das pessoas, seja no lar ou no trabalho.” O design de interação deve identificar necessidades do usuário, estabelecendo requisitos, criar caminhos alternativos, construir versões interativas para serem transmitidas aos outros e avaliar a sua acessibilidade. Preece et al. (2005) também fala que é preciso envolver os usuários usando de dois aspectos, que não tem nada a ver com a funcionalidade: o gerenciamento da expectativa e o senti- mento de apropriação. O gerenciamento de expectativa busca evitar que o usuário fique triste ou desapontado ao utilizar um produto que ele adquiriu, após um marketing exagerado. Já o sentimento de apropriação significa fazer o usuário perceber que contribuiu para o desenvolvimento daquele produto e assim acaba se sentindo seu dono.Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 9
  9. 9. Projeto Preliminar Objetivos Objetivo Principal Projetar um aplicativo para Iphone, com interface gráfica ami- gável, que permita o usuário registrar, compartilhar e princi- palmente catalogar os posters e cartazes de rua na cidade de Porto Alegre. Objetivos Secundários - Criar uma identidade visual para o projeto; - Desenvolver uma interface para o site onde as imagens ficarão registradas; - Projetar um sistema de integração entre o aplicativo do Iphone e o site; - Organizar as instruções do aplicativo; - Integrar o projeto com o ambiente de trabalho.Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 10
  10. 10. Projeto Preliminar Metodologia Será utilizada a metodologia do Projeto E, de Meu- rer e Szabluk. Esta metodologia projetual é especifi- ca para ambientes dígito-virtuais. Estratégia Projeto Preliminar, contextualização e análises. Escopo Geração de alternativas, organização de conteúdo. Estrutura Fluxograma de tarefas. Esqueleto Wireframes Estética Definição da Identidade visual Execução Modelo funcional, produto final.Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 11
  11. 11. Projeto Preliminar Cronograma Projeto Preliminar Estratégia Escopo Estrutura Esqueleto Estética Execução/EntregaPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 12
  12. 12. Projeto Preliminar RecursosPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 13
  13. 13. 02 Contextualização
  14. 14. Contextualização Questões Projetuais O que desenvolver? Projeto para desenvolvimento de um aplicativo para iPhone. Por que projetar? Para haver uma catalogação dos posters e cartazes espalhados pelas ruas de Porto Alegre. Como desenhar? Usando a metodologia do Projeto E de Meurer e Szabluk. Para todos na área do Design Gráfico que podem Para quem projetar? usar como referência e apreciadores de arte urbana em geral. Com que tecnologia? Objective-CPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 15
  15. 15. Contextualização Taxonomia Atuação Social 60% Comercial 10% Institucional 10% Serviços 20% Finalidade Referêncial 60% Lazer 30% Educação 0% Informação 10% Plataformas Web 10% Mobile 70% Físico 20% Tecnologia Objetive-C 70% Outras 30%Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 16
  16. 16. Contextualização Cenários Cenário Atual Pouca interação entre usuários do público-alvo. Todos vão até bancos de dados de referência. Pouco compartilhamento. Cenário Pretendido Interação entre usuários. Facilidade de consulta. Mais referências.Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 17
  17. 17. Contextualização Situação inicial bem definida e si- tuação final bem definida Um aplicativo em que o usuário, no caso um pro- SIBD fissional ou estudante da área do Design Gráfico, possa capturar e divulgar uma imagem de um cartaz ou pôster que tenha lhe chamado a atenção. Para ser desenvolvido, o projeto usará de interface SFBD gráfica amigável, Objetive-C como linguagem de programação e o Projeto E como metodologia pro- jetual.Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 18
  18. 18. Contextualização Definição dos PapeisPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 19
  19. 19. Contextualização Identificação dos usuários Porto Alegre tem hoje uma grande quantidade de usuário do smartphone iPhone, a maioria deles sem- pre dispostos a conhecer novas utilidades e parti- cularidades do aparelho. Uma grande parte desses usuários usam o iPhone pelo conceito que a Apple, desenvolvedora do smartphone, passa para os seus usuários. Um conceito de interface totalmente volta- da para o usuário, o que torna o aparelho simples e intuitivo. São esses usuários, os que se importam com a inter- face e a estética do iPhone, que o projeto visa atin- gir. Mais precisamente estudantes e profissionais da área do Design Gráfico, que estão sempre buscando referência e motivação para iniciar os seus trabalhos. Além disso, o projeto também quer atingir pessoas que se interessam pela arte urbana, seja ela exibida em um cartaz na rua, em um pôster promocional de algum evento que está para ocorrer na cidade ou até mesmo algum cartaz de propaganda de uma empresa.Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 20
  20. 20. Contextualização Lista de Verificação I Principais pesquisas e análises que serão feitas nas próximas etapas do projeto: Uso do aparelho: Analisar diferentes situações de uso. Interface Gráfica Amigável: Estudar os padrões estéticos. Referências: Pesquisar aplicativos semelhantes.Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 21
  21. 21. 03 Estratégia
  22. 22. Análises Linguísticas Termos pertinentes ao projeto in.te.ra.ção Interação sf (inter+ação) 1 Ação recíproca de dois ou mais corpos uns nos outros. 2 Atualização da influên- cia recíproca de organismos inter-relacionados. 3 Ação recíproca entre o usuário e um equipamento (computador, televisor etc.). I. social, Sociol: ações e relações entre os membros de um grupo ou entre grupos de uma sociedade. A interação humano-computador é um campo de estudo interdisciplinar que tem como objetivo geral entender como e por que as pessoas utilizam (ou não utilizam) a tecnologia da informação. O termo Human Computer Interaction começou a ser adota- do em meados dos anos 1980 como uma maneira de descrever um novo campo de estudo, cuja princi- pal preocupação era como o uso dos computadores poderia enriquecer a vida pessoal e profissional de seus usuários. (Moraes, 2002) na.ve.ga.ção Navegação sf (lat navigatione) 1 Ato de navegar. 2 Percurso habitual que faz uma embarcação, sobre ou sob a superfície das águas, ou uma aeronave, de um porto ou de um aeroporto a outro. 3Movimento marítimo. 4 Viagem longa e difícil por mar. 5 Arte de navegar; náutica. 6 Reg (Amazonas) Lancha, gaiola, navio. 7Inform Ação, controlada pelo usuário, de percorrer um texto ou aplicação multimídia sem uma ordem específica; paginação,browsing. N. aérea: arte ouPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 23
  23. 23. Análises Linguísticas ato de viajar em aeronaves; aeronáutica. N. de altura: a de alto-mar. N. de cabotagem: a costeira e nacional. N. fluvial: a praticada em rios, canais e la- gos. N. interior: o mesmo que navegação fluvial. N. marítima: navegação por mar. N. submarina: navega- ção abaixo da superfície das águas. Segundo Lévy, a navegação pode ser dividida em duas características: Navegação para caçada: quando procuramos uma informação precisa, que desejamos obter o mais rápido possível. Navegação para pilhagem: quando estamos vaga- mente interessados em um assunto, mas prontos a nos desviar a qualquer instante de acordo com o clima do momento. Vagando de site em site e de link em link. Interface in.ter.fa.ce sf (inter+face) 1 Superfície, plana ou não, que for- ma um limite comum de dois corpos ou espaços. 2 Limite entre duas faces em sistema físico-químico heterogêneo. 3 Inform Ponto no qual um sistema de computação termina e um outro começa. 4Inform Circuito, dispositivo ou porta que permite que duas ou mais unidades incompatíveis sejam interligadas num sistema padrão de comunicação, permitindo que se transfiram dados entre eles. 5 Inform Parte de um programa que permite a transmissão de dados para um outro programa. I. ACR, Inform:interfacePoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 24
  24. 24. Análises Linguísticas que permite a conexão de um gravador cassete a um computador. I. amigável, Inform: projeto de in- terface de um programa, fácil de usar e de aprender; front-end amigável. I. digital de instrumento musical, Inform: interface serial que conecta instrumentos eletrônicos (até 32 diferentes), transportando sinais de um seqüenciador ou computador, para instruir os diferentes instrumentos sobre as notas que devem ser tocadas, o volume do som etc. Sigla: MIDI. I. grá- fica do usuário, Inform: interface entre um sistema operacional ou programa e o usuário. Como utiliza gráficos ou ícones para representar funções ou ar- quivos, dispensa a digitação dos comandos do siste- ma, facilitando o controle do software. Sigla: GUI. I. homem-máquina, Inform: equipamento e programa projetados para tornar mais fácil e eficiente a comu- nicação dos usuários com a máquina. Sigla: MMI. Em 1981, a Xerox introduziu o sistema 8010 “Star”, que revolucionou a maneira como as interfaces para computadores pessoais eram projetadas. Embora não tenham sido comercialmente bem-sucedidas, muitas da ideias que estavam por trás desse design foram emprestadas e adaptadas por outras empre- sas, como no caso do Apple Mac e do Microsoft Windows, que acabaram obtendo muito sucesso. (baseado em Miller e Johnson, 1996, e Smith et al., 1982)Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 25
  25. 25. Análises Linguísticas Usuário u.su.á.rio adj (lat usuariu) 1 Que, por direito proveniente de uso, frui as utilidades da coisa. 2 Que serve para nosso uso. 3 Dizia-se do escravo de que só se tinha o uso, mas não a propriedade. smAquele que, por direito de uso, frui as utilidades da coisa. U. auto- rizado, Inform: pessoa à qual é dada a permissão para acessar um sistema. U. remoto, Inform: pessoa que utiliza um computador ou programa através do acesso remoto. U. sofisticado, Inform: usuário que precisa do último e mais rápido modelo de compu- tador, porque executa aplicações complexas, com alta demanda de processamento. Para Fleming, uma interface gráfica amigável será bem-sucedida se der suporte adequado ao compor- tamento e às intenções do seu usuário. Por isso é importante para o arquiteto da informação compre- ender quais são estas intenções. É preciso descobrir o que o usuário pensa, o que quer e como age. Usabilidade u.sa.bi.li.da.de sf (usar+vel+i+dade) Inform Facilidade com a qual um equipamento ou programa pode ser usado. A usabilidade é geralmente considerada como o fator que assegura que os produtos são fáceis de usar, eficientes e agradáveis – da perspectiva do usuário. Implica otimizar as interações estabelecidas pelas pessoas com produtos interativos, de modo a permitir que realizem suas atividades no trabalho, na escola e em casa.Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 26
  26. 26. Análises Linguísticas Linha do tempo - Cartaz 1454 Primeiro cartaz conhecido, de Saint-Flour. Feito em manuscrito e sem imagens. 1796 Descobertas a litografia e a cromolitografia, que, permitindo o uso da cor, proporcionou um grande desenvolvimento para o meio. 1860 A interação entre produção artística e industrial apa- rece com Jules Chéret. 1880 Auge dos cartazes retratando a vida noturna de Pa- ris. Destaque para Toulouse-Lautrec. 1900 O movimento mais importante do design de car- tazes era o Art Noveau, tendo o tcheco Alphonse Mucha o seu principal artista. 1920 e 1930 Os cartazes assumem as características dos estilos internacionais como Bauhaus, De Stijl, Futurismo e Cubismo. A maioria dos cartazes dessa época visava promover produtos e eventos culturais. 1939 a 1945 Cartazes de produtos deram lugar àqueles que pro- moviam esforços de guerra e apelavam pelo recruta- mento soldados.Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 27
  27. 27. Análises Linguísticas Linha do tempo - Cartaz Os cartazes são cada vez mais encarados e vendidos Anos 60 como obras de arte. Grandes artistas como Andy Warhol e Roy Lichtenstein se destacam. Anos 70 Movimento psicodelista. Os cartazes dessa época eram criados para um público específico. Anos 80 e 90 Os cartazes tornam-se quase que completamente publicitários. Alguns causaram polêmica com os da campanha “The United Collors of Benetton” Anos 2000 O ambiente dígito-virtual se torna cada vez mais usado e com isso os próprios cartazes assumem tam- bém uma forma virtual.Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 28
  28. 28. Análises Desenhísticas Análise Contextual http://instagr.am/ Instagram O Instagram é uma rede social de compartilhamento de fotos que já tem mais de 15 milhões de usuários. Atualmente é o quinto aplicativo mais baixado entre os gratuitos da AppStore da Apple. Com ele é pos- sível capturar imagens, aplicar filtros e publicar nas redes sociais. Pontos positivos: Utilização de ícones e metáforas gráficas. Linguagem visual muito simples de ser interpretada. Pontos negativos: Usuários indicam que a última ver- são do aplicativo perdeu em processamento.Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 29
  29. 29. Análises Desenhísticas Análise Contextual Este aplicativo desenvolvido pela Bucket Labs, per- Phoster mite que o usuário crie seus próprios posters através de uma série de layouts pré-definidos. É possível compartilhas os cartazes criados nas redes sociais e email. Pontos positivos: Muito simples de usar, interface intuitiva. Pontos negativos: Impossibilita a alteração dos layouts prontos o que deixa o aplicativo restrito.Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 30
  30. 30. Análises Desenhísticas Análise Contextual http://postersinamsterdam.com/ Posters in Amsterdam Posters in Amsterdam é um site que é uma fonte de inspiração para designers. Mostra os cartazes expostos na cidade de Amsterdam, desde o ano de 2002. A intenção do autor foi “eternizar” os cartazes que ficavam expostos por pouco tempo nas ruas da cidade. Pontos positivos: Linguagem direta. Pontos negativos: Não possui aplicativo para smar- tphone, o que facilitaria muito a postagem de ima- gens no site.Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 31
  31. 31. Análises Desenhísticas Análise Contextual É uma galeria de arte de bolso. Permite que o usu- EasyArt ário visualize diversos posters de obras de arte para comprar. É possível também escolher uma moldura e o tamanho do cartaz. Pontos positivos: É possível, através do aplicativo, capturar uma imagem de um ambiente e posicionar o poster na parede. Pontos negativos: Montagens ficam muito artificiais.Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 32
  32. 32. Análises Desenhísticas Análise Contextual Apenas uma galeria de imagens remetendo aos pos- 1920’s Posters ters clássicos da década de 1920. Pontos positivos: Uma grande variedade de imagens raras. Pontos negativos: Não possui interface gráfica alguma, somente imagens.Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 33
  33. 33. Análises Desenhísticas Análises estruturais, funcionais e heurísticas. InstagramPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 34
  34. 34. Análises Desenhísticas Análises estruturais, funcionais e heurísticas. InstagramPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 35
  35. 35. Análises Desenhísticas Análises estruturais, funcionais e heurísticas. InstagramPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 36
  36. 36. Análises Desenhísticas Análises estruturais, funcionais e heurísticas. Instagram Topo - Dashboard Topo - Popular Usuário Foto Popular Foto publicada Barra de interação Barra de interação Botão Fechar Topo - Filtros Captura da câmera Imagem capturada Abrir Galeria Filtro Capturar Nome Topo - Notificações Topo - Perfil Menus Notificações Títulos Menus Títulos Menus Barra de interação Barra de interaçãoPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 37
  37. 37. Análises Desenhísticas Análises estruturais, funcionais e heurísticas. Instagram Tarefa: Capturar uma imagem e compartilhar em uma rede social. Usuário abre o aplicati- vo e seleciona o ícone do meio que corres- ponde à captura de imagens. O dispositivo libera a ação da câmera. Usu- ário foca no que quer fotografar e aperta o botão correspondente à captura da imagem.Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 38
  38. 38. Análises Desenhísticas Análises estruturais, funcionais e heurísticas. Instagram Aplicativo captura a imagem e disponibili- za uma série de filtros para serem aplicados na imagem. Usuário seleciona o filtro dese- jado e aperta no botão “Próximo” no topo da tela. Aplicativo seleciona o filtro e solicita que usuário coloque uma legenda. Usuário escre- ve a legenda, escolhe se deseja compartilhar nas redes sociais e aperta no botão “OK” no topo da tela.Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 39
  39. 39. Análises Desenhísticas Análises estruturais, funcionais e heurísticas. Instagram Aplicativo responde publicando a foto do usuário. Volta para a primeira tela de linha do tempo.Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 40
  40. 40. Análises Desenhísticas Análises estruturais, funcionais e heurísticas. Instagram Feedback: Bom Falar a linguagem do usuário: Ótimo Saídas claramente demarcadas: Regular Consistência: Ótimo Previnir erros: Regular Minimizar a sobrecarga de memória do usuário: Ruim Atalhos: Regular Diálogos simples e naturais: Bom Boas mensagens de erro: Ruim Ajuda e documentação: RegularPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 41
  41. 41. Análises Desenhísticas Análises estruturais, funcionais e heurísticas. Posters in AmsterdamPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 42
  42. 42. Análises Desenhísticas Análises estruturais, funcionais e heurísticas. Posters in AmsterdamPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 43
  43. 43. Análises Desenhísticas Análises estruturais, funcionais e heurísticas. Posters in AmsterdamPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 44
  44. 44. Análises Desenhísticas Análises estruturais, funcionais e heurísticas. Posters in Amsterdam Topo - Identidade Visual Topo - Menu Conteúdo - Posters Botão Voltar Descritivo Redes Sociais Identificação Botão Categorias Voltar Categoria marcada Botão HomePoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 45
  45. 45. Análises Desenhísticas Análises estruturais, funcionais e heurísticas. Posters in Amsterdam Feedback: Bom Falar a linguagem do usuário: Bom Saídas claramente demarcadas: Regular Consistência: Ótimo Previnir erros: Regular Minimizar a sobrecarga de memória do usuário: Bom Atalhos: Ruim Diálogos simples e naturais: Regular Boas mensagens de erro: Regular Ajuda e documentação: RuimPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 46
  46. 46. Análises Desenhísticas Análise dos Diferenciais Semânicos Instagram Textual Icônico Simples Complexo Poucas Cores Muitas Cores Objetivo Subjetivo Sério Divertido Estático Dinâmico Utilitário Entretenimento Clássico Contemporâneo Informativo Interativo Posters in Amsterdam Textual Icônico Simples Complexo Poucas Cores Muitas Cores Objetivo Subjetivo Sério Divertido Estático Dinâmico Utilitário Entretenimento Clássico Contemporâneo Informativo InterativoPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 47
  47. 47. Análises Desenhísticas Análise dos Diferenciais Semânicos EasyArt Textual Icônico Simples Complexo Poucas Cores Muitas Cores Objetivo Subjetivo Sério Divertido Estático Dinâmico Utilitário Entretenimento Clássico Contemporâneo Informativo Interativo Phoster Textual Icônico Simples Complexo Poucas Cores Muitas Cores Objetivo Subjetivo Sério Divertido Estático Dinâmico Utilitário Entretenimento Clássico Contemporâneo Informativo InterativoPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 48
  48. 48. Análises Desenhísticas Análise dos Diferenciais Semânicos 1920’s Posters Textual Icônico Simples Complexo Poucas Cores Muitas Cores Objetivo Subjetivo Sério Divertido Estático Dinâmico Utilitário Entretenimento Clássico Contemporâneo Informativo InterativoPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 49
  49. 49. Análises Desenhísticas Análise dos Diferenciais Semânicos Comparativa Textual Icônico Simples Complexo Poucas Cores Muitas Cores Objetivo Subjetivo Sério Divertido Estático Dinâmico Utilitário Entretenimento Clássico Contemporâneo Informativo Interativo Instagram Posters in Amsterdam EasyArt Phoster 1920’s PostersPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 50
  50. 50. Análises Desenhísticas Painel SemânticoPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 51
  51. 51. Análises Desenhísticas Painel SemânticoPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 52
  52. 52. Análises Desenhísticas Painel SemânticoPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 53
  53. 53. Análises Desenhísticas Painel SemânticoPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 54
  54. 54. Análises Desenhísticas Análise comparativa de ferramentas e funcionalidades Instagram Posters in EasyArt Phoster 1920’s Amsterdam Posters Compartilhar conteúdo Sistema de busca Botão atualizar Sincronização Câmera Efeitos (Filtros) Salvar Favoritos Acesso restrito Adicionar amigos ConfiguraçõesPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 55
  55. 55. Análises Desenhísticas Análise da identidade gráfico-visual Análise da Assinatura Visual: Original Contraste Cor Forma Instagram Posters in AmsterdamPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 56
  56. 56. Análises Desenhísticas Análise da identidade gráfico-visual Análise Tipográfica: Instagram Posters in AmsterdamPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 57
  57. 57. Análises Desenhísticas Análise da identidade gráfico-visual Análise Cromográfica: Instagram Posters in AmsterdamPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 58
  58. 58. Análises Desenhísticas Análise da identidade gráfico-visual Análise das Metáforas Gráficas Instagram Posters in AmsterdamPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 59
  59. 59. Lista de Verificação II Restrições > Integração com interface web > Configurações avançadas do usuários > Notificações por Push Requisitos > Teclado multi toque > Integração com câmera > Integração com galeria Possibilidades > Informações sobre o usuário > Cadastro de categorias > Inserção de imagem por categoria específica > Seguir uma categoriaPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 60
  60. 60. 04 Escopo
  61. 61. Escopo Personas 24 anos, estudante e estagiário de design gráfico. Diego Está sempre buscando referências em sites e blogs sobre design. Para que usaria o aplicativo: - Buscar referências imagéticas em peças gráficas expostas nas ruas; - Compartilhar as que mais gosta com os seu amigos. João 22 anos, estudante de artes, trabalha em uma agência de publicidade. Nas horas vagas desenvolve projetos de artes plásticas. Para que usaria o aplicativo: - Divulgar os seus projetos; - Dar mais visibilidade aos posters que se interessa. Tiago 35 anos, publicitário, engajado em projetos fora do escritório. Busca sempre uma maneira de divulgar o nome da agência que gerencia. Para que usaria o aplicativo: - Publicar seus trabalhos e divulgar a sua marca.Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 62
  62. 62. Escopo Definição das ferramentas e funcionalidades - Compartilhar conteúdo - Sistema de busca - Botão atualizar - Câmera - Efeitos - Salvar favoritos - Adicionar amigos - Acesso restrito - ConfiguraçõesPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 63
  63. 63. Escopo Cenários hipotéticos Diego recebe um email de um amigo que solicita Diego que ele faça um cartaz de divulgação da sua festa. O amigo passa todas as informações mas Diego não tem ideias para começar a desenvolver a peça. Pega então o seu Smartphone, abre o aplicativo PoaPos- ters e dá uma boa olhada no que foi postado nos últimos dias. Encontra 3 cartazes que julga interessante e começa a desenvolver a sua peça, a partir das que viu no aplicativo.Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 64
  64. 64. Escopo Cenários hipotéticos Diego Postagens recentes Abre imagem Compartilhar Enviar por emailPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 65
  65. 65. Escopo Cenários hipotéticos João está na aula de escultura na sua faculdade de João Artes Plásticas. O seu trabalho final acaba ficando melhor que as expectativas e ele resolve divulgar de alguma maneira, não só nas redes sociais mas de alguma maneira que quem veja o seu trabalho seja o público realmente interessado nisso. Então, pega seu Smartphone e abre o aplicativo PoaPosters. Através da própria câmera do seu aparelho, regis- tra diversos ângulos do seu trabalho e envia para o banco de dados do aplicativo. Ao mesmo tempo já divulga nas redes sociais da sua preferência.Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 66
  66. 66. Escopo Cenários hipotéticos João Capturar Enviar Compartilhar Redes sociaisPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 67
  67. 67. Escopo Cenários hipotéticos Tiago está dando vida ao seu projeto de 1 ano: a Tiago revitalização do seu bairro. Ele faz isso de diversas maneiras mas uma delas é fazendo com que o pú- blico frequentador do bairro divulgue tudo que à de arte de rua na região. Ele sugere a todos que utilize o aplicativo PoaPosters e que envie fotos para uma categoria específica criada por ele no aplicativo. Com o passar do tempo, Tiago consegue divulgar o seu projeto utilizando somente o aplicativo PoaPosters.Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 68
  68. 68. Escopo Cenários hipotéticos Tiago Capturar Enviar Categorizar DivulgarPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 69
  69. 69. Escopo Diferencial semânico pretendido Textual Icônico Simples Complexo Poucas Cores Muitas Cores Objetivo Subjetivo Sério Divertido Estático Dinâmico Utilitário Entretenimento Clássico Contemporâneo Informativo InterativoPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 70
  70. 70. 05 Estrutura
  71. 71. Estrutura Organograma do produto. PRÉ-HOME Email Login Senha HOME Feed Popular Capturar Minhas fotos Configurações Nome do Capturar Redefinir Gostar Editar senha usuário imagem Página do Aplicar Definir Desgostar Interações usuário efeitos compartilhamentos Colocar Meus Seguir Comentar legendas Compartilhar amigos Gostar Compartilhar Opções de Adicionar compartilhamento amigos Buscar da Buscar Desgostar galeria por nome Aplicar Buscar nas Comentar efeitos redes sociais Colocar Deixar Compartilhar legendas de seguir Opções de compartilhamento LogoutPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 72
  72. 72. 06 Esqueleto
  73. 73. Esqueleto Wireframe estrutural Módulo mínimo: 64x64 pixelsPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 74
  74. 74. Esqueleto Wireframe arquiteturalPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 75
  75. 75. Esqueleto Wireframe arquitetural Topo Conteúdo MenuPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 76
  76. 76. 07 Estética
  77. 77. Estética LogográficaPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 78
  78. 78. Estética CromográficaPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 79
  79. 79. Estética Tipográfica Família Helvetica the quick brown fox jumps over the lazy dog the quick brown fox jumps over the lazy dog THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG 0123456789 0123456789Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 80
  80. 80. Estética Pictográfica / IconográficaPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 81
  81. 81. 08 Execução
  82. 82. ExecuçãoPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 83
  83. 83. ExecuçãoPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 84
  84. 84. ExecuçãoPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 85
  85. 85. ExecuçãoPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 86
  86. 86. ExecuçãoPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 87
  87. 87. ExecuçãoPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 88
  88. 88. ExecuçãoPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 89
  89. 89. ExecuçãoPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 90
  90. 90. ExecuçãoPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 91
  91. 91. ExecuçãoPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 92
  92. 92. ExecuçãoPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 93
  93. 93. ExecuçãoPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 94
  94. 94. ExecuçãoPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 95
  95. 95. ExecuçãoPoa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 96
  96. 96. Bibliografia AGNER, Luiz. Ergodesign e arquitetura de infor- mação: trabalhando com o usuário. Rio de Janeiro: Quartet, 2ª ed. 2009. SANTA ROSA, José Guilherme; MORAES, Anamaria. Avaliação e projeto no design de interfaces. Rio de Janeiro: 2AB, 1ª ed. 2008. PREECE, Jennifer; ROGERS, Yvonne; SHARP, Helen. Design de Interação: Além da interação homem- -computador. trad. Viviane Possamai. Porto Alegre : Bookman, 2005. ISAACSON, Walter. Steve Jobs: A biografia. São Paulo : Companhia das Letras, 2011. CARSON, Nick; et al. Crie designs para apps. 50 dicas. Computer Arts Brasil: Ed. 54 : Fev. 2012Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 97

×