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

Transcrição

1 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

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

3 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!

4 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 Í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 Tipografia Disciplinas Influentes EXECUÇÃO DO PROJETO Logótipo Renovação Logótipo Estacionário Merchandising Design Website Programação Website Colorblind Softwares Utilizados Linguagens de Programação CONCLUSÃO REFERÊNCIAS DE SÍTIOS NA INTERNET ANEXOS

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

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

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

9 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. Figura 2 Primeira ideia de logo, ilumity Design. 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. 9

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

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

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

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

14 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. Figura 4 Logótipo original da Benafrio, criado em 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. Figura 5 Renovação do logótipo da Benafrio pela CridyTech. 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. 14

15 Estacionário Imagem gráfica da empresa nas suas diversas aplicações. Estacionário - Cartão-de-visita Croqui 1 Figura 6 e 7 Cartão-de-Visita Opção 1 (vista frontal e traseira). Estacionário - Cartão-de-visita Croqui 2 Figura 8 e 9 Cartão-de-Visita Opção (vista frontal e traseira).. 15

16 Estacionário - Cartão-de-visita Croqui 3 Figura 10 e 11 Cartão-de-Visita Opção 3 (vista frontal e traseira). 16

17 Estacionário Envelope Croqui 1 Figura 12 Envelope (vista frontal). Estacionário Envelope Croqui 2 Figura 13 Envelope (vista frontal). 17

18 Estacionário Envelope Croqui 3 Figura 14 Envelope (vista frontal). 18

19 Estacionário Folhas Croqui 1 Figura 15 e 16 Folhas (vista frontal e traseiral). Figura 17 e 18 Folhas (vista frontal e traseiral). 19

20 Estacionário Folhas Croqui 3 Figura 19 e 20 Folhas (vista frontal e traseiral). 20

21 Merchandising Aplicação do logótipo em produtos publicitários. Merchandising Caneca Croqui 1 Figura 21 Mockup de Caneca. Merchandising Caneca Croqui 2 Figura 22 Mockup de Caneca. 21

22 Merchandising Caneca Croqui 3 Figura 23 Mockup de Caneca. 22

23 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. Menu Submenu Figura 24 Primeira versão do website. 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. Figura 25 Segunda versão do website. 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. 23

24 Figura 26 Versão final do website. 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. Figura 27 Template base usufruído pela CridyTech. 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. 24

25 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. Figura 28 Divs do website. 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. 25

26 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. Figura 28 (Ampliada) Menus do website. 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 29 Informação do website. 26

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

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

29 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 29

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

31 REFERÊNCIAS DE SÍTIOS NA INTERNET ColorBlindness Regras W3SCHOOL Tutoriais

32 CSS Tooplate - Template Outros

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