Escola Básica e Secundária de Salvaterra de Magos

Prova de Aptidão Profissional Curso Profissional Técnico de Multimédia

Cristiano Bernardo Rodrigues Grousset, N.º 5, 12.º G

Daryna Malovichko, N.º 8, 12.º G

Salvaterra de Magos 2016

Cristiano Grousset

Daryna Malovichko

CridyTech

Sumário:

Relatório das atividades do projeto CridyTech,

desenvolvido como requisito parcial dos módulos

curriculares supervisionados pelos professores Alice

Pereira, Anabela Ferreira, António Andrade, Carlos

Coimbra, Teresa Fazenda e Fátima Ferreira no curso

Profissional de Técnico de Multimédia.

Salvaterra de Magos 2016

AGRADECIMENTOS

Gostaríamos de dirigir os nossos sinceros agradecimentos a todos aqueles que nos

ajudaram na realização deste projeto, que nos vai influenciar constantemente na vida.

Em primeiro lugar, aos nossos professores Alice Pereira, Anabela Ferreira, António

Andrade, Teresa Fazenda e Fátima Ferreira pelo apoio e orientação dados ao longo do curso

e da Prova de Aptidão Profissional.

Em segundo lugar, queríamos agradecer à empresa Ideia Magenta que nos

disponibilizou os mockups de estacionários, e nos ajudou através das críticas construtivas.

Agradecemos também ao professor Carlos Coimbra pela sua disponibilidade e

empenho para a correção do nosso presente relatório.

Queremos também agradecer ao corpo docente da Escola Secundária de Salvaterra

de Magos por nos ter proporcionado as condições necessárias para a realização não só desta

prova, como também dos três anos do curso.

Finalmente, mas sem menos importância, agradecemos também à nossa família e

amigos por nos terem incentivado a levar o nosso trabalho avante com as suas críticas,

palavras de motivação e congratulações.

Obrigado por tudo!

RESUMO

O projeto consistiu na criação de uma empresa denominada “CridyTech”, cujo

objetivo é o desenvolvimento de produtos multimédia para venda a terceiros. O nosso

projeto é baseado nos produtos de imagem desde Website, fotografias, a Merchandising

para a cliente “Benafrio” - Armazéns Frigoríficos, Lda. especializada na área de armazenagem

de produtos congelados e refrigerados.

5 Salvaterra de Magos 2016

ÍNDICE

1 CONTEÚDO

AGRADECIMENTOS .......................................................................................................................................... 3

RESUMO ........................................................................................................................................................... 4

ÍNDICE .............................................................................................................................................................. 5

INTRODUÇÃO ................................................................................................................................................... 6

DESENVOLVIMENTO ......................................................................................................................................... 7

LAYOUT .......................................................................................................................................................... 7

Apresentação do Projeto .......................................................................................................................... 7

Briefing .................................................................................................................................................... 8

Escolha do Nome ..................................................................................................................................... 9

Paleta de Cores ...................................................................................................................................... 10

Tipografia .............................................................................................................................................. 11

Disciplinas Influentes ............................................................................................................................. 12

EXECUÇÃO DO PROJETO.................................................................................................................................... 13

Logótipo ................................................................................................................................................ 13

Renovação Logótipo .............................................................................................................................. 14

Estacionário ........................................................................................................................................... 15

Merchandising ....................................................................................................................................... 21

Design Website ...................................................................................................................................... 23

Programação Website ........................................................................................................................... 25

Colorblind .............................................................................................................................................. 27

Softwares Utilizados .............................................................................................................................. 28

Linguagens de Programação .................................................................................................................. 29

CONCLUSÃO ................................................................................................................................................... 29

REFERÊNCIAS DE SÍTIOS NA INTERNET............................................................................................................ 31

ANEXOS .......................................................................................................................................................... 33

6 Salvaterra de Magos 2016

INTRODUÇÃO

O tema que escolhemos para a nossa Prova de Aptidão Profissional foi pensado por

ambos os membros porque reunia as condições para que cada elemento pudesse executar

tarefas relativas às suas competências técnicas. Chegámos à conclusão de que o melhor para

