Portal - TCC Design

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.


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.




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.




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.




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




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.




07

ESTRUTURA RADIAL - PRÉ-CONCEPÇÃO




08

ESTRUTURA RADIAL - CONCEPÇÃO




09

ESTRUTURA RADIAL - PÓS-CONCEPÇÃO




10

APLICAÇÃO DA METODOLOGIAPRÉ-CONCEPÇÃO

PRÉ-CONCEPÇÃO - CRONOGRAMA




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




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.




13

PRÉ-CONCEPÇÃO - ANALISE DE DADOS EMPRESAS X SITES




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.




15


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





16

PRÉ-CONCEPÇÃO - ANALISE DE CONCORRENTES - RESULTADO CHECKLIST




17




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”




19

Quando á uma delimitação de conteúdo por BLOCOS a leitura fica difusa,





20


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.




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




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




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




24

APLICAÇÃO DA METODOLOGIACONCEPÇÃO




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




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.




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




28


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.




29


Geração de alternativas feita digitalmente, baseado no CHECKLIST feito dos concorrentes,uilizando as tendências e a navegabilidade do mesmo.




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.




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




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.




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.




34





35


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.




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.




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.




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.




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



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




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.




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




43

P rtalo

CONCEITUAÇÃO DA HOME PAGE




44

P rtalo




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.




46

P rtalo


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




47

P rtalo


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.




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.




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.




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




51

P rtalo

A usabilidade é a alma e a força de venda de um produto em um site.

Fonte: O autor

OBRIGADO

Portal - TCC Design

Documents

Transcript of Portal - TCC Design