1. Alberto Finotti • Valter Evangelista • Kelly Miranda
Giuliane Sampaio • Caio Novais

2. INTRODUÇÃO

3. A realização deste projeto acadêmico teve como
palavra-chave uma ordem de desenvolvimento:
SER FACILITADOR
Facilitar em primeira mão a comunicação
das ações da CIPA através de um portal que
reunisse o conteúdo necessário através de um
LAYOUT SIMPLES, FUNCIONAL
E CONSISTENTE
/ INTRODUÇÃO

4. / INTRODUÇÃO
Essa decisão visual do layout foi aplicada ao
perceber a densidade de informação que iria
ser publicado no site da CIPA, afim de
FACILITAR E OTIMIZAR
A NAVEGAÇÃO DO USUÁRIO.

5. MÍDIAS SOCIAIS

6. O CIBERESPAÇO
é um ambiente tecnológico que representa
um mundo simulado e que nos permite
TRANSITAR
entre as mais diversas culturas.
/ MÍDIAS SOCIAIS

7. / MÍDIAS SOCIAIS
Para maior interação com do usuário com o website
DEFINIU-SE TRÊS REDES SOCIAIS:
1.YOUTUBE
Para compartilhar de forma gratuita e
colaborativa os vídeos de eventos, campanhas
e até mesmo de outros usuários.

8. / MÍDIAS SOCIAIS
2.TWITTER
Para o gerenciamento de notícias do site da
organização CIPA, o twitter é uma forma simples
e sem burocracia para manter contato direto
entre a empresa e o seu público de interesse.

9. / MÍDIAS SOCIAIS
3.INSTAGRAM
A escolha por essa rede social se deu pela
capacidade de abrangência e divulgação
através de fotos, somado ao uso de hashtags,
que funcionam como um sistema de busca
integrados e torna mais fácil localizar os
conteúdos publicados na rede.

10. TIPOGRAFIA

11. / TIPOGRAFIA
Para a escolha tipográfica,
antes de assumir qualquer decisão sobre a fonte
do site foram considerados alguns
elementos fundamentais
de estudo.

12. / TIPOGRAFIA
Anatomia da fonte
contrastes das hastes, legibilidade (clareza em idenfitifcar
cada tipo) e leiturabilidade (ritmo de leitura).
SET TIPOGRÁFICO
Os pesos/versões da fonte e se esta tinha todos
os caracteres especiais.
EXPRESSÃO TIPOGRÁFICA
O “tom de voz” para a mensagem do conteúdo, fator super
importante para estabelecer um “elo de comunicação”
entre “objeto de design” e “usuário”.

13. / TIPOGRAFIA
ALÉM DESSE ESTUDO,
foi levado em consideração a plataforma em que ela
seria apresentada, no caso uma fonte pensada para
uso online (web).

14. A PARTIR DESSES TÓPICOS,
foram definidas algumas etapas para determinar
a escolha da fonte.
/ TIPOGRAFIA

15. COM BASE NESSES FUNDAMENTOS
foram definidas algumas etapas para determinar
a escolha da fonte.
1.TIPO DE FONTE
As fontes se dividem em dois grandes grupos
principais: Serif (tipos que contem serifas)
e as Sans-serif (tipos sem serifa ou ornamentos).
/ TIPOGRAFIA

16. 2.ARQUÉTIPO TIPOGRÁFICO
Nesse tópico foi estudada a morfologia da
fonte escolhida, pois uma das preocupações
iniciais foi recorrer a uma fonte de boa
legibilidade (de percepção visual nítida),
assim como defende Bringhurst: “um dos
princípios da tipografia durável é, sempre a
legibilidade” (2011, p.23).
/ TIPOGRAFIA

17. Com base nesses fundamentos a fonte escolhida foi a
ROBOTO
Uma fonte sem serifa, com o arquétipo da Classe de Tipos
Modernos, subclasse Linear, categoria Neogrotesco.
Segundo o autor do livro “Tipografia: uma apresentação”
esse arquétipo se calssifica por:
“(...) menor contraste entre as hastes(…) Difundidos a partir
de meados da década de 1950, têm desenho cuidadoso,
com forte preocupação com a legibilidade tanto para corpos
grandes quanto para corpos pequenos.” (2010, p.59)
/ TIPOGRAFIA

