Proposta web design GOtype.org

PROJETO ACADÊMICO SEM FINS LUCRATIVOS MINISTRADO PELO DOCENTE WILSON LEITE, NA DISCIPLINA DE WEB DESIGN DA FACULDADE DE ARTES VISUAIS, UFG. PRODUZIDO POR GUSTAVO GONÇALVES E LUANA SANTA BRÍGIDA MAGALHÃES

PROPOSTA WEB DESIGNGOtype.org

UNIVERSIDADE FEDERAL DE GOIÁS | FACULDADE DE ARTES VISUAISARTES VISUAIS BACHARELADO EM DESIGN GRÁFICO

DISCIPLINA: WEB DESIGN | PROF. WILSON LEITE

GUSTAVO GONÇALVES E LUANA SANTA BRÍGIDA MAGALHÃESGOIÂNIA, JULHO 2013

UNIVERSIDADE FEDERAL DE GOIÁS | DESIGN GRÁFICO | WEB DESIGNGUSTAVO GONÇALVES E LUANA SANTA BRÍGIDA MAGALHÃES

SITE ATUAL

Textualização

Através da delineação gráfico-verbal do site, buscou-se uma definição da página e seus problemas no intuito de refazer a interface de forma que ela seja mais moderna e atenda as necessidades do usuário de forma eficaz.

O Site atual é praticamente monocromático, a página principal apresenta a cor preta e suas variações que passam pelo cinza e branco. Temos o amarelo que é usado para destacar uma notícia ou evento. É um site de página única (Single page website), possuindo uma página interna apenas para a parte de eventos onde é necessária a inscrição para participar dos mesmos. A quantidade de informações é limitada para facilitar o acesso e ocorre a hierarquia de informações como forma de destacar os conteúdos mais importantes dentro do site, tudo isso de forma bastante sútil para que durante a rolagem o usuário encontre de forma rápida e direta o que procura.

Como as informações são mais limitadas e o site apresenta um relacionamento mais direto com o usuário/cliente, a página apresenta um pequeno texto institucional que introduz as idéias do coletivo ao público, os links mais importantes para nortearem as ações do utilizador, informações para contato que podem ser vistas de imediato além dos links que direcionam o usuário para as diversas redes sociais.

O site visa não somente levar informações sobre tipografia, mas também dialogar visualmente com a estrutura existente no mesmo de forma harmoniosa, equilibrada, eficiente e podemos dizer que inovadora, levando em conta que muitos sites não se preocupam com a lista de fatores

que foi apresentada acima, proporcionando informações com clareza e instantaneidade aos usuários. A arquitetura do site, sua identidade visual são voltadas para a legibilidade e a praticidade da percepção.

Um bom site contribui para um melhor aproveitamento de seu conteúdo e de suas funções que estão ali para levar de forma prática e eficaz as informações e serviços ao usuário, sendo assim, a partir destes princípios e aproveitando a organização visual já existente na interface atual do site, é proposto uma nova interface com um desenvolvimento maior da comunicação entre o usuário e o próprio site. A proposta também inclui uma atualização maior no site, colocando notícias e informações recentes dentro da área tipográfica, trazendo sempre algo de novo para o usuário, fazendo com que o fluxo de acesso aumente ainda mais. Esperamos então uma maior eficiência de acesso e facilitação das funções do site e seus serviços para os usuários do mesmo.

Logo, para o desenvolvimento da nova estrutura, foram considerados fatores que faltam no site e que percebemos a necessidade que sejam adicionados, como por exemplo uma parte separada em que possam constar os eventos anteriores e a cobertura dos mesmo para que assim o usuário tenha acesso a tais acontecimentos.

Para reduzir o tempo e recursos gastos na criação de uma nova interface, pretende-se manter a estrutura do site atual que já é organizada, adicionando apenas novas modificações necessárias para um melhor desenvolvimento.


SITE ATUAL

Taxonomia | Tipocracia

Buscando então sites similares e tangenciais, recorremos a analise de sites similares dentro da categoria tipográfica, escolhendo então os sites do coletivo “Tipocracia”, que assim como o Gotype, também organizam eventos na área tipográfica e o site “daltonmaag” que é um site composto por uma equipe de tipógrafos de renome internacional, sendo voltado para o comércio de fontes.

No site Tipocracia, percebemos logo de começo o destaque para os eventos que o coletivo promove, porém percebe-se que o site carece de demais atualizações. O site apresenta uma barra de idiomas que se mostra bastante eficaz, também possui uma parte que o diferencia dos outros por apresentar uma parte onde recomendam hotéis próximos ao evento para a estadia dos participantes, porém a barra de idiomas (inglês) não funciona nesta parte, sendo que a funcionalidade da mesma seria muito importante, ainda mais para quem vem do exterior e não conhece a língua portuguesa.

No menu tipocracia, temos uma apresentação de todos os membros do coletivo e demais imagens de eventos e trabalhos produzidos pelo grupo. As cores que predominam no site são a azul marinho ( R:43 G:44 B:90) e a Vermelha (R:227 G:63 B:62), além de tons variados de cinza para a tipografia aplicada no site.

Os links que descrevem o evento em andamento são bastante funcionais, apresentando até mesmo uma página que descreve cada convidado detalhadamente.

Na parte de inscrições deparamos com um informativo de inscrições encerradas para o ultimo evento, porém o aviso consta em destaque e traz um informativo de inscrições presenciais no local do evento.

