Desenvolvimento de um sitio virtual para a revista identidade nula by Alessandra Milléo

Desenvolvimento de um sĂtio virtual para a revista Identidade Nula Por Alessandra MillĂŠo

SUMÁRIO

INTRODUÇÃO............................................. 08 ESTRATÉGIA............................................. 11

Definição de tema................................. 12

Palavras Chaves................................... 12

QUESTÕES PROJETUAIS.................................... 14 JUSTIFICATIVA.......................................... 16

Motivação Pessoal................................. 17

Motivação Profissional............................ 17

OBJETIVOS.............................................. 18

Obejtivo Principal................................ 19

Obejtivo Secundário............................... 19

ANTECEDENTES........................................... 20

História da Revista............................... 21

Histórico de Sites de Revistas.................... 23

Sites de Revistas................................. 26

POSICIONAMENTO......................................... 28

Público Alvo - Geração Y.......................... 29

Painel Semântico - Público Alvo................... 33

Painel Semântico Conceitual....................... 36

CRONOGRAMA............................................. 37 ANÁLISE................................................ 38

Análise Estrutural................................ 40

Análise Funcional................................. 48

Análise Cromográfica.............................. 50

Análise Tipográfica............................... 52

Análise Heurística................................ 54

ESCOPO...............................................55 55

Diferencial Semântico...........................56 56

Organização do Site.............................57 57

ESTRUTURA...........................................62 62

Organograma do Site.............................63 63

Fluxo de Tarefa.................................64 64

ESQUELETO............................................66 66

Contrução Layout................................68 68

ESTÉTICA.............................................71 71 Logotipo........................................72 72 Tipografia......................................76 76 Cromografia.....................................78 78

Layout Final....................................79 79

REFERÊNCIAS..........................................80 80

LISTA DE FIGURAS

Figura 1: Revista..................................... 22 Figura 2: RollingStone.............................. 23 Figura 3: RollingStone2............................... 24 Figura 4: RollingStone3............................... 25 Figura 5: Revista 2..................................26 Figura 6: Revista 3..................................27 Figura 7: Características........................... 34 Figura 8: Preferências.............................. 35 Figura 9: Conceito.................................. 36 Figura 10: Análise Super............................ 49 Figura 11: Análise Super 1.......................... 41 Figura 12: Análise Super 2.......................... 42 Figura 13: Análise Super 3.......................... 43 Figura 14: Análise Raconteurs....................... 44 Figura 15: Análise Raconteurs 1..................... 45 Figura 16: Análise Raconteurs 2..................... 46 Figura 17: Análise Raconteurs 3..................... 47 Figura 18: Fluxograma............................... 48 Figura 19: Fluxograma 1............................. 49 Figura 20: Cromográfica............................. 50 Figura 21: Cromográfica 1........................... 51 Figura 22: Tipográfica.............................. 52 Figura 23: Heurística............................... 54 Figura 24: Diferencial Semântico.................... 56 Figura 25: Organização.............................. 57 Figura 26: Organização 1............................ 57 Figura 27: Organograma.............................. 63

Figura 28: Fluxograma...............................64 64 Figura 29: Layout...................................68 68 Figura 30: Layout 1.................................69 69 Figura 31: Layout 2.................................70 70 Figura 32: Logotipo.................................72 72 Figura 33: Logotipo 1...............................73 73 Figura 34: Logotipo 2...............................74 74 Figura 35: Logotipo 3...............................75 75

INTRODUÇÃO

O presente trabalho teve por objetivo o de-

senvolvimento de um projeto gráfico de um sitio virtual para a revista Identidade Nula, desenvolvida pela autora do projeto. A revista, foi um projeto de conclusão de curso da autora, tendo como enfoque no estilo New Wave, linguagem pós-moderna, voltada para o público da geracão Y.

A pós-modernidade tornou a informacão globali-

zada, comunicacão fragmentada com a utilizacão de uma linguagem para todos os meios tecnológicos (sites, blogs e redes sociais) e revistas, dificultando a compreensão do significado da mensagem. Existindo pouca diferenca no formato, diagramacão e tipografia nas revistas.

A geracão Y caracteriza-se como um público

