O documento discute o desenvolvimento de um portfólio digital para mostrar o trabalho de um designer. Ele descreve os objetivos de criar um portfólio interativo e acessível e analisa portfólios semelhantes para identificar aspectos positivos e negativos. Também apresenta wireframes e detalhes de design para o portfólio projetado.

1. Reideson Nazareth
Victor Maxwell

2. Delimitação do Tema:
Atualmente, o mercado de trabalho chegou a um
nível de exigência alto, obrigando a nos
qualificarmos a fim de resultar em nosso
reconhecimento profissional, no qual podemos
nos destacar em diversas áreas, como a gráfica,
web e 3D.
“Podemos levar em consideração que um dos
motivos principais para tal exigência é a
virtualização da sociedade, onde Levy (1996 -
O que é o virtual?) nos mostra que, esta,
é uma tendência social”.

3. Delimitação do Tema:
Ao pensarmos na área de Design como
profissionais, devemos ter em mente os princípios
de Strunck (2007 – Viver de Design) para
levarmos em considerações diversos fatores para
nos destacarmos, como, por exemplo,
conhecer todas as áreas de atuação de um
projeto, procurando transmitir segurança
para seu cliente; quais fatores devemos levar
em conta para causar uma boa impressão nos
mesmos, entre outros.

4. Problematização:
Hoje na internet se o Portfolio não possuir uma rica
funcionalidade ou um conteúdo atualizado, você
estará em desvantagem em relação aos que
possuem.
Para Nielsen (apud. Memória 2005, p. 06)
A usabilidade tem componentes múltiplos e é
tradicionalmente associada a estes cinco atributos:
ser fácil de aprender, ser eficiente na
utilização, ser fácil de ser recordada, ter
poucos erros e ser subjetivamente
agradável

5. Objetivos
Geral:
Desenvolver um portfólio em formato de
multimídia.
Específico:
Estudar conceitos de interação;
Aplicar conceitos de design (gestalt,
estudo das cores, metodologia);
Analisar similares.

6. Justificativa
Ao pensarmos no mercado de trabalho, devemos
ter em mente que a primeira impressão é
muito importante para o cliente, pois
segundo Struck (2007, pag. 32) “essa
primeira opinião que temos a respeito das
coisas, muitas vezes baseada em dados
superficiais, tem um enorme poder de
fixação em nossas mentes.”,

7. Justificativa
Ou seja, percebe-se que nosso portfolio pode
marca o cliente, criando o destaque necessário
para nossa carreira profissional. Portanto, fica
claro a necessidade de criarmos um portfólio para
deixarmos de ser desconhecido para o cliente,
pois, segundo Stuck (2007, pag. 28)
“quando vamos provocar um primeiro
contato com um provável futuro Cliente,
somos inteiramente desconhecidos,
devendo fazer um esforço muito maior
para quebrar as barreiras naturais
existentes”.

8. Procedimentos Metodológicos
Metodologia
Cien-fica:
Esta fase da pesquisa cientifica tem um
procedimento metodológico, pois, para Gil (2002,
p.19) “a pesquisa exige que as ações
desenvolvidas ao longo de seu processo
sejam efetivamente planejadas”, o objetivo é
identificar as necessidades de uma organização a
fim de encontrar respostas para um problema a
partir dos procedimentos científicos para o
desenvolvimento de uma interface.

9. Procedimentos Metodológicos
Metodologia
Cien-fica:
QUANTO
A
SUA
NATUREZA
QUANTO
AOS
PROCEDIMENTOS
TÉCNICOS
QUANTO
À
ABORDAGEM
INSTRUMENTOS
DE
QUANTO
AOS
OBJETIVOS
COLETA
DE
DADOS
A finalidade de apresentar uma pesquisa aplicada, nas
metodologias cientificas, pois pretende solucionar um
determinado problema com foco no público-alvo, pois
segundo Medeiros (2007, p.10) “os conhecimentos
adquiridos são utilizados para a aplicação prática
voltada a solução de problemas concretos da vida
moderna”.

10. Procedimentos Metodológicos
Metodologia
Projetual:
Segundo BOMFIN(1984, p.04) os métodos são
instrumentos de trabalho que através de técnicas
podem auxiliar na organização das tarefas,
tornando-as exatas, isso defini a aplicação desta
metodologia neste projeto de pesquisa, que irá
abordar as seguintes técnicas de forma linear. O
método linear é uma seqüência de técnicas de
desenvolvimento do projeto, uma seguida da outra, sem
retorno, diferentemente do método cíclico que possibilita
o retorno entre as etapas.

11. Procedimentos Metodológicos
Metodologia
Projetual:
A metodologia do projeto será baseada nos conceitos,
definições, métodos e processos de autores consagrados
em design, estruturados de acordo com as etapas
sugeridas por Baxter(1998).
LEVANTAMENTOS
SELEÇÃO
DE
ALTERNATIVAS
DE
DADOS
REQUISITOS
E
PARÂMETROS
DESENVOLVIMENTO
GERAÇÃO
DE
ALTERNATIVAS
DETALHAMENTO

12. Analise de Similares
Positivos
Aspecto clean;
Arquitetura da
informação bem distribuída;
Acessibilidade;
Navegabilidade;
Leiturabilidade;
Legibilidade.
Negativos
Feedback não fica a amostra pro usuário

