Upload
pedro-sepulveda
View
214
Download
0
Embed Size (px)
DESCRIPTION
Dossier de Projecto para a cadeira de Laboratório Web, da licenciatura de Audiovisual e Multimedia, da Escola Superior de Comunicação Social.
Citation preview
[Dossier de Projecto] Portfolio / Website
Cliente: Joana Lemos
[Dossier de Projecto]
2
Staff
Docentes
Ricardo Rodrigues [EMAIL: [email protected]] [ GABINETE: 1G1-A] Rui Sobral [EMAIL: [email protected]] [GABINETE: 1G1-A]
Discente
Pedro Seplveda [EMAIL: [email protected]][N 6516] [Turno E]
[Trabalho elaborado no mbito da disciplina de Laboratrio Web] [4 Semestre da Licenciatura de Audiovisual e Multimdia] [2012-2013]
[Dossier de Projecto]
3
[Introduo]
Este projecto apresenta uma resposta para a necessidade do nosso cliente expr o seu trabalho a nvel online, atravs da concepo de um projecto de webdesign (Design + Programao) de um website de portflio, com o intuito de aplicar os conhecimentos tericos e prticos adquiridos na cadeira de Laboratrio Web.
Numa primeira fase, foi-nos atribudo um briefing para preencher, de acordo com as nossas preferncias profissionais. Neste projecto, o briefing consiste de uma caracterizao profissional da discente Joana Lemos, pelo qual iremos delinear todo o nosso conceito, pblico-alvo, os objectivos e propsitos do website.
Aps definio do conceito do website, e os seus objectivos, iremos explicar o porqu do conceito, e como este se incorpora facilmente no projecto e propsito final do cliente.
Logicamente, nesta fase iremos declarar funcionalidades e contedos, sob a forma de um Guio de Contedos.
Numa outra fase, iremos concentrar-nos na estruturao e mapeamento do website, atravs da construo de um pequeno grfico estruturacional.
Os modelos e especificaes funcionais aparecem nesta fase, para melhor compreeno da estruturao do website.
Prosseguindo na linha original de estruturao de um projecto, iremos demonstrar os Wireframes e SPECS funcionais, relativos ao nosso website. Aqui apresentada a rea de Hierarquia Visual e arquitectura de informao, sobe a forma de um esquema desenhado do esqueleto do interface. Nesta fase, iremos conjugar a apresentao dos storyboards, com os prprios SPECS, de modo a melhor entendimento das animaes.
Demonstramos, tambm, o layout grfico da Homepage, da pgina de entrada no website, e de uma pgina interna. Nesta fase iremos tambm conjugar as grelhas, com o layout grfico do website.
No finalizar do projecto, inclumos, tambm, alguns anexos importantes na execuo deste Dossier de Projecto.
[Dossier de Projecto]
4
[Memria Descritiva]
Contextualizao do website Este projecto foi realizado com o intuito de expr todos os trabalhos realizados pelo
nosso cliente, de forma organizada e profissional. O propsito deste website dar ao utilizador uma imagem (do nosso cliente) de profissionalismo, criatividade e dinamismo, demonstrando a sua vontade de aprender mais e trabalhar, disponibilizando uma variedade trabalhos realizados pelo mesmo, com o objectivo de divulgar projectos, aumentar o portfolio e participar em novos projectos.
Objectivos e caractersticas principais do website
A conceptualizao deste projecto foi feita com o objectivo de disponibilizar o mximo de informao possvel, de uma maneira clean, simples, e user-friendly. um website funcional, intuitivo, pensando na usabilidade e navegao, tanto interna, como externa.
As principais caractersticas deste website centro-se na legibilidade, na facilidade de navegao e atraco do interface, capacitando um look fludo, adequado ao propsito, e objectivos do website.
O website ir dar, objectivamente, uma percepo de utilizao de uma cmara de vdeo/fotografia, ao prprio utilizador, navegando na pgina, como se estivesse a interagir com o ecr de display de uma cmara real.
Target e Benchmark do website
O utilizador do nosso website ir ser composto por vrias personas (mais informao em anexo), deste freelancers criativos procura de colaboraes em outros projectos, at a empresas que laborem nos sectores de actividade referenciados pelo nosso cliente (Ilustrao, Fotografia, Vdeo, Design).
Para a concepo do conceito do website, fez-se uma pesquisa online sobre outros websites de portfolio, com o intuito de nos informar sobre a concorrncia que existe no mercado para este tipo de websites. Aps uma intensa pesquisa, e pormenorizada anlise, descobrimos que vrios destes websites usam em demasia o esquema de exibio de informao por mosaicos, e tantos outros utilizam o scroll down para enfatizar o contar de uma histria percorrendo uma linha cronolgica construda pelo designer. Com base neste estudo, realizou-se o sketch de um website que tivesse em conta a simplicidade e especial preocupao com o overflow de informao, pelo que, contrariamente aos websites que pesquismos, se concentra plenamente no conceito de less is more. [exemplos de websites em anexo]
[Dossier de Projecto]
5
[Guio de Contedos]
Em seguida apresentaremos os contedos de cada pgina do website, sob a forma de um guio de contedos.
Homepage
Imagem Uma fotografia ou ilustrao desfoquada ir estar colocada no background; Logotipo do cliente no canto inferior direito do ecr; Displays on-screen de um ecr de uma cmara de vdeo.
Animao Animao da imagem colocada em background; Animao em fade-in de uma instruo para melhor utilizao e visualizao do website; Barra de men; Animao com click para criao de boto.
Video/Fotografia/Ilustrao
Texto Texto explicativo de cada projecto, aps interaco do cursor.
Imagem Uma fotografia ou ilustrao desfoquada ir estar colocada no background; Pequenas imagens de trabalhos executados, actuaro como botes, conforme a pgina e o tema seleccionados; No caso da pgina do Video, as imagens sero pequenos previews dos prprios videos; Logotipo do cliente no canto inferior direito do ecr; Barra de men; Displays on-screen de um ecr de uma cmara de vdeo.
Animao Animao do trabalho colocado em background, com loop; animao das pequenas imagens que actuaro como botes; hover nos botes; na pgina de projectos de video ter player de video.
Pgina de projecto
Texto Texto explicativo de cada projecto, aps interaco do cursor.
Imagem Imagens do projecto.
Animao Animao do trabalho colocado em background, com loop; animao das pequenas imagens dos projectos com a interaco do cursor; hover nos botes; slideshow; No caso da pgina de video ter player de video.
[Dossier de Projecto]
6
[Estrutura de Informao]
Neste captulo, iremos demonstrar, atravs de um simples organigrama, o mapeamento
e estruturao do esqueleto de informao do website inserido neste projecto.
[Dossier de Projecto]
7
[Especificaes Funcionais]
Iremos agora especificar as funcionalidades do website, desde as dimenses das
pginas, at s cores escolhidas.
Dimenses da pgina
Aps uma pesquisa exaustiva online, analisou-se as tendncias e estatsticas referentes
resoluo dos monitores da maior parte dos utilizadores, e descobriu-se que a maior parte dos
utilizadores utiliza a resoluo 1024 x 768 e 1366 x 768. Ento, para melhor optimizao e
utilizao do nosso website, as dimenses sero de 1366 x 768, perspectivando-se um
crescimento na utilizao desta resoluo. Fonte: http://www.luis.blog.br/tamanho-de-um-site-qual-e-a-largura-ideal.aspx
Tipografia
Para uma melhor legibilidade na web, decidiu-se utilizar uma fonte sans serif,
facilitindo, assim, a leitura em ecr de qualquer texto. A fonte Coolvetica.
Interface
Todo o interface do website ser composto por animaes em javascript, conjugado
com HTML e CSS. Este interface recorrer de animaes para dar nfase ao trabalho elaborado
pelo cliente. Na pgina inicial, teremos uma animao associada ao movimento do cursor, o que
levar amostragem de alguns trabalhos realizados. J na homepage, teremos outra animao
associada ao cursor, revelando botes com a execuo do click. Dentro das pginas de cada um
dos projectos, o utilizador ir deparar-se com uma galeria simples, executada em Adobe Edge,
complementada com programao Javascript.
Menu/Botes
Todos os Menus e botes, foram realizados em Photoshop, e as suas animaes sero
controladas por Javascript e Adobe Edge.
Cor
Com o objectivo de tornar este website simples, utiliza-se poucas cores na construo
do mesmo, tornando-se um website intuitvo e fcil de navegar. Logo, este website foi
construdo com uma palete de cores brancas, cinzentas, azuis e pretas.
[Dossier de Projecto]
8
[Wireframes]
Homepage
Pgina de projectos
[Dossier de Projecto]
9
[Specs e Medidas Grficas]
Homepage
Na Homepage, teremos acesso a uma barra de menu na parte inferior do ecr,
composta por cinco botes, com uma animao incorporada para funo hover. No canto
inferior direito temos o logotipo/boto, animada em Edge e javascript.
No background, uma animao de imagens desfocadas, executado por funo do cursor,
permite ao utilizador desenhar os seus botes, clicando e arrastando o cursor, fazendo um
rectangulo ou quadrado, que ao largar, ficar l como um boto para uma das seces do
website, por hierarquicamente, desde o Video at aos Contactos. Dentro desse
quadrado/rectngulo, a imagem de background ficar focada nessa rea, tornando-se clicvel
como um boto.
[Dossier de Projecto]
10
Pgina de projectos
Aqui deparamo-nos novamente com uma barra de menu na parte inferior do ecr,
composta por cinco botes, com uma animao incorporada para funo hover. No canto
inferior direito temos o logotipo/boto, animada em Edge e javascript. No lado direito do ecr,
teremos imagens passar em lopo em cada um dos rectangulos, contextualizados nos projectos a
que pertencem, e caso sejam vdeos, quando o cursor se mover por cima da animao, ir fazer
um preview de qq vdeo no interior do projecto. Na frente das animaes teremos um pequeno
texto explicativo, referente a cada projecto.
[Dossier de Projecto]
11
[Mock-Up e StoryBoard]
Na pgina da homepage, podemos observar que os botes no tm a mesma dimenso,
mas logo que o utilizador desenha o quadrado ou rectngulo, essa zona fica focada, e cria-se um
boto para uma das seces.
Analisando o menu de barra inferior, podemos perceber que o boto de video est em
situao de clicado, ou seja, aps o click do cursor num dos botes da barra de men, o icone e o
lettering fica iluminado a vermelho.
[Dossier de Projecto]
12
Nesta pgina, podemos escolher entre trs projectos que durante a aco Hover do
cursor, iro mostrar direita da imagem, um pequeno texto explicativo acerca do projecto em
questo.
Analisando o menu de barra inferior, percebemos que, como na Homepage, o boto de
video est em situao de clicado, ou seja, aps o click do cursor num dos botes da barra de
men, o icone e o lettering fica iluminado a vermelho.
[Dossier de Projecto]
13
[Verso Mobile]
Ipad
Ipod