que busca o diferencial, a realizacão, a comunicação, a procura excessiva de informacão e a exigência de entendimento de seus pensamentos. A partir de observacões em meios tecnológicos com o público, a academica percebeu a oportunidade de contatá-los e promover uma comunicacão mais eficiente, com um projeto gráfico de uma revista que valorize aspectos do design pós-moderno na escrita e na comunicacão visual, que aplicados à informacão estabelece sentido e entendimento da mensagem.

Este trabalho justifica-se por contribuir para

o avanco e conhecimento da revista no mercado de trabalho, trabalhando o estilo estético da pós-modernidade, focando no público alvo, atendendo realmente as suas necessidades de informacão; a fim de atribuir um diferencial competitivo no mercado de design editorial é preciso uma comunicação renovada das aplicacões gráficas na comunicacão da informação.

PÁGINA 09

INTRODUÇÃO

Para o desenvolvimento deste projeto, será uti-

lizada a metodologia do Projeto E, que adapta variadas ferramentas projetuais, desenvolvida com o objetivo de guiar e desenvolver com clareza e objetividade as etapas envolvidas em seu projeto. No decorrer deste projeto, veremos as seguintes etapas projetuais: Estratégia, Escopo, Estrutura, Esqueleto, Estética e Execução. Cada uma destas etapas engloba passos significativos para guiar a construção e otimização do desenvolvimento de um projeto gráfico para sítio virtual.

PÁGINA 10

ESTRATÉGIA

DEFINIÇÃO DO TEMA

Desenvolvimento de um sitio virtual para a

revista Identidade Nula, tendo como dominância gráfica o estilo estético New Wave, uma linguagem pós-moderna, voltada para

a geração Y, como o público-alvo.

PALAVRAS CHAVES

Para realizar o desenvolvimento do projeto

proposto, juntamente com a revista, que foi desenvolvido pela autora do projeto, foi realizado uma conceituação. Dentro dessa conceituação da revista, identificado algumas palavras chaves para guiar o processo construtivo do projeto. As palavras chaves são: Comunicação; Quebra de paradigma; Conceitual; Informação; Interação.

Dentro dessas palavras, será estudado suas

definições

para

esclarecimentos

propriedades

para

melhor desenvolvimento do projeto. - Comunicação: (substantivo e verbo); Ação de comunicar: estar em comunicação com alguém. Aviso, mensagem, informação: comunicação de uma notícia. Psicolo-

PÁGINA 12

PALAVRAS CHAVES

gia Transmissão da informação no interior de um grupo, considerada em suas conexões com a estrutura desse grupo. Meio de ligação: vias de comunicação. - Quebra de paradigma: Quebra: (substantivo e verbo); Ação de quebrar ou quebrar-se; fratura. Perda; Falência; Interrupção. Paradigma: (substantivo); Padrão, modelo, exemplo. Portanto, quebra de paradigma: Interromper um determinado padrão e/ou regra. - Conceitual: (adjetivo); Constituído por conceitos, que possuí conceito. Relacionado ao conceito.

Conceito: (substantivo); Idéia que uma pessoa faz

de uma classe de objetos, assim como gato, cavalo ou casa, ou de uma classe de idéias como amor, liberdade ou Deus. É uma consciência de suas qualidades que faz de um objeto ou de uma idéia o que são ou parecem ser. Grande número dos estudos filosóficos consiste em tentativas empreendidas pelo homem para definir conceitos. Todos os substantivos são conceitos elaborados pelo homem. - Informação: (substantivo e verbo); Ação de informar ou informar-se. Notícia recebida ou comunicada; informe. Espécie de investigação a que se procede para verificar um fato (neste sentido, emprega-se geralmente no plural): ir às informações. - Interação: (substantivo); Influência recíproca: a interação da teoria e da prática. Psicologia Fenômeno que permite a certo número de indivíduos constituir um grupo, e que consiste no fato de que o comportamento de cada indivíduo se torna estímulo para outro.

PÁGINA 13

QUESTÕES PROJETUAIS

- O que projetar?

Sitio virtual para a revista Identidade Nula.

- Por que projetar?

Para conectar-se, interagir-se e comunicar-se

online com o público.

- Como projetar?

Através

processo

criativo

Projeto

