Monografia TGI Ruben Silva by Ruben Silva

Universidade Presbiteriana Mackenzie

Ruben Moreira da Silva

Criação de website: Primeira Igreja Batista de Atibaia

Orientador: Prof. Roberto Marcos Kalili São Paulo, 2009

Universidade Presbiteriana Mackenzie

Ruben Moreira da Silva

Criação de website: Primeira Igreja Batista de Atibaia Trabalho de Graduação Interdisciplinar apresentado à Faculdade de Arquitetura e Urbanismo da Universidade Presbiteriana Mackenzie, como requisito parcial para a obtenção do Título de Bacharel em Desenho Industrial – Habilitação Programação Visual

Orientador: Prof. Roberto Marcos Kalili São Paulo, 2009

Universidade Presbiteriana Mackenzie

Ruben Moreira da Silva

Prof. Roberto Marcos Kalili – Orientador Universidade Presbiteriana Mackenzie

Prof. Dr. Charles C. Vincent Universidade Presbiteriana Mackenzie

Prof. Marcos Castanha Junior Universidade Presbiteriana Mackenzie

AgradeĂ§o a Deus, pois sem Ele, nada teria sido feito. Ao professor Roberto Kalili pela orientaĂ§ĂŁo e ajuda durante todo o projeto. Aos meus pais e amigos pelo apoio e incentivo.

Resumo

Abstract

Devido ao aumento de websites, vários problemas têm surgido em decorrência de sites mal projetados, causando dificuldades na navegação dos usuários. Este trabalho tem como objetivo criar um novo website para a Primeira Igreja Batista de Atibaia (PIBA), baseando-se em alguns princípios do webdesign como: usabilidade, navegabilidade, acessibilidade e arquitetura da informação. E, após alguns estudos e pesquisas sobre o público-alvo e a instituição terem sido realizados, projetou-se um novo site de acordo com as necessidades dos usuários, visando o cumprimento de seus objetivos.

Due to the increase of websites, several problems have appeared because of poorly designed websites, causing difficulties for the users. This paper aims at creating a new website for First Baptist Church of Atibaia (PIBA), based on web design principles like usability, navigability, accessibility and informational architecture. After some studies and researches have been carried out on the audience and the institution, a new site was made according to the users’ needs in order to accomplish its objectives. Keywords: website, webdesign, church, layout, usability.

Palavras-chave: website, webdesign, igreja, layout, usabilidade.

1. Introdução.................................................................. 6 2. Fundamentação Teórica............................................ 8 2. 1. Introdução........................................................ 8 2. 2. Breve História da Web:..................................... 8 2. 3. O surgimento do webdesigner......................... 9 2. 4. O processo da criação de um site.................. 10 2. 5. Introdução à usabilidade................................ 10 2. 6. Arquitetura da Informação.............................. 11 2. 7. Navegabilidade............................................... 13 2. 8. Acessibilidade................................................ 14 2. 9. Linguagem da Web: HTML e CSS.................. 15 2. 10. Padrões na Web............................................ 16 3. Público-alvo.............................................................. 17 3. 1. Perfil e necessidades...................................... 17 3. 2. Pesquisa do Público-alvo............................... 17 3. 3. Conclusões.................................................... 18 4. Painel Semântico..................................................... 19 5. Referências Projetuais............................................ 21 5. 1. Igreja Presbiteriana do Brasil.......................... 21 5. 2. Lagoinha.com................................................ 22 5. 3. College Park Church ..................................... 23 5. 4. Broadmoor Baptist Church............................. 23 5. 5. Brainerd Baptist Church................................. 24 5. 6. The Crossings................................................ 24 5. 7. Apple............................................................. 25 6. Conteúdo.................................................................. 26 6. 1. O site atual da PIBA:...................................... 26 7. Análise da Instituição (PIBA)................................... 28 7. 1. História........................................................... 28 7. 2. Análise do Site:.............................................. 28 7. 3. Conclusões.................................................... 30

8. Projeto....................................................................... 31 8. 1. Identidade Visual............................................ 31 8. 2. Logotipo......................................................... 32 8. 3. Cores............................................................. 34 8. 4. Tipografia....................................................... 36 8. 5. Mapa do site.................................................. 37 8. 6. Grid................................................................ 38 8. 7. Wireframe....................................................... 39 8. 8. Protótipo........................................................ 40 9. Referências Bibliográficas...................................... 44 10. Websites pesquisados............................................. 46 11. Glossário................................................................... 47 12. ANEXO A – Mapa do site atual............................... 49 ANEXO B – Princípios da Usabilidade1.................. 51 ANEXO C – Web Standards..................................... 53 ANEXO D – Pesquisa Público-alvo...............................54 ANEXO E – Estudos................................................. 55

1. INTRODUÇÃO

pios básicos de usabilidade, navegabilidade e acessibilidade além de introduzir o leitor à linguagem utilizada na internet, o HTML e as folhas de estilo CSS. A partir de então, faremos uma análise do atual site da Primeira Igreja Batista de Atibaia (PIBA) e procuraremos detectar alguns problemas mais frequentes citados pelos usuários e uma vez detectados, propor novas soluções para os problemas levantados decorrentes da pesquisa previamente realizada com o público-alvo. No segundo capítulo, faremos uma introdução a alguns fundamentos básicos estudados no webdesign como a usabilidade, arquitetura da informação, navegabilidade, acessibilidade, linguagem e padrões da web normatizados pela W3C. No terceiro capítulo, faremos uma análise do público-alvo do site, quanto ao perfil de usuário, interesses, necessidades e sugestões apresentadas no resultado de uma pesquisa realizada para determinar quais problemas e dificuldades os usuários do site atual estão encontrando e, por fim, propor soluções aos problemas encontrados através de uma nova proposta de layout. No quarto capítulo será apresentado um painel semântico a respeito das características e relações dos usuários e

Devido ao constante crescimento da informática nos últimos anos, o uso da Internet teve um aumento gradativo e segundo Reis ET AL (2008), proporcionou ao usuário o acesso a um vasto conteúdo apresentado em diversos tipos de sites e páginas. Por causa disso o número de sites mal projetados também aumentou, causando um prejuízo na navegação e no uso dos sites, dificultando o acesso mais fácil e rápido a informações desejadas pelo usuário. A internet, o principal meio de comunicação deste novo século XXI, tem sido o foco de estudos para diversas áreas profissionais, incluindo o design gráfico. Tanto é que um novo profissional do ramo na área do design surgiu exclusivamente para lidar com a nova rede mundial: o webdesigner. Responsável por projetar e criar páginas da web, o webdesigner tem como principal objetivo, criar sites, páginas da web entre outros, visando principalmente, uma navegação acessível, simples e prática para todos os usuários da internet. Muitos webdesigners têm concentrado seus esforços em criar sites muito estéticos e dinâmicos, mas deixando de lado o principal diferencial da internet dentre os outros meios de comunicação: a navegabilidade. Este trabalho tem como objetivo dissertar a respeito do

membros da igreja e também, será feito um estudo de características importantes e uma reflexão sobre qual abordagem o novo website utilizará para o público-alvo estudado no capítulo anterior.

processo de criação de um website através de alguns princí-

No quinto capítulo será feita uma análise de outros sites concorrentes quanto ao layout, recursos utilizados, tipografia, estilo gráfico além de pontos positivos e negativos. No sexto capítulo será feita uma análise do conteúdo do site atual, e a partir de então, novas propostas de conteúdo serão estudadas visando a uma adaptação do site para a solução de problemas encontrados no conteúdo do site e como o novo conteúdo será organizado através da arquitetura da informação para se adaptar ao layout. Novos recursos serão sugeridos para a construção do site e uma análise de vantagens e desvantagens será realizada para fornecer ao usuário soluções e respostas aos problemas mais frequentes levantados. No sétimo capítulo, um estudo de layout será esboçado a partir do novo conteúdo e também de acordo com a análise de alguns exemplos de sites que conseguiram solucionar seus layouts. Ali serão feitos os estudos de cor, tipografia e o design de página da homepage e páginas internas possuindo variações dependendo do conteúdo apresentado e uma nova identidade visual padrão para o design do site. No oitavo capítulo, faremos uma análise da instituição da PIBA, quanto a sua história, filosofia e identidade visual e como eles são aplicados no site atual da igreja bem como foram desenvolvidos para o seu público-alvo.

