Site para o curso de PDMM

Proposta de um novo site para o curso de Produo Multimdia da Universidade Santa Ceclia.

Declarao de Responsabilidade
Este projeto da autoria do grupo e no contm plgio parcial ou integral. Todo e qualquer material que foi extrado de fonte j existente recebeu os devidos crditos.

Carolina de Macedo Ruff RG: 49.615.939-2

Victor Pessoa de Sousa RG: 47.221.462-7

Ttulo do Trabalho, Tema Ttulo

Site para o curso de PDMM.

Tema
Nova proposta para o site do curso de Produo Multimdia.

Apresentao
O nosso TFC uma proposta para o site do curso de Produo Multimdia, que uma reformulao digital do site atual, onde foram usadas novas tecnologias como: linguagens mais atuais para a Web (HTML5, CSS3 e Zepto), facilitando assim, a acessibilidade e a navegao pelo site. Utilizamos a estruturao de Design Responsivo, onde o site se adapta a resoluo da tela do usurio sem precisar definir diversas verses para cada uma. Alm disso, procuramos criar um layout mais dinmico, objetivo e clean, fazendo com que o site carregue mais rpido. Isso ajuda na acessibilidade por celulares, tablets e/ou velocidades de internet mais lentas. Com isso, o site podar ser acessado de qualquer dispositivo com internet.

Objetivos
Nosso objetivo, com a reformulao do site, chamar a ateno no s dos atuais alunos do curso, mas principalmente dos alunos interessados em cursar Produo Multimdia na Unisanta. Para isso, criamos um site objetivo e claro, pois contm todas as informaes necessrias para quem est interessado e/ou curioso em saber o que o curso oferece. Alm disso, muitas pessoas ainda no sabem o que Produo Multimdia, devido ao curso ser novo, tecnolgico e no muito conhecido.

Pblico e Mercado
Quando nos interessamos pelo curso de Produo Multimdia, no sabemos exatamente o que esperar, pois sua rea em comunicao muito abrangente. O pblico principal no s do nosso trabalho, mas sim do curso por inteiro, bem parecido com os atuais: jovens que esto ingressando e/ou tem afinidade na rea de comunicao e querem adquirir mais conhecimentos sobre o mesmo. Nem sempre as pessoas tem certeza em qual rea querem se aprofundar, e como o curso de Produo Multimdia apresenta grandes variedades de possibilidades nesse meio, muito interessante para essas pessoas conhecerem tudo o que o curso tem a oferecer como base para que possam escolher qual caminho seguir. Podemos perceber que a maioria do perfil pessoal desses jovens so da cultura alternativa e geek, e com certeza, usurios freqentes da internet e das redes sociais. So usurios antenados que gostam de receber notcias com rapidez e se entreterem ao mesmo tempo. Com isso, buscamos criar um layout dinmico e simples, para atingir esse perfil de usurio, fazendo com que o site traga todas as informaes de modo objetivo e gil, pois o perfil de mercado a ser atingido so pessoas prticas que dispensam rodeios no contedo do site, conseguindo assim cativar o pblico alvo e fazendo com que ele se identifique com o curso 7

e com suas atividades para que possa se tornar um bom profissional na rea. Por isso, ao informar-mos esses jovens sobre o curso e seus diferenciais, muito provvel que os mesmos se interessem mais ainda e possam participar das atividades e dos eventos realizados ao decorrer do curso.

Justificativa
Nos dias atuais percebemos que grande parte da populao brasileira est acessando a internet com mais facilidade e maior frequncia, pois a tecnologia est crescendo a cada dia. Podemos usar como exemplo as redes sociais, que a alguns anos atrs eram frequentadas por um grupo especfico de usurios. E hoje em dia, j esto enraizadas no dia a dia da maioria dos internautas brasileiros. Com todas essas atualizaes voltadas para a internet, percebemos uma defasagem tecnolgica no site atual do curso que no sofreu adaptaes para os novos meios tecnolgicos. Com a nossa proposta para o site do curso de Produo Multimdia, buscamos atingir a maior parte possvel desses internautas utilizando novas tcnicas para adaptao do site nos novos meios tecnolgicos que envolvem a internet. Assim facilitando o acesso desses usurios atravs dessas ferramentas.

Definies
Sobre o desenvolvimento do site, antes de prosseguir com as explicaes, devemos saber um pouco mais sobre alguns artigos e pesquisas realizadas para o projeto onde podemos compreender o significado e a funo de alguns recursos utilizados para a elaborao do site.

Sobre o Adobe Flash

Ao analisarmos o site atual do curso, percebemos uma falta de atualizao nele, o que totalmente aceitvel pois a 3, 4 anos atrs no espervamos por tanto avano tecnolgico envolvido com a internet e suas vertentes. Com esse avano tecnolgico o Flash foi ficando para trs, como j falamos antes, devido ao grande nmero de usurios que vem crescendo em relao ao acesso a internet por telefones celulares e tablets, que infelizmente, no vm com um suporte ao mecanismo do Flash. Mas iremos entrar em mais detalhes sobre esse assunto em outros tpicos.

