relatório crítico - irison.aesmprojetos.netirison.aesmprojetos.net/relatorio.pdf · escola...

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

Relatório Crítico

Prova de Aptidão Profissional

Tiago Alexandre Lopes Guiomar

Curso Profissional Técnico de Multimédia

12º J Nº10

Salvaterra de Magos

Junho de 2018

IRIS ON


Tiago Alexandre Lopes Guiomar

Curso Profissional Técnico de Multimédia

Projeto Produção de Multimédia

12º J Nº10

SUMÁRIO

Relatório das atividades do Projeto, IRIS ON

desenvolvido como requisito parcial dos módulos

curriculares, supervisionado pelos Professores Patrício

Oliveira, Anabela Ferreira, Tereza Fazenda, Maria João

Lucas e António Andrade, do curso Profissional Técnico

de Multimédia.

Salvaterra de Magos

Junho de 2018


Agradecimentos

Durante todo o curso tive a oportunidade de receber e partilhar conhecimentos com várias

pessoas, tanto da minha turma, professores ou profissionais do ramo.

Tenho de agradecer aos professores que tive durante todo o percurso escolar que sempre

acreditaram no meu potencial e nunca me deixaram desistir, tinham sempre uma palavra amiga

e um conselho a dar. Estavam sempre prontos a ajudar, a dar ideias e técnicas para poder

ultrapassar os problemas que foram surgindo ao longo da criação e realização do projeto.

Deixo o meu agradecimento aos professores da área técnica, ao professor Patrício Oliveira que

esteve sempre a “puxar” por nós de modo a concluirmos o projeto, dando críticas e ideias na

área visual, à professora Maria João Lucas que esteve pronta para, igualmente, dar críticas e

ideias e à professora Tereza Fazenda, ela que foi a impulsionadora para a criação deste projeto,

dando ideias para o tipo de projeto a realizar.

À turma deixo o meu obrigado por tudo o que fizeram por mim, sempre que podiam e sabiam

estavam prontos a ajudar, seja a nível técnico como a nível visual e auditivo, devo um

agradecimento especial ao meu colega João Dias, que me ajudou na resolução de problemas

com a programação do website, às minhas colegas Andreia Mendes, Ema Completo e Mónica

Miguêns, pelas críticas realizadas a nível visual.

Por último agradeço aos meus pais, eles foram um suporte importante na concretização da PAP,

pelos conselhos dados e pelas críticas realizadas.

Um agradecimento especial a todos.


Índice 1 – Resumo .......................................................................................................................... 5

1.A - Abstract .................................................................................................................... 6

2 – Introdução ....................................................................................................................... 7

2.A - Objetivos a atingir ..................................................................................................... 7

2.B - Estruturação do relatório ........................................................................................... 7

2.C - Princípios básicos ..................................................................................................... 8

2.D - Seleção de Informação ............................................................................................. 9

3 - Desenvolvimento ........................................................................................................... 10

3.A - Conceção da Ideia .................................................................................................. 10

3.B - Programas utilizados .............................................................................................. 11

4 - Logótipo do projeto ........................................................................................................ 13

5 - Criação do Website ........................................................................................................ 19

5.A - Template ................................................................................................................. 19

5.B - Homepage .............................................................................................................. 20

5.C Banner Homepage .................................................................................................... 21

5.D - Quem Somos ......................................................................................................... 21

5.E Equipa ...................................................................................................................... 22

5.F - Galeria .................................................................................................................... 22

5.G Serviços ................................................................................................................... 23

5.H - Loja ........................................................................................................................ 23

5.I Orçamento ................................................................................................................. 24

5.J- Contactos ................................................................................................................. 24

5.K Registo ..................................................................................................................... 25

5.L Login ......................................................................................................................... 25

5.M - Pedir reset palavra-passe ...................................................................................... 26

5.N Página Reset Palavra-Passe .................................................................................... 26

5.O - Backoffice ............................................................................................................... 27

5.P Backoffice / Sobre ..................................................................................................... 27

5.Q - Backoffice / Contactos ............................................................................................ 28

5.R - Backoffice / Contabilidade ...................................................................................... 28

5.S - Backoffice / Calendário ........................................................................................... 29

5.T - Perfil ....................................................................................................................... 29

5.U - Rodapé .................................................................................................................. 30

5.V - Fonts Utilizadas ...................................................................................................... 31

7 - Conclusão ...................................................................................................................... 34