No nono capítulo, será apresentada uma nova proposta de layout para o site a partir das conclusões feitas dos estudos feitos nos capítulos anteriores. Enfim, no décimo capítulo, serão apresentadas todas as etapas do projeto do novo site. Estudos e experimentações resultarão nos seguintes pontos do projeto: a logotipia do site, paleta de cor, tipografia, mapa do site, grid, estudos de wireframes e, por fim, um protótipo de algumas páginas finalizadas do website da PIBA.

2. FUNDAMENTAÇÃO TEÓRICA

Algumas razões para o sucesso podem ser citadas, como a sua arquitetura simples de estrutura de textos e hyperlinks ligados a outros documentos e a forma como a arquitetura funciona em relação ao usuário, utilizando três componentes principais: o protocolo de comunicação HTTP (Hypertext Transfer Protocol), o sistema de endereçamento URL (Uniform Resource Locator) e a linguagem HTML (Hypertext Markup Language).

2. 1. Introdução Neste capítulo, falaremos dos conceitos básicos pertinentes ao projeto de um website e dos recursos utilizados pelos webdesigners para a criação. Conceitos como a usabilidade, navegabilidade e a arquitetura de informação, entre outros, são alguns que citaremos para a compreensão de como se relacionam com o processo de criação do site.

A web é um dos meios de comunicação que disponibiliza e permite acessar informações de variados temas como ciência, religião, música, artes, ecologia, economia, bens de serviço para todo o tipo de pesquisadores. (FERREIRA ET AL, 2008)

2. 2. Breve História da Web: A World Wide Web (popularmente conhecida como Web) foi criada por Tim-Berners Lee em 1989 na Suíça a partir da invenção da linguagem de hipertextos, conhecidos como HTML (Hypertext Markup Language) que inicialmente era utilizada como uma nova maneira de transmitir informações através da nova rede. Surgiu como uma solução aos problemas para a troca de informações de diversos pesquisadores do CERN na gerência das informações sobre projetos realizados em seus laboratórios. (Winkler, Pimenta). No início, a Web era utilizada para a produção de textos

Devido a sua estrutura, a interface da Web possui elementos gráficos, imagens, sons e conteúdo textual através de elementos gráficos como barra de navegação e menu além da própria utilização dos hyperlinks para a navegação do usuário através da Web, possibilitando-o a explorar o universo de documentos disponíveis de acordo com sua preferência ou assunto. A partir de então, muitas novidades tem surgido na web em um ritmo frenético. Em poucos anos, o número de servidores web cresceu exponencialmente chegando à casa do milhão. A web tornou-se rapidamente um poderoso meio de divulgação de informa-

no formato de HTML que possuíam certa limitação em termos do visual da página e sua estrutura visual (layout) para a troca de informações e acesso de outros documentos através de hyperlinks (âncoras) para outros documentos. 9

Um dos principais objetivos do web designer é fazer com que o usuário consiga obter o máximo de informações com muita facilidade e em pouquíssimo tempo.

ção. Uma informação pode ser acessada em poucos minutos por pessoas em qualquer parte do mundo, em diferentes plataformas. (MARTINEZ, 2000)

2. 3. O surgimento do webdesigner

A preocupação fundamental do web designer é agregar os conceitos de usabilidade com o planejamento da interface, garantindo que o usuário final atinja os seus objetivos de forma agradável e intuitiva.” (WIKIPÉDIA)

Inicialmente, as páginas da web só possuíam textos com links e raramente havia uma preocupação com a estrutura do layout da página escrita. Era algo, no melhor dos casos, “acidental”. (WINKLER) Foi então que surgiu o novo tipo de designer, voltado para a criação de páginas para a web: o webdesigner.

Segundo Ferreira ET AL (2008), responsáveis pelo projeto de criação de websites, os web designers devem ter a sensibilidade de conhecer a que tipo de usuário está direcionando o seu projeto.

As páginas da Web eram montadas de maneira desajeitada e os sites cheios de links, informações inúteis sem qualquer tipo de estrutura ou organização” (LYNCH & HORTON, 2004)

Os designers têm que se colocar a distância, criarem um local onde o cliente possa falar, onde ele esteja confortável e sinta-se em casa.” (BLACK, 1997) Com a explosão de informação na Web e a necessidade das pessoas em obter mais informações de diversos lugares em pouco tempo, o surgimento de websites tem ocorrido de maneira muito intensa e surge a preocupação dos webdesigners para a criação de websites bem estruturados, com o conteúdo bem organizado estruturalmente e visualmente e com a facilidade de uso por qualquer tipo de usuário. A partir de então, estudos foram realizados para o projeto da criação de websites e conceitos como a usabilidade, nave-

Esse novo profissional foi o responsável por organizar as páginas cheias de textos em uma estrutura com maior legibilidade, hierarquia e de fácil compreensão. Ao centralizar a atenção na estrutura dos documentos, os fundadores da internet ignoravam os aspectos visuais da distribuição de informações, os quais são fundamentais para a eficácia da comunicação. (LYNCH & HORTON, 2004) 10

gabilidade, arquitetura de informação e acessibilidade foram

A escolha de dois ou mais objetivos, segundo Lynch

criados para auxiliar os webdesigners em seus projetos.

(2004), é uma das bases para o design gráfico do site. O conhecimento do perfil, necessidades, expectativas e

2. 4. O processo da criação de um site

interesses do público-alvo devem ser primordiais para a organização da estrutura do site.

No processo de criação do design de um site, o primeiro passo, segundo Lynch, é definir seus objetivos.

A estrutura, também conhecida como a arquitetura de informação, do site deve contemplar seu objetivo,

Sem ter a missão e os objetivos claramente defini-

tornando a experiência do usuário a mais confortá-

dos, o projeto ficará à deriva, encalhará ou conti-

vel e fácil possível, chamamos isso de usabilidade.

nuará até um apropriado ponto final. Um planeja-

Deve-se planejar a estrutura de forma que o usuário

mento cuidadoso e um objetivo claro são as chaves

obtenha facilmente a informação ou serviço deseja-

para o êxito na construção de sites da Internet, (...).

do. (WIKIPEDIA).

(LYNCH & HORTON, 2004) De acordo com a Wikipédia, assim como em todas as

2. 5. Introdução à usabilidade

áreas do design, o website é um projeto que necessita de uma análise de informações feitas a partir de um briefing.

De acordo com Reis B ET AL, com o avanço da internet,

No briefing são analisados os objetivos do site, o público-

a navegação na Web passa a ser uma tarefa comum a várias

alvo a quem se destina, os serviços e recursos diferenciais, a

pessoas, passando a ser uma necessidade básica.

análise de sites concorrentes e, enfim, qual será o diferencial

Por causa dessa necessidade, todo o site deveria ser

do site para o público-alvo.

projetado cuidadosamente não só no seu aspecto visual final,

O webdesigner então começa a estudar cada caso e

mas principalmente da usabilidade do site.

após a análise de cada um deles, é feita uma proposta para o

Segundo Bevan (1995), usabilidade é o termo técnico uti-

site quanto a sua estrutura, tecnologia, linguagem a ser utiliza-

lizado para descrever a qualidade da interação dos usuários

da e o layout.

com uma determinada interface. 11

A interface, quando possui algum problema na usabilidade, propicia alguns fatores que afetam seu desempenho e o usuário, ou um grupo deles encontra dificuldades para realizar determinadas tarefas no website. Por isso, de acordo com Reis, B ET AL, podemos entender que a usabilidade é a facilidade que o usuário tem ao atingir um determinado objetivo através da Interação HomemComputador (IHC). Ela oferece alguns princípios que de acordo com Nielsen (2000), determinarão o sucesso ou o fracasso do website projetado, caso o desenvolvedor não os siga.