HTML5 e CSS3
HTML5 vai mudar e j est mudando muitos aspectos da vida na web. Sendo assim, facilitando muito a vida de quem trabalha com criao de sites. Com isso, o HTML5 poder a partir de nosso controle local, armazenar nossos dados na nuvem ou obter sua localizao geogrfica. 10

Tags HTML5 substituiro plug-ins para os trabalhos mais simples, pelo menos por algum tempo, e ele abrir recursos avanados para uma audincia maior, tornando assim, a web mais segura, mais eficiente e mais flexvel. Outra grande funcionalidade do HTML5 que ele ajuda muito a otimizao de sites para mecanismos de busca com a introduo de novas tags. Para ver onde esta nova norma pode nos levar, aqui est uma lista no-ordenada de forma que a Web pode mudar como HTML5 est gradualmente adotado e padronizado. HTML5 ir reduzir a importncia dos plug-ins; HTML5 permitir mais grficos interativos; HTML5 permitir aplicaes para armazenamento de arquivos local; HTML5 simplificar a catalogao de dados por robs; HTML5 ir adicionar posicionamento ao local de acesso; HTML5 vai facilitar o caminho para vdeo na Web; HTML5 permitir os widgets conversarem; HTML5 ir melhorar a segurana (talvez); HTML5 ir simplificar o desenvolvimento Web.

11

O CSS3 a mais nova verso das famosas Cascading Style Sheets (ou simplesmente CSS), onde se define estilos para pginas web com efeitos de transio, imagem, e outros que do um estilo novo em todos os aspectos de design nos layouts na web. Sua principal funo anular as imagens de planos de fundo e bordas arredondadas, e apresentar transies e efeitos para a criao de animaes sem o uso de imagens, onde as mesmas fazem com que o site demore muito mais tempo para carregar. Isso se deve aos browsers e suas atualizaes com o suporte para essa linguagem. Com isso, o CSS3 facilitar o trabalho dos que trabalham com web e tambm dos usurios, pela variedade de transformaes na apresentao de um website. O CSS3 extremamente capaz de construir animaes que impressionam o mais avanado desenvolvedor web, tanto em duas como em trs dimenses. Os mais comuns so os efeitos de rotao, movimento e transio.

12

Pesquisa
Para a realizao do nosso projeto, tivemos que fazer inmeras pesquisas e anlises durante todo o processo criativo e para seu desenvolvimento. Nossas anlises e pesquisas iniciais se voltaram totalmente para o site atual existente do curso. Analisamos todo seu contedo, usabilidade, navegao, imagens, diagramao entre outros. Com toda essa anlise, chegamos a vrias concluses e conseguimos comear a traar um caminho para o nosso projeto sobre como ele seria e o que teria nele para melhorar a usabilidade e navegao alm do layout, diagramao, menu e imagens. Lemos diversos artigos, livros e tutoriais para entendermos melhor as tcnicas que deveriam ser usadas na construo do layout e como fazer o usurio entender o que est se passando sem ter que pensar muito ou procurar o item desejado. A idia do site sempre foi ser objetivo e claro, passando todas as informaes necessrias para o usurio em seu contedo utilizando uma navegabilidade fcil e padro que todo o site deveria ter.

Livros
Pesquisamos muitos livros sobre usabilidade, navegao e at mesmo livros tcnicos sobre HTML5 e CSS3 para vermos as novas tcnicas que podem ser usadas utilizando essas 13

linguagens mais atuais para o desenvolvimento do site. No Me Faa Pensar de Steve Krug foi um dos livros mais valorizados durante o projeto, pois nos ensinou toda a Usabilidade que um site deve ter. Mostrou-nos que devemos organizar as informaes na tela para que o usurio no precise pensar para realizar suas aes e que elas devem ser intuitivas. No adianta nada ns criarmos um layout totalmente inovador com tecnologias de ltima gerao, jogar o contedo na tela de qualquer forma e no sabermos achar o que queremos. Ao primeiro contato do usurio dentro do site, ele bata o olho, compreenda a informao e o que se passa e ache o que procura. Que os menus devem ser na vertical ou na horizontal. Que as pginas so vistas, olhadas, e no lidas. Ou seja, se enchermos de textos no adiantar nada, pois ningum ir ler. Mas se soubemos trabalhar com os textos, destacar da forma correta o que necessita ser destacado, o usurio ir cada vez mais se interessar pelo o que est vendo/lendo. Vimos sobre alinhamentos de textos, destaques nos ttulos, aninhamento de informaes, imagens e textos dentro de caixas entre outros. Enfim, esse livro perfeito e como dito antes, foi muito bem valorizado no nosso projeto. Outro livro que nos chamou muito a ateno foi Design para a Internet: Projetando a Experincia Perfeita de Felipe Memria, onde lemos assuntos superinteressantes sobre Navegao, formatao e padronizao dos elementos da interface, que so fatores que devem ser cuidadosamente projetados para que o site no seja uma coisa confusa de usar. 14

