TFC Trabalho Final de Curso Produo Multimdia: webdesign

TFC Trabalho Final de Curso Produo Multimdia: webdesign

DECLARAO DE DIREITO AUTORAL DECLARAO DE ORIGINALIDADE E CESSO DE DIREITOS AUTORAIS

Declaramos que o trabalho de Design Grfico Colaborativo e de Responsabilidade Social, Alento, original, no h publicao em qualquer outro peridico nacional ou internacional, quer seja em partes, ou em sua totalidade. Declaramos, ainda, que o projeto publicado no site criado especificamente para divulgao e recebimento das doaes no possui em nenhum momento cpias ou textos plagiados. Estamos cientes que em caso plgio constatado, seremos penalizados.

TFC Trabalho Final de Curso Produo Multimdia: webdesign

TFC Trabalho Final de Curso Produo Multimdia: webdesign

TFC Trabalho Final de Curso Produo Multimdia: webdesign

Unisanta - FaAC 2012 - Produo Multimdia UM ALENTO AO SUDO DO SUL

1. COMPONENTES: RA 098260 Geruza Aparecida Moreira geruzaamoreira@gmail.com RA102924 Letcia Rossi de Oliveira

lekinha182@hotmail.com

TFC Trabalho Final de Curso Produo Multimdia: webdesign

2. OBJETIVO: No 5 (quinto) ano de aniversrio do curso de Produo de Multimdia da FaAC Unisanta surgiu vrias idias para o TFC do curso a concluir neste ano de 2012. A Equipe Alento motivada pela necessidade de contribuir com uma instituio que busca tornar pblica a situao da populao no Sudo do Sul que sofre com a falta de recurso e ajuda; inspirou-se em projetos similares que foram feitos na poca do Tsunami no Japo. Assim, desenvolveu um site para levar a pblico o projeto de Design Grfico Colaborativo e de Responsabilidade Social, atravs, de cartazes criados e doados pela equipe Alento, ilustradores, designers e artistas convidados. A venda on line dos cartazes, que foram doados e dos criados por ns tem a arrecadao feita pelo site www.allento.com.br com link ao pagseguro da UOL. O site tem como principal objetivo divulgar o projeto Um Alento ao Sudo do Sul atravs do cartazismo, textos explicativos e e-mail. Na ndex teremos todo o contedo do site disponvel em links em um moderno fluxograma, para que, o usurio interaja e faa o caminho que melhor lhe convm,

TFC Trabalho Final de Curso Produo Multimdia: webdesign

no entanto, subliminarmente a opo CARTAZE-SE o link em destaque. O objetivo que o consumidor deste produto tenha interatividade, primeiro, com o cartaz a ser adquirido. Nesta pgina o internauta desfrutar de boa arte/design exclusiva por um valor bem acessvel. Para esse projeto haver teasers de 10 a 25 de novembro de 2012 esporadicamente com o tema: Alento e Um Alento ao Sudo do Sul.

TFC Trabalho Final de Curso Produo Multimdia: webdesign

3. PBLICO: O projeto voltado para jovens e adultos de ambos os sexos, classes A, B e C, de um modo mais direto pessoas relacionadas arte, cultura e design, mas no um projeto especificamente para estas pessoas, pois, atinge toda e qualquer pessoa que queira ajudar de um modo simples, rpido e ainda adquirir uma obra de arte/design exclusiva com um timo acabamento e de boa qualidade.

TFC Trabalho Final de Curso Produo Multimdia: webdesign

4. ARQUITETURA DE INFORMAO: A Equipe Alento pesquisou e analisou o perfil do usurio que gosta e se identifica com arte, cultura e design. Somente dessa maneira definiu o layout e os requisitos principais do projeto para oferecer informao e interao com o usurio. Nessa categoria a principal preocupao estava relacionada ao visual e usabilidade de navegao do site. O usurio necessita de informao clara e eficiente quando est navegando. Com base nessas afirmaes a equipe cria o primeiro prototype do projeto Alento.

TFC Trabalho Final de Curso Produo Multimdia: webdesign

TFC Trabalho Final de Curso Produo Multimdia: webdesign