Usabilidade é um termo usado para definir a facilidade com que as pessoas podem empregar uma ferramenta ou objeto a fim de realizar uma tarefa específica e importante. A usabilidade pode ser referir aos métodos de mensuração da usabilidade e ao estudo dos princípios por trás da eficiência percebida de um objeto. (MAYHEW, 1999) Já no webdesign, a usabilidade é vital para a compreensão de qualquer site e como o usuário irá se comportar diante de tal. Muitas vezes, o layout de um site aparenta ser algo funcional e com usabilidade, mas muitas vezes, o usuário não consegue atingir os objetivos de uma maneira satisfatória ou mais rápida do que se ele utilizasse o mesmo site como uma melhor usabilidade. Segundo Nielsen (1993) a usabilidade está associada aos seguintes princípios: • Facilidade de aprendizado; •

Um bom desenvolvedor é aquele que sabe quando seguir as regras, sabe quando não deve segui-las e principalmente, sabe quando devem ser infringidas. (NIELSEN, 2000)

2. 6. Arquitetura da Informação

Facilidade de lembrar como realizar uma tarefa após algum tempo;

•

Rapidez no desenvolvimento de tarefas;

•

Baixa taxa de erros;

•

Satisfação subjetiva do usuário.

Utilizado em meados da década de 70, o termo arquitetura da informação (AI) foi popularizado por Richard Wurman. Segundo Camargo (2004), a Arquitetura da Informação é como uma estrutura ou mapa para informações que permite aos usuários encontrar o que necessitam.

O papel do responsável por organizar toda a informação de um website, o arquiteto de informação deve ter como meta, segundo Sanches (2004), determinar os objetivos para a construção do site, escolher qual informação será mostrada ao usuário, qual o público-alvo seja interno ou externo ao site e fazer um planejamento com objetivos estabelecidos, entre outros. A arquitetura de informação ajuda o webdesigner na criação ou recriação de uma interface de um site e é utilizada para estudo como o mapa do site, fluxogramas de navegação, wireframes (esqueletos de página) e esboços das páginas do site. Na criação do website, a satisfação dos usuários deve ser a prioridade na utilização de quaisquer que sejam as páginas de uma empresa, e eles esperam que essas páginas transmitam algum tipo de informação ou conhecimento. Para tal, algumas regras criadas para toda a estrutura do site foram criadas para ajudar na navegação, acesso, e uso dos usuários.

A arquitetura da informação representa a maneira pela qual a informação é categorizada e classificada, armazenada, acessada e exibida, determinando, assim, as formas como o usuário poderá encontrar a informação que necessita. A arquitetura de informação é a planta, o mapa para a organização virtual da informação, incluindo as formas como o usuário navegará e acessará a informação. (TOMS E BLADES, 1999 APUD CAMARGO, 2004) Os métodos utilizados para a elaboração da estrutura de informação de um site para o acesso dos usuários, possibilitando cumprir seus objetivos mais rapidamente e facilmente são estudados pela arquitetura de informação. A arquitetura de informação não é uma técnica, não fornece receitas. Antes, ela é um conjunto de procedimentos metodológicos e sua aplicação não visar criar uma camisa de força no conjunto da informação de um site. [...] Cabe à arquitetura da informação balizar, sinalizar, indicar, sugerir, abrir possibilidades. (LARA FILHO, 2003)

Um importante aspecto da navegação é simplificar o site: destilar tudo para o mínimo de páginas possível com conteúdo em todas elas. O próximo passo é organizar estas páginas da forma mais simples que se possa imaginar [...] as piores coisas são sites que tem camadas e camadas de páginas com material e instruções de navegação [...] de nada

De acordo com Ferreira ET AL (2008), a arquitetura da informação vai além de um layout atrativo e design incrementado e deve-se ir além de uma interface amigável. 13

O termo navegabilidade em um sentido mais amplo, significa como se locomover em um determinado espaço. Seja andar em um corredor, viajar até a lua ou até mesmo navegar através de janelas e links na web é feita através de uma locomoção, seja espacial, seja virtual. (Agner e Moraes) No ambiente da web, a navegação consiste em clicar em hyperlinks para se chegar a uma página específica ou localizar uma informação qualquer. O problema é que o espaço na Web é infinito e a quantidade de informação e maneiras de se chegar até ela são infinitas. Por isso a navegação se torna muito complexa e difícil. Segundo Nielsen (2000) as interfaces criadas pelo designer devem ajudar o usuário a responder três perguntas:

vale ter página com uma aparência luminosa que ninguém possa encontrar nada. (BLACK, 1997) Portanto, na organização do conteúdo de um site, a arquitetura da informação deve saber qual será o seu públicoalvo e quais elementos serão necessários para uma navegação agradável ao público/usuário para que eles encontrem as informações que estão procurando naquele determinado website.

2. 7. Navegabilidade Junto com a questão de como organizar todo o conteúdo do site através da arquitetura da informação e como o usuário irá utilizar e manusear as informações e o conteúdo do site, feito por um estudo de usabilidade, há outra questão vital que o webdesigner deve sempre ter no projeto: como o usuário irá navegar por esse site? Um dos objetivos do estudo da navegabilidade é fazer com que o usuário consiga se localizar e que ele consiga chegar até o lugar desejado ou obtenha alguma informação dentro de um site. Agner e Moraes citam que procurar informações em um site tem sido uma tarefa muito frustrante por parte dos usuários. O tempo perdido para encontrar informações e o número de desistências de tentar chegar a tal página são muito grandes e faz com o usuário fique perdido no enorme mar da Web.

Onde estou? O website deve fornecer ao usuário a sua atual localização com relação à Web e com relação à própria estrutura do site, utilizando-se de vários recursos como a identidade visual do site para localizar-se e identificadores que mostrem em qual página o usuário se encontra. Segundo Nielsen (2000), a localização relativa à estrutura do site é geralmente dada mostrando-se partes da estrutura do site, destacando-se a área mais importante em que está localizada a página atual.

De onde vim?

Se algo é tão difícil de usar, eu simplesmente não uso tanto. (KRUG, 2001)

Através de links marcados, o usuário poderá identificar qual o caminho que ele percorreu para chegar àquela página. Nielsen recomenda o uso de cores padrão para os links para o usuário saber qual foi o caminho percorrido no site através dos links.

“Não me faça pensar!” [...] Este é o princípio primordial, o teste definitivo para decidir se alguma coisa funciona ou não no Web design. (KRUG, 2001)

Para onde vou? É através da organização e estruturação da página que o usuário poderá se locomover no site através dos hiperlinks que mais lhe interessarem. Geralmente são mostrados vários caminhos de uma vez, mas não todos, pois há aqueles que precisam ser percorridos através de outra página. O mapa do site é uma solução para o usuário saber quais caminhos utilizar em um determinado site. Krug (2001), um dos especialistas na área da navegabilidade na Web, diz que a navegabilidade significa apenas assegurar que algo funcione bem; que uma pessoa com habilidade e experiência média consiga usar esse “algo” – seja um site, um avião de caça ou uma porta giratória.

2. 8. Acessibilidade Acessibilidade na Web, segundo a Wikipédia, significa tornar os websites acessíveis a qualquer tipo de pessoa, seja ela possuidora de alguma necessidade especial, ou não. A World Wide Web Consortium (W3C) recomenda o uso de alguns padrões de acessibilidade para websites. Segundo Nielsen (2000) o padrão da WAI (Web Accessibility Iniciative) informa o que deve ser feito. O uso da acessibilidade no site deve ser algo padrão em sites grandes e planejar uma exposição aos estágios da acessibilidade: • A homepage e as páginas de muito acesso devem ter um novo design para se adaptar as regras de acessibilidade mais importantes imediatamente.

Há um bom princípio de navegabilidade aqui: se algo precisa de muito tempo – ou parece que precisa- é menos provável que seja usado. (KRUG, 2001)

•

Depois, todas as novas páginas, devem seguir diretrizes de maior ou menor importância, verificando

assim os conteúdos das páginas. •