Vimos tambm da importncia de uma consistncia entre todos os sites, de modo que o usurio precise aprender uma vez s a navegar. Em vrios captulos do livro so abordados modelos como Yahoo, a Ideo, o site da BBC, Globo, entre outros, onde so falados sobre suas usabilidades, testes e experincias. Tambm vimos sobre Fluidez, onde diz que no s texto e os grficos, mas a reunio destes e outros fatores em harmonia, adicionando tambm o conceito de comunidades e pblico-alvo, e so usados como modelo o Orkut e o Hattrick. Para a construo do layout, foram lidos dois livros: O Essencial do Design Grfico da Editora Senac SP foi lido principalmente a parte que fala sobre as cores, sobre a tipografias e sobre o Web Design. Vimos sobre o Planejamento e Produo de Site, Como trabalhar com Cores na Web e vimos tambm sobre a escolha da tipografia, a diferena entre elas e quais seriam as melhores escolhas de tipografias para a web, sites com muito contedo, Menus, entre outros. E tambm o livro A Cor no Processo Criativo de Lilian Ried Miller Barros nos ajudou a relacionar as cores de forma harmoniosa. Queramos dar destaque ao logotipo do curso e usar algumas cores dele para a composio do layout, onde tambm pudssemos destacar algumas reas no contedo. Nos fez entender como devemos fazer o uso das cores no processo criativo e nas composies que queremos criar, no s para a Web ou para o Design, mas sim para um todo.

15

Alguns Sites
http://tableless.com.br/ http://www.awwwards.com/ http://chocoladesign.com/ http://coolcarousels.frebsite.nl/ http://design.blog.br/category/web-design http://blog.popupdesign.com.br/ http://www.google.com/webfonts http://css-tricks.com/ Pesquisamos muitos sites voltamos para a rea de Web Design, pois eles contem muitos artigos interessantes e que nos ajudaram bastante tambm a pensar na navegao, na usabilidade e no layout do site. O Awwwards um site de premiao dos melhores sites que existem na Web e vimos TODOS praticamente. O Blog PopUp Design aborda temas importantssimos sobre Design Responsvel. Utilizamos o Google Web Fonts para pesquisarmos e testarmos as fontes mais utilizadas na web em nosso layout, e o melhor de tudo que so free. O Cool Carousels nos mostrou vrios exemplos de banners rotativos e que iremos acrescentar um deles ao site que ser localizado na pagina principal para destacas os itens desejados. O CSS Tricks nos deu vrias inspiraes para o design responsivo. Nele pudemos ver como realmente um layout responsivo funciona e se comporta nas telas especficas. E alm disso, pudemos ver vrias tags interessantes para o desenvolvimento do site. J no Choco La Design lemos vrios artigos sobre HTML5 e CSS3 e seus novos elementos, vimos inspiraes de portflios para termos uma base de como construir um portflio para o site do curso, lemos tambm sobre como instalar o WordPress em um servidor local, entre muitos outros artigos. 16

Artigos destacados
http://chocoladesign.com/avaliando-a-usabilidade-do-meuwebsite Nesse artigo pudemos perceber itens de grande importncia para o processo criativo e para o desenvolvimento do site. Esse artigo retrata sobre a usabilidade nos sites e como eles devem ser projetados para serem mais interativos e relacionais ao homem. Com isso, devem ser feitas algumas avaliaes na acessilidade dos sites, onde quanto mais cedo detectarmos esses problemas, melhor ser para o desenvolvimento do site. http://chocoladesign.com/o-que-e-arquitetura-deinformacao Outro artigo com muita importncia sobre Arquitetura da Informao. Com ele, pudemos analisar todo o contedo que estaria disponvel para o site do nosso projeto, onde seu conceito se encaixe em ser gil, objetivo e agradvel para os usurios. http://chocoladesign.com/modelo-mental-como-estrategiapara-usabilidade Esse artigo nos fez pensar um pouco mais sobre a usabilidade do site e sua navegao. Nosso objetivo era manter o padro da internet, onde prevemos as aes do usurio dentro do site utilizando os mtodos da simplicidade, da familiaridade do usurio atravs de suas experincias, da flexibilidade e da segurana.