8 - Anexos ........................................................................................................................... 35

Anexo I - Anteprojeto ....................................................................................................... 35

Anexo II - Trabalho de Pesquisa ..................................................................................... 37

Anexo III - Gantt .............................................................................................................. 37


1 – Resumo

Este relatório retrata todo o procedimento realizado para o desenvolvimento de um projeto

inserido na Prova de Aptidão Profissional, desenvolvido no âmbito do curso Técnico de

Multimédia. Relata todo o processo desde a concessão da ideia, à planificação de tarefas,

pesquisas e por fim o seu desenvolvimento.

O projeto aborda toda a área do design inerente à empresa criada como a criação de um logótipo,

mas também toda a programação do website da empresa, contendo este um frontent e um

backoffice.


1.A - Abstract

This report describes the entire procedure carried out for the development of a project inserted

in the “Prova de Aptidão Profissional”, developed under the Multimedia Technician course.

It reports the entire process from the granting of the idea to the planning of tasks, research and

finally its development.

The project reports the whole area of the design inherent to the company created, such as the

creation of a logo, but also the entire programming of the company website, containing one

frontend and one backoffice.


2 – Introdução

O projeto que realizei para a Prova de Aptidão Profissional no âmbito do curso Técnico de

Multimédia consiste em uma parceria feita com o colega Luís Beja, aluno do curso Técnico de

Comércio, para a criação de uma empresa Criativa e de Fotografia intitulada Iris On.

O trabalho realizado consiste na criação de todo o Design Gráfico, como a criação de logótipos,

estacionários e publicidade para a mesma e no desenvolvimento de um website.

2.A - Objetivos a atingir

● Criar uma empresa de prestação de serviços multimédia.

● Desenvolver projetos web através das técnicas adquiridas.

● Desenvolver web design.

● Desenvolver design referente à área gráfica de toda a empresa.

● Aplicar competências técnicas adquiridas ao longo do curso

2.B - Estruturação do relatório

O relatório começa com alguns agradecimentos, tanto a professores como colegas e todos

aqueles que me acompanharam durante todo o curso. De seguida apresento, através da

introdução, a ideia projetual, objetivos e noções necessárias para a realização do mesmo,

apresento o desenvolvimento onde relato todo o processo da realização do projeto, desde a

criação da empresa até ao último elemento criado.


2.C - Princípios básicos

Para a sua conceção temos de ter em mente alguns princípios.

O Design é um processo criativo para resolver problemas relacionados com a conceção de

objetos, o principal objetivo do Design é resolver o problema colocado inicialmente tendo em

conta todos os fatores que o informam, tais como:

-Fatores Funcionais

Responde às necessidades?

O material adequa-se à utilização?

-Fatores Estéticos

É atrativo em termos de forma e cores?

-Fatores Ergonómicos

É de utilização confortável para o seu utilizador?

As suas áreas de intervenção são bastante diversificadas e por isso podemos organizá-las do

seguinte modo:

– Industrial

Design de equipamento – Moda

Estilismo

– Arquitetónico

Arquitetura /Engenharia Civil


Decoração de interiores – Comunicação

Design gráfico

Design multimédia

A área que abordaremos em pormenor será, por isso, a Comunicação com base no Design

Gráfico.

Um website é a junção de várias páginas interligadas entre si, incluindo conteúdos multimédia,

normalmente identificadas por um domínio comum a todo o website e publicadas em, pelo

menos, um servidor. Alguns exemplos disso são sites como o Google, Facebook.

2.D - Seleção de Informação

● Diagramação da página o que é?

● Sistema de navegação/Informação o que é?

● Componentes necessários/relacionados (galerias, formulários...)- que tipo?

● Conceitos?

● Tipografia adequada o que é?

● Paletas/sistemas de cor adequados?

● CSS o que é?

● Que tipo de linguagem de programação tenho à disposição?

● Qual devo usar?


3 - Desenvolvimento

3.A - Conceção da Ideia

A criação deste projeto partiu de uma ideia colocada pela professora Teresa Fazenda e pelo

professor Carlos Marques dos cursos Técnico de Multimédia e Técnico de Comércio,

respetivamente, que seria a criação de uma parceria entre colegas de ambos os cursos. Pensei

bem no assunto e fui conferenciar com os colegas de Comércio sobre que tipo de trabalho iriam

desenvolver e se gostariam de fazer uma parceria.