nós seria a criação de uma empresa no âmbito do desenvolvimento de produtos multimédia

para venda de produtos a “Benafrio”, sendo o nome dessa empresa: “CridyTech”.

Desde o 11º ano, sempre tivemos em mente juntarmo-nos em grupo para fazer a

Prova de Aptidão Profissional. Sabíamos que cada um tinha a sua especialidade e até

funcionávamos bem em grupo e, por isso, mantivemos essa ideia e continuámos a trabalhar

juntos.

O projeto consistiu na criação da imagem de marca da empresa “Benafrio” cuja se in

titulou como nosso cliente. Essa imagem de marca contém a renovação do logótipo da

empresa, a construção do Website, a sua versão Colorblind e o Merchandising da respectiva

empresa.

Na elaboração do projeto utilizámos diferentes softwares, cada um com a sua

funcionalidade, sendo eles: Adobe Illustrator CC, Adobe Photoshop CC, Adobe Dreamweaver

CS5.5 e Gantt.

Figura 1 – Resumo da Metodologia Projetual.

7 Salvaterra de Magos 2016

DESENVOLVIMENTO

LAYOUT

Apresentação do Projeto

A ideia da criação da imagem de marca de uma empresa surgiu após uma discussão

entre ambos os membros do grupo sobre o que poderia ser desenvolvido como Prova de

Aptidão Profissional, algo que reunisse as competências individuais de cada elemento do

grupo.

Depois de termos o nosso projeto aprovado pelo concelho pedagógico e antes de

começarmos a desenvolver o projeto criámos o anteprojeto.

A imagem da empresa desenvolvida tem como público-alvo qualquer empresa,

cliente, organismo ou instituição que necessitem de produtos multimédia, neste caso a

nossa cliente “Benafrio”. A criação da imagem de marca da empresa “Benafrio”, tem como

objetivo cativar e fidelizar novos clientes na área de armazenagem de produtos congelados e

refrigerados.

Em relação ao contacto com o cliente, tentámos estar disponíveis. Aceitámos as suas

opiniões assim como oferecemos as nossas. Mas em geral tivemos a total liberdade no

projeto desde que informasse-mos o cliente para diferentes ideias que o pudessem ajudar

no seu projeto ou negócio.

8 Salvaterra de Magos 2016

Briefing

No início do projeto sabíamos quais os conteúdos que iriamos desenvolver mas

desconhecíamos alguns dos termos técnicos e algumas formas de os realizar. Com o

desenvolver do trabalho passámos a conhecê-los e optámos por fazer alguns esboços do que

iríamos desenvolver mais tarde. Sabíamos apenas que a imagem de marca da empresa

cliente que iríamos promover tinha que ser agradável e apelativa.

A nossa cliente “Benafrio”, referiu-nos alguns dos produtos que necessitava, e assim

pudemos ter mais uma ideia fixa do que íamos trabalhar ao longo do ano, focamo-nos

primeiro na parte do design. De seguida unimo-nos então para a produção do website da

nossa cliente.

A divulgação do trabalho desenvolvido não seria importante, já que não temos

atividade empresarial, mesmo assim, decidimos criar um logótipo para identificarmos

diversos trabalhos desenvolvidos por nos, para não existir necessidade de aplicar ambos os

nomes dos membros, no que toca a descrição.

9 Salvaterra de Magos 2016

Escolha do Nome

A primeira fase do projeto foi todo em base da criação da nossa empresa, já que a

mesma tinha como objetivo o desenvolvimento de produtos multimédia, o seu nome tinha

que, obrigatoriamente, estar relacionado com a multimédia. Procuramos não fugir do

conceito dos nossos nomes, pois que somos um grupo de 2. “CridyTech” ou (Cri) é a fusão

das palavras “Cristiano” e “Criativity”. A parte do “Dy” remete para o conceito básico da

multimédia o design, assim como para o nome Daryna. O Tech significa technology

(tecnologia) é o termo que envolve o conhecimento técnico ou científico na aplicação deste

conhecimento através de sua transformação no uso de ferramentas. Durante a fase de

pesquisa na nossa Metodologia Projetual, concluímos que não existe nenhum registo com o