17

 http://chocoladesign.com/nao-me-faca-pensar Esse artigo foi o qual nos fez ter a curiosidade de ler o livro de Steve Krug chamado No me Faa Pensar. O artigo retrata algumas partes do livro onde se fala sobre a usabilidade em botes, menu e reas de pesquisas. Com isso, vimos que podemos trabalhar reas de formas variadas sem perder o evidente de suas finalidades. http://blog.popupdesign.com.br/design-responsivo-i-o-quee-e-por-que-usar/ Esse foi um dos artigos que nos despertou mais interesse sobre o Design Responsivo. O artigo retrata de forma resumida sobre como iniciou o design responsivo, o porque disso, como ele deve ser iniciado e pensado e seu desenvolvimento. A partir disso comeamos a ter vrias idias para o layout e como ele se comportaria em outras resolues e quais tcnicas deveriam ser usadas para seu desenvolvimento. http://blog.popupdesign.com.br/design-responsivo-grids-etexto/ http://blog.popupdesign.com.br/design-responsivo-iiimedia-queries-e-compatibilidade/ Esses dois artigos so a continuao do anterior, onde vimos diversas tcnicas sobre como realmente funciona o design responsivo e como desenvolv-lo corretamente para que o layout se comporte de forma correta nas outras resolues. H tambm diversas tags que devem ser usadas especialmente para um layout responsivo, e nesse artigo pudemos v-las e saber aonde devemos aplic-las.

18

Grficos
Durante o processo das pesquisas, precisamos fazer umas anlises tcnicas sobre o projeto. Dentro dessas pesquisas, tivemos que analisar alguns dados tcnicos para a realizao do projeto, pois como ele envolve a internet, tambm precisamos pensar sobre os navegadores e as resolues mais utilizadas no Brasil. Coletamos os seguintes dados no site http://gs.statcounter.com/

http://gs.statcounter.com/#browser-BR-monthly-201206201211-bar

19

http://gs.statcounter.com/#resolution-BR-monthly-201206201211-bar

http://gs.statcounter.com/#mobile_resolution-BR-monthly201206-201211-bar

Desenvolvimento, Criao e Pesquisas

A idia da reformulao do curso partiu no momento que vimos a necessidade de uma atualizao no site existente, que foi feito com tcnicas defasadas, onde no supriam as necessidades do curso para atingir o seu pblico com clareza e objetividade. Durante o amadurecimento da idia para o projeto, estava bem claro que ele teria que ser clean e objetivo, suprindo assim, todas as necessidades do curso e contendo todas as informaes necessrias sobre o que o curso pode oferecer. Resolvemos assim, implementar novas tcnicas disponveis no mercado para alcanar esse objetivo como o HTML5 e CSS3 para o desenvolvimento do site.

Idia Inicial
A idia inicial era que o site fosse em one page, ou seja, todo o contedo estaria na mesma pgina e quando clicasse em algum item do menu, a pgina rolaria at o contedo desejado tanto horizontalmente quanto verticalmente. Levamos essa idia para a pr banca, e com a ajuda dos professores podemos observar que a idia de one page era invivel para o nosso projeto, devido ao site ser institucional e ter um vasto contedo de informaes. Com o auxlio dos professores, samos da pr banca com novas idias e um caminho para ser seguido para o nosso projeto.

20

Exemplos de sites one page apresentados na pr banca:

Twenty 2 Designs http://www.twenty2designs.com/

Marcin http://www.mobily.pl/

Barrel + Barc http://www.barrelny.com/24/

Claire http://www.vanityclaire.com/

Launch Factory http://launchfactory.org/

Parallaxr http://www.productivethemes.com/ parallaxr/#page-1

21

Pr Banca
Na pr banca e no briefing realizado com os professores e com a Okida, foram citados alguns itens especficos para serem implementados e destacados no projeto do site do curso. Dentro deles, teramos que dar nfase as redes sociais, o site tambm teria que esclarecer todas as dvidas sobre o curso com clareza para os usurios e alm disso, o site teria uma rea voltada para o portflio do curso, onde as pessoas vejam o que produzido e criado dentro do curso com suas disciplinas relacionadas.

Pesquisas
Por isso, aprofundamos nossas pesquisas em sites institucionais como sites de universidades e seus cursos. Comeamos a perceber um padro nesses sites e experimentamos alguns layouts relacionados a esses padres. Exemplos de sites institucionais que foram pesquisados e analisados:

Belas Artes http://www.belasartes.br/site/

Belas Artes http://www.belasartes.br/site/

Escola Panamericana de Arte e Design http://www.escolapanamericana.com.br/escola/

22

Primeiros rascunhos realizados no para idia do layout:

Composio
Nas idias apresentadas a cima, criamos um layout baseado nas pesquisas que foram realizadas durante o processo de criao do site. Partimos de um conceito para dar nfase ao logotipo do curso, onde suas cores fariam parte da composio do layout. Na primeira imagem, utilizamos cores neutras como o cinza claro no background das pginas e o azul para dar destaque no menu e em especficas reas. Alinhamos o logotipo a esquerda do menu para dar mais visibilidade. O tipografia ainda no estava definida, ento utilizamos nos exemplos uma fonte sem serifa da famlia Helvetica e suas derivantes. Dividimos o menu em quatro categorias principais: O Curso, Trabalhos, Eventos e Contato, e dentro delas suas subcategorias relacionadas. 23

