SlideShare a Scribd company logo
1 of 29
Projeto da revista
Texto
Do ponto de vista da tipografia é
formado de palavras e as
palavras são formadas por letras.
Tipografia

É um processo industrial que
trabalha com um sistema de
signos: letras números, sinais,
imagens. Tornou-se possível a
partir da invensão dos tipos
móveis por Johannes Gutenberg
(c. 1398-1468)
POEMA
TEXTO
TEXTO
TEXTO
•

Vaso Noturno

•
•
•
•
•
•
•
•
•
•
•
•

À meia-noite, José dos Reis
— que namoro escondido —
vem fazer serenata para mim.
Papai tosse alto,
tropeça por querer nos urinóis.
Que vergonha, meu deus,
pai, cachorrinha plebéia,
couves na horta
geladas de orvalho e medo.
Me finjo de santa morta,
meu céu é gótico
e arde.

•
•

Adélia Prado
Do livro: "Oráculos de Maio", Editora Siciliano,1999
Vaso Noturno
À meia-noite, José dos
Reis
— que namoro escondido
—
vem fazer serenata para
mim.
Papai tosse alto,
tropeça por querer nos
urinóis.
Que vergonha, meu deus,
pai, cachorrinha plebéia,
couves na horta
geladas de orvalho e
medo.
Me finjo de santa morta,
meu céu é gótico
e arde.
Tipos móveis
Tipo Garamond
HELVETICA
Texto tipogáfico
Texto é definido como
uma sequência
contínua de palavras,
também conhecida
como “texto corrido”
Ellen Lupton
DIAGRAMAÇÃO
EM BLOCOS
Especial planejamento
O Planejamento da revista deve ser apresentado na forma de “boneco”.