Meurer e Szabluck (2009), auxiliada por metodologias de projeto, para desenvolver questões projetuais técnicográficas e técnico-funcionais.

- Para quem projetar?

Geração Y, público alvo da revista Identidade

Nula.

- Qual será a tecnologia utilizada?

Para a editoriação gráfica, os softwares uti-

lizados para a construção do layout, serão: Photoshop, Indesign e Illustrator.

Para programação, as ferramentas utilizadas

serão:

Superficie: HTML5, CSS3 e JavaScript

Banco de dados: PHP com banco de dados MySQL ou

Java com banco de dados Oracle.

PÁGINA 15

JUSTIFICATIVA

O presente projeto de Web Design propõe o de-

senvolvimento de um sitio virtual para a revista Identidade Nula, representando o estilo gráfico da revista, para maior comunicação visual e midiática com o seu público alvo. Motivação pessoal

Do ponto de vista pessoal, a acadêmica nota que

todas as mídias impressas requer de um auxílio virtual para maior conhecimento e comunicação com os usuários. Motivação profissional

Do ponto de vista profissional, a acadêmica

tem como interesse a criação do sitio virtual, devido a própria revista ser desenvolvida pela acadêmica.

PÁGINA 17

OBJETIVOS

Os objetivos referentes ao presente projeto

são dividos em principal e secundários. Objetivo Principal - Criar um sitio virtual para a revista Identidade Nula, voltada para a geração Y. Objetivos secundários - Compreender a ferramenta metológica proposta pelo Projeto E e seguir passo a passo. - Definir características, necessidades e comportamentos do público alvo. - Analisar sites de revistas concorrentes, estudando sua estrutura e linguagem visual. - Definir conteúdos e plataformas de ferramentas que irão contribuir para o site. - Definição da solução final de alternativas geradas para a construção do sítio virtual. - Desenvolver o sítio virtual da revista.

PÁGINA 19

ANTECEDENTES

História da Revista

Para entrar na história das revistas, primeiro

será destacado a história da comunicação e da escrita e sua importância para o surgimento de meios de comunicação, como a revista, que se destaca neste projeto.

Com a necessidade de contabilizar os produ-

tos comercializados, os impostos arrecadados e os funcionários do estado, a escrita foi uma surgida para suprir essas necessidade, criada por volta de 3.500 a.C. Com a escrita, o ser humano criou uma forma de registrar suas idéias e de se comunicar.

Segundo Melo (web) Com o desenvolvimento so-

cial em grupo, o homem precisou dar nomes aos

obje-

tos. Os sons surgiram para isso. Em seguida, chegaram o alfabeto e a escrita, para perpetuar a comunicação. A linguagem escrita é especial porque permite que a vida que levamos hoje seja conhecida pelas gerações que virão depois de nós. A Imagem 1 ilustra a história da comunicação.

A definicão de Scalzo (2004) para o papel da

revista é como uma linha invisível que une um grupo de pessoas e, nesse sentido, ajuda a construir identidade, proporcionando a sensacão de pertencer ao mesmo grupo. Refere-se também que a revista possui como característica básica para a construcão dessa identificacão, o formato, a periodicidade e a especializacão ou segmentacão. Essas propriedades, porém, não são isoladas, elas precisam estar interagindo entre si. A figura 1 mostra algumas revistas pioneiras.

PÁGINA 21

ANTECEDENTES

Imagem 1: Revistas. Desenvolvido pela autora.

Figura1: Revistas.

PĂ GINA 22

ANTECEDENTES

Histórico de Sites de Revistas Neste item será mostrado o histórico do site da revista Rolling Stone e sua evolução. Nas figuras 2, 3 e 4 mostra os primeiros sites de revistas Rolling Stone, uma das pioneiras a ter o site. Ela iniciou na web em 1997.

Figura 2: RollingStone.

PÁGINA 23

ANTECEDENTES

Figura 3: RollingStone 2

PÁGINA 24

ANTECEDENTES

Figura 4: RollingStone 3

PÁGINA 25

ANTECEDENTES

Sites de Revistas Neste item serĂĄ mostrado os atuais sites das revistas no mercado. A figura 5 mostra os sites da revista Veja e Superinteressante.