Apesar de atraente devido sua textura (papelo) usualmente o site continuava como os outros sites analisados, a interface no trazia novidades para o usurio e a usabilidade continha erro. Ex. Estando na pgina Cartaze-se seguindo at a ultima opo Outros para o usurio interagir com a pgina Olho Vivo, por exemplo, ele teria que retornar passando pela pgina Convidados, Equipe Alento e Cartazese. O usurio no simpatizou com a cabea do site na lateral direita e confundia a coluna com a barra de fotografia acima do menu Cabea Menu de fotografia Barra de menus Corpo Rodap

TFC Trabalho Final de Curso Produo Multimdia: webdesign

Decidida a inovar na criao de sites tendo o usurio como foco principal a Equipe Alento define: _O mais importante ao desenvolver o segundo site foi perceber que o usurio precisava gostar do layout para voltar a navegar outras vezes e quem sabe doar novamente. Testamos os dois layout e compreendemos que tendo uma boa experincia em um site bonito, com usabilidade confortvel de fato agradou muito o doador e o fez retornar outras vezes ao site alento alm de divulgar o projeto entre os amigos.

TFC Trabalho Final de Curso Produo Multimdia: webdesign

4.1. DEFINIO: Adquirindo experincia e aprendendo com os erros a Equipe Alento define que: O pblico alvo moderno e preza por sites com design grfico criativo; Gosta de arte no geral; Prefere comunicao fcil e usvel; Todas as pginas (etapas) necessitam de informaes especficas (ex. se h necessidade de duplo clique, especificar: d um duplo clique), pois, o usurio prefere o acesso rpido e preciso dos links a cones complicados de um site; Para SAC (reclamaes e elogios) h o relatrio interno: pgina Olho Vivo e Fale Conosco; O site no possui log do mecanismo de busca. As trs pginas do Cartaze-se esto separadas por categorias. Anlise de sites concorrentes e sites similares; Criao de todo layout torna o site exclusivo; Anlise de tarefas; Anlise da infra estrutura; Sistema de organizao; O sistema de navegao; Definir o sistema de rotulao; Usabilidade;

TFC Trabalho Final de Curso Produo Multimdia: webdesign

Paper prototype; Fluxograma/ mapa; Levantamento da proposta e objetivo do Negcio; Identificao dos pblicos alvos; Objetivos do usurio; Experincia do usurio e comportamento atual do projeto; Informaes necessrias a cada etapa de utilizao, Linguagem do usurio.

Aps definir as regras de organizao do site para que o usurio desempenhe com facilidade suas tarefas. Foi traado o modelo de interao para o usurio, baseado na pesquisa acima se tem o layout do mapa e fluxo de informaes do site Alento. Tm-se assim, os rascunhos de tela ou wireframe.

TFC Trabalho Final de Curso Produo Multimdia: webdesign

F1- ndex representa todo o contedo do site, disponvel em links modernos e usuais (paginao, apoio, boto e logotipo). F2- mapa a leitura de informao dar-se atravs da linha horizontal da direita para esquerda (introduo, ndex, projeto, como doar, cartaze-se equipe alento convidados outros - prvenda, olho vivo - zoom, pagseguro, fale conosco). F3- o fluxograma com descrio das telas e/ou sequncias.

TFC Trabalho Final de Curso Produo Multimdia: webdesign

5. WIREFRAME | DIAGRAMAO CONTEUDO DE RASCUNHO DE TELA: Wireframe de todas as pginas para visualizar se existe erros de usabilidade ou alguma pgina que no est tendo o contedo exibido como planejado.

TFC Trabalho Final de Curso Produo Multimdia: webdesign

6. ANLISE HEURSTICA: Em todas as pginas foi utilizada anlise heurstica, indicada para teste e anlise de uma interface j desenvolvida, pois, no houve teste prtico com usurios.

TFC Trabalho Final de Curso Produo Multimdia: webdesign

7. ANLISE DE SITES SIMILARES: 7.1. SITE Magnitude 9 Vamos Fazer Uma Vaquinha MSF Mdicos Sem Fronteiras

7.2. URL http://cfsl.net/tsunami/?page_id=19 http://www.vaquinha.org.br http://www.msf.org.br/

