UNIVERSIDADE DO SUL DE SANTA CATARINA CURSO DE DESIGN
BRUNO QUINT BERRETTA
TRABALHO DE CONCLUSÃO DE CURSO
FLORIANÓPOLIS 2009
2
BRUNO QUINT BERRETTA
PORTAL PROFISSÃO DESIGN
Trabalho de Conclusão do Curso de Design, da Universidade do Sul de Santa Catarina – UNISUL. Prof° Orientador: Cláudio Henrique da Silva
FLORIANÓPOLIS 2009
3
SUMÁRIO LISTA DE FIGURAS............................................................................................
04
RESUMO.............................................................................................................
06
CAPÍTULO 1 – INTRODUÇÃO Definição do problema...............................................................................................................
06
Objetivos.....................................................................................................................................
09
Justificativa.................................................................................................................................
10
Metodologia................................................................................................................................
11
Delimitação.................................................................................................................................
13
CAPÍTULO 2 – FASE INVESTIGATIVA E ANALÍTICA Análise de demanda...................................................................................................................
14
Análise de ofertas / concorrentes.............................................................................................
16
Características de mercado.......................................................................................................
22
Prospecção e Tendências de Mercado....................................................................................
23
CAPÍTULO 3 – FASE CONCEITUAL Conceitos gerados para solucionar o problema.....................................................................
27
Conceitos selecionados............................................................................................................
28
CAPÍTULO 4 – FASE PRODUTIVA 4.1 Geração de alternativas.......................................................................................................
29
4.2 Projeto Detalhado 4.2.1 Tecnologia utilizada................................................................................................
32
4.2.2 Sitegrama.................................................................................................................
34
4.2.3 Wireframe.................................................................................................................
35
4.2.4 Interface....................................................................................................................
37
4.3 Testes....................................................................................................................................
48
Conclusão e Estudos Futuros...................................................................................................
49
REFERÊNCIAS..............................................................................................
50
APÊNDICES...................................................................................................
51
4
Lista de Figuras Figura 1 - Gráficos das Pesquisas de Campo....................................................
14
Figura 2 - Portal Rede Design Brasil..................................................................
15
Figura 3 - Portal do CIEE...................................................................................
16
Figura 4 - Portal da FEPESE.............................................................................
17
Figura 5 - Portal do IEL......................................................................................
18
Figura 6 - Portal Freela......................................................................................
19
Figura 7 - Portal da ADG....................................................................................
20
Figura 8 - Portais de Referências.......................................................................
22
Figura 9 – Portal Abduzeedo.............................................................................
22
Figura 10 - Portal Awake Magazine..................................................................
23
Figura 11 - Portal Rede Design ........................................................................
23
Figura 12 - Portal Core 77.................................................................................
24
Figura 13 – Portal NDesign.............................................................................
24
Figura 14 – Mapa mental...................................................................................
28
Figura 15 – Malha Construtiva...........................................................................
28
Figura 16 – Modelo de Wireframe......................................................................
29
Figura 17 – Painel de Controle do Joomla.........................................................
30
Figura 18 – Níveis de Acesso............................................................................
30
Figura 19 – Sitegrama........................................................................................
32
Figura 20 – Wireframe........................................................................................
33
Figura 21 – Wireframe Detalhado......................................................................
34
Figura 22 – Interface.........................................................................................
35
Figura 23 – Logo Profissão Designer................................................................
36
Figura 24 – Menu Auxiliar..................................................................................
36
Figura 25 – Variações Cromática.......................................................................
36
Figura 26 – Informações Úteis...........................................................................
37
Figura 27 – Notícias...........................................................................................
38
Figura 28 – Módulos...........................................................................................
39
Figura 29 – Módulo de Notícia...........................................................................
40
Figura 30 – Módulo Trabalhos Acadêmicos.................................................... ..
41
Figura 31 – Módulo Vagas.................................................................................
41
Figura 32 – Módulo Chamadas.........................................................................
42
5
Figura 33 – Módulo enquete e Fórum................................................................
43
Figura 34 – Login Fórum....................................................................................
43
Figura 35 – Menu Usuário..................................................................................
43
Figura 36 – Fórum..............................................................................................
44
Figura 37 – Menu Auxiliar..................................................................................
44
Figura 38 – Links Recomendados.....................................................................
44
Figura 39 – Estatísticas......................................................................................
45
Figura 40 – Rodapé............................................................................................
45
6
RESUMO O presente trabalho tem como objetivo orientar acadêmicos de design sobre informações úteis para que eles alcancem a inserção no mercado de trabalho. Foram levantados dados sobre suas deficiências, desejos e necessidades, traduzindo as informações obtidas em uma linguagem que pudesse ser exposta na forma de um portal para web. Foi desenvolvido o portal como ferramenta de comunicação e divulgação das informações, utilizando uma estruturação composta por wireframe, sitegrama e interface, com o auxílio de um gerenciador de conteúdos.
7
CAPÍTULO 1 – INTRODUÇÃO
Definição do problema No decorrer da faculdade, estudantes de cursos de design, habilitados a colocar em pratica conhecimentos adquiridos em sala de aula, encontram obstáculos ao tentar ingressar no mercado de trabalho e obter retorno financeiro. As formas mais conhecidas de se ingressar no mercado de trabalho são: Contratação por empresa, estágios e empreendedorismo. Contratação é a forma mais difícil de ser alcançada, pois exige experiência profissional e confiança do contratante em relação ao trabalho do acadêmico, algo difícil de obter nas fases iniciais da faculdade. Normalmente se consegue a contratação em uma empresa após um período de estágio ou através da apresentação de um portfólio de trabalhos realizados. Estágio, diferente da contratação, é uma espécie de experiência que o estudante participa em uma empresa. Ele tem seus conhecimentos testados e estimulados, em uma espécie de incubação que normalmente acarreta no desenvolvimento profissional do estudante. Geralmente a remuneração de estágio é baixa, pois se caracteriza muitas vezes como ajuda de custo. Entretanto, durante o período de estágio, o aluno aprende sobre o mercado de trabalho de maneira prática, e as exigências de tempo e de conhecimento são relativamente menores que outras formas de trabalho. De acordo com informações fornecidas pelos próprios acadêmicos de design, existe certa dificuldade de se ingressar no mercado de trabalho através de estágios, pois há pouca divulgação por parte das faculdades a respeito de vagas disponíveis ou como procurá-las. Outra dificuldade mencionada pelos estudantes é o nível elevado de prérequisitos por parte das empresas contratantes, como o domínio de ferramentas não disponibilizadas pelas faculdades No empreendedorismo subentendem-se formas de trabalhar, das quais o estudante trabalha diretamente com o cliente, seja através da criação de sua
8
própria empresa, através de contrato de serviço e até mesmo de maneira informal. A principal dificuldade de se trabalhar de forma empreendedora é a falta de segurança por parte do estudante. De acordo com informações obtidas com estudantes e profissionais de design que trabalham por conta própria, a falta de instrução e o excesso de confiança em seu próprio trabalho levam-os a acreditar na palavra do cliente como a única forma de garantia do seu trabalho. Muitas vezes o estudante trabalha de forma solitária e autodidata, se envolvendo em trabalhos que podem se enquadrar como ilegais ou simplesmente sem nenhuma forma de registro, privando-se assim de qualquer amparo legal caso o contratante do serviço não pague o combinado ou exija serviços extras não acordados inicialmente. Constatou-se que existe certa dificuldade em se encontrar informações práticas, de linguagem clara, objetiva e de fácil acesso, sobre como o acadêmico de design pode se proteger ou evitar determinadas situações de risco. Através de um portal para a web, é possível disponibilizar uma série informações distintas, com o objetivo de orientar estudantes de design sobre o mercado de trabalho. Utilizando uma linguagem simples e objetiva é possível criar
uma
ponte
de
conhecimento
entre
profissionais
e
estudantes,
disponibilizando informações consideradas importantes para que o acadêmico possa ingressar no mercado de trabalho. Quanto mais informações atualizadas o estudante obtiver a respeito do mercado de trabalho, melhor ele poderá se preparar para inserir-se no mesmo.
9
Objetivos Objetivo Geral
Desenvolvimento de um portal para web, com objetivo de dar suporte a acadêmicos de design que necessitem de informações que os auxiliem a se inserirem no mercado de trabalho.
Objetivos Específicos
Identificar: Dificuldades e as perspectivas do mercado de trabalho; Informações úteis aos acadêmicos para sua inserção no mercado de trabalho; Tendências e estilos atraentes ao público alvo; Tecnologias adequadas para o desenvolvimento do portal.
Definir: Conceitos para solucionar o problema proposto
Estruturar o portal através da elaboração de: Wireframe Sitegrama Layout Interface
10
Justificativa A inserção no mercado de trabalho está cada vez mais difícil de ser alcançada, mesmo pelos designers mais bem preparados. Os motivos variam, desde a concorrência direta e indireta de profissionais de áreas semelhantes e distintas, até a recente recessão mundial (crise imobiliária nos EUA 2008) que gerou um colapso nos empregos do mundo inteiro. É necessário que estudantes de design, independente da fase que estejam cursando, se preparem de maneira satisfatória para a sua inserção no mercado de trabalho. Uma forma de se preparar é manter contato com o mercado de trabalho desde as primeiras fases da faculdade, mantendo-se sempre bem informados por fontes atualizadas
sobre tendências
e expectativas
do
mercado
de
trabalho
e
demonstrarem o conhecimento adquirido na faculdade através da exposição de seus trabalhos. Foi escolhido como ferramenta de comunicação um portal de internet, pois de acordo com Soares (1997) O maior instrumento da globalização cultural na sociedade tem sido certamente o conjunto das redes de comunicação de massa. A abrangência, extensão e eficácia dessas redes estão na raiz das maiores transformações na virada do século.
A utilização de um portal como ferramenta de comunicação possui vantagens como a possibilidade de atualização constante dos conteúdos, fácil acesso aos acadêmicos, baixo custo de implantação e manutenção. A linguagem visual, ergonomia, usabilidade e conteúdos do portal podem ser elaborados com o foco direto no usuário.
11
Metodologia Para que o projeto se desenvolva adequadamente e alcance os objetivos propostos, será aplicada a metodologia Lucid Frame, composta das seguintes etapas:
Envision - Alinha as agendas de todos os stakeholders (elementos envolvidos) com a estratégia organizacional e às necessidades de “usabilidade extrema” e desenvolve uma visão clara e compartilhada do produto. É a etapa Introdutória do projeto.
Discovery - Estuda os usuários para determinar requisitos de alto-nível do usuário. Etapa de Pesquisas.
Design Foundation - Desenvolver um design conceitual e criar um protótipo de tela chave. Usabilidade testa o design, revisa e repete. Etapa de Geração de Alternativas, validadas pelo usuário através de pesquisa.
Design Detail - Desenvolve uma especificação completa do design. Durante esta etapa será desenvolvida a alternativa escolhida na etapa anterior.
Build - Apoiar o processo de produção através da revisão e alteração em estágio final de gestão. Durante essa etapa serão feitos refinamentos no site, através da validação dos usuários e documentação do projeto.
Release - Desenvolver um plano de implantação do sistema para apoiar a transição dos usuários para o novo produto; documento lições aprendidas. Etapa de ajustes finais no portal e na documentação. Publicação do portal e elaboração da apresentação do projeto.
12
A etapa “discovery”, contempla as seguintes pesquisas:
Pesquisa de Campo – Com o objetivo de gerar dados à serem analisados e utilizados durante o desenvolvimento do projeto, através de duas etapas:.
Etapa 1 - Pesquisa Qualitativa – Perguntas-chave realizadas com exacadêmicos atuantes como profissionais de design. (ver apêndice 1).
Etapa 2 - Pesquisa Quantitativa – Questionário realizado com os acadêmicos
de
design,
quantificado
e
traduzindo
opiniões
e
informações, gerando dados estatísticos (ver apêndice 2).
Pesquisa Bibliográfica – Com intuito de gerar fundamentos teóricos para o projeto.
Levantamento de dados: Em Portais de Design, fontes com informações referentes à inserção de acadêmicos de design no mercado de trabalho. Nas leis de diretrizes e bases trabalhistas, informações legais à respeito da atividade de design.
13
Delimitações O desenvolvimento do portal tem como foco auxiliar estudantes de cursos superiores de design da região da Grande Florianópolis. Por esse motivo as pesquisas estão delimitadas nesta região.
As pesquisas realizadas têm o intuito de obter informações apenas sobre elementos que auxiliem os acadêmicos de design a se inserirem no mercado de trabalho.
O portal desenvolvido é de caráter informativo, não participando de forma alguma em venda de produtos ou promoção de apoiadores.
14
CAPÍTULO 2 – FASE INVESTIGATIVA E ANALÍTICA
Análise de demanda Através de pesquisas realizadas com profissionais de design (apêndice 1 – pg. 47), e acadêmicos de design (apêndice 2 – pg. 48), foi possível gerar os seguintes gráficos referentes aos acadêmicos de design da região da Grande Florianópolis e sua inserção no mercado de trabalho: Figura 1 – Gráficos das Pesquisas de Campo
Fonte: Autor
Cruzando os dados fornecidos pelas pesquisas quantitativas e qualitativas, foi possível destacar as seguintes informações como as mais procuradas pelos acadêmicos:
Informações sobre vagas de estágios e empregos
Lei de estágio e diretrizes trabalhistas,
Instruções de como montar portfolios e curriculum Vitae,
Tutoriais dos programas mais usados,
Informações sobre cursos técnicos complementares,
Informação sobre como expor seus trabalhos,
Informações
a
respeito
de
eventos,
acontecimentos relacionados ao Design.
palestras,
exposições
e
15
Foi observada entre os acadêmicos e os profissionais, a necessidade de uma forma de comunicação da qual fosse possível uma troca de informação entre eles. A grande maioria dos estudantes acredita que um portal para web é uma ferramenta interessante para auxiliá-los a manterem-se informados sobre assuntos relativos ao mercado de trabalho, pois é um veículo de comunicação rápido e de fácil acesso a eles.
16
Análise de oferta / concorrentes Para poder lançar um produto ou serviço no mercado, é importante ter conhecimento de quais são seus possíveis concorrentes. Analisando seus pontos fortes e fracos, é possível ter uma noção de que estratégias estão sendo utilizadas para atingir o público alvo e quais são as principais características/atributos que o publico alvo já esta familiarizado, além de evitar os erros cometidos. Abaixo, segue os portais analisados:
Rede Design Brasil
Figura 2 – Portal Rede Design Brasil Fonte: www.designbrasil.com.br
Site bastante abrangente com conteúdos relativos a design, todavia apesar de possuir uma área voltada para acadêmicos e disponibilizar um banco de talentos, não possui informações relevantes a respeito do mercado de trabalho, apenas disponibiliza informações sobre cursos, eventos bibliográficas.
e pesquisas
17
CIEE
Figura 3 – Portal do CIEE Fonte: www.ciee.com.br
Site do Centro de integração Empresa – Escola (CIEE), possui dicas e informações muito interessantes a respeito do mercado de trabalho, serviços de
integração
entre
o
acadêmico
e
as
empresas
empregadoras,
disponibilização de vagas de empregos e estágios.
Todavia, apesar de disponibilizar informações bastante completas referentes a estágios, não é direcionado especificamente para o acadêmico de design, é voltado para o publico acadêmico em geral e à empresas interessadas, além de ser necessário fazer um cadastro para poder acessar algumas de suas páginas, o que dificulta o acesso as informações desejadas.
18
FEPESE
Figura 4 – Portal da FEPESE Fonte: www.fepese.com.br
Site
da
Fundação
de
Estudos
e
Pesquisas
Sócio-Econômicas
(FEPESE). Possui informações bastante específicas sobre posturas e comportamentos que o acadêmico deve ter perante as empresas e possíveis empregadores. Disponibiliza banco de vagas de estagio e fornece apoio total ao acadêmico, assim como informações importantes sobre legislação de estágios. O site é voltado ao público acadêmico em geral, sem foco em design.
19
IEL
Figura 5 – Portal do IEL Fonte: www.iel.com.br
Site do Instituto Euvaldo Lodi, tem como foco auxiliar as empresas ligadas ao instituto na busca de capital intelectual em formação. Possui informações interessantes sobre o mercado de trabalho, legislação vigente sobre programas de estágios, empreendedorismo, entre outros serviços. Não possui foco em design e não tem a região da Grande Florianópolis como delimitação, é focado para o Brasil todo.
20
FREELA
Figura 6 – Portal Freela Fonte: ww.freela.com.br
Portal Freela, tem como público alvo qualquer pessoa que trabalhe com design, tanto profissionais e acadêmicos de cursos superiores de Design como profissionais auto-didatas e formados por cursos técnicos. Basicamente é um banco de portfólios e disponibiliza vagas de trabalho e participação em equipes de desenvolvimento de projetos.
21
Associação de Designers Gráficos do Brasil
Figura 7 – Portal da ADG Fonte: www.adg.com.br
Site bastante abrangente, contendo diversas informações a respeito do mercado de trabalho com foco em design, separadas pelas categorias estudante, profissional e professor. Disponibiliza trabalhos acadêmicos e profissionais dos associados, assim como dicas e informações referentes ao mercado de trabalho. Entretanto, para ter acesso a maioria das informações o usuário precisa preencher um cadastro e pagar uma taxa de associação, o que dificulta o acesso aumentando a taxa de rejeição do site.
22
Características de mercado A forma tradicional de se construir um portal é separando a parte técnica e o conteúdo. Os autores e editores de conteúdo ficam na dependência do web designer para poder atualizar os conteúdos ou acrescentar novos recursos. Quando existe mais de um web-designer com acesso a edição do portal, podem ocorrer falhas na comunicação entre os mesmos, ocasionando erros
gravíssimos
na
programação
do
portal
e
por
conseqüência
desestruturando-o. A solução que vem sendo utilizada por portais conhecidos é a utilização de gerenciadores de conteúdos, onde é possível determinar níveis de edição para múltiplos usuários, sem necessidade de alteração da programação do portal.
Atualmente existem três tipos mais conhecidos, o WORDPRESS,
DRUPAL e JOOMLA. O mais utilizado na construção de portais é o JOOMLA, um sistema gerenciador de conteúdos de utilização gratuita, ganhador do prêmio Linux awards. Com ele é possível administrar remotamente as informações contidas no portal, bastando apenas um computador com uma conexão com a internet e um browser instalado. Ele permite que ele faça a alterações do site direto em seu servidor, sem a necessidade de um programa para edição para web.
23
Tendências Para ter uma melhor noção de estilos, cores, formas e recursos que se identificassem com os desejos do público alvo, foi solicitado aos estudantes entrevistados que avaliasse diversos portais (fig.8), que considerassem atraentes, com o objetivo final de definir tendências em alta no mercado.
Figura 8 – Portais de referência Fonte: Autor
24
Dentre os portais analisados pelo público alvo podemos destacar os seguintes:
Abduzeedo
Figura 9 – Portal Abduzeedo Fonte: www.abduzeedo.com
AwakeMagazine
Figura 10 – Portal Awake Magazine www.awakemagazine.com
25
Rede Design Brasil
Figura 11 – Portal Rede Design Brasil Fonte:www.designbrasil.org
Core 77
Figura 12 – Portal Core 77 Fonte: www.core77.com
26
NDesign
Figura 13 – Portal NDesign Fonte:www.ndesign.org.br
Foram constatadas as seguintes tendências entre os portais analisados:
Utilização de gerenciadores de conteúdos
Conteúdos organizados por categorias,
Rápido carregamento pelo browser
Recurso como slideshows, galerias de imagens, menus dinâmicos. Planos de fundo neutros que dão destaque ao conteúdo que está na frente.
Estética agradável e “clean”. Durante a análise dos portais, também foi coletado informações sobre seus wireframes e disposição de informações, com o objetivo de utilizar esses dados na estruturação do portal Profissão Designer.
27
CAPÍTULO 3 – FASE CONCEITUAL
Conceitos Gerados para solucionar o problema
Através da análise dos dados levantados, foi identificado que para o portal atingir os objetivos estabelecidos, ele deve seguir conceitos de:
Colaboração: Permitir que usuários possam colaborar com o portal, através do envio e troca de informações.
Atualização: Manter seu conteúdo atualizado, sem alteração de sua programação, e com local de destaque para as informações mais atualizadas.
Clareza: Exibir o conteúdo de forma clara e de fácil entendimento para o usuário, sem elementos que distraiam a atenção dos mesmos ao navegar pelo portal.
Rapidez: Carregar rapidamente as informações para o browser do usuário, proporcionando o mínimo possível de ociosidade ao ser realizada a navegação pelo portal.
Veracidade: Informar ao usuário dados sobre as fontes dos conteúdos expostos.
Organização: Organizar suas informações por categorias.
28
Conceitos Utilizados:
Colaboração: Através da utilização de um fórum, com tópicos alimentados por uma enquete na pagina inicial, acadêmicos e profissionais formados em design podem discutir a respeito do mercado de trabalho e colaborar com o crescimento do portal através de uma troca de informações. Usuários do portal também podem postar artigos referentes ao mercado de trabalho, após a aprovação de um administrador.
Atualização: Através da utilização de um gerenciador de conteúdos, é possível estabelecer diferentes níveis de acesso, permitindo que outras pessoas possam ajudar a atualizar conteúdos do portal. É possível que eles atualizem conteúdos sem alterar a programação do portal.
Clareza: A utilização de um plano de fundo neutro, e elementos gráficos leves como caixas transparentes para os menus e as chamadas, possibilitam que o usuário concentre sua atenção no conteúdo exposto e não se distraia durante a navegação.
Veracidade: Através da utilização de hiperlinks, é possível levar o usuário às páginas que contém a fonte das informações postadas, assim como informações sobre os autores dos artigos postados.
Organização: Disponibilizando as informações separadas por categorias. A apresentação do portal, notícias sobre eventos, cursos abertos e outras informações mais atualizadas devem ter maior destaque, para que os acadêmicos encontrem rapidamente ao acessar o portal.
O espaço para a exposição dos trabalhos acadêmicos deve se assemelhar aos expostos em murais nas faculdades, ou seja, devidamente identificados, passando por um critério de seleção para exposição.
29
CAPÍTULO 4 – FASE PRODUTIVA
4.1 Geração de alternativas Utilizando como base os conceitos gerados durante a etapa de criatividade, foi possível construir um mapa mental (fig. 14) para organizar as informações através de categorias.
Figura 14 – Mapa mental Fonte: autor
Com o auxílio de uma malha construtiva (fig. 15) foi possível elaborar uma primeira proposta de wireframe dividida em duas partes. A malha construtiva serviu de parâmetro para que o portal seja enquadrado na regra dos terços, técnica utilizada na fotografia para composição de imagens.
30
Figura 15 – Malha construtiva Fonte: Autor
(parte 1)
(Parte 2)
Utilizando como base as informações geradas durante as etapas de pesquisas e criatividades, foi possível gerar uma primeira proposta de wireframe (fig. 16) contemplando os recursos desejados pelo público alvo.
31
Figura 16 – Modelo de Wireframe Fonte: Autor
32
4.2 Projeto detalhado 4.2.1 Tecnologia Utilizada Optou-se pela utilização do gerenciador de conteúdos Joomla no desenvolvimento do portal, pois ele permite que as atualizações sejam realizadas através do painel de controle (fig. 17) diretamente em um browser, sem a necessidade de instalação de nenhum programa de edição. Essa característica do sistema permite que várias pessoas possam editá-lo remotamente, facilitando a atualização constante do portal.
Figura 17 – Painel de controle do Joomla Fonte: autor
Todavia, o administrador do portal decide quais os níveis de acesso ao sistema que cada usuário pode ter, decidindo que componentes ou conteúdos outros administradores podem editar (fig. 18).
Figura 18 – Níveis de acesso Fonte: Autor
33
As principais vantagens de se utilizar o Joomla são:
Atratividade estética, funcionalidade e qualidade na disposição de conteúdos.
Escrito com linguagem PHP e com banco de dados mysql, é suportado pela maioria dos servidores, inclusive os gratuitos.
Sua utilização é completamente gratuita.
Possibilidade de adaptações e reestruturações de conteúdos e ferramentas.
Sistema de administração remota com acessos controlados.
Áreas de acesso restrito mediante sistema de login e senha.
Suporta a integração com praticamente todas as tecnologias web existentes, como Flash, Ajax, Silverlight, Vídeos, Sons, etc.
34
4.2.2 Sitegrama Um sitegrama é um diagrama que representa a organização hierárquica e o fluxo de navegação de um website. O objetivo do sitegrama é representar a macroestrutura do portal com nível de detalhe para que seja possível entender completamente o funcionamento do website.
Figura 19 – Sitegrama Fonte: Autor
35
4.2.3 Wireframe A construção do wireframe tem como objetivo retratar de forma simples e resumida a arquitetura de informação do Portal. Basicamente é o esqueleto do portal, servindo de suporte para a montagem da interface com o usuário.
Figura 20 – Wireframe Fonte: Autor
36
Wireframe detalhado
Figura 21 – Wireframe Detalhado Fonte: Autor
37
4.2.4 Interface A interface com o usuário é divida em CABEÇALHO, MENU, MÓDULOS e RODAPÉ, conforme a figura 22. Foi escolhido o azul como cor principal por se tratar de uma cor fria que transmite calma, harmonia e não ser agressivo aos olhos, tornando a leitura do conteúdo mais leve e fácil de assimilar. O cabeçalho, menu principal, e os demais módulos do portal foram dispostos em caixas transparentes para dar mais leveza ao portal e destaque aos conteúdos exibidos.
Cabeçalho Menu
Módulos
Rodapé
Fig 22 – Interface Fonte: Autor
38
CABEÇALHO
Possui a logo do portal profissão design (fig. 23), uma ferramenta de buscas interna e um menu auxiliar (fig. 24) que permite que ao usuário customizar o portal, podendo escolher 3 tipos cores para o fundo (fig. 25), e tamanhos de fontes variados.
Figura 23 – Logo Profissão Designer
Figura 24 – Menu auxiliar Fonte: Autor
Fig 25 – Variações Cromáticas Fonte: Autor
39
MENU PRINCIPAL
Para auxiliar o usuário a encontrar facilmente a informação desejada, ele é composto pelas seguintes categorias:
Página Inicial – Link interno que leva o usuário a página inicial do portal Informações Úteis – Composto pelas seguintes seções:
Fig 26 – Informações Úteis Fonte: Autor
Dicas Profissionais – Blog com artigos postados por designers profissionais, dando dicas pessoais sobre como se inserir no mercado de trabalho.
Lei de Estágio – Abre um arquivo em pdf com a cartilha de orientação sobre estágio, fornecido pelo portal do ministério do trabalho
Código de Ética dos Designers – Abre um arquivo em pdf contendo o
código de ética da ADG
Modelo de Curriculum – Disponibiliza modelos de curriculuns Vitae e dicas de como monta-lo.
40
Modelo de Portfolium - Disponibiliza modelos de portfoliuns e dicas de como montar seu próprio portfólio.
Proteção Legal – Link para uma seção do portal Rede Design Brasil, onde existem informações sobre propriedade industrial, registro de patentes, marcas, etc.
Emissão de Nota fiscal – link para página do Portal Pró Cidadão, onde é possível preencher uma ficha cadastral para geração de nota fiscal de pessoa física. Importante para poder realizar serviços autônomos.
Notícias - Informações separadas nas seguintes categorias: Eventos, Palestras, Exposições e Cursos. Existe a opção de ver todos as postagens em uma lista clicando apenas em notícias.
Figura 27 – Notícias Fonte: Autor
Artigos - Artigos enviados por colaboradores, com tema Mercado de Trabalho. Podem ser escritos por qualquer usuário cadastrado, porém de aprovação do administrador para serem publicados no portal.
41
Tutoriais - Links para portais com os tutoriais mais pedidos pelos usuários.
MÓDULOS Utilizando o princípio de modularidade do joomla, foram criados os seguintes módulos para disponibilização das informações:
Figura 28 – Módulos Fonte: Autor
42
Notícias
Figura 29 – Módulo de Notícias Fonte: Autor
Slideshow automático que fica passando as informações mais atuais dividas e de destaque no portal.
43
Trabalhos Acadêmicos
Figura 30 – Modulo Trabalhos Acadêmicos Fonte: Autor
O espaço para a exposição dos trabalhos acadêmicos se assemelha aos expostos aos murais das faculdades, servido de inspiração a outros acadêmicos. São identificados com os dados do acadêmico e passam por um processo de seleção que avalia se pode ser exposto ou não. As pranchas possuem dimensões de 500px por 500px.
vagas
Figura 31 – Módulo de Vagas Fonte: Autor
44
Informações sobre vagas de trabalho separadas pelas categorias mais conhecidas: Estagio, Trabalho contratado e Freelance. Contém links para agências de estágio e empresas com informações sobre a vaga exposta.
Chamadas
Figura 32 – Módulo de chamadas Fonte: Autor
Chamadas para eventos, cursos, palestras e exposições. Além de texto, as chamadas devem utilizam imagens para atrair o interesse do observador.
45
Enquete e Fórum
Figura 33 – Módulos enquete e fórum Fonte: Autor
A Enquete fica logo ao lado da caixa de cadastro para entrar no fórum, sempre com temas relacionados ao mercado de trabalho e em pauta dentro do fórum. Para acessar o fórum é preciso fazer se logar através do preenchimento de um simples cadastro. Após logado, aparece a seguinte caixa com os dados do usuário (fig. 34), abre-se o item fórum no meu principal (fig. 36) e aparece um menu do usuário onde ele pode submeter artigos, que após avaliados por um administrador, pode ser publicados no portal (fig. 35).
Figura 34 – Login Fórum Fonte: Autor
Figura 35 – Menu do usuário Fonte: Autor
46
Figura 36 – Fórum Fonte: Autor
Menu auxiliar
Localizado logo abaixo da enquete, com os itens do menu principal para que o usuário não se perca ao navegar no portal.
Figura 37 – Menu auxiliar Fonte: Autor
47
Links Recomendados
Links para portais com temas relacionados e que foram utilizados como fonte de informação.
Figura 38 – Links recomendados Fonte: Autor
Estatísticas
Com a finalidade de transparecer ao público dados do portal, proporcionando maior confiança ao usuário.
Figura 39 – Estatísticas Fonte: Autor
48
Rodapé
Traz dados do portal referentes as últimas postagens, tópicos mais visualizados, tags mais procuradas e dados do autor.
Figura 40 – Rodapé Fonte: Autor
4.3 Testes Foram realizados testes nos browsers Internet Explorer, Mozilla Firefox e opera, que de acordo com o último relatório do w3counters (website de análises na web), mais utilizados para se navegar na internet. O portal Profissão Designer funcionou em todos eles sem apresentar nenhum erro ao carregar conteúdos
49
Conclusão e estudos futuros Além de auxiliar os acadêmicos de design a se inserirem no mercado de trabalho, o estudo apresentado foi de grande auxilio na prospecção de novas tendências para disponibilização de conteúdos na web. Através dele foi possível avaliar os gerenciadores de conteúdos existentes e disponibilizar informações sobre uma ferramenta de uso profissional de grande utilidade aos designers. O maior desafio foi dominar em tempo hábil uma ferramenta ainda nova no mercado (joomla) e simultaneamente gerar conteúdos através de pesquisas e análise de dados. Como estudo futuro pretende-se ampliar a área de aplicação do portal além da região da Grande Florianópolis, utilizando como indicadores pesquisas em faculdades de design de toda Santa Catarina. Pretende-se também ampliar os conteúdos do portal, através de informações fornecidas pelos próprios usuários. Devido ao fato de sua programação não ser “engessada” e permitir que vários editores possam atualizar suas informações, o portal profissão designer tem potencial de ser uma ferramenta de auxilio à acadêmicos de todo o Brasil a se inserirem no mercado de trabalho, pois pode ser utilizado como base para o desenvolvimento de portais regionais independentes.
50
REFERÊNCIAS STRUNK, Gilberto. Viver de Design. Editora 2AB, 5º Edição – 2007. SOARES, D. A Globalização numa perspectiva sociocibernética, In: Revista Contracampo, nº1. Mestrado da UFF, jul/dez/1997. Disponível em: www.uff.br/mestcii/cc2 CYBIS, W.; BETIOL, A. H; FAUST, R. Ergonomia e Usabilidade – Conhecimentos, Métodos e Aplicações. São Paulo: Novatec Editora, 2007. ROCHA, H. V.; BARANAUSKAS, M. C. C. Design e Avaliação de Interfaces Humano-Computador. Campinas/SP: NIED/UNICAMP, 2003. RUDIO, Franz Victor. Introdução ao projeto de pesquisa. Editora Vozes, 2003.
REDE DESIGN BRASIL. www.designbrasil.org.br Ministério do Trabalho, Cartilha Esclarecedora sobre a Lei do Estágio - Lei nº 11.788/2008 Centro de integração Empresa-Escola, www.ciee.org.br
Fundação de Pesquisas e Estudos Sócio-Econômicos, www.fepese.ufsc.br
Instituto Evaldo Lodi, http://www.iel.org.br
Associação de Designer Gráficos do Brasil, http://www.adg.com.br
http:// www.Joomla.org
http://www,cognetics.com
51
APÊNDICES Apêndice 1 (pesquisa qualitativa)
Ex-alunos de cursos superiores de Design atuantes no mercado de trabalho.
1 – O que o mercado de trabalho espera dos acadêmicos de Design; a) Quanto a sua postura?
b) Quanto às habilidades e domínios de ferramentas?
c) Quanto aos conhecimentos de outras áreas?
2 – Em geral, o que carece nos estudantes de hoje, em relação ao seu preparo profissional?
3 – Que informações são de fundamental importância ao acadêmico de design que almeja ou está em processo de inserção no mercado de trabalho?
4 - Um portal para web seria uma ferramenta eficaz para a divulgação de tais informações aos acadêmicos?
52
Apêndice 2 (Pesquisa Quantitativa)
Acadêmicos de Design
1 – Trabalha na área? Sim – Quais foram as principais dificuldades para se inserir no mercado de trabalho?
Não – Tem dificuldade para se inserir? Quais?
2 – Sua faculdade lhe dá apoio suficiente para inserção no mercado de trabalho? Sim – De que maneira ela lhe auxilia?
Não – Que tipo de apoio ou informações lhe auxiliariam?
3 – Considera um portal para web uma ferramenta eficaz na distribuição de tais informações?