nome CridyTech ou parecido na internet. Outros nomes que passaram pelo papel foram:

iLumity Design e Creatividy.

Na seleção do nome existiram bastantes dificuldades. As mais difíceis de ultrapassar

foi o facto de querermos um logo dentro dos conceitos do gaming, já que ambos

gostávamos de gaming, mas refletimos e decidimos abandonar as ideias chegando assim a

conclusão que queríamos um logo dentro dos conceitos de design.

Optámos pelo nome em inglês já que a entidade poderia vir a trabalhar com clientes

estrangeiros. Caso essa expansão não exista o nome continua a ser universal, por isso, não

haverá grandes problemas. O logo esta muito dentro das ideias dos nomes dos membros,

mas mesmo assim conseguimos manter o relacionamento com a multimédia.

Figura 2 – Primeira ideia de logo, iLumity Design.

10 Salvaterra de Magos 2016

Paleta de Cores

O nosso projecto consiste em duas paletas de cores, a nossa, e a do nosso cliente:

Paleta CridyTech

As cores mostradas acima são a base da nossa entidade. Condicionamo-nos numa

paleta difícil de conjugar, como uma espécie de incentivo visual ao público-alvo de que

existem raras e únicas formas de conjugar diferentes cores. Nós decidimos que queríamos

juntar cores quentes com cores frias, também no sentido de deixar a entender duas

competências de multimédia distintas, como o design e a informática.

Paleta Benafrio

Nesta paleta não tivemos qualquer oportunidade de interferência, pois que a paleta

foi fornecida pela empresa, esta que existe desde 1995 com o mesmo logotipo e imagem de

marca, e insistiu em não existir qualquer mudança notória.

11 Salvaterra de Magos 2016

Tipografia

Todos os produtos executados são diferentes, sejam internos ou para venda e, por

isso, cada um tem o seu estilo e, por essa razão, o seu tipo de letra. Nos produtos

multimédia utilizámos as fontes descritas na lista abaixo.

12 Salvaterra de Magos 2016

Disciplinas Influentes

Durante estes três anos do curso, todas as disciplinas técnicas tiveram influência no

nosso projeto, principalmente no último ano.

Técnicas de Multimédia

o Aprendizagem do funcionamento dos diferentes softwares utilizados

atualmente no trabalho, tais como: Adobe Photoshop, Adobe Illustrator.

Design, Comunicação e Audiovisuais

o Aprendizagem da linguagem gráfica/visual e domínio estético.

Sistemas de Informação

o Aprendizagem das ferramentas e linguagens de programação utilizadas na

web, tais como o Dreamweaver (HTML, CSS).

Projeto

o Aprendizagem da metodologia de projeto e desenvolvimento do relatório.

A formação em contexto de trabalho sensibilizou ambos os membros na forma de

trabalhar em equipa, permitiu também o desenvolvimento de saberes individuais.

13 Salvaterra de Magos 2016

EXECUÇÃO DO PROJETO

Logótipo

Após a escolha do nome e do mesmo ter o seu significado explícito, passámos à

criação do logótipo. Como gostamos de manter os nossos trabalhos com um design limpo,

moderno, enigmático, complexo e simples ao mesmo tempo, baseado em cores e gradientes

únicos, optámos por fazer o mesmo para o logótipo.

Figura 3 - Evolução do logótipo e versões finais.

Como pode ser observado na Figura 1, a evolução da cor do logótipo deve-se a um

hexágono, no qual dividimos a nossa paleta e decidimos à evolução da própria. O azul foi

escolhido por estimular a criatividade e estar associado à tecnologia/inovação. O vermelho e

as suas cores segundarias, o amarelo e o laranja são cores vibrantes, que demonstram

paixão, neste caso paixão pela tecnologia assim como também são as cores mais luminosas e

devem ficar no plano à frente.

14 Salvaterra de Magos 2016

Renovação Logótipo

Após formarmos a nossa empresa, seguimos para a “Benafrio” e a partir da

metodologia projetual que mostramos a nossa empresa cliente, ela deu-nos a entender que

não poderíamos aplicar quaisquer mudanças extremamente notórias no logotipo da mesma.