Figura 5: Revista 2

PĂ GINA 26

ANTECEDENTES

A figura 6 mostra os sites da revista Trip e

Zupi.

Figura 6: Revista 3

PĂ GINA 27

POSICIONAMENTO

Público Alvo - Geração Y

Segundo Loiola (2009) entre 1980 e final dos

anos 90, o conceito “Geração Y” também chamada de geração do milênio refere-se para descrever a geração de pessoas nascidas nessa época. É uma geração que cresceu junto com o desenvolvimento da informática e da internet e o crescimento de grandes economias mundiais. Além de serem dinâmicos e mais ousados que as gerações anteriores.

O batismo dessa geração, conforme Oliveira

(2010) se deve a um fato curioso. Quando a antiga União Soviética exercia forte influência sobre países de regime comunista, chegava a definir a primeira letra dos nomes que deveriam ser dados aos bebês nascidos em determinados períodos. Nos anos 1980 e 1990 a letra principal era a Y. Mais tarde muitos estudiosos adotaram essa letra para designar os jovens nascidos nesse período. Surgia assim o termo Geração Y. A tecnologia tem grande influência na educação dos jovens de hoje, que estão chegando em sua fase adulta e no mercado de trabalho agora, portanto, começando a interferir de maneira mais direta nos destinos da sociedade. Essa geração é extremamente informada, mas também possuem um componente de alienação, pois ainda não conseguem ou não sabem lidar com toda essa informação em massa. Entretanto, suas formas de influência se alteraram significativamente em relação às gerações anteriores. Somente com a população da internet que o computador pessoal alcançou sua plena justificativa e possibilitou o instrumento perfeito para realizações pessoais e profissionais, que a Geração Y pudesse desenvolver todo o seu potencial.

PÁGINA 29

POSICIONAMENTO

Segundo Loiola (2009) o termo “Geração Y”, desde que iniciou tornou-se associado a algo ruim na sociedade. Muitos julgam como sendo arrogantes, outros julgam como individualistas, porém, esses adjetivos não precisam ser vistos necessariamente como algo negativo e cita Sant’anna (apud Loiola 2009) dizendo que esses jovens estão aptos a desenvolver a auto-realização, algo que até hoje não saiu da teoria, vem se tornando prática com a Geração Y. Questionando o que é a realização pessoal e profissional e buscando agir de acordo com seus próprios interesses, os jovens estão levando a sociedade a um novo estágio que será muito diferente dessa que se conhece hoje. “A Geração Y é bastante prodigiosa em sua capacidade criativa, apresentando uma infinidade de idéias e propostas para modificar as circunstâncias do mundo à sua volta” (OLIVEIRA, 2010).

De acordo com Loiola (2009) nesse processo

pela “busca dos significados” é através da manifestação e expressão que dá sentido às coisas. Essa geração se desenvolveu mostrando a consciência de globalização e um grande interesse com causas sociais e ambientais. Procuram maior qualidade de vida, pois muitas vezes se encontram no lugar dos seus pais, estressados por viverem a rotina casa- trabalho-casa. Esses jovens querem ser bem sucedidos e reconhecidos profissionalmente, pois muitos presenciaram seus pais se dedicarem de corpo e alma às suas carreiras e obtendo reconhecimento menor do que realmente mereciam. Loiola (2009) nos mostra através de um estudo de Mirian, desenvolvido por alguns autores perfis dessa geração que está dando problema para pais, professores e a empresas como de RH, que no

PÁGINA 30

POSICIONAMENTO

trabalho, é comum os recém-contratados dessa geração pularem de um emprego para o outro, tratarem os superiores como colegas de turma ou baterem a porta quando não são reconhecidos. Comentando ainda que fosse descoberto que eles não são revoltados e têm valores éticos muito fortes, priorizam o aprendizado e as relações humanas, mas é preciso, antes de tudo, aprender a conversar com esses jovens para que essas características sejam reveladas.

Segundo Oliveira (2010) as principais carac-

terísticas atribuídas à Geração Y é: fazer questionamentos constantemente; demonstrar ansiedade e impaciência em quase todas as situações; desenvolver idéias e pensamentos com superficialidade; buscar viver com intensidade cada experiência; ser transitório e ambíguo em suas decisões e escolhas. Com algumas de suas outras características mais abrangente em seus textos, Oliveira (2010) retrata que os jovens da geração Y necessitam de:

