IREI folitécuicobdigital.ipg.pt/dspace/bitstream/10314/2570/1/Rúdi... · Studiobox, que se...
Transcript of IREI folitécuicobdigital.ipg.pt/dspace/bitstream/10314/2570/1/Rúdi... · Studiobox, que se...
IREI4
folitécuico1 daGuardal’oly(echnicof Guarda
RELATÓRIO DE ESTÁGIO
Licenciatura em Comunicação Multimédia
Rúdi Samuel Fernandes
dezembro 1 2015
R E L A T Ó R I O D E E S T Á G I O
RÚDI SAMUEL FERNANDES
RELATÓRIO PARA A OBTENÇÃO DO GRAU DE LICENCIADO
EM COMUNICAÇÃO MULTIMÉDIA
DEZEMBRO 2015
Escola Superior de Educação, Comunicação e Desporto
Instituto Politécnico da Guarda
I
FICHA TÉCNICA
Aluno: Rúdi Samuel Fernandes
Número: 5007722
Curso: Comunicação Multimédia
Ano: 2015
Instituição de ensino: Escola Superior de educação, comunicação e desporto
Morada: Av. Dr. Francisco Sá Carneiro, 50 – 6300-559 Guarda
Telefone: +351 271220 100
Fax: +351 271 222 690
E-mail: [email protected]
Orientador de estágio: Carlos Brigas
Empresa: StudioBox
Morada: Rua Alexandre Herculano, 291 3510-038 Viseu
Telefone: +351232 435 131
Telemóvel: +351 968 405 494
E-mail: [email protected]
Site: www.studiobox.pt
Supervisor na Organização: Bruno Esteves
Duração do Estágio: 1 de Setembro a 1 de Dezembro
II
Agradecimentos
Em primeiro lugar gostaria de agradecer ao Instituto Politécnico da Guarda e à
Escola Superior de Educação, Comunicação e Desporto por terem contribuído para a
minha formação académica.
Ao Prof. Dr. Carlos Brigas por ter aceitado ser o meu orientador e principalmente
pela disponibilidade e apoio fornecidos.
A todos os docentes do curso de Comunicação Multimédia, pelo apoio e pela
partilha de conhecimentos ao longo destes três anos.
À empresa StudioBox, por me terem acolhido e me terem feito sentir “um membro
da família” e por depositarem em mim confiança nas minhas capacidades, para levar a
cabo a realização das diferentes tarefas.
À minha família, pelo apoio que me deram e por todos os sacrifícios feitos para
eu puder realizar a licenciatura.
Aos meus amigos/as por todos os momentos e experiências que passamos juntos
ao longo destes três anos.
III
Resumo
O relatório de estágio é um elemento fundamental para a finalização da
licenciatura em Comunicação Multimédia, este tem como objetivo caracterizar a empresa
em que realizei o meu estágio e descrever, pormenorizadamente, todas as atividades
realizadas ao longo dos três meses de estágio curricular na empresa StudioBox, situada
em Viseu, Portugal
O relatório encontra-se dividido em dois capítulos. O primeiro capítulo tem como
objetivo descrever a empresa e os serviços prestados e a sua estrutura organizacional onde
o estágio foi realizado. Onde segundo capítulo, são apresentada todas as atividades
desenvolvidas na empresa, acompanhadas pelo respetivo enquadramento teórico.
Para finalizar, é realizada uma reflexão final das experiências vividas no estágio
como também uma opinião pessoal do estagiário sobre a sua primeira experiência no
mundo do trabalho.
Palavras-Chave: Website; CMS; Design de interface;
IV
Índice Geral
FICHA TÉCNICA ....................................................................................................................... I
Agradecimentos ........................................................................................................................... II
Resumo ........................................................................................................................................ III
Índice Geral ................................................................................................................................ IV
Índice de Figuras ........................................................................................................................ VI
Índice de Tabelas ....................................................................................................................... VII
Lista de acrónimos e siglas ...................................................................................................... VIII
Glossário...................................................................................................................................... IX
Introdução .................................................................................................................................... 1
Capítulo I – StudioBox ................................................................................................................ 3
1.1 – Apresentação da empresa acolhedora – StudioBox ........................................................ 4
1.2 – Missão, Valores e Visão ..................................................................................................... 4
1.2.1 – Missão da StudioBox ................................................................................................... 4
1.2.2 – Valores da StudioBox .................................................................................................. 5
1.2.3 – A visão da StudioBox .................................................................................................. 6
1.3 – Estrutura Organizacional .................................................................................................. 6
1.4 – Serviços ................................................................................................................................ 8
1.5 – Comunicação ...................................................................................................................... 8
1.5.1 – Comunicação Interna .................................................................................................. 9
1.5.2 – Comunicação Externa ................................................................................................. 9
1.5.2.1 – Contacto Pessoal ................................................................................................... 9
1.5.2.2- Correiro Electrónico ............................................................................................ 10
1.5.2.3 – Redes Sociais ....................................................................................................... 10
1.5.2.4 – Website ................................................................................................................ 11
1.6 – Identidade Visual da StudioBox ...................................................................................... 12
1.6.1 - Nome ........................................................................................................................... 13
1.6.2 – Símbolo ....................................................................................................................... 13
1.6.3 – Logótipo ..................................................................................................................... 14
1.7 – Análise SWOT .................................................................................................................. 14
Capítulo II – Trabalhos Desenvolvidos ................................................................................... 17
2.1 – Objetivos do estágio ......................................................................................................... 18
V
2.2 – Plano de estágio ................................................................................................................ 18
2.3 – Cronograma ...................................................................................................................... 19
2.4 – Software utilizado ............................................................................................................. 21
2.5 – Enquadramento teórico ................................................................................................... 22
2.5.1 – Webdesign .................................................................................................................. 22
2.5.2 – Design de Interface para dispositivos móveis ......................................................... 23
2.6 – Projetos realizados ........................................................................................................... 26
2.7 – Casas do Prior .................................................................................................................. 27
2.7.1 – Conceção (Planeamento, Análise e Desenho) .......................................................... 27
2.7.2 – Implementação (Desenvolvimento, Testes e Alojamento) ..................................... 31
2.8 – Stramus ............................................................................................................................. 33
2.8.1 - Conceção (Planeamento, Análise e Desenho) .......................................................... 34
2.8.2 – Implementação (Desenvolvimento, testes e alojamento) ........................................ 37
2.9 – Grão Vás Confraria ......................................................................................................... 39
2.9.1 - Conceção (Planeamento, Análise e Desenho) .......................................................... 39
2.9.2 - Implementação (Desenvolvimento, testes e alojamento) ........................................ 43
2.10 – Clube de Futebol Os Viriatos ........................................................................................ 45
2.11 –Lima Limão Online ......................................................................................................... 45
2.12 – My Rally Car .................................................................................................................. 46
2.13 – NS Eletricidade ............................................................................................................... 46
2.14 – Transportes360 ............................................................................................................... 46
2.15 – Fadista Mara Pedro ....................................................................................................... 47
2.16 – Design de interfaces para dispositivos móveis ............................................................. 48
Reflexão Final ............................................................................................................................ 51
Bibliografia ................................................................................................................................ 53
Anexos ........................................................................................................................................ 54
Listagem de anexos ................................................................................................................... 55
VI
Índice de Figuras
Figura 1 – Estrutura Organizacional da Empresa .......................................................................... 7
Figura 2 – Página de Facebook da StudioBox .............................................................................. 11
Figura 3 – Website da StudioBox ................................................................................................ 12
Figura 4 – Marca da StudioBox ................................................................................................... 13
Figura 5 – Símbolo ....................................................................................................................... 13
Figura 6 – Logótipo ...................................................................................................................... 14
Figura 7 – Análise SWOT ............................................................................................................. 15
Figura 8 - Estrutura Principal de navegação website Casas Do Prior .......................................... 29
Figura 9 - Wireframe da homepage do website Casas Do Prior ................................................. 30
Figura 10 - Template Hotel Master ............................................................................................. 31
Figura 11 - Website Final (Casas Do Prior) .................................................................................. 33
Figura 12 - Estrutura principal de navegação website Stramus .................................................. 36
Figura 13 - Wireframe da homepage do website Stramus ......................................................... 37
Figura 14 - Template Natural Shop ............................................................................................. 38
Figura 15 - Website Final (Stramus) ............................................................................................ 39
Figura 16 - Estrutura principal de navegação website Grão Vás Confraria ................................. 41
Figura 17 - Wireframe da homepage do website Grão Vás Confraria ........................................ 42
Figura 18 - Template Interface .................................................................................................... 43
Figura 19 – Website Final (Confraria Grão Vás) .......................................................................... 44
Figura 20 - Edição do vídeo, Fadista Mara Pedro ........................................................................ 48
Figura 21 - Estrutura principal de navegação das aplicações móveis ......................................... 49
Figura 22 - Wireframe da aplicação móvel do Grupo Desportivo De Chaves ............................. 50
VII
Índice de Tabelas
Tabela 1 - Cronograma de atividades do mês de setembro ....................................................... 20
Tabela 2 - Cronograma de atividades do mês de outubro .......................................................... 20
Tabela 3 - Cronograma de atividades do mês de novembro ...................................................... 21
VIII
Lista de acrónimos e siglas
CSS – Cascading Style Sheets;
CMS – Content Management System;
DJ – Disc Jokey;
FTP – File Transfer Protocol;
HTML – Hypertext Markup Language;
HTTP – HyperText Transfer Protocol;
PDF – Portable Document Format;
PHP – Hypertext Preprocessor;
SQL – Structured Query Language;
SWOT – Strengths, Weaknesses, Opportunities And Threats;
URL – Uniform Resource Locator;
VOIP – Voice Over Internet Protocol.
IX
Glossário
Browser – É um programa informático que permite os utilizadores navegarem na internet.
Check-in/ Check-out – É um estrangeirismo de uma palavra inglesa, que remete o ato
de dar entrada/saída.
Child-Theme – É um processo que permite alterar o estilo e as funções de um template
sem alterar os arquivos originais do mesmo.
Designer – É um profissional que desempenha atividade de carácter técnico-científico,
criativo para elaboração de projetos de design.
E-mail – Também conhecido por correio eletrónico, permite editar, enviar e receber
mensagens através de sistemas eletrónicos de comunicação.
Facebook – É uma rede social gratuita, que permite os seus utilizadores publicarem
fotografias e lista de interesses pessoais.
Layout – Posicionamento de elementos gráficos e texto para dar aparência a uma página.
Pixéis – Um pixel, é o menor ponto que forma uma imagem digital, sendo que o conjunto
de milhares de pixéis formam uma imagem inteira.
Plugin – Os plugins são ferramentas utilizadas para expandir as funcionalidades já
existentes no wordpress, existem plugins gratuitos, estes podem ser adquiridos no
diretório de plugins do wordpress (www.wordpress.org/plugins/) e plugins pagos.
Slider – Um slider é uma ferramenta audiovisual e fotográfica, é uma exposição
sequencial de fotografias em um dispositivo eletrónico.
Software – É um conjunto de instruções digitais armazenadas em discos ou qualquer
outro suporte físico de dados digitais, são essencialmente programas informáticos
utilizados para realizarem determinadas tarefas.
Template – Os templates são ficheiros responsáveis pelo controlo do aspeto e pelo
funcionamento do website na word wide web. Estes ficheiros retiram informação da base
X
de dados do wordpress e geram o código em HTML que é enviado para os diferentes
browser’s disponíveis.
User-friendly – Software ou elemento informático fácil de perceber e usar pelo utilizador.
Website – Agrupamento de páginas web, visualizado num browser, que permite ao
utilizador o contacto com empresas, indivíduos ou locais online.
Widget – Tal como os plugins, os widgets são ferramentas utilizadas para expandir as
funcionalidades, mas ao contrário dos plugins, maior parte dos widgets existentes no
mercado podem apenas ser utilizados em secções específicas dos websites, definidas pela
equipa responsável pela criação e programação do template.
Wordpress – É uma plataforma CMS de sistema informático que permite o
gerenciamento de conteúdos nos websites.
Youtube – É um website que permite que os seus utilizadores façam upload e partilhem
os seus vídeos digitais.
1
Introdução
O presente relatório de estágio curricular surge no âmbito da licenciatura de
Comunicação Multimédia da Escola Superior de Educação, Comunicação e Desporto do
Instituto Politécnico da Guarda, este marca a conclusão da licenciatura que se iniciou em
setembro de 2012.
O estágio curricular marca o início de uma nova etapa na vida do aluno, pois
permite ao aluno um primeiro contacto com o mercado do trabalho, onde tem a
oportunidade de pôr em prática todos os conhecimentos, teóricos e práticos adquiridos ao
longo do curso assim como adquirir novas competências e conhecimentos.
Este relatório é fruto da permanência de três meses de estágio na empresa
Studiobox, que se encontra localizada na cidade de Viseu.
A StudioBox, localizada em Viseu, foi a entidade acolhedora para a realização do
estágio curricular. Trata-se de uma empresa que presta serviços de design e branding em
projetos de publicidade, web design e marketing. Posto isto, os conhecimentos que foram
obtidos durante os três anos de licenciatura poderiam ser em grande parte aplicados no
decorrer deste estágio curricular e, também, a oportunidade de adquirir novas aptidões
através dos profissionais que a representam. Esse foi o principal fator de escolha para a
realização do estágio nesta empresa. Posteriormente foi elaborado um plano de estágio
em conjunto com o supervisor da empresa, de modo a identificar quais os objetivos a
atingir com a realização do estágio, por parte do aluno, assim como as tarefas que este
iria realizar ao longo dos três meses de estágio (Anexo I).
Este relatório encontra-se dividido em dois capítulos. O primeiro capítulo contém
a caracterização pormenorizada da StudioBox, contemplando assim aspetos como a sua
história, visão e valores, a sua missão, as subsidiárias que constitui a empresa como um
todo, a sua equipa de trabalho, como a empresa funciona no seu quotidiano e uma análise
SWOT, que determina o porquê da StudioBox, ser uma empresa de sucesso com cerca de
onze anos de atividade a nível mundial.
2
O segundo capítulo está relacionado com o estágio realizado pelo estudante e a
todas as atividades desenvolvidas sempre acompanhadas pelos seus procedimentos e
estudos realizados para a sua concretização, neste capítulo também é apresentado o
enquadramento teórico sobre o design de interfaces e web design. Por fim, é apresentado
uma reflexão final do relatório, escrita na primeira pessoa sobre as experiências vividas
com o estágio e qual a sua importância a nível académico, pessoal e profissional.
3
Capítulo I – StudioBox
Apresentação da empresa acolhedora
Missão, Valores e Visão
Estrutura Organizacional
Serviços
Comunicação
Identidade Visual
Análise SWOT
4
Neste capítulo é feita uma apresentação e descrição pormenorizada da empresa
StudioBox, das atividades que desenvolve, a sua história, a sua estrutura organizacional,
entidade visual e a sua missão e valores.
1.1 – Apresentação da empresa acolhedora – StudioBox
A StudioBox foi fundada em 2004, é uma empresa especializada na criação de
estratégias de comunicação, na planificação de meios e consultoria de imagem,
desenvolve entidade corporativas, também é responsável pelo desenvolvimento de web
design, hosting e multimédia. Também participa na realização de eventos sociais,
profissionais e desportivos, para complementar todos esses eventos, despõem de um
agenciamento artístico (músicos, DJ’s, modelos, promotores, entertainers, entre outros).
A StudioBox conta com várias parcerias para dar resposta aos diversos trabalhos
solicitados pelos seus clientes.
A empresa StudioBox possui várias subsidiárias não só a nível nacional, como
também a nível mundial, marcando a sua presença em Portugal, na cidade de Lisboa e na
cidade de Viseu, no Brasil, no estado de Santa Catarina e brevemente na capital de Angola
em Luanda.
1.2 – Missão, Valores e Visão
A missão, visão e valores são os principais fatores responsáveis pela determinação
da imagem favorável ou desfavorável de uma empresa. Esta é avaliada segundo a opinião
dos diferentes públicos (Magdalena, 2012).
1.2.1 – Missão da StudioBox
Segundo Valadares (2002), a missão de uma empresa é a explicação da existência
da empresa e quais os seus objetivos e estratégias. Esta deve ser clara, objetiva e da
compreensão de todos os elementos da organização. O autor defende ainda que a missão
deve refletir a filosofia do trabalho, sem qualquer preocupação com afirmações
quantitativas.
Concluindo, a missão define o papel da entidade empresarial dentro da sociedade
5
em que está envolvida. Ela é responsável por determinar qual o seu negócio, e de que
forma ela atua neste.
A missão da StudioBox consiste em auxiliar os seus clientes a desenvolverem um
processo de comunicação válido para com os seus públicos-alvo. Cada cliente é analisado
de forma única, com o objetivo de definir a melhor estratégia de comunicação, a fim de
propor um plano de ações a desenvolver de forma aos melhores resultados serem
atingidos.
1.2.2 – Valores da StudioBox
Segundo Ribeiro (2008), os valores básicos constituem a ideologia central da
empresa e são relativamente constantes. Os valores básicos são alguns conceitos centrais
de uma empesa. Estes representam os valores fundamentais para a existência da
organização e são independentes do tipo de atividade em que a organização se encontra.
A StudioBox rege-se através de um conjunto de valores simples, no entanto
essenciais que definiu o sucesso da empresa ao longo destes quase onze anos de
existência. Esses valores assentam em:
Respeito – Tratamento gentil para com os seus clientes, promovendo assim a
harmonia e também a motivação no ambiente de trabalho da empresa;
Criatividade – A empresa está preparada para ouvir e também aconselhar os seus
clientes de forma a atingir o sucesso nos seus projetos, isto graças ao facto de
possuir uma equipa de profissionais altamente qualificados;
Rigor – Realizar todos os projetos com o maior profissionalismo e dentro dos
prazos estipulados para com o seus clientes;
Ética – Em todas as propostas que são apresentadas ao cliente, a empresa torna-
as flexíveis, para que toda a valorização do sucesso do projeto seja focado na
opinião do cliente, pois o projeto será sempre produzido ao gosto do cliente.
Excelência – Não só satisfazer os clientes, mas como também, exceder as suas
expectativas.
6
1.2.3 – A visão da StudioBox
A visão entende-se como uma orientação da empresa para o seu futuro, não
fugindo á realidade em que a empresa se encontra no presente, no entanto esta deve ter
um carácter desafiante com o objetivo de criar motivação para com os seus colaboradores
a alcançarem esses objetivos. “A visão é um quadro de um estudo futuro desejado, uma
descrição de como seria daqui a alguns anos, a partir de agora. É um quadro dinâmico do
futuro. É mais do que um sonho ou um conjunto de esperanças: é um compromisso” (Scott
et al., 1998).
A StudioBox mantém a visão com qual começou, esta acredita que um bom resultado
é obtido através de uma colaboração com os seus clientes.
1.3 – Estrutura Organizacional
Segundo Wagner (2011) a estrutura organizacional é simplesmente uma
ferramenta para atingir as situações almejadas pela empresa e deve ser elaborada de
acordo com os objetivos e as estratégias estabelecidas pela mesma. Para obter uma
organização da empresa adequada, deve ter-se em consideração a estrutura
organizacional, as rotinas e os procedimentos administrativos da mesma.
Apresenta-se a estrutura organizacional da StudioBox (Figura 1).
7
Figura 1 – Estrutura Organizacional da Empresa
Fonte: Estagiário
A estrutura organizacional da StudioBox encontra-se dividida em dois grupos
(Figura 1), no primeiro grupo encontra-mos o topo hierárquico, onde se destaca o diretor
da entidade empresarial, Bruno Esteves, que para além da direção, atua como comercial
no contacto com os clientes da empresa e como também na aquisição de novos clientes.
O segundo grupo encontra-se subdividido em dois departamentos diferentes que se
encontram no mesmo nível hierárquico:
Departamento Criativo – Este departamento é formado pelos designers, Susana
Esteves (web designer), responsável pela criação e manutenção dos websites,
Patrícia Belo (designer gráfico) é responsável pela criação de wireframes,
logomarcas, cartões-de-visita e cartazes e por fim Beto Barreto (Editor) é
responsável pela edição pela revista StudioBox (edição Portuguesa) e pela revista
Valeu! (edição Brasileira).
Departamento Comercial – Este departamento é constituído por João de
Almeida Moreira e também pelo Bruno Esteves (diretor da empresa), estes são
Director
Bruno Esteves
Departamento Criativo
Susana Esteves (webdesigner)
Patrícia Belo (Designer)
Beto Barreto (editor)
Departamento Comercial
João de Almeida Moreira
8
responsáveis por executar contactos telefónicos diariamente com o objetivo de
obter novos clientes e também de apresentar os serviços da entidade empresarial.
1.4 – Serviços
A StudioBox é uma empresa multisserviços e oferece aos seus clientes uma lista muito
diversificada de serviços tendo como especialidade o design comunicacional.
Desenvolvimento de produtos para a web – Webdesign, lojas e-comerce,
newsletters e aplicações interativas.
Desenvolvimento de Identidades corporativas – Marca/identidade, linha
gráfica, packaging, naming e campanhas publicitárias.
Gestão de conteúdos – A StudioBox realiza introdução e gestão de conteúdos
para os diversos websites dos seus clientes.
Correspondência – Receção e envio de correspondência, registando-as em papel
ou digitalmente. Distribuição da documentação às respetivas subsidiárias da
empresa.
Correio eletrónico – Envio periodicamente de e-mails com campanhas
publicitárias.
Certificação de qualidade – Análise de produtos já existentes no mercado,
informando assim uma análise SWOT dos seus produtos, aconselhando assim o
que deverá ser feito para obter melhores resultados.
WebHosting – A StudioBox disponibiliza serviços de hospedagem para os
websites realizados pela mesma, garantido assim uma melhor segurança dos
dados dos clientes e também realizando Backups desses dados regularmente em
caso de falha informática.
1.5 – Comunicação
A comunicação entende-se por todas as formas que foram desenvolvidas por uma
determinada organização com a intenção de fazer com que os seus colaboradores se
relacionem e interagem com os seus públicos.
9
Bahia (1995) defende que a comunicação empresarial é um conjunto de métodos,
recursos, técnicas, meios, etc. Pelo qual a empresa se dirige ao público interno
(funcionários da entidade empresarial) e ao público externo (os clientes da mesma). Após
a análise e compreensão da definição de públicos feita por Bahia, podemos então
considerar que existem aqui dois tipos de comunicação, a comunicação interna e a
comunicação externa.
1.5.1 – Comunicação Interna
A comunicação interna é direcionada para os funcionários e colaboradores da
empresa, esta define-se como um conjunto de atos de comunicação que se produzem no
interior da empresa (Lindon et al., 2011).
Na StudioBox, a comunicação interna é informal, pois maior parte da comunicação
é feita pessoalmente sempre que possível, quando necessário efetua-se a comunicação
através de telefonemas, mensagens ou até mesmo através de plataformas voip, tais como
o Skype.
1.5.2 – Comunicação Externa
A comunicação externa inclui toda a veiculação de informação e todos os
comunicados emitidos pela organização empresarial para um público ou uma opinião
pública fora dos limites internos. Em geral, o uso que a empresa faz dos meios de
comunicação para o fim de tornar conhecidas as suas mensagens (Bahia, 1995).
A StudioBox tem os seguintes meios para distribuir a sua mensagem:
1.5.2.1 – Contacto Pessoal
Visto que a opinião do cliente é valorizada, a StudioBox tenta manter o contacto
pessoal com os seus clientes o mais frequentemente possível, toma em consideração todos
os pontos e opiniões que os clientes fazem em relação ao trabalho que a empresa está a
desenvolver, tomando assim em consideração a ideia do cliente e analisar se essa é uma
mais-valia para o projeto ou não. Desta forma o cliente tem uma participação regular no
10
desenvolvimento do projeto e também deposita um voto de confiança na empresa para a
realização do mesmo.
1.5.2.2- Correiro Electrónico
O contacto efetuado através do serviço de correio eletrónico é o principal meio de
comunicação entre a entidade empresarial e os seus clientes, este é utilizado com o
principal objetivo de transferir documentos de pequena dimensão, normalmente
documentos em word e imagens dos trabalhos que estão a ser realizados, quando é
necessário enviar o trabalho final ao cliente a empresa recorre ao serviço WeTransfer para
enviar ficheiros de grande dimensão.
1.5.2.3 – Redes Sociais
Com a evolução das novas tecnologias, as comunicações a nível global tornaram-
se não só possíveis como também de fácil acesso a qualquer pessoa, este tipo de
comunicações quebra barreiras do espaço e do tempo da comunicação, desta forma não
existem fronteiras e a comunicação pode chegar a qualquer lugar do mundo.
Para ter uma boa comunicação com clientes a longa distâncias (normalmente fora
de Portugal) a StudioBox fornece aos seus clientes as versões dos trabalhos que realizou
até esse ponto, utilizando principalmente o facebook (Figura 2), mas também recorrendo
a outras redes socias, por exemplo, utilizando o youtube, quando o trabalho pedido pelo
cliente envolva edição de vídeo, obtendo facilmente o feedback do cliente.
11
Figura 2 – Página de Facebook da StudioBox
Fonte: www.facebook.com/design.by.studiobox - acedido a 15/10/2015
1.5.2.4 – Website
O website da StudioBox (Figura 3) existe para dar a conhecer aos seus clientes
quais os serviços que a entidade empresarial presta, também serve como uma forma de
repositório de todos os trabalhos efetuados pela mesma, ou seja, um portfólio organizado
de forma a dar a conhecer aos clientes os trabalhos que já foram efetuados ao longo dos
12
anos, também possui um formulário para contactar a empresa, como também um
formulário para pedir um orçamento à empresa, este website pode ser acedido em
www.studiobox.pt, este possui um layout simples e de fácil utilização, para que seja
possível a todos os seus públicos o consultarem sem qualquer tipo de dificuldade.
Figura 3 – Website da StudioBox
Fonte: www.studiobox.pt – acedido a 15/10/2015
1.6 – Identidade Visual da StudioBox
Segundo Lindon et al. (2011), a marca designa-se sob um conjunto de signos,
formas, cores e em alguns casos em sons. De forma a captar a atenção dos consumidores
na marca, para facilitar o processo da sua identificação e atribuição. A marca de uma
entidade corporativa é composta por um conjunto de elementos que têm o objetivo de
representar um nome, um produto, um serviço, uma empresa, uma instituição ou até
mesmo uma ideia. A marca gráfica normalmente é constituída pelo logótipo e um símbolo
e em alguns casos pode ser complementada com um slogan ou uma assinatura. A marca
gráfica da StudioBox (Figura 4), é apenas constituída pelo logótipo e pelo símbolo.
13
Figura 4 – Marca da StudioBox
Fonte: Arquivo da StudioBox
1.6.1 - Nome
O nome StudioBox, designado da língua inglesa, representa uma entidade
empresarial de origem Portuguesa onde todos os seus colaboradores comunicam entre si
em língua Portuguesa, o nome designa-se da língua inglesa pelo facto de esta língua ser
uma das principais línguas universais, o que fará com que o nome desta entidade
empresarial seja interpretado por maior parte do público externo.
1.6.2 – Símbolo
O símbolo da StudioBox (figura 5), representa os dois valores principais da
empresa: excelência e criatividade, complementando assim a logomarca graficamente.
Figura 5 – Símbolo
Fonte: StudioBox
14
1.6.3 – Logótipo
Dentro dos componentes existentes na marca de uma entidade empresarial, o
logótipo (Figura 6) representa graficamente o nome da entidade empresarial, em certos
casos é a única identificação da empresa, como por exemplo a marca do Google, Sony,
Panasonic, que não possuem outros componentes para além do logótipo. O logótipo é
responsável por dar o reconhecimento à organização, identificando assim as suas
respetivas características de atividade, produto ou serviço dentro do mercado ou para o
público externo.
Figura 6 – Logótipo
Fonte: StudioBox
1.7 – Análise SWOT
SWOT é um acrónimo de quatros focos de análise de uma entidade empresarial,
strenghts (forças), weaknesses (fraquezas), opportunities (oportunidades) e por fim
threats (ameaças). Uma força é um fator positivo, é uma característica que permite a uma
entidade empresarial aumentar a sua competitividade no mercado, uma fraqueza é algo
que se encontra em falta nessa entidade empresarial, é algo negativo, o que cria uma
desvantagem na empresa em relação à sua concorrência. Quando os pontos fortes de uma
entidade empresarial superam os fracos a empresa torna-se competitiva no mercado.
Este é um modelo de análise que possibilita a perceção das características internas
das organizações como também o ambiente externo. Depois da análise destes quatro focos
mencionados acima, as determinadas empresas podem tomar decisões de forma a
diminuir danos devidos a estratégias mal feitas.
15
Para Daychouw (2007) a análise SWOT é um instrumento fundamental para
qualquer tipo de entidade, seja esta com ou sem fins lucrativos. Este modelo permite fazer
uma análise precisa da situação em que a entidade se encontra, isto permite definir
decisões estratégicas que possam ser tomadas no presente e futuro da entidade. Este
modelo tem a sua importância no apoio à formulação de estratégias e tem a capacidade
de promover um conforto entre as variáveis internas e externas existentes, facilitando
assim escolhas e estratégias alternativas.
A análise SWOT da StudioBox (Figura 7), foi baseada em informações que foram
obtidas através de conversas informais entre o responsável da empresa e o estagiário, mas
também pelas experiências obtidas dentro da empresa.
Figura 7 – Análise SWOT
Fonte: Estagiário
16
No ambiente interno, os pontos fortes da empresa reconhecem-se pelo vasto
conhecimento profissional dos trabalhadores que constituem a entidade empresarial, desta
forma pode garantir uma maior gama de serviços que a empresa pode prestar, não
esquecendo que todos os projetos são realizados com o mesmo grau de exigência e de
profissionalismo. Outro ponto forte da empresa é a fidelização dos clientes, muitos dos
clientes que a empresa possui estão com ela desde que esta abriu os seus serviços ao
público, o facto de a empresa estar situada no centro de Viseu é bastante vantajoso, isto
faz com que a empresa seja facilmente visível como também reduz a deslocação do
colaborador com o cliente.
Em relação aos pontos fracos destaca-se o facto de a empresa não possuir
máquinas de impressão nem servidores para alojar os websites feitos pela mesma. Estes
são os maiores problemas da empresa, pois maior parte dos seus serviços contratados à
StudioBox são para impressão, cartões-de-visita, cartazes, flyers, etc.
Surgem as oportunidades para a empresa e tentar ganhar mais terreno no mercado.
A StudioBox está a desenvolver uma loja e-commerce para vender diversos produtos
relacionados com a figura histórica Viriato (Viriatvs), t-shirts, camisolas, canecas, etc.
Em contra partida existem diferentes ameaças à sustentabilidade da empresa
devido à presente crise económica. Para além desta crise económica existem várias
empresas que prestam os mesmos serviços que a StudioBox, com preços mais acessíveis
para os clientes.
17
Capítulo II – Trabalhos Desenvolvidos
Objetivos do estágio
Plano de Estágio
Cronograma
Software Utilizado
Enquadramento Teórico
Projetos Realizados
18
Neste segundo capítulo do relatório de estágio são apresentados os objetivos de
estágio, o plano de estágio, os cronogramas das tarefas realizadas no decorrer dos três
meses de estágio curricular, e por fim, é apresentada a descrição da metodologia e tarefas
realizados pelo estagiário na StudioBox.
2.1 – Objetivos do estágio
No início do estágio curricular tive como principal objetivo aperfeiçoar e
aprofundar todos os conhecimentos adquiridos ao longo dos três anos da licenciatura de
Comunicação Multimédia. Outro dos objetivos que tive foi o de realizar, com sucesso,
todas as tarefas propostas, principalmente aquelas que estavam referidas no plano de
estágio, como também contribuir para os projetos da empresa e ver o meu trabalho ser
valorizado, queria principalmente conseguir trabalhar numa das áreas que mais gosto que
é web design, com esperança de adquirir mais conhecimentos para ter uma maior
experiência profissional.
2.2 – Plano de estágio
Após ter sido aceite na empresa StudioBox e antes do estágio curricular começar,
foi efetuado um plano de estágio curricular com o principal objetivo de definir e planear
todas as possíveis tarefas que deveriam ser realizadas durante o decorrer do mesmo
(Anexo I). Foram planeadas as seguintes tarefas:
Design e criação gráfica de logotipos e estacionários;
Webdesign;
Layouts (Mockups) para aplicativos móveis;
Pesquisa de dados na internet;
Promoção de redes sociais;
Registo Fotográfico;
Tratamento de imagens;
Elaboração de estratégia de marcas para produtos (Ex: Viriatvs)
19
O plano de estágio estipulado pelo supervisor de estágio na organização foi cumprido
com sucesso, incluindo todos os trabalhos realizados nos prazos estipulados, fazendo com
que a equipa da empresa considerasse que o estagiário dominava todas as ferramentas
utilizadas.
2.3 – Cronograma
Para Heldman (2005) o cronograma detalha todas as atividades de um projeto num
formato que lista o trabalho pretendido do início ao fim. Nas tabelas seguintes descrevem
de uma forma resumida as atividades realizadas pelo estagiário na empresa, durante os
meses de 1 Setembro e 1 Dezembro (Tabela 1, Tabela 2, Tabela 3).
O cronograma está subdividido em várias atividades que são as seguintes:
Pesquisa e edição de vídeo – Todas as tarefas em que o estagiário necessitou de
utilizar ferramentas para edição de vídeo, como também efetuou pesquisas de
elementos audiovisuais para inserir nesses projetos.
Web design – Atividades que estavam relacionadas com a criação e modificação
da estrutura e do design de páginas web, estas tarefas normalmente envolvem
pesquisa de informação, registo fotográfico e pesquisa e tratamento de imagens.
Design Gráfico – São atividades em que o estagiário recorre normalmente a
programas como o Adobe Illustrator ou CorelDraw para a criação de desenhos
vetoriais, como por exemplo: Logotipos, cartões-de-visita, criação de wireframes
e papel timbrado.
Registo Fotográfico – Todas as atividades em que o estagiário necessitou
catalogar todos os produtos que seriam inseridos nos websites de e-commerce,
para desempenhar esta tarefa com sucesso, foi necessário que o estagiário
fotografa-se todos os produtos, preocupando-se com a iluminação e ângulo em
que essas fotografias eram tiradas e também que regista-se o nome do modelo do
produto com também as suas correspondentes referências.
Pesquisa e tratamento de imagens – Tarefas em que foi solicitado ao estagiário
a pesquisa e também o tratamento de imagens para serem aplicadas em websites
e em redes sociais.
20
Outros – Todas as tarefas elaboradas pelo estagiário com o fim de auxiliar os
colaboradores da empresa, como por exemplo: Entrega dos produtos utilizados
para os registos fotográficos aos respetivos clientes, entrega de projetos finais aos
clientes, introdução de conteúdos em websites, gestão de redes sociais dos
respetivos clientes da empresa.
Atividades Semanais de Setembro 1 a 4 7 a 11 14 a 18 21 a 25 28 a 30
Pesquisa e edição de vídeo
Web design
Design Gráfico
Registo Fotográfico
Pesquisa e tratamento de imagens
Outros
Tabela 1 - Cronograma de atividades do mês de Setembro
Atividades Semanais de Outubro 1 a 2 5 a 9 12 a 16 19 a 23 26 a 30
Pesquisa e edição de vídeo
Web design
Design Gráfico
Registo Fotográfico
Pesquisa e tratamento de imagens
Outros
Tabela 2 - Cronograma de atividades do mês de Outubro
Atividades Semanais de Novembro 2 a 6 9 a 13 16 a 20 23 a 27 30
Pesquisa e edição de vídeo
Web design
21
Design Gráfico
Registo Fotográfico
Pesquisa e tratamento de imagens
Outros
Tabela 3 - Cronograma de atividades do mês de Novembro
2.4 – Software utilizado
Para elaborar as tarefas propostas durante o estágio curricular, pela entidade
empresarial, o estagiário teve de utilizar diversos programas informáticos para a
realização desses projetos. A maior parte desses programas foram lecionados durante os
três anos de licenciatura de Comunicação Multimédia. Os programas em que o estagiário
não tinha qualquer tipo de formação para a sua utilização teve uma leve explicação de
como funcionam por parte dos colaboradores da entidade empresarial e também
realizando diversas pesquisas sobre o seu funcionamento, adquirindo assim novos
conhecimentos. O estagiário utilizou os seguintes programas informáticos:
Adobe Photoshop – Este é um programa informático utilizado para a edição de
imagens bitmap, ou seja, editar e manusear todo o tipo de fotografias. Desde o seu
tamanho, texturas, cor, filtros, etc.
Adobe Illustrator – Este é um software utilizado para desenho vetorial, este
programa informático permite que o utilizador crie e edite vários produtos, como
por exemplo: papel timbrado, cartões-de-visita, logomarcas, cartões-de-visita,
cartazes, etc.
Adobe Acrobar XI Pro – Este programa informático permite a criação e edição
de documentos com o formato PDF, este programa permite que o utilizador crie
documentos interativos, como por exemplo: Criação de formulários, caixas de
textos e imagens com as formatações que o designer deseja, não danificando
assim a estrutura do documento.
Adobe Première – Este software é utilizado para a criação e edição de vídeo, este
oferece muitas opções como efeitos de transição e filtros de imagem.
22
Filezilla – Software FTP open-source, este programa informático é utilizado para
fazer upload de diferentes tipos de ficheiros para servidores remotos.
WampServer – Este programa informático é usado para instalar rapidamente no
computador os softwares PHP, MySQL e Apache, ou seja, simula um servidor
local no computador do utilizador.
Sublime Text 2 – Este programa informático é um editor de texto, direcionado
para linguagens de programação, tais como: HTML, PHP, JavaScript, CSS, etc.
Poedit – É um programa informático que permite a edição de ficheiros em formato
po e pot, essencialmente permite a tradução de website sem modificar o código
original.
Camtasia Studio 8 – É um programa informático que permite a gravação do
ambiente de trabalho do utilizador, este tem também funcionalidades muito
limitadas de edição de vídeo.
2.5 – Enquadramento teórico
2.5.1 – Webdesign
Para a criação deste website realizado durante o estágio curricular, teve-se por
base a estratégia e fundamentos de Santos (2009):
A primeira etapa trata da conceção, esta tem como objetivo identificar as
informações e o conteúdo que o website deverá conter; as funcionalidades a
implementar; a informação que este irá processar com também as restrições
exigentes.
A segunda etapa trata da implementação, em que o objetivo é identificar o
processo de criação do website, aqui irão se definidas e produzidas as estruturas
de dados, testes e alojamento e compra do domínio, nesta etapa o website está
finalizado e funcional.
A terceira e última etapa trata da manutenção, esta envolve todas as modificações
que tenham sido realizadas após a aceitação do website por parte do cliente, estas
23
modificações podem tratar de adicionar novas funcionalidades, correção de erros,
ou introdução de novos conteúdos.
No entanto as etapas mencionadas anteriormente, podem dividir-se em sete tarefas:
Planeamento – Nesta tarefa o web designer aglomera ideias e tem que reconhecer
as necessidades gerais do website, geralmente, isso inclui as respostas às
perguntas: “Qual o propósito da empresa?”, “Qual a intenção com a existência do
website?”, “Quais os objetivos principais”, “Qual é o público-alvo?”, “Quais as
principais características do público-alvo?” e “Que informações disponibilizar?”;
Análise – Esta tarefa trata-se do reconhecimento detalhado de todas as funções
existentes no website, englobando assim a pesquisa, bem como a classificação de
matérias, para determinar que informação será colocada e onde;
Desenho – esta tarefa destina-se ao desenho da navegação do website, através de
wireframes, um esquema do protótipo para dar uma ideia do website final ao
cliente;
Desenvolvimento – Nesta tarefa o web designer trata da programação, execução
e produção dos diferentes tipos de conteúdos para o website;
Teste – Esta tarefa destina-se á verificação de todas as funcionalidades do website
com o objetivo de alcançar aceitação do utilizador;
Domínio/Alojamento – Trata-se de disponibilizar o website na world wide web,
de forma a ser publicado para o utilizador final;
Manutenção – Todas as alterações que tenham que ser efetuadas após a
publicação do website.
2.5.2 – Design de Interface para dispositivos móveis
À medida que o tempo passa, existem cada vez mais utilizadores nos meios de
comunicação tecnológicos, estes meios necessitam de uma simplicidade de
procedimentos e facilidade de acesso para com o utilizador, existindo assim necessidade
de existir design interface, esta área é extremamente importante na comunicação entre o
utilizador e a máquina.
24
Apesar de o design de interface ser um processo que envolve a integração de
métodos que permitam a satisfação do utilizador final, a realidade é que nem sempre se
criam interfaces amigáveis aos utilizadores, o objetivo de um interface é ser centrado no
utilizador, ou seja, simples, user-friendly e operacional.
Existem várias metodologias que asseguram um bom design de interface:
Análise de tarefas – Esta etapa é um processo de aprendizagem sobre os
utilizadores, é aconselhável realizar uma análise de tarefas o mais cedo possível
num projeto, especialmente antes do design de interface, tem como objetivos
observar esses utilizadores em tempo real (na utilização da aplicação), perceber
em detalhe como eles realizam as suas tarefas e cumprem os seus objetivos,
determinar a diversidade dos utilizadores (pessoal, social e cultural), para ajudar
a finalização da tarefa, de que forma os utilizadores são influenciados pelo
ambiente físico e que tipo de conhecimento e experiência estes já tinham
adquirido no passado.
Teste de usabilidade – Esta etapa refere-se a efetuar uma avaliação da aplicação
e testá-la através de utilizadores, durante o teste os participantes completam
determinadas tarefas comuns enquanto os responsáveis pelo teste observam o seu
desempenho, o objetivo trata-se de identificar qualquer problema com a
usabilidade da aplicação, adquirindo assim dados qualitativos e quantitativos de
forma a determinar a satisfação do participante com a aplicação. Um teste de
usabilidade oferece muitos benefícios para os responsáveis pelo desenvolvimento
da aplicação, tais como: aprender se os participantes são capazes de completar
tarefas específicas, identificar o tempo que estes demoram a efetuar as tarefas,
identificar o nível de satisfação dos participantes para com a aplicação e por fim,
identificar mudanças necessárias para melhorar o desempenho de acordo com os
objetivos de usabilidade.
Avaliação heurística – Nesta etapa os responsáveis pelo desenho e
desenvolvimento da aplicação comparam os resultados de acordo com os
princípios de usabilidade aceites na generalidade, esta etapa normalmente resulta
em uma lista de potenciais problemas na usabilidade de uma aplicação, a
avaliação heurística apresenta diversas vantagens, tais como: os responsáveis
25
pelo desenvolvimento da aplicação recebem um feedback cedo, durante o
processo de design, pode ajudar a sugerir abordagens mais corretas para corrigir
o design da aplicação e ajuda a prever possíveis problemas que possam ser
encontrados no futuro. No entanto realizar esta avaliação também pode apresentar
algumas desvantagens, tais como: especialista na área de usabilidade podem ser
difíceis de encontrar, é aconselhável usar vários especialistas e analisar os
diferentes resultados e por fim a avaliação heurística é realizada para encontrar
pequenos erros na aplicação.
De acordo com o Nielsen Norman Group1 existem dez princípios gerais para design
de interfaces:
Visibilidade do estatuto do sistema – O sistema deve manter os utilizadores
sempre informados sobre tudo o que está a acontecer.
Manter o sistema próximo do mundo real – O sistema deve falar a mesma
língua do utilizador, com palavras e conceitos familiares ao utilizador, para que a
informação seja disponibilizada numa ordem natural e lógica.
Liberdade e controlo do utilizador – Regularmente os utilizadores escolhem
funções do sistema por engano, quando isto acontece os utilizadores têm que ter
a opção de sair rápido sem qualquer tipo de diálogo.
Consistência e padrões – Os utilizadores não devem ponderar se palavras
diferentes, situações ou ações significam a mesma coisa.
Prevenção de erros – Ter um design cuidadoso que evite futuros problemas ou
até mesmo mensagens de erros.
Reconhecimento em vez de lembrança – Minimizar a necessidade de memória
do utilizador, deixando os objetos, ações e opções visíveis para fácil navegação.
Estética minimalista do design – Diálogos não devem conter informação que é
irrelevante ou raramente necessitada.
1 Adaptado e traduzido pelo estagiário. Fonte: https://www.nngroup.com/articles/ten-
usability-heuristics/ - acedido a 06/01/2016
26
Ajudar os utilizadores a reconhecerem, diagnosticar e recuperar erros –
Mensagens de erros devem ser exprimidos em línguas reconhecíveis pelos
utilizadores (sem qualquer tipo de código).
Ajuda e documentação – Mesmo sabendo que os melhores sistemas podem ser
usados sem qualquer tipo de documentação, poderá ser necessário algum tipo de
ajuda, portanto será sempre útil deixar alguma documentação caso os utilizadores
precisem de ajuda.
Flexibilidade e eficiência de utilização – Elementos que não são reparados pelos
utilizadores inexperientes, mas normalmente aceleram a interação do utilizador
experiente.
2.6 – Projetos realizados
Durante os três meses de estágio, o aluno realizou tarefas propostas pela
StudioBox, cumprido maioritariamente a função de web designer mas, tendo também
colaborado em projetos de edição de vídeo e também de design gráfico. A entidade
empresarial deu a oportunidade ao estagiário de participar num grande número de projetos
nas diversas áreas de multimédia:
Casas do Prior;
Stramus;
Grão Vás Confraria;
Clube de Futebol Os Viriatos;
Lima Limão Online;
My Rally Car;
NS Eletricidade;
Transportes360;
Nos próximos pontos são descritas as tarefas e o processo criativo de alguns projetos
em que o aluno participou.
27
2.7 – Casas do Prior
Casas do prior é uma instituição de alojamento situada em Trevões, Viseu, foi
pedido à empresa que se realiza-se um website para a instituição em causa.
O cliente solicitou que este website contivesse as mesmas características que um
website de um hotel, ou seja, que existisse uma forma de os clientes puderem efetuar o
check-in/check-out e que o responsável pela instituição recebesse a correspondente
notificação, o website também deveria conter informação sobre a instituição, como
também uma biblioteca multimédia sobre a mesma.
2.7.1 – Conceção (Planeamento, Análise e Desenho)
A criação de todos os websites desenvolvidos durante o estágio curricular
decorreram do seguinte modo:
Planeamento – Antes de passar à construção do website, é necessário efetuar um
planeamento, ou seja, reunir o máximo de conteúdos ou informações que vão influenciar
determinados aspetos e comportamentos do website final, foram respondidas várias
questões, mencionadas no ponto (2.51):
1. Qual o propósito da empresa?
A empresa Casas do Prior tem como objetivo fornecer alojamento rural aos seus
clientes, oferecendo assim a tranquilidade e isolamento e conforto aos seus clientes.
2. Qual a intenção da existência do website?
O website Casas do Prior tem a intenção de transmitir aos seus utilizadores a
localização e os contactos da instituição como também disponibilizar uma biblioteca
multimédia da mesma e ao mesmo tempo facilitar o método de reserva para os seus
clientes.
28
3. Quais os objetivos principais?
O principal objetivo das Casas do Prior é de despertar o interesse dos seus
utilizadores em efetuarem uma reserva na instituição, recorrendo a vários elementos
visuais para despertar esse interesse.
4. Qual o público-alvo?
O público-alvo da instituição Casas do Prior engloba indivíduos na faixa etária
entre os vinte cinco e sessenta anos de idade.
5. Quais as principais características do público-alvo?
As características do público-alvo podem variar de pessoa para pessoa, mas a
instituição aponta para pessoas que têm necessidade de procurar tranquilidade e conforto
para a sua estadia, a instituição também oferece disponibilidade a alojar crianças,
expandindo assim o seu público-alvo não só para casais mas também para famílias.
6. Que informação disponibilizar?
As informações a disponibilizar no website serão apenas as necessárias, tais como:
uma biblioteca de imagens, todos os contactos da instituição, o número de quartos
disponíveis para alugar, como também as características de cada um deles e ser possível
de verificar no website se esse quartos estão disponíveis na data que os utilizadores
desejam efetuar a sua reserva.
Análise – Durante esta fase foi sugerido pelo supervisor na organização, Bruno
Esteves, que realiza-se uma breve pesquisa de websites já existentes nesta área de forma
a ter uma base inicial como exemplo, após essa pesquisa ter sido realizada, as informações
que foram obtidas, foram refletidas e de seguida propostas ao cliente (Casas do Prior)
foram as seguintes:
Foi decidido juntamente com o cliente e com a colaboradora Susana Esteves que
o menu seria constituído com apenas um nível, pelo facto de não haver
necessidade para mais, visto que a homepage disponibiliza muita informação
importante, seguindo esta decisão foi construído então o modelo do menu
29
principal (Figura 8 e Anexo II), disposto do seguinte modo: “home”, “quartos”,
“galeria”, “booking.com”, “sobre nós”, “pontos de interesse” e “contactos”.
Figura 8 - Estrutura Principal de navegação website Casas Do Prior
Fonte: Estagiário
Desenho – O cliente desejava um website com um design “limpo”, de boa
apresentação, objetivo, simples com boa usabilidade e com fácil interação. Posto isto, a
plataforma CMS que foi utilizada foi o wordpress, pois é nesta plataforma que a
StudioBox constrói todos os seus websites, dos clientes.
No cabeçalho da homepage é apresentada a morada por extenso e um plugin pedido
por parte do cliente para traduzir o website para todas as línguas utilizadas na web, como
também uma ligação para o facebook da entidade. A secção número um é constituída por
um slider interativo de imagens, todas estas imagens têm uma dimensão de mil
novecentos e vinte pixéis por setecentos e quarenta pixéis (1920px x 740px), a secção
número dois é constituída por mais um slider, mas este com um propósito diferente do
que o slider que se encontra na secção número um, este tem como objetivo mostrar ao
utilizador os quartos disponíveis que as casas do prior têm para oferecer aos seus clientes,
a secção número três possibilita ao utilizador que este faça uma reserva, indicando assim
em que dia ele deseja fazer o seu check-in/check-out e descrever quantos pessoas irão
com esse utilizador (adultos e crianças), a secção número quatro está constituída por uma
pequena galeria das casas do prior e também testemunhos de clientes que já visitaram esta
instituição, por fim, a secção número cinco é o footer do website, com determinadas
informações consideradas importantes tanto para o cliente como para o estagiário, após
estas informações foi desenhado pelo estagiário um wireframe do website final (Figura 9
e Anexo III).
30
Figura 9 - Wireframe da homepage do website Casas Do Prior
Fonte: Estagiário
Juntamente com o cliente foi decidido que informação foi disponibilizada em cada
página do website, desta forma o estagiário realizou wireframes correspondentes a cada
página de forma a estas apropriarem-se às necessidades do cliente, na página “Quartos”
estão expostos todos os quartos que a entidade tem para oferecer com as correspondentes
informações a cada um deles, na página “Galeria” estão disponíveis dois slideshows, o
primeiro slideshow contém apenas imagens do exterior da entidade, o segundo slideshow
é constituído por imagens do interior da entidade, a página “Booking.com” disponibiliza
um plugin do website Booking (www.booking.com) para que os clientes consigam fazer
a sua reserva através do site Booking, na página “Sobre Nós” foi introduzida informação
em relação à entidade, a página “Pontos de Interesse” é constituída por pontos turísticos
da zona rural de Trevões de forma a complementar a experiência dos clientes da entidade,
por último na página de “Contactos” é apresentado ao utilizador um formulário de envio
de mensagem que irá diretamente para o e-mail da entidade e informações como o
contacto telefónico, o e-mail por extenso (caso o utilizador não queira utilizar o
formulário) e também a morada da entidade.
31
2.7.2 – Implementação (Desenvolvimento, Testes e Alojamento)
Desenvolvimento – Na realização desta etapa de desenvolvimento do website da
entidade Casas do Prior, recorreu-se à utilização de tecnologias, como HTML, e a folhas
de estilo CSS. Ao utilizar estas tecnologias torna-se possível alterar a estrutura e o aspeto
de todo o website. Para efetuar estas alterações, recorreu-se ao software mencionado no
ponto (2.4), sublime text 2.
Nesta fase de criação do website, foi criado então o menu principal do website,
referido no subponto (2.7.1), foram selecionadas as cores do website, como também a
instalação do template e os plugins/widgets que serão necessários em algumas áreas do
website, tendo como objetivo satisfazer todas as necessidades e assim obter um resultado
com sucesso.
No website em questão foi utilizado o template denominado por: Hotel Master (Figura
10), desenvolvido pela empresa GoodLayers (www.goodlayers.com/).
Figura 10 - Template Hotel Master
Fonte: http://demo.goodlayers.com/?theme=hotelmaster – acedido a 06/01/2016
Para a realização deste website foram utilizados os seguintes plugins:
Booking.com Affiliate Plugin – Este plugin tem como objetivo adicionar a
qualquer website criado em wordpress o módulo do website Booking.com;
32
Contact Form 7 – Este plugin permite a criação de formulários de forma rápida
e flexível;
Easy Columms – Este plugin permite facilmente a criação de colunas em páginas
ou artigos de wordpress;
Goodlayers Hotel plugin – Este plugin é nativo do template, permite que os
utilizadores façam a reserva dos quartos, pedindo ao utilizador o dia em que ele
fará o check-in e o check-out como também para quantas pessoas o utilizador
pretende efetuar a reserva;
GTranslate – Este plugin permite que os utilizadores mudem o idioma do
website;
Simple Maintenance Mode – É um plugin que permite ao web designer criar
uma página de manutenção, desta forma enquanto ele cria ou modifica o website
os utilizadores não poderão observar o website;
WP Google Map Plugin – Este plugin permite adicionar google maps em páginas
ou artigos do website;
One-Click Child Theme – Este plugin permite facilmente a criação de um child-
theme;
Page Link To – É um plugin que permite reencaminhar os hyperlinks de páginas
ou artigos, para URL’s externos;
Master Slider Pro – Este plugin permite a criação de um slider, para qualquer
página ou artigo no website.
Para a realização deste website foram utilizados os seguintes widgets:
Menu personalizado – Este é um widget nativo do wordpress, permite ao web
designer criar um menu secundário no website.
Goodlayers Recent Room Widget – É um widget nativo do template, que efetua
um loop dos últimos quartos adicionados ao website.
Texto – Este é um widget nativo do wordpress, permite ao web designer adicionar
informação em formato de HTML a uma área específica do website.
33
WP Google Map Widget – É um widget externo, ou seja, não é nativo ao
wordpress nem ao template em questão, permite ao web designer adicionar google
maps a uma área específica do website.
Após a implementação de todos os plugins, widgets e modificações maioritariamente
efetuadas no documento style.css o website foi concluído com sucesso (Figura 11). O
trabalho está publicado na página das Casas do Prior (http://www.casasdoprior.com/).
Figura 11 - Website Final (Casas Do Prior)
Fonte: http://www.casasdoprior.com/ - acedido a 06/01/2016
Teste e alojamento – Após a conclusão da etapa de desenvolvimento do website,
foram realizados diversos testes com a finalidade de verificar se todos os parâmetros
solicitados pelo cliente estavam em conformidade com o planeamento do website, foi
testada também a navegação e a usabilidade do website de forma a verificar se esta, está
fácil e acessível ao utilizador. Após a aprovação dos colaboradores e dos clientes, foi
efetuado o upload, dos ficheiros para os servidores da StudioBox.
2.8 – Stramus
A instituição stramus é responsável pela venda de joalharia, foi pedido á empresa
acolhedora do estagiário, que desenvolve-se uma loja online (e-commerce). O cliente
solicitou que este website permite-se aos seus clientes efetuarem a compra dos seus
produtos online, para isso o website tem que ser constituído por várias características que
34
permitissem os utilizadores efetuarem esse processo, foi também solicitado pelo cliente
que o website conte-se diversas informações sobre a instituição.
2.8.1 - Conceção (Planeamento, Análise e Desenho)
Planeamento – Tal como no subponto (2.7.1), o planeamento foi efetuado
seguindo a metodologia referida no subponto (2.51):
1. Qual o propósito da empresa?
A instituição Stramus tem como propósito a venda e distribuição de joalharia,
dando a conhecer aos seus clientes as novas coleções das suas marcas como também
oferecendo a possibilidade de estes adquirirem esses produtos, sejam eles destinados para
revenda ou para uso pessoal.
2. Qual a intenção da existência do website?
O website da instituição stramus tem a intenção de dar a conhecer aos seus clientes
os novos produtos que entram no mercado como também a possibilidade de os adquirir.
3. Quais os objetivos principais?
O principal objetivo da instituição stramus é vender e distribuir os seus produtos.
4. Qual o público-alvo?
O público-alvo da instituição stramus engloba indivíduos em praticamente todas
as faixas etárias.
5. Quais as principais características do público-alvo?
A instituição stramus procura um público-alvo abrangente, não limita o seu
público-alvo com a sua faixa etária, oferece produtos para todas as idades.
6. Que informações disponibilizar?
A informação a disponibilizar no website da instituição stramus é a necessária, ou
seja, tem como obrigação disponibilizar aos utilizadores o catálogo de produtos
disponível, como também os seus preços e características adicionais de cada um do
produto, uma breve descrição com a visão, missão e valores da empresam como também
35
a sua história, informações em relação às localizações físicas das lojas também irão ser
disponibilizadas no website, tal como os contactos de cada uma das suas lojas.
Análise – Durante esta etapa, foi solicitado por para do Bruno Esteves, que o
estagiário realizasse uma pesquisa em relação a websites da concorrência já existentes na
web, desta forma existe uma melhor perceção do tipo de conteúdo e da forma como este
irá ser apresentado ao cliente. Após finalizar a pesquisa e as necessidades do cliente terem
sido analisadas, as informações que foram propostas ao cliente (stramus) foram as
seguintes:
A homepage, é constituída por um slider interativo, com imagens selecionadas
pelo cliente, uma secção para disponibilizar produtos em destaque ao utilizador
como também uma secção para disponibilizar as diferentes categorias de produtos
existentes no website ao utilizador, e por fim um rodapé interativo com os diversos
testemunhos dos clientes.
Juntamente com o cliente, e com a colaboradora Susana Esteves foi decidido que
os diferentes produtos iriam estar disponíveis nas suas respetivas categorias, de
forma a melhorar a experiência de navegação dos utilizadores do website, foi
assim realizada uma estrutura de navegação para o website (Fixura 12 e Anexo
IV), disposto do seguinte modo: “home”, “sobre nós”, “contactos” e “loja”, no
segundo nível de navegação do hyperlink “loja”, poderemos encontrar todas as
categorias dos produtos que se poderão adquirir no website, tais como: “anéis”,
“brincos”, “colares”, “relógios”, “alianças”, “pulseiras”, “barras”, “medalhas e
alfinetes” e “gourmet”, inseridos nos submenus: “colares”, “relógios” e
“pulseiras” poderemos encontrar as marcas que o website disponibiliza aos seus
clientes.
36
Figura 12 - Estrutura principal de navegação website Stramus
Fonte: Estagiário
Desenho - O cliente desejava um website com um design “limpo”, de boa
apresentação, clara, objetiva, simples com boa usabilidade e com fácil interação.
Posto isto, a plataforma CMS utilizada foi o wordpress, pois é nesta plataforma que a
StudioBox realiza todos os seus websites.
No cabeçalho da homepage, está disponibilizado um link para o facebook da
entidade em questão, como também os controlos “A minha conta”, “Check-in/Check-out”
e o “carrinho de compras”, estes controladores têm como objetivo indicar ao utilizador
quantos produtos selecionaram na sua visita ao website, na secção número um foi
implementado um slider interativo com dimensões de mil novecentos e vinte pixéis por
seiscentos pixéis (1920 px x 600px), a secção número dois foi construída de forma a
disponibilizar uma pequena quantidade de produtos em destaque (entre quatro a oito
37
produtos), na secção número três foram disponibilizadas as categorias principais de
produtos que a entidade oferece ao seu público, que são as seguintes: anéis, brincos,
colares, relógios, alianças, pulseiras, gourmet, medalhas, alfinetes e barras, na seção
número quatro foi inserido um slider interativo contendo os testemunhos dos diversos
clientes da entidade, no final do website foi inserido um footer onde poderá ser encontrada
a mensagem de copyright como também as ligações para as redes sociais da instituição.
Após estas informações foi desenhado pelo estagiário um wireframe do website final
(Figura 13 e Anexo V).
Figura 13 - Wireframe da homepage do website Stramus
Fonte: Estagiário
2.8.2 – Implementação (Desenvolvimento, testes e alojamento)
Desenvolvimento – Na realização desta etapa de desenvolvimento do website foi
utilizada a mesma metodologia mencionada no subponto (2.7.2).
No website em questão foi utilizado o template denominado por: Natural Shop
(Figura 14), desenvolvido pela empresa quitenicestuff.
38
Figura 14 - Template Natural Shop
Fonte: http://themeforest.net/item/natural-shop-responsive-woocommerce-theme/full_screen_preview/11047108 - acedido a 06/01/2016
Para a realização de este website foram utilizados os seguintes plugins:
Contact Form 7 – Plugin mencionado no subponto (2.7.2.1).
Gold price plugin – Este é um plugin que disponibiliza o preço constante de
determinados metais, tal como: ouro, platina e prata.
Newsletter sign-up – Plugin que permite adicionar diversas formas dos
utilizadores do website subscreverem-se á sua mailinglist.
Simple Maintenance Mode - Plugin mencionado no subponto (2.7.2.1).
WooCommerce – É um plugin que adiciona opções de e-commerce a qualquer
website produzido em wordpress.
Para a produção deste website não ocorreu a necessidade da utilização de widgets.
Após a implementação de todos os plugins e modificações maioritariamente efetuadas
no documento style.css o website foi concluído com sucesso (Figura 15). O trabalho está
publicado na página da entidade stramus (www.stramus.pt).
39
Figura 15 - Website Final (Stramus)
Fonte: http://stramus.pt/ - acedido a 06/01/2016
Teste e alojamento - Na realização desta etapa de desenvolvimento do website foi
utilizada a mesma metodologia mencionada no subponto (2.7.2).
2.9 – Grão Vás Confraria
A Confraria Grão Vás é uma entidade sem fins lucrativos que ao longo dos seus
treze anos de atividade tem vindo a desenvolver principalmente iniciativas na vertente
cultural.
O cliente solicitou à entidade acolhedora que produzisse um website com o
objetivo de transmitir notícias da confraria para os seus membros, ou seja, um website
com características de blog, onde os seus utilizadores possam obter informações sobre as
ultimas atividades realizadas pela confraria.
2.9.1 - Conceção (Planeamento, Análise e Desenho)
Planeamento - Tal como no subponto (2.7.1 e 2.8.1), o planeamento foi efetuado
seguindo a metodologia referida no subponto (2.51):
40
1. Qual o propósito da empresa?
A Confraria Grão Vás é uma instituição sem fins lucrativos com o principal
objetivo de desenvolver iniciativas na vertente cultural.
2. Qual a intenção da existência do website?
O website da instituição Confraria Grão Vás tem como intenção partilhar com os
seus utilizadores/membros todas as iniciativas que a instituição realiza, como também
espalhar as mensagens da mesma.
3. Quais os objetivos principais?
Os objetivos principais do website da instituição é informar os atuais membros da
instituição tal como apresentar esta instituição a novos utilizadores do website.
4. Qual o público-alvo?
O público-alvo da instituição Confraria Grão Vás engloba indivíduos que se
encontram na faixa etária dos vinte cinco aos sessenta anos de idade.
5. Quais as principais características do público-alvo?
As principais características do público-alvo da instituição engloba indivíduos que
residam na cidade de Viseu, maior parte dos seus membros encontram-se com diversas
profissões e têm um rendimento estável, classe social média e partilham o gosto pela
cultura Portuguesa.
6. Que informações disponibilizar?
A informação a disponibilizar no website da instituição Confraria Grão Vás será
variada, para além de ser necessário transmitir todas as atividades realizadas pela
instituição, também será necessário transmitir novas alterações aos regulamentos já
existentes na instituição, tendo em conta que também irá conter informações básicas tal
como a morada, contacto telefónico, correio eletrónico, etc.
Análise – Durante esta etapa, foi solicitado por parte do Bruno Esteves, que o
estagiário realizasse uma pesquisa em relação a websites da concorrência já existentes na
41
web. Após finalizar a pesquisa e as necessidades do cliente terem sido analisadas, as
informações que foram propostas ao cliente (Grão Vás Confraria) foram as seguintes:
A homepage, foi construída com um slider interativo, com imagens de
determinados eventos realizados pela instituição, no corpo do website foram
disponibilizadas os últimos artigos sobre os eventos da confraria por ordem de
criação, ou seja, á medida que estes são produzidos irão automaticamente para a
homepage.
Juntamente com o cliente, e com a colaboradora Susana Esteves foi estudada e
decidida a estrutura do menu principal do website. O menu principal é constituído
por seis hyperlinks diferentes, que são os seguintes: “confraria”, “publicações”,
“Galeria”, “comissão instaladora”, “blog” e “contactos”. O item “confraria”
contém três subitens, estes são os seguintes: “história”, “órgãos sociais” e
“protocolos” e por fim o item “galeria” contém também três subitens, que são os
seguintes: “galeria de imprensa”, “vídeos” e “entronizações”. Após estas
informações foi realizada uma estrutura de navegação para o website (Figura 16 e
Anexo VI).
Figura 16 - Estrutura principal de navegação website Grão Vás Confraria
Fonte: Estagiário
42
Desenho – O cliente desejava um website com um design “simples”, de boa
apresentação, com uma usabilidade e com fácil iteração. Posto isto, a plataforma CMS
utilizada foi o wordpress.
No cabeçalho da homepage, podemos encontrar o logótipo da entidade, juntamente
com o menu principal estruturado na figura 16, podemos encontrar também um slider
interativo com dimensões de mil trezentos e quarenta nove pixéis por quatrocentos e
sessenta pixéis (1349 px x 460px), constituído pelos artigos mais recentes ou
considerados os mais importantes da confraria, esses artigos são constituídos por uma
imagem de destaque com as dimensões de seiscentos pixéis por trezentos pixéis (600px x
300px), para além da imagem de destaque estes artigos também disponibilizam um breve
resumo sobre o seu conteúdo. O website foi construído de forma a ter uma sidebar no
lado direito da página, contendo informações como as categorias disponíveis no website
como também os diferentes parceiros da instituição. Após estas informações foi
desenhado pelo estagiário um wireframe do website final (Figura 17 e Anexo VII).
Figura 17 - Wireframe da homepage do website Grão Vás Confraria
Fonte: Estagiário
43
2.9.2 - Implementação (Desenvolvimento, testes e alojamento)
Desenvolvimento - Na realização desta etapa de desenvolvimento do website foi utilizada
a mesma metodologia mencionada no subponto (2.7.2).
No website em questão foi utilizado o template denominado por: Interface (Figura
18), desenvolvido pela empresa Theme Horse.
Figura 18 - Template Interface
Fonte: http://themehorse.com/preview/interface/ - acedido a 06/01/2016
Para a produção de este website foram utilizados os seguintes plugins:
Contact Form 7 - Plugin mencionado no subponto (2.7.2.1 e 2.8.2.1).
Font Awesome Icons – Este é um plugin que adiciona uma biblioteca de ícones
para serem utilizados em um website wordpress.
Huge IT Image Gallery - Este é um plugin que permite uma criação rápida de
galaria de fotos, disponibiliza também vários layouts para os utilizadores
selecionarem.
Page Link To – Plugin mencionado no subponto (2.7.2.1).
44
Mashshare Share Buttons – Pluglin que permite adicionar aos artigos botões
para partilhar nas diversas redes sociais.
Optimize Images Resizing – Plugin que permite redimensionar imagens para
melhorar o espaço ocupado no servidor.
Page Builder by SiteOrigin – Este plugin tem como objetivo construir layouts
de páginas e artigos de forma visual, sem recorrer á utilização de qualquer tipo de
código.
Wordpress Ad Widget – Este plugin permite ao utilizador adicionar anúncios de
uma forma fácil no website.
Para a produção do website em questão foram utilizados os seguintes widgets:
Procurar – Este é um widget nativo do wordpress, permite ao web designer
adicionar uma search bar ao website.
Categorias – É um widget nativo do wordpress, que disponibiliza todas as
categorias utilizadas no website.
Layout Builder – Este widget é instalado em conjunto com o plugin, page builder
by site origin, permite que o web designer construa um layout numa área
específica do widget.
Após a implementação de todos os plugins, widgets e modificações maioritariamente
efetuadas no documento style.css o website foi concluído com sucesso (Figura 19). O
trabalho está publicado na página da Confraria Grão Vás (www.confrariagraovasco.com).
Figura 19 – Website Final (Confraria Grão Vás)
45
Fonte: http://www.confrariagraovasco.com/ - acedido a 06/01/2016
Teste e alojamento - Na realização desta etapa de desenvolvimento do website foi
utilizada a mesma metodologia mencionada no subponto (2.7.2).
2.10 – Clube de Futebol Os Viriatos
Foi solicitado à StudioBox que esta realizasse um website para a instituição Clube
de Futebol Os viriatos, este website tem como objetivos transmitir aos seus utilizadores
as últimas novidades desta instituição, como também disponibilizar aos seus utilizadores
uma lista de contactos da instituição.
Para a produção deste website foram seguidas as metodologias referidas nos
pontos (2.7, 2.8 e 2.9). O website foi construído na plataforma CMS wordpress, e foi
utilizado o template denominado por Braxton. A construção da estrutura principal de
navegação e do wireframe encontram-se no Anexo VIII e Anexo IX. O trabalho está
publicado na página do Clube de Futebol Os Viriatos (www.cfv.pt).
2.11 –Lima Limão Online
Foi solicitado à StudioBox que realizasse um website para a empresa Lima Limão
Online. Este tem como objetivo a venda de produtos relacionados com a época balnear
da Figueira da Foz, e disponibiliza produtos neste tema como também as características
de cada uma deles acompanhado com o respetivo preço, dando assim a oportunidade aos
utilizadores adquirem os produtos que desejarem, também será possível que o utilizador
observe uma biblioteca multimédia com o objetivo de promover a praia de Quiaios, por
fim será também disponibilizado todos os contactos da instituição.
Para a produção deste website foram seguidas as metodologias referidas nos
pontos (2.7, 2.8 e 2.9). O website foi construído na plataforma CMS wordpress, e foi
utilizado o template denominado por Natural Shop. A construção da estrutura principal
de navegação e do wireframe encontram-se no Anexo X e Anexo XI. O trabalho está
publicado na página Lima Limão Online (www.limalimaoonline.com).
46
2.12 – My Rally Car
Foi solicitado pelo cliente à StudioBox que realizasse um website direcionado para
o tema de rally, o website tem como objetivo permitir aos seus utilizadores publicarem
anúncios relacionados com este tema, tomando em consideração que será necessário criar
limitações nesses anúncios, tais como: o tempo que estes ficam disponibilizados no
website e se este será destacado na homepage ou não, será disponibilizado aos utilizadores
escolherem planos de pagamento para esses anúncios.
Para a produção deste website foram seguidas as metodologias referidas nos
pontos (2.7, 2.8 e 2.9). O website foi construído na plataforma CMS wordpress, e foi
utilizado o template denominado por Classified Engine. A construção da estrutura
principal de navegação e do wireframe encontram-se no Anexo XII e Anexo XIII. O
trabalho está publicado na página My Rally Car (www.myrallycar.com).
2.13 – NS Eletricidade
Foi solicitado à StudioBox que realizasse um website para a instituição NS
Eletricidade, o website tem como objetivo principal transmitir aos clientes que tipos de
serviços a empresa realiza, disponibiliza uma folha de orçamento, como também uma
lista de contactos para facilitar a comunicação entre os clientes e o diretor da empresa
em questão.
Para a produção deste website foram seguidas as metodologias referidas nos
pontos (2.7, 2.8 e 2.9). O website foi construído na plataforma CMS wordpress, e foi
utilizado o template denominado por Interface. A construção da estrutura principal de
navegação e do wireframe encontram-se no Anexo XIV e Anexo XV. O trabalho está
publicado na página NS Eletricidade (www.nselectricidade.com).
2.14 – Transportes360
Foi solicitado pelo cliente à StudioBox que realizasse um website direcionado para
o tema de transportes, o website tem como objetivo permitir aos utilizadores publicarem
47
anúncios relacionados com este tema, todos os anúncios na fase inicial serão gratuitos
com o intuito de atrair novos utilizadores.
Para a produção deste website foram seguidas as metodologias referidas nos
pontos (2.7, 2.8 e 2.9). O website foi construído na plataforma CMS wordpress, e foi
utilizado o template denominado por ClassiAds. A construção da estrutura principal de
navegação e do wireframe encontram-se no Anexo XVI e Anexo XVII. O trabalho está
publicado na página Transportes360 (www.transportes360.pt).
2.15 – Fadista Mara Pedro
A fadista Mara Pedro solicitou à StudioBox a criação de um vídeo sobre as suas
atuações artísticas, para hospedar da plataforma youtube. O vídeo tinha quer ter uma
duração máxima de dez minutos e a dimensão do vídeo seria de oitocentos pixéis por
seiscentos pixéis (800px x 600px).
O cliente entregou um conjunto de elementos multimédia, entre eles encontram-
se: vídeos da artista a atuar em várias cidades da Lituânia (Kaunas, Palanga, Siauliu e
Vilnius) com também uma atuação em Penalva e várias faixas de som (.mp3). O cliente
solicitou que o vídeo deveria conter um pouco das filmagens de cada um dos elementos
audiovisuais entregues pelo mesmo e que estes deveriam estar propriamente identificados
com os nomes das cidades em que cada uma das filmagens decorreu. O estagiário foi
encarregue de selecionar os elementos multimédia que foram entregues pelo cliente e daí
procedeu a criação do vídeo, recorrendo ao software mencionado no ponto (2.4), adobe
premiere (Figura 20).
48
Figura 20 - Edição do vídeo, Fadista Mara Pedro
Fonte: Estagiário
Após a edição ser concluída o vídeo ficou com uma duração total de oito
minutos e quinze segundos, e nos títulos que identificam as cidades foi utilizado o tipo
de letra Regular century Schoolbook.
2.16 – Design de interfaces para dispositivos móveis
A StudioBox solicitou ao estagiário que este realizasse um conjunto de
wireframes para aplicações móveis, com o objetivo de fazer propostas a futuros clientes
da empresa acolhedora, como também mostrar as potencialidades que estas aplicações
podem ter nas empresas desses clientes, estes wireframes foram desenvolvidos com o
propósito de serem inseridos no contexto do desporto, para ser mais exato foram
desenvolvidas para equipas de futebol, estas foram realizadas no software adobe
illustrator mencionado no ponto (2.4). Foram desenhadas várias wireframes para as
diversas equipas, todas elas foram produzidas com o mesmo layout, modificando apenas
o conteúdo delas, foram realizadas wireframes para as seguintes equipas:
Grupo Desportivo De Chaves;
Lusitano Futebol Clube;
Santa Clara Açores Futebol;
49
Sporting Clube Farense;
Sport Clube De Freamunde.
Antes de começar a desenhar as wireframes foi realizada a estrutura do menu para
as aplicações (Figura 21 e Anexo XIX), esta foi estruturada da seguinte forma: “home”,
este ecrã trata-se do ponto de partida do utilizador, aqui ele pode navegar para todas as
páginas disponíveis na aplicação, “clube”, nesta página o utilizador poderá encontrar a
história do clube em questão, “equipa”, esta página disponibiliza informação em relação
a equipa técnica do clube como também o seu plantel, sendo “equipa técnica” e “plantel”
dois submenus do botão “equipa”, “bilhetes”, nesta página será possível que o utilizador
reserve ou compre um bilhete para um evento que ele quererá assistir no futuro,
“noticias”, esta página será responsável por disponibilizar todas as noticias relacionadas
com a equipa para os seus utilizadores, “loja online”, esta página será responsável por
disponibilizar aos utilizadores todos os produtos relacionados com o clube em questão,
para que estes possam reserva-los ou até mesmo compra-los diretamente na aplicação,
“patrocinadores”, esta página será responsável por disponibilizar informações sobre os
patrocinadores do clube, “calendário”, esta página será responsável por disponibilizar
informações tais como, o calendário de futuros jogos que a equipa irá realizar como
também a sua classificação, sendo “jogos” e ”classificação” dois submenus do botão
“calendário”, “Clube TV”, será a página responsável pela publicação de vídeos sobre a
equipa e por fim a página “contactos”, esta página será responsável por disponibilizar
informações como, o contacto telefónico, morada, redes sociais e o website do clube.
Figura 21 - Estrutura principal de navegação das aplicações móveis
Fonte: Estagiário
50
Após a realização da estrutura do menu (Figura 21 e Anexo XIX), foi efetuado o desenho
para as aplicações em questão (Figura 22 e Anexo XX), a estrutura de menu principal que
foi selecionada foi a Springboard2, pois esta permite uma navegação limpa e fácil, porque
apenas existem nove botões principais para o menu.
Figura 22 - Wireframe da aplicação móvel do Grupo Desportivo De Chaves
Fonte: Estagiário
2 Springboard – Layout para aplicações que apresenta os ícones de navegação em
grelha.
51
Reflexão Final
O estágio curricular é uma etapa muito importante no percurso académico da
licenciatura de Comunicação Multimédia, integrada na Escola Superior de Educação,
Comunicação e Desporto, do instituto Politécnico da Guarda. Esta etapa é a primeira
oportunidade para aplicar em prática todos os conhecimentos adquiridos ao longo dos três
anos da licenciatura e a possibilidade de aperfeiçoar as competências já adquiridas como
também de adquirir novos conhecimentos.
Selecionei a StudioBox para realizar o meu estágio por várias razões: É uma
empresa instalada neste mercado já há onze anos, isto faz com que ela tenha um grande
número de clientes, aumentando assim o número de trabalhos em que poderia participar,
é uma empresa com várias subsidiárias espalhadas à volta do mundo, dando-me assim
uma ideia aprofundada de como elas trabalham em longas distâncias, antes de mandar a
proposta de estágio realizei uma pesquisa do portfólio da empresa, para ter uma noção
em que tipos de áreas esta empresa trabalha, chegando assim à conclusão que um dos
pontos mais fortes da empresa é a produção de websites, o que fez com que eu me torna-
se bastante interessado em estagiar nesta entidade empresarial, pois deu-me a
oportunidade de trabalhar e aprofundar os meus conhecimentos numa das minhas áreas
preferidas de multimédia.
A formação em Comunicação Multimédia fez com que eu aprofundasse os meus
conhecimentos em Multimédia, como também adquiresse novos conhecimentos na
vertente da comunicação.
Agradeço ao Instituto Politécnico da Guarda e a todos os seus docentes da
licenciatura de Comunicação Multimédia, por todos os conhecimentos que foram capazes
de transmitir e também pela disponibilidade e iniciativa de me ajudarem.
Ao longo dos três meses do estágio curricular, trabalhei maioritariamente como
web designer, no entanto também realizei projetos na área de design gráfico e edição de
vídeo. No início do estágio comecei com trabalhos de design gráfico, produzindo apenas
layouts para dispositivos móveis, no entanto após realizar esses projetos, O diretor Bruno
Esteves começou a entregar-me projetos de web design para realizar, fiquei entusiasmado
52
por estar a trabalhar nesta área que se refletiu no meu desempenho, após ter realizado o
primeiro projeto de web design as propostas por parte do diretor para realizar websites
foram efetuadas até ao fim do estágio, fazendo outros projetos pelo decorrer do estágio,
tais como: edição de vídeo, registo fotográfico, etc.
O plano de estágio proposto pelo diretor da entidade empresarial acolhedora foi
realizado com sucesso. Os projetos realizados pelo estagiário foram entregues nas datas
propostas, para além do plano de estágio realizado inicialmente o estagiário participou
em vários projetos que foram surgindo ao longo do período do estágio. Todos os projetos
efetuados ao longo do estágio foram realizados autonomamente, recorrendo várias vezes
a diversas pesquisas como suporte educacional para os realizar.
Esta etapa foi sem dúvida essencial para pôr em prática todos os conhecimentos
transmitidos pelos docentes do instituto Politécnico da Guarda que serão essenciais para
o meu futuro profissional.
53
Bibliografia
Bahia, Juarez (1995). Introdução à Comunicação Empresarial. Rio de Janeiro: MAUAD
Daychouw, Merhi (2007). 40 Ferramentas e Técnicas de Gerenciamento. Rio de Janeiro:
Brasport.
Heldman, Kim (2005). Gerência de Projetos - Fundamentos. São Paulo: Campus-RJ
Lindon, D., Lendrevie, J., Lévy, J., Dionísio, P. e Rodrigues, J.V. (2011). Mercator XXI:
Teoria e Prática do Marketing (14ª ed.). Alfragide: Publicações Dom Quixote.
Magdalena, V. (2012). Avaliar o atendimento ao cliente do instituto beleza natural através
da pesquisa de satisfação. Monografia para obtenção do grau de especialista em Gestão
Empresarial. Universidade Cândido Mendes, Rio de Janeiro, Brasil.
Ribeiro, Renato Vieira (2008). Estratégia Empresarial E de Recursos Humanos. Curitiba:
IESDE Brasil S.A.
Santos, E. (2009). Web Design: uma reflexão conceptual. Revista de Ciências da
Computação, nº4.
Scott, C. D., Jaffe, D. T., Tobe, G. R. (1998). Visão, Valores e Missão organizacional:
construindo a organização do futuro. Rio de Janeiro: Qualitymark.
Valadares, M.C.B. Planeamento Estratégico Empresarial. QualityMark, Rio de Janeiro,
2002.
Wagner, Luiz Marques (2011). Recursos Humanos: Conhecendo a admissão do seu
colaborador. Paraná: Wazgner Luiz Marques.
54
Anexos
55
Listagem de anexos
Anexo I – Plano de Estágio
Anexo II - Estrutura principal de navegação (Casas Do Prior)
Anexo III - Wireframe (Casas Do Prior)
Anexo IV - Estrutura principal de navegação (Stramus)
Anexo V - Wireframe (Stramus)
Anexo VI - Estrutura principal de navegação (Grão Vás Confraria)
Anexo VII - Wireframe (Grão Vás Confraria)
Anexo VIII - Estrutura principal de navegação (Clube de Futebol Os Viriatos)
Anexo IX - Wireframe (Clube de Futebol Os Viriatos)
Anexo X - Estrutura principal de navegação (Lima Limão Online)
Anexo XI - Wireframe (Lima Limão Online)
Anexo XII - Estrutura principal de navegação (My Rally Car)
Anexo XIII - Wireframe (My Rally Car)
Anexo XIV - Estrutura principal de navegação (NS eletricidade)
Anexo XV - Wireframe (NS eletricidade)
Anexo XVI - Estrutura principal de navegação (Transportes 360)
Anexo XVII – Wireframe (Transportes 360)
Anexo XVIII – Vídeo Fadista Mara Pedro
Anexo XIX - Estrutura principal de navegação (Grupo Desportivo De Chaves)
Anexo XX - Wireframe (Grupo Desportivo De Chaves)
56
Anexo I
Plano de Estágio
57
58
Anexo II
Estrutura principal de navegação (Casas Do Prior)
59
60
Anexo III
Wireframe (Casas Do Prior)
61
Wireframe – “Homepage”
62
Wireframe – Página “Quartos”
63
Wireframe – Página “Galeria”
64
Wireframe – Página “Pontos de Interesse”
65
Wireframe – Página “Contactos”
66
Anexo IV
Estrutura principal de navegação (Stramus)
67
68
Anexo V
Wireframe (Stramus)
69
Wireframe – “Homepage”
70
Wireframe – Página “Artigo”
71
Anexo VI
Estrutura principal de navegação (Grão Vás Confraria)
72
73
Anexo VII
Wireframe (Grão Vás Confraria)
74
Wireframe – “Homepage”
75
Wireframe – Página “Artigo”
76
Wireframe – Página “Contactos”
77
Anexo VIII
Estrutura principal de navegação (Clube de Futebol Os Viriatos)
78
79
Anexo IX
Estrutura principal de navegação (Clube de Futebol Os Viriatos)
80
Wireframe – “Homepage”
81
Wireframe – Página “Artigo”
82
Anexo X
Estrutura principal de navegação (Lima Limão Online)
83
84
Anexo XI
Wireframe (Lima Limão Online)
85
Wireframe – “Homepage”
86
Wireframe – Página “Estadia”
87
Anexo XII
Estrutura principal de navegação (My Rally Car)
88
89
Anexo XIII
Wireframe (My Rally Car)
90
Wireframe – “Homepage”
91
Wireframe – Página “Artigo”
92
Anexo XIV
Estrutura principal de navegação (NS Eletricidade)
93
94
Anexo XV
Wireframe (NS Eletrecidade)
95
Wireframe – “Homepage”
96
Wireframe – Página “Contactos”
97
Anexo XVI
Estrutura principal de navegação (Transportes 360)
98
99
Anexo XVII
Wireframe (Transportes 360)
100
Wireframe – “Homepage”
101
Wireframe – Página “Criar Anúncio”
102
Wireframe – Página “Perfil”
103
Anexo XVIII
Vídeo Fadista Mara Pedro
104
105
Anexo XIX
Estrutura principal de navegação (Clube Desportivo de Chaves)
106
107
Anexo XX
Wireframe (Grupo Desportivo De Chaves)
108
Wireframe – Página Inicial
109
Wireframe – Página de informação do clube
110
Wireframe – Página de informações da equipa
111
Wireframe – Página de bilhetes
112
Wireframe – Página de notícias
113
Wireframe – Página da loja
114
Wireframe – Página dos patrocinadores
115
Wireframe – Página do calendário
116
Wireframe – Página Clube TV
117
Wireframe – Página dos contactos