TFC Trabalho Final de Curso Produo Multimdia: webdesign

7.3. SCREENSHOT: Site: Magnitude 9 Help Japan O projeto possui layout simples e de carter de urgncia. Predomina as cores branca e vermelha. Logotipo: alfabeto existente, similar fonte Georgia serifada. De trao reto com curva nas extremidades mais suave e de fcil leitura. O logotipo Magnitude 9 est acima e centralizada junto ao smbolo. Utiliza linha nica. Cor: vermelho. Simbologia: inspirado na bandeira e mapa geogrfico do Japo. A circunferncia vermelha possui uma trinca nica que ladeia do lado direito para esquerda.

TFC Trabalho Final de Curso Produo Multimdia: webdesign

Smbolo abstrato: o mapa do pas ultrapassa extremidades do smbolo que representa a destruio caos deixado no pas pelo tsunami de 2011. Leva-se tempo para perceber a forte ligao entre a trinca circunferncia. No possui assinatura. Cor: vermelho e branco. Plano de fundo: branco.

as eo um e a

TFC Trabalho Final de Curso Produo Multimdia: webdesign

Site: Vamos Fazer Uma Vaquinha Instituio Escola Leocdio O projeto possui layout de traos simples e bem colorido. Logotipo: letra desenhada com traos arredondados, no possui serifas. A frase Vamos Fazer Uma Vaquinha est abaixo e justificada ao centro em relao ao smbolo. Utiliza duas linhas. Cor: preenchimento branco e contorno azul. Simbologia: inspirado no costume popular de fazer uma vaquinha, onde cada pessoa interessada em ajudar doa o que tem at alcanarem a quantia total estabelecida. O intuito chegar ao valor necessitado. Smbolo figurativo: baseado em cone.

TFC Trabalho Final de Curso Produo Multimdia: webdesign

Representa doao. A vaca amarela de bolinhas e boca cor de rosa, ps e chifre azul, olhos e dentes brancos simbolizam a inocncia infantil. J as tetas na cor vermelha indica a urgncia da situao. O vermelho neste projeto substitui a palavra socorro, mas deixa implcito que todas as crianas da escola Leocdio necessitam e vivem da doao realizada pelo usurio no site do projeto. Cor: infantil primria. Plano de fundo: azul. Assinatura visual: destaca-se o smbolo e o logotipo.

TFC Trabalho Final de Curso Produo Multimdia: webdesign

Site: MSF Organizao Humanitria Internacional O projeto Mdicos Sem Fronteira possui um layout simples e de carter de urgncia. Logotipo: alfabeto existente, similar fonte Fan Heiti. Fonte itlica, de trao reto e extremidades pontiagudas revela a urgncia com que tratam as situaes de risco em cada pas visitado. O logotipo Medecins Sans Frontieres localizado abaixo do smbolo no formato itlico d-se a iluso que as fontes esto correndo contra o tempo. E exatamente o que os voluntrios do MSF tem feito em vrias partes do mundo. O logotipo utiliza duas linhas. Cor: preto. Simbologia: lembra as mazelas que o ser humano sofre em regies de crticas com doenas contagiosas, falta de saneamento,

TFC Trabalho Final de Curso Produo Multimdia: webdesign

fome e guerra interna bandeira. Smbolo figurativo: baseado em cone. Representa a urgncia em levar socorro. O boneco (parte superior em cor vermelha) com a cabea e braos abertos mostra a fora de vontade do voluntario em doar calor humano e qualquer tipo de ajuda. A parte inferior do corpo em branco na forma de V de cabea para baixo causa a impresso que o boneco est em constante movimento. Cor: vermelho e branco. Plano de fundo: branco. Assinatura visual: destaca-se smbolo e logotipo.

TFC Trabalho Final de Curso Produo Multimdia: webdesign

7.4. PONTOS: Site: Magnitude 9 Positivo: qualidade dos cartazes e disposio dos mesmos Negativo: visibilidade dos elementos e excesso de informao em uma nica pgina deixou o site muito extenso. O branco de plano de fundo contrasta com o vermelho vivo incomodando a leitura, alm de, psicologicamente d-se a impresso que o site todo em vermelho.

