Projeto Web UFAC

Prévia do material em texto

Projeto Web 
Universidade Federal do Acre 
 
 
 
 
 
 
 
 
Guilherme Santos da Rocha – 2016100496 
Andersom Malvino Marque – 2015200352 
Leandro Martins Calazans – 2015100552 
 
 
 
 
 
 
 
2018 
 
1. APRESENTAÇÃO DO PROJETO 
 
1.1 Introdução 
Ultimamente a internet tem avançado com uma velocidade incrível, podendo 
proporcionar diversificados tipos de experiências. Além de entretenimento, a internet 
nos dá a possibilidade de fazer coisas necessárias do dia a dia, como pegar matéria 
no site da faculdade em que cursamos, certo? 
Pensando nesse assunto específico, o uso de um site universitário, é necessário ter 
um bom layout de página com as informações corretas para os usuários do site, seja 
ele um calouro, um aluno veterano, professor e até mesmo coordenadores. 
Existem diversas universidades espalhadas por todo o país, e todas elas com seus 
respectivos sites. Nesse projeto iremos apresentar um deles. 
 
1.2 Problematização 
O site escolhido foi a UFAC (Universidade Federal do Acre). Nele pode-se notar que 
há falha de alinhamento, repetição de links desnecessários, organização do site feita 
de forma não coesa. A quantidade de informação que o site proporciona ao usuário é 
desgastante antes da leitura ser iniciada. A distribuição de elementos se torna 
prejudicial para quem o usa, e a navegação não é intuitiva. 
Buscando soluções, vemos que para esse site é necessário harmonia, padrões bem 
demarcados, alinhamento e o bom posicionamento de seus elementos. Com o 
desenvolvimento de Card-Sorting e de outras técnicas é possível fazer o site ser 
funcional e excelente. 
 
1.3 Público Alvo 
A pesquisa do público alvo é importante para tomada de decisões, como cores, fonte, 
imagens e etc. Com essa pesquisa é possível corresponder melhor ao usuário, 
Sem muito mistério, é fácil entender quem irá utilizar o site da universidade. Alunos e 
professores. 
Os alunos devem sempre estar em contato com o site da universidade, isso ajuda a 
mantê-los cientes de cada detalhe, ajuda a mantê-los por dentro de toda matéria que é 
passada em sala de aula. Os professores precisam sempre utilizar o site para postar 
matérias e se guiar em sala de aula. 
 
2. Levantamento de Dados 
 
2.1 Análise do site atual 
Como é possível observar, o site consta de repetições desnecessárias, como já havia 
sido dito anteriormente, de links como “Ouvidoria” na página inicial. 
 
 
Em determinadas ocasiões percebe-se a falta de alinhamento dos elementos do site. 
Isso proporciona uma falta de harmonia aos usuários. As linhas azuis são os 
alinhamentos corretos, e as linhas vermelhas representam a falta de alinhamento. 
 
O espaço destinado aos editais da faculdade, tem um layout não coeso e com muita 
informação ao mesmo tempo. Isso causa cansaço ao usuário que necessita acessá-
los, e não é cansaço que devemos causar. 
 
 
O mesmo cansaço ocorre nos menus laterais ao decorrer da página. Não é justo ficar 
rolando a página inteira para achar o necessário. 
 
 
 
 
 
 
 
 
 
 
 
 
 
2.2 Análise de similares 
Sites de universidades federais costumam ser bastante carregados de informação, e 
não costumam ter muita preocupação com a estética em si. O site da UFRJ 
(Universidade Federal do Rio de Janeiro) é um outro exemplo disso. 
 
Mais um exemplo disso é a UFSP (Universidade Federal de São Paulo).
 
2.3 Personas 
Personas nada mais são do que o nosso público alvo, mas com a possibilidade de ter 
diversas e diferentes características. No projeto de um site, é necessário a criação de 
personas para que nos ajude a chegar em nosso público alvo mais efetivamente. 
A seguir estão quatro personas criadas para o projeto: 
Felipe - 25 anos, solteiro e não possui filhos. 
Hábitos - Cuida da casa, procura sempre visitar parentes próximos, gosta de conviver 
com círculos de amizades e sair quando pode. 
Necessidades e Objetivos - Trabalha como vendedor de roupas para manter sua 
moradia. 
 
Marisa - 17 anos, solteira e não possui filhos. 
Hábitos - Participa do grupo jovem da igreja, está se formando no ensino médio, usa o 
celular sempre que pode. 
Necessidades e Objetivos – Quer fazer pedagogia, ajuda a mãe sempre que pode 
em tarefas caseiras, ter tempo pra ficar com suas amigas. 
 
Janaina - 45 anos, é mãe e trabalha fora de casa, casada e mora em apartamento. 
Hábitos - Trabalha como autônoma vendendo roupas em quitanda, se sente 
desnorteada quando tem a sensação de “esquecer” alguma coisa e dorme cedo. 
Necessidades e Objetivos - Conseguir ter todos os filhos formados, tempo pra sair 
um pouco a sós com o marido, criar sua própria confecção e vender suas próprias 
roupas. 
 
Ismael - 20 anos, namorando, não tem filhos. 
Hábitos - Tem o costume de jogar bola uma vez por semana, trabalha com seu pai a 
tarde em um consultório dentário, sempre que pode vai ao estádio assistir jogo. 
Necessidades e Objetivos - Tirar notas máximas na faculdade, precisa levar o irmão 
na escola, sempre que pode toca guitarra. 
 
 
 
 
 
 
 
2.4 Card-Sorting 
Técnica utilizada para tentar definir a organização de uma estrutura pensada para um 
projeto e apreender o modelo mental do público alvo do produto em questão. Isso 
permite a identificação de problemas de associação entre itens, navegação e 
nomenclatura.
 
 
 
 
3. Estruturação 
 
3.1 Diagrama de Navegação 
Um diagrama de navegação é um diagrama temporário não editável que mostra os 
resultados de uma consulta em um elemento do diagrama de contexto. 
 
3.2 Inventário de Conteúdo 
O inventário de conteúdo sugere um levantamento de dados disponíveis. Estes dados 
estão organizados entre conteúdos e informações. 
 
 
 
4. Produção 
 
4.1 Wireframe 
Os wireframes ajudam a termos uma certa visualização do site antes de ter coisas 
definidas. O ato de não definir os elementos de primeira, ajuda na identificação de 
possíveis erros e possíveis novas ideias. 
Na próxima página está os wireframes feitos e suas respectivas descrições. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4.2 Paleta de cores 
Para esse projeto, a paleta de cores foi algo bem simples de escolher. Apenas usando 
o branco e tons de azul. 
 
 
 
Respectivamente: #202c52, #223464 e #ffffff 
 
5. Resultado 
 
5.1 Tela da página inicial 
Nova página inicial da UFAC. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5.2 Telas de páginas internas 
Mais duas páginas internas para o site.