1 - Reconhecimento: Pois devido ao aprendizado logo

cedo ao receber feedback de tudo que fazia, esses jovens quando crianças eram incentivados a superar suas próprias realizações e se diferenciar das demais crianças. Se puder resumir todas as expectativas da Geração Y em uma palavra, essa seria reconhecimento.

2 - Informalidade: Os jovens da Geração Y consid-

eram a informalidade de maneira diferente, substituindo a valorização da liberdade que fora utilizada pelas gerações anteriores quando jovens com sua rebeldia, por flexibilidade e conveniência em seu comportamento.

3 - Individualidade: Muitas vezes, essa atitude é

PÁGINA 31

POSICIONAMENTO

confundida com egoísmo e arrogância, porém esse é um dos comportamentos mais claros na Geração Y e o que mais sofreu influências das gerações anteriores, que tiveram um papel determinante em seu desenvolvimento.

4 - Relacionamentos: A Geração Y é a mais conectada

da história da humanidade, devido ao acesso a internet, e sabe usufruir toda tecnologia para obter relacionamentos mais numerosos e intensos. Não se trata de estabelecer comparação entre relacionamentos profundos ou superficiais, mas sim de amplitude.

5 – Expectativas: Todos esses comportamentos cita-

dos a cima, compõem um cenário bastante complexo nos dias atuais, com a Geração Y chegando mais intensamente ao mercado de trabalho.

Rocha (2008) salienta que, lidar com as cara-

cterísticas e a forte personalidade à primeira vista intratáveis dessa geração é um dos grandes desafios para empresas de todos os setores, em todos os lugares do mundo. Nesse sentido, afirma que as primeiras reações das empresas às características da nova geração é que a impaciência - eles não estão dispostos há esperar muito tempo por uma promoção, com isso teve uma reação na Microsoft, os funcionários agora revisam metas de carreiras duas vezes por ano com o chefe imediato; infidelidade - não são fiéis a uma empresa, e sim os seus projetos, a GE teve a reação que passou a oferecer progressão salarial aos participantes de seu programa de trainee; insubordinações - abordam com informalidade até o presidente da empresa a reação dessa característica foi buscar uma orientação para diretores e gerentes sobre como lidar com a nova geração.

PÁGINA 32

POSICIONAMENTO

Assim sendo, a Geração Y busca crescer num

mundo melhor que dos seus pais e avós. E todas as gerações que surgirem ao longo do tempo, irá buscar melhorar pontos em que as gerações anteriores falharam. E essas gerações que vierem após a Geração Y, representam um comportamento desconhecido dos jovens após transformações sociais e culturais, com valores próprios e que todas possuem suas características positivas e negativas de destaque, pois cada geração representa o comportamento social de sua época (LOIOLA, 2009).

Painel Semântico - Publico Alvo

O painel semântico auxilia na representação

visual do público-alvo, seus gostos e características de acordo com a pesquisa e análise feita anteriormente. Segundo Baxter (2008) o painel semântico é uma ferramenta de composição de imagens que dá assistência nas definições visuais das características, tanto do público quanto para uma conceituação de um projeto. A seguir será apresentado pela figura 7, o painel semântico do público referente as suas características dinâmicas, psicológicas e filosóficas de acordo com o estudo da Geração Y feito anteriormente.

PÁGINA 33

POSICIONAMENTO

Figura 7: Características

PÁGINA 34

POSICIONAMENTO

O painel apresentado representa as caracterís-

ticas do público-alvo, formado pela geração Y. Para alinhar mais o perfil do público-alvo, foi desenvolvido outro painel semântico apresentando suas preferências visuais de acordo com a pesquisa feita, de acordo com a figura 8.

Figura 8: Preferências

PÁGINA 35

POSICIONAMENTO

Painel Semântico Conceitual

O painel semântico conceitual vem como forma

de exemplificar os conceitos aplicados no projeto: Comunicação; Quebra de Paradigma; Conceitual; Informação; e Interação. Com essas palavras chaves foi desenvolvido um painel de referências visuais conforme a figura 9 mostra.