Conclumos que a composio utilizada deixou o layout poludo e pesado e no se encaixava no requisitos brifados. Na Segunda imagem, utilizamos praticamente as mesmas cores do primeiro exemplo, apenas alteramos a ordem de aplicao. Escolhemos outra verso do logotipo do curso com o fundo em magenta. Para dar o devido destaque, deixamos o background do topo na cor azul com uma pequena transio em degrade para chamar a ateno do menu, onde o mesmo est na cor branca. Suas categorias e subcategorias permaneceram as mesmas. E para dar mais destaque aos cones das redes sociais, acrescentamos uma aba na cor branca posicionada acima do menu e os devidos cones na cor azul para manter o padro da composio. A tipografia tambm permaneceu a mesma, pois a idia era ser uma sem serifa e utilizar suas derivadas.

Com a anlise do segundo exemplo, percebemos que o layout aindaestava confuso e havia um excesso de azul em vrias reas do layout. E alm disso, encontramos um pouco de dificuldade no contedo que iria ser destacado na pgina inicial. 24

Layout Final

25

Esse o nosso primeiro layout final do projeto. Escolhemos a verso preto e branco do logotipo do curso, pois as cores das verses anteriores brigavam com a composio do layout. Essa verso do logotipo fez com que pudssemos aplicar as cores do logo do curso no site sem que as mesmas brigassem com o logotipo. Nessa composio, utilizamos o azul, o cinza, o magenta e o branco. O topo permaneceu com a composio de azul no background com uma transio em degrade e em especficas reas para se destacar, e o branco no menu e na aba das redes sociais. Acrescentamos tambm, uma sombra nas categorias do menu para dar mais destaque as mesmas. Logo abaixo inclumos o banner rotativo onde seriam destacados alguns contedos principais que remetem ao curso. Logo abaixo do banner, seriam destacadas as redes sociais como o Twitter, o Youtube e o Facebook do curso. Na rea do Twitter, iriam aparecer as ltimas postagens feitas no twitter do curso. Na rea do Youtube, seriam destacados alguns vdeos que so importantes para o entendimento do curso. E na rea do Facebook, iramos acresce ntar o plugin da box de Curtir a pgina do curso no facebook. Acrescentamos tambm, a baixo das redes sociais, uma rea onde seriam destacados os vdeos que foram gravados pelos professores explicando sobre as disciplinas relacionadas. O usurio teria a opo de clicar no semestre desejado e apenas os vdeos relacionados aquele semestre iriam permanecer na rea para serem visualizados. Abaixo da rea dos vdeos, colocamos os tpicos essenciais para o entendimento do curso. Nesses tpicos, utilizamos

26

cones que ilustram seus devidos tpicos. A importncia da iconizao nos d uma maior facilidade para entendimento do contedo a ser passado para o usurio, ou seja, ao bater o olho o usurio j entende o que est se passando e adquire as informaes necessrias sem precisar pensar muito. Ao lado desses tpicos sobre as informaes essenciais sobre o curso, achamos necessrio adicionar uma rea somente para Perguntas Frequntes relacionadas ao curso, pois os usurios ainda podem ficar em dvida sobre como realmente funciona o curso por ele ser tecnolgico. Na rea abaixo dos tpicos, posicionamos o menu expansivo pois ele uma opo para melhorar a forma de distribuio do espao e tambm facilita na navegao pelo site por usurios com deficincia visual. Tambm utilizamos a iconizao no menu para dar mais objetividade ao contedo. Acrescentamos tambm o plugin do Google Maps para dar a localizao de um modo mais dinmico e gil da Universidade Santa Ceclia. No footer do site, alm do menu expansivo, acrescentamos um banner rotativo bem simples onde iriam ficar rolando os logotipos do parceiros do curso. Ao passar o mouse sobre eles (efeito :hover), os logotipos iriam tomar sua cor original. Aps a realizao dessa primeira etapa, fizemos novas pesquisas pois ainda no estvamos satisfeitos com o layout em si. Ele ainda estava confuso e sua composio no estava agradando. Suas cores no estavam sendo aplicadas corretamente, pois havia um excesso em vrias reas do layout. Tambm percebemos que a distribuio do contedo no estava objetiva e poderia acabar confundindo o usurio.

27

Projeto Final Pesquisas

Nosso interesse por Design Responsivo se deu a idia onde os usurios poderiam acessar o site de qualquer dispositivo tecnolgico como: Desktops, Tablets e Smartphones. Como o site se trata de um curso Multimdia, achamos obrigatrio o site ser facilmente acessado por esses meios, sendo assim, chamando mais ainda a ateno do nosso pblico alvo e dos interessados pelo curso.