Fazendo então um apanhado das principais características do site temos os menus do evento em destaque, onde o olhar do usuário é direcionado diretamente à eles, botões na pagina principal que direcionam o usuário para as redes sociais diversas para que acompanhem o andamento dos eventos e link com local para hospedagem informando a localização e a distancia do Hotel até o local do evento. O conteúdo do site possui bastante informação e é abrangente, as cores são bem utilizadas de modo a não cansar a vista do usuário.

Fechando a análise, percebemos que o site é sucinto, feito de acordo com o tema que é a tipografia, onde percebemos uma boa diagramação da página, com áreas que ajudam no descanso do olhar e espaços para uma boa leiturabilidade dos assuntos abordados.


SITE ATUAL

Taxonomia | Tipocracia


SITE ATUAL

Taxonomia | Daltonmaag

O site Daltonmaag que é um coletivo voltado para a produção e comercialização de fontes tipográficas (também participam de eventos, porém são voltados para o comercio de fontes), logo de começo já é possível perceber na parte superior da tela os menus principais dispostos de forma hierárquica, de acordo com a importância de cada informação e logo abaixo temos outro menu que já leva o usuário direto para as categorias dos produtos oferecidos no site, no caso fontes tipográficas, isso aplicado de forma funcional pois o usuário não precisa ficar procurando pelas informações dentro de menus diversos, ele é direcionado rapidamente ao que procura. Temos também uma barra de pesquisas e a possibilidade de seleção de idiomas para Português, Inglês e Alemão.

Na parte direita do site temos outro menu voltado apenas para o processo de compra do usuário constando desde a parte da procura de fontes até o pagamento e o download das mesmas. O site dispõe de uma forma de pagamento onde o usuário seleciona seu país, sendo capaz de adquirir o produto efetuando a compra com 8 tipos de moedas diferentes, de acordo com o país de onde acessa o site.

A parte de Portfólio é bem organizada, destacando bem cada trabalho com imagens diversas, resumos do trabalho feito, explicação do conceito utilizado no trabalho entre outras informações. Possui menus e sub-menus que facilitam a navegação, como é um site de grande fluxo de usuários, possui também uma área para a conta do cliente que é bem funcional e pensada em detalhes que ajudem o usuário/

consumidor a concluir a compra de forma rápida e eficaz. Explicam bem detalhadamente sobre cada fonte comercializada.

As seções do site são bem divididas. A informação está sempre centrada no mesmo lugar facilitando a leitura do usuário e tornando a mesma mais ágil. A divisão do espaço de leitura foi feito de forma a tornar a absorção da informação mais confortável. Podemos ver até mesmo pelas cores mais fortes nas partes superiores deixando as mais claras como o azul e o branco nas partes centrais, fazendo com que se forme uma moldura cercando o conteúdo principal que está sendo visualizado no momento. As cores predominantes do site são dois tipos de cinza diferentes que são o (R:35 G:35 B:35) e (R: 68 G:68 B:68), além do ciano claro (R:221 G:240 B:244).

Por ser um site que trabalha tanto com grandes empresas quanto com consumidores que fazem aquisições menores, se encontra bem diagramado e percebe-se uma preocupação com a conceituação da empresa Dantonmaag com seus produtos.


SITE ATUAL

Taxonomia | Daltonmaag


SITE ATUAL

Lista de Verificação

1. EMPRESARazão Social: GotypeNome fantasia: Gotype

Slogan Coletivo Tipográfico

Missão “Abrimos mentes a serifadas, propomos debates, organizamos eventos, estudamos, criamos, construímos. E acima de tudo; queremos avançar. Tentamos com nossas ações alertar para a importância da tipografia enquanto forma visual da palavra e da comunicação.”

Visão “O Coletivo GOtype é um grupo sem fins lucrativos, criado com o objetivo de fomentar o cenário tipográfico no estado de Goiás através de palestras, oficinas, exposições, grupos de estudo e demais atividades.”

Ramo de atividadeColetivo Tipográfico

Cidade: GoiâniaSite: http://gotype.org/E-mail: [email protected]: http://gotype.org/#contato

Gerente de MarketingRafael Sarmento: https://www.facebook.com/rflsarmento?fref=ts

Outras informaçõesLucas Gomes (Co-founder e Diretor Financeiro)Breno Martins (Co-founder e Diretor de Criação)Rafael Sarmento (Co-funder e Diretor de Relações Públicas)Richard Melchieades (Diretor de Comunicação)


SITE ATUAL


2. CONSUMIDORInformaçõesEstudantes e profissionais de design, publicidade e comunicação visual que estejam interessados em debates no assunto. Geralmente adquirem os pacotes de palestras e workshops quando estes são promovidos pelo coletivo tipográfico.

3. BRIEFINGProduto / ServiçoServiços como palestras, oficinas, exposições, grupos de estudo e demais atividades relacionados à tipografia são vendidos a baixo custo dentro do Estado de Goiás.

Fatos e ProblemasAtualizar com mais frequência o site e retirar da parte principal os eventos que já aconteceram, dando assim espaço para novas atualizações. Promover também mais eventos dentro da área tipográfica além de fazer uma cobertura dos anteriores para que os usuários do site tenham uma noção de como estes ocorrem.

ObjetivosCriar uma cultura tipográfica local; ajudando também na divulgação da produção tipográfica tupiniquim

Promessas Incentivar o estudo do assunto entre acadêmicos e profissionais da área do Design Gráfico no Estado, alertar para a importância da tipografia enquanto forma visual da palavra e da comunicação.