Aí surge o colega Luís Miguel, que apresentou um tema bastante interessante e disponibilidade

para a parceria.

Depois da ideia inicial ter sido aceite, passei à pesquisa, onde pesquisei sobre empresas

semelhantes, de modo a poder recolher o melhor e o pior de cada uma delas. Procurei estilos

de logótipos de empresas criativas e de fotografia, e websites. A este processo dá-se o nome

“Estado da Arte”.

Foi realizado um anteprojeto (Anexo I) que continha toda a informação recolhida até ao

momento, possuindo este os objetivos do projeto, membros, e descrição do mesmo para que

pudesse seguir para o Conselho Pedagógico da escola, de forma a que passasse pelo processo

de aprovação.

Depois de aprovado, realizei um esboço das atividades a realizar e o seu tempo de duração a

fim de ter tudo planificado e posteriormente concluído até à entrega da Prova de Aptidão

Profissional.

Apresentámos as pesquisas anteriormente feitas (Anexo II) e procedemos à criação de um

projeto Gantt (Anexo III) (O diagrama de Gantt é um gráfico usado para ilustrar o avanço das

diferentes etapas de um projeto. Os intervalos de tempo representando o início e fim de cada fase

aparecem como barras coloridas sobre o eixo horizontal do gráfico ) onde foi inserida cada tarefa a

realizar e a sua projeção temporal, como a data de início e de término apresentadas com uma

pequena nota sobre a mesma.


Escolhi então, começar pela criação do logótipo para a empresa, pois, este identifica ou

representa uma entidade, e além disso, seria a base para o todo o trabalho futuro, como a escolha

de cores e lettering. Depois do logótipo pude conceber o site e os estacionários, respetivamente.

3.B - Programas utilizados

Para a realização da Prova de Aptidão Profissional fiz uso de vários programas, tanto de edição

de imagem como edição web.

Edição de Imagem

Adobe Photoshop CC 2017

O Adobe Photoshop CC 2017 é um software da Adobe que permite ao seu utilizador a edição

de imagens, criação de elementos e correção de fotografias.

Adobe Illustrator CC 2017

O Adobe Illustrator CC 2017 é um software da Adobe que permite ao seu utilizador a criação

de imagens vetoriais.

Adobe Lightroom CC 2017

O Adobe Lightroom CC 2017 é um software da Adobe que permite ao seu utilizador a edição

e correção de cores, de um modo mais aprofundado comparando com o Adobe Photoshop.

Edição Web


Edição de Texto

Sublime Text 3

O Sublime Text é um software de edição de texto.

Laravel

O Laravel é uma framework de desenvolvimento rápido para PHP, livre e de código aberto.

Cujo principal objetivo é permitir ao utilizador trabalhar de forma estruturada e rápida.


4 - Logótipo do projeto

Para a criação do logótipo precisamos perceber o nome da empresa.

O seu nome provém de duas palavras distintas que juntas, combinam muito bem. Uma é a

palavra Íris que representa não só o olho, mas também todas as suas cores e a outra é a palavra

“On” que significa ligar e é esta ligação que a empresa pretende dar ao seu cliente, a ligação

daquilo que o olho vê com o sentimento de superação.

Comecei por escrever o nome da empresa (IRIS ON) num papel e fui esboçando de diferentes

formas e feitios, mas achava sempre que não podia ser apenas uma simples logomarca, teria de

ter um ícone, algo que o utilizador pudesse, ao olhar, reconhecer sem grandes dificuldades.

Recorri então ao colega Luís Beja para que pudéssemos discutir ideias e arranjar uma solução

para o problema, surgiu então a ideia usar a palavra “IRIS” como uma logomarca e o ícone da

empresa seria “ON”. Surgiu também a ideia de este conter algo relacionado com uma câmara

fotográfica.

Através de conhecimentos adquiridos durante o curso, e tendo presente que teria de ter uma

parte constituinte de uma câmara fotográfica, pude reconhecer que há algo que todas as câmaras

têm, mas nem sempre são lembradas, os diafragmas.

A peça que possibilita a captura de um momento.

Fiz uma breve pesquisa sobre o funcionamento dos diafragmas e passei então à sua criação

utilizando o Adobe Illustrator. Fui fazendo alguns experimentos até que cheguei ao resultado

que pretendia.

Primeira proposta


Proposta final

Depois de ter parte da palavra “ON” feita, procurei encontrar fonts para inserir na palavra