O logótipo da “Benafrio” foi criado em 1998 com as cores da bandeira Holandesa,

pois que os seus donos eram Holandeses. Na altura os gradientes eram muito famosos no

software da Adobe Illustrator o que fez com que o designer tivesse exagerado neles.

Para modernizar o logótipo sem qualquer modificação no seu design, decidimos

apenas reduzir os gradientes, para facilitar a sua leitura ao público-alvo e em relação às

borders brancas, nas quais o designer posterior quis dar impressão de relevo. Neste caso nós

decidimos aplicar uma ligeira perspetiva 3D, o que realiza então a meta que o designer

posterior queria atingir de forma mais apelativa.

Realizamos também um manual gráfico de versões do logótipo para a empresa

“Benafrio”, pois que esta ainda não o tinha.

Figura 4 – Logótipo original da Benafrio, criado em 1998.

Figura 5 – Renovação do logótipo da Benafrio pela CridyTech.

15 Salvaterra de Magos 2016

Estacionário

Imagem gráfica da empresa nas suas diversas aplicações.

Estacionário - Cartão-de-visita Croqui 1

Estacionário - Cartão-de-visita Croqui 2

Figura 6 e 7 – Cartão-de-Visita Opção 1 (vista frontal e traseira).

Figura 8 e 9 – Cartão-de-Visita Opção (vista frontal e traseira)..

16 Salvaterra de Magos 2016

Estacionário - Cartão-de-visita Croqui 3

Figura 10 e 11 – Cartão-de-Visita Opção 3 (vista frontal e traseira).

17 Salvaterra de Magos 2016

Estacionário – Envelope Croqui 1

Estacionário – Envelope Croqui 2

Figura 12 – Envelope (vista frontal).

Figura 13 – Envelope (vista frontal).

18 Salvaterra de Magos 2016

Estacionário – Envelope Croqui 3

Figura 14– Envelope (vista frontal).

19 Salvaterra de Magos 2016

Estacionário – Folhas Croqui 1

Figura 16 e 17 – Folhas (vista frontal e traseira).

Figura 17 e 18 – Folhas (vista frontal e traseiral).

Figura 15 e 16 – Folhas (vista frontal e traseiral).

20 Salvaterra de Magos 2016

Estacionário – Folhas Croqui 3

Figura 19 e 20 – Folhas (vista frontal e traseiral).

21 Salvaterra de Magos 2016

Merchandising

Aplicação do logótipo em produtos publicitários.

Merchandising – Caneca Croqui 1

Merchandising – Caneca Croqui 2

Figura 21 – Mockup de Caneca.

Figura 22 – Mockup de Caneca.

22 Salvaterra de Magos 2016

Merchandising – Caneca Croqui 3

Figura 23 – Mockup de Caneca.

23 Salvaterra de Magos 2016

Design Website

Começamos por criar um esboço do website em Adobe Photoshop a partir das

indicações que a empresa nos forneceu, limitando-nos a um tema minimalista e standard,

pois que não lhes agradava a ideia de um website one page ou infite scrool.

Após vários debates no grupo e na empresa, foi-nos exigido uma organização de

website mais simplificado, e assim criamos a versão a seguir onde implementamos o

submenu dentro do menu.

Como pode ser visto na imagem acima, nos optamos primeiro pela utilização de cores

claras, que não tinham coerência com a paleta da Benafrio. Então continuamos o estudo.

Figura 24 – Primeira versão do website.

Submenu

Menu

Figura 25 – Segunda versão do website.

24 Salvaterra de Magos 2016

Após certos debates de como seriam as cores do website, chegamos á conclusão que

as cores indicadas para o website seriam as mesmas compostas pelo logo da Benafrio, tal

como a própria empresa pretendia.

Ao terminamos o design, fomos a procura de uma base que pudéssemos utilizar em

meio de programação, de modo a não começar tudo do zero.

Após a simplificação da programação com a ajuda do Template, conseguimos

desenvolver o website mais rapidamente, evitando que o cliente espere muito tempo pelo

exemplo já online.

Figura 26 – Versão final do website.

Figura 27 – Template base usufruído pela CridyTech.

25 Salvaterra de Magos 2016