Figura 9: Conceito

A conceituação de um projeto garante coerência

na aplicação das coletas de dados de pesquisas e estudos durante o desenvolvimento do projeto. Sendo assim, o conceito estará presente desde as analises, as gerações de alternativas até a construção do modelo final.

PÁGINA 36

CRONOGRAMA

Para o desenvolvimento deste projeto, serรก

utilizado o cronograma abaixo:

Pร GINA 38

ANÁLISE

ANÁLISE ESTRUTURAL

(SITE SUPERINTERESSANTE) WIREFRAME

Figura 10: Análise Super

PÁGINA 40

ANÁLISE ESTRUTURAL

(SITE SUPERINTERESSANTE) MANCHA GRÁFICA

Figura 11: Análise Super 1

PÁGINA 41

ANÁLISE ESTRUTURAL

(SITE SUPERINTERESSANTE) ARQUITETURA DA INFORMAÇÃO

Figura 12: Análise Super 2

PÁGINA 42

ANÁLISE ESTRUTURAL

(SITE SUPERINTERESSANTE) ORGONOGRAMA

Figura 13: Análise Super 3

PÁGINA 43

ANÁLISE ESTRUTURAL

(SITE THE RACONTEURS) WIREFRAME

Figura 14: Análise Raconteurs

PÁGINA 44

ANÁLISE ESTRUTURAL

(SITE THE RACONTEURS) MANCHA GRÁFICA

Figura 15: Análise Raconteurs 1

PÁGINA 45

ANÁLISE ESTRUTURAL

(SITE THE RACONTEURS) ARQUITETURA DA INFORMAÇÃO

Figura 16: Análise Raconteurs 2

PÁGINA 46

ANÁLISE ESTRUTURAL

(SITE THE RACONTEURS) ORGONOGRAMA

Figura 17: Análise Raconteurs 3

PÁGINA 47

ANÁLISE FUNCIONAL

(SITE SUPERINTERESSANTE) FLUXO DE TAREFA - ASSINAR

O João, quer assinar a revista super interessante,

para isso, ele entra no site, digita lá no navegador e entra.

Logo que entra, João bate o olho no menu superior

que é o principal da revista super interessante e vê o link para assinar, clicando lá, ele fica sem entender nada, pois dá uma página não encontrada. Para não perder a oportunidade de assinar, já que sua vontade é grande, ele volta ao site, e vê que logo na parte de cima do site, tem um menu da editora abril, clica lá, e abre o site da abril.

Mesmo sem entender o motivo daqui, João começa a

se animar novamente, mas vê que tem que escolher a revista, selecionar a assinatura, após isso, ele só falta um passo: Login ou Novo cadastro.

Não possui um cadastro, ele se cadastra no site da

editora, coloca seus dados, formas de pagamentos e consegue finalizar a compra.

Figura 18: Fluxograma

PÁGINA 48

ANÁLISE FUNCIONAL

(SITE THE RACONTEURS) FLUXO DE TAREFA - COMPRA

A Maria, gosta muito da banda The Raconteurs, re-

volve então, entrar no site deles para ver se tem alguma blusa da banda para se exibir por aí.

Ela entra no site, faz os passos certos, clica para

continuar, entra na home, vê o atalho para entrar na web store e clica.

Então o site redirecionou para o site de vendas da

banda, onde ela consegue selecionar o tipo de produto que ela quer, uma camiseta feminina e seu número. Após a escolha, ela precisa do login para efetuar a compra, então se cadastra, pois nunca tinha comprado nada do site, e confirma o produto pelo ícone do carrinho de compra.

Confirmando o produto e a forma de pagamento, só

resta a Maria finalizar a sessão de compras e aproveitar o resto do site para navegar.

Figura 19: Fluxograma 1

PÁGINA 49

ANÁLISE CROMOGRÁFICA

(SITE SUPERINTERESSANTE)

Figura 20: Cromografica

PÁGINA 50

ANÁLISE CROMOGRÁFICA (SITE THE RACONTEURS)

Figura 21: Cromografica 1

PÁGINA 51

ANÁLISE TIPOGRÁFICA

(SITE SUPERINTERESSANTE)