Imagem do Produto / Serviço no MercadoPalestras e eventos que abrangem a área da tipografia e criações de leterings, possuem também produtos como canecas e bottons da marca Gotype.

VantagensNos eventos,o participante tem acesso a informações técnicas sobre tipografia e demais referências, fazem experimentações, desenvolvem protótipos de fontes, adquirem conhecimentos essenciais sobre tipografia e os materiais são inclusos no valor da inscrição. Os participantes também ganham horas complementares pela participação nos eventos.

Parceiros Senac-GO, Monodois, Ilustríssima, Zebrabold, Cadeg UFG, Cated SENAC, Fictícia Lab, Coletivo Centopéia, Katon Agência Digital


SITE ATUAL


Anexos ao briefing


SITE ATUAL

Observações do atendimentoO contato com o coletivo é feito por meio digital, pelos meios de contato disponibilizados no próprio site ou pelas redes sociais. A resposta é feita também através destes meios. No caso de inscrições para eventos, as mesmas ocorrem através do Google Docs onde um formulário é preenchido e a confirmação ocorre através de meio digital, por e-mail.

3. MERCADOPrincipais concorrentesDemais escritórios e coletivos dentro da área de Design em Goiânia, dos quais trabalham com eventos na área e produção de logotipos.

4. ANÁLISE SWOTPontos fortes internosO coletivo é exclusivo dentro da área de tipográfica em Goiânia, fazendo assim com que tenha um diferencial dos demais concorrentes. Seus serviços também abrangem um público que está sempre em crescimento que são os dos estudantes de Design, pessoas que trabalham na área ou que possuem interesse pelo assunto abordado. Possuem também ideias inovadoras como o “GoDrunk” onde interessados se encontram socialmente em bares para se divertirem e conversarem sobre o assunto, além de produzirem trabalhos na área tipográfica.

Pontos fracos internosAbrangem dentro do design uma área muito especifica que é a tipografia, o que pode ser também um fator negativo, sendo que é voltado para um único público, sendo que a concorrência na maioria abrangem áreas mais diversas do Design.

Ameaças externosDificuldades de encontrar pessoas com boas especializações na área por se tratar de algo muito específico.

Oportunidades externosQuebrar o preconceito que muitas pessoas possuem dentro da área da tipografia, incentivar estudantes que acabaram de entrar no curso a se interessarem pela área.


SITE ATUAL

Layout Atual | 1.0 Página Inicial


SITE ATUAL

Ambos os modelos possuem o mesmo tipo de navegação, limitando-se ao essêncial, com o uso quase inexistêntes de imagens e animações. Apesar de cores e informações diversas o layout permanece intácto. Em todo o site a família tipográfica se limita à Fontin, variando em Regular, Bold, Italic e SmallCaps.

O primeiro modelo refere-se às informações básicas sobre a empresa e serviços elementares como o contato. Composto por um menu à esquerda em fundo cinza e corpo de texto central em fundo branco.

O segundo modelo refere-se às informações sobre ao evento mais próximo já realizado ou não, portanto um link mutável, onde o conteúdo muda constantemente. Compostas por um menu à esquerda em fundo amarelo e corpo de texto central em fundo branco.

Conteúdo das páginas

O menu à esquerda sofre pequenas alterações como a tipografia que no modelo 1 se apresenta em versaletes e no modelo 2 em uma nova família tipográfica com variações de caixa-alta e caixa-baixa. Consequentemente, o espaçamento entre cada opção também é alterada.

Os grafismos permanecem os mesmos em suas devidas posições. Dentro do menu, títulos são separados por linhas tracejadas, presentes também abaixo do título no corpo de texto, finalizados com um arabesco centralizado.

A opção home pode ser acionada com o clique no logotipo à esquerda superior, ou pelo primeiro título do menu. Este é apresentado primeiramente como “início” e já no modelo 2, ganha uma nova nomenclatura “Voltar para Gotype”.


SITE ATUAL

Conteúdo das páginas


SITE ATUAL

Conteúdo das páginas em celular

1.0 início 2.0 a oficina 1.5 contato 2.4 zoom 1.0 zoom

Quando aumentado o zoom, imagens e elementos textuais são maximizados, porém o layout permanece estático, o que compromete a leiturabilidade.


SITE ATUAL

MENU 1.0

FACEBOOK

ENDEREÇO

MARCAlink home

MENU 1.1

MENU 1.2

MENU 1.3

MENU 1.4

MENU 1.5

MENU 1.6

TÍTULO(mesmo do menu)

CORPO DE TEXTO

ORNAMENTO

Fundo cinza Fundo branco Fundo cinza

BARR

A DE

RO

LAGE

M

Fonti

n Sm

all C

aps C

inza

Linh

a Tr

acej

ada

Cinz

a

Fonti

n Re

gula

r Cin

zaFo

ntin

Bold

Linh

a Tr

acej

ada

Cinz

a

Cinz

a

Wireframe M1


SITE ATUAL

Wireframe M2

MENU 1.0

FACEBOOK

ENDEREÇO

MARCAlink home

MENU 2.0

MENU 2.1

MENU 2.2

MENU 2.3

TÍTULO(mesmo do menu)

CORPO DE TEXTO

ORNAMENTOFundo amarelo Fundo branco Fundo amarelo

BARR

A DE

RO

LAGE

M

Font

e De

scon

heci

da P

reta

Linh

a Tr

acej

ada

Pret

a

Fonti

n Re

gula

r Cin

zaFo

ntin

Bold

Linh

