Upload
others
View
1
Download
0
Embed Size (px)
Citation preview
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
Acadêmico: Felipe Somensi
Orientador: Aleteonir J. Tomasoni Junior
P rtaloXanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
01
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
P rtaloXanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
02
PROBLEMA:Como fazer com que empresas de pequeno e médio porte tenham seu primeiro website sem custos, ou a um custo relativamente baixo.
OBJETIVOS GERAIS:Desenvolvimento do layout para o portal Xanxerê, para oferecer a primeira Home Pagesem custos, com o objetivo de promover os produtos e serviços oferecidos pelas empresas da cidade de Xanxerê - SC, na internet.
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
P rtaloXanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
03
OBJETIVOS ESPECÍFICOS:
• Pesquisar o número de empresas na cidade X número de Websites.
• Pesquisar como o Design Gráfico auxilia para que o site fique mais agradável aos olhos do usuário.
• Analisar a melhor escolha de cores e formas para o site.
• Desenvolver o layout do portal e a home Page para os usuários.
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
P rtaloXanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
04
JUSTIFICATIVA:
• O inicio da internet.
• 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.
• A necessidade do mercado atual, o virtual.
• A vantagem que a internet leva sobre as outras formas de anúncios,assim criando um elo de comunicação com o usuário e fortalecendo a venda de produtos ou serviços.
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
P rtaloXanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
05
BASES DO CONHECIMENTO:
• • Design Gráfico• Web Design• Internet• Usabilidade• Direção do Olhar na Tela do Computador• Percepção Visual da Forma GESTALT• Tipografia nas Paginas da Web• Cores e Imagens• Significado das Cores• Nomenclatura das Imagens Digitais
Design
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
P rtaloXanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
06
METODOLOGIA DA PESQUISA:
Dentre todas as metodologias que pode ser seguido para o desenvolvimento do projeto gráfico, optei por trabalhar com a metodologia do Flavio Anthero dos Santos, pois é a metodologia que mais se encaixa neste projeto, conhecida também como MD3E - Método de Desdobramento em 3 etapas, este método radial, possui algumas etapasobrigatórias, a primeira etapa é a definição do problema a segunda etapa é desdobradaem mais 3 etapas básicas que são a pré-concepção - concepção e pós-concepção após estas etapas tem o gerenciamento e documentação do projeto de design, a partir das três etapas básicas o método é desdobrado em varias atividades obrigatório a serem desenvolvidas até que o projeto seja concluído.
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
P rtaloXanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
07
ESTRUTURA RADIAL - PRÉ-CONCEPÇÃO
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
P rtaloXanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
08
ESTRUTURA RADIAL - CONCEPÇÃO
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
P rtaloXanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
09
ESTRUTURA RADIAL - PÓS-CONCEPÇÃO
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
P rtaloXanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
10
APLICAÇÃO DA METODOLOGIAPRÉ-CONCEPÇÃO
PRÉ-CONCEPÇÃO - CRONOGRAMA
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
P rtaloXanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
11
• Concepção: de 15/10/2010 á 01/11/2010Quadro Conceitual, Painel Semântico, Geração de alternativa, Estrutura, Menu, Cores,Tipografia, Esboços, Digitalização, CheckList da Usabilidade e princípios da GestaltFechamento do Layout.
• Pós-Concepção: de 01/11/2010 á 22/11/2010Prazos, Impressão do Projeto, Data de Entrega, Data de Apresentação, Apresentação,Artes, Criação de demais Layouts, Fechamento de Arquivos..
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
P rtaloXanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
12
PRÉ-CONCEPÇÃO - TECNOLOGIAS
• 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.Subsistema Fireworks CS3 Adobe.Subsistema Foto shop CS3 Adobe.CorelDraw X4.
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
P rtaloXanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
13
PRÉ-CONCEPÇÃO - ANALISE DE DADOS EMPRESAS X SITES
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
P rtaloXanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
14
PRÉ-CONCEPÇÃO - ANALISE DE CONCORRENTES - CHECKLIST - UFSC
• PrestezaVerifica se o sistema informa e conduz o usuário durante a interação
• Agrupamento por localizaçãoVerifica se a distribuição espacial dos itens traduz as relações entre as informações.
• Agrupamento por formatoVerifica os formatos dos itens como meio de transmitir associações e diferenças.
• FeedbackAvalia a qualidade do feedback imediato às ações do usuário.
• LegibilidadeVerifica a legibilidade das informações apresentadas nas telas do sistema.
• ConcisãoVerifica o tamanho dos códigos e termos apresentados e introduzidos no sistema.
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
P rtaloXanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
15
PRÉ-CONCEPÇÃO - ANALISE DE CONCORRENTES - CHECKLIST - UFSC
• Ações MínimasVerifica a extensão dos diálogos estabelecidos para a realização dos objetivos do usuário.
• Densidade InformacionalAvalia a densidade informacional das telas apresentadas pelo sistema.
• Ações ExplícitasVerifica se é o usuário quem comanda explicitamente as ações do sistema.
• Controle do UsuárioAvalia as possibilidades do usuário controlar o encadeamento e a realização das ações.
• FlexibilidadeVerifica se o sistema permite personalizar as apresentações e os diálogos.
• Experiência do UsuárioAvalia se usuários com diferentes níveis de experiência têm iguais possibilidades de obter sucesso em seus objetivos.
• Proteção contra errosVerifica se o sistema oferece as oportunidades para o usuário prevenir eventuais erros.
• Mensagens de erroAvalia a qualidade das mensagens de erro enviadas aos usuários em dificuldades.
• Correção de errosVerifica as facilidades oferecidas para que o usuário possa corrigir os erros cometidos.
• ConsistênciaAvalia se é mantida uma coerência no projeto de códigos, telas e diálogos com o usuário.
• SignificadosAvalia se os códigos e denominações são claros e significativos para os usuários do sistema.
• CompatibilidadeVerifica a compatibilidade do sistema com as expectativas e necessidades do usuário em sua tarefa.
PRÉ-CONCEPÇÃO - ANALISE DE CONCORRENTES - CHECKLIST - UFSC
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
P rtaloXanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
16
PRÉ-CONCEPÇÃO - ANALISE DE CONCORRENTES - RESULTADO CHECKLIST
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
P rtaloXanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
17
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
P rtaloXanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
18
PRÉ-CONCEPÇÃO - FIXAÇÃO DO OLHAR NA TELA DO COMPUTADOR
Através de vários testes de usabilidade por NIELSEN (2007), foi comprovado que a leitura de um texto em uma tela de computador é feita através de uma leitura em “F”
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
P rtaloXanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
19
Quando á uma delimitação de conteúdo por BLOCOS a leitura fica difusa,
PRÉ-CONCEPÇÃO - FIXAÇÃO DO OLHAR NA TELA DO COMPUTADOR
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
P rtaloXanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
20
PRÉ-CONCEPÇÃO - FIXAÇÃO DO OLHAR NA TELA DO COMPUTADOR
Conforme LYNCH e HOTON existem areás com maiores prioridades aonde o olhar do usuáriopassa varias vezes, tornando assim uma aréa com prioridade de visualização.
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
P rtaloXanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
21
PRÉ-CONCEPÇÃO - ESTUDO DE CONTEÚDO
• Portal• Empresaso Busca por Empresaso Como Anunciaro Meu Panfleto Digitalo Cadastro de Usuárioo Relatórios de Acesso • Patrocinadoreso Busca por Patrocinadoreso Como Patrocinaro Modelos de Exibição o Especificação o Relatorios de Acessoo Custos• Contato
• Sistema de Gerenciamento do Link Empresaso Definição da Marcao Histórico Comercialo Contato• Sistema de Gerenciamento do Link Patrocinadoreso Marcao Endereçoo Contato
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
P rtaloXanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
22
PRÉ-CONCEPÇÃO - DELIMITAÇÃO DA GUIA DE SERVIÇOS
Academia de GinásticaAdvogado (a)Agencia de EmpregoAgencia de ViagemAgencias de PropagandaAgropecuáriaAnesteologiaAngiologia e Cirurgia VascularArquitetosAssociaçõesAuto CenterAuto PeçasAuto SomBancosBares e RestaurantesBicicletas, Motos e peças
Biro de ImpressãoCaminhõesCardiologiaCasa de CarnesCirurgia CardiovascularCirurgia GeralCirurgia TorácicaClinica de FonodiólogiaClinica de EstéticaClinico GeralColégiosComercio e RepresentaçõesConcessionáriasConstrução CivilConsultoriaCooperativa de Crédito
CrechesDentistasDermatologiaDespachantesDisk ÁguaDisk GásDisk PizzasDistribuidor de BebidasElétricos e HidráulicosEmergênciaEndocrinologiaEscolas de IdiomasEscritóriosEstofariaFarmáciasFerragens
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
P rtaloXanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
23
FisioterapeutaFloriculturaFotografia e FilmagemFuneráriaGaragem de VeículosGeriatriaGinecologia e Obstetrícia GráficasGuinchosHospitalHotéis IgrejasImobiliáriaIndustria e Comércio de MáquinasIndustria ErvateiraJoalheria e Ótica
JornaisLaboratóriosLan HouseLavanderiaLivrariasLocadora de VídeoLoja de CalçadosLoja de DecoraçõesLoja de EsportesLoja de EstofadosLoja de LinhasLoja de PresentesLojas de InformáticaLojas de RoupasLotéricasMadeireira
Medicina do TrabalhoMetalúrgicaModa IntimaMontagem de MoveisOdontopediatriaPanificadorasPapelariaPediatriaPerfumariaPlacas e LuminososPlanos de SaúdePostos de CombustíveisPostos de LavagemProdutos HospitalaresProdutos QuímicosPsicologia
PRÉ-CONCEPÇÃO - DELIMITAÇÃO DA GUIA DE SERVIÇOS
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
P rtaloXanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
24
APLICAÇÃO DA METODOLOGIACONCEPÇÃO
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
P rtaloXanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
25
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
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
P rtaloXanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
26
CONCEPÇÃO - PAINEL SEMÂNTICO
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 – Pratico, Inovador.
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
P rtaloXanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
27
CONCEPÇÃO - GERAÇÕES DE ALTERNATIVAS DA ESTRUTURA
Para a geração de alternativa da estrutura foi optado trabalhar com uma estrutura hierárquica de STANQUE (2009) aonde a leitura da estrutura é por diferentes seções, com a escolha desta estrutura uma pagina ira abrir caminho para outra pagina subordinada, a estrutura hierárquica é mais adequada para grandes níveis de organização e é excelente para grandes volumes de informações, como no caso do portal Xanxerê.
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
P rtaloXanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
28
CONCEPÇÃO - GERAÇÕES DE ALTERNATIVAS DA ESTRUTURA
ALGUMAS NORMAS DE NIELSEN (2007)
Geração de alternativas feita manualmente utilizando as normas de NIELSEN (2007)
01 - Limitar os estilos de fontes e outros atributos de formatação de texto, com tamanhos, cores, etc, na página, porque o texto com design muito pesado pode se desviar do significado das palavras.02 - Usar texto com muito contraste e cores de plano de fundo, paraque os caracteres fiquem o mais legíveis possível.03 - Manter os anúncios de empresas externas nas bordas da página.04 - Exibir o nome da empresa ou logomarca em um tamanho razoável e em um local de destaque.05 - disponibilizar para os usuários uma caixa de entrada na homepage para inserir consultas de pesquisa em vez de oferecer apenas um link para uma página de pesquisa.06 - estrutura da homepage de modo diferente de todas as outraspáginas existentes no site.07 - permitir links coloridos para indicar os estados visitados e não visitados.
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
P rtaloXanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
29
CONCEPÇÃO - GERAÇÕES DE ALTERNATIVAS DA ESTRUTURA
Geração de alternativas feita digitalmente, baseado no CHECKLIST feito dos concorrentes,uilizando as tendências e a navegabilidade do mesmo.
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
P rtaloXanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
30
CONCEPÇÃO - GERAÇÕES DE ALTERNATIVAS DOS MENUS
Para termos uma melhor usabilidade 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.
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
P rtaloXanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
31
CONCEPÇÃO - GERAÇÕES DE ALTERNATIVAS DOS MENUS
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.
CONCEPÇÃO - DIMENSÕES DOS MENUS
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
P rtaloXanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
32
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.
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
P rtaloXanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
33
CONCEPÇÃO - GERAÇÕES DE ALTERNATIVA DAS CORES
Para que o portal transmita os conceitos já pré-determinados, foi estudado as cores e os significados das cores dos concorre-ntes, após esta analise foi separado as cores que mais predo-minam nos sites concorrentes e pesquisado o que estas cores podem transmitir para o usuário, logo após este procedimento separamos as cores que transmitem os conceitos do Portal Xanxerê que também já foram definidos, com todas estas analises fizemos 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.
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
P rtaloXanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
34
CONCEPÇÃO - GERAÇÕES DE ALTERNATIVA DAS CORES
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
P rtaloXanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
35
CONCEPÇÃO - GERAÇÕES DE ALTERNATIVA DAS CORES
BRANCO - Ordem, Simplicidade, Limpeza, AnimaçãoHarmonia, Casualidade.
LARANJA - Força, Energia.
VERDE - Suavidade, Firmeza, Liberdade.
VERMELHO - Dinamismo, Movimento, Poderio, Vigor,Alegria Comunicativa.
CINZA - Seriedade, Finura.
VERDE AZULADO - Elasticidade da Vontade.
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
P rtaloXanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
36
CONCEPÇÃO - GERAÇÃO DE ALTERNATIVAS DA TIPOGRAFIA
Nome da Fonte Legibilidade On-Line Características
Arial 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.
Nome da Fonte Legibilidade On-Line Características
Verdana 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.
Analisando os concorrentes foi percebido que todos os concorrentes utilizam a mesma fonte Arial, abaixo você poderá conferir os aspectos de usabilidade da fonte Arial.
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.
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
P rtaloXanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
37
CONCEPÇÃO - APLICAÇÕES DAS CORES NOS MENUS
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.
Usar texto com muito contraste e cores de plano de fundo, para que os caracteres fiquem mais legíveis possível.
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
P rtaloXanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
38
CONCEPÇÃO - GERAÇÃO DE ALTERNATIVA DO FUNDO DA PAGINA
O fundo é parte do site aonde da uma estrutura para o conteúdo que será apresentado antes do fundo, 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 legível.
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
P rtaloXanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
39
CONCEPÇÃO - GERAÇÃO DE ALTERNATIVA DA LINHA DE FUNDO
A primeira imagem foi feita a partir da abstração da forma de uma imagem que está nos conceitos do site, a segunda imagem foi feito a partir da abstração da forma deuma imagem de fundo de um dosconcorrentes.
APLICAÇÃO DA METODOLOGIAPÓS-CONCEPÇÃO
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
Xanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
40
P rtalo
PÓS-CONCEPÇÃO - MONTAGEM E DIGITALIZAÇÃO DA HOME PAGE
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
Xanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
41
P rtalo
PÓS-CONCEPÇÃO - CHECKLIST DO PROJETO
O Checklist aqui aplicado é referente ao layout do Portal Xanxerê, com esta analise podemos 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 aonde o usuário acompanha o conteúdo de forma lógica e seqüencial.
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
Xanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
42
P rtalo
PÓS-CONCEPÇÃO
IMPRESSÃO DO PROJETOData de impressão do projeto em 20-11-2010
DATA DE ENTREGA DO PROJETOData de entrega do projeto impresso em 22-11-2010
DATA DE APRESENTAÇÃO DO PROJETOApresentação do projeto agenda para 07-12-2010
CRIAÇÃO DA APRESENTAÇÃO DO PROJETOem 25-11-2010 á 04-11-2010
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
Xanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
43
P rtalo
CONCEITUAÇÃO DA HOME PAGE
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
Xanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
44
P rtalo
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
Xanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
45
P rtalo
CONCEITUAÇÃO UTILIZANDO AS NORMAS DE NIELSEN (2007)
01
02
03 04
05
06
07
08
09 10
-L imitar os estilos de fontes e outros atributos de formatação de texto com design muito pesado pode se desviar do significado das palavras
- Usar texto com muito contraste e cores de plano de fundo, para que os caracteres fiquem o mais legíveis possível.
- Manter os anúncios de empresas externas nas bordas da pagina.- Manter os anúncios externos (anúncios de empresas diferentes
das suas) pequenos e o mais discreto possível em relação ao conteúdo central da homepage.
- Se você posicionar anúncios fora da área de banner padrão no inicio da pagina, rotule-os como publicidade, para que os usuários não os confundam com o conteúdo de seu site.
- Exibir o nome da empresa ou logotipo, em um tamanho razoável e em um local de destaque
- Incluir um link de homepage para uma seção sobre nós que oferece aos usuários uma visão geral sobre a empresa e links para todos os detalhes relevantes sobre seus produtos ou serviços, valores da empresa, proposta de negócios, equipe de gerenciamento e outros.
- Empregar letras maiúsculas e outros padrões de estilo com consistência.
- Diferenciar os links e torna-los fácil de visualizar.- Disponibilizar para os usuários uma caixa de entrada na homepage
para inserir consultar de pesquisa em vez de oferecer apenas um link para uma pagina de pesquisa.
Cada ponto vermelho com a numeração indica um aspecto conceitual de usabilidade, para identificar qual aspecto de usabilidade se refere, na tabela ao lado tem as normas que foi utilizado para a criação do layout.
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
Xanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
46
P rtalo
Cada ponto vermelho com a numeração indica um aspecto conceitual de usabilidade, para identificar qual aspecto de usabilidade se refere, na tabela ao lado tem as normas que foi utilizado para a criação do layout.
CONCEITUAÇÃO UTILIZANDO AS NORMAS DE NIELSEN (2007)
11
12
13
14
15
16
17
18 19
20
- Enfatizar as tarefas de mais alta prioridade, para que os usuários tenham um ponto de partida diferente da homepage.
- Empregar raramente todas as letras maiúsculas e nunca como um estilo de formatação.
- Facilitar o acesso aos itens apresentados recentemente na homepage, como nas duas ultimas semanas ou no mês anterior, fornecendo uma lista das ultimas apresentações e inserir itens recentes em arquivos permanentes.
- Alocar a área de navegação principal em um local bastante destacado de preferência imediatamente ao lado do corpo principal da pagina.
- Agrupar itens na área de navegação, de modo que os itens semelhantes fiquem próximos entre si.
- Estruturar a homepage de modo diferente de todas as outras paginas existentes no site.
- Incluir um link Fale Conosco, na homepage, que acessa uma pagina com todas as informações de contato de sua empresa.
- Permitir links coloridos para indicar os estados visitados e não visitados. - Oferecer aos usuários acesso direto as tarefas de alta prioridade na
homepage.- Os elementos mais críticos da pagina devem estar visíveis acima da
dobra (na primeira tela de conteúdo, sem rolar) no tamanho de janela mais predominantes (800 x 600) (na época em que este livro foi escrito).
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
Xanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
47
P rtalo
Cada ponto vermelho com a numeração indica um aspecto conceitual de usabilidade, para identificar qual aspecto de usabilidade se refere, na tabela ao lado tem as normas que foi utilizado para a criação do layout.
CONCEITUAÇÃO UTILIZANDO OS CONCEITOS DE GESTALT
21
22
23
24
25
- 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.
- A segregação signiica a capacidade perceptiva de separar, identificar, evidenciar ou destacar unidades formais em todo compositivo ou em partes deste todo.
- 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.
- 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.
- Proximidade é um elemento gráfico próximo um ao outro eles podem ser vistos separadamente ou em conjunto formando uma unidade todas, a maior característica da proximidade é a igualdade de formas podendo apenas variar a cor.
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
Xanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
48
P rtalo
CONCEITUAÇÃO PANFLETO DIGITAL
Leitura do panfleto digital em F
As fotos em uma simetria de GESTALT com continuidade
Marca da empresa e nome da empresa emum tamanho grande.
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
Xanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
49
P rtalo
DADOS TECNICOS
As dimensões da pagina são de acordo com a resolução e o navegador, o que foi definido apenassão as dimensões dos menus das tabelas e das marcas dos patrocinadores.
CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ
NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL.
Xanxerê Trabalho de Conclusão de Curso - Design Gráfico - UNOESC
50
P rtalo
FARINA, Modesto. Psicodinâmica das cores em comunicação. 4 Ed. São Paulo: 2000. MEMÒRIA, Felipe; Design para a internet: projetando a experiência perfeita. Rio de Janeiro: Campus, 2006 171 p.
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.
STANQUE, Felipe Stanque machado Junior. Interatividade e interface em um ambiente virtual de aprendizagem. Santa Maria – Rio Grande do Sul: Imed Editora, 2008.
VILLAS-BOAS, André. O que é e o que nunca foi design gráfico. 3ed. Rio de Janeiro: Ed. 2AB, 2000.
PRINCIPAIS REFERÊNCIAS BIBLIOGRÁFICAS