18. A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z &
1 2 3 4 5 6 7 8 9 0
Ä ä Ö ö Ü ü ÿ ë Ë è à ò ù
$ % * + = ¶ § ¢ £™ ¡ / # @ ! ? >< ^ [ ] { } ( )
“ ” ‘ ’ ã ñ º ª : ; ç « » ® ©
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z &
1 2 3 4 5 6 7 8 9 0
Ä ä Ö ö Ü ü ÿ ë Ë è à ò ù
$ % * + = ¶ § ¢ £™ ¡ / # @ ! ? >< ^ [ ] { } ( )
“ ” ‘ ’ ã ñ º ª : ; ç « » ® ©
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z &
1 2 3 4 5 6 7 8 9 0
Ä ä Ö ö Ü ü ÿ ë Ë è à ò ù
$ % * + = ¶ § ¢ £™ ¡ / # @ ! ? >< ^ [ ] { } ( )
“ ” ‘ ’ ã ñ º ª : ; ç « » ® ©
PESOS E
SET TIPOGRÁFICO
REGULARBOLD
ITÁLICO
/ TIPOGRAFIA

19. INTERFACE

20. / INTERFACE
Para o desenvolvimento da interface e análise de
usabilidade do site CIPA Senac, foi seguido
como estudo a orientação a utilização
DOS PRÍNCIPIOS
DE USABILIDADE DE NIELSEN.

21. / INTERFACE
A definição de Usabilidade
para Nielsen é
“a medida da qualidade da experiência do usuário ao
interagir com [...] um web site, um programa de computador
ou outro dispositivo que ele possa operar de alguma forma”
(1998 apud ARAÚJO, 2003, p. 153.).

22. / INTERFACE
O ponto de início na construção do site, foi a definição de
todas as páginas que seriam necessárias para construir o
mesmo.
PARA ISSO FOI DESENVOLVIDO
UM FLUXOGRAMA
com todas os caminhos/links existentes no site.

23. / INTERFACE

24. / INTERFACE
A CONSTRUCÃO DOS WIREFRAMES,
COM A ESTRUTURAS DO SITE,
tanto na versão web, como na versão responsiva, visaram
trazer um estudo de toda a usabilidade da navegacão.

30. GRID

31. / GRID
Após o estudo e definição da tipografia,
foi possível pensar e estruturar melhor um grid
para o layout do site.
Por ser um site com um conteúdo de texto denso,
a intenção foi pensar em um grid que proporcionasse
uma navageção fluida e suave,
justamente não causar tanta exaustão a vista do usuário.

32. / GRID
Com uma inspiração estética voltada para
o tratamento gráfico
do Flat Design,
a interface é propositalmente plana, sem efeitos
ou sombreamentos na composição.
POR ISSO O GRID APLICADO
no layout tem um respiro considerável entre os elementos
de composição do site.

33. / GRID
Com base nisso, a orientação do grid para a diagramação
do layout foi determinada em dois eixos principais:
ORIENTAÇÃO HORIZONTAL
conteúdo de identificação principal (menu, título, links)
ORIENTAÇÃO VERTICAL
conteúdo selecionado a partir do menu/links

36. COR

37. / COR
Tendo em vista que o site foi construído em torno de um
logotipo que o cliente já possuía (branco e verde) surgiu
a problemática da limitação quanto as cores utilizadas
no projeto.
PARA SOLUCIONAR ESSA QUESTÃO,
em representar a CIPA da Faculdade de Tecnologia Senac
Goiás, optou-se em permanecer com o verde (por já ser
bem reconhecido no logotipo) e com esta cor utilizar o azul
para fazer uma aproximação com a cor usada na identidade
da Instituição Senac.

38. / COR
R47
G181
B106
R23
G71
B158

39. PROGRAMAÇÃO

40. / PROGRAMAÇÃO
O Processo de programação do website
começou logo após
a definição do layout
Tendo em mente os conceitos de usabilidade
foi desenvolvido um
fluxograma de navegação
e posteriormente
um wireframe
que serviram como alicerce para desenvolvimento
do website.

41. / PROGRAMAÇÃO
Configurações tag head
feitas na cabeça do site, foram as tags meta, para
determinar descrição e palavras-chave, para facilitar os
mecanismos de busca a acessarem o website.