13. Analise de Similares
Juliana
Apolo
(hOp://www.julianaapolo.com/flash.html)
Positivos
Arquitetura
da informação
bem estruturada;
Legibilidade;
Contraste;
Feedback para o
usuário bem
sinalizado.
Negativos
Variedade na tipologia;
Ausência de acessibilidade;
Conteúdo do site possui muitas fontes externas.

14. Analise de Similares
Positivos Ruy
Adorno
PorXólio
(hOp://
www.ruyadorno.com)
Interabilidade;
Aspecto clean;
Acessibilidade;
Contraste bem
definido;
Arquitetura da
informação bem
distribuída.
Negativos
Iconografia utilizada (por exemplo: coração para
especificar a seção works);
Menu bem escondido.

15. Requisitos e Parâmetros
Requisitos Parâmetros
Navegabilidade Navegação fácil e intuitiva para o usuário por meio da acessibilidade às informações.
Feedback Indicação através das cores, textos segregados e animações.
Interatividade Através de animações e um feedback simples.
Informações sobre o Por meio do link “About”, onde o usuário terá acesso a um breve resumo sobre o autor
autor e também ao seu curriculum vitae.
Por meio do link “Contact”, onde o usuário terá acesso ao telefone, endereço do autor
Entrar em contato
e poderá mandar e-mail para o mesmo através de um formulário.
Através do link “Works”, onde o usuário terá acesso às informações dividas em grupos
Trabalhos do autor
como Gráfico, Web, 3D.
Informações
sobre
Em
cada
projeto
selecionado,
o
usuário
terá
acesso
a
mais
informações
sobre
o
mesmo
como
o
trabalhos nome,
o
ano
e
sobre
o
que
era
o
projeto
através
da
arquitetura
da
informação
bem
resolvida.

16. Wireframe
Alternativa 03

17. Wireframe
Alternativa 03

18. Wireframe
Alternativa 03

19. Gestalt
Para Dondis (1997, p. 28), “captamos a informação
visual de muitas maneiras. As forças perceptivas e
sinestésicas de natureza fisiológicas são vitais para
o processo visual.”
Unidade, Segregação, Fechamento,
Continuidade, Pregnância da Forma,
Contraste.

20. Gestalt
“Sobre um indivíduo que recebe a
comunicação visual, a cor exerce uma
ação tríplice: a de impressionar, a de
expressar e de construir. A cor vista:
impressiona a retina. E sentida: provoca
uma emoção, e é construtiva, pois tendo
um significado próprio, tem valor de
símbolo e a capacidade, portanto, de
construir uma linguagem que comunique
uma idéia.” (FARINA 1990, p. 27).

21. Gestalt
Paleta de cores do Site:
“Sobre um indivíduo que recebe a comunicação visual, a
cor exerce uma ação tríplice: a de impressionar, a de expressar
e de construir. A cor vista: impressiona a retina. E sentida:
provoca uma emoção, e é construtiva, pois tendo um significado
próprio, tem valor de símbolo e a capacidade, portanto, de
construir uma linguagem que comunique uma idéia.” (FARINA
1990, p. 27).

22. Gestalt
Paleta de cores do Site:
A cor amarela transmite alegria e vivacidade.
Chama a atenção em qualquer ponto onde é
aplicada, e é perfeita para o destaque de
algum elemento no layout.
O vermelho está intimamente ligado aos
desejos passionais. É quente, imponente,
chamativo. Suas diversas nuances apresentam
diversos significados: o vermelho escuro sugere
sobriedade e poder; o vermelho cereja é
apaixonado, feminino, sensual; o vermelho
mais claro é energizante e forte.

23. Gestalt
Paleta de cores do Site:
Marrom: Cor sóbria e sólida, deve ser usada
com moderação por trazer um aspecto muito
pesado a qualquer local que seja aplicada.
O cinza transmite a sensação de algo impuro e
indeciso (não é claro e nem escuro, preto ou
branco). É uma cor triste e sombria, mas
também pode definir um Website sóbrio e
“sério”.

24. Gestalt
Paleta de cores do Site:
O azul é uma das cores mais utilizadas em
Websites, e é uma das preferidas por quase
todas as pessoas. Transmite sensação de
tranquilidade, profundidade (quando escuro) e
limpeza (quando claro).

25. Tipografia
A tipografia corresponde à representação se sinais gráficos
como meio de expressão de palavra, ideias e elementos,
construindo, assim, mensagens visuais coerentes e até
mesmo incompreensíveis para alguns indivíduos.
(DAMASCENO, 2003, p.467)

26. Geração de Alternativas
Alternativa 03

27. Geração de Alternativas
Alternativa 03

28. Geração de Alternativas
Alternativa 03

29. Fluxo de Navegação
Por@ólio
Home
works
About
Contact
Graphic
Web
3D

30. • Referências Bibliográficas
• FARINA, Modesto. PEREZ, Clotilde. BASTOS, Dorinho. Psicodinâmica
das cores em comunicação. Edição 5, Ed. Edgard Blücher, São Paulo:
2006.
• KRUG, Steve. Não me faça pensar: Uma abordagem de bom senso à
Usabilidade na Web. Edição 2. Ed. Alta Books, Rio de Janeiro: 2006.
• LEVY, Pierre. O que é o virtual? Tradução: Paulo Neves. Edição 34,
São Paulo: 1996.
• STRUNCK, Gilberto. Viver de Design. Edição 5, Ed. 2AB, Rio de
Janeiro: 2007.