O body é o elemento criado onde o atributo escolhido foi a cor de fundo. O valor escolhido para a cor de fundo foi o branco. Após isso, a etiqueta é fechada sinalizando o término do elemento “body”. Outra característica da linguagem HTML é a possibilidade de fazer hiperligações. Através da etiqueta (tag) <a> é criado um hyperlink onde é especificado o seu alvo (target) com o atributo “href”, além de outros atributos como nome (name) entre outros. Por fim, os documentos em HTML podem ser editados simplesmente por qualquer software de edição de texto, podendo combinar outras linguagens nos seus documentos como o CSS. CSS (Cascading Style Sheet), chamado de Folhas em estilo em cascata, foi uma das soluções encontradas para a formatação do código HTML. Segundo a Wikipédia, o CSS é uma linguagem de estilos utilizada para apresentação de documentos com uma linguagem de marcação como o HTML e o XML. A linguagem é a solução encontrada para melhorar o fluxo de edição de páginas inteiras de HTML, fazendo com que o formato das páginas da Web seja editado separadamente do seu conteúdo.

Após isso, as páginas de médio acesso vão recebendo um novo design para se adaptar às novas regras de acessibilidade.

2. 9. Linguagem da Web: HTML e CSS Criado por Tim Berners Lee, a linguagem HTML (HyperText Markup Language), é a linguagem de marcação utilizada na produção de documentos para a Web. É a fusão de dois padrões de linguagem, o HyTime e SGML. A linguagem foi uma solução encontrada por BernersLee para comunicação de troca de informações e documentos entre seus colegas através da rede de computadores. Segundo a Wikipédia, a solução de Berners-Lee combinada com a emergente rede mundial (a Internet) ganhou atenção mundial. A linguagem HTML utiliza etiquetas como padrão de seus documentos e através delas é que todos os elementos de um documento em HTML são formatados. Elas são sinalizadas como elementos entre dois parênteses angulares (< e >). Uma etiqueta é formada por comandos, atributos e valores, os quais podem alterar a formatação e os elementos contidos numa página em HTML. Exemplo: <body background-color=”White”></body>

O webdesign utiliza um documento à parte para especificar todos os estilos que determinadas páginas irão utilizar no documento. Com o CSS, não há mais a necessidade da formatação de cada elemento separado no código HTML, pois

•

um só documento separado do HTML contém todos os estilos de parágrafos, imagens, fontes, elementos gráficos e hyperlinks a serem utilizados numa página da Web.

Mas nesta época de crescimento avassalador, a Web necessita de orientação para desenvolver seu pleno potencial. As Web Standards são essas orientações. (W3C)

2. 10. Padrões na Web Também conhecido com Web Standards, os padrões utilizados na Web são normatizados mundialmente pela W3C (World Wide Web Consortium). Fundado em 1994 por Tim Berners-Lee, o consórcio é formado por 500 membros de várias empresas de tecnologia cujo principal objetivo é levar a Internet ao seu máximo potencial. Além da normatização e padronização de tecnologias inerentes a Internet, a W3C é responsável pela pesquisa e estudo de novas tecnologias e criação de novas aplicações da Web. Uma das funções da W3C, é orientar os desenvolvedores da Web para desenvolver todo o potencial da Web. Veja algumas vantagens do uso das Web Standards: Facilita o acesso às informações a todos. •

Torna o processo de desenvolvimento da Web mais rápido e agradável.

•

Facilita o acesso de usuários portadores de necessidades especiais.

•

Proporciona aos desenvolvedores maior flexibilidade para a criação.

Torna compatível o uso de tecnologias futuras e passadas.

3. PÚBLICO-ALVO

por motivos diversos, tais como ver informações e notícias da semana (36%), assistir o culto ao vivo (30%), ler devocionais e textos publicados no site (18%) e outros motivos (16%). Dentre as dificuldades perguntadas na pesquisa, 40% reclamaram do tempo de carregamento de determinada página, 33% afirmaram não ter conseguido encontrar algo específico no site e outros problemas não mencionados (27%). Ninguém assinalou a opção da dificuldade de leitura. Foram apresentadas algumas sugestões para alteração no site: • Necessidade da criação de um novo layout;

3. 1. Perfil e necessidades Formada por aproximadamente 1200 membros, a Primeira Igreja Batista de Atibaia possui uma grande diversidade de pessoas, abrangendo todas as faixas etárias, financeiras, culturais e sociais. Devido à variedade de pessoas, o uso da Internet também é o mais variado possível. Dentre alguns dos objetivos do site atual estão: facilitar a comunicação entre a igreja (instituição) com os seus membros (pessoas), fornecer informações atualizadas de quem é a igreja, quais são os seus ministérios e programas, explicar a sua missão e objetivos, permitir o acesso para assistir o culto ao vivo, dentre outros. Alguns desses objetivos não estão sendo cumpridos inteiramente, pois vários erros tem ocorrido durante a navegação dos usuários no site. O site atual não tem atingido as expectativas dos membros da igreja por diversos motivos conforme será exposto a seguir.

3. 2. Pesquisa do público-alvo A pesquisa de público-alvo foi realizada com 6% do total de membros da igreja. Destes, 92% possuíam ao menos um computador e em 67% dos casos, as conexões à rede era feita com banda larga. Já 82% acessaram o site da igreja 18

•

Mais atualidades e velocidade no site;

•

Conteúdo com tópicos mais específicos;

•

Fotos dos membros;

•

Mais interatividade, melhores links e maior destaque nas seções;

•

Mudar a paleta de cor (sem utilizar o tom amarelo);

•

Mais simplicidade no acesso ao site;

•

Disponibilização de mensagens dos cultos no site

•

Possibilitar o acesso a arquivos SQL e atualizar mais rápido as páginas;

•

Atualizar com mais freqüência o conteúdo do site;

•

Arquivos em mp3 para download e ouvir no próprio site;

•

Mais dinamismo no site;

•

Colocar letras de hinos e motivos de oração;

•

Incluir o ministério das Mulheres Cristãs em Ação (MCA);

•

Às vezes, há falta de precisão nas imagens;

•

Tornar público agradecimentos;

•

Aniversariantes;

•

Usar recursos de Flash;

•

Manter sempre atualizados, e atualizar cada área e ministérios.

notícia ou imagem mais recente a respeito da igreja. A necessidade de atualização constante é algo que deve ocorrer em vários níveis dependendo do tipo de conteúdo da página do site. Algumas páginas devem ser atualizadas todos os dias, outras semanalmente e outras anualmente. Outra sugestão importante para se acrescentar no novo layout é a definição do layout do site. O que é box, o que é matéria em destaque, o que são informações institucionais, etc.

3. 3. Conclusões A maior sugestão feita pelos usuários foi para agilizar o tempo levado para carregar a página principal, além de outras páginas internas. A necessidade de uma navegação simples e rápida é uma das soluções para a proposta do novo layout do site. Outra sugestão citada foi a necessidade da atualização constante do conteúdo do site. Os anos vão se passando, pessoas se tornando membros e notícias e imagens não são atualizadas, causando frustração do usuário ao procurar uma 19

4. PAINEL SEMÂNTICO A Primeira Igreja Batista de Atibaia se caracteriza por valorizar o ensino da Bíblia a todas as faixas etárias, desde a infância até a fase idosa. Existem diversas atividades com o objetivo de integração destes grupos entre si. A igreja possui também uma característica muito forte para missões (evangelismo) que reflete muito nas suas dependências físicas. O ginásio multiuso é marco da igreja pois denota a preocupação com a sua utilização para diversos fins como cultos, esportes, palestras, casamentos, restaurante, apresentações musicais. Maior é o investimento para missões do que para a infraestrutura, tanto que a igreja não se preocupa muito com a aparência de sua propriedade (templos suntuosos, cadeiras confortáveis e nem equipamentos de última geração são características da PIBA). Algumas fotos foram escolhidas para mostrar as diversas reuniões e eventos que são realizadas nos mesmo locais, dando o exemplo do multiuso dos locais da igreja. Também algumas fotos de membros em atividades diversas.