Site: Vamos Fazer Uma Vaquinha Positivo: o logo em forma de vaquinha dispensa explicaes ou ttulo. Negativo: lembra muito o primeiro projeto da Equipe Alento no h espao para descanso dos olhos. A cabea do site est com excesso de cor e informao. Ex. O fundo muito colorido dificulta visualizar a foto pequena das crianas. O menu invadi a cabea e o piora a usabilidade do usurio.

TFC Trabalho Final de Curso Produo Multimdia: webdesign

Site: MSF Positivo: a qualidade das fotos, vdeos e a preciso das informaes divulgadas. O site uma enciclopdia on line dado a veracidade do contedo postado. Negativo: mesmo usando quatro colunas para texto / imagens e seguindo um padro de posts, as pginas visualmente so complicadas de compreender, so poludas e a tonalidade do vermelho tende a irritar o usurio. Salve-se a pgina em ao, haja vista, melhor diagramada.

TFC Trabalho Final de Curso Produo Multimdia: webdesign

8. CORES, FONTES E RESOLUO UTILIZADAS: 8.1. CORES As cores foram escolhidas atravs de pesquisa de imagens do deserto africano e das vestes coloridas das mulheres sudanesas. Seguindo o esquema das cores complementar e anlogas no padro vintage. Cor complementar e anloga: #fee0b9 (bege); #f0d7b7 (bege escuro); #300c0a(marrom); # f8941d(laranja); # 0e0201 (marrom mega dark); #6d4124(marrom claro); # cea39a (rosa); # a4;b8cf (azul); #deefc5(verde); # 524456(violeta) e # b18c6c(papelo)

8.2. FONTES: 8.2.1. Fonte/ ttulo links - logotipo Cor ttulo/ link: marrom cd: #300c0a A fonte Harabara que representa o tema do site jovial, moderna, alegre e iluminada. Seu tom de terra nos remete a vida em constante construo e agua a curiosidade e a vontade de explorar as outras pginas do site.

TFC Trabalho Final de Curso Produo Multimdia: webdesign

A fonte utilizada chama-se Harabara. Esta fonte jovial, moderna e chapada no possui serifas, mas, de fcil compreenso. Acompanha com simplicidade a linguagem africana do site e do Sudo do Sul. Seu tom foi escolhido a partir da pigmentao do busto mais escuro que a cor do plano de fundo para poder contrastar.

8.2.2. Fonte/ texto Cor texto: marrom

cd: #3oocoa

A fonte Candara possui contornos arredondados que facilitam a leitura dos visitantes levando-os a viajar, juntamente com o Alento para o Sudo do Sul atravs do site interativo e dinmico.

8.3. RESOLUO: 1024 x 768 pixel

TFC Trabalho Final de Curso Produo Multimdia: webdesign

Esta resoluo foi escolhida por ser no momento universal entre artistas e usurio que gosta de cultura, pois abrange o pblico artstico da web.

8.4. PERSONAGEM E SUAS CORES A composio do personagem foi feita atravs do paper prototype e finalizado com partes de fotografia. O busto nu, fotografado por Alice Matos, comps a cena do territrio tpico da frica juntamente com a imagem dos refugiados retirados da foto: galeria _144_01_4 do msf.org.

TFC Trabalho Final de Curso Produo Multimdia: webdesign

8.5. LOGOTIPO E SIMBOLO: Criados especificamente para um projeto, os elementos institucionais, (logotipo, smbolo abstrato, smbolo figurativo e assinatura), compe a identidade visual de uma marca. Neste projeto a Equipe Alento harmoniza a juno do smbolo (abstrato e fonograma) ao logotipo. Tornando a marca um smbolo figurativo. Dessa maneira os quatros elementos acabam por combinar entrem si. A tipografia padro tambm contribui com seu layout baseado no smbolo alento com curvas, pontas quadradas e pontiagudas. Dessa forma a marca Alento uma identidade positiva, segura, simples e moderna. Exemplo:

TFC Trabalho Final de Curso Produo Multimdia: webdesign

