Este documento descreve o processo de prototipagem de um site para o vestibular da UNOPAR em 3 níveis: 1) Protótipo de baixo nível feito a caneta para testar ideias iniciais 2) Protótipo de médio nível usando o software Axure para refinar a interface 3) Protótipo de alto nível criado no Photoshop e Illustrator para simular a versão final do site.

1. CENTRO DE CIÊNCIAS EXATAS E TECNOLÓGICAS
TECNOLOGIA EM ANÁLISE E DESENVOLVIMENTO DE SISTEMAS
ANDERSON DA VISITAÇÃO MORAIS, EDIRSON DIAS, EDUARDO
BERTOLUCCI E RENNAN MARTINI
IHC – PROTOTIPAÇÃO
Londrina
2010

2. SUMÁRIO
1 INTRODUÇÃO .......................................................................................... 1
2 REQUISITOS ELABORADOS ................................................................... 2
3 PROTÓTIPO DE BAIXO NÍVEL ................................................................ 3
4 PROTÓTIPO DE MÉDIO NÍVEL ............................................................... 6
5 PROTÓTIPO DE ALTO NÍVEL ................................................................ 10
CONCLUSÃO .......................................................................................................... 15

3. 1
1 INTRODUÇÃO
Neste portfólio foi realizado a prototipação do projeto iniciado no
semestre anterior. Utilizamos os requisitos levantados anteriormente, assim como
aprofundamos aqueles que ainda estiveram vagos para o desenvolvimento. Foram
feitos:
- Protótipo de baixo nível (todas as versões)
- Protótipo de médio nível (todas as versões)
- Protótipo de alto nível (versão final)

4. 2
2 REQUISITOS ELABORADOS
a) O que fazer?
- Site para o Vestibular UNOPAR 2010
b) Para quem?
- Pessoas que já concluíram ou vão concluir o Ensino Médio.
c) Caracterizar? Perfil do usuário
- Perfil médio. Necessita de conexão a internet.
d) Objetivos? Por quê? Como?
- Agilizar o processo de inscrição para o vestibular,
disponibilizando informações sobre os cursos, Busca,
Inscrição Online, impressão de boleto, reimpressão de boleto
e resultado do vestibular.

5. 3
3 PROTÓTIPO DE BAIXO NÍVEL
Esta fase do Projeto de Interface tem como objetivo dar inicio a
prototipação. Para começar o protótipo, primeiro foi pesquisado na internet sites de
vestibulares de faculdades e universidades da região de Londrina.
Utilizamos a prototipação em papel para buscar novas idéias e para
enriquecer as interfaces. Abaixo segue uma lista com os protótipos feitos a caneta.
São protótipos de baixa fidelidade que ajudou na colaboração e aproveitamento de
idéias reduzindo o risco de retrabalho.
Figura 1 – protótipo baixa fidelidade – página inicial

6. 4
Figura 2 – protótipo baixa fidelidade – página cursos ofertados
Figura 3 – protótipo baixa fidelidade – página inscrição

7. 5
Figura 4 – protótipo baixa fidelidade – página de ensino presencial
Figura 5 – protótipo baixa fidelidade – página fale conosco

8. 6
4 PROTÓTIPO DE MÉDIO NÍVEL
Nessa segunda faze do projeto utilizamos o software Axure seguindo
sugestão da professora Daniela. Seguindo como referencia alguns sites de
vestibular, utilizamos como base os mesmos para padronizar a estrutura de
navegação e de design.
A partir do conceito de que o ser humano, independente de sua
origem, percebe as imagens visualmente da esquerda para a direita, de cima para
baixo, e também após ter constatado em pesquisas onde vários sites utilizam desse
modelo. Optamos em utilizar a logo marca da empresa, situada na parte esquerda
superior, ou seja, em todas paginas a logo marca estará situada neste local. O
mesmo acontece para o titulo da página.
Figura 6 – protótipo baixa fidelidade – página inicial

9. 7
Figura 7 – protótipo baixa fidelidade – página cursos ofertados

10. 8
Figura 8 – protótipo baixa fidelidade – página inscrição

11. 9
Figura 9 – protótipo baixa fidelidade – página de ensino presencial
Figura 10 – protótipo baixa fidelidade – página fale conosco

12. 10
5 PROTÓTIPO DE ALTO NÍVEL
Para o desenvolvimento da versão final de nosso site para o
vestibular, nos utilizamos do refinamento dos protótipos desde sua versão de baixo
nível até a versão de médio nível. De um nível para outro, as melhorias foram
significativas.
A versão final (protótipo de alto nível) foi feita nos softwares Adobe
Photoshop e Adobe Illustrator, padronizando a resolução convencional de um
website (1024x768 pixels). Esses softwares fornecem ferramentas de edição que
possibilita trabalhar com elementos visuais, como texturas e degradê.
Figura 11 – Protótipo de alta fidelidade - Página Inicial

13. 11
Figura 12 – Protótipo de alta fidelidade – Cursos Ofertados

14. 12
Figura 13 – Protótipo de alta fidelidade – Página de Inscrição

15. 13
Figura 14 – Protótipo de alta fidelidade – Página de Ensino Presencial

16. 14
Figura 15 – Protótipo de alta fidelidade – Página Fale Conosco

17. 15
CONCLUSÃO
Com este trabalho de prototipação em etapas desde o baixo, médio
e alto nível percebemos que novos itens são adicionados a cada etapa. Sendo
assim o refinamento ocorre desde á analise de requisitos até a fase de
implementação do projeto. Esse método valida muitas informações que ainda como
requisitos parecem ser úteis e quando prototipadas parecem ser sem utilidade.