Catálogo de posters de Porto Alegre

Poa Posters

Diego Agne
Projeto Gráfico 4
Prof. Heli Meurer

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 II

Poa Posters | Diego Agne | Projeto Gráfico 4 | Prof.: Heli Meurer 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
Bibliografia


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 e
assim acaba se sentindo seu dono.


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.


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.


Projeto Preliminar

Cronograma

Projeto Preliminar
Estratégia
Escopo
Estrutura
Esqueleto
Estética
Execução/Entrega


Projeto Preliminar

Recursos


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-C


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%


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.


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.


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.


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 ou



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



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.



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.



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.


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.



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.



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.



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.



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.



Análises estruturais, funcionais e
heurísticas.
Instagram



heurísticas.
Instagram



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ção



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.



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.



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



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



heurísticas.



heurísticas.
Topo - Identidade Visual Topo - Menu

Conteúdo - Posters

Botão
Voltar

Descritivo Redes Sociais Identificação

Botão Categorias
Voltar

Categoria
marcada

Botão
Home



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



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

Objetivo Subjetivo

Sério Divertido

Estático Dinâmico






Semânicos
EasyArt Textual Icônico

Simples Complexo


Objetivo Subjetivo

Sério Divertido

Estático Dinâmico




Phoster Textual Icônico

Simples Complexo

Objetivo Subjetivo

Sério Divertido

Estático Dinâmico






Semânicos
1920’s Posters Textual Icônico

Simples Complexo


Objetivo Subjetivo

Sério Divertido

Estático Dinâmico






Semânicos
Comparativa Textual Icônico

Simples Complexo


Objetivo Subjetivo

Sério Divertido

Estático Dinâmico




Instagram


EasyArt

Phoster

1920’s Posters



Painel Semântico



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ções



Análise da identidade
gráfico-visual

Análise da Assinatura Visual:

Original Contraste Cor Forma

Instagram




gráfico-visual

Análise Tipográfica:

Instagram




gráfico-visual

Análise Cromográfica:

Instagram




gráfico-visual

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


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.

- 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.

- Publicar seus trabalhos e divulgar a sua marca.


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

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.


Escopo


Diego

Postagens recentes

Abre imagem

Compartilhar

Enviar por email


Escopo

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.


Escopo


João

Capturar

Enviar

Compartilhar

Redes sociais


Escopo

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.


Escopo


Tiago

Capturar

Enviar

Categorizar

Divulgar


Escopo

Diferencial semânico pretendido

Textual Icônico

Simples Complexo


Objetivo Subjetivo

Sério Divertido

Estático Dinâmico





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
Logout


Esqueleto

Wireframe estrutural

Módulo mínimo: 64x64 pixels


Esqueleto



Esqueleto


Topo

Conteúdo

Menu


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çã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


Catálogo de posters de Porto Alegre

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Catálogo de posters de Porto Alegre

Ähnlich wie Catálogo de posters de Porto Alegre (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Catálogo de posters de Porto Alegre