tcc-cria-o-de-um-panfleto-digital-para-auxiliar-empresas-da

Transcrição

1
UNIVERSIDADE DO OESTE DE SANTA CATARINA
UNOESC CAMPUS DE XANXERÊ
FELIPE SOMENSI
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE
DE XANXERÊ NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO
VIRTUAL.
Xanxerê
2010
2
FELIPE SOMENSI
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE
VIRTUAL.
Trabalho de conclusão de curso apresentado ao
curso de Design Gráfico, Área das Ciências
exatas, da Universidade do Oeste de Santa
Catarina, Campus de Xanxerê.
Prof. Orientador: Aleteonir J. Tomasoni Junior
Xanxerê
2010
3
FELIPE SOMENSI
CRIAÇÃO DE UM PANFLETO DIGITAL, PARA AUXILIAR EMPRESAS DA CIDADE
VIRTUAL.
Trabalho de Conclusão de Curso apresentado a Universidade
do Oeste de Santa Catarina, como requisito parcial a obtenção
do grau de Bacharelado em Design Gráfico.
Aprovado em: 07 de dezembro de 2010
BANCA EXAMINADORA
________________________________________________
Profa. Me. Ronise de Paula
Universidade do Oeste de Santa Catarina
Nota atribuída
________________________________________________
Prof. Me. Luiz Claudio Mazolla Vieira
Nota atribuída
________________________________________________
Prof. Esp. Aleteonir Jose Tomasoni Junior
Nota atribuída
4
AGRADECIMENTOS
Agradeço primeiramente a Deus aos
meus familiares meus amigos, agradeço
também aos meus professores que
sempre estiveram junto comigo durante
todo esse período de faculdade e
principalmente ao meu orientador Aleto.
5
RESUMO
Hoje em dia, com o grande acesso a internet e a interação do homem com o
computador, fez com que a internet criasse uma necessidade, o segundo endereço
das empresas, o virtual, hoje em dia a busca por novos clientes e novas fronteiras
de negociação faz com que a internet se torne algo indispensável, tornando assim
empresas em potencial sempre a busca de novos diferenciais competitivo, a internet
faz que isso ocorra através dos Web Sites. A presente monografia discorre sobre a
criação de um portal de Internet. O Portal Xanxerê será um website que ira funcionar
como centro de informações para a cidade de Xanxerê - SC. O portal é uma forma
de divulgação para empresas de pequeno e médio porte. Oferecendo um serviço
gratuito que pretendem criar o seu primeiro endereço virtual, e que não possuem
recursos financeiros suficientes para o mesmo. O portal terá aspecto profissional
seguindo os conceitos básicos do design e dos critérios de usabilidade como
aproximação, contraste, alinhamento, dentre outros. Devido à grande quantidade de
informações do portal, serão utilizadas ferramentas de gerenciamento de conteúdo,
o gerenciador tem o objetivo de alimentar as informações básicas do portal, os
sistemas de gerenciamento de conteúdo auxiliam o cliente para poder inserir
informações de sua empresa, de forma concisa e de fácil manuseio. A fim de facilitar
a criação deste projeto foi optado trabalhar com a metodologia do Flavio Anthero dos
Santos conhecida como MD3E Método de Desdobramento em 3 Etapas, foi optado
esta metodologia pela analise feito e que conclui que o método traz aspectos e
características muito parecidas com a do projeto, uma delas é que a metodologia
MD3E é um método aberto, com isso ele se molda conforme as necessidades do
usuário, e o projeto pressuposto aqui trabalha da mesma forma é um portal de
internet que se molda conforme as necessidades do usuário.
PALAVRAS-CHAVE: Usabilidade. Portal. Internet. Xanxerê.
6
ABSTRACT
Nowadays, with the great access the internet and the man's interaction with the
computer, did with the internet created a need, the second address of the
companies, the virtual, nowadays the search for new customers and new negotiation
borders does with that the internet becomes something indispensable, turning like
this always companies in potential the search of new differential competitive, the
internet does that that happens through the Web Sites. The present monograph talks
about the creation of a portal of Internet. The Portal Xanxerê will be a website that
angers to work as center of information for the city of Xanxerê - SC. The portal is a
popularization form for companies of small and medium load. Offering a free service
that intend to create its first virtual address, and that and that don't have enough
financial resources for the same. The portal will have professional aspect following
the basic concepts of the design and of the usability as approach, contrast,
alignment, among others. Due to the great amount of information of the portal, tools
of content administration will be used, the manager has the objective of feeding the
basic information of the portal the systems of content administration aid the customer
to insert information of his/her company, in a concise way and of easy handling. In
order to facilitate the creation of this project was chosen to work with the
methodology of Flávio Anthero dos Santos known as MD3E Method of Unfolding in 3
Stages, this methodology was chosen for the it analyzes done and that it concludes
that the method brings aspects and characteristics a lot similar to the one of the
project, one of them is that the methodology MD3E is an open method, with that he is
molded as the user's needs, and the project presupposed here works in the same
way is an internet portal that is molded according to the user's needs.
KEYWORDS: Usability. Portal. Internet. Xanxerê.
7
LISTA DE FIGURAS
Desenho 01: Exemplo de estrutura seqüencial ........................................................ 20
Desenho 02: Exemplo de estrutura hierárquica ....................................................... 21
Desenho 03: Exemplo de estrutura formato teia ...................................................... 21
Desenho 04: Exame quantitativo da fixação do olhar .............................................. 22
Desenho 05: Padrão F de leitura de paginas nas quais o texto predomina ............. 22
Desenho 06: Exemplo de uma imagem com unidade .............................................. 23
Foto 01: Exemplo de uma imagem com segregação ............................................... 24
Desenho 07: Exemplo de uma imagem com fechamento ........................................ 25
Foto 02: Exemplo de uma imagem com continuidade ............................................. 25
Foto 03: Exemplo de uma imagem com proximidade .............................................. 26
Fluxograma 01 três estilos de fontes ........................................................................ 26
Fluxograma 02 fontes pré-instalada na maioria dos computadores ........................ 27
Fluxograma 03 fonte pré-instaladas e suas características ..................................... 29
Fluxograma 04 Cores e simbologia das cores ......................................................... 33
Desenho 07 Etapa Central ....................................................................................... 36
Desenho 08 Etapas Básicas .................................................................................... 36
Desenho 08 Gerenciamento e Documentação ........................................................ 37
Desenho 09 Desdobramentos Mínimos ................................................................... 38
Desenho 10 Desdobramentos Auxiliares ................................................................. 39
Desenho 11 Estrutura Radial – Portal Xanxerê ........................................................ 40
Gráfico 01 Empresas de Xanxerê e seu Perfil com a Internet ................................. 42
Desenho 12 Concorrente Direto – Site Hagah ......................................................... 43
Desenho 13 Concorrente Indireto – Site tudosobrexanxerê .................................... 44
Desenho 14 Concorrente Indireto – Site redeprincesa ............................................ 45
Fluxograma 05 CheckList Site Hagah ...................................................................... 47
Gráfico 02 Comparativo dos concorrentes indiretos ................................................ 48
Desenho 15 Área Visível na tela do computador ..................................................... 49
Desenho 16 Área aonde o olhar pode correr na tela ............................................... 49
Desenho 17 Áreas com níveis de prioridade ............................................................ 50
Fluxograma 06 Conteúdo do Site ............................................................................. 51
Desenho 18 Quadro Conceitual ............................................................................... 54
Desenho 19 Painel Semântico ................................................................................. 55
Desenho 20 Algumas Diretrizes de NIELSEN .......................................................... 56
Desenho 21 Algumas Diretrizes de NIELSEN .......................................................... 57
Desenho 22 Geração de Alternativa normas de NIELSEN (2007) .......................... 58
Desenho 23 Geração de Alternativa feita Digitalmente a partir dos Concorrentes 59
Desenho 24 Geração de Alternativa dos Menus ...................................................... 61
Desenho 25 Uma norma de Usabilidade de NIELSEN ............................................ 62
Desenho 26 Dimensões dos Menus ......................................................................... 63
Desenho 27 Cores Padrões Concorrente Direto Site Hagah ................................... 64
Desenho 28 Cores Padrões Concorrente Indireto Site tudosobrexanxere .............. 65
Desenho 29 Cores Padrões Concorrente Indireto Site redeprincesa ...................... 66
Desenho 31 Cores Padrões site Portal Xanxerê ...................................................... 67
Desenho 32 Menu horizontal principal ..................................................................... 68
Desenho 33 menu vertical principal ......................................................................... 68
Desenho 34 Algumas diretrizes de NIELSEN .......................................................... 69
Fluxograma 06 Algumas Fontes Padrões ................................................................ 69
8
Fluxograma 07 Algumas Fontes Padrões ................................................................ 69
Desenho 35 Gerações de Alternativas do Fundo da Pagina ................................... 70
Desenho 36 Gerações de Alternativas da Home Page ............................................ 71
Fluxograma 08 CheckList Portal Xanxerê ................................................................ 73
Gráfico 03 Comparativo dos resultados do CheckList ............................................. 74
Desenho 37 Gerações de Alternativas da Estrutura ................................................ 76
Desenho 38 Conceituação da Home Page a partir das normas de NIELSEN ......... 77
Desenho 39 Algumas normas de NIELSEN ............................................................. 78
Desenho 40 Conceituação da Home Page a partir de STANQUE e GESTALT ...... 79
Desenho 41 Conceitos de GESTALT ....................................................................... 80
Desenho 42 Link Portal Xanxerê .............................................................................. 81
Desenho 43 Link Busca por Empresas .................................................................... 82
Desenho 44 Link Resultado da Busca por Empresas .............................................. 83
Desenho 45 Link Panfleto Digital ............................................................................. 84
Desenho 46 Links Empresas .................................................................................... 85
Desenho 47 Link Busca por Patrocinadores ............................................................ 87
Desenho 48 Link Resultado da Busca por Patrocinadores ...................................... 88
Desenho 49 Links Patrocinadores ............................................................................ 89
Desenho 50 Link Contato ......................................................................................... 91
Desenho 51 Sistema de Gerenciamento da marca (empresas) .............................. 93
Desenho 51 Sistema de Gerenciamento do Histórico Comercial (empresas) ......... 94
Desenho 52 Sistema de Gerenciamento do Contato (empresas) ............................ 95
Desenho 53 Sistema de Gerenciamento das fotos (empresas) ............................... 96
Desenho 54 Sistema de Gerenciamento da marca (patrocinadores) ...................... 97
Desenho 55 Sistema de Gerenciamento do contato (patrocinadores) .................... 98
9
SUMÁRIO
1 INTRODUÇÃO ................................................................................................................................... 11
1.1 TEMA .............................................................................................................................................. 11
1.2 PROBLEMA .................................................................................................................................... 12
1.3 OBJETIVOS .................................................................................................................................... 12
1.3.1 Objetivos Gerais ..................................................................................................................... 12
1.3.2 Objetivos Específicos ............................................................................................................ 12
1.4 JUSTIFICATIVA............................................................................................................................... 12
1.5 ESTRUTURA DO TRABALHO ....................................................................................................... 13
2 BASES DO CONHECIMENTO .......................................................................................................... 14
2.1 Design......................................................................................................................................... 14
2.1.1 Design Gráfico ........................................................................................................................ 15
2.2 WEB DESIGN ............................................................................................................................. 16
2.3 INTERNET....................................................................................................................................... 18
2.4 USABILIDADE ................................................................................................................................ 19
2.4.1 Direção do olhar na tela do Computador............................................................................. 20
2.4.2 Percepção Visual da Forma – Gestalt .................................................................................. 23
2.4.3 Unidade ................................................................................................................................... 23
2.4.4 Segregação ............................................................................................................................. 24
2.4.5 Fechamento ............................................................................................................................ 25
2.4.6 Continuidade .......................................................................................................................... 25
2.4.7 Proximidade ............................................................................................................................ 26
2.4.8 Tipografia nas Páginas da Web ............................................................................................ 27
2.4.9 Cores e Imagens ..................................................................................................................... 29
2.4.10 Significado das Cores.......................................................................................................... 30
2.4.11 Nomenclatura das Imagens Digitais .................................................................................. 33
3 DESENVOLVIMENTO DO PROJETO DE DESIGN.......................................................................... 34
3.1 Apresentando a Metodologia Projetual ....................................................................................... 34
3.2 Estrutura Radial ........................................................................................................................... 39
3.2.1 Pré-Concepção ........................................................................................................................ 40
4 RESULTADO DO PROJETO ............................................................................................................ 77
4.1 Modelações Finais .................................................................................................................... 77
5 CONSIDERAÇÕES FINAIS ............................................................................................................. 101
10
ANEXOS ............................................................................................................................................. 105
REFERÊNCIAS ................................................................................................................................... 102
11
1 INTRODUÇÃO
A internet começou a ser utilizada no Brasil, em meados de 1990, somente
por Instituições de pesquisas e um pouco depois por Universidades, permanecendo,
assim, até o final de 1995, em 15 anos de historia, muitas coisas mudaram, muitas
soluções para o dia a dia foram surgindo graças à internet.
Hoje são milhões de usuários ligados a uma só rede, cada um com um
objetivo, estudo, trabalho, diversão.
O Portal Xanxerê será um website que funcionará como centro de
informações para a cidade de Xanxerê – SC, é uma forma de divulgação para
empresas. Oferecendo um serviço gratuito para pequenas e médias empresas que
pretendem criar o seu primeiro panfleto virtual, o portal Xanxerê tem também o
intuito de atender pessoas e empresas que não possuem recursos financeiros
suficientes para divulgar a sua empresa na internet.
O portal terá aspecto profissional seguindo os conceitos básicos do design
como usabilidade, aproximação, contraste, alinhamento, dentre outros.
Devido à grande quantidade de informações do portal Xanxerê, serão
utilizadas ferramentas de gerenciamento de conteúdo, o sistema de gerenciamento
trabalhado neste projeto serão definidos por níveis hierárquicos, com isso o gerente
máster poderá retirar ou adicionar informações aonde todos os usuários poderão ter
acesso os demais administradores apenas terão a opção de inserir informações do
seu setor ou do seu panfleto digital, os sistemas de gerenciamento aqui
apresentados no projeto tem a função de facilitar a manutenção do portal e diminuir
custos para o usuário do panfleto digital.
1.1 TEMA
Criação de um portal de internet para auxiliar empresas da cidade de Xanxerê
- SC no seu primeiro WebSite.
12
1.2 PROBLEMA
Como fazer com que empresas de pequeno e médio porte tenham seu
primeiro website sem custos, ou a um custo relativamente baixo.
1.3 OBJETIVOS
1.3.1 Objetivos Gerais
Desenvolvimento do layout para o portal Xanxerê para oferecer a primeira
Home Page sem custos, para promover os produtos e serviços oferecidos pelas
empresas da cidade de Xanxerê - SC, na internet.
1.3.2 Objetivos Específicos
•
Pesquisar o número de empresas na cidade X número de Websites.
•
Pesquisar como o Design Gráfico auxilia no desenvolvimento deste projeto.
•
Analisar a melhor escolha de cores e formas para o site.
•
Desenvolver o layout do portal e a Home Page para os usuários.
1.4 JUSTIFICATIVA
O inicio da internet se deu na década de 60 pela necessidade de
comunicação entre bases militares dos Estados Unidos, algumas décadas mais
tardes a comunicação via internet se tornou publica, com o passar dos anos alem de
ser uma ferramenta de comunicação a internet se tornou algo rentável e de fácil
acesso para a população.
13
De acordo com KOBAYACHI apud Cintia (2004) pg 32.
“A internet é a maior rede de computadores que existe. Ela conecta pessoas
de qualquer parte do planeta, bastando para isso um computador e uma
linha telefônica. Permite a troca de informações entre seus usuários e
também fornece todo o tipo de informação ”.
A necessidade do mercado atual é que empresas de pequeno e médio porte
possuam um segundo endereço, o virtual, esta nova tendência faz com que as
empresas que possuem uma Home Page saiam na frente, o intuito do primeiro
endereço virtual é que estas empresas tenham o primeiro contato com o cliente via
internet, a facilidade e a comodidade de comprar um produto ou verificar um serviço
faz com estas empresas tenham um diferencial competitivo, assim é possível
conhecer a empresa sem visualizá-la fisicamente.
Conforme USABILIDOIDO (2009)
Se na sociedade atual a visão é considerada o sentido mais importante, a
aparência de um website conta muito. Além de exibir com graça
informações, ela deve ser bonita e agradável. Há séculos artistas,
psicólogos, filósofos e designers estudaram quais recursos estão
disponíveis para atingir esse objetivo e como utilizá-los
A vantagem que a internet leva sobre as outras formas de anúncios, é que
pode ser acessado a qualquer hora e lugar, bastando apenas acesso a internet, uma
Home Page alem de ser uma forma de divulgação barata comparando com o grande
numero de acessos, também pode ser modificada sem maiores gastos e perca de
tempo, a grande vantagem de se ter uma Home Page é que o usuário poderá ter
acesso quantas vezes quiser e o melhor é que ele poderá visualizar o tempo que for
necessário, tornando assim um elo de comunicação com o usuário e fortalecendo a
venda de produtos ou serviços.
1.5 ESTRUTURA DO TRABALHO
Com o decorrer da leitura deste projeto, serão apresentados todos os tópicos
que demonstram os passos de estudo do projeto, levando assim a um entendimento
de como o projeto foi realizado.
O trabalho aqui apresentado refere se a criação do Layout da pagina Portal
Xanxerê, para o desenvolvimento do trabalho foi dividido em 4 capítulos,
14
No capitulo 01 será apresentado a introdução, problemas, objetivos e
justificativa.
No capitulo 02 conta os temas relevantes para o desenvolvimento deste projeto
ao apresentar como as Bases do Conhecimento, Design, Design Gráfico, Web
Design, Internet, Usabilidade, Direção do Olhar na tela do Computador, Percepção
Visual da Forma, Tipografia nas Paginas da Web, Cores e Imagens, Significado das
Cores, Nomenclatura das Imagens Digitais.
O capitulo 03 é explicado todo o processo utilizado para alcançar os objetivos do
projeto entre os conteúdos estudados então Desenvolvimento do Projeto,
Metodologia do Projeto de Design, a Pré-Concepção, Concepção, e PósConcepção,
No capitulo 04 é o resultado do projeto, é nele que sera mostrado todas as
peças gráficas e a sua conceituação.
2 BASES DO CONHECIMENTO
2.1 Design
Segundo Ximenes (2000, p.309), "design, do idioma inglês, é de origem latina,
de designo, -as, -are, -atum, com os sentidos de designar, indicar, representar,
marcar, ordenar, dispor, regular”.
Há alguns anos, uma das dificuldades dos designers era explicar para nossas
mães o que exatamente nós fazemos, mas hoje a realidade já é outra.
Segundo Cesar Hirata (O valor do design Guia ADG) O que se espera de um
design são idéias e soluções – gráficas ou não, tangíveis ou não – para um
problema ou situação específica do cliente. Uma idéia que possa gerar retorno.
Hoje é cada vez mais visível a necessidade do design para o dia a dia, onde
disponibiliza-se do avanço da tecnologia para a criação ou atualização de produtos
e serviços, a verdade é que a velocidade com que as tecnologias atingiram o
profissional de design fez com que, mais e mais clientes e empresários em potencial
descobrissem as vantagens competitivas dos produtos que carregam um padrão
estético diferenciado para as vendas.
15
Segundo GUIA ADG BRASIL (2010)
O mercado de Design não é mais o mesmo, a atuação dos escritórios de
design tem mudado bastante nos últimos tempos, e essas mudanças
positivas é fruto do papel que o design tem exercido nas corporações e nos
seus produtos, as empresas estão percebendo que sua imagem tornou-se
um diferencial competitivo.
O design gráfico é uma área do design que vem adquirindo cada vez mais
importância crescente e maior valorização, devido ao fato de trabalhar com qualquer
meio ou tipo de informação visual. Um bom design é, hoje, condição primordial para
uma empresa se destacar e fazer sucesso no mercado.
Segundo (Guia ADG Brasil)
Arte não pode ser confundida com design, nem vice-versa, mas se for
somente uma questão de rotulo, nada impede que se recorra a subdivisões
semânticas entre design autoral e design corporativo.
2.1.1 Design Gráfico
O design gráfico tem o desafio de transformar uma idéia em um atributo
gráfico, que pode acelerar as vendas de um produto pelo design diferenciado de sua
embalagem, ou marca.
O Design Gráfico tem a capacidade de elaborar projetos gráficos com grande
qualidade, construção de manuais e sistemas de identidade visual para empresas e
outras instituições, também elabora projetos de embalagem, estratégias de
usabilidade,
ilustrações, desenvolvimento de marcas e soluções na área de
Webdesign.
Segundo Fontoura (2009)
O design é uma atividade interdisciplinar onde envolve diversos campos do
conhecimento, com isso o design é muito mais do que apenas a criação de
uma marca ou de uma embalagem, mas sim é um profissional que tem o
intuito de mexer com o emocional dos consumidores com os seus projetos.
16
As imagens gráficas são mais do que ilustrações e descrição de coisas vistas,
são signos que tem o sentido amplo e especifico de comunicar o seu publico alvo,
com isso o papel do design esta sendo cumprido, pois o fator primordial do design é
a solução de problemas.
Para Holis (2000, p. 11):
A mensagem do design atende as necessidades do cliente que está
pagando por ela. Embora sua forma possa ser determinada ou modificada
pelas preferências estéticas do designer, a mensagem precisa ser colocada
numa linguagem que o público-alvo reconheça e entenda.
O design está inserido em um mundo a onde existem consumidores exigentes
e que necessitam de soluções e alternativas para resolveram problemas do
cotidiano, para o designer conseguir sanar as necessidades do consumidor ele deve
analisar o seu público-alvo deve ir a fundo ao universo deste público e assim ele
poderá projetar soluções para o público a qual o projeto é destinado.
Conforme (VILLAS-BOAS, 2000, p 26)
Assim o design gráfico não é a simples diagramação de uma pagina,
embora a diagramação possa ser uma das ferramentas de trabalho do
designer. [...] Um projeto de design gráfico é um conjunto de elementos
visuais.
O design gráfico tem como principio passar informação através de elementos
gráficos, a forma como o design ira fazer esta comunicação depende muito do
projeto podendo ser com imagens, cores ou textos.
2.2 WEB DESIGN
De acordo com MARIA LAURA MARTINEZ (2000)
A web foi criada em 1990, com a invenção da linguagem HTML por Tim
Berners Lee, no Laboratório CERN, na Suíça, em 1993 surgiu o primeiro browser
para a utilização da linguagem HTML, o Mosaic.
17
De acordo com KOBAYACHI (2004),
“A internet é a maior rede de computadores que existe. Ela conecta pessoas
de qualquer parte do planeta, bastando para isso um computador e uma
linha telefônica. Permite a troca de informações entre esses usuários”.
A Internet é uma rede de computadores a onde estes computadores se
comunicam entre si, a comunicação e a amostragem de produtos ou serviços na
internet só se dá pelo acesso a uma Home Page, para que todo o processo de
comunicação entre os computadores tenha uma qualidade é necessário a
intervenção do Web Design. Um Website se caracteriza por ser um sistema
interativo, um sistema interativo é considerado eficaz quando possibilita que os
usuários atinjam seus objetivos, para toda essa navegação e acessibilidade
acontecer é fundamental a participação do Webdesigner, ele é responsável por todo
o estudo da usabilidade da tipografia e das cores que o site ira exibir.
Conforme NAHR (2007)
O Webdesigner é um fragmento do design [... ] o designer que faz web é
este profissional que tem que aprender tudo; tipografia, fotografia,
semiótica, gestalt, matemática, ótica, percepção, comportamento humano
etc. Sem isso ele não consegue fazer Web.
Quando falamos de Webdesigner, podemos dizer que se trata da aplicação
da área do Design Gráfico com o foco na criação de Websites, este profissional é o
único que tem a capacidade de entender e desenvolver um projeto para Web, pois a
criação de apenas um layout para uma pagina é simples qualquer design pode fazer,
mas a criação de um layout pensando no usuário faz com que o trabalho se torne
muito mais eficaz e trazendo maiores resultados para o cliente.
18
2.3 INTERNET
Conforme RNP (2010)
Até recentemente, no Brasil, o acesso à Internet era restrito a professores,
estudantes e funcionários de universidades, a partir de 1995, surgiu à
oportunidade para que usuários fora das instituições acadêmicas também
obtivessem acesso à Internet, hoje são 349 milhões de usuários e é a maior
rede mundial de comunicação.
Com o constante crescimento da internet no Brasil e a facilidade de acesso a
redes de computador, o Brasil se destaca pelo numero de usuários da rede, mas o
Brasil ainda tem uma qualidade de sinal da internet muito baixa comparando com
países subdesenvolvidos, mesmo assim temos vários Web Designers que se
destacam pelo mundo, com a grande qualidade na criação de suas Home Page.
Conforme RNP (2010)
O Brasil ocupa o segundo lugar na América Latina em termos de proporção
da população com acesso à Internet, perdendo para o Uruguai com 9%. A
taxa brasileira é inferior à média mundial, que, segundo dados de novembro
de 2000, é de 6,71% (407,1 milhões). Nos Estados Unidos, o país com a
maior proporção de pessoas plugadas à Internet, 55,83% da população tem
acesso à rede.
No Brasil o processo de evolução da internet passou de uma espécie de
brinquedo ou moda para um negócio rentável do dia para a noite, a grande procura
por um endereço virtual se da pela eficácia de informações postas em endereços
virtuais (sites), como o Brasil é o segundo pais da America Latina no acesso da
internet, o mercado virtual vem crescendo constantemente, mas como todo
crescimento tem uma regularização foram criados normas para identificar cada pais
no meio virtual.
Conforme RNP (2010)
Mais um pouco da estrutura da Internet pode ser visualizada pela forma dos
endereços de e-mails. Por exemplo, o endereço hipotético
abece@instituição.gov.br (a explicação vale também para sites, como
www.abece.instituição.gov.br), apresenta uma nova hierarquia. A
19
terminação "br" refere-se ao Brasil (na França a terminação é "fr", etc.) e é
chamada domínio de primeiro nível. Esse domínio subdivide-se em vários
outros, como "gov" (referente a endereços do governo), "edu" (criado no fim
de 2000, referente a endereços de instituições educacionais), "com"
(endereços comerciais), etc. Cada um desses subdividem-se ainda em
vários outros (chamados agora simplesmente de "domínios"), que
correspondem cada um a uma instituição. Por exemplo, no site
www.mc.gov.br, o "mc" indica Ministério das Comunicações.
2.4 USABILIDADE
Segundo MORAES (2002)
“A questão fundamental da usabilidade é que o produto seja fácil de usar.
Um sistema deve oferecer sua funcionalidade de tal maneira que o usuário
para o qual foi planejado seja capaz de controlá-lo e utilizá-lo sem
constrangimentos demasiados sobre suas capacidades e habilidades”.
Usabilidade é um termo utilizado para definir a facilidade com que as pessoas
posam usar uma ferramenta a fim de realizar uma tarefa específica, a usabilidade
está relacionada aos estudos de Ergonomia e a Interação Humano-computador, isso
normalmente se refere à simplicidade e facilidade com que uma pessoa possa
utilizar e interagir com a interface, permitindo uma utilização eficiente e sem
apresentar erros.
Conforme Bergamo (2000) O foco da usabilidade é a facilidade de uso de um
produto. Ela é determinante para o desenvolvimento eficaz de softwares e de
websites [...]
Para analisa a desenvoltura de um Website é necessário fazer teste de
usabilidade, uma das técnicas utilizadas para garantir um bom projeto centrado no
usuário, ou UCD (User-Centered Design), tem como principal foco criar um elo do
usuário com as tarefas que deveram ser realizadas em um determinado ambiente.
Nielsen (2007)
Realizou testes de usabilidade de sites na web baseados na medição de
parâmetros distintos. O primeiro estudou como se lê na web e, o segundo,
como se recupera a informação e a satisfação/atitude do usuário em relação
ao site. [...]
20
Além dos testes com usuários, existe outra forma de avaliação da usabilidade,
a análise heurística, na análise heurística, é um grupo de especialistas a onde eles
procuram os pontos em que a interface vai contra os princípios de usabilidade, o
resultado da avaliação heurística gera uma lista dos problemas de usabilidade na
interface, alguns dos princípios de usabilidade descritos por Nielsen.
Conforme NIELSEN (2002)
Facilidade de aprendizado – o sistema deve ser fácil de aprender de tal
forma que o usuário consiga rapidamente explorá-lo e realizar suas tarefas
com ele.
Eficiência de uso – o sistema deve ser eficiente a tal ponto de permitir que o
usuário, tendo aprendido a interagir com ele, atinja níveis altos de
produtividade na realização de suas tarefas
Facilidade de memorização – após um certo período sem utilizá-lo o usuário
não freqüente é capaz de retornar ao sistema e realizar suas tarefas sem a
necessidade de reaprender como interagir com ele.
Baixa taxa de erros – em um sistema com baixa taxa de erros, o usuário é
capaz de realizar tarefas sem maiores transtornos, recuperando erros, caso
ocorram.
Satisfação subjetiva – o usuário considera agradável a interação com o
sistema e se sente subjetivamente satisfeito com ele.
2.4.1 Direção do olhar na tela do Computador
Para um melhor entendimento da direção do olhar na tela do computador é
necessário entender as formas de estrutura que podem ser utilizadas para a
construção de um Web Site, a estrutura de um Web Site é montada conforme a
experiência que o usuário possui com o computador, e a faixa etária de idade do
usuário.
Conforme Lynch e Horton (2001) três estruturas básicas podem ser usadas
para a construção de um web site: seqüencial, hierárquica e em forma de teia.
A estrutura seqüencial tem a característica linear, isso quer dizer que a
amostragem das paginas é em ordem lógica, a onde as paginas se mostra em
progressão, este tipo de estrutura é mais apropriada para cursos de treinamento a
onde os estudantes desenvolvem um roteiro previsível de leitura, esta estrutura é
mais utilizada para pessoas completamente leigas e que não tenham o hábito de
utilizar o computador e a internet.
21
Desenho 01: Exemplo de estrutura seqüencial
Fonte: STANQUE 2008
A estrutura hierárquica parte de uma pagina inicial denominada home, a
leitura da estrutura hierárquica é por diferentes seções, paginas que abrem
caminhos para outras paginas subordinadas, caracterizado como um esquema
ramificado, a estrutura hierárquica permite grandes níveis de organização é
excelente para grandes volumes de informações. Utilizada mais para usuários já
mais experientes, que tenham uma maior afinidade com internet e informática.
Desenho 02: Exemplo de estrutura hierárquica
Fonte: STANQUE 2008
A estrutura em forma de teia descreve uma navegação mais complexas,
impondo uma combinação de varias rotas possíveis essa navegação é pouco
previsível, com muitos roteiros para o mesmo ponto, é mais utilizadas para sistemas
extremamente complexos e com muito conteúdo, essa estrutura é mais adequada
para usuários com maior experiência com o computador e a internet.
22
Desenho 03: Exemplo de estrutura formato teia
Fonte: STANQUE 2008
Conforme o tipo de layout apresentado ao usuário obtém dois tipos de leitura
em uma pagina, leitura por pontos isolados ou seguindo o formato semelhante a um
“F”, o tipo de leitura de uma pagina tem a vantagem de auxiliar na organização das
informações da pagina.
Segundo Shrestha e Lenz (2007) a partir da experiência de rastreamento da
movimentação do olhar pode ser constatado que os leitores desse tipo de
organização visual fixam a visão seqüencialmente em cada um dos segmentos de
informação chamadas de “Bloco”
Desenho 04: Exame quantitativo da fixação do olhar
Fonte: SHERESTHA E LENZ 2007
No desenho 04 cada circulo mais claro indica a duração da fixação do olhar,
os círculos maiores e mais claros indicam durações maiores do olhar.
23
Quando uma pagina não mostra blocos de informações à leitura é semelhante
a um “F” como mostra Nielsen (2006) em seus testes de rastreamento do olhar.
Desenho 05: Padrão F de leitura de paginas nas quais o texto predomina
Fonte: NIELSEN 2006
2.4.2 Percepção Visual da Forma – Gestalt
Segundo FILHO - GESTALT (2000) ao abordar a Gestalt, o mesmo afirma
que a gestalt é a arte que trabalha os princípios da pregnância da forma. Ou seja,
na formação de imagens.
Gestalt é a arte do equilíbrio da clareza e da harmonia visual das formas,
estes fatores se tornam uma necessidade indispensável para o ser humano, sem
isso o individuo que vê uma imagem não o consegue distinguir, o objetivo do
designer é desenvolver objetos que satisfaçam as necessidade do ser humano
baseado na arte da gestalt.
2.4.3 Unidade
Segundo FILHO - GESTALT (2000)
Uma unidade pode ser consubstanciada num único elemento, que se
encerra em si mesmo, ou como parte de um todo. Ainda, numa
conceituação mais ampla, pode ser entendida como o conjunto de mais de
um elemento, configurando o todo, propriamente dito, ou seja, o próprio
objeto.
24
Desenho 06: Exemplo de uma imagem com unidade
Fonte: FILHO 2000 (GESTALT)
Uma unidade pode ser um único elemento ou uma parte de um todo, também
pode ser um conjunto de elementos figurativos, as unidades podem ser percebidas
com elementos de pontos, linhas planos, volumes cores, sombras e brilho.
2.4.4 Segregação
que a segregação significa a capacidade perceptiva de separar, identificar,
evidenciar ou destacar unidades formais em um todo compositivo ou em partes
deste todo.
Segregação significa a capacidade de separar e identificar formas em uma
imagem qualquer.
Foto 01: Exemplo de uma imagem com segregação.
25
2.4.5 Fechamento
que o fechamento é fator importante para a formação de unidade. As forças de
organização da forma dirigem-se espontaneamente para uma ordem espacial que
tende para a formação de unidades em todos fechados.
Fechamento é uma sensação visual que tende a dar continuidade através de
linhas e traços em uma estrutura pré-determinada, ou seja, pelo agrupamento de
alguns elementos de tal maneira que constitui uma imagem.
Desenho 07: Exemplo de uma imagem com fechamento.
2.4.6 Continuidade
que a continuidade é a impressão visual de como as partes se sucedem através da
organização perceptiva da forma de modo coerente, sem quebras ou interrupções
na sua trajetória ou na sua fluidez visual.
Continuidade é o alinhamento de formas simétricas ou assimétricas colocadas
em determinado espaço a continuidade alem de ser percebida pela forma também
pode ser percebida pela continuidade de cores.
26
Foto 02: Exemplo de uma imagem com continuidade.
2.4.7 Proximidade
que elementos ópticos próximos uns dos outros tendem a ser vistos juntos e, por
conseguinte, a constituírem um todo ou unidades dentro do todo.
Proximidade é um elemento gráfico próximo um ao outro eles podem ser
vistos separados ou em conjunto formando uma unidade toda, a maior característica
da proximidade é a igualdade de formas podendo apenas variar a cor.
Foto 03: Exemplo de uma imagem com proximidade.
Fonte: Filho 2000 (GESTALT)
27
2.4.8 Tipografia nas Páginas da Web
Conforme STANQUE pg 112 (2008)
Em função da heterogeneidade de plataformas informáticas, a navegação
da Internet com uso do HTML limita a escolha das fontes tipográficas, a
composição tipográfica nos Web sites é configurada basicamente com três
tipos de fontes: com serifas, sem serifas e monoespaçadas.
Serifas são pequenos traços nas pontas de cada letra ou outros enfeites,
fontes monoespaçadas são aquelas que ocupam sempre as mesmas dimensões, as
fontes monoespaçadas são bem similares a da máquina de datilografar.
Fonte Serifada
Fonte sem Serifa
Fonte Monoespaçadas
Georgia
Arial Black
Comic Sans MS
Fluxograma 01 três estilos de fontes
Fonte: STANQUE (2008)
•
Utilize um tamanho de fonte comum com 10 ou mais pontos.
•
Evite fundos visualmente poluídos.
•
Utilize texto preto sobre fundos brancos.
•
Mantenha o mínimo possível de texto gráfico, texto com todas as
letras em maiúsculas e texto em movimento.
Elementos artísticos como tipografia e esquemas de cor desempenham um
papel importante para que o Website cause uma boa impressão, o Webdesign tem o
objetivo de comunicar e a escolha da tipografia é um fator fundamental para que isso
ocorra, o fato de comunicar não é apenas a parte da tipografia, mas também é um
aglomerado de detalhes que fazem que o Website se torne algo agradável e útil aos
olhos dos usuários.
Nem todas as fontes são criadas da mesma maneira. Ao escolher uma fonte
para seu Web site, certifique-se de optar por aquelas disponíveis nos
computadores e navegadores dos seus clientes. Caso contrario, os
sistemas deles talvez utilizem uma face de tipos padrão que não está
otimizada para visualização on-line, e o site não aparecerá como
pretendido.
28
As fontes pré-instaladas na maioria dos navegadores são:
Nome da Fonte
Família de Fontes genérica
Arial
Sem serifas
Arial Black
Sem serifas
Comic Sans MS
Monoespaçadas
Monoespaçadas
Courier New
Com serifas
Georgia
Sem serifas
Impact
Com serifas
Times New Roman
Sem serifas
Trebuchet MS
Sem serifas
Verdana
Fluxograma 02 fontes pré-instalada na maioria dos computadores
Fonte: NIELSEN (2007)
Nome da Fonte
Arial
Legibilidade on-line
Legibilidade
em
Características
tamanho Moderna,
limpa,
básica,
sem
razoável. Boa na fonte de 10 firulas. Geralmente a preferida por
pessoas de todas as idades.
pontos ou acima
Comic Sans MS
Fonte decorativa, mas difícil de Amigável,
juvenil,
divertido
e
ler on-line, mesmo em tamanhos informal. Não apropriada para Web
sites mais sérios ou profissionais.
grandes.
Georgia
A
melhor
fonte
com
serifa De aparência tradicional, mas com
projetada para leitura on-line. um visual mais moderno e legível
Geralmente boa em tamanhos de que
fontes de 10 pontos e acima.
Times
New
Roman.
Boa
alternativa para fontes serifadas
on-line.
Impact
Geralmente
impressão.
para
utilizada
Não
recomendada conteúdo.
visualização
Legibilidade
ruim
para Escura. Não adequada a blocos de
Pode
ser
utilizada
on-line. algumas vezes para títulos curtos.
mesmo
em
tamanhos grandes.
Times New Roman
Bom para materiais impressos. A De
aparência
legibilidade na tela rapidamente recomendada
tradicional.
se
você
Não
quiser
29
diminui em tamanhos menores. parecer profissional. Geralmente
Somente boa no corpo 12 ou não é a preferida pela audiência de
superior.
Trebuchet MS
qualquer idéia.
Legível em tamanhos razoáveis. Moderna, simples, aguçada.
Boa na fonte de 10 pontos ou
acima.
Verdana
A fonte on-line mais legível, Profissional, simples e moderna. A
mesmo em texto pequeno.
fonte recomendada para uso no
corpo
de
legibilidade
texto,
é
em
que
a
fundamental.
Altamente cotada na preferência
dos usuários.
Fluxograma 03 fonte pré-instaladas e suas características
2.4.9 Cores e Imagens
As cores estão ocupando cada vez mais espaço em nosso cotidiano, não
mais apenas para destacar textos, mas se propondo a criar um elo de conversação
com o leitor. Ao longo dos anos foi surpreendente o avanço das imagens sobre a
mídia impressa, nos livros, nas revistas e nos jornais.
Segundo FARINA (2000) Color, dizia o latino, na antiga Roma, para expressar
o que hoje nós chamamos “cor”.
Quando se refere ao período da Renascença a onde teve uma mudança da
era da arte para a era da imagem impressa, as imagens e as cores prestavam ao
culto ás religiões e as suas praticas, a historia do uso das imagens e da cor tem
raízes muito profundas e complexas, sempre associadas ás praticas culturais e
muito pouco ao processo comunicativo das imagens.
Segundo Hollis (2001) A cor não é apenas um elemento decorativo ou
estético, é o fundamento da expressão, está ligado á expressão de valores sensuais
e espirituais. “O olho do seu espírito avistava nas pegadas o próprio animal”.
30
2.4.10 Significado das Cores
O impacto que a cor traz para o individuo que a vê esta intimamente ligada ao
uso que se fará do elemento visto, a utilização das cores para descriminar uma área
está ligado as exigências de cada setor, como por exemplo, a Educação, a
prevenção de acidente, Decoração, Medicina, produtividade, moda, trânsito e outras.
Conforme FARINA (2000) Cada campo utiliza uma linguagem especifica que
explicita seus pontos de vista e por meio da qual procura atingir os objetivos
propostos.
O estudo e o entendimento de cada cor para o desenvolvimento de um
projeto gráfico é fundamental, o estudo das cores e a devida aplicação em
embalagens faz com que o produto se torne mais chamativo, passando para o
cliente maiores informações e criando um vinculo de comunicação visual para com o
cliente.
Conforme FARINA (2000) Analisar a cor apenas em função da Comunicação,
focalizando as leis que regem o seu domínio, para que ela se torne um instrumento
eficaz nas mãos dos que a manejam.
Toda cor possui uma ação e um significado, mas algumas cores existem um
peso psicológico na sua preferência de uma ou outra cor. A cor sempre fez parte da
vida do homem, sempre houve o azul do céu, o verde das árvores, o vermelho do
pôr do Sol, mas as pessoas que utilizam as cores, nunca estudaram a fundo o real
significado de cada cor.
Conforme FARINA (2000)
BRANCO
•
Associação material: batismo, casamento, cisne, lírio, primeira comunhão, neve, nuvens em
tempo claro, areia clara.
•
Associação afetiva: ordem, simplicidade, limpeza, bem, pensamento, juventude, otimismo,
piedade, paz, pureza, inocência, dignidade, afirmação, modéstia, deleite, despertar,
infância, alma, harmonia, estabilidade, divindade.
•
A palavra branco nos vem do germânico blank (brilhante). Simboliza a luz, e nunca é
considerado cor, pois de fato não é. Se para os ocidentes simboliza a vida e o bem, para os
31
orientes é a morte, o fim, o nada. Representa também, para nós, ocidentais, o vestíbulo do
fim, isto é o medo ou representa um espaço (entrelinhas).
PRETO
•
Associação material: sujeira, sombra, enterro, noite, carvão, fumaça, condolência, morte,
fim, coisas escondidas.
•
Associação afetiva: mal, miséria, pessimismo, sordidez, tristeza, frigedez, desgraça, dor,
temor, negação, melancolia, opressão, angústia, renuncia, intriga.
•
Deriva do latim Níger (escuro, preto, negro). Nós utilizamos o vocábulo “preto”, cuja
etimologia é controvertida. É expressivo e angustiante ao mesmo tempo. É alegre quando
combinado com certas cores. Ás vezes tem conotação de nobreza, seriedade.
CINZA
•
Associação material: pó , chuva, ratos, neblina, máquinas, mar sob tempestade.
•
Associação afetiva: tédio, tristeza, decadência, velhice, desanimo, seriedade, sabedoria,
passado, finura, pena, aborrecimento, carência vital.
•
Do latim cinicia (cinza) ou do germânico gris (gris, cinza); nós utilizamos o termo de origem
latina. Simboliza a posição intermédia entre a luz e a sombra. Não interfere junto ás cores
em geral.
VERMELHO
•
Associação material: rubi, cereja, guerra, lugar, sinal de parada, perigo, Cida, sol, fogo,
chama, sangue, combate, lábios, mulher, feridas, rochas vermelhas, conquistas,
masculinidade.
•
Associação afetiva: dinamismo, força, baixeza, energia, revolta, movimento, barbarismo,
coragem, furor, esplendor, intensidade, paixão, vulgaridade, poderio, vigor, glória, calor,
violência, dureza, excitação, ira, interdição, emoção, ação, agressividade, alegria
comunicativa, extroversão.
•
Vermelho nos vem do latim vermiculus [verme, inseto (a cochonilha)]. Desta se extrai uma
substância escarlate, o carmim, e chamamos a cor de carmesim [do árabe: qirmezi
(vermelho bem Vico ou escarlate)]. Simboliza uma cor de aproximação, de encontro.
LARANJA
•
Associação material: outono, laranja, fogo, pôr do sol, luz, chama, calor, festa, perigo,
aurora, raios solares, robustez.
•
Associação afetiva: força, luminosidade, dureza, euforia, energia, alegria, advertência,
tentação, prazer, sendo de humor.
•
Laranja origina-se do persa narang, através do árabe nananja. Simboliza o flamejar do
fogo.
AMARELO
•
Associação material: flores grandes, terra argilosa, palha, luz, topázio, verão, limão, chinês,
calor de luz solar.
32
•
Associação afetiva: iluminação, conforto, alerta, gozo, ciúme, orgulho, esperança,
idealismo, egoísmo, inveja, ódio, adolescência, espontaneidade, variabilidade, euforia,
originalidade, expectativa.
•
Amarelo deriva do latim amaryllis. Simboliza a cor da luz irradiante em todas as direções.
VERDE
•
Associação material: umidade, frescor, diafaneidade, primavera, bosque, águas claras,
folhagem, tapete de jogos, mar, verão, planície, natureza.
•
Associação afetiva: adolescência, bem-estar, paz, saúde, ideal, abundância, tranqüilidade,
segurança, natureza, equilíbrio, esperança, serenidade, juventude, suavidade, crença,
firmeza, coragem, desejo, descanso, liberdade, tolerância, ciúme.
•
Verde vem do latim viridis . Simboliza a faixa harmoniosa que se interpõe entre o céu e o
sol. Cor reservada e de paz repousante. Cor que favorece o desencadeamento de paixões.
VERDE AZULADO
•
Associação afetiva: persistência, arrogância, obstinação, amor próprio, elasticidade da
vontade.
AZUL
•
Associação material: montanhas longínquas, frio, mar, céu, gelo, feminilidade, águas
tranqüilas.
•
Associação afetiva: espaço, viagem, verdade, sentido, afeto, intelectualidade, paz,
advertência, precaução, serenidade, infinito, meditação, confiança, amizade, amor,
fidelidade, sentimento profundo.
•
Azul tem origem no árabe e no persa lázurd, por lazaward (azul). É a cor do céu sem
nuvens. Dá sensação do movimento para o infinito.
ROXO
•
Associação material: noite, janela, igreja, aurora, sonho, mar profundo.
•
Associação afetiva: fantasia, mistério, profundidade, eletricidade, dignidade, justiça,
egoísmo, grandeza, misticismo, espiritualidade, delicadeza, calma.
•
Roxo nos vem do latim russeus (vermelho-carregado). Cor que possui um forte poder
microbicida.
MARROM
•
Associação material: terra, águas lamacentas, outono, doença, sensualidade, desconforto.
•
Associação afetiva: pesar, melancolia, resistência, vigor.
•
Marrom, do francês marron (castanho).
PÚRPURA
•
Associação material: vidência, agressão, furto, miséria.
•
Associação afetiva: engano, calma, dignidade, autocontrole, estima, valor.
•
Púrpura deriva do latim púrpura. Simboliza a dignidade real, cardinalícia.
33
VIOLETA
•
Associação afetiva: engano, miséria, calma, dignidade, auto-controle, violência, furto,
agressão.
•
Violeta é diminutivo do provençal antigo viula (viola). Essa cor possui bom poder sonífero.
VERMELHO ALARANJADO
•
Associação material: ofensa, agressão, competição, operacionalidade, locomoção.
•
Associação afetiva: desejo, excitabilidade, dominação, sexualidade.
Fluxograma 04 Cores e simbologia das cores
Fonte: FARINA (2000)
2.4.11 Nomenclatura das Imagens Digitais
Com a evolução da tecnologia as cores sofreram uma divisão por categorias,
esta divisão foi necessária para podemos aplicar as cores em diversos meio de
comunicação como o impresso e o digital, O RGB é a abreviatura do sistema de
cores aditivas formado por Vermelho (Red), Verde (Green) e Azul (Blue) o RGB cria
uma paleta de mais de 16,5 milhões de cores. O propósito principal do sistema RGB
é a reprodução de cores em dispositivos eletrônicos como monitores de TV e
computador, entre centenas de extensões de arquivos, temos aqui os mais
utilizados.
Formato é utilizado na criação de gráficos como logotipos e ilustrações, os
GIFs são aceitos por todos os navegadores. Eles são pequenos e fazem coisas que
muitos outros formatos de arquivos não fazem como animação e transparência.
O formato de arquivos JPEG foi desenvolvido especificamente para imagens
de estilo fotográfico. Ele observa áreas com mudanças sutis de tons e cores, tem a
opção de oferecer a melhor compactação quando encontra esse tipo de criação de
imagens. Entretanto ele não compacta bem cores sólidas.
PNG é um método de compactação sem perdas o que significa que não há
perda de qualidade quando aplicado a imagens. Diferentemente do GIF ou JPEG o
PNG pode ser armazenado com diversas profundidades de bit. O PNG também tem
um grande número de métodos de filtragem distintos tornando a otimização de
imagens PNG mais trabalhosa.
34
3 DESENVOLVIMENTO DO PROJETO DE DESIGN
A metodologia do projeto é um instrumento que auxilia o design a realizar o
desenho do projeto, a metodologia não procura soluções, mas contribui na escolha
das melhores alternativas para o projeto, a metodologia faz com que as informações
adquiridas sobre o projeto criem um vinculo entre si, para que o resultado do projeto
seja o mais coerente possível. Para que o resultado do projeto seja coerente é
necessário que a metodologia seja, clara e objetiva, possibilitando ao profissional a
total compreensão dos seus objetivos, proporcionando segurança e autonomia para
o profissional tomar decisões importantes e buscar soluções adequadas.
Segundo Munari (1998. P 10) O método de projeto não é mais do que uma
série de operações necessárias, dispostas em ordem lógica, ditada pela experiência.
Seu objetivo é o de atingir o melhor resultado com o menor esforço.
3.1 Apresentando a Metodologia Projetual
A metodologia projetual é de suma importância para o design, ficaria inviável
o desenvolvimento de um projeto sem a metodologia, pois é com a metodologia que
se delimita e orienta o profissional para o melhor resultado, sem que ele cometa
erros. A metodologia proposta para este projeto foi baseada a partir da metodologia
desenvolvida por Flavio Anthero dos Santos, a metodologia conhecida como MD3E
– Método de Desdobramento em 3 etapas, foi escolhida esta metodologia porque é
um método aberto, com isso ele se molda conforme as necessidades do usuário, e o
projeto trabalha da mesma forma, que é um portal de internet que se molda
conforme as necessidades do usuário. O MD3E estabelece como etapa central a
definição do problema e a necessidade humana, que se pretende satisfazer com o
projeto, após essa etapa central do problema é dividido em três partes para facilitar
a sua solução, isso acontece através dos desdobramentos que são realizados, é
importante salientar que o MD3E é um método aberto aonde pode ser moldado
conforme as necessidades, mas mesmo assim ele define algumas etapas
obrigatórias.
35
Desenho 07 Etapa Central
Fonte: FLAVIO (2000)
A primeira etapa central e obrigatória é a definição do problema do projeto e a
sua relação com a necessidade humana a ser atendida, com isso o primeiro passo é
a definição do problema a ser resolvido e qual a necessidade humana que se
pretende satisfazer com o produto a ser projetado, uma vez definido o problema a
ser resolvido pode-se começar os desdobramentos subseqüentes.
Desenho 08 Etapas Basicas
A segunda parte é desdobrada em 3 etapas básicas, pré-concepção, a
concepção, e a pós-concepção, assim todo o projeto deve passar por essas três
etapas, desta forma na pré-concepção serão definidos todas as atividades que
precisam ser desenvolvidas antes da geração de alternativas, na concepção é toda
36
a parte aonde será gerado alternativas para o projeto, na pós-concepção é todas as
atividades a serem desenvolvidas após a definição da melhor solução para o projeto.
Desenho 08 Gerenciamento e Documentação
A partir dessas três etapas básicas o método é desdobrado em varias
atividades obrigatório a serem desenvolvidas até que o projeto seja concluído, neste
momento é definida a atividade que orienta todo o trabalho, o gerenciamento e a
documentação, essa atividade aparece logo após as três etapas básicas, para
mostrar que o gerenciamento do projeto e sua documentação devem ser
preocupações constantes para o projeto.
Desenho 09 Desdobramentos Mínimos
37
Logo após o gerenciamento e a documentação do projeto são feitas 3
desdobramentos mínimos recomendados para cada etapa são elas.
•
Pré-Concepção
o Planejamento do projeto
o Analise do problema
o Atributos do produto
•
Concepção
o Caminhos criativos
o Geração de alternativas
o Seleção e adequação
•
Pós-Concepção
o Subsistemas e/componentes
o Processos produtivos
o Mercado
Todas essas etapas obrigatórias podem ser alteradas conforme as
necessidades do projeto, os desdobramentos subseqüentes são de acordo com as
necessidades do projeto e do profissional, levanto a finalização do projeto.
38
Desenho 10 Desdobramentos Auxiliares
39
3.2 Estrutura Radial
Desenho 11 Estrutura Radial – Portal Xanxerê
Fonte: O Autor
40
3.2.1 Pré-Concepção
Objetivo do Projeto:
Será desenvolvido um portal para oferecer o primeiro website sem custos,
para promover os produtos e serviços oferecidos pelas empresas da cidade de
Xanxerê - SC, na internet.
Cronograma:
Será desenvolvido um cronograma para nortear o andamento do projeto,
neste cronograma constara todo o passo a passo da metodologia.
•
Concepção: de 15/10/2010 á 01/11/2010
Quadro Conceitual, Painel Semântico, Normas de Usabilidade para
Orientação na geração de Alternativa, Geração de Alternativa, Seleção de
Alternativa, Adequação de Alternativa.
•
Pós-Concepção de 01/11/2010 á 22/11/2010
Registro do Domínio, Registro de E-mail, Registro nos Sistemas de Buscas,
Registro da Patente do Layout, Finalização de todos os Layouts, Fechamento
de Arquivos, Checklist do Portal.
Tecnologias:
Será selecionado os sistemas operacionais para o desenvolvimento do
projeto, também mencionarei qual Hardware esses sistema operacionais iram rodar.
•
Hardware
Notebook Sony Vaio, centrino 1,5, HD 60 GB, 256 Memória.
Impressora, Hp Laser Jet P1102.
Câmera Digital Sony Alpa 100, memória 4 GB
•
Software
Sistema Operacional Windows XP 2005, Servisse Pack 2.
41
Subsistema Fireworks CS3 Adobe.
Subsistema Foto shop CS3 Adobe.
CorelDraw X4.
Analise de Dados – Empresas X Sites
Foi restituído uma analise de campo para levantar informações das empresas
de Xanxerê, e verificar quantas
qua
empresas possuem site, estas informações foram
retiradas do site da ACIX.
ACIX
100
90
80
70
60
Posuem Site
50
Não Posuem Site
40
Posuem E-mail
30
Não Posuem E-mail
20
10
0
Empresas da
Cidade de
Xanxerê - SC
Gráfico 01 Empresas de Xanxerê e seu Perfil com a Internet
Fonte: O Autor
Com esta analise pode-se
pode
ver o baixo índice de empresas que possuem Web
Site, assim pode-se já ter uma perspectiva da necessidade de um portal como o
portal Xanxerê, a onde disponibiliza
disponi
o primeiro endereço virtual para estas empresas
que não possuem um Web Site.
Site
42
Analise de Concorrentes:
Foi pesquisado e demonstrado os concorrentes diretos e indiretos do site,
como a estrutura do site do concorrente é criado, com isso delimito alguns
elementos associativos que todos os concorrentes possuem como formas estilos e
cores. Foi analisado as tendências que o mercado utiliza para a construção de sites,
baseado nos sites concorrentes, foi feito analise de 3 sites de concorentes.
Desenho 12 Concorrente Direto – Site Hagah
Fonte: HAGAH.COM.BR (2010)
Analise concorrente direto, site Hagah, estrutura da pagina tipo teia com
43
varias entradas e varias saídas de informações, layout limpo, separação de
conteúdo por blocos, sistema de buscas em local inadequado, retângulo superior
chamando mais a atenção do que a marca, a marca esta em um tamanho muito
pequeno, o patrocínio no topo do site da mais ênfase do que o menu, cores
fluorescente dando destaque, mas sem identificação de setores do site.
Desenho 13 Concorrente Indireto – Site tudosobrexanxerê
Fonte: TUDOSOBREXANXERE.COM.BR (2010)
44
Analise site TUDOSOBREXANXERÊ concorrente indireto, marca em uma
posição boa sistema de busca também, posição do menu e dos links principais
também em uma posição boa, separação de conteúdo em blocos, estrutura da
pagina no modelo teia, local de entrada de senha no canto superior direito
inadequado patrocínio no topo inadequado, pois o topo do site deve ser destinado
para a divulgação da empresa e não de um cliente, muitos patrocinadores dispostos
em vários setores da pagina , abaixo do menu um super anuncio, a onde poderia ter
um chamado para o site, tamanho da pagina muito grande ocasionando uma barra
de rolagem extensa também,cores claras em fundo claro causando ma legibilidade,
pagina muito complexa para um primeiro acesso.
45
Desenho 14 Concorrente Indireto – Site redeprincesa
Fonte: REDEPRINCESA.COM.BR (2010)
Analise do site REDEPRINCESA concorrente indireto estrutura do site tipo
teia, com varias entradas para o mesmo link, marca em um posição adequada,
sistema de buscas também, cores de acordo com as diretrizes de NIELSEN (2006),
conteúdo separada por blocos, cores contrastantes, separação do menu e do
conteúdo por cores, tipografia auxiliar não possui em todos os navegadores,
separação de conteúdo com migalhas de pão, separado por cores em cada setor do
site.
46
Amostragem do Checklist do Concorrente Direto Hagah
O labiutil é da UFSC é um sistema de analise da usabilidade em sistemas e
Web Sites, é um sistema com 194 perguntas com 18 diretrizes de usabilidade.
Nesse relatório será encontrado 18 opções respondidas do Checklist esta aplicada a
um concorrente direto site (Hagah).
Cada pergunta é especializado em um aspecto ou critério que determina a
ergonomia de uma interface homem-computador.
• Presteza
Verifica se o sistema informa e conduz o usuário durante a
interação
• Agrupamento por localização
Verifica se a distribuição espacial dos itens traduz as relações
entre as informações.
• Agrupamento por formato
Verifica os formatos dos itens como meio de transmitir
associações e diferenças.
• Feedback
Avalia a qualidade do feedback imediato às ações do usuário.
• Legibilidade
Verifica a legibilidade das informações apresentadas nas telas
do sistema.
• Concisão
Verifica o tamanho dos códigos e termos apresentados e
introduzidos no sistema.
• Ações Mínimas
Verifica a extensão dos diálogos estabelecidos para a
realização dos objetivos do usuário.
• Densidade Informacional
Avalia a densidade informacional das telas apresentadas pelo
sistema.
• Ações Explícitas
Verifica se é o usuário quem comanda explicitamente as
ações do sistema.
•
Controle do Usuário
Total de Questões: 17
Respondidas: 17
Questões Conformes: 8
Questões Não conformes: 4
Questões Não Aplicáveis: 5
Respondidas: 11
Respondidas: 17
Respondidas: 12
Respondidas: 27
Respondidas: 14
Respondidas: 5
Respondidas: 9
Respondidas: 4
Respondidas: 4
47
Avalia as possibilidades do usuário controlar o encadeamento
e a realização das ações.
• Flexibilidade
Verifica se o sistema permite personalizar as apresentações e
os diálogos.
• Experiência do Usuário
Avalia se usuários com diferentes níveis de experiência têm
iguais possibilidades de obter sucesso em seus objetivos.
• Proteção contra erros
Verifica se o sistema oferece as oportunidades para o usuário
prevenir eventuais erros.
• Mensagens de erro
Avalia a qualidade das mensagens de erro enviadas aos
usuários em dificuldades.
• Correção de erros
Verifica as facilidades oferecidas para que o usuário possa
corrigir os erros cometidos.
• Consistência
Avalia se é mantida uma coerência no projeto de códigos,
telas e diálogos com o usuário.
• Significados
Avalia se os códigos e denominações são claros e
significativos para os usuários do sistema.
• Compatibilidade
Verifica a compatibilidade do sistema com as expectativas e
necessidades do usuário em sua tarefa.
•
Laudo Final
Respondidas: 3
Respondidas: 6
Respondidas: 7
Respondidas: 9
Respondidas: 5
Respondidas: 11
Respondidas: 12
Respondidas: 21
Respondidas: 194
Questões Não conformes:45
Fluxograma 05 CheckList Site Hagah
Fonte: O autor
Gráfico Comparativo
Gráfico Comparativo da usabilidade nos sites dos concorrentes diretos e
Indiretos.
48
90
80
70
60
50
Questões Conforme
40
Questões não Conforme
30
Questões não Aplicadas
20
10
0
Hagah
Rede Princesa
Tudo Sobre
Xanxerê
Gráfico 02 Comparativo dos concorrentes indiretos
Fonte: O Autor
No gráfico 02 demonstra os índices de usabilidade aplicados nos sites dos
concorrentes diretos e indiretos, se destacando o site
site HAGAH como um site mais
bem adequado com as normas de usabilidade.
Fixação
ixação do Olho na tela do Computador:
Nesta etapa foi feito um estudo a onde a fixação do olho na tela do
computador,
ador, com esta delimitação podemos melhor posicionar elementos que sejam
prioridade na visualização para
pa o usuário.
Conforme LYNCH E HORTON (2004) Afirmam que, obviamente, as 30
polegadas quadradas da parte superior da tela do monitor compreendem a área
mais visível de uma interface, os 10 ou 12 centímetros superiores são a parte que
estará mais visível. Logo,
ogo, a posição dos elementos faz toda a diferença. Em
interfaces projetadas para oferecer uma navegação eficiente.
49
Desenho 15 Área Visível na tela do computador com resolução de 1024 x 768
Fonte: GOLDSMITH (2004)
De acordo com GOLDSMITH (2004), a exploração da interface gráfica digital
divide-se em 7 zonas de visualização. Primeiro o olhar direciona-se para o lado
superior esquerdo da tela. Depois, Movimenta-se da esquerda para a direita. Em
seguida, o olhar desce para a parte inferior esquerda da interface gráfica digital, e a
partir deste ponto, passa a explorar as extremidades da tela. Num primeiro
momento, explora a extremidade superior esquerda, depois explora a extremidade
superior direita. Então, o olhar dirige-se para a extremidade inferior esquerdo,
finalizando com um movimento na direção da extremidade inferior direita.
Desenho 16 Área aonde o olhar pode correr na tela
Ao desenvolver uma interface gráfica digital, deve-se dar grande importância
50
para as informações que estão contidas nestas áreas de prioridade.
Desenho 17 Áreas com níveis de prioridade
Estudo de Conteúdos:
O portal alem de oferecer um serviço gratuito do primeiro endereço digital
para as empresas de Xanxerê - SC, tem também o objetivo de passar informações
da cidade para que os turistas ou viajantes conheçam um pouco mais sobre a
cidade, o estudo de conteúdo
abaixo demonstra.
se determinou por prioridades, como a imagem
51
Conteúdo que será exibido nos links
Fluxograma 06 Conteúdo do Site
Fonte: O Autor
Links com maior destaque para o portal.
•
Portal
•
Empresas
o Busca por Empresas
o Como Anunciar
o Meu Panfleto Digital
o Cadastro de Usuário
o Relatórios de Acesso
•
Patrocinadores
o Busca por Patrocinadores
o Como Patrocinar
o Modelos de Exibição
o Especificação
o Relatorios de Acesso
o Custos
•
Contato
•
Sistema de Gerenciamento do Link Empresas
o Definição da Marca
52
o Histórico Comercial
o Contato
•
Sistema de Gerenciamento do Link Empresas
o Marca
o Endereço
o Contato
Delimitação da Guia de Serviços
Para que o Web Site seja melhor organizado foi coletado algumas áreas de
serviços que a cidade de xanxerê pratica hoje, esta lista de serviços foram cedida
pela ACIX delimitamos algumas áreas econômicas para que o portal tenha uma
melhor organização de setores assim definimos a nossa Guia de Serviços
Academia de Ginástica
Peças
Creches
Advogado (a)
Biro de Impressão
Dentistas
Agencia de Emprego
Caminhões
Dermatologia
Agencia de Viagem
Cardiologia
Despachantes
Agencias de Propaganda
Casa de Carnes
Disk Água
Agropecuária
Cirurgia Cardiovascular
Disk Gás
Anesteologia
Cirurgia Geral
Disk Pizzas
Angiologia e Cirurgia
Cirurgia Torácica
Distribuidor de Bebidas
Vascular
Clinica de Fonodiólogia
Elétricos e Hidráulicos
Arquitetos
Clinica de Estética
Emergência
Associações
Clinico Geral
Endocrinologia
Auto Center
Colégios
Escolas de Idiomas
Auto Peças
Comercio e
Escritórios
Auto Som
Representações
Estofaria
Bancos
Concessionárias
Farmácias
Bares e Restaurantes
Construção Civil
Ferragens
Bicicletas, Motos
Consultoria
Fisioterapeuta
Rádios
Montagem de Moveis
Livrarias
53
Reflorestamento
Odontopediatria
Locadora de Vídeo
Refrigeração
Panificadoras
Loja de Calçados
Celulares
Papelaria
Loja de Decorações
Salão de Beleza
Pediatria
Floricultura
Seguradora
Perfumaria
Segurança Privada
Placas e Luminosos
Sementes
Planos de Saúde
Serviços de Alimentação
Postos de Combustíveis
Sindicatos
Postos de Lavagem
Sorveterias
Produtos Hospitalares
Supermercados
Produtos Químicos
Táxi
Psicologia
Transportes e
Psiquiatria
Transportadora
Fotografia e Filmagem
Universidades
Funerária
Urologia
Garagem de Veículos
Vacinas
Geriatria
Veterinária
Ginecologia e Obstetrícia
Vidraçarias
Gráficas
Cooperativa de Crédito
Guinchos
Loja de Esportes
Hospital
Loja de Estofados
Hotéis
Loja de Linhas
Igrejas
Loja de Presentes
Imobiliária
Lojas de Informática
Industria e Comércio de
Lojas de Roupas
Máquinas
Lotéricas
Industria Ervateira
Madeireira
Joalheria e Ótica
Mecânica
Jornais
Medicina do Trabalho
Laboratórios
Metalúrgica
Lan House
Moda Intima
Lavanderia
54
3.2.2 Concepção
Quadro Conceitual
O quadro Conceitual tem o objetivo de mostrar imagens e objetos que os
usuários, utilizam, pode ser ações deste publico alvo, e também pode ser modos de
pensar.
Baseado no painel Semântico e nas tendências dos concorrentes serão
definidos 3 conceitos para delinear por qual modelo visual o site terá, os conceitos
aqui pré-determinados são Retorno Financeiro, Simples, Inovador.
Desenho 18 Quadro Conceitual
Fonte: O Autor
55
Painel Semântico:
Para a criação do painel Semântico foi criado três conceitos principais,
retirados da amostragem do publico alvo, após isso foi estabelecidos mais 3
conceitos, para melhor entender os conceitos foram separadas imagens que
demonstrem esses conceitos do portal.
Desenho 19 Painel Semântico
Fonte: O Autor
Algumas Normas de Usabilidade para Orientação da Geração de Alternativa
Para a criação do layout pensando no usuário foi montada a pagina conforme
as normas de NIELSEN (2007) que fala de normas de Usabilidade para demonstrar
como foi o processo de criação e adequação do conteúdo no Portal.
56
Desenho 20 Algumas Diretrizes de NIELSEN
Fonte: NIELSEN 2007
57
Desenho 21 Algumas Diretrizes de NIELSEN
Fonte: NIELSEN 2007
Geração de Alternativas
As primeira geração de alternativas aqui apresentadas foram feitas da Home
Page, que será a pagina padrão para o cliente divulgar sua empresa. Neste caso
58
foram criadas duas alternativas, uma delas manualmente e outra digitalizada, a
geração de alternativa manual foi trabalhada e adequada com as normas de
usabilidade de NIELSEN (2007), que está no anexo A, a segunda geração de
alternativa a digital foi criada a partir das analises e das tendências que os
concorrentes diretos e indiretos utilizam na sua Home Page, assim esta geração de
alternativas não possui um embasamento teórico das normas de usabilidade de
NIELSEN (2007), mas mesmo assim não significa que os concorrentes diretos e
indiretos não utilizam uma legibilidade e usabilidade em seus portais.
Geração de Alternativas da Estrutura
Esboço 1 realizado manualmente conforme as normas de usabilidade de
NIELSEN (2007).
Desenho 22 Geração de Alternativa feita Manualmente com as normas de NIELSEN (2007)
Fonte: O Autor
59
Para a geração desta alternativa foi optado trabalhar com uma estrutura
hierarquica de STANQUE (2009) a onde a leitura da estrutura é por diferentes
seções, com a escolha desta estrutura uma pagina ira abrir caminho para outra
pagina subordinada, a estrutura hierarquica é mais adequada para grandes níveis de
organização e é excelente para grandes volumes de informações, como no caso do
portal Xanxerê. As normas de usabilidade utilizada nesta geração de alternativa
estão no anexo A, Algumas Normas de Usabilidade para Orientação da Geração de
Alternativa.
Esboço 2 criado digitalmente utilizando as tendências dos concorrentes
diretos e indiretos.
Desenho 23 Geração de Alternativa feita Digitalmente a partir dos Concorrentes
Fonte: O Autor
60
Geração de Alternativas dos Menus
O menu é um setor do site aonde todo o usuário passara o olhar, é no menu
que o usuário poderá se localizara dentro do site, é com o menu que o usuário
poderá escolher para aonde ele pretende ir, para a geração de alternativa do menu
foi analisado a quantidade de informações que o site oferecerá para o usuário, e
assim foi feito uma perspectiva de tamanho dos menus e a sua procura dentro do
portal, para termos uma melhor usabilidade também foi analisado as tendências que
hoje os concorrentes utilizam e criado uma geração de alternativas diferente dos
concorrentes, priorizando a harmonia e a legibilidade do menu.
Desenho 24 Menus concorrentes diretos e indiretos.
Fonte: O Autor
Para a geração de alternativas dos menus do portal Xanxerê foi feito uma
analise de como esta estruturado os menus dos concorrentes.
61
Desenho 24 Geração de Alternativas dos menus do portal.
Fonte: O Autor
Geração de Alternativas das dimensões da pagina.
As dimensões dos menus são de acordo com uma das normas de NIELSEN
(2007) que determina que os títulos deveram ser em um tamanho reduzido para que
o usuário ao bater o olhar no menu já reconheça o que esta escrito.
Conforme normas de NIELSEN (2007)
62
Desenho 25 Uma norma de Usabilidade de NIELSEN
O menu do topo a onde consta os links com maior prioridade que são Portal,
Empresa, Patrocinador, Contato, terá uma dimensão de 35 px (pontos) de altura a
largura é determinada conforme cada navegador, O menu do lado esquerdo vertical
aonde constara praticamente todos os links terá uma dimensão de 170 px (pontos)
os menus coloridos aonde o objetivo deles é orientar o usuário para qual setor ele
está terá uma dimensão de 160 px (pontos), com estas dimensões o conteúdo
poderá ser visualizado com clareza e de acordo com as normas de NIELSEN (2007).
Desenho 26 Dimensões dos Menus
Fonte: O Autor
63
Geração de Alternativas para as Cores do Portal
Para que o portal transmita os conceitos já pré-determinados, foram
estudados as cores e os significados das cores dos concorrentes, após esta analise
foi separado as cores que mais predominam nos sites concorrentes e pesquisado o
que estas cores podem transmitir para o usuário, logo após este procedimento foram
separados as cores que transmitem os conceitos do Portal Xanxerê que também já
foram definidos, com todas estas analises oi feito alguns testes de legibilidade e as
gerações de alternativas, é importante salientar que não sabemos se as cores
utilizadas nos sites dos concorrentes, tem o objetivo de transmitir os conceitos aqui
determinados.
Os conceitos e os significados das cores do portal foram retiradas do livro do
FARINA (2000).
64
Desenho 27 Cores Padrões Concorrente Direto Site Hagah
Fonte: O Autor
65
Desenho 28 Cores Padrões Concorrente Indireto Site tudosobrexanxere
Fonte: O Autor
66
Desenho 29 Cores Padrões Concorrente Indireto Site redeprincesa
Fonte: O Autor
Abaixo as gerações de alternativas das cores do portal, já aplicadas nos
menus, e também uma das normas de NIELSEN (2007), comprovando a aplicação
das cores para que os menus tenham uma melhor legibilidade.
67
Desenho 30 Uma das normas de NIELSEN
Desenho 31 Cores Padrões site Portal Xanxerê
Fonte: O Autor
68
Geração de alternativas das cores já aplicadas nos menus, utilizando já uma
das normas de NIELSEN (2007).
Desenho 32 Menu horizontal principal
Fonte: O Autor
Desenho 33 menu vertical principal
Fonte: O Autor
69
Geração de Alternativas da Tipografia
Analisando os concorrentes e seguindo as normas de NIELSEN (2007) foi
percebido que todos os concorrentes utilizam a mesma fonte Arial, No fluxograma 06
pode-se verificar os aspectos de usabilidade da fonte Arial.
Nome da Fonte
Arial
Legibilidade On-Line
Características
Legibilidade em tamanho razoável.
Boa na fonte de 10 pontos ou
acima
Moderna, limpa, básica, sem firulas.
Geralmente a preferida por pessoas de
todas as idades.
Fluxograma 06 Algumas Fontes Padrões
A fonte escolhida para transmitir o conteúdo do portal Xanxerê é verdana pelo
fato de que é uma fonte mais simples e que todos os navegadores suportam este
tipo de tipografia.
Nome da Fonte
Verdana
Legibilidade On-Line
Características
A fonte on-line mais legível, mesmo
em texto pequeno.
Profissional, simples e moderna. A fonte
recomendada para uso no corpo de texto,
em que a legibilidade é fundamental.
Altamente cotada na preferência dos
usuários.
Fluxograma 07 Algumas Fontes Padrões
70
Geração de alternativas da linha de fundo da pagina.
Desenho 35 Gerações de Alternativas do Fundo da Pagina
Fonte: O Autor
Para a geração de alternativas das linha do fundo da pagina, primeiramente
foi pego o conceito colorido e feito a abstração da forma do arco ires do conceito
colorido, como a linha não ficou adequada para o portal foi feito uma segunda
abstração de forma de uma linha de um dos concorrentes, com este segunda linha
foi visto que mais bem se adequou ao projeto, pois pode passar todo o conceito do
portal.
71
Geração de Alternativa do Fundo da Pagina
O fundo é parte do site aonde da uma estrutura para o conteúdo que será
apresentado, foi escolhido um fundo mais claro pelo fato que é mais adequado
inserir uma cor forte sobre um fundo claro, para que a visualização do conteúdo seja
mais bem visualizada.
Desenho 35 Gerações de Alternativas do Fundo da Pagina
Fonte: O Autor
72
3.2.3 Pós-Concepção
Digitalização e montagem da estrutura e da Home Page.
Desenho 36 Gerações de Alternativas da Home Page
Fonte: O Autor
A digitalização do projeto se deu pela geração de alternativas já feitas
antecipadamente, isso consta os 3 menus o fundo da pagina e a linha vermelha que
corta todo o topo.
73
Seleção de Alternativas
Para analisar se a estrutura do projeto está de acordo com as normas de
usabilidade, foi feito um checklist da pagina principal, é importante salientar que todo
o layout criado e selecionado aqui neste link tem as normas de usabilidade de
NIELSEN (2007), para um melhor entendimento dos conceitos do projeto e da
comprovação dos conceitos no layout serão exibidos no capitulo 4 do projeto.
O Checklist aqui aplicado é referente ao layout do Portal Xanxerê, com esta
analise poderemos alterar funções e melhor organizar o conteúdo, para que o
usuário possa ter uma melhor leitura já que o layout do Portal Xanxerê é baseado na
estrutura linear a onde o usuário acompanha o conteúdo de forma lógica e
seqüencial.
Cheklist
•
Presteza
Verifica se o sistema informa e conduz o usuário durante a
interação.
•
Agrupamento por localização
Verifica se a distribuição espacial dos itens traduz as relações
entre as informações.
•
Agrupamento por formato
Verifica os formatos dos itens como meio de transmitir
associações e diferenças.
•
Feedback
Avalia a qualidade do feedback imediato às ações do usuário.
•
Legibilidade
Verifica a legibilidade das informações apresentadas nas telas
do sistema.
•
Concisão
Verifica o tamanho dos códigos e termos apresentados e
introduzidos no sistema.
•
Ações Mínimas
Verifica a extens&atildeo dos diálogos estabelecidos para a
realização dos objetivos do usuário.
Portal Xanxerê
Respondidas: 17
Respondidas: 11
Respondidas: 17
Respondidas: 12
Respondidas: 27
Respondidas: 14
Respondidas: 4
74
•
Densidade Informacional
Avalia a densidade informacional das telas apresentadas pelo
sistema.
Respondidas: 9
•
Ações Explícitas
Verifica se é o usuário quem comanda explicitamente as
ações do sistema.
Respondidas: 5
Respondidas: 4
Respondidas: 3
Respondidas: 6
Respondidas: 7
Respondidas: 9
Respondidas: 5
Respondidas: 11
Respondidas: 12
Respondidas: 21
Respondidas: 194
Questões Não conformes:10
•
Controle do Usuário
Avalia as possibilidades do usuário controlar o encadeamento
e a realização das ações.
•
Flexibilidade
Verifica se o sistema permite personalizar as apresentações e
os diálogos.
•
Experiência do Usuário
Avalia se usuários com diferentes níveis de experiência têm
iguais possibilidades de obter sucesso em seus objetivos.
•
Proteção contra erros
Verifica se o sistema oferece as oportunidades para o usuário
prevenir eventuais erros.
•
Mensagens de erro
Avalia a qualidade das mensagens de erro enviadas aos
usuários em dificuldades.
•
Correção de erros
Verifica as facilidades oferecidas para que o usuário possa
corrigir os erros cometidos.
•
Consistência
Avalia se é mantida uma coerência no projeto de códigos,
telas e diálogos com o usuário.
•
Significados
Avalia se os códigos e denominações são claros e
significativos para os usuários do sistema.
•
Compatibilidade
Verifica a compatibilidade do sistema com as expectativas e
necessidades do usuário em sua tarefa.
•
Resultado
75
Fluxograma 08 CheckList Portal Xanxerê
Fonte: O Autor
Gráfico Comparativo
No CheckList realizado percebeu-se
se que a estrutura da pagina e a forma
como o conteúdo será mostrado esta de acordo com as normas de usabilidade,
usabilidad
abaixo esta um gráfico comparativo do CheckList dos concorrentes e do Portal
Xanxerê.
140
120
100
80
Questões Conforme
Questões não Conforme
60
Questões não Aplicadas
40
20
0
Hagah
Rede
Princesa
Tudo Sobre
Xanxerê
Portal
Xanxerê
Gráfico 03 Comparativo dos resultados do CheckList
Fonte: O Autor
Impressão do Projeto
Impressão do projeto para a banca examinadora duas vias entregue no
protocolo da UNOESC – Universidade do Oeste de Santa Catarina em 22-11-2010.
22
76
Data de Entrega do Projeto
Data de entrega do projeto 22-11-2010
Data de Apresentação
Apresentação do projeto previsto para primeira ou segunda semana de
Dezembro 2010.
Criação da Apresentação do Projeto
Criação da apresentação do projeto, com o objetivo de demonstrar todo o
processo de criação e o resultado final.
77
4 RESULTADO DO PROJETO
Nesta etapa do projeto será mostrado o projeto final com todas as paginas
que foi determinado
terminado durante o projeto, as imagens aqui apresentadas sempre serão
explicadas para o entendimento do processo criativo.
4.1 Modelações Finais
•
Estrutura
Desenho 37 Gerações de Alternativas da Estrutura
Fonte: O Autor
A estrutura do Layout esta baseada em uma leitura hierárquica, onde um link
pode fazer ligação com outro link, foi optado a escolha desta estrutura pelo fato de
78
que é um meio de visualização mais simples, assim o usuário do site não precisa ter
muita experiência para navegar no portal, a estrutura hierárquica é excelente para
sites com muita informação como no caso do portal Xanxerê.
Conceituação da Estrutura
A criação da estrutura do portal foi baseada em alguns aspectos de
usabilidade.
Desenho 38 Conceituação da Home Page a partir das normas de NIELSEN
Fonte: O Autor
Cada ponto vermelho com a numeração indica um aspecto conceitual de
usabilidade, para identificar qual aspecto de usabilidade se refere, na tabela abaixa
tem as normas que foi utilizado para a criação do layout.
79
Desenho 39 Algumas normas de NIELSEN
80
•
Home Page
Desenho 40 Conceituação da Home Page a partir de STANQUE e GESTALT
Fonte: O Autor
No desenho 40, da Home Page está sendo demonstrado a direção do olhar
no Layout da Home Page, conforme STANQUE (2008), os pontos vermelhos com
numeração que indicam os fatores de GESTALT (2004) que foram implementados
no layout, abaixo será demonstrado os conceitos da direção do olhar por STANQUE
(2008) e a gestalt da forma por GESTALT (2004).
81
Desenho 41 Conceitos de GESTALT
Fonte: GESTALT (2004)
Direção do Olhar na Tela do Computador STANQUE (2008)
•
Os usuários leram primeiramente em um movimento horizontal, geralmente
através da parte superior da área de conteúdo. Este elemento inicial dá forma
a barra superior do menu.
•
Em seguida, os usuários abaixaram a página um pouco e então lêem através
de um segundo movimento horizontal que tipicamente sobre uma área mais
curta do que no movimento horizontal precedente. Esse elemento adicional
dá forma á barra mais abaixo do F.
•
Finalmente, os usuários fazem a varredura do lado esquerdo do conteúdo em
um movimento vertical. Ás vezes esta é uma varredura razoavelmente lenta e
sistemática que aparece como um listra continua em um mapa do rastreio do
olho; outras vezes, os usuários movem o olhar mais rapidamente, criando um
mapa mais manchado. Este ultimo elemento dá forma á haste do F.
82
•
Portal
Desenho 42 Link Portal Xanxerê
Fonte: O Autor
o Será um link a onde explicara tudo sobre o site, a sua abrangência e a
quantidade de acesso que o Portal Xanxerê possui hoje.
É um link simples que consta apenas conteúdo de texto, o nome do link está em
uma posição visual agradável e de fácil visualização a tipografia utilizada é a
verdana como já foi determinada para o site inteiro.
83
•
Buscas por Empresas
Desenho 43 Link Busca por Empresas
Fonte: O Autor
o Tem um link chamado Busca por empresas, neste link o cliente irá
poder visualizar todos os panfletos digitais que o portal Xanxerê
possui, a forma de fazer buscas neste link se delimitará por selecionar
na guia de serviços uma área de atuação, a forma de pesquisa se dá
por este modelo para que o usuário não cometa erros quando fizer
buscas, por exemplo digitar o nome do segmento de trabalho errado, a
forma de visualização é simples e limpa tendo na parte superior uma
guia amarela indicando qual será o próximo etapa após a pesquisa.
84
•
Resultado busca por Empresas
Desenho 44 Link Resultado da Busca por Empresas
Fonte: O Autor
Após o usuário fazer a busca por empresas na guia de serviços, a pesquisa
ainda continuará no mesmo lugar caso o cliente queria fazer uma nova pesquisa,
abaixo da pesquisa mostrara os patrocinadores desta guia de serviço, para
visualizar os patrocinadores basta clicar na marca do mesmo, o modo como será
mostrado os patrocinadores segue uma das normas de NIELSEN (2007), norma 05,
abaixo dos patrocinadores terá uma divisão por cores para identificar as empresas
cadastradas no portal, para que o usuário possa visualizar o panfleto digital que
busca é necessário o usuário clicar ou no nome da empresa ou na seta +, este modo
de visualização das empresa deve ser bem pratico, pois terá guias de serviços com
vários panfletos digitais cadastrados então a lista poderá ser grande.
85
•
Amostragem do Panfleto Digital
Desenho 45 Link Panfleto Digital
Fonte: O Autor
No desenho 45 é o layout do panfleto digital é nele que consta todas as
informações da empresa, o design deste layout é simples, dando ênfase
primeiramente na marca, pois é o objetivo principal, divulgar e vender a marca, logo
ao lado temo o nome da empresa também em um tamanho razoável para identificar,
abaixo esta as informações de contato, abaixo tem o histórico comercial da empresa
e por ultimo tem 3 fotos disposta em tamanhos grande, mas podendo aumentar
ainda mais quando clicadas sobre elas, há três modos de apresentação da marca
em um único link, primeiro a marca depois o nome da empresa e a baixo contato,
este modelo de diagramação foi escolhido por apresentar estes três aspectos de
amostragem em um único layout, se fizermos uma analise da direção do olhar neste
layout podemos perceber que a leitura passara acima das informações mais
86
relevantes do Panfleto Digital,sem contar que o design é simples e limpo tendo
espaço suficiente para adicionar mais fotos ou conteúdo textual sem que perca a
ênfase dada na marca.
•
Links Empresa
Desenho 46 Links Empresas
Fonte: O Autor
87
No desenho 46 terá um diferencial dos demais, pois ele trabalhara com um
formato de programação chamado WEB 2.0 este modo de visualização mostrara o
conteúdo com maior nitidez, a forma como mostrara os links é diferente pelo fato de
que abrirá apenas um link com todo o conteúdo do link empresa, e este modo de
programação fará com que a pagina possua uma forma de áncora, isso significa que
quando ele estiver no link como anunciar e quiser ir para o link cadastro de usuário o
que acontecerá é que não abrira uma nova pagina apenas o que acontecerá é que a
barra de rolagem se deslocará para baixa ou para cima conforme o link escolhido
pelo usuário, este modo de visualização facilita no carregamento da pagina pois não
precisara carregar mais do que uma vez.
o Terá um link chamado como anunciar, nele explicara como o cliente
pode cadastrar sua empresa no Portal Xanxerê.
o Terá também uma explicação de como será exibido um panfleto digital
no portal Xanxerê, chamado de Meu Panfleto.
o Para o empresário criar o seu panfleto digital é necessário criar um
cadastro de usuário, este cadastro será enviado para o gerenciador do
portal e ele autorizará o acesso deste cliente, para criar o seu panfleto
digital, salientamos que toda a informação colocada no panfleto digital
é de estrema responsabilidade do dono do panfleto digital.
o Para que o cliente tenha um feedback de acesso no seu panfleto digital
terá um link chamado Relatórios de Acesso, nesse link demonstrara
como o cliente poderá ver o acesso em seu panfleto digital e todos os
relatórios.
88
•
Busca por Patrocinadores
Desenho 47 Link Busca por Patrocinadores
Fonte: O Autor
O sistema de buscas por patrocinadores é bem similar a link empresas, a
estrutura e a diagramação foi a mesma para manter uma unidade entre si, com isso
deixando o cliente mais familiarizado com o portal, o sistema de busca consiste
primeiramente em um esquema identificando a onde o cliente esta e a onde ele
poderá ir após a busca, abaixo disso tem um campo para selecionar o ramo de
atividade na guia de serviços após selecionado basta apenas clicar em busca para
finalizar a operação.
89
•
Resultado da busca Patrocinadores
Desenho 48 Link Resultado da Busca por Patrocinadores
Fonte: O Autor
Conforme desenho 48 o link mostra o resultado da busca por patrocinadores,
para que o usuário possa fazer novas buscas, foi deixado na mesma posição o
sistema de busca caso deseja fazer uma nova, abaixo terá uma barra identificando
os patrocinadores desta guia de serviço,foi utilizado os patrocinadores desta forma
conforme a norma 05 de NIELSEN (2007), o modo como será exibido o patrocinador
é diferente do que as empresas, pois ela terá um campo reduzido, mostrando
apenas a marca o nome da empresa e o contato, caso o cliente queira saber mais
informações deste patrocinador ele poderá clicar sobre a marca ou sobre o nome da
empresa e assim acessar o site deste patrocinador.
90
•
Links Patrocinadores
Desenho 49 Links Patrocinadores
Fonte: O Autor
Conforme desenho 49 é um link com linha de programação de WEB 2.0, por
isso cinco links abriram em uma só pagina, ao clicar sobre um dos conteúdos a
pagina em vez de carregar um outro link, ela apenas se movimentara com a barra de
rolagem para baixa ou para cima conforme o conteúdo selecionado, fazendo um tipo
91
de ancora, este modo de visualização é mais simples e mais dinâmico pelo fato que
apenas carrega uma pagina, ao topo do site, tem um sistema que chamamos de
“migalha de pão”, ele indica em qual conteúdo você esta e em qual você poderá
chegar, os links mostrados neste link são apresentados a maioria com textos e
imagens, o sistema de cadastro de usuário é auto explicativo com perguntas
simples, o tamanho dos campos para inserir informações são em tamanho razoável
e de fácil visualização, este link é limpo e simples, mesmo contendo bastante
conteúdo, o que facilita o entendimento para o usuário.
o O link é destinado para empresas que já possuem site, e que querem
apenas divulgar a sua marca no portal Xanxerê, para que seja feita a
divulgação da marca dos patrocinadores será cobrado uma taxa de
divulgação, esta taxa de divulgação dependerá em qual setor a marca
se apresentará, com estas taxas do patrocinador é que o site se
manterá financeiramente.
o Como Patrocinar: Terá um texto explicativo de como o cliente pode
patrocinar o portal Xanxerê.
o Modo de Exibição: Demonstrará de que modo a marca do cliente pode
ser exibida no portal Xanxerê.
o Especificação: O link tem como objetivo especificar o tamanho da
imagem do patrocinador e os formatos aceitos para a apresentação da
marca.
o Relatórios de Acesso: Para que o cliente tenha um feedback de acesso
no seu patrocínio terá o link relatório de acesso, para que o cliente
possa visualizar a quantidade de cliques que a sua marca teve nos
respectivos dias selecionados pelo cliente.
o Custos: Este link demonstrara uma tabela de custos de patrocínio e os
setores do site onde sua marca poderá ser apresentada.
92
•
Contato
Desenho 50 Link Contato
Fonte: O Autor
Conforme desenho 50 o link contato esta disposto por um formulário de e-mail
com tamanhos grandes das caixas para o cliente poder inserir as informações
pedidas e abaixo dois links um para apagar e outro para enviar, as informações
pedidas neste formulário de contato é bem simples e pratico, abaixo do formulário
esta o endereço físico da empresa com o telefone para contato, abaixo destas
informações um contato com outros setores do site, este link é simples e pratico pois
demasiada informações leva ao cliente desistir de enviar a sua duvida ou sugestões
de melhoria.
o O contato é o fator primordial para que haja uma negociação, é neste
link que o cliente poderá direcionar a sua pergunta ou sugestão de
melhorias para determinado setor do site, é importante colocar a
disposição neste link um formulário de contato que direcionara as
93
informações para um e-mail mestre, também é importante inserir
demais e-mails de vários setores do site, como por exemplo, o
comercial ou o suporte, é fundamental também colocar o endereço e o
telefone para contato da empresa.
Sistema de Gerenciamento Empresa
o Na pagina inicial do portal constará um campo com login e senha, este
aceso se destina para o empresário cadastrar o seu panfleto digital,
para que o empresário tenha a senha e login de acesso é necessário
fazer um cadastro de usuário, que poderá ser feito no link Empresas >
Cadastro de Usuário.
o Quando o cliente fizer o login e senha na pagina inicial ele entrara em
um setor exclusivo para o seu panfleto digital, neste setor o cliente
poderá escolher a sua área de atuação (Guia de Serviços), no
mercado de trabalho e poderá inserir a sua marca, o seu histórico
comercial, o seu contato, e três fotos dos seus produtos ou serviços, se
caso o cliente queira adicionar mais fotos será cobrado uma taxa de
manutenção do seu panfleto digital.
o O portal Xanxerê dará um endereço de e-mail para cada panfleto
digital, caso o cliente necessite de mais do que um e-mail será cobrado
uma taxa de manutenção.
94
•
Sistema de Gerenciamento do usuário link Empresas (marca)
Desenho 51 Sistema de Gerenciamento da marca (empresas)
Fonte: O Autor
A organização lógica do sistema de gerenciamento se dá como ele é visualizado
pelo usuário com isso começa a ser exibido primeiramente a marca, neste link na
parte superior terá um demonstrativo informando a onde o cliente esta e a onde ele
poderá ir, abaixo textos informativos e como o cliente poderá inserir a sua marca e
abaixo já uma janela para ele enviar a sua marca, caso o cliente queira colocar
alguma informação abaixo da sua marca ele poderá inserir também, caso o cliente já
tenha a sua marca no panfleto digital e queira troca tem a opção remover a marca,
caso o cliente já tenha uma marca cadastrada no seu panfleto digital ficará
mostrando, após o cliente selecionar a marca no seu computador e colocar a
informação abaixo da sua marca ele poderá salvar a alteração, é um link de pouca
informação para que o usuário não se perca.
95
•
Sistema de Gerenciamento do usuário link Empresas (histórico)
Desenho 51 Sistema de Gerenciamento do Histórico Comercial (empresas)
Fonte: O Autor
O link de gerenciamento histórico comercial pode ser moldado conforme a
necessidade do cliente para isso ele terá uma barra com informações de edição de
texto como por exemplo Negrito, Italico, Justiicar, para o cliente inserir informação
basta apenas inserir no campo de texto que esta em um tamanho grande e
centralizado na pagina, após inserir as informações o cliente deverá clicar em salvar
alteração, assim o processo já esta finalizado e salvo.
96
•
Sistema de Gerenciamento do usuário link Empresas (contato)
Desenho 52 Sistema de Gerenciamento do Contato (empresas)
Fonte: O Autor
O link contato no sistema de gerenciamento tem alguns campos obrigatórios,
foi optado utilizar campo obrigatório para que o usuário não cometa erros ao
escrever por exemplo o nome da cidade, as informações que o cliente passara são
informações simples e os campos estão em um tamanho grande, abaixo disso tem
duas opções uma de apagar e outro salvar.
97
•
Sistema de Gerenciamento do usuário link Empresas (fotos)
Desenho 53 Sistema de Gerenciamento das fotos (empresas)
Fonte: O Autor
No desenho 53 é para que o usuário insira 3 fotos ou da sua empresa ou da
sua prestação de serviço, é um modelo de inserção bem similar ao da marca, tem
um campo para procurar a foto no computador um campo para inserir informações
abaixo da foto e a opção de remover a foto ou editar a legenda, após todo este
processo basta apenas clicar em salvar para que a operação seja finalizada.
98
•
Sistema de Gerenciamento (Patrocinadores)
o Para o empresário contratar o serviço de patrocínio no portal Xanxerê,
é necessário criar um cadastro de usuário, este cadastro será enviado
para o gerenciador do portal e ele mandará um boleto para o cliente
com a senha de acesso, saliento que toda a informação colocada no
patrocínio é de estrema responsabilidade do patrocinador.
o Após o cliente receber o boleto e fazer o pagamento a senha de
acesso fica liberado para que o cliente possa inserir a sua marca o seu
endereço e o seu contato.
o È importante ressaltar que quando o cliente faz a aquisição do
patrocínio ele já determina em qual setor do site ele tem interesse de
mostrar a sua marca, com isso ao acessar o seu sistema de
gerenciamento ele apenas poderá inserir informações do setor que ele
contratou, outros setores estarão bloqueados para o acesso.
99
Sistema de Gerenciamento do usuário link Patrocinadores (marca)
Desenho 54 Sistema de Gerenciamento da marca (patrocinadores)
Fonte: O Autor
Para o gerenciamento dos patrocinadores, apresentará apenas 2 opções, a
inserção da marca e do contato, o gerenciamento da marca é idêntico do sistema de
gerenciamento das empresas, com um setor para buscar a marca no computador,
abaixo um campo para inserir referencias na marca, também tem a opção remover a
marca caso o cliente já tenha uma marca e queira apenas substituir, após estas
opção basta o cliente clicar salvar alteração e o processo esta finalizado.
100
Sistema de Gerenciamento do usuário link Patrocinadores (contato)
Desenho 55 Sistema de Gerenciamento do contato (patrocinadores)
Fonte: O Autor
O sistema de gerenciamento do contato tem campos obrigatórios para que o
usuário não cometa erros ao digitar, os campo estão em um tamanho grande para
identificar e as informações pedidas são simples, após colocar todas as informações
basta o cliente salvar.
101
5 CONSIDERAÇÕES FINAIS
Através do desenvolvimento do projeto foi possível perceber que a
usabilidade é um fator fundamental para que o usuário de uma pagina de internet
realize suas funções e não cometa erros, a usabilidade alem de auxiliar o usuário a
realizar as suas funções também tem um papel de organizar e melhor adequar o
conteúdo para que o usuário possa interpretar e entender o que o site quer passar
para o usuário.
As normas de usabilidade de NIELSEN (2007) que foram utilizadas neste
projeto foram, testadas varias vezes e foi comprovado que estas normas são
indispensáveis em um Web Site.
Durante todo o projeto foi muito analisado os concorrentes diretos e indiretos,
foi preciso fazer tantas pesquisas para podermos perceber o mau funcionamento ou
a má legibilidade dos sites concorrentes, o que diferenciou o portal xanxerê dos
demais sites concorrentes com certeza foi o design, o papel que o design fez gerou
um diferencial competitivo, e hoje é o que o mercado precisa, algo diferente
moderno e sem duvida com muita legibilidade e usabilidade.
O conceito estabelecido no começo do projeto chega ao final e é alcançado. A
metodologia também teve papel fundamental no projeto como norteador das
atividades desenvolvidas.
O Portal Xanxerê realiza sonhos para pequenas e médias empresas.
102
REFERÊNCIAS
ADG, Guia ADG Brasil. O valor do Design Gráfico: São Paulo, 2003, Vervantes
Saavedra.
CONCIENCIA, Carlos Vogt. A internet no Brasil. 10 mar.2001 Disponível em:
<http://www.rnp.br/noticias/imprensa/2001/not-imp-010310.html> Acesso em 01 set
2010
DORMER, Peter. Os Significados do Design Moderno. Porto (Portugal): ed Porto,
1995. (Centro Português de Design - Coleção Design, Tecnologia e Gestão).
FARINA, Modesto. Psicodinâmica das cores em comunicação. 4 Ed. São Paulo:
2000.
FERREIRA, Aurélio Buarque de Holanda. Aurélio Século XXI: O Dicionário da
Língua Portuguesa. Rio de Janeiro: Nova Fronteira, 2001
FONTOURA, Antonio Martiniano. Algumas reflexões sobre o design, a arte, a
ciência
e
o
senso
comum.
28
ago.2010
Disponível
em:
<http://abcdesign.com.br/artigos/algumas-reflexoes-sobre-o-design-a-arte-a-cienciae-o-senso-comum/> Acesso em: 25 set 2010.
FLAVIO ANTHERO NUNES VIANNA DOS SANTOS, Método Aberto de projeto
para uso em ensino de design industrial, Revista Design em foco, janeiro-junho,
ano 2000 vol III, Universidade do Estado da Bahia.
Leitura ordenada e consciente na cultura ocidental (GOLDSMITH apud
CHUEKE, 2004).
HOLLIS, Richard. Design Gráfico: uma história concisa. São Paulo: Ed. Martins
Fontes, 2001.
103
MARTINEZ, Maria. Usabilidade no Design Gráfico de Web Sites, Ed. São Paulo,
2000. Disponível em :> http://www.scribd.com/doc/8404668/Usabilidade-No-DesignGrfico-de-Web-Sites-Martinez00a>. Acesso em: 20 de Nov. 2010.
MEMÒRIA, Felipe; Design para a internet: projetando a experiência perfeita. Rio de
Janeiro: Campus, 2006 171 p.
MUNARI, Bruno. Das coisas nascem coisas. São Paulo: Ed. Martins Fontes, 1998.
NIELSEN, Jakob; Projetando websites. Rio de Janeiro: Campus, 2000. 416 p.
NIELSEN, Jakob; THAIR, Marie. Home Page: usabilidade 50 websites
desconstruídos. Rio de Janeiro: Campus, 2002. 315 p.
NIELSEN, Jakob; LORANGER, Hoa. Usabilidade na web. Rio de Janeiro: Elsevier,
2007. 406 p.
NAHR, Marcos. Não existe web designer: existe o designer que faz web. Revista
Webdesigner. Ano 4, n. 36, p. 70-71, Rio de Janeiro: Arteccom, out 2007.
MARIA LAURA MARTINEZ, Departamento de Jornalismo e Editoração - ECA USP
e
Laboratório
de
Sistemas
Integráveis
-
POLI
–
USP
apud
http://www.scribd.com/doc/8404668/Usabilidade-No-Design-Grfico-de-Web-SitesMartinez00a
RNP, Rede Nacional de Ensino e Pesquisa, 2010, acessado em 20 de outubro de
2010. http://www.rnp.br/index.php
STANQUE, Felipe Stanque machado Junior. Interatividade e interface em um
ambiente virtual de aprendizagem. Santa Maria – Rio Grande do Sul: Imed
Editora, 2008
SCHMIDT, Eric. Computação nas nuvens vai baratear acesso à internet, aposta
104
Google. G1, com informações do Jornal da Globo.Disponível em:
<http://g1.globo.com/Noticias/Tecnologia/0,MUL455811-6174,00.html>.Acesso em:
21 outubro 2010.
USABILIDOIDO, Frederick van Amstel. Elementos de design gráfico para
Website. São Paulo, 09 de novembro de 2005, disponível em
http://usabilidoido.com.br/elementos_de_design_grafico_para_websites.html
Acesso em 8 de Outubro de 2010.
VILLAS-BOAS, André. O que é e o que nunca foi design gráfico. 3ed. Rio de
Janeiro: Ed. 2AB, 2000.
KOBAYACHI, Cíntia: WEBDESIGNER: estrutura e programação. São Paulo: Érica,
2004
105
ANEXOS
Anexos A
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

tcc-cria-o-de-um-panfleto-digital-para-auxiliar-empresas-da

Transcrição

Documentos relacionados

DECRETO 073 - NOMEIA PAMELA

COMPANY SNAPSHOT

Arte Ebanista - Arte de embutir a madeira

BRUNA MESSAGE MIGLIAVACCA

32. valcucine 33. schiffini 34. bugatti 35. marchi cucine

CURSO PROFISSIONAL DE DESIGN GRÁFICO

CV - Matheus Barros

Design Centrado no Usuário

MAIS/SEE MORE - Burel Factory

A inovação baseada no design - CATÓLICA