a Tr

acej

ada

Amar

ela

Cinz

a


SITE ATUAL

ILUSTRÍSSIMA 1.6.3

link externo

CATED1.6.4

link externo

SENAC 1.6.1

link externo

ZEBRABOLD 1.6.2

link externo

O QUEFAZEMOS

1.2

M1 htmltexto

GOTYPEINÍCIO

1.0

M1 htmlbanner

PARCEIROS1.6

M1 htmllinks

POR QUE FAZEMOS

1.3

M1 htmltexto

EVENTOS1.4

M1 htmlbanner

CONTATO1.5

M1 htmlformulário

QUEM SOMOS

1.1

M1 htmltexto

INVESTIMENTOS E INCRIÇÕES 2.3

M2 htmlformulário

A OFICINA2.0

M2 htmltexto

SOBRE ÉRICO BEDELENCO 2.2

M2 htmltexto e imagem

DIAS, HORÁRIO E LOCAL 2.1

M2 htmltexto

TÍTULO DA PÁGINA

ordem numérica

Modelo da Página atributo

conteúdo

Conexão mútua

Conexãoapenas de ida

LEGENDA

Fluxograma Multi-nível


SITE ATUAL

ILUSTRÍSSIMA 1.6.3

link externo

CATED1.6.4

link externo

SENAC 1.6.1

link externo

ZEBRABOLD 1.6.2

link externo

O QUEFAZEMOS

1.2

M1 htmltexto

GOTYPEINÍCIO

1.0

M1 htmlbanner

PARCEIROS1.6

M1 htmllinks

POR QUE FAZEMOS

1.3

M1 htmltexto

EVENTOS1.4

M1 htmlbanner

CONTATO1.5

M1 htmlformulário

QUEM SOMOS

1.1

M1 htmltexto

INVESTIMENTOS E INCRIÇÕES 2.3

M2 htmlformulário

A OFICINA2.0

M2 htmltexto

SOBRE ÉRICO BEDELENCO 2.2

M2 htmltexto e imagem

DIAS, HORÁRIO E LOCAL 2.1

M2 htmltexto

TÍTULO DA PÁGINA

ordem numérica


conteúdo

Conexão mútua


LEGENDA

Fluxograma Navegação Linear | Rolagem Vertical


SITE ATUAL

Problematização

A problematização foi realizada através da análise detalhada do modelo de site atual, baseando-se nas teorias de Bruce Tognazzini.Incluem na análise aspectos como: antecipação, autonomia, daltonismo, consistência, valores que vêm por defeito, eficiência do utilizador, interfaces exploráveis, redução de tempo latente, capacidade de ser aprendido, o uso de metáforas, proteção ao trabalho do utilizador, legibilidade, monitoração de estado, navegação visível. Feita a análise estrutural, parte-se para a análise cromática e tipográfica.


SITE ATUAL

Problematização

1. Antecipação

Logo na home page o site já disponibliza informações básicas, anexadas em um link, sobre futuros eventos os quais o usuário possa ter interesse em participar. Para outros comandos, é necessário utilizar o menu fixo à esquerda ou a rolagem vertical.

2. Autonomia

A barra de rolagem vertical infinita permite a navegação em todo o site sem o intermeio do menu à esquerda. Este passa a servir como um mapa de direção, e não mais apenas como uma lista de links, o que traz agilidade e autonomia ao usuário.

A única página fora da rolagem é o anexo sobre determinado evento, o qual se encontra em uma página avulsa de mesmo modelo, incluíndo a opção “Voltar para GOtype”.

Links mudam de cor quando o mouse passa por eles, tanto no menu, de forma discreta, quanto nos banners, de cinza passam a ter a cor amarelo ovo. Isso facilita a identificação dos mesmos.


SITE ATUAL

Problematização

3. Daltonismo

A cromática utilizada no site se limita à escada de cinza, desde o branco até o preto. A única cor diversa, amarelo, é apresentada somente em assuntos relacionados aos eventos, sendo: o destaque do banner, quando o mouse permanece acima dele, e o background de sua página avulsa.

4. Consitência

Todo o site é escrito em Fontin, porém para cada tipo de texto (menu principal, menu avulso, títulos e corpo) é utilizada um estilo tipográfico diferente, mantendo a homogêniedade entre textos de mesmo carácter. A partir de princípios da gestalt, a uniformidade do estilo tipográfico possibilita o usuário conectar informações semelhantes ou diferenciar hierarquias textuais.

No fim de cada texto, um grafismo com a mesma cor do título é utilizado para sinalizar o término do mesmo, prosseguindo assim, para a próxima opção do menu.


SITE ATUAL

Problematização

5. Valores que vêm por defeito

O site possui duas possibilidades de erro, ambas no preenchimento de formulários. No primeiro caso, o erro se dá ao tentar contato com a empresa. A validação do email descrito pelo usuário não é procedente, a resposta do sistema para tal é a seguinte: “Por favor, digite um e-mail válido!”. A única opção é do usuário é “Ok” ou fechar a janela onde se encontra a mensagem.

No segundo caso, o evento da emprea já ocorreu, mas a página avulsa continua em aberto. A inscrição se faz a partir de um formulário terceirizado pelo Google, porém o usuário se frusta com a seguinte informação:

“Ups! Algo correu mal. O formulário “Formulário de Inscrição - ProtoType (com Érico Lebedenco) - SEGUNDO LOTE” já não está a aceitar respostas.Tente contactar o proprietário do formulário se pensar tratar-se de um erro.”

