Alberto Finotti • Valter Evangelista • Kelly Miranda Giuliane Sampaio • Caio Novais
INTRODUÇÃO
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, FUNCIONALE CONSISTENTE
/ INTRODUÇÃO
/ 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 OTIMIZARA NAVEGAÇÃO DO USUÁRIO.
MÍDIAS SOCIAIS
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
/ 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.
/ 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.
/ 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.
TIPOGRAFIA
/ TIPOGRAFIA
PARA A ESCOLhA TIPOGRÁFICA, antes de assumir qualquer decisão sobre a fonte do site foram considerados alguns
ELEMENTOS FUNDAMENTAIS DE ESTUDO.
/ TIPOGRAFIA
ANATOMIA DA FONTEcontrastes das hastes, legibilidade (clareza em idenfitifcar cada tipo) e leiturabilidade (ritmo de leitura).
SET TIPOGRÁFICOOs pesos/versões da fonte e se esta tinha todos os caracteres especiais.
EXPRESSÃO TIPOGRÁFICAO “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”.
/ 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).
A PARTIR DESSES TÓPICOS,foram definidas algumas etapas para determinar a escolha da fonte.
/ TIPOGRAFIA
COM BASE NESSES FUNDAMENTOSforam 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
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
Com base nesses fundamentos a fonte escolhida foi a
ROBOTOUma 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
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 Za 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 Za 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 Za 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
REG
ULA
RBO
LD
ITÁL
ICO
/ TIPOGRAFIA
INTERFACE
/ 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.
/ 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.).
/ 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 DESENVOLVIDOUM FLUXOGRAMAcom todas os caminhos/links existentes no site.
/ INTERFACE
/ 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.
GRID
/ 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.
/ 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 APLICADOno layout tem um respiro considerável entre os elementosde composição do site.
/ GRID
Com base nisso, a orientação do grid para a diagramação do layout foi determinada em dois eixos principais:
ORIENTAÇÃO hORIZONTALconteúdo de identificação principal (menu, título, links)
ORIENTAÇÃO VERTICALconteúdo selecionado a partir do menu/links
COR
/ 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 azulpara fazer uma aproximação com a cor usada na identidade da Instituição Senac.
/ COR
R47G181B106
R23G71B158
PROGRAMAÇÃO
/ 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.
/ 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.
/ 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:
/ PROGRAMAÇÃO
MENU PRINCIPAL
/ PROGRAMAÇÃO
SCRIPTS ADCIONAIS
1.SLIDES2.SUBTÍTULO INTEGRADO À IMAGEM3.GALERIA DE IMAGENS
/ 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.
/ PROGRAMAÇÃO
ESTRUTURAÇÃO DAS PÁGINAS:
/ PROGRAMAÇÃO
ESTRUTURAÇÃO DAS PÁGINAS:
/ PROGRAMAÇÃO
ESTRUTURAÇÃO DAS PÁGINAS:
/ PROGRAMAÇÃO
ESTRUTURAÇÃO DAS PÁGINAS:
/ PROGRAMAÇÃO
ESTRUTURAÇÃO DAS PÁGINAS:
/ PROGRAMAÇÃO
RODAPÉ
FOTOGRAFIA
/ 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.
/ 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.
ÁUDIO & VIDEO
/ ÁUDIO & VIDEO
TEMA: PRIMEIROS SOCORROSFoi 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.
/ Á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
ANIMAÇÃO
/ ANIMAÇÃO
EM COJUNTO COM A DISCIPLINADE 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.
/ ANIMAÇÃO
PARA O TRATAMENTO GRÁFICODAS VINhETAS, em concordância com o posicionamento visual do layout do site, foi aplicado ilustrações de traços simples, não muitodetalhadas, funcionando como ícones de identificaçãopara cada cena gravada do video “Primeiros Socorros”.
/ ANIMAÇÃO
/ ANIMAÇÃO
CAPA VIDEO YOUTUBE
CONSIDERAÇõES FINAIS
/ 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.
/ 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.
OBRIGADO