“IRIS”. Comecei por escrever “IRIS” no Adobe Illustrator e ia fazendo scroll até encontrar um

tipo de letra que gostasse. Ao longo de toda a pesquisa que fiz consegui destacar 3 tipos de letra

(Bahnschrift, Microsoft Sans Serif e Swiss 721BT-BlackCondensedItalic).

Fonte Bahnschrift

Fonte Microsoft Sans Serif

Fonte Swiss 721BT-BlackCondensedItalic

Destes 3 tipos de letra, escolhi utilizar “Swiss 721BT-BlackCondensedItalic”, pois, derivado

à sua inclinação dá ao visualizador uma sensação de movimento, emoção.


Após juntar o diafragma com a palavra “IRIS” obtive este resultado.

Faltava, assim, criar o “N” para concluir o logótipo. Primeiramente esbocei uma ligação entre

o “O” e o “N”.

Primeira proposta

Segunda Proposta


Proposta Final

Tendo já todos os elementos criados, passei à fase da seleção de cores e, em conjunto com o

colega Luís Beja decidimos que, aproveitando a divisão anteriormente feita, iríamos dividir o

logótipo em duas zonas, uma zona monocromática que seria colocada na palavra “IRIS” e uma

zona cromática colocada na palavra “ON”.

Para a zona monocromática e depois de alguns testes de cor, decidi usar como cor principal um

cinzento-escuro, podendo ser, para motivos de leitura, a cor branca.

#231F20 #FFF

Para a zona cromática decidimos utilizar em grande parte o espectro luminoso, com maior

incidência na cor Azul.

A cor azul significa tranquilidade, serenidade e harmonia e é isso que pretendemos demonstrar

aos clientes, a harmonia existente em todos os trabalhos que realizamos.

É possível encontrar igualmente cores como o Amarelo que representa o otimismo e a alegria,

o Verde que representa a natureza e juventude, o Laranja representa a amizade e confiança e

o Rosa que representa o romantismo e ternura.


Para obter uma multiplicidade de cores, utilizei uma imagem e fiz “Clipping Mask” ao

diafragma.

Imagem utilizada

Colorização “O”

Para a letra “N” recorri à ferramenta Gradiente.

Colorização “N”


Seleção de cores

#FFEF2F #FE8542 #FF4EFF #01FE10

#006699 ->#00B1EF

Logótipos

Sendo este s o s Resultado s Finais .


5 - Criação do Website

Para a criação do website decidi estabelecer pontos de procura importantes no website, ou seja,

este teria de conter áreas como “Sobre”, “Equipa”, “Galeria”, “Serviços” e “Contactos”. Decidi

também que para além de uma página comum a todos os utilizadores, teria de haver também

uma área dedicada aos administradores.

5.A - Template

Escolhi procurar templates de websites para servir de base para o meu projeto. Encontrei então

um template muito interessante pois, continha um Backoffice e um Frontend e também

apresentava algumas funcionalidades que tinha em mente.

Backoffice


Frontend

5.B - Homepage

O website contém dois tipos de barras de navegação, uma para o utilizador que não realizou o

login e outra onde o utilizador tem o login feito.

Barra de navegação sem login

Barra de navegação com login


-

5.C Banner Homepage

Abaixo da barra e navegação é apresentado um banner com o Slogan da empresa.

Banner Homepage

5.D - Quem Somos

Nesta secção da página fazemos uma descrição da nossa empresa.

Quem Somos


-

5.E Equipa

Nesta secção é apresentada toda a equipa existente na nossa empresa.

Equipa

5.F - Galeria

Nesta secção são apresentados alguns exemplos de fotografias capturadas pelo nosso fotógrafo.

Galeria


-

5.G Serviços

Nesta secção são apresentados alguns dos serviços mais importantes que a nossa empresa

realiza.

Serviços

5.H - Loja

Nesta secção é apresentada a loja da empresa, com produtos para venda direta.

Loja


-

5.I Orçamento

Nesta secção são apresentadas algumas noções de orçamentos que a nossa empresa dispõe.

Orçamento

5.J- Contactos

Nesta secção é apresentada todas as formas possíveis para que o nosso cliente nos possa

encontrar.

Contactos


-

5.K Registo

Esta é uma área onde o utilizador pode fazer o seu registo.

Página Registo

5.L Login

Esta é uma área onde o utilizador pode fazer o login.

Página Login


-