Fonte: revista w - ano 9, no 104 (https://www.europanet.com.br/site/index.php?cat_id=21)
Planejamento
• Muitas pessoas pulam a parte do planejamento em suas atividades,
sejam elas, escolares ou profissionais, fazendo suas atividades sem
ter claro o resultado que desejam, sem ter noção do caminha e
nem dos recursos necessários. O trabalho até sai mas as idas e
vindas, o tempo e o custa ficam bem maiores. Quando se tem uma
encomenda, um tempo determinado e certas condições para fazer
a tarefa, o esforço usado no planejamento é plenamente
recompensado no produto final.
• Andy Budd orienta fazer um planejamento de um trabalho digital "É
a mesma coisa que fazer uma planta em relação a uma casa em
construção … sem uma o resultado não será eficiente e a casa
desmoronará."
• Quando as pessoas desejam uma nova casa, elas consultam um
arquiteto. Mas, infelizmente, a maioria das pessoas na web cria
sites como se estivessem fazendo um "puxadinho" sem a anuência
de um especialista.
O Início
• Um bom ponto de partida para o
planejamento é definir os objetivos, que
resultado desejamos juntos com quem
encomendou (cliente) o trabalho. Discutir o
que é sucesso e todos os envolvidos precisam
concordar com a proposta. "Os objetivos
definidos criam um alvo, um equilíbrio entre o
que é pedido e o que é alcançável na
realidade, diz Nicolas T Le Clainche.
Planejando
• Um bom planejamento de projeto é fruto de colaboração e
entendimento das partes envolvidas no trabalho. Uma
identificação completa do que é entregáveis e dos critérios
de qualidade nos permite determinar as tarefas, que são
avaliadas antes de serem sequenciais e postas no
calendário.
• Quando a base do projeto estiver pronta, deve-se gastar
algum tempo na análise de sites (revistas) do mesmo setor.
Vocês podem aprender muito com os erros e acertos de
outros, para isso deve se fazer alguma pesquisa sobre
outras publicações que podem estar em mercados
geográficos ou de negócios diferentes desde que tenham
funcionalidades similares. Com as pesquisas, além disso, é
possível lembrar de fatores que, por alguma razão, você e o
cliente esqueceram de adicionar ao site, mas que estão
presentes nos sites similares.
Definido para usuários
• É importante definir para que se está fazendo
a revista, pois embora tenham sido o cliente
que encomendou, devemos pensar para quem
desejamos que a revista deva ser publicada.
Ter um entendimento de quem será o usuário
do site ajuda a tomar decisões. Trace um perfil
do leitor, sua cultura, hábitos e necessidades
(na internet e fora dela).
Mapa do site
• Entendendo qual o propósito da revista electrónica (ou
impressa), quem vai fazer uso dele e o que as pessoas irão
fazer quando o visitarem, vocês podem começar a analisar
a informação que será oferecida, como deve ser acessada e
o básico de como será exibida. Para melhor trabalhar a
arquitetura de informação é usada uma combinação de
mapa de site (ou sumário de matérias), fluxos de processo
e rotas de usuário. Se construir o mapa do site estiver difícil
divida o mapa em unidades menores. Os mapas ajudam a
simplificar a experiência do usuário ao manter uma
perspectiva ampla.
• Marc Peter começa seus mapas de site com esboços no
papel, antes de passá-los ao software e enviá-los aos outros
membros da equipe.
• Devemos garantir que todos os elementos presentes em
todas as páginas, como cabeçalho, logos, chamadas a ação,
rodapés estejam listadas. Isso fornece uma ideia básica dos
tipos de templates (diagramação de páginas) que o site (a
revista) vai precisar, tal como 'home’ (capa), 'conteúdo
geral', 'quem somos’ (editorial), e itens listados, que podem
ser inseridos em wireframes que identificam a estrutura de
cada template - e eficientemente, cada pagina do sítio.
• Tudo isso evita um erro muito comum em site, que é a má
estrutura de navegação.
• Embora o planejamento tenha o seu lugar no início de todo
e qualquer trabalho, o planejamento não termina com o
início da produção. O plano é refeito a todo momento, o
processo de criação é permanente.
Guia visual
A adequação da tecnologia
• Como os sites atuais estão indo alem de
simples textos e imagens estáticas, o
planejamento deve levar em consideração
componentes ricos em mídias: vídeos,
animação, galerias de imagens que afetam a
banda e precisam de ambientes de
hospedagem específicos. E mesmo que o site
seja estáticos ainda é preciso planejar como as
actualizações poderão ser feitas no futuro.
BLOCOS de diagramação
Arquitetura da informação
• Os wireframes são essenciais para trabalhar o design de
interação, similar ao storyboard de um director de filme ou
a diagramação de uma revista impressa. Eles permitem que
você apresente ideias de forma visual e confira se elas
fazem sentido antes que qualquer produção ou
desenvolvimento comece. É mais fácil fazer as mudanças
antes da revista estar pronta.
• Com os wireframes trabalhamos os componentes gráficos
inseridos na estrutura e nos aspectos funcionais do site,
incluindo a linguagem do design - tipografia, cor e layout

• Quando tudo estiver definido passamos, do planejamento
para a ultima peça do quebra-cabeça: a tecnologia
Sumário
•
•
•
•
•
•
•
•
•
•
•
•
•

Estabelecer um diálogo entre quem encomendou a tarefa e os que vão executá–las.
Definir em conjunto os objetivos do trabalho.
Definir todas as tarefas a serem executadas.
Estabelecer o calendário.
Pesquisa de sites (revistas) similares.
Definindo o público usuário da revista.
Definir o que entra e o que não entra no trabalho.
Desenhar o mapa do site.
Criar o design - tipografia, cor e layout
Determinar o conteúdo da revista electrónica e impressa.
Escolher a tecnologia.
Iniciar a produção da revista.
Finalizar e publicar a revista

•

2

Wireframes: download trial
http://www.axure.com/features?gclid=CKyR9fHmjqwCFQSn7QodQFapoA
• 3 Tean Nirvana (cores)
http://teamnirvana.com/blog/how-to-choose-best-web-designing-color-combinations-forwebsites-and-blogs-from-10-online-applications-and-tools.html
A revista impressa
Os passos para o projeto da revista aqui apresentado é
o de uma revista digital. Para uma revista impressa os
passos do desenvolvimento do projeto são muito
semelhantes. Sigam a estrutura das revistas discutida
em classe.
Bibliografia consultada:
Bomeny, Maria HelenaWerneck. O panorama dodesinggráfico contemporâneo: a construção a
desconstrução e a nova ordem. – São Paulo: Ed. SENAC São Paulo, 2012
Revista WWW.COM.BR, no 104, 2009
http://es.wikipedia.org/wiki/Tipograf%C3%ADa
https://www.google.com.br/search?rlz=1C5MACD_enBR509BR509&espv=210&es_sm=91&tbm=i
sch&q=tipografia+impress%C3%A3o&revid=1510905574&biw=1000&bih=658&dpr=1
REVISTA AU

http://au.pini.com.br/arquitetura-urbanismo/181/revista-au-ritmo-desenhado-130992-1.aspx
Revistas

More Related Content

Similar to 01 design gráfico

Arquitetura da-informacao-tutorial
Arquitetura da-informacao-tutorialArquitetura da-informacao-tutorial
Arquitetura da-informacao-tutorial
Marcvs Villie
 
Apresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo SantiagoApresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo Santiago
Rodrigo Correia
 
Arquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e CenáriosArquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e Cenários
posgraduacaorj
 
Arte e Tecnologia - Artes Visuais - 2013
Arte e Tecnologia - Artes Visuais - 2013Arte e Tecnologia - Artes Visuais - 2013
Arte e Tecnologia - Artes Visuais - 2013
tecampinasoeste
 

Similar to 01 design gráfico (20)

Criação de Sites na era da Web 2.0
Criação de Sites na era da Web 2.0Criação de Sites na era da Web 2.0
Criação de Sites na era da Web 2.0
 
Arquitetura da-informacao-tutorial
Arquitetura da-informacao-tutorialArquitetura da-informacao-tutorial
Arquitetura da-informacao-tutorial
 
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
 
Interação Humano Computador Plataforma Mobile - Wellington Pinto de Oliveira
Interação Humano Computador Plataforma Mobile - Wellington Pinto de OliveiraInteração Humano Computador Plataforma Mobile - Wellington Pinto de Oliveira
Interação Humano Computador Plataforma Mobile - Wellington Pinto de Oliveira
 
Arquitetura de Informação - Rogério Pereira
Arquitetura de Informação - Rogério Pereira Arquitetura de Informação - Rogério Pereira
Arquitetura de Informação - Rogério Pereira
 
Laboratório Web 2013-2014 - Etapas na Produção: Análise e Pesquisa
Laboratório Web 2013-2014 - Etapas na Produção: Análise e PesquisaLaboratório Web 2013-2014 - Etapas na Produção: Análise e Pesquisa
Laboratório Web 2013-2014 - Etapas na Produção: Análise e Pesquisa
 
Arquitetura da Informacao na WEB
Arquitetura da Informacao na WEBArquitetura da Informacao na WEB
Arquitetura da Informacao na WEB
 
A agência Nuve e o processo de projetos
A agência Nuve e o processo de projetosA agência Nuve e o processo de projetos
A agência Nuve e o processo de projetos
 
Apostila comunicação visual
Apostila comunicação visualApostila comunicação visual
Apostila comunicação visual
 
Apostila comunicação visual para web
Apostila comunicação visual para webApostila comunicação visual para web
Apostila comunicação visual para web
 
Apresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo SantiagoApresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo Santiago
 
Arquitetura de Informação (atualizado)
Arquitetura de Informação (atualizado)Arquitetura de Informação (atualizado)
Arquitetura de Informação (atualizado)
 
Digitalks producao
Digitalks producaoDigitalks producao
Digitalks producao
 
Arquitetura de Informação em 7 etapas
Arquitetura de Informação em 7 etapasArquitetura de Informação em 7 etapas
Arquitetura de Informação em 7 etapas
 
Projetos Web - Estratégia de projeto
Projetos Web - Estratégia de projetoProjetos Web - Estratégia de projeto
Projetos Web - Estratégia de projeto
 
Basecamp e gerenciamento de projetos
Basecamp e gerenciamento de projetosBasecamp e gerenciamento de projetos
Basecamp e gerenciamento de projetos
 
Arquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e CenáriosArquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e Cenários
 
Métodos de Design: Uma abordagem para estudos de viabilidade em projetos de s...
Métodos de Design: Uma abordagem para estudos de viabilidade em projetos de s...Métodos de Design: Uma abordagem para estudos de viabilidade em projetos de s...
Métodos de Design: Uma abordagem para estudos de viabilidade em projetos de s...
 
Estrategia de AI - Criando o Relatorio de Estratégia
Estrategia de AI  - Criando o Relatorio de EstratégiaEstrategia de AI  - Criando o Relatorio de Estratégia
Estrategia de AI - Criando o Relatorio de Estratégia
 
Arte e Tecnologia - Artes Visuais - 2013
Arte e Tecnologia - Artes Visuais - 2013Arte e Tecnologia - Artes Visuais - 2013
Arte e Tecnologia - Artes Visuais - 2013
 

More from Acacio Arouche (6)

Linguagens artísticas
Linguagens artísticasLinguagens artísticas
Linguagens artísticas
 
Sonorização
SonorizaçãoSonorização
Sonorização
 
História em Quadrinhos
História em QuadrinhosHistória em Quadrinhos
História em Quadrinhos
 
Propaganda
PropagandaPropaganda
Propaganda
 
Revista ilust 31
Revista ilust 31Revista ilust 31
Revista ilust 31
 
Colagem
ColagemColagem
Colagem
 

Recently uploaded

Teoria heterotrófica e autotrófica dos primeiros seres vivos..pptx
Teoria heterotrófica e autotrófica dos primeiros seres vivos..pptxTeoria heterotrófica e autotrófica dos primeiros seres vivos..pptx
Teoria heterotrófica e autotrófica dos primeiros seres vivos..pptx
TailsonSantos1
 
Responde ou passa na HISTÓRIA - REVOLUÇÃO INDUSTRIAL - 8º ANO.pptx
Responde ou passa na HISTÓRIA - REVOLUÇÃO INDUSTRIAL - 8º ANO.pptxResponde ou passa na HISTÓRIA - REVOLUÇÃO INDUSTRIAL - 8º ANO.pptx
Responde ou passa na HISTÓRIA - REVOLUÇÃO INDUSTRIAL - 8º ANO.pptx
AntonioVieira539017
 
Os editoriais, reportagens e entrevistas.pptx
Os editoriais, reportagens e entrevistas.pptxOs editoriais, reportagens e entrevistas.pptx
Os editoriais, reportagens e entrevistas.pptx
TailsonSantos1
 

Recently uploaded (20)

Texto dramático com Estrutura e exemplos.ppt
Texto dramático com Estrutura e exemplos.pptTexto dramático com Estrutura e exemplos.ppt
Texto dramático com Estrutura e exemplos.ppt
 
PROJETO DE EXTENSÃO I - Radiologia Tecnologia
PROJETO DE EXTENSÃO I - Radiologia TecnologiaPROJETO DE EXTENSÃO I - Radiologia Tecnologia
PROJETO DE EXTENSÃO I - Radiologia Tecnologia
 
6ano variação linguística ensino fundamental.pptx
6ano variação linguística ensino fundamental.pptx6ano variação linguística ensino fundamental.pptx
6ano variação linguística ensino fundamental.pptx
 
Estudar, para quê? Ciência, para quê? Parte 1 e Parte 2
Estudar, para quê?  Ciência, para quê? Parte 1 e Parte 2Estudar, para quê?  Ciência, para quê? Parte 1 e Parte 2
Estudar, para quê? Ciência, para quê? Parte 1 e Parte 2
 
P P P 2024 - *CIEJA Santana / Tucuruvi*
P P P 2024  - *CIEJA Santana / Tucuruvi*P P P 2024  - *CIEJA Santana / Tucuruvi*
P P P 2024 - *CIEJA Santana / Tucuruvi*
 
Cartão de crédito e fatura do cartão.pptx
Cartão de crédito e fatura do cartão.pptxCartão de crédito e fatura do cartão.pptx
Cartão de crédito e fatura do cartão.pptx
 
Conflitos entre: ISRAEL E PALESTINA.pdf
Conflitos entre:  ISRAEL E PALESTINA.pdfConflitos entre:  ISRAEL E PALESTINA.pdf
Conflitos entre: ISRAEL E PALESTINA.pdf
 
PROJETO DE EXTENSÃO I - TERAPIAS INTEGRATIVAS E COMPLEMENTARES.pdf
PROJETO DE EXTENSÃO I - TERAPIAS INTEGRATIVAS E COMPLEMENTARES.pdfPROJETO DE EXTENSÃO I - TERAPIAS INTEGRATIVAS E COMPLEMENTARES.pdf
PROJETO DE EXTENSÃO I - TERAPIAS INTEGRATIVAS E COMPLEMENTARES.pdf
 
aula de bioquímica bioquímica dos carboidratos.ppt
aula de bioquímica bioquímica dos carboidratos.pptaula de bioquímica bioquímica dos carboidratos.ppt
aula de bioquímica bioquímica dos carboidratos.ppt
 
Seminário Biologia e desenvolvimento da matrinxa.pptx
Seminário Biologia e desenvolvimento da matrinxa.pptxSeminário Biologia e desenvolvimento da matrinxa.pptx
Seminário Biologia e desenvolvimento da matrinxa.pptx
 
Teoria heterotrófica e autotrófica dos primeiros seres vivos..pptx
Teoria heterotrófica e autotrófica dos primeiros seres vivos..pptxTeoria heterotrófica e autotrófica dos primeiros seres vivos..pptx
Teoria heterotrófica e autotrófica dos primeiros seres vivos..pptx
 
Responde ou passa na HISTÓRIA - REVOLUÇÃO INDUSTRIAL - 8º ANO.pptx
Responde ou passa na HISTÓRIA - REVOLUÇÃO INDUSTRIAL - 8º ANO.pptxResponde ou passa na HISTÓRIA - REVOLUÇÃO INDUSTRIAL - 8º ANO.pptx
Responde ou passa na HISTÓRIA - REVOLUÇÃO INDUSTRIAL - 8º ANO.pptx
 
PRÁTICAS PEDAGÓGICAS GESTÃO DA APRENDIZAGEM
PRÁTICAS PEDAGÓGICAS GESTÃO DA APRENDIZAGEMPRÁTICAS PEDAGÓGICAS GESTÃO DA APRENDIZAGEM
PRÁTICAS PEDAGÓGICAS GESTÃO DA APRENDIZAGEM
 
Pesquisa Ação René Barbier Livro acadêmico
Pesquisa Ação René Barbier Livro  acadêmicoPesquisa Ação René Barbier Livro  acadêmico
Pesquisa Ação René Barbier Livro acadêmico
 
Produção de Texto - 5º ano - CRÔNICA.pptx
Produção de Texto - 5º ano - CRÔNICA.pptxProdução de Texto - 5º ano - CRÔNICA.pptx
Produção de Texto - 5º ano - CRÔNICA.pptx
 
PROJETO DE EXTENÇÃO - GESTÃO DE RECURSOS HUMANOS.pdf
PROJETO DE EXTENÇÃO - GESTÃO DE RECURSOS HUMANOS.pdfPROJETO DE EXTENÇÃO - GESTÃO DE RECURSOS HUMANOS.pdf
PROJETO DE EXTENÇÃO - GESTÃO DE RECURSOS HUMANOS.pdf
 
Recomposiçao em matematica 1 ano 2024 - ESTUDANTE 1ª série.pdf
Recomposiçao em matematica 1 ano 2024 - ESTUDANTE 1ª série.pdfRecomposiçao em matematica 1 ano 2024 - ESTUDANTE 1ª série.pdf
Recomposiçao em matematica 1 ano 2024 - ESTUDANTE 1ª série.pdf
 
migração e trabalho 2º ano.pptx fenomenos
migração e trabalho 2º ano.pptx fenomenosmigração e trabalho 2º ano.pptx fenomenos
migração e trabalho 2º ano.pptx fenomenos
 
GÊNERO CARTAZ - o que é, para que serve.pptx
GÊNERO CARTAZ - o que é, para que serve.pptxGÊNERO CARTAZ - o que é, para que serve.pptx
GÊNERO CARTAZ - o que é, para que serve.pptx
 
Os editoriais, reportagens e entrevistas.pptx
Os editoriais, reportagens e entrevistas.pptxOs editoriais, reportagens e entrevistas.pptx
Os editoriais, reportagens e entrevistas.pptx
 

01 design gráfico

  • 2. Texto Do ponto de vista da tipografia é formado de palavras e as palavras são formadas por letras.
  • 3. Tipografia É um processo industrial que trabalha com um sistema de signos: letras números, sinais, imagens. Tornou-se possível a partir da invensão dos tipos móveis por Johannes Gutenberg (c. 1398-1468)
  • 7. TEXTO • Vaso Noturno • • • • • • • • • • • • À meia-noite, José dos Reis — que namoro escondido — vem fazer serenata para mim. Papai tosse alto, tropeça por querer nos urinóis. Que vergonha, meu deus, pai, cachorrinha plebéia, couves na horta geladas de orvalho e medo. Me finjo de santa morta, meu céu é gótico e arde. • • Adélia Prado Do livro: "Oráculos de Maio", Editora Siciliano,1999
  • 8. Vaso Noturno À meia-noite, José dos Reis — que namoro escondido — vem fazer serenata para mim. Papai tosse alto, tropeça por querer nos urinóis. Que vergonha, meu deus, pai, cachorrinha plebéia, couves na horta geladas de orvalho e medo. Me finjo de santa morta, meu céu é gótico e arde.
  • 12. Texto tipogáfico Texto é definido como uma sequência contínua de palavras, também conhecida como “texto corrido” Ellen Lupton
  • 14. Especial planejamento O Planejamento da revista deve ser apresentado na forma de “boneco”. Fonte: revista w - ano 9, no 104 (https://www.europanet.com.br/site/index.php?cat_id=21)
  • 15. Planejamento • Muitas pessoas pulam a parte do planejamento em suas atividades, sejam elas, escolares ou profissionais, fazendo suas atividades sem ter claro o resultado que desejam, sem ter noção do caminha e nem dos recursos necessários. O trabalho até sai mas as idas e vindas, o tempo e o custa ficam bem maiores. Quando se tem uma encomenda, um tempo determinado e certas condições para fazer a tarefa, o esforço usado no planejamento é plenamente recompensado no produto final. • Andy Budd orienta fazer um planejamento de um trabalho digital "É a mesma coisa que fazer uma planta em relação a uma casa em construção … sem uma o resultado não será eficiente e a casa desmoronará." • Quando as pessoas desejam uma nova casa, elas consultam um arquiteto. Mas, infelizmente, a maioria das pessoas na web cria sites como se estivessem fazendo um "puxadinho" sem a anuência de um especialista.
  • 16. O Início • Um bom ponto de partida para o planejamento é definir os objetivos, que resultado desejamos juntos com quem encomendou (cliente) o trabalho. Discutir o que é sucesso e todos os envolvidos precisam concordar com a proposta. "Os objetivos definidos criam um alvo, um equilíbrio entre o que é pedido e o que é alcançável na realidade, diz Nicolas T Le Clainche.
  • 18. • Um bom planejamento de projeto é fruto de colaboração e entendimento das partes envolvidas no trabalho. Uma identificação completa do que é entregáveis e dos critérios de qualidade nos permite determinar as tarefas, que são avaliadas antes de serem sequenciais e postas no calendário. • Quando a base do projeto estiver pronta, deve-se gastar algum tempo na análise de sites (revistas) do mesmo setor. Vocês podem aprender muito com os erros e acertos de outros, para isso deve se fazer alguma pesquisa sobre outras publicações que podem estar em mercados geográficos ou de negócios diferentes desde que tenham funcionalidades similares. Com as pesquisas, além disso, é possível lembrar de fatores que, por alguma razão, você e o cliente esqueceram de adicionar ao site, mas que estão presentes nos sites similares.
  • 19. Definido para usuários • É importante definir para que se está fazendo a revista, pois embora tenham sido o cliente que encomendou, devemos pensar para quem desejamos que a revista deva ser publicada. Ter um entendimento de quem será o usuário do site ajuda a tomar decisões. Trace um perfil do leitor, sua cultura, hábitos e necessidades (na internet e fora dela).
  • 20. Mapa do site • Entendendo qual o propósito da revista electrónica (ou impressa), quem vai fazer uso dele e o que as pessoas irão fazer quando o visitarem, vocês podem começar a analisar a informação que será oferecida, como deve ser acessada e o básico de como será exibida. Para melhor trabalhar a arquitetura de informação é usada uma combinação de mapa de site (ou sumário de matérias), fluxos de processo e rotas de usuário. Se construir o mapa do site estiver difícil divida o mapa em unidades menores. Os mapas ajudam a simplificar a experiência do usuário ao manter uma perspectiva ampla. • Marc Peter começa seus mapas de site com esboços no papel, antes de passá-los ao software e enviá-los aos outros membros da equipe.
  • 21. • Devemos garantir que todos os elementos presentes em todas as páginas, como cabeçalho, logos, chamadas a ação, rodapés estejam listadas. Isso fornece uma ideia básica dos tipos de templates (diagramação de páginas) que o site (a revista) vai precisar, tal como 'home’ (capa), 'conteúdo geral', 'quem somos’ (editorial), e itens listados, que podem ser inseridos em wireframes que identificam a estrutura de cada template - e eficientemente, cada pagina do sítio. • Tudo isso evita um erro muito comum em site, que é a má estrutura de navegação. • Embora o planejamento tenha o seu lugar no início de todo e qualquer trabalho, o planejamento não termina com o início da produção. O plano é refeito a todo momento, o processo de criação é permanente.
  • 23. A adequação da tecnologia • Como os sites atuais estão indo alem de simples textos e imagens estáticas, o planejamento deve levar em consideração componentes ricos em mídias: vídeos, animação, galerias de imagens que afetam a banda e precisam de ambientes de hospedagem específicos. E mesmo que o site seja estáticos ainda é preciso planejar como as actualizações poderão ser feitas no futuro.
  • 25. Arquitetura da informação • Os wireframes são essenciais para trabalhar o design de interação, similar ao storyboard de um director de filme ou a diagramação de uma revista impressa. Eles permitem que você apresente ideias de forma visual e confira se elas fazem sentido antes que qualquer produção ou desenvolvimento comece. É mais fácil fazer as mudanças antes da revista estar pronta. • Com os wireframes trabalhamos os componentes gráficos inseridos na estrutura e nos aspectos funcionais do site, incluindo a linguagem do design - tipografia, cor e layout • Quando tudo estiver definido passamos, do planejamento para a ultima peça do quebra-cabeça: a tecnologia
  • 26. Sumário • • • • • • • • • • • • • Estabelecer um diálogo entre quem encomendou a tarefa e os que vão executá–las. Definir em conjunto os objetivos do trabalho. Definir todas as tarefas a serem executadas. Estabelecer o calendário. Pesquisa de sites (revistas) similares. Definindo o público usuário da revista. Definir o que entra e o que não entra no trabalho. Desenhar o mapa do site. Criar o design - tipografia, cor e layout Determinar o conteúdo da revista electrónica e impressa. Escolher a tecnologia. Iniciar a produção da revista. Finalizar e publicar a revista • 2 Wireframes: download trial http://www.axure.com/features?gclid=CKyR9fHmjqwCFQSn7QodQFapoA • 3 Tean Nirvana (cores) http://teamnirvana.com/blog/how-to-choose-best-web-designing-color-combinations-forwebsites-and-blogs-from-10-online-applications-and-tools.html
  • 27. A revista impressa Os passos para o projeto da revista aqui apresentado é o de uma revista digital. Para uma revista impressa os passos do desenvolvimento do projeto são muito semelhantes. Sigam a estrutura das revistas discutida em classe. Bibliografia consultada: Bomeny, Maria HelenaWerneck. O panorama dodesinggráfico contemporâneo: a construção a desconstrução e a nova ordem. – São Paulo: Ed. SENAC São Paulo, 2012 Revista WWW.COM.BR, no 104, 2009 http://es.wikipedia.org/wiki/Tipograf%C3%ADa https://www.google.com.br/search?rlz=1C5MACD_enBR509BR509&espv=210&es_sm=91&tbm=i sch&q=tipografia+impress%C3%A3o&revid=1510905574&biw=1000&bih=658&dpr=1