5. REFERÊNCIAS PROJETUAIS Alguns sites de outras instituições e organizações foram pesquisados no quesito de layout, recursos, organização, estilo gráfico além de usabilidade e facilidade de navegação. Foram classificados em 3 categorias: tradicional, arrojado e minimalista. No estilo tradicional, a principal característica é o excesso de informações combinado com um layout simples. Já no estilo minimalista, o grid é a principal característica, aliado a um estudo minucioso da tipografia do site. Geralmente é monocromático. Por fim, o estilo arrojado é o estilo onde a parte estética é o maior destaque. Utiliza-se muitas cores e texturas fazendo assim uma combinação harmoniosa ou não com o conteúdo. Cumpre observar alguns sites pesquisados: Figura 1: homepage da Igreja Presbiteriana do Brasil

5. 1. Igreja Presbiteriana do Brasil

Adota um layout tradicional de 3 colunas utilizando módulos para a diagramação dos elementos do site. Tem também um bom uso de cor, sem muita poluição visual. O excesso de informações dificulta uma navegação simples e a usabilidade é comprometida devido a links sem padronização no estilo, além de utilizar fontes de corpo inadequado que dificultam a leitura.

http://www.ipb.org.br/ Este portal possui recursos como site de notícias, vídeos, RSS, rádio e programação online além de arquivos para download. Este site reúne várias igrejas do Brasil inteiro, destacando as notícias e eventos ocorridos pelo país.

5. 2. Lagoinha.com http://www.lagoinha.com/engine.php Site institucional da Igreja Batista da Lagoinha. Divide-se em 5 grandes categorias: a igreja, multimídia, vida cristã, entretenimento, blogs, notícias, diversos. Possui um layout limpo devido a utilização de poucas cores. A navegação e usabilidade são os pontos fortes do portal por haver uma hierarquia bem definida pela tipografia, além de exibir recursos fundamentais como área que o usuário está navegando, busca e mapa do site. Este site se destaca por oferecer várias opções ao usuário sobre a instituição, possuindo uma organização muito boa sobre seu vasto conteúdo. Não dispõe muito de recursos gráficos, e por isso pode se considerar um site minimalista.

Figura 2: homepage da Lagoinha.com

Figura 3: homepage da College Park Church

Figura 4: homepage da Broadmoor Baptist Church

5. 4. Broadmoor Baptist Church

5. 3. College Park Church

http://www.broadmoor.org/ Possuí um excelente design no quesito simplicidade com uma fácil navegação através de uma barra de navegação fixa. Tipografia de boa leitura (Helvética) e uso de tons básicos no layout (tons de cinza e o azul).

http://www.yourchurch.com Site de uma igreja norte-americana que utiliza um layout simples com uma barra de navegação no formato de abas que facilita a localização das páginas internas do site. Outra característica é a combinação de cores contendo tons mais claros e escuros, propiciando um belo visual final da homepage.

Ótimo exemplo de um site minimalista que exemplifica o princípio de que “menos é mais”. 24

Figura 5: homepage da Brainerd Baptist Church

Figura 6: homepage The Crossings

5. 5. Brainerd Baptist Church

5. 6. The Crossings

http://www.brainerdbaptist.org/index.php Outra referência com poucos elementos gráficos com um acabamento mais encorpado, o site possui uma combinação muito interessante de cores além de utilizar uma tipografia neutra e de boa leitura. O fundo brando é algo fundamental para o equilíbrio dos elementos diagramados no layout do site.

http://www.thecrossings.cc/ Site bem construído que utiliza somente elementos necessários no layout, como uma introdução e uma navegação padrão para páginas internas do site. Possui boa combinação de cores, apesar de utilizar tons mais escuros e um bom uso da tipografia sem serifa.

5. 7. Apple http://www.apple.com/ Um dos sites mais acessados do mundo, contém visualmente a essência da marca: simplicidade e elegância. Usabilidade como o maior ponto forte do projeto além de uma perfeita harmonia dos tons com a tipografia.

Figura 7: homepage da Apple Inc.

6. CONTEÚDO

6. 1. O site atual da PIBA:

O website atual da Primeira Igreja Batista de Atibaia exibe informações desatualizadas contendo erros, além de não possuir um estilo fixo e próprio utilizado para os menus e textos. A homepage do site assim está organizada:

1 - Cabeçalho: •

Possui o logo da igreja mais uma referência ao URL do site em destaque, sendo que isso não é mais necessário, uma vez que o usuário já conseguiu atingir o objetivo de chegar a homepage.

•

O logo possui o símbolo da igreja, mas está desmembrado dos tipos do nome da igreja, assim como também do “slogan” utilizado por ela no seu logo (colocar figura do logo da PIBA).

•

Um espaço que poderia ser mais bem aproveitado e um espaço reservado para buscas no site seria ideal para o usuário que deseja procurar por algo no site.

•

É uma boa solução, pois possibilita a utilização por vários sites, ajudando assim sua visualização logo de imediato por usuários novatos e que nunca estiveram no site.

•

A barra possui algumas falhas tais como:

2 - Barra de Navegação: •

Exibe todos os links para todas as páginas do site e ele se “abre” em múltiplos submenus que afunilam para páginas mais específicas do site. 27

•

o usuário terá que escolher a páginas específicas que quer visualizar por não haver uma página com mais detalhes de cada subpágina que o usuário gostaria de ver.

•

Algumas abas possuem itens demais, ocultando a visualização de elementos da página inicial do site.

•

Também não há uma marcação para dizer ao usuário em que página ele está exatamente: ex: você está na seção ministérios na página das crianças.

•

Não há um box para buscas.

site exatamente o usuário estará entrando) juntamente com uma frase que exemplifica a filosofia da igreja, e também com uma foto para identificação do pastor titular, mas sem um link para uma página com sua biografia. •

5 - Coluna Direita:

3 - Coluna Esquerda: •

Quase nula, essa barra possui alguns itens repetidos da barra de navegação superior, juntamente com alguns itens novos que não guardam muita relação com os outros itens presentes na coluna, levando muitas vezes a páginas ainda em construção ou desatualizadas. 4 - Coluna central:

•

Na parte mais inferior da coluna central, encontramos alguma informações pertinentes para os membros tais como, pedidos de mensagens, dados bancários e um link para a visualização do calendário (sem especificar a periodicidade) da organização.