Programação Website

O website tem como objetivo poder ser visto a qualquer hora e poder mostrar informação

importante relativamente à empresa Benafrio e todos os seus serviços.

Como pode ser visto na imagem a baixo, todo o website esta dividido em divs, tais

como por exemplo: header, menu_red_bar, footer, photo, e wave.

O site também é dividido em vários menus, com o objetivo de dividir a informação

em várias secções diferentes, para os utilizadores pesquisarem logo uma respetiva área do

seu agrado.

As cores usadas no website estão relacionadas com o logótipo da empresa, pois

achamos bem adequado envolver estes elementos para evitar distúrbios de cores, vale a

pena acrescentar que as cores com mais destaque são o azul, o vermelho e o branco, pois

que a empresa é de donos Holandeses e estes preferiram as cores da sua bandeira.

Figura 28 – Divs do website.

26 Salvaterra de Magos 2016

A página mostra claramente a divisão das secções através dos seus títulos com um

tamanho de fonte maior que o normal. Enquanto navegamos podemos observar que na

barra de navegação a seção atual fica com over mais escuro.

Existem 5 menus, são eles “Empresa”, “Serviços”, “Colaboradores”, “Galeria” e

“Contactos”. Não optamos pela criação de submenus, porque alguns destes não teriam

informação suficiente para compor uma página completa.

Podemos também observar que o website foi criado de maneira a colocar a

informação a meio da página, com o objetivo de chamar mais á atenção do utilizador.

Figura 28 (Ampliada) – Menus do website.

Figura 29 – Informação do website.

27 Salvaterra de Magos 2016

Colorblind

Como já foi referido anteriormente na introdução este website tem uma versão

Colorblind. Com esta versão tivemos o objectivo de expandir o número de utilizadores,

tornar este website diferente de todos os outros, e também dar uma experiencia melhor a

pessoas com daltonismo, pois que estas não toleram cores vibrantes e grandes quantidades

de cores sólidas.

Podemos observar que a opção Colorblind funciona de maneira muito simples, de

modo a ajudar o utilizador, e neste caso basta apenas um único clique (OneClick) no ícone no

canto superior direito, para alterar o modo do website para Colorblind.

Figura 30 – Versão colorblind do website.

28 Salvaterra de Magos 2016

Softwares Utilizados

Adobe Illustrator CC

o Serve também para edição de imagens vetoriais. Tem um uso similar ao

Adobe Fireworks CS6.

Exemplos de uso: Montagem do logótipo, estacionários, manual de

normas gráficas.

Adobe Photoshop CC

o Serve para a edição profissional de imagens.

Exemplos de uso: Criação do layout do website, renovação do logo da

empresa e do seu respetivo branding.

Gantt

o Serve para organizar tarefas.

Exemplos de uso: Metodologia de projeto, e Anteprojeto.

29 Salvaterra de Magos 2016

Linguagens de Programação

HTML

o Significa Hypertext Markup Language e, como o próprio nome indica, é uma

linguagem de marcação. É uma das linguagens interpretadas pelos

navegadores. Os conteúdos são organizados em elementos que podem ser

depois estilizados e tornados dinâmicos, se necessário.

CSS

o Significa Cascading Style Sheets e é a linguagem usada na estilização dos

elementos. Cascading, que significa “em cascata”, está no nome da linguagem

devido à estruturação do código.

JS

o Significa JavaScript e é utilizado na dinamização dos websites dando uma

melhor experiência ao utilizador.

CONCLUSÃO

Todo o nosso trabalho foi desenvolvido com gosto e dedicação, e tudo tende sempre

a facilitar quando é feito com gosto, pois preocupamo-nos até com os mais ligeiros detalhes.

Foram meses de trabalho para que tudo procedesse como desejado, e nunca deixámos nada

para trás.

Sabíamos por experiência que fazer tudo o que tínhamos planeado iria demorar

bastante tempo a ser desenvolvido. A primeira tarefa, que foi a escolha do nome, levou-nos

três semanas, pois que queríamos um logótipo bem planeado e bem fundamentado. O

grupo é constituído por dois elementos e ambos tínhamos que concordar e gostar do

