-
[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