Possui vários links de notícias recentes para páginas no interior do site (não especifica qual área do

•

Local onde há maior destaque para links de notícias mais recentes da igreja bem como divulgação de eventos e programações.

•

Localizado nesta coluna, está o link mais visitado do site, segundo dados do webmaster, que é o acesso para assistir ao culto da igreja ao vivo. Muito tímido para ser o link mais acessado e não está com o destaque que mereceria, podendo ser transferido para a parte de cima do site ou na coluna principal, atraindo assim o usuário para uma atenção maior.

7. ANÁLISE DA INSTITUIÇÃO (PIBA)

7. 2. Análise do Site:

7. 1. História

Nesta seção, abordaremos o problema do projeto macro e em partes menores para melhor compreensão. Atualmente, o website da Primeira Igreja Batista de Atibaia possui uma grande lista de erros frequentes que leva o usuário à não-realização efetiva de seus objetivos, seja qual for a página navegada. Observações do site atual: • Problemas na localização de páginas específicas no site;

No dia de 8 de novembro de 1980, a Primeira Igreja Batista de Atibaia foi fundada com 42 membros sob a liderança dos pastores Antonio Mendes Gonsales e Karl Lachler, hoje seu pastor emérito. No início, a igreja se reunia em lares de famílias. Com o aumento do número de pessoas, um novo local foi adquirido pela Convenção Batista do Estado de São Paulo e logo uma capela foi construída para ser o local das reuniões. Em 1987, foram iniciadas obras para a expansão da área, tendo sido construído um novo prédio, na parte posterior do

• Links com falhas; • Informações e notícias com conteúdo desatualizado; • Falta de recursos como um mecanismo de busca e localização de qual seção o usuário se situa (você está aqui) ou popularmente conhecido como “migalhas de pão”;

terreno. Logo, um novo salão para cultos foi finalizado, e logo foi verificado que não seria suficiente para tantas pessoas. Então, em dezembro de 1995, a igreja adquiriu um novo terreno de 8.000 m2 em permuta com o terreno anterior. Em abril de 1996, foi inaugurado um ginásio de esportes o qual é utilizado atualmente para diversos fins, além de ser o local para as reuniões dominicais. Durante os anos seguintes, dois novos prédios foram construídos a fim de possibilitar o uso de mais salas para a educação religiosa e atividades sociais. Mais tarde, o ginásio também seria ampliado possibilitando maior capacidade.

• Site modulado, feito a partir de template; • Algumas funções não funcionam, tais como o login e a intranet. Conforme já dito anteriormente, o atual website da PIBA tem sido utilizado principalmente para a visualização dos cultos ao vivo (transmissão via streaming) além de ser um dos principais meios de acesso às informações sobre a igreja, principalmente para quem está fora do país. 29

Um dos focos do novo projeto é fazer do website, um local onde os membros se relacionem entre si, e entre a igreja, seja em qualquer lugar que estejam no mundo. Também objetiva possibilitar o acesso à informações dos membros (ou não) da igreja tais como: • Em qual local a igreja está situada;

complexo e muitas vezes incompleto. • Sempre manter a identidade visual do site padrão com a da igreja como um todo e associar as áreas do site com a identidade visual do site. Pequenas alterações em cada subseção do site para que o usuário perceba em que local está no site.

• Quem são os membros;

• O conteúdo está confuso, pois está agrupado em divisões sem lógica. Diminuir a quantidade de links e fornecer ao usuário o caminho simples para a informação que ele está funcionando.

• A equipe de pastores e líderes da igreja; • História, filosofia e doutrina; • Detalhes sobre cada atividade que a igreja desenvolve tais como eventos, fotos, testemunhos (blog), artigos e outros.

• Muito dos links do site aparecem somente na página principal, fazendo com que o usuário volte para a página inicial.

Algumas necessidades relevantes no projeto do novo site: • Os membros e os não-membros possuem visões e conhecimentos completamente diferentes sobre a igreja, portanto, uma possível solução para isso, seria a criação de dois caminhos no início do site: para membros e não-membros.

Feita a análise desses principais problemas, podemos agora propor algumas soluções para algumas áreas, tais como: Layout, arquitetura do site, navegação e usabilidade.

• Há o usuário que sabe o que está procurando no site, mas não há um sistema de busca. Outro tipo de usuário tenta explorar o conteúdo do site, mas muitas vezes não consegue achar o que está procurando. Mas muitas vezes para ambos, o caminho é muito

Por causa do público-alvo variado da igreja, o novo site ainda possuirá alguns elementos do antigo tais como a disposição da barra de navegação abaixo do cabeçalho do site. A partir das análises do site existente feitas do ponto de

7. 3. Conclusões

vista dos princípios do Webdesign a partir da pesquisa reali-

zada com os membros da igreja, concluímos que o site atual possui algumas falhas de navegação, falhas na organização da sua estrutura, tanto visualmente quanto do conteúdo apresentado (desatualizado e incompleto). O objetivo do projeto de um novo layout para o site será reorganizar sua estrutura e seu conteúdo, fazendo com que ele seja facilmente atualizado, desenhado com um layout simples, elegante e moderno, sem fugir ao conceito da igreja.

8. PROJETO

destas características pertinentes pesquisadas para a elaboração de uma identidade visual: Em primeiro lugar, palavras-chave que caracterizam a instituição tais como: seriedade, compromisso, bíblica, neutra, fiel, tradição, serenidade, objetivo, família, adoração, devoção, comunhão, ensino, pregação, evangelho, hospital, casa, acolhedora. De acordo com a pesquisa feita com os membros da instituição e a pesquisa baseada na identidade visual da igreja, o conceito utilizado neste novo site será o funcionalismo. Baseado no princípio utilizado na escola alemã Bauhaus de que “a forma segue a função”, o novo layout terá como base um grid de 960 pixels, considerado por muitos o padrão para a maioria dos monitores. Além de ter como objetivo apresentar conteúdo de maneira rápida e fácil para os usuários, a PIBA optará por apresentar sua instituição de maneira simples, rápida e funcional, cujo conceito do novo website baseia-se na seriedade da pregação e ensino da Bíblia. De um lado, um visual mais formal e simples, por outro, mais humano. A PIBA acredita que a igreja é um conjunto de pessoas e não uma simples propriedade. Por isso, é necessário mostrar ao usuário (seja membro ou visitante) que a igreja é uma família com pessoas

Considerando as pesquisas realizadas quanto ao processo de criação de um website de acordo com os princípios do webdesign, pesquisa do público-alvo, painéis semânticos e concorrência, segue abaixo o briefing realizado do projeto de criação do website da PIBA: • Criar um novo website que represente a ideologia e filosofia da instituição graficamente além de focar principalmente o acesso ao conteúdo de forma ágil, objetiva e dinâmica para todas as faixas etárias. •

Reduzir o conteúdo do site atual fazendo com que este apresente o conteúdo de forma objetiva e de simples leitura.

•

Inserir novos recursos ao site como vídeos, áudios, RSS, twitter, transmissão ao vivo de eventos e arquivos para downloads.

•

Valorizar mais o conteúdo do que a forma, fazendo com que o layout funcione a favor da navegação e uso do usuário.

•

Criar um sistema de busca interno do site.

que se relacionam entre si. Desde cultos e reuniões a almoços e casamentos, o novo site procurará mostrar visualmente a comunhão dos membros. Sendo assim, cada página do site terá uma imagem de abertura, apresentando visualmente a filosofia, os membros,

8. 1. Identidade Visual A identidade Visual da PIBA está atrelada ao conjunto de características que a sua essência possui. Vejamos algumas 32

cultos, entre outros para humanizar o site sem que se perca o aspecto funcional, formal e simples a que se propõe o projeto. Segue abaixo alguns itens de cada processo do projeto da criação do site e no final uma prévia de algumas páginas do novo site.

8. 2. Logotipo O logotipo atual da PIBA é formado por uma cruz, um globo e uma aliança que simboliza a nova aliança de Cristo através da cruz com o mundo. Há também a sigla “PIBA” escrito logo abaixo do símbolo com um dizer abaixo apos um traço (sempre servindo a Cristo) Para este projeto, foram feitas algumas alterações do logotipo original: 1. Foi acrescentado um traço (stroke) em cada elemento do símbolo para haver um maior contraste entre os elementos e sua melhor visualização. 2.

As cores foram padronizadas tanto para a sua aplicação na web como em impressos.

A tipografia foi alterada para a fonte Helvética.

Abaixo segue as principais mudanças que ocorreram no logotipo e o processo de padronização para a sua aplicação no novo website da instituição.

Primeira Igreja Batista de Atibaia

Sempre servindo a Cristo

8. 3. Cores As cores utilizadas neste projeto tem como matrizes as cores azul marinho e o cinza escuro objetivando enfatizar a seriedade e a clareza da mensagem da PIBA. Além da paleta de cores utilizada no logotipo, uma escala de tons complementares foi criada para a sua aplicação nos elementos do site (botões, boxes, tipografia, fundo e etc...) Para a criação da paleta de cores, foi utilizado o adobe Estudos - cor kuler que exibe todas as especificações doslogotipo modos de cor.

R=22 G=81 B=119

R=255 G=198 B=56

R=204 G=8 B=0

C=95 M=68 Y=32 K=15

C=0 M=23 Y=88 K=0

C=13 M=100 Y=100 K=4

#165177

#FFC638

#CC0800

Estudos - cores

R=109 G=110 B=113

R=147 G=149 B=152

R=188 G=190 B=192

R=220 G=221 B=222

R=255 G=255 B=255

R=222 G=241 B=245

R=163 G=213 B=226

R=62 G=116 B=154

R=26 G=82 B=120

R=252 G=180 B=22

R=203 G=33 B=40

C=58 M=49 Y=46 K=15

C=45 M=36 Y=35 K=1

C=26 M=20 Y=20 K=0

C=12 M=9 Y=9 K=0

C=0 M=0 Y=0 K=0

C=12 M=0 Y=3 K=0

C=34 M=3 Y=9 K=0

C=80 M=49 Y=25 K=3

C=94 M=68 Y=32 K=14

C=1 M=32 Y=100 K=0

C=14 M=100 Y=97 K=4

#6D6E71

#939598

#BCBEC0

#DCDDDE

#FFFFFF

#DEF1F5

#A3D5E2

#3E749A

#1A5278

#FCB416

#CB2128

Estudos - tipografia 8. 4. Tipografia Reconhecida como a fonte mais utilizada no mundo, a Helvética é um exemplo do conceito do funcionalismo utilizado no site. É uma fonte universal que facilita a leitura da informação qualquer que seja a distância e em qualquer tipo de mídia que ela será aplicada. Visa uma leitura agradável e objetiva de todo o conteúdo do site, havendo várias mudanças na sua família, dependendo da hierarquia utilizada na página. Exemplos:

Texto Helvetica Regular 12pt ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@#$%^&*()

Helvetica Bold 12pt ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@#$%^&*()

Helvetica Oblique 12pt ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@#$%^&*()

Helvetica Bold Oblique 12pt ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@#$%^&*()

Página Helvetica Bold 18pt ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@#$%^&*() Subtítulo Helvetica Bold 14pt ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@#$%^&*()

8. 5. Mapa do site RSS

Todo o conteúdo do site foi reformulado com os objetivos: • Facilitar a busca do conteúdo; •

Apresentar de maneira objetiva, simples e resumida toda a instituição;

•

Melhorar a maneira de navegação entre as páginas, criando uma seção principal contendo várias subseções para melhor visualização.

Twitter

Homepage

O novo mapa do site foi acrescentado com alguns recursos como uma barra de buscas e outros destaques além de uma seção de downloads.

Grid

960px

40px 10px

8. 6. Grid

40px

40px 20px

20px

10px

Este formato é o que melhor se adéqua para vários monitores sendo o de 1024 por 720 pixels como padrão. O layout foi dividido em 3 colunas de mesmo tamanho podendo fazer várias alterações no formato de diagramação.

O grid utilizado no projeto do site foi de 16 colunas de 40 pixels, com uma margem de 20 pixels entre cada coluna, perfazendo um total de 960 pixels de comprimento para o site. 39

8. 7. Wireframe Wireframe é basicamente o esqueleto do website. Criado a partir de um modelo (template), as diversas páginas foram diagramadas utilizando um conteúdo falso para efeito de visualização.

8. 8. Protótipo Por fim, após os estudos diversos de wireframes, um protótipo do site foi criado contendo cinco páginas para a navegação experimental e visualização do resultado final do projeto pretendido. As páginas exibidas a seguir serão alguns das páginas criadas para compor o site da PIBA.

9. REFERÊNCIAS BIBLIOGRÁFICAS

MARTINEZ, Maria Laura - Usabilidade no design gráfico de web sites disponível em: http://www.lsi.usp.br/~martinez/ works/_artigos/martinez00a.pdf

BEVAN, N. (1995) Usability is quality of use. In: Anzai & Ogawa (eds) Proc. 6th International Conference on Human Computer Interation, July. Elsevier. http://www.usability.serco.com/ papers/usabis95.pdf

MAYHEW, D.J. The usability engineering lifecycle: a practioner’s handbook for user interface design. San Francisco: Morgan Kaufmann. 1999.

BLACK, R. Web sites que funcionam. Tradução Túlio Camargo da Silva. São Paulo: Editora Quark do Brasil Ltda, 1997.

NIELSEN, J. (1993) Usability engineering. Boston - USA: Academic Press, 362 p.

CAMARGO, L.S.A.. Arquitetura da Informação para Biblioteca Digital Personalizável. 2004. 143 f. Dissertação (mestrado em Ciência da Informação) – Faculdade de Filosofia e Ciências, Universidade Estadual Paulista, Marília, 2004.

__________. Projetando Websites; tradução de Ana Gibson. Rio de Janeiro: Elsevier, 2000. REIS, Breno; MOURA, Renan; SODRÉ, Alidia. Usabilidade em interfaces acadêmicas, Goiânia, Instituto Construir e Conhecer,

KRUG, S. Não me faça pensar!: Uma abordagem do bom senso à navegabilidade na web. São Paulo, 2001

2008. SANCHES, S.A.S. Arquitetura da Informação de Web sites: elementos, técnicas e métodos. 2004. 145 f. Trabalho de Conclusão de Curso (Bacharelado em Biblioteconomia) – Faculdade de Filosofia e Ciências, Universidade Estadual Paulista, Marília, 2004.

LARA FILHO, D. O fio de Adriadne e a arquitetura da informação na WWW. DataGramaZero - Revista de Ciência da Informação, v.4 n. 6, dez. 2003. Disponível em <http://www.dgz. org.br/dez03/Art_02.htm> LYNCH, Patrick J.; HORTON, Sarah. Guia de estilo da web: princípios básicos de design para a criação de web sites. Bar-

VECHIATO, Fernando L.; FERREIRA, Ana Maria J.F.C.; VIDOTTI, Silvana A.B.G. - Arquitetura da informação de web sites: um enfoque à Universidade Aberta À Terceira Idade (UNATI) – Re-

celona: Gustavo Gili, 2004.

vista de Iniciação Científica da FFC, 2008 - portalppgci.marilia. unesp.br. Disponível em http://www.portalppgci.marilia.unesp. br/ric/include/getdoc.php?id=416&article=138&mode=pdf Web design - Wikipedia. Disponível em <http://pt.wikipedia. org/wiki/Web_design> acessado em 21-05-09. WINCKLER, Marco; PIMENTA Marcelo S. Avaliação de Usabilidade de Sites Web - Disponível em <http://www.funtec.org.ar/ usabilidadsitiosweb.pdf> acessado em 21-05-2009

10. WEBSITES PESQUISADOS

http://ministrycss.com/ http://pt-br.www.mozilla.com/pt-BR/firefox/

http://960.gs/

http://www.onextrapixel.com

http://http://www.apple.com/

http://scholar.google.com.br/schhp?hl=pt-BR

http://www.brainerdbaptist.org/index.php

http://www.scribd.com/

http://www.broadmoor.org/

http://www.smashingmagazine.com/

http://churchrelevance.com/best-church-web-design-gallerytop-85-sites/

http://www.thecrossings.cc/

http://www.csszengarden.com/

http://www.thegridsystem.org/

http://www.faithconnector.com/go/our-church-website-designs

http://www.useit.com/

http://www.google.com.br

http://vandelaydesign.com/blog/galleries/best-church-websites/

http://www.ipb.org.br/

http://www.w3.org/

http://kuler.adobe.com/

http://www.webdesignerdepot.com/

http://www.lagoinha.com/engine.php

http://pt.wikipedia.org/wiki/P%C3%A1gina_principal

http://www.lipsum.com/

http://www.yourchurch.com/

http://maujor.com/index.php http://www.metodista.org.br/ 47

11. GLOSSÁRIO

Interface: O conceito se expressa pela presença de uma ou mais ferramentas para o uso e movimentação de qualquer sistema de informações, seja ele material, seja ele virtual.

Briefing: é um conjunto de informações passadas em uma reunião para o desenvolvimento de um trabalhoCSS:

Internet: é um conglomerado de redes em escala mundial de milhões de computadores interligados pelo TCP/IP que permite o acesso a informações e todo tipo de transferência de dados.

Feedback: retroinformação; comentários e informações sobre algo que já foi feito com o objetivo de avaliação Flash: é um software primariamente de gráfico vetorial utilizado geralmente para a criação de animações interativas.

Layout: (ou Leiaute) é um esboço mostrando a distribuição física, tamanhos e pesos de elementos como texto, gráficos ou figuras num determinado espaço.

Homepage: É a página inicial de um site da internet. Compreende uma apresentação do site e de todo seu conteúdo.

Slogan: ou frase de efeito é uma frase de fácil memorização usada em contexto político, religioso ou comercial como uma expressão repetitiva de uma idéia ou propósito.

HTML: HyperText Markup Language ( que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir páginas na Web.

Streaming: (fluxo, ou fluxo de mídia em português) é uma forma de distribuir informação multimídia numa rede através de pacotes.

HTTP: Hypertext Transfer Protocol (ou o acrônimo HTTP; do inglês, Protocolo de Transferência de Hipertexto) é um protocolo de comunicação utilizado para sistemas de informação de hipermedia distribuídos e colaborativos.

URL: (de Uniform Resource Locator), em português Localizador-Padrão de Recursos, é o endereço de um recurso (um arquivo, uma impressora etc.), disponível em uma rede; seja a Internet, ou uma rede corporativa, uma intranet.

Hyperlink: é uma referência num documento em hipertexto a outras partes deste documento ou a outro documento.

XML: (eXtensible Markup Language) é uma recomendação da W3C para gerar linguagens de marcação para necessidades especiais. W3C: (World Wide Web Consortium) é um consórcio de empresas de tecnologia que desenvolve padrões para a criação e a interpretação dos conteúdos para a Web. Webdesign: O webdesign pode ser visto como uma extensão da prática do design, onde o foco do projeto é a criação de websites e documentos disponíveis no ambiente da web. Webdesigner: Profissional responsável por agregar os conceitos do webdesign de usabilidade com o planejamento da interface, garantindo que o usuário final atinja seus objetivos de forma agradável e intuitiva. Website: (também conhecido simplesmente como site) é um conjunto de páginas web, isto é, de hipertextos acessíveis geralmente pelo protocolo HTTP na Internet. Wireframe: é um desenho básico de uma interface. Esqueleto do site, que deve ser feito antes de iniciar a montagem do layout com cores e imagens.

12. ANEXO A – MAPA DO SITE ATUAL

a) Curso Pastor líder-Professores b) Pastor Líder i) Informações ii) Curso-Pastor Líder Matriz Curricular iii) Testemunhos iv) Pastores Inscritos no OPL II c) Congressos d) TNT 6) Quem somos a) Missão b) História c) Filosofia i) Administrativo ii) Comunhão iii) Doutrinário iv) Louvor v) Missões (1) Diário da Viagem Missionária a Guiné Bissau (2) Meu Bairro melhor vi) Social

