67
Alberto Finotti Valter Evangelista Kelly Miranda Giuliane Sampaio • Caio Novais

Apresentacao cipa final

Embed Size (px)

Citation preview

Page 1: Apresentacao cipa final

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

Page 2: Apresentacao cipa final

INTRODUÇÃO

Page 3: Apresentacao cipa final

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

Page 4: Apresentacao cipa final

/ 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.

Page 5: Apresentacao cipa final

MÍDIAS SOCIAIS

Page 6: Apresentacao cipa final

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

Page 7: Apresentacao cipa final

/ 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.

Page 8: Apresentacao cipa final

/ 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.

Page 9: Apresentacao cipa final

/ 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.

Page 10: Apresentacao cipa final

TIPOGRAFIA

Page 11: Apresentacao cipa final

/ TIPOGRAFIA

PARA A ESCOLhA TIPOGRÁFICA, antes de assumir qualquer decisão sobre a fonte do site foram considerados alguns

ELEMENTOS FUNDAMENTAIS DE ESTUDO.

Page 12: Apresentacao cipa final

/ 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”.

Page 13: Apresentacao cipa final

/ 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).

Page 14: Apresentacao cipa final

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

/ TIPOGRAFIA

Page 15: Apresentacao cipa final

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

Page 16: Apresentacao cipa final

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

Page 17: Apresentacao cipa final

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

Page 18: Apresentacao cipa final

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

Page 19: Apresentacao cipa final

INTERFACE

Page 20: Apresentacao cipa final

/ 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.

Page 21: Apresentacao cipa final

/ 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.).

Page 22: Apresentacao cipa final

/ 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.

Page 23: Apresentacao cipa final

/ INTERFACE

Page 24: Apresentacao cipa final

/ 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.

Page 25: Apresentacao cipa final
Page 26: Apresentacao cipa final
Page 27: Apresentacao cipa final
Page 28: Apresentacao cipa final
Page 29: Apresentacao cipa final
Page 30: Apresentacao cipa final

GRID

Page 31: Apresentacao cipa final

/ 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.

Page 32: Apresentacao cipa final

/ 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.

Page 33: Apresentacao cipa final

/ 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

Page 34: Apresentacao cipa final
Page 35: Apresentacao cipa final
Page 36: Apresentacao cipa final

COR

Page 37: Apresentacao cipa final

/ 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.

Page 38: Apresentacao cipa final

/ COR

R47G181B106

R23G71B158

Page 39: Apresentacao cipa final

PROGRAMAÇÃO

Page 40: Apresentacao cipa final

/ 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.

Page 41: Apresentacao cipa final

/ 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.

Page 42: Apresentacao cipa final

/ 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:

Page 43: Apresentacao cipa final

/ PROGRAMAÇÃO

MENU PRINCIPAL

Page 44: Apresentacao cipa final

/ PROGRAMAÇÃO

SCRIPTS ADCIONAIS

1.SLIDES2.SUBTÍTULO INTEGRADO À IMAGEM3.GALERIA DE IMAGENS

Page 45: Apresentacao cipa final

/ 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.

Page 46: Apresentacao cipa final

/ PROGRAMAÇÃO

ESTRUTURAÇÃO DAS PÁGINAS:

Page 47: Apresentacao cipa final

/ PROGRAMAÇÃO

ESTRUTURAÇÃO DAS PÁGINAS:

Page 48: Apresentacao cipa final

/ PROGRAMAÇÃO

ESTRUTURAÇÃO DAS PÁGINAS:

Page 49: Apresentacao cipa final

/ PROGRAMAÇÃO

ESTRUTURAÇÃO DAS PÁGINAS:

Page 50: Apresentacao cipa final

/ PROGRAMAÇÃO

ESTRUTURAÇÃO DAS PÁGINAS:

Page 51: Apresentacao cipa final

/ PROGRAMAÇÃO

RODAPÉ

Page 52: Apresentacao cipa final

FOTOGRAFIA

Page 53: Apresentacao cipa final

/ 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.

Page 54: Apresentacao cipa final

/ 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.

Page 55: Apresentacao cipa final

ÁUDIO & VIDEO

Page 56: Apresentacao cipa final

/ Á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.

Page 57: Apresentacao cipa final

/ Á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

Page 58: Apresentacao cipa final

ANIMAÇÃO

Page 59: Apresentacao cipa final

/ 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.

Page 60: Apresentacao cipa final

/ 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”.

Page 61: Apresentacao cipa final

/ ANIMAÇÃO

Page 62: Apresentacao cipa final

/ ANIMAÇÃO

CAPA VIDEO YOUTUBE

Page 63: Apresentacao cipa final

CONSIDERAÇõES FINAIS

Page 64: Apresentacao cipa final

/ 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.

Page 65: Apresentacao cipa final

/ 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.

Page 66: Apresentacao cipa final
Page 67: Apresentacao cipa final

OBRIGADO