LOGOTIPO: a. Curvas: nestas extremidades do logotipo as curvas remetem a suavidade, luz, calor humano e esperana, exatamente o que a marca deseja passar. b. Pontas pontiagudas: representando os males sofridos pelas crianas do Cortio e o povo de Darfur estas arestas falam do sofrimento de um povo, dor, fome e tristeza igualmente representadas nas trincas da argila seca (plano de fundo da marca). c. Pontas quadradas: essas arestas carregam a esperana da reconstruo representada pela argila utilizada na construo da marca.

TFC Trabalho Final de Curso Produo Multimdia: webdesign

SMBOLO: a. Logotipo + Smbolo: a juno do sol direita com raios suaves envolvendo a letra curvilnea A esquerda, apesar de ser uma fonte, juntos formou um smbolo.

b. Simbologia: carregado de simbologias de forte apelo para que o usurio sinta o desejo de levar um extra de calor de um novo amanhecer aos necessitados. c. Smbolo + Fonte: ao juntar o smbolo + a palavra lento percebe-se que com a fonte personalizada se encaixa perfeitamente no A do smbolo. Plano de fundo: transparente Assinatura visual: destaca-se smbolo e logotipo.

TFC Trabalho Final de Curso Produo Multimdia: webdesign

9. LISTA DE TCNICAS E RECURSOS DO PHOTOSHOP UTILIZADOS NA ELABORAO DO SITE 9.1. LISTA DE TCNICAS: Como ter o corte perfeito da imagem: abra Canais - RGB escolha o canal que tem mais contraste, em seguida clique em Image Calculations OK, isso criar automaticamente uma layer chamada Alpha 1. D Ctrl + L e ajuste para ficar mais escuro. Em seguida com o Brush Tool hardness 100% pinte a imagem de preto, Com o Ctrl + i para selecionar o inverso. Volte para Layer RGB, clique em Select Load Select OK; Ctrl + J e ter a imagem perfeitamente cortada. Pintar com perfeio: selecione o local desejado com a ferramenta Magic Tool, clique em Select Iverse escolha a cor desejada e com o Paint Tool clique no local selecionado. *Opo fcil de pintura do busto nu do site.

TFC Trabalho Final de Curso Produo Multimdia: webdesign

9.2. RECURSOS DO PHOTOSHOP E DREAMWEAVER: PHOTOSHOP Magic Tool, Lasso Toll, Burn Tool, Ellipse e Rectangle Tool, Eyedropper, Brush Tool, Clone Stamp Tool, Type Tool, Marquee Tool, Paint Tool e Eraser Tool para apagar erros. Opacidade diminuda nas artes do site em 57%. Brilho/Contraste, Gamma Correction para melhorar a imagem dos cartazes criados pela Equipe Alento. Algumas Imagens foram salvas em .png (onde houve necessidade de um fundo transparente) e em sua maioria .jpg

DREAMWEAVER Foram usados os conceitos de ttulo em Box. Aberto o programa, criado um novo HTML e foram colocadas as seguintes informaes:

TFC Trabalho Final de Curso Produo Multimdia: webdesign