1) Home 2) Culto ao vivo 3) Equipe a) Pastor titular b) Exposição Bíblica c) Casais d) Jovens e) Adolescentes f) Visitação g) Música h) Escolas Públicas i) Evangelização e Esportes j) Implantação e Fortalecimento de igrejas k) Missionários i) Ricardo e Camila ii) Lauro e Rose iii) Johnny e Thay Furst iv) Pablo e Lili 4) Recursos a) Mensagens em mp3 b) Livros c) Pastorais do boletim

7) Culto na Piba 8) Programa a) Oanse b) Juventude

5) O Pastor Líder

i) Projeto Jó ii) Vestibulandos iii) Discipulado c) Adultos d) Esportes Piba e) Casais de Namorados i) Padrão de Namoro da Piba 9) Congregações a) Jardim Imperial – Atibaia b) Socorro –SP 10) Projetos Missionários a) Moçambique – Derik Argachof 11) Informações a) Nossos horários b) Como chegar c) Calendário da Piba 12) Links 13) Contato

12. ANEXO B – PRINCÍPIOS DA USABILIDADE1 Feedback

• A mesma operação deve ser apresentada na mesma localização e deve ser formatada/apresentada da mesma maneira para facilitar o reconhecimento.

• O sistema deve informar continuamente ao usuário sobre o que ele está fazendo.