- Seqüencia tipografica no HTML:

Lucida grande,verdana,helvetica ,geneva,sans-serif; - Tamanho da fonte: Texto, 11px, peso normal;

Título de texto, 10 px, negrito;

Título de seção, 14 px, negrito; Chamada, 12 px, negrito.

Figura 22: Tipográfica

PÁGINA 52

;

ANÁLISE HEURÍSTICA

Heurística é um método para se analisar a usabilidade de uma interface ou um sítio virtual. Esta ferramente observa diversos padrões de comportamento do usuário em interfaces gráfica, propondo então soluções para a navegação ficar mais fluída, prazerosa e funcional para o usuário. As notas que serão dadas à essa análise é de 1 a 5.

Figura 23: Heurística

PÁGINA 54

ESCOPO

DIFERENCIAL SEMÂNTICO

Definição do conceito do sítio virtual da revista

Identidade nula, através da escala de diferencial semântico, que tem como proposta demonstrar ideias e sentidos que irá compor o projeto.

Figura 24: Diferencial Semântico

PÁGINA 56

ESCOPO

ORGANIZAÇÃO DO SITE

Figura 25: Organização

Figura 26: Organização 1

PÁGINA 57

ESCOPO

ORGANIZAÇÃO DO SITE DESCRIÇÃO REVISTA

- CAPA: Esta opção mostrará a capa da edição atual

da revista, deixando assim, uma opção para ver o arquivos de capas anteriores.

- SEÇÕES: Ao decorrer da linha da revista, virá as

seções, onde mostrará quais foram os assuntos abordados na revista e em cada seção.

- Identidicas: Abrirá a opção para três dicas ou

mais, dentro da revista que foi abordado. Todas as edições irá conter essas dicas.

- Gastronomia: Dicas de gastronomia, pratos, e

maneiras de se alimentar.

- Livros: Dicas de livros, resenhas e o que é

interessante saber antes de comprar um livro.

- Filmes: Dicas de filmes, lançamentos, resen-

has, e tudo que for necessário para instigar o leitor.

PÁGINA 58

ESCOPO

ORGANIZAÇÃO DO SITE

BLOG

- LOL: Esta tag será para “coisas” divertidas, en-

graçadas que será postado no blog.

- VÍDEOS: Nesta tag será disposta todos os vídeos

postados no blog.

- MÚSICA: Nesta tag será disposta todas as músicas

postadas no blog, e/ou para indicações de músicas, bandas, etc.

- INSPIRAÇÃO: Nesta tag estará a disposição dos

usuários,

musicas,

videos,

filmes,

fotos,

artistas,

textos, tudo que foi e é inspiração para os realizadores da revista Identidade Nula. No blog, será disposto mais tags de acordo com suas necessidades.

PÁGINA 59

ESCOPO

ORGANIZAÇÃO DO SITE DESCRIÇÃO LOJA

- BOTTON: Nesta tag será disposta ao usuário e con-

sumidor todos os bottons que fará parte da loja da revista Identidade Nula.

- VESTUÁRIO: Nesta tag será disposta ao usuário e

consumidor todas as peças de roupas e vestimentos que será parte da loja da revista Identidade Nula.

- IMPRESSOS: Nesta Tag será disposta ao usuário e

consumidor todas as peças gráficas impressas da revista Identidade Nula, inclusive a revista. Na loja virtual, será disposto mais tags de acordo com suas necessidades.

PÁGINA 60

ESCOPO

ORGANIZAÇÃO DO SITE

- USUÁRIO: Esta opção será para caso o usuário/lei-

tor queira receber newsletter e/ou realizar a compra na loja virtual.

- PARTICIPE: Caso o usuário/leitor queira partici-

par da revista com idéias, filmes, fotografias próprias, músicas próprias e até textos próprios estará a disposição para que ele envie seu trabalho para ser avaliado e possivelmente publicado na revista e/ou no blog.

- SOBRE: Para saber mais sobre a revista e seus

componentes que fazem ela acontecer.

- REVISTA: Opção de navegação para ir diretamente

para a revista.

- BLOG: Opção de navegação para ir diretamente para

o blog.

- LOJA: Opção de navegação para ir diretamente para

