Download - Relatorio Projeto 4
Poa Posters
Diego Agne
Projeto Gráfico 4
Prof. Heli Meurer
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 3
Sumário
Projeto PreliminarAssunto TemaProblemaAntecedentesMotivaçãoEstado da arteObjetivosMetodologiaCronogramaRecursos
ContextualizaçãoQuestões projetuaisTaxonomiaCenáriosSIBD e SFBDDefinição dos papeisIdentificação dos usuáriosLista de verificação I
EstratégiaTermos pertinentes ao projetoLinha do tempoAnálise contextualAnálises estruturais, funcionais e heurísticasAnálise dos diferenciais semânticosPainel semânticoAnálise comparativa de ferramentas e funcionalidadesAnálise da identidade gráfico-visualLista de verificação II
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 4
Sumário
EscopoPersonasDefinição das ferramentas e funcionalidadesCenários hipotéticosDiferencial semântico pretendido
EstruturaOrganograma
EsqueletoWireframe estruturalWireframe arquitetural
EstéticaLogográficaCromográficaTipográficaPictográfica / Iconográfica
Execução
Bibliografia
Projeto Preliminar
01
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 6
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 7
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 8
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 9
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 eassim acaba se sentindo seu dono.
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 10
Projeto Preliminar
Objetivos
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.
- 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.
Objetivo Principal
Objetivos Secundários
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 11
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.
Projeto Preliminar, contextualização e análises.
Geração de alternativas, organização de conteúdo.
Fluxograma de tarefas.
Wireframes
Definição da Identidade visual
Modelo funcional, produto final.
Estratégia
Escopo
Estrutura
Esqueleto
Estética
Execução
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 12
Projeto Preliminar
Cronograma
Projeto Preliminar
Estratégia
Escopo
Estrutura
Esqueleto
Estética
Execução/Entrega
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 13
Projeto Preliminar
Recursos
Contextualização02
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 15
Contextualização
Questões Projetuais
Projeto para desenvolvimento de um aplicativo para iPhone.
Para haver uma catalogação dos posters e cartazes espalhados pelas ruas de Porto Alegre.
Usando a metodologia do Projeto E de Meurer e Szabluk.
Para todos na área do Design Gráfico que podem usar como referência e apreciadores de arte urbana em geral.
Objective-C
O que desenvolver?
Por que projetar?
Como desenhar?
Para quem projetar?
Com que tecnologia?
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 16
Contextualização
Taxonomia
Social 60%Comercial 10%Institucional 10%Serviços 20%
Referêncial 60%Lazer 30%Educação 0%Informação 10%
Web 10%Mobile 70%Físico 20%
Objetive-C 70%Outras 30%
Atuação
Finalidade
Plataformas
Tecnologia
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 17
Contextualização
Cenários
Pouca interação entre usuários do público-alvo.Todos vão até bancos de dados de referência.Pouco compartilhamento.
Interação entre usuários.Facilidade de consulta.Mais referências.
Cenário Atual
Cenário Pretendido
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 18
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-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 gráfica amigável, Objetive-C como linguagem de programação e o Projeto E como metodologia pro-jetual.
SIBD
SFBD
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 19
Contextualização
Definição dos Papeis
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 20
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 21
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.
Estratégia03
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 23
Análises Linguísticas
Termos pertinentes ao projeto
in.te.ra.çãosf (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.çãosf (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 ou
Interação
Navegação
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 24
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.
in.ter.fa.cesf (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:interface
Interface
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 25
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 26
Análises Linguísticas
u.su.á.rioadj (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.
u.sa.bi.li.da.desf (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.
Usabilidade
Usuário
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 27
Análises Linguísticas
Linha do tempo - Cartaz
Primeiro cartaz conhecido, de Saint-Flour. Feito em manuscrito e sem imagens.
Descobertas a litografia e a cromolitografia, que, permitindo o uso da cor, proporcionou um grande desenvolvimento para o meio.
A interação entre produção artística e industrial apa-rece com Jules Chéret.
Auge dos cartazes retratando a vida noturna de Pa-ris. Destaque para Toulouse-Lautrec.
O movimento mais importante do design de car-tazes era o Art Noveau, tendo o tcheco Alphonse Mucha o seu principal artista.
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.
Cartazes de produtos deram lugar àqueles que pro-moviam esforços de guerra e apelavam pelo recruta-mento soldados.
1454
1796
1860
1880
1900
1920 e 1930
1939 a 1945
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 28
Análises Linguísticas
Linha do tempo - Cartaz
Os cartazes são cada vez mais encarados e vendidos como obras de arte. Grandes artistas como Andy Warhol e Roy Lichtenstein se destacam.
Movimento psicodelista. Os cartazes dessa época eram criados para um público específico.
Os cartazes tornam-se quase que completamente publicitários. Alguns causaram polêmica com os da campanha “The United Collors of Benetton”
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.
Anos 60
Anos 70
Anos 80 e 90
Anos 2000
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 29
Análises Desenhísticas
Análise Contextual
http://instagr.am/
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 30
Análises Desenhísticas
Análise Contextual
Este aplicativo desenvolvido pela Bucket Labs, per-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.
Phoster
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 31
Análises Desenhísticas
Análise Contextual
http://postersinamsterdam.com/
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.
Posters in Amsterdam
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 32
Análises Desenhísticas
Análise Contextual
É uma galeria de arte de bolso. Permite que o usu-á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.
EasyArt
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 33
Análises Desenhísticas
Análise Contextual
Apenas uma galeria de imagens remetendo aos pos-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.
1920’s Posters
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 34
Análises Desenhísticas
Análises estruturais, funcionais e heurísticas.
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 35
Análises Desenhísticas
Análises estruturais, funcionais e heurísticas.
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 36
Análises Desenhísticas
Análises estruturais, funcionais e heurísticas.
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 37
Análises Desenhísticas
Análises estruturais, funcionais e heurísticas.
Instagram Topo - Dashboard
Topo - Notificações Topo - Perfil
Notificações
Menus
Menus
Menus
Topo - Popular
Topo - Filtros
Imagem capturada
Usuário FotoPopular
Foto publicada
Barra de interação
Barra de interação Barra de interação
Captura da câmera
Capturar
BotãoFechar
Filtro
Nome
Títulos
Títulos
AbrirGaleria
Barra de interação
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 38
Análises Desenhísticas
Análises estruturais, funcionais e heurísticas.
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 39
Análises Desenhísticas
Análises estruturais, funcionais e heurísticas.
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 40
Análises Desenhísticas
Análises estruturais, funcionais e heurísticas.
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 41
Análises Desenhísticas
Análises estruturais, funcionais e heurísticas.
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:Regular
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 42
Análises Desenhísticas
Análises estruturais, funcionais e heurísticas.
Posters in Amsterdam
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 43
Análises Desenhísticas
Análises estruturais, funcionais e heurísticas.
Posters in Amsterdam
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 44
Análises Desenhísticas
Análises estruturais, funcionais e heurísticas.
Posters in Amsterdam
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 45
Análises Desenhísticas
Análises estruturais, funcionais e heurísticas.
Posters in AmsterdamTopo - Identidade Visual
BotãoVoltar
BotãoVoltar
Categorias
Categoriamarcada
Botão Home
Conteúdo - Posters
Descritivo Redes Sociais Identificação
Topo - Menu
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 46
Análises Desenhísticas
Análises estruturais, funcionais e heurísticas.
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:Ruim
Posters in Amsterdam
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 47
Análises Desenhísticas
Análise dos Diferenciais Semânicos
Textual
Simples
Poucas Cores
Objetivo
Sério
Estático
Utilitário
Clássico
Informativo
Textual
Simples
Poucas Cores
Objetivo
Sério
Estático
Utilitário
Clássico
Informativo
Icônico
Complexo
Muitas Cores
Subjetivo
Divertido
Dinâmico
Entretenimento
Contemporâneo
Interativo
Icônico
Complexo
Muitas Cores
Subjetivo
Divertido
Dinâmico
Entretenimento
Contemporâneo
Interativo
Posters in Amsterdam
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 48
Análises Desenhísticas
Análise dos Diferenciais Semânicos
Textual
Simples
Poucas Cores
Objetivo
Sério
Estático
Utilitário
Clássico
Informativo
Textual
Simples
Poucas Cores
Objetivo
Sério
Estático
Utilitário
Clássico
Informativo
Icônico
Complexo
Muitas Cores
Subjetivo
Divertido
Dinâmico
Entretenimento
Contemporâneo
Interativo
Icônico
Complexo
Muitas Cores
Subjetivo
Divertido
Dinâmico
Entretenimento
Contemporâneo
Interativo
EasyArt
Phoster
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 49
Análises Desenhísticas
Análise dos Diferenciais Semânicos
Textual
Simples
Poucas Cores
Objetivo
Sério
Estático
Utilitário
Clássico
Informativo
Icônico
Complexo
Muitas Cores
Subjetivo
Divertido
Dinâmico
Entretenimento
Contemporâneo
Interativo
1920’s Posters
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 50
Análises Desenhísticas
Análise dos Diferenciais Semânicos
Textual
Simples
Poucas Cores
Objetivo
Sério
Estático
Utilitário
Clássico
Informativo
Posters in Amsterdam
EasyArt
Phoster
1920’s Posters
Icônico
Complexo
Muitas Cores
Subjetivo
Divertido
Dinâmico
Entretenimento
Contemporâneo
Interativo
Comparativa
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 51
Análises Desenhísticas
Painel Semântico
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 52
Análises Desenhísticas
Painel Semântico
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 53
Análises Desenhísticas
Painel Semântico
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 54
Análises Desenhísticas
Painel Semântico
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 55
Análises Desenhísticas
Compartilhar conteúdo
Sistema de busca
Botão atualizar
Sincronização
Câmera
Efeitos (Filtros)Salvar Favoritos
Acesso restrito
Adicionar amigos
Configurações
Análise comparativa de ferramentas e funcionalidades
Instagram Posters in Amsterdam
EasyArt Phoster 1920’s Posters
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 56
Análises Desenhísticas
Original Contraste Cor Forma
Posters in Amsterdam
Análise da identidade gráfico-visual
Análise da Assinatura Visual:
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 57
Análises Desenhísticas
Análise da identidade gráfico-visual
Análise Tipográfica:
Posters in Amsterdam
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 58
Análises Desenhísticas
Análise da identidade gráfico-visual
Análise Cromográfica:
Posters in Amsterdam
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 59
Análises Desenhísticas
Análise da identidade gráfico-visual
Análise das Metáforas Gráficas
Posters in Amsterdam
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 60
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 categoria
Escopo04
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 62
Escopo
Personas
24 anos, estudante e estagiário de design gráfico. 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.
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.
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.
Diego
João
Tiago
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 63
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ções
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 64
Escopo
Cenários hipotéticos
Diego recebe um email de um amigo que solicita 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.
Diego
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 65
Escopo
Cenários hipotéticos
Diego
Postagens recentes
Abre imagem
Compartilhar
Enviar por email
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 66
Escopo
Cenários hipotéticos
João está na aula de escultura na sua faculdade de 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.
João
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 67
Escopo
Cenários hipotéticos
João
Capturar
Enviar
Compartilhar
Redes sociais
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 68
Escopo
Cenários hipotéticos
Tiago está dando vida ao seu projeto de 1 ano: a 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.
Tiago
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 69
Escopo
Cenários hipotéticos
Tiago
Capturar
Enviar
Categorizar
Divulgar
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 70
Escopo
Diferencial semânico pretendido
Textual
Simples
Poucas Cores
Objetivo
Sério
Estático
Utilitário
Clássico
Informativo
Icônico
Complexo
Muitas Cores
Subjetivo
Divertido
Dinâmico
Entretenimento
Contemporâneo
Interativo
Estrutura05
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 72
Estrutura
Organograma do produto.
Feed
Nome dousuário
Página dousuário
Seguir
Gostar
Gostar
Desgostar
Desgostar
Comentar
Comentar
Compartilhar
Compartilhar
Popular
Capturar
Login
PRÉ-HOME
HOME
Capturar imagem
Aplicarefeitos
Aplicarefeitos
Colocarlegendas
Redefinirsenha
Meusamigos
Adicionaramigos
Buscarpor nome
Deixarde seguir
Logout
Buscar nasredes sociais
Colocarlegendas
Buscar dagaleria
Opções de compartilhamento
Opções de compartilhamento
Minhas fotos
Senha
Editar
Compartilhar
Interações
Configurações
Definircompartilhamentos
Esqueleto06
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 74
Esqueleto
Wireframe estrutural
Módulo mínimo: 64x64 pixels
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 75
Esqueleto
Wireframe arquitetural
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 76
Esqueleto
Wireframe arquitetural
Topo
Menu
Conteúdo
Estética07
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 78
Estética
Logográfica
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 79
Estética
Cromográfica
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 80
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
0123456789
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 81
Estética
Pictográfica / Iconográfica
Execução08
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 83
Execução
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 84
Execução
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 85
Execução
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 86
Execução
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 87
Execução
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 88
Execução
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 89
Execução
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 90
Execução
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 91
Execução
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 92
Execução
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 93
Execução
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 94
Execução
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 95
Execução
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 96
Execução
Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 97
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. 2012