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


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


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.


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.


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.


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.


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


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


Projeto Preliminar

Cronograma

Projeto Preliminar

Estratégia

Escopo

Estrutura

Esqueleto

Estética

Execução/Entrega


Projeto Preliminar

Recursos

Contextualização02


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?


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


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


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


Contextualização

Definição dos Papeis


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.


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


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



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



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)



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



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



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


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.

Instagram



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



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



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



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



Análises estruturais, funcionais e heurísticas.

Instagram




Instagram




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




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.

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.

Instagram




Aplicativo responde publicando a foto do usuário. Volta para a primeira tela de linha do tempo.

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:Regular

Instagram




Posters in AmsterdamTopo - Identidade Visual

BotãoVoltar

BotãoVoltar

Categorias

Categoriamarcada

Botão Home

Conteúdo - Posters

Descritivo Redes Sociais Identificação

Topo - Menu




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




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

Instagram





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




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




Textual

Simples

Poucas Cores

Objetivo

Sério

Estático

Utilitário

Clássico

Informativo

Instagram


EasyArt

Phoster

1920’s Posters

Icônico

Complexo

Muitas Cores

Subjetivo

Divertido

Dinâmico

Entretenimento

Contemporâneo

Interativo

Comparativa



Painel Semântico



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



Original Contraste Cor Forma

Instagram


Análise da identidade gráfico-visual

Análise da Assinatura Visual:




Análise Tipográfica:

Instagram





Análise Cromográfica:

Instagram





Análise das Metáforas Gráficas

Instagram



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


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


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


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


Escopo


Diego

Postagens recentes

Abre imagem

Compartilhar

Enviar por email


Escopo


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


Escopo


João

Capturar

Enviar

Compartilhar

Redes sociais


Escopo


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


Escopo


Tiago

Capturar

Enviar

Categorizar

Divulgar


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


Estrutura

Organograma do produto.

Feed

Nome dousuário

Página dousuário

Seguir

Gostar

Gostar

Desgostar

Desgostar

Comentar

Comentar

Compartilhar

Compartilhar

Popular

Email

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


Esqueleto

Wireframe estrutural

Módulo mínimo: 64x64 pixels


Esqueleto

Wireframe arquitetural


Esqueleto

Wireframe arquitetural

Topo

Menu

Conteúdo

Estética07


Estética

Logográfica


Estética

Cromográfica


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


Estética

Pictográfica / Iconográfica

Execução08


Execução


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

relatorio projeto 4

Education