a loja. No menu, será disposto mais opções de acesso de acordo com suas necessidades.

PÁGINA 61

ESTRUTURA

ESTRUTURA ORGANOGRAMA DO SÍTIO

Figura 27: Organograma

PÁGINA 63

ESTRUTURA

FLUXO DE TAREFA - COMPRA

Figura 28: Fluxograma 2

PÁGINA 64

ESTRUTURA

FLUXO DE TAREFA - COMPRA DESCRIÇÃO

Douglas, gostou tanto da revista quando leu e re-

solveu olhar a sua loja virtual, entrando nela, viu uma camiseta que lhe agradou bastante, clicou na camiseta, viu ela em tamanho grande e escolheu seu número.

Ele então não tem cadastro e resolve se cadastrar

no site da revista, o que é muito rápido, apenas informações básicas. Feito o cadastro ele segue para finalizar a compra que é dada pelo site do MercadoPago.

PÁGINA 65

ESQUELETO

Delimitações:

- Deve ter pouca Rolagem.

- Navegação preferencial na horizontal.

Foi desenvolvido alguns rafes de como será a construção do layout.

PÁGINA 67

ESQUELETO

CONTRUÇÃO LAYOUT

Figura 29: Layout

PÁGINA 68

ESQUELETO

CONSTRUÇÃO LAYOUT

Figura 30: layout 1

PÁGINA 69

ESQUELETO

CONTRUÇÃO LAYOUT

Figura 31: Layout 2

PÁGINA 70

ESTÉTICA

ESTÉTICA LOGOTIPO

Figura 32: Logotipo

PÁGINA 72

ESTÉTICA LOGOTIPO

Figura 33: Logotipo 1

PÁGINA 73

ESTÉTICA LOGOTIPO

Figura 34: Logotipo 2

PÁGINA 74

ESTÉTICA LOGOTIPO

Figura 35: Logotipo 3

PÁGINA 75

ESTÉTICA TIPOGRAFIA TIPOGRAFIA BASE: CANTARELL (web font) Tamanho as fontes e Hierarquia:

- Títulos de Manchetes: itálico 18px

- Textos em links nas notícias: regular 15px

- Textos de Notícias: regular 15px

- Textos Auxiliares: regular/bold 15px

Entrelinhas:

- Textos de Notícias: 15px

ABCDEFG HIJKLMN OPQRSTU VWXYZ

abcdefg hijklmn opqrstu vwxyz

1234567890 !@#$%¨&*()

1234567890 1234567890 !@#$%¨&*() !@#$%¨&*()

PÁGINA 76

ESTÉTICA TIPOGRAFIA TIPOGRAFIA DE APOIO: ELECTROLIZE (web font) Tamanho as fontes e Hierarquia:

- Títulos de Menus: 15px

- Links Menus: 14px

ABCDEFG HIJKLMN OPQRSTU VWXYZ abcdefg hijklmn opqrstu vwxyz 1234567890 !@#$%¨&*()

PÁGINA 77

ESTÉTICA CROMOGRAFIA As cores do sítio virtual mudará de acordo com cada edição. Mas terá cores fixas. Cores fixas:

#000000

#999999

#cccccc

#eeeeee

#e7e7e6

Cores dinâmicas:

#f89b1c

PÁGINA 78

ESTÉTICA LAYOUT FINAL

PÁGINA 79

REFERÊNCIAS

LOIOLA, Rita. Geração Y. 2009. Disponível em: <http:// revistagalileu.globo.com/Revista/Galileu/>

Acesso

em:

13 de mar. 2011. MELO, Patricia Bandeira de. Um passeio pela História da Imprensa: O espaço público dos grunhidos ao ciberespaço. Disponível em: < http://www.fundaj.gov.br/geral/ artigo_passeio_historia_imprensa.pdf> Acesso em 21 de abr. 2012. OLIVEIRA, Sidnei. Geração Y: o nascimento de uma nova versão de líderes. São Paulo: Integrare Editora, 2010. ROCHA, Márcia. Impacientes, infiéis e insubordinados. Portal Exame. Março 2008. SCALZO, M. Jornalismo de revista. 2. ed. São Paulo: Contexto, 2004

PÁGINA 81