.boxcartazese [ height: 264px; width: 117px; display: block; background-image: url(botao.png); padding-top: 5px; padding-right: 11px; padding-left: 12px; float: left; margin-right: 16px; margin-left: 9px; margin-botton: 17px ] .boxcartazese small [ font-size: 9px; color: #300COA; float: right; ] .boxcartaze img [ margin-top: 7px; ] .boxcartazese span [ font-size: 16px; color: 300c0a; text-align: center; display: block; margin-top: 42px;

TFC Trabalho Final de Curso Produo Multimdia: webdesign

O contedo da imagem abaixo representa a ndex e suas respectivas dimenses, sendo elas exatamente as mesmas do arquivo .html (1024 x 768), alinhado ao centro.

TFC Trabalho Final de Curso Produo Multimdia: webdesign

9.3. ANIMAO: Preloader Page Entrada: barra preloader Situada abaixo da palavra Alento, a barra de progresso e porcentagem recebe o efeito Burn Tool a cada etapa concluda em porcentagem; a barra vai tornando-se escura. Pagina principal - Home Link do boto: em estado rollover ao passar o mouse em cima Page: ao clicar em qualquer link do menu; a pgina secundria (projeto, como doar, cartaze-se, olho vivo e/ou fale conosco) ativada. Pagina secundria Texto com scroll para ler mais sobre o link ativado; Ao clicar no boto fechar, a pgina recolhida para pagina principal, home.

TFC Trabalho Final de Curso Produo Multimdia: webdesign

10. SCREENSHOT do site Alento:

TFC Trabalho Final de Curso Produo Multimdia: webdesign

TFC Trabalho Final de Curso Produo Multimdia: webdesign

11. TECNOLOGIA: A equipe Alento utiliza o browser Internet Explorer verso 0.5 tecnologia usada para visualizao da interface digital. E emprega as tecnologias do HTML e CSS. A frequncia de atualizao das pginas ocorrer aps um ano do site na web. O contedo renovar sempre que houver cartazes novos, novas parcerias e/ou mudana sobre o objetivo do Projeto Alento. No h reedies futuras.

TFC Trabalho Final de Curso Produo Multimdia: webdesign

12. DECLARAO DE TODOS OS DIRETOS RESERVADOS A Equipe Alento possui todos os direitos reservados. Proibida a reproduo. O contedo publicado nesse site, seja ele textos ou imagens, de propriedade de seus colaboradores e est protegido pela Lei de Direitos Autorais. Qualquer uso deste sem a permisso de seu proprietrio consiste, entre outros, em violao da Lei de Direitos Autorais (Lei n 9.610, de 9 de fevereiro de 1998) e infrao ao Artigo 184 do Cdigo Penal Brasileiro. Os direitos de terceiros, especificamente o Direito de Uso de Imagem e seus direitos correlatos, so de responsabilidade de seus respectivos autores, sendo que as responsveis pelo site, Geruza Aparecida Moreira e Letcia de Rossi de Oliveirao se exime de qualquer responsabilidade correlata nesse sentido. Havendo interesse em adquirir e/ou utilizar o material publicado, comunique-se com as autoras do projeto Um Alento ao Sudo do Sul.

TFC Trabalho Final de Curso Produo Multimdia: webdesign

12. CRDITOS E BIBLIOGRAFIA FONTE (ttulo, texto e link) HARABARA, Andr. Fonte Harabara. Disponvel em: <http://www.dafont.com/harabara.font>. Acesso em: 24 de out. de 2012. CANDARA, Windows Live. Disponvel no pacote do Office. Acesso em: 06 de Nov. de 2012.

IMAGEM CASTRO, Haroldo. Imagem - "DSC_2009-web60 copy". Disponvel em: <http://colunas.revistaepoca.globo.com/viajologia/2010/04/14/de-nairobi-a-cartumno-sudao-60-horas-e-3-200-km-de-aventuras/>. Acesso em: 28 de out. de 2012. FRONTEIRAS, ONG Mdicos Sem. Imagem galeria_144_01_4. Disponvel em: <"https://www.msf.org.br/Arquivos/img/galerias/galeria_144_01_4.jpg">. Acesso em: 22 de out. de 2012.

TFC Trabalho Final de Curso Produo Multimdia: webdesign

SITE Print/ Consulta Magnitude 9. Disponvel em: <http://cfsl.net/tsunami/?page_id=19>. Acesso em: 05 de novembro de 2012. VAQUINHA, Vamos Fazer Uma. Disponvel em: <http://www.vaquinha.org.br>. Acesso em: 05 de novembro de 2012. FRONTEIRAS, Mdicos Sem. Disponvel em: <http://www.msf.org.br>. Acesso em: 05 de novembro de 2012. SEGURO, Pague. Disponvel em: <https://pagseguro.uol.com.br/#rmcl>. Acesso em: 29 out. de 2012 CULTURA, Ministrio da. Disponvel em:
<http://www.cultura.gov.br/site/2008/02/02/lei-no-9610-de-19-de-fevereiro-de-1998/> Acesso em: 07 de novembro de 2012.

FOTGRAFA Alice Matos

TFC Trabalho Final de Curso Produo Multimdia: webdesign