42. / PROGRAMAÇÃO
“As tags META servem para que sistemas externos
(identificam) (qual) o tipo e o conteúdo da página sem
precisar ler todo o arquivo. Elas são opcionais e invisíveis
para o usuário comum, mas muito utilizadas pelos
mecanismos de busca para indicar as palavras-chave
que podem ser encontradas no texto.”
(CARDOSO, Mardel Pág.4).
de acordo com a citação:

43. / PROGRAMAÇÃO
MENU PRINCIPAL

44. / PROGRAMAÇÃO
SCRIPTS ADCIONAIS
1.SLIDES
2.SUBTÍTULO INTEGRADO À IMAGEM
3.GALERIA DE IMAGENS

45. / PROGRAMAÇÃO
ESTRUTURAÇÃO DAS PÁGINAS:
usou-se o mesmo princípio para a organização
das páginas secundárias.
A primeira div a ser mencionada
é a de classe .body
(Não se confundir com a tag body), feito unicamente para
adicionar o grafismo presente abaixo do menu principal.
Posteriormente adicionou-se a
div de classe .usable,
para delimitar o espaço útil do website.

46. / PROGRAMAÇÃO
ESTRUTURAÇÃO DAS PÁGINAS:

47. / PROGRAMAÇÃO
ESTRUTURAÇÃO DAS PÁGINAS:

48. / PROGRAMAÇÃO
ESTRUTURAÇÃO DAS PÁGINAS:

49. / PROGRAMAÇÃO
ESTRUTURAÇÃO DAS PÁGINAS:

50. / PROGRAMAÇÃO
ESTRUTURAÇÃO DAS PÁGINAS:

51. / PROGRAMAÇÃO
RODAPÉ

52. FOTOGRAFIA

53. / FOTOGRAFIA
O conceito de que
uma imagem vale mais
que mil palavras
é o mais utilizado nas novas tendências
de design para web.
Esse conceito foi trabalhado de forma a dá
ênfase no conteúdo visual,
iserindo as imagens em um formato maior,
tendo como apoio complementar os textos em corpo menor.

54. / FOTOGRAFIA
Dessa forma o site da CIPA, servirá como um
meio de interação
e de informação,
o que fez dessa estrutura de conteúdo “texto e imagem”
funcionar muito bem.

55. ÁUDIO & VIDEO

56. / ÁUDIO & VIDEO
tema: primeiros socorros
Foi produzido um vídeo educativo, dinâmico e que nele
constassem, algumas situações de acidentes as quais
todos podem estar sujeitos, apresentando também as
soluções para tais acontecimentos.
Definição das situações
que foram apresentadas:
engasgamento, choque elétrico, intoxicação,
sangramento ou AVC.

57. / ÁUDIO & VIDEO
A partir do desenvolvimento
da premissa,
foi elaborado storyline, construção do argumento
e o roteiro das situações, que teve como pano de fundo
de fundo o cenário da própria faculdade, para a captação
das imagens

58. ANIMAÇÃO

59. / ANIMAÇÃO
EM COJUNTO COM A DISCIPLINA
DE ANIMAÇÃO,
optou-se por utilizar o recurso visual das vinhetas de
introdução a cada cena do vídeo, todas desenvolvidas e
animadas no software Adobe Flash CS6.

60. / ANIMAÇÃO
PARA O TRATAMENTO GRÁFICO
DAS VINHETAS,
em concordância com o posicionamento visual do layout do
site, foi aplicado ilustrações de traços simples, não muito
detalhadas, funcionando como ícones de identificação
para cada cena gravada do video “Primeiros Socorros”.

61. / ANIMAÇÃO

62. / ANIMAÇÃO
CAPA VIDEO YOUTUBE

63. CONSIDERAÇÕES FINAIS

64. / CONS. FINAIS
Percebido as questões
micro e macro
de desenvolvimento do projeto, buscou-se solucionar
todas as exigências do edital com uma proposta visual
de composição simples
e elementos sucintos,
porém bem resolvidos e consistentes na definição do grid.

65. / CONS. FINAIS
Conforme orientação e estudo de referenciais bibliográficos,
todos trabalharam afim de
articulAr e integrar
as pesquisas, incluindo toda a arquitetura da programação,
dentro de uma linguagem gráfica simples e uniforme.
Assim, o projeto busca ofercer uma navegação fluida,
que possibilita de forma prática e intuitiva
o acesso das informações para
otimizar a experiência do
usuário no site da CIPA.

67. OBRIGADO