5.M - Pedir reset palavra-passe

Esta é uma área onde o utilizador pode pedir para desfazer a sua palavra-passe

Página pedir reset palavra-passe

5.N Página Reset Palavra-Passe

Nesta página é possível criar uma nova palavra-passe.

Página Reset Palavra-Passe


-

5.O - Backoffice

Nesta página é possível alterar informações das bases de dados.

Backoffice-Página Home

5.P Backoffice / Sobre

Nesta página é possível alterar os dados da secção “Sobre” da página inicial.

Backoffice-Página Sobre


-

5.Q - Backoffice / Contactos

Nesta página é possível alterar os dados da secção “Contactos” da página inicial.

Backoffice-Página Contactos

5.R - Backoffice / Contabilidade

Nesta página é possível realizar contas, através de uma calculadora.

Backoffice-Página Contabilidade


-

5.S - Backoffice / Calendário

Nesta página é possível ver o calendário.

Backoffice-Página Calendário

5.T - Perfil

Nesta página é possível editar o perfil do utilizador

Perfil


-

5.U - Rodapé

Nesta secção da página é representado o rodapé do website contendo o logótipo, copyright e

redes sociais.

Rodapé


-

5.V - Fonts Utilizadas

A fonte utilizada no website é o Open Sans presente no Google Fonts.


6 - Referências

Sites Criativos https://www.awwwards.com/20-extremely-creative-web-layouts.html,

consultado em setembro de 2017

W3Schools www.w3schools.com , consultado em

setembro de 2017;

Wikipédia (PT) – Cascading Style Sheets

https://pt.wikipedia.org/wiki/Cascading_Style_Sheets, consulta em setembro de 2017;

Wikipédia (PT) – Arquitetura de Informação

https://pt.wikipedia.org/wiki/Arquitetura_de_informa%C3%A7%C3%A3, consultado em

setembro de 2017;

Google Fonts www.fonts.google.com, consultado em

janeiro de 2018;

HeidiSQL

https://www.heidisql.com/, consultado em abril de 2018;

Laravel https://laravel.com/ ,consultado em maio

de 2018

Bootstrap www.getbootstrap.com, consultado em

setembro de 2017;

Ideia Magenta www.ideiamagenta.pt, consultado em

novembro de

https://www.awwwards.com/20-extremely-creative-web-layouts.html

https://www.awwwards.com/20-extremely-creative-web-layouts.html

http://www.w3schools.com/



https://pt.wikipedia.org/wiki/Cascading_Style_Sheets

https://pt.wikipedia.org/wiki/Cascading_Style_Sheets

https://pt.wikipedia.org/wiki/Arquitetura_de_informa%C3%A7%C3%A3

https://pt.wikipedia.org/wiki/Arquitetura_de_informa%C3%A7%C3%A3

http://www.fonts.google.com/

http://www.fonts.google.com/

https://www.heidisql.com/

https://www.heidisql.com/

https://laravel.com/

https://laravel.com/

http://www.getbootstrap.com/

http://www.getbootstrap.com/

http://www.ideiamagenta.pt/

http://www.ideiamagenta.pt/


2017; Kriação

www.kriacao.pt, consultado em dezembro de 2017;

http://www.kriacao.pt/

http://www.kriacao.pt/


7 - Conclusão

Chegados ao fim destes três anos de curso consigo perceber que realmente gosto do que faço,

evoluí bastante os meus conhecimentos sobre as matérias lecionadas e técnicas aprendidas, por

isso, pretendo continuar a aprender mais através de um ensino superior.

Para a realização desta Prova de Aptidão Profissional foram precisos utilizar capacidades e

conhecimentos a um nível bastante elevado, o que nem sempre foi fácil pois ocorriam

contratempos que, por vezes ocupavam bastante tempo para serem solucionados.

A Formação em Contexto de Trabalho permitiu-me evoluir não só como profissional, mas

também como pessoa e por isso só tenho a agradecer por todo o apoio e conhecimento que me

foi dado.

Vendo agora a minha Prova de Aptidão Profissional concluída é um orgulho imenso perceber

que todo o esforço, dedicação, horas de sono e stress envolvidos são compensados desta

maneira.


8 - Anexos

Anexo I - Anteprojeto


Anexo II - Trabalho de Pesquisa

Anexo III - Gantt

relatório crítico - irison.aesmprojetos.netirison.aesmprojetos.net/relatorio.pdf · escola...

Documents