O que Design Responsivo?

Basicamente um projeto grfico inteligente que prev a adaptao do layout ao dispositivo (smartphone, tablets, desktops e notebooks sejam elas pequenas ou grandes resolues). Trata-se indiscutivelmente de um grande feito para a usabilidade mobile, especialmente pela simplicidade de desenvolvimento no exige uma mudana de plataforma, rduos treinamentos, nem sequer uma nova especialidade; apenas um aperfeioamento para o desenvolvedor web.

Como Surgiu?
Em 2010, pensando em melhorar a sua experincia de navegao, Ethan Marcotte criou o artigo Responsive Web Design (http://www.ilearn.com.br/artigos/design-responsivo/) para o blog A List Apart. Ele apresenta o arquiteto ingls Christopher Wren, que disse certa vez que arquitetura uma arte que objetiva a eternidade. Todo arquiteto que se preze quer construir um prdio que seja admirado (e habitado) por 28

sculos. Infelizmente o Design Digital no tem a permanncia da arquitetura. Na verdade, o que projetado para internet hoje, j estar desatualizado daqui a duas semanas. Ou seja, a internet est em constante atualizao.

Novas Adaptaes
Ao mudarmos o foco do nosso site para um site responsivo, tivemos que alterar inmeras partes para a adaptao das novas tcnicas que seriam implementadas. A mudana do layout foi brusca, pois a proposta do layout anterior no se encaixava nas tcnicas do design responsivo. A primeira rea do layout que pensamos foi o menu e seu contedo, pois suas categorias no teriam subcategorias para melhor visualizao do site. Com isso, dividimos o menu em nove categorias, que so: Home, O Curso, Professores, Disciplinas, Eventos, Portflio, Parceiros, Contato e FAQ. Home Na Home, o contedo se baseia em um carousel (banner rotativo), que tambm responsivo, onde passaro alguns banners com um breve texto para chamar a ateno do usurio e fazer com que ele se interesse pelo o que est sendo passado. Deixamos em destaque quatro itens importantes para o entendimento do curso e suas vertentes: um banner falando sobre um infogrfico em motion sobre os cinco anos do curso de Produo Multimdia, outro banner dando destaque as inscries do Vestibular 2013 da Universidade Santa Ceclia, outro banner redirecionando para o grupo do Facebook para os interessados pelo curso para esclarecerem suas dvidas e trocarem informaes com os professores e 29

alunos, e um outro banner sobre as Perguntas Frequentes sobre o curso, onde algumas dvidas tambm podero ser esclarecidas atravs do contedo do site em sua devida pgina. Abaixo do carousel, destacamos no contedo as informaes bsicas sobre o curso, onde o usurio poder analisar a durao do curso, quantas vagas so oferecidas por turno, a avaliao do MEC sobre o curso, o valor da mensalidade, a modalidade (se graduao, graduao de curta-durao tecnlogo, ps-graduao) e os coordenadores e diretores do curso juntamente com seus e-mails para contato. O footer (rodap) do site, como no padro, ir se repetir em todas as pginas dos contedos. Nele, contamos com a composio de alguns itens importantes que so: o menu expansvel que serve para melhor navegao e acessibilidade no site, principalmente para deficientes visuais que acessam a internet, e uma rea com um breve contato da Unisanta destacando seu endereo, telefones, um link redirecionando para o Google Maps e o e-mail para contato com o curso. Alm disso, deixamos tambm em destaque no footer alguns links das redes sociais pertencentes ao curso. O Curso Na pgina do curso, fizemos um agrupamento sobre alguns contedos que deveriam permanecer no site e que so importantes para um melhor entendimento sobre o curso e o que ele pode oferecer. Dividimos em quatro tpicos: O Profissional exigido pela sociedade da imagem e Campo de Atuao, explicam sobre o que o curso oferece e sobre o mercado de trabalho. O texto de Salas explica a estruturao 30

das salas de aulas, laboratrios e estdios que o curso oferece para determinadas disciplinas. E o texto de Bibliotecas explica sobre as trs bibliotecas que temos na Universidade e que podem ser visitadas pelos estudantes de qualquer curso. Professores Na pgina dos professores organizamos por ordem alfabtica os nomes dos professores e algumas informaes bsicas e de rpido acesso sobre eles como o E-mail, o Facebook e o Currculo lattes. As imagens especficas de cada professor, ao serem clicadas, exibir um vdeo no qual foi gravado pelos mesmos onde eles fazem uma introduo sobre quais disciplinas iro ministrar no decorrer do curso. Utilizamos esses vdeos para passar de forma agradvel e interativa para os usurios se informarem sobre as disciplinas que cada professor ir apresentar durante o curso. Utilizar vdeos para ilustrar o contedo que ser passado uma tcnica muito interessante, pois da mesma forma que o usurio est obtendo informaes, ao mesmo tempo ele est se entretendo, e com isso a recepo das informaes se tornam mais agradveis e menos cansativas de serem recebidas e visualizadas. Disciplinas Na composio da pginas sobre as disciplinas, as mesmas foram dividas entre seus devidos semestres. Para a organizao entre as disciplinas, seus semestres e os professores, criamos uma espcie de lista onde no topo ir escrito o semestre em destaque e ao clicar no semestre desejado, a lista ir se expandir e ter os nomes das disciplinas ao lado esquerdo e o nome dos professores ao lado direito. 31

Eventos Para dar um destaque sobre os eventos que ocorrem durante o curso, dividimos eles em sete itens: Aula Magna, Salo Dino de Humor, SAMBA, Multimostra, Multifest, Encontro ADG e Palestras em geral. Abaixo dos eventos citados, temos mais dois tpicos falando sobre as Atividades que fazem parte do curso, onde os alunos podem participar para ganharem horas de atividades complementares e as Excurses que tambm so realizadas durante o curso. Portflio Para a idia do portflio do curso, tivemos que realizar algumas pesquisas e analisamos alguns sites de agncias, estdios e seus portflios. Notamos uma certa padronizao em seus layouts e no contedo a ser passado. Para dar destaque aos projetos criados, geralmente posiciona-se uma imagem do projeto ou que represente-o alinhada a esquerda ou a direita seguida de um ttulo e uma breve descrio sobre o que se trata o projeto e um link ou um boto para mais informaes.

Adam http://adam.co/

Amazee Labs http://www.amazeelabs.com/en/cli ents

32

Com isso, a pgina do portflio do curso baseada nesses critrios, pois alm de se encaixarem no padro, sua visibilidade favorvel e de fcil entendimento. Parceiros Para a estruturao da pgina dos parceiros, tambm realizamos algumas anlises em alguns sites onde tambm percebemos um padro entre eles. Os parceiros, ou at mesmo os clientes em sites de agncias, so divididos entre seus devidos logotipos, onde so alinhados um ao lado do outro, no mximo trs ou quatro em cada linha, dependendo do nmero de parceiros ou clientes.

Plan B http://planb.com.br/

The Film Agency http://thefilmagency.eu/

Contato A pgina de contato no teve muito segredo. Nela se baseia os seguintes itens: um breve formulrio para ser preenchido caso algum usurio queira entrar em contato direto com a coordenao do curso, um mapa do Google Maps da localizao da faculdade juntamente com o seu endereo e seus telefones para contato. E logo abaixo dos mesmos, h uma rea para os agradecimentos, crditos e apoio. 33

FAQ Na pgina das Perguntas Frequentes, separamos algumas perguntas importantes para maior entendimento e esclarecimento sobre o curso de Produo Multimdia. Seu contedo est divido em tpicos, destacando-se as perguntas e consecutivamente suas respostas. Em relao ao contedo, tentamos deixa-lo objetivo com perguntas e respostas breves, porem bem explicativas.

Conceito Visual e Esttico das Pginas

Cor Para a realizao do projeto tambm foram realizadas algumas pesquisas sobre diagramaes, cores, distribuio de contedo, cones, entre outros, para conseguirmos trabalhar de forma correta no processo criativo do site e na construo dos layouts. As cores que fazem parte da composio do layout so inspiradas no logotipo do curso, que sua marca principal e tem grande destaque no site. Trabalhamos basicamente com cinco cores, sendo elas: Magenta, Cinza Claro, Cinza Escuro, Azul e Branco.
#EB268E RGB 235, 38, 142 #DDDDDD RGB 221, 221, 221

#444444 RGB 68, 68, 68

#00B1EC RGB 0, 177, 236

#FFFFFF RGB 255, 255, 255

34

Escolhemos o Magenta e o Azul por remeterem ao logotipo do curso, e o Cinza e seu tom mais claro e o branco por serem cores neutras onde combinam na composio de qualquer elemento e se contrastam de forma harmoniosa. Sendo assim, as cores neutras no brigam com as cores mais fortes, fazendo com que a identidade visual logotipo ganhe maior destaque em seu site. Alguns testes com variaes das cores e das verses do logotipo:

35

Tipografia A escolha da tipografia no foi muito complicada, pois sabemos que as melhores famlias tipogrficas para se trabalharem na web so fontes sem serifa, pois do maior legibilidade nas telas. Nossas primeiras idias foram baseadas nas fontes Futura e Helvetica, porm ambas so pagas e devem conter os devidos crditos para utiliz-las. Pesquisando mais a fundo e vimos que o Google Web Fonts disponibiliza tipografias para o uso gratuito, onde encontramos a fonte Lato. Experimentamos a Lato no site e ficou tima na composio do layout. Ela tem uma tima legibilidade e sua forma muito boa para se trabalhar. No site utilizamos uma de suas derivadas, que a Bold, para dar destaque aos principais ttulos do contedo. Utilizamos o tamanho de 22px para o menu e ttulos, 16px para todo o texto do contedo e 14px para o contedo do rodap. Porm, como o site responsivo, o tamanho das fontes ir se adequar a resoluo da tela na qual o site estiver sendo acessado. 36

Estrutura do Site
Alinhamento de Textos
Todo site deve conter o seu logotipo ou sua marca principal destacada ao lado esquerdo ou direito no topo do site. Para mantermos o padro, porm saindo um pouco do comum, posicionamos o logotipo ao lado esquerdo do topo justamente para ganhar esse destaque, ao seu lado inclumos a sidebar (menu) na leitura vertical, pois o alinhamento esquerda reduz drasticamente o tempo de pesquisa pelo usurio, devido sua experincia na leitura e escrita humana. Com isso, tambm alinhamos todo o contedo de texto do site esquerda para melhor leitura do usurio.

37

Alinhamento de Imagens Nas pginas de Portflio e Eventos, podemos perceber as imagens alinhadas esquerda e o texto ao seu lado descrevendo a imagem com seu devido ttulo.

Nas pginas de Professores e Parceiros, onde s h imagens, dividimos elas entre trs ou quatro imagens por fileira juntamente com o seu espaamento correto entre elas. Na pgina dos Parceiros, seus logotipos esto em efeito alpha, mas ao passar o mouse por cima o logotipo ficar com suas devidas cores. Utilizamos esse efeito pois assim os logotipos no brigam entre si e uns no chamam mais a ateno que os outros, porm ao ficar com suas devidas cores o destaque somente do tal logotipo. 38

39

40

Front-End
Software
Fireworks Foi utilizado o Fireworks por se tratar de um software de edio de imagem voltado pra web e que no possui tantos problemas de compatibilidade de efeitos com o HTMLcomo o Photoshop Sublime text 2 O editor de cdigo Sublime Text 2 foi escolhido por se tratar de um dos editores mais utilizados e com inmeras ferramentas para facilitar o front-end alm de ser Open Source e super leve comparado com programas como Dreamweaver Winless (compilador LESS) Winless foi utilizado para compilar os cdigos LESS para o CSS, foi escolhido por ser um dos poucos no mercado que no possui bugs.

41

Tecnologias empregadas
As linguagens utilizadas forem HTML5, Less(CSS), PHP, Zepto (jQuery), e Javascript.

Resolues
O layout foi desenhado e adaptados para as seguintes resolues: Desktop: 1920x 1080 | 1366 x 768 | 1024 x 768 Tablet: 768 x 480 Smartphones: 480 x 320

Requisitos
Navegadores que aceitem HTML5, CSS3 e Javascript. Ex: Chrome 18+, Firefox 14+, entre outros.

42

Concluso
Com a realizao do nosso projeto gostaramos de dar uma nova cara na web para o curso de Produo Multimdia, renovando seu site antigo para dar maior abrangencia e atingir assim, o maior nmero de pessoas interessadas no curso para ingressar no mesmo. Com as tcnicas utilizadas, os alunos podero acessar o site de qualquer lugar com maior facilidade e agilidade, tornando assim o site mais agradvel e acessvel para os usurios.

43

Bibliografias KRUG, Steve "No me faa pensar". So Paulo Market Books, 2001. GORDON, Bob; GORDON, Maggie; traduo SANTI, Ilka Maria "O Essencial do design grfico ". So Paulo: Editora Senac, So Paulo, 2012. BARROS, Lilian Ried Miller "A cor no processo criativo: um estudo sobre a Bauhaus e a teoria de Goethe". So Paulo: Editora Senac So Paulo, 2006. MEMRIA, Felipe "Design para a Internet: projetando a experincia perfeita". Rio de Janeiro: Campus/Elsevier, 2005. REVISTA COMPUTER ARTS. So Paulo: Editora Europa Ltda, 2006. Referncias da Internet
Algumas referncias da Internet j foram ditas na parte de Pesquisas. Iremos acrescentar alguns links sobre vdeos, tutoriais e outros blogs que foram lidos para o desenvolvimento do projeto.

45

Vdeos/Tutoriais
#DevCast - 09 - Design Responsivo com Leandro Lima http://www.youtube.com/watch?v=g2QhPwRAWf8 #DevCast - 15 - Boas praticas de desenvolvimento HTML5 e CSS3 http://www.youtube.com/watch?v=sCn1U97ifuY O que usabilidade? http://www.youtube.com/watch?v=sCbUHiLZ6QY

Sites
Choco La Design http://chocoladesign.com/category/design/webdesign Design.Blog http://design.blog.br/web-design/ Caelum http://blog.caelum.com.br/category/web-design/ Front End Brasil http://www.frontendbrasil.com.br/ Tableless http://tableless.com.br/ CSS Tricks http://css-tricks.com/

46