As opções oferecidas pelo Goggle se limitam à: “Visite o nosso centro de ajuda” ou “ Criar o seu próprio formulário”. Não há qualquer depoimento por parte do GOtype.


SITE ATUAL

Problematização

6. Eficiêcia do utilizador

A produtividade do utilizador se maximiza com a rolagem vertical, disponibilizada através do mouse ou do teclado. No caso do evento são necessários poucos comandos para se chegar ao formulário de inscrição: início ou eventos > banner > investimentos & inscrições. Dentro do corpo de texto, os dados mais importantes são apresentados em negrito, tornando a leitura mais ágil e eficaz. Porém deve-se maior atenção à seleção dessas informações, que em muitas vezes não correspondem ao título, como a página “Dias, horário e local” que o destaque se dá ao nome do palestrante “Érico Lebedenco” e às horas extracurriculares “8 horas extra curriculares”.

Imagens, animações e vídeos são evitados, permitindo que comandos sejam correspondidos rapidamente até mesmo em sistemas mais precários, mantendo o usuário sempre ocupado, sem perder tempo aguardando o carregamento de páginas.

As palavras-chaves do menu do modelo de página 1 são bem precisas, simplificadas ao máximo. Já no modelo 2, o menu possui informações excedentes como as opções “Voltar para GOtype”, “A oficina”, “Sobre Érico Lebedenco”. O formulário de contato apresenta o verbo “inserir” como informação extra em todas as opções de preenchimento. Estes excessos pertubam a dinamização das atividades realizadas pelo usuário.


SITE ATUAL

Problematização

7. Interfaces exploráveis

O site possui um sistema de navegação quase todo interligado, com apenas dois modelos de página que se distinguem, mas que mantêm a opção de início sempre disponível na logo superior e na primeira opção do menu.

Sem grandes ramificações aprofundadas, o usuário permanece em quase toda a navegação de modo linear com opções em multi-nível, o que impossibilita ser encurralado, sem opções de desfazer. Nos links avulsos, de parceiros, as páginas são abertas em uma nova aba. As duas páginas ficam em aberto, possibilitando a navegação mútua, ou simplesmente fechar a nova aba, caso tenha desistido da ação.

8. Redução de tempo latente

Ao clicar no menu esquerdo, a área textual é rolada rapidamente até a opção selecionada. Este efeito serve como uma resposta visual para o tempo esperado pelo comando.

Quando enviado uma mensagem na página de contato, a mesma se estabelece branca, com apenas uma informação inferior fornecida pelo navegador (Google Chrome). Este tempo de espera sem resposta, mesmo que curto, pode confundir e estressar o usuário.


SITE ATUAL

Problematização

9. Capacidade de ser aprendido

Quando o mouse permanece acima de links, estes mudam sua tonalidade, que varia a cada tipo, podem tornam-se mais claros ou escuros. No banner de fundo cinza, a cor amarela (utilizada como background do endereço destinatário) toma o lugar principal. A logo apesar de ser utilizada como link inicial, não muda de cor quando passado o mouse.

Imagens e banner, possuem o mesmo formato. Sua diferenciação é dada pela alteração de cor utilizada em todos os links, o que não ocorre nas imagens.

10. O uso de metáforas

O site não utiliza metáforas em seu menu ou em comandos complementares


SITE ATUAL

Problematização

11. Proteger o trabalho do utilizador

A área destinada à mensagem de contato, permanece preenchida sem ser concluída durante toda a navegação no mesmo modelo de página, porém ao muda-la, a mensagem é perdida sem nenhum tipo de alerta.

12. Legibilidade

A área textual é escrita toda em fundo branco. Escalas de cinza são a principal característica do site, presente no background do modelo 1 e em toda a tipografia, variando sua tonalidade.

O tamanho da tipografia altera de acordo a hierarquia de informação e se adequa ao monitor conectado. Não há opções de alteração no tamanho da fonte, apenas com o zoom da página completa, fornecido pelo navegador. Em campos de preenchimento, a fonte é utilizada em seu modo regular com a mesma medida do corpo de texto.


SITE ATUAL

Problematização

13. Monitorizar o estado

Como não há grandes sessões de transações de serviço, o site não possui monitoramento. Estados de informação não são salvos em cookies. Caso o usuário feche a página, está será reiniciada a partir do início.

14. Navegação visível

Os títulos e ordens das páginas se assemelham ao menu à esquerda, o que orienta o usuário aonde ele está e quais serão as próximas páginas sequenciais.

O site é divido em dois modelos, onde o cinza possui informações fixas e o segundo, amarelo, se refere aos eventos, que estão em constante alteração.


SITE ATUAL

Análise Cromática

| R1 G1 B1 |

| R221 G221 B221 | | R255 G255 B255 | | R253 G221 B0 |

| R102 G103 B102 |

| R231 G231 B231 |

| R52 G51 B51 | | R205 G204 B203 |

O site se limita à escala de cinza, com sete variações de tonalidade, apresentados como backgroung, banners e tipografia. A cor amarela se destaca referindo-se aos assustos relacionados aos novos eventos.


SITE ATUAL

Análise Tipográfica

“Em um primeiro momento o que norteou a escolha de uma tipografia foi a falta de recursos financeiros, ou seja, ela necessariamente deveria ser gratuita e que possuísse diferentes estilos no box. Logo, a tipografia escolhida foi a Fontin, desenvolvida em 2004 pelo designer Jos Buivenga da exljbris font foundry, disponibilizada gratuitamente na página oficial. http://www.exljbris.com/fontin.html” (Descrição fornecida pela GOtype em sua apresentação http://www.slideshare.net/GOType)