mesmo. Apesar de ter levado esse tempo todo ficámos completamente satisfeitos com o

nome que tínhamos escolhido, sendo ele “CridyTech”. Desenhar o logótipo baseado na

descrição que tínhamos do nome foi relativamente rápido e passámos então à execução dos

produtos. Esta foi a parte mais importante do projeto, tentamos trabalhar com o máximo de

disponibilidade para a Benafrio, tiramos sempre duvidas e ideias com os donos da empresa

para que tudo fique perfeito e ao gosto deles. Em conjunto tentamos sempre procurar ideias

30 Salvaterra de Magos 2016

novas e ambos demos sempre a sua opinião para melhorar o trabalho desenvolvido pelo

outro, até concordarmos ambos os dois.

Após tudo concluído chegamos á conclusão que o trabalho desenvolvido não foi fácil,

mas foi um trabalho bom que, mais uma vez, serviu para desenvolver não só as nossas

capacidades técnicas como as nossas capacidades de trabalho em equipa. Podemos dizer

que os nossos métodos de trabalho e discussão foram por vezes pouco ortodoxos, mas isso

não foi negativo porque cada vez que isso acontecia o trabalho previamente executado era

melhorado.

31 Salvaterra de Magos 2016

REFERÊNCIAS DE SÍTIOS NA INTERNET

ColorBlindness Regras

http://designinstruct.com/print-design/free-branding-identity-mockups/

W3SCHOOL

http://www.w3schools.com/html/html_images.asp

http://www.w3schools.com/css/css_background.asp

http://www.w3schools.com/css/css_padding.asp

http://www.w3schools.com/css/css_margin.asp

http://www.w3schools.com/css/css_text.asp

http://www.w3schools.com/css/css_link.asp

http://www.w3schools.com/css/css3_buttons.asp

http://www.w3schools.com/css/css_navbar.asp

http://www.w3schools.com/html/html_paragraphs.asp

http://www.w3schools.com/html/html_css.asp

http://www.w3schools.com/html/html_links.asp

http://www.w3schools.com/cssref/css3_pr_box-shadow.asp

Tutoriais

https://www.youtube.com/watch?v=CGSdK7FI9MY

https://www.youtube.com/watch?v=4I1WgJz_lmA

https://www.youtube.com/watch?v=dDn9uw7N9Xg

https://www.youtube.com/watch?v=CPcS4HtrUEU

https://www.youtube.com/watch?v=GJ5CiFCpErE

https://www.youtube.com/watch?v=08CshKXqzoA

https://www.youtube.com/watch?v=jBadQd6vXeo

https://www.youtube.com/watch?v=9gTw2EDkaDQ

https://www.youtube.com/watch?v=YcApt9RgiT0

32 Salvaterra de Magos 2016

CSS

http://css3gen.com/box-shadow/

http://css3.bradshawenterprises.com/sliding/

http://cssmenumaker.com/blog/10-free-html-drop-down-menu-navigations

http://www.cssmatic.com/box-shadow

http://www.free-css.com/free-css-templates

http://wowslider.com/css-image-gallery-push-stack.html

Tooplate - Template

http://www.tooplate.com/

http://www.tooplate.com/view/2015-blue-wave

Outros

http://stackoverflow.com/questions/585945/how-to-align-content-of-a-div-to-

the-bottom-with-css

http://www.jssor.com/demos/image-gallery.slider

http://startbootstrap.com/template-categories/all/

http://www.cincopa.com/media-platform/services/create-photo-gallery

http://www.hongkiat.com/blog/free-responsive-image-gallery/

https://www.juicebox.net/

https://answers.yahoo.com/question/index?qid=20110718174837AAVFFoW

http://stackoverflow.com/questions/585945/how-to-align-content-of-a-div-to-

the-bottom-with-css

33 Salvaterra de Magos 2016

ANEXOS

1. Ante-Projeto (Gantt)

o Benafrio PAP\Gant_Daryna_Cristiano

2. Ante-Projecto (Word)

o Benafrio PAP\modelo_ante-projeto_PAP.pdf-

Todas as imagens utilizadas neste relatório estão disponíveis na pasta Anexos.