Prevenir erros • Evitar situações de erro.

• 10 segundos é o limite para manter a atenção do usuário focalizada no diálogo.

• Conhecer as situações que mais provocam erros e modificar a interface para que estes erros não ocorram.

Falar a linguagem do usuário • A terminologia deve ser baseada na linguagem do usuário e não orientada ao sistema. As informações devem ser organizadas conforme o modelo mental do usuário.

Minimizar a sobrecarga de memória do usuário • O sistema deve mostrar os elementos de diálogo e permitir que o usuário faça suas escolhas, sem a necessidade de lembrar um comando específico.

Saídas claramente demarcadas Atalhos

• O usuário controla o sistema, ele pode, a qualquer momento, abortar uma tarefa, ou desfazer uma operação e retornar ao estado anterior.

• Para usuários experientes executarem as operações mais rapidamente.

Consistência

• Abreviações, teclas de função, duplo clique no mouse, função de volta em sistemas hipertexto.

• Um mesmo comando ou ação deve ter sempre o mesmo efeito.

• Atalhos também servem para recuperar informações que estão numa profundidade na árvore 52

navegacional a partir da interface principal. Diálogos simples e naturais • Deve-se apresentar exatamente a informação que o usuário precisa no momento, nem mais nem menos. • A seqüência da interação e o acesso aos objetos e operações devem ser compatíveis com o modo pelo qual o usuário realiza suas tarefas. Boas mensagens de erro • Linguagem clara e sem códigos. • Devem ajudar o usuário a entender e resolver o problema. • Não devem culpar ou intimidar o usuário. Ajuda e documentação • O ideal é que um software seja tão fácil de usar (intuitivo) que não necessite de ajuda ou documentação. • Se for necessária a ajuda deve estar facilmente acessível on-line. 1

Tradução: http://usabilidade.com.br/ 53

12. ANEXO C – WEB STANDARDS

• Outro padrão é o uso das Folhas de Estilo em Cascata (CSS) para a formatação dos documentos em HTML e XML. Elas são utilizadas para a definição de todos os estilos de um site e por determinação da W3C, toda a estrutura de layout seja transferida do HTML para às folhas de estilo.

• Uso da linguagem de marcação HTML para a estrutura de documentos da Web é utilizada universalmente e para a formatação dos estilos é utilizado o CSS. • XML é outra linguagem de marcação semelhante ao HTML. É uma linguagem mais flexível que permite que os elementos sejam definidos pelo desenvolvedor. Ele permite um sistema de estrutura próprio e é ideal para a organização de grande quantidade de dados e motores de busca.

• Outra aplicação da Web Standards é o uso do DOM (Document Object Model) que permite o uso da linguagem de scripts para criar uma maior interatividade na página. Ele possibilita a script, acesso fácil a estrutura , ao conteúdo e à apresentação de um documento escrito em linguagens como o HTML e CSS. O DOM também possibilita a compatibilidade e o auxílio na tarefa de adaptação dos documentos da Web para novas tecnologias.

• XHTML é uma reformulação do HTML com a aplicação do XML. Possui a mesma aparência do HTML normal, só que permite a sua identificação em vários outros aplicativos além dos navegadores padrão.

12. ANEXO D – PESQUISA PÚBLICO-ALVO Faixa Etária

!"#$"%&"%'()**"%

Acessa o Site

1% 4%

14%

16%

31%

36% 18%

60% 86%

30%

(n*or-a/0es e 3o4cias

Criança

Adolescente

Jovem

Adulto

Idoso

Sim

Computador

Internet

16%

7ssis8r o cu:to ao vivo

Ler devocionais e textos Outros

17%

Não

Diﬁculdades ao Navegar o Site

8% 27% 40%

Discada

Banda‐Larga

Não Sei

Sim

Não

Sugestões • • • • • • • • •

33%

92%

67%

• • • • • • • • • •

Novo Layout Atualidade e Velocidade Tópicos mais específicos Fotos dos membros Mais interatividade, melhores links e mais chamativo Mudar a Cor (Não Amarelo) Mais Simplicidade para o acesso ao site Deveria colocar as mensagens do culto da manhã no site Conseguir abrir arquivos SQL e atualizar mais rápido as páginas

Demora pra carregar a página

Não consigo encontrar o que quero

Diﬁculdade para ler

Outro

Atualizar com mais frequencia Mais estudos em MP3 para gravar e ouvir em fretado por exemplo! Mais dinâmica Colocar letras de hinos e motivos de oração Incluir MCA As vezes, não dá para ver com precisão Colocar agradecimentos Aniversariantes Usar mais Flash Precisa estar sempre atualizado, e atualizar cada ministério

12. ANEXO E – ESTUDOS