A família tipográfica Fontin é utilizada não só na marca, mas em todo o site, variando em Regular, Bold, Italic e SmallCaps.

E sua marca, o nome da empresa GOtype é apresentado vazado, sendo ‘‘GO” em Bold e “type” em Italic, dentro de um retângulo preto acompanhado à direita pelo slogan “COLETIVO TIPOGRÁFICO” em Small Caps

Na área branca, todo o corpo de texto é apresentado no estilo Regular, com exceção do título e alguns trechos destacados em Bold.

Dentro da caixa de contato, os comandos “Insira deu nome aqui” e “Insira seu e-mail aqui” são escritos em estilo Regular. Apenas o comando “Insira sua mensagem aqui” é escrito em Italic.

No menu à esquerda, há uma variação entre os modelos de página 1 e 2, onde no primeiro caso é apresentado em Small Caps e no segundo em uma fonte desconhecida, diferente da Fontin.

Nos banners, uma terceira fonte é designada para os títulos. O restante das informações é descrito através da Fontin Regular, Bold e Italic.


SITE ATUAL


a b c d e f g h i j k l m no p q r s t u v w x y z

A B C D E F G H I J K L M NO P Q R S T U V W X Y Z

1 2 3 4 5 6 7 8 9 0

. : . ; ‘ “ ( ? ! ) + - * / =

the quick brown fox jumps over the lazy dog. 1234567890



1 2 3 4 5 6 7 8 9 0

. : . ; ‘ “ ( ? ! ) + - * / =




1 2 3 4 5 6 7 8 9 0

. : . ; ‘ “ ( ? ! ) + - * / =




1 2 3 4 5 6 7 8 9 0

. : . ; ‘ “ ( ? ! ) + - * / =


| Fontin Regular 11pt | | Fontin Italic 11pt | | Fontin Bold 11 pt | | Fontin SmallCaps 11pt |


Nova Proposta


NOVA PROPOSTA

O principal aspecto avaliado para a adoção de um novo layout é a modernização e expansão de conteúdo, porém sem comprometer a usabilidade do site, otimizando a comunicação com o usuário.

O partido adotado mantem os dois fluxos de navegação já utilizados pelo site: multi-nível e rolagem vertical infinita. O menu é movido para a área superior da tela, onde permanece fixo e visível durante toda a navegação.

O menu é preenchido pela marca da empresa GOtype à esquerda, também utilizado como link de início; cinco páginas: Início, Eventos, Quem Somos, Contato e Parceiros; e à direita itens utilitários, como a barra de busca, ícones de plataformas eletrônicas e opção de voltar ao topo, representado por uma seta transparente.

A imagem de plano de fundo permanece fixa. Remete ao cenário tipográfico, caracterizados pelos clássicos tipos de metal. A fotografia foi retirada da internet: bibliografia. Sobre a legibilidade, o site utiliza um plano de fundo escuro e tipografia bastante contrastante, branca ou amarela. Além do escurecimento da imagem de fundo, são utilizados quadros pretos que moldam o layout do site, onde textos e ícones são acompanhados por caixas totalmente pretas com 0% de transparência, enquanto a caixa principal recebe 10%.

Afim de agilizar o entendimento do usuário, criou-se um sistema de sinalização por meio de símbolos, onde ícones são rapidamente identificados e associados com seu respectivos conteúdo.

Toda página selecionada é identificada com a cor amarela no menu superior, e título acompanhado de seu ícone na área dinâmica do site, garantindo assim maior autonomia ao usuário. Afim de diferencia-los do corpo de texto, links tipográficos são destacados por sublinhados.

As possíveis atividades que o usuário pode se interessar correspondem à: - Fazer inscrição em eventos (Página inicial ou Eventos)- Informar-se sobre próximos eventos (Página inicial ou Eventos)- Informar-se sobre o mundo tipográfico (Página inicial)- Acompanhar eventos passados (Eventos)- Conhecer a empresa (Quem somos)- Contactar com a empresa (Página inicial ou Contato)- Conhecer seus parceiros (Página inicial ou Parceiros)

Logo na página inicial já se pode realizar diversas tarefas como: atualizar-se sobre o próximo evento e abrir seu formulário de inscrição, realizar contato com a empresa, ver a última notícia postada na página ligada ao facebook, além de contectar-se aos sites parceiros.

Textualização


NOVA PROPOSTA

Na página seguinte são informados os próximos eventos a ocorrerem, com seus respectivos formulários de inscrição clicando em “inscrições abertas“ ou na própria imagem. Ao lado acompanha o texto explicativo e uma tabela contendo: data, horário, local, investimento, palestrante e material. No caso dos eventos antigos, são acompanhados por “já realizado” e o link de galeria de fotos, também disponível com o clique na imagem correspondente ao evento. Ao lado vem as informações textuais e abaixo, sua respectiva galeria, abrangindo vídeos e fotos.

A página Quem Somos é prioritariamente textual, há uma breve apresentação sobre a empresa, incluíndo subítens: O que fazemos e Por que Fazemos.

Em Contatos buscou-se um layout minimalista, com o menor número de informações possíveis, limitando-se às legendas e seus respectivos ícones. Verbos no imperativo como “escreva”, ”preencha“ foram eliminados.

Em Parceiros, encontram-se links de empresas apoiadoras representados por suas marcas.Ao fim da rolagem, uma opção descrita como “voltar ao topo” e uma frase de agradecimento.

Textualização


NOVA PROPOSTA

Novo Layout


NOVA PROPOSTA

Novo Layout | 1.0 Página Inicial


NOVA PROPOSTA

Novo Layout | 1.1 Eventos


NOVA PROPOSTA

Novo Layout | 1.1 Eventos


NOVA PROPOSTA

Novo Layout | 1.1.1 Galeria de Fotos


NOVA PROPOSTA

Novo Layout | 1.2 Quem Somos


NOVA PROPOSTA

Novo Layout | 1.3 Contato


NOVA PROPOSTA

Novo Layout | 1.4 Parceiros


NOVA PROPOSTA

ILUSTRÍSSIMA 1.4.3

link externo

CATED1.4.4

link externo

SENAC 1.4.1

link externo

ZEBRABOLD 1.4.2

link externo

Fluxograma Multi-nível

PARCEIROS 1.4M1 html

texto e links

CONTATO 1.3M1 html

formulário

QUEM SOMOS 1.2

M1 htmltexto

FACEBOOK 1.0.1

link externo

INSCRIÇÃO 1.1.1

link externo

EVENTOS 1.1M1 html

banner, texto, imagens, vídeos

TÍTULO DA PÁGINA

ordem numérica


conteúdo

Conexão mútua


LEGENDA

GALERIA1.1.2

link externo

GOTYPEINÍCIO 1.0M1 html

banner, link, formulário


NOVA PROPOSTA

ILUSTRÍSSIMA 1.4.3

link externo

CATED1.4.4

link externo

SENAC 1.4.1

link externo

ZEBRABOLD 1.4.2

link externo

QUEM SOMOS 1.2

M1 htmltexto

CONTATO 1.3M1 html

formulário

Fluxograma Linear | Rolagem Vertical

FACEBOOK 1.0.1

link externo

TÍTULO DA PÁGINA

ordem numérica


conteúdo

Conexão mútua


LEGENDA

INSCRIÇÃO 1.1.1

link externo

GOTYPEINÍCIO 1.0M1 html

banner, link, formulário

EVENTOS 1.1M1 html

banner, texto, imagens, vídeos

GALERIA 1.1.2link externo

PARCEIROS 1.4M1 html

texto e links


NOVA PROPOSTA

Wireframe | 1.0 Página Inicial


NOVA PROPOSTA

Wireframe | 1.1 Eventos


NOVA PROPOSTA

Wireframe | 1.1 Eventos


NOVA PROPOSTA

Wireframe | 1.1.1 Galeria de Fotos


NOVA PROPOSTA

Wireframe | 1.2 Quem Somos


NOVA PROPOSTA

Wireframe | 1.3 Contato


NOVA PROPOSTA

Wireframe | 1.4 Parceiros


NOVA PROPOSTA




1 2 3 4 5 6 7 8 9 0

. : . ; ‘ “ ( ? ! ) + - * / =




1 2 3 4 5 6 7 8 9 0

. : . ; ‘ “ ( ? ! ) + - * / =



A B C D E F G H I J K L M N

O P Q R S T U V W X Y Z

1 2 3 4 5 6 7 8 9 0

. : . ; ‘ “ ( ? ! ) + - * / =

the quick brown fox jumps over the lazy dog.

1234567890


A B C D E F G H I J K L M N

O P Q R S T U V W X Y Z

1 2 3 4 5 6 7 8 9 0

. : . ; ‘ “ ( ? ! ) + - * / =


1234567890

| Georgia Regular 11pt | | Georgia Italic 11pt | | Georgia Bold 11 pt | | Georgia Bold Italic 11pt |

Títulos e ícones A família tipográfica Georgia é serifada, projetada para a própria tela possui curvas simples e um espacejamento agradável, além de também ser uma das fontes mais encontradas em sistemas operacionais e browsers. Geralmente boa em tamanhos de fonte de 10pt pra cima, tem uma aparência tradicional mas com um visual mais moderno, seguindo um dos aspectos escolhidos para o novo layout.


NOVA PROPOSTA




1 2 3 4 5 6 7 8 9 0

. : . ; ‘ “ ( ? ! ) + - * / =


1234567890



1 2 3 4 5 6 7 8 9 0

. : . ; ‘ “ ( ? ! ) + - * / =


1234567890



1 2 3 4 5 6 7 8 9 0

. : . ; ‘ “ ( ? ! ) + - * / =


1234567890



1 2 3 4 5 6 7 8 9 0

. : . ; ‘ “ ( ? ! ) + - * / =


1234567890

| Univers 55 Roman 11pt | | Univers 55 Oblique 11pt | | Univers 55 Bold 11pt| | Univers 65 Bold Oblique 11pt|

Corpo de textoA Univers é considerada por muitos, um dos símbolos máxi¬mos do modernismo no design gráfico. Junto da Helvética, é uma das fontes mais utilizadas nos mais diversos trabalhos. A fonte quando aplicada em texto passa uma mancha bastante clara e simples, para que o olho do leitor não se preocupe com a letra, mas com o conteúdo, tornando assim a Univers uma fonte bastante equilibrada.

Outra característica da Univers são as ter-minações horizontais. As larguras de hastes e traços se equili¬bram para preservar os espaços em branco e manter um traço moderno, e um equilíbrio fundamental para um corpo de texto no meio digital, tornando-se também coerente para o corpo de texto do site.


NOVA PROPOSTA

Análise de Grid

1024x728 pxO formato de grid utilizada foi a modular, por ter suas colunas formadas com muitas guias horizontais, criando módulos. Esse tipo de grid é muito usado para informações tabulares, gráficos, imagens, textos, formulários e diagramas possuindo muitas vantagens com relação aos outros formatos de grid como a unificação de diver¬sos conteúdos como textos e fotos nos mesmos módulos, sendo assim a mais coerente para a diagramação do site. O formato de tela é o Widescreen (1024x768) por ser um formato agradável para a visão e possibilitar um campo mais vasto, se assemelhando ao olhar humano.


NOVA PROPOSTA

Análise Cromática

R:0 G:0 B:0R:253 G:221 B:0

Amarelo, Preto, Cinza e BrancoAs cores utilizadas como base principal para o novo layout foram a amarela, preta e branca. Preto (R:0 G:0 B:0) como plano de fundo, tipografia aplicada na cor branca (R:255 G:255 B:255) como forma de contraste e o amarelo (R: 253 G:221 B:0) como forma de destacar ícones e tipografias que estejam selecionados no momento além de situar o usuário do local onde o mesmo se encontra no site. A imagem de fundo (tipos de metal) também foi inserida com a intensão de que se comunicasse com o conteúdo do site.

R:255 G:255 B:255


NOVA PROPOSTA

Conclusão

Buscou-se uma diagramação que se comunicasse com a proposta do conteúdo e que também fosse ergonômica de forma a facilitar o acesso do usuário ao site. Buscou-se também uma interação entre texto e imagem utilizando de melhor forma o espaço da página.

A hierarquia informacional também foi colocada em destaque, de forma que os ícones fossem colocados por ordem de usabilidade para tornar o acesso ainda mais rápido e levar o usuário diretamente ao que lhe é de interesse. Esses ícones se encontram dispostos na parte superior da tela, fazendo com que o leitor perceba e leia na or¬dem proposta.

Como o site aborda o assunto tipografia, para a criação do novo layout foi buscado duas fontes que condissessem bem com o assunto, e que da mesma forma facilitaria na leiturabilidade do conteúdo. Através de testes tipográficos, foi optado por usar a Georgia nos títulos e ícones, e Univers e suas variações para o corpo de texto.

Como a quantidade de texto presente no site não é grande aproveitou-se dessa característica para utilizar cores que contrastassem na aplicação da tipografia com o plano de fundo, sendo assim, a leiturabilidade do texto se tornou clara com a aplicação do branco e do amarelo sem causar cansaço na visão do leitor, pois o corpo de texto presente em todo o site não é extenso.

Foram desenvolvidos Pictogramas para tornar o acesso ainda mais rápido, fácil e eficaz. Os pictogramas também trazem um ar mais moderno, ajuda na localização do ambiente desejado de forma mais rápida, são funcionais e ajudam na comunicação do site. Um padrão foi mantido para que ocorresse coerência entre o layout do site, seu conteúdo e os Pictogramas desenvolvidos. Para trazer um ar mais moderno e visando também sua usabilidade em dispositivos móveis, todos os ícones foram desenvolvidos com formas geométricas porém com suas bordas arredondadas, comunicando com as imagens presentes dentro do site.Foram desenvolvidos pictogramas também para as informações secundárias dentro do site como forma de facilitar a identificação de cada item (como pode ser visto na parte de eventos).

Uma barra de busca foi inserida para que o usuário caso ache necessário ou não encontre certa informação, tenha acesso de forma mais prática ao conteúdo através de tal ícone sem que seja preciso sair do site para entrar em outros canais de procura. Logo abaixo encontramos também ícones de acesso às diversas redes sociais. Uma seta de retorno ao inicio também foi desenvolvida pois além de ser um meio bastante usado em dispositivos móveis, auxilia bastante o usuário em sua navegação.

A parte de eventos foi reformulada para que o usuário tenha acesso as coberturas dos eventos anteriores, também foi disponibilizado uma parte para que o internauta possa ver as fotos e vídeos dos


NOVA PROPOSTA

Conclusão

eventos passados, trazendo assim mais credibilidade para os eventos desenvolvidos pelo coletivo tipográfico.

A parte de contatos também foi refeita de forma minimalista mantendo o padrão que se segue no site original, mudando apenas a interface (para se adequar com o novo layout), possibilitando que o usuário entre em contato com o coletivo de forma rápida, inserindo apenas o nome, e-mail, mensagem e por fim clicando no ícone enviar.

Através da preocupação com a ergonomia e com uma usabilidade funcional do site Gotype, foi desenvolvido o novo layout baseado nos conceitos de modernidade pesquisados, buscando foco nas necessidades do usuário e modificando alguns itens do mesmo, buscamos então trabalhar de modo diferenciado procurando um impacto visual de forma positiva, não nos restringindo ao convencional, se alinhando conceitualmente com o ambiente digital e com a proposta do site, procurando inovar de forma que o mesmo também tivesse um acesso eficaz através de dispositivos móveis. O site analisado “Gotype.org” é bastante funcional, por isso mantemos a estrutura de navegação do mesmo (rolagem única vertical), modificando assim o âmbito visual e trazendo para nossos estudos o que foi proposto na matéria.


NOVA PROPOSTA

Bibliografia

1. TOGNAZZINI, Bruce. First Principles of Interaction Design (traduzido por Pedro Soares Neves) <http://userdesign.org/principios.html>. Acesso em: junho/2